@charset "UTF-8";
/* ==========================================================================
   김지수 · 게임 기획자 포트폴리오
   Style : Claude (ivory · deep sage green · clay coral) · Pretendard · light/dark
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette — Claude: Ivory · Deep Sage · Clay Coral */
  --aubergine: #344b40;   /* 딥 세이지 그린 (상단 바·덱 뒷면·활성 배경) */
  --ghost-lavender: #f3e4db; /* 소프트 코랄 틴트 (칩) */
  --periwinkle: #d4a27f;  /* 크래프트 탄 (어두운 면 위 고스트) */
  --cornflower: #6e6e68;
  --buttercream: #ebdbbc;
  --blush: #f3e4db;
  --mint: #c15f3c;
  --paper: #f5f1e9;       /* 밝은 오프화이트 (어두운 면 위 텍스트/버튼 글자) */
  --obsidian: #262625;
  --fog: #6e6e68;
  --ash: #dedacf;
  --bone: #e8e5db;
  --gold: #d4a27f;        /* 크래프트 탄 포인트, 아주 소량 */

  /* Semantic — LIGHT (default) */
  --bg:          #f0eee6;
  --bg-elev:     #e8e5db;
  --surface:     #faf9f5;
  --surface-2:   #e8e5db;
  --border:      #dedacf;
  --border-2:    #cfc9bb;
  --text:        #262625;
  --text-muted:  #6e6e68;
  --heading:     #141413;
  --accent:      #c15f3c;        /* '정면' 강조 · 링크 (클레이 코랄) */
  --accent-soft: #d97757;
  --cta:         #f3e4db;        /* 칩/알약 소프트 배경 */
  --cta-text:    #a54e30;
  --cta-hover:   #ebd6c9;
  --ghost-c:     #c15f3c;
  --glow:        rgb(193 95 60 / .16);
  --btn-primary-text: #ffffff;

  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --font-mono: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;

  --tracking: -0.025em;

  --text-caption: 13px;
  --text-body-sm: 15px;
  --text-body: 16px;
  --text-subheading: clamp(17px, 1.2vw + 14px, 20px);
  --text-heading-sm: clamp(19px, 1.6vw + 15px, 24px);
  --text-heading: clamp(23px, 2.6vw + 16px, 30px);
  --text-heading-lg: clamp(30px, 5vw + 12px, 56px);
  --text-display: clamp(40px, 7vw + 12px, 96px);

  --gutter: 20px;
  --section-pad-y: 64px;
  --card-pad: 24px;
  --page-max: 1200px;

  --radius-card: 24px;
  --radius-pill: 100px;
  --radius-lg: 32px;

  --shadow-sm: var(--glow) 0 0 4px 0;
  --shadow-card: 0 1px 2px rgba(38,38,37,.04), 0 8px 24px rgba(52,75,64,.08);

  --nav-h: 60px;
  color-scheme: light;
}

@media (min-width: 768px) { :root { --gutter: 32px; --section-pad-y: 96px; --card-pad: 32px; } }
@media (min-width: 1080px){ :root { --gutter: 40px; --section-pad-y: 120px; --card-pad: 40px; } }

/* Semantic — DARK */
:root[data-theme="dark"] {
  --aubergine: #3c5a4b;   /* 다크: 배경보다 밝은 세이지 (바가 또렷하게 보이도록) */
  --ghost-lavender: #3f342e;
  --periwinkle: #d4a27f;
  --paper: #f0eee6;
  --ash: #47463f;
  --bone: #30302e;
  --bg:          #262625;
  --bg-elev:     #30302e;
  --surface:     #30302e;
  --surface-2:   #3a3a37;
  --border:      #47463f;
  --border-2:    #5a584f;
  --text:        #e8e6df;
  --text-muted:  #a9a79f;
  --heading:     #faf9f5;
  --accent:      #d97757;         /* 어두운 배경용 밝은 코랄 */
  --accent-soft: #e58a6b;
  --cta:         #3f342e;
  --cta-text:    #efa98b;
  --cta-hover:   #4a3d35;
  --ghost-c:     #d97757;
  --glow:        rgb(217 119 87 / .35);
  --btn-primary-text: #262625;
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4);
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  /* 페이지마다 스크롤바가 생기고 사라지면 가운데 정렬(상단 바 등)이 좌우로 흔들리므로
     항상 스크롤바 자리를 확보해 둔다. */
  scrollbar-gutter: stable;
}
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
  html:has(body.is-locked) { overflow: hidden; }   /* 폴백에서도 시트 열릴 때 스크롤 잠금 유지 */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: 1.6;
  letter-spacing: var(--tracking);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  transition: background-color .3s ease, color .3s ease;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 350; letter-spacing: var(--tracking); color: var(--heading); }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; letter-spacing: inherit; color: inherit; border: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
::selection { background: var(--ghost-lavender); color: var(--aubergine); }
:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  padding: 12px 24px; border-radius: var(--radius-pill);
  background: var(--cta); color: var(--cta-text); font-size: var(--text-body-sm);
  transition: top .2s ease;
}
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 16px); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* hidden 은 무조건 숨깁니다 — 브라우저 기본 [hidden] 규칙은 특이도가 0이라
   테마의 `[data-skin="…"] .gcard { display:flex }` 같은 규칙에 밀립니다.
   (프로젝트 목록의 분류 탭이 카드를 못 숨기던 원인) */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%; max-width: var(--page-max); margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
}
.section { padding-block: var(--section-pad-y); }
.section--elev { background: var(--bg-elev); }

.section__head { max-width: 46rem; margin-bottom: var(--spacing-48, 48px); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--cta); color: var(--cta-text);
  font-size: var(--text-caption); line-height: 1.35; letter-spacing: .02em; white-space: nowrap;
}
.eyebrow__num { opacity: .55; font-variant-numeric: tabular-nums; }
.section__title { font-size: var(--text-heading-lg); line-height: 1.14; letter-spacing: -0.03em; text-wrap: balance; }
.section__lead { margin-top: 20px; max-width: 42rem; font-size: var(--text-subheading); line-height: 1.55; color: var(--text-muted); }
.muted { color: var(--text-muted); }

.grid { display: grid; gap: 16px; }
@media (min-width: 700px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } .grid { gap: 24px; } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   4. Buttons, tags, badges
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 14px 28px;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font-size: var(--text-body); font-weight: 350; line-height: 1.2; letter-spacing: var(--tracking);
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
  touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--accent); color: var(--btn-primary-text); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--accent-soft); }
.btn--outline { border-color: var(--border-2); color: var(--heading); background: var(--surface); }
.btn--outline:hover { border-color: var(--accent-soft); }
.btn--sm { min-height: 40px; padding: 10px 20px; font-size: var(--text-body-sm); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.link-more {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px;
  border-radius: var(--radius-pill); background: var(--cta); color: var(--cta-text);
  font-size: var(--text-body-sm); line-height: 1.2; transition: background-color .18s ease, transform .18s ease;
}
.link-more:hover { background: var(--cta-hover); }
.link-more:active { transform: scale(.97); }
.link-more .arrow { transition: transform .18s ease; }
.link-more:hover .arrow { transform: translate(2px, -2px); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  display: inline-block; padding: 6px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-pill); background: var(--surface);
  font-size: var(--text-caption); line-height: 1.35; color: var(--heading);
}
.tag--lavender   { background: var(--ghost-lavender); border-color: transparent; color: var(--aubergine); }
.tag--butter     { background: var(--buttercream); border-color: transparent; color: var(--obsidian); }
.tag--blush      { background: var(--blush); border-color: transparent; color: var(--obsidian); }
.tag--cornflower { background: var(--cornflower); border-color: transparent; color: var(--paper); }

.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
  border-radius: var(--radius-pill); background: var(--mint); color: #fff;
  font-size: var(--text-caption); line-height: 1.35;
}
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* --------------------------------------------------------------------------
   5. Ghost mascot
   -------------------------------------------------------------------------- */
.ghost { display: inline-block; width: .78em; height: .86em; color: var(--ghost-c); vertical-align: -.08em; flex: none; }
.ghost--float { animation: bob 3.6s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8%)} }

/* 큰 고스트 일러스트 (사진 자리 대체) */
.ghost-art {
  position: relative; width: 100%; max-width: 380px; aspect-ratio: 4 / 5;
  border-radius: var(--radius-card); background: var(--bg-elev);
  border: 1px solid var(--border); display: grid; place-items: center; overflow: hidden;
}
.ghost-art::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 70% 20%, color-mix(in srgb, var(--periwinkle) 22%, transparent), transparent 60%);
}
.ghost-art .ghost { width: 42%; height: auto; aspect-ratio: 32/36; position: relative; }

/* --------------------------------------------------------------------------
   6. Header (collapsed, cursor-responsive)
   -------------------------------------------------------------------------- */
.nav-wrap {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 14px;
  pointer-events: none;
  /* 떠 있는 바 위/옆으로 스크롤 내용이 비치지 않도록 상단을 배경색으로 가리고 아래로 자연스럽게 페이드 */
  background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) 82%, transparent 100%);
}
.nav {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: var(--page-max);
  padding: 6px 6px 6px 16px;
  border: 1px solid var(--aubergine); border-radius: var(--radius-pill);
  background: var(--aubergine);                       /* 바 자체를 딥 세이지 그린으로, 내부는 크림 */
  box-shadow: 0 8px 24px -14px rgb(52 75 64 / .5);
  transition: max-width .38s cubic-bezier(.2,.8,.3,1), padding .3s ease, box-shadow .3s ease;
}

.nav__logo { display: inline-flex; align-items: center; gap: 8px; padding-right: 8px; min-width: 0; font-size: var(--text-body-sm); color: var(--paper); white-space: nowrap; }
.nav__logo .ghost { width: 22px; height: 24px; color: var(--paper); }
.nav__logo-en { display: none; color: rgb(246 243 236 / .6); font-size: var(--text-caption); }
@media (min-width: 560px) { .nav__logo-en { display: inline; } }

.nav__menu { display: none; }
@media (min-width: 1000px) {
  .nav__menu { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
  .nav__link { display: inline-flex; align-items: center; gap: 5px; padding: 9px 15px; border-radius: var(--radius-pill); font-size: var(--text-body-sm); color: rgb(246 243 236 / .82); white-space: nowrap; transition: background-color .18s ease, color .18s ease; }
  .nav__link:hover { background: rgb(255 255 255 / .12); color: var(--paper); }
  .nav__link.is-active { background: var(--paper); color: var(--aubergine); }
  .nav__link .chev { width: 4px; height: 7px; opacity: .5; flex: none; }
}
.nav__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (min-width: 1000px) { .nav__actions { margin-left: 0; } }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  background: rgb(255 255 255 / .12); color: var(--paper); transition: background-color .18s ease;
}
.icon-btn:hover { background: rgb(255 255 255 / .22); }

.lang-toggle { display: inline-flex; padding: 3px; border: 1px solid rgb(255 255 255 / .24); border-radius: var(--radius-pill); background: rgb(255 255 255 / .08); }
.lang-toggle__btn { padding: 7px 10px; border-radius: var(--radius-pill); font-size: var(--text-caption); color: rgb(246 243 236 / .7); line-height: 1; transition: background-color .18s ease, color .18s ease; }
.lang-toggle__btn[aria-pressed="true"] { background: var(--paper); color: var(--aubergine); }

.nav__burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-pill); background: rgb(255 255 255 / .12); color: var(--paper); }
@media (min-width: 1000px) { .nav__burger { display: none; } }
.nav__burger-lines { display: block; width: 18px; height: 10px; position: relative; }
.nav__burger-lines::before, .nav__burger-lines::after { content: ''; position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .24s ease, top .24s ease, bottom .24s ease; }
.nav__burger-lines::before { top: 0; } .nav__burger-lines::after { bottom: 0; }
.nav__burger[aria-expanded="true"] .nav__burger-lines::before { top: 4px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] .nav__burger-lines::after { bottom: 4px; transform: rotate(-45deg); }

/* 헤더 펼침 손잡이 (와이어프레임의 중앙 chevron) */
.nav-handle {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + 6px);
  left: 50%; transform: translateX(-50%); z-index: 99;
  display: none; align-items: center; justify-content: center;
  width: 56px; height: 26px; border-radius: 0 0 var(--radius-pill) var(--radius-pill);
  background: var(--surface-2); color: var(--heading); border: 1px solid var(--border); border-top: 0;
  transition: transform .3s ease, opacity .3s ease;
}
/* nav-handle 미사용 */ .nav-handle { display: none !important; }
.nav-handle svg { width: 16px; height: 16px; transition: transform .3s ease; }

/* Mobile sheet */
.sheet {
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 12px max(var(--gutter), env(safe-area-inset-left,0px)) calc(env(safe-area-inset-bottom,0px) + 12px) max(var(--gutter), env(safe-area-inset-right,0px));
  background: color-mix(in srgb, var(--aubergine) 28%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .24s ease, visibility .24s ease; overscroll-behavior: contain;
}
.sheet.is-open { opacity: 1; visibility: visible; }
.sheet__panel { max-height: calc(100svh - 120px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px; border-radius: var(--radius-lg); background: var(--surface); transform: translateY(16px); transition: transform .28s cubic-bezier(.2,.8,.3,1); }
.sheet.is-open .sheet__panel { transform: translateY(0); }
.sheet__link { display: flex; align-items: baseline; gap: 12px; padding: 14px 8px; border-bottom: 1px solid var(--border); font-size: var(--text-heading-sm); color: var(--heading); }
.sheet__link:last-of-type { border-bottom: 0; }
.sheet__link.is-active { color: var(--accent); }
.sheet__num { font-size: var(--text-caption); color: var(--accent-soft); font-variant-numeric: tabular-nums; }
.sheet__foot { margin-top: 16px; display: grid; gap: 8px; }
.sheet__foot .btn { width: 100%; }

/* --------------------------------------------------------------------------
   7. Page shell (fixed header offset)
   -------------------------------------------------------------------------- */
main { display: block; padding-top: calc(var(--nav-h) + 24px); }

/* --------------------------------------------------------------------------
   8. HERO (home / resume)
   -------------------------------------------------------------------------- */
.hero {
  min-height: calc(100svh - var(--nav-h) - 24px);
  display: flex; align-items: center; padding-block: 40px 32px;
}
.hero__grid { display: grid; gap: 32px; align-items: center; width: 100%; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.4fr 1fr; gap: 48px; } }

.hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 7px 16px; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: var(--text-caption); letter-spacing: .04em; color: var(--heading); }
.hero__title { font-size: var(--text-display); line-height: 1.1; letter-spacing: -0.035em; color: var(--heading); text-wrap: balance; }
.hero__title .accent { color: var(--accent); }
.hero__title .name { color: var(--accent); }
.hero__sub { margin-top: 24px; max-width: 34rem; font-size: var(--text-subheading); line-height: 1.6; color: var(--text-muted); }
.hero__media { justify-self: center; }
@media (min-width: 900px) { .hero__media { justify-self: end; } }
.hero__note { margin-top: 40px; display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-caption); color: var(--text-muted); letter-spacing: .04em; }
.hero__note svg { width: 16px; height: 16px; animation: bob 2.4s ease-in-out infinite; }

/* 프로필 사진 (홈 히어로 우측) — 사진 한 장만 */
.portrait {
  margin: 0; width: min(300px, 78vw); aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-card);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait--empty { display: grid; place-items: center; color: var(--ghost-c); background: var(--cta); }
.portrait--empty .ghost { width: 34%; height: auto; aspect-ratio: 32/36; }
/* 말풍선·이름표 없이 사진만 놓는 히어로(이력서) */
.hero__photo { margin-inline: auto; }

.hero__portrait {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px;
  /* 자세: 테마가 --pose-rest(쉴 때 기울기)를 주고, '한 마디 더'가 --pose-d/--pose-y 를 더합니다 */
  transform: rotate(calc(var(--pose-rest, 0deg) + var(--pose-d, 0deg))) translateY(var(--pose-y, 0px));
  transition: transform .32s cubic-bezier(.2, .8, .3, 1);
}

/* ── 히어로 색면(판) — 테마가 --hero-slab 을 주면 첫 화면 뒤에 큰 판이 깔립니다.
   판 위 글자색·버튼은 테마가 정합니다. 기본 디자인은 판이 없습니다. ── */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0;
  /* 화면이 넓어도 판은 본문 폭(+20px)까지만 — 빈 판이 넓게 남지 않게 */
  left: max(0px, calc(50% - var(--page-max) / 2 - 20px));
  right: max(0px, calc(50% - var(--page-max) / 2 - 20px));
  background: var(--hero-slab, transparent);
  border-radius: var(--hero-slab-r, 0);
  pointer-events: none;
}

/* ── 사진 옆 말풍선 '한마디' + '한 마디 더' 버튼 ── */
.quip {
  position: absolute; z-index: 2; top: 0; right: -10px; width: max-content; max-width: 15rem; margin: 0;
  padding: 10px 15px; border: 1px solid var(--border); border-radius: 18px 18px 18px 5px;
  background: var(--surface); color: var(--heading); box-shadow: var(--shadow-card);
  font-size: var(--text-body-sm); font-weight: 600; line-height: 1.4; text-wrap: balance;
  transform: translateY(-72%) rotate(3deg); transform-origin: 0 100%;
}
.quip::after {
  content: ''; position: absolute; left: 14px; bottom: -7px; width: 12px; height: 12px;
  background: inherit; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transform: skewX(-18deg) rotate(45deg);
}
.quip.is-pop { animation: quipPop .38s cubic-bezier(.2,.8,.3,1); }
@keyframes quipPop { 0% { transform: translateY(-72%) rotate(3deg) scale(.86); } 60% { transform: translateY(-72%) rotate(3deg) scale(1.06); } 100% { transform: translateY(-72%) rotate(3deg) scale(1); } }
.quip__more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 7px 13px;
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--text-caption); font-weight: 600; cursor: pointer; transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.quip__more:hover { border-color: var(--accent); color: var(--accent); transform: rotate(-2deg); }
@media (prefers-reduced-motion: reduce) { .quip.is-pop { animation: none; } .quip__more:hover { transform: none; } }
.portrait__cap { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.portrait__nm { font-size: var(--text-subheading); line-height: 1.2; color: var(--heading); letter-spacing: -.01em; }
.portrait__role { font-size: var(--text-caption); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   9. HOME — 카드 뽑기
   -------------------------------------------------------------------------- */
/* 홈: 히어로 + 카드 뽑기를 한 화면에 (데스크톱/태블릿) */
[data-page="home"] main { padding-top: calc(var(--nav-h) + 12px); }
.home-screen { display: flex; flex-direction: column; }
@media (min-width: 768px) {
  .home-screen {
    min-height: calc(100svh - var(--nav-h) - 24px);
    justify-content: center;
    gap: clamp(16px, 3vh, 40px);
  }
  .home-screen .hero { min-height: 0; padding-block: 0; }
  .home-screen .draw { padding-block: 0; }
  /* 한 화면에 맞도록 히어로·일러스트·덱 크기 축소 */
  .home-screen .hero__title { font-size: clamp(34px, 3.4vw + 14px, 60px); }
  .home-screen .ghost-art { max-width: min(300px, 30vh); }
  .home-screen .portrait { width: min(260px, 26vw); }
}
@media (min-width: 768px) and (max-height: 860px) {
  .home-screen .hero__sub { display: none; }        /* 낮은 화면에선 부제 숨겨 공간 확보 */
  .home-screen .ghost-art { max-width: min(240px, 26vh); }
  .home-screen .portrait { width: min(200px, 22vh); }
}

/* 홈 아래 랜딩형 개요 — 이력서·자기소개서·게임플레이 미리보기 */
.hp { padding-block: clamp(44px, 6vh, 76px); }
.hp--sep { border-top: 1px solid var(--border); }
.hp-block { margin-bottom: 40px; }
.hp-h { font-size: var(--text-heading); line-height: 1.2; letter-spacing: -.02em; color: var(--heading); margin-bottom: 20px; }
.hpl { display: grid; gap: 0; }
.hpl-row { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--border); text-decoration: none; }
.hpl-row:first-child { border-top: 0; padding-top: 4px; }
.hp-thumb { flex: none; width: 76px; height: 76px; border-radius: 14px; overflow: hidden; background: var(--cta); display: grid; place-items: center; }
.hp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-thumb--empty { color: var(--ghost-c); }
.hp-thumb--empty svg { width: 42%; height: auto; aspect-ratio: 32/36; }
.hpl-row__body { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.hpl-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.hpl-row__t { font-size: var(--text-subheading); line-height: 1.3; color: var(--heading); }
.hpl-row__d { flex: none; font-size: var(--text-caption); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hpl-row__m { display: block; margin-top: 6px; font-size: var(--text-body-sm); line-height: 1.6; color: var(--text-muted); }
a.hpl-row:hover .hpl-row__t { color: var(--accent); }
/* 보유 기술 — 큰 아이콘 + 작은 글씨, 5개 한 줄 */
.hp-skills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (min-width: 560px) { .hp-skills { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .hp-skills { grid-template-columns: repeat(5, 1fr); } }
.hp-skill { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.hp-skill__ic { width: 60px; height: 60px; border-radius: 18px; border: 1px solid var(--border); background: #fff; color: var(--accent); display: grid; place-items: center; }
.hp-skill__ic svg { width: 30px; height: 30px; }
.hp-skill__ic .tool__img { width: 34px; height: 34px; }
.hp-skill__t { font-size: var(--text-body-sm); color: var(--heading); }
.hp-skill__b { margin-top: 2px; font-size: 11px; line-height: 1.55; color: var(--text-muted); }
.hp-more { display: flex; width: fit-content; margin: 32px 0 0 auto; gap: 8px; }
.hp-more span { transition: transform .2s ease; }
.hp-more:hover span { transform: translateX(4px); }
.hp-games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 520px) { .hp-games { grid-template-columns: 1fr; gap: 20px; max-width: 320px; } }
.hp-game { min-width: 0; }
.hp-game__ic { display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; background: var(--cta); color: var(--ghost-c); margin-bottom: 14px; }
.hp-game__ic svg { width: 34%; height: auto; aspect-ratio: 32/36; }
.hp-game__ic img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.play-card__icon { width: 56px; height: 56px; object-fit: cover; border-radius: 14px; margin-bottom: 14px; }
.hp-game__t { font-size: var(--text-subheading); line-height: 1.25; color: var(--heading); }
.hp-game__b { margin-top: 4px; font-size: var(--text-caption); line-height: 1.5; color: var(--text-muted); }

.draw { padding-block: var(--section-pad-y); }
/* 덱과 뽑힌 카드를 하나의 균등 그리드에 두어 크기·간격을 동일하게 (겹침 방지) */
/* 항상 한 줄: 덱 + 뽑힌 카드. 폭이 좁아지면 main.js 가 카드 장수를 4→3→2→1 로 줄인다. */
.draw__stage {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px;  /* 덱 + 1장 */
  align-items: start; perspective: 1200px;
}
@media (min-width: 470px)  { .draw__stage { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 690px)  { .draw__stage { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; } }
@media (min-width: 980px)  { .draw__stage { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.draw__cards { display: contents; }
/* 덱은 세 장의 각·자리를 변수로 들고 있습니다.
   쉴 때는 아주 살짝 어긋나 있고, 커서를 올리면 그 각이 조금 더 벌어집니다.
   테마는 :root[data-skin-theme] 에서 쉬는 자리(--d1-x 등)만 바꾸면 됩니다. */
.draw__deck {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 3 / 4; padding: 0;
  container: gcard / inline-size;
  border: 0; background: none; cursor: pointer; touch-action: manipulation;
  --d1-rot: -2.6deg; --d1-x: -6px; --d1-y: 3px; --d1-op: 1;
  --d2-rot: 1.8deg;  --d2-x: 5px;  --d2-y: 1px; --d2-op: 1;
  --d3-y: 0px; --d3-sc: 1;
}
.draw__deck-card {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  transform-origin: 50% 94%;                 /* 아래쪽을 축으로 — 손에 쥔 패처럼 */
  /* 뒤 두 장도 온전한 카드입니다 — 비쳐 보이게 두지 말고 그림자로 층을 나눕니다 */
  box-shadow: var(--deck-shadow, 0 4px 12px -6px rgb(0 0 0 / .4));
  transition: transform .34s cubic-bezier(.2,.8,.3,1), opacity .34s ease;
}
.draw__deck-card:nth-child(1) { transform: rotate(var(--d1-rot)) translate(var(--d1-x), var(--d1-y)); opacity: var(--d1-op); }
.draw__deck-card:nth-child(2) { transform: rotate(var(--d2-rot)) translate(var(--d2-x), var(--d2-y)); opacity: var(--d2-op); }
.draw__deck-card:nth-child(3) { transform: translateY(var(--d3-y)) scale(var(--d3-sc)); }
/* 커서를 올리면 각이 조금 더 벌어집니다 (활짝이 아니라 살짝) */
.draw__deck:hover, .draw__deck:focus-visible {
  z-index: 3;
  --d1-rot: -7deg;                 /* 자리(--d1-x/y)는 건드리지 않습니다 — 각만 */
  --d2-rot: 5deg;
}
.draw__deck:active { --d3-sc: .97; }
@media (prefers-reduced-motion: reduce) {
  .draw__deck-card { transition: opacity .2s ease; }
  .draw__deck:hover, .draw__deck:focus-visible { --d1-rot: -2.6deg; --d2-rot: 1.8deg; }
}
.draw__deck-face { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--paper); padding: 0 14px; }
.draw__deck-face .card-back__seal { margin-bottom: 7cqw; }
.draw__deck-label { font-size: var(--text-body-sm); font-weight: 350; }
.draw__deck-hint { margin-top: 6px; font-size: 11px; opacity: .6; line-height: 1.4; }

/* ── 카드 뽑기 연출 ────────────────────────────────────────────────────
   ① 덱에서 한 장씩(순번 --i) 뒷면인 채로 날아와 자리에 앉고
   ② 다 놓인 뒤 순서대로 한 장씩 뒤집힙니다.
   출발 좌표 --dx/--dy 는 main.js 가 덱 위치를 재서 넣어 줍니다. */
.draw-card {
  position: relative; aspect-ratio: 3 / 4; min-width: 0; text-decoration: none;
  container: gcard / inline-size;
  perspective: 900px;
  opacity: 0;
  animation: dealSlide .38s cubic-bezier(.2,.8,.3,1) calc(var(--i, 0) * 115ms) both paused;
}
.draw-card__inner {
  position: absolute; inset: 0; transform-style: preserve-3d;
  animation: flipOver .46s cubic-bezier(.35,.85,.3,1) calc(760ms + var(--i, 0) * 140ms) both paused;
}
.draw__cards.is-dealing .draw-card,
.draw__cards.is-dealing .draw-card__inner { animation-play-state: running; }
@keyframes dealSlide {
  0%   { opacity: 0; transform: translate3d(var(--dx, -110px), var(--dy, 0px), 0) scale(.84) rotate(var(--dr, -8deg)); }
  22%  { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
}
@keyframes flipOver {
  0%   { transform: rotateY(180deg); }
  100% { transform: rotateY(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .draw-card { opacity: 1; animation: none; }
  .draw-card__inner { animation: none; }
}
.draw-card__front, .draw-card__back {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 18px; border-radius: var(--radius-card);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.draw-card__front { padding: 0; }
.draw-card__back { transform: rotateY(180deg); align-items: center; justify-content: center; }

/* --------------------------------------------------------------------------
   게임 카드 (홈 뽑기 · 프로젝트 목록 공용)
   구성: 이름 / 분류·대표 태그·등급 / 그림 / 개요
   등급(data-grade)에 따라 테두리가 홀로그램(SSR)·금박(SR)·은박(R)·기본(A)
   -------------------------------------------------------------------------- */
:where(.gcard) { position: relative; }   /* 뽑은 카드의 absolute 배치를 덮지 않도록 0 특이도 */
.gcard {
  --frame: var(--border);
  --frame-w: 1.5px;
  --badge-bg: var(--surface-2);
  --badge-fg: var(--text-muted);
  --frame-glow: transparent;
  --rx: 0deg; --ry: 0deg; --lift: 0px; --sc: 1;   /* 커서 위치에 따라 main.js 가 채웁니다 */
  --px: 50%; --py: 50%;                           /* 빛이 반사되는 지점 */
  --sx: 0px; --sy: 0px;                           /* 기울기 반대쪽으로 지는 그림자 */
  display: block; min-width: 0; padding: var(--frame-w);
  container: gcard / inline-size;
  border-radius: var(--radius-card);
  background: var(--frame);
  background-size: 220% 220%;
  background-position: var(--px) var(--py);
  box-shadow: var(--shadow-card), 0 0 0 0 var(--frame-glow);
  text-decoration: none;
  transform: perspective(680px) rotateX(var(--rx)) rotateY(var(--ry))
             translate3d(0, var(--lift), 0) scale(var(--sc, 1));
  transition: transform .38s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
}
.gcard.is-tilt { transition: transform .06s linear, box-shadow .12s linear; }
/* 등장 애니메이션(.reveal)이 기울기 transform 을 덮어쓰지 않도록 특이도를 맞춰 둡니다 */
.gcard.reveal.is-visible {
  transform: perspective(680px) rotateX(var(--rx)) rotateY(var(--ry))
             translate3d(0, var(--lift), 0) scale(var(--sc, 1));
  transition: transform .38s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
}
.gcard.reveal.is-visible.is-tilt { transition: transform .06s linear, box-shadow .12s linear; }
/* 테두리·표면을 스치는 빛 — 커서를 따라 움직입니다 */
.gcard::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(42% 34% at var(--px) var(--py),
    rgba(255,255,255,.55), rgba(255,255,255,.14) 46%, transparent 72%);
  mix-blend-mode: soft-light; opacity: 0; transition: opacity .3s ease;
}
.gcard:hover { --lift: -8px; --sc: 1.035; }
/* 그림자는 카드를 따라다니지 않습니다 — 바닥에 넓게 퍼지게만 둡니다.
   (box-shadow 는 카드와 함께 기울어지므로, 진하고 좁으면 '뒷장'처럼 보입니다) */
.gcard.is-tilt {
  box-shadow: var(--shadow-card),
              0 22px 52px -30px rgb(38 38 37 / .34);
}
:root[data-theme="dark"] .gcard.is-tilt {
  box-shadow: var(--shadow-card), 0 22px 52px -30px rgb(0 0 0 / .6);
}
.gcard:hover::after { opacity: 1; }
:root[data-theme="dark"] .gcard::after { mix-blend-mode: screen; }
@media (prefers-reduced-motion: reduce) {
  .gcard, .gcard.reveal.is-visible { transform: none; transition: box-shadow .3s ease; }
  .gcard::after { display: none; }
}
.gcard__frame {
  display: flex; flex-direction: column; height: 100%; min-height: 0;
  padding: 4.5cqw 4.5cqw 5cqw;
  border-radius: calc(var(--radius-card) - var(--frame-w));
  background: var(--surface);
  overflow: hidden;
}
/* 카드 안쪽은 '고정 레이아웃'입니다 — 모든 칸을 카드 폭(cqw) 비율로 못박아 두어
   글자 줄 수나 화면 폭이 달라져도 칸 위치가 움직이지 않고, 카드 전체 크기만 변합니다.
   이름 2줄 · 개요 2줄 자리를 항상 확보하고, 남는 자리는 전부 그림 칸이 가져갑니다. */
.gcard__name {
  flex: none; height: 19.24cqw;                  /* 7.4cqw × 1.3 × 2줄 */
  font-size: 7.4cqw; line-height: 1.3; color: var(--heading);
  text-align: center; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gcard__meta {
  flex: none; height: 8.6cqw; margin: 3cqw 0 3.5cqw;
  display: flex; align-items: center; gap: 2cqw;
  font-size: 5.6cqw; line-height: 1;
}
.gcard__cat {
  flex: none; padding: 0 2.4cqw; height: 100%; display: inline-flex; align-items: center;
  border-radius: 2.2cqw; background: var(--cta); color: var(--cta-text); font-weight: 500;
}
.gcard__tag {
  flex: 1 1 auto; min-width: 0; color: var(--text-muted);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gcard__grade {
  flex: none; padding: 0 2.4cqw; height: 100%; display: inline-flex; align-items: center;
  border-radius: 2.2cqw; background: var(--badge-bg); color: var(--badge-fg);
  font-family: var(--font-mono); font-size: 5.2cqw; font-weight: 700; letter-spacing: .04em;
}
/* 그림 칸 — 위아래 칸이 모두 고정이므로 이 칸의 비율도 항상 같습니다 (약 3:2) */
.gcard__art {
  position: relative; flex: 1 1 auto; min-height: 0;
  border-radius: 4cqw; overflow: hidden;
  background: var(--bg-elev); display: block;
}
.gcard__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcard__gen { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ghost-c); }
.gcard__gen--0 { color: #c15f3c; }   /* 클레이 코랄 */
.gcard__gen--1 { color: #5c7f6d; }   /* 세이지 */
.gcard__gen--2 { color: #b98d5d; }   /* 탄 */
:root[data-theme="dark"] .gcard__gen--0 { color: #d97757; }
:root[data-theme="dark"] .gcard__gen--1 { color: #7fae97; }
:root[data-theme="dark"] .gcard__gen--2 { color: #d4a27f; }
.gcard__gen svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gcard__mark { position: relative; display: block; width: 24cqw; opacity: .9; }
.gcard__mark .ghost { width: 100%; height: auto; aspect-ratio: 32 / 36; color: inherit; }
.gcard__desc {
  flex: none; height: 17.4cqw; margin-top: 3.5cqw;   /* 6cqw × 1.45 × 2줄 */
  font-size: 6cqw; line-height: 1.45; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gcard__period, .gcard__go {
  flex: none; height: 7.28cqw; margin-top: 2.5cqw;
  font-size: 5.6cqw; line-height: 1.3;
}
.gcard__period { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.gcard__go { color: var(--accent); }

/* 컨테이너 쿼리 단위를 모르는 옛 브라우저용 최소 대비값 */
@supports not (width: 1cqw) {
  .gcard__frame { padding: 13px 13px 14px; }
  .gcard__name { height: auto; font-size: var(--text-body-sm); }
  .gcard__meta { height: auto; margin: 9px 0 10px; gap: 5px; font-size: 10px; }
  .gcard__cat, .gcard__grade { height: auto; padding: 4px 7px; border-radius: 6px; }
  .gcard__grade { font-size: 9.5px; }
  .gcard__art { border-radius: 12px; }
  .gcard__mark { width: 34%; max-width: 46px; }
  .gcard__desc { height: auto; margin-top: 11px; font-size: var(--text-caption); }
  .gcard__period, .gcard__go { height: auto; margin-top: 8px; font-size: 11px; }
}

/* 등급별 테두리 ---------------------------------------------------------- */
.gcard[data-grade="A"] { --frame: var(--border); }
.gcard[data-grade="R"] {          /* 은박 */
  --frame-w: 2px;
  --frame: linear-gradient(145deg, #b9bfc4, #f2f4f6 22%, #aab1b7 45%, #eef1f3 68%, #b3babf);
  --badge-bg: #e6eaed; --badge-fg: #4d565d;
}
.gcard[data-grade="SR"] {         /* 금박 */
  --frame-w: 2px;
  --frame: linear-gradient(145deg, #b0862f, #f4e3ac 22%, #cba548 45%, #fbf2cd 68%, #a87c28);
  --badge-bg: #f6e8bf; --badge-fg: #7d5c15;
}
.gcard[data-grade="SSR"] {        /* 홀로그램 */
  --frame-w: 2.5px;
  --frame: linear-gradient(115deg, #9fd3c3, #e9cbab 18%, #d9b6e2 34%, #a6c6e9 52%, #efdcaa 70%, #9fd3c3 88%);
  --frame-glow: color-mix(in srgb, var(--accent) 26%, transparent);
  --badge-bg: linear-gradient(115deg, #c9e5db, #f0dcc6 40%, #dcc7e6 75%, #c6dbef);
  --badge-fg: #37413f;
  animation: holo 9s linear infinite;
  box-shadow: var(--shadow-card), 0 10px 30px -18px var(--frame-glow);
}
@keyframes holo { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } }
.gcard[data-grade="SSR"]:hover { animation: none; }   /* 호버 중엔 커서가 무지개를 움직입니다 */
:root[data-theme="dark"] .gcard[data-grade="R"]  { --badge-bg: #3d4348; --badge-fg: #d6dde2; }
:root[data-theme="dark"] .gcard[data-grade="SR"] { --badge-bg: #4a3f22; --badge-fg: #f2e0a6; }
:root[data-theme="dark"] .gcard[data-grade="SSR"]{ --badge-fg: #23282a; }
@media (prefers-reduced-motion: reduce) { .gcard[data-grade="SSR"] { animation: none; } }

/* 카드 뒷면 (덱 · 뒤집기 공용) ------------------------------------------- */
:where(.card-back) { position: relative; }   /* 덱·뒤집기 카드의 absolute 를 덮지 않도록 0 특이도 */
.card-back {
  border-radius: var(--radius-card);
  background-color: var(--aubergine);
  background-image:
    radial-gradient(46% 34% at 24% 16%, color-mix(in srgb, var(--periwinkle) 22%, transparent), transparent 72%),
    radial-gradient(54% 42% at 80% 88%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 74%),
    radial-gradient(circle, color-mix(in srgb, var(--periwinkle) 20%, transparent) 0 0.85cqw, transparent 0.9cqw);
  background-size: auto, auto, 5.5cqw 5.5cqw;
  border: 1px solid color-mix(in srgb, var(--periwinkle) 24%, transparent);
  overflow: hidden;
}
.card-back::before {                       /* 가운데 후광 */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(36% 26% at 50% 42%, color-mix(in srgb, var(--periwinkle) 26%, transparent), transparent 72%);
}
.card-back__seal {
  position: relative; z-index: 1; display: block; width: 26cqw; max-width: 92px;
}
.card-back__seal .ghost {
  width: 100%; height: auto; aspect-ratio: 32 / 36; color: var(--periwinkle); margin: 0;
  filter: drop-shadow(0 6px 14px rgb(0 0 0 / .28));
}
@supports not (width: 1cqw) {
  .card-back { background-size: auto, auto, 14px 14px; }
  .card-back__seal { width: 56px; }
}
}

.draw__empty { grid-column: 2 / -1; display: grid; place-items: center; min-height: 160px; border: 1px dashed var(--border); border-radius: var(--radius-card); color: var(--text-muted); font-size: var(--text-body-sm); padding: 24px; text-align: center; }
@media (max-width: 469px) { .draw__empty { grid-column: 1 / -1; } }
/* 덱 클릭 반응 (리플/셔플) */
.draw__deck.is-draw .draw__deck-card:nth-child(3) { animation: deckPress .34s cubic-bezier(.2,.8,.3,1); }
.draw__deck.is-draw .draw__deck-card:nth-child(2) { animation: deckRiffle .34s ease; }
@keyframes deckPress { 0%{transform:scale(1)} 40%{transform:scale(.94) translateY(3px)} 100%{transform:none} }
@keyframes deckRiffle { 0%{transform:rotate(2deg) translate(3px,2px)} 45%{transform:rotate(5deg) translate(7px,-3px)} 100%{transform:rotate(2deg) translate(3px,2px)} }

/* --------------------------------------------------------------------------
   10. Cards (generic) — about/skill/stat/play
   -------------------------------------------------------------------------- */
.card { padding: var(--card-pad); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
.card__index { display: inline-block; margin-bottom: 16px; font-size: var(--text-caption); color: var(--accent-soft); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.card__title { font-size: var(--text-heading-sm); line-height: 1.3; }
.card__body { margin-top: 12px; font-size: var(--text-body-sm); line-height: 1.65; color: var(--text-muted); }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 860px) { .stat-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.stat { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.stat__num { font-size: var(--text-heading); line-height: 1.1; color: var(--heading); font-variant-numeric: tabular-nums; }
.stat__num .unit { font-size: .5em; color: var(--accent-soft); margin-left: 2px; }
.stat__label { margin-top: 6px; font-size: var(--text-caption); color: var(--text-muted); line-height: 1.4; }

/* 인적사항 */
.profile { display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
@media (min-width: 720px) { .profile { grid-template-columns: 1fr 1fr; } }
.profile__row { display: grid; grid-template-columns: 7.5em 1fr; align-items: baseline; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--border); }
.profile__row:first-child { border-top: 0; }
@media (min-width: 720px) { .profile__row:nth-child(2) { border-top: 0; } .profile__row:nth-child(even) { border-left: 1px solid var(--border); } }
.profile__k { font-size: var(--text-caption); color: var(--text-muted); }
.profile__v { font-size: var(--text-body-sm); color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* skills */
.skill-card { display: flex; flex-direction: column; }
.skill-card .card__body { flex: 1 1 auto; }
/* 도구 로고 타일 — assets/img/tools/ 의 실제 브랜드 SVG 를 흰 판 위에 올립니다.
   바탕을 흰색으로 고정하는 건 다크 모드 때문입니다: 깃허브·노션처럼 검은 마크가
   어두운 바탕에서 사라지기 때문에, 브랜드 색이 제대로 보이도록 판을 흰색으로 둡니다. */
.tool-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.tool { display: inline-flex; flex-direction: column; align-items: center; gap: 7px; width: 70px; }
.tool__ic {
  display: grid; place-items: center; width: 52px; height: 52px;
  border: 1px solid var(--border); border-radius: 14px; background: #fff;
}
.tool__img { width: 30px; height: 30px; object-fit: contain; display: block; }
/* 로고가 올라가는 판은 어떤 시안에서도 흰색으로 둡니다 — 테마가 판에 색을 칠하면
   깃허브·노션 같은 검은 마크나 브랜드 색이 묻혀 버립니다 (그래서 !important) */
.tool__ic, .hp-skill__ic--logo { background: #fff !important; }
.tool__nm { font-size: 10.5px; color: var(--text-muted); text-align: center; line-height: 1.25; letter-spacing: -0.01em; }

/* --------------------------------------------------------------------------
   11. Timeline (career)
   -------------------------------------------------------------------------- */
.timeline { position: relative; display: grid; gap: 24px; padding-left: 24px; }
.timeline::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--border); }
.tl-item { position: relative; }
.tl-item::before { content: ''; position: absolute; left: -24px; top: 6px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--bg); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--border); }
.tl-item--now::before { background: var(--mint); }
.tl-date { font-size: var(--text-caption); color: var(--text-muted); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.tl-role { margin-top: 4px; font-size: var(--text-heading-sm); line-height: 1.3; }
.tl-org { margin-top: 4px; font-size: var(--text-body-sm); color: var(--accent-soft); }
.tl-body { margin-top: 12px; color: var(--text-muted); font-size: var(--text-body-sm); line-height: 1.65; }
.tl-tags { margin-top: 16px; }

/* --------------------------------------------------------------------------
   12. PROJECTS page — tabs + grid
   -------------------------------------------------------------------------- */
.proj-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-bottom: 40px; }
.proj-title { font-size: var(--text-heading-lg); line-height: 1.14; letter-spacing: -.03em; margin-right: auto; }
.tabs { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { white-space: nowrap; flex: none; }
.tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); }
.tab { padding: 9px 20px; border-radius: var(--radius-pill); font-size: var(--text-body-sm); color: var(--text-muted); line-height: 1; transition: background-color .18s ease, color .18s ease; }
.tab.is-active { background: var(--aubergine); color: var(--paper); }
:root[data-theme="dark"] .tab.is-active { background: var(--periwinkle); color: var(--aubergine); }

.proj-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media (min-width: 700px)  { .proj-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; } }
@media (min-width: 1000px) { .proj-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1280px) { .proj-grid { grid-template-columns: repeat(5, minmax(0,1fr)); } }

.proj-card { aspect-ratio: 3 / 4; }   /* 숨김은 위의 [hidden] 규칙이 맡습니다 */
.proj-empty { grid-column: 1 / -1; padding: 48px 24px; border: 1px dashed var(--border); border-radius: var(--radius-card); text-align: center; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   13. PROJECT DETAIL — left info + right media
   -------------------------------------------------------------------------- */
.detail { display: grid; gap: 32px; }
@media (min-width: 960px) { .detail { grid-template-columns: minmax(280px, 380px) 1fr; gap: 48px; align-items: start; } }

.detail__info { min-width: 0; }
.back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 24px; padding: 8px 16px; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: var(--text-body-sm); color: var(--text-muted); transition: border-color .18s ease, color .18s ease; }
.back-link:hover { border-color: var(--accent-soft); color: var(--heading); }
.detail__title { font-size: var(--text-heading-lg); line-height: 1.1; letter-spacing: -.03em; }
.detail__period { margin-top: 10px; font-size: var(--text-body-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.quest-strip { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 14px; background: var(--surface-2); }
.quest-strip__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--accent); color: var(--btn-primary-text); font-size: 10px; font-weight: 600; letter-spacing: .1em; }
.quest-strip__badge svg { width: 10px; height: 10px; }
.quest-strip__row { display: flex; align-items: baseline; gap: 10px; }
.quest-strip__k { flex: none; width: 48px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--text-muted); }
.quest-strip__v { font-size: var(--text-body-sm); color: var(--text); line-height: 1.5; }
.quest-strip__v--hi { color: var(--heading); font-weight: 600; }
.detail__genres { margin-top: 24px; }
.detail__meta { margin-top: 24px; display: grid; gap: 14px; }
.detail__meta-row { border-left: 2px solid var(--accent-soft); padding-left: 14px; }
.detail__meta-k { font-size: var(--text-caption); color: var(--text-muted); }
.detail__meta-v { margin-top: 2px; font-size: var(--text-body-sm); color: var(--text); line-height: 1.5; }
.detail__learned { margin-top: 32px; }
.detail__learned-title { font-size: var(--text-body-sm); color: var(--heading); margin-bottom: 12px; }
.bullets { display: grid; gap: 10px; }
.bullets li { position: relative; padding-left: 20px; font-size: var(--text-body-sm); line-height: 1.6; color: var(--text-muted); }
.bullets li::before { content: ''; position: absolute; left: 3px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-soft); }
.bullets b { font-weight: 400; color: var(--heading); }
.detail__stores { margin-top: 32px; display: flex; gap: 12px; align-items: center; }
.store-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--heading); transition: border-color .18s ease; }
.store-link:hover { border-color: var(--accent-soft); }
.store-link[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.store-link svg { width: 22px; height: 22px; }

.detail__media { min-width: 0; }
.media-box { width: 100%; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--border); background: var(--bg-elev); }
.media-box--empty { aspect-ratio: 16 / 10; display: grid; place-items: center; padding: 32px; text-align: center; color: var(--text-muted); font-size: var(--text-body-sm); line-height: 1.6; }
.media-box iframe, .media-box video, .media-box img { display: block; width: 100%; border: 0; }
.media-box--embed { aspect-ratio: 16 / 9; }
.media-box--embed iframe { width: 100%; height: 100%; }

.detail__blocks { margin-top: 48px; display: grid; gap: 32px; }
.block { display: grid; gap: 16px; }
@media (min-width: 720px) { .block { grid-template-columns: 200px 1fr; gap: 32px; } }
.block__label { font-size: var(--text-heading-sm); color: var(--heading); }
.block__label small { display: block; margin-top: 6px; font-size: var(--text-caption); color: var(--accent-soft); letter-spacing: .06em; }
.block__body p { font-size: var(--text-body); line-height: 1.7; color: var(--text); margin-bottom: 12px; }
.block__body p:last-child { margin-bottom: 0; }

.pager { display: grid; gap: 12px; margin-top: 48px; }
@media (min-width: 700px) { .pager { grid-template-columns: repeat(2, 1fr); } }
.pager__item { display: block; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); transition: border-color .2s ease; }
.pager__item:hover { border-color: var(--accent-soft); }
.pager__dir { font-size: var(--text-caption); color: var(--accent-soft); }
.pager__title { margin-top: 6px; font-size: var(--text-subheading); color: var(--heading); }

/* --------------------------------------------------------------------------
   14. PLAY page
   -------------------------------------------------------------------------- */
.play { display: grid; gap: 16px; }
@media (min-width: 700px)  { .play { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1000px) { .play { grid-template-columns: repeat(3, 1fr); } }
.play-card { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
.play-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.play-card__name { font-size: var(--text-subheading); line-height: 1.3; }
.play-card__hours { flex: none; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--surface-2); font-size: var(--text-caption); color: var(--heading); font-variant-numeric: tabular-nums; }
.play-card__genre { margin-top: 6px; font-size: var(--text-caption); color: var(--text-muted); }
.play-card__note { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); font-size: var(--text-body-sm); line-height: 1.65; color: var(--text-muted); }

/* ── 스팀 플레이 기록 (자동 수집) — 장르별 방사형 그래프 + 같은 내용의 표 ──────
   계열이 하나뿐이라 색은 강조색 하나만 씁니다(범례 없음). 격자·축은 바탕에서 한 칸만
   떨어진 실선 헤어라인으로 눌러 두고, 글자는 늘 글자색 토큰을 씁니다 (색이 곧 정보가 되지 않도록).
   그래프가 안 보이는 경우(스크린 리더·색약·인쇄)를 위해 오른쪽 표에 같은 숫자가 그대로 있습니다. */
.steam { margin-bottom: 32px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
.steam__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 8px; }
.steam__ic { display: inline-flex; width: 20px; height: 20px; color: var(--heading); }
.steam__ic svg { width: 100%; height: 100%; }
.steam__t { font-size: var(--text-heading-sm); line-height: 1.3; color: var(--heading); }
.steam__note { flex: 1 1 100%; font-size: var(--text-caption); color: var(--text-muted); }
/* '예시 데이터' 딱지 — 스팀 연결 전에만 붙습니다 (진짜 기록으로 읽히면 안 되므로 눈에 띄게) */
.steam__sample { padding: 4px 10px; border: 1px solid var(--accent); border-radius: var(--radius-pill); font-size: var(--text-caption); font-weight: 600; color: var(--accent); white-space: nowrap; }
.steam__body { display: grid; gap: 20px; align-items: center; }
@media (min-width: 820px) { .steam__body { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 32px; } }
.steam__chart { margin: 0; }
.steam-radar { display: block; width: 100%; height: auto; overflow: visible; }
.sr-grid  { fill: none; stroke: var(--border); stroke-width: 1; opacity: .45; }
.sr-spoke { stroke: var(--border); stroke-width: 1; opacity: .35; }
.sr-area  { fill: var(--accent); fill-opacity: .16; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.sr-dot   { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }   /* 겹침 방지용 바탕색 링 */
.sr-name  { fill: var(--heading); font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; }
.sr-val   { fill: var(--text-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.steam__stats { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-bottom: 18px; }
.steam__stats dt { font-size: var(--text-caption); color: var(--text-muted); }
.steam__stats dd { margin-top: 2px; font-size: var(--text-subheading); color: var(--heading); font-variant-numeric: tabular-nums; }
.steam__recent { font-size: var(--text-body-sm) !important; }
.steam__table { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm); }
.steam__table th, .steam__table td { padding: 8px 0; border-bottom: 1px solid var(--border); text-align: right; }
.steam__table thead th { font-size: var(--text-caption); font-weight: 600; color: var(--text-muted); }
.steam__table th:first-child { text-align: left; font-weight: 600; color: var(--heading); }
.steam__table td { color: var(--text); font-variant-numeric: tabular-nums; }
.steam__table tbody tr:last-child th, .steam__table tbody tr:last-child td { border-bottom: 0; }
.steam__rest th, .steam__rest td { color: var(--text-muted); }
/* 좁은 화면에선 그래프가 통째로 작아지므로, 축 글자는 그만큼 키워 읽히게 둡니다 */
@media (max-width: 560px) { .sr-name { font-size: 16px; } .sr-val { font-size: 14px; } }

/* --------------------------------------------------------------------------
   15. COVER LETTER (empty state)
   -------------------------------------------------------------------------- */
.cover-empty { max-width: 34rem; margin: 40px auto; padding: 48px 32px; border: 1px dashed var(--border); border-radius: var(--radius-card); text-align: center; }
.cover-empty .ghost { width: 48px; height: 54px; margin: 0 auto 20px; }
.cover-empty p { color: var(--text-muted); font-size: var(--text-body-sm); line-height: 1.6; }
/* 자기소개서 요약 — '함께 일하면, 이런 기획자입니다.' 강점 세 장 */
.hp--summary .strengths { margin-top: 4px; }
.hp--summary .hp-more { margin-top: 24px; }
.cl-summary { margin: -8px 0 56px; padding: 28px 0 36px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cl-summary__t { font-size: var(--text-heading-sm); letter-spacing: -.02em; margin-bottom: 22px; }
.strengths { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .strengths { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.strength { padding: 22px 22px 24px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
.strength__tag { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--text-muted); }
.strength__t { font-size: var(--text-heading-sm); line-height: 1.3; letter-spacing: -.02em; margin: 12px 0 8px; }
.strength__b { font-size: var(--text-body-sm); line-height: 1.7; color: var(--text-muted); }
.cover-block { max-width: 46rem; }
.cover-block + .cover-block { margin-top: 40px; }
.cover-block h3 { font-size: var(--text-heading-sm); margin-bottom: 12px; }
.cover-block p { font-size: var(--text-body); line-height: 1.75; color: var(--text); margin-bottom: 14px; }

/* --------------------------------------------------------------------------
   16. Footer + to-top
   -------------------------------------------------------------------------- */
.footer { margin-top: var(--section-pad-y); padding-block: 40px calc(env(safe-area-inset-bottom,0px) + 40px); border-top: 1px solid var(--border); background: var(--bg-elev); }
.footer__inner { display: grid; gap: 24px; }
@media (min-width: 760px) { .footer__inner { grid-template-columns: 1fr auto; align-items: center; } }
.footer__brand { display: flex; align-items: center; gap: 10px; font-size: var(--text-body-sm); color: var(--heading); }
.footer__brand .ghost { width: 22px; height: 24px; }
.footer__tagline { margin-top: 6px; font-size: var(--text-caption); color: var(--text-muted); }
.footer__links { display: flex; flex-wrap: wrap; gap: 10px; }
.footer__copy { margin-top: 20px; font-size: var(--text-caption); color: var(--text-muted); }
.footer__mail { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.footer__mail:hover { color: var(--accent); }

.to-top { position: fixed; right: max(16px, env(safe-area-inset-right,0px)); bottom: calc(env(safe-area-inset-bottom,0px) + 16px); z-index: 80; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--heading); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .24s ease, transform .24s ease, visibility .24s ease; }
.to-top.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }

/* --------------------------------------------------------------------------
   17. Reveal + reduced motion
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2,.8,.3,1), transform .6s cubic-bezier(.2,.8,.3,1); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .draw-card__inner { animation: none; }
  .draw-card__back { display: none; }
}

/* --------------------------------------------------------------------------
   18. i18n helper + placeholder + preview banner
   -------------------------------------------------------------------------- */
.i18n-en { display: none; }
html[lang="en"] .i18n-ko { display: none; }
html[lang="en"] .i18n-en { display: inline; }
.is-placeholder { opacity: .55; cursor: default; }
.is-placeholder:active { transform: none; }

/* ── 복사 알림(HUD) — 이메일을 누르면 잠깐 떴다 사라집니다 ──────────────── */
.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); z-index: 130;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  display: inline-flex; align-items: center; gap: 9px; max-width: calc(100vw - 32px);
  padding: 11px 18px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--heading); box-shadow: var(--shadow-card);
  font-size: var(--text-body-sm); font-weight: 600; line-height: 1.4; white-space: nowrap;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast__mail { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 400; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity .18s ease; } .toast.is-on { transform: translate(-50%, 0); } }

.preview-banner { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom,0px) + 16px); transform: translateX(-50%); z-index: 120; max-width: calc(100vw - 32px); padding: 10px 20px; border-radius: var(--radius-pill); background: var(--aubergine); color: var(--paper); font-size: var(--text-caption); line-height: 1.4; text-align: center; box-shadow: var(--shadow-sm); }
.preview-banner a { color: var(--ghost-lavender); text-decoration: underline; margin-left: 6px; }