/* 여정 맵 — 챕터 배너 + 돌다리 경로 (tokens.css 의존) */

/* ── 상단 HUD (스트릭·별) ───────────────────────────── */
#hud{position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:var(--sp-2);
  padding:10px var(--sp-3);background:var(--scrim);backdrop-filter:blur(8px);
  border-bottom:2.5px solid var(--line)}
#hud .brand{display:flex;align-items:center;gap:7px;margin-right:auto}
#hud .brand b{font-family:var(--font-hand);font-size:19px;line-height:1;
  word-spacing:-.30em}  /* Gaegu 공백 글리프가 과하게 넓다 — 어간 보정. 대표 확정값(2026-08-17) — 바꾸지 말 것 */
#hud .stat{display:flex;align-items:center;gap:4px;padding:5px 11px 5px 7px;
  background:var(--card);border:1.5px solid var(--edge);border-radius:var(--radius-pill)}
#hud .stat img{width:21px;height:21px;object-fit:contain}
#hud .stat span{font-family:var(--font-hand);font-size:17px;font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1}

/* ── 스크롤 본체 ───────────────────────────────────── */
.map{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--sp-3) var(--sp-3) var(--sp-5)}

/* ── 챕터 배너 ─────────────────────────────────────── */
.chapter{margin:var(--sp-3) 0 var(--sp-1)}
.chapter:first-child{margin-top:var(--sp-1)}
.ch-band{position:relative;display:flex;align-items:center;gap:var(--sp-2);
  min-height:84px;padding:12px 96px 12px var(--sp-3);
  border:1.5px solid var(--edge);border-radius:var(--wobble);
  box-shadow:0 6px 20px rgba(58,52,46,.13);overflow:hidden}
.ch-band .txt{min-width:0}
.ch-band .eyebrow{font-family:var(--font-hand);font-size:13px;font-weight:700;
  letter-spacing:.06em;opacity:.72}
.ch-band h2{font-family:var(--font-hand);font-size:24px;font-weight:700;line-height:1.15}
.ch-band p{font-size:12.5px;line-height:1.45;opacity:.82;margin-top:2px}
.ch-band .who{position:absolute;right:-6px;bottom:-8px;width:104px;height:104px;
  object-fit:contain;object-position:bottom;pointer-events:none}

/* 챕터 색 — crayon 팔레트에서만 (INV-1) */
.c-green .ch-band{background:#DDF0D6}  .c-green  .node.done{background:var(--cray-green)}
.c-blue  .ch-band{background:#D8E8F8}  .c-blue   .node.done{background:var(--cray-blue)}
.c-yellow .ch-band{background:#FCF0C8} .c-yellow .node.done{background:var(--cray-yellow)}
.c-pink  .ch-band{background:#FFE0E7}  .c-pink   .node.done{background:var(--cray-pink)}
.c-red   .ch-band{background:#FADCD6}  .c-red    .node.done{background:var(--cray-red)}
.c-yellow .node.done .lbl{color:var(--ink)}

/* ── 돌다리 경로 ───────────────────────────────────── */
.path{position:relative}
.stone{position:absolute;left:50%;width:9px;height:7px;border-radius:50%;
  background:var(--line);transform:translate(calc(-50% + var(--x)),-50%);
  top:var(--y)}

.node{position:absolute;left:50%;top:var(--y);width:74px;height:74px;
  transform:translateX(calc(-50% + var(--x)));
  display:grid;place-items:center;border:1.5px solid var(--edge);border-radius:50%;
  background:var(--card);box-shadow:0 5px 0 rgba(58,52,46,.3);transition:transform .07s,box-shadow .07s}
.node:active{transform:translateX(calc(-50% + var(--x))) translateY(4px);box-shadow:0 1px 0 rgba(58,52,46,.3)}
.node .lbl{font-family:var(--font-hand);font-size:27px;font-weight:700;color:#fff;line-height:1}
.node .lbl.sm{font-size:15px}
.node img{width:32px;height:32px;object-fit:contain}

.node.locked{background:#EFE9DD;border-color:var(--line);box-shadow:0 4px 0 rgba(58,52,46,.12)}
.node.locked img{opacity:.4;width:26px;height:26px}
.node.locked .lbl{color:var(--sub)}

.node.now{background:var(--cray-yellow);border-width:4px}
.node.now .lbl{color:var(--ink)}
.node.big{width:88px;height:88px}
.node.big img{width:42px;height:42px}

/* 지금 서 있는 돌 — 숨쉬는 링 */
.node.now::before{content:"";position:absolute;inset:-9px;border:3px solid var(--cray-yellow);
  border-radius:50%;opacity:.55;animation:ring 1.9s ease-out infinite}
@keyframes ring{0%{transform:scale(.94);opacity:.6}70%{transform:scale(1.14);opacity:0}100%{opacity:0}}

/* 완료 별 */
.stars{position:absolute;left:50%;top:calc(var(--y) + 60px);transform:translateX(calc(-50% + var(--x)));
  display:flex;gap:1px}
.stars img{width:14px;height:14px}
.stars img.off{opacity:.22}

/* "시작" 말풍선 */
.hint{position:absolute;left:50%;top:calc(var(--y) - 44px);
  transform:translateX(calc(-50% + var(--x)));
  padding:5px 14px;background:#fff;border:1.5px solid var(--edge);border-radius:14px;
  font-family:var(--font-hand);font-size:16px;font-weight:700;white-space:nowrap;
  box-shadow:0 5px 16px rgba(58,52,46,.12);animation:bob 1.6s ease-in-out infinite}
.hint::after{content:"";position:absolute;left:50%;bottom:-9px;margin-left:-6px;
  width:0;height:0;border:6px solid transparent;border-top-color:var(--ink)}
@keyframes bob{0%,100%{transform:translateX(calc(-50% + var(--x))) translateY(0)}
               50%{transform:translateX(calc(-50% + var(--x))) translateY(-5px)}}

@media (prefers-reduced-motion:reduce){
  .node.now::before,.hint{animation:none}
}

/* 맵 화면은 자체 패딩을 쓴다 (.screen 기본 패딩 해제) */
.map-screen{padding:0;min-height:0;overflow:hidden}

/* ── 배경 깊이 ─────────────────────────────────────────
   backgrounds/ 6종은 크레용으로 그린 진짜 장면이다. 30%로 묻어 두면 아깝다.
   챕터 진입부에 장면 띠로 보여 주고 아래로 사라지게 한다 — "그 장소로 들어간다".
   INV-1 준수: 새 이미지 없이 디자인셋 6종만. */
.map{
  background-image:radial-gradient(circle at 1px 1px, rgba(58,52,46,.06) 1px, transparent 0);
  background-size:22px 22px;
}
.path{isolation:isolate}
.path::before{                       /* 챕터 색 아주 옅은 판 — 구간 구분만 */
  content:"";position:absolute;inset:0 -10px;z-index:-2;
  background:var(--wash);border-radius:var(--wobble-lg);
}
.path::after{                        /* 장면 띠 — 위에서 시작해 아래로 사라진다 */
  content:"";position:absolute;left:-10px;right:-10px;top:0;height:min(216px,100%);z-index:-1;
  background:var(--bg) center top/100% auto no-repeat;
  opacity:.48;border-radius:var(--wobble-lg) var(--wobble-lg) 0 0;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55) 0,#000 22%,transparent 100%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.55) 0,#000 22%,transparent 100%);
}
/* 챕터 색 워시 — 배너와 같은 계열, 종이에 가깝게.
   [2026-08-19] .path 가 아니라 챕터(.c-*)에 건다 — 펼친 접힘 컨테이너(.chapter.fold.open, home-special.css)가
   같은 워시를 바탕으로 써서 길 아래 여백까지 한 몸으로 이어지게. */
.c-green {--wash:#F3F8F0} .c-blue  {--wash:#F1F6FB}
.c-yellow{--wash:#FBF7EA} .c-pink  {--wash:#FDF3F5}
.c-red   {--wash:#FBF2EF}

/* 장면 위에서도 돌·별이 또렷하게 */
.stone{background:rgba(58,52,46,.24);box-shadow:0 0 0 2.5px rgba(251,246,236,.75)}
.node.locked{background:#EFE9DE}

/* 맵 화면은 자체 패딩을 쓴다 (.screen 기본 패딩 해제) */
.map-screen{padding:0;min-height:0;overflow:hidden}

/* P7 스페셜 섹션·돌다리 접힘·도착 팝업은 css/home-special.css (home.js 가 주입) — SPEC docs/design/home-special
   접힘 컨테이너 여백(.chapter.fold / .hs)은 home-special.css 가 소유 — 여기 .chapter 마진은 폴백. */