@charset "utf-8";

:root{
  /* 강조색 — 이 다섯 값만 바꾸면 사이트 전체 강조색이 바뀐다 */
  --g:#00734C; --g-dk:#005C3D; --g-hi:#5CCB97; --g-tint:#E3F1E9; --g-wash:#F0F6F2;

  --ink:#101418; --body:#454D57; --mute:#666F79; --faint:#78818B;
  --line:#E4E8EC; --line2:#D3D9DF; --soft:#F5F7F8;
  --dark:#121614; --dark2:#1A1F1D;
  --wrap:min(1200px, calc(100% - 48px));
  --sh:0 1px 2px rgba(16,20,24,.05), 0 10px 28px rgba(16,20,24,.07);
  --ease:cubic-bezier(.2,.8,.2,1);
  --focus:0 0 0 3px rgba(0,115,76,.24);
}

/* ───────── 기본 ───────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px; background:#fff}
body{margin:0; background:#fff; color:var(--body);
  font-family:Pretendard,"Pretendard Variable",-apple-system,"Malgun Gothic","맑은 고딕",sans-serif;
  font-size:17px; line-height:1.65; word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{color:var(--ink); line-height:1.3; letter-spacing:-.03em; font-weight:800}
.wrap{width:var(--wrap); margin-inline:auto}
.nb{white-space:nowrap}
.ico{width:1em; height:1em; flex:0 0 auto; display:block}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip-link{position:absolute; left:-9999px; top:0}
.skip-link:focus{left:16px; top:16px; z-index:200; background:#fff; padding:10px 14px; border-radius:8px; box-shadow:var(--sh)}
code,kbd,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Pretendard Variable",Pretendard,"Malgun Gothic",monospace}

/* ───────── 버튼 ───────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:56px; padding:0 26px;
  border-radius:10px; border:1px solid transparent; font-size:16.5px; font-weight:700; letter-spacing:-.01em;
  white-space:nowrap; cursor:pointer; transition:background-color .18s, border-color .18s, color .18s, transform .18s}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none; box-shadow:var(--focus)}
.btn .ico{width:18px; height:18px}
.btn--primary{background:var(--g); color:#fff}
.btn--primary:hover{background:var(--g-dk)}
.btn--ghost{background:#fff; color:var(--ink); border-color:var(--line2)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--sm{height:44px; padding:0 18px; font-size:15px; border-radius:8px}

/* ───────── GNB — 흰색 + DRPT 로고 ───────── */
.gnb{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s}
.gnb.is-scrolled{border-bottom-color:var(--line); box-shadow:0 6px 20px rgba(16,20,24,.05)}
.gnb__in{display:flex; align-items:center; gap:44px; height:78px}
.logo{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.logo .logo-symbol{height:34px; width:auto}
.logo .logo-type{height:30px; width:auto}
.gnb nav{display:flex; align-items:center; gap:34px; font-size:16px; font-weight:600; color:var(--ink)}
.gnb nav > a, .has-sub > a{position:relative; padding:27px 0}
.gnb nav a:hover{color:var(--g)}
.gnb nav a.is-here{color:var(--g)}
.gnb nav a.is-here::after{content:""; position:absolute; left:0; right:0; bottom:18px; height:2px; border-radius:2px; background:var(--g)}
.has-sub{position:relative; display:flex; align-items:center; gap:2px}
.subtoggle{border:0; background:none; padding:4px; font-size:11px; color:var(--mute); cursor:pointer}
.submenu{position:absolute; top:calc(100% - 8px); left:-18px; min-width:190px; padding:8px; display:none; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:var(--sh)}
.has-sub:hover .submenu, .submenu.is-open{display:flex}
.submenu a{padding:10px 12px; border-radius:6px; font-size:15px; font-weight:600}
.submenu a:hover{background:var(--soft)}
.submenu em{margin-left:6px; font-style:normal; font-size:12px; color:var(--mute)}
.gnb__cta{margin-left:auto; display:flex; align-items:center; gap:20px}
.gnb__tel{display:flex; align-items:baseline; gap:8px; font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--ink)}
.gnb__tel span{font-size:13px; font-weight:600; letter-spacing:0; color:var(--mute)}

.jump{display:none}

/* ───────── 섹션 공통 ───────── */
.s{padding:140px 0}
.s--soft{background:var(--soft)}
.s--wash{background:var(--g-wash)}
.s--dark{background:var(--dark); color:#A9B2AE}
.sh{max-width:800px; margin:0 auto 64px; text-align:center}
.sh h2{font-size:46px; line-height:1.27; letter-spacing:-.04em}
.sh p{margin-top:18px; font-size:19px; color:var(--body)}
.s--dark .sh h2{color:#fff}
.s--dark .sh p{color:#A2ABA7}
.hl{color:var(--g)}
.s--dark .hl{color:var(--g-hi)}
.note{font-size:14px; color:var(--mute)}
.note-c{margin-top:22px; text-align:center; font-size:14px; color:var(--mute)}
.s--dark .note-c{color:#8D9692}
.sh h2, .sh p, .closing, .pr__txt p{text-wrap:balance}

/* ───────── 슬라이드 공통 — 좌우 끝을 흐리게 지워 잘린 카드가 덜 거슬리게 한다 ───────── */
.mq{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%)}
.mq__row{display:flex; width:max-content; animation:mq 30s linear infinite}
.mq__row--rev{animation-direction:reverse}
@keyframes mq{to{transform:translate3d(-50%,0,0)}}

/* ═══════════ L-01 히어로 — 큰 제목 블록 + 아래 풀폭 연출컷 ═══════════ */
.hx{padding:88px 0 0; background:#fff}
.hx__head{padding-bottom:56px}
.hx__h1{font-size:clamp(40px, 4.15vw, 62px)}
.hx__h1 h1{font-size:1em; line-height:1.24; letter-spacing:-.05em}
.hx__h1::after{content:""; display:block; clear:both}
.tick{float:left; position:relative; height:1.2em; margin:.02em .04em 0 0; overflow:hidden; transition:width .6s var(--ease)}
.tick img{position:absolute; left:0; top:50%; max-width:none; object-fit:contain; object-position:left center;
  opacity:0; transform:translateY(60%); transition:transform .6s var(--ease), opacity .45s ease}
.tick img.is-on{opacity:1; transform:translateY(-50%)}
.tick img.is-out{opacity:0; transform:translateY(-160%)}
.hx__row{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-top:36px; padding-top:32px; border-top:1px solid var(--line)}
.hx__sub{font-size:19px; font-weight:500; line-height:1.6; color:var(--body)}
.hx__cta{display:flex; flex:0 0 auto; gap:10px}
.hx__cta .btn{height:58px; padding:0 28px}
.hx__visual{position:relative; height:clamp(480px, 47vw, 720px); overflow:hidden; background:#D9DEE1}
.hx__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 56%}
.hx__over{position:absolute; left:0; right:0; top:0; bottom:0; margin-inline:auto;
  display:flex; align-items:flex-end; padding-bottom:26px; pointer-events:none}
.hx__cap{pointer-events:auto; display:inline-flex; align-items:center;
  padding:12px 20px 12px 17px; border-radius:999px; background:rgba(12,15,26,.66);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:14.5px; line-height:1.3; color:#fff; letter-spacing:-.01em}
.hx__cap::before{content:""; flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--g-hi)}
.hx__cap b{margin-left:10px; font-weight:700}
.hx__cap span{color:rgba(255,255,255,.78)}
.hx__cap span::before{content:"·"; margin:0 7px; color:rgba(255,255,255,.5)}

/* ═══════════ L-02a 검증 문구 — 독립 섹션: 큰 숫자 + 문구 + 도입처 막대 ═══════════ */
.pr{padding:120px 0 128px}
.pr__grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:center; gap:88px}
.pr__label{display:block; font-size:15px; font-weight:700; color:var(--mute)}
.pr__num strong{display:block; margin-top:10px; font-size:clamp(68px, 7.6vw, 116px); font-weight:800; line-height:.95;
  letter-spacing:-.06em; color:var(--g); font-variant-numeric:tabular-nums}
.pr__cap{display:block; margin-top:18px; font-size:16px; color:var(--body)}
.pr__txt p{font-size:26px; font-weight:700; line-height:1.5; letter-spacing:-.035em; color:var(--ink)}
.pr__txt p + p{margin-top:10px}
.pr__txt b{color:var(--g)}
.pr__list{list-style:none; margin:40px 0 0; padding:30px 0 0; display:grid; gap:14px; border-top:1px solid var(--line)}
.pr__list li{display:grid; grid-template-columns:130px 1fr 60px; align-items:center; gap:20px; font-size:15px; color:var(--body)}
.pr__list i{display:block; height:8px; overflow:hidden; border-radius:4px; background:var(--g-tint)}
.pr__list em{display:block; width:var(--w); height:100%; border-radius:4px; background:var(--g)}
.pr__list b{text-align:right; font-size:16px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums}

/* ═══════════ L-02b 솔루션 도입 매장 — 박스 없는 로고 두 줄 ═══════════ */
.cl{padding:120px 0}
.cl .sh{margin-bottom:56px}
.logos{display:grid; gap:44px}
.logos .mq__row{align-items:center; animation-duration:30s}
.logos .mq__row--rev{animation-duration:35s}
.lgo{flex:0 0 auto; height:46px; width:auto; max-width:176px; object-fit:contain; margin-right:84px}

/* ═══════════ L-02c 사장님 설치 후기 ═══════════ */
.lp2-rvs{display:grid; gap:20px}
.lp2-rrow{display:flex; width:max-content; animation:mq 40s linear infinite}
.lp2-rrow--rev{animation-duration:46s; animation-direction:reverse}
.rvw{position:relative; flex:0 0 auto; width:420px; margin-right:20px; padding:30px 30px 26px;
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:14px}
.rvw::before{content:""; width:30px; height:24px; margin-bottom:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24'%3E%3Cpath fill='%2300734C' d='M0 24V13.6C0 5.9 4.2 1.4 12.1 0l1.2 3.4C9 4.6 6.9 7.1 6.6 11h5.6v13H0Zm16.8 0V13.6C16.8 5.9 21 1.4 28.9 0l1.1 3.4c-4.3 1.2-6.4 3.7-6.7 7.6h5.6v13H16.8Z'/%3E%3C/svg%3E") no-repeat}
.rvw q{quotes:none; font-size:17.5px; font-weight:600; line-height:1.62; letter-spacing:-.02em; color:var(--ink)}
.rvw q::before,.rvw q::after{content:""}
.rvw .who{position:relative; display:block; min-height:52px; margin-top:22px; padding:18px 0 0 46px; border-top:1px solid var(--line);
  font-size:14px; line-height:1.45; color:var(--mute)}
.rvw .who::before{content:""; position:absolute; left:0; top:11px; width:34px; height:34px; border-radius:50%;
  background:var(--g-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300734C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v9h16v-9M3 5h18l-1 5a3 3 0 0 1-5.5 0 3 3 0 0 1-5 0A3 3 0 0 1 4 10Z'/%3E%3Cpath d='M10 19v-5h4v5'/%3E%3C/svg%3E") center / 18px no-repeat}
.rvw .hold{position:absolute; top:30px; right:30px; font-size:12px; color:var(--faint)}

/* ═══════════ L-03 비용 문제 — 다크 ═══════════ */
.news{display:grid; gap:16px; max-width:720px; margin:0 auto}
.nws{position:relative; padding:28px 36px 26px 40px; background:#fff; border-radius:6px; text-align:left;
  box-shadow:0 20px 44px rgba(0,0,0,.34)}
.nws::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; border-radius:6px 0 0 6px; background:var(--g)}
.nws small{display:block; margin-bottom:8px; font-size:12px; font-weight:800; letter-spacing:.06em; color:var(--g)}
.nws b{display:block; font-size:25px; font-weight:800; line-height:1.35; letter-spacing:-.035em; color:var(--ink)}
.nws b .rd{text-decoration:underline; text-decoration-color:var(--g); text-decoration-thickness:3px; text-underline-offset:6px}
.nws > span{display:block; margin-top:8px; font-size:15px; color:var(--body)}
.probs{margin-top:88px}
.probs__t{margin-bottom:28px; text-align:center; font-size:15px; font-weight:700; color:#8D9692}
.probs .mq__row{animation-duration:28s}
.prob2{flex:0 0 auto; width:400px; margin-right:20px; padding:32px 28px 30px; text-align:center;
  background:var(--dark2); border:1px solid rgba(255,255,255,.08); border-radius:14px}
.prob2 .ic{width:52px; height:52px; margin:0 auto 18px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--g-hi); background:rgba(92,203,151,.12)}
.prob2 .ic .ico{width:24px; height:24px}
.prob2 b{display:block; font-size:21px; letter-spacing:-.025em; color:#fff}
.prob2 span{display:block; margin-top:10px; font-size:15.5px; line-height:1.6; color:#A9B2AE}

/* ═══════════ L-04 절감 계산기 ═══════════ */
.calc{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:start}
.calc__in{padding:44px; background:#fff; border:1px solid var(--line); border-radius:18px}
.calc__label{margin-bottom:12px; font-size:15.5px; font-weight:800; color:var(--ink)}
.calc__gap{height:1px; margin:32px 0; background:var(--line)}
.chips{display:flex; gap:4px; padding:4px; background:var(--soft); border-radius:12px}
.chip{flex:1 1 0; height:46px; border:0; border-radius:9px; background:transparent; cursor:pointer;
  font-size:15px; font-weight:700; color:var(--mute); transition:background-color .18s, color .18s, box-shadow .18s}
.chip:hover{color:var(--ink)}
.chip.is-on{background:#fff; color:var(--g); box-shadow:0 1px 3px rgba(16,20,24,.14)}
.chip:focus-visible{outline:none; box-shadow:var(--focus)}
.calc__row{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:18px}
.calc__row label{font-size:15.5px; color:var(--body)}
.calc__hide{display:none !important}
.in-num, .calc select{width:168px; height:50px; padding:0 14px; border:1px solid var(--line2); border-radius:10px; background:#fff;
  font-size:17px; font-weight:700; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums}
.calc select{text-align:left; font-weight:600; font-size:16px}
.in-num:focus, .calc select:focus{outline:none; border-color:var(--g); box-shadow:var(--focus)}
.range{width:100%; margin:16px 0 0; accent-color:var(--g)}
.range-scale{display:flex; justify-content:space-between; margin-top:4px; font-size:12px; color:var(--faint)}
.calc__note{margin-top:12px; font-size:13.5px; line-height:1.6; color:var(--mute)}
.calc__out{position:sticky; top:104px; padding:40px; border-radius:18px; background:var(--dark); color:#A9B2AE}
.calc__out .calc__row{margin:0; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.09)}
.calc__out .calc__row span{font-size:15px; color:#9AA39F}
.calc__out .calc__row b{font-size:17.5px; color:#fff; font-variant-numeric:tabular-nums}
.calc__big{padding:30px 0 4px}
.calc__big span{display:block; font-size:15px; font-weight:600; color:#C9D0CD}
.calc__big strong{display:block; margin-top:4px; font-size:56px; font-weight:800; line-height:1.12; letter-spacing:-.045em;
  color:var(--g-hi); font-variant-numeric:tabular-nums}
.calc__out .calc__note{color:#8D9692}
.calc__out .btn{width:100%; height:60px; margin-top:26px; font-size:17px; color:var(--dark); background:var(--g-hi)}
.calc__out .btn:hover{background:#7ED8AE}
.calc__basis{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 22px;
  font-size:14px; color:var(--mute)}
.calc__basis li::before{content:"·"; margin-right:6px}

/* ═══════════ L-05 절감 결과 ═══════════ */
.sv{text-align:center}
.sv__head b{display:block; font-size:46px; font-weight:800; line-height:1.3; letter-spacing:-.04em; color:var(--ink)}
.sv__head b em{display:inline-block; margin-top:12px; padding:4px 20px; border-radius:10px; font-style:normal; color:#fff; background:var(--g)}
.sv__head span{display:block; margin-top:18px; font-size:14.5px; color:var(--mute)}
.stats{list-style:none; margin:60px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.stats li{padding:34px 20px 30px; background:#fff; border-radius:14px; box-shadow:0 1px 2px rgba(16,20,24,.04)}
.stats b{display:block; font-size:38px; font-weight:800; line-height:1.2; letter-spacing:-.04em; color:var(--g); font-variant-numeric:tabular-nums}
.stats span{display:block; margin-top:8px; font-size:15px; color:var(--mute)}
.sv > .wrap > .note{margin-top:22px}
.savetbl{margin-top:88px; text-align:left}
.savetbl h3{font-size:26px}
.savetbl__sub{margin:8px 0 22px; font-size:15.5px; color:var(--mute)}
.tablewrap{overflow-x:auto; background:#fff; border:1px solid var(--line); border-radius:14px}
table{width:100%; border-collapse:collapse; font-size:15.5px}
th,td{padding:17px 22px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--line)}
th:first-child, td:first-child{text-align:left}
thead th{background:#F8FAF9; font-size:13.5px; font-weight:700; color:var(--mute)}
tbody tr:last-child td{border-bottom:0}
tbody tr.is-rec{background:var(--g-wash)}
tbody tr.is-rec td{font-weight:700; color:var(--ink)}
td .v{font-variant-numeric:tabular-nums}
td .v.plus{font-weight:700; color:var(--g)}
td .v.minus{color:var(--faint)}
td .v em{display:inline-block; margin-left:8px; padding:2px 9px; border-radius:999px; font-style:normal; font-size:11.5px; font-weight:700;
  color:#fff; background:var(--g); vertical-align:1px}
th.bar-h, td.bar{width:24%; text-align:left}
td.bar i{display:block; width:var(--w); min-width:3px; height:10px; border-radius:5px; background:var(--g)}
td.bar i.neg{width:3px; background:var(--line2)}
.savetbl .note{margin-top:14px}
.closing{margin-top:88px; font-size:31px; font-weight:800; line-height:1.55; letter-spacing:-.035em; color:var(--ink)}

/* ═══════════ L-05/06 업종별 선택 기준 — 흰 배경 ═══════════ */
.feat{display:grid; grid-template-columns:1fr 1fr; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:20px}
.feat__img{display:flex; align-items:center; justify-content:center; padding:48px; background:#fff; border-right:1px solid var(--line)}
.feat__img img{width:auto; max-height:360px; mix-blend-mode:multiply; transition:transform .6s var(--ease)}
.feat:hover .feat__img img{transform:scale(1.03)}
.feat__txt{padding:52px 56px}
.tag{display:inline-block; padding:5px 12px; border-radius:999px; font-size:13px; font-weight:700; color:var(--g); background:var(--g-tint)}
.feat h3{margin-top:16px; font-size:42px; letter-spacing:-.035em}
.feat__txt > p{margin-top:12px; font-size:16.5px; line-height:1.65}
.spec{list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; column-gap:28px}
.spec li{display:flex; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px}
.spec b{font-weight:600; color:var(--mute)}
.spec .v{font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
.feat .cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:32px}
.lineup{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px}
.model{display:grid; grid-template-columns:112px 1fr; align-items:center; gap:20px; padding:18px;
  background:#fff; border:1px solid var(--line); border-radius:16px; transition:border-color .2s, box-shadow .2s, transform .2s var(--ease)}
.model:hover{border-color:var(--g); box-shadow:var(--sh); transform:translateY(-3px)}
.model:focus-visible{outline:none; box-shadow:var(--focus)}
.model__img{display:flex; align-items:center; justify-content:center; aspect-ratio:1; padding:10px; border-radius:12px; background:#fff; border:1px solid var(--line)}
.model__img img{width:auto; max-height:100%; object-fit:contain; mix-blend-mode:multiply}
.model b{display:block; font-size:18px; color:var(--ink)}
.model .cap{display:block; margin-top:2px; font-size:14px; color:var(--mute)}
.model .meter{display:block; height:4px; margin-top:12px; overflow:hidden; border-radius:2px; background:var(--g-tint)}
.model .meter i{display:block; width:var(--w); height:100%; background:var(--g)}
.model em{display:block; margin-top:10px; font-style:normal; font-size:16px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums}
.model em small{margin-right:5px; font-size:12.5px; font-weight:500; color:var(--mute)}
.lineup-note{margin-top:22px; text-align:center; font-size:15px; color:var(--mute)}
.lineup-note a{font-weight:700; color:var(--g); text-decoration:underline; text-underline-offset:3px}
.inds{display:grid; grid-template-columns:repeat(4,1fr); margin-top:96px; border-top:1px solid var(--line)}
.ind{padding:34px 28px 6px 0}
.ind + .ind{padding-left:28px; border-left:1px solid var(--line)}
.ind .ic{width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--g); background:var(--g-tint)}
.ind .ic .ico{width:24px; height:24px}
.ind b{display:block; margin-top:20px; font-size:20px; color:var(--ink)}
.ind i{display:block; margin-top:4px; font-style:normal; font-size:14px; font-weight:700; color:var(--g)}
.ind span{display:block; margin-top:12px; font-size:15px; line-height:1.65; color:var(--body)}

/* ═══════════ L-06b 처리 3단계 + 도입 전후 ═══════════ */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.step__ph{overflow:hidden; aspect-ratio:4/3; border-radius:16px; background:#fff}
.step__ph img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.step:hover .step__ph img{transform:scale(1.04)}
.step__ph--num{display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--g); color:#fff}
.step__ph--num b{font-size:96px; font-weight:800; line-height:1; letter-spacing:-.05em; color:#fff}
.step__ph--num b small{margin-left:4px; font-size:28px; letter-spacing:-.02em}
.step__ph--num span{margin-top:10px; font-size:17px; font-weight:600; color:#fff}
.step__txt{padding:26px 4px 0}
.step__no{display:flex; align-items:center; gap:12px; font-size:14px; font-weight:800; letter-spacing:.02em; color:var(--g)}
.step__no::after{content:""; flex:1 1 auto; height:1px; background:var(--line2)}
.step h3{margin-top:12px; font-size:23px}
.step p{margin-top:8px; font-size:16px; line-height:1.65}
.ba{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:64px; margin-top:120px;
  overflow:hidden; background:#fff; border-radius:20px}
/* 설치 전후 드래그 비교. --p 는 설치 전 사진이 보이는 폭 */
.baS{--p:50%; position:relative; align-self:stretch; aspect-ratio:880/930; overflow:hidden; background:#E8ECE9; user-select:none; touch-action:pan-y}
.baS img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none}
.baS__before{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.baS__lab{position:absolute; top:18px; z-index:2; padding:6px 12px; border-radius:999px; font-size:13px; font-weight:700; color:#fff; pointer-events:none}
.baS__lab--b{left:18px; background:rgba(16,20,24,.72)}
.baS__lab--a{right:18px; background:var(--g)}
.baS__line{position:absolute; top:0; bottom:0; left:var(--p); z-index:2; width:2px; margin-left:-1px; background:#fff; pointer-events:none;
  box-shadow:0 0 0 1px rgba(16,20,24,.08)}
.baS__line i{position:absolute; top:50%; left:50%; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--g); background:#fff; box-shadow:0 8px 24px rgba(16,20,24,.25);
  transition:transform .2s var(--ease)}
.baS__line i .ico{width:22px; height:22px}
.baS:hover .baS__line i{transform:scale(1.08)}
.baS__range{position:absolute; inset:0; z-index:3; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none}
.baS__range:focus-visible + *, .baS:has(.baS__range:focus-visible) .baS__line i{box-shadow:0 0 0 4px rgba(0,115,76,.35), 0 8px 24px rgba(16,20,24,.25)}
.ba__txt{padding:48px 56px 48px 0}
.ba__txt h3{font-size:36px; line-height:1.3; letter-spacing:-.035em}
.ba__txt > p{margin-top:16px; font-size:17px}
.checks{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:12px}
.checks li{display:flex; align-items:center; gap:12px; font-size:16.5px; font-weight:600; color:var(--ink)}
.checks .ic{width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--g)}
.checks .ic .ico{width:15px; height:15px}

/* ═══════════ L-07 작동 영상 — 가로 1편 + 세로 쇼츠 2편 ═══════════ */
.videos{display:grid; grid-template-columns:3.16fr 1fr 1fr; gap:20px; align-items:start}
.video{position:relative; display:block; overflow:hidden; border-radius:16px; background:#000; color:#fff}
.video:nth-child(1){aspect-ratio:16/9}
.video:nth-child(n+2){aspect-ratio:9/16}
.video img, .video video{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.video:hover img{transform:scale(1.03)}
.video i{position:absolute; left:50%; top:50%; width:72px; height:72px; margin:-36px 0 0 -36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-style:normal; color:var(--g); background:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.28); transition:transform .2s var(--ease)}
.video i .ico{width:24px; height:24px; margin-left:3px}
.video:nth-child(n+2) i{width:56px; height:56px; margin:-28px 0 0 -28px}
.video:hover i{transform:scale(1.08)}
.video b{position:absolute; left:0; right:0; bottom:0; padding:20px 24px; font-size:17px; font-weight:700; line-height:1.45; color:#fff;
  background:rgba(12,15,14,.66)}
.video:nth-child(n+2) b{padding:14px 16px; font-size:14.5px}
.video:focus-visible{outline:none; box-shadow:var(--focus)}

/* ═══════════ L-08 설치 사례 ═══════════ */
.icards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.icard{display:flex; gap:18px; padding:30px 28px; background:#fff; border:1px solid var(--line); border-radius:16px;
  transition:border-color .2s, box-shadow .2s}
.icard:hover{border-color:var(--line2); box-shadow:var(--sh)}
.icard .ic{flex:0 0 auto; width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--g); background:var(--g-tint)}
.icard .ic .ico{width:24px; height:24px}
.icard b{display:block; font-size:18.5px; color:var(--ink)}
.icard em{display:block; margin-top:4px; font-style:normal; font-size:13px; font-weight:700; color:var(--g)}
.icard span{display:block; margin-top:10px; font-size:15px; line-height:1.65; color:var(--body)}
.covers{list-style:none; margin:24px 0 0; padding:40px 0; display:grid; grid-template-columns:repeat(4,1fr); border-radius:18px; background:var(--g)}
.covers li{text-align:center; border-left:1px solid rgba(255,255,255,.2)}
.covers li:first-child{border-left:0}
.covers b{display:block; font-size:42px; font-weight:800; line-height:1.15; letter-spacing:-.04em; color:#fff; font-variant-numeric:tabular-nums}
.covers span{display:block; margin-top:6px; font-size:14.5px; color:#D5EBDF}
.cs .note-c{max-width:860px; margin-inline:auto}
.photos{margin-top:64px}
.photos .mq__row{animation-duration:36s}
.pht{flex:0 0 auto; width:440px; height:310px; margin-right:20px; border-radius:16px; object-fit:cover; background:#fff}
.cs__cta{display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:40px}

/* ═══════════ L-09 인증 · A/S — 다크 ═══════════ */
.awards{display:grid; grid-template-columns:repeat(6,1fr); gap:24px}
.award{text-align:center}
.award img{width:128px; height:128px; margin:0 auto; filter:drop-shadow(0 14px 26px rgba(0,0,0,.45))}
.award span{display:block; margin-top:20px; font-size:13.5px; color:#9AA39F}
.award b{display:block; margin-top:2px; font-size:17px; color:#fff}
.pf__sub{margin:96px 0 24px; text-align:center; font-size:15px; font-weight:700; color:#8D9692}
.certs{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.cert{padding:18px 18px 20px; text-align:center; background:#fff; border-radius:14px; color:var(--ink)}
.cert__img{display:flex; align-items:center; justify-content:center; aspect-ratio:4/5; padding:14px; border-radius:8px; background:var(--soft)}
.cert__img img{width:auto; max-height:100%; object-fit:contain}
.cert b{display:block; margin-top:14px; font-size:15.5px; color:var(--ink)}
.certlogos{margin-top:16px; padding:30px; text-align:center; background:#fff; border-radius:14px}
.certlogos img{width:100%; max-width:820px; margin-inline:auto}
.certlogos .note{margin-top:12px}
.as{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px}
.as__card{padding:32px; background:var(--dark2); border:1px solid rgba(255,255,255,.08); border-radius:14px; color:#A9B2AE}
.as__card .ic{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--g-hi); background:rgba(92,203,151,.12)}
.as__card .ic .ico{width:22px; height:22px}
.as__card h3{margin-top:18px; font-size:20px; color:#fff}
.as__card p{margin-top:10px; font-size:15px; line-height:1.65}
.as__tel{display:block; margin-top:10px; font-size:32px; font-weight:800; letter-spacing:-.02em; color:#fff}
.pf .note-c{margin-top:26px}

/* ═══════════ L-10a 판매 채널 ═══════════ */
.channels{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.channel{display:flex; align-items:center; gap:18px; padding:26px 26px 26px 24px; background:#fff; border:1px solid var(--line); border-radius:16px;
  transition:border-color .2s, transform .2s var(--ease)}
.channel:hover{border-color:var(--g); transform:translateY(-2px)}
.channel > i{flex:0 0 auto; width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-style:normal; font-size:16px; font-weight:800; color:var(--g); background:var(--g-tint)}
.channel > i .ico{width:22px; height:22px}
.channel b{display:block; font-size:18px; color:var(--ink)}
.channel > span > span{display:block; margin-top:2px; font-size:14.5px; color:var(--mute)}
.channel > em{margin-left:auto; color:var(--faint); transition:color .2s, transform .2s var(--ease)}
.channel:hover > em{color:var(--g); transform:translateX(3px)}
.channel > em .ico{width:20px; height:20px}
.channels--cms{margin-top:16px}
.channels--cms:empty{display:none}

/* ═══════════ L-10b 상담 신청 — 초록 단색 ═══════════ */
.fm{background:var(--g)}
.fm .sh h2{color:#fff}
.fm .sh p{color:#D5EBDF}
.formrow{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:24px; align-items:start}
.form{padding:48px; background:#fff; border-radius:20px; color:var(--body)}
.form__grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.form__full{grid-column:1 / -1}
.field label{display:block; margin-bottom:8px; font-size:14.5px; font-weight:700; color:var(--ink)}
.req{color:var(--g)}
.field input, .field select, .field textarea{width:100%; height:54px; padding:0 16px; border:1px solid var(--line2); border-radius:10px;
  background:#fff; font-size:16px; color:var(--ink)}
.field textarea{height:120px; padding:14px 16px; resize:vertical; line-height:1.6}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--g); box-shadow:var(--focus)}
.field input::placeholder, .field textarea::placeholder{color:var(--faint)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.agree{margin-top:26px; padding:22px 24px; border-radius:12px; background:var(--soft)}
.agree > label{display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:15px; font-weight:700; color:var(--ink)}
.agree input{flex:0 0 auto; width:20px; height:20px; margin:2px 0 0; accent-color:var(--g)}
.terms{margin:8px 0 0 30px; font-size:13px; line-height:1.75; color:var(--mute)}
.terms a{text-decoration:underline; text-underline-offset:2px}
.mt-12{margin-top:18px}
.form__submit{margin-top:26px; text-align:center}
.form__submit .btn{width:100%; height:62px; font-size:18px}
.form__submit p{margin-top:12px; font-size:14px; color:var(--mute)}
.formsend{margin-top:10px; font-size:14px}
.aside{padding:38px 34px; border-radius:20px; color:#E3F1E9; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22)}
.aside h3{font-size:21px; color:#fff}
.aside ul{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:16px}
.aside li{display:flex; align-items:flex-start; gap:12px; font-size:15.5px; line-height:1.55; color:#fff}
.aside li i{flex:0 0 auto; width:26px; height:26px; margin-top:-1px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-style:normal; font-size:13px; font-weight:800; color:var(--g); background:#fff}
.aside .tel{margin-top:30px; padding-top:26px; border-top:1px solid rgba(255,255,255,.24); font-size:14px; color:#E3F1E9}
.aside .tel b{display:block; margin:4px 0; font-size:34px; font-weight:800; letter-spacing:-.02em; color:#fff}

/* ═══════════ L-11 자주 묻는 질문 ═══════════ */
.qalist{max-width:880px; margin:0 auto; border-top:2px solid var(--ink)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{display:flex; align-items:center; gap:16px; padding:26px 4px; list-style:none; cursor:pointer;
  font-size:18px; font-weight:700; color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"Q"; flex:0 0 auto; font-size:18px; font-weight:800; color:var(--g)}
.qa summary::after{content:""; flex:0 0 auto; width:16px; height:16px; margin-left:auto; transition:transform .25s var(--ease);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23101418' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M8 2v12M2 8h12'/%3E%3C/svg%3E") center / 16px no-repeat}
.qa[open] summary::after{transform:rotate(45deg)}
.qa summary:hover{color:var(--g)}
.qa summary:focus-visible{outline:none; box-shadow:var(--focus)}
.qa p{padding:0 4px 28px 34px; font-size:16.5px; line-height:1.7; color:var(--body)}

/* ───────── 푸터 ───────── */
.site{padding:76px 0 120px; font-size:14.5px; color:#8D9692; background:#0E1110}
.foot{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:40px}
.foot__h{margin-bottom:16px; font-size:16px; color:#fff}
.biz{line-height:1.95}
.biz b{margin-right:4px; font-weight:600; color:#C3CAC7}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.foot a:hover{color:#fff}
.foot__bar{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; margin-top:52px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08)}

/* ───────── 떠 있는 상담 바 (데스크톱) · 하단 고정 바 (모바일) ───────── */
.fpill{position:fixed; left:50%; bottom:28px; z-index:70; display:flex; align-items:center; gap:22px;
  padding:9px 9px 9px 28px; border-radius:999px; color:#fff; background:rgba(18,22,20,.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 18px 44px rgba(0,0,0,.28);
  transform:translate(-50%, 160%); transition:transform .5s var(--ease)}
.fpill.is-on{transform:translate(-50%, 0)}
.fpill__t{font-size:15px; font-weight:600; white-space:nowrap}
.fpill__tel{display:flex; align-items:center; gap:8px; font-size:17px; font-weight:800; white-space:nowrap}
.fpill__tel .ico{width:18px; height:18px; color:var(--g-hi)}
.fpill .btn{height:48px; padding:0 24px; border-radius:999px}
.dock{display:none}

/* ───────── 스크롤 리빌 — 기본은 보이는 상태. 화면 밖 요소만 스크립트가 잠깐 숨긴다 ───────── */
.rv-arm{opacity:0; transform:translateY(26px)}
.rv-go{transition:opacity .8s var(--ease), transform .8s var(--ease)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mq__row, .lp2-rrow{animation:none; flex-wrap:wrap; width:auto}
  .tick, .tick img{transition:none}
  .rv-arm{opacity:1; transform:none}
  .fpill{transition:none}
}

/* ═══════════════════════ 반응형 ═══════════════════════ */
@media (max-width:1180px){
  .gnb__in{gap:28px}
  .gnb nav{gap:24px}
  .gnb__tel span{display:none}
  .pr__grid{gap:56px}
  .feat__txt{padding:44px}
  .lineup{grid-template-columns:repeat(2,1fr)}
  .inds{grid-template-columns:repeat(2,1fr)}
  .ind:nth-child(3){padding-left:0; border-left:0}
  .ind:nth-child(n+3){margin-top:28px; border-top:1px solid var(--line)}
  .awards{grid-template-columns:repeat(3,1fr); row-gap:44px}
  .certs{grid-template-columns:repeat(2,1fr)}
  .icards{grid-template-columns:repeat(2,1fr)}
  .as{grid-template-columns:1fr 1fr}
  .as__card:first-child{grid-column:1 / -1}
}
@media (max-width:1000px){
  .gnb nav{display:none}
  .hx__row{display:block}
  .hx__cta{margin-top:26px}
  .pr__grid{grid-template-columns:1fr; gap:36px}
  .calc{grid-template-columns:1fr}
  .calc__out{position:static}
  .feat{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .step:last-child{grid-column:1 / -1}
  .step:last-child .step__ph{aspect-ratio:auto; padding:40px 0}
  .ba{grid-template-columns:1fr; gap:0}
  .baS{aspect-ratio:880/930}
  .ba__txt{padding:40px}
  .videos{grid-template-columns:1fr 1fr}
  .video:nth-child(1){grid-column:1 / -1}
  .formrow{grid-template-columns:1fr}
  .channels{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .fpill{display:none}
  .hx__visual{height:clamp(380px, 46vw, 520px)}
  .hx__over{padding-bottom:20px}
}
@media (max-width:767px){
  body{font-size:16px; padding-bottom:74px}
  :root{--wrap:calc(100% - 40px)}
  .gnb__in{height:64px; gap:12px}
  .logo .logo-symbol{height:28px}
  .logo .logo-type{height:24px}
  .gnb__tel{display:none}
  .gnb__cta .btn{height:40px; padding:0 14px; font-size:14px}
  .jump{display:block; position:sticky; top:64px; z-index:55; background:rgba(255,255,255,.97); border-bottom:1px solid var(--line)}
  .jump .wrap{display:flex; gap:8px; overflow-x:auto; padding:10px 0; scrollbar-width:none}
  .jump .wrap::-webkit-scrollbar{display:none}
  .jump a{flex:0 0 auto; display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border:1px solid var(--line); border-radius:999px;
    font-size:14px; font-weight:700; color:var(--ink); background:#fff}

  .s{padding:84px 0}
  .sh{margin-bottom:40px}
  .sh h2{font-size:29px}
  .sh p{margin-top:12px; font-size:16px}
  .mq{-webkit-mask-image:none; mask-image:none}

  .hx{padding-top:40px}
  .hx__head{padding-bottom:32px}
  .hx__h1{font-size:30px}
  .hx__row{margin-top:22px; padding-top:22px}
  .hx__sub{font-size:16px}
  .hx__cta{display:grid; grid-template-columns:1fr; margin-top:22px}
  .hx__cta .btn{height:54px}
  .hx__visual{height:auto; aspect-ratio:3/2}
  .hx__img{object-position:52% 52%}
  .hx__over{padding-bottom:14px; align-items:flex-end}
  .hx__cap{padding:9px 14px 9px 12px; font-size:12px}
  .hx__cap b{margin-left:8px}
  .hx__cap span::before{margin:0 5px}

  .pr{padding:72px 0 80px}
  .pr__num strong{font-size:64px}
  .pr__txt p{font-size:19px}
  .pr__list{margin-top:28px; padding-top:22px}
  .pr__list li{grid-template-columns:104px 1fr 48px; gap:12px; font-size:14px}

  .cl{padding:84px 0 76px}
  .logos{gap:30px}
  .lgo{height:34px; max-width:128px; margin-right:52px}
  .rvw{width:300px; margin-right:14px; padding:24px 22px 20px}
  .rvw q{font-size:15.5px}
  .rvw .hold{top:24px; right:22px}

  .nws{padding:22px 22px 20px 26px}
  .nws b{font-size:19px}
  .nws > span{font-size:14px}
  .probs{margin-top:60px}
  .prob2{width:290px; margin-right:14px; padding:26px 20px}
  .prob2 b{font-size:18px}
  .prob2 span{font-size:14.5px}

  .calc__in, .calc__out{padding:26px 20px}
  .chip{height:42px; font-size:14px}
  .in-num, .calc select{width:140px; height:46px}
  .calc__big strong{font-size:40px}

  .sv__head b{font-size:28px}
  .stats{gap:10px; margin-top:40px}
  .stats li{padding:22px 10px}
  .stats b{font-size:24px}
  .stats span{font-size:13px}
  .savetbl{margin-top:60px}
  .savetbl h3{font-size:21px}
  .closing{margin-top:60px; font-size:21px}
  .tablewrap{overflow:visible; background:transparent; border:0}
  .tablewrap table thead{display:none}
  .tablewrap table, .tablewrap tbody, .tablewrap tr, .tablewrap td{display:block; width:100%}
  .tablewrap tr{margin-bottom:10px; padding:6px 16px; background:#fff; border:1px solid var(--line); border-radius:12px}
  .tablewrap tr.is-rec{background:#fff; border-color:var(--g)}
  .tablewrap td{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:9px 0; border-bottom:1px dashed var(--line); white-space:normal}
  .tablewrap td:last-child{border-bottom:0}
  .tablewrap td::before{content:attr(data-label); flex:0 0 auto; font-size:13px; font-weight:700; color:var(--mute)}
  .tablewrap td:first-child{display:block; padding-top:12px; font-size:17px; font-weight:800; color:var(--ink)}
  .tablewrap td:first-child::before{display:none}
  .tablewrap td.bar{display:none}

  .feat__img{padding:28px; border-right:0; border-bottom:1px solid var(--line)}
  .feat__img img{max-height:220px}
  .feat__txt{padding:28px 22px}
  .feat h3{font-size:30px}
  .spec{grid-template-columns:1fr}
  .feat .cta{display:grid; grid-template-columns:1fr}
  .lineup{grid-template-columns:1fr; gap:10px}
  .model{grid-template-columns:88px 1fr; padding:14px; gap:16px}
  .inds{grid-template-columns:1fr; margin-top:60px}
  .ind, .ind + .ind{padding:26px 0 0; border-left:0}
  .ind:nth-child(n+2){margin-top:26px; border-top:1px solid var(--line)}

  .steps{grid-template-columns:1fr; gap:36px}
  .step:last-child .step__ph{padding:32px 0}
  .step__ph--num b{font-size:72px}
  .ba{margin-top:72px; border-radius:16px}
  .baS{aspect-ratio:880/930}
  .ba__txt{padding:28px 22px 32px}
  .ba__txt h3{font-size:26px}

  .videos{grid-template-columns:1fr 1fr; gap:10px}
  .video b{padding:14px 16px; font-size:15px}
  .video:nth-child(n+2) b{padding:10px 12px; font-size:13px}

  .icards{grid-template-columns:1fr; gap:10px}
  .icard{padding:22px 20px}
  .covers{grid-template-columns:1fr 1fr; padding:8px 0}
  .covers li{padding:22px 0}
  .covers li:nth-child(3){border-left:0}
  .covers li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.2)}
  .covers b{font-size:30px}
  .photos{margin-top:44px}
  .pht{width:290px; height:210px; margin-right:12px}
  .cs__cta{display:grid; grid-template-columns:1fr 1fr}

  .awards{grid-template-columns:repeat(2,1fr); gap:34px 12px}
  .award img{width:100px; height:100px}
  .award b{font-size:15.5px}
  .pf__sub{margin-top:64px}
  .certs{gap:10px}
  .cert{padding:12px}
  .cert b{font-size:14px}
  .certlogos{padding:16px}
  .as{grid-template-columns:1fr}
  .as__card{padding:26px 22px}

  .channel{padding:20px}
  .form{padding:26px 20px; border-radius:16px}
  .form__grid{grid-template-columns:1fr}
  .agree{padding:18px 16px}
  .terms{margin-left:0}
  .aside{padding:28px 22px}

  .qa summary{padding:20px 2px; font-size:16.5px}
  .qa p{padding:0 2px 22px 30px; font-size:15.5px}

  .foot{grid-template-columns:1fr 1fr; gap:30px}
  .foot > div:first-child{grid-column:1 / -1}
  .site{padding-bottom:110px}

  .dock{position:fixed; left:0; right:0; bottom:0; z-index:80; display:grid; grid-template-columns:1fr 2fr; gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--line);
    box-shadow:0 -6px 20px rgba(16,20,24,.06)}
  .dock .btn{width:100%; height:52px}
}


/* ═════════ 2026-09-18 v2 — 기획안 v1.0 반영으로 새로 생긴 블록 ═════════ */

/* 대표 모델 카드 — 히어로에서 내려온 가격 조건과 성능 3종 (기획안 16쪽 성능 표현) */
.feat__price{margin-top:16px; font-size:21px; font-weight:800; letter-spacing:-.03em; color:var(--g)}
.feat__price span{display:block; margin-top:5px; font-size:13px; font-weight:600; letter-spacing:-.01em; color:var(--mute)}
.perf{list-style:none; margin:22px 0 0; padding:18px 4px; display:grid; grid-template-columns:repeat(3,1fr);
  background:var(--g-wash); border-radius:12px}
.perf li{padding:0 18px; border-left:2px solid var(--g)}
.perf b{display:block; font-size:19px; font-weight:800; line-height:1.15; letter-spacing:-.03em; color:var(--ink)}
.perf span{display:block; margin-top:4px; font-size:12.5px; line-height:1.35; color:var(--body)}
.feat__disc{margin-top:14px; font-size:11.5px; line-height:1.55; color:var(--faint)}

/* L-02 실사용 증거 — 전후 슬라이더 + 사례 수치 + 인터뷰 영상 */
.ev__grid{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); align-items:center; gap:56px}
.ev__side{display:grid; gap:0}
.ev__who{font-size:15px; font-weight:700; color:var(--ink)}
.ev__who span{display:block; margin-top:4px; font-size:13px; font-weight:500; color:var(--faint)}
.ev__num{display:flex; align-items:baseline; gap:10px; margin-top:16px}
.ev__num b{font-size:clamp(44px, 4.6vw, 62px); font-weight:800; line-height:1; letter-spacing:-.05em; color:var(--g); font-variant-numeric:tabular-nums}
.ev__num span{font-size:17px; font-weight:700; color:var(--ink)}
.ev__basis{margin-top:12px; font-size:13.5px; line-height:1.6; color:var(--mute)}
.ev__pts{list-style:none; margin:24px 0 0; padding:24px 0 0; display:grid; gap:12px; border-top:1px solid var(--line)}
.ev__pts li{display:flex; align-items:flex-start; gap:12px; font-size:16.5px; font-weight:600; color:var(--ink)}
.ev__pts .ic{flex:0 0 auto; width:26px; height:26px; margin-top:2px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--g)}
.ev__pts .ic .ico{width:14px; height:14px}
.ev__video{position:relative; display:block; width:100%; margin-top:26px; padding:0; border:0; border-radius:16px; overflow:hidden;
  background:#000; color:#fff; cursor:pointer; aspect-ratio:16/9}
.ev__video img{width:100%; height:100%; object-fit:cover; object-position:center 16%}
.ev__video b{position:absolute; left:0; right:0; bottom:0; padding:16px 20px; text-align:left; font-size:16px; font-weight:700; color:#fff; background:rgba(12,15,14,.66)}

/* 영상 카드가 button 이 되었다 — 브라우저 기본 버튼 모양을 지운다 */
button.video{padding:0; border:0; font:inherit; text-align:left; cursor:pointer; width:100%}

/* L-06 확인된 절감 사례 카드 */
.rvcards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.rvcard{padding:34px 30px 30px; background:#fff; border:1px solid var(--line); border-radius:16px}
.rvcard__num{display:flex; align-items:baseline; gap:8px}
.rvcard__num b{font-size:34px; font-weight:800; letter-spacing:-.04em; color:var(--g); font-variant-numeric:tabular-nums}
.rvcard__num span{font-size:15px; font-weight:700; color:var(--ink)}
.rvcard__who{margin-top:14px; font-size:16px; font-weight:700; color:var(--ink)}
.rvcard__desc{margin-top:8px; font-size:15px; line-height:1.65; color:var(--body)}

/* 계산기 결과 — 연 환산과 음수 표시 */
.calc__big em{display:block; margin-top:8px; font-style:normal; font-size:16px; font-weight:600; color:#C9D0CD; font-variant-numeric:tabular-nums}
.calc__big strong.is-minus{color:#FF9B8E}

@media (max-width:1000px){
  .ev__grid{grid-template-columns:1fr; gap:36px}
  .rvcards{grid-template-columns:1fr}
}
@media (max-width:767px){
  .ev__num b{font-size:40px}
  .ev__pts li{font-size:15.5px}
  .rvcard{padding:24px 20px}
  .rvcard__num b{font-size:28px}
  .calc__big em{font-size:15px}
}


/* 2026-09-18 수리 — 증거 섹션에서 두 가지가 겹쳤다
   ① .baS 는 align-self:stretch + aspect-ratio 라 행 높이만큼 늘어나 폭이 칸을 넘었다 → 폭 기준으로 고정
   ② .ev__video 는 .video:nth-child(n+2) (세로 쇼츠용) 에 걸려 9:16 으로 잡혔다 → 가로 카드로 되돌린다 */
.ev__grid .baS{align-self:start; width:100%; height:auto}
.ev__side .video{aspect-ratio:16/9}
.ev__side .video i{width:64px; height:64px; margin:-32px 0 0 -32px}
.ev__side .video b{padding:16px 20px; font-size:16px}


/* ═════ 2026-09-18 계산기 재정리 — 입력칸과 결과판이 따로 노는 느낌을 없앤다 ═════
   두 칸을 테두리 하나로 감싼 한 장의 카드로 만들고, 결과판을 검정에서 브랜드 초록으로 바꿨다.
   sticky 를 풀어 스크롤 중에 결과판만 따로 떠 있지 않게 한다 */
#calc .calc{grid-template-columns:1.06fr .94fr; gap:0; align-items:stretch;
  background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--sh)}
#calc .calc__in{border:0; border-radius:0; padding:44px 44px 46px; border-right:1px solid var(--line)}
#calc .calc__out{position:static; border-radius:0; padding:44px; background:var(--g); color:#DCEFE6;
  display:flex; flex-direction:column}
#calc .calc__out .calc__row{border-bottom:1px solid rgba(255,255,255,.2)}
#calc .calc__out .calc__row span{color:#CBE6DA}
#calc .calc__out .calc__row b{color:#fff}
#calc .calc__big{padding:32px 0 6px}
#calc .calc__big span{color:#CBE6DA}
#calc .calc__big strong{color:#fff}
#calc .calc__big strong.is-minus{color:#FFEFEA}
#calc .calc__big em{color:#CBE6DA}
#calc .calc__out .calc__note{color:#C2E1D4}
#calc .calc__out .btn{margin-top:auto; background:#fff; color:var(--g)}
#calc .calc__out .btn:hover{background:#EAF4EE}
#calc .calc__out .btn:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.55)}
/* 입력칸 강조도 같은 초록으로 */
#calc .chip.is-on{color:var(--g)}
#calc .range{accent-color:var(--g)}

@media (max-width:1000px){
  #calc .calc{grid-template-columns:1fr}
  #calc .calc__in{border-right:0; border-bottom:1px solid var(--line)}
}
@media (max-width:767px){
  #calc .calc{border-radius:16px}
  #calc .calc__in, #calc .calc__out{padding:26px 20px}
}

/* 결과판 아래 빈 자리를 상담 안내로 채운다 (버튼만 따로 떠 보이던 것) */
#calc .calc__next{margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.22)}
#calc .calc__next p{font-size:14px; font-weight:700; color:#fff}
#calc .calc__next ul{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px}
#calc .calc__next li{position:relative; padding-left:16px; font-size:14.5px; line-height:1.5; color:#CBE6DA}
#calc .calc__next li::before{content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.7)}
#calc .calc__out .btn{margin-top:26px}

/* 성능 3종은 좁은 폭에서 한 칸씩 쌓는다 (기본 정의보다 뒤에 와야 이긴다) */
@media (max-width:767px){
  .feat__price{font-size:19px}
  .perf{grid-template-columns:1fr; gap:15px; padding:18px 4px}
  .perf b{font-size:18px}
  .perf span{margin-top:2px}
}


.hx__eyebrow{font-size:20px; font-weight:700; line-height:1.25; color:var(--g); margin-bottom:16px}
.hx__eyebrow::after{content:""; display:block; clear:both}
.hx__eyebrow .tick{height:1.55em; margin:-.2em .14em 0 0}
.cert__img img{max-width:100%; max-height:100%; width:auto; height:auto}
.pricecmp{margin-top:56px; padding:32px; text-align:left; background:#fff; border:1px solid var(--line); border-radius:16px}
.pricecmp h3{font-size:22px}
.pricecmp__grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px}
.pricecmp__grid > div{padding:22px 24px; border:1px solid var(--line); border-radius:12px}
.pricecmp__grid > div.is-rec{border-color:var(--g); background:var(--g-tint)}
.pricecmp__grid b{display:block; font-size:19px; color:var(--ink)}
.pricecmp__grid b em{margin-left:8px; font-style:normal; font-size:13px; font-weight:700; color:var(--g)}
.pricecmp__grid > div > span{display:block; margin-top:6px; font-size:14px; color:var(--mute)}
.pricecmp__grid ul{list-style:none; margin:14px 0 0; padding:0}
.pricecmp__grid li{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--line); font-size:15px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
.pricecmp__grid li i{font-style:normal; font-weight:500; color:var(--mute)}
.pricecmp .note{margin-top:14px}
.lineup{grid-template-columns:repeat(4,1fr)}
.lineup .model{grid-template-columns:96px 1fr; gap:14px; padding:16px}
.model .pill{display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; font-size:11.5px; font-weight:700; color:#fff; background:var(--g); vertical-align:2px}
.model .g2b{grid-column:1 / -1; display:block; margin-top:2px; padding-top:10px; border-top:1px dashed var(--line); font-size:12.5px; line-height:1.4; color:var(--mute)}
.model .g2b b{display:inline; font-size:12.5px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
.model__img.is-hold{font-size:12.5px; line-height:1.4; color:var(--mute); text-align:center; padding:12px}
.model--cta{grid-template-columns:1fr; align-content:center; background:var(--g-tint); border-color:var(--g)}
.model--cta b{color:var(--g)}
.model--cta em{color:var(--g)}
.icard em{color:var(--mute); font-weight:600}
.g2b{margin-top:16px; padding:32px; background:#fff; border-radius:14px; color:var(--ink); text-align:left}
.g2b__head{display:flex; gap:16px; align-items:flex-start}
.g2b__head .ic{flex:0 0 auto; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--g); background:var(--g-tint)}
.g2b__head .ic .ico{width:22px; height:22px}
.g2b__head h3{font-size:20px; color:var(--ink)}
.g2b__head p{margin-top:6px; font-size:15px; line-height:1.6; color:var(--mute)}
.g2b .tablewrap{margin-top:18px}
.g2b table{width:100%; border-collapse:collapse; font-size:15px}
.g2b th, .g2b td{padding:11px 12px; border-bottom:1px solid var(--line); text-align:left; color:var(--ink)}
.g2b th{font-size:13.5px; font-weight:600; color:var(--mute); background:var(--soft)}
.g2b td b{font-weight:800; font-variant-numeric:tabular-nums}
.g2b tr.is-rec td{background:var(--g-tint)}
.g2b .note{margin-top:12px}
.field .hint{margin-top:6px; font-size:13px; line-height:1.5; color:var(--mute)}
.field[hidden]{display:none}
.terms--info{margin-top:16px; padding-top:14px; border-top:1px dashed var(--line2)}
.terms--info b{color:var(--ink)}
@media (max-width:1180px){
  .lineup{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .lineup{grid-template-columns:1fr}
  .lineup .model{grid-template-columns:88px 1fr}
  .pricecmp{padding:20px}
  .pricecmp__grid{grid-template-columns:1fr}
  .hx__eyebrow{font-size:15px}
  .g2b{padding:20px}
  .g2b th, .g2b td{padding:9px 8px; font-size:13.5px}
}


.hx__kicker{margin:0 0 18px; font-size:14.5px; font-weight:700; color:var(--mute)}
.hx__kicker b{display:inline-block; margin-right:10px; padding:4px 11px; border-radius:7px; color:#fff; background:var(--g); font-weight:800; letter-spacing:.01em}
.hx__eyebrow{font-size:24px}
.hx__eyebrow .tick{height:1.6em; margin-top:-.22em}
.hx__row{align-items:stretch}
.hx__ben{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px; flex:1 1 auto; max-width:680px}
.hx__ben li{padding:22px 24px; border:1px solid var(--line); border-radius:14px; background:#fff}
.hx__ben b{display:block; font-size:24px; font-weight:800; letter-spacing:-.03em; line-height:1.3; color:var(--g)}
.hx__ben span{display:block; margin-top:8px; font-size:13.5px; line-height:1.5; color:var(--mute)}
.hx__row .hx__cta{display:grid; align-content:center; gap:10px; flex:0 0 auto; margin:0}
.hx__cta .btn .ico{width:18px; height:18px; margin-right:6px}
.video.video--wide{aspect-ratio:16/9; margin-bottom:44px}
.video.video--wide b{padding:20px 24px; font-size:17px}
.video.video--wide i{width:72px; height:72px; margin:-36px 0 0 -36px}
.video.video--tall{aspect-ratio:9/16}
.video.video--tall b{padding:14px 16px; font-size:14.5px}
.rvmedia{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:720px; margin:0 auto 44px}
.why .sh p{max-width:780px}
.why__list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.why__list li{display:flex; gap:12px; align-items:flex-start; padding:22px 20px; border-radius:14px; background:var(--dark2); border:1px solid rgba(255,255,255,.08); color:#fff; font-size:15.5px; font-weight:600; line-height:1.5}
.why__list .ic{flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--g-hi); background:rgba(92,203,151,.14)}
.why__list .ic .ico{width:16px; height:16px}
.why__list small{display:block; margin-top:4px; font-size:13px; font-weight:500; color:#A9B2AE}
.why__cta{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:40px}
.why .btn--ghost{color:#fff; border-color:rgba(255,255,255,.35); background:transparent}
.why .btn--ghost:hover{border-color:#fff; color:#fff}
.btn--kakao{background:#FEE500; color:#191919; border-color:#FEE500}
.sv .cs__cta{margin-top:28px}
/* 단계형 상담 폼 */
.wz__bar{list-style:none; margin:0 0 28px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.wz__bar li{padding-top:12px; font-size:13px; font-weight:700; color:var(--faint)}
.wz__bar li::before{content:""; display:block; height:4px; margin-bottom:10px; border-radius:2px; background:var(--line)}
.wz__bar li.is-on{color:var(--g)}
.wz__bar li.is-on::before{background:var(--g)}
.wz__step{margin:0; padding:0; border:0; min-width:0}
.wz__step[hidden]{display:none}
.wz__step legend{padding:0; font-size:23px; font-weight:800; letter-spacing:-.03em; line-height:1.35; color:var(--ink)}
.wz__hint{margin:8px 0 22px; font-size:14.5px; line-height:1.5; color:var(--mute)}
.wz__chips{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.wz__chips--sm{grid-template-columns:repeat(3,1fr)}
.wchip{position:relative; display:block; cursor:pointer}
.wchip input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; -webkit-appearance:none; appearance:none}
.wchip span{display:block; min-height:58px; padding:14px 16px; border:1.5px solid var(--line2); border-radius:12px; font-size:16px; font-weight:700; line-height:1.35; color:var(--ink); background:#fff; transition:border-color .15s, background .15s}
.wchip small{display:block; margin-top:3px; font-size:12.5px; font-weight:500; color:var(--mute)}
.wchip:hover span{border-color:var(--g)}
.wchip input:checked + span{border-color:var(--g); background:var(--g-tint); box-shadow:inset 0 0 0 1px var(--g)}
.wchip input:focus-visible + span{box-shadow:var(--focus)}
.wz__nav{display:flex; justify-content:space-between; gap:10px; margin-top:26px}
.wz__nav .btn{min-width:140px; height:56px}
.wz__nav .wz__next, .wz__nav [type=submit]{margin-left:auto; flex:1 1 auto}
.wz .form__grid{margin-top:22px}
.field__t{display:block; margin-bottom:8px; font-size:14.5px; font-weight:700; color:var(--ink)}
.wz .field .wz__chips{grid-template-columns:repeat(4,1fr); gap:8px}
.wz .field .wchip span{min-height:48px; padding:12px 14px; font-size:14.5px; text-align:center}
.wz .agree{margin-top:22px}
.wz__after{margin-top:12px; text-align:center; font-size:14px; color:var(--mute)}
@media (max-width:1180px){
  .why__list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1000px){
  .hx__row{display:block}
  .hx__ben{max-width:none}
  .hx__row .hx__cta{grid-template-columns:1fr 1fr; margin-top:16px}
}
@media (max-width:767px){
  .hx{padding-top:22px}
  .hx__kicker{margin-bottom:14px; font-size:12.5px}
  .hx__kicker b{padding:3px 8px; font-size:12px}
  .hx__eyebrow{margin-bottom:12px; font-size:19px}
  .hx__eyebrow .tick{height:2em; margin-top:-.4em}
  .hx__h1{font-size:31px}
  .hx__head{padding-bottom:26px}
  .hx__row{margin-top:20px; padding-top:20px}
  .hx__ben{grid-template-columns:1fr; gap:8px}
  .hx__ben li{padding:16px 18px}
  .hx__ben b{font-size:22px}
  .hx__ben span{font-size:13px}
  .hx__row .hx__cta{grid-template-columns:1fr; gap:8px; margin-top:14px}
  .jump .wrap{gap:6px; padding:8px 0}
  .jump a{min-height:32px; padding:0 12px; font-size:13px}
  .sh h2{font-size:31px}
  .sh p{font-size:16.5px}
  .video.video--wide{margin-bottom:32px}
  .video.video--wide b{padding:14px 16px; font-size:15px}
  .steps{gap:28px}
  .step__txt h3{font-size:22px}
  .step__txt p{font-size:16px}
  .feat__img img{max-height:300px}
  .feat h3{font-size:38px}
  .feat__price{font-size:22px}
  .lineup .model{grid-template-columns:110px 1fr; gap:14px}
  .lineup .model__img{padding:6px}
  .model b{font-size:21px}
  .model em{font-size:18px}
  .rvmedia{grid-template-columns:1fr 1fr; gap:10px}
  .video.video--tall b{padding:10px 12px; font-size:13px}
  .why__list{grid-template-columns:1fr; gap:8px}
  .why__list li{padding:15px 16px; font-size:15px}
  .why__cta{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .why__cta .btn--primary{grid-column:1 / -1}
  .wz__step legend{font-size:20px}
  .wz__hint{font-size:14px}
  .wz__chips{grid-template-columns:1fr; gap:8px}
  .wz__chips--sm{grid-template-columns:1fr 1fr}
  .wchip span{min-height:54px; padding:13px 14px; font-size:15.5px}
  .wz .field .wz__chips{grid-template-columns:1fr 1fr}
  .wz__nav .btn{min-width:0; height:52px}
  .dock{grid-template-columns:1fr 2.4fr}
}

/* 카카오톡 채널 주소가 정해지기 전에는 버튼을 감춘다 (.btn 의 display 가 hidden 속성을 덮어쓰므로 명시) */
[data-kakao][hidden]{display:none !important}


.covers li.is-main b{font-size:52px}
.covers li.is-main span{color:#fff; font-weight:700}
.cert__img{display:block; width:100%; aspect-ratio:210/297; padding:0; overflow:hidden; cursor:zoom-in; border:1px solid var(--line); border-radius:8px; background:#fff; font:inherit; color:inherit}
.cert__img img{display:block; width:100%; height:100%; object-fit:contain}
.cert{padding:12px 12px 16px}
.cert b{margin-top:12px}
.cert__img:focus-visible{outline:none; box-shadow:var(--focus)}
.zoom__btns{display:flex; flex-wrap:wrap; gap:8px; padding:6px 18px 18px}
.zoom{width:min(96vw, 900px); max-width:none; max-height:96vh; padding:0; border:0; border-radius:14px; background:#fff; color:var(--ink); overflow:auto}
.zoom::backdrop{background:rgba(10,14,12,.78)}
.zoom__img{display:block; width:100%; height:auto}
.zoom__t{margin:0; padding:14px 60px 6px 18px; font-size:14px; font-weight:700}
.zoom__x{position:sticky; top:10px; float:right; margin:10px 10px -50px 0; width:40px; height:40px; border:0; border-radius:50%; background:rgba(10,14,12,.72); color:#fff; font-size:18px; cursor:pointer; z-index:2}
.faq__help{margin-top:28px; padding:22px 24px; border-radius:14px; background:var(--soft); text-align:center}
.faq__help p{margin:0 0 14px; font-size:15.5px; color:var(--body)}
.faq__help-row{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.as__card p b{color:#fff; font-weight:700}
.as__card p small{display:block; margin-top:6px; font-size:13px; color:#8a938f}
@media (max-width:767px){
  .covers li.is-main{grid-column:1 / -1; border-left:0; border-top:0}
  .covers li.is-main b{font-size:44px}
  .covers li:nth-child(2){border-left:0}
  .faq__help-row{display:grid; grid-template-columns:1fr}
  .zoom{width:100vw; max-height:100vh; border-radius:0}
}

.hx__kicker{font-size:17px; color:var(--ink)}
.hx__kicker b{margin:0 0 0 6px; padding:0; border-radius:0; color:var(--g); background:transparent; font-size:22px; font-weight:800; letter-spacing:-.02em; vertical-align:-1px}
.hx__kicker span{display:block; margin-top:4px; font-size:13.5px; font-weight:600; color:var(--mute)}
.hx__eyebrow small{display:inline-block; margin-left:8px; font-size:12.5px; font-weight:600; color:var(--mute); vertical-align:2px}
@media (max-width:767px){
  .hx__kicker{font-size:15px}
  .hx__kicker b{font-size:20px}
  .hx__eyebrow small{display:block; margin:6px 0 0; font-size:12px}
}


.lineup-intro{margin:8px 0 18px; padding:20px 24px; border-radius:14px; background:var(--g-tint); text-align:center}
.lineup-intro p{margin:0; font-size:16px; line-height:1.6; color:var(--body)}
.lineup-intro b{color:var(--g)}
.lineup .model{grid-template-columns:96px 1fr; align-items:start; gap:14px; padding:16px}
.model .use{display:block; margin-top:6px; font-size:13.5px; line-height:1.45; color:var(--body)}
.model .kind{display:inline-block; margin-top:8px; padding:3px 8px; border-radius:6px; font-size:12px; font-weight:700; color:var(--g); background:var(--g-tint)}
.model .buy{display:block; margin-top:6px; font-size:12.5px; line-height:1.45; color:var(--mute); font-variant-numeric:tabular-nums}
.model .g2b{grid-column:1 / -1; margin-top:8px}
.model__cta{grid-column:1 / -1; display:flex; align-items:center; gap:12px; margin-top:12px}
.model__cta .btn--sm{height:42px; padding:0 16px; font-size:14px}
.model__more{font-size:13.5px; font-weight:700; color:var(--g); text-decoration:underline; text-underline-offset:3px}
.feat__ask{margin-top:14px; padding:12px 14px; border-radius:10px; background:var(--g-tint); font-size:14.5px; font-weight:600; color:var(--g)}
.probs__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:var(--wrap); margin:0 auto}
.probs__grid .prob2{width:auto; margin:0}
.lite{display:grid; grid-template-columns:1fr 1fr auto; gap:14px; align-items:center; margin-top:18px; padding:22px 24px; border:1px solid var(--line); border-radius:16px; background:#fff; text-align:left}
.lite__card b{display:block; font-size:19px; color:var(--ink)}
.lite__card span{display:block; margin-top:6px; font-size:14.5px; line-height:1.55; color:var(--body)}
.lite__card em{display:inline-block; margin-top:10px; padding:4px 10px; border-radius:6px; font-style:normal; font-size:12.5px; font-weight:700; color:var(--g); background:var(--g-tint)}
.covers--3{grid-template-columns:1.4fr 1fr 1fr}
.covers--3 li:not(.is-main) b{font-size:30px}
.as__card--contact .as__tel{font-size:36px}
.as__card--contact p small{margin-top:8px}
.as__card--contact .btn{margin-top:16px}
@media (max-width:1180px){
  .lite{grid-template-columns:1fr 1fr}
  .lite .btn{grid-column:1 / -1}
}
@media (max-width:767px){
  .lineup-intro{padding:16px 18px; text-align:left}
  .lineup-intro p{font-size:15px}
  .lineup .model{grid-template-columns:96px 1fr}
  .model__cta{flex-wrap:wrap; gap:10px}
  .model__cta .btn--sm{flex:1 1 auto}
  .probs__grid{grid-template-columns:1fr; gap:10px}
  .lite{grid-template-columns:1fr; padding:18px}
  .covers--3{grid-template-columns:1fr}
  .covers--3 li{border-left:0}
  .covers--3 li:nth-child(n+2){border-top:1px solid rgba(255,255,255,.2)}
  .as__card--contact .as__tel{font-size:32px}
}

/* ── 2026-09-22 라인업 카드 세로형 재구성: 사진 크게 위, 정보 순서 고정, 식별번호 · 버튼은 카드 하단 정렬 */
.lineup{align-items:stretch; gap:18px}
.lineup .model{display:flex; flex-direction:column; align-items:stretch; gap:0; padding:18px}
.lineup .model__img{width:100%; aspect-ratio:1; padding:10px; margin-bottom:16px; border:1px solid var(--line); border-radius:12px; background:#fff}
.lineup .model__img img{width:100%; height:100%; object-fit:contain; mix-blend-mode:normal}
.lineup .model__body{display:block}
.lineup .model b{font-size:21px; line-height:1.3}
.lineup .model .cap{margin-top:4px; font-size:14.5px}
.lineup .model .use{margin-top:6px; min-height:2.9em; font-size:13.5px; line-height:1.45}
.lineup .model .kind{margin-top:10px}
.lineup .model em{display:block; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:22px; line-height:1.2}
.lineup .model em small{display:block; margin:0 0 4px; font-size:12.5px}
.lineup .model .buy{margin-top:6px; font-size:12.5px}
.lineup .model .g2b{margin-top:12px; padding-top:10px; min-height:2.4em; border-top:1px dashed var(--line)}
.lineup .model__cta{margin-top:auto; padding-top:14px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px}
.lineup .model__cta .btn--sm{height:46px; padding:0 12px; font-size:14px}
@media (max-width:1180px){ .lineup{grid-template-columns:repeat(2,1fr)} }
@media (max-width:767px){
  .lineup{grid-template-columns:1fr 1fr; gap:10px}
  .lineup .model{padding:14px}
  .lineup .model__img{padding:6px; margin-bottom:12px}
  .lineup .model b{font-size:17px}
  .lineup .model .cap{font-size:13px}
  .lineup .model .use{font-size:12.5px; min-height:3.6em}
  .lineup .model em{font-size:18px; margin-top:12px; padding-top:10px}
  .lineup .model .buy{font-size:11.5px}
  .lineup .model .g2b{font-size:11.5px}
  .lineup .model__cta{grid-template-columns:1fr; gap:6px; text-align:center}
  .lineup .model__cta .btn--sm{height:42px; font-size:13.5px}
}
/* 식별번호 + 버튼 묶음을 카드 바닥에 붙여 같은 줄에 정렬 · 식별번호는 한 줄 작은 글씨 */
.lineup .model__foot{display:block; margin-top:auto; padding-top:12px}
.lineup .model .g2b{margin:0 0 10px; padding-top:10px; min-height:0; border-top:1px dashed var(--line); font-size:12.5px; color:var(--mute)}
.lineup .model .g2b b{display:inline; font-size:13px; font-weight:800; color:var(--ink); letter-spacing:.01em}
.lineup .model__cta{margin-top:0; padding-top:0}
@media (max-width:767px){ .lineup .model .g2b{font-size:11.5px} .lineup .model .g2b b{font-size:12px} }


.feat__size{margin-top:14px; padding:12px 14px; border-radius:10px; border:1px solid var(--line); font-size:14.5px; font-weight:700; color:var(--ink)}
.feat__size span{display:block; margin-top:4px; font-size:13px; font-weight:500; color:var(--mute)}
.nara-cta{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px; padding:16px 18px; border-radius:12px; background:#F5F1EA; border:1px solid #E4D9C7}
.nara-cta p{margin:0; font-size:13.5px; line-height:1.5; color:var(--body)}
.nara-cta b{display:block; font-size:15px; color:var(--ink)}
.nara-cta .btn{flex:0 0 auto; border-color:#8A6A45; color:#6B4E2E}
.lineup-intro__size{margin-top:8px !important; font-size:13.5px !important; color:var(--mute) !important}
.lineup .model__spec{display:grid; gap:2px; margin-top:10px; font-size:12.5px; line-height:1.45; color:var(--body); font-variant-numeric:tabular-nums}
.lineup .model__spec i{display:inline-block; min-width:56px; font-style:normal; color:var(--mute)}
.calc__note--tight{margin-top:-4px}
.calc__more{margin:22px auto 0; max-width:720px; padding:14px 18px; border-radius:12px; background:rgba(255,255,255,.6); border:1px solid var(--line); font-size:13.5px; color:var(--mute)}
.calc__more summary{cursor:pointer; font-weight:700; color:var(--body)}
.calc__more ul{margin:10px 0 0; padding-left:18px; line-height:1.7}
.sv__formula{margin-top:16px; font-size:13.5px; color:var(--mute); font-variant-numeric:tabular-nums}
.pricecmp__sub{margin:4px 0 0; font-size:15px; color:var(--mute)}
.bpr{margin:16px 0 0; padding:14px 18px 14px 34px; border-radius:12px; background:var(--soft); font-size:14.5px; line-height:1.7; color:var(--body)}
.bpr__fig{margin:0 0 14px}
.bpr__fig img{display:block; width:100%; height:auto; border-radius:10px; border:1px solid var(--line); background:#fff}
.bpr__fig figcaption{margin-top:6px; font-size:12.5px; color:var(--mute)}
.pricecmp__note{display:inline-block !important; margin-top:8px !important; padding:3px 10px; border-radius:6px; font-size:13px !important; font-weight:700; color:var(--ink) !important; background:var(--g-tint)}
.rvcard__tag{display:inline-block; margin-top:10px; padding:2px 8px; border-radius:6px; font-size:12px; font-weight:700; color:var(--mute); background:var(--soft)}
.tlb{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px}
.tlb__card{display:flex; flex-direction:column; padding:16px; border:1px solid #E4D9C7; border-radius:14px; background:#FBF8F3}
.tlb__img{display:flex; align-items:center; justify-content:center; aspect-ratio:1; margin-bottom:12px; border-radius:10px; background:#fff; border:1px solid #EFE6D8; overflow:hidden}
.tlb__img img{width:100%; height:100%; object-fit:contain}
.tlb__img.is-hold{font-size:13px; font-weight:600; color:#9A8568; background:#F3ECE1}
.tlb__name{font-size:20px; color:#5A3F22}
.tlb__card dl{display:grid; grid-template-columns:auto 1fr; gap:5px 12px; margin:10px 0 14px; font-size:13px; line-height:1.4}
.tlb__card dt{color:var(--mute)}
.tlb__card dd{margin:0; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums}
.tlb__card .btn{margin-top:auto; width:100%; background:#6B4E2E; border-color:#6B4E2E}
.tlb__mini{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; padding:16px 18px; border:1px dashed var(--line2); border-radius:12px; font-size:14px; color:var(--body)}
.tlb__mini b{font-size:17px; color:var(--ink); margin-right:8px}
.tlb__mini span b{font-size:14px; margin:0}
.tlb__badge{display:inline-block; margin-right:8px; padding:2px 8px; border-radius:6px; font-size:12px; font-weight:700; color:var(--mute); background:var(--soft)}
.tlb__common{display:flex; flex-wrap:wrap; gap:6px 16px; margin:14px 0 0; padding:0; list-style:none; font-size:13px; color:var(--mute)}
.tlb__common li::before{content:"· "}
.wz__picked{margin:-10px 0 18px; padding:10px 14px; border-radius:10px; background:#F5F1EA; font-size:14px; font-weight:700; color:#6B4E2E}
.wz__picked[hidden]{display:none}
.hx__kakao{display:block; margin-top:4px; text-align:center; font-size:14px; font-weight:700; color:#3A1D1D; text-decoration:underline; text-underline-offset:3px}
.aside__kakao{display:inline-block; margin:6px 0 8px; padding:6px 12px; border-radius:8px; background:#FEE500; color:#191919; font-weight:700}
.aside .tel small{display:block; font-size:13px; color:#CFE3D8}
.dock{grid-template-columns:1fr 1fr 1.8fr}
.dock .btn--kakao{background:#FEE500; border-color:#FEE500; color:#191919}
@media (max-width:1000px){ .tlb{grid-template-columns:repeat(2,1fr)} }
@media (max-width:767px){
  .nara-cta{flex-direction:column; align-items:stretch}
  .nara-cta .btn{width:100%}
  .tlb{grid-template-columns:1fr 1fr; gap:10px}
  .tlb__card{padding:12px}
  .tlb__name{font-size:17px}
  .tlb__card dl{grid-template-columns:1fr; gap:0; font-size:12px}
  .tlb__card dd{text-align:left; margin-bottom:5px}
  .tlb__mini{flex-direction:column; align-items:stretch}
  .dock{grid-template-columns:.9fr 1fr 1.6fr}
}
/* 나라장터 카드 — 모바일에서 2열이 화면 밖으로 밀리지 않게 (긴 버튼 글자가 최소 너비를 키우던 문제) */
.tlb{grid-template-columns:repeat(3,minmax(0,1fr))}
.tlb__card .btn{white-space:normal; height:auto; min-height:46px; line-height:1.3; padding:10px 12px}
@media (max-width:1000px){ .tlb{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:767px){
  .tlb{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tlb__card .btn{min-height:42px; padding:8px 6px; font-size:13px}
  .tlb__card dd{word-break:keep-all; overflow-wrap:anywhere}
}
/* 절감액 섹션 버튼 두 개 — 모바일에서 한 줄에 억지로 넣어 화면 밖으로 밀리던 문제 (3차부터 있던 넘침) */
@media (max-width:767px){ .sv .cs__cta{grid-template-columns:1fr} .sv .cs__cta .btn{width:100%} }
/* 설치 사례 섹션 버튼도 같은 넘침 — 모바일에서 한 줄에 하나씩 */
@media (max-width:767px){ .cs .cs__cta{grid-template-columns:1fr} .cs .cs__cta .btn{width:100%} }
/* 좁은 휴대폰(400px 이하) — 선택 이유 섹션 버튼도 한 줄에 하나씩 */
@media (max-width:400px){ .why__cta{grid-template-columns:1fr} .why__cta .btn{width:100%} }

/* ── 2026-09-22 드림파트너스 로고 교체: PC는 가로형(문양 + DREAM PARTNERS), 모바일은 세로형(문양 위 · 글자 아래).
      기존 문양 위 DRPT 글자와 영문 슬로건은 쓰지 않는다. 작아져도 DREAM PARTNERS 가 읽히도록 높이를 넉넉히 준다 */
.logo picture{display:block; line-height:0}
.logo .logo-img{display:block; height:30px; width:auto}
@media (max-width:767px){ .logo .logo-img{height:46px} }