/* 택슈런스 V5 공통 스타일 — 두 개의 문(대표관·자녀관) 하나의 브랜드 시스템 */
/* 토큰 근거: 로고 픽셀 실측 + designlang 실측(하나·카뱅·인카 3:0) — 선별노트 §8 */

:root{
  /* 색 — 8색 이내 (하나 8색 / 카뱅 6색 실측 근거) */
  --navy:#1A2B3B;        /* 로고 실측 네이비 82.4% — 주 포인트색 */
  --navy-2:#2E4459;      /* 밝은 네이비 (보조) */
  --gold:#C1A677;        /* 로고 실측 골드 16.7% — 액센트, 소량만 */
  --gold-soft:#F3ECDF;   /* 골드 틴트 — 고지·주의 박스 전용 (인카 실물 근거) */
  --ink:#17241F;         /* 본문 (순수 검정 금지 — 스킬 §9.A) */
  --muted:#5C6B64;       /* 보조 텍스트 */
  --line:#E3E7EA;        /* 1px 보더 (그림자 대신 이걸로 분리) */
  --bg:#FFFFFF;          /* 캔버스 — 순백 확정 (하나·카뱅·인카 3:0) */

  /* 형태 — SHAPE CONSISTENCY LOCK (스킬 §4.4): 이 셋 외 금지 */
  --r-pill:50px;         /* 버튼 */
  --r-card:16px;         /* 카드·이미지 */
  --r-input:8px;         /* 입력 */

  --font:'Pretendard','Pretendard Variable',-apple-system,'Malgun Gothic',sans-serif;
  --wrap:1200px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);color:var(--ink);background:var(--bg);
  line-height:1.7;-webkit-font-smoothing:antialiased;word-break:keep-all;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ── 헤더 (72px, 데스크톱 1줄 — 스킬 §4.7) ────────────────── */
.hd{
  position:sticky;top:0;z-index:50;height:72px;background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--line);backdrop-filter:saturate(1.2) blur(6px);
}
.hd .wrap{height:100%;display:flex;align-items:center;gap:28px}
.logo{font-weight:800;font-size:20px;color:var(--navy);letter-spacing:-.02em;flex:0 0 auto}
.logo b{color:var(--gold)}
.nav{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav a{font-size:15px;color:var(--muted);font-weight:500;white-space:nowrap;transition:color .15s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--navy);font-weight:700}
.nav .cross{font-size:13px;color:var(--gold);font-weight:700}
.hd .btn{margin-left:8px;padding:9px 18px;font-size:14px}
.burger{display:none;margin-left:auto;background:none;border:0;font-size:24px;color:var(--navy);cursor:pointer}

/* ── 버튼 (pill, 대비 WCAG AA — 스킬 §4.5) ────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 32px;border-radius:var(--r-pill);font-weight:700;font-size:16px;
  border:1.5px solid transparent;cursor:pointer;transition:.18s;white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-2)}
.btn-gold{background:var(--gold);color:#231A08}   /* 골드 위 진한 글씨 = 대비 확보 */
.btn-gold:hover{filter:brightness(1.06)}
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy)}
.btn[disabled],.btn.off{background:#F1F3F4;color:#98A2A8;border-color:var(--line);cursor:not-allowed}
.btn.off:active{transform:none}

/* ── 히어로 (풀블리드 정적 사진 — 영상 0:정적 13 계수 근거) ── */
.hero{position:relative;min-height:clamp(460px,62vh,620px);display:flex;align-items:center;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* 스크림 강도는 눈대중이 아니라 대비 측정으로 정했다(2026-07-17).
   최초값(.72/.5/.12)에서 골드 eyebrow 대비가 1.42로 측정돼 AA 4.5에 크게 미달했다.
   카피가 앉는 쪽을 .88까지 올려 골드·흰색 모두 기준을 넘긴다. 인물 쪽은 밝게 남긴다. */
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,16,23,.88) 0%,rgba(10,16,23,.74) 42%,rgba(10,16,23,.12) 82%);
}
/* .hero가 flex 컨테이너이므로 .wrap은 flex 아이템이 된다.
   width:100%가 없으면 내용 폭으로 줄어들어 max-width:1200 + margin:auto가 무력화되고,
   카피가 스크림 밖(인물 얼굴 위)으로 밀린다. 2026-07-17 렌더 검증에서 발견. */
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-in{max-width:640px;padding:56px 0}
/* 사진 위 eyebrow는 흰색이다. 골드(--gold)로 뒀더니 밝은 배경 구간에서
   대비가 1.42로 측정돼 AA 4.5에 크게 미달했다(2026-07-17 실측).
   스크림을 .88까지 올려도 자녀관은 2.98에 그쳤다. 색을 새로 만들지 않고 흰색으로 간다.
   골드 배역은 바로 아래 CTA 버튼과 본문 전체가 이미 지고 있어 잃는 것이 없다. */
.eyebrow{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:.06em;
  color:rgba(255,255,255,.92);margin-bottom:14px;
}
.hero h1{
  font-size:clamp(30px,4.4vw,52px);line-height:1.28;font-weight:800;color:#fff;
  letter-spacing:-.02em;margin-bottom:18px;
}
.hero p{font-size:clamp(15px,1.6vw,19px);color:rgba(255,255,255,.9);margin-bottom:28px;max-width:34em}
/* 자녀관 히어로 = 우측 여백 사진 → 좌측 스크림 반전 */
.hero.right::after{
  background:linear-gradient(270deg,rgba(10,16,23,.88) 0%,rgba(10,16,23,.74) 42%,rgba(10,16,23,.12) 82%);
}
.hero.right .wrap{display:flex;justify-content:flex-end}
.hero.right .hero-in{text-align:left}

/* ── 페이지 헤더 (하위 페이지용) ──────────────────────────── */
.ph{padding:64px 0 44px;border-bottom:1px solid var(--line)}
.ph .crumb{font-size:13px;color:var(--muted);margin-bottom:12px}
.ph .crumb a:hover{color:var(--navy)}
.ph h1{font-size:clamp(26px,3.4vw,40px);line-height:1.3;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.ph p{margin-top:14px;color:var(--muted);font-size:17px;max-width:52em}

/* ── 섹션 ─────────────────────────────────────────────────── */
.sec{padding:clamp(56px,7vw,88px) 0}
.sec.tint{background:#FBFCFC;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec h2{font-size:clamp(23px,2.9vw,34px);line-height:1.35;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin-bottom:14px}
.sec h3{font-size:20px;font-weight:700;color:var(--navy);margin-bottom:10px}
.sec .lead{font-size:17px;color:var(--muted);max-width:56em;margin-bottom:36px}
.sec p{margin-bottom:14px}
.hl{color:var(--gold);font-weight:800}          /* 강조는 색만 (밑줄·형광펜 금지) */
.hl-navy{color:var(--navy);font-weight:800}

/* ── 인용 헤드라인 (하나 리빙트러스트 장치) ───────────────── */
.quote{padding:clamp(56px,7vw,88px) 0;text-align:center}
.quote q{
  display:block;max-width:22em;margin:0 auto;quotes:'“' '”';
  font-size:clamp(22px,3vw,34px);line-height:1.55;font-weight:700;color:var(--navy);letter-spacing:-.02em;
}
.quote q::before,.quote q::after{color:var(--gold);font-weight:800}
.quote .by{margin-top:18px;font-size:14px;color:var(--muted)}

/* ── 관계 도식 (인물+화살표+역할 라벨) ────────────────────── */
.flow{display:flex;align-items:flex-start;justify-content:center;gap:8px;flex-wrap:wrap}
.flow .node{flex:0 0 auto;width:168px;text-align:center}
.flow .disc{
  width:96px;height:96px;margin:0 auto 14px;border-radius:50%;
  border:1.5px solid var(--navy);display:flex;align-items:center;justify-content:center;
}
.flow .node.acc .disc{border-color:var(--gold);background:var(--gold-soft)}
.flow .disc svg{width:40px;height:40px;stroke:var(--navy);fill:none;stroke-width:1.6}
.flow .node.acc .disc svg{stroke:var(--gold)}
.flow .nm{font-weight:700;color:var(--navy);font-size:16px;margin-bottom:4px}
.flow .de{font-size:13.5px;color:var(--muted);line-height:1.55}
.flow .arw{flex:0 0 auto;align-self:center;margin-top:-38px;color:var(--line)}
.flow .arw svg{width:44px;height:14px;stroke:#B9C2C8;stroke-width:1.4;fill:none}

/* ── 카드 (그림자 없음 — 1px 보더로만 분리, flat 확정) ────── */
.cards{display:grid;gap:20px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.card{border:1px solid var(--line);border-radius:var(--r-card);padding:28px;background:#fff}
.card .num{
  width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;margin-bottom:16px;
}
.card p{color:var(--muted);font-size:15.5px;margin:0}

/* ── 등식 카드 (A+B+C — '+' 없으면 스킬 §9.C 위반) ────────── */
.eq{display:flex;align-items:stretch;justify-content:center;gap:0;flex-wrap:wrap}
.eq .card{flex:1 1 240px;max-width:300px}
.eq .plus{
  flex:0 0 auto;align-self:center;padding:0 16px;
  font-size:30px;font-weight:300;color:var(--navy-2);line-height:1;
}

/* ── 3열 비교 (hairline만 — border 남발 금지 스킬 §9.F) ───── */
.cmp{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0}
.cmp .col{padding:28px 30px}
.cmp .col + .col{border-left:1px solid var(--line)}
.cmp .col h3{font-size:17px;margin-bottom:16px}
.cmp .col.on h3{color:var(--gold)}
.cmp ul{list-style:none}
.cmp li{position:relative;padding-left:16px;margin-bottom:10px;font-size:15px;color:var(--muted)}
.cmp li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:var(--line)}
.cmp .col.on li::before{background:var(--gold)}

/* ── 미디어 (이미지 좌우 배치, 비율 유지 cover) ───────────── */
.media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.media.rev .mtx{order:2}
.media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-card)}
.media img.wide{aspect-ratio:16/9}
.media .mtx h2{margin-bottom:14px}
.media .mtx p{color:var(--muted)}

.figure{width:100%;border-radius:var(--r-card);overflow:hidden}
.figure img{width:100%;aspect-ratio:16/9;object-fit:cover}
.figure .cap{margin-top:14px;font-size:14px;color:var(--muted)}

/* ── 고지 박스 (웜 베이지 = 고지 전용 배역 — 인카 근거) ───── */
.note{background:var(--gold-soft);border-radius:var(--r-card);padding:26px 30px}
.note b{display:block;color:var(--navy);font-size:15px;margin-bottom:10px}
.note ul{list-style:none}
.note li{position:relative;padding-left:14px;font-size:14.5px;color:#6B6152;margin-bottom:7px;line-height:1.65}
.note li::before{content:"";position:absolute;left:0;top:10px;width:4px;height:4px;border-radius:50%;background:var(--gold)}
.note li:last-child{margin-bottom:0}

/* ── CTA 밴드 (다크 = 북엔드 한정, 테마 전환 아님) ────────── */
.cta{background:var(--navy);padding:clamp(56px,7vw,80px) 0;text-align:center}
.cta h2{font-size:clamp(23px,2.9vw,34px);font-weight:800;color:#fff;margin-bottom:14px;letter-spacing:-.02em}
.cta p{color:rgba(255,255,255,.76);margin-bottom:28px;font-size:16.5px}
.cta .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── 다음 페이지 안내 ─────────────────────────────────────── */
.next{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-weight:700;font-size:15.5px;margin-top:8px}
.next::after{content:"→";color:var(--gold)}
.next:hover{color:var(--gold)}

/* ── 푸터 ─────────────────────────────────────────────────── */
.ft{border-top:1px solid var(--line);padding:44px 0 56px;background:#FBFCFC}
.ft .top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:26px}
.ft .fl{display:flex;gap:26px;flex-wrap:wrap}
.ft .fl a{font-size:14px;color:var(--muted)}
.ft .fl a:hover{color:var(--navy)}
.ft .biz{font-size:13px;color:#8A959B;line-height:1.9}
.ft .biz strong{color:var(--muted);font-weight:600}
.ft .cp{font-size:12.5px;color:#A6AFB4;margin-top:18px}
.ver{font-size:12px;color:#B7BFC4;margin-top:6px}

/* ── 반응형 (모바일 명시 — 스킬 §4.7) ─────────────────────── */
@media (max-width:860px){
  .nav{
    display:none;position:absolute;top:72px;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:8px 24px 18px;
  }
  .nav.open{display:flex}
  .nav a{width:100%;padding:13px 0;border-bottom:1px solid var(--line);font-size:16px}
  .hd .btn{width:100%;margin:12px 0 0}
  .burger{display:block}
  .cards.c2,.cards.c3{grid-template-columns:1fr}
  .cmp{grid-template-columns:1fr}
  .cmp .col + .col{border-left:0;border-top:1px solid var(--line)}
  .media{grid-template-columns:1fr}
  .media.rev .mtx{order:0}
  .eq .plus{padding:6px 0;width:100%;text-align:center}
  .eq .card{max-width:none;flex-basis:100%}
  .flow .arw{display:none}
  .flow{gap:28px}
  .flow .node{width:100%;max-width:260px}
  .hero.right .wrap{justify-content:flex-start}
  .hero::after,.hero.right::after{background:linear-gradient(180deg,rgba(12,20,28,.42) 0%,rgba(12,20,28,.78) 100%)}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}