/* LabHub 데일리 — IT·AI 뉴스 팟캐스트 화면.
 *
 * 색·크기·간격은 /design.css 의 토큰만 쓴다. 언어 학습 화면(/lang/lang.css)과
 * 같은 규칙이라 두 화면이 한 제품처럼 보인다. 다크 모드 분기는 여기 없다 —
 * design.css 가 semantic 층을 갈아 끼운다.
 *
 * 이 화면만의 결정: 대본은 언어 학습처럼 화자 색으로 나누되, 꼭지(story)마다
 * 구분선을 넣는다. 뉴스는 "지금 몇 번째 이야기인가" 가 읽기의 뼈대다.
 */

:root {
  --spkA:    color-mix(in srgb, hsl(var(--cat-coral)) 65%, hsl(var(--color-yellow-500)));
  --spkA-bg: color-mix(in srgb, var(--spkA) 12%, var(--surface));
  --spkB:    hsl(var(--cat-skyblue));
  --spkB-bg: color-mix(in srgb, var(--spkB) 12%, var(--surface));
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font: var(--fs-base)/var(--lh-base) var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; }
button:focus-visible, a:focus-visible { outline: none; box-shadow: var(--focus); }
img { max-width: 100%; display: block; }
kbd {
  font: inherit; font-size: 11px; padding: 1px 5px; border-radius: 4px;
  border: 1px solid var(--border-2); background: var(--card-2); color: var(--dim);
}
.skipLink { position: absolute; left: -999px; top: 8px; z-index: 100;
  padding: 8px 12px; background: var(--accent); color: var(--on-accent); border-radius: var(--r); }
.skipLink:focus { left: 8px; }
.srOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* ───────── 상단 바 ───────── */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  height: 58px; padding: 0 max(16px, env(safe-area-inset-left));
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.back { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.backText b { color: var(--accent); }
.pageTitle { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--dim); }
.pageIcon { flex: none; }
.langPick { margin-left: auto; display: flex; gap: 4px; }
.langPick button {
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--dim); font-size: var(--fs-sm); font-weight: 600;
}
.langPick button[aria-pressed="true"] {
  background: var(--accent); color: var(--on-accent); border-color: transparent;
}

/* ───────── 본문 ───────── */
.app { flex: 1; width: 100%; max-width: 860px; margin: 0 auto;
  padding: var(--sp-5) max(16px, env(safe-area-inset-left)) 64px; }
.loading, .empty { padding: 60px 0; text-align: center; color: var(--dim); }
.foot {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  padding: 18px max(16px, env(safe-area-inset-left));
  border-top: 1px solid var(--border); color: var(--dim); font-size: var(--fs-sm);
}
.keys { display: flex; gap: 6px; align-items: center; }

/* ───────── 오늘 카드 ───────── */
.today { display: grid; grid-template-columns: 132px 1fr; gap: var(--sp-4);
  padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); margin-bottom: var(--sp-5); }
.today .cover { width: 132px; height: 132px; border-radius: var(--r); object-fit: cover;
  background: var(--card-2); }
.today h1 { margin: 0 0 6px; font-size: var(--fs-xl); line-height: 1.3; }
.today .meta { color: var(--dim); font-size: var(--fs-sm); margin-bottom: 10px; }
.today .sub { margin: 0 0 12px; color: var(--dim); }
.playRow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.playBtn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 999px; border: 0;
  background: var(--accent); color: var(--on-accent); font-weight: 700;
}
.rateBtn { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--dim); font-size: var(--fs-sm); }
audio { width: 100%; margin-top: 12px; }

/* ───────── 꼭지 목록 ───────── */
.stories { list-style: none; padding: 0; margin: 0 0 var(--sp-5); display: grid; gap: 10px; }
.stories li { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); }
.stories .n { display: inline-block; min-width: 22px; color: var(--accent); font-weight: 700; }
.stories a { font-weight: 600; }
.stories a:hover { text-decoration: underline; }
.stories .why { margin: 4px 0 0 22px; color: var(--dim); font-size: var(--fs-sm); }
.stories .jump { margin-left: 8px; font-size: var(--fs-sm); color: var(--accent);
  border: 0; background: none; padding: 0; }

/* ───────── 대본 ───────── */
h2.sectionTitle { font-size: var(--fs-lg); margin: var(--sp-5) 0 var(--sp-3); }
.script { display: grid; gap: 6px; }
.line { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 7px 10px;
  border-radius: var(--r); align-items: start; }
.line .who { font-weight: 700; font-size: var(--fs-sm); }
.line.a { background: var(--spkA-bg); }
.line.b { background: var(--spkB-bg); }
.line.a .who { color: var(--spkA); }
.line.b .who { color: var(--spkB); }
.line.on { outline: 2px solid var(--accent); }
.storyBreak { margin: var(--sp-4) 0 var(--sp-2); padding-top: var(--sp-3);
  border-top: 1px solid var(--border); color: var(--dim); font-size: var(--fs-sm);
  font-weight: 600; }

/* ───────── 지난 회차 ───────── */
.past { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.past li a { display: flex; gap: 12px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.past .day { color: var(--dim); font-size: var(--fs-sm); flex: none; width: 92px;
  font-variant-numeric: tabular-nums; }
.past .t { font-weight: 600; }

.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  padding: 10px 16px; border-radius: 999px; background: var(--text); color: var(--bg);
  font-size: var(--fs-sm); z-index: 40; }

@media (max-width: 620px) {
  .today { grid-template-columns: 1fr; }
  .today .cover { width: 100%; height: auto; aspect-ratio: 1; }
  .past .day { width: 78px; }
}