/* 나이테 이야기 — sample/ 의 종이 느낌을 그대로 쓴다 */
:root { --ink:#3d2f22; --sub:#8a7a66; --paper:#f7f2e8; --line:#e5d9c5; --accent:#b0562f; }
* { box-sizing:border-box; }

/* 넘나드는 띠 — `/story/` ↔ `/serial/` ↔ 앱. 회장 2026-09-05
   「각 디렉토리별로 서로 넘나들 수 있어야해」.
   ⚠️ `app/serial/연재.css` 에 같은 규칙이 있다. **한쪽만 고치지 않는다.**
   ⚠️ 이 파일은 여기서 구워진다 — `app/story/글.css` 를 직접 고치면 다음 빌드에 지워진다. */
.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(--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; }
body { margin:0; background:var(--paper); color:var(--ink);
       font-family:"Noto Serif KR",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; }

.back { font-family:"Noto Sans KR",sans-serif; font-size:.85rem; margin:0 0 26px; }
.back a { color:var(--sub); text-decoration:none; }

h1 { font-size:2rem; line-height:1.4; margin:0 0 12px; font-weight:700; }
.date { font-family:"Noto Sans KR",sans-serif; color:var(--sub); font-size:.83rem;
        margin:0 0 40px; padding-bottom:26px; border-bottom:1px solid var(--line); }
.lead { color:var(--sub); font-size:1.02rem; line-height:1.9; margin:0 0 36px; }

h2.ch { font-size:1.4rem; margin:56px 0 22px; padding-top:26px;
        border-top:2px solid var(--line); font-weight:700; line-height:1.5; }
h3 { font-size:1.12rem; margin:38px 0 14px; font-weight:700; }
p { margin:0 0 1.3em; }
strong { font-weight:700; }
hr { border:0; border-top:1px solid var(--line); margin:44px 0; }
a { color:var(--accent); }

ul, ol { margin:0 0 1.3em; padding-left:1.3em; }
li { margin:0 0 .55em; }

blockquote { margin:32px 0; padding:20px 22px; background:#fffdf8;
             border:1px solid var(--line); border-left:3px solid var(--accent);
             border-radius:0 12px 12px 0; }
blockquote p { margin:0; font-size:1rem; line-height:1.9; }

.tablewrap { overflow-x:auto; margin:0 0 1.6em; }
table { border-collapse:collapse; width:100%; font-family:"Noto Sans KR",sans-serif;
        font-size:.9rem; line-height:1.65; }
th, td { border:1px solid var(--line); padding:9px 11px; text-align:left; vertical-align:top; }
th { background:#fffdf8; font-weight:600; white-space:nowrap; }

code { font-family:inherit; background:#fffdf8; border:1px solid var(--line);
       border-radius:4px; padding:1px 5px; font-size:.93em; }

.cta { margin:64px 0 0; padding:34px 26px; background:#fffdf8;
       border:1.5px solid var(--line); border-radius:18px; text-align:center; }
.cta h3 { font-size:1.25rem; margin:0 0 10px; line-height:1.5; }
.cta p { font-size:.95rem; color:var(--sub); line-height:1.75; margin:0 0 22px;
         font-family:"Noto Sans KR",sans-serif; }
.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; }
.cta small { display:block; margin-top:14px; color:var(--sub); font-size:.82rem;
             font-family:"Noto Sans KR",sans-serif; }

.tags { margin:34px 0 0; font-family:"Noto Sans KR",sans-serif; font-size:.8rem;
        color:var(--sub); line-height:2.1; }

/* 사진 — 글이 길어도 눈이 쉴 자리를 만든다 */
.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:6px 0 38px; }

.list { margin:0 0 20px; }
.item { display:grid; grid-template-columns:132px 1fr; gap:18px; align-items:center;
        text-decoration:none; color:var(--ink); padding:20px 0;
        border-bottom:1px solid var(--line); }
.item:first-child { border-top:1px solid var(--line); }
.item > img { width:132px; height:88px; object-fit:cover; border-radius:9px; display:block; }
.item b { display:block; font-size:1.14rem; line-height:1.55; margin-bottom:7px; font-weight:700; }
.item .it-t > span { display:block; font-family:"Noto Sans KR",sans-serif; font-size:.86rem;
                     color:var(--sub); line-height:1.7; }
.item i { display:block; font-family:"Noto Sans KR",sans-serif; font-size:.75rem;
          color:var(--sub); font-style:normal; margin-top:8px; }

/* 다 읽은 사람에게 갈 곳 — 없으면 그 자리에서 브라우저를 닫는다 */
.next { display:block; text-decoration:none; color:var(--ink); margin:56px 0 0;
        padding:0; border:1px solid var(--line); border-radius:16px; overflow:hidden;
        background:#fffdf8; }
.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; }

@media (max-width:520px) {
  body { font-size:17.5px; }
  h1 { font-size:1.65rem; }
  h2.ch { font-size:1.25rem; }
  /* 좁은 화면에서 132px 썸네일은 제목을 두 글자씩 끊는다 — 위아래로 쌓는다 */
  .item { grid-template-columns:1fr; gap:12px; }
  .item > img { width:100%; height:170px; }
}