/* kc-common.css — /kiaconsulting/ 전 페이지 공통 디자인 계층 (페이지별 pNN.css·consult20.css 뒤에 로드)
   공통: 컬러·폰트·버튼·카드·사진 규칙·본문 폭·CTA·헤더·푸터·모바일 / 페이지별: 히어로·섹션 순서·표/단계/체크리스트 구성(pNN.css) */
:root{
  --accent:#2763B5; --accent-text:#1B4B91; --accent-dp:#1B4B91;
  --ink:#303846; --bg:#FFFFFF; --navy:#14243A; --paper:#F4F6F8; --line:#DCE3EC;
  --c-bg:#FFFFFF; --c-text:#303846; --c-sub:#4A5566; --c-line:#DCE3EC; --c-surface:#F4F6F8; --c-callout-bg:#EAF1FB;
  --font-display:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  --font-body:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  --font-head:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  --kc-radius:12px; --kc-radius-lg:16px;
  --kc-shadow:0 2px 4px rgba(20,36,58,.04),0 14px 30px -14px rgba(20,36,58,.2);
  --kc-header-h:68px; --kc-mbar-h:64px;
}
body.kc{ font-family:var(--font-body); color:var(--ink); background:#fff; line-height:1.78; font-size:16px; padding-bottom:var(--kc-mbar-h); }
body.kc h1, body.kc h2, body.kc h3, body.kc h4{ font-family:var(--font-display); letter-spacing:-.015em; }
body.kc .wrap{ max-width:1140px; margin-inline:auto; padding-inline:clamp(16px,4vw,32px); }
body.kc .section{ padding-block:clamp(48px,7vw,88px); }
body.kc :focus-visible{ outline:3px solid #2763B5; outline-offset:2px; }
@media (min-width:1080px){ body.kc{ padding-bottom:0; } }

/* ---------- 공통 버튼 ---------- */
.kc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:13px 24px; border-radius:var(--kc-radius); font:700 15px/1.3 var(--font-body); text-align:center; text-decoration:none; border:2px solid transparent; cursor:pointer; transition:transform .15s ease, background .2s, border-color .2s, color .2s; }
.kc-btn:hover{ transform:translateY(-2px); }
.kc-btn--solid{ background:#2763B5; color:#fff; border-color:#2763B5; }
.kc-btn--solid:hover{ background:#1B4B91; border-color:#1B4B91; }
.kc-btn--outline{ background:#fff; color:#1B4B91; border-color:#2763B5; }
.kc-btn--outline:hover{ background:#EAF1FB; }
.kc-btn--dark{ background:#14243A; color:#fff; border-color:#14243A; }
.kc-btn--dark:hover{ background:#0C1828; }
.kc-btn--sm{ min-height:44px; padding:9px 16px; font-size:14px; }
.kc-btn--on-dark{ background:#fff; color:#14243A; border-color:#fff; }
.kc-btn--on-dark:hover{ background:#EAF1FB; }
.kc-btn--ghost-dark{ background:transparent; color:#fff; border-color:#8DB6EC; }
.kc-btn--ghost-dark:hover{ background:rgba(141,182,236,.16); }
.kc-btn--primary-dark{ background:#2763B5; color:#fff; border-color:#2763B5; }
.kc-cta-row{ display:flex; flex-wrap:wrap; gap:10px; }
.kc-cta-row--center{ justify-content:center; }
.kc-cta-row .kc-btn{ flex:1 1 auto; }
@media (min-width:640px){ .kc-cta-row .kc-btn{ flex:0 0 auto; } }
.kc-hero-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.kc-hero-cta .kc-btn{ flex:0 1 auto; }
.kc-hero-cta + .kc-hero-cta{ margin-top:10px; }
.kc-hero-cta .kc-btn--solid{ box-shadow:0 0 0 2px rgba(255,255,255,.85); }
.hero.hr3 .kc-btn--outline, .hero .kc-btn--outline{ background:rgba(255,255,255,.96); }

/* ---------- 헤더 ---------- */
.kc-wrap{ max-width:1140px; margin-inline:auto; padding-inline:clamp(16px,4vw,32px); }
.kc-header{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.96); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid #DCE3EC; }
.kc-header-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:var(--kc-header-h); }
.kc-logo{ font:700 16px/1.2 var(--font-display); color:#14243A; text-decoration:none; white-space:nowrap; letter-spacing:-.01em; }
.kc-logo strong{ color:#2763B5; }
.kc-gnb{ display:none; }
.kc-gnb ul{ display:flex; align-items:center; gap:20px; list-style:none; margin:0; padding:0; }
.kc-gnb a{ font:500 14.5px/1.2 var(--font-body); color:#4A5566; text-decoration:none; white-space:nowrap; }
.kc-gnb a:hover{ color:#2763B5; }
.kc-gnb a.kc-nav-cta{ background:#2763B5; color:#fff; padding:9px 18px; border-radius:999px; font-weight:700; }
.kc-gnb a.kc-nav-cta:hover{ background:#1B4B91; color:#fff; }
.kc-hcta{ display:none; gap:10px; }
.kc-ibtn{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; border:1px solid #DCE3EC; color:#14243A; background:#fff; }
.kc-ibtn:hover{ border-color:#2763B5; color:#2763B5; }
.kc-ibtn--solid{ background:#2763B5; border-color:#2763B5; color:#fff; }
.kc-ibtn--solid:hover{ background:#1B4B91; color:#fff; }
.kc-burger{ display:grid; place-items:center; width:44px; height:44px; background:none; border:0; color:#14243A; cursor:pointer; }
@media (min-width:1080px){ .kc-gnb{ display:block; } .kc-hcta{ display:flex; } .kc-burger{ display:none; } }
.kc-menu{ position:fixed; inset:0; z-index:200; background:#14243A; color:#fff; display:flex; flex-direction:column; padding:20px clamp(16px,4vw,32px) calc(var(--kc-mbar-h) + 20px); transform:translateY(-100%); transition:transform .3s ease; overflow-y:auto; visibility:hidden; }
.kc-menu.is-open{ transform:translateY(0); visibility:visible; }
.kc-menu-top{ display:flex; justify-content:space-between; align-items:center; height:var(--kc-header-h); }
.kc-menu .kc-logo{ color:#fff; } .kc-menu .kc-logo strong{ color:#8DB6EC; }
.kc-menu .kc-burger{ color:#fff; }
.kc-menu ul{ list-style:none; margin:20px 0 0; padding:0; }
.kc-menu li a{ display:block; padding:15px 0; font:700 20px/1.3 var(--font-display); color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.12); }
.kc-menu .kc-cta-row{ margin-top:auto; padding-top:26px; }

/* ---------- 모바일 하단 바 ---------- */
.kc-mbar{ position:fixed; left:0; right:0; bottom:0; z-index:150; display:grid; grid-template-columns:repeat(3,1fr); height:var(--kc-mbar-h); background:#fff; border-top:1px solid #DCE3EC; box-shadow:0 -6px 20px rgba(20,36,58,.08); }
.kc-mbar a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font:700 11.5px/1.2 var(--font-body); text-decoration:none; color:#2763B5; }
.kc-mbar a:nth-child(2){ background:#2763B5; color:#fff; }
.kc-mbar a:nth-child(3){ background:#14243A; color:#fff; }
@media (min-width:1080px){ .kc-mbar{ display:none; } }

/* ---------- 본문 중간 CTA / 관련 서비스 / 최종 CTA ---------- */
.kc-inline{ margin:0; padding:clamp(28px,4vw,40px) 0; }
.kc-inline-box{ background:#EAF1FB; border:1px solid #D5E2F4; border-radius:var(--kc-radius-lg); padding:clamp(20px,3vw,28px); display:grid; gap:14px; align-items:center; }
.kc-inline-box p{ margin:0; font-weight:700; color:#14243A; font-size:16.5px; }
@media (min-width:900px){ .kc-inline-box{ grid-template-columns:1fr auto; } }
.kc-inline--line .kc-inline-box{ padding:14px 18px; background:#F4F6F8; }
.kc-inline--line .kc-inline-box p{ font-size:15px; }
.kc-related{ padding:clamp(32px,5vw,56px) 0; background:#F4F6F8; }
.kc-related h2{ font-size:clamp(20px,3vw,26px); margin:0 0 6px; color:#14243A; }
.kc-related p{ margin:0 0 16px; color:#4A5566; font-size:15px; }
.kc-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.kc-chip{ display:inline-flex; align-items:center; min-height:44px; padding:8px 16px; background:#fff; border:1px solid #DCE3EC; border-radius:999px; font:600 14px/1.3 var(--font-body); color:#303846; text-decoration:none; }
.kc-chip:hover{ border-color:#2763B5; color:#2763B5; }
.kc-chip--strong{ background:#2763B5; border-color:#2763B5; color:#fff; } .kc-chip--strong:hover{ background:#1B4B91; color:#fff; }
.kc-cta{ background:#14243A; color:#fff; text-align:center; padding:clamp(48px,7vw,80px) 0; }
.kc-cta h2{ color:#fff; font-size:clamp(24px,4vw,34px); margin:0 0 12px; }
.kc-cta p{ color:#C9D3E0; max-width:56ch; margin:0 auto 26px; }
.kc-cta .kc-cta-row{ justify-content:center; max-width:760px; margin-inline:auto; }

/* ---------- 푸터 ---------- */
.kc-footer{ background:#14243A; color:#B8C4D4; padding:clamp(32px,5vw,52px) 0 28px; font-size:14px; line-height:1.7; }
.kc-footer-grid{ display:grid; gap:28px; }
@media (min-width:768px){ .kc-footer-grid{ grid-template-columns:1.2fr 1fr; } }
.kc-footer ul{ list-style:none; margin:0; padding:0; }
.kc-footer .kc-fname{ color:#fff; font-weight:700; font-size:15.5px; margin-bottom:6px; }
.kc-footer li{ padding-block:2px; }
.kc-footer li b{ color:#fff; font-weight:600; }
.kc-flinks{ display:flex; flex-wrap:wrap; gap:6px 18px; align-content:flex-start; }
.kc-flinks a{ color:#B8C4D4; text-decoration:none; font-size:14px; min-height:32px; display:inline-flex; align-items:center; }
.kc-flinks a:hover{ color:#8DB6EC; }
.kc-fnote{ margin:22px 0 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); font-size:12.5px; color:#9FB2CA; }
.kc-fcopy{ margin:8px 0 0; font-size:12.5px; color:#9FB2CA; }

/* ---------- 사진 규칙 : 본문 2·4장 묶음 / 1:1 / 간격 14px ---------- */
body.kc .body-gallery, body.kc .car4grid, body.kc [class*="-gallery"]:not(.hero-slideshow){ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:24px 0; }
@media (min-width:900px){ body.kc .body-gallery:has(> :nth-child(4)), body.kc .car4grid, body.kc [class*="-gallery"]:has(> :nth-child(4)):not(.hero-slideshow){ grid-template-columns:repeat(4,minmax(0,1fr)); } }
body.kc .body-gallery picture, body.kc .car4grid figure, body.kc [class*="-gallery"] > picture{ display:block; aspect-ratio:1/1; overflow:hidden; border-radius:var(--kc-radius); border:0; box-shadow:var(--kc-shadow); background:#EEF2F7; margin:0; }
body.kc .car4grid figure{ aspect-ratio:auto; display:flex; flex-direction:column; background:#fff; border:1px solid #DCE3EC; }
body.kc .body-gallery img, body.kc .car4grid img, body.kc [class*="-gallery"] img{ width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; object-position:50% 52%; border-radius:0; background:#EEF2F7; display:block; }
body.kc img.kc-land{ object-fit:contain !important; }
body.kc .car4grid figcaption{ padding:8px 10px; font-size:12.5px; color:#4A5566; text-align:center; }
body.kc .hero-visual-frame img, body.kc .hero-visual img{ object-fit:cover; }

/* ---------- 카드·표·콜아웃 공통 ---------- */
body.kc .callout{ border-radius:var(--kc-radius); background:#EAF1FB; border-color:#2763B5; color:#303846; }
body.kc table{ border-collapse:collapse; width:100%; }
body.kc .tbl-wrap, body.kc .body-table-wrap{ overflow-x:auto; border:1px solid #DCE3EC; border-radius:var(--kc-radius); box-shadow:var(--kc-shadow); }
body.kc table th{ background:#14243A; color:#fff; }
body.kc table tbody th[scope="row"]{ background:#F4F6F8; color:#14243A; }
body.kc table td, body.kc table th{ padding:12px 14px; text-align:left; font-size:14.5px; border-bottom:1px solid #DCE3EC; vertical-align:top; }
body.kc table tbody tr:nth-child(even) td{ background:#F9FAFC; }
@media (max-width:639px){
  body.kc table td, body.kc table th{ padding:9px 8px; font-size:12.5px; word-break:keep-all; overflow-wrap:anywhere; }
  body.kc table{ min-width:0 !important; table-layout:auto; }
  .kc-btn{ font-size:14px; padding:12px 18px; }
}
body.kc .related-page-card, body.kc .faq-item, body.kc .qa-item, body.kc .directory-card{ border-radius:var(--kc-radius); }
body.kc .faq-item, body.kc .qa-item{ box-shadow:var(--kc-shadow); }
body.kc img, body.kc picture, body.kc svg{ max-width:100%; }
@media print{ .kc-header,.kc-mbar,.kc-menu{ display:none !important; } }

/* ---------- 히어로 가독성·도식 크기 보정 ---------- */
body.kc .hero-slideshow::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(rgba(20,36,58,.5),rgba(20,36,58,.72)); pointer-events:none; }
body.kc .hero-copy, body.kc .hero-visual{ position:relative; z-index:2; }
body.kc .hero h1, body.kc .hero-lede{ color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.55); }
body.kc .hero-lede{ font-style:normal; }
@media (max-width:639px){ body.kc .flow-graphic{ width:84px; margin-inline:auto; } body.kc .flow-row{ gap:12px; } }
body.kc .directory-card img{ aspect-ratio:1/1; height:auto; background:#EEF2F7; object-position:50% 52%; }
body.kc .hero, body.kc .chero, body.kc main{ overflow-x:clip; }
body.kc .hero-visual, body.kc .hero-profile, body.kc .hero-visual-frame{ max-width:100%; }
