/* ───── 글 페이지 전용 ─────
   tokens.css 위에 얹습니다. 랜딩(index.html)의 인라인 <style> 과는 겹치지 않습니다 —
   랜딩은 전환용 레이아웃이고 이쪽은 읽기용이라 필요한 게 다릅니다.

   여기서 .btn-sage·헤더를 다시 정의하는 이유: 랜딩의 그 규칙들이 index.html 안에
   인라인으로 들어 있어 글 페이지에서 불러올 수 없습니다. 모양이 달라지면
   docs/디자인시스템.md §4.1 을 기준으로 이 파일을 맞춥니다.

   모서리는 브랜드 규칙상 각(--r:0px)입니다 — border-radius 를 넣지 마세요. */

/* ───── 머리 ───── */
.doc-head{
  position:sticky; top:0; z-index:40;
  background:var(--glass-solid); backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.doc-head > div{
  max-width:1040px; margin-inline:auto; padding:14px 24px;
  display:flex; align-items:center; gap:16px;
}
.doc-head .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.doc-head .wordmark{font-weight:500; letter-spacing:.22em; font-size:16px}
.doc-head nav{margin-left:auto; display:flex; align-items:center; gap:18px}
.doc-head nav a{color:var(--mute); text-decoration:none; font-size:14.5px; font-weight:600}
.doc-head nav a:hover{color:var(--sage)}

/* 랜딩의 버튼과 같은 모양 (디자인시스템 §4.1) */
.btn-sage{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--sage); color:#fff; text-decoration:none;
  font-weight:700; font-size:15px; padding:11px 20px; border:0;
}
.btn-sage:hover{background:var(--sage-deep)}

/* ───── 읽기 폭 ─────
   한글은 글자 하나가 영문보다 넓고 띄어쓰기가 적어 한 줄이 길면 눈이 돌아올 자리를
   놓칩니다. 680px 에서 한 줄이 대략 33~37자가 되는데, 이게 한글 본문이 편한 길이입니다.
   늘리지 마세요. */
.doc{max-width:680px; margin-inline:auto; padding:0 24px}
.doc-wide{max-width:1040px; margin-inline:auto; padding:0 24px}

/* ───── 글 제목부 ───── */
.doc-top{padding:56px 0 0}
.doc-top .eyebrow{
  margin:0 0 14px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  font-size:12px; color:var(--sage);
}
.doc-top h1{
  margin:0; color:var(--ink); font-family:var(--font-display); font-weight:400;
  font-size:clamp(28px,4.6vw,44px); line-height:1.34; letter-spacing:-.01em;
  text-wrap:balance;
}
.doc-meta{
  margin:20px 0 0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:6px 14px;
  font-size:13px; color:var(--mute);
}

/* ───── 맨 위 요약 ─────
   AI 답변이 가장 자주 집어가는 자리입니다. 2~3문장에서 끝내고,
   이 상자만 읽어도 질문에 답이 되게 씁니다. */
.doc-answer{
  margin:34px 0 0; padding:clamp(22px,3.4vw,30px);
  background:var(--sage-pale); border-left:3px solid var(--sage);
}
.doc-answer p{margin:0; font-size:17.5px; line-height:1.85; color:var(--ink); font-weight:600; text-wrap:pretty}
.doc-answer p + p{margin-top:18px; font-weight:500; color:var(--body)}

/* ───── 본문 ─────
   한글 가독성은 글자 크기보다 「줄 사이」와 「문단 사이」가 좌우합니다.
   행간 1.9, 문단 간격 26px 은 한 문단이 서너 줄일 때를 기준으로 맞춘 값입니다.
   문단이 그보다 길어지면 조판이 아니라 글을 나눠야 합니다. */
.doc-body{padding:12px 0 80px; font-size:17px; line-height:1.9}
.doc-body > h2{
  margin:56px 0 0; color:var(--ink);
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(22px,3.1vw,30px); line-height:1.4; letter-spacing:-.01em;
  text-wrap:balance; scroll-margin-top:84px;
}
/* 소제목 바로 아래 문단이 그 질문의 답입니다 — 떨어뜨려 놓지 않습니다. */
.doc-body > h2 + p{margin-top:16px}
.doc-body > h3{
  margin:38px 0 0; color:var(--ink);
  font-size:19px; font-weight:700; letter-spacing:-.02em; line-height:1.5;
}
/* text-wrap:pretty — 문단 마지막 줄에 한 단어만 떨어지는 걸 막습니다.
   tokens.css 의 word-break:keep-all 과 같이 쓰여 한글이 단어 중간에서 끊기지 않습니다. */
.doc-body p{margin:26px 0 0; color:var(--body); text-wrap:pretty}
.doc-body strong{color:var(--ink); font-weight:700}
.doc-body a{color:var(--rx-green-deep); text-underline-offset:3px}
.doc-body ul,.doc-body ol{margin:26px 0 0; padding-left:22px; color:var(--body)}
/* 목록은 문단보다 촘촘하지만, 항목이 두 줄을 넘길 수 있으니 사이를 벌려 둡니다. */
.doc-body li{margin:14px 0 0; text-wrap:pretty}
.doc-body li::marker{color:var(--sage)}
.doc-body hr{margin:52px 0 0; border:0; border-top:1px solid var(--line)}
.doc-body figure{margin:30px 0 0}
.doc-body figure img{width:100%; height:auto}
.doc-body figcaption{margin-top:10px; font-size:13.5px; color:var(--mute); max-width:60ch}
.doc-body blockquote{
  margin:30px 0 0; padding:4px 0 4px 20px; border-left:2px solid var(--sage-soft);
  color:var(--mute);
}
.doc-body blockquote p{margin:0; max-width:34ch; font-size:18px}

/* ───── 문장마다 줄바꿈 ─────
   한글 글은 문장이 끝나는 자리에서 줄을 바꿔 주는 쪽이 눈에 편합니다.
   <br> 를 쓰지 않고 문장을 <span class="s"> 로 감싸 블록으로 세웁니다.

   왜 <br> 가 아닌가: 문단은 <p> 하나로 남아 있어야 합니다. 크롤러와 AI 는
   <p> 를 한 덩어리로 읽어 가는데, <br> 로 끊어도 그건 유지되지만 줄 사이를
   조절할 수가 없습니다. span 이면 문장 사이 간격(5px)과 문단 사이 간격(26px)을
   따로 줄 수 있어서, 한 문장이 두 줄로 넘어가도 문장 경계가 보입니다.

   .s 를 안 쓰고 그냥 쓴 문단도 그대로 동작합니다 — 규칙이 안 걸릴 뿐입니다. */
.doc-answer p .s,
.doc-body > p .s,
.doc-seen p .s{display:block}
.doc-answer p .s + .s,
.doc-body > p .s + .s,
.doc-seen p .s + .s{margin-top:5px}

/* ───── 코치가 실제로 본 것 ─────
   1차 정보 자리입니다. 일반론은 인용되지 않습니다 — 여기에 수업에서 본 것을 씁니다. */
.doc-seen{
  margin:44px 0 0; padding:clamp(22px,3.4vw,30px);
  background:var(--rx-green-pale); border:1px solid var(--rx-line);
}
.doc-seen > .label{
  margin:0 0 12px; font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--rx-green-deep);
}
.doc-seen p{margin:20px 0 0; color:var(--body); text-wrap:pretty}
.doc-seen p:first-of-type{margin-top:0}

/* ───── 참고 문헌 ─────
   본문에서 「(저자, 연도)」로 부르고 여기서 받습니다.
   AI 가 이 글을 인용할지 판단할 때 근거의 유무와 출처의 구체성을 봅니다.
   링크는 PubMed 처럼 사라지지 않는 주소로 겁니다 — 블로그 글로 걸면 몇 년 뒤 깨집니다. */
.doc-refs{margin:52px 0 0; padding-top:24px; border-top:1px solid var(--line)}
.doc-refs > .label{
  margin:0 0 14px; font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sage);
}
.doc-refs ol{margin:0; padding-left:20px}
.doc-refs li{
  margin:10px 0 0; font-size:14px; line-height:1.7; color:var(--mute);
  text-wrap:pretty;
}
.doc-refs li:first-child{margin-top:0}
.doc-refs a{color:var(--rx-green-deep)}
.doc-refs .note{margin:16px 0 0; font-size:13.5px; line-height:1.7; color:var(--mute)}

/* ───── 작성자 ─────
   AI 가 이 글을 인용할지 판단할 때 "누가 썼는지 알 수 있나"를 봅니다.
   운동·건강 주제는 특히 그렇습니다. 비우지 마세요. */
.doc-author{
  margin:56px 0 0; padding-top:26px; border-top:1px solid var(--line);
  display:flex; gap:16px; align-items:flex-start;
}
.doc-author img{width:56px; height:56px; object-fit:cover; flex:0 0 auto}
.doc-author .who{margin:0; font-size:15.5px; font-weight:700; color:var(--ink)}
.doc-author .what{margin:6px 0 0; font-size:14px; line-height:1.7; color:var(--mute); max-width:56ch}

/* ───── 글 끝 전환 ─────
   하나만 둡니다. 읽는 흐름을 여러 번 끊으면 둘 다 잃습니다. */
.doc-cta{
  margin:48px 0 0; padding:clamp(26px,4vw,40px);
  border:1px solid var(--line); background:var(--canvas);
}
.doc-cta h2{
  margin:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(21px,2.9vw,28px); line-height:1.4; color:var(--ink); letter-spacing:-.01em;
}
.doc-cta p{margin:12px 0 0; font-size:16px; line-height:1.75; color:var(--body); max-width:52ch}
.doc-cta .btn-sage{margin-top:20px; font-size:16px; padding:13px 24px}

/* ───── 이어 읽기 ───── */
.doc-next{margin:48px 0 0; padding-top:26px; border-top:1px solid var(--line)}
.doc-next > .label{
  margin:0 0 16px; font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sage);
}

/* ───── 목록 페이지 ───── */
.list-top{padding:64px 0 0}
.list-top h1{
  margin:0; color:var(--ink); font-family:var(--font-display); font-weight:400;
  font-size:clamp(30px,5vw,50px); line-height:1.32; letter-spacing:-.01em;
}
.list-top .lead{
  margin:18px 0 0; font-size:17px; line-height:1.75; color:var(--body); max-width:56ch;
}

/* 묶음 꼬리표 — 경로가 아니라 보여주기용입니다. docs/글-발행-규칙.md 참고 */
.group-tabs{
  margin:34px 0 0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:8px;
}
/* display:flex 가 [hidden] 의 display:none 을 이깁니다 — 따로 눌러 줘야 합니다. */
.group-tabs[hidden]{display:none}
.group-tabs button{
  padding:7px 14px; border:1px solid var(--line); background:transparent;
  font-size:13.5px; font-weight:600; color:var(--mute); cursor:pointer;
}
.group-tabs button:hover{border-color:var(--sage); color:var(--sage)}
.group-tabs button[aria-pressed="true"]{background:var(--sage); border-color:var(--sage); color:#fff}

.note-list{margin:40px 0 0; padding:0 0 80px; list-style:none}
.note-list[hidden]{display:none}
.note-list > li{border-top:1px solid var(--line)}
.note-list > li:last-child{border-bottom:1px solid var(--line)}
.note-list > li[hidden]{display:none}
.note-list a{display:block; padding:28px 0; text-decoration:none}
.note-list a:hover h2{color:var(--sage)}
.note-list .group{
  margin:0; font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sage);
}
.note-list h2{
  margin:10px 0 0; color:var(--ink); font-size:clamp(19px,2.6vw,23px);
  font-weight:700; line-height:1.45; letter-spacing:-.02em; text-wrap:balance;
}
.note-list .sum{margin:10px 0 0; font-size:15.5px; line-height:1.7; color:var(--body); max-width:62ch}
.note-list time{display:block; margin:12px 0 0; font-size:13px; color:var(--mute)}

/* 글이 아직 없을 때 — 빈 목록을 그냥 두면 얇은 페이지가 됩니다. */
.list-empty{
  margin:40px 0 0; padding:clamp(26px,4vw,44px);
  border:1px solid var(--line); background:var(--canvas);
}
.list-empty p{margin:0; font-size:16px; line-height:1.75; color:var(--body); max-width:52ch}
.list-empty p + p{margin-top:12px}

/* ───── 바닥 ───── */
.doc-foot{border-top:1px solid var(--line); background:var(--canvas)}
.doc-foot > div{
  max-width:1040px; margin-inline:auto; padding:40px 24px;
  font-size:13.5px; line-height:1.8; color:var(--mute);
}
.doc-foot a{color:var(--mute)}
.doc-foot address{font-style:normal; margin:14px 0 0}

@media(max-width:560px){
  .doc-head nav a.is-hide-sm{display:none}
  .doc-top{padding-top:40px}
}

/* ───── 버튼 글자색 되돌리기 ─────
   .doc-head nav a 와 .doc-body a 가 .btn-sage 보다 구체적이라, 그대로 두면
   초록 바탕에 초록 글자가 됩니다. 규칙 순서를 바꾸지 말고 여기서 눌러 줍니다. */
.doc-head nav a.btn-sage,
.doc-body a.btn-sage{color:#fff}
.doc-head nav a.btn-sage:hover,
.doc-body a.btn-sage:hover{color:#fff; background:var(--sage-deep)}