/* ── pages / about-doctor-history — 코성형의 역사 ────────────────────
   아키타입 article. 히어로 → 본문(연대기) → 원문 목록 → 관점 →
   Research → 형제 페이지 → 상담 CTA.
   뼈대는 subpage.css 의 .page-hero / .numbered / .siblings / .cta-band
   와 layout.css 의 .sec-head / .section--muted / --tint 로 해결된다.
   이 파일은 그 프리미티브에 없는 두 가지만 짠다.
     1) 연대기 — 왼쪽 연대 라벨 + 세로 레일 + 본문 (2열 그리드)
     2) 원문 목록 14건 — 번호·제목·날짜 3조각 행 (2열 그리드)
   콘텐츠 JSON 의 이미지는 0장이라 페이지 전체가 텍스트다. */

/* ── 히어로 ────────────────────────────────────────────────── */

/* .page-hero 기본 오버레이는 검정 68%. 이 페이지가 쓰는 hero.jpg 는
   수술실 조명이라 원본이 거의 흰색이고, 68% 로는 핑크 eyebrow 와 흰 제목이
   읽히지 않는다. topics / signature 허브와 같이 80% 로 올린다. */
.hist-hero{
  background-image:
    linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.8)),
    var(--hero-img,none);
}

/* ── 연대기 ────────────────────────────────────────────────── */

/* 콘텐츠 JSON 의 li("6th century BC — India" 등)가 연대 라벨,
   그 다음 heading + p 가 본문이다. 왼쪽에 연대, 오른쪽에 본문을 두고
   그 사이를 세로선으로 잇는다. 라벨 폭 260 은 가장 긴
   "6th century BC — India" 가 1280 에서 한 줄로 들어가는 값. */
.hist-era__card{
  display:grid;
  grid-template-columns:minmax(0,260px) minmax(0,1fr);
  column-gap:var(--sp-stack);
}

/* 제목(24/1.4)과 첫 줄 베이스라인을 맞추려면 20/1.4 라벨을 4px 내린다. */
.hist-era__when{
  padding-top:4px;
  font-weight:700;font-size:var(--fs-20);line-height:1.4;
  letter-spacing:var(--ls-tight);color:var(--brand);word-break:keep-all;
}

/* 세로선이 항목 사이에서 끊기지 않도록, 항목 간 여백을 margin 이 아니라
   본문 열의 padding-bottom 으로 준다. 마지막 항목만 그 여백을 없앤다. */
.hist-era__body{
  position:relative;
  padding-left:var(--sp-stack);
  padding-bottom:var(--sp-block);
  border-left:1px solid var(--line-soft);
}
.hist-era__item:last-child .hist-era__body{padding-bottom:0}

/* 레일 위의 점. 제목 첫 줄(24×1.4=33.6) 중앙이 약 16.8px 이라 9px 점은 12px. */
.hist-era__body::before{
  content:"";position:absolute;left:-5px;top:12px;
  width:9px;height:9px;border-radius:50%;background:var(--brand);
}

.hist-era__title{
  font-weight:700;font-size:var(--fs-24);line-height:1.4;
  letter-spacing:var(--ls-tight);color:var(--text-primary);word-break:keep-all;
}

/* 읽기 줄 길이를 .prose(900)보다 조금 짧게 묶는다 — 라벨 열을 뺀 뒤에도
   1280 에서 한 줄이 90자를 넘지 않게. */
.hist-era__text{
  margin-top:var(--sp-tight);max-width:760px;
  font-size:var(--fs-18);line-height:1.8;color:var(--text-secondary);
  word-break:keep-all;
}

.hist-era__more{margin-top:20px}

/* 국문과 같이 그 시대와 짝이 되는 원문 한 편으로 보낸다
   (1→02, 2·3→10, 4→11, 5→12). 두 줄로 접혀도 밑줄이 줄마다
   그려지도록 border 대신 text-decoration 을 쓴다. */
.hist-era__link{
  font-weight:500;font-size:var(--fs-16);line-height:1.6;
  color:var(--text-primary);
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--line-mid);
}
.hist-era__link::after{content:"\00a0\2192"}
.hist-era__link:hover{color:var(--brand);text-decoration-color:currentColor}

@media (max-width:1279px){
  .hist-era__card{grid-template-columns:minmax(0,220px) minmax(0,1fr)}
}
@media (max-width:1023px){
  .hist-era__card{grid-template-columns:minmax(0,200px) minmax(0,1fr);column-gap:var(--sp-gap)}
}
/* 모바일: 연대 라벨을 본문 위로 올린다. 레일은 카드 전체로 옮겨야
   라벨 옆에서도 선이 이어진다. */
@media (max-width:767px){
  .hist-era__card{
    position:relative;
    grid-template-columns:minmax(0,1fr);
    row-gap:8px;
    padding-left:20px;padding-bottom:var(--sp-stack);
    border-left:1px solid var(--line-soft);
  }
  .hist-era__card::before{
    content:"";position:absolute;left:-5px;top:9px;
    width:9px;height:9px;border-radius:50%;background:var(--brand);
  }
  .hist-era__item:last-child .hist-era__card{padding-bottom:0}
  .hist-era__when{padding-top:0}
  .hist-era__body{padding-left:0;padding-bottom:0;border-left:0}
  .hist-era__body::before{display:none}
  .hist-era__text{max-width:none}
}

/* ── 원문 목록 ─────────────────────────────────────────────── */

/* 14건이 한 줄씩 늘어서면 1280 에서 너무 길어진다. 2열로 접는다. */
.hist-arts__list{
  margin-top:var(--sp-block);
  display:grid;gap:12px var(--sp-gap);
  grid-template-columns:repeat(2,1fr);
}
/* 카드 한 장이 통째로 그 원문으로 가는 링크다. 격자와 판은 <a> 가 지고,
   <li> 는 자리만 잡는다. 2열에서 제목 길이가 제각각이라 height:100% 로
   같은 줄의 카드 키를 맞춘다. */
.hist-arts__link{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:16px;align-content:start;height:100%;
  padding:20px 24px;
  background:var(--surface);border-radius:var(--radius-card);
}
.hist-arts__link:hover .hist-arts__title{color:var(--brand)}
/* 행 번호(Montaga). 줄상자를 제목(16×1.6=25.6)과 같게 맞춰야
   20px 숫자의 베이스라인이 제목 첫 줄과 어긋나지 않는다. */
.hist-arts__n{
  grid-row:span 2;
  font-family:var(--font-numeric);font-weight:400;
  font-size:var(--fs-20);line-height:1.3;letter-spacing:normal;
  color:var(--brand);
}
.hist-arts__title{
  font-weight:700;font-size:var(--fs-16);line-height:1.6;
  color:var(--text-primary);overflow-wrap:break-word;
}
.hist-arts__date{
  margin-top:6px;
  font-size:var(--fs-14);line-height:1.4;color:var(--text-tertiary);
}
@media (max-width:767px){
  .hist-arts__list{grid-template-columns:1fr}
  .hist-arts__link{padding:16px 18px;column-gap:12px}
}

/* ── 관점 (POINT OF VIEW) ──────────────────────────────────── */

/* .numbered 격자와 카드를 그대로 쓰되, 번호 배지가 없는 카드라
   .numbered__title 의 배지용 margin-top(20)만 걷어낸다. */
.hist-pov__list{margin-top:var(--sp-block)}
.hist-pov__quote{margin-top:0}

/* ── Research ──────────────────────────────────────────────── */

.hist-research__body{margin-top:var(--sp-stack);text-align:center}

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

/* .cta-band 기본 배치(center)로는 로비 사진의 KOWON 사인이 제목 뒤에 겹친다.
   J컬 Sec_10 / topics 와 같은 프레이밍(세로 41%)으로 글자 뒤를 비운다. */
.hist-cta{background-position:0 0,center 41%}
.hist-cta__inner{display:flex;flex-direction:column;align-items:center}

/* .disclaimer 의 회색(--text-tertiary)은 핑크 밴드 위에서 읽히지 않는다. */
.hist-cta__note{max-width:900px;color:rgba(255,255,255,.9)}

@media (max-width:767px){
  .hist-cta__br{display:none}
}