/* ============================================================
   WANI.SYS — amphibian glitch portfolio
   땅(학업) × 물(음악), 중앙정렬 기준
   dev(땅)  : 파스텔 그린 #aad59e / #c9e5c4
   artist(물): 파스텔 블루 #b8cde6 / #cee1f3
   ============================================================ */

/* ---------- variables & mode accents ---------- */
:root {
  --bg: #0f0f0f;      /* 매트 다크 그레이 */
  --fg: #e8e6df;      /* 미색 off-white */
  --dim: #8f8d86;     /* 웜 그레이 */
  --c1: #cfcdc6;      /* 뉴트럴: 라이트 */
  --c2: #9a9890;      /* 뉴트럴: 미드 */
  --c3: #6f6d66;      /* 뉴트럴: 다크 */
  /* 파스텔 팔레트 — 땅: 그린 / 물: 블루 */
  --land1: #aad59e;  --land2: #c9e5c4;  --land3: #def5dd;
  --water1: #b8cde6; --water2: #cee1f3; --water3: #dfe9f6;
  --acc: var(--land1); /* 기본 포인트 = 그린, artist 모드에선 블루 */
  /* 테마 토큰 (라이트 테마에서 오버라이드) */
  --surface: rgba(15,15,15,.55);
  --grid: rgba(255,255,255,.03);
  --chip: rgba(255,255,255,.03);
  --hover-bg: rgba(255,255,255,.02);
  --stroke-soft: rgba(255,255,255,.07);
  --stroke-strong: rgba(255,255,255,.25);
  /* 라벨·UI용 — 모노 폐기, Pretendard로 통일 (ASCII 아트만 별도 모노) */
  --mono: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  --ascii: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --disp: "Archivo Black", "Pretendard Variable", Pretendard, sans-serif;
  --kr: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Noto Sans KR", sans-serif;
  --mx: 0.5;
  --my: 0.5;
  /* ---- glass design tokens (hardware UI: 최소 radius) ---- */
  --r-s: 2px;
  --r-m: 4px;
  --hairline: rgba(255,255,255,.12);
  --glass-bg: rgba(18,18,18,.55);
  --glass-blur: blur(20px) saturate(150%);
  --inner-hl: inset 0 1px 0 rgba(255,255,255,.08);
  --shadow-glass:
    0 1px 1px rgba(0,0,0,.14),
    0 6px 16px rgba(0,0,0,.22),
    0 20px 48px rgba(0,0,0,.26);
  --ease-spring: cubic-bezier(.32,.72,0,1);
}
/* 모드별 포인트: dev=그린 / artist=블루 */
body[data-mode="artist"] { --acc: var(--water1); }

/* ---------- 라이트 테마 ---------- */
body[data-theme="light"] {
  --bg: #f2f0ea;
  --fg: #191917;
  --dim: #6d6b64;
  --c1: #3a3a36; --c2: #5c5a54; --c3: #807e76;
  /* 라이트 배경 대비 확보를 위해 파스텔 살짝 딥하게 */
  --land1: #84b877;  --land2: #a9cf9d;  --land3: #cfe8c8;
  --water1: #8fa9cf; --water2: #b3c8e4; --water3: #d3e2f3;
  --hairline: rgba(0,0,0,.12);
  --surface: rgba(242,240,234,.7);
  --grid: rgba(0,0,0,.05);
  --chip: rgba(0,0,0,.04);
  --hover-bg: rgba(0,0,0,.03);
  --stroke-soft: rgba(0,0,0,.08);
  --stroke-strong: rgba(0,0,0,.3);
  --glass-bg: rgba(255,255,255,.6);
  --inner-hl: inset 0 1px 0 rgba(255,255,255,.7);
}

/* ---------- base ---------- */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--kr);
  overflow-x: hidden;
  cursor: crosshair;
  text-align: center; /* 전체 중앙정렬 기준 */
}
/* 숫자 폭 고정 — 시계·성적·스코어 흔들림 방지 */
#hud-clock, .tr-summary, .tr-table, .tr-sem-stat, #game-hud { font-variant-numeric: tabular-nums; }
a { color: var(--c1); text-decoration:none; }
a:hover { color: var(--c2); }
button { font-family: var(--mono); cursor:pointer; }
::selection { background: var(--acc); color:#000; }
/* 키보드 사용자용 포커스 링 (커스텀 커서로 마우스 위치가 대신되므로 필수) */
:focus-visible { outline:2px solid var(--acc); outline-offset:3px; }

/* ---------- boot overlay ---------- */
#boot {
  position:fixed; inset:0; z-index:1000;
  background:#0a0a0a; padding:8vh 6vw;
  font-family:var(--mono); font-size:clamp(11px,1.4vw,14px);
  color:#e8e6df; text-align:left;
  display:flex; flex-direction:column; justify-content:flex-end; gap:16px;
}
#boot.done { animation: boot-out .5s steps(6) forwards; }
@keyframes boot-out {
  30% { opacity:1; transform:none; filter:none; }
  60% { transform:translateX(8px) skewX(-6deg); filter:hue-rotate(90deg); }
  100% { opacity:0; visibility:hidden; transform:scale(1.05); }
}
#boot-log { white-space:pre-wrap; line-height:1.7; max-height:70vh; overflow:hidden; font-family:var(--ascii); }
#boot-bar { height:8px; border:1px solid rgba(255,255,255,.25); /* boot: 항상 다크 */ border-radius:var(--r-s); overflow:hidden; }
#boot-bar-fill { height:100%; width:0%; background:var(--acc); transition:width .15s steps(4); }
#boot-skip { font-size:10px; color:var(--dim); letter-spacing:2px; animation:blink 1.2s steps(1) infinite; }

/* ---------- global fx layers ---------- */
#bg-canvas {
  position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none;
}
/* 미세 격자 한 겹 — 계측장비 모눈. 스캔라인/노이즈/비네트 제거 */
.fx-scanlines {
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 64px);
}
.fx-noise { display:none; }
.fx-vignette { display:none; }
#mode-flash {
  position:fixed; inset:0; z-index:900; pointer-events:none; opacity:0;
  background:#000;
}
#mode-flash.active { animation: flashy .4s ease; }
@keyframes flashy {
  0%{opacity:0} 40%{opacity:.5} 100%{opacity:0}
}

/* ---------- glitch text (RGB split) ---------- */
.glitch-text { position:relative; display:inline-block; }
.glitch-text::before, .glitch-text::after {
  content:attr(data-text); position:absolute; inset:0; overflow:hidden;
  display:none; /* 글리치 RGB 스플릿 제거 — 하드웨어 UI */
}
.glitch-text::before { color:var(--c1); transform:translate(-1px,0); animation:g-slice-a 5.2s steps(2) infinite; }
.glitch-text::after  { color:var(--c3); transform:translate(1px,0);  animation:g-slice-b 6.1s steps(2) infinite; }
@keyframes g-slice-a {
  0%,86%,100% { clip-path:inset(0 0 100% 0); }
  88% { clip-path:inset(12% 0 55% 0); }
  92% { clip-path:inset(60% 0 8% 0); }
  96% { clip-path:inset(30% 0 40% 0); }
}
@keyframes g-slice-b {
  0%,80%,100% { clip-path:inset(100% 0 0 0); }
  83% { clip-path:inset(45% 0 30% 0); }
  89% { clip-path:inset(5% 0 80% 0); }
  95% { clip-path:inset(70% 0 10% 0); }
}
.jitter { animation:none !important; }
@keyframes jitter {
  0%{transform:translate(-1px,0)} 50%{transform:translate(1px,-1px)} 100%{transform:translate(0,1px)}
}

/* ---------- HUD header ---------- */
#hud {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:18px;
  padding:10px 20px; font-family:var(--mono); text-align:left;
  background:var(--surface);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--hairline);
}
#logo { font-family:var(--disp); font-size:14px; letter-spacing:3px; color:var(--fg); }
#hud-status { display:flex; gap:14px; font-size:11px; color:var(--dim); }
#hud-mode-label { color:var(--acc); }
#hud-controls { margin-left:auto; display:flex; gap:26px; flex-wrap:wrap; }
/* 텍스트 온리 메뉴 — 테두리 상자 없음, 작은 글자 + 넓은 간격 */
.hud-btn {
  background:none; border:none; color:var(--dim);
  font-size:10px; padding:4px 0; letter-spacing:2px;
  transition: color .2s var(--ease-spring);
}
.hud-btn:hover { color:var(--acc); }

/* ---------- tickers ---------- */
.ticker {
  position:fixed; left:0; right:0; z-index:90; overflow:hidden;
  font-family:var(--mono); font-size:11px; letter-spacing:2px;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  background:var(--surface);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  pointer-events:none; text-align:left;
}
.ticker-top { top:48px; } .ticker-bottom { bottom:0; }
.ticker-inner { display:inline-block; white-space:nowrap; padding:5px 0; color:var(--dim); animation:tick 30s linear infinite; }
.ticker-bottom .ticker-inner { animation-duration:38s; animation-direction:reverse; color:var(--dim); }
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ============================================================
   LANDING — 수면 분할 (위: 땅 / 아래: 물)
============================================================ */
#landing[hidden], #content[hidden], #site-footer[hidden] { display:none !important; }
#landing {
  position:relative; z-index:10;
  height:100vh;
  height:100dvh; /* 모바일 주소창 변화 대응 */
  display:flex; flex-direction:column;
}
.half {
  flex:1; border:none; color:var(--fg); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  transition: flex .35s ease;
}
.half:hover { flex:1.25; }
/* 비대칭 포스터 구도 — 땅: 우상단 / 물: 좌하단 */
.half-land  { background:none; align-items:flex-start; justify-content:flex-end; padding:12vh 6vw 0 0; }
.half-water { background:none; align-items:flex-end; justify-content:flex-start; padding:0 0 9vh 6vw; }
.half-inner { display:flex; flex-direction:column; gap:8px; }
.half-land .half-inner  { align-items:flex-end; text-align:right; }
.half-water .half-inner { align-items:flex-start; text-align:left; }
.half-tag { font-family:var(--mono); font-size:11px; letter-spacing:4px; color:var(--dim); }
.half-title { font-family:var(--disp); font-size:clamp(26px,4.5vw,48px); letter-spacing:1px; color:var(--fg); }
.half-desc { font-size:13px; color:var(--dim); }
.half-enter { font-family:var(--mono); font-size:11px; margin-top:6px; opacity:0; transition:opacity .2s; }
.half-land .half-enter  { color:var(--land1); }
.half-water .half-enter { color:var(--water1); }
.half:hover .half-enter { opacity:1; animation:blink .5s steps(1) infinite; }
@keyframes blink { 50%{opacity:0} }
.half-land:hover, .half-water:hover { background:var(--hover-bg); }

/* ASCII 바다 생물 — 물속(하단 절반)을 둥둥 떠다니다 커서 접근 시 도망 */
#critters { position:absolute; inset:0; z-index:11; pointer-events:none; overflow:hidden; }
.critter {
  position:absolute; left:0; top:0; margin:0;
  font-family:var(--ascii); line-height:1.15; white-space:pre; text-align:left;
  color:var(--water1); opacity:.7; will-change:transform;
}
.critter.alt { color:var(--water2); opacity:.55; }
body[data-fx="off"] #critters { display:none; }
@media (prefers-reduced-motion: reduce) { #critters { display:none; } }

/* 수면 캔버스 — 화면 중앙 가로 전체 */
#waterline-canvas {
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  width:100%; height:180px; pointer-events:none; z-index:12;
}

/* 포스터형 비대칭 배치 — 타이틀 좌측, 신원 정보 우하단 */
#landing-center {
  position:absolute; inset:0; z-index:13; pointer-events:none;
}
.landing-eyebrow {
  position:absolute; left:6vw; top:14vh; text-align:left;
  font-family:var(--mono); color:var(--dim); letter-spacing:4px; font-size:11px;
}
.landing-title {
  position:absolute; left:5.6vw; top:50%; transform:translateY(-96%);
  font-family:var(--disp); font-size:clamp(72px,15vw,190px); line-height:.85;
  letter-spacing:-.01em; text-align:left;
  /* 땅(그린) → 물(블루) — 수면을 가로지르는 그라데이션 */
  background:linear-gradient(180deg, var(--land1) 0%, var(--land2) 40%, var(--water2) 60%, var(--water1) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.croc-ascii {
  position:absolute; left:6vw; top:calc(50% + 16px); text-align:left;
  font-family:var(--ascii); font-size:clamp(8px,1.2vw,12px); line-height:1.25;
  color:var(--dim);
  animation: croc-bob 4s ease-in-out infinite;
}
@keyframes croc-bob {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(6px); }
}
.landing-id {
  position:absolute; right:6vw; bottom:10vh; margin:0; text-align:right;
  font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--dim);
  padding:8px 14px; border:1px solid var(--hairline);
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border-radius:var(--r-s);
  box-shadow: var(--inner-hl), 0 4px 14px rgba(0,0,0,.18);
}

/* ============================================================
   CONTENT — 중앙정렬 섹션
============================================================ */
#content { position:relative; z-index:10; padding:160px 6vw 120px; max-width:1100px; margin:0 auto; }
.section-block { position:relative; margin-bottom:144px; }
.section-head {
  display:flex; align-items:baseline; justify-content:center; gap:16px;
  margin-bottom:40px; flex-wrap:wrap;
}
.section-num {
  font-family:var(--mono); font-size:13px; color:var(--acc);
  border:1px solid var(--acc); padding:3px 8px;
  border-radius:var(--r-s); background:var(--chip);
}
.section-title {
  font-family:var(--disp); font-size:clamp(30px,5.5vw,58px); line-height:1;
  color:var(--fg); text-transform:uppercase;
}
.section-ghost {
  position:absolute; top:-45px; left:50%; z-index:-1; user-select:none; pointer-events:none;
  font-family:var(--disp); font-size:clamp(80px,15vw,190px); line-height:1;
  color:transparent; -webkit-text-stroke:1px var(--stroke-soft);
  transform: translate(calc(-50% + (var(--mx) - .5) * 40px), calc((var(--my) - .5) * 22px));
}
.section-body p { color:var(--dim); line-height:2; max-width:720px; font-size:15px; margin:0 auto; }
.section-body p strong { color:var(--fg); }

/* intro terminal box — 박스는 중앙, 내부 텍스트는 터미널 가독성을 위해 좌측 */
.term-box {
  font-family:var(--mono); font-size:13px; line-height:1.9; text-align:left;
  border:1px solid var(--hairline);
  border-top-color:var(--stroke-strong);
  background:var(--glass-bg); padding:24px; max-width:720px; margin:0 auto;
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border-radius:var(--r-m);
  box-shadow: var(--inner-hl), var(--shadow-glass);
}
.term-box .prompt { color:var(--c2); }
.term-box .dim { color:var(--dim); }
.term-box .cursor-blink { display:inline-block; width:8px; height:14px; background:var(--acc); animation:blink .8s steps(1) infinite; vertical-align:-2px; }

/* card grid — 중앙 배치 */
.card-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,340px));
  gap:24px; justify-content:center;
}
.card {
  position:relative; border:1px solid var(--hairline);
  border-top-color:var(--stroke-strong);
  background:var(--glass-bg); padding:24px 22px; overflow:hidden; text-align:center;
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border-radius:var(--r-m);
  box-shadow: var(--inner-hl), 0 1px 1px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.18);
  transition: transform .35s var(--ease-spring), border-color .35s var(--ease-spring),
              box-shadow .35s var(--ease-spring);
}
.card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--acc); opacity:.9;
}
.card:hover {
  transform:translateY(-5px);
  border-color:var(--stroke-strong);
  box-shadow: var(--inner-hl), var(--shadow-glass);
}
.card-year { font-family:var(--mono); font-size:11px; color:var(--c2); }
.card-title { font-size:18px; font-weight:900; margin:6px 0 4px; }
.card-sub { font-family:var(--mono); font-size:12px; color:var(--c1); margin-bottom:10px; }
.card-desc { font-size:13px; color:var(--dim); line-height:1.8; }
.card-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; justify-content:center; }
.tag { font-family:var(--mono); font-size:10px; letter-spacing:1px; color:var(--c2); border:1px solid color-mix(in srgb,var(--c2) 45%,transparent); padding:2px 8px; border-radius:var(--r-s); background:var(--chip); }
.card-link { display:inline-block; margin-top:12px; font-family:var(--mono); font-size:12px; }
.card-link::after { content:" ↗"; }

/* timeline — 중앙 수직선 기준 */
.timeline { position:relative; max-width:640px; margin:0 auto; padding-top:6px; }
.timeline::before {
  content:""; position:absolute; left:50%; top:0; bottom:0; width:2px;
  transform:translateX(-50%);
  background:var(--hairline);
}
.tl-item { position:relative; padding:26px 0 30px; }
.tl-item::before {
  content:""; position:absolute; left:50%; top:0; width:12px; height:12px;
  transform:translate(-50%,-2px) rotate(45deg);
  background:var(--bg); border:2px solid var(--acc);
}
.tl-year { font-family:var(--mono); font-size:12px; color:var(--c2); }
.tl-title { font-size:16px; font-weight:700; margin:4px 0; background:var(--bg); display:inline-block; padding:0 10px; }
.tl-desc { font-size:13px; color:var(--dim); line-height:1.7; max-width:480px; margin:0 auto; background:var(--bg); }

/* links */
.links-row { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.link-big {
  font-family:var(--mono); font-size:14px; letter-spacing:2px;
  border:1px solid var(--hairline);
  padding:14px 26px; color:var(--fg);
  border-radius:var(--r-s); background:var(--chip);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow: var(--inner-hl), 0 2px 8px rgba(0,0,0,.12);
  transition:.25s var(--ease-spring); position:relative;
}
.link-big:hover { background:var(--acc); border-color:var(--acc); color:#000; }
.links-note { margin-top:22px; font-family:var(--mono); font-size:12px; color:var(--dim); letter-spacing:1px; }
.links-note b { color:var(--fg); }

/* ---------- transcript (성적표) ---------- */
.tr-summary {
  font-family:var(--kr); font-weight:600; font-size:14px; color:var(--fg); letter-spacing:0;
  border:1px solid var(--hairline);
  display:inline-block; padding:10px 18px; margin-bottom:28px;
  border-radius:var(--r-s); background:var(--chip);
  box-shadow: var(--inner-hl);
}
.tr-list { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.tr-sem {
  border:1px solid var(--hairline); background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border-radius:var(--r-s); overflow:hidden;
  box-shadow: var(--inner-hl), 0 2px 8px rgba(0,0,0,.15);
  transition:border-color .25s var(--ease-spring);
}
.tr-sem[open], .tr-sem:hover { border-color:var(--stroke-strong); }
.tr-sem summary {
  list-style:none; cursor:pointer; padding:14px 18px;
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-family:var(--mono);
}
.tr-sem summary::-webkit-details-marker { display:none; }
.tr-sem summary::after { content:"[+]"; color:var(--dim); font-size:11px; }
.tr-sem[open] summary::after { content:"[-]"; }
.tr-sem-name { font-size:13px; color:var(--fg); letter-spacing:1px; text-align:left; }
.tr-sem-stat { font-size:11px; color:var(--c2); margin-left:auto; }
.tr-table { width:100%; border-collapse:collapse; font-size:12px; }
.tr-table th {
  font-family:var(--mono); font-weight:400; font-size:10px; letter-spacing:2px;
  color:var(--dim); padding:6px 10px; border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.tr-table td { padding:7px 10px; border-bottom:1px solid var(--stroke-soft); color:var(--dim); }
.tr-table tr:last-child td { border-bottom:none; }
.tr-code { font-family:var(--mono); font-size:11px; color:var(--c1); white-space:nowrap; }
.tr-title { text-align:left; color:var(--fg); }
.tr-grade { font-family:var(--mono); white-space:nowrap; }
.tr-grade.g-ap { color:var(--acc); font-weight:600; }
.tr-grade.g-a0 { color:var(--c2); }
.tr-grade.g-b { color:var(--fg); opacity:.75; }
.tr-grade.g-s { color:var(--dim); font-style:italic; }
.tr-gap {
  font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:1px;
  padding:10px 0; position:relative;
}
.tr-gap::before, .tr-gap::after {
  content:""; position:absolute; top:50%; width:18%; height:1px;
  background:var(--hairline);
}
.tr-gap::before { left:0; } .tr-gap::after { right:0; }

/* audio hint strip */
.audio-hint {
  margin:0 auto 70px; font-family:var(--mono); font-size:12px; color:var(--dim);
  border:1px dashed var(--hairline); padding:12px 16px; max-width:720px;
  border-radius:var(--r-s);
}
.audio-hint b { color:var(--fg); }

/* ---------- cross-mode CTA (모드 말미 반대 세계 유도) ---------- */
.cross-cta { margin:0 0 60px; padding:40px 0 20px; }
.cross-cta-tag { font-family:var(--mono); font-size:11px; letter-spacing:4px; color:var(--dim); margin-bottom:14px; }
.cross-cta-btn {
  font-family:var(--kr); font-size:15px; font-weight:700; letter-spacing:.5px;
  background:var(--chip); color:var(--fg); padding:18px 30px; cursor:pointer;
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border-radius:var(--r-m); box-shadow: var(--inner-hl), 0 2px 8px rgba(0,0,0,.12);
  transition:.3s var(--ease-spring);
}
.cross-cta-btn.to-water, .cross-cta-btn.to-land { border:1px solid var(--hairline); }
.cross-cta-btn.to-water:hover, .cross-cta-btn.to-land:hover { background:var(--acc); border-color:var(--acc); color:#000; }

/* ---------- footer ---------- */
#site-footer {
  position:relative; z-index:10; text-align:center; padding:50px 6vw 70px;
  font-family:var(--mono); font-size:11px; color:var(--dim); line-height:2.2;
}
.footer-ascii { color:var(--dim); letter-spacing:1px; }

/* ---------- reveal on scroll ---------- */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease-spring), transform .7s var(--ease-spring); }
.reveal.visible { opacity:1; transform:none; }

/* ---------- FX levels & reduced motion ---------- */
body[data-fx="low"] .fx-noise,
body[data-fx="off"] .fx-noise,
body[data-fx="off"] .fx-scanlines { display:none; }
body[data-fx="off"] *, body[data-fx="off"] *::before, body[data-fx="off"] *::after {
  animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important;
}
body[data-fx="off"] .glitch-text::before, body[data-fx="off"] .glitch-text::after { display:none; }
@media (prefers-reduced-motion: reduce) {
  .fx-noise { display:none; }
  .glitch-text::before, .glitch-text::after { animation:none; clip-path:inset(0 0 100% 0); }
  .ticker-inner { animation:none; }
  .croc-ascii { animation:none; }
}

/* ============================================================
   CROC CURSOR — 평소 입 벌림 / 클릭 깨물기 / 스크롤 회전
============================================================ */
@media (hover: hover) {
  body:not([data-fx="off"]), body:not([data-fx="off"]) * { cursor: none !important; }
}
#croc-cursor {
  position:fixed; left:0; top:0; z-index:2000; pointer-events:none; /* 게임 오버레이(1500)보다 위 */
  display:none; margin:-15px 0 0 -3px; /* 입 끝이 포인터 위치 */
}
#croc-cursor.on { display:block; }
body[data-fx="off"] #croc-cursor { display:none !important; }
@media (hover: none) { #croc-cursor { display:none !important; } }
.croc-body { transform-origin:20px 15px; display:block; }
/* 회전은 JS(rAF 스프링)가 .croc-body transform으로 직접 제어 */

/* 턱: 기본 = 입 벌림(윗턱 끝 위로, 아랫턱 끝 아래로 — 같은 폭으로 벌어져 끝이 안 튀어나옴)
   클릭 유지 = 0°로 모이며 입 다뭄 */
.jaw-top, .jaw-bot { transform-origin:36px 15.5px; transition:transform .12s var(--ease-spring); }
.jaw-top { transform:rotate(10deg); }
.jaw-bot { transform:rotate(-8deg); }
#croc-cursor.bite .jaw-top { transform:rotate(0deg) translateY(1.5px); }
#croc-cursor.bite .jaw-bot { transform:rotate(0deg) translateY(-1.5px); }

/* 분노 이스터에그 — 오래 누르면 부들부들 */
#croc-cursor.angry { animation:croc-rage .1s steps(2) infinite; }
@keyframes croc-rage {
  0% { margin-left:-4px; }
  50% { margin-left:-2px; margin-top:-16px; }
  100% { margin-left:-3px; margin-top:-15px; }
}

/* 분노 폭발 — 참다못해 터짐: 격렬한 떨림 + 턱 스냅, 물고기 도망 */
#croc-cursor.burst { animation:croc-burst .08s steps(2) infinite; }
@keyframes croc-burst {
  0%   { margin:-18px 0 0 -7px; }
  50%  { margin:-12px 0 0 1px; }
  100% { margin:-15px 0 0 -3px; }
}
#croc-cursor.burst .jaw-top { animation:snap-top .13s ease-in-out infinite alternate; }
#croc-cursor.burst .jaw-bot { animation:snap-bot .13s ease-in-out infinite alternate; }
@keyframes snap-top { from { transform:rotate(12deg); }  to { transform:rotate(0deg) translateY(1.5px); } }
@keyframes snap-bot { from { transform:rotate(-10deg); } to { transform:rotate(0deg) translateY(-1.5px); } }

/* ============================================================
   MAP NAV — 늪지대 지도 (스크롤 스파이)
============================================================ */
#map-nav[hidden] { display:none !important; }
#map-nav {
  position:fixed; left:20px; top:50%; transform:translateY(-50%);
  z-index:80; text-align:left; font-family:var(--mono);
}
.map-title { font-size:9px; letter-spacing:3px; color:var(--dim); margin-bottom:12px; }
.map-trail { position:relative; display:flex; flex-direction:column; padding-left:30px; }
.map-trail::before { /* 점선 물길 */
  content:""; position:absolute; left:9px; top:10px; bottom:10px; width:0;
  border-left:1px dashed var(--hairline);
}
.map-node {
  position:relative; display:block; background:none; border:none; text-align:left;
  font-family:var(--mono); font-size:10px; letter-spacing:1px;
  color:var(--dim); padding:7px 0; transition:color .2s;
}
.map-node:hover { color:var(--fg); }
.map-node .map-dot {
  position:absolute; left:-25px; top:50%; width:8px; height:8px;
  transform:translateY(-50%) rotate(45deg);
  background:var(--bg); border:1.5px solid var(--stroke-strong);
  transition:.2s;
}
.map-node.active { color:var(--acc); }
.map-node.active .map-dot { border-color:var(--acc); }
#map-croc {
  position:absolute; left:-4px; width:26px; margin-top:-9px; /* croc-bob 애니메이션과 충돌 없게 transform 대신 margin으로 센터링 */
  transition:top .45s cubic-bezier(.5,1.6,.4,1);
  animation: croc-bob 3s ease-in-out infinite;
}
@media (max-width: 1150px) { #map-nav { display:none !important; } }

/* ---------- touch devices (hover 없음) ---------- */
@media (hover: none) {
  .half-enter { opacity:1; }             /* [ENTER]가 항상 보이게 */
  .half:hover { flex:1; }                /* hover 확장 무효화 */
  body { cursor:auto; }
}

/* ============================================================
   PRINT — ⎙ PRINT 시 #print-root만 흰 배경 문서로 출력
============================================================ */
#print-root { display:none; }
@media print {
  body > *:not(#print-root) { display:none !important; }
  body { background:#fff; color:#000; text-align:left; cursor:auto; }
  #print-root {
    display:block; font-family:"Pretendard Variable", Pretendard, "Noto Sans KR", sans-serif;
    color:#000; font-size:11px; line-height:1.55; padding:0 4mm;
  }
  #print-root h1 { font-size:19px; margin-bottom:2mm; }
  #print-root h2 {
    font-size:14px; margin:6mm 0 2mm; padding-bottom:1mm;
    border-bottom:2px solid #000;
  }
  #print-root h3 { font-size:12px; margin:4mm 0 1.5mm; }
  #print-root .pr-head { color:#333; margin-bottom:3mm; }
  #print-root .pr-item { margin-bottom:2.5mm; page-break-inside:avoid; }
  #print-root .pr-year { color:#555; font-size:10px; margin-left:2mm; }
  #print-root .pr-sub { color:#555; font-size:10px; }
  #print-root .pr-desc { color:#222; }
  #print-root .pr-note, #print-root .pr-sem { margin:1.5mm 0 .5mm; }
  #print-root .pr-gap { color:#555; margin:1.5mm 0; }
  #print-root table { width:100%; border-collapse:collapse; margin-bottom:2mm; page-break-inside:avoid; }
  #print-root td { border-bottom:.3pt solid #bbb; padding:.8mm 1.5mm; font-size:9.5px; }
}

/* ============================================================
   EASTER EGG GAME — 악어 미로
============================================================ */
#game-overlay[hidden] { display:none !important; }
#game-overlay {
  position:fixed; inset:0; z-index:1500;
  background:rgba(10,10,10,.96);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; font-family:var(--mono);
}
#game-hud {
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center;
  font-size:13px; letter-spacing:1px; color:var(--fg);
}
#g-score { color:#e8e8f0; }
#g-best { color:var(--dim); font-size:11px; }
#g-time { color:#c9e5c4; min-width:3ch; text-align:center; }
#g-lives { color:#cee1f3; letter-spacing:3px; }
#g-exit {
  background:transparent; border:1px solid var(--dim); color:var(--dim);
  font-size:11px; padding:4px 9px; border-radius:var(--r-s);
  transition:.2s var(--ease-spring);
}
#g-exit:hover { border-color:#fff; color:#fff; }
#game-canvas {
  border:1px solid var(--hairline);
  border-radius:var(--r-s);
  box-shadow: var(--shadow-glass);
  image-rendering:pixelated;
}
/* 이스터에그 발견 연출 */
#egg-toast[hidden] { display:none !important; }
#egg-toast {
  position:absolute; inset:0; z-index:10;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:rgba(10,10,10,.92);
  animation: egg-pop .35s steps(5);
}
@keyframes egg-pop {
  0% { transform:scale(1.15) skewX(-4deg); filter:hue-rotate(120deg); }
  100% { transform:none; filter:none; }
}
.egg-title {
  font-family:var(--disp); font-size:clamp(34px,7vw,64px); letter-spacing:2px;
  color:var(--fg);
  animation: egg-shake .18s steps(2) 4;
}
@keyframes egg-shake {
  0%{transform:translate(-3px,1px)} 50%{transform:translate(3px,-2px)} 100%{transform:translate(-1px,2px)}
}
.egg-sub { font-family:var(--mono); font-size:13px; color:var(--fg); letter-spacing:2px; }

#game-msg {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:rgba(18,18,18,.78); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border-radius:var(--r-m);
  padding:30px 40px; text-align:center; max-width:86vw;
  box-shadow: var(--inner-hl), var(--shadow-glass);
}
#game-msg[hidden] { display:none; }
#game-msg h2 {
  font-family:var(--disp); font-size:30px; margin-bottom:12px;
  color:var(--fg);
}
#game-msg p { font-size:12px; color:var(--dim); line-height:1.9; margin-bottom:10px; }
#game-msg .gm-croc { color:#aad59e; font-size:11px; line-height:1.3; margin-bottom:10px; }
#game-msg .gm-land { color:#aad59e; }
#game-msg .gm-water { color:#b8cde6; }
#game-msg .gm-keys { color:#e8e8f0; }
#game-msg .gm-final { font-size:16px; color:#fff; }
#game-msg .gm-final b { color:#c9e5c4; font-size:22px; }
#game-msg .gm-bonus { font-size:11px; color:var(--dim); }
#game-msg button {
  background:var(--chip); border:1px solid color-mix(in srgb, #aad59e 60%, transparent); color:#aad59e;
  font-size:13px; letter-spacing:2px; padding:10px 20px; margin:8px 6px 0;
  border-radius:var(--r-s); box-shadow: var(--inner-hl);
  transition:.25s var(--ease-spring);
}
#game-msg button:hover { background:#aad59e; border-color:#aad59e; color:#000; }
#game-msg #gm-quit { border-color:var(--dim); color:var(--dim); }
#game-msg #gm-quit:hover { background:var(--dim); color:#000; box-shadow:none; }

/* ============================================================
   LIFE MAP — WANI 타이틀 클릭 → 악어가 걸어온 시간 여행 지도
============================================================ */
/* WANI 옆 사전풀이 주석 — 은은한 회색 (그라데이션 클립 영향 없이 자체 색) */
.wani-note {
  display:inline-block; vertical-align:baseline;
  max-width:300px; margin-left:20px;
  font-family:var(--kr); font-weight:400; font-size:12px;
  letter-spacing:0; line-height:1.75; text-align:left;
  color:var(--dim); opacity:.8;
}
.wani-note b { font-weight:700; color:var(--fg); opacity:.75; }
.landing-title { pointer-events:auto; cursor:pointer; transition:filter .2s; }
.landing-title:hover, .landing-title:focus-visible { filter:brightness(1.15); }
.landing-map-hint {
  position:absolute; right:6vw; bottom:6.5vh; margin:0; text-align:right;
  font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--dim);
  animation:map-hint-pulse 1.8s ease-in-out infinite;
}
@keyframes map-hint-pulse { 0%,100% { opacity:.45; } 50% { opacity:1; } }
.landing-map-hint b { color:var(--c2); }

#journey[hidden] { display:none !important; }
#journey { position:relative; z-index:10; }
#jy-sticky {
  position:sticky; top:0; overflow:hidden;
  height:100vh; height:100dvh;
}
/* 배경 고스트 연도 — 악어의 현재 위치 */
#jy-year {
  position:absolute; left:50%; top:45%; transform:translate(-50%,-50%);
  z-index:0; pointer-events:none; user-select:none;
  font-family:var(--disp); font-size:clamp(110px,26vw,320px); line-height:1;
  color:transparent;
  -webkit-text-stroke:2px var(--stroke-soft);
}
#jy-year.tick { animation:jy-year-pop .45s steps(5); }
@keyframes jy-year-pop {
  0% { opacity:.15; transform:translate(-50%,-50%) scale(1.05) skewX(-5deg); }
  60% { opacity:.8; transform:translate(-49%,-50%) skewX(3deg); }
  100% { opacity:1; transform:translate(-50%,-50%); }
}

#jy-track { position:absolute; left:0; top:0; height:100%; will-change:transform; }
#jy-svg { position:absolute; left:0; top:0; }
#jy-nodes { position:absolute; inset:0; }

/* 경로 위 지점 + 연결 스템 */
.jy-dot {
  position:absolute; width:10px; height:10px; z-index:2;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--bg); border:2px solid;
}
.jy-dot.land  { border-color:var(--land1); }
.jy-dot.water { border-color:var(--water1); }
.jy-stem { position:absolute; width:0; transform:translateX(-50%); border-left:1px dashed; opacity:.5; }
.jy-stem.land  { border-color:var(--land1); }
.jy-stem.water { border-color:var(--water1); }

/* 이벤트 카드 — 위(땅/개발), 아래(물/음악) */
.jy-card {
  position:absolute; width:230px; transform:translateX(-50%);
  padding:12px 14px; text-align:center;
  background:rgba(18,18,18,.7); border:1px solid var(--hairline);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border-radius:var(--r-s);
  box-shadow: var(--inner-hl), 0 4px 14px rgba(0,0,0,.22);
  opacity:.72;
  transition:border-color .3s var(--ease-spring), box-shadow .3s var(--ease-spring), opacity .3s var(--ease-spring);
}
.jy-card.land  { border-top:2px solid var(--land1); }
.jy-card.water { border-bottom:2px solid var(--water1); }
.jy-card.near  { opacity:1; }
.jy-card.land.near  { border-color:var(--land1); }
.jy-card.water.near { border-color:var(--water1); }
.jy-year { font-family:var(--mono); font-size:10px; letter-spacing:1px; }
.jy-card.land  .jy-year { color:var(--land2); }
.jy-card.water .jy-year { color:var(--water3); }
.jy-title { font-size:14px; font-weight:900; margin:4px 0 2px; color:var(--fg); }
.jy-sub { font-family:var(--mono); font-size:10px; color:var(--dim); }
.jy-desc {
  font-size:11px; color:var(--dim); line-height:1.7; margin-top:6px; cursor:pointer;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.jy-card.open .jy-desc { -webkit-line-clamp:unset; max-height:170px; overflow:auto; }
.jy-tags { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; margin-top:8px; }
.jy-tags span {
  font-family:var(--mono); font-size:9px; letter-spacing:1px;
  padding:1px 6px; border:1px solid rgba(255,255,255,.25); color:var(--dim);
}

/* 걷는 악어 */
#jy-croc {
  position:absolute; z-index:5; pointer-events:none;
  transform:translate(-55%,-90%) rotate(var(--tilt,0deg));
}
#jy-croc .leg { transform-origin:center top; }
#jy-croc.walk .leg-a { animation:jy-step .32s steps(2) infinite; }
#jy-croc.walk .leg-b { animation:jy-step .32s steps(2) infinite reverse; }
@keyframes jy-step { 0%,100% { transform:rotate(13deg); } 50% { transform:rotate(-13deg); } }

/* 깃발·종점 CTA·라벨·힌트 */
.jy-flag {
  position:absolute; transform:translate(-50%,-210%); white-space:nowrap;
  font-family:var(--mono); font-size:12px; letter-spacing:2px;
  color:var(--acc);
}
.jy-flag.end { color:var(--acc); }
.jy-cta { position:absolute; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; }
.jy-cta button {
  font-family:var(--mono); font-size:11px; letter-spacing:2px;
  padding:9px 16px; background:var(--glass-bg); white-space:nowrap;
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border-radius:var(--r-s); box-shadow: var(--inner-hl);
  transition:.25s var(--ease-spring);
}
.jy-cta button[data-jy-go] { border:1px solid var(--hairline); color:var(--fg); }
.jy-cta button[data-jy-go]:hover { background:var(--acc); border-color:var(--acc); color:#000; }
.jy-side-label {
  position:absolute; left:18px; z-index:6; pointer-events:none;
  font-family:var(--mono); font-size:10px; letter-spacing:3px;
}
.jy-label-land  { top:86px; color:var(--land1); }
.jy-label-water { bottom:44px; color:var(--water1); }
#jy-hint {
  position:absolute; left:50%; bottom:40px; transform:translateX(-50%); z-index:6;
  font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--fg);
  background:var(--glass-bg); border:1px dashed var(--hairline);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border-radius:var(--r-s); box-shadow: var(--inner-hl), 0 4px 14px rgba(0,0,0,.25);
  padding:8px 14px; white-space:nowrap; transition:opacity .4s;
}
#jy-hint.off { opacity:0; }

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  /* --- HUD: 로고 + 아이콘 버튼 한 줄 --- */
  #hud { flex-wrap:nowrap; gap:10px; padding:8px 10px; }
  #logo { font-size:15px; letter-spacing:1px; white-space:nowrap; }
  #hud-status { display:none; }
  #hud-controls { flex-wrap:nowrap; gap:5px; }
  .hud-btn { font-size:11px; padding:6px 8px; letter-spacing:0; white-space:nowrap; }
  .hud-btn .btn-label, .hud-btn [data-ui] { display:none; } /* 라벨 숨김 → 아이콘만 */
  .ticker-top { top:41px; }

  /* --- 랜딩: 중앙 블록 축소 (전부 유지) --- */
  .landing-title { font-size:clamp(44px,18vw,84px); }
  .wani-note { display:block; margin:10px 0 0; font-size:10px; max-width:70vw; }
  .landing-eyebrow { font-size:9px; letter-spacing:2px; left:5vw; top:12vh; }
  .croc-ascii { font-size:8px; }
  .landing-id { font-size:9px; right:5vw; bottom:13vh; }
  .half-land { padding:11vh 5vw 0 0; }
  .half-water { padding:0 0 8vh 5vw; }
  .half-inner { padding:0 16px; }
  .half-title { font-size:clamp(24px,7vw,34px); }
  .half-tag { font-size:11px; letter-spacing:3px; }
  .half-desc { font-size:12px; }

  /* --- 콘텐츠 --- */
  #content { padding:120px 5vw 110px; }
  .section-block { margin-bottom:90px; }
  .section-ghost { display:none; }
  .section-head { gap:10px; margin-bottom:26px; }
  .term-box { font-size:12px; padding:16px 14px; overflow-wrap:break-word; }
  .section-body p { font-size:14px; }
  .card-grid { grid-template-columns:minmax(0,1fr); }
  .tr-sem { overflow-x:auto; } /* 성적표 테이블 가로 스크롤 */
  .tr-sem summary { padding:12px; flex-wrap:wrap; }
  .tr-table { font-size:11px; }
  .tr-table th, .tr-table td { padding:6px; }
  .tl-desc { padding:0 10px; }
  .link-big { font-size:12px; padding:12px 18px; letter-spacing:1px; }
  .cross-cta-btn { font-size:14px; padding:14px 22px; }

  /* --- LIFE MAP --- */
  .jy-card { width:200px; padding:10px 12px; }
  .jy-title { font-size:13px; }
  .jy-desc { font-size:10px; }
  .jy-side-label { font-size:9px; letter-spacing:2px; }
  .jy-label-land { top:74px; }
  .jy-label-water { bottom:72px; } /* 힌트와 겹침 방지 */
  #jy-hint { font-size:10px; padding:6px 10px; bottom:36px; }
  .jy-flag { font-size:11px; }
  .landing-map-hint { font-size:9px; right:5vw; bottom:9vh; }
}

/* 초소형 화면(≤400px) — HUD가 확실히 한 줄에 들어가게 */
@media (max-width: 400px) {
  #logo { font-size:13px; }
  #hud-controls { gap:4px; }
  .hud-btn { font-size:10px; padding:5px 6px; }
}

/* ============================================================
   DEV LIST — 아카이브/레포 목록형 (1열 · 고밀도 · 하드웨어 UI)
============================================================ */
.dev-list { max-width:820px; margin:0 auto; text-align:left; border-top:1px solid var(--hairline); }
.dl-row {
  display:grid; grid-template-columns:128px 1fr; gap:8px 32px;
  padding:24px 8px; border-bottom:1px solid var(--hairline);
  transition:background .2s var(--ease-spring);
}
.dl-row:hover { background:var(--hover-bg); }
.dl-meta { font-family:var(--mono); font-size:11px; color:var(--dim); line-height:1.8; padding-top:3px; }
.dl-title { font-size:15px; font-weight:700; color:var(--fg); display:inline; }
.dl-sub { font-family:var(--mono); font-size:11px; color:var(--dim); margin-left:10px; white-space:nowrap; }
.dl-desc { font-size:13px; color:var(--dim); line-height:1.8; margin-top:8px; max-width:640px; }
.dl-foot { margin-top:8px; font-family:var(--mono); font-size:10px; letter-spacing:1px; }
.dl-tag { color:var(--c2); margin-right:12px; }
.dl-foot a { font-size:11px; }

/* ============================================================
   ARTIST TRACKLIST — 앨범 크레딧형 타이포 레이아웃
============================================================ */
.tracklist { max-width:880px; margin:0 auto; text-align:left; }
.trk {
  display:grid; grid-template-columns:96px 1fr; gap:8px 32px;
  padding:48px 8px; border-bottom:1px solid var(--hairline); align-items:start;
}
.trk:first-child { border-top:1px solid var(--hairline); }
.trk-no {
  font-family:var(--disp); font-size:clamp(40px,6vw,72px); line-height:.9;
  color:transparent; -webkit-text-stroke:1px var(--stroke-strong);
  user-select:none;
}
.trk-title {
  font-family:var(--disp); font-size:clamp(22px,4vw,40px); line-height:1.08;
  color:var(--fg); text-transform:uppercase; letter-spacing:.5px; margin:0 0 8px;
}
.trk-meta { font-family:var(--mono); font-size:11px; letter-spacing:1px; color:var(--dim); margin-bottom:16px; }
.trk-meta .trk-year { color:var(--acc); margin-right:16px; }
.trk-desc { font-size:13px; color:var(--dim); line-height:1.9; max-width:560px; }
.trk-credits { margin-top:16px; font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--dim); text-transform:uppercase; }
.trk-credits span { margin-right:16px; }
.trk-link { display:inline-block; margin-top:12px; font-family:var(--mono); font-size:11px; letter-spacing:1px; }
.trk-link::after { content:" ↗"; }

@media (max-width: 720px) {
  .dl-row { grid-template-columns:1fr; gap:4px; padding:20px 4px; }
  .dl-sub { display:block; margin:4px 0 0; }
  .trk { grid-template-columns:1fr; gap:4px; padding:32px 4px; }
  .trk-no { font-size:32px; -webkit-text-stroke-width:1px; }
}