2620227
bc1327a6dc
public/css/{tokens,base,layout,components,modal}.css 로 분리하고 _header 에서 다중 link 로드.
tokens.css 에 Pretendard @font-face(public/fonts/PretendardVariable.woff2, 없으면 시스템 폰트 폴백).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
70 lines
4.4 KiB
CSS
70 lines
4.4 KiB
CSS
/* 리셋 · 타이포 · 공용 유틸(.btn/.tag/.avatar) · 로그인 · 키프레임 · 반응형. */
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body { margin: 0; padding: 0; }
|
|
|
|
html, body { background: var(--bg); color: var(--fg); }
|
|
body {
|
|
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', 'Malgun Gothic', sans-serif;
|
|
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
|
|
transition: background-color .25s ease, color .2s ease;
|
|
}
|
|
::selection { background: color-mix(in srgb, var(--link) 22%, transparent); }
|
|
::placeholder { color: var(--fg3); }
|
|
a { color: inherit; text-decoration: none; }
|
|
svg { display: block; }
|
|
.tabnum { font-variant-numeric: tabular-nums; }
|
|
|
|
/* 공통 아바타 래퍼 (identicon 헬퍼가 사용) */
|
|
.avatar {
|
|
display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
|
|
overflow: hidden; background: var(--avatar-bg);
|
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 6%, transparent);
|
|
}
|
|
|
|
.tag { font-size: 11px; font-weight: 500; color: var(--accent-fg); background: var(--accent-bg); border-radius: 999px; padding: 1px 9px; }
|
|
|
|
/* 버튼/링크 공용 (단독 페이지·로그인) */
|
|
.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: 8px; padding: 8px 14px; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--fg); transition: background .14s ease; }
|
|
.btn:hover { background: var(--btn-hover); }
|
|
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
|
|
.btn-primary { background: var(--link); border-color: color-mix(in srgb, var(--fg) 12%, transparent); color: #fff; }
|
|
.btn-primary:hover { filter: brightness(1.06); }
|
|
.btn-success { background: var(--success); border-color: color-mix(in srgb, var(--fg) 12%, transparent); color: #fff; }
|
|
.btn-success:hover { background: var(--success-hover); }
|
|
.muted { color: var(--fg2); }
|
|
.back-link { font-size: 13px; color: var(--fg2); }
|
|
.back-link:hover { color: var(--link); }
|
|
|
|
/* 로그인 폴백 페이지 */
|
|
.login-wrap { min-height: calc(100vh - 60px); display: flex; align-items: center; justify-content: center; padding: 24px; }
|
|
.login-card { width: 100%; max-width: 360px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 24px var(--shadow); padding: 32px 28px; text-align: center; }
|
|
.login-logo { margin-bottom: 12px; }
|
|
.login-title { font-size: 20px; font-weight: 800; letter-spacing: .06em; margin-bottom: 18px; }
|
|
.alert { background: var(--attn-bg); border: 1px solid var(--attn-bd); color: var(--attn-fg); border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 16px; }
|
|
|
|
/* 단독 상세 페이지(project.ejs) */
|
|
.detail-wrap { max-width: 760px; margin: 0 auto; padding: 28px 24px 64px; }
|
|
|
|
/* 애니메이션 키프레임 */
|
|
@keyframes aidev-flyup { 0%{transform:translateY(0) scale(.5);opacity:0} 12%{opacity:1} 100%{transform:translateY(-180px) scale(1.15);opacity:0} }
|
|
@keyframes aidev-sparkle { 0%{transform:scale(0) rotate(0);opacity:1} 100%{transform:scale(1.5) rotate(120deg);opacity:0} }
|
|
@keyframes aidev-rocket { 0%{transform:translateX(-40px) rotate(-12deg);opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{transform:translateX(calc(100vw + 60px)) rotate(-12deg);opacity:0} }
|
|
@keyframes aidev-shake { 10%,90%{transform:translateX(-1px) rotate(-1deg)} 20%,80%{transform:translateX(2px) rotate(1.5deg)} 30%,50%,70%{transform:translateX(-4px) rotate(-2deg)} 40%,60%{transform:translateX(4px) rotate(2deg)} }
|
|
@keyframes aidev-stamp { 0%{transform:scale(2.4) rotate(-22deg);opacity:0} 55%{transform:scale(.86) rotate(-11deg);opacity:1} 100%{transform:scale(1) rotate(-11deg);opacity:1} }
|
|
@keyframes aidev-pop { 0%{transform:scale(.96) translateY(6px);opacity:0} 100%{transform:scale(1) translateY(0);opacity:1} }
|
|
@keyframes aidev-fade { from{opacity:0} to{opacity:1} }
|
|
@keyframes aidev-toast { 0%{transform:translateX(-50%) translateY(12px);opacity:0} 12%{transform:translateX(-50%) translateY(0);opacity:1} 88%{transform:translateX(-50%) translateY(0);opacity:1} 100%{transform:translateX(-50%) translateY(8px);opacity:0} }
|
|
|
|
/* 반응형 */
|
|
@media (max-width: 900px) {
|
|
.tools-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.myproj-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.feed-grid { grid-template-columns: 1fr; }
|
|
.brand-sub { display: none; }
|
|
}
|
|
@media (max-width: 560px) {
|
|
.tools-grid, .myproj-grid { grid-template-columns: 1fr; }
|
|
.hdr-search { display: none; }
|
|
}
|