/* page-about.css — 회사소개 페이지 전용 (FINAL_spec §7.1). 공용 컴포넌트(page-hero·sec-head·figure·cta) 위에 섹션 그리드만 추가. */

/* 히어로·5:7 분할은 공용 .page-hero(.has-media)/.page-hero-grid/.split 사용 — components.css */

/* ---------- Why (에디토리얼 2단 5:7) ---------- */
.why-motto{margin-top:var(--s4);font-style:italic;font-weight:400;font-size:22px;line-height:1.4;color:var(--gray)}
.why-body .body{margin-top:var(--s3)}
@media (min-width:1024px){.why-head{position:sticky;top:calc(var(--header-h) + var(--s4))}}

/* ---------- Greeting (대표 인사말, blue-tint 밴드) ---------- */
.greeting{background:var(--blue-tint)}
.greet-quote{margin-top:var(--s3);font-family:var(--sans);font-size:var(--fs-quote-kr);font-weight:500;letter-spacing:-.02em;line-height:1.4;color:var(--kms-blue);text-wrap:balance}
.greet-quote:lang(en){font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(30px,3.4vw,44px);line-height:1.18;letter-spacing:-.015em}
@media (min-width:1024px){.greet-head{position:sticky;top:calc(var(--header-h) + var(--s4))}}
.greet-body p{font-size:var(--fs-body);line-height:1.85;color:var(--ink-2);max-width:62ch}
.greet-body p+p{margin-top:var(--s3)}
.greet-body .signature{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--rule-blue);font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--ink);display:flex;align-items:center;gap:16px}
.greet-body .signature::before{content:"";width:24px;height:1px;background:var(--kms-blue);flex:none}
.greet-body .signature:lang(en){font-family:var(--serif);font-style:italic;font-weight:400;font-size:19px;letter-spacing:0}

/* ---------- Promises (3열 룰 그리드, navy-900) ---------- */
.promises{background:var(--navy-900)}
.promise-grid{display:grid;border-top:1px solid var(--rule-dark)}
@media (min-width:768px){.promise-grid{grid-template-columns:repeat(3,1fr)}}
/* 셀 공통(패딩·룰·.no·h3·h3:lang(en))은 components.css '다크 밴드 셀' — 여기서는 고유 차이만 */
.promise-grid li{gap:14px}
@media (min-width:768px){.promise-grid li+li{padding-left:var(--s4);border-left:1px solid var(--rule-dark)}}
@media (min-width:768px) and (max-width:1023px){.promise-grid h3:lang(en){font-size:26px}}
.promise-grid p{font-size:15px;line-height:1.8;color:var(--on-dark-2);max-width:40ch}
.promises .sec-head .serif-line{justify-self:start}
@media (min-width:1024px){.promises .sec-head .serif-line{justify-self:end;text-align:right}}

/* ---------- History (세로 타임라인: 연도 큰 숫자 + 월) ---------- */
.tl{border-top:1px solid var(--rule-ink)}
.tl-year{display:grid;grid-template-columns:1fr;gap:12px;padding:24px 0 28px;border-bottom:1px solid var(--rule)}
@media (min-width:768px){.tl-year{grid-template-columns:200px 1fr;gap:var(--s4);padding:28px 0 32px}}
@media (min-width:1024px){.tl-year{grid-template-columns:5fr 7fr;column-gap:var(--s6)}}
.tl-year.decade{border-top:1px solid var(--kms-blue);margin-top:-1px}
.tl-y{font-family:var(--serif);font-weight:500;font-variant-numeric:lining-nums;font-size:clamp(44px,5.4vw,72px);line-height:.95;letter-spacing:-.03em;color:var(--kms-blue)}
.tl-events{display:grid;gap:0}
.tl-events li{display:grid;grid-template-columns:44px 1fr;gap:var(--s2);align-items:baseline;padding:8px 0}
.tl-events li+li{border-top:1px solid var(--rule)}
@media (min-width:768px){.tl-events li{grid-template-columns:56px 1fr;padding:10px 0}.tl-events li:first-child{padding-top:10px}}
.tl-m{font-family:var(--serif);font-weight:400;font-variant-numeric:lining-nums;font-size:17px;letter-spacing:.06em;color:var(--gray);white-space:nowrap}
.tl-t{font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.55;color:var(--ink)}
@media (min-width:768px){.tl-t{font-size:18px}}
.history .sec-head .serif-line{font-style:normal;letter-spacing:.02em}

/* ---------- Infrastructure (와이드 플레이트 + 3:2 플레이트 + 항목) ---------- */
.infra .sec-head .body{margin-top:var(--s2);font-size:16px}
.plate figcaption{color:var(--gray)}
.plate figcaption>span:first-child{color:var(--ink-2)}
.plate figcaption .serif{color:var(--gray);margin-right:2px}
/* hq-front: 구 간판(이미지 높이 약 57%·73% 지점)이 프레임 밖으로 나가도록 상단 12:5 파노라마 크롭(가시 55%). 모바일도 동일 비율 유지(2:1이면 간판 노출) */
.plate-wide img{aspect-ratio:3/2;object-position:50% 50%}
.infra-grid{margin-top:var(--s5)}
@media (min-width:1024px){.infra-grid{margin-top:var(--s6)}}
/* Plate II = highrack-4(세로 3:4 원본)를 3:2 로 크롭: 상단 랙 구간 */
.infra-grid .plate img{object-position:50% 40%}
/* 인프라 항목은 공용 .rule-list.wide — 여기서는 크기 차이만 오버라이드 */
@media (min-width:768px){.infra-list>li{padding:26px 0}}
.infra-list .title{font-size:20px}
.infra-list .title:lang(en){font-size:21px}
.infra-list .desc{font-size:15.5px;margin-top:8px;max-width:56ch}

/* 히어로 사진: 홈(50% 45%)과 다른 프레이밍으로 반복감 완화 */
.about-hero .hero-media img{object-position:78% 40%}