/* Dictation for Netflix — 소개/방침 페이지 공용 스타일
 *
 * 두 페이지는 body·.wrap·h2·footer 를 같은 이름으로 쓰면서 값이 다르다.
 * 한 파일로 합칠 때 그냥 이어붙였더니 뒤에 온 방침 페이지 쪽이 소개 페이지를
 * 덮어썼다 — 소개 페이지 푸터가 flex 를 잃고 세로로 쌓였고 폭도 720→680 이
 * 됐다. 그래서 공용은 공용대로 두고, 충돌하는 것만 body 클래스로 가른다.
 *   <body class="home">   소개
 *   <body class="policy"> 방침
 */
:root{
  --ground:#0A0B0F; --panel:#12141B; --line:#272B37;
  --ink:#E8EAF2; --dim:#949AAD; --faint:#5A6072;
  --accent:#93A4FF; --ok:#4ADE9B; --bad:#FF6B72;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --sans:"IBM Plex Sans","IBM Plex Sans KR",system-ui,-apple-system,sans-serif;
}

/* ── 공용 ── */
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:16px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent)}
.wrap{margin:0 auto}
img{max-width:100%}

/* ── 소개 페이지 ── */
.home{line-height:1.65}
.home .wrap{max-width:720px; padding:72px 20px 96px}

.home header{display:flex; align-items:center; gap:14px; margin-bottom:40px}
.home header img{width:48px; height:48px; border-radius:11px}
.home header h1{margin:0; font-size:21px; font-weight:600; letter-spacing:-0.01em}
.home header p{margin:2px 0 0; color:var(--faint); font-size:13px; font-family:var(--mono)}

.lede{font-size:19px; line-height:1.6; color:var(--ink); margin:0 0 14px; text-wrap:balance}
.sub{color:var(--dim); margin:0 0 26px; max-width:56ch}

/* 소개를 다 읽은 사람이 갈 곳이 없으면 페이지가 할 일을 안 한 것이다 */
.install{display:flex; flex-direction:column; align-items:flex-start; gap:9px; margin:0 0 48px}
.cta{
  display:inline-block; background:var(--accent); color:#0A0B0F;
  text-decoration:none; font-weight:600; font-size:15px;
  padding:12px 22px; border-radius:7px; transition:filter .15s;
}
.cta:hover{filter:brightness(1.08)}
.cta:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.install small{color:var(--faint); font-size:12.5px; font-family:var(--mono)}

/* 제품의 핵심 화면을 글보다 먼저 보여준다 */
.demo{
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:22px 20px; margin:0 0 48px; font-family:var(--mono);
}
.demo .line{font-size:17px; line-height:2; display:flex; flex-wrap:wrap; gap:0 .7ch}
.demo .w{display:inline-flex; flex-direction:column; align-items:flex-start}
.demo .t{display:inline-flex; padding-bottom:2px}
.demo .ok{color:var(--ok); box-shadow:inset 0 -2px 0 rgba(74,222,155,.45)}
.demo .bad{color:var(--bad); box-shadow:inset 0 -2px 0 var(--bad)}
.demo .gap{color:var(--faint); box-shadow:inset 0 -2px 0 var(--bad)}
.demo .ans{font-size:.68em; color:var(--accent); padding-top:2px}
.demo .meta{margin-top:14px; font-size:12px; color:var(--dim); display:flex; flex-wrap:wrap; gap:6px 14px}
.chip{border:1px solid var(--line); border-radius:3px; padding:2px 8px; font-size:11px}
.chip.c{border-color:#6B4A8F; color:#C79BE8}
.chip.f{border-color:#8F6A2A; color:#F2B950}

.home h2{font-size:15px; font-weight:600; margin:0 0 18px; letter-spacing:.02em}
.rows{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-bottom:48px}
.row{background:var(--ground); padding:18px 20px}
.row b{display:block; font-weight:600; font-size:15px; margin-bottom:5px}
.row span{color:var(--dim); font-size:14.5px}

.note{border-left:2px solid var(--accent); padding:4px 0 4px 16px; color:var(--dim); font-size:14.5px; max-width:58ch; margin-bottom:48px}
.note b{color:var(--ink); font-weight:600}

.home footer{border-top:1px solid var(--line); padding-top:22px; display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; font-size:13px}
.home footer a{color:var(--accent); text-decoration:none}
.home footer a:hover{text-decoration:underline}
.home footer .spacer{flex:1}
.home footer small{color:var(--faint); font-size:12px}

@media (max-width:560px){
  .home .wrap{padding:48px 18px 72px}
  .lede{font-size:17px}
  .demo .line{font-size:15px}
  .home footer .spacer{display:none}
}

/* ── 방침 페이지 ── */
.policy{line-height:1.72}
.policy .wrap{max-width:680px; padding:64px 20px 96px}

.back{display:inline-block; margin-bottom:28px; color:var(--dim); text-decoration:none; font-size:13.5px; font-family:var(--mono)}
.back:hover{color:var(--ink)}
.policy h1{font-size:25px; font-weight:600; margin:0 0 6px; letter-spacing:-0.01em}
.date{color:var(--faint); font-size:13px; font-family:var(--mono); margin:0 0 36px}

.summary{
  background:var(--panel); border:1px solid var(--line); border-left:2px solid var(--accent);
  border-radius:6px; padding:18px 20px; margin:0 0 44px;
}
.summary b{color:var(--ink)}
.summary p{margin:0; color:var(--dim)}

.policy h2{font-size:16px; font-weight:600; margin:40px 0 12px; letter-spacing:.01em}
.policy p{margin:0 0 14px; color:var(--dim); max-width:60ch}
.policy p strong{color:var(--ink); font-weight:600}
.policy ul{margin:0 0 14px; padding-left:20px; color:var(--dim)}
.policy li{margin-bottom:6px}

.policy table{width:100%; border-collapse:collapse; margin:0 0 16px; font-size:14.5px}
.policy th,.policy td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.policy th{color:var(--faint); font-weight:500; font-size:12px; font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase}
.policy td{color:var(--dim)}
.policy td code{font-family:var(--mono); font-size:13px; color:var(--ink)}

.policy footer{
  margin-top:52px; padding-top:22px; border-top:1px solid var(--line);
  color:var(--faint); font-size:13px;
  display:flex; flex-wrap:wrap; gap:6px 16px; align-items:baseline;
}
.policy footer a{color:var(--accent); text-decoration:none}
.policy footer a:hover{text-decoration:underline}
.policy footer small{color:var(--faint); font-size:12px}
.policy footer .spacer{flex:1}

/* 넓은 표는 페이지 전체를 밀지 않고 저 혼자 가로로 흐른다 */
@media (max-width:560px){
  .policy .wrap{padding:44px 18px 72px}
  .policy h1{font-size:22px}
  .policy table{display:block; overflow-x:auto}
  .policy footer .spacer{display:none}
}