/* ==========================================================================
   서대문햇살아래 v3 — about.html 전용 스타일
   style.css 의 토큰(:root)·버튼·헤더/푸터/모바일메뉴 클래스를 그대로 사용하고,
   이 파일은 센터소개 페이지에만 필요한 컴포넌트(페이지 타이틀 잉크 타일·
   섹션 이동·인사말·미션비전 연두 타일·연혁·조직도·오시는길)만 추가한다.
   고대비 원칙: 흰 배경 섹션은 var(--ink)/var(--ink-70)/var(--ink-12) 페어를
   그대로 쓰면 body.high-contrast 재정의로 자동 반전된다. 연두 타일(.tile-mission)은
   배경이 반전되지 않는 브랜드 타일이므로 텍스트를 블랭킷 규칙으로 잉크 고정한다.
   ========================================================================== */

/* ── 페이지 타이틀 [잉크 타일] ───────────────────────────── */
.page-head{background:var(--ink);color:var(--on-ink);padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,3.5rem)}
.breadcrumb{margin-bottom:1.5rem;font-size:.9375rem;color:var(--on-ink-70)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:.5em;list-style:none}
.breadcrumb a{font-weight:600}
.breadcrumb a:hover{text-decoration:underline;text-underline-offset:.2em}
.breadcrumb [aria-current]{color:var(--on-ink);font-weight:600}
.page-head__eyebrow{display:block;font-family:var(--font-head);font-weight:700;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-ink-70);margin-bottom:.6em}
.page-head__title{font-family:var(--font-head);font-weight:900;font-size:clamp(2.5rem,5vw,4.5rem);letter-spacing:-0.03em;line-height:1.05}
.page-head__lead{margin-top:.8em;font-size:1.125rem;line-height:1.6;color:var(--on-ink-70);max-width:44ch}

/* ── 섹션 이동 [흰] ───────────────────────────────────────── */

/* ── 서브 섹션 공통 [흰 기본] ─────────────────────────────── */
.sub-section{padding:clamp(3rem,6vw,5.5rem) 0}
.sub-head{margin-bottom:clamp(2rem,4vw,3rem)}
.eyebrow{display:block;font-family:var(--font-head);font-weight:700;font-size:.9375rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-70);margin-bottom:.6em}

/* 2단 레이아웃: 타이틀 열 + 본문 열 (인사말·미션비전·연혁) */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);gap:clamp(1.5rem,4vw,4rem)}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* ── 인사말 ───────────────────────────────────────────────── */
.greeting__quote{font-family:var(--font-head);font-weight:700;font-size:clamp(1.375rem,2.4vw,1.875rem);line-height:1.45;margin-bottom:1.6em}
.greeting__quote em{font-style:normal;color:var(--orange-deep)}
.greeting__text p+p{margin-top:1em}
.greeting__sign{margin-top:1.6em;font-weight:700}

/* ── 미션·비전 [연두 타일 — 강조 1구간] ───────────────────── */
.tile-mission{background:var(--lime);color:var(--ink);padding:var(--pad-tile) 0}
/* 밝은 타일 안에서는 --ink-70(72% 알파)을 통째로 무효화한다.
   연두 위에서 4.54:1 로 턱걸이였고, 요소마다 하나씩 고치면 빠뜨린다. 토큰을 덮는 편이 확실하다 */
.tile-mission{--ink-70:var(--ink)}
.mv-block{padding:1.25rem 0;border-top:0.125rem solid var(--ink)}
.mv-block--vision{border-bottom:0.125rem solid var(--ink)}
.mv-block__label{display:block;font-family:var(--font-head);font-weight:800;font-size:.9375rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-70)}
.mv-block__text{font-family:var(--font-head);font-weight:800;font-size:clamp(1.375rem,2.6vw,2.125rem);letter-spacing:-0.02em;margin-top:.3em}

.value-list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.5vw,2rem);margin-top:2.5rem}
.value-list li{border-left:0.125rem solid var(--ink);padding-left:1rem}
.value-list strong{display:block;font-family:var(--font-head);font-weight:800;font-size:1.375rem;margin-bottom:.4em}
.value-list span{display:block;font-size:1.0625rem;color:var(--ink-70)}
@media (max-width:640px){.value-list{grid-template-columns:1fr}}

.purpose-list{margin-top:2.25rem;display:grid;gap:.9rem}
.purpose-list li{display:flex;gap:1rem;align-items:baseline;padding-top:.9rem;border-top:0.0625rem solid rgba(31,27,22,.15)}
.purpose-list li:first-child{border-top:0;padding-top:0}
.purpose-list__num{font-family:var(--font-head);font-weight:900;font-size:1.25rem;opacity:.6;flex:none}  /* .4 는 2.49:1 로 흐렸다 → .6 = 4.51:1 */

/* 연두 타일은 배경이 반전되지 않는 브랜드 타일 — 텍스트를 잉크로 고정 */
body.high-contrast .tile-mission,
body.high-contrast .tile-mission *{color:#000}

/* ── 연혁 ─────────────────────────────────────────────────── */
.timeline{border-top:0.125rem solid currentColor}
.timeline li{display:grid;grid-template-columns:5.5rem 1fr;gap:1.5rem;padding:1.15rem 0;border-bottom:0.0625rem solid var(--ink-12);align-items:baseline}
.timeline__year{font-family:var(--font-head);font-weight:900;font-size:1.375rem;color:var(--orange-deep)}
.timeline__event{display:flex;flex-wrap:wrap;gap:.15em .75em;align-items:baseline}
.timeline__event strong{font-weight:700;font-size:1.0625rem}
.timeline__event span{color:var(--ink-70);font-size:1.0625rem}
@media (max-width:640px){.timeline li{grid-template-columns:1fr}}

/* ── 조직도 (직위 수준만, 사진·아이콘 없음) ───────────────── */
/* 조직도 — 시안 A안 「연결선 트리」(사용자 선택 2026-10-02). 구조는 정본 00_기관기본정보 §3-1:
   총회 → 센터장(좌: 운영위원회·활동지원운영위원회 / 우: 사업·회계 감사) → 사무국 → 4개 팀. 글자 최소 17px */
.org{font-size:1.0625rem}
.org__chart{display:grid;justify-items:center}
.org__node{border:0.125rem solid var(--ink);border-radius:var(--radius);padding:.85rem 1.75rem;font-weight:800;background:var(--white);text-align:center;min-width:10rem}
.org__node small{display:block;font-weight:600;font-size:1.0625rem;margin-top:.15rem}
.org__node--head{background:var(--ink);color:var(--on-ink);font-size:1.25rem;padding:1.1rem 2.5rem}
.org__v{width:0.125rem;height:1.75rem;background:var(--ink)}
.org__mid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:min(100%,58rem)}
.org__side{display:grid;gap:.5rem;position:relative}
.org__side--l{justify-items:end;padding-right:1.5rem}
.org__side--r{justify-items:start;padding-left:1.5rem}
.org__side::after{content:"";position:absolute;top:50%;width:1.5rem;height:0.125rem;background:var(--ink)}
.org__side--l::after{right:0}.org__side--r::after{left:0}
.org__aside{border:0.125rem solid var(--ink);border-radius:var(--radius);padding:.6rem 1.1rem;font-weight:700;background:var(--paper)}
.org__aside small{font-weight:600;font-size:1.0625rem}
.org__teams{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;width:100%;position:relative;padding-top:1.75rem;list-style:none;margin:0}
.org__teams::before{content:"";position:absolute;top:0;left:12.5%;right:12.5%;height:0.125rem;background:var(--ink)}
.org__team{position:relative;border:0.125rem solid var(--ink);border-radius:var(--radius);background:var(--white);padding:0 .5rem 1.1rem;text-align:center}
.org__team::before{content:"";position:absolute;top:-1.875rem;left:50%;width:0.125rem;height:1.75rem;background:var(--ink)}
.org__team b{display:block;height:.5rem;margin:0 -.5rem 1rem;border-radius:calc(var(--radius) - 0.125rem) calc(var(--radius) - 0.125rem) 0 0}
.org__team strong{display:block;font-size:1.125rem;font-weight:800}
.org__team span{display:block;font-size:1.0625rem;margin-top:.35rem}
.org__team .t1{background:var(--orange)}.org__team .t2{background:var(--sky)}.org__team .t3{background:var(--lime)}.org__team .t4{background:var(--tangerine)}
.org__note{margin-top:1.5rem;text-align:center;font-size:1.0625rem}
@media (max-width:860px){
  .org__mid{grid-template-columns:1fr;justify-items:center;gap:.75rem}
  .org__mid .org__node--head{order:-1}
  /* 모바일: 위원회·감사가 「센터장→사무국」 줄 안에 있는 것처럼 보이지 않게 — 점선 칩으로 곁에 붙은 기구임을 표시 */
  .org__side{padding:0!important;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
  .org__side::after{display:none}
  .org__aside{border-style:dashed;background:transparent;padding:.45rem .9rem}
  .org__teams{grid-template-columns:1fr 1fr;padding-top:1rem}
  .org__teams::before,.org__team::before{display:none}
}
body.high-contrast .org__node,body.high-contrast .org__team,body.high-contrast .org__aside{background:#000;color:#fff;border-color:#fff}
body.high-contrast .org__node--head{background:#FFD400;color:#000}
body.high-contrast .org__v,body.high-contrast .org__side::after,body.high-contrast .org__teams::before,body.high-contrast .org__team::before{background:#fff}

/* ── 오시는길 ─────────────────────────────────────────────── */
.loc-subhead{font-family:var(--font-head);font-weight:700;font-size:1.125rem;margin-bottom:1rem}
.info-table{width:100%;border-collapse:collapse;margin-bottom:2rem}
.info-table th,.info-table td{text-align:left;padding:1rem 1.25rem 1rem 0;border-bottom:0.0625rem solid var(--ink-12);font-size:1.0625rem;line-height:1.6}
.info-table th{width:9rem;font-weight:700;color:var(--ink-70);white-space:nowrap;vertical-align:top}
@media (max-width:640px){
  .info-table,.info-table tbody,.info-table tr,.info-table th,.info-table td{display:block;width:auto}
  .info-table th{padding:1rem 0 .25rem;white-space:normal}
  .info-table td{padding:0 0 .75rem}
}

.map-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2rem}
.map-frame{aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);margin-bottom:2rem;background:var(--paper)}
.map-frame iframe{width:100%;height:100%;border:0;display:block}
/* 카카오맵 링크 카드(배포 전 임시): 구글지도 대체. 배포 시 실지도 임베드로 교체 */
.map-frame--kakao{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;text-align:center;padding:1.5rem;border:0.125rem dashed var(--ink-12);text-decoration:none;color:var(--ink)}
.map-frame--kakao:hover{background:var(--paper);border-color:var(--ink)}
.map-frame__label{font-family:var(--font-head);font-weight:700;font-size:1.125rem;color:var(--ink)}
.map-frame__addr{color:var(--ink-70);font-size:1.0625rem}

.loc-photo img{border-radius:var(--radius);width:100%}
.loc-photo figcaption{margin-top:.75em;color:var(--ink-70);font-size:1.0625rem}
/* 센터 전경 사진: 원본 크기(661px) 이상으로 확대하지 않음 — 2026-09-21 사용자 지적 */
.loc-photo{max-width:41.5rem;margin-inline:auto}
.loc-photo img{display:block;width:100%;max-width:100%;height:auto}

/* 센터 로고(CI) — 출처: 03. 홍보/01. 로고(CI)/햇살아래_로고활용_확정본_v1.0 가이드북 3·5·6·7쪽 (2026-10-02).
   로고 색 견본은 가이드 원문 HEX 그대로(사이트 토큰과 별개). 견본 위에 글자를 얹지 않고 아래 흰 바탕에 표기 → 대비 무관 */
.ci{display:grid;gap:2.5rem}
.ci__main{margin:0;border:0.0625rem solid var(--ink-12);border-radius:var(--radius);padding:clamp(1.75rem,4vw,3rem) clamp(1.25rem,4vw,3rem);background:var(--white)}
.ci__main img{display:block;width:100%;height:auto;max-width:42rem;margin:0 auto}
.ci__mobile-note{display:none}
@media (max-width:640px){.ci__main img{max-width:18rem}.ci__mobile-note{display:inline}}
.ci__main figcaption{margin-top:1.25rem;text-align:center;font-size:1.0625rem}
.ci__lead{font-size:1.25rem;font-weight:700;margin:0 0 1.25rem}
.ci__parts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 2rem}
.ci__parts li{display:grid;grid-template-columns:1.25rem minmax(0,1fr);gap:.85rem;align-items:start;padding:1rem 0;border-top:0.125rem solid var(--ink)}
.ci__parts strong{display:block;font-size:1.125rem;font-weight:800}
.ci__parts span{display:block;margin-top:.25rem}
.ci__dot{width:1.25rem;height:1.25rem;border-radius:50%;background:var(--c);margin-top:.2rem}
.ci__dot--line{background:transparent;border:0.1875rem solid var(--c);border-radius:40% 60% 55% 45%}
.ci__note{margin:1rem 0 0;font-size:1.0625rem}
.ci__title{font-size:1.25rem;font-weight:800;margin:0 0 1rem}
.ci__combos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.ci__combos li{display:grid;gap:.35rem;align-content:start}
.ci__box{display:flex;align-items:center;justify-content:center;height:7.5rem;border:0.0625rem solid var(--ink-12);border-radius:var(--radius);padding:1rem;background:var(--white)}
.ci__box img{max-width:100%;max-height:100%;width:auto;height:auto}
.ci__combos strong{font-weight:800;margin-top:.4rem}
.ci__colors{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
.ci__colors li{display:grid;gap:.2rem}
.ci__swatch{display:block;height:4.5rem;border-radius:var(--radius);background:var(--c);margin-bottom:.4rem}
.ci__colors strong{font-weight:800}
.ci__colors span{font-variant-numeric:tabular-nums;font-family:var(--font-head);font-weight:600}
@media (max-width:860px){.ci__parts{grid-template-columns:1fr}.ci__combos{grid-template-columns:1fr 1fr}.ci__colors{grid-template-columns:repeat(3,minmax(0,1fr))}}
body.high-contrast .ci__main,body.high-contrast .ci__box{background:#fff}
/* 320px: 팀 칸·위원회 칩이 화면을 넘었다(글자 17px 상향 후) → 아주 좁은 화면만 1열·여백 축소. 2026-10-02 */
@media (max-width:400px){.org__teams{grid-template-columns:1fr}.org__aside{padding:.4rem .7rem}.org__side{gap:.4rem}.org__node{min-width:0;padding:.75rem 1.25rem}}
/* 현재 위치 — 17px·누름 영역 44px (2026-10-02, pages.css 와 같은 기준) */
.breadcrumb{font-size:1.0625rem}
.breadcrumb ol{align-items:center;gap:0 .5em}
.breadcrumb a,.breadcrumb [aria-current]{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .2em}