/* ==========================================================
   LUMI HUD — 디자인 코드 v1 (2026-08-14)
   8/19 방송 웹 3종(A 투어 · B 추천 · C 월드컵) 공통 토큰+컴포넌트
   바닐라 CSS, 의존성 없음. 서체: Pretendard (CDN)
   사용: <link rel="stylesheet" href="lumi-hud.css">
   테마: 루트에 data-theme="tour|reco|versus" — accent 4종만 교체됨
   문법 3원칙: ①불투명 카드 없음(씬 위 오버레이+텍스트섀도)
             ②선택지=챔퍼 리본+분리형 브래킷 탭(라운드 금지)
             ③상태=채도 대비(탁한 틸→진한 틸→고채도 시안 명암반전)
   ========================================================== */
:root{
  color-scheme:dark;
  /* 배경 — 카드 없는 오버레이 전제 */
  --bg:#272536; --bg-scene:#34333E; --bg-deep:#0A1020;
  --scene-blur:blur(14px) brightness(.85);
  /* 서피스 = 선택지 리본 */
  --surface:rgba(67,110,123,.72); --surface-hover:rgba(35,100,125,.9);
  --surface-disabled:rgba(58,74,84,.4); --surface-border:#356675;
  /* 강조 — 기본=루미 시안. 테마가 아래 4개만 갈아끼움 */
  --accent:#00B4D8; --accent-bright:#38D3F0; --accent-line:#6AE3FA;
  --text-on-accent:#032530;
  --accent-soft:color-mix(in srgb,var(--accent) 16%,transparent);
  --accent-glow:color-mix(in srgb,var(--accent-bright) 55%,transparent);
  /* 텍스트 */
  --text:#FFFFFF; --text-option:#7BB4CB; --text-on-hover:#EDFDFF;
  --text-muted:#CBC9D0; --text-dim:#7E7C8C;
  --text-shadow:0 2px 6px rgba(0,0,0,.55);
  /* CTA */
  --cta-fill:#EDEDED; --cta-text:#08080D; --cta-border:#368588;
  /* 형태 — 라운드 금지 */
  --radius:0; --chamfer:9px; --border-w:2px;
  --tab-w:5px; --tab-gap:5px; --tab-h:40%;
  /* 치수 */
  --option-h:56px; --option-gap:calc(var(--option-h)*.2);
  --option-pad-x:calc(var(--option-h)*.64); --panel-w:min(560px,100%);
  /* 타이포 */
  --font:"Pretendard Variable",Pretendard,"Noto Sans KR",system-ui,sans-serif;
  --fs-question:28px; --fs-option:16px; --fs-counter:12.5px;
  --fw-idle:400; --fw-active:600;
  /* 모션 — 80ms 스냅, 긴 이징 금지 */
  --ease:cubic-bezier(.2,0,.1,1); --dur:80ms;
}
/* 콘텐츠별 변주 — accent 축만 이동 (구조 동일) */
[data-theme="reco"]{--accent:#00B4D8;--accent-bright:#38D3F0;--accent-line:#6AE3FA;--text-on-accent:#032530;}
[data-theme="tour"]{--accent:#0FC2A4;--accent-bright:#3ADDC2;--accent-line:#71EDD6;--text-on-accent:#04271F;}
[data-theme="versus"]{--accent:#4D9DF6;--accent-bright:#7FBBFF;--accent-line:#A6D0FF;--text-on-accent:#0A1F38;}
/* 축소 밀도 — 모바일 프레임/좁은 패널용 */
.hud-compact{--fs-question:21px;--option-h:50px;--fs-option:15px;}

/* ---------- 씬(배경) : 이미지 슬롯 + 폴백 ----------
   <div class="hud-scene"> [<img class="hud-scene-img" src="…">]
     <div class="hud-scene-body">…UI…</div> </div>
   img 없으면 자체 폴백(그라디언트+HUD 그리드)이 노출된다. */
.hud-scene{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--bg-scene),#14121F 55%,var(--bg-deep));}
.hud-scene::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 70% at 75% 12%,var(--accent-soft),transparent 55%),
    repeating-linear-gradient(0deg,rgba(130,190,215,.05) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(90deg,rgba(130,190,215,.05) 0 1px,transparent 1px 44px);
  animation:hud-drift 18s linear infinite;}
.hud-scene-img{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;filter:var(--scene-blur);transform:scale(1.07);}
.hud-scene::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,16,32,.38),transparent 32% 62%,rgba(10,16,32,.6));
  box-shadow:inset 0 0 90px rgba(5,8,18,.5);}
.hud-scene-body{position:relative;z-index:2;height:100%;box-sizing:border-box;}
@keyframes hud-drift{to{background-position:0 0,0 -88px,88px 0;}}

.hud-panel{width:var(--panel-w);padding:24px;box-sizing:border-box;}

/* ---------- 타이포 위계 ---------- */
.hud-eyebrow{font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--accent-bright);}
.hud-eyebrow::before{content:"";display:inline-block;width:13px;height:8px;margin-right:8px;
  background:var(--accent);clip-path:polygon(0 0,100% 0,60% 100%,0 100%);}
.hud-h1{margin:0;font-size:30px;font-weight:800;line-height:1.25;letter-spacing:-.01em;
  color:var(--text);text-shadow:var(--text-shadow);word-break:keep-all;text-wrap:pretty;}
.hud-h2{margin:0;font-size:19px;font-weight:700;line-height:1.3;color:var(--text);
  text-shadow:var(--text-shadow);word-break:keep-all;}
/* 질문문 — 카드 없이 섀도로 가독 확보, 굵기 아닌 크기로 위계 */
.hud-q{margin:0;font-size:var(--fs-question);font-weight:500;line-height:1.35;
  color:var(--text);text-shadow:var(--text-shadow);word-break:keep-all;text-wrap:pretty;}
.hud-counter{font-size:var(--fs-counter);color:var(--text-muted);letter-spacing:.04em;}

/* ---------- 선택지 리본 ----------
   <button class="hud-opt">라벨</button>
   상태: :hover / .is-selected / :disabled  (.is-hover = 호버 고정 데모용) */
.hud-opts{display:grid;gap:var(--option-gap);margin-top:calc(var(--option-gap)*3);}
.hud-opt{position:relative;isolation:isolate;display:flex;align-items:center;width:100%;
  min-height:var(--option-h);padding:8px var(--option-pad-x) 8px
  calc(var(--tab-w) + var(--tab-gap) + var(--option-pad-x));
  background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--font);font-size:var(--fs-option);font-weight:var(--fw-idle);
  color:var(--text-option);letter-spacing:.01em;line-height:1.3;
  text-shadow:var(--text-shadow);box-sizing:border-box;
  transition:color var(--dur) var(--ease);-webkit-tap-highlight-color:transparent;}
/* 본체 — 45° 챔퍼 */
.hud-opt::after{content:"";position:absolute;z-index:-1;
  inset:0 0 0 calc(var(--tab-w) + var(--tab-gap));background:var(--surface);
  clip-path:polygon(var(--chamfer) 0,calc(100% - var(--chamfer)) 0,100% var(--chamfer),
   100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,var(--chamfer) 100%,
   0 calc(100% - var(--chamfer)),0 var(--chamfer));
  transition:background var(--dur) var(--ease),filter var(--dur) var(--ease);}
/* 분리형 브래킷 탭 */
.hud-opt::before{content:"";position:absolute;z-index:-1;left:0;
  top:calc(50% - var(--tab-h)/2);height:var(--tab-h);width:var(--tab-w);
  background:rgba(123,180,203,.5);clip-path:polygon(0 0,100% 12%,100% 88%,0 100%);
  transition:background var(--dur) var(--ease);}
.hud-opt:hover:not(:disabled):not(.is-selected),.hud-opt.is-hover{
  color:var(--text-on-hover);font-weight:var(--fw-active);}
.hud-opt:hover:not(:disabled):not(.is-selected)::after,.hud-opt.is-hover::after{
  background:var(--surface-hover);}
.hud-opt:hover:not(:disabled):not(.is-selected)::before,.hud-opt.is-hover::before{
  background:#5FA3BC;}
/* 선택 확정 — 고채도 채움 + 명암 반전 + 점등 아웃라인 */
.hud-opt.is-selected{color:var(--text-on-accent);font-weight:var(--fw-active);text-shadow:none;}
.hud-opt.is-selected::after{background:var(--accent);
  filter:drop-shadow(0 0 1px var(--accent-line)) drop-shadow(0 0 7px var(--accent-glow));}
.hud-opt.is-selected::before{background:var(--accent-bright);}
.hud-opt:disabled{cursor:default;color:#5E7686;}
.hud-opt:disabled::after{background:var(--surface-disabled);}
.hud-opt:disabled::before{background:rgba(94,118,134,.35);}
.hud-opt:focus-visible{outline:2px solid var(--accent-line);outline-offset:3px;}

/* ---------- 진행 표시 ---------- */
/* 스텝: <div class="hud-steps"><i class="hud-step is-done"></i>…</div> */
.hud-steps{display:flex;gap:5px;}
.hud-step{flex:1;height:6px;background:rgba(123,180,203,.22);transform:skewX(-24deg);
  transition:background var(--dur) var(--ease);}
.hud-step.is-done{background:var(--accent);}
.hud-step.is-now{background:var(--accent-bright);box-shadow:0 0 8px var(--accent-glow);}
.hud-steps-cap{display:flex;justify-content:space-between;margin-top:6px;
  font-size:10.5px;letter-spacing:.02em;color:var(--text-dim);}
/* 바: <div class="hud-bar"><i class="hud-bar-fill" style="--value:64%"></i></div>
   로딩 연출은 .hud-bar.is-scan */
.hud-bar{position:relative;height:5px;background:rgba(123,180,203,.18);overflow:hidden;}
.hud-bar-fill{position:absolute;top:0;bottom:0;left:0;width:var(--value,40%);
  background:linear-gradient(90deg,var(--accent),var(--accent-bright));
  box-shadow:0 0 10px var(--accent-glow);transition:width 200ms var(--ease);}
.hud-bar.is-scan .hud-bar-fill{width:38%;animation:hud-scan 1.1s linear infinite;}
@keyframes hud-scan{from{transform:translateX(-110%)}to{transform:translateX(290%)}}

/* ---------- CTA — 반경 0 와이드, 호버=다크 속 유일한 밝은 면 ---------- */
.hud-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:52px;padding:0 20px;border:1px solid rgba(237,237,237,.45);
  background:rgba(237,237,237,.07);color:#EDEDED;border-radius:var(--radius);
  font:600 15px/1 var(--font);letter-spacing:.06em;cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
   border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.hud-cta:hover:not(:disabled){background:var(--cta-fill);color:var(--cta-text);
  border-color:var(--cta-border);box-shadow:0 0 0 1px var(--cta-border),0 0 14px var(--accent-glow);}
.hud-cta:disabled{opacity:.35;cursor:default;}
.hud-cta:focus-visible{outline:2px solid var(--accent-line);outline-offset:3px;}
/* 보조 텍스트 버튼 */
.hud-ghost{background:none;border:0;padding:4px;color:var(--text-muted);cursor:pointer;
  font:500 12.5px var(--font);letter-spacing:.04em;text-decoration:underline;
  text-underline-offset:3px;}
.hud-ghost:hover{color:var(--text);}

/* ---------- 뱃지 ---------- */
.hud-badge{display:inline-block;padding:5px 12px;background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent-bright) 55%,transparent);
  color:var(--accent-bright);font:600 11.5px/1 var(--font);letter-spacing:.05em;
  transform:skewX(-12deg);}
.hud-badge>span{display:inline-block;transform:skewX(12deg);}
.hud-badge.is-solid{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent);}
button.hud-badge{cursor:pointer;}

/* ---------- 루미 말풍선 ----------
   <div class="hud-bubble"><span class="hud-avatar"><img …></span>
     <div class="hud-bubble-body"><b class="hud-bubble-name">루미</b>
       <p class="hud-bubble-text">…</p></div></div> */
.hud-bubble{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:start;}
.hud-avatar{display:block;width:44px;height:44px;border-radius:50%;overflow:hidden;
  border:2px solid var(--accent);background:var(--bg-deep);box-shadow:0 0 10px var(--accent-glow);
  box-sizing:border-box;}
.hud-avatar>img{width:100%;height:100%;object-fit:cover;}
.hud-bubble-body{position:relative;background:rgba(10,16,32,.68);
  border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  padding:10px 14px;backdrop-filter:blur(4px);}
.hud-bubble-body::before{content:"";position:absolute;top:-1px;left:-1px;width:10px;height:10px;
  border-top:2px solid var(--accent-bright);border-left:2px solid var(--accent-bright);}
.hud-bubble-body::after{content:"";position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;
  border-bottom:2px solid var(--accent-bright);border-right:2px solid var(--accent-bright);}
.hud-bubble-name{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  color:var(--accent-bright);margin-bottom:3px;}
.hud-bubble-text{margin:0;font-size:13.5px;line-height:1.5;color:var(--text);word-break:keep-all;}

/* ---------- 일러스트 슬롯 (정사각 기본 / .is-round=원형) ---------- */
.hud-slot{position:relative;display:grid;place-items:center;overflow:hidden;
  background:rgba(10,16,32,.5);border:1px solid rgba(53,102,117,.6);box-sizing:border-box;}
.hud-slot::before{content:"";position:absolute;top:-1px;left:-1px;width:12px;height:12px;
  border-top:2px solid var(--accent);border-left:2px solid var(--accent);}
.hud-slot::after{content:"";position:absolute;bottom:-1px;right:-1px;width:12px;height:12px;
  border-bottom:2px solid var(--accent);border-right:2px solid var(--accent);}
.hud-slot>img{width:88%;height:88%;object-fit:contain;}
.hud-slot.is-round{border-radius:50%;}
.hud-slot.is-round::before,.hud-slot.is-round::after{display:none;}
.hud-slot-note{font:500 11px/1.5 var(--font);letter-spacing:.06em;color:var(--text-dim);text-align:center;}

/* ---------- 대결(1 vs 2) 프레임 ----------
   <div class="hud-versus"> <button class="hud-duel">…</button> ×2
     <span class="hud-vs"><span>VS</span></span> </div> */
.hud-versus{position:relative;display:grid;gap:14px;}
@media (min-width:640px){.hud-versus{grid-template-columns:1fr 1fr;}}
.hud-duel{position:relative;display:grid;gap:8px;padding:10px;cursor:pointer;
  background:rgba(24,30,48,.55);border:1px solid rgba(53,102,117,.55);
  color:var(--text);font-family:var(--font);text-align:center;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),
   box-shadow var(--dur) var(--ease);}
.hud-duel:hover{border-color:var(--accent);transform:translateY(-2px);}
.hud-duel.is-picked{border-color:var(--accent-bright);
  box-shadow:0 0 0 1px var(--accent-bright),0 0 18px var(--accent-glow);}
.hud-duel-img{aspect-ratio:1;display:grid;place-items:center;
  background:radial-gradient(60% 60% at 50% 45%,rgba(123,180,203,.14),transparent);}
.hud-duel-img>img{width:90%;height:90%;object-fit:contain;}
.hud-duel-name{padding:9px 10px;background:var(--surface);color:var(--text-on-hover);
  font-size:14px;font-weight:600;letter-spacing:.02em;
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),
   calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);}
.hud-duel.is-picked .hud-duel-name{background:var(--accent);color:var(--text-on-accent);}
.hud-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) skewX(-12deg);
  z-index:3;padding:6px 12px;background:var(--accent);color:var(--text-on-accent);
  font:800 14px/1 var(--font);letter-spacing:.08em;
  box-shadow:0 0 0 3px rgba(10,16,32,.85),0 0 16px var(--accent-glow);}
.hud-vs>span{display:inline-block;transform:skewX(12deg);}

/* ---------- 결과 카드 (공유 캡처 9:16 = .hud-scene.hud-share) ---------- */
.hud-share{width:min(360px,100%);aspect-ratio:9/16;}
.hud-result{display:grid;gap:14px;justify-items:center;text-align:center;}
.hud-result-name{font-size:32px;font-weight:800;letter-spacing:-.01em;color:var(--text);
  text-shadow:var(--text-shadow);}
.hud-result-tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.hud-watermark{display:inline-flex;align-items:center;gap:6px;
  font:600 10.5px/1 var(--font);letter-spacing:.16em;color:var(--text-dim);}
.hud-watermark::before{content:"";width:8px;height:8px;background:var(--accent);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}

/* ---------- 모션 유틸 ---------- */
@keyframes hud-blink{50%{opacity:.25}}
.hud-blink{animation:hud-blink 1s steps(2,end) infinite;}
@keyframes hud-pop{from{transform:scale(.96);opacity:0}}
.hud-pop{animation:hud-pop 120ms var(--ease);}
::selection{background:var(--accent);color:var(--text-on-accent);}
@media (prefers-reduced-motion:reduce){
  .hud-scene::before,.hud-bar.is-scan .hud-bar-fill,.hud-blink{animation:none;}}