/* 디어드라이브 대리운전 — 공통 스타일
   회사소개서·비교표와 같은 팔레트를 씁니다. */
:root{
  --paper:#F2F1ED; --surface:#FFFFFF; --surface-2:#EAE9E5;
  --ink:#12191A; --ink-2:#33403E; --muted:#5F686B; --dim:#9AA1A3;
  --naver:#03C75A; --naver-d:#02B350;
  --line:#D5D4CF; --line-2:#C2C1BB; --edge:#B9B8B1;
  --brand:#1B2426;
  --sand:#EDE6D9; --sandline:#CEC0A5; --gold:#7A6A4E;
  --ok:#2E6B4F; --ok-bg:#E4EFE9;
  --head:#7C8486;
  /* 🔴 기기가 다크 모드여도 브라우저가 폼·스크롤바를 반전시키지 않게 한다. */
  color-scheme:light;
}
/* 🔴 다크 모드 비활성 — 항상 크림색(라이트)으로 고정한다. 준님 결정 2026-09-14.
   아이폰이 다크 모드면 브라우저가 아래 규칙을 자동 적용해 사이트가 검게 보였다.
   소개서·명함 등 인쇄물과 색을 맞추기 위해 기기 설정과 무관하게 한 가지 화면만 쓴다.

   규칙 본문은 지우지 않고 남겨 두었다. 되살리려면 아래 4곳의
     @media (prefers-color-scheme:dark) and (min-width:100000px)
   에서 " and (min-width:100000px)" 만 지우면 그대로 돌아온다.
   :root 의 color-scheme:light 도 함께 지워야 한다(폼·스크롤바 자동 반전 차단용). */
@media (prefers-color-scheme:dark) and (min-width:100000px){:root:not([data-theme="light"]){
  --paper:#12100D; --surface:#1A1917; --surface-2:#232220;
  --ink:#F0EEE8; --ink-2:#CFCCC4; --muted:#9A968D; --dim:#98938A;
  --naver:#03C75A; --naver-d:#02B350;
  --line:#2E2C29; --line-2:#3D3A36; --edge:#454239;
  --brand:#0E1213;
  --sand:#2A2419; --sandline:#4A3F2B; --gold:#C4AC7C;
  --ok:#7FC49F; --ok-bg:#1A2A22;
  --head:#5C6264;
}}
:root[data-theme="dark"]{
  --paper:#12100D; --surface:#1A1917; --surface-2:#232220;
  --ink:#F0EEE8; --ink-2:#CFCCC4; --muted:#9A968D; --dim:#98938A;
  --naver:#03C75A; --naver-d:#02B350;
  --line:#2E2C29; --line-2:#3D3A36; --edge:#454239;
  --brand:#0E1213;
  --sand:#2A2419; --sandline:#4A3F2B; --gold:#C4AC7C;
  --ok:#7FC49F; --ok-bg:#1A2A22;
  --head:#5C6264;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Noto Sans KR",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;
  letter-spacing:-.015em;word-break:keep-all;overflow-wrap:break-word}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}

/* ── 헤더 ── */
.gnb{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.gnb-in{max-width:1080px;margin:0 auto;padding:0 24px;height:78px;
  display:flex;align-items:center;gap:26px}
/* 🔴 헤더 안쪽 폭 = 아래 「선택하는 이유」 카드 4개(.why)의 폭과 정확히 같게 맞춘다.
   (준님 지시 2026-09-12: "로고 및 문의를 아래 네상자와 맞춰라. 상자는 건들지 마라")
   .why 는 .wrap(본문 1032px) 에서 breakpoint 별로 바깥으로 나간다:
     ~1219px      : 1032px            → .gnb-in 1080 - 48 = 1032 ✓ (기본값)
     1220~1359px  : 1032 + 62×2 =1156 → .gnb-in 1204 - 48 = 1156 ✓
     1360px~      : 1032 +100×2 =1232 → .gnb-in 1280 - 48 = 1232 ✓
   .why 의 margin-inline 을 고치면 이 숫자도 같이 고쳐야 한다. */
@media(min-width:1200px){
  /* 로고는 왼쪽 끝, 문의는 오른쪽 끝, 메뉴는 그 사이의 가운데.
     🔴 화면 정가운데(grid 1fr auto 1fr)로 두면 안 된다 —
     오른쪽 덩어리(대표문의+버튼 약 200px)가 왼쪽 로고(80px)보다 넓어서
     `로고→메뉴` 간격이 `메뉴→문의`보다 벌어져 보인다(준님 지적 2026-09-12).
     .nav 가 남은 공간을 전부 먹고 그 안에서 가운데 정렬하면 안쪽 간격이 같아진다. */
  .gnb-in .nav{flex:1;margin-left:0;justify-content:center}
}
@media(min-width:1220px){.gnb-in{max-width:1204px}}
@media(min-width:1360px){.gnb-in{max-width:1280px}}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.logo img{width:80px;display:block}
.nav{display:flex;gap:22px;margin-left:6px}
.nav a{text-decoration:none;font-size:14.5px;font-weight:600;color:var(--muted);
  letter-spacing:-.02em;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.gnb-cta{margin-left:auto;display:flex;align-items:center;gap:14px;flex:none}
.tel{display:flex;flex-direction:column;line-height:1.15;text-decoration:none}
.tel em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--muted)}
.tel b{font-size:19px;font-weight:800;letter-spacing:-.04em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--ink);color:var(--paper);text-decoration:none;
  font-size:14px;font-weight:700;letter-spacing:-.02em;
  padding:10px 18px;border-radius:9px;border:1px solid var(--ink);white-space:nowrap}
.btn:hover{opacity:.88}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.lg{font-size:15.5px;padding:14px 26px;border-radius:11px}
.mnav{display:none}
@media(max-width:1080px){
  .nav{display:none}
  .gnb-in{height:68px;gap:14px}
  .logo img{width:70px}
  .tel b{font-size:17px}
  .btn{padding:9px 14px;font-size:13px}
  .mnav{display:block;border-top:1px solid var(--line);overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .mnav::-webkit-scrollbar{display:none}
  .mnav-in{display:flex;gap:18px;padding:11px 24px;white-space:nowrap;width:max-content}
  .mnav a{text-decoration:none;font-size:13.5px;font-weight:600;color:var(--muted);letter-spacing:-.02em}
  .mnav a[aria-current="page"]{color:var(--ink)}
}
@media(max-width:420px){.gnb-cta .tel{display:none}}

/* ── 히어로 ── */
.hero{padding:76px 0 68px;border-bottom:1px solid var(--line)}
.hero .eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.16em;color:var(--gold);
  margin:0 0 18px;text-transform:uppercase}
.hero h1{margin:0 0 22px;font-size:clamp(27px,3.55vw,40px);font-weight:800;
  line-height:1.36;letter-spacing:-.045em}
.hero h1 .nb{white-space:nowrap}
.hero h1 .q{color:var(--muted);font-weight:700}
.hero .sub{margin:0 0 30px;font-size:17px;color:var(--ink-2);max-width:56ch;line-height:1.8}
.hero .acts{display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.asof{font-size:12.5px;color:var(--dim);margin:16px 0 0;letter-spacing:-.01em}

/* ── 지표 ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:38px 0 0}
.stat{background:var(--surface);padding:22px 20px;text-align:center}
.stat b{display:block;font-size:29px;font-weight:800;letter-spacing:-.05em;line-height:1;
  font-variant-numeric:tabular-nums}
.stat b small{font-size:.5em;font-weight:700;margin-left:2px;letter-spacing:-.02em}
.stat span{display:block;font-size:12.5px;color:var(--muted);margin-top:9px;letter-spacing:-.02em}
@media(max-width:720px){.stats{grid-template-columns:1fr 1fr}.stat b{font-size:25px}}

/* ── 섹션 ── */
section{padding:72px 0}
section.alt{background:var(--surface-2)}
.sh{margin:0 0 34px}
.sh .k{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.15em;
  color:var(--gold);text-transform:uppercase;margin-bottom:12px}
.sh h2{margin:0 0 12px;font-size:clamp(23px,3.2vw,31px);font-weight:800;
  letter-spacing:-.04em;line-height:1.35;text-wrap:balance}
.sh p{margin:0;color:var(--ink-2);font-size:16px;max-width:62ch;line-height:1.8}

/* ── 카드 ── */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* 🔴 align-items 를 start 로 두면 같은 줄의 카드가 내용 길이만큼만 자라서
   높이가 제각각이 된다(준님 지적 2026-09-12). 기본값 stretch 로 둔다.
   .card 는 flex column 이라 stretch 여도 내용이 위에서부터 쌓이고,
   .price/.more 가 margin-top:auto 로 바닥에 붙어 오히려 의도대로 동작한다. */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:860px){.grid3,.grid2{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--edge);border-radius:15px;
  padding:26px 24px;display:flex;flex-direction:column}
.card .ic{width:40px;height:40px;border-radius:11px;background:var(--brand);
  display:grid;place-items:center;margin-bottom:17px;flex:none}
.card .ic svg{width:20px;height:20px;fill:var(--paper)}
.card h3{margin:0 0 9px;font-size:18.5px;font-weight:800;letter-spacing:-.035em}
.card p{margin:0 0 16px;font-size:14.5px;color:var(--ink-2);line-height:1.72}
.card .price{margin-top:auto;padding-top:15px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted);letter-spacing:-.02em}
.card .price b{color:var(--ink);font-weight:800;font-size:16px;letter-spacing:-.04em}
.card a.more{margin-top:14px;font-size:13.5px;font-weight:700;color:var(--gold);
  text-decoration:none;letter-spacing:-.02em}
.card a.more:hover{text-decoration:underline}

/* ── 표 ── */
.tw{overflow-x:auto;border:1px solid var(--edge);border-radius:14px;background:var(--surface)}
/* 가로로 넘치는 표 — 밀 수 있다는 신호. data-x 는 foot() 스크립트가 붙인다 */
.tw{position:relative}
.tw[data-x]{box-shadow:inset -18px 0 16px -18px rgba(18,25,26,.42)}
.tw[data-x="end"]{box-shadow:inset 18px 0 16px -18px rgba(18,25,26,.42)}
.tw[data-x="mid"]{box-shadow:inset 18px 0 16px -18px rgba(18,25,26,.42),
                             inset -18px 0 16px -18px rgba(18,25,26,.42)}
.sec.dark .tw[data-x]{box-shadow:inset -18px 0 16px -18px rgba(0,0,0,.75)}
.sec.dark .tw[data-x="end"]{box-shadow:inset 18px 0 16px -18px rgba(0,0,0,.75)}
.sec.dark .tw[data-x="mid"]{box-shadow:inset 18px 0 16px -18px rgba(0,0,0,.75),
                                       inset -18px 0 16px -18px rgba(0,0,0,.75)}
/* 표 위 안내 — 넘칠 때만, 좁은 화면에서만 */
.tw[data-x]::before{content:"좌우로 밀어 보세요";position:sticky;left:0;top:0;
  display:none;padding:7px 16px 0;font-size:12px;font-weight:600;letter-spacing:-.02em;
  color:var(--muted)}
.sec.dark .tw[data-x]::before{color:rgba(239,237,231,.6)}
@media(max-width:860px){.tw[data-x]::before{display:block}}
@media(prefers-reduced-motion:reduce){.tw{scroll-behavior:auto}}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:14.5px;min-width:520px}
thead th{background:var(--head);color:#F2F1ED;font-size:13px;font-weight:800;
  padding:13px 14px;text-align:left;letter-spacing:-.02em;white-space:nowrap}
tbody td,tbody th{padding:13px 14px;border-top:1px solid var(--line);
  color:var(--ink-2);text-align:left;font-weight:400}
tbody th{font-weight:700;color:var(--ink);white-space:nowrap}
td.amt,th.amt{text-align:right;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;white-space:nowrap}
tbody tr.hi{background:var(--sand)}
/* 🔴 등급 표의 「추가 시간」 행 — 등급 선택지가 아니라 초과 요금 규칙이다.
   STANDARD·PREMIUM 은 같은 성격이므로 같은 배경(강조 없음)을 쓰고,
   성격이 다른 이 행만 한 단계 낮춘 회색 + 굵은 경계로 구분한다.
   (준님 지적 2026-09-15: 등급 한쪽만 강조돼 색 조합이 어긋나 보였다.
    되돌리려면 PREMIUM 행에 class="hi" 를 다시 붙이면 된다 — 권하지 않는다.) */
tbody tr.rule{background:var(--paper);border-top:2px solid var(--line-2)}
tbody tr.rule th,tbody tr.rule td{color:var(--ink-2)}
tbody tr.rule .sub2,tbody tr.rule span{color:var(--muted)}
tbody tr.hi td,tbody tr.hi th{color:var(--ink)}
caption{caption-side:top;text-align:left;padding:15px 16px 13px;font-size:14px;
  font-weight:700;color:var(--ink);letter-spacing:-.03em;
  border-bottom:1px solid var(--line)}
.sec.dark caption{color:#FFF;border-bottom-color:rgba(244,242,238,.14)}

/* ── 모바일: 넓은 표를 카드로 쌓는다 ──
   가로 스크롤은 요금을 찾는 사람에게 최악이다. HTML 은 그대로 <table> 이라
   검색엔진·AI 는 표로 읽고, 화면에서만 행 하나가 카드 하나가 된다.
   각 <td> 의 data-l 이 열 이름을 대신한다. */
@media(max-width:860px){
  .tw.stackw{overflow:visible;border:0;background:none;border-radius:0}
  .tw.stackw[data-x]{box-shadow:none}
  .tw.stackw[data-x]::before{display:none}
  .tw.stackw + .tw.stackw{margin-top:22px}

  table.stack{min-width:0;width:100%}
  table.stack thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  table.stack,table.stack tbody,table.stack tr,table.stack th,table.stack td{
    display:block;width:auto}
  table.stack caption{display:block;width:auto;padding:0 2px 12px;border-bottom:0;
    font-size:15px;text-align:left}
  table.stack caption .cnote{display:block;margin:4px 0 0;line-height:1.5}

  table.stack tbody tr{border:1px solid var(--edge);border-radius:13px;
    background:var(--surface);padding:15px 16px 6px;margin:0 0 10px}
  table.stack tbody tr.hi{background:var(--sand)}
  table.stack tbody tr.rule{background:var(--paper);border-top:2px solid var(--line-2)}
  table.stack tbody th{padding:0 0 11px;border:0;text-align:left;
    font-size:15.5px;font-weight:800;color:var(--ink);letter-spacing:-.03em;
    white-space:normal;word-break:keep-all}
  table.stack tbody td{padding:9px 0;border:0;border-top:1px solid var(--line);
    text-align:left;font-size:14px;line-height:1.6;color:var(--ink-2);
    display:flex;gap:16px;align-items:baseline;justify-content:space-between}
  table.stack tbody td::before{content:attr(data-l);flex:0 0 auto;
    font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:-.01em;
    white-space:nowrap;padding-top:1px}
  table.stack tbody td.amt{font-weight:800;color:var(--ink);text-align:right}
  /* 설명처럼 긴 칸은 라벨 아래로 내려 쓴다 */
  table.stack tbody td:not(.amt){flex-direction:column;gap:4px;
    align-items:flex-start;word-break:keep-all}

  /* 2열 표는 쌓을 필요가 없다 — 좁아지기만 하면 된다.
     tbody th 의 nowrap 을 풀어야 실제로 줄어든다(금액 칸은 그대로 nowrap). */
  table:not(.stack){min-width:0}
  table:not(.stack) tbody th{white-space:normal;word-break:keep-all}
  table:not(.stack) thead th{white-space:normal;word-break:keep-all}

  /* 다크 섹션 카드 */
  .sec.dark table.stack tbody tr{border-color:rgba(244,242,238,.16);
    background:rgba(255,255,255,.04)}
  .sec.dark table.stack tbody tr.hi{background:rgba(201,180,137,.13)}
  .sec.dark table.stack tbody th{color:#FFF}
  .sec.dark table.stack tbody td{color:rgba(239,237,231,.82);
    border-top-color:rgba(244,242,238,.13)}
  .sec.dark table.stack tbody td::before{color:rgba(239,237,231,.6)}
  .sec.dark table.stack tbody td.amt{color:#FFF}
}

/* ── FAQ ── */
.qa{border:1px solid var(--edge);border-radius:15px;background:var(--surface);overflow:hidden}
.qa-i{padding:24px 26px;border-top:1px solid var(--line)}
.qa-i:first-child{border-top:0}
.qa-i h3{margin:0 0 10px;font-size:17px;font-weight:800;letter-spacing:-.035em;
  display:flex;gap:11px;align-items:baseline}
.qa-i h3::before{content:"Q";flex:none;font-size:12px;font-weight:800;color:var(--gold);
  letter-spacing:0;transform:translateY(-1px)}
.qa-i p{margin:0 0 10px 23px;font-size:15px;color:var(--ink-2);line-height:1.8}
.qa-i p:last-child{margin-bottom:0}

/* ── 알림 박스 ── */
.callout{margin:22px 0 0;padding:19px 22px;border-radius:13px;background:var(--sand);
  border:1px solid var(--sandline);font-size:14.5px;color:var(--ink-2);line-height:1.75}
.callout>b{color:var(--gold);font-weight:800}
.plain{margin:20px 0 0;padding:17px 20px;border-radius:12px;background:var(--surface-2);
  border-left:3px solid var(--line-2);font-size:14px;color:var(--ink-2);line-height:1.7}
.plain b{color:var(--ink);font-weight:700}

/* ── 목록 ── */
/* 체크 목록.
   gap 12px 는 줄 간격(15px x 1.72 = 25.8px)보다 좁아서 항목끼리 안 갈렸다.
   두 줄짜리 항목이 섞이면 어디서 끊기는지 안 보인다 → 항목 사이를 줄 간격보다 넓게 둔다. */
ul.ticks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:20px}
ul.ticks li{position:relative;padding-left:28px;font-size:15.5px;color:var(--ink-2);line-height:1.75}

/* 목록이 길면 묶어서 소제목을 단다 — '언제 하는 일인지'가 먼저 보이게 */
.tgrp + .tgrp{margin-top:26px}
.tgl{margin:0 0 13px;font-size:12.5px;font-weight:800;letter-spacing:.1em;color:var(--gold)}
ul.ticks li::before{content:"";position:absolute;left:0;top:9px;width:13px;height:8px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(-45deg)}
ul.ticks li b{color:var(--ink);font-weight:700}

/* ── CTA 밴드 ── */
.band{background:var(--brand);color:var(--paper);border-radius:18px;padding:44px 44px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.band h2{margin:0 0 11px;font-size:clamp(21px,2.8vw,27px);font-weight:800;
  letter-spacing:-.04em;line-height:1.45}
.band p{margin:0;font-size:15px;color:rgba(242,241,237,.62);line-height:1.7;max-width:46ch}
.band .box{background:var(--paper);color:var(--ink);border-radius:14px;
  padding:20px 30px;text-align:center;flex:none}
.band .box em{font-style:normal;display:block;font-size:11px;font-weight:800;
  letter-spacing:.15em;color:var(--muted);margin-bottom:5px}
.band .box b{display:block;font-size:32px;font-weight:800;letter-spacing:-.045em;line-height:1.05}
.band .box span{display:block;font-size:12.5px;color:var(--muted);margin-top:5px}

/* ── 푸터 ── */
footer{background:var(--brand);color:var(--paper);padding:52px 0 40px;margin-top:0}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;padding-bottom:32px;
  border-bottom:1px solid rgba(242,241,237,.14)}
@media(max-width:800px){.fgrid{grid-template-columns:1fr;gap:26px}}
.fgrid img{width:104px;margin-bottom:15px}
.fgrid p{margin:0;font-size:13.5px;color:rgba(242,241,237,.62);line-height:1.8}
.fcol .fh{margin:0 0 13px;font-size:11px;font-weight:800;letter-spacing:.14em;
  color:rgba(242,241,237,.45);text-transform:uppercase}
.fcol a{display:block;text-decoration:none;font-size:14px;color:rgba(242,241,237,.82);
  margin-bottom:9px;letter-spacing:-.02em}
.fcol a:hover{color:var(--paper)}
.biz{padding-top:24px;font-size:12.5px;color:rgba(242,241,237,.42);line-height:1.85;
  letter-spacing:-.01em}
.biz b{color:rgba(242,241,237,.66);font-weight:700}

.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:99;background:var(--brand);color:var(--paper);
  padding:10px 16px;border-radius:8px}

/* ═══════════════════════════════════════════════════
   v2 — 사진 히어로 · 비대칭 레이아웃 · 은은한 모션
   ═══════════════════════════════════════════════════ */

/* ── 스크롤 등장 ── */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ── 히어로 (사진 위) ── */
/* 🔴 히어로는 첫 화면을 꽉 채운다. 고정 높이를 쓰면 세로로 긴 화면에서
   아래에 다음 섹션이 띠처럼 비쳐 보인다(2026-09-12 실제 발생).
   svh 는 모바일 주소창 때문에 높이가 출렁이는 것을 막는다. */
.hero2{position:relative;min-height:100vh;min-height:100svh;
  display:flex;align-items:flex-end;
  overflow:hidden;background:#0C1011;isolation:isolate}
.hero2 .bg{position:absolute;inset:0;z-index:-2}
.hero2 .bg img{width:100%;height:100%;object-fit:cover;display:block;
  animation:kb 26s ease-out forwards}
@keyframes kb{from{transform:scale(1.09)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.hero2 .bg img{animation:none}}
.hero2::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,11,12,.72) 0%,rgba(8,11,12,.50) 38%,rgba(8,11,12,.86) 100%)}
.hero2 .in2{position:relative;width:100%;max-width:1080px;margin:0 auto;
  padding:126px 24px 108px;color:#F4F2EE}
.hero2 .eyebrow{font-size:11px;font-weight:800;letter-spacing:.2em;color:#C9B489;
  margin:0 0 20px;text-transform:uppercase}
/* h1 은 항상 한 줄이라 line-height 가 글자 위아래 빈 공간으로만 쌓인다.
   1.4 → 1.15 로 줄여 슬로건과의 '보이는' 간격을 좁혔다(음수 margin 대신).
   대신 아래 정의문과의 간격이 같이 줄어드므로 margin-bottom 을 22 → 29 로 보정했다. */
.hero2 h1{margin:0 0 29px;font-size:clamp(29px,4.3vw,55px);font-weight:800;
  line-height:1.15;letter-spacing:-.045em;color:#FFF;
  text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero2 h1 .nb{white-space:nowrap}
.hero2 h1 .lead{display:block;color:#DFD9CC;font-size:.72em;font-weight:700;
  margin-bottom:10px;letter-spacing:-.03em}
.hero2 .sub{margin:0 0 34px;font-size:18.5px;color:rgba(244,242,238,.80);
  max-width:52ch;line-height:1.85}
.hero2 .acts{display:flex;gap:11px;flex-wrap:wrap}
.hero2 .btn{background:#F4F2EE;color:#12191A;border-color:#F4F2EE}
.hero2 .btn.ghost{background:rgba(255,255,255,.06);color:#F4F2EE;
  border-color:rgba(244,242,238,.34);backdrop-filter:blur(6px)}
@media(max-width:700px){.hero2{min-height:0}.hero2 .in2{padding:96px 24px 92px}
  .hero2 .in2 .sub{font-size:17px}}
@media(min-width:701px) and (max-height:860px){
  .hero2 .in2{padding-top:100px}   /* padding-bottom 은 아래 clamp 규칙이 담당 */
}
/* 1366×768 같은 짧은 노트북 화면 — 글자와 지표를 한 단계 줄여 한 화면에 넣는다 */
@media(min-width:701px) and (max-height:790px){
  .hero2 h1{font-size:clamp(27px,3.6vw,46px);margin-bottom:16px}
  /* 🔴 .hero2 .lead 본 규칙이 파일 아래쪽(히어로 슬로건 절)에 있어
     같은 명시도로 쓰면 나중 규칙이 이긴다. .in2 를 끼워 명시도를 올린다. */
  .hero2 .in2 .lead{font-size:clamp(16px,1.9vw,21px);margin-bottom:4px}
  .hero2 .in2 .sub{font-size:17.5px;margin-bottom:24px}
  .hero2 .statsbar .s{padding:18px 14px}
  .hero2 .statsbar b{font-size:26px}
  .hero2 .statsbar .s>span{margin-top:7px}
  .hero2 .statsbar .asof{margin-top:10px}
}

/* 히어로에 걸치는 지표 바 */
.statsbar{position:relative;z-index:5;margin:-56px auto 0;max-width:1080px;padding:0 24px}
.statsbar .in3{background:var(--surface);border:1px solid var(--edge);border-radius:16px;
  box-shadow:0 18px 44px -22px rgba(10,14,15,.42);
  display:grid;grid-template-columns:repeat(4,1fr)}
.statsbar .s{padding:26px 18px;text-align:center;border-left:1px solid var(--line)}
.statsbar .s:first-child{border-left:0}
.statsbar b{display:block;font-size:32px;font-weight:800;letter-spacing:-.055em;
  line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.statsbar b small{font-size:.46em;font-weight:700;margin-left:2px;letter-spacing:-.02em}
.statsbar .s>span{display:block;font-size:12.5px;color:var(--muted);margin-top:10px;letter-spacing:-.02em}
.statsbar b>span{display:inline}
@media(max-width:760px){
  .statsbar{margin-top:-40px}
  .statsbar .in3{grid-template-columns:1fr 1fr}
  .statsbar .s:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .statsbar .s:nth-child(odd){border-left:0}
  .statsbar b{font-size:26px}
}

/* ── 섹션 리듬 ── */
.sec{padding:96px 0}
.sec.tight{padding:64px 0}
.sec.dark{background:var(--brand);color:#EFEDE7}
.sec.dark .sh h2{color:#FFF}
.sec.dark .sh p{color:rgba(239,237,231,.68)}
.sec.dark .k2{color:#C9B489}
.k2{display:block;font-size:12px;font-weight:800;letter-spacing:-.02em;
  color:var(--gold);margin-bottom:14px}
.k2::before{content:"";display:inline-block;width:22px;height:1.5px;background:currentColor;
  vertical-align:middle;margin-right:9px;transform:translateY(-2px)}

/* 제목 왼쪽 · 설명 오른쪽 2단 헤더 */
.sh2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin:0 0 44px}
.sh2 h2{margin:0;font-size:clamp(24px,3.1vw,33px);font-weight:800;
  letter-spacing:-.045em;line-height:1.4}
.sh2 p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.85}
.sec.dark .sh2 h2{color:#FFF}
.sec.dark .sh2 p{color:rgba(239,237,231,.66)}
@media(max-width:820px){.sh2{grid-template-columns:1fr;gap:16px;align-items:start;margin-bottom:32px}}

/* ── 비대칭 서비스 타일 ── */
.svc{display:grid;grid-template-columns:1.28fr 1fr;gap:15px}
.svc .col{display:grid;gap:15px}
@media(max-width:880px){.svc{grid-template-columns:1fr}}
.tile{position:relative;overflow:hidden;border-radius:17px;background:#131819;
  color:#F4F2EE;text-decoration:none;display:flex;flex-direction:column;
  justify-content:flex-end;min-height:250px;isolation:isolate}
.tile.big{min-height:516px}
@media(max-width:880px){.tile.big{min-height:340px}}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .85s cubic-bezier(.22,.61,.36,1)}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,14,15,.12) 0%,rgba(10,14,15,.52) 44%,rgba(10,14,15,.93) 100%)}
.tile:hover img{transform:scale(1.055)}
@media(prefers-reduced-motion:reduce){.tile:hover img{transform:none}}
.tile .t{padding:30px 30px 28px}
.tile .num{font-size:11px;font-weight:800;letter-spacing:.16em;
  color:rgba(244,242,238,.55);margin:0 0 12px}
.tile h3{margin:0 0 9px;font-size:clamp(19px,2.2vw,25px);font-weight:800;letter-spacing:-.04em;color:#FFF}
.tile p{margin:0 0 15px;font-size:14.5px;line-height:1.72;color:rgba(244,242,238,.76);max-width:38ch}
.tile .pin{display:flex;align-items:baseline;gap:8px;font-size:13px;
  color:rgba(244,242,238,.62);border-top:1px solid rgba(244,242,238,.2);padding-top:14px}
.tile .pin b{font-size:18px;font-weight:800;color:#FFF;letter-spacing:-.04em}
.tile .go{display:block;margin-top:13px;font-size:13px;font-weight:700;color:#C9B489}

/* ── 어두운 배경 표 ── */
.sec.dark .tw{border-color:rgba(244,242,238,.26);background:rgba(255,255,255,.06)}
.sec.dark thead th{background:rgba(244,242,238,.10);color:#EFEDE7}
.sec.dark tbody td,.sec.dark tbody th{border-top-color:rgba(244,242,238,.30);
  color:rgba(239,237,231,.74)}
.sec.dark tbody th{color:#FFF}
.sec.dark tbody tr.hi{background:rgba(201,180,137,.13)}
.sec.dark tbody tr.hi td,.sec.dark tbody tr.hi th{color:#FFF}
.sec.dark tbody tr.hi b{color:#E3CFA2}
.sec.dark .callout{background:rgba(201,180,137,.10);border-color:rgba(201,180,137,.30);
  color:rgba(239,237,231,.80)}
.sec.dark .callout>b{color:#E3CFA2}
.sec.dark .btn.ghost{color:#EFEDE7;border-color:rgba(244,242,238,.36)}

/* ── 절차 (선으로 잇는 단계) ── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line-2)}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{padding:30px 30px 34px;border-left:1px solid var(--line-2)}
.step:first-child{border-left:0;padding-left:0}
@media(max-width:820px){.step{border-left:0;border-top:1px solid var(--line);padding:26px 0 8px}
  .step:first-child{border-top:0}}
.step .n{display:block;font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--gold);
  margin:-31px 0 20px;background:var(--paper);padding-right:12px;width:max-content}
section.alt .step .n{background:var(--surface-2)}
@media(max-width:820px){.step .n{margin:0 0 12px;background:none;padding:0}}
.step h3{margin:0 0 10px;font-size:18px;font-weight:800;letter-spacing:-.035em}
.step p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.78}

/* ── 사진 분할 섹션 ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:30px}}
.split .pic{border-radius:17px;overflow:hidden;aspect-ratio:4/3;background:#151A1B}
.split .pic img{width:100%;height:100%;object-fit:cover;display:block}
.split h2{margin:0 0 16px;font-size:clamp(23px,2.9vw,31px);font-weight:800;
  letter-spacing:-.045em;line-height:1.4}
.split>div>p{margin:0 0 22px;font-size:15.5px;color:var(--ink-2);line-height:1.85}

/* ── FAQ 아코디언 ── */
details.qd{border-top:1px solid var(--line)}
details.qd:first-of-type{border-top:0}
details.qd summary{list-style:none;cursor:pointer;padding:23px 26px 23px 0;
  font-size:16.5px;font-weight:700;letter-spacing:-.035em;color:var(--ink);
  position:relative;display:block;line-height:1.55}
details.qd summary::-webkit-details-marker{display:none}
details.qd summary::after{content:"";position:absolute;right:2px;top:31px;width:11px;height:11px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .25s ease}
details.qd[open] summary::after{transform:rotate(-135deg)}
details.qd summary:hover{color:var(--gold)}
details.qd .a{padding:0 40px 25px 0;font-size:15px;color:var(--ink-2);line-height:1.85;
  margin:0;max-width:74ch}
.qbox{background:var(--surface);border:1px solid var(--edge);border-radius:16px;padding:2px 26px}

/* ── 요금 2단 ── */
.pricelay{display:grid;grid-template-columns:.95fr 1.25fr;gap:46px;align-items:start}
@media(max-width:900px){.pricelay{grid-template-columns:1fr;gap:28px}}
.pricelay .stick{position:sticky;top:96px}
.pricelay .stick h2{margin:0 0 16px;font-size:clamp(23px,2.7vw,29px);font-weight:800;
  letter-spacing:-.045em;line-height:1.4}
.pricelay .stick p{margin:0 0 20px;font-size:15px;color:var(--ink-2);line-height:1.85}
.pstack{display:grid;gap:15px}

/* ── CTA ── */
.band2{position:relative;overflow:hidden;border-radius:20px;background:var(--brand);
  color:#F0EEE8;padding:52px 48px;display:flex;align-items:center;
  justify-content:space-between;gap:34px;flex-wrap:wrap;isolation:isolate}
.band2::before{content:"";position:absolute;right:-90px;top:-110px;width:380px;height:380px;
  border-radius:50%;background:radial-gradient(circle,rgba(201,180,137,.16),transparent 68%);z-index:-1}
.band2 h2{margin:0 0 12px;font-size:clamp(21px,2.7vw,28px);font-weight:800;
  letter-spacing:-.045em;line-height:1.45;color:#FFF}
.band2 p{margin:0;font-size:15px;color:rgba(240,238,232,.64);line-height:1.75;max-width:44ch}
.band2 .box{background:#F0EEE8;color:#12191A;border-radius:15px;padding:22px 34px;
  text-align:center;flex:none;text-decoration:none;transition:transform .3s ease}
.band2 .box:hover{transform:translateY(-3px)}
.band2 .box em{font-style:normal;display:block;font-size:11px;font-weight:800;
  letter-spacing:.16em;color:#5F686B;margin-bottom:6px}
.band2 .box b{display:block;font-size:33px;font-weight:800;letter-spacing:-.05em;line-height:1.05}
.band2 .box span{display:block;font-size:12.5px;color:#5F686B;margin-top:6px}
@media(max-width:700px){.band2{padding:36px 26px}.band2 .box{width:100%}}

/* ── 카드 hover ── */
.card{transition:transform .32s cubic-bezier(.22,.61,.36,1),box-shadow .32s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 34px -22px rgba(10,14,15,.34)}
.btn{transition:opacity .2s ease,transform .2s ease}
.btn:active{transform:translateY(1px)}

@media(max-width:900px){.pricelay .stick{position:static}}

/* ═══════════════════════════════════════════════════
   v3 — 배경 영상 히어로 · 우하단 플로팅 버튼
   ═══════════════════════════════════════════════════ */

.hero2 .bg video{width:100%;height:100%;object-fit:cover;display:block}
.hero2 .bg .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero2.playing .bg .poster{opacity:0;transition:opacity .8s ease}
/* 영상이 돌 때는 켄번즈 줌을 끈다 */
.hero2.playing .bg img{animation:none}

/* ── 우하단 플로팅 ── */
.float{position:fixed;right:22px;bottom:22px;z-index:80;
  display:flex;flex-direction:column;gap:9px;width:198px;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .45s ease,transform .45s ease}
.float.on{opacity:1;transform:none;pointer-events:auto}
.float .head{background:var(--brand);border:1px solid rgba(201,180,137,.55);
  border-radius:13px;padding:14px 16px;text-align:center;text-decoration:none;
  box-shadow:0 14px 30px -16px rgba(8,11,12,.6)}
.float .head em{font-style:normal;display:block;font-size:11.5px;font-weight:700;
  color:rgba(240,238,232,.72);margin-bottom:5px;letter-spacing:-.02em}
.float .head b{display:block;font-size:23px;font-weight:800;letter-spacing:-.05em;
  color:#E3CFA2;line-height:1.1;font-variant-numeric:tabular-nums}
.float a.fb{display:flex;align-items:center;justify-content:center;gap:8px;
  border-radius:11px;padding:12px 10px;text-decoration:none;
  font-size:14px;font-weight:700;letter-spacing:-.025em;
  border:1px solid transparent;
  box-shadow:0 10px 22px -14px rgba(8,11,12,.5);
  transition:transform .22s ease,filter .22s ease}
.float a.fb:hover{transform:translateY(-2px);filter:brightness(1.06)}
.float a.fb svg{width:16px;height:16px;flex:none;fill:currentColor}
.fb.tel2{background:var(--brand);color:#F0EEE8;border-color:var(--brand)}
.fb.kko{background:#FEE500;color:#191600}
.fb.blg{background:#03C75A;color:#FFF}
.float .top{background:transparent;color:var(--muted);border:1px solid var(--line-2);
  box-shadow:none;font-size:12.5px;padding:9px 10px}
.float .top:hover{color:var(--ink)}

/* 모바일: 하단 고정 3분할 바 */
@media(max-width:760px){
  .float{right:0;left:0;bottom:0;width:auto;flex-direction:row;gap:0;
    border-top:1px solid rgba(0,0,0,.12);transform:translateY(100%)}
  .float.on{transform:none}
  .float .head,.float .top{display:none}
  .float a.fb{flex:1;border-radius:0;padding:15px 6px;font-size:13.5px;
    box-shadow:none;border:0;border-left:1px solid rgba(0,0,0,.10)}
  .float a.fb:first-of-type{border-left:0}
  .float a.fb:hover{transform:none}
  body{padding-bottom:52px}
}

/* ── v3 보정 ── */
.float a.fb.top{background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(8px);border:1px solid var(--line-2);color:var(--muted);
  box-shadow:0 8px 18px -12px rgba(8,11,12,.4)}
.float a.fb.top:hover{color:var(--ink)}
.float .fbs{display:none}
@media(max-width:760px){
  .float a.fb.top{display:none}
  .float a.fb{font-size:13px;gap:7px;white-space:nowrap}
  .float .ln{display:none}
  .float .fbs{display:inline}
}


@media(max-width:760px){
  .float a.fb{display:grid;grid-auto-flow:column;align-items:center;justify-content:center;
    align-content:center;column-gap:7px;line-height:1.25;padding:0 6px;height:54px}
  .float a.fb svg{width:15px;height:15px}
  body{padding-bottom:54px}
}

/* ── 하위 페이지 머리 ── */
.ph{padding:52px 0 44px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.bc{font-size:13px;color:var(--muted);margin:0 0 18px;letter-spacing:-.02em}
.bc a{text-decoration:none}
.bc a:hover{color:var(--ink)}
.bc span{margin:0 6px;color:var(--dim)}
.ph h1{margin:0 0 18px;font-size:clamp(26px,3.4vw,38px);font-weight:800;
  letter-spacing:-.05em;line-height:1.35}
.ph .lead{margin:0 0 14px;font-size:16.5px;color:var(--ink-2);line-height:1.85;max-width:68ch}
.ph .lead b{color:var(--ink);font-weight:700}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.jump a{font-size:13px;font-weight:600;letter-spacing:-.02em;text-decoration:none;
  color:var(--ink-2);background:var(--surface);border:1px solid var(--line-2);
  border-radius:999px;padding:7px 15px;transition:border-color .2s ease,color .2s ease}
.jump a:hover{border-color:var(--ink);color:var(--ink)}
.cnote{font-weight:400;font-size:12.5px;color:var(--muted);margin-left:8px;letter-spacing:-.01em}
.sec.dark .cnote{color:rgba(239,237,231,.55)}
:target{scroll-margin-top:88px}
@media(max-width:1080px){:target{scroll-margin-top:112px}}

.tw + .tw{margin-top:16px}

/* ── FAQ 그룹 ── */
.qgroup{margin-bottom:44px}
.qgroup:last-child{margin-bottom:0}
.qgroup h2{margin:0 0 18px;font-size:clamp(20px,2.4vw,25px);font-weight:800;
  letter-spacing:-.045em;line-height:1.4}

/* ── 서비스 상세 페이지 ── */
.bandimg{height:clamp(220px,32vw,400px);overflow:hidden;background:#131819}
.bandimg img{width:100%;height:100%;object-fit:cover;display:block}
.sub2{display:block;font-weight:400;font-size:13px;color:var(--muted);margin-top:3px}
.grid2 .card h3{font-size:17.5px}

/* 히어로 슬로건 — H1 밖으로 분리됨 */
.hero2 .lead{margin:0 0 6px;font-size:clamp(19px,2.3vw,26px);font-weight:700;
  letter-spacing:-.04em;color:#DFD9CC;line-height:1.38}

/* ── 시스템 쇼케이스 (예약시스템 화면 목업) ── */
/* 🔴 화면 속 문구는 figcaption 으로 반드시 본문 텍스트에도 적는다.
   핵심 문구를 이미지 안에만 두지 않는다 — AEO 작업기준. */
.shot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.42fr);
  gap:32px;align-items:start;margin:0}
.shot figure{margin:0;min-width:0}
.shot img{display:block;width:100%;height:auto}
/* 🔴 테두리 1px + 넓은 그림자를 같이 쓰지 않는다(impeccable advisory). PC 는 테두리만. */
.shot-pc .fr{border:1px solid var(--line-2);border-radius:14px;overflow:hidden;
  background:var(--surface)}
/* 폰은 베젤이 목업의 핵심이라 두꺼운 테두리를 쓴다 — 헤어라인이 아니므로 위 규칙과 무관. */
.shot-ph .fr{border:9px solid #1B2224;border-radius:30px;overflow:hidden;background:#1B2224}
.shot figcaption{margin:15px 2px 0;font-size:13.5px;line-height:1.72;
  color:var(--muted);letter-spacing:-.025em}
.shot figcaption b{font-weight:800;color:var(--ink)}
.shotnote{margin:24px 0 0;font-size:13px;line-height:1.7;color:var(--dim);letter-spacing:-.025em}
.shotnote b{font-weight:700;color:var(--muted)}
@media (prefers-color-scheme:dark) and (min-width:100000px){
  :root:not([data-theme="light"]) .shot-ph .fr{border-color:#3C4447;background:#3C4447}
}
:root[data-theme="dark"] .shot-ph .fr{border-color:#3C4447;background:#3C4447}
@media(max-width:860px){
  .shot{grid-template-columns:1fr;gap:30px;justify-items:center}
  .shot figure{width:100%}
  .shot-ph{max-width:300px}
  .shot figcaption{text-align:left}
}

/* ── 개인정보처리방침 (법률 문서 한 장) ── */
/* 🔴 개인정보처리방침 링크는 「안내」 목록이 아니라 푸터 맨 아래 사업자정보 줄에 둔다
   (준님 결정 2026-09-12). 보호위 공개 지침의 "다른 고지사항과 구분되게 표시" 요건을
   굵기가 아니라 '위치'로 만족시키는 방식이다 — 목록에서 한 항목만 굵으면 눈에 거슬린다.
   사업자등록번호·주소와 같은 법적 고지끼리 모이므로 문맥도 맞는다.
   .biz 는 본문이 흐린 회색이라 링크만 밝게 + 밑줄로 구분한다. */
.biz .pvl{color:rgba(242,241,237,.72);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(242,241,237,.32)}
.biz .pvl:hover{color:rgba(242,241,237,.95);text-decoration-color:rgba(242,241,237,.7)}
.biz .sep{opacity:.5;margin:0 2px}
.ph .phmeta{margin:14px 0 0;font-size:13.5px;color:var(--muted);letter-spacing:-.02em}
.ph .phmeta b{font-weight:800;color:var(--ink)}
.pv{margin:0 0 42px}
.pv:last-of-type{margin-bottom:34px}
.pv h2{margin:0 0 14px;font-size:clamp(18px,2.1vw,21px);font-weight:800;letter-spacing:-.04em}
.pv p{margin:0 0 12px;font-size:15.5px;line-height:1.85;letter-spacing:-.025em;color:var(--ink-2)}
.pv p:last-child{margin-bottom:0}
.pv b{font-weight:800;color:var(--ink)}
.pv .pnote{font-size:14px;color:var(--muted);line-height:1.8}
.pv .plist{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:9px}
.pv .plist li{position:relative;padding-left:15px;font-size:15.5px;line-height:1.8;
  letter-spacing:-.025em;color:var(--ink-2)}
.pv .plist li::before{content:"";position:absolute;left:0;top:.75em;
  width:5px;height:5px;border-radius:50%;background:var(--gold)}
.pv .tw{margin:16px 0 14px}
.pv .sub2{font-size:12.5px;color:var(--muted)}
/* 🔴 이 페이지의 표는 전부 .stack(모바일에서 카드로 쌓임)을 쓴다.
   .gg5(요금표용)를 쓰면 안 된다 — ① 자간이 -.05em 라 문장 가독성이 떨어지고
   ② 모바일에서 colgroup 고정 폭 때문에 글자가 겹쳐 깨진다(2026-09-12 실제 발생).
   프로젝트 기준: 셀이 숫자면 표(.gg5), 셀이 문장이면 카드(.stack). */
.pv .gg5 th,.pv .gg5 td{letter-spacing:-.02em}
.pv table.stack tbody th .sub2{font-weight:600}
@media(max-width:640px){
  .pv{margin-bottom:34px}
  .pv p,.pv .plist li{font-size:15px}
}

/* ── 발행 주체 · 최종 수정일 ── */
.meta-line{border-top:1px solid var(--line);background:var(--surface-2);
  padding:22px 0 24px}
.meta-line p{margin:0;font-size:13px;color:var(--muted);line-height:1.75;letter-spacing:-.02em}
.meta-line b{color:var(--ink);font-weight:700}
.meta-line time{font-variant-numeric:tabular-nums}
.meta-line a{color:var(--ink);font-weight:700;text-decoration:none}
.meta-line a:hover{text-decoration:underline}
.meta-line .sep{margin:0 9px;color:var(--dim)}
.meta-line .src{margin-top:7px;font-size:12.5px;color:var(--dim);max-width:78ch}

/* ── 복사용 양식 ── */
.tpl{background:var(--surface);border:1px solid var(--edge);border-radius:14px;padding:24px 26px}
.tpl pre{margin:0 0 18px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13.5px;line-height:1.85;color:var(--ink-2);white-space:pre-wrap;
  word-break:keep-all;letter-spacing:-.01em}

/* ── 404 목록 ── */
.nf{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line);max-width:640px}
.nf li{border-bottom:1px solid var(--line)}
.nf a{display:block;padding:15px 2px;text-decoration:none;color:var(--ink)}
.nf a:hover{background:var(--surface)}
.nf b{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em}
.nf span{display:block;margin-top:3px;font-size:13px;color:var(--muted)}

/* ── 고객사 로고 ── */
/* 고객사 줄 제목. 이 섹션에는 h2 가 따로 없어서 이 줄이 제목 노릇을 한다.
   11.5px + 자간 .16em 이라 한글에서 특히 읽기 어려웠다(준님 지적 2026-09-11).
   한글은 자간을 벌릴수록 글자 덩어리가 흩어져 더 안 읽힌다 → 키우고 자간은 좁혔다. */
.ceyebrow{font-size:15px;font-weight:800;letter-spacing:.04em;color:var(--gold);
  margin:0 0 18px;text-transform:uppercase}
@media(max-width:560px){.ceyebrow{font-size:14px}}
.clogos{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:0;padding:0}
.clogos li{flex:0 1 calc(20% - 11.2px);
  background:#FFF;border:1px solid var(--line);border-radius:12px;
  padding:18px 14px 14px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px}
.clogos img{width:130px;height:44px;object-fit:contain;display:block}
.clogos span{font-size:12.5px;font-weight:600;color:var(--ink-2);letter-spacing:-.02em;
  text-align:center;line-height:1.35}

/* ── 지역 검색 (경기·인천 표) ── */
.ffind{margin:0 0 20px;max-width:420px}
.ffind label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);
  margin:0 0 7px;letter-spacing:-.01em}
.ffind input{width:100%;box-sizing:border-box;padding:13px 15px;font:inherit;font-size:15px;
  color:var(--ink);background:var(--surface);border:1px solid var(--edge);border-radius:11px;
  -webkit-appearance:none;appearance:none}
.ffind input::placeholder{color:var(--dim)}
.ffind input:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.fmsg{margin:9px 2px 0;font-size:13px;line-height:1.6;color:var(--muted);word-break:keep-all}
#gg tr[hidden],#gg .tw[hidden]{display:none!important}

/* ── 계약 문의 폼 ── */
.cform{background:var(--surface);border:1px solid var(--edge);border-radius:16px;
  padding:28px 28px 26px;max-width:760px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f{margin:0 0 18px}
.f label,.fset legend{display:block;font-size:13px;font-weight:700;color:var(--ink-2);
  margin:0 0 8px;letter-spacing:-.02em;padding:0}
.req{display:inline-block;margin-left:5px;font-size:11px;font-weight:800;
  color:var(--gold);letter-spacing:0}
.cform input[type=text],.cform input[type=tel],.cform input[type=email],.cform textarea{
  width:100%;box-sizing:border-box;padding:13px 15px;font:inherit;font-size:15px;
  color:var(--ink);background:var(--paper);border:1px solid var(--edge);border-radius:11px;
  -webkit-appearance:none;appearance:none}
.cform textarea{resize:vertical;min-height:120px;line-height:1.65}
.cform input::placeholder,.cform textarea::placeholder{color:var(--dim)}
.cform input:focus,.cform textarea:focus{outline:2px solid var(--gold);outline-offset:1px;
  border-color:var(--gold)}
.fset{border:0;padding:0;margin:0 0 18px;min-width:0}
.opt{margin-left:8px;font-size:12px;font-weight:400;color:var(--muted);letter-spacing:-.01em}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips label{display:inline-flex;align-items:flex-start;gap:10px;margin:0;cursor:pointer;
  padding:13px 17px;border:1px solid var(--edge);border-radius:13px;
  background:var(--paper);font-size:14.5px;font-weight:700;color:var(--ink-2);
  letter-spacing:-.02em}
.chips label > span{display:block}
.chips i{display:block;margin-top:3px;font-style:normal;font-size:12.5px;
  font-weight:400;color:var(--muted);letter-spacing:-.01em;white-space:nowrap}
.chips input{accent-color:var(--gold);width:16px;height:16px;margin:1px 0 0;flex:0 0 16px}
.chips label:has(input:checked){border-color:var(--gold);color:var(--ink);
  background:color-mix(in srgb,var(--gold) 10%,var(--paper))}
.consent{margin:4px 0 20px;padding:16px 18px;border:1px solid var(--line);
  border-radius:12px;background:var(--paper)}
.consent > label{display:flex;align-items:flex-start;gap:10px;margin:0;
  font-size:14px;font-weight:400;color:var(--ink);cursor:pointer;line-height:1.6}
.consent input{accent-color:var(--gold);width:17px;height:17px;margin:2px 0 0;flex:0 0 17px}
.cdetail{margin:9px 0 0 27px;font-size:12.5px;line-height:1.65;color:var(--muted);
  word-break:keep-all}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fsub{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.fsub .btn{margin:0}
.fnote{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted);word-break:keep-all}
.fnote.bad{color:#B3392F}
.fnote a{color:inherit}
.sec.alt .fnote.bad{color:#9E3227}
.fdone{padding:14px 2px}
.fdone b{display:block;font-size:19px;letter-spacing:-.03em;margin:0 0 8px}
.fdone p{margin:0;font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.tplbox{max-width:760px;margin:22px 0 0}
.tplbox summary{cursor:pointer;font-size:13.5px;font-weight:700;color:var(--muted);
  padding:12px 2px;list-style-position:inside}
.tplbox summary:hover{color:var(--ink)}
.tplbox .tpl{margin-top:6px}

/* ── 블로그 본문 ── */
.wrap.narrow{max-width:760px}
/* 글 머리 — 제목+요약만으로 첫 화면을 다 채우면 본문이 없는 것처럼 보인다.
   제목 폭을 넓혀 줄 수를 줄이고, 여백을 좁혀 본문 첫 줄이 화면 안에 걸리게 한다. */
.blogpost h1{max-width:26ch;letter-spacing:-.035em;line-height:1.3;
  font-size:clamp(24px,2.9vw,34px)}
.blogpost .lead{max-width:none;font-size:16px;line-height:1.8;margin-bottom:12px}
.blogpost{padding:44px 0 34px}
.blogpost .asof{margin-top:16px}
.blogpost + .sec{padding-top:36px}
@media(max-width:640px){
  .blogpost{padding:26px 0 20px}
  .blogpost h1{font-size:24px;line-height:1.32}
  .blogpost .lead{font-size:15.5px;line-height:1.72;margin-bottom:11px}
  .blogpost .bc{margin-bottom:12px}
  .blogpost .ceyebrow{margin-bottom:10px}
  .blogpost .asof{margin-top:12px;font-size:12px}
  .blogpost + .sec{padding-top:20px}
}
.bodycopy{font-size:16.5px;line-height:1.85;color:var(--ink-2);word-break:keep-all}
.bodycopy h2{font-size:clamp(20px,2.3vw,25px);line-height:1.35;letter-spacing:-.035em;
  color:var(--ink);margin:52px 0 16px;word-break:keep-all}
.bodycopy h2:first-child{margin-top:0}
.bodycopy p{margin:0 0 18px}
.bodycopy b{color:var(--ink);font-weight:700}
.bodycopy a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--gold);text-decoration-thickness:1.5px}
.bodycopy a:hover{color:var(--gold)}
.bodycopy .ticks{margin:0 0 20px}
.bodycopy .tw{margin:0 0 24px}
.bodycopy table{font-size:15px}
.bodycopy .src{font-size:13px;color:var(--muted);margin:-8px 0 22px;line-height:1.6}
.ask{margin:0 0 26px;padding:6px 0 0}
.ask p{margin:0;padding:16px 20px;font-size:15px;line-height:1.75;
  background:var(--surface);border:1px solid var(--edge)}
.ask p:first-child{border-radius:12px 12px 0 0}
.ask p:last-child{border-radius:0 0 12px 12px;border-top:0;background:var(--paper)}
.ask p:only-child{border-radius:12px}
.ask b{display:block;margin:0 0 5px;font-size:12px;font-weight:800;
  letter-spacing:.06em;color:var(--muted)}
.ask br{display:none}   /* 라벨을 block 으로 만들었으므로 원고의 <br> 은 빈 줄이 된다 */

/* ── 블로그 목록 — 글 수가 1편이든 50편이든 자연스럽게 ── */
.postlist{list-style:none;margin:0;padding:0;max-width:820px}
.postlist li{border-top:1px solid var(--line)}
.postlist li:last-child{border-bottom:1px solid var(--line)}
.postlist a{display:block;padding:30px 4px;text-decoration:none;color:var(--ink);
  transition:padding-left .18s ease}
.postlist a:hover{padding-left:12px}
.postlist a:hover .ptitle{color:var(--gold)}
.pmeta{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-size:12.5px}
.pmeta .pcat{font-weight:800;letter-spacing:.02em;color:var(--gold)}
.pmeta time{color:var(--muted);font-variant-numeric:tabular-nums}
.postlist .ptitle{margin:0 0 10px;font-size:clamp(19px,2.1vw,23px);font-weight:800;
  line-height:1.38;letter-spacing:-.035em;word-break:keep-all;transition:color .18s ease}
.postlist .pdesc{margin:0 0 12px;font-size:14.5px;line-height:1.72;color:var(--muted);
  max-width:62ch;word-break:keep-all}
.postlist .pmore{font-size:13px;font-weight:700;color:var(--ink-2)}
@media(max-width:640px){
  .postlist a{padding:24px 2px}
  .postlist a:hover{padding-left:2px}
  .postlist .pdesc{font-size:14px}
}
.midcta{margin:34px 0;padding:22px 24px;background:var(--sand);border-radius:14px}
.midcta p{margin:0;font-size:15.5px;line-height:1.75;color:var(--ink)}
@media(max-width:640px){
  .bodycopy{font-size:16px;line-height:1.8}
  .bodycopy h2{margin:42px 0 14px}
  .ask{padding:17px 18px;border-radius:0 11px 11px 0}
  .midcta{padding:19px 18px}
}
@media(max-width:640px){
  .chips{flex-direction:column;gap:9px}
  .chips label{width:100%;box-sizing:border-box}
  .cform{padding:22px 18px 20px;border-radius:14px}
  .frow{grid-template-columns:1fr;gap:0}
  .fsub{gap:14px}
  .fsub .btn{width:100%;justify-content:center}
}

/* ── 경기·인천 5열 요금표 ──
   39개 지역을 카드로 쌓으면 세로가 8,000px 가까이 된다. 표를 유지하고
   모바일에서만 압축한다: 헤더는 짧은 이름, 금액은 '원'을 접고 캡션에 단위를 적는다. */
.gg5 .sm,.gg5 .unit{display:none}
.gg5 i,.gg5 .unit{font-style:normal}
@media(max-width:640px){
  .gg5{min-width:0;font-size:12px;table-layout:fixed;width:100%}
  .gg5 .lg{display:none}
  .gg5 .sm{display:inline}
  .gg5 .unit{display:inline}
  .gg5 td.amt i{display:none}
  .gg5 thead th{padding:9px 5px;font-size:11px;letter-spacing:-.04em;
    white-space:nowrap;text-align:center}
  .gg5 thead th:first-child{text-align:left;padding-left:11px}
  .gg5 tbody th{padding:10px 4px 10px 11px;font-size:12px;font-weight:700;
    letter-spacing:-.05em;white-space:normal;word-break:keep-all;line-height:1.35}
  .gg5 tbody td{padding:10px 5px;font-size:12.5px;font-weight:700;
    letter-spacing:-.05em;text-align:center;white-space:nowrap}
  .gg5 col.reg{width:33%}
  .gg5 col.p{width:16.75%}
  /* 3열(전국 장거리) — 지역 이름이 길어 지역 칸을 넓게 */
  .gg5.t3 col.reg{width:52%}
  .gg5.t3 col.p{width:24%}
  .gg5.t3 tbody th{font-size:12.5px;line-height:1.5;letter-spacing:-.03em}
  .gg5.t3c tbody th{letter-spacing:-.03em}
  .gg5.t3 thead th{font-size:11.5px}

  /* 3열(추가요금) — 조건이 문장이라 줄바꿈을 허용한다 */
  .gg5.t3c col.a{width:27%}
  .gg5.t3c col.b{width:43%}
  .gg5.t3c col.c{width:30%}
  .gg5.t3c thead th{font-size:11.5px;text-align:left;padding-left:8px}
  .gg5.t3c thead th.amt{text-align:right;padding-right:11px}
  .gg5.t3c tbody th{font-size:12px;padding-right:6px}
  .gg5.t3c tbody td{white-space:normal;word-break:keep-all;text-align:left;
    font-weight:400;font-size:12px;line-height:1.55;padding:10px 6px;
    letter-spacing:-.02em}
  .gg5.t3c tbody td.amt{text-align:right;font-weight:800;font-size:12.5px;
    padding-right:11px}
}
@media(max-width:380px){
  /* 11px 아래로는 내리지 않는다 — 대신 여백을 줄인다 */
  .gg5 thead th{font-size:11px;padding:9px 2px;letter-spacing:-.06em}
  .gg5 tbody th{font-size:11.5px;padding-left:9px;padding-right:2px}
  .gg5 tbody td{font-size:12px;padding:10px 2px}
}
@media(max-width:1060px){.clogos li{flex-basis:calc(33.333% - 9.34px)}}
@media(max-width:620px){.clogos li{flex-basis:calc(50% - 7px)}}
@media(max-width:400px){.clogos li{flex-basis:100%}}

/* ── 2단 (실적 + 블로그) ── */
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.h2s{font-size:clamp(21px,2.4vw,26px);line-height:1.32;letter-spacing:-.03em;margin:0 0 12px}
.lead2{font-size:14.5px;line-height:1.72;color:var(--ink-2);margin:0 0 18px;max-width:44ch}

.mini{border-top:1px solid var(--line)}
.mrow{display:flex;align-items:baseline;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line)}
.mrow span{font-size:13.5px;color:var(--muted);flex:1}
.mrow b{font-size:15px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mrow em{font-style:normal;font-size:13px;color:var(--muted);
  font-variant-numeric:tabular-nums;min-width:66px;text-align:right}

/* ── 블로그 글 카드 ── */
.bhead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin:0 0 26px}
.bhead .lead2{margin:0}
.posts{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.posts li{display:flex}
.posts a{display:flex;flex-direction:column;gap:9px;width:100%;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:24px 22px 22px;text-decoration:none;color:var(--ink);
  transition:border-color .18s ease,transform .18s ease}
.posts a:hover{border-color:var(--gold);transform:translateY(-2px)}
.posts a:hover .ptitle{color:var(--gold)}
.ptitle{display:block;font-size:16.5px;font-weight:800;line-height:1.42;
  letter-spacing:-.03em;transition:color .18s ease}
.pdesc{display:block;font-size:13.2px;line-height:1.62;color:var(--muted)}
.pdate{display:block;margin-top:auto;padding-top:6px;font-size:11.5px;color:var(--dim);
  font-variant-numeric:tabular-nums}
.pmore{display:block;margin-top:auto;padding-top:6px;font-size:12.5px;
  font-weight:700;color:var(--gold)}

/* 네이버 표식 — 초록은 표식·배경에만 쓴다. 글자는 먹색.
   흰 글씨 위 네이버 초록은 대비 2.4:1 로 WCAG 기준(4.5:1) 미달이다. */
.nmark{width:15px;height:15px;flex:0 0 15px;display:inline-block;vertical-align:-3px}
.ceyebrow.nver{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2);
  letter-spacing:.02em;font-size:12.5px;text-transform:none}
.pcat{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-size:11.5px;font-weight:700;letter-spacing:0;color:var(--muted)}
.pcat .nmark{width:14px;height:14px;flex-basis:14px}
.posts a:hover{border-color:var(--naver)}
.btn.nbtn{display:inline-flex;align-items:center;gap:9px;
  background:var(--naver);border-color:var(--naver);color:#12191A}
.btn.nbtn:hover{background:var(--naver-d);border-color:var(--naver-d);color:#12191A}
.btn.nbtn .nmark{width:17px;height:17px;flex-basis:17px;vertical-align:0}

@media(max-width:1000px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.posts{grid-template-columns:1fr}}

@media(max-width:860px){
  .two{grid-template-columns:1fr;gap:40px}
}
@media(max-width:420px){
  .clogos img{width:110px;height:38px}
}

/* 화면에는 안 보이고 보조기기만 읽는 텍스트 */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── 요금 2단 배치 (메인) ── */
/* align-items 를 stretch 로 두고 표를 세로로 늘려, 행 수가 달라도
   두 카드의 아래변이 맞는다. 남는 높이는 브라우저가 행에 나눠 준다 —
   글이 바뀌어도 자동으로 다시 맞으므로 여백을 손으로 계산하지 않는다. */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.duo > .tw{display:flex;flex-direction:column}
.duo > .tw > table{flex:1}
/* 세로로 쌓을 때 쓰는 `.tw + .tw` 여백이 2단에서는 두 번째 칸을 16px 밀어 내린다 */
.duo > .tw + .tw{margin-top:0}
.duo table{min-width:0}
.pfoot{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;margin-top:16px}
.pfoot .plain{margin:0}
.pfoot .btn{white-space:nowrap}
@media(max-width:820px){
  .duo{grid-template-columns:1fr}
  .duo table{min-width:0}
  .pfoot{grid-template-columns:1fr;gap:16px}
  .pfoot .btn{justify-self:start}
}

/* ── 소개서 PDF 다운로드 (2026-09-14 신설) ──
   🔴 판 날짜를 화면에 적는다. PDF 는 회수가 안 되므로 받은 사람이 구판인지 알아야 한다. */
.dl{display:flex;flex-wrap:wrap;align-items:center;gap:24px;
  padding:30px 32px;border:1px solid var(--line-2);border-radius:18px;background:var(--surface)}
.dl .t{flex:1 1 320px;min-width:0}
.dl h3{margin:0 0 9px;font-size:clamp(18px,2.1vw,21px);font-weight:800;letter-spacing:-.04em}
.dl p{margin:0;font-size:15px;line-height:1.75;color:var(--ink-2);letter-spacing:-.025em}
.dl .ver{display:block;margin-top:11px;font-size:12.5px;color:var(--dim);letter-spacing:-.01em}
.dl .btn{flex:0 0 auto}
.dl .btn::after{content:" ↓";font-weight:800}
@media(max-width:700px){.dl{padding:24px 20px;gap:18px}.dl .btn{width:100%;text-align:center}}

/* ── 본문 도해 (인라인 SVG) ──
   🔴 .umb 는 3번 글(엄브렐라 2층)에서 만든 이름이고 .dia 는 같은 스타일의 일반 도해용이다.
   새 도해는 .dia 를 쓴다 — 색·테두리·캡션 규칙을 한 곳에서 관리하려고 선택자만 묶었다. */
.umb,.dia{margin:0 0 26px;padding:0}
.umb svg,.dia svg{width:100%;height:auto;display:block;
  background:var(--surface);border:1px solid var(--edge);border-radius:14px;padding:8px}
.umb .u-base,.dia .u-base{fill:var(--surface-2);stroke:var(--line-2);stroke-width:1}
.umb .u-umb,.dia .u-umb{fill:var(--sand);stroke:var(--sandline);stroke-width:1}
.umb .u-t1,.dia .u-t1{fill:var(--ink);font-size:14px;font-weight:700;letter-spacing:-.02em}
.umb .u-t2,.dia .u-t2{fill:var(--muted);font-size:12.5px;letter-spacing:-.01em}
.umb .u-arrow,.dia .u-arrow{stroke:var(--gold);stroke-width:1.5}
.umb .u-head,.dia .u-head{fill:var(--gold)}
.dia .u-line{stroke:var(--line-2);stroke-width:1.2}
.dia .u-dim{fill:var(--dim);font-size:12px;letter-spacing:-.01em}
.umb figcaption,.dia figcaption{margin:12px 2px 0;font-size:13px;color:var(--muted);letter-spacing:-.02em}

/* ── 다크 비교표 가독성 (2026-09-09) ──
   글자 대비는 원래 6.6~14.7:1 로 충분했다. 문제는 구조가 없다는 것이었다 —
   행 구분선 대비 1.47:1(사실상 안 보임) · 세로 구분 0 · 지브라 없음.
   그래서 색을 밝히는 대신 줄무늬·세로 구분·자사 열 표시를 넣는다. */

/* 홀수 행 줄무늬 — 가로로 눈이 흐르지 않게 */
.sec.dark tbody tr:nth-child(odd):not(.hi){background:rgba(255,255,255,.035)}

/* 자사 열(마지막) — 세로 구분선 + 옅은 틴트. 이 표의 목적이 이 열이다 */
.sec.dark thead th:last-child,
.sec.dark tbody td:last-child{
  border-left:1px solid rgba(201,180,137,.28);
  background:rgba(201,180,137,.07)}
.sec.dark tbody tr.hi td:last-child{background:rgba(201,180,137,.17)}
.sec.dark thead th:last-child{background:rgba(201,180,137,.16);color:#F4EFE2}

/* 항목 열(첫 칸)도 본문과 갈라 준다 */
.sec.dark tbody th{background:rgba(255,255,255,.03)}

/* 주석 — 한 줄이 90자를 넘어 읽기 힘들었다. 줄 길이를 잘라 준다 */
.sec.dark .callout{line-height:1.8}

/* 제목 왼쪽 · 본문 오른쪽 2단 알림 박스.
   폭은 표와 같게 다 쓰되 본문 줄 길이는 짧게 유지한다.
   (전에는 박스 자체를 좁혀서 오른쪽에 372px 빈 공간이 남았다)
   왼쪽 칸은 제목보다 넓다 — 본문 줄 길이를 짧게 잡아 주는 역할을 겸하기 때문이다.
   그 빈 곳이 '실수로 남은 여백'으로 보이지 않게 경계선을 긋고 칸을 좁혔다. */
.callout.split2{display:grid;grid-template-columns:minmax(0,.26fr) minmax(0,1fr);
  gap:0;align-items:start}
.callout.split2 p{margin:0}
.callout.split2 .ct{font-weight:800;font-size:16px;letter-spacing:-.035em;
  line-height:1.45;color:var(--gold);padding-right:24px}
.callout.split2 p + p{padding-left:28px;border-left:1px solid var(--line-2)}
.sec.dark .callout.split2 .ct{color:#E3CFA2}
.sec.dark .callout.split2 p + p{border-left-color:rgba(201,180,137,.30)}
@media(max-width:760px){
  .callout.split2{grid-template-columns:1fr;gap:10px}
  .callout.split2 .ct br{display:none}
  .callout.split2 .ct{padding-right:0}
  .callout.split2 p + p{padding-left:0;border-left:0}
}

@media(max-width:760px){
  /* 카드로 쌓일 때는 세로 구분선·열 틴트가 의미가 없다 */
  .sec.dark table.stack tbody td:last-child{border-left:0;background:none}
  .sec.dark table.stack tbody th{background:none}
  .sec.dark tbody tr:nth-child(odd):not(.hi){background:none}
}
/* 한 덩어리로 읽혀야 하는 값 — 좁은 화면에서 라벨과 숫자가 갈라지지 않게 */
.nw{white-space:nowrap}

/* 하단 CTA — 전화 박스 + 문의 양식 버튼 (2026-09-11) */
.band2 .bacts{display:flex;flex-direction:column;gap:11px}
.band2 .bacts .btn{background:transparent;color:#F0EEE8;
  border-color:rgba(240,238,232,.34)}
.band2 .bacts .btn:hover{background:rgba(240,238,232,.10);opacity:1}
@media(max-width:700px){.band2 .bacts{width:100%}}

/* ════════════════════════════════════════════════════════════
   2026-09-11 메인 상단 정리 — 가로 분절선 제거
   ① 헤더를 히어로 위 투명 오버레이로(데스크톱 · 메인 한정)
   ② 통계 패널을 히어로 안으로 흡수(흰 카드 → 반투명 다크)
   ③ 고객사 로고를 테두리 없는 자동 마퀴로
   ════════════════════════════════════════════════════════════ */

/* ── 로고 2종: 밝은 배경이면 dark, 어두운 배경이면 light ── */
.logo .lg-l{display:none}
@media (prefers-color-scheme:dark) and (min-width:100000px){
  :root:not([data-theme="light"]) .logo .lg-d{display:none}
  :root:not([data-theme="light"]) .logo .lg-l{display:block}
}
:root[data-theme="dark"] .logo .lg-d{display:none}
:root[data-theme="dark"] .logo .lg-l{display:block}

/* ── ① 투명 헤더 (1081px 이상에서만 · 모바일은 mnav 가독성 때문에 그대로) ── */
@media (min-width:1081px){
  .gnb.over{position:fixed;left:0;right:0;top:0;
    background:transparent;backdrop-filter:none;border-bottom-color:transparent;
    transition:background .25s ease,border-color .25s ease,backdrop-filter .25s ease}
  .gnb.over:not(.stuck) .lg-d{display:none}
  .gnb.over:not(.stuck) .lg-l{display:block}
  .gnb.over:not(.stuck) .nav a{color:rgba(244,242,238,.74)}
  .gnb.over:not(.stuck) .nav a:hover,
  .gnb.over:not(.stuck) .nav a[aria-current="page"]{color:#FFF}
  .gnb.over:not(.stuck) .tel em{color:rgba(244,242,238,.60)}
  .gnb.over:not(.stuck) .tel b{color:#F4F2EE}
  .gnb.over:not(.stuck) .gnb-cta .btn{background:#F4F2EE;color:#12191A;border-color:#F4F2EE}
  .gnb.over.stuck{background:color-mix(in srgb,var(--paper) 88%,transparent);
    backdrop-filter:blur(12px);border-bottom-color:var(--line)}
  /* 헤더가 흐름에서 빠지므로 히어로가 화면 맨 위부터 시작한다 */
  .gnb.over ~ #main .hero2{margin-top:0}
}
@media (prefers-reduced-motion:reduce){.gnb.over{transition:none}}

/* 스크롤 감지용 표식 — 헤더 높이만큼 내려가면 배경이 돌아온다 */
#gsent{position:absolute;top:92px;left:0;width:1px;height:1px;pointer-events:none}

/* ── ② 통계 패널을 히어로 안으로 ── */
/* 🔴 지표 패널은 히어로의 '바닥 띠' 역할이라 화면 아래쪽에 앉아야 안정적이다.
   글 덩어리를 위로 올릴 때 패널까지 같이 딸려 올라가 아래가 휑해졌다(준님 지적 2026-09-12).
   → 이 margin-top 을 키운 만큼 .hero2 .in2 의 padding-bottom 을 줄인다.
     (글 덩어리는 아래 정렬이라 두 값의 '합'이 전체 위치를 정한다. 한쪽만 고치면 글이 같이 움직인다.) */
.hero2 .statsbar{position:static;margin:clamp(46px,9.8vh,110px) 0 0;
  max-width:none;padding:0;z-index:auto}
.hero2 .statsbar .in3{background:rgba(255,255,255,.055);
  border:1px solid rgba(244,242,238,.16);box-shadow:none;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero2 .statsbar .s{border-left-color:rgba(244,242,238,.15)}
.hero2 .statsbar b{color:#FFF}
.hero2 .statsbar .s>span{color:rgba(244,242,238,.60)}
.hero2 .statsbar .asof{margin:14px 0 0;text-align:right;color:rgba(244,242,238,.48)}
.hero2 .statsbar .asof a{color:rgba(244,242,238,.74)}
/* 히어로 글 덩어리는 아래 정렬(align-items:flex-end)이라 이 값이 곧 '아래 여백'이다.
   64px 고정이면 화면이 세로로 길수록 글이 아래로 처져 보인다(1080px에서 위 480 : 아래 136).
   화면 높이에 비례시켜 위:아래가 약 2:1 로 유지되게 한다. (준님 지적 2026-09-12) */
.hero2 .in2{padding-bottom:clamp(32px,3.3vh,45px)}
/* 모바일은 히어로가 min-height:0 라 아래 여백이 곧 섹션 높이다 — 원래 값을 지킨다. */
@media(max-width:700px){.hero2 .in2{padding-bottom:92px}}
@media (prefers-reduced-transparency:reduce){
  .hero2 .statsbar .in3{background:rgba(12,16,17,.82);backdrop-filter:none}
}
@media(max-width:760px){
  .hero2 .statsbar{margin-top:34px}
  .hero2 .statsbar .s:nth-child(-n+2){border-bottom-color:rgba(244,242,238,.15)}
  .hero2 .statsbar .asof{text-align:left}
}

/* ── ③ 고객사 로고 마퀴 ── */
.cmq{display:flex;overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
/* 🔴 같은 회사 로고가 화면에 두 번 보이지 않게 하는 조건 (2026-09-12 실제 발생)
      한 벌 너비 W  >=  보이는 폭 V  +  가장 넓은 로고 폭
   W 가 V 보다 조금만 넓으면 한 로고가 왼쪽 끝과 오른쪽 끝에 걸쳐 동시에 보인다.
   현재: 로고 합계 630 + gap 130 × 6 = 1410  >=  1232 + 128 = 1360  ✓
   🔴 로고를 빼거나 간격을 줄이면 이 부등식을 다시 계산할 것.
   padding-right 는 gap 과 같은 값이어야 이음매 간격이 고르다. */
.cmq .clogos{list-style:none;margin:0;padding:0 130px 0 0;flex:none;
  display:flex;align-items:center;gap:130px;
  animation:cmq 34s linear infinite}
/* 🔴 속도는 duration 으로만 조절한다 (준님 2026-09-14: 조금 더 빠르게).
   42s → 34s. gap 을 줄여 빠르게 만들면 위 부등식(한 벌 너비 >= 보이는 폭 + 최대 로고 폭)이
   깨져 같은 로고가 양끝에 동시에 보인다 — 간격은 건드리지 말 것. */
/* 마우스를 올려도 멈추지 않는다 (준님 2026-09-12). hover 정지는 다시 넣지 말 것. */
@keyframes cmq{to{transform:translateX(-100%)}}
.cmq .clogos li{flex:none;background:none;border:0;padding:0;
  display:flex;align-items:center}
/* 🔴 로고 webp 는 배경이 투명하게 처리돼 있다(2026-09-12).
   예전에는 흰 배경이 박힌 파일을 mix-blend-mode:multiply 로 녹였는데,
   마스크와 충돌해 브라우저에 따라 흰 네모가 그대로 보였다. 다시 쓰지 말 것.
   로고 파일을 교체할 때는 반드시 배경이 투명한 파일로 넣는다. */
/* 🔴 로고 파일은 여백을 잘라낸(알파 bbox 로 crop) 상태여야 한다.
   여백이 남아 있으면 상자는 같아도 그림 크기가 제각각이라 간격이 들쭉날쭉 보인다.
   고정 폭(126px) 상자에 넣지 않고, 가로·세로 상한만 걸어 비율대로 놓는다.
   비율이 1.17(CJ)~4.36(CREA)로 달라서 폭을 고정하면 반드시 불균형해진다. */
.cmq .clogos img{max-width:128px;max-height:40px;width:auto;height:auto;display:block}
/* 어두운 배경에서는 짙은 색 로고 글자가 묻히므로 작은 흰 판을 깐다 */
@media (prefers-color-scheme:dark) and (min-width:100000px){
  :root:not([data-theme="light"]) .cmq .clogos img{background:#FFF;border-radius:9px;padding:7px 11px}
}
:root[data-theme="dark"] .cmq .clogos img{background:#FFF;border-radius:9px;padding:7px 11px}
@media(max-width:560px){
  .cmq .clogos{gap:64px;padding-right:64px;animation-duration:21s}
  .cmq .clogos img{max-width:100px;max-height:32px}
}
@media (prefers-reduced-motion:reduce){
  .cmq{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
  .cmq .clogos{animation:none}
  .cmq .clogos[aria-hidden="true"]{display:none}
}

/* ── 「선택하는 이유」 섹션 (2026-09-11) ── */
/* 이 섹션만 가운데 정렬 — 아래가 로고 띠와 4칸 카드로 대칭이라 제목이 가운데여야 무게가 실린다.
   페이지의 다른 섹션은 전부 왼쪽 정렬이므로 여기 한 곳만 의도적으로 다르게 둔다. */
.whead{margin:0 0 54px;text-align:center}
/* 제목 양옆 금색 선 — 글자로 하이픈을 치면 검색 스니펫과 화면낭독기에 그대로 딸려가므로
   선으로 준다. 의미는 같고 본문에는 글자가 늘지 않는다. */
/* 제목 양옆 금색 선 — 눈썹 문구 없이 제목이 직접 선을 두른다.
   글자로 하이픈을 치면 검색 스니펫·화면낭독기에 그대로 딸려가므로 선으로 준다. */
.whead h2{display:inline-flex;align-items:center;gap:18px;max-width:100%;
  margin:0 0 14px;font-size:clamp(26px,3.6vw,37px);font-weight:800;
  letter-spacing:-.045em;line-height:1.35}
.whead h2::before,.whead h2::after{content:"";flex:none;
  width:30px;height:2px;border-radius:1px;background:var(--gold)}
@media(max-width:640px){
  .whead h2{gap:11px}
  .whead h2::before,.whead h2::after{width:16px}
}
/* 설명문이 아니라 핵심 문구 — 본문보다 크고 굵게, 제목과는 확실히 차이를 둔다 */
.whead p{margin:0;font-size:17.5px;font-weight:600;letter-spacing:-.03em;
  color:var(--ink-2);line-height:1.7}
.whead p b{font-weight:800;color:var(--ink)}

.cmql{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--dim);
  text-transform:uppercase;margin:5px 0 21px;text-align:center}
/* 로고 띠 — 선 없이 여백으로만 구획한다(준님 2026-09-12: 위아래 선 삭제).
   여백은 그대로 두어야 로고가 글자·카드에 붙어 답답해지지 않는다. */
.cband{padding:34px 0 46px;margin:0 0 56px}
@media(max-width:640px){.cband{padding:24px 0 34px;margin-bottom:38px}}

/* 네 칸 모두 같은 폭·같은 구조(짧은 한 줄 + 사실 3줄)라 높이가 저절로 맞는다.
   한때 첫 칸만 넓혔던 것은 첫 칸에만 표가 있어 생긴 높이 차를 폭으로 가리던 땜질이었다. */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:0}
/* 화면이 넉넉하면 .wrap(1080px) 밖으로 조금 넓힌다 — 칸이 세로로 길어지지 않게 폭을 준다.
   1220px 미만에서는 넓히지 않으므로 가로 스크롤이 생기지 않는다. */
/* 로고 띠와 카드 그리드의 좌우 끝을 맞춘다. 넓은 화면일수록 더 벌려 카드를 가로로 만든다.
   각 구간에서 본문 폭 + 좌우 확장이 뷰포트를 넘지 않는지 확인할 것(가로 스크롤 방지). */
@media(min-width:1220px){.why,.cband{margin-inline:-62px}}
@media(min-width:1360px){.why,.cband{margin-inline:-100px}}
.why article{background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:32px 26px 30px;display:flex;flex-direction:column}
/* 담보 한도 목록은 카드 아래쪽에 붙여서 네 칸의 바닥선을 맞춘다 */
.why .lim{margin-top:auto}
/* 아이콘 타일(둥근 네모 판 + 아이콘 + 제목)은 가장 흔한 템플릿 신호라 판을 없앴다.
   아이콘은 제목 위가 아니라 왼쪽에 둔다 — 세로 한 줄이 줄어 카드가 가로로 눕는다. */
.whd{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.why .ic{display:block;color:var(--gold);flex:none}
.why .ic svg{width:22px;height:22px;display:block}
.why h3{margin:0;font-size:16.5px;font-weight:800;letter-spacing:-.035em}
.why p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.78}
.why p b{font-weight:700;color:var(--ink)}
.why .lim{list-style:none;margin:16px 0 0;padding:14px 0 0;
  border-top:1px solid var(--line);display:grid;gap:8px}
.why .lim li{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.why .lim span{font-size:12.5px;color:var(--muted);letter-spacing:-.03em;flex:none}
.why .lim b{font-size:13px;font-weight:800;letter-spacing:-.035em;
  color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:1000px){.why{grid-template-columns:1fr 1fr}}
@media(max-width:600px){
  .why{grid-template-columns:1fr;gap:14px}
  .why article{padding:28px 24px 26px}
}