@charset "UTF-8";
/* 3대 100년 이야기 전용 — 공통은 ../../common/css/common.css · sub.css (계보 .gen · 아카이브 .archive-grid · 약력 .cv · 관련 링크 .rel = sub.css 10 · 13)
   섹션별로 다른 값은 새 클래스 대신 변수만 덮어씀 */

/* 한눈에 보기 : 1대가 3대를 안은 사진 (두 얼굴이 잘리지 않게) */
.summary .qa-media img{object-position:50% 25%}

/* 세 세대 연혁 : 세로 타임라인 — sub.css .gen(가로 3단 · 원형 사진)을 세로형으로 바꿔 씀
   PC : 왼쪽 세대 · 연도 / 선 · 점 / 가운데 이름 · 장소 · 설명 / 오른쪽 사진 · 999 이하 : 왼쪽 선 하나에 위아래로 */
/* 세 세대 연혁 : 한지 질감 배경 (10-08) — 가운데는 비어 있고 네 귀퉁이에만 잎 그림자 */
#timeline{background:#FBF5EB url(../../../images/pages/about/history/history-bg.jpg) 50% 0/cover no-repeat}

.tl{--tl-x:180px;position:relative;max-width:1240px;margin-inline:auto}
.tl::before{content:"";position:absolute;left:var(--tl-x);top:14px;bottom:14px;width:1px;background:#D3CEC5}
.tl .gen{display:grid;grid-template-columns:var(--tl-x) minmax(0,1fr) minmax(0,440px);align-items:start;text-align:left}
.tl .gen + .gen{margin-top:88px}
.tl .gen::before{content:"";position:absolute;left:calc(var(--tl-x) - 7px);top:12px;width:15px;height:15px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 7px #FBF5EB}   /* 10-08 : 한지 배경 톤에 맞춤 */
.tl-mark{padding-right:44px;text-align:right}
.tl .g{margin:0;font-family:var(--kserif);font-size:44px;line-height:1;letter-spacing:-.02em;color:var(--gold)}
.tl .yr{margin-top:14px;font-size:14px;line-height:1.5}
.tl-body{padding:0 56px}
.tl .gen h3{margin:0;font-size:30px;line-height:1.35;font-weight:600}
.tl .pl{margin-top:14px;font-size:15.5px}
.tl .pl b{margin-bottom:2px;font-size:17px}
.tl .role{margin-top:16px;font-size:16px;line-height:1.85;color:var(--ink-2)}
.tl-link{display:inline-block;margin-top:18px;padding-bottom:3px;border-bottom:1px solid currentColor;font-size:15px;font-weight:600;color:var(--green)}
.tl-link:hover{color:var(--accent)}
.tl-ph{margin:0;border-radius:16px;overflow:hidden;background:#E8E3DA}
.tl-ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tl-ph--g1 img{object-position:50% 45%}   /* 10-12 : 엘리멘터 이미지 위젯으로 바꾸려고 인라인 style 을 CSS 로 옮김 */
.tl-ph--g2 img{object-position:50% 40%}
.tl-ph--g3 img{object-position:55% 35%}

/* 가문의 한의사 : 왼쪽 글 · 세대별 명단 + 오른쪽 천안 가족사진 (핵심 비주얼) */
.family .split{align-items:start}   /* 10-08 : 사진은 섹션 위에서 시작해 따라 내려오다 섹션 끝(바텀)에서 멈춤 */
.fam-list{margin-top:40px}
.fam-list h3{color:var(--gold)}
.fam-list li{flex-wrap:wrap;column-gap:12px;row-gap:2px}
.fam-list li b{font-weight:600}
.fam-list li span{color:var(--muted);font-size:15px}
.fam-list li a{text-decoration:underline;text-underline-offset:3px}
.fam-note{margin-top:28px}
.fam-photo img{aspect-ratio:4/3;object-position:50% 30%}

/* 1대가 남긴 기록 : 사진 4열 · 캡션 두 줄 (한자 이름 + 설명) */
.archive .archive-grid{row-gap:30px}
.archive .cap{margin-top:14px;font-size:16px;line-height:1.7;text-align:center}   /* 10-08 : 설명 가운데 · 16px */
.archive .cap b{display:block;margin-bottom:4px;font-family:var(--kserif);font-size:19px;font-weight:500;letter-spacing:0;color:var(--ink)}
.archive .notice,.links .notice{margin-top:40px;text-align:center}

/* 오늘의 처방으로 : 관련 링크 카드 3장 */
.links .rel{margin-top:var(--head-gap,64px)}

@media (max-width:999px){
  .tl{--tl-x:0px;max-width:620px}
  .tl::before{left:7px}
  .tl .gen{grid-template-columns:minmax(0,1fr);padding-left:40px}
  .tl .gen + .gen{margin-top:56px}
  .tl .gen::before{left:0;top:8px}
  .tl-mark{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:0;text-align:left}
  .tl .g{font-size:32px}
  .tl .yr{margin-top:0}
  .tl-body{margin-top:14px;padding:0}
  .tl .gen h3{font-size:24px}
  .tl-ph{margin-top:22px}
  .fam-list{margin-top:var(--head-gap);text-align:left}
  .fam-note{text-align:left}
}
@media (max-width:690px){
  .tl .gen{padding-left:32px}
  .tl .g{font-size:28px}
  .tl .gen h3{font-size:21px}
  .tl .role{font-size:15px}
  .archive .cap b{font-size:16px}
  .archive .cap{font-size:13px}
}

/* 오늘의 처방 : 딥그린 바탕 (10-08) — 포인트는 레몬, hover 는 밝은 쪽으로 반전 */
#today .rel a{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#C7CFCB}
#today .rel small{color:var(--yellow)}
#today .rel strong{color:#fff}
#today .rel span{color:#9FB0A9}
#today .rel .go{border-color:var(--yellow);color:var(--yellow)}
#today .rel a:hover{background:#F7F5EC;border-color:#F7F5EC}
#today .rel a:hover small{color:var(--accent)}
#today .rel a:hover strong{color:#1E3029}
#today .rel a:hover span{color:#4E5752}
#today .rel a:hover .go{background:#1E3029;border-color:#1E3029;color:var(--yellow)}
#today .notice{color:#9FB0A9}
#today .notice a{color:#E3D3AC}

/* ===== 엘리멘터 max-width · margin · flex 보정 (tools/sync_theme.py 자동 생성 · 직접 고치지 말 것) ===== */
.elementor.elementor.elementor.elementor .tl{max-width:1240px;margin-inline:auto}
.elementor.elementor.elementor.elementor .tl .gen{align-items:start}
.elementor.elementor.elementor.elementor .tl .gen + .gen{margin-top:88px}
.elementor.elementor.elementor.elementor .tl .g{margin:0}
.elementor.elementor.elementor.elementor .tl .yr{margin-top:14px}
.elementor.elementor.elementor.elementor .tl .gen h3{margin:0}
.elementor.elementor.elementor.elementor .tl .pl{margin-top:14px}
.elementor.elementor.elementor.elementor .tl .pl b{margin-bottom:2px}
.elementor.elementor.elementor.elementor .tl .role{margin-top:16px}
.elementor.elementor.elementor.elementor .tl-link{margin-top:18px}
.elementor.elementor.elementor.elementor .tl-ph{margin:0}
.elementor.elementor.elementor.elementor .family .split{align-items:start}
.elementor.elementor.elementor.elementor .fam-list{margin-top:40px}
.elementor.elementor.elementor.elementor .fam-list li{flex-wrap:wrap}
.elementor.elementor.elementor.elementor .fam-note{margin-top:28px}
.elementor.elementor.elementor.elementor .archive .cap{margin-top:14px}
.elementor.elementor.elementor.elementor .archive .cap b{margin-bottom:4px}
.elementor.elementor.elementor.elementor .archive .notice,.elementor.elementor.elementor.elementor .links .notice{margin-top:40px}
.elementor.elementor.elementor.elementor .links .rel{margin-top:var(--head-gap,64px)}
@media (max-width:999px){.elementor.elementor.elementor.elementor .tl{max-width:620px}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .tl .gen + .gen{margin-top:56px}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .tl-mark{flex-wrap:wrap;align-items:baseline}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .tl .yr{margin-top:0}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .tl-body{margin-top:14px}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .tl-ph{margin-top:22px}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .fam-list{margin-top:var(--head-gap)}}

/* 엘리멘터 배경 보정 (자동 생성 · 배경 그림만 되살림) */
.elementor.elementor.elementor.elementor.elementor #timeline{background-image:url(../../../images/pages/about/history/history-bg.jpg) !important}