/* =========================================================
   카이스 — 회사소개 페이지 전용 스타일
   글로벌 토큰/클래스(styles.css) + 공통 섹션(kit.css) 위에 얹습니다.
   ========================================================= */

/* ---------- page hero ---------- */
.page-hero{ position:relative; overflow:hidden; padding:148px 0 clamp(48px,7vw,86px);
  background:linear-gradient(160deg,#243860 0%, #16243c 58%, #1c2a48 100%); color:#fff; }
.page-hero .emblem{ position:absolute; right:-40px; top:50%; transform:translateY(-50%); width:min(40vw,440px); opacity:.06; pointer-events:none; }
.page-hero .crumb{ font-size:13px; color:var(--brand-subtle); font-weight:600; letter-spacing:.02em; }
.page-hero h1{ color:#fff; font-size:clamp(30px,4vw,52px); font-weight:800; letter-spacing:-.03em; margin-top:14px; }
.page-hero .ph-sub{ color:rgba(255,255,255,.72); font-size:clamp(15px,1.2vw,18px); margin-top:16px; max-width:600px; line-height:1.7; }

/* ---------- sticky sub-nav ---------- */
.subnav{ position:sticky; top:69px; z-index:30; background:rgba(255,255,255,.92); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--border); margin-top:69px; }
.subnav-inner{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); display:flex; gap:4px; overflow-x:auto; }
.subnav a{ position:relative; padding:17px 18px; font-size:15px; font-weight:600; color:var(--c-default); white-space:nowrap; transition:.16s var(--ease); }
.subnav a:hover{ color:var(--c-strong); }
.subnav a.on{ color:var(--brand-default); }
.subnav a.on::after{ content:""; position:absolute; left:18px; right:18px; bottom:0; height:2px; background:var(--brand-default); border-radius:2px; }
.section-anchor{ scroll-margin-top:128px; }

/* ---------- 1. 대표 인사말 ---------- */
.sec-no{ font-size:16px; font-weight:700; color:var(--brand-default); letter-spacing:-.01em; padding-bottom:12px; position:relative; }
.sec-no::after{ content:""; position:absolute; left:0; bottom:0; width:64px; height:3px; background:var(--brand-default); border-radius:2px; }
.greet-grid{ display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(32px,5vw,72px); align-items:start; margin-top:30px; }
.greet-grid > *{ min-width:0; }
.greet-body{ grid-column:1; grid-row:1; }
.greet-photo{ grid-column:2; grid-row:1; }
.greet-body .eyebrow{ display:block; }
.greet-title{ font-size:clamp(34px,4.2vw,60px); font-weight:800; letter-spacing:-.035em; line-height:1.16; margin-top:18px; color:#16203a; }
.greet-lead{ font-size:clamp(16px,1.3vw,19px); color:var(--c-emph); font-weight:600; margin-top:20px; line-height:1.6; letter-spacing:-.01em; }
.greet-para{ margin-top:26px; padding-top:26px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:18px; }
.greet-para p{ font-size:clamp(14.5px,1.1vw,16px); color:var(--c-default); line-height:1.85; }
.greet-para b{ color:var(--c-strong); font-weight:700; }
.greet-sign{ display:flex; align-items:center; gap:12px; margin-top:30px; }
.greet-sign .who{ font-size:14px; color:var(--c-default); }
.greet-sign .who b{ color:var(--c-strong); font-size:18px; font-weight:800; letter-spacing:-.01em; margin-right:6px; }
.greet-photo{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--ring-card); position:sticky; top:96px; }
.greet-photo img{ width:100%; height:auto; display:block; }
/* principle cards — small horizontal */
.principles{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:34px; }
.principle{ background:var(--bg); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 16px; box-shadow:var(--shadow-input);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; transition:.2s var(--ease); }
.principle:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.principle .pi{ width:46px; height:46px; border-radius:50%; background:var(--brand-faint); color:var(--brand-default);
  display:flex; align-items:center; justify-content:center; }
.principle .pi svg{ width:22px; height:22px; }
.principle .ptx h4{ font-size:16px; font-weight:700; color:var(--c-strong); }
.principle .ptx p{ font-size:12px; color:var(--c-default); line-height:1.45; margin-top:5px; }
/* photo */
.greet-photo{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg);
  background:linear-gradient(155deg,#e9edf3,#dfe5ee); }
.greet-photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }

/* ---------- 2. 구성원 소개 (full grid) ---------- */
.greet-sec{ padding-bottom:clamp(34px,4vw,52px); }
.member-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.member-stat{ display:flex; align-items:baseline; gap:7px; background:var(--bg-muted); border:1px solid var(--border);
  border-radius:var(--r-full); padding:8px 16px; }
.member-stat b{ font-size:18px; font-weight:800; color:var(--brand-default); letter-spacing:-.02em; }
.member-stat span{ font-size:13px; color:var(--c-emph); font-weight:600; }
.member-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:38px; }
.mcard{ position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/5;
  background:linear-gradient(155deg,#34507e,#16243c); box-shadow:var(--shadow-md); cursor:pointer;
  transition:transform .26s var(--ease), box-shadow .26s var(--ease); }
.mcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.mcard-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; transition:opacity .26s var(--ease); }
.mcard-foot{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:30px 18px 16px; color:#fff;
  background:linear-gradient(transparent,rgba(16,24,40,.86)); }
.mcard-foot .nm{ font-size:17px; font-weight:800; letter-spacing:-.01em; }
.mcard-foot .rl{ font-size:12px; color:var(--brand-subtle); font-weight:600; margin-top:4px; line-height:1.4; }
.mcard-hover{ position:absolute; inset:0; z-index:3; padding:22px 20px; display:flex; flex-direction:column;
  background:linear-gradient(160deg,rgba(20,30,52,.94),rgba(12,19,33,.96)); color:#fff;
  opacity:0; transform:translateY(8px); transition:.26s var(--ease); pointer-events:none; }
.mcard:hover .mcard-hover{ opacity:1; transform:none; }
.mcard:hover .mcard-photo{ opacity:.16; }
.mcard-hover .nm{ font-size:18px; font-weight:800; }
.mcard-hover .rl{ font-size:12.5px; color:var(--brand-subtle); font-weight:600; margin-top:4px; }
.mcard-hover ul{ list-style:none; margin-top:14px; display:flex; flex-direction:column; gap:9px; }
.mcard-hover li{ font-size:12.5px; line-height:1.45; color:rgba(255,255,255,.9); padding-left:13px; position:relative; }
.mcard-hover li::before{ content:""; position:absolute; left:0; top:7px; width:4px; height:4px; border-radius:50%; background:var(--brand-subtle); }
.member-lead{ max-width:680px; }

/* ---------- 3. 주요 업무 (intro + 3×2 grid) ---------- */
.work-grid{ display:grid; grid-template-columns:0.78fr 2fr; gap:clamp(28px,4vw,60px); align-items:start; }
.work-grid > *{ min-width:0; }
.work-intro{ position:relative; }
.work-title{ font-size:clamp(26px,2.8vw,38px); font-weight:800; letter-spacing:-.03em; line-height:1.28; margin-top:18px; color:#16203a; }
.work-p{ font-size:clamp(14.5px,1.1vw,16px); color:var(--c-default); line-height:1.8; margin-top:18px; max-width:340px; }
.work-wm{ width:clamp(150px,13vw,210px); margin-top:36px; opacity:.08; }
.work-cards{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:16px; align-items:stretch; }
.work-card{ background:var(--bg); border:1px solid var(--border); border-radius:var(--r-lg); padding:24px 22px;
  box-shadow:var(--shadow-input); transition:.22s var(--ease); display:flex; flex-direction:column; }
.work-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--brand-line); }
.wc-ic{ width:46px; height:46px; }
.wc-ic svg{ width:46px; height:46px; }
.wc-title{ font-size:18px; font-weight:700; color:var(--c-strong); letter-spacing:-.015em; margin-top:16px; padding-bottom:12px; position:relative; }
.wc-title::after{ content:""; position:absolute; left:0; bottom:0; width:28px; height:2.5px; background:var(--brand-default); border-radius:2px; }
.wc-label{ font-size:11.5px; font-weight:600; color:var(--c-subtle); margin-top:14px; }
.wc-kws{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.wc-kw{ font-size:12px; font-weight:500; color:var(--c-emph); background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:5px 10px; line-height:1.3; transition:.15s var(--ease); }
.wc-kw:hover{ border-color:var(--brand-line); color:var(--brand-default); background:var(--brand-faint); }
.kw-note{ text-align:center; font-size:13px; color:var(--c-subtle); margin-top:34px; }
.kw-note svg{ color:var(--brand-subtle); }

/* ---------- 4. 오시는 길 ---------- */
.loc-grid{ display:grid; grid-template-columns:1.35fr .9fr; gap:24px; align-items:stretch; margin-top:44px; }
.loc-grid > *{ min-width:0; }
.loc-map{ position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:380px; box-shadow:var(--ring-card); background:var(--bg-muted); }
.loc-map .pin{ display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--brand-default); }
.loc-map .pin .dot{ width:54px; height:54px; border-radius:50% 50% 50% 0; background:var(--brand-default);
  transform:rotate(-45deg); box-shadow:0 12px 26px -8px rgba(183,40,60,.5); display:flex; align-items:center; justify-content:center; }
.loc-map .pin .dot svg{ transform:rotate(45deg); color:#fff; }
.loc-map .pin .lbl{ font-size:13px; font-weight:700; color:var(--c-strong); background:#fff; padding:6px 14px; border-radius:var(--r-full); box-shadow:var(--shadow-sm); }
.loc-map-nav{ position:absolute; left:14px; bottom:14px; z-index:2; display:flex; gap:6px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border:1px solid var(--border);
  border-radius:12px; padding:5px; box-shadow:var(--shadow-md); }
.lmn-btn{ font-size:12.5px; font-weight:600; color:var(--c-emph); padding:8px 13px; border:0;
  background:transparent; border-radius:8px; cursor:pointer; transition:.16s var(--ease); white-space:nowrap; }
.lmn-btn:hover{ background:var(--bg-muted); color:var(--c-strong); }
.lmn-btn.on{ background:var(--brand-default); color:#fff; }
.branch{ cursor:pointer; text-align:left; font:inherit; width:100%; transition:.18s var(--ease); }
.branch:hover{ border-color:var(--brand-line); box-shadow:var(--shadow-sm); }
.branch.on{ border-color:var(--brand-default); background:var(--brand-faint); box-shadow:0 0 0 1px var(--brand-default) inset; }
.branch.on .bn{ color:var(--brand-default); }
.loc-info{ display:flex; flex-direction:column; gap:14px; }
.loc-card{ background:var(--bg); border-radius:var(--r-lg); padding:24px; box-shadow:var(--ring-card); }
.loc-card .lh{ display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--brand-default); }
.loc-card .lh svg{ width:18px; height:18px; }
.loc-card .addr{ font-size:17px; font-weight:700; color:var(--c-strong); margin-top:12px; line-height:1.5; letter-spacing:-.01em; }
.loc-card .addr small{ display:block; font-size:13px; font-weight:400; color:var(--c-default); margin-top:6px; }
.loc-rows{ display:flex; flex-direction:column; gap:0; }
.loc-row{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--bg-subtle); }
.loc-row:last-child{ border-bottom:0; }
.loc-row .ri{ width:34px; height:34px; border-radius:9px; background:var(--bg-muted); color:var(--brand-default);
  display:flex; align-items:center; justify-content:center; flex:none; }
.loc-row .ri svg{ width:17px; height:17px; }
.loc-row .rt b{ display:block; font-size:14px; color:var(--c-strong); font-weight:700; }
.loc-row .rt span{ font-size:13px; color:var(--c-default); line-height:1.55; }
.loc-cta{ background:linear-gradient(160deg,#243860,#16243c); border-radius:var(--r-lg); padding:26px; color:#fff; text-align:center; }
.loc-cta .lc-num{ font-size:26px; font-weight:800; letter-spacing:-.02em; display:inline-flex; align-items:center; gap:9px; }
.loc-cta .lc-hrs{ font-size:12.5px; color:rgba(255,255,255,.6); margin-top:8px; }
.loc-cta .btn-hero{ margin-top:16px; }
.branch-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; }
.branch{ background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:18px 20px; }
.branch .bn{ font-size:15px; font-weight:700; color:var(--c-strong); }
.branch .ba{ font-size:13px; color:var(--c-default); margin-top:6px; line-height:1.5; }

/* ---------- responsive ---------- */
@media (max-width:960px){
  .greet-grid{ display:flex; flex-direction:column; }
  .greet-body{ order:1; }
  .greet-photo{ order:2; float:none; width:100%; max-width:420px; margin:28px auto 0; position:static; aspect-ratio:4/4.2; }
  .principles{ grid-template-columns:1fr; }
  .member-grid{ grid-template-columns:repeat(3,1fr); }
  .work-grid{ grid-template-columns:1fr; }
  .work-wm{ display:none; }
  .work-cards{ grid-template-columns:repeat(2,1fr); }
  .kw-groups{ grid-template-columns:1fr; }
  .loc-grid{ grid-template-columns:1fr; }
  .branch-row{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .member-grid{ grid-template-columns:repeat(2,1fr); }
  .work-cards{ grid-template-columns:1fr; }
  .page-hero{ padding-top:120px; }
}