/* 소셜레이더 · 오늘 하루 이용권 — 화면 스타일 v2 (정돈판, 캔버스 service-v2.css에서 옮김)
 * 원칙 1. 글자는 세 단계: 제목(.title/.h) · 본문(.body) · 보조(.meta). 굵기는 그 안에서만 바꾼다.
 * 원칙 2. 굵은 제목 글꼴(Paperlogy)은 화면 제목과 맺음 문장에만. 숫자·목록·칩은 Pretendard.
 * 원칙 3. 상자 대신 여백과 구분선. 면(.surface)은 한 묶음에 하나, 상자 속 상자는 쓰지 않는다.
 * 원칙 4. 강조색(주황)은 주 버튼, 경고, 한 화면의 핵심 숫자 한두 곳에만. */

/* ---------- 글꼴 ---------- */
/* Pretendard 는 pretendard.css(동적 서브셋)에서 불러온다 */
@font-face { font-family: "Paperlogy"; font-weight: 600 700; font-style: normal; font-display: swap; src: url(../fonts/Paperlogy-7Bold.woff2) format("woff2"); }
@font-face { font-family: "Paperlogy"; font-weight: 800 900; font-style: normal; font-display: swap; src: url(../fonts/Paperlogy-8ExtraBold.woff2) format("woff2"); }

/* ---------- 토큰 ---------- */
:root {
  --bg: #0f0f10;
  --surface: #17171a;
  --surface-2: #222226;
  --line: #2a2a2e;
  --ink: #f2f1ee;
  --ink-2: #c4c1ba;
  --ink-3: #8f8d88;
  --accent: #ff4a2b;
  --accent-ink: #ff7a61;
  --accent-soft: rgba(255, 74, 43, .12);
  --pos: #3fb27f;
  --neu: #5d5b57;
  --neg: #ff4a2b;
  --f-title: "Paperlogy", "Pretendard", sans-serif;
  --f-body: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
  --r: 12px;
}
html, body { background: var(--bg); }

/* ---------- 바탕 ---------- */
.phone { position: relative; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.6; word-break: keep-all; -webkit-font-smoothing: antialiased; }
.phone *, .phone *::before, .phone *::after { box-sizing: border-box; }
:where(.phone) :where(p, h1, h2, h3, ol, ul, dl, dd, figure, form) { margin: 0; padding: 0; }
:where(.phone) :where(ul, ol) { list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 머리 줄 ---------- */
.top { display: flex; justify-content: space-between; align-items: center; height: 52px; padding: 0 20px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.top .logo { font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.top .ctx { font-weight: 600; color: var(--ink-2); }

/* ---------- 글자 세 단계 ---------- */
.title { font-family: var(--f-title); font-weight: 800; font-size: 28px; line-height: 1.3; letter-spacing: -.03em; }
.title em { font-style: normal; color: var(--accent); }
.h { font-size: 19px; font-weight: 700; line-height: 1.4; letter-spacing: -.02em; }
.sub { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.body { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.body b { color: var(--ink); font-weight: 600; }
.meta { font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------- 간격 ---------- */
.sec { padding: 32px 20px 0; }
.sec.rule { margin-top: 36px; border-top: 1px solid var(--line); }
.mt4 { margin-top: 4px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt20 { margin-top: 20px; } .mt24 { margin-top: 24px; } .mt32 { margin-top: 32px; }

/* ---------- 면과 목록 ---------- */
.surface { background: var(--surface); border-radius: var(--r); }
.list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 14px 16px; }
.list > li + li { border-top: 1px solid var(--line); }
.list.plain > li { padding-left: 0; padding-right: 0; }
.li-t { font-size: 15px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.li-s { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--ink-3); overflow-wrap: anywhere; }
.li-full { grid-column: 1 / -1; }
.num { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.num small { margin-left: 2px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.num.hl { color: var(--accent-ink); }
.link { font-size: 13px; font-weight: 600; color: var(--ink-3); text-decoration: none; white-space: nowrap; }

/* ---------- 버튼과 입력 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 18px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer; }
.btn.primary { border-color: var(--accent); background: var(--accent); color: #0f0f10; font-weight: 700; }
.btn.block { display: flex; width: 100%; }
.btn:disabled { opacity: .4; cursor: default; }
.btn svg { flex: none; width: 18px; height: 18px; }
.btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.input { display: flex; gap: 8px; }
.input input { flex: 1; min-width: 0; height: 52px; padding: 0 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 17px; font-weight: 600; outline: none; }
.input input.on { border-color: var(--ink-3); }
.input input::placeholder { color: var(--ink-3); font-weight: 500; }
.input .btn { height: 52px; padding: 0 20px; }
.field-url { padding: 12px 14px; border-radius: 10px; background: var(--surface); font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }

/* ---------- 상태 표시 · 태그 · 선택 ---------- */
.status { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 6px; background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.status.go { background: var(--accent-soft); color: var(--accent-ink); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: baseline; gap: 4px; padding: 5px 10px; border-radius: 6px; background: var(--surface-2); font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.tag small { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.tag.hl { background: var(--accent-soft); }
.choice { display: flex; flex-wrap: wrap; gap: 6px; }
.choice button { height: 38px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line); background: none; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.choice button[aria-checked="true"] { border-color: var(--ink-3); background: var(--surface-2); color: var(--ink); }

/* ---------- 입장권 (장표 63의 휴대폰판) ---------- */
.tk { position: relative; margin: 24px 20px 0; background: #ece7dd; color: #141312; border-radius: 18px; }
.tk-main { display: flex; flex-direction: column; gap: 12px; padding: 24px 22px 20px; }
.tk-k { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #8a5a3c; }
.tk-t { font-family: var(--f-title); font-weight: 800; font-size: 26px; line-height: 1.26; letter-spacing: -.035em; }
.tk-t em { font-style: normal; color: #d23a21; }
.tk-m { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: #5f5a52; }
.tk-m span { padding: 3px 9px; border: 1px solid #c9c1b2; border-radius: 999px; }
.tk-stub { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px 16px; border-top: 2px dashed #b9b0a1; font-size: 13px; color: #5f5a52; }
.tk-stub::before, .tk-stub::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); }
.tk-stub::before { left: -10px; } .tk-stub::after { right: -10px; }
.tk-stub b { color: #141312; font-weight: 700; }
.tk-time { font-family: var(--f-title); font-size: 20px; font-weight: 800; color: #c23a22; white-space: nowrap; }
.tk-lock { display: inline-flex; align-items: center; gap: 8px; }
.tk-lock svg { flex: none; width: 16px; height: 16px; color: #141312; }
.tk-stamp { position: absolute; right: 18px; top: 18px; padding: 5px 8px; border: 2px solid #c23a22; border-radius: 7px; color: #c23a22; font-family: var(--f-title); font-weight: 800; font-size: 11px; line-height: 1.1; letter-spacing: .08em; text-align: center; transform: rotate(8deg); }
.tk.mini .tk-main { padding: 18px 20px 16px; }
.tk.mini .tk-t { font-size: 21px; }
.tk.mini .tk-stub { padding: 12px 20px 13px; }

/* ---------- 리포트 머리 ---------- */
.rh { padding: 28px 20px 0; }
.rh .title { margin-top: 6px; }

/* ---------- 숫자 묶음 ---------- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.stats.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat .k { font-size: 13px; color: var(--ink-3); }
.stat .v { margin-top: 2px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stats.c4 .stat .v { font-size: 22px; }
.stat .v.warn { color: var(--accent-ink); }

/* ---------- 키워드 카드 ---------- */
.kw { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kw > li { display: flex; flex-direction: column; justify-content: space-between; height: 96px; padding: 14px; border-radius: var(--r); background: var(--surface); }
.kw .w { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.kw .row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.kw .n { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kw .n small { margin-left: 2px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.kw .ai { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kw > li.low { background: var(--accent-soft); }
.kw > li.low .n { color: var(--accent-ink); }
.kw .sk { display: block; width: 52px; height: 16px; border-radius: 4px; background: var(--surface-2); }

/* ---------- 막대 ---------- */
.bars > li { display: grid; grid-template-columns: 80px minmax(0, 1fr) 44px; gap: 12px; align-items: center; padding: 6px 0; font-size: 14px; color: var(--ink-2); }
.bars .num { font-size: 14px; }
.track { display: flex; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.track i { display: block; height: 100%; }
.track .p { background: var(--pos); } .track .u { background: var(--neu); } .track .g { background: var(--neg); } .track .a { background: var(--ink-3); }
.split { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; }
.split i { display: block; height: 100%; }
.split .p { background: var(--pos); } .split .u { background: var(--neu); } .split .g { background: var(--neg); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--ink-2); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.dot.p { background: var(--pos); } .dot.u { background: var(--neu); } .dot.g { background: var(--neg); }
.weeks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: end; height: 88px; }
.weeks i { display: block; border-radius: 2px 2px 0 0; background: #3c3c42; }
.weeks i.hl { background: var(--accent); }
.axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--ink-3); }

/* ---------- 인용 ---------- */
.quote { font-size: 17px; font-weight: 600; line-height: 1.55; letter-spacing: -.01em; color: var(--ink); }

/* ---------- 진행 ---------- */
.prog { height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.prog i { display: block; height: 100%; background: var(--accent); }
.pbar { padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--bg); }
.pbar .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 600; }
.pbar .row span { font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.pbar .prog { margin-top: 10px; }
.steps > li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 0; font-size: 14px; color: var(--ink-3); }
.steps > li + li { border-top: 1px solid var(--line); }
.steps .d { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-2); justify-self: center; }
.steps li.done { color: var(--ink-2); } .steps li.done .d { background: var(--ink-3); }
.steps li.now { color: var(--ink); font-weight: 600; } .steps li.now .d { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.steps .num { font-size: 13px; font-weight: 600; color: var(--ink-2); }

/* ---------- 알림 줄 ---------- */
.notice { padding: 12px 14px; border-radius: 10px; background: var(--surface); font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.notice b { color: var(--ink); font-weight: 600; }
.notice.warn { background: var(--accent-soft); color: var(--ink-2); }

/* ---------- 펼치기 줄 ---------- */
.more { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: var(--r); background: var(--surface); font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.more svg { flex: none; width: 16px; height: 16px; color: var(--ink-3); }

/* ---------- 맺음 ---------- */
.closing { font-family: var(--f-title); font-weight: 800; font-size: 26px; line-height: 1.36; letter-spacing: -.025em; }
.closing em { font-style: normal; color: var(--accent); }
.foot { padding: 28px 20px 32px; font-size: 12px; line-height: 1.6; color: var(--ink-3); }