/* 연재 아카이브 — 길게 읽기 위한 조판 + 분명한 조작 단서
   외부 폰트 없음(프라이버시) → OS 기본 폰트로 한/영/중/일 커버 */

:root{
  --bg:#fff; --fg:#1a1d21; --muted:#5f666d; --line:#e1e4e8;
  --accent:#17458a; --accent-soft:#eff4fb; --on-accent:#fff;
  --card:#f6f7f9; --warn:#a3341f;
  --w:720px; --read:640px; --r:10px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#13161a; --fg:#e6e9ec; --muted:#a3aab2; --line:#333a42;
    --accent:#90b9f3; --accent-soft:#1a2430; --on-accent:#13161a;
    --card:#1a1e23; --warn:#e8937c;
  }
}
:root[data-theme="dark"]{
  --bg:#13161a; --fg:#e6e9ec; --muted:#a3aab2; --line:#333a42;
  --accent:#90b9f3; --accent-soft:#1a2430; --on-accent:#13161a;
  --card:#1a1e23; --warn:#e8937c;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,
    "Noto Sans","Malgun Gothic","Microsoft YaHei","PingFang SC",
    "Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif;
  font-size:16px; line-height:1.7;
}
main{max-width:var(--w); margin:0 auto; padding:0 20px 80px}
a{color:var(--accent); text-underline-offset:3px}
h1{font-size:1.9rem; line-height:1.3; margin:.9em 0 .4em; letter-spacing:-.015em}
p{margin:0 0 1.15em}

/* ── 헤더 ── */
.top{border-bottom:1px solid var(--line); display:flex;
  justify-content:space-between; align-items:center; gap:12px;
  max-width:var(--w); margin-inline:auto; padding:14px 20px}
.brand{font-weight:700; text-decoration:none; color:var(--fg);
  font-size:1.05rem; white-space:nowrap}
.langs{display:flex; gap:4px; font-size:.86rem}
.langs a,.langs .cur{padding:5px 12px; border-radius:999px;
  text-decoration:none; line-height:1.4}
.langs a{color:var(--muted); border:1px solid var(--line)}
.langs a:hover{color:var(--fg); border-color:var(--muted); background:var(--card)}
.langs .cur{color:var(--on-accent); background:var(--accent);
  border:1px solid var(--accent); font-weight:600}

/* ── 홈 소개 ── */
.intro{padding:34px 0 10px}
.intro h1{margin:0 0 .4em}
.intro p:first-of-type{font-size:1.15rem; line-height:1.7}
.intro p{color:var(--fg)}

/* ── 화 목록 ── */
.eplist{list-style:none; padding:8px 0 0; margin:30px 0 0;
  border-top:1px solid var(--line)}
.eplist li{border-bottom:1px solid var(--line)}
.eplist a{display:grid; gap:2px 14px; padding:20px 4px;
  grid-template-columns:auto 1fr auto; align-items:baseline;
  text-decoration:none; color:inherit}
.eplist a:hover{background:var(--card)}
.eplist .ep{grid-row:1; font-size:.8rem; font-weight:700; color:var(--accent);
  letter-spacing:.04em; white-space:nowrap}
.eplist .t{grid-row:1; font-size:1.12rem; font-weight:650; line-height:1.4}
.eplist .d{grid-row:1; font-size:.84rem; color:var(--muted);
  white-space:nowrap; font-variant-numeric:tabular-nums}
.eplist .x{grid-row:2; grid-column:2/4; color:var(--muted);
  font-size:.92rem; line-height:1.6; margin-top:2px}
.eplist a:hover .t{color:var(--accent)}
.allrec{margin-top:28px}

.btn{display:inline-block; padding:10px 18px; border-radius:8px;
  border:1px solid var(--accent); color:var(--accent); background:var(--bg);
  text-decoration:none; font-size:.92rem; font-weight:600}
.btn:hover{background:var(--accent); color:var(--on-accent)}

/* ══════════ 읽는 화면 (한 화) ══════════ */
body.reading main{max-width:var(--read)}
body.reading{font-size:17.5px; line-height:1.85}

.ephead{padding:44px 0 8px; border-bottom:1px solid var(--line); margin-bottom:8px}
.epno{margin:0 0 10px; font-size:.82rem; font-weight:700; letter-spacing:.08em;
  color:var(--accent)}
.ephead h1{margin:0 0 12px; font-size:2rem; line-height:1.28}
.epdate{margin:0 0 26px; font-size:.88rem; color:var(--muted);
  font-variant-numeric:tabular-nums}

.epbody{padding-top:28px}
.epbody p{margin:0 0 1.5em}
.epbody h2{font-size:1.35rem; margin:2.4em 0 .6em; line-height:1.4}
.epbody h3{font-size:1.15rem; margin:2.2em 0 .5em}
.epbody ul{margin:0 0 1.5em; padding-left:1.3em}
.epbody li{margin-bottom:.5em}
.epbody blockquote{margin:2em 0; padding:0 0 0 1.6em; color:var(--muted);
  font-style:italic; position:relative}
.epbody blockquote::before{content:"C"; position:absolute; left:0; top:-.1em;
  font-size:2.2em; line-height:1; color:var(--line); font-style:normal}
.epbody blockquote p{margin:0}
.sep{border:0; border-top:1px solid var(--line); margin:2.6em auto; width:70px}

/* 영상 — 글 사이에서 숨 쉴 공간을 준다 */
.vid{margin:2.6em 0; padding:0}
.player{position:relative; aspect-ratio:16/9; background:#0d1013;
  border-radius:10px; cursor:pointer; display:grid; place-items:center;
  overflow:hidden; border:1px solid var(--line); padding:24px}
.player iframe{position:absolute; inset:0}
.player:hover{border-color:var(--accent)}
.player:hover .play span{background:var(--accent); color:var(--on-accent)}
.player iframe{width:100%; height:100%; border:0; display:block}
.play{text-align:center; color:#c8ccd2}
.play span{display:grid; place-items:center; width:62px; height:62px;
  margin:0 auto; border-radius:50%; background:rgba(255,255,255,.15);
  font-size:1.35rem; line-height:1; padding-left:4px}
.play small{display:block; margin-top:12px; font-size:.8rem}

/* 화 끝 영수증 */
.receipt{margin:3em 0 0; padding:18px 20px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r)}
.r-label{margin:0 0 6px; font-size:.76rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); font-weight:700}
.r-nums{margin:0; font-size:1.02rem; font-variant-numeric:tabular-nums;
  display:flex; flex-wrap:wrap; gap:10px; align-items:baseline}
.r-nums i{font-style:normal; color:var(--muted); font-size:.84em}
.r-arrow{color:var(--muted)}
.rate{color:var(--warn); font-weight:700}
.r-note{margin:8px 0 0; font-size:.86rem; color:var(--muted)}

/* 이전 / 다음 화 */
.epnav{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:44px;
  padding-top:24px; border-top:1px solid var(--line)}
.epnav a{display:block; padding:16px 18px; border:1px solid var(--line);
  border-radius:var(--r); text-decoration:none; color:inherit; background:var(--bg)}
.epnav a:hover{border-color:var(--accent); background:var(--card)}
.epnav span{display:block; font-size:.78rem; color:var(--muted);
  margin-bottom:4px; font-weight:600}
.epnav b{font-size:.98rem; font-weight:650; line-height:1.45}
.nav-next{text-align:right}

/* ── 전체 기록 표 ── */
.summary{margin:22px 0 10px; padding:18px 20px; background:var(--accent-soft);
  border:1px solid var(--line); border-radius:var(--r)}
.summary p{margin:0 0 .4em; font-size:1rem}
.summary p:last-child{margin-bottom:0}
.summary b{font-weight:700; font-variant-numeric:tabular-nums}
.summary i{font-style:normal; color:var(--muted); font-size:.86em}
.tablewrap{overflow-x:auto; margin:24px 0}
table.records{width:100%; border-collapse:collapse; font-size:.9rem;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
table.records th{text-align:left; font-size:.75rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); font-weight:700;
  padding:12px 14px; border-bottom:1px solid var(--line); white-space:nowrap}
table.records td{padding:12px 14px; border-bottom:1px solid var(--line);
  white-space:nowrap}
table.records tr:last-child td{border-bottom:0}
table.records .num{text-align:right; font-variant-numeric:tabular-nums}
table.records tbody tr:hover{background:var(--card)}

/* ── 기타 ── */
.empty{margin:34px 0; padding:48px 24px; text-align:center;
  border:2px dashed var(--line); border-radius:var(--r); color:var(--muted)}
.empty b{display:block; color:var(--fg); font-size:1.1rem; margin-bottom:8px}
.mirrorlist{padding-left:1.1em}
.mirrorlist code{font-size:.86rem; word-break:break-all}

.foot{max-width:var(--w); margin:0 auto; padding:26px 20px 60px;
  border-top:1px solid var(--line); color:var(--muted); font-size:.88rem}
.foot a{color:var(--muted)}
.foot i{font-style:normal; margin:0 8px; opacity:.5}
.foot .small{font-size:.82rem; margin-bottom:0}

/* CJK 는 글자폭이 넓어 줄길이를 좁힌다 */
html[lang="ko"] main,html[lang="zh"] main,html[lang="ja"] main{--w:680px; --read:600px}

@media (max-width:560px){
  h1{font-size:1.6rem}
  .ephead h1{font-size:1.65rem}
  body.reading{font-size:17px}
  .top{flex-direction:column; align-items:flex-start; gap:10px}
  .eplist a{grid-template-columns:auto 1fr; padding:18px 2px}
  .eplist .d{grid-row:3; grid-column:2; margin-top:4px}
  .eplist .x{grid-column:1/3}
  .epnav{grid-template-columns:1fr}
  .nav-next{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}