/* Seat-view engine styles.
   World: a dark auditorium lit by the projector — near-black blue (the hall), warm paper-white text, and one
   accent, the amber of projector light, used for the selected seat, focus and active controls.
   Type: Pretendard for Korean text, Barlow Condensed for seat codes and measurements (cinema signage). */
:root {
  --bg:#0b0c10; --panel:#14161c; --line:rgba(236,233,226,.1); --line-strong:rgba(236,233,226,.2);
  --text:#ece9e2; --dim:#a4a097; --amber:#f2b24c; --amber-ink:#1d1405;
  --ok:#3f8a62; --warn:#b48a2e; --bad:#b04545;
  --sans:"Pretendard Variable", Pretendard, system-ui, "Malgun Gothic", sans-serif;
  --num:"Barlow Condensed", "Pretendard Variable", Pretendard, sans-serif;
  color-scheme:dark;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 var(--sans); -webkit-font-smoothing:antialiased; }
::selection { background:var(--amber); color:var(--amber-ink); }
:focus-visible { outline:2px solid var(--amber); outline-offset:2px; }
* { scrollbar-color:rgba(236,233,226,.22) transparent; scrollbar-width:thin; }

/* full-screen 3D view; the seat map floats over its lower part as a translucent, collapsible panel */
.sv { position:relative; height:100vh; height:100dvh; overflow:hidden; }
.sv-view { position:absolute; inset:0; background:#000; overflow:hidden; }
.sv-view canvas { display:block; width:100%; height:100%; }

/* seat readout: just left of the seat panel's header bar, bottom-aligned with it (panel width via --panel-w);
   no box, a soft shadow keeps it readable over the picture */
.sv-hud { position:absolute; right:calc(var(--panel-w, 0px) + 22px); bottom:14px; padding:8px 4px 9px;
  font-variant-numeric:tabular-nums; text-shadow:0 1px 3px rgba(0,0,0,.9), 0 0 14px rgba(0,0,0,.75); pointer-events:none; }
.sv-seatname { display:flex; align-items:baseline; gap:2px; margin:0; font:600 40px/1 var(--num); letter-spacing:.01em; color:var(--amber); }
.sv-seatname small { font:500 14px/1 var(--sans); color:var(--dim); margin:0 8px 0 2px; }
.sv-nums { display:flex; flex-wrap:wrap; gap:4px 18px; margin:10px 0 0; }
.sv-nums div { display:flex; align-items:baseline; gap:6px; }
.sv-nums dt { font-size:12px; color:var(--dim); }
.sv-nums dd { margin:0; font:500 20px/1 var(--num); color:var(--text); }
.sv-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.sv-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 7px; border-radius:6px; font-size:13px; font-weight:600;
  background:rgba(236,233,226,.06); color:var(--text); }
.sv-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.sv-badge.lv0 { color:#8fd4ad; background:rgba(63,138,98,.18); }
.sv-badge.lv1 { color:#f0cf7c; background:rgba(180,138,46,.2); }
.sv-badge.lv2 { color:#f3a2a2; background:rgba(176,69,69,.24); animation:sv-warn 1.4s cubic-bezier(.22,1,.36,1) infinite alternate; }
@keyframes sv-warn { to { background:rgba(176,69,69,.46); } }
@media (prefers-reduced-motion: reduce) { .sv-badge.lv2 { animation:none; } }

/* controls: icon buttons, labelled for screen readers and tooltips */
.sv-player { position:absolute; right:14px; top:14px; display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; max-width:calc(100% - 28px); }
.sv-ib { display:grid; place-items:center; width:38px; height:38px; padding:0; border-radius:10px; cursor:pointer;
  color:var(--text); background:rgba(10,11,15,.62); border:1px solid var(--line); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:border-color .2s cubic-bezier(.22,1,.36,1), color .2s cubic-bezier(.22,1,.36,1); }
.sv-ib:hover { border-color:var(--line-strong); color:var(--amber); }
.sv-ib[aria-pressed="true"] { color:var(--amber); border-color:rgba(242,178,76,.5); }
.sv-ib svg { width:18px; height:18px; }
.sv-player > small { order:-1; margin-right:4px; color:var(--dim); font-size:12px; }
.sv-hint { position:absolute; right:14px; top:76px; padding:0; font-size:12px; color:var(--dim); pointer-events:none; text-shadow:0 1px 8px #000; }
@media (max-width: 699px) {                       /* phones: HUD takes the top; player + hint would collide with it */
  .sv-hint { display:none; }
  .sv-player { top:auto; bottom:calc(var(--panel-h, 0px) + 8px); }
  .sv-player > small { display:none; }
  .sv-seatname { font-size:30px; }
  .sv-hud { right:auto; left:12px; bottom:calc(var(--panel-h, 0px) + 54px); padding:6px 0 7px; }   /* above the 열별 명당 읽기 link */
  .sv-nums dd { font-size:18px; }
}

/* bottom-right card with its header bar at the bottom edge: the bar stays in the corner and the map opens upward */
.sv-bottom { position:absolute; right:14px; bottom:14px; display:flex; flex-direction:column-reverse; width:max-content; max-width:min(980px, calc(100% - 28px));
  max-height:58%; overflow:auto; padding:8px 12px 9px; border-radius:14px; border:1px solid var(--line);
  background:rgba(12,13,18,.8); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 18px 48px -12px rgba(0,0,0,.7); }
.sv-panelhead { display:flex; align-items:center; gap:14px; }
.sv-bottom h1 { margin:0; font-size:14px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sv-mapbar { display:flex; align-items:center; gap:12px; margin-left:auto; min-width:0; }
.sv-legend small { font-size:11px; color:var(--dim); opacity:.75; cursor:help; }
/* map coloring switch (고개 편함 ↔ 추천 구역): a small segmented pill like the format picker */
.sv-mapmode { display:inline-flex; flex:none; padding:2px; border-radius:8px; background:rgba(236,233,226,.06); }
.sv-mapmode button { padding:4px 9px; border:0; border-radius:6px; cursor:pointer; font:600 12px/1 var(--sans); color:var(--dim); background:none;
  transition:color .2s cubic-bezier(.22,1,.36,1), background-color .2s cubic-bezier(.22,1,.36,1); }
.sv-mapmode button:hover { color:var(--text); }
.sv-mapmode button[aria-pressed="true"] { color:var(--amber-ink); background:var(--amber); }
.sv-mapmode button:focus-visible { outline:2px solid var(--amber); outline-offset:1px; }
.sv-toggle { display:inline-flex; align-items:center; gap:4px; flex:none; padding:4px 6px 4px 10px; border:0; border-radius:7px; cursor:pointer;
  font:600 12px/1 var(--sans); color:var(--dim); background:rgba(236,233,226,.06); }
.sv-toggle:hover { color:var(--text); }
.sv-toggle svg { width:14px; height:14px; transition:transform .25s cubic-bezier(.22,1,.36,1); }
.sv-toggle[aria-expanded="false"] svg { transform:rotate(180deg); }
.sv-bottom.collapsed .sv-map { display:none; }
/* --s/--g set by JS to fit. Grid so the screen bar stretches to the full row width even when the map scrolls sideways */
.sv-map { --s:14px; --g:12px; display:grid; justify-content:start; overflow-x:auto; margin-bottom:8px; }
@media (max-width: 699px) {
  .sv-bottom { right:0; bottom:0; width:100%; max-width:100%; border-radius:14px 14px 0 0; border-width:1px 0 0; max-height:45%; }
  /* phones: switch beside the title, legend on its own line under them */
  .sv-panelhead { flex-wrap:wrap; row-gap:6px; }
  .sv-mapbar { display:contents; }
  .sv-mapmode { margin-left:auto; }
  .sv-legend { order:3; flex-basis:100%; font-size:11px; }
}

/* seat map */
.sv-screenbar { height:3px; margin:2px 40px 8px; border-radius:2px; background:linear-gradient(90deg, transparent, rgba(236,233,226,.7), transparent); }
.sv-row { display:flex; align-items:center; gap:2px; margin:1px 0; white-space:nowrap; }
/* row letter inside an aisle gap (CGV style); centered even when the letter is wider than the gap */
.sv-rl { display:flex; justify-content:center; align-items:center; overflow:visible; font:600 clamp(9px, calc(var(--s) * 0.95), 13px)/1 var(--num); color:var(--dim); }
.sv-gap { width:var(--g); flex:none; }
.sv-seat { width:var(--s); height:var(--s); flex:none; padding:0; border:0; border-radius:3px 3px 2px 2px; background:#2c3040; cursor:pointer;
  transition:transform .15s cubic-bezier(.22,1,.36,1); }
.sv-seat.lv0, .sv-legend .lv0 { background:var(--ok); }
.sv-seat.lv1, .sv-legend .lv1 { background:var(--warn); }
.sv-seat.lv2, .sv-legend .lv2 { background:var(--bad); }
.sv-seat.lv0, .sv-seat.lv1, .sv-seat.lv2 { opacity:.72; }
/* 추천 구역 mode: zone color (set per seat as --zc), seats outside every zone stay neutral */
.sv-map[data-mode="zone"] .sv-seat { background:var(--zc, #2c3040); }
.sv-map[data-mode="zone"] .sv-seat:not([data-zone]) { opacity:.55; }
.sv-map[data-mode="zone"] .sv-seat[aria-pressed="true"] { background:var(--amber); }
.sv-seat:hover { opacity:1; transform:scale(1.18); box-shadow:0 0 0 1px rgba(236,233,226,.85); }
.sv-seat[aria-pressed="true"] { opacity:1; background:var(--amber); box-shadow:0 0 0 2px var(--amber-ink), 0 0 0 3px var(--amber); }
.sv-seat:focus-visible { outline:2px solid var(--amber); outline-offset:1px; }
.sv-legend { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--dim); flex-wrap:wrap; }
.sv-legend span { width:9px; height:9px; border-radius:2px; display:inline-block; opacity:.85; }

/* view-mode toggle (실제 화각 ↔ 육안 체감): a text button, since no icon says "how big it feels" */
.sv-mode { height:38px; padding:0 12px; border-radius:10px; cursor:pointer; font:600 13px/1 var(--sans); color:var(--dim);
  background:rgba(10,11,15,.62); border:1px solid var(--line); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:border-color .2s cubic-bezier(.22,1,.36,1), color .2s cubic-bezier(.22,1,.36,1); }
.sv-mode:hover { color:var(--text); border-color:var(--line-strong); }
.sv-mode[aria-pressed="true"] { color:var(--amber); border-color:rgba(242,178,76,.5); }

/* until the film is started the play button is the call to action */
.sv-ib.sv-cta, .sv-ib.sv-cta:hover { color:var(--amber-ink); background:var(--amber); border-color:var(--amber); }

/* neck mannequin: right edge, below the player. Head mirrors the posture needed now; color = comfort level */
.sv-head { position:absolute; right:14px; top:102px; width:150px; margin:0; pointer-events:none; text-align:center; }
.sv-head canvas { display:block; width:128px; height:128px; margin:0 0 0 auto; border-radius:50%;
  background:radial-gradient(closest-side, rgba(10,11,15,.55), rgba(10,11,15,0)); }
.sv-head figcaption { margin-top:2px; text-align:right; white-space:nowrap; font-size:12px; font-weight:600; color:#8fd4ad; text-shadow:0 1px 8px #000; }
.sv-head[data-level="1"] figcaption { color:#f0cf7c; }
.sv-head[data-level="2"] figcaption { color:#f3a2a2; }
.sv-head[data-level="2"] canvas { animation:sv-head-warn 1.4s cubic-bezier(.22,1,.36,1) infinite alternate; }
@keyframes sv-head-warn { to { background:radial-gradient(closest-side, rgba(176,69,69,.5), rgba(176,69,69,0)); } }
@media (prefers-reduced-motion: reduce) { .sv-head[data-level="2"] canvas { animation:none; } }
@media (max-width: 699px) {                       /* phones: smaller, right side just above the player row */
  .sv-head { top:auto; bottom:calc(var(--panel-h, 0px) + 100px); right:8px; width:auto; }   /* above the player row and the format picker */
  .sv-head canvas { width:92px; height:92px; }
  .sv-head figcaption { font-size:11px; }
}

/* small explainer under the mode button on hover / keyboard focus */
.sv-mode { position:relative; }
.sv-mode[data-tip]::after { content:attr(data-tip); position:absolute; top:calc(100% + 8px); right:0; z-index:5; width:240px; padding:8px 10px;
  border-radius:8px; border:1px solid var(--line); background:rgba(12,13,18,.94); color:var(--text); text-align:left;
  font:500 12px/1.5 var(--sans); word-break:keep-all; white-space:normal; box-shadow:0 10px 30px -10px rgba(0,0,0,.8);
  opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity .15s, transform .15s cubic-bezier(.22,1,.36,1); }
.sv-mode:hover::after, .sv-mode:focus-visible::after { opacity:1; transform:none; }
@media (hover: none) { .sv-mode[data-tip]::after { display:none; } }

/* buffering after play was pressed */
.sv-ib.sv-loading svg { visibility:hidden; }
.sv-ib.sv-loading::after { content:""; position:absolute; inset:0; margin:auto; width:16px; height:16px; border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent; animation:sv-spin .8s linear infinite; }
.sv-ib { position:relative; }
@keyframes sv-spin { to { transform:rotate(360deg); } }

/* seat numbers: a ruler row above and below the map (every number when seats are big enough, else 1·5·10…),
   and the hovered seat named right above it */
.sv-map { position:relative; }
.sv-ruler { margin:0; }
.sv-num { width:var(--s); flex:none; text-align:center; font:500 clamp(8px, calc(var(--s) * 0.8), 11px)/1.3 var(--num);
  color:var(--dim); letter-spacing:-.04em; overflow:visible; white-space:nowrap; }
.sv-map[data-dense] .sv-num:not(.major) { visibility:hidden; }
.sv-num.hot, .sv-rl.hot { color:var(--amber); visibility:visible; }
.sv-tip { position:absolute; z-index:6; transform:translate(-50%, calc(-100% - 6px)); padding:5px 10px 4px; border-radius:8px; pointer-events:none;
  font:600 22px/1 var(--num); letter-spacing:.01em; color:var(--amber-ink); background:var(--amber); white-space:nowrap;
  box-shadow:0 6px 18px -4px rgba(0,0,0,.75); }
.sv-tip[hidden] { display:none; }


/* projected-format picker: one pill with a segment per ratio */
.sv-seg { display:inline-flex; height:54px; padding:3px; gap:2px; border-radius:10px; background:rgba(10,11,15,.82); border:1px solid var(--line);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.sv-seg button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:0 12px; border:0; border-radius:7px;
  cursor:pointer; background:transparent; color:var(--text); white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.sv-seg b { font:700 19px/1 var(--num); letter-spacing:.02em; }
.sv-seg small { font:700 13px/1 var(--sans); }
.sv-seg button:hover { background:rgba(236,233,226,.1); }
.sv-seg button[aria-pressed="true"] { background:var(--amber); color:var(--amber-ink); text-shadow:none; }
@media (max-width: 699px) { .sv-seg { height:50px; } .sv-seg button { padding:0 8px; } .sv-seg b { font-size:17px; } .sv-seg small { font-size:12px; } }
.sv-seg-row { display:contents; }
@media (max-width: 699px) { .sv-seg-row { display:flex; justify-content:flex-end; flex-basis:100%; } }