/* hero_k2.css — 홈 히어로 k2 (S100-C-q2 · 2026-09-14) · 근거 F50 · 시안 _preview/S100Cq · 소비처 inc/_hero_k2.php 단일
   토큰: 네이비 #1B2A4A · 크림 #F5F0EB · 골드 #C9A96E(연결·프리미엄 · CTA 아님) · 폰트 Noto Serif KR(h1) · Cormorant Garamond(눈썹) · Pretendard(이름) */
.k-hero{background:#1B2A4A;color:#F5F0EB;font-family:'Pretendard Variable',Pretendard,sans-serif;padding:112px 96px 0;border-bottom:0}
.kh-wrap{max-width:1728px;margin:0 auto}
.kh-eye{margin:0 0 24px;font-family:'Cormorant Garamond',serif;font-size:13px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:#C9A96E}
.kh-top{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:64px}
.kh-h1{margin:0;font-family:'Noto Serif KR',serif;font-weight:600;font-size:88px;line-height:1.06;letter-spacing:-.025em;color:#F5F0EB}
.kh-h1 span{display:block}
.kh-h1 em{font-style:normal;color:#C9A96E}
.kh-cta{color:#F5F0EB;text-decoration:none;font-size:15px;letter-spacing:.08em;border-bottom:1px solid rgba(201,169,110,.6);padding-bottom:6px;white-space:nowrap;transition:border-color .2s}
.kh-cta:hover{border-bottom-color:#C9A96E}
.kh-cta:focus-visible,.kh-a:focus-visible{outline:2px solid #C9A96E;outline-offset:2px}
.kh-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,1fr);gap:10px;position:relative}
.kh-list::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:#C9A96E}
.kh-p{background:transparent;margin:0}
.kh-a{display:block;color:inherit;text-decoration:none}
.kh-img{display:block;background:rgba(245,240,235,.035);aspect-ratio:390/405}
.kh-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.kh-name{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 12px;font-size:19px;letter-spacing:.02em;color:#F5F0EB;border-top:1px solid rgba(201,169,110,.35);transition:border-color .2s}
.kh-name span{color:#C9A96E;opacity:.45;transition:opacity .2s,transform .2s}
.kh-a:hover .kh-name{border-top-color:#C9A96E}
.kh-a:hover .kh-name span{opacity:1;transform:translateX(3px)}
@media (max-width:1439px){.kh-h1{font-size:68px}}
@media (max-width:1199px){.k-hero{padding:112px 56px 0}.kh-h1{font-size:66px}.kh-list{gap:12px}.kh-name{height:62px;font-size:18px}}
@media (max-width:767px){
  .k-hero{padding:112px 24px 0} /* [S100-Cr] 고정 헤더 90px 아래 22px 여백 · 눈썹 겹침 정정(대표 실기기 14:2x) */
  .kh-top{display:block;margin-bottom:28px}
  .kh-h1{font-size:34px;line-height:1.2}
  .kh-cta{display:inline-block;margin-top:12px;font-size:15px}
  /* 390 = 4열 × 2줄 고정 그리드 · 가로 스크롤 없음 · 8인 전원 첫 화면(브랜딩 패널 2026-09-14) */
  .kh-list{grid-template-columns:repeat(4,minmax(72px,1fr));gap:8px 8px;padding-bottom:12px}
  .kh-name{height:36px;padding:0 4px;font-size:12px;letter-spacing:0;justify-content:center;border-top-color:rgba(201,169,110,.25)}
  .kh-name span{display:none}
}
@media (max-width:359px){.kh-list{grid-template-columns:repeat(3,minmax(72px,1fr));gap:6px}}
/* [S102-C1 2026-09-14] 히어로 크레덴셜 2행 — 시안 _preview/S102C1 · F213 · 골드 헤어라인 40px(F91) · 오렌지 0 · radius 0 */
.kh-lead{min-width:0}
.kh-cred{margin:30px 0 0;padding:22px 0 0;list-style:none;position:relative;display:flex;flex-direction:column;gap:9px}
.kh-cred::before{content:'';position:absolute;left:0;top:0;width:40px;height:1px;background:#C9A96E}
.kh-cred li{margin:0;font-family:'Pretendard Variable',Pretendard,sans-serif;line-height:1.5}
.kh-cred1{font-size:17px;font-weight:500;letter-spacing:.02em;color:#F5F0EB}
.kh-cred2{font-size:14px;font-weight:400;letter-spacing:.01em;color:rgba(245,240,235,.72)}
.kh-cred2 span{white-space:nowrap}
@media (max-width:1199px){.kh-cred1{font-size:16px}.kh-cred2{font-size:13px}}
@media (max-width:767px){.kh-cred{margin-top:18px;padding-top:16px;gap:6px}.kh-cred1{font-size:13px}.kh-cred2{font-size:12px;line-height:1.55}}
/* [S102-C2 2026-09-14] 우측 열 = 정직 숫자 띠 4 + CTA(F92 ③ · 신뢰 지표 섹션 대체) · 숫자 Cormorant 600 골드(F91) · radius 0 · shadow 0 · 오렌지 0 */
.kh-top{align-items:flex-end}
.kh-side{display:flex;flex-direction:column;align-items:flex-end;gap:28px;flex:0 0 auto}
.kh-stats{list-style:none;margin:0;padding:0;display:flex;gap:0}
.kh-stat{padding:0 28px;border-left:1px solid rgba(201,169,110,.28)}
.kh-stat:first-child{padding-left:0;border-left:0}
.kh-stat:last-child{padding-right:0}
.kh-stat a{display:flex;flex-direction:column;align-items:flex-start;gap:6px;color:inherit;text-decoration:none}
.kh-stat-n{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:56px;line-height:1;letter-spacing:-.01em;color:#C9A96E}
.kh-stat-n small{font-family:'Pretendard Variable',Pretendard,sans-serif;font-size:14px;font-weight:500;color:rgba(245,240,235,.8);margin-left:3px;letter-spacing:0}
.kh-stat-l{font-family:'Pretendard Variable',Pretendard,sans-serif;font-size:12.5px;letter-spacing:.06em;color:rgba(245,240,235,.72);white-space:nowrap}
.kh-stat a:hover .kh-stat-l{color:#F5F0EB}
@media (max-width:1439px){.kh-stat-n{font-size:48px}.kh-stat{padding:0 22px}}
@media (max-width:1199px){.kh-stat-n{font-size:40px}.kh-stat{padding:0 16px}.kh-stat-l{font-size:11.5px;letter-spacing:.03em}}
@media (max-width:767px){
  .kh-side{align-items:flex-start;gap:14px;margin-top:20px;width:100%}
  .kh-stats{width:100%;justify-content:space-between}
  .kh-stat{padding:0 10px;flex:1 1 0}
  .kh-stat-n{font-size:30px}
  .kh-stat-n small{font-size:11px;margin-left:2px}
  .kh-stat-l{font-size:10.5px;letter-spacing:0;white-space:normal;line-height:1.3}
  .kh-cta{margin-top:0}
}
/* [S102-C2b 2026-09-14] 768~1023 태블릿 = 우측 열(kh-side 328px)이 h1 을 3~4행으로 밀어냄(라이브 실측 992 h210 · 768 h390 · 1024 h140) → 열 해제 · 숫자 띠를 lead 아래 가로 배치 · CTA 우단 */
@media (max-width:1023px) and (min-width:768px){.kh-top{display:block}.kh-side{flex-direction:row;align-items:flex-end;justify-content:space-between;width:100%;margin-top:28px;gap:24px}.kh-cta{margin-top:0}}
/* [S102-C2c 2026-09-14] 모바일 CTA 이동 — 767 이하: 우측 열 CTA 숨김 · 얼굴 그리드 아래 .kh-cta-m 표시(우단) · 768 이상 .kh-cta-m 숨김 · 숫자 띠 3종 */
.kh-cta-m{display:none}
@media (max-width:767px){.kh-side .kh-cta{display:none}.kh-side{gap:0}.kh-cta-m{display:inline-block;float:right;margin-top:14px;font-size:14px}.kh-wrap::after{content:'';display:block;clear:both}}
/* [S102-C2d 2026-09-14] 모바일 CTA 하단 여백 — 히어로 하단 패딩 0 이라 .kh-cta-m 이 크림 섹션 경계에 붙음(390 실측 y690 · 섹션 끝 y715) → 아래 26px */
@media (max-width:767px){.kh-cta-m{margin-bottom:26px}}
