/* ============================================================
   한글어드벤처 데일리 플레이어 — app.css
   DESIGN.md v2.0 Final 기반
   ============================================================ */

/* ---------- 1. 토큰 ---------- */
:root {
  --bg: #FFF9F2;
  --surface: #FFFFFF;
  --ink: #2B2B33;
  --ink-soft: #6E6E7A;
  --line: #E8E2D9;
  --dim: rgba(13, 13, 18, 0.92);
  --player-bg: #000000;

  --primary: #FF6B4A;
  --primary-deep: #E04E2E;
  --secondary: #3D8BFF;
  --done: #2FA96E;
  --done-tint: rgba(47, 169, 110, 0.10);
  --locked: #C9C4BA;
  --focus: #1B6DFF;
  --error: #E5484D;

  --font: "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", sans-serif;

  --header-h: 56px;
  --maxw: 1080px;

  /* 플레이어: 스테이지 외 예약 높이 = 상단바(48) + 내비(44) + 안내(20) + gap(8×3) */
  --player-reserved: 136px;
}

body[data-level="1"] { --lv: #4CB782; --lv-deep: #2E7D57; --lv-tint: #E3F4EB; }
body[data-level="2"] { --lv: #3D8BFF; --lv-deep: #1F5FC4; --lv-tint: #E2EEFF; }
body[data-level="3"] { --lv: #FF9E42; --lv-deep: #C26A14; --lv-tint: #FFEEDC; }
body[data-level="4"] { --lv: #9B6DFF; --lv-deep: #6A43CB; --lv-tint: #EEE7FF; }

/* ---------- 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
}
body.popup-open { overflow: hidden; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}
img { max-width: 100%; display: block; }
a { color: var(--secondary); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* ---------- 3. 공통 셸 ---------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 4px;
  /* safe-area 인셋(노치)을 padding-top으로 흡수하므로 높이에 합산해야
     콘텐츠 박스가 붕괴하지 않는다 (viewport-fit=cover 환경) */
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  min-height: var(--header-h);
  padding: 0 max(12px, env(safe-area-inset-left)) 0 max(8px, env(safe-area-inset-left));
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--bg);
  border-bottom: 3px solid var(--lv);
  transition: border-color 200ms;
}
.header-back {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--ink);
  flex: 0 0 auto;
}
.header-back:active { transform: scale(0.96); }
.header-title {
  flex: 1;
  margin: 0;
  font-size: 1.1875rem; /* 19 */
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-spacer { width: 44px; flex: 0 0 auto; }

.app-main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left));
  padding-bottom: max(32px, env(safe-area-inset-bottom));
}

/* 부팅/에러 */
.boot-loading, .boot-error {
  display: grid;
  place-items: center;
  gap: 12px;
  min-height: 50vh;
  color: var(--ink-soft);
  text-align: center;
}
.boot-error strong { color: var(--error); font-size: 1.1875rem; }
.spinner {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 4px solid var(--line);
  border-top-color: var(--primary);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 화면 1: 홈 ---------- */

/* 이어보기 카드 */
.resume-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 96px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  text-align: left;
  box-shadow: 0 2px 8px rgba(43, 43, 51, 0.05);
}
.resume-card:active { transform: scale(0.98); }
.resume-play {
  flex: 0 0 48px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.125rem;
}
.resume-body { flex: 1; min-width: 0; }
.resume-label { font-size: 0.8125rem; font-weight: 600; color: var(--primary-deep); }
.resume-where { font-size: 1.0625rem; font-weight: 700; }
.resume-progress { flex: 0 0 72px; }
.resume-progress .bar-caption { font-size: 0.8125rem; color: var(--ink-soft); text-align: right; margin-top: 4px; }

/* 진행률 바 (공용) */
.bar {
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--done);
  transition: width 300ms;
}

/* 단계 세그먼트 */
.level-seg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 5px;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.level-seg [role="tab"] {
  height: 48px;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: background 150ms, color 150ms;
}
.level-seg [role="tab"][aria-selected="true"] {
  background: var(--lv);
  color: #fff;
  font-weight: 700;
}
.level-seg [role="tab"]:active { transform: scale(0.96); }

/* 호 카드 그리드 */
.ho-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.ho-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 88px;
  padding: 16px 14px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
  transition: box-shadow 150ms;
}
.ho-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--lv);
}
.ho-card:active { transform: scale(0.96); }
.ho-card .ho-num {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.3;
}
.ho-card .ho-caption {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.ho-chip {
  position: absolute;
  top: 12px; right: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
}
.ho-chip.playing { background: var(--lv-tint); color: var(--lv-deep); }
.ho-chip.complete { background: var(--done); color: #fff; }

/* 빈 단계 (4단계 준비중) */
.empty-level {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 56px 20px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 20px;
  text-align: center;
  color: var(--ink-soft);
}
.empty-level .emoji { font-size: 2.5rem; }
.empty-level strong { color: var(--ink); font-size: 1.1875rem; }

/* ---------- 화면 2: 호 상세 ---------- */
.detail-layout { display: flex; flex-direction: column; gap: 16px; }

.intro-figure {
  margin: 0;
  border-radius: 16px;
  border: 2px solid var(--lv);
  overflow: hidden;
  background: var(--lv-tint);
}
.intro-figure img {
  width: 100%;
  height: auto;
  /* 로드 전에도 동일한 박스를 예약해 레이아웃 점프(CLS) 방지 */
  aspect-ratio: 1 / 1;
  max-height: 45vh;
  object-fit: contain;
  background: var(--lv-tint);
}
.intro-fallback {
  display: grid;
  place-items: center;
  gap: 4px;
  aspect-ratio: 4 / 3;
  max-height: 45vh;
  background: linear-gradient(135deg, var(--lv-tint), var(--lv));
  color: #fff;
  text-align: center;
}
.intro-fallback .big {
  font-size: 3rem;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.detail-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.detail-summary .sum-title { font-size: 1.5rem; font-weight: 800; }
.detail-summary .sum-caption { font-size: 0.8125rem; color: var(--ink-soft); font-weight: 500; }

.detail-cta {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0 max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 75%, transparent);
}
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 56px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 1.125rem;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(255, 107, 74, 0.3);
}
.btn-primary:active { background: var(--primary-deep); transform: scale(0.98); }
.btn-text {
  align-self: center;
  min-height: 44px;
  padding: 8px 16px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--secondary);
  border-radius: 12px;
}

/* ---------- 화면 3: 데일리 달력 ---------- */
.daily-board { display: flex; flex-direction: column; gap: 20px; }

.week-section { display: flex; flex-direction: column; gap: 10px; }
.week-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.week-header img {
  width: 24px; height: 24px;
  border-radius: 6px;
  object-fit: cover;
}
.week-header .week-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--secondary);
}
.week-header .week-done {
  color: var(--done);
  font-weight: 700;
  font-size: 0.875rem;
}

.day-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
@media (max-width: 339px) {
  .day-grid { grid-template-columns: repeat(3, 1fr); }
}

.day-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  aspect-ratio: 1;
  min-width: 56px;
  min-height: 56px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform 90ms;
}
.day-cell:active { transform: scale(0.96); }
.day-cell .day-num {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}
.day-cell .day-micro {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1.2;
}
.day-cell .day-check {
  position: absolute;
  top: 6px; right: 7px;
  width: 16px; height: 16px;
  color: var(--done);
}

/* 상태: 완료 */
.day-cell.is-done {
  background: var(--done-tint);
  border-color: var(--done);
}
.day-cell.is-done .day-num { color: var(--done); }

/* 상태: 다음 볼 차례 */
.day-cell.is-next {
  border: 2px solid var(--primary);
  animation: pulse-ring 2s ease-in-out infinite;
}
.day-cell.is-next .day-micro { color: var(--primary-deep); font-weight: 700; }
@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 74, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(255, 107, 74, 0); }
}

/* 상태: 영상 미확보 */
.day-cell.is-locked { color: var(--locked); }
.day-cell.is-locked .day-num,
.day-cell.is-locked .day-micro { color: var(--locked); }

/* 완료 스탬프 모션 */
.day-cell.stamped { animation: stamp 350ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes stamp {
  0% { transform: scale(1.35) rotate(-8deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ---------- 5. 영상 팝업 플레이어 (P0) ---------- */
.player-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--dim);
  padding: max(16px, env(safe-area-inset-top))
           max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom))
           max(16px, env(safe-area-inset-left));
  touch-action: none;
  animation: dim-in 200ms ease-out;
}
.player-overlay[hidden] { display: none; }
@keyframes dim-in { from { opacity: 0; } to { opacity: 1; } }

.player-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  max-width: 100%;
}

/* 뷰포트에 들어가는 가장 큰 16:9 사각형 — 순수 CSS, 잘림 0 */
.player-stage,
.player-topbar,
.player-nav {
  width: min(
    calc(100vw - 32px),
    calc((100dvh - 32px - var(--player-reserved)) * 16 / 9),
    1280px
  );
}
@supports not (height: 100dvh) {
  .player-stage,
  .player-topbar,
  .player-nav {
    width: min(
      calc(100vw - 32px),
      calc((100vh - 32px - var(--player-reserved)) * 16 / 9),
      1280px
    );
  }
}

.player-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--player-bg);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  animation: stage-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes stage-in { from { transform: scale(0.96); opacity: 0.6; } to { transform: scale(1); opacity: 1; } }

.player-stage iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.player-nodata {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 4px;
  color: #fff;
  text-align: center;
  font-weight: 600;
}
.player-nodata[hidden] { display: none; }
.player-nodata .nodata-emoji { font-size: 2rem; margin: 0; }
.player-nodata p { margin: 0; }

.player-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
}
.player-title {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.player-lock {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background 150ms;
  -webkit-user-select: none;
  user-select: none;
}
.player-lock[aria-pressed="true"] { background: var(--primary); }
.player-lock.unlocking { animation: lock-hold 1.5s linear forwards; }
@keyframes lock-hold {
  from { box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.35); }
  to { box-shadow: inset 200px 0 0 0 rgba(255, 255, 255, 0.35); }
}

.player-close {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.player-close:active { transform: scale(0.96); }

.player-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}
.player-nav button {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
}
.player-nav button:disabled { opacity: 0.35; cursor: default; }
.player-nav button:not(:disabled):active { transform: scale(0.96); }

.player-notice {
  margin: 0;
  max-width: min(calc(100vw - 32px), 640px);
  font-size: 0.75rem;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
}
.player-notice a { color: rgba(255, 255, 255, 0.9); }

/* 잠금 중: 닫기·내비 시각적 비활성 */
.player-overlay.locked .player-close,
.player-overlay.locked .player-nav { opacity: 0.3; pointer-events: none; }

/* ---------- 토스트 ---------- */
.toast-region {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 32px);
}
.toast {
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  animation: toast-in 200ms ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.toast.hide { opacity: 0; transition: opacity 250ms; }

/* ---------- 반응형 ---------- */

/* 태블릿 세로 600px~ */
@media (min-width: 600px) {
  :root { --header-h: 64px; }
  .header-title { font-size: 1.3125rem; }
  .ho-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .day-cell .day-num { font-size: 1.5rem; }
}

/* 태블릿 가로·PC 1024px~ */
@media (min-width: 1024px) {
  /* 홈: 좌측 단계 사이드바 */
  .home-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    align-items: start;
  }
  .home-layout .resume-card { grid-column: 1 / -1; }
  .level-seg {
    grid-template-columns: 1fr;
    align-content: start;
    position: sticky;
    top: calc(var(--header-h) + 16px);
  }
  .level-seg [role="tab"] { height: 56px; font-size: 1.0625rem; }

  /* 호 상세: 좌 이미지 / 우 정보 */
  .detail-layout {
    display: grid;
    grid-template-columns: 55% 1fr;
    gap: 24px;
    align-items: start;
  }
  .intro-figure { position: sticky; top: calc(var(--header-h) + 16px); }
  .detail-side { display: flex; flex-direction: column; gap: 16px; }
  .detail-cta { position: static; background: none; padding: 0; }

  /* 달력: 진행판 모드 — 주차 썸네일 좌측 컬럼 */
  .daily-board { gap: 14px; max-width: 860px; margin: 0 auto; }
  .week-section {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 16px;
    align-items: center;
  }
  .week-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
  }
  .week-header img { width: 56px; height: 56px; border-radius: 12px; }
  .day-grid { gap: 10px; }
  .day-cell { min-width: 72px; }
}

/* ---------- 모션 절제 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .day-cell.is-next { box-shadow: 0 0 0 3px rgba(255, 107, 74, 0.35); }
}