/* 리셋 · 타이포 · 공용 유틸(.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; }
}