/* 화면별 스타일: 홈, 표지, 연재 페이지, 그래프, 회차 화면, 체크포인트, 엔딩, 전체 읽기, 새 작품, 설정.
   공통 조각(버튼·카드·칩·대화상자·토스트)은 app.css에 있다. index.html이 app.css 다음에 이 파일을 불러온다. */

/* ── 홈 ──────────────────────────────────────── */
.home-hero { padding: 28px 0 8px; }
.home-kicker { font-size: 0.85rem; font-weight: 700; color: var(--accent-strong); }
.home-title { font-size: 1.9rem; font-weight: 900; line-height: 1.2; margin: 4px 0 12px; letter-spacing: -0.02em; }
.home-profile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stage-badge { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 0.8rem; font-weight: 700; }
/* 6단계(스타 작가) 칭호: 금색(투베·금색 엔딩과 같은 '높은 성취' 색) */
.stage-badge--star { background: var(--gold); color: #1f1d1a; box-shadow: 0 0 0 2px var(--gold-soft); }
.home-pen { font-size: 0.9rem; font-weight: 600; }
.home-pitch { margin: 14px 0 0; color: var(--ink-soft); line-height: 1.7; }
.home-actions { display: grid; gap: 10px; margin: 18px 0; }
.continue-card {
  display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); text-decoration: none;
}
.continue-card:hover { border-color: var(--accent); }
.continue-text { display: flex; flex-direction: column; min-width: 0; }
.continue-label { font-size: 0.78rem; font-weight: 700; color: var(--accent-strong); }
.continue-title { font-size: 1.05rem; font-weight: 800; line-height: 1.35; }
.continue-where { font-size: 0.85rem; color: var(--ink-soft); }
.home-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.menu-item {
  display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); text-decoration: none; font-weight: 600; color: var(--ink);
}
.menu-item .icon { color: var(--ink-soft); }
.menu-item:hover { background: var(--surface-2); }
.menu-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.menu-info { font-size: 0.75rem; font-weight: 600; color: var(--ink-soft); }
/* '회귀하기' 아래 안내: 대상 작품 · 장르와 연중 회차 · (이미 회귀했으면) 두 번째 생의 결과 */
.home-regress-notes { margin-top: -4px; }
.home-regress-notes .field-note { margin: 2px 0 0; }
.home-regress-meta { font-weight: 600; }

/* ── 표지 ────────────────────────────────────── */
/* 표지는 크기가 정해진 그림이라 글자 크기도 px로 고정한다(글자 크기 설정을 따라 커지면 표지 밖으로 넘친다).
   제목은 위 장르 줄·아래 필명 줄과 겹치지 않게 칸(grid)을 나누고, 길면 몇 줄에서 자른다(전체 제목은 옆 h1에 있다). */
.cover {
  position: relative; flex-shrink: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 4px;
  aspect-ratio: 3 / 4; padding: 9px 9px 9px 13px; border-radius: 8px; overflow: hidden; color: #fff;
  background: var(--cover-regression); box-shadow: 0 6px 16px rgb(0 0 0 / 0.18);
}
.cover::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: rgb(0 0 0 / 0.18); }
.cover--academy { background: var(--cover-academy); }
.cover--rofan { background: var(--cover-rofan); }
.cover-genre, .cover-pen {
  font-size: 9px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.45); /* 작은 흰 글자가 밝은 쪽 그라디언트 위에서도 읽히게(제목과 같은 그림자) */
}
.cover-genre { font-weight: 700; }
.cover-title {
  align-self: end; font-weight: 800; font-size: 13px; line-height: 1.3; text-shadow: 0 1px 6px rgb(0 0 0 / 0.35);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden;
}
.cover--md { width: 104px; }
.cover--sm { width: 60px; padding: 6px 5px 6px 9px; grid-template-rows: minmax(0, 1fr); }
.cover--sm .cover-genre, .cover--sm .cover-pen { display: none; }
.cover--sm .cover-title { font-size: 9px; -webkit-line-clamp: 5; line-clamp: 5; }

/* ── 연재 페이지 ───────────────────────────────── */
.work-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: end; margin: 18px 0 14px; }
.work-title { font-size: 1.3rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
.work-pen { color: var(--ink-soft); font-size: 0.9rem; margin-top: 4px; }
.work-info > .chips { margin-top: 8px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 560px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat, .stat-wrap > .stat {
  display: flex; flex-direction: column; gap: 2px; width: 100%; height: 100%; padding: 12px 14px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.stat-wrap { position: relative; }
.stat--mental { cursor: pointer; }
.stat--mental:hover { border-color: var(--ink-faint); }
.stat-label { font-size: 0.78rem; color: var(--ink-soft); font-weight: 600; }
/* 멘탈 칸은 누르면 사유 팝오버가 열리는 버튼이다: 이름 옆 ⓘ로 알린다 */
.stat-label--more { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.stat-more { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 0.68rem; font-weight: 800; font-style: normal; line-height: 1; }
.stat--mental[aria-expanded="true"] { border-color: var(--accent-strong); }
.stat-value { font-size: 1.3rem; font-weight: 800; line-height: 1.25; }
.stat-sub { font-size: 0.78rem; color: var(--ink-soft); }
.stat-sub.up { color: var(--good); font-weight: 700; }
.stat-sub.down { color: var(--bad); font-weight: 700; }
.mental-row { display: flex; align-items: center; gap: 6px; }
.gauge { display: block; height: 6px; margin: 4px 0 2px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.gauge-fill { display: block; height: 100%; border-radius: inherit; background: var(--mood); }
.mental--4, .mental--3 { --mood: var(--good); }
.mental--2 { --mood: var(--gold); }
.mental--1 { --mood: var(--accent); }
.mental--0 { --mood: var(--bad); }
.face { color: var(--mood, currentColor); }
.progress { margin: 12px 0 4px; }
.progress-head { display: flex; justify-content: space-between; gap: 8px; font-size: 0.82rem; color: var(--ink-soft); font-weight: 600; }
.progress-bar { position: relative; display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; height: 8px; margin-top: 6px; }
.progress-bar i { border-radius: 2px; background: var(--surface-2); border: 1px solid var(--line); }
.progress-bar i.done { background: var(--chart-bar); border-color: transparent; }
.progress-bar i.cp { border-color: var(--line-strong); }
.progress-bar i.done.cp { border-color: var(--chart-bar-active); }
.stat-strip { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding: 10px 14px; border-radius: 12px; background: var(--gold-soft); color: var(--gold-ink); font-weight: 700; }
.popover {
  position: absolute; z-index: 25; top: calc(100% + 6px); right: 0; width: min(260px, 80vw); padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg);
}
.popover-title { display: block; font-size: 0.85rem; margin-bottom: 4px; }
.reason-list { list-style: none; padding: 0; margin: 4px 0 0; font-size: 0.88rem; }
.reason-list li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.reason-list .up b { color: var(--good); }
.reason-list .down b { color: var(--bad); }
.reason-list--inline { display: flex; flex-wrap: wrap; gap: 2px 14px; width: 100%; margin: 0; }
.reason-list--inline li { gap: 6px; }

.inbox { margin: 12px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.inbox summary { display: flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 14px; cursor: pointer; font-weight: 700; font-size: 0.92rem; list-style: none; }
.inbox summary::-webkit-details-marker { display: none; }
.inbox summary::after { content: "›"; margin-left: auto; color: var(--ink-soft); transition: transform 0.15s ease; }
.inbox[open] summary::after { transform: rotate(90deg); }
.inbox summary .icon { color: var(--ink-soft); }
.inbox-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line); font-size: 0.75rem; }
.inbox-new { padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--ink); font-size: 0.72rem; font-weight: 700; }
.inbox-list { list-style: none; padding: 0 14px 12px; margin: 0; display: grid; gap: 8px; font-size: 0.88rem; }
.inbox-list li { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.inbox-ep { color: var(--ink-soft); font-weight: 700; }
.inbox-text { flex-basis: 100%; color: var(--ink-soft); }

.ep-list { list-style: none; margin: 0; padding: 0; }
.ep-list > li { border-top: 1px solid var(--line); }
.ep-row { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 16px; text-decoration: none; }
.ep-row:hover { background: var(--surface-2); }
.ep-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ep-title { font-weight: 700; line-height: 1.4; }
.ep-meta { font-size: 0.8rem; color: var(--ink-soft); }
.ep-notice { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--surface-2); color: var(--ink-soft); font-size: 0.88rem; }
.empty { padding: 28px 16px; text-align: center; color: var(--ink-soft); }

/* ── 그래프 ──────────────────────────────────── */
.chart { margin: 0; }
.chart-box { position: relative; border-radius: 8px; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-divider { stroke: var(--ink-faint); stroke-width: 1; opacity: 0.6; }
.chart-tick { fill: var(--ink-soft); font-size: calc(10px * var(--font-scale)); font-family: var(--font); font-variant-numeric: tabular-nums; }
.chart-bar { fill: var(--chart-bar); transition: fill 0.15s ease; }
.chart-bar.is-active { fill: var(--chart-bar-active); }
.chart-line { fill: none; stroke: var(--chart-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: var(--chart-line); stroke: var(--surface); stroke-width: 2; }
.chart-ghost { fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-linejoin: round; }
.chart-ghost-end { fill: var(--ink-soft); font-size: 12px; font-weight: 900; font-family: var(--font); }
.chart-star { fill: var(--gold-ink); font-size: 11px; }
.chart-hit { fill: transparent; cursor: pointer; touch-action: pan-y; }
.chart-tip {
  position: absolute; top: 0; left: 0; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; padding: 6px 10px; border-radius: 8px; white-space: nowrap;
  background: var(--ink); color: var(--paper); font-size: 0.8rem; line-height: 1.4; box-shadow: var(--shadow-lg);
}
.chart-tip-tube { color: var(--tip-gold); font-weight: 700; }
.chart-empty { display: grid; place-items: center; min-height: 120px; padding: 16px; border-radius: 10px; background: var(--surface-2); color: var(--ink-soft); font-size: 0.9rem; text-align: center; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 0.8rem; color: var(--ink-soft); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-bar { width: 10px; height: 10px; border-radius: 3px; background: var(--chart-bar); }
.legend-line { width: 16px; height: 2px; border-radius: 1px; background: var(--chart-line); }
.legend-ghost { width: 16px; height: 2px; background: var(--ink-faint); }
.legend-ghost-end { width: auto; height: auto; background: none; font-style: normal; font-weight: 900; color: var(--ink-soft); }
.legend-star { font-style: normal; color: var(--gold-ink); }
.chart--mini { margin-top: 8px; }

/* ── 회차 화면 ───────────────────────────────── */
.skeleton { padding: 24px 0 8px; }
.skeleton-label { display: block; margin-bottom: 14px; color: var(--ink-soft); font-weight: 700; animation: pulse 1.2s ease-in-out infinite; }
.skeleton i { display: block; height: 14px; margin: 12px 0; border-radius: 7px; background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.skeleton i.short { width: 60%; }
.skip-hint { margin-top: 18px; font-size: 0.82rem; color: var(--ink-soft); }
.is-revealing { cursor: pointer; }
.reader { margin: 22px 0 16px; }
.ep-heading { font-size: 1.35rem; font-weight: 800; line-height: 1.4; margin-bottom: 14px; letter-spacing: -0.01em; }
.ep-body { font-size: 1.06rem; line-height: 1.95; text-wrap: pretty; }
.result-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.result-numbers .label { display: block; font-size: 0.75rem; color: var(--ink-soft); font-weight: 600; }
.num-big { font-size: 1.35rem; font-weight: 800; line-height: 1.3; }
.result .chips { margin: 12px 0; justify-content: center; }
.mental-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.mental-chip-main { display: flex; flex-direction: column; line-height: 1.3; }
.mental-chip-main span { font-size: 0.8rem; }
.result .reason-list--inline { flex: 1 1 100%; }
.tube-banner {
  display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 14px 16px; border-radius: 14px;
  background: var(--gold-soft); border: 1.5px solid var(--gold); color: var(--gold-ink);
}
.tube-banner strong { display: block; font-size: 1.05rem; }
.tube-star { font-size: 1.7rem; color: var(--gold-ink); line-height: 1; }
.tube-first { display: block; font-size: 0.88rem; font-weight: 700; }
.event-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.event-card { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--warn-soft); color: var(--warn-ink); font-size: 0.9rem; }
.comments-head { display: flex; align-items: baseline; gap: 6px; font-size: 1rem; font-weight: 800; margin-bottom: 4px; }
.comments-head .count { color: var(--accent-strong); }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment { padding: 12px 0; border-top: 1px solid var(--line); }
.comment:first-child { border-top: 0; }
.comment--best { margin: 4px -16px; padding: 12px 16px; background: var(--gold-soft); border-top: 0; }
.comment--best + .comment { border-top: 0; }
.comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.8rem; }
.comment-nick { font-weight: 700; color: var(--ink-soft); }
.comment-text { margin: 4px 0 2px; line-height: 1.6; }
.comment-like { font-size: 0.75rem; color: var(--ink-soft); }
.comments-foot { margin: 8px -16px -16px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft); font-size: 0.82rem; text-align: center; border-radius: 0 0 var(--radius) var(--radius); }
.ep-nav { display: flex; margin: 12px 0; }

/* ── 체크포인트 ──────────────────────────────── */
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; margin: 0 0 4px; }
.summary-grid > div { display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; padding: 10px; border-radius: 10px; background: var(--surface-2); }
.summary-grid dt { font-size: 0.75rem; color: var(--ink-soft); font-weight: 600; }
.summary-grid dd { margin: 0; font-size: 1.15rem; font-weight: 800; white-space: nowrap; }
.summary-sub { font-size: 0.75rem; color: var(--ink-soft); }
.chart-mark { fill: var(--chart-bar-active); font-size: 10px; font-weight: 800; font-family: var(--font); }
.cp-best { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 10px; font-size: 0.9rem; font-weight: 700; }
.cp-best-label { color: var(--ink-soft); font-weight: 600; }
.cp-cheer { margin: 10px 0 2px; font-weight: 700; }
.cp-mental { margin-top: 10px; }
.cp-question { margin: 20px 0 0; font-size: 0.95rem; font-weight: 800; color: var(--ink-soft); }

/* 편집부 메모(5화 경고): 노란 메모지에 핀 */
.memo { position: relative; background: var(--warn-soft); border-color: transparent; color: var(--warn-ink); padding-top: 18px; }
.memo-from { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; }
.memo-pin { width: 12px; height: 12px; border-radius: 50%; background: var(--accent-strong); box-shadow: 0 1px 0 rgb(0 0 0 / 0.2); }
.memo-title { font-size: 1.2rem; font-weight: 800; margin: 4px 0 6px; }
.memo-body { line-height: 1.75; color: var(--ink); }

/* 10화 받은편지함과 편집자 메일 */
.inbox-card { padding: 0; overflow: hidden; }
.inbox-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 0.85rem; font-weight: 800; color: var(--ink-soft); }
.inbox-card-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); font-size: 0.75rem; }
.inbox-card-count--new { background: var(--accent-strong); color: var(--accent-ink); }
.inbox-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.inbox-row.is-unread { background: var(--accent-soft); }
.inbox-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.4; }
.inbox-row-main strong { font-size: 0.9rem; }
.inbox-row-main span { font-size: 0.85rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-row-time { font-size: 0.75rem; color: var(--ink-soft); flex-shrink: 0; }
.inbox-card-empty { padding: 18px 16px 6px; text-align: center; color: var(--ink-soft); font-size: 0.9rem; }
.cp-miss { margin: 8px 16px 16px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-weight: 700; text-align: center; }
.mail-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-strong); }
.mail { padding: 18px 18px 16px; }
.mail-subject { font-size: 1.15rem; font-weight: 800; line-height: 1.4; margin: 0 0 10px; }
.mail-meta { display: grid; gap: 2px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.mail-meta > div { display: flex; gap: 10px; }
.mail-meta dt { flex: 0 0 auto; min-width: 4.5em; white-space: nowrap; color: var(--ink-soft); }
.mail-meta dd { margin: 0; font-weight: 700; }
.mail-body { line-height: 1.85; }
.mail-terms { margin: 12px 0; padding: 12px 14px 12px 32px; border-radius: 10px; background: var(--surface-2); line-height: 1.7; font-weight: 600; }
.mail-terms li::marker { color: var(--accent-strong); }
.mail-notice { margin: 12px 0; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn-ink); font-size: 0.9rem; line-height: 1.6; }
.mail-sign { margin-top: 12px; text-align: right; color: var(--ink-soft); font-size: 0.9rem; }

/* 옵션 버튼: 이름 + 설명 + 바뀌는 숫자 칩 */
.cp-options { display: grid; gap: 10px; margin: 10px 0 16px; }
.cp-option {
  display: flex; flex-direction: column; gap: 4px; min-height: 64px; padding: 14px 16px; text-align: left; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink);
}
.cp-option-name { font-size: 1.05rem; }
.cp-option-hint { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.5; }
.cp-option--main { border-color: var(--accent-strong); }
@media (hover: hover) { .cp-option:hover { background: var(--accent-soft); } }
.cp-effects { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cp-effect { display: inline-flex; align-items: center; min-height: 24px; padding: 1px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--surface-2); color: var(--ink); }
.cp-effect--good { background: var(--good-soft); color: var(--good); }
.cp-effect--bad { background: var(--bad-soft); color: var(--bad); }

/* 15화 '새벽 3시, 작가의 방': 화면 전체가 밤. 위쪽에 스탠드 불빛 */
.screen--night {
  margin: 0 -16px; padding: 0 16px calc(132px + env(safe-area-inset-bottom)); min-height: 100dvh; color: var(--night-ink);
  background: radial-gradient(120% 50% at 50% 0%, rgb(255 196 120 / 0.13), transparent 60%), var(--night);
}
/* 넓은 화면에서도 가운데 칸 밖까지 밤으로 칠한다(가운데만 어두우면 양옆 크림색이 떠 보인다) */
body:has(.screen--night), body.is-night { background: var(--night); }
.screen--night .topbar { background: color-mix(in srgb, var(--night) 92%, transparent); border-color: rgb(255 255 255 / 0.1); }
.screen--night .icon-btn, .screen--night .topbar-back { color: var(--night-ink); }
.screen--night .page-kicker { color: #ffb3a9; }
.screen--night .card, .screen--night .cp-option { background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.14); color: var(--night-ink); box-shadow: none; }
.screen--night .cp-option-hint, .screen--night .muted, .screen--night .cp-question { color: #b9b6cc; }
.screen--night .mental-chip { background: rgb(255 255 255 / 0.06); }
.screen--night .cp-option--main { border-color: #ffb3a9; }
.screen--night .cp-effect { background: rgb(255 255 255 / 0.08); color: var(--night-ink); }
.screen--night .cp-effect--good { background: rgb(76 194 142 / 0.18); color: #8be0b7; }
.screen--night .cp-effect--bad { background: rgb(255 123 123 / 0.16); color: #ffb0b0; }
@media (hover: hover) { .screen--night .cp-option:hover { background: rgb(255 255 255 / 0.1); } }
.night-room { margin: 6px 0 4px; }
.night-clock {
  display: flex; align-items: baseline; gap: 2px; margin: 4px 0 12px; font-size: 3.4rem; font-weight: 300; line-height: 1;
  letter-spacing: 0.04em; color: #ffd9a8; font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgb(255 190 110 / 0.35);
}
.night-colon { animation: blink 1.2s steps(1) infinite; }
.night-lines { display: grid; gap: 6px; margin-bottom: 14px; line-height: 1.75; color: #d9d6ea; }
.night-line { font-size: 0.8rem; color: #b9b6cc; margin-left: auto; }
@keyframes blink { 50% { opacity: 0.15; } }

/* ── 엔딩 ────────────────────────────────────── */
.ending-card {
  --ending-color: var(--accent-strong);
  --ending-band: linear-gradient(var(--ending-color), var(--ending-color)) top / 100% 6px no-repeat;
  margin: 18px 0 12px; padding: 32px 20px 28px; border-radius: 18px; text-align: center; background: var(--ending-band), var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
/* 엔딩 색(결과 카드와 같은 규칙: endings.json color, 없으면 kind). 이름 글자와 위 띠에 쓴다 */
.ending-tone--coral { --ending-color: var(--accent-strong); }
.ending-tone--gray { --ending-color: var(--ink-soft); }
.ending-tone--violet { --ending-color: var(--meta); }
.ending-tone--gold { --ending-color: var(--gold-ink); }
.ending-card--special { background: var(--ending-band), var(--surface-2); }
.ending-card--gold { background: var(--ending-band), linear-gradient(160deg, var(--gold-soft), var(--surface) 70%); border: 2px solid var(--gold); }
.ending-kind { font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); }
.ending-name { font-size: 1.75rem; font-weight: 900; line-height: 1.3; margin: 6px 0 12px; letter-spacing: -0.02em; color: var(--ending-color); }
.ending-lines p { margin: 4px 0; line-height: 1.7; }
.ending-stars { margin-top: 14px; font-size: 1.6rem; color: var(--gold-ink); letter-spacing: 3px; }
.ending-stars .off { color: var(--ink-faint); }
.ending-work { display: flex; align-items: center; gap: 12px; }
.ending-work-text { display: flex; flex-direction: column; min-width: 0; }
.ending-work-title { font-weight: 800; line-height: 1.35; }
.summary-grid--ending { margin: 12px 0; grid-template-columns: 1fr 1fr; }
.summary-grid--ending > div:last-child:nth-child(odd) { grid-column: span 2; }
@media (min-width: 560px) { .summary-grid--ending { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } .summary-grid--ending > div:last-child:nth-child(odd) { grid-column: auto; } }
.ending-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
/* 역주행 공개 연출: 명작 카드 → '5년 뒤…' → 금색 역주행 카드 */
.ending-card.is-skipping { display: grid; place-items: center; min-height: 220px; background: var(--ink); border-color: var(--ink); }
.ending-timeskip { font-size: 1.9rem; font-weight: 900; letter-spacing: 0.08em; color: var(--paper); animation: fade-in 0.6s ease both; }
.ending-card.is-revealed, .ending-card.is-entering { animation: reveal-pop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
@keyframes reveal-pop { from { transform: scale(0.92); opacity: 0; } to { transform: none; opacity: 1; } }
.screen--ending.is-revealing { cursor: pointer; }
/* 금색 엔딩(웹툰화·역주행·회귀자의 완결)을 처음 볼 때: 카드 위로 빛이 한 번 지나간다(모션 줄이기면 app.css가 끈다) */
.ending-card--gold { position: relative; overflow: hidden; }
.ending-card--gold:is(.is-entering, .is-revealed)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--gold) 45%, transparent) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; animation: ending-shine 1.4s 0.35s ease-out both;
}
@keyframes ending-shine { from { background-position: 150% 0; } to { background-position: -60% 0; } }
/* 엔딩 화면의 토스트(단계 보상 등)는 위쪽에 띄운다. 아래쪽에 뜨면 '20화 판정' 매트릭스를 가린다(카드는 이미 읽은 뒤다) */
body:has(.screen--ending) .toasts { top: calc(env(safe-area-inset-top) + 64px); bottom: auto; }

/* 2×2 판정 매트릭스: 가로 인기(오른쪽 높음), 세로 작품성(위 높음). 판정 칸에 맥박 뛰는 점 */
.matrix { display: grid; gap: 6px; }
.matrix-axis { font-size: 0.75rem; font-weight: 700; color: var(--ink-soft); }
.matrix-axis--x { text-align: right; }
.matrix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-left: 10px; border-left: 2px solid var(--line-strong); border-bottom: 2px solid var(--line-strong); padding-bottom: 10px; }
.matrix-cell {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; min-height: 76px; padding: 10px 8px;
  border-radius: 10px; background: var(--surface-2); color: var(--ink-soft); font-size: 0.82rem; font-weight: 700; text-align: center; line-height: 1.35;
}
.matrix-cell.is-hit { --ending-color: var(--accent-strong); background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ending-color); }
.matrix-cell.ending-tone--gold { --ending-color: var(--gold-ink); }
.matrix-cell.ending-tone--violet { --ending-color: var(--meta); }
.matrix-name { text-wrap: balance; }
.matrix-here { font-size: 0.72rem; font-weight: 800; color: var(--ending-color); }
.matrix-dot {
  position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--ending-color);
  animation: dot-pulse 1.6s ease-out infinite;
}
@keyframes dot-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ending-color) 55%, transparent); }
  80%, 100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--ending-color) 0%, transparent); }
}

/* 커리어 모달(단계 상승, 작가 회귀 해금) */
.career-modal { text-align: center; }
.career-modal-kicker { font-size: 0.8rem; font-weight: 800; color: var(--gold-ink); letter-spacing: 0.02em; }
.career-modal--unlock .career-modal-kicker { color: var(--meta); }
.career-modal-title { font-size: 1.35rem; margin: 4px 0 6px; }
.stage-up-from { color: var(--ink-soft); font-weight: 700; margin-bottom: 14px; }
.stage-up-steps { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; text-align: left; }
.stage-up-step { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--gold-soft); color: var(--ink); }
.stage-up-num { display: inline-grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: #1f1d1a; font-weight: 900; }
.stage-up-text { display: flex; flex-direction: column; line-height: 1.45; }
.stage-up-text > span { font-size: 0.88rem; color: var(--ink-soft); }
/* 단계 상승 모달의 장르 해금: 장르 표지 조각 + 이름 + 한 줄 소개 */
.stage-up-genre { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface); }
.stage-up-genre-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.stage-up-genre-text b { font-size: 0.95rem; color: var(--ink); }
.stage-up-genre-text span { font-size: 0.84rem; color: var(--ink-soft); }
.career-modal-lines { margin: 8px 0 12px; padding: 14px; border-radius: 12px; background: color-mix(in srgb, var(--meta) 12%, var(--surface)); line-height: 1.7; }
.career-modal-lines p + p { margin-top: 4px; }
.career-modal-note { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 16px; }
.career-modal .dialog-actions { justify-content: center; }

.ending-actions > * { flex: 1 1 140px; white-space: nowrap; } /* 글자를 꺾지 않고, 안 들어가면 버튼째 다음 줄로 */
.share-box { display: flex; align-items: center; gap: 14px; margin: 12px 0; }
.share-box-text { min-width: 0; }
.share-box-text .section-title { margin-bottom: 4px; }
.share-thumb {
  flex: none; display: grid; place-items: center; width: 104px; aspect-ratio: 1080 / 1350; padding: 0;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); overflow: hidden; cursor: zoom-in;
}
.share-thumb:disabled { cursor: progress; }
@media (min-width: 560px) { .share-thumb { width: 136px; } }
.share-thumb-canvas { display: block; width: 100%; height: 100%; }
.share-thumb-wait { padding: 6px; font-size: 0.72rem; color: var(--ink-soft); text-align: center; }
/* 결과 카드 이미지 페이지(길게 눌러 저장). 이미지는 화면 높이에 맞춰 줄인다 */
.dialog--modal.share-page { width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; }
.share-page-img {
  display: block; width: auto; max-width: 100%; height: auto; max-height: 58dvh; margin: 4px auto 12px;
  border-radius: 12px; border: 1px solid var(--line);
  -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; /* 길게 누르기 메뉴(저장)를 막지 않는다 */
}
.nowrap { white-space: nowrap; }
.share-page-text { margin-bottom: 14px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 0.88rem; user-select: all; -webkit-user-select: all; }

/* ── 도감 ────────────────────────────────────── */
.meter { display: block; height: 8px; margin-top: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--accent-strong); }
.meter--sm { height: 6px; margin: 4px 0; }
.dogam-progress { margin: 4px 0 8px; }
.dogam-group { margin: 18px 0 8px; }
.dogam-count { font-weight: 600; font-size: 0.85rem; }
.dogam-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dogam-cell {
  --ending-color: var(--accent-strong);
  display: flex; flex-direction: column; gap: 6px; min-height: 108px; padding: 14px 12px 12px; border-radius: 12px;
  background: linear-gradient(var(--ending-color), var(--ending-color)) top / 100% 4px no-repeat, var(--surface); border: 1px solid var(--line);
}
.dogam-cell.ending-tone--gold { --ending-color: var(--gold-ink); }
.dogam-cell.ending-tone--gray { --ending-color: var(--ink-soft); }
.dogam-cell.ending-tone--violet { --ending-color: var(--meta); }
.dogam-cell.is-locked { background: var(--surface-2); border-style: dashed; border-color: var(--line-strong); justify-content: center; text-align: center; }
.dogam-name { font-size: 0.98rem; font-weight: 800; line-height: 1.35; color: var(--ending-color); }
.dogam-cell.is-locked .dogam-name { color: var(--ink-soft); font-size: 1.2rem; letter-spacing: 0.1em; }
.dogam-hint { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.45; }
.dogam-line { font-size: 0.8rem; line-height: 1.45; color: var(--ink); }
.dogam-meta { display: grid; gap: 1px; margin: 0; font-size: 0.78rem; }
.dogam-meta > div { display: flex; justify-content: space-between; gap: 6px; }
.dogam-meta dt { color: var(--ink-soft); flex-shrink: 0; }
.dogam-meta dd { margin: 0; font-weight: 700; text-align: right; min-width: 0; overflow-wrap: normal; } /* 숫자(7,303) 가운데서 줄이 갈리지 않게 */

/* ── 커리어 ──────────────────────────────────── */
.career-hero { padding: 18px; background: linear-gradient(150deg, var(--accent-soft), var(--surface) 65%); }
.career-hero--star { background: linear-gradient(150deg, var(--gold-soft), var(--surface) 65%); border: 2px solid var(--gold); }
.career-hero-kicker { font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }
.career-hero-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 12px; font-size: 1.45rem; font-weight: 900; line-height: 1.3; }
.career-next { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; line-height: 1.5; }
.career-next-label { font-size: 0.75rem; font-weight: 800; color: var(--accent-strong); }
.career-next-reward { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.ladder { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.ladder-step { position: relative; display: flex; gap: 12px; padding: 10px 0; }
.ladder-step + .ladder-step { border-top: 1px dashed var(--line); }
.ladder-num {
  display: inline-grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-soft); border: 1.5px solid var(--line-strong); font-weight: 800; font-size: 0.9rem;
}
.ladder-step.is-done .ladder-num { background: var(--good-soft); color: var(--good); border-color: var(--good); }
.ladder-step.is-current .ladder-num { background: var(--accent-strong); color: var(--accent-ink); border-color: var(--accent-strong); }
.ladder-step.is-next .ladder-num { border-color: var(--accent-strong); color: var(--accent-strong); }
.ladder-step.is-locked { opacity: 0.75; }
.ladder-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.45; }
.ladder-text strong { display: flex; align-items: center; gap: 6px; }
.ladder-now { padding: 0 7px; border-radius: 999px; background: var(--accent-strong); color: var(--accent-ink); font-size: 0.7rem; font-weight: 800; }
.ladder-reward { font-size: 0.85rem; color: var(--ink-soft); }
.ladder-goal { font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.ladder-progress { display: grid; font-size: 0.78rem; color: var(--ink-soft); max-width: 260px; }
.achievement-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.achievement { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 12px 2px 6px; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); font-size: 0.85rem; font-weight: 700; border: 1px solid var(--line); }
.achievement-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed var(--line-strong); font-size: 0.75rem; }
.achievement.is-got { background: var(--good-soft); color: var(--good); border-color: transparent; }
.achievement.is-got .achievement-mark { border: 0; background: var(--good); color: var(--good-soft); }
.achievement-wait { padding: 0 6px; border-radius: 6px; background: var(--warn-soft); color: var(--warn-ink); font-size: 0.7rem; }
.career-stats { grid-template-columns: 1fr 1fr; }
@media (min-width: 560px) { .career-stats { grid-template-columns: repeat(4, 1fr); } }
.career-carry { margin-top: 10px; font-size: 0.9rem; color: var(--ink-soft); }

/* ── 서재 ────────────────────────────────────── */
.library-list { list-style: none; margin: 12px 0; }
.library-list > li + li { border-top: 1px solid var(--line); }
.library-item { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 16px; text-decoration: none; }
a.library-item:hover { background: var(--surface-2); }
.library-main { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.4; }
.library-title { font-weight: 800; }
.library-chip { min-height: 22px; margin-left: 6px; padding: 0 8px; font-size: 0.72rem; vertical-align: 0.1em; }
.library-meta { font-size: 0.8rem; color: var(--ink-soft); }
.library-go { flex-shrink: 0; font-size: 0.85rem; font-weight: 700; color: var(--accent-strong); }
.library-go.muted { color: var(--ink-soft); font-weight: 600; }
.screen--library-read .section-head { margin-top: 18px; }
.screen--library-read .section-head .page-title { margin: 0; }

/* ── 전체 읽기 ───────────────────────────────── */
.screen--read .section-head { margin-top: 18px; }
.screen--read .section-head .page-title { margin: 0; }
.read-ep { margin: 22px 0; }
.read-title { font-size: 1.05rem; font-weight: 800; margin-bottom: 6px; }
.read-body { line-height: 1.95; font-size: 1.04rem; }
.read-notice { padding: 8px; border-radius: 8px; background: var(--surface-2); color: var(--ink-soft); text-align: center; font-size: 0.88rem; }

/* ── 새 작품 ─────────────────────────────────── */
.form-section .section-title { margin-bottom: 10px; }
.genre-grid { display: grid; gap: 10px; }
@media (min-width: 560px) { .genre-grid { grid-template-columns: repeat(3, 1fr); } .cast-list { grid-template-columns: repeat(3, 1fr); } }
/* 장르 카드: 왼쪽은 작은 표지 조각(장르 그라디언트 + 장르 아이콘), 오른쪽은 이름·배지·소개 */
.genre-card {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 3px;
  align-content: start; min-height: 76px; padding: 14px 16px;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer;
}
.genre-card > .genre-swatch { grid-row: 1 / span 3; }
.genre-card > :not(.genre-swatch) { grid-column: 2; }
.genre-card > .badge--new { justify-self: start; }
.genre-card:has(input:checked) { border-color: var(--accent-strong); background: var(--accent-soft); }
.genre-card:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.genre-card.is-locked { cursor: not-allowed; background: var(--surface-2); }
.genre-card.is-locked .genre-swatch { filter: grayscale(1); opacity: 0.5; }
.genre-card.is-locked .genre-name { color: var(--ink-soft); }
.genre-swatch {
  display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 40px; border-radius: 6px; color: #fff;
  background: var(--cover-regression); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
}
.genre-swatch--academy { background: var(--cover-academy); }
.genre-swatch--rofan { background: var(--cover-rofan); }
.genre-name { font-weight: 800; }
.genre-name .lock { font-weight: 600; font-size: 0.85rem; }
.genre-hint { font-size: 0.84rem; color: var(--ink-soft); line-height: 1.45; }
.input {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--line-strong); border-radius: 12px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem;
}
/* 작품 제목: 길어도 다 보이게 줄바꿈하는 글상자(높이는 글에 맞춰 늘어난다) */
.input--title { display: block; resize: none; overflow: hidden; line-height: 1.45; font-weight: 700; }
.title-field { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.title-field-main { display: grid; gap: 8px; justify-items: start; }
.input:focus { outline: none; border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-soft); }
.input[aria-invalid="true"] { border-color: var(--bad); }
.cast-list { display: grid; gap: 4px 10px; }
.field { margin: 8px 0; }
.field-label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 4px; }
.field-note { font-size: 0.8rem; color: var(--ink-soft); margin-top: 4px; }
.field-note.is-error, .field-error { color: var(--bad); }
.field-error { font-size: 0.8rem; margin-top: 4px; }
.field-error:empty { display: none; }

/* ── 설정 ────────────────────────────────────── */
fieldset.card { min-width: 0; }
.setting legend { float: left; width: 100%; padding: 0; }
.segmented { clear: both; display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); }
.segment { flex: 1; }
.segment span { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: var(--tap); padding: 0 4px; border-radius: 9px; font-weight: 600; color: var(--ink-soft); cursor: pointer; text-align: center; }
/* 고른 칸: 색 말고도 테두리와 ✓ 글자로 알린다(라이트·다크 둘 다 잘 보이게) */
.segment input:checked + span { background: var(--surface); color: var(--ink); font-weight: 800; box-shadow: inset 0 0 0 2px var(--accent-strong); }
.segment input:checked + span::before { content: "✓"; color: var(--accent-strong); }
.segment input:focus-visible + span { outline: 3px solid var(--accent-strong); outline-offset: 1px; }
.font-preview { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); line-height: 1.8; }
.setting--row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.setting-label { display: flex; flex-direction: column; cursor: pointer; }
.setting-label span { font-size: 0.85rem; }
/* 스위치: 누르는 칸은 56×44(탭 타깃), 보이는 막대는 52×32 */
.switch-input { appearance: none; position: relative; flex-shrink: 0; width: 56px; height: var(--tap); margin: 0; background: transparent; cursor: pointer; }
.switch-input::before { content: ""; position: absolute; top: 6px; left: 2px; width: 52px; height: 32px; box-sizing: border-box; border-radius: 999px; background: var(--surface-2); border: 1.5px solid var(--line-strong); transition: background 0.15s ease; }
.switch-input::after { content: ""; position: absolute; top: 10px; left: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--line-strong); transition: transform 0.15s ease, background 0.15s ease; }
.switch-input:checked::before { background: var(--accent-strong); border-color: var(--accent-strong); }
.switch-input:checked::after { background: #fff; transform: translateX(20px); }
.switch-input:focus-visible { outline: none; }
.switch-input:focus-visible::before { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
.empty-card { display: grid; gap: 12px; justify-items: start; }
.input--code { display: block; margin-top: 10px; resize: vertical; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.8rem; line-height: 1.5; word-break: break-all; }
.setting-sub { margin-top: 16px; }
.setting--danger { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.reset-row { display: flex; gap: 8px; margin-top: 10px; }
.reset-row .input { flex: 1; min-width: 0; }
.reset-row .btn { flex-shrink: 0; min-height: 48px; }