/* 날다, 퍼피 — 견주가 촬영 직후 휴대폰으로 여는 화면.
 *
 * 방향: **고도의 황혼.** 벌룬이 떠 있는 높이의 하늘색에서 그라운드를 잡고,
 *       버너 불빛 같은 금색을 강조로 아껴 쓴다. 풍선 그림 같은 직설은 쓰지 않는다.
 *
 * ★ 다크 전용이다. 촬영은 대개 낮이지만 화면은 영상이 주인공이고,
 *   밝은 배경은 영상 주변에서 눈을 뺏는다. 그래서 한쪽을 골랐다 —
 *   빠뜨린 게 아니라 정한 것이므로 모든 색을 명시한다.
 *
 * ★ 외부 서체를 쓰지 않는다 (`test_설정된_미디어_호스트_외에는_참조하지_않는다`).
 */

:root{
  --night:#0a0e17;        /* 그라운드 — 파랑이 도는 검정 */
  --surface:#121828;
  --raised:#182035;
  --line:#232c40;
  --line-soft:#1b2334;
  --text:#e6ebf5;
  --muted:#8792a8;
  --faint:#5d687f;
  --gold:#e3a94e;         /* 버너 불빛 — 강조는 여기 하나뿐이다 */
  --gold-dim:#8a6428;
  --danger:#d9615c;
  --r:14px;
  --r-sm:10px;
  --wrap:520px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100dvh;
  background:var(--night); color:var(--text);
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",
    system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding:0 20px calc(28px + env(safe-area-inset-bottom));
}

/* 고도감 — 위쪽 하늘이 바닥으로 스며든다. 이미지가 아니라 그라데이션이다. */
.sky{
  position:fixed; inset:0 0 auto 0; height:min(62vh,460px);
  pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 78% at 50% -12%,
      rgba(227,169,78,.13) 0%,
      rgba(122,96,150,.10) 34%,
      rgba(10,14,23,0) 72%),
    linear-gradient(180deg, #10192c 0%, rgba(10,14,23,0) 100%);
}
body > *:not(.sky){position:relative; z-index:1}

h1,h2,h3{margin:0; font-weight:650; letter-spacing:-.022em; text-wrap:balance}
p{margin:0}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:6px}
.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;
  font-variant-numeric:tabular-nums}
.muted{color:var(--muted); font-size:14.5px}
.small{font-size:13px}
.center{text-align:center}

/* ── 머리 ─────────────────────────────────────────── */
.top{
  max-width:var(--wrap); margin:0 auto;
  padding:calc(30px + env(safe-area-inset-top)) 0 22px;
  text-align:center;
}
.brand{
  font-size:27px; font-weight:700; letter-spacing:-.035em; line-height:1.1;
}
.brand .comma{color:var(--gold); margin-left:-1px}
.brand em{
  font-style:normal; font-weight:350; color:var(--muted);
  letter-spacing:-.01em; margin-left:1px;
}
/* 단축코드 — 탑승권 스텁처럼. 이 제품은 '비행'이다. */
.code-label{
  margin-top:13px; display:inline-flex; align-items:center; gap:9px;
  font-family:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;
  font-size:13.5px; letter-spacing:.16em; color:var(--gold);
  background:rgba(227,169,78,.07);
  border:1px solid rgba(227,169,78,.22);
  border-radius:99px; padding:5px 15px;
}
.code-label:empty{display:none}

/* ── 인앱 배너 ────────────────────────────────────── */
.inapp{
  max-width:var(--wrap); margin:14px auto 0;
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:13px 15px;
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
.inapp p{font-size:13.5px; color:var(--muted); flex:1; min-width:180px; line-height:1.5}
.chip{
  border:1px solid var(--line); border-radius:99px;
  padding:6px 14px; font-size:13px; color:var(--text);
  background:var(--surface); white-space:nowrap;
}
.chip:hover{border-color:var(--gold-dim); color:var(--gold)}

/* ── 본문 ─────────────────────────────────────────── */
main{max-width:var(--wrap); margin:0 auto}
.view{display:flex; flex-direction:column; gap:16px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.pad{padding:24px 22px}
.card h2{font-size:19px; margin-bottom:6px}
.eyebrow{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:9px; font-weight:600;
}

/* ── 코드 입력 ────────────────────────────────────── */
.lookup{display:flex; gap:9px; margin-top:18px}
#code-input{
  flex:1; min-width:0;
  background:var(--night); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:14px 15px; color:var(--text);
  font-family:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;
  font-size:18px; letter-spacing:.13em; text-transform:uppercase;
}
#code-input::placeholder{color:var(--faint); letter-spacing:.08em}
#code-input:focus{outline:none; border-color:var(--gold-dim);
  box-shadow:0 0 0 3px rgba(227,169,78,.11)}

/* ── 버튼 ─────────────────────────────────────────── */
.primary{
  background:var(--gold); color:#1a1206; font-weight:650;
  border-radius:var(--r-sm); padding:14px 22px; font-size:15.5px;
  letter-spacing:-.01em; white-space:nowrap;
  transition:filter .15s ease, transform .08s ease;
}
.primary:hover{filter:brightness(1.07)}
.primary:active{transform:translateY(1px)}
.primary:disabled{opacity:.5; cursor:default; filter:none; transform:none}
.ghost{
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:13px 20px; font-size:15px; color:var(--text); background:var(--surface);
}
.ghost:hover{border-color:var(--gold-dim); color:var(--gold)}
.actions{display:flex; gap:9px; flex-wrap:wrap}
.actions .primary{flex:1; min-width:150px}

/* ── 처리 중 ──────────────────────────────────────── */
.poster-wrap{
  position:relative; aspect-ratio:16/9; width:100%;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
  display:grid; place-items:center;
}
#proc-poster{width:100%; height:100%; object-fit:cover; opacity:.4}
.spinner{
  position:absolute; width:34px; height:34px; border-radius:50%;
  border:2px solid rgba(230,235,245,.14); border-top-color:var(--gold);
  animation:spin 900ms linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── 탭 ───────────────────────────────────────────── */
.tabs{display:flex; align-items:center; gap:6px}
.tab{
  padding:9px 17px; border-radius:99px; font-size:14.5px; font-weight:550;
  color:var(--muted); border:1px solid transparent;
}
.tab[aria-selected="true"]{
  color:var(--text); background:var(--raised); border-color:var(--line);
}
.tab:disabled{opacity:.42; cursor:default}
/* ★ `--faint` 로 두면 대비가 3.45 로 기준(4.5) 아래다. 작은 글씨라 더 필요하다.
   "360 준비 중" 은 견주가 기다릴지 말지 정하는 정보다 — 흐리면 안 된다. */
.badge{
  margin-left:auto; font-size:11.5px; color:var(--muted);
  border:1px solid var(--line); border-radius:99px; padding:3px 10px;
}
.badge:empty{display:none}

/* ── 재생 ─────────────────────────────────────────── */
.pane{width:100%}
#flat-video{
  width:100%; display:block; background:#000;
  border-radius:var(--r); border:1px solid var(--line);
  aspect-ratio:16/9; object-fit:contain;
}
.sphere-stage{
  position:relative; width:100%; aspect-ratio:1/1; max-height:74vh;
  background:#000; border-radius:var(--r); border:1px solid var(--line);
  overflow:hidden; touch-action:none;
}
#sphere-canvas{width:100%; height:100%; display:block}
.overlay-start{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:13px;
  color:var(--text); font-size:14.5px; letter-spacing:-.01em;
  background:linear-gradient(180deg, rgba(10,14,23,.28), rgba(10,14,23,.62));
}
.overlay-icon{display:block; width:52px; height:52px; color:var(--gold)}
.overlay-icon svg{width:100%; height:100%}
.sphere-hint{
  position:absolute; left:50%; bottom:15px; transform:translateX(-50%);
  font-size:12.5px; color:var(--muted); white-space:nowrap;
  background:rgba(10,14,23,.72); border-radius:99px; padding:6px 14px;
  backdrop-filter:blur(4px);
}

/* ── 진행 막대 ────────────────────────────────────── */
.bar{height:4px; background:var(--line-soft); border-radius:99px; overflow:hidden}
.bar-fill{height:100%; width:0%; background:var(--gold);
  border-radius:99px; transition:width .25s ease}

/* ── 저장 안내 ────────────────────────────────────── */
.help{
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); padding:0 16px;
}
.help summary{
  cursor:pointer; padding:14px 0; font-size:14.5px; color:var(--muted);
  list-style:none; display:flex; align-items:center; gap:8px;
}
.help summary::-webkit-details-marker{display:none}
.help summary::after{
  content:"+"; margin-left:auto; color:var(--faint); font-size:16px;
}
.help[open] summary::after{content:"−"}
.help[open] summary{color:var(--text)}
.help p{padding:0 0 16px; font-size:14px; color:var(--muted); line-height:1.65}

/* ── 상태 화면 ────────────────────────────────────── */
.mark{width:44px; height:44px; margin:0 auto 14px; color:var(--muted)}
.mark.warn{color:var(--danger)}
.mark svg{width:100%; height:100%}
.view[data-view="gone"] .card h2,
.view[data-view="failed"] .card h2{margin-bottom:8px}
.view[data-view="gone"] .ghost{margin-top:18px}
.ticket-code{
  margin-top:16px; display:inline-block;
  font-size:13px; letter-spacing:.12em; color:var(--muted);
  border:1px dashed var(--line); border-radius:var(--r-sm); padding:9px 15px;
}
.ticket-code:empty{display:none}
.error-text{color:var(--danger); font-size:13.5px; margin-top:10px}
.error-text:empty{display:none}

/* ── 바닥 ─────────────────────────────────────────── */
.foot{
  max-width:var(--wrap); margin:34px auto 0; padding-top:20px;
  border-top:1px solid var(--line-soft); text-align:center;
}
.foot p{font-size:12px; color:var(--faint); letter-spacing:.06em}

@media (prefers-reduced-motion:reduce){
  .spinner{animation:none}
  .primary,.bar-fill{transition:none}
}

/* 큰 화면에서도 폰 비율을 유지한다 — 견주는 대부분 휴대폰으로 본다. */
@media (min-width:640px){
  body{padding-bottom:40px}
  .brand{font-size:30px}
}