/* balmaepyo.com — 발매표 소개·개인정보처리방침·이용약관 (유튜브 API 감사용 공개 페이지, CHECKPOINT 13절).
   카드 틀(app/cards/card.html)의 로고·강조색을 그대로. 글 폭·행간은 linear.app/privacy(본문 17px·1.6·폭 624px),
   제목 자간은 toss.im(-0.03em), 면은 그림자 없이 옅은 회색 바탕(toss.im #F2F4F7) — 10-25 실측 */
:root {
  --bg: #FFFFFF; --soft-bg: #F2F4F7; --fg: #1C1F25; --muted: #5F6672; --line: #E5E8EC;
  --acc: #E8332A; --yt: #FF0000;
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #141518; --soft-bg: #202227; --fg: #F1F2F4; --muted: #A3A8B1; --line: #30333A; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.6 var(--font); letter-spacing: -0.01em;
  word-break: keep-all; overflow-wrap: anywhere; -webkit-text-size-adjust: 100%; }
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; border-radius: 4px; }
.in { max-width: 680px; margin: 0 auto; padding-inline: 20px; }

.top { border-bottom: 1px solid var(--line); }
.top .in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 16px; }
.logo { font-weight: 800; font-size: 24px; letter-spacing: -0.03em; text-decoration: none; white-space: nowrap; }
.logo b { display: inline-block; background: var(--acc); color: #fff; padding: 0 8px 2px; border-radius: 5px; margin-right: 1px; }
.nav { display: flex; gap: 16px; font-size: 15px; color: var(--muted); }
.nav a { text-decoration: none; }
.nav a:hover, .nav a[aria-current] { color: var(--fg); text-decoration: underline; }

main { padding-block: 40px 56px; display: grid; gap: 40px; }
.hero h1 { font-size: clamp(34px, 7vw, 48px); line-height: 1.2; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 12px; }
.hero h1 em { font-style: normal; color: var(--acc); }
.hero p { margin: 0; color: var(--muted); font-size: 18px; }
h2 { font-size: 24px; line-height: 1.35; letter-spacing: -0.02em; font-weight: 800; margin: 0 0 12px; }
h3 { font-size: 18px; letter-spacing: -0.01em; font-weight: 700; margin: 24px 0 6px; }
p { margin: 0 0 10px; }
ul { margin: 0 0 10px; padding-left: 22px; }
li { margin-bottom: 4px; }

.channels { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.channels li { margin: 0; }
.channels a { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--soft-bg); border-radius: 16px; text-decoration: none; }
.channels a:hover { outline: 1px solid var(--line); }
.channels .ico { flex: none; width: 34px; height: 24px; display: flex; align-items: center; justify-content: center; }
.channels .ico svg { display: block; height: 24px; width: auto; }
.channels .name { font-weight: 700; }
.channels .sub { color: var(--muted); font-size: 15px; }

.box { background: var(--soft-bg); border-radius: 20px; padding: 24px; }
.box p:last-child, .box ul:last-child { margin-bottom: 0; }
.yt-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.yt-head svg { height: 22px; width: auto; flex: none; }
.yt-head h2 { margin: 0; }

.doc h1 { font-size: clamp(30px, 6vw, 40px); line-height: 1.2; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 8px; }
.doc .date { color: var(--muted); margin: 0 0 24px; font-size: 15px; }
.doc section + section { border-top: 1px solid var(--line); padding-top: 32px; margin-top: 8px; }
.toc { font-size: 15px; color: var(--muted); }

.foot { border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.foot .in { padding-block: 24px 40px; display: grid; gap: 4px; }
.foot p { margin: 0; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 6px; }
.foot nav a { color: var(--fg); font-weight: 600; }
.mail { user-select: all; }
.doc h2 { font-size: 18px; letter-spacing: -0.01em; font-weight: 700; margin: 24px 0 6px; }
.box .channels a { background: var(--bg); }