/* 1952 — 연재 전용. 색은 전부 `.claude/skills/브랜드/SKILL.md` §1 값 그대로다.
   비슷한 색을 새로 만들지 않았다. 표지 팔레트(딥네이비·미색·금색)는 머리에만 쓰고
   읽는 자리는 앱과 같은 종이 팔레트로 간다 — 긴 글을 어두운 바탕에서 읽히지 않는다. */
:root {
  /* 책 (표지·머리) */
  --navy: #19222D;
  --navy-2: #26313F;
  --ivory: #F1EBDE;
  --gold: #C19A5B;
  --gold-2: #C9A86B;
  /* 앱·웹 (읽는 자리) */
  --paper: #F5EFE4;
  --paper-deep: #EFE6D4;
  --card: #FFFDF9;
  --ink: #2A2118;
  --sub: #726150;
  --line: #E6DCCB;
  --brand: #6F5334;
  --brand-ink: #52391F;
  --accent: #B0562F;
  --accent-soft: #F6E8DE;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Noto Serif KR", "Batang", serif;
  font-size: 19px; line-height: 1.95;
  -webkit-font-smoothing: antialiased; word-break: keep-all;
}
.wrap { max-width: 660px; margin: 0 auto; padding: 26px 22px 60px; }
a { color: var(--accent); }

/* ── 넘나드는 띠 — 세 곳(`/`·`/story/`·`/1952/`)이 같은 모양을 쓴다 ──
   회장 2026-09-05 「각 디렉토리별로 서로 넘나들 수 있어야해」.
   ⚠️ 이건 상품 유도(.cta)가 아니라 길 안내다 — 1~10화 무링크 원칙과 부딪히지 않는다. */
.nav {
  display: flex; align-items: center; gap: 20px;
  max-width: 660px; margin: 0 auto; padding: 14px 22px;
  font-family: "Noto Sans KR", sans-serif; font-size: .84rem;
}
.nav a { color: var(--sub); text-decoration: none; }
.nav a.brand {
  font-family: "Gowun Batang", "Noto Serif KR", serif; font-weight: 700;
  font-size: 1.02rem; color: var(--brand-ink); margin-right: auto; letter-spacing: .02em;
}
.nav a.on { color: var(--accent); font-weight: 600; }
.navline { border: 0; border-top: 1px solid var(--line); margin: 0; }
/* 표지 위에 얹힐 때는 색을 뒤집는다 */
.cover-nav .nav a { color: rgba(241,235,222,.62); }
.cover-nav .nav a.brand { color: var(--ivory); }
.cover-nav .nav a.on { color: var(--gold-2); }
.cover-nav .navline { border-top-color: rgba(241,235,222,.16); }

/* ── 표지 (목차 쪽 머리) ─────────────────────────────────
   금색은 선과 작은 글자에만. 면적이 커지면 「고급」이 아니라 「행사장」이 된다. */
.cover-nav { background: linear-gradient(180deg, var(--navy) 0%, #1d2733 100%); }
.cover {
  background: linear-gradient(180deg, #1d2733 0%, var(--navy-2) 100%);
  color: var(--ivory); padding: 62px 22px 66px; text-align: center;
}
.cover .kicker {
  font-family: "Noto Sans KR", sans-serif; font-size: .74rem; letter-spacing: .34em;
  color: var(--gold-2); margin: 0 0 26px;
}
.cover .kicker a { color: inherit; text-decoration: none; }
.cover h1 {
  font-family: "Gowun Batang", "Noto Serif KR", serif;
  font-size: 3rem; font-weight: 700; letter-spacing: .06em;
  margin: 0; line-height: 1.3; text-indent: .06em;
}
.cover .rule { width: 54px; height: 1px; background: var(--gold); margin: 30px auto; }
.cover .sub {
  font-family: "Gowun Batang", "Noto Serif KR", serif;
  font-size: 1.16rem; line-height: 1.95; margin: 0; color: var(--ivory);
}
.cover .note {
  font-family: "Noto Sans KR", sans-serif; font-size: .78rem; line-height: 1.9;
  margin: 30px 0 0; color: rgba(241,235,222,.6);
}

/* ── 작품 목록 (`/serial/`) — 작품이 하나든 열이든 여기 하나다 ── */
.work {
  display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center;
  text-decoration: none; color: var(--ink);
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.work:first-of-type { border-top: 1px solid var(--line); }
.work > img { width: 150px; height: 100px; object-fit: cover; border-radius: 10px; display: block; }
.work b { display: block; font-family: "Gowun Batang","Noto Serif KR",serif;
          font-size: 1.3rem; line-height: 1.5; font-weight: 700; }
.work i { display: block; font-style: normal; margin-top: 6px; color: var(--sub);
          font-family: "Noto Sans KR", sans-serif; font-size: .88rem; line-height: 1.7; }
.work em {
  display: block; font-style: normal; margin-top: 9px; color: var(--gold);
  font-family: "Noto Sans KR", sans-serif; font-size: .78rem; letter-spacing: .02em;
}

/* ── 목차 ─────────────────────────────────────────── */
.start {
  display: block; max-width: 340px; margin: 40px auto 8px; text-align: center;
  background: var(--accent); color: #fff; text-decoration: none;
  font-family: "Noto Sans KR", sans-serif; font-weight: 600; font-size: 1.05rem;
  padding: 16px; border-radius: 12px;
}
.count {
  text-align: center; font-family: "Noto Sans KR", sans-serif;
  font-size: .82rem; color: var(--sub); margin: 0 0 48px;
}
.part { margin: 46px 0 0; }
.part > h2 {
  font-family: "Noto Sans KR", sans-serif; font-size: .76rem; letter-spacing: .18em;
  color: var(--brand); font-weight: 600; margin: 0 0 4px;
}
.part > p {
  font-family: "Noto Sans KR", sans-serif; font-size: .82rem; color: var(--sub);
  margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.ep {
  display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: baseline;
  text-decoration: none; color: var(--ink);
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.ep > span {
  font-family: "Noto Sans KR", sans-serif; font-size: .82rem; color: var(--gold);
  font-weight: 600; letter-spacing: .02em;
}
.ep b { font-size: 1.08rem; font-weight: 700; line-height: 1.6; display: block; }
.ep i {
  font-style: normal; display: block; margin-top: 5px; color: var(--sub);
  font-family: "Noto Sans KR", sans-serif; font-size: .84rem; line-height: 1.75;
}
.ep.soon { color: var(--sub); pointer-events: none; }
.ep.soon > span { color: var(--line); }
.ep.soon b { font-weight: 400; color: var(--sub); }

/* ── 회차 쪽 ──────────────────────────────────────── */
.back { font-family: "Noto Sans KR", sans-serif; font-size: .85rem; margin: 0 0 26px; }
.back a { color: var(--sub); text-decoration: none; }
.eyebrow {
  font-family: "Noto Sans KR", sans-serif; font-size: .76rem; letter-spacing: .16em;
  color: var(--brand); margin: 0 0 10px;
}
h1.t { font-family: "Gowun Batang", "Noto Serif KR", serif;
       font-size: 2rem; line-height: 1.45; margin: 0 0 14px; font-weight: 700; }
.date {
  font-family: "Noto Sans KR", sans-serif; color: var(--sub); font-size: .83rem;
  margin: 0 0 34px; padding-bottom: 24px; border-bottom: 1px solid var(--line);
}
.hero, .post-img {
  width: 100%; height: auto; display: block; border-radius: 14px; margin: 0 0 34px;
  box-shadow: 0 14px 40px rgba(62,46,26,.16);
}
.post-img { margin: 34px 0 34px; }

/* 세 겹 — [질문] → [답] → 이야기.
   이 두 상자가 앱이 하는 일을 설명 없이 보여 준다. 앱 화면을 캡처해 앉히지 않는다. */
.q {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 24px; margin: 0 0 22px;
}
.q > span {
  display: block; font-family: "Noto Sans KR", sans-serif; font-size: .72rem;
  letter-spacing: .2em; color: var(--gold); margin: 0 0 9px;
}
.q > p {
  margin: 0; font-family: "Noto Sans KR", sans-serif; font-size: 1.02rem;
  line-height: 1.8; color: var(--brand-ink); font-weight: 600;
}
.a {
  background: var(--accent-soft); border-radius: 16px;
  padding: 24px 26px; margin: 0 0 44px;
}
.a > span {
  display: block; font-family: "Noto Sans KR", sans-serif; font-size: .72rem;
  letter-spacing: .2em; color: var(--accent); margin: 0 0 11px;
}
.a p { margin: 0 0 1em; font-size: 1.02rem; line-height: 1.95; color: var(--brand-ink); }
.a p:last-child { margin: 0; }

p { margin: 0 0 1.35em; }
blockquote {
  margin: 40px 0; padding: 0 0 0 22px; border-left: 3px solid var(--gold);
}
blockquote p {
  margin: 0; font-family: "Gowun Batang", "Noto Serif KR", serif;
  font-size: 1.2rem; line-height: 1.85; color: var(--brand-ink);
}
hr { border: 0; border-top: 1px solid var(--line); margin: 44px 0; }

.next {
  display: block; text-decoration: none; color: var(--ink); margin: 56px 0 0;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card);
}
.next img { width: 100%; height: 150px; object-fit: cover; display: block; }
.nx-l {
  display: block; padding: 16px 20px 0; font-family: "Noto Sans KR", sans-serif;
  font-size: .76rem; letter-spacing: .08em; color: var(--sub);
}
.nx-t { display: block; padding: 6px 20px 18px; font-size: 1.08rem; line-height: 1.55; font-weight: 700; }

/* 11화부터만 나온다 — 1~10화는 링크가 없다 (이관 규격 제1원칙) */
.cta {
  margin: 60px 0 0; padding: 32px 26px; background: var(--card);
  border: 1.5px solid var(--line); border-radius: 18px; text-align: center;
}
.cta h3 { font-family: "Gowun Batang","Noto Serif KR",serif; font-size: 1.22rem; margin: 0 0 10px; line-height: 1.55; }
.cta p { font-family: "Noto Sans KR", sans-serif; font-size: .94rem; color: var(--sub); line-height: 1.75; margin: 0 0 22px; }
.cta a {
  display: block; background: var(--accent); color: #fff; text-decoration: none;
  font-family: "Noto Sans KR", sans-serif; font-weight: 600; font-size: 1.05rem;
  padding: 15px; border-radius: 12px;
}
.foot {
  margin: 54px 0 0; padding-top: 24px; border-top: 1px solid var(--line);
  font-family: "Noto Sans KR", sans-serif; font-size: .78rem; color: var(--sub); line-height: 1.9;
}

/* 🔴 모바일이 기본이다 (회장 2026-09-05 「모바일 최적화는 기본옵션이야」).
   독자는 거의 다 폰으로 읽는다. 좁은 화면에서 옆칸 배치는 글자를 두 글자씩 끊는다 —
   150px 썸네일 옆에 남는 폭이 161px밖에 안 됐다 [실측 375px]. 그래서 위아래로 쌓는다. */
@media (max-width: 520px) {
  body { font-size: 17.5px; }
  .wrap { padding: 22px 18px 52px; }
  .cover { padding: 52px 20px 46px; }
  .cover h1 { font-size: 2.3rem; }
  .cover .sub { font-size: 1.02rem; }
  .cover .note { font-size: .74rem; }
  h1.t { font-size: 1.62rem; }
  .ep { grid-template-columns: 40px 1fr; gap: 11px; }
  .work { grid-template-columns: 1fr; gap: 13px; }
  .work > img { width: 100%; height: 176px; }
  .work b { font-size: 1.22rem; }
  .q, .a { padding: 19px 18px; }
  .q > p, .a p { font-size: .98rem; }
  blockquote { margin: 34px 0; padding-left: 16px; }
  blockquote p { font-size: 1.1rem; }
  /* 누르는 자리는 44px 이상 — 앱이 지키는 기준을 연재도 지킨다.
     글자만 놓으면 21px라 어르신 손가락에 안 걸린다 [실측]. */
  .nav { gap: 15px; padding: 2px 18px; }
  .nav a { display: inline-block; padding: 12px 0; }
  .back a, .foot a { display: inline-block; padding: 11px 0; }
}