@charset "utf-8";
/* =============================================================================
   시안 1 · 비대칭 분할 + 기록 원장
   DESIGN_VARIANCE 5 / MOTION_INTENSITY 4 / VISUAL_DENSITY 5
   팔레트: 쿨 그레이 + 스틸 블루 (단일 액센트)
   반경: 4px 하나로 통일 / 테마: 라이트 고정
   ============================================================================= */
:root{
  --ink:#14171a; --ink-2:#4d565e; --ink-3:#89939b;
  --bg:#f6f7f8; --surface:#ffffff; --surface-2:#eceff1;
  --line:#dde1e4; --line-2:#e8ebed;
  --accent:#2f5d8a; --accent-ink:#234a6e; --accent-soft:#e8eef4;
  --on-accent:#ffffff;
  --ph-bg:#e2e6e9; --ph-ink:#96a0a7;
  --r:4px; --wrap:1180px; --gap-sec:52px;
}
body{background:var(--bg)}
.band{background:var(--surface)}
.s-nav{background:var(--bg)}

/* ── 히어로 ────────────────────────────────────────────────────────────
   사진 위에 카피를 얹습니다. 사진 밝기를 측정해 보니 상단 평균 151, 하단 평균 65 로
   아래쪽이 어둡고(앞머리 뒤통수) 정보도 없어, 아래에서 위로 올라가는 스크림을 씁니다.
   데스크톱에서는 왼쪽 아래가 가장 어두우므로 가로 워시를 한 겹 더해
   가운데의 흰 가운과 테이블(사진의 요지)은 가리지 않습니다.
   모바일은 좌우 여백 없이 화면 폭을 다 쓰고 세로로 긴 4:5 로 잘라 인물을 키웁니다.
   ──────────────────────────────────────────────────────────────────── */
.hero{padding:0}
.hero-media{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:4/5;background:var(--ph-bg)}
.hero-media picture{display:block}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;display:block;
                object-fit:cover;object-position:50% 40%}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(11,15,19,.95) 0%, rgba(11,15,19,.89) 15%, rgba(11,15,19,.62) 30%, rgba(11,15,19,.24) 46%, rgba(11,15,19,0) 66%)}
.hero-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 20px 22px}
.hero-copy h1{font-size:29px;font-weight:800;letter-spacing:-0.05em;line-height:1.16;color:#fff}
.hero-copy p{margin-top:10px;font-size:14px;line-height:1.7;color:rgba(255,255,255,.88);max-width:34ch}
.hero-copy .s-btn{margin-top:16px}

@media (prefers-reduced-motion:no-preference){
  .hero-media img{animation:heroIn 1100ms var(--ease) both}
  .hero-copy > *{animation:copyIn 680ms var(--ease) both}
  .hero-copy h1{animation-delay:140ms}
  .hero-copy p{animation-delay:240ms}
  .hero-copy .s-btn{animation-delay:340ms}
}
@keyframes heroIn{from{transform:scale(1.055)}to{transform:none}}
@keyframes copyIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}


.lead{font-size:14.5px;color:var(--ink-2);line-height:1.8;max-width:62ch;margin-bottom:18px}
.fine{margin-top:12px;font-size:11.5px;color:var(--ink-3);line-height:1.65}
.duo{display:grid;gap:38px}

.feat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.b-feature .b-ph{border-radius:var(--r)}
.b-index--sub{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}

.rec{background:var(--surface-2);border-radius:var(--r);padding:6px 18px}
.branch-wrap{display:grid;gap:26px;margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}

.b-stat{background:var(--surface)}
.band .b-stat{background:var(--bg)}
.b-dots .b-t:hover{color:var(--accent)}

@media (min-width:640px){
  .hero-frame{max-width:var(--wrap);margin:0 auto;padding:20px 20px 0}
  .hero-media{aspect-ratio:3/2;border-radius:var(--r)}
  .hero-copy{padding:0 30px 32px}
  .hero-copy h1{font-size:38px}
  .hero-copy p{font-size:15.5px}
}

@media (min-width:900px){
  :root{--gap-sec:64px}
  .hero-frame{padding:26px 20px 0}
  .hero-media{aspect-ratio:16/9}
  .hero-media img{object-position:50% 55%}
  .hero-scrim{background:
    linear-gradient(to top, rgba(11,15,19,.90) 0%, rgba(11,15,19,.68) 24%, rgba(11,15,19,.20) 46%, rgba(11,15,19,0) 66%),
    linear-gradient(to right, rgba(11,15,19,.48) 0%, rgba(11,15,19,.14) 36%, rgba(11,15,19,0) 58%)}
  .hero-copy{padding:0 46px 42px;max-width:680px;right:auto}
  .hero-copy h1{font-size:48px}
  .hero-copy p{font-size:16px;margin-top:16px}
  .duo{grid-template-columns:1fr 1fr;gap:52px}
  .branch-wrap{grid-template-columns:1fr 1fr;gap:44px}
  .feat{padding:28px}
  .b-feature h3{font-size:25px}
}