/* style.css — 휘휘! 숲속 오케스트라 (따뜻한 숲 · 그림책 톤) · 키트 토큰(--gb-*)만 덮는다 */
:root {
  --gb-bg: #16251c;
  --gb-panel: rgba(255, 248, 230, 0.07);
  --gb-panel-2: rgba(255, 248, 230, 0.12);
  --gb-line: rgba(255, 240, 210, 0.16);
  --gb-text: #fdf6e3;
  --gb-dim: rgba(253, 246, 227, 0.66);
  --gb-accent: #f2b84b;
  --gb-accent-ink: #2b1a00;
  --gb-gold: #ffd77a;
  --gb-danger: #ff8a7a;
  --gb-font: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ink: #0e1812;
  --zone-top: 42%;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--gb-bg); color: var(--gb-text); font-family: var(--gb-font); }
body { overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
[hidden] { display: none !important; }
button { font-family: var(--gb-font); }
#app { position: fixed; inset: 0; background: var(--gb-bg); }
#stageWrap { position: absolute; inset: 0; touch-action: none; }
#stage, #stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#baton { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

/* 화면(홈·패널) — 무대 위에 반투명 막 · 넘치면 위에서부터 스크롤(가운데 정렬은 margin:auto) */
.screen { position: absolute; inset: 0; z-index: 10; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain;
  padding: max(14px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: rgba(14, 24, 18, 0.78); backdrop-filter: blur(2px); }
.screen > .gb-home, .screen > .panel { margin: 0 auto; }
#home { background: linear-gradient(180deg, rgba(14, 24, 18, 0.55), rgba(14, 24, 18, 0.86) 55%); }
.brand-mark { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe7a8, #f2b84b 55%, #b9741f); box-shadow: 0 0 14px rgba(255, 210, 120, 0.6); position: relative; }
.brand-mark::after { content: ""; position: absolute; left: 13px; top: -6px; width: 3px; height: 22px; background: #fff3d6; border-radius: 2px; transform: rotate(32deg); }
.home-foot { text-align: center; margin: 2px 0 0; }

.panel { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 12px; }
.bar { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.bar h2 { flex: 1; margin: 0; font-size: 20px; }
.wallet { font-weight: 800; color: var(--gb-gold); font-size: 15px; display: inline-flex; align-items: center; gap: 4px; }
.wallet svg { width: 18px; height: 18px; }

.stage-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.stage-tab { min-height: 64px; border-radius: 14px; border: 1px solid var(--gb-line); background: var(--gb-panel); color: var(--gb-text); cursor: pointer; padding: 6px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-weight: 800; font-size: 13px; }
.stage-tab small { font-weight: 700; font-size: 12px; color: var(--gb-dim); }
.stage-tab.on { background: var(--gb-panel-2); border-color: var(--gb-accent); box-shadow: inset 0 -3px 0 var(--gb-accent); }
.stage-tab.locked { opacity: 0.5; }
.song-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.song { text-align: left; min-height: 78px; border-radius: 14px; border: 1px solid var(--gb-line); background: var(--gb-panel); color: var(--gb-text); padding: 10px 12px; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.song b { font-size: 16px; }
.song small { color: var(--gb-dim); font-size: 12.5px; grid-column: 1; }
.song .st { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--gb-gold); display: flex; gap: 1px; }
.song .st svg { width: 16px; height: 16px; }
.song.locked { opacity: 0.45; }
.song:active { transform: scale(0.98); }
.opts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.seg { display: inline-flex; gap: 4px; background: var(--gb-panel); border: 1px solid var(--gb-line); border-radius: 999px; padding: 3px; }
.seg button { min-height: 44px; min-width: 64px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent; color: var(--gb-text); font-weight: 800; font-size: 14px; cursor: pointer; }
.seg button.on { background: var(--gb-accent); color: var(--gb-accent-ink); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.tile { text-align: left; min-height: 84px; border-radius: 14px; border: 1px solid var(--gb-line); background: var(--gb-panel); color: var(--gb-text); padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.tile b { font-size: 15.5px; display: flex; align-items: center; gap: 6px; }
.tile small { color: var(--gb-dim); font-size: 12.5px; line-height: 1.4; }
.tile.done b::after { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--gb-accent); -webkit-mask: url('assets/icons/check.svg') center/12px no-repeat; mask: url('assets/icons/check.svg') center/12px no-repeat; }
.tile.locked { opacity: 0.45; }
.tile .fam { font-size: 12px; font-weight: 800; color: var(--gb-gold); }

/* 연주 HUD — 무대 위에 얹는다(막 없음) */
.screen.hud { background: none; backdrop-filter: none; pointer-events: none; padding: 0; overflow: hidden; z-index: 20; }
.hud > * { pointer-events: auto; }
.hud-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: max(8px, env(safe-area-inset-top)) 10px 6px;
  background: linear-gradient(180deg, rgba(10, 16, 12, 0.72), rgba(10, 16, 12, 0)); }
.hud-mid { flex: 1; min-width: 0; text-align: center; }
.hud-title { font-weight: 800; font-size: 14px; color: var(--gb-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-nums { display: flex; justify-content: center; align-items: baseline; gap: 12px; font-variant-numeric: tabular-nums; font-weight: 900; font-size: 22px; }
.hud-nums.small { font-size: 12.5px; font-weight: 700; color: var(--gb-dim); }
.hud-combo { font-size: 15px; color: var(--gb-gold); min-width: 3em; }
.hud-stars { display: inline-flex; gap: 1px; color: var(--gb-gold); }
.hud-stars svg { width: 18px; height: 18px; }
.hud-stars svg.off { color: rgba(255, 255, 255, 0.25); }
.hud-modebar { position: absolute; left: 50%; top: calc(max(8px, env(safe-area-inset-top)) + 54px); transform: translateX(-50%); pointer-events: none; }
#strip { position: absolute; left: 10px; right: 10px; top: calc(max(8px, env(safe-area-inset-top)) + 52px); height: 46px; width: calc(100% - 20px); border-radius: 10px; pointer-events: none; }
.status { position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: min(92vw, 640px); text-align: center; font-weight: 800; font-size: 15px;
  background: rgba(10, 16, 12, 0.7); border: 1px solid var(--gb-line); border-radius: 14px; padding: 8px 14px; pointer-events: none; }
.status:empty { display: none; }
.hint { position: absolute; right: 12px; bottom: max(14px, env(safe-area-inset-bottom)); font-size: 12px; color: var(--gb-dim); text-align: right; pointer-events: none; line-height: 1.5; max-width: 40vw; }
.sec-toggles { position: absolute; left: 0; right: 0; bottom: max(10px, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 0 10px; }
.sec-toggles button { min-height: 44px; min-width: 60px; border-radius: 12px; border: 1px solid var(--gb-line); background: rgba(10, 16, 12, 0.7); color: var(--gb-text); font-weight: 800; font-size: 13px; cursor: pointer; }
.sec-toggles button.off { opacity: 0.45; text-decoration: line-through; }

/* 덮개 카드 */
.screen.modal { display: grid; place-items: center; background: rgba(8, 14, 10, 0.72); z-index: 30; }
.card { width: 100%; max-width: 440px; background: #1d2f24; border: 1px solid var(--gb-line); border-radius: 22px; padding: 20px 18px; text-align: center; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); margin: auto; }
.card h2 { margin: 0; font-size: 22px; }
.card p { margin: 0; color: var(--gb-dim); line-height: 1.6; font-size: 15px; }
.row { display: flex; gap: 8px; }
.row > * { flex: 1; }
.btn { min-height: 48px; border-radius: 14px; border: 1px solid var(--gb-line); background: var(--gb-panel); color: var(--gb-text); font-weight: 800; font-size: 15px; cursor: pointer; padding: 0 14px; }
.btn:active, .gb-play:active { transform: scale(0.97); }
.res-stars { display: flex; justify-content: center; gap: 6px; color: var(--gb-gold); }
.res-stars svg { width: 44px; height: 44px; }
.res-stars svg.off { color: rgba(255, 255, 255, 0.2); }
.res-pct { font-size: 40px; font-weight: 900; font-variant-numeric: tabular-nums; }
.res-bars { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.res-bar { display: grid; grid-template-columns: 6em 1fr 2.4em 3.2em; white-space: nowrap; gap: 8px; align-items: center; font-size: 13.5px; font-weight: 700; }
.res-bar i { display: block; height: 10px; border-radius: 9px; background: var(--gb-panel-2); position: relative; overflow: hidden; }
.res-bar i > span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #f2b84b, #ffe28a); border-radius: 9px; }
.res-bar em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; color: var(--gb-dim); }
.card .res-verdict { margin: -4px 0 2px; font-size: 22px; font-weight: 900; color: var(--gb-gold); }
.card .res-verdict.low { color: var(--gb-text); }
.res-verdict small { display: block; margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--gb-dim); }
.res-bar b { font-size: 12px; font-weight: 800; padding: 1px 7px; border-radius: 9px; text-align: center; }
.res-bar.good b { background: rgba(120, 220, 150, 0.2); color: #9ff0b8; }
.res-bar.mid b { background: rgba(255, 215, 122, 0.16); color: var(--gb-gold); }
.res-bar.low b { background: rgba(255, 138, 122, 0.18); color: var(--gb-danger); }
.res-bar.low i > span { background: linear-gradient(90deg, #e2735f, #ff9f8a); }
.res-bar.good i > span { background: linear-gradient(90deg, #5fc983, #b6f5c5); }
.card .res-tip { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--gb-panel-2); font-size: 15px; font-weight: 700; line-height: 1.5; text-align: left; }
.res-tip b { color: var(--gb-gold); }
.res-extra { font-size: 14px; color: var(--gb-dim); line-height: 1.6; }
.res-extra b { color: var(--gb-gold); }
.story-img { aspect-ratio: 4 / 3; border-radius: 14px; background: #233a2c center/cover no-repeat; }
.cal-pad { height: 180px; border-radius: 16px; background: var(--gb-panel); border: 1px dashed var(--gb-line); display: grid; place-items: center; touch-action: none; }
.cal-dot { width: 46px; height: 46px; border-radius: 50%; background: var(--gb-accent); opacity: 0.3; transition: opacity 0.08s, transform 0.08s; }
.cal-dot.on { opacity: 1; transform: scale(1.25); }
.set-body, .credit-body { display: flex; flex-direction: column; gap: 10px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 6px 12px; border-radius: 14px; background: var(--gb-panel); border: 1px solid var(--gb-line); }
.set-row label { font-weight: 800; font-size: 15px; }
.set-row small { display: block; color: var(--gb-dim); font-weight: 600; font-size: 12.5px; }
.set-row input[type=range] { width: 140px; min-height: 44px; }
.toggle { min-width: 68px; min-height: 44px; border-radius: 999px; border: 1px solid var(--gb-line); background: var(--gb-panel-2); color: var(--gb-text); font-weight: 800; cursor: pointer; }
.toggle.on { background: var(--gb-accent); color: var(--gb-accent-ink); border-color: var(--gb-accent); }
.credit-body section { background: var(--gb-panel); border: 1px solid var(--gb-line); border-radius: 14px; padding: 12px 14px; font-size: 13.5px; line-height: 1.6; color: var(--gb-dim); }
.credit-body h3 { margin: 0 0 6px; color: var(--gb-text); font-size: 15px; }
.credit-body ul { margin: 0; padding-left: 18px; }
.ward-sec { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ward-sec h3 { margin: 4px 0 0; font-size: 16px; }
.ward-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.ward { min-height: 92px; border-radius: 14px; border: 1px solid var(--gb-line); background: var(--gb-panel); color: var(--gb-text); padding: 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-weight: 800; font-size: 13px; }
.ward .sw { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.3); }
.ward small { color: var(--gb-gold); font-size: 12px; display: inline-flex; align-items: center; gap: 2px; }
.ward small svg { width: 13px; height: 13px; }
.ward.on { border-color: var(--gb-accent); box-shadow: inset 0 0 0 2px var(--gb-accent); }
.ward.locked { opacity: 0.55; }
.loading { position: absolute; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 12px; background: rgba(10, 16, 12, 0.82); }
.loading p { margin: 0; font-weight: 800; }
.spin { width: 44px; height: 44px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.2); border-top-color: var(--gb-accent); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: absolute; left: 50%; top: max(16px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 60; background: #24392c; border: 1px solid var(--gb-accent); color: var(--gb-text); border-radius: 14px; padding: 10px 16px; font-weight: 800; font-size: 15px; max-width: 92vw; text-align: center; }
.big-text { font-size: 112%; }
.big-text .hud-nums { font-size: 26px; }
@media (max-width: 560px) {
  .stage-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stage-tab { font-size: 12px; min-height: 58px; }
  .hud-nums { font-size: 18px; gap: 8px; }
  .hint { display: none; }
  #strip { height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 3s; } }
/* @gb-juice-css v2 — kit/juice/juice.css. 게임 스타일시트 끝에 그대로 붙인다(CSP style-src 'self' 라 JS 가 <style> 을 넣지 않는다). */
.gbj-layer{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.gbj-pop{position:absolute;transform:translate(-50%,-50%) scale(var(--s));font:900 22px/1 system-ui,sans-serif;text-shadow:0 2px 0 #0008,0 0 12px currentColor;white-space:nowrap;animation:gbjPop .9s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes gbjPop{0%{opacity:0;transform:translate(-50%,-50%) scale(calc(var(--s)*.3))}15%{opacity:1;transform:translate(-50%,-80%) scale(calc(var(--s)*1.35))}35%{transform:translate(calc(-50% + var(--dx)),-120%) scale(var(--s))}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),-260%) scale(calc(var(--s)*.9))}}
.gbj-punch{animation:gbjPunch .32s cubic-bezier(.2,2,.4,1)}
@keyframes gbjPunch{0%{transform:scale(1)}30%{transform:scale(var(--gbj-p))}100%{transform:scale(1)}}
.gbj-flash{position:absolute;inset:0;opacity:0}
.gbj-flash.gbj-go{animation:gbjFlash .35s ease-out forwards}
@keyframes gbjFlash{to{opacity:0}}
/* 가운데 큰 글자 — 자리는 게임이 --gbj-banner-top 으로 옮긴다(HUD 배너·선택 카드와 겹치지 않게 · 2026-10-12 끝까지 진화 실측). 좁은 화면에서 넘치지 않게 vw 로 줄인다  · 튀어나올 때 1.25배라 폭은 76vw(2026-10-14 술래가 번진다: 92vw 면 412px 폰에서 양옆이 잘렸다 — banner-fit 실측) */
.gbj-banner{position:absolute;left:50%;top:var(--gbj-banner-top,40%);transform:translate(-50%,-50%);font:900 clamp(20px,6.4vw,40px)/1.1 system-ui,sans-serif;text-align:center;opacity:0;text-shadow:0 3px 0 #000a,0 0 24px currentColor;max-width:76vw;width:max-content}
.gbj-banner.gbj-go{animation:gbjBan var(--d,1.4s) cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes gbjBan{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-8deg)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(2deg)}30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(1.05)}}
@media (prefers-reduced-motion:reduce){.gbj-pop,.gbj-banner.gbj-go,.gbj-punch{animation-duration:.01s}}
.credit-body small { font-size: 12px; } .credit-body a { color: var(--gb-text); text-decoration: underline; word-break: break-all; }

/* 게임 방법(첫 판 전에 한 번 · 홈 «게임 방법») */
.card.howto { max-height: calc(100dvh - 32px); overflow-y: auto; }
.howto-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.howto-list li { word-break: keep-all; display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--gb-panel); font-size: 15px; line-height: 1.5; color: var(--gb-text); }
.howto-list li b { display: block; color: var(--gb-gold); font-size: 16px; }
.howto-list svg { width: 52px; height: 52px; }
.howto-list svg circle { fill: var(--gb-accent); }
.howto-list svg text { fill: var(--gb-accent-ink); font: 800 11px var(--gb-font); text-anchor: middle; }
.howto-list .ht-path { fill: none; stroke: var(--gb-text); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.howto-list .ht-big { stroke-width: 4; }
.howto-list svg text.ht-mark { fill: #ffd9a8; font: italic 800 15px Georgia, serif; }
.howto-list svg .ht-seat { fill: rgba(255, 248, 230, 0.25); }
.howto-list .ht-ring { fill: none; stroke: #ffd166; stroke-width: 5; stroke-linecap: round; }
.howto-list svg .ht-dot { fill: var(--gb-text); }
.howto-list .ht-star { fill: var(--gb-gold); }