/* 디어드라이브 대리운전 — 공통 스타일
   회사소개서·비교표와 같은 팔레트를 씁니다. */
:root{
  --paper:#F2F1ED; --surface:#FFFFFF; --surface-2:#EAE9E5;
  --ink:#12191A; --ink-2:#33403E; --muted:#5F686B; --dim:#9AA1A3;
  --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;
  --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;
  --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:900px){
  .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:760px){.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)}

/* ── 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}

/* ── 목록 ── */
ul.ticks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
ul.ticks li{position:relative;padding-left:27px;font-size:15px;color:var(--ink-2);line-height:1.72}
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,.18);background:rgba(255,255,255,.028)}
.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,.13);
  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:900px){: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)}