/* ============================================================
   상식퀴즈 - TV 프레임 & 퀴즈 화면 (원본 영상의 시각적 정체성)
   ------------------------------------------------------------
   역할 분담
   - css/tailwind.css : 페이지 크롬(헤더·홈 카드·컨트롤 바·푸터) + 리셋 + 토큰
   - css/style.css    : 16:9 스크린 내부 배치(원본 실측 비율) + 애니메이션
                        → Tailwind 유틸리티로 표현할 수 없는 --u 기반 치수.
   이 파일은 tailwind.css 다음에 로드되므로 충돌 시 이 파일이 이긴다.

   스크린 내부의 모든 치수는 --u (스크린 폭의 1%) 기준이다.
   ============================================================ */

:root{
  /* 원본 영상 실측 색 */
  --mint:       #9FE0D8;   /* 배경 민트 */
  --badge:      #28A098;   /* 배지 청록 */
  --ink:        #111111;   /* 문제 텍스트 검정 */
  --gray-num:   #8A8A8A;   /* 좌상단 "문제N" (원본 #A6A6A6 → 대비 확보용으로 약간 진하게) */
  --orange:     #FF5A36;   /* 정답 주황 */
  --blue:       #1E6FE8;   /* 난이도 파랑 */
  --outro-gray: #606060;   /* 아웃트로 큰 글씨 */
  --hint:       #6F807D;   /* 안내 문구 회색 */

  /* 페이지(스크린 바깥) */
  --room:       #d7e9e7;
  --room-deep:  #c2dbd8;
  --text:       #1a2a28;

  /* 글꼴 — 본문·UI·표시용 모두 Pretendard (굵기로 표정을 만든다) */
  --ff-display: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
                system-ui, "Segoe UI", "Malgun Gothic", sans-serif;

  /* TV 크기 계산 --------------------------------------------------
     TV 전체 높이 ≈ 스크린높이 + 베젤 + 턱 ≈ 폭 × 0.633
     => 세로가 부족하면 (가용높이 × 1.58) 로 폭을 제한한다.           */
  --gutter: 14px;
  --chrome: 196px;                       /* 헤더 + 컨트롤바 + 푸터 + 여백 */
  --tvw: max(268px, min(calc(100vw - 2 * var(--gutter)), calc((100vh - var(--chrome)) * 1.58)));
  --tvw: max(268px, min(calc(100vw - 2 * var(--gutter)), calc((100svh - var(--chrome)) * 1.58)));
  --bez: calc(var(--tvw) * 0.022);
  --u:   calc(var(--tvw) * 0.00956);     /* 스크린 폭의 1% */
}

body{
  background:
    radial-gradient(120% 80% at 50% 0%, #eaf6f4 0%, var(--room) 45%, var(--room-deep) 100%)
    fixed;
}

/* ---------------- TV 본체 ---------------- */
#view-player{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 2px 0 0;
  flex: 1 1 auto;
}
.tv{
  width: var(--tvw);
  padding: var(--bez);
  border-radius: calc(var(--u) * 3.4);
  background: linear-gradient(#4b555a 0%, #2b3237 42%, #1a2024 100%);
  box-shadow:
    0 calc(var(--u)*1.6) calc(var(--u)*3.6) rgba(12,40,38,.32),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(0,0,0,.38);
}
.tv-screen{
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--mint);
  border-radius: calc(var(--u) * 1.1);
  overflow: hidden;
  box-shadow: inset 0 0 calc(var(--u)*2.2) rgba(0,0,0,.26);
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.tv-screen.clickable{ cursor: pointer; }
.tv-chin{
  height: calc(var(--u) * 2.4);
  display:flex; align-items:center; justify-content:center;
}
.tv-led{
  width: calc(var(--u)*.62); height: calc(var(--u)*.62); border-radius:50%;
  background:#5fdcc0; box-shadow: 0 0 calc(var(--u)*1.1) #5fdcc0; opacity:.9;
}
.tv-led.off{ background:#6b7679; box-shadow:none; }
.tv-stand{
  width: calc(var(--tvw) * .14); height: calc(var(--u) * 1.9); margin: 0 auto;
  background: linear-gradient(#2c3338, #1b2124);
}
.tv-base{
  width: calc(var(--tvw) * .26); height: calc(var(--u) * .95); margin: 0 auto;
  background:#232a2e; border-radius: calc(var(--u)*.6);
  box-shadow: 0 calc(var(--u)*.5) calc(var(--u)*1.2) rgba(12,40,38,.22);
}

/* ---------------- 장면 / 카드 (원본 실측 비율) ---------------- */
.scene{ position:absolute; inset:0; display:none; }
.scene.on{ display:block; }

.card{
  position:absolute;
  left:3.7%; right:3.7%; top:11.7%; bottom:6.7%;
  background:#fff;
  border-radius: calc(var(--u) * 2.4);
}

.badge{
  position:absolute; left:50%; top:0; transform: translate(-50%,-50%);
  background: var(--badge); color:#0d1f1d;
  font-family: var(--ff-display); font-weight:800;
  font-size: calc(var(--u) * 2.75);
  line-height: 1;
  padding: calc(var(--u)*.95) calc(var(--u)*2.7) calc(var(--u)*1.15);
  border-radius: 999px; white-space: nowrap; letter-spacing: -.01em;
  box-shadow: 0 calc(var(--u)*.3) calc(var(--u)*.9) rgba(16,70,66,.22);
}

/* ---------------- 인트로 ---------------- */
.intro-title, .intro-info, .intro-diff{
  position:absolute; left:4%; right:4%;
  text-align:center; font-family: var(--ff-display); color: var(--ink);
  transform: translateY(-50%);
  letter-spacing: -.02em;
}
.intro-title{ top:13.7%; font-size: calc(var(--u) * 8.4); line-height:1.1; font-weight:800; }
.intro-info { top:55%;   font-size: calc(var(--u) * 4.7); line-height:1.45; font-weight:700; }
.intro-diff { top:84%;   font-size: calc(var(--u) * 4.7); color: var(--blue); line-height:1.1; font-weight:800; }

.reveal{ opacity:0; transform: translateY(calc(-50% + var(--u)*1.2)); }
.reveal.show{
  opacity:1; transform: translateY(-50%);
  transition: opacity .32s ease, transform .32s ease;
}

/* ---------------- 문제 카드 ---------------- */
.qnum{
  position:absolute; left:2.5%; top:2.1%;
  color: var(--gray-num); font-weight:800;
  font-size: calc(var(--u) * 2.25); letter-spacing:-.01em;
}

.q-zone{ position:absolute; left:5%; right:5%; top:5%; height:36%; }
.q-text{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
}
.q-text span{
  font-family: var(--ff-display); color: var(--ink); font-weight:800;
  font-size: calc(var(--u) * 4.7); line-height:1.38;
  word-break: keep-all; letter-spacing:-.02em;
}

.a-zone{
  position:absolute; left:5%; right:5%; top:58%; height:24%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.a-zone > *{ display:none; min-width:0; max-width:100%; }

.timer{
  font-family: var(--ff-display); color: var(--ink); font-weight:800;
  font-size: calc(var(--u) * 4.6); line-height:1;
  border: calc(var(--u)*.38) solid var(--ink);
  border-radius: calc(var(--u)*1.1);
  padding: calc(var(--u)*1.05) calc(var(--u)*1.7) calc(var(--u)*1.35);
  font-variant-numeric: tabular-nums; letter-spacing:.02em;
}
.answer{ text-align:center; max-width:100%; }
.answer span{
  font-family: var(--ff-display); color: var(--orange); font-weight:800;
  font-size: calc(var(--u) * 5.2); line-height:1.3;
  word-break: keep-all; letter-spacing:-.02em;
}
.hint{
  font-weight:700; color: var(--hint); font-size: calc(var(--u) * 2.5);
  text-align:center;
}
.hint.sm{ font-size: calc(var(--u) * 2.1); }

/* 단계별 표시 (js 가 data-phase 를 바꾼다) */
[data-phase="timer"]  .timer   { display:block; }
[data-phase="answer"] .answer  { display:block; }
[data-phase="wait"]   #hintWait{ display:block; }

/* ---------------- 자기 채점 ---------------- */
.grade-zone{
  position:absolute; left:5%; right:5%; top:83.5%; height:14%;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap: calc(var(--u)*.6);
}
[data-phase="answer"] .grade-zone{ display:flex; }
.grade-btns{ display:flex; gap: calc(var(--u)*1.4); }
.grade-btn{
  cursor:pointer; border-radius:999px; font-weight:800;
  font-family: var(--ff-display);
  font-size: calc(var(--u)*2.5);
  padding: calc(var(--u)*.85) calc(var(--u)*2.6);
  border: calc(var(--u)*.22) solid transparent;
  transition: transform .12s ease, background-color .12s ease;
}
.grade-btn.ok{ background:#e6f7f0; color:#126b53; border-color:#b6e4d3; }
.grade-btn.no{ background:#fdeee9; color:#a93f21; border-color:#f5c9ba; }
.grade-btn:hover{ transform: translateY(-1px); }
.grade-btn.picked{ background:#12776b; color:#fff; border-color:#12776b; }
.grade-btn.no.picked{ background:#c2512f; border-color:#c2512f; color:#fff; }
.grade-zone #hintNext{ display:none; }
[data-mode="click"] .grade-zone #hintNext{ display:block; }

/* ---------------- 시작(모드 선택) 화면 ---------------- */
.card.setup{ display:flex; align-items:center; justify-content:center; }
.setup-inner{
  width:100%; padding: 0 calc(var(--u)*5);
  display:flex; flex-direction:column; align-items:center;
  gap: calc(var(--u)*1.5);
}
.setup-title{
  margin:0; font-family: var(--ff-display); font-weight:800;
  font-size: calc(var(--u)*6.2); line-height:1.1; color:var(--ink);
  letter-spacing:-.02em;
}
.setup-meta{
  margin:0; font-weight:700; color:#5f706e; font-size: calc(var(--u)*2.5);
  letter-spacing:-.01em;
}
.mode-row{
  display:flex; gap: calc(var(--u)*1.6); width:100%; justify-content:center;
  margin-top: calc(var(--u)*.2);
}
.mode-opt{
  flex:1 1 0; max-width: calc(var(--u)*34); cursor:pointer; text-align:center;
  background:#f5faf9; border: calc(var(--u)*.3) solid #dceceb;
  border-radius: calc(var(--u)*1.6);
  padding: calc(var(--u)*1.4) calc(var(--u)*1.2);
  display:flex; flex-direction:column; gap: calc(var(--u)*.45);
  transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
}
.mode-opt b{
  font-family: var(--ff-display); font-weight:800;
  font-size: calc(var(--u)*3.05); color:#17302d; letter-spacing:-.02em;
}
.mode-opt span{
  font-size: calc(var(--u)*2.1); color:#566865; font-weight:600; line-height:1.35;
  word-break: keep-all;
}
.mode-opt:hover{ transform: translateY(-1px); border-color:#bcdedb; }
.mode-opt[aria-pressed="true"]{
  background:#e6f6f3; border-color: var(--badge);
  box-shadow: 0 calc(var(--u)*.3) calc(var(--u)*1) rgba(16,80,74,.16);
}
.mode-opt[aria-pressed="true"] b{ color:#0f635b; }
.mode-opt[aria-pressed="true"] span{ color:#3d5b57; }

.start-btn{
  cursor:pointer; border:0; border-radius:999px;
  background: linear-gradient(#1a8c83, #116e66); color:#fff;
  font-family: var(--ff-display); font-weight:800;
  font-size: calc(var(--u)*3.4); letter-spacing:-.01em;
  padding: calc(var(--u)*1.15) calc(var(--u)*6.5) calc(var(--u)*1.35);
  margin-top: calc(var(--u)*.4);
  box-shadow: 0 calc(var(--u)*.55) calc(var(--u)*1.5) rgba(13,90,82,.34);
  transition: transform .12s ease, filter .12s ease;
}
.start-btn:hover{ transform: translateY(-2px); filter: brightness(1.07); }

/* ---------------- 아웃트로 ---------------- */
.outro-big, .outro-score, .outro-share, .outro-btns{
  position:absolute; left:4%; right:4%; text-align:center; transform: translateY(-50%);
}
.outro-big{
  top:26%; font-family: var(--ff-display); font-weight:800; color: var(--outro-gray);
  font-size: calc(var(--u)*6.6); line-height:1.35; letter-spacing:-.02em;
}
.outro-score{
  top:56%; font-family: var(--ff-display); font-weight:800; color: var(--ink);
  font-size: calc(var(--u)*4.2); letter-spacing:-.01em;
}
.outro-score b{ color: var(--orange); font-weight:800; }
.outro-share{
  top:69%; font-family: var(--ff-display); font-weight:700; color:#3b4a48;
  font-size: calc(var(--u)*2.9);
}
.outro-share em{ font-style:normal; color:#d9430f; font-weight:800; }
.heart{ font-size: .95em; }
.outro-btns{ top:87%; display:flex; gap: calc(var(--u)*1.6); justify-content:center; }
.outro-btn{
  cursor:pointer; border-radius:999px; font-weight:800;
  font-family: var(--ff-display);
  font-size: calc(var(--u)*2.5);
  padding: calc(var(--u)*.95) calc(var(--u)*2.8);
  background:#f1f6f5; color:#31514d; border: calc(var(--u)*.22) solid #d9e7e5;
  transition: transform .12s ease, background-color .12s ease;
}
.outro-btn:hover{ transform: translateY(-1px); background:#e8f2f0; }
.outro-btn.primary{
  background: linear-gradient(#1a8c83, #116e66); color:#fff; border-color:#116e66;
  box-shadow: 0 calc(var(--u)*.4) calc(var(--u)*1.1) rgba(13,90,82,.28);
}
.outro-btn.primary:hover{ background: linear-gradient(#1f9a90, #13786f); }

/* ---------------- 화면 크기 대응 ---------------- */
/* 모바일: 좌우 여백을 줄여 TV 를 최대한 크게, 카드 안 글씨는 살짝 크게 */
@media (max-width: 640px){
  :root{ --gutter: 9px; --chrome: 236px; }

  .setup-meta{ font-size: calc(var(--u)*2.9); }
  .mode-opt b{ font-size: calc(var(--u)*3.45); }
  .mode-opt span{ font-size: calc(var(--u)*2.4); }
  .start-btn{ font-size: calc(var(--u)*3.9); padding: calc(var(--u)*1.25) calc(var(--u)*7) calc(var(--u)*1.45); }

  .hint{ font-size: calc(var(--u)*3); }
  .hint.sm{ font-size: calc(var(--u)*2.5); }

  /* 채점 버튼을 손가락으로 누를 수 있게 영역을 조금 넓힌다 */
  .grade-zone{ top:80.5%; height:18%; }
  .grade-btn{ font-size: calc(var(--u)*3.3); padding: calc(var(--u)*1.3) calc(var(--u)*3.2); }

  .outro-btn{ font-size: calc(var(--u)*3); padding: calc(var(--u)*1.15) calc(var(--u)*3.2); }
  .outro-share{ font-size: calc(var(--u)*3.1); }
}

/* 모바일 세로: 남는 세로 공간을 컨트롤 패널이 흡수해 빈 띠가 생기지 않게 한다.
   (패널 높이 상한은 tailwind.src.css 의 max-height 로 제한) */
@media (max-width: 640px) and (orientation: portrait){
  #view-player{ padding-top: 2px; }
}

/* 가로로 누운 휴대폰 : 푸터를 접고 컨트롤을 한 줄로 만들어 TV 를 키운다 */
@media (orientation: landscape) and (max-height: 540px){
  :root{ --chrome: 132px; --gutter: 8px; }
  .ctl-help, .site-foot{ display:none !important; }
  .site-head{ padding-top: 4px; padding-bottom: 0; }
  .controls{ margin-top: 8px; max-width: min(96vw, 680px); }
}

@media (prefers-reduced-motion: reduce){
  .reveal, .grade-btn, .start-btn, .outro-btn, .mode-opt{ transition:none !important; }
  .reveal{ transform: translateY(-50%); }
  .grade-btn:hover, .start-btn:hover, .outro-btn:hover, .mode-opt:hover{ transform:none !important; }
}