/* 디어드라이브 대리운전 — 공통 스타일
   회사소개서·비교표와 같은 팔레트를 씁니다. */
: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;
}
@media (prefers-color-scheme:dark){: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}
.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}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@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)}
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 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}}

/* ── 히어로 (사진 위) ── */
.hero2{position:relative;min-height:min(80vh,690px);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}
.hero2 h1{margin:0 0 24px;font-size:clamp(26px,3.5vw,41px);font-weight:800;
  line-height:1.4;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:16.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}}

/* 히어로에 걸치는 지표 바 */
.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 12px;font-size:clamp(16px,1.9vw,21px);font-weight:700;
  letter-spacing:-.04em;color:#DFD9CC;line-height:1.5}

/* ── 발행 주체 · 최종 수정일 ── */
.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:22ch;letter-spacing:-.03em;line-height:1.28}
.blogpost .lead{max-width:none}
.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}
}

/* ── 본문 도해 (인라인 SVG) ── */
.umb{margin:0 0 26px;padding:0}
.umb svg{width:100%;height:auto;display:block;
  background:var(--surface);border:1px solid var(--edge);border-radius:14px;padding:8px}
.umb .u-base{fill:var(--surface-2);stroke:var(--line-2);stroke-width:1}
.umb .u-umb{fill:var(--sand);stroke:var(--sandline);stroke-width:1}
.umb .u-t1{fill:var(--ink);font-size:14px;font-weight:700;letter-spacing:-.02em}
.umb .u-t2{fill:var(--muted);font-size:12.5px;letter-spacing:-.01em}
.umb .u-arrow{stroke:var(--gold);stroke-width:1.5}
.umb .u-head{fill:var(--gold)}
.umb 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){
  :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}

/* ── ② 통계 패널을 히어로 안으로 ── */
.hero2 .statsbar{position:static;margin:46px 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)}
.hero2 .in2{padding-bottom:64px}
@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}
}

/* ── ③ 고객사 로고 마퀴 ── */
/* mask-image 가 합성 그룹을 만들어서, 배경색을 여기 직접 줘야 곱하기가 먹는다 */
.cmq{display:flex;overflow:hidden;width:100%;background:var(--paper);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.cmq .clogos{list-style:none;margin:0;padding:0 34px 0 0;flex:none;
  display:flex;align-items:center;gap:68px;
  animation:cmq 32s linear infinite}
.cmq:hover .clogos,.cmq:focus-within .clogos{animation-play-state:paused}
@keyframes cmq{to{transform:translateX(-100%)}}
.cmq .clogos li{flex:none;background:none;border:0;padding:0;display:block}
.cmq .clogos img{width:126px;height:42px;object-fit:contain;display:block;
  mix-blend-mode:multiply}
/* 어두운 배경에서는 곱하기가 로고를 먹어버려서 작은 흰 판을 깐다 */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cmq .clogos img{mix-blend-mode:normal;
    background:#FFF;border-radius:9px;padding:7px 11px}
}
:root[data-theme="dark"] .cmq .clogos img{mix-blend-mode:normal;
  background:#FFF;border-radius:9px;padding:7px 11px}
@media(max-width:560px){
  .cmq .clogos{gap:44px;padding-right:22px;animation-duration:24s}
  .cmq .clogos img{width:104px;height:36px}
}
@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}
}