/* ── pages / history-original — 코성형의 역사 원문 14편 ────────────
   국문(kowonps.com/about/doctor/history/original-N)과 같은 구성이다.
     목록으로 돌아가기 → 머리(카테고리·제목·필자·날짜) → 본문 →
     참고 문헌 → 이전·다음 원문 → 목록으로 → 상담 CTA.
   사진이 하나도 없는 순수 글이라 히어로를 쓰지 않는다(국문도 같다).
   대신 헤더가 solid 라, 첫 섹션이 고정 헤더 높이만큼 비켜 앉아야 한다.
   본문은 subpage.css 의 .prose 가, 버튼·CTA 는 layout.css 의
   .btn / .cta-band 가 그대로 잡는다. 이 파일은 그 프리미티브에 없는
   네 가지 — 머리·참고문헌·이전다음·목록으로 — 만 짠다. */

/* ── 머리 ──────────────────────────────────────────────────── */

/* .site-header 는 position:absolute 라 첫 섹션을 밀어내지 못한다.
   --sp-section 위에 헤더 높이를 얹어 제목이 로고 밑으로 들어가지 않게 한다. */
.histo-head{
  padding-top:calc(var(--header-h) + var(--sp-block));
  padding-bottom:var(--sp-block);
  border-bottom:1px solid var(--line-soft);
}

/* 본문과 같은 900 폭 안에 머리도 가둬야 제목 왼쪽 끝과 본문 왼쪽 끝이 맞는다. */
.histo-head > .container,
.histo-body > .container{max-width:calc(900px + var(--gutter) * 2)}

.histo-back__link{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;                     /* 터치 표적 */
  font-size:var(--fs-14);line-height:1.4;color:var(--text-tertiary);
}
.histo-back__link:hover{color:var(--brand)}

/* eyebrow 기본은 대문자 자간 넓힘. 여기서는 국문처럼 분류 한 줄이라
   대문자 변형만 걷어내고 크기는 그대로 둔다. */
.histo-kicker{margin-top:var(--sp-tight);text-transform:none}

.histo-title{
  margin-top:var(--sp-tight);
  font-weight:700;font-size:var(--fs-40);line-height:1.3;
  letter-spacing:var(--ls-tight);color:var(--text-primary);
  word-break:keep-all;overflow-wrap:anywhere;
}

/* 필자 + 날짜. 좁은 폭에서 줄이 접히므로 gap 을 축·행으로 나눠 준다. */
.histo-meta{
  display:flex;flex-wrap:wrap;column-gap:16px;row-gap:6px;
  margin-top:var(--sp-stack);
  font-size:var(--fs-14);line-height:1.4;color:var(--text-tertiary);
}

/* ── 본문 ──────────────────────────────────────────────────── */

/* .prose 의 h3 는 margin-top --sp-stack 이다. 이 글은 소제목이
   장 구분이라 한 단 더 띄워 앞 문단과 붙지 않게 한다. */
.histo-prose h3{margin-top:var(--sp-block)}
.histo-prose h3:first-child{margin-top:0}

/* ── 참고 문헌 ─────────────────────────────────────────────── */

/* 국문은 <hr> 한 줄 아래 기울임으로 싣는다. 본문(18/1.8)보다 한 단 작게
   잡고 판을 깔아, 읽다가 본문으로 오해하지 않게 뗀다. */
.histo-refs{
  max-width:900px;margin:var(--sp-block) auto 0;
  padding:24px 28px;
  background:var(--surface-muted);border-radius:var(--radius-card);
}
.histo-refs__label{
  font-weight:700;font-size:var(--fs-14);line-height:1.4;
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-secondary);
}
.histo-refs__list{
  margin-top:var(--sp-tight);
  display:flex;flex-direction:column;gap:10px;
}
.histo-refs__list li{
  position:relative;padding-left:18px;
  font-size:var(--fs-14);line-height:1.7;color:var(--text-tertiary);
  overflow-wrap:break-word;
}
.histo-refs__list li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:4px;height:4px;border-radius:50%;background:var(--line-mid);
}
/* 마지막 고지는 문헌 목록에 딸린 주석이라 한 단 더 흐리게. */
.histo-refs__note{
  margin-top:var(--sp-tight);padding-top:var(--sp-tight);
  border-top:1px solid var(--line-soft);
  font-size:var(--fs-14);line-height:1.7;color:var(--text-tertiary);
  word-break:keep-all;
}
@media (max-width:767px){
  .histo-refs{padding:20px 18px}
}

/* ── 이전·다음 원문 ────────────────────────────────────────── */

/* 국문과 같은 2열. 첫 편·마지막 편은 한쪽이 비는데, 빈 칸을 지우면
   '다음 원문'이 왼쪽으로 붙어 방향이 뒤집혀 보인다. 그래서 빈 칸을
   자리만 차지하는 span 으로 남긴다. */
.histo-nav{
  max-width:900px;margin:var(--sp-block) auto 0;
  padding-top:var(--sp-block);border-top:1px solid var(--line-soft);
  display:grid;gap:var(--sp-gap);grid-template-columns:repeat(2,1fr);
}
.histo-nav__item{
  display:flex;flex-direction:column;gap:8px;
  padding:20px 24px;
  border:1px solid var(--line-soft);border-radius:var(--radius-card);
}
a.histo-nav__item:hover{border-color:var(--brand)}
.histo-nav__item--next{text-align:right}
.histo-nav__item--empty{border:0;padding:0}
.histo-nav__dir{font-size:var(--fs-14);line-height:1.4;color:var(--text-tertiary)}
.histo-nav__title{
  font-weight:500;font-size:var(--fs-16);line-height:1.6;
  color:var(--text-primary);word-break:keep-all;overflow-wrap:anywhere;
}
a.histo-nav__item:hover .histo-nav__title{color:var(--brand)}
@media (max-width:767px){
  .histo-nav{grid-template-columns:1fr}
  /* 한 열이 되면 오른쪽 정렬이 어색하다 — 방향은 __dir 글자가 이미 말한다. */
  .histo-nav__item--next{text-align:left}
  .histo-nav__item--empty{display:none}
}

/* ── 목록으로 ──────────────────────────────────────────────── */

.histo-tolist{margin-top:var(--sp-block);text-align:center}

/* ── 상담 CTA ──────────────────────────────────────────────── */

/* 로비 사진의 KOWON 사인이 버튼과 겹치지 않는 프레이밍 — 역사 페이지와 같은 값. */
.histo-cta{background-position:0 0,center 41%}
.histo-cta__inner{display:flex;flex-direction:column;align-items:center}
.histo-cta__note{max-width:900px;color:rgba(255,255,255,.9)}
@media (max-width:767px){
  .histo-cta__br{display:none}
}