/* ============================================================
   호갱약방 v5 — 커머스 디자인 시스템
   (아정당·옆커폰 문법: 흰 바탕 + 선명한 포인트색 + 실제 상품 이미지)
   ============================================================ */
:root{
  --navy:#0F1B33; --ink:#171F2E; --blue:#2B5CFF; --blue-dk:#1E46D6; --blue-lt:#EEF3FF; --blue-md:#D8E3FF; --blue-deep:#0F2A8C;
  --page:#F5F7FB; --card:#FFFFFF; --line:#E6EAF2; --line2:#CFD7E4;
  --sub:#59657A; --sub2:#8A95A8; --red:#FF4D4F; --red-lt:#FFECEC; --gold:#FFB020; --gold-lt:#FFF6E3;
  --ok:#10B981; --ok-dk:#0A8F62; --ok-lt:#E7F8F1; --warn:#E8590C; --warn-lt:#FFF1E8; --mint:#12D6A7;
  --kk:#FEE500; --kk-t:#191919; --sk:#F2543D; --kt:#111827; --lg:#E6007E;
  /* 도장(인주) 색 — 호갱약방의 "약속·보증" 표시에만 씁니다 (약속 배지, 영수증 도장 글귀, FAQ 의 Q) */
  --seal:#9B3F30; --seal-dk:#7A2E22; --seal-lt:#F8EDE9;
  --w:1180px; --gut:clamp(16px,4vw,24px); --r:18px; --r2:12px; --r3:24px;
  /* 간격 체계: 섹션 사이(--sec), 좁은 섹션(--sec-s), 카드 사이(--gap) */
  --sec:clamp(52px,6.5vw,88px); --sec-s:clamp(36px,5vw,56px); --gap:clamp(14px,1.6vw,20px);
  --sh:0 1px 2px rgba(15,27,51,.04),0 8px 24px rgba(15,27,51,.05); --sh2:0 14px 40px rgba(15,27,51,.12); --sh3:0 24px 60px rgba(15,27,51,.18);
  --hd:68px; --util:36px; --bbar:64px; --sab:env(safe-area-inset-bottom,0px);
  --ease:cubic-bezier(.22,.9,.3,1); --out:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.3,1.5,.5,1);
  /* v2 호환 별칭 */
  --tint:var(--blue-lt); --tint2:var(--blue-md); --bg:var(--page); --soft:#F8FAFD; --act:var(--blue); --act-dk:var(--blue-dk);
  --okbg:var(--ok-lt); --okl:#BFE8D4; --warnbg:var(--warn-lt); --warnl:#F6CDB6;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  color:var(--ink);background:var(--page);line-height:1.6;-webkit-font-smoothing:antialiased;font-size:15.5px;overflow-x:hidden;word-break:keep-all;overflow-wrap:break-word}
@media(max-width:560px){body{font-size:15px}}
::selection{background:var(--blue);color:#fff}
body.lock{overflow:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit;padding:0}
:where(button,a,input,select,textarea):focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:10px 14px;border-radius:8px;z-index:200;font-weight:700}
.skip:focus{left:8px}
.ico{width:1.15em;height:1.15em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;display:inline-block;vertical-align:-.2em}
h1,h2,h3,h4{margin:0;word-break:keep-all;letter-spacing:-.03em;line-height:1.22;text-wrap:balance}
h1{font-size:clamp(28px,4.4vw,42px);font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(21px,3vw,30px);font-weight:800}
h3{font-size:clamp(16.5px,2vw,19px);font-weight:800;line-height:1.35;letter-spacing:-.02em}
p{margin:0 0 12px;word-break:keep-all}
.lead{font-size:clamp(15.5px,1.9vw,17.5px);color:var(--sub);line-height:1.72;max-width:62ch}
.sm{font-size:13.5px;color:var(--sub);line-height:1.65}
.xs{font-size:12.5px;color:var(--sub2);line-height:1.55}
.num{font-variant-numeric:tabular-nums}

/* ============ 띠배너 ============ */
.strip{background:var(--navy);color:#fff;font-size:13.5px;font-weight:600;height:38px;overflow:hidden}
.strip .wrap{height:100%;display:flex;align-items:center;justify-content:center;gap:10px}
.strip .s-item{position:absolute;opacity:0;transform:translateY(8px);transition:.4s;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
@media(max-width:480px){.strip{font-size:12.5px}}
.strip .s-item.on{opacity:1;transform:none}
.strip .s-box{position:relative;height:100%;flex:1;display:flex;align-items:center;justify-content:center}
.strip .s-tag{background:var(--kk);color:var(--kk-t);font-size:11px;font-weight:800;padding:3px 7px;border-radius:5px;margin-right:8px;vertical-align:1px}

/* ============ 헤더 ============ */
.util{background:#fff;border-bottom:1px solid var(--line);height:var(--util);font-size:12.5px;color:var(--sub)}
.util .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}
.util b{color:var(--ink);font-weight:800;font-size:13px}
.util a:hover{color:var(--blue)}
.util .r{display:flex;gap:16px}
.hd{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .2s}
.hd.scrolled{box-shadow:0 6px 24px rgba(15,27,51,.08)}
.hd-in{max-width:var(--w);margin:0 auto;padding:0 var(--gut);height:var(--hd);display:flex;align-items:center;gap:6px;transition:height .25s var(--ease)}
@media(min-width:961px){.hd.scrolled .hd-in{height:60px}}
.logo{display:flex;align-items:center;gap:9px;font-size:22px;font-weight:900;letter-spacing:-.045em;margin-right:18px;white-space:nowrap;color:var(--navy)}
.logo i{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,var(--blue),#5B8DEF);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;font-style:normal;box-shadow:0 4px 12px rgba(43,92,255,.3)}
.logo .mk{width:38px;height:38px;object-fit:contain;display:block;flex:0 0 auto;filter:drop-shadow(0 1px 1px rgba(15,27,51,.12))}  /* 호갱약방 도장 마크(ㅎㄱㅇㅂ) — assets/brand/mark-80.png */
.nav{display:flex;gap:2px;margin-right:auto}
.nav a{padding:0 13px;height:40px;display:flex;align-items:center;font-size:15.5px;font-weight:700;color:var(--ink);position:relative;border-radius:10px;transition:.15s}
.nav a:hover{color:var(--blue);background:var(--blue-lt)}
.nav a.on{color:var(--blue)}
.nav a.on::after{content:"";position:absolute;left:13px;right:13px;bottom:-15px;height:3px;background:var(--blue);border-radius:3px 3px 0 0}
.hd-right{display:flex;align-items:center;gap:8px}
.hd-tel{display:inline-flex;align-items:center;gap:7px;font-weight:900;color:var(--navy);font-size:18px;letter-spacing:-.02em;padding:8px 10px;border-radius:10px}
.hd-tel .ico{color:var(--blue)}
.hd-cta{padding:11px 18px;border-radius:11px;background:var(--blue);color:#fff;font-size:15px;font-weight:800;transition:.18s var(--ease);white-space:nowrap;box-shadow:0 6px 16px rgba(43,92,255,.25)}
.hd-cta:hover{background:var(--blue-dk);transform:translateY(-1px)}
.hd-cta.gh{background:#fff;color:var(--ink);border:1.5px solid var(--line2);box-shadow:none}
.hd-cta.gh:hover{border-color:var(--blue);color:var(--blue);background:#fff}
.burger,.hd-tel-m{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:10px}
.burger .ico,.hd-tel-m .ico{width:24px;height:24px}
.hd-tel-m{color:var(--blue)}
@media(max-width:960px){
  :root{--hd:56px}
  .util,.nav,.hd-cta,.hd-tel{display:none}
  .burger,.hd-tel-m{display:flex}.hd-tel-m{margin-left:auto}
  .logo{font-size:19px;margin-right:0}.logo i{width:32px;height:32px;border-radius:10px;font-size:14px}.logo .mk{width:33px;height:33px}
}

/* ============ 드로어 ============ */
.dbg{position:fixed;inset:0;background:rgba(15,27,51,.5);z-index:90;opacity:0;pointer-events:none;transition:opacity .25s}
.dbg.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(84vw,340px);background:#fff;z-index:95;transform:translateX(102%);
  transition:transform .32s var(--ease);display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(15,27,51,.14);height:100dvh}
.drawer.on{transform:none}
.dr-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 12px 20px;border-bottom:1px solid var(--line)}
.dr-hd b{font-size:17px}
.dr-x{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px}
.dr-tel{display:flex;align-items:center;gap:10px;padding:16px 20px;background:var(--blue-lt);border-bottom:1px solid var(--line)}
.dr-tel .ico{color:var(--blue);width:22px;height:22px}
.dr-tel b{font-size:20px;font-weight:900;color:var(--navy);letter-spacing:-.02em}
.dr-tel span{font-size:12px;color:var(--sub);display:block}
.dr-nav{flex:1;overflow-y:auto;padding:6px 0}
.dr-nav a{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;font-size:16px;font-weight:700;color:var(--ink)}
.dr-nav a.on{color:var(--blue);background:var(--blue-lt)}
.dr-nav a .ico{color:var(--sub2);width:18px;height:18px}
.dr-cta{padding:12px 14px calc(12px + var(--sab));border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--page)}
.dr-cta a{display:flex;align-items:center;justify-content:center;gap:7px;padding:14px;border-radius:12px;font-weight:800;font-size:15px}
.dr-cta .a{background:var(--kk);color:var(--kk-t)}
.dr-cta .b{background:var(--blue);color:#fff}

/* ============ 플로팅 — PC ============ */
.rail{position:fixed;right:20px;bottom:28px;z-index:70;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.rail a,.rail button{display:flex;align-items:center;gap:9px;height:50px;padding:0 18px 0 14px;border-radius:99px;font-size:14px;font-weight:800;
  box-shadow:var(--sh2);transition:.18s var(--ease);white-space:nowrap;background:#fff;color:var(--ink);border:1px solid var(--line)}
.rail a:hover,.rail button:hover{transform:translateX(-3px)}
.rail .ico{width:20px;height:20px}
.rail .pri{background:var(--blue);color:#fff;border-color:var(--blue)}
.rail .kk{background:var(--kk);color:var(--kk-t);border-color:var(--kk)}
.rail .nv{background:var(--navy);color:#fff;border-color:var(--navy)}
.rail .top{width:50px;padding:0;justify-content:center;opacity:0;pointer-events:none;transform:translateY(6px)}
.rail .top.show{opacity:1;pointer-events:auto;transform:none}
@media(min-width:961px) and (max-width:1500px){
  .rail a,.rail button{width:50px;padding:0;justify-content:center;gap:0}
  .rail .lb{display:none}
  .rail a:hover,.rail a:focus-visible{width:auto;padding:0 18px 0 14px;gap:9px;transform:none}
  .rail a:hover .lb,.rail a:focus-visible .lb{display:inline}
}

/* ============ 플로팅 — 모바일 하단바 ============ */
.bbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);
  padding:8px 10px calc(8px + var(--sab));grid-template-columns:1fr 1fr 1fr 1.6fr;gap:8px;box-shadow:0 -6px 20px rgba(15,27,51,.06)}
.bbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:50px;border-radius:12px;font-size:11.5px;font-weight:800;transition:.12s}
.bbar a:active{transform:scale(.96)}
.bbar a .ico{width:21px;height:21px}
.bbar .tel{background:#fff;border:1.5px solid var(--line2);color:var(--ink)}
.bbar .kk{background:var(--kk);color:var(--kk-t)}
.bbar .pri{background:var(--blue);color:#fff;flex-direction:row;gap:6px;font-size:14.5px;box-shadow:0 6px 16px rgba(43,92,255,.25)}
@media(max-width:340px){.bbar{grid-template-columns:1fr 1fr 1fr 1.3fr}.bbar a{font-size:11px}.bbar .pri{font-size:13px}}
.topm{display:none;position:fixed;right:14px;bottom:calc(var(--bbar) + 16px + var(--sab));z-index:69;width:42px;height:42px;border-radius:50%;background:#fff;
  border:1px solid var(--line);box-shadow:var(--sh2);align-items:center;justify-content:center;color:var(--ink);opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s}
.topm.show{opacity:1;transform:none;pointer-events:auto}
@media(max-width:960px){.rail{display:none}.bbar{display:grid}.topm{display:flex}body{padding-bottom:calc(var(--bbar) + var(--sab) + 6px)}}

/* ============ 섹션·헤더 패턴 ============ */
.sec{padding:var(--sec) 0}
.sec.white{background:#fff}
.sec.navy{background:var(--navy);color:#fff}
.sec.tint{background:linear-gradient(180deg,#F1F5FF 0%,#F8FAFF 100%)}
.sec.tight{padding:var(--sec-s) 0}
.sec.soft{background:var(--soft)}
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 16px;margin-bottom:clamp(20px,3vw,32px);flex-wrap:wrap}
.sh h2{flex:1 1 240px;min-width:0}.sh .more{margin-left:auto}
@media(max-width:560px){.sh{align-items:flex-start;margin-bottom:18px}.sh .more{padding:6px 10px;font-size:12.5px;margin-top:2px}.sh h2 small{font-size:13.5px}}
.sh h2 small{display:block;font-size:14.5px;font-weight:600;color:var(--sub);margin-top:8px;letter-spacing:0;line-height:1.6;max-width:56ch;text-wrap:pretty}
.sh .k{display:inline-block;font-size:12.5px;font-weight:800;color:var(--blue);letter-spacing:.04em;margin-bottom:8px}
.sec.navy .sh h2 small{color:#AEB9CC}
.more{font-size:14px;font-weight:700;color:var(--sub);display:inline-flex;align-items:center;gap:3px;white-space:nowrap;padding:8px 12px;border-radius:99px;border:1px solid var(--line);background:#fff;transition:.15s}
.more:hover{color:var(--blue);border-color:var(--blue-md)}
.more .ico{width:16px;height:16px}
.crumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--sub2);flex-wrap:wrap}
.crumb b{color:var(--ink);font-weight:600}
.pagehd{background:#fff;border-bottom:1px solid var(--line);padding:clamp(28px,4.5vw,48px) 0;position:relative;overflow:hidden}
.pagehd::before{content:"";position:absolute;right:-120px;top:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,rgba(43,92,255,.10),transparent)}
.pagehd h1{margin:8px 0 6px}
.pagehd .lead{margin:0}

/* ============ 버튼 ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;min-height:50px;border-radius:12px;font-size:15.5px;font-weight:800;
  background:var(--blue);color:#fff;transition:.18s var(--ease);border:1.5px solid transparent;white-space:nowrap;box-shadow:0 6px 16px rgba(43,92,255,.22)}
.btn:hover{background:var(--blue-dk);transform:translateY(-1px);box-shadow:0 10px 22px rgba(43,92,255,.28)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:.08s}
.btn.lg{padding:17px 30px;font-size:17px;border-radius:14px;min-height:58px}
.btn.sm{padding:10px 16px;min-height:40px;font-size:14px;border-radius:10px;box-shadow:none}
.btn.gh{background:#fff;color:var(--ink);border-color:var(--line2);box-shadow:none}
.btn.gh:hover{border-color:var(--blue);color:var(--blue);background:#fff;box-shadow:none}
.btn.soft{background:var(--blue-lt);color:var(--blue);box-shadow:none}
.btn.soft:hover{background:var(--blue-md)}
.btn.kk{background:var(--kk);color:var(--kk-t);box-shadow:none}
.btn.kk:hover{filter:brightness(.96);background:var(--kk)}
.btn.nv{background:var(--navy);color:#fff;box-shadow:0 6px 16px rgba(15,27,51,.22)}.btn.nv:hover{background:#0B1322}
.btn.wt{background:#fff;color:var(--blue);box-shadow:0 8px 20px rgba(0,0,0,.12)}.btn.wt:hover{background:#F3F6FF}
.btn.ol{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);box-shadow:none}.btn.ol:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn.full{display:flex;width:100%}
.btn[disabled]{background:#C3CBD9;cursor:not-allowed;transform:none;box-shadow:none}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:480px){.btn-row .btn{flex:1 1 100%}}

/* ============ 카드·배지 ============ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.6vw,24px);box-shadow:var(--sh)}
.card.flat{box-shadow:none}
.card.lift{transition:.2s var(--ease)}
.card.lift:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--blue-md)}
.card.tint{background:var(--blue-lt);border-color:var(--blue-md)}
.card.ok{background:var(--ok-lt);border-color:#BFE8D4}
.card.warn{background:var(--warn-lt);border-color:#F6CDB6}
.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.g4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.g4,.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g3,.g2{grid-template-columns:1fr}.g4{grid-template-columns:repeat(2,1fr);gap:10px}}
@media(max-width:340px){.g4{grid-template-columns:1fr}}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:800;padding:4px 8px;border-radius:7px;line-height:1.3;letter-spacing:-.01em}
.badge.red{background:var(--red);color:#fff}.badge.blue{background:var(--blue);color:#fff}.badge.gold{background:var(--gold);color:#fff}
.badge.lt{background:var(--blue-lt);color:var(--blue)}.badge.gray{background:var(--page);color:var(--sub);border:1px solid var(--line)}
.badge.ok{background:var(--ok-lt);color:var(--ok-dk)}.badge.warn{background:var(--warn-lt);color:var(--warn)}.badge.navy{background:var(--navy);color:#fff}
.chip{display:inline-flex;align-items:center;font-size:11px;font-weight:800;padding:3px 7px;border-radius:6px;background:var(--navy);color:#fff;letter-spacing:.02em}
.chip.o{background:#fff;color:var(--ink);border:1px solid var(--line2)}
.chip.SK{background:var(--sk);color:#fff;border-color:var(--sk)}.chip.KT{background:var(--kt);color:#fff;border-color:var(--kt)}.chip.LG{background:var(--lg);color:#fff;border-color:var(--lg)}

/* ============ 히어로 캐러셀 ============ */
.hero{position:relative;background:var(--navy)}
.car{position:relative}
.car-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.car-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;overflow:hidden;color:#fff}
.slide.t1{background:radial-gradient(90% 120% at 90% 10%,#5B8DEF 0%,transparent 55%),radial-gradient(70% 90% at 10% 100%,#1638B8 0%,transparent 60%),linear-gradient(135deg,#2B5CFF 0%,#1E46D6 55%,#142F9A 100%)}
.slide.t2{background:radial-gradient(80% 100% at 100% 0%,#26407A 0%,transparent 55%),linear-gradient(135deg,#0F1B33 0%,#16274D 60%,#0F1B33 100%)}
.slide.t3{background:radial-gradient(70% 100% at 100% 20%,#D6E6FF 0%,transparent 60%),linear-gradient(135deg,#F3F7FF 0%,#E4EDFF 100%);color:var(--navy)}
.slide::after{content:"";position:absolute;inset:auto -10% -40% -10%;height:60%;background:radial-gradient(60% 100% at 50% 100%,rgba(255,255,255,.12),transparent 70%);pointer-events:none}
.slide-in{position:relative;z-index:1;max-width:var(--w);margin:0 auto;padding:clamp(44px,6.5vw,80px) var(--gut) clamp(68px,8.5vw,96px);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,4vw,48px);align-items:center;min-height:clamp(430px,49vw,560px)}
@media(max-width:900px){.slide-in{grid-template-columns:1fr;min-height:0;padding:28px var(--gut) 64px;gap:20px;align-content:start}.slide .btn-row .btn{flex:1 1 40%;padding:14px 12px;font-size:15px;min-height:52px}}
.slide .kicker{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);padding:6px 12px;border-radius:99px;margin-bottom:18px;backdrop-filter:blur(6px)}
.slide.t3 .kicker{background:#fff;color:var(--blue);border-color:var(--blue-md)}
.slide h1{font-size:clamp(31px,5.2vw,56px);line-height:1.12;margin-bottom:16px;letter-spacing:-.045em}
.slide .lead{margin-bottom:30px;color:rgba(255,255,255,.84);font-size:clamp(15.5px,1.9vw,18px);line-height:1.7}
/* 배경이 아주 천천히 흐릅니다 (PC·움직임 줄이기 꺼짐일 때만) */
@media(min-width:901px){.slide.t1,.slide.t2{background-size:140% 140%;animation:drift 22s ease-in-out infinite alternate}.slide.t2{animation-duration:28s}}
@keyframes drift{from{background-position:0% 0%}to{background-position:100% 100%}}
.slide .art{will-change:transform}
.slide.t3 .lead{color:var(--sub)}
.slide .art{display:flex;justify-content:center;align-items:center;position:relative;min-height:220px}
@media(max-width:900px){.slide .art{min-height:0}}
.car-dots{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:center;gap:7px;z-index:2}
.car-dots button{width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.4);transition:.3s var(--ease);position:relative;overflow:hidden}
.car-dots button.on{width:34px;background:rgba(255,255,255,.35)}
.car-dots button.on::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:#fff;border-radius:99px;animation:dot var(--ms,5500ms) linear forwards}
.car.paused .car-dots button.on::after,.car:hover .car-dots button.on::after{animation-play-state:paused}
.t3-on .car-dots button{background:rgba(15,27,51,.2)}.t3-on .car-dots button.on::after{background:var(--navy)}
@keyframes dot{to{width:100%}}
.car-arr{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:#fff;z-index:2;transition:.15s}
.car-arr:hover{background:rgba(255,255,255,.28)}
.t3-on .car-arr{color:var(--navy);border-color:rgba(15,27,51,.2);background:rgba(255,255,255,.7)}
.car-arr.l{left:max(8px,calc((100% - var(--w))/2 - 24px))}.car-arr.r{right:max(8px,calc((100% - var(--w))/2 - 24px))}
@media(max-width:1240px){.car-arr.l{left:10px}.car-arr.r{right:10px}}
@media(max-width:900px){.car-arr{display:none}}
.car-ctl{position:absolute;left:max(12px,calc((100% - var(--w))/2 + 4px));bottom:16px;display:flex;align-items:center;gap:6px;font-size:12px;color:#fff;font-weight:700;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:99px;padding:4px 10px 4px 6px;z-index:2;backdrop-filter:blur(6px)}
.car-ctl button{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#fff}
.t3-on .car-ctl{color:var(--navy);background:rgba(255,255,255,.7);border-color:rgba(15,27,51,.15)}.t3-on .car-ctl button{color:var(--navy)}
.car-ctl .ico{width:14px;height:14px}
@media(max-width:900px){.car-ctl{bottom:18px;left:var(--gut)}}
/* 슬라이드 콘텐츠 등장(비활성 슬라이드도 보이게 — 스와이프 중 빈 화면 방지) */
.slide .slide-in>*>*{opacity:1}
.slide.active .slide-in>div:first-child>*{animation:up .6s var(--ease) both}
.slide.active .slide-in>div:first-child>*:nth-child(1){animation-delay:.05s}.slide.active .slide-in>div:first-child>*:nth-child(2){animation-delay:.13s}
.slide.active .slide-in>div:first-child>*:nth-child(3){animation-delay:.21s}.slide.active .slide-in>div:first-child>*:nth-child(4){animation-delay:.3s}
.slide.active .slide-in>.art>*{animation:pop .7s var(--ease) both;animation-delay:.2s}
/* 히어로 아트 */
.h-dev{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:0;width:100%;max-width:520px;margin:0 auto;padding-bottom:64px}
.h-dev>div{animation:float 6s ease-in-out infinite}
.h-dev>div:nth-child(2){animation-delay:-2s;z-index:1}.h-dev>div:nth-child(3){animation-delay:-4s}
.h-dev svg,.h-dev img{filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.h-total{position:absolute;left:50%;transform:translateX(-50%);bottom:0;background:#fff;color:var(--ink);border-radius:18px;padding:14px 16px;box-shadow:var(--sh3);min-width:220px;z-index:2}
.h-total .l{font-size:12px;color:var(--sub);font-weight:600}
.h-total .v{font-size:26px;font-weight:900;letter-spacing:-.04em;line-height:1.1;margin:2px 0 6px;color:var(--navy)}
.h-total .v small{font-size:.55em;font-weight:800;margin-left:1px}
.h-total .row{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;padding-top:7px;border-top:1px dashed var(--line);color:var(--sub)}
.h-total .row b{color:var(--ok-dk);font-weight:800;white-space:nowrap}
.h-pill{position:absolute;right:0;top:0;white-space:nowrap;text-align:center;background:var(--kk);color:var(--kk-t);border-radius:14px;padding:10px 14px;font-weight:900;font-size:13px;box-shadow:var(--sh2);z-index:2;animation:float 5s ease-in-out infinite;animation-delay:-1s;line-height:1.3}
.h-pill small{display:block;font-weight:700;font-size:11px;opacity:.8}
.h-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:min(100%,460px)}
.h-steps div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:16px 16px 14px;backdrop-filter:blur(6px)}
.h-steps i{display:flex;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--navy);font-style:normal;font-weight:900;font-size:13px;align-items:center;justify-content:center;margin-bottom:10px}
.h-steps b{display:block;font-size:15px;margin-bottom:2px;word-break:keep-all}
.h-steps span{font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.5;display:block}
.h-net{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(100%,480px)}
.h-net div{background:#fff;border:1px solid var(--blue-md);border-radius:16px;padding:16px 14px;box-shadow:var(--sh);text-align:center;transition:.2s}
.h-net div.hot{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-6px);box-shadow:var(--sh2)}
.h-net b{display:block;font-size:26px;font-weight:900;letter-spacing:-.04em;line-height:1}
.h-net b small{font-size:12px;font-weight:800;margin-left:2px}
.h-net span{display:block;font-size:12px;color:var(--sub);margin-top:6px}
.h-net div.hot span{color:#AEB9CC}
.h-net em{display:inline-block;font-style:normal;font-size:10.5px;font-weight:800;background:var(--kk);color:var(--kk-t);padding:2px 7px;border-radius:5px;margin-bottom:8px}
@media(max-width:900px){.h-net{grid-template-columns:repeat(3,1fr);gap:8px}.h-net b{font-size:21px}.h-net div{padding:12px 8px}}
@media(max-width:900px){
  .h-dev{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:8px 12px;align-items:end;max-width:none;width:100%}
  .h-dev>div:nth-child(1),.h-dev>div:nth-child(3){display:none}
  .h-dev>div:nth-child(2){grid-column:2;grid-row:1/3;animation:none}
  .h-dev svg,.h-dev img,.h-dev .dv{height:170px!important}.h-dev svg,.h-dev img{filter:drop-shadow(0 16px 24px rgba(0,0,0,.3))}
  .h-pill{position:static;grid-column:1;grid-row:1;justify-self:start;font-size:12px;padding:8px 11px;animation:none}
  .h-total{position:static;transform:none;grid-column:1;grid-row:2;min-width:0;padding:12px 14px;border-radius:14px;box-shadow:var(--sh2)}
  .h-dev{padding-bottom:0}
  .h-total .l{font-size:11px}.h-total .v{font-size:22px}.h-total .row{font-size:11.5px;gap:2px;flex-direction:column;align-items:flex-start}
  .slide .lead br{display:none}
  .h-steps{grid-template-columns:repeat(4,1fr);gap:6px;width:100%}
  .h-steps div{padding:10px 4px 9px;border-radius:12px;text-align:center}
  .h-steps i{width:22px;height:22px;font-size:11px;margin:0 auto 6px}.h-steps b{font-size:12.5px;margin-bottom:0}.h-steps span{display:none}
}
@media(min-width:600px) and (max-width:900px){.h-dev{max-width:640px;margin:0 auto;grid-template-columns:auto 1fr;justify-content:start;gap:12px 28px}.h-dev>div:nth-child(2){justify-self:end}.h-dev svg,.h-dev img,.h-dev .dv{height:230px!important}.h-total{max-width:300px}}
/* 히어로 신뢰 띠 */
.h-trust{background:#fff;border-bottom:1px solid var(--line)}
.h-trust .wrap{display:flex;gap:6px 28px;flex-wrap:wrap;justify-content:center;padding:12px var(--gut);font-size:13.5px;font-weight:700;color:var(--sub)}
.h-trust span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.h-trust .ico{color:var(--ok);width:16px;height:16px}
@media(max-width:560px){.h-trust .wrap{gap:0 18px;font-size:12.5px;padding:10px var(--gut);flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}.h-trust .wrap::-webkit-scrollbar{display:none}}

/* ============ 아이콘 퀵메뉴 ============ */
.qm{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;padding:clamp(22px,3vw,32px) 0}
.qm a{display:flex;flex-direction:column;align-items:center;gap:11px;padding:10px 4px;border-radius:14px;font-size:13.5px;font-weight:700;color:var(--ink);transition:.2s var(--out);text-align:center;word-break:keep-all}
.qm a:hover{transform:translateY(-3px)}
.qm a:active{transform:scale(.96)}
.qm i{width:58px;height:58px;border-radius:19px;display:flex;align-items:center;justify-content:center;font-style:normal;transition:.25s var(--out);color:#fff;box-shadow:0 10px 22px -8px rgba(15,27,51,.4)}
.qm a:hover i{transform:scale(1.06) rotate(-3deg)}
.qm i .ico{width:26px;height:26px;stroke-width:1.9}
.qm .c1{background:linear-gradient(135deg,#3D6BFF,#1E46D6)}.qm .c2{background:linear-gradient(135deg,#22C1A0,#0E9F6E)}.qm .c3{background:linear-gradient(135deg,#FFB020,#F08A00)}.qm .c4{background:linear-gradient(135deg,#8B6CF6,#6B4EE6)}
.qm .c5{background:linear-gradient(135deg,#FF7A7A,#E03131)}.qm .c6{background:linear-gradient(135deg,#31B6E0,#0B7FA6)}.qm .c7{background:linear-gradient(135deg,#FF9B5E,#E8590C)}.qm .c8{background:linear-gradient(135deg,#4B5A73,#1F2A3D)}
@media(max-width:900px){.qm{grid-template-columns:repeat(4,1fr);gap:8px 4px}.qm i{width:54px;height:54px;border-radius:17px}.qm a{font-size:12.5px;gap:8px}}

/* ============ 30초 진단 위젯 ============ */
.diag{background:#fff;border:1px solid var(--line);border-radius:var(--r3);padding:clamp(24px,4vw,40px);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,4vw,44px);align-items:center;box-shadow:var(--sh)}
@media(max-width:820px){.diag{grid-template-columns:1fr}}
.diag .k{font-size:12.5px;font-weight:800;color:var(--blue);margin-bottom:8px;letter-spacing:.03em}
.diag .k span{color:var(--sub2)!important;font-weight:600!important}
.diag h2{font-size:clamp(21px,3vw,30px);margin-bottom:8px}
.diag .lead{font-size:15.5px;margin-bottom:20px}
.diag .chips{display:flex;flex-wrap:wrap;gap:8px}
.diag .chips button{padding:11px 14px;border-radius:12px;background:#fff;border:1.5px solid var(--line2);color:var(--ink);font-weight:700;font-size:15px;transition:.15s var(--ease);min-height:46px}
.diag .chips button:hover{border-color:var(--blue);color:var(--blue)}
.diag .chips button:active{transform:scale(.96)}
.diag .chips button.on{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 6px 14px rgba(43,92,255,.25);animation:chipPop .3s var(--spring)}
.diag-out{background:var(--navy);color:#fff;border-radius:18px;padding:22px 22px 20px;min-height:230px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.diag-out::before{content:"";position:absolute;right:-60px;top:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(closest-side,rgba(91,141,239,.45),transparent)}
.diag-out>*{position:relative}
.diag-out .ex{position:absolute;right:14px;top:12px;font-size:11px;font-weight:800;background:rgba(255,255,255,.14);padding:3px 8px;border-radius:6px;color:#DCE6FF}
.diag-out .l{font-size:12.5px;color:#AEB9CC}
.diag-out .v{font-size:clamp(24px,3.4vw,32px);font-weight:900;letter-spacing:-.04em;line-height:1.1;margin:4px 0 14px}
.dbar{display:grid;grid-template-columns:96px 1fr auto;gap:8px 10px;align-items:center;font-size:12.5px;margin-bottom:8px}
.dbar .n{color:#AEB9CC;font-weight:700}
.dbar .t{height:12px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.dbar .t i{display:block;height:100%;border-radius:99px;width:0;transition:width .8s var(--ease)}
.dbar .t.a i{background:linear-gradient(90deg,#5B8DEF,#8FB0FF)}.dbar .t.b i{background:linear-gradient(90deg,var(--ok),var(--mint))}
.dbar b{font-variant-numeric:tabular-nums;font-size:13px;white-space:nowrap}
.dbar b.ok{color:#6EE7B7}
.diag-out .s{font-size:12px;color:#AEB9CC;margin:6px 0 14px;line-height:1.5}
.diag-out .btn{box-shadow:none}

/* ============ 상품형 기기 카드 ============ */
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.22s var(--ease);display:flex;flex-direction:column;position:relative;box-shadow:var(--sh)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:var(--blue-md)}
.pcard .img{background:radial-gradient(120% 100% at 50% 110%,var(--t,#E9EEF8) 0%,#F7F9FD 62%);padding:24px 0 12px;display:flex;align-items:center;justify-content:center;min-height:196px;position:relative}
.pcard .img svg,.pcard .img img{transition:transform .35s var(--ease),opacity .4s ease}
/* 사진 칸: 크기를 먼저 고정하고(높이 + 가로세로 비율) 그림 위에 사진을 겹쳐 서서히 바꿉니다 → 사진이 와도 화면이 밀리지 않음 */
.dv{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;vertical-align:middle;max-width:100%}
.dv>svg{height:100%!important;width:auto;max-width:100%;transition:opacity .4s ease}
.dv>img{position:absolute;left:0;top:0;width:100%!important;height:100%!important;object-fit:contain;opacity:0;transition:opacity .4s ease,transform .35s var(--ease)}
.dv>img.on{opacity:1}.dv.on>svg,.dv.on>.ph{opacity:0}
.dv.inst>img,.dv.inst>svg,.dv.inst>.ph{transition:none}
/* 흰 배경 사진(JPG)은 카드 바탕도 흰색으로 — 사진 테두리가 안 보이게 */
.pcard .img.solid{background:#fff}
.pd-img.solid{background:#fff}
.dev-pick button.solid{background:#fff}
.pcard .img.solid img,.pd-img.solid img{mix-blend-mode:multiply}
.pcard:hover .img svg,.pcard:hover .img img{transform:translateY(-4px) scale(1.03)}
.pcard .bd{position:absolute;top:10px;left:10px;display:flex;gap:4px;z-index:1}
.pcard .body{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column}
.pcard .brand{font-size:11.5px;color:var(--sub2);font-weight:700;margin-bottom:3px}
.pcard .name{font-size:16.5px;font-weight:800;line-height:1.3;word-break:keep-all;letter-spacing:-.02em}
.pcard .cap{font-size:12.5px;color:var(--sub);margin:3px 0 9px}
.pcard .good{font-size:13px;color:var(--sub);line-height:1.55;flex:1;word-break:keep-all;margin-bottom:12px}
.pcard .pr{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.pcard .pr .l{font-size:11.5px;color:var(--sub2);font-weight:700}
.pcard .pr .v{font-size:20px;font-weight:900;letter-spacing:-.03em}
.pcard .pr .v small{font-size:12px;font-weight:700}
.pcard .mo{font-size:12.5px;color:var(--blue);font-weight:800;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .mo small{color:var(--sub2);font-weight:600}
.pcard .cs{display:flex;gap:4px;margin:12px 0 12px}
.pcard .go{display:flex;align-items:center;justify-content:center;gap:4px;height:42px;border-radius:11px;background:var(--blue-lt);color:var(--blue);font-size:13.5px;font-weight:800;transition:.2s var(--ease)}
.pcard .go .ico{transition:transform .2s var(--ease)}
.pcard:hover .go{background:var(--blue);color:#fff}
.pcard:hover .go .ico{transform:translateX(3px)}
@media(max-width:560px){.pcard .img{min-height:150px;padding:16px 0 6px}.pcard .body{padding:12px 12px 12px}.pcard .name{font-size:14.5px}.pcard .pr .v{font-size:17px}.pcard .good{display:none}}
.hscroll{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1*var(--gut));padding:4px var(--gut) 10px}
.hscroll::-webkit-scrollbar{display:none}
.hscroll>*{flex:0 0 min(72vw,250px);scroll-snap-align:start}
@media(min-width:821px){.hscroll{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;overflow:visible}.hscroll>*{flex:auto}}

/* ============ 요금제 카드 ============ */
.ptabs{display:inline-flex;gap:4px;background:#fff;border:1px solid var(--line);padding:4px;border-radius:12px;margin-bottom:18px}
.ptabs button{padding:9px 16px;border-radius:9px;font-size:14px;font-weight:800;color:var(--sub);min-height:40px;transition:.15s}
.ptabs button.on{background:var(--navy);color:#fff}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 18px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:6px;transition:.22s var(--ease);position:relative}
.plan:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--blue-md)}
.plan .top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.plan .name{font-size:17px;font-weight:800;margin-top:6px;word-break:keep-all}
.plan .data{font-size:13px;color:var(--sub);min-height:20px}
.plan .pr{margin-top:8px;padding-top:12px;border-top:1px dashed var(--line)}
.plan .pr .o{font-size:12.5px;color:var(--sub2);text-decoration:line-through}
.plan .pr .v{font-size:24px;font-weight:900;letter-spacing:-.03em;color:var(--blue)}
.plan .pr .v small{font-size:12px;font-weight:700;color:var(--sub)}
.plan .pr .why{font-size:11.5px;color:var(--sub2)}
@media(max-width:560px){
  .plan{display:grid;grid-template-columns:1fr auto;grid-template-areas:"top top" "name pr" "data pr";gap:2px 12px;padding:14px 16px;align-items:center}
  .plan .top{grid-area:top;margin-bottom:6px}.plan .name{grid-area:name;margin:0;font-size:15.5px}.plan .data{grid-area:data;min-height:0}
  .plan .pr{grid-area:pr;margin:0;padding:0;border:none;text-align:right}.plan .pr .v{font-size:20px}.plan .pr .why{display:none}
  .plan:hover{transform:none}
}
.carrier{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:900;padding:4px 9px;border-radius:7px;letter-spacing:.02em}
.carrier.SK{background:var(--sk);color:#fff}.carrier.KT{background:var(--kt);color:#fff}.carrier.LG{background:var(--lg);color:#fff}.carrier.MV{background:var(--ok-lt);color:var(--ok-dk)}

/* ============ 통신사 로고 칩 ============ */
.clogo{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:26px;padding:0 9px;background:#fff;border:1px solid var(--line);border-radius:8px;vertical-align:middle;line-height:1}
.clogo img{height:14px;width:auto;max-width:92px;display:block;object-fit:contain}
.clogo b{font-size:12px;font-weight:900;letter-spacing:.01em}
.clogo.txt{border-color:transparent}
.clogo.txt.SK{background:var(--sk);color:#fff}.clogo.txt.KT{background:var(--kt);color:#fff}.clogo.txt.MV{background:var(--ok-lt);color:var(--ok-dk)}
/* LG U+ 는 공식 워드마크처럼 흰 바탕에 마젠타 글자 (이미지 칩들과 같은 흰 타일 느낌) */
.clogo.txt.LG{background:#fff;color:var(--lg);border-color:var(--line)}.clogo.txt.LG b{letter-spacing:-.01em}
.clogo.sm{height:22px;padding:0 7px;border-radius:6px}.clogo.sm img{height:11px;max-width:70px}.clogo.sm b{font-size:11px}
.clogo.lg{height:32px;padding:0 12px;border-radius:10px}.clogo.lg img{height:18px;max-width:120px}.clogo.lg b{font-size:14px}
.opt button .clogo,.seg button .clogo{height:22px;padding:0 2px;border:none;background:transparent}
.opt button .clogo img,.seg button .clogo img{height:15px;max-width:96px}
.opt button .clogo.txt,.seg button .clogo.txt{background:transparent!important;color:inherit}
.opt button.on .clogo,.seg button.on .clogo{background:#fff;padding:0 8px;border-radius:6px}
.seg button .clogo{height:26px}
.ft-cr .clogo{height:28px}
/* ============ 약속(신뢰) 섹션 ============ */
.vow{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,4vw,56px);align-items:center}
@media(max-width:860px){.vow{grid-template-columns:1fr}}
.vow .big{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.04em;line-height:1.2;margin:14px 0 16px;text-wrap:initial}
.vow .big em{font-style:normal;color:var(--seal)}
.vow .badge.lt{background:var(--seal-lt);color:var(--seal)}
.vow .lead{margin-bottom:24px}
.trust{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
@media(max-width:480px){.trust{grid-template-columns:1fr;gap:10px}.trust div{display:grid;grid-template-columns:40px 1fr;gap:2px 12px;padding:14px 14px 14px 14px;align-items:center}.trust i{width:40px;height:40px;border-radius:12px;margin:0;grid-row:1/3}.trust i .ico{width:20px;height:20px}.trust b{font-size:15px;margin:0;align-self:end}.trust span{font-size:12.5px;align-self:start}.trust em{top:12px;right:14px}}
.trust div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 20px 20px;box-shadow:var(--sh);position:relative;transition:.22s var(--ease)}
.trust div:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.trust i{width:44px;height:44px;border-radius:13px;background:var(--blue-lt);color:var(--blue);display:flex;align-items:center;justify-content:center;margin-bottom:12px;font-style:normal}
.trust i .ico{width:22px;height:22px}
.trust em{position:absolute;right:16px;top:14px;font-style:normal;font-size:12px;font-weight:900;color:var(--seal);opacity:.4}
.trust b{display:block;font-size:16.5px;font-weight:800;margin-bottom:6px;word-break:keep-all;letter-spacing:-.02em}
.trust span{font-size:13.5px;color:var(--sub);line-height:1.65;word-break:keep-all}
/* 약속 일러스트: 영수증 */
.vow-art{background:linear-gradient(160deg,#EEF3FF,#F8FAFF);border:1px solid var(--blue-md);border-radius:var(--r3);padding:26px;display:flex;justify-content:center}
.receipt{background:#fff;border-radius:14px;width:min(100%,300px);box-shadow:var(--sh2);padding:18px 20px;font-size:13px;position:relative}
.receipt .h{font-weight:900;font-size:14px;color:var(--navy);display:flex;justify-content:space-between;padding-bottom:10px;border-bottom:1px dashed var(--line);margin-bottom:8px}
.receipt .r{display:flex;justify-content:space-between;padding:6px 0;color:var(--sub)}
.receipt .r b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.receipt .r.t{border-top:1px dashed var(--line);margin-top:6px;padding-top:12px;color:var(--ink);font-weight:800}
.receipt .r.t b{font-size:18px;color:var(--navy)}
.receipt .r .q{background:var(--gold-lt);color:#B7791F;font-size:11px;font-weight:800;padding:2px 7px;border-radius:5px}
.receipt .stamp{position:absolute;right:14px;top:10px;border:2.5px solid var(--ok);color:var(--ok);border-radius:8px;padding:3px 8px;font-weight:900;font-size:12px;transform:rotate(-8deg);opacity:.9}
.receipt .rc-ft{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);font-size:11.5px;color:var(--seal);font-weight:800;letter-spacing:.01em}
.receipt .rc-ft img{width:34px;height:34px;object-fit:contain;transform:rotate(-8deg)}

/* ============ 숫자 밴드 ============ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr);gap:22px 0}}
.stats div{padding:8px 26px;border-left:1px solid rgba(255,255,255,.14)}
.stats div:first-child{border-left:none;padding-left:0}
@media(max-width:820px){.stats div:nth-child(3){border-left:none;padding-left:0}.stats div{padding:0 16px}}
.stats b{display:block;font-size:clamp(34px,4.4vw,52px);font-weight:900;letter-spacing:-.045em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.stats b small{font-size:.45em;font-weight:800;margin-left:3px;color:#8FB0FF}
.stats div>span{display:block;font-size:13.5px;color:#AEB9CC;margin-top:12px;word-break:keep-all;line-height:1.6}

/* ============ 이용 순서 (타임라인) ============ */
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;counter-reset:st}
.steps4::before{content:"";position:absolute;left:8%;right:8%;top:22px;height:2px;background:linear-gradient(90deg,var(--blue-md),var(--blue),var(--blue-md));transform-origin:left center;transition:transform 1.1s var(--out) .15s}
@supports selector(:has(a)){.steps4::before{transform:scaleX(0)}.steps4:has(>.rv.in)::before{transform:scaleX(1)}}
.steps4 div{position:relative;padding:0 6px}
.steps4 .n{width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid var(--blue);color:var(--blue);font-weight:900;font-size:16px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 0 0 8px #fff;position:relative;transition:.2s}
.steps4 div:hover .n{background:var(--blue);color:#fff}
.steps4 b{display:block;font-size:17px;font-weight:800;margin-bottom:6px;letter-spacing:-.02em}
.steps4 span{font-size:14px;color:var(--sub);line-height:1.65;word-break:keep-all}
@media(max-width:820px){
  .steps4{grid-template-columns:1fr;gap:0}
  .steps4::before{left:22px;right:auto;top:10px;bottom:10px;width:2px;height:auto;background:linear-gradient(180deg,var(--blue-md),var(--blue),var(--blue-md));transform-origin:center top}
  @supports selector(:has(a)){.steps4::before{transform:scaleY(0)}.steps4:has(>.rv.in)::before{transform:scaleY(1)}}
  .steps4 div{display:grid;grid-template-columns:46px 1fr;gap:0 14px;padding:0 0 22px}
  .steps4 .n{margin:0;grid-row:1/3;box-shadow:none}
  .steps4 b{align-self:center}
}

/* ============ 인터넷 속도 카드 ============ */
.spd{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);transition:.2s var(--ease);position:relative}
.spd:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.spd.hot{border:2px solid var(--blue)}
.spd .hd2{padding:14px 18px;font-weight:800;font-size:14px;display:flex;justify-content:space-between;align-items:center}
.spd .hd2.a{background:#F1F4F9;color:#3D4A5C}.spd .hd2.b{background:var(--blue);color:#fff}.spd .hd2.c{background:var(--navy);color:#fff}
.spd .bd2{padding:18px 18px 16px}
.spd .big{font-size:34px;font-weight:900;letter-spacing:-.045em;margin-bottom:4px;line-height:1}
.spd .big small{font-size:14px;font-weight:700;color:var(--sub);margin-left:2px}
.meter{height:8px;border-radius:99px;background:var(--page);overflow:hidden;margin:12px 0 12px}
.meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--blue-md),var(--blue));width:0;transition:width 1s var(--ease)}
.in .meter i{width:var(--p,50%)}
.spd .who{font-size:12.5px;color:var(--sub2);margin:0}

/* ============ 필터·검색 ============ */
.tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.search{flex:1 1 240px;position:relative}
.search input[type=search],.search input{padding-left:44px!important}
.search>span{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--sub2);display:flex}
.search .ico{width:18px;height:18px}
.tools .sort{width:180px;flex:0 0 180px}
@media(max-width:560px){.tools .sort{width:100%;flex:1 1 100%}}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips button{padding:9px 15px;border:1.5px solid var(--line);border-radius:99px;background:#fff;font-size:14px;font-weight:700;color:var(--sub);transition:.15s;min-height:40px;white-space:nowrap;flex:0 0 auto}
.chips button:hover{border-color:var(--blue);color:var(--blue)}
.chips button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.chips-scroll{overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--gut));padding:2px var(--gut) 6px;-webkit-overflow-scrolling:touch}
.chips-scroll::-webkit-scrollbar{display:none}
.chips-scroll .chips{flex-wrap:nowrap}
.skel{background:linear-gradient(90deg,#F1F4F8 25%,#E7ECF3 50%,#F1F4F8 75%);background-size:400% 100%;animation:sk 1.2s infinite;border-radius:var(--r);min-height:300px}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}

/* ============ 선택 버튼(참셈·개통 공통) ============ */
.opt{display:flex;flex-wrap:wrap;gap:8px}
.opt button{padding:13px 18px;border:1.5px solid var(--line2);border-radius:12px;background:#fff;font-size:15px;font-weight:700;color:var(--ink);transition:.15s var(--ease);min-height:48px;position:relative}
.opt button:hover{border-color:var(--blue);color:var(--blue)}
.opt button:active{transform:scale(.97)}
.opt button.on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 6px 14px rgba(43,92,255,.22);animation:chipPop .3s var(--spring)}

/* ============ 표·폼·아코디언 ============ */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th,.tbl td{text-align:left;padding:12px 13px;border-bottom:1px solid var(--line)}
.tbl th{background:var(--page);font-size:13px;font-weight:700;color:var(--sub)}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:14.5px;font-weight:800;margin-bottom:7px}
.fld .why{font-size:12.5px;color:var(--sub2);font-weight:500;margin-top:-3px;margin-bottom:7px;line-height:1.5}
input[type=text],input[type=tel],input[type=number],input[type=search],select,textarea{width:100%;padding:13px 15px;font-size:16px;font-family:inherit;border:1.5px solid var(--line2);border-radius:12px;
  background:#fff;color:var(--ink);outline:none;transition:.15s;-webkit-appearance:none;appearance:none;min-height:50px}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2359657A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(43,92,255,.12)}
input[type=file]{padding:11px;font-size:14px;min-height:0}
textarea{resize:vertical;min-height:96px}
.err{font-size:13px;color:var(--warn);margin-top:6px;display:none;font-weight:700}
.err.show{display:block;animation:shake .35s}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:500;line-height:1.55;cursor:pointer}
.chk input{width:20px;height:20px;flex:0 0 auto;margin-top:1px;accent-color:var(--blue)}
.acc{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden;background:#fff;transition:border-color .2s,box-shadow .2s}
.acc.open{border-color:var(--blue-md);box-shadow:var(--sh)}
.acc>button{width:100%;text-align:left;padding:18px 20px;display:flex;justify-content:space-between;gap:14px;align-items:center;font-size:15.5px;font-weight:800;line-height:1.45;word-break:keep-all;transition:background .15s}
.acc>button:hover{background:var(--page)}
.acc>button .q{color:var(--seal);margin-right:8px;font-weight:900}
.acc>button .ico{color:var(--sub2);transition:transform .3s var(--out);width:20px;height:20px}
.acc.open>button .ico{transform:rotate(180deg)}
/* 열고 닫힘이 부드럽게: 안쪽 내용을 감싼 칸의 높이를 0→내용 크기로 */
.acc .body{display:grid;grid-template-rows:0fr;opacity:0;padding:0 20px 0 46px;font-size:14.5px;color:var(--sub);line-height:1.8;word-break:keep-all;transition:grid-template-rows .4s var(--out),opacity .3s ease,padding-bottom .4s var(--out)}
.acc .body>*{min-height:0;overflow:hidden;margin:0}
.acc.open .body{grid-template-rows:1fr;opacity:1;padding-bottom:20px}
@media(max-width:560px){.acc>button{padding:16px 16px}.acc .body{padding-left:16px;padding-right:16px}}

/* ============ 홈 상담 밴드 ============ */
.cband{background:#fff;border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--sh2);display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
/* 상담 밴드: 윗 섹션에 살짝 걸쳐 떠 있게 */
.sec.cta-band{padding-top:0;display:flow-root}.sec.cta-band .cband{margin-top:calc(-1 * clamp(28px,4vw,48px))}
.cband .l h2{text-wrap:balance}
@media(max-width:860px){.cband{grid-template-columns:1fr}}
.cband .l{padding:clamp(24px,4vw,40px);background:radial-gradient(90% 90% at 100% 0%,#26407A 0%,transparent 60%),linear-gradient(160deg,var(--navy),#16274D);color:#fff}
.cband .l h2{color:#fff}
.cband .l .sm{color:#C4CEDF}
.cband .l .tel{font-size:clamp(30px,4vw,40px);font-weight:900;letter-spacing:-.04em;color:#fff;display:flex;align-items:center;gap:10px;margin:16px 0 4px}
.cband .l .tel .ico{color:var(--kk);width:.85em;height:.85em}
.cband .r{padding:clamp(22px,4vw,36px)}
.cband .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:480px){.cband .row2{grid-template-columns:1fr}}

/* ============ 푸터 ============ */
.ft{background:#fff;border-top:1px solid var(--line);color:var(--sub);font-size:14px;line-height:1.85}
.ft-top{padding:clamp(40px,5vw,60px) 0 clamp(28px,4vw,40px);display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:28px}
@media(max-width:900px){.ft-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ft-top{grid-template-columns:1fr;gap:18px}}
.ft h4{color:var(--ink);font-size:14.5px;font-weight:800;margin:0 0 12px}
.ft-seal{width:64px;height:64px;object-fit:contain;background:#fff;border-radius:14px;padding:5px;display:block;margin-bottom:12px;box-sizing:border-box}
.ft a:hover{color:var(--blue)}
.ft .ftel{font-size:26px;font-weight:900;color:var(--navy);letter-spacing:-.03em;line-height:1.1}
.ft-lic{border-top:1px solid var(--line);padding:22px 0 28px;font-size:12.5px;color:var(--sub2);line-height:1.9;word-break:keep-all}
.ft-lic a{text-decoration:underline;text-underline-offset:3px}
.ft-links{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:10px;font-weight:700;color:var(--sub)}
.ft-pre{border:1.5px dashed var(--line2);border-radius:12px;padding:14px 16px;background:var(--page);font-size:12.5px;color:var(--sub);margin-top:14px}
.ft-pre b{color:var(--ink);display:block;margin-bottom:3px;font-size:13px}
.ft-cr{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}

/* ============ 내 폰 카드 ============ */
.mine{border:1.5px solid var(--blue-md);background:linear-gradient(135deg,#fff,var(--blue-lt));border-radius:18px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start;position:relative;overflow:hidden}
.mine .ic{width:48px;height:48px;border-radius:14px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 6px 14px rgba(43,92,255,.25)}
.mine .ic .ico{width:24px;height:24px}
.mine .k{font-size:12px;font-weight:800;color:var(--blue);margin-bottom:3px}
.mine .t{font-size:17px;font-weight:800;line-height:1.35;word-break:keep-all}
.mine .s{font-size:13px;color:var(--sub);margin-top:3px;line-height:1.5}
.mine .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.mine .acts button,.mine .acts a{padding:9px 14px;border-radius:10px;font-size:13.5px;font-weight:800;min-height:38px;display:inline-flex;align-items:center;gap:5px;transition:.15s}
.mine .yes{background:var(--blue);color:#fff;box-shadow:0 6px 14px rgba(43,92,255,.22)}.mine .no{background:#fff;color:var(--ink);border:1.5px solid var(--line2)}
.mine.done{border-color:#BFE8D4;background:linear-gradient(135deg,#fff,var(--ok-lt))}
.mine.done .ic{background:var(--ok);box-shadow:0 6px 14px rgba(16,185,129,.25)}.mine.done .k{color:var(--ok-dk)}
.mine .scan{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(43,92,255,.08),transparent);background-size:200% 100%;animation:scan 1.1s linear infinite;pointer-events:none}
@keyframes scan{from{background-position:200% 0}to{background-position:-200% 0}}
.cands{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cands button{padding:8px 12px;border-radius:99px;border:1.5px solid var(--line2);background:#fff;font-size:13px;font-weight:700;min-height:36px;transition:.15s}
.cands button:hover{border-color:var(--blue);color:var(--blue)}
.cands button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:10px}
.pick-grid button{padding:10px 8px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-size:13px;font-weight:700;min-height:44px;line-height:1.3;word-break:keep-all;transition:.15s}
.pick-grid button:hover{border-color:var(--blue);color:var(--blue)}
.pick-grid button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.pop-in{animation:chipPop .3s var(--spring) both}
@keyframes chipPop{0%{transform:scale(.92)}100%{transform:scale(1)}}

/* ============ 개통 신청 퍼널 ============ */
.ap{max-width:720px;margin:0 auto;padding:0 var(--gut)}
.prog{display:flex;gap:6px;margin:6px 0 22px}
.prog span{flex:1;height:6px;border-radius:99px;background:var(--line);overflow:hidden;position:relative}
.prog span i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--blue);border-radius:99px;transition:width .5s var(--ease)}
.prog span.done i,.prog span.on i{width:100%}
.prog span.done i{background:var(--blue-md)}
.stp{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--sub2);font-weight:700}
.stp b{color:var(--ink);font-size:14px}
.opt2{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.opt2 button{text-align:left;padding:16px 17px;border-radius:14px;border:1.5px solid var(--line);background:#fff;transition:.15s var(--ease);min-height:72px;position:relative}
.opt2 button:hover{border-color:var(--blue);transform:translateY(-1px)}
.opt2 button.on{border-color:var(--blue);background:var(--blue-lt);box-shadow:0 0 0 3px rgba(43,92,255,.12)}
.opt2 .t{font-size:16px;font-weight:800;display:block;margin-bottom:3px}
.opt2 .d{font-size:13px;color:var(--sub);line-height:1.5;display:block;word-break:keep-all}
.opt2 button.on::after{content:"✓";position:absolute;right:12px;top:12px;width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;animation:chipPop .3s var(--spring)}
.dev-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.dev-pick button{padding:12px 10px 10px;border-radius:14px;border:1.5px solid var(--line);background:#fff;text-align:center;transition:.15s var(--ease);position:relative}
.dev-pick button:hover{border-color:var(--blue);transform:translateY(-2px)}
.dev-pick button.on{border-color:var(--blue);background:var(--blue-lt);box-shadow:0 0 0 3px rgba(43,92,255,.12)}
.dev-pick svg,.dev-pick img,.dev-pick .dv{margin:0 auto}
.dev-pick .n{font-size:13px;font-weight:800;margin-top:6px;line-height:1.3;word-break:keep-all}
.dev-pick .p{font-size:12px;color:var(--sub);margin-top:2px}
.ap-nav{display:flex;gap:10px;margin-top:22px}
.ap-nav .btn{flex:1}
.ap-nav .back{flex:0 0 auto;padding:0 18px}
.sum{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.sum .row{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:14.5px}
.sum .row:last-child{border-bottom:none}
.sum .row .k{color:var(--sub);flex:0 0 96px}
.sum .row .v{font-weight:700;text-align:right;word-break:keep-all}
.sum .row .v small{display:block;font-weight:500;color:var(--sub2);font-size:12px}
.sum .row button{font-size:12.5px;color:var(--blue);font-weight:800;margin-left:8px;white-space:nowrap}
.resume{background:var(--gold-lt);border:1px solid #F5D9A0;border-radius:12px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;flex-wrap:wrap}
.next4{counter-reset:s;list-style:none;padding:0;margin:0}
.next4 li{counter-increment:s;position:relative;padding:12px 0 12px 44px;border-bottom:1px dashed var(--line);font-size:14.5px;line-height:1.55}
.next4 li:last-child{border-bottom:none}
.next4 li::before{content:counter(s);position:absolute;left:0;top:12px;width:30px;height:30px;border-radius:50%;background:var(--blue-lt);color:var(--blue);font-weight:900;font-size:13px;display:flex;align-items:center;justify-content:center}
.next4 b{display:block}

/* ============ 기기 상세 모바일 고정 CTA ============ */
.sticky-cta{display:none}
@media(max-width:960px){
  .sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:calc(var(--bbar) + var(--sab));z-index:68;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:8px 12px;gap:8px;align-items:center;transform:translateY(120%);transition:transform .3s var(--ease)}
  .sticky-cta.show{transform:none}
  .sticky-cta .pr{flex:1;min-width:0}
  .sticky-cta .pr .l{font-size:11px;color:var(--sub2)}
  .sticky-cta .pr .v{font-size:16px;font-weight:900;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sticky-cta .btn{min-height:44px;padding:0 16px;font-size:14px}
  body.has-sticky{padding-bottom:calc(var(--bbar) + var(--sab) + 70px)}
  body.has-sticky .topm{bottom:calc(var(--bbar) + var(--sab) + 82px)}
  body.has-sticky .toast{bottom:calc(var(--bbar) + var(--sab) + 84px)}
}

/* ============ 목록 상단 내 폰 배너 ============ */
.mybar{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--blue-md);border-radius:14px;padding:12px 14px;margin-bottom:16px;flex-wrap:wrap}
.mybar .ic{width:38px;height:38px;border-radius:11px;background:var(--blue-lt);color:var(--blue);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.mybar .tx{flex:1;min-width:180px;font-size:14px;line-height:1.45}
.mybar .tx b{display:block;font-size:15px}
.mybar .acts{display:flex;gap:6px;flex-wrap:wrap}

/* ============ v2 호환 클래스 ============ */
.tag{display:inline-block;font-size:12px;font-weight:800;padding:4px 9px;border-radius:7px;line-height:1.4}
.tag.b{background:var(--blue-lt);color:var(--blue)}.tag.g{background:var(--ok-lt);color:var(--ok-dk)}.tag.o{background:var(--warn-lt);color:var(--warn)}.tag.n{background:var(--page);color:var(--sub);border:1px solid var(--line)}
.eyebrow{display:inline-block;font-size:13px;font-weight:800;color:var(--blue);background:var(--blue-lt);padding:6px 12px;border-radius:8px;margin-bottom:12px}

/* ============ 애니메이션 ============ */
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.04);opacity:1}100%{transform:scale(1);opacity:1}}
.en{animation:up .5s var(--ease) both}
.d1{animation-delay:.05s}.d2{animation-delay:.12s}.d3{animation-delay:.19s}.d4{animation-delay:.26s}.d5{animation-delay:.33s}.d6{animation-delay:.4s}
.pop{animation:pop .5s var(--spring) both}
html.rv-on .rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .75s var(--out);transition-delay:var(--d,0ms)}
html.rv-on .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}html.rv-on .rv{opacity:1;transform:none}}
.toast{position:fixed;left:50%;bottom:calc(var(--bbar) + 20px + var(--sab));transform:translate(-50%,10px);background:var(--navy);color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;font-weight:700;z-index:100;opacity:0;pointer-events:none;transition:.25s;box-shadow:var(--sh2)}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:961px){.toast{bottom:32px}}
@media print{.strip,.util,.hd,.rail,.bbar,.topm,.ft,.drawer,.dbg{display:none!important}body{padding:0;background:#fff}}

/* ============ v6.1 디자인 다듬기: 화면 전환·등장 ============ */
/* 페이지 사이 전환: 브라우저가 지원하면(크롬·사파리 최신) 헤더·하단바는 그대로 두고 본문만 부드럽게 바뀝니다 */
@view-transition{navigation:auto}
.hd{view-transition-name:hg-hd}.bbar{view-transition-name:hg-bbar}.rail{view-transition-name:hg-rail}
::view-transition-old(root){animation:vt-out .16s ease both}
::view-transition-new(root){animation:vt-in .34s var(--out) both}
::view-transition-old(hg-hd),::view-transition-new(hg-hd),::view-transition-old(hg-bbar),::view-transition-new(hg-bbar),::view-transition-old(hg-rail),::view-transition-new(hg-rail){animation:none}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* 지원하지 않는 브라우저용: 나갈 때 살짝 사라지고, 들어올 때 살짝 떠오름 */
main{animation:page-in .45s var(--out) both}
@keyframes page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
html.vt-leave main{opacity:0;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease}
/* 오른쪽 빠른 메뉴: 처음 들어올 때 하나씩 */
.rail a,.rail button{animation:rail-in .55s var(--out) both}
.rail a:nth-child(1){animation-delay:.25s}.rail a:nth-child(2){animation-delay:.32s}.rail a:nth-child(3){animation-delay:.39s}.rail a:nth-child(4){animation-delay:.46s}.rail a:nth-child(5){animation-delay:.53s}
@keyframes rail-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.rail .top{animation:none}
/* 가로 스크롤 칩 줄: 오른쪽이 살짝 흐려져 "더 있다"는 걸 알려줌 */
.chips-scroll,.h-trust .wrap{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
@media(min-width:561px){.h-trust .wrap{-webkit-mask-image:none;mask-image:none}}
@media(min-width:821px){.chips-scroll{-webkit-mask-image:none;mask-image:none}}
/* 링크 밑줄은 글자에서 조금 떨어뜨려 읽기 편하게 */
a:where(:not(.btn):not(.hd-cta))[href]:hover{text-decoration-thickness:1.5px;text-underline-offset:3px}
/* 입력칸 포커스가 더 분명하게 */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(43,92,255,.14)}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}main{animation:none}}

/* 카카오톡 채널 버튼 (푸터) */
.ft-kk{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:9px 14px;border-radius:10px;background:var(--kk);color:var(--kk-t)!important;font-weight:800;font-size:13.5px;line-height:1.3}
.ft-kk:hover{filter:brightness(.96)}
.ft-kk .ico{width:17px;height:17px}
/* 캐러셀 점: 보이는 크기는 그대로, 누르는 영역은 넓게 */
.car-dots button::before{content:"";position:absolute;inset:-12px -6px}
.car-dots button{overflow:visible}.car-dots button.on{overflow:hidden}

/* v6.4 — 모바일 검수 수정 */
.clogo{white-space:nowrap;flex-shrink:0}
.pcard .cs{flex-wrap:wrap}
.btn-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media(max-width:560px){
  .pcard .mo{white-space:normal;overflow:visible;line-height:1.35}
  .pcard .mo .t{display:block;font-size:11px;color:var(--sub2);font-weight:700}
  .pcard .mo small{display:none}
  .btn-row>.btn{flex:1 1 calc(50% - 5px);min-width:0}
  .btn-row>.btn:last-child:nth-child(odd){flex-basis:100%}
  .pcard .cs{gap:3px}
  .pcard .cs .clogo.sm{height:20px;padding:0 5px;border-radius:5px}
  .pcard .cs .clogo.sm b{font-size:10px;letter-spacing:-.02em}
  .pcard .cs .clogo.sm img{height:10px;max-width:56px}
}

/* v6.5 — 미리 구운 사진(pics/)은 그림을 먼저 보여주지 않고 바로 사진으로 (그림→사진 바뀌는 깜빡임 없음) */
.dv.bk>svg,.dv.bk>.ph{opacity:0;transition:none}
.dv.bk>img{transition:opacity .25s ease}

/* v6.5 — 전체 검수 수정 */
.car-ctl button{position:relative}.car-ctl button::before{content:"";position:absolute;inset:-11px}          /* 멈춤 버튼: 손가락으로 누르기 쉽게 (보이는 크기는 그대로) */
.info dd a{display:inline-flex;align-items:center;min-height:40px;margin:-10px 0}                              /* 매장 안내 전화·카톡 링크 누르는 영역 */
@media(max-width:360px){.sticky-cta .pr .v{font-size:14.5px}.sticky-cta .btn{padding:0 12px;font-size:13.5px}.sticky-cta{gap:6px;padding:8px 10px}}

/* ===== v6.7 섹션별 디자인 개선 ===== */
/* ① 바로가기 아이콘: 무지개색 → 호갱약방 톤 하나로 (핵심인 참셈 계산기만 진하게) */
.qm i{background:var(--blue-lt)!important;color:var(--blue);box-shadow:none;border:1px solid var(--blue-md)}
.qm a:hover i{background:#fff!important;box-shadow:0 10px 22px -10px rgba(30,70,214,.45);transform:translateY(-2px)}
.qm a.key i{background:var(--blue)!important;color:#fff;border-color:var(--blue);box-shadow:0 10px 22px -8px rgba(30,70,214,.55)}
.qm a.call i{background:var(--navy)!important;color:#fff;border-color:var(--navy)}
/* ② 요금제: 모바일에선 6장을 세로로 쌓지 않고 옆으로 넘겨 보기 (스크롤 길이 절반 이하) */
@media(max-width:560px){
  .grid#plans{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1*var(--gut));padding:4px var(--gut) 12px;gap:12px}
  .grid#plans::-webkit-scrollbar{display:none}
  .grid#plans>*{flex:0 0 78%;scroll-snap-align:start}
}
/* ③ 인터넷 속도 카드: 모바일에선 숫자 왼쪽 · 설명 오른쪽으로 납작하게 */
@media(max-width:560px){
  .spd .hd2{padding:10px 14px;font-size:13px}
  .spd .bd2{display:grid;grid-template-columns:86px 1fr;gap:2px 12px;align-items:center;padding:14px}
  .spd .big{grid-row:1/span 2;font-size:30px;margin:0}
  .spd .meter{display:none}
  .spd .bd2 .sm{margin:0;font-size:13px;line-height:1.5}
  .spd .who{font-size:12px}
}
/* ④ 자주 묻는 질문: PC에선 왼쪽 제목·문의 버튼 고정 + 오른쪽 질문 (빈 공간 활용) */
.faq-ask{display:none}
@media(min-width:900px){
  .faq-wrap{display:grid;grid-template-columns:300px 1fr;gap:clamp(32px,5vw,72px);align-items:start}
  .faq-wrap>.sh{position:sticky;top:calc(var(--hd) + 32px);flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:0}
  .faq-wrap>.sh h2 small{margin-top:10px;max-width:260px}
  .faq-ask{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:8px}
  .faq-ask .btn{width:100%;justify-content:center}
}
@media(max-width:899px){.faq-sub{display:none}}
/* ⑤ 바닥글: 모바일에서 서비스·이용안내 목록을 두 칸으로 (길이 줄임) */
@media(max-width:560px){
  .ft-top{grid-template-columns:1fr 1fr;gap:20px 16px}
  .ft-top>div:first-child,.ft-top>div:last-child{grid-column:1/-1}
}
@media(min-width:900px){.faq-wrap>.sh h2{flex:none}.faq-wrap>.sh .more{margin-left:0}}

/* =====================================================================
   v7.0 — 사이트 전체 "통신비 처방전" 톤 (홈 v8 시안을 전 페이지로)
   · 색: 약봉투 파랑 #1E3F9E · 인주 #9B3F30 · 먹색 글자 · 괘선 회색
   · 제목(h1·h2)만 명조, 본문은 프리텐다드 그대로
   · 둥근 카드·그림자 → 얇은 괘선과 작은 모서리
   ===================================================================== */
:root{
  --blue:#1E3F9E; --blue-dk:#17337F; --blue-lt:#EEF2FA; --blue-md:#C9D4EE; --blue-deep:#13296B;
  --navy:#1B1F27; --ink:#1B1F27;
  --line:#DFE3EA; --line2:#CDD3DE; --page:#F4F6FA; --soft:#F7F8FB;
  --r:6px; --r2:4px; --r3:8px;
  --sh:none; --sh2:0 14px 30px -18px rgba(5,15,50,.45); --sh3:0 24px 50px -24px rgba(5,15,50,.5);
  --serif:'Noto Serif KR','Nanum Myeongjo',serif;
}
h1,h2{font-family:var(--serif);font-weight:900;letter-spacing:-.035em}
.pagehd::before{display:none}
.pagehd{background:var(--blue-lt);border-bottom:2px solid var(--ink)}
/* 모서리 정리 */
.btn,.btn.lg,.btn.sm,.hd-cta,.hd-tel,.dr-cta a,.pcard .go,.ptabs,.diag .chips button,.opt button,.opt2 button,.pick-grid button,.dev-pick button,
input[type=text],input[type=tel],input[type=number],input[type=search],select,textarea,.mine .acts button,.mine .acts a,.ft-kk{border-radius:4px}
.acc,.sum,.resume,.mine,.mybar,.ft-pre,.receipt,.diag-out,.toast,.h-total,.card,.pcard,.plan,.spd,.cband,.trust div{border-radius:6px}
.badge{border-radius:3px}
.chips button{border-radius:4px}
.pcard{box-shadow:none}
.pcard:hover{box-shadow:var(--sh2)}
.btn{box-shadow:none}
.btn:not(.gh):not(.soft):not(.kk):not(.wt):not(.ol):hover{background:var(--blue-dk)}
.acc{box-shadow:none;border:1px solid var(--line)}
.cband .l{background:var(--ink)}
/* 단계 표시·선택 버튼: 고른 것은 먹색 */
.opt2 button.on,.dev-pick button.on{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
/* 그라데이션 걷어내기: 단색 약봉투 파랑·먹색 */
.pagehd.blue,.pagehd.dark,.pagehd.navy{background:var(--blue)!important;border-bottom:0}
.res-hero{background:var(--ink)!important}
.res-hero .bar>span,.dbar .t.a i{background:#8FA6E0!important}
.cband .l{background:var(--ink)!important}
.sec.tint{background:var(--blue-lt)}
.vow-art{background:var(--blue-lt);border:0}
.mine{background:#fff;border-color:var(--blue-md)}
.mine.done{background:#fff}
.steps4::before{background:var(--ink);opacity:.18}
.meter i{background:var(--blue)}

/* v7.2 — 빠른 버튼 크기·모양 통일 (모바일 하단 4개 = 같은 너비·같은 배치, PC 오른쪽 = 같은 크기 정사각) */
.bbar{grid-template-columns:repeat(4,1fr)!important;gap:8px}
.bbar a,.bbar .pri{flex-direction:column;gap:3px;height:52px;border-radius:8px;font-size:12px;font-weight:800;box-shadow:none}
.bbar a .ico,.bbar .pri .ico{width:22px;height:22px}
.bbar .tel{border-width:1px}
.ico.kakao{fill:currentColor;stroke:none}
.bbar .kk,.rail .kk{color:#191919}
.rail{gap:8px}
.rail a,.rail button{width:64px!important;height:60px;padding:0!important;flex-direction:column;justify-content:center;gap:4px!important;border-radius:10px;font-size:11.5px;font-weight:800;line-height:1}
.rail .lb{display:block!important;white-space:nowrap}
.rail .ico{width:22px;height:22px}
.rail .top{height:60px}
html.i18n-wait body{visibility:hidden}

/* v7.3 — 언어 선택 (빠른 버튼·메뉴·선택 창) */
.bbar{grid-template-columns:repeat(5,1fr)!important;gap:6px}
.bbar .lang{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:52px;border-radius:8px;font:inherit;font-size:12px;font-weight:800;background:#fff;border:1px solid var(--line2);color:var(--ink);cursor:pointer}
.bbar .lang .ico{width:22px;height:22px}
.bbar a span,.bbar .lang span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
.rail .lang{background:#fff;border:1px solid var(--line2);color:var(--ink);cursor:pointer;font:inherit}
.dr-lang{display:flex;align-items:center;gap:10px;width:100%;padding:14px 20px;background:#fff;border:0;border-bottom:1px solid var(--line);font:inherit;font-size:15px;font-weight:800;color:var(--ink);cursor:pointer;text-align:left}
.dr-lang span{flex:1}.dr-lang .ico{width:20px;height:20px}
.langsheet{position:fixed;inset:0;z-index:120;display:none}
.langsheet.open{display:block}
.ls-bg{position:absolute;inset:0;background:rgba(20,14,12,.5);animation:lsF .2s ease}
.ls-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,380px);background:#fff;border-radius:10px;padding:18px 18px 14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);animation:lsU .25s var(--out)}
.ls-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ls-hd b{display:flex;align-items:center;gap:8px;font-size:18px}.ls-hd .ico{width:20px;height:20px}
.ls-x{width:40px;height:40px;border:0;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:6px}
.ls-x:hover{background:var(--page)}
.ls-o{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:60px;padding:10px 14px;margin-top:8px;border:1.5px solid var(--line2);border-radius:8px;background:#fff;font:inherit;text-align:left;cursor:pointer;color:var(--ink)}
.ls-o:hover{border-color:var(--blue)}
.ls-o.on{border-color:var(--blue);background:var(--blue-lt)}
.ls-o b{display:block;font-size:17px}.ls-o small{display:block;font-size:12.5px;color:var(--sub);margin-top:2px}
.ls-o .ico{width:22px;height:22px;color:var(--blue)}
.ls-o:focus-visible,.ls-x:focus-visible{outline:3px solid var(--blue-md);outline-offset:2px}
.ls-note{font-size:12.5px;color:var(--sub);margin:12px 2px 0;line-height:1.55}
.ls-note:empty{display:none}
@keyframes lsF{from{opacity:0}}@keyframes lsU{from{opacity:0;transform:translate(-50%,-46%)}}
@media(max-width:560px){.ls-box{top:auto;bottom:0;transform:translateX(-50%);width:100%;border-radius:14px 14px 0 0;padding-bottom:calc(16px + env(safe-area-inset-bottom))}@keyframes lsU{from{transform:translate(-50%,30%)}}}
/* 다른 언어: 제목 글꼴·줄바꿈 */
html[data-lang=zh]{--serif:'Noto Serif SC','Noto Serif KR',serif}
html[data-lang=en],html[data-lang=mn]{--serif:'Noto Serif','Noto Serif KR',serif}
html[data-lang=en] body,html[data-lang=mn] body{overflow-wrap:break-word}
html[data-lang=zh] *{word-break:normal!important;line-break:strict}
/* v7.3 외국어 길이 대응 */
.dt>*{min-width:0}
html:not([data-lang=ko]) .dtbl{table-layout:fixed;width:100%}
html:not([data-lang=ko]) .dtbl th,html:not([data-lang=ko]) .dtbl td{overflow-wrap:anywhere}
@media(max-width:700px){
  html:not([data-lang=ko]) .sticky-cta{flex-wrap:wrap;row-gap:6px}
  html:not([data-lang=ko]) .sticky-cta .pr{flex:1 1 100%;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
  html:not([data-lang=ko]) .sticky-cta .pr .l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html:not([data-lang=ko]) .sticky-cta .btn{flex:1 1 0;padding:0 10px;line-height:1.2;text-align:center}
  html:not([data-lang=ko]) .sticky-cta .btn.gh{flex:0 0 auto}
}
html:not([data-lang=ko]) .btn{white-space:normal;text-align:center;line-height:1.25}
html:not([data-lang=ko]) .wrap,html:not([data-lang=ko]) .card{min-width:0}
.bbar{grid-template-columns:repeat(5,minmax(0,1fr))!important}
html[data-lang=mn] .bbar a,html[data-lang=mn] .bbar .lang,html[data-lang=en] .bbar a,html[data-lang=en] .bbar .lang{font-size:11px;letter-spacing:-.02em}
html[data-lang=mn] .bbar a span,html[data-lang=mn] .bbar .lang span,html[data-lang=en] .bbar a span,html[data-lang=en] .bbar .lang span{padding:0}
@media(max-width:360px){html:not([data-lang=ko]) .bbar{gap:4px;padding-left:6px;padding-right:6px}html:not([data-lang=ko]) .bbar a,html:not([data-lang=ko]) .bbar .lang{font-size:10px;letter-spacing:-.03em}}
html:not([data-lang=ko]) .ft *{overflow-wrap:anywhere}
html:not([data-lang=ko]) .ft-lic span{white-space:normal!important;overflow-wrap:anywhere}
html:not([data-lang=ko]) main table th,html:not([data-lang=ko]) main table td{overflow-wrap:anywhere;hyphens:auto}
html[data-lang=zh] body{font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Noto Sans CJK SC','Source Han Sans SC',system-ui,sans-serif}
html:not([data-lang=ko]) .v7 .rx-hd{flex-wrap:wrap;row-gap:4px;column-gap:12px}
@media(max-width:560px){html[data-lang=mn] .v7 .rx-ch button,html[data-lang=en] .v7 .rx-ch button{font-size:13px;padding:0 4px;white-space:nowrap}}
html:not([data-lang=ko]) .nav a{white-space:nowrap;padding:0 9px;font-size:14.5px}
html:not([data-lang=ko]) .nav a.on::after{left:9px;right:9px}
html:not([data-lang=ko]) .hd-tel,html:not([data-lang=ko]) .hd-cta{white-space:nowrap}
html:not([data-lang=ko]) .hd-tel{display:none}
@media(min-width:961px) and (max-width:1359px){html:not([data-lang=ko]) .nav,html:not([data-lang=ko]) .hd-cta{display:none}html:not([data-lang=ko]) .burger,html:not([data-lang=ko]) .hd-tel-m{display:flex}html:not([data-lang=ko]) .hd-tel-m{margin-left:auto}}
.rail .lang span{font-size:11.5px;font-weight:800;line-height:1}
html:not([data-lang=ko]) .dr-cta a{white-space:nowrap;font-size:14px;letter-spacing:-.01em}
.hd-tel{white-space:nowrap}
html:not([data-lang=ko]) .nav a[href="store.html"]{display:none}
html:not([data-lang=ko]) .hd-cta{padding:11px 15px;font-size:14.5px}
.lang-hint{position:fixed;left:50%;top:calc(var(--hd) + 48px);z-index:110;display:flex;align-items:center;gap:10px;width:max-content;max-width:min(calc(100vw - 24px),520px);word-break:normal;line-height:1.35;padding:10px 10px 10px 14px;background:#241C19;color:#fff;border-radius:10px;box-shadow:0 18px 40px -12px rgba(0,0,0,.45);font-size:14.5px;font-weight:600;opacity:0;transform:translate(-50%,-8px);transition:opacity .25s,transform .25s;pointer-events:none}
.lang-hint.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.lang-hint>.ico{width:20px;height:20px;flex:0 0 auto}
.lang-hint span{flex:1;min-width:0}
.lang-hint .lh-y{flex:0 0 auto;background:#fff;color:#823123;border-radius:7px;padding:8px 12px;font-weight:800;font-size:14px;white-space:nowrap}
.lang-hint .lh-n{flex:0 0 auto;width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:#fff;opacity:.8}
.lang-hint .lh-n .ico{width:18px;height:18px}
@media(prefers-reduced-motion:reduce){.lang-hint{transition:none}}
@media(max-width:360px){.bbar .lang{font-size:10px;letter-spacing:-.03em}.bbar .lang span{padding:0}}
@media(max-width:420px){.lang-hint{font-size:13.5px;gap:8px;padding:8px 6px 8px 12px}.lang-hint .lh-y{padding:7px 10px;font-size:13px}}
/* v7.4 신뢰 띠 + 영상 */
.proof{background:var(--bg,#F6F2EC);border-bottom:1px solid rgba(36,28,25,.08);padding:18px 0 20px}
.proof-t{margin:0 0 10px;font-size:13px;font-weight:800;color:#823123;letter-spacing:-.01em}
.proof-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.proof-row a{display:flex;align-items:center;gap:11px;min-width:0;padding:12px 14px;background:#fff;border:1px solid rgba(36,28,25,.1);border-radius:6px;color:#241C19;transition:border-color .15s,box-shadow .15s}
.proof-row a:hover{border-color:#823123;box-shadow:0 6px 18px -10px rgba(130,49,35,.45)}
.proof-row a:focus-visible{outline:2px solid #823123;outline-offset:2px}
.pf-i{flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:#F5E9E5;display:flex;align-items:center;justify-content:center}
.pf-i img{width:28px;height:28px;border-radius:4px}
.pf-i svg{width:20px;height:20px;fill:none;stroke:#823123;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pf-yt{background:#fff;border:1px solid rgba(36,28,25,.1)}.pf-yt svg{width:22px;height:22px}
.pf-w{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.pf-w b{font-size:14px;font-weight:800;letter-spacing:-.02em}
.pf-w span{font-size:12.5px;color:#6b5f5a;margin-top:2px}
@media(max-width:960px){.proof-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.proof{padding:14px 0 16px}.proof-row{gap:8px}.proof-row a{padding:10px;gap:9px;flex-direction:column;align-items:flex-start}.pf-i{flex-basis:auto;width:32px;height:32px}.pf-i img{width:24px;height:24px}.pf-w b{font-size:13.5px}.pf-w span{font-size:12px}}
.vid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,48px);align-items:center}
.vid-txt h2{margin:0 0 10px}
.vid-txt p{margin:0 0 18px;color:#5a4f4a;line-height:1.7}
.vid-ch{display:inline-flex}
.vid-box{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#5E1F16;box-shadow:0 22px 50px -24px rgba(36,28,25,.55)}
.vid-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-play{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border:0;cursor:pointer;color:#fff;
  background:radial-gradient(120% 90% at 50% 0%,#9a3c2b 0%,#823123 45%,#5E1F16 100%)}
.vid-play::before{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.18);border-radius:4px;pointer-events:none}
.vid-seal{position:absolute;right:22px;bottom:20px;width:56px;height:56px;opacity:.9;border-radius:6px;transform:rotate(-6deg)}
.vid-yt svg{width:76px;height:54px;display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));transition:transform .15s}
.vid-play:hover .vid-yt svg{transform:scale(1.06)}
.vid-play:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.vid-cap{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.35}
.vid-cap b{font-size:clamp(18px,2.2vw,24px);font-weight:900;letter-spacing:-.02em}
.vid-cap span{font-size:13.5px;opacity:.82;margin-top:4px}
@media(max-width:860px){.vid{grid-template-columns:1fr}.vid-seal{width:42px;height:42px;right:14px;bottom:14px}}
.ft-yt{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:8px 13px;border-radius:4px;background:#fff;border:1px solid rgba(36,28,25,.14);color:#241C19!important;font-weight:800;font-size:13.5px;line-height:1.3}
.ft-yt .ico{width:18px;height:18px}
.vid-txt h2{font-family:var(--serif);font-weight:900;font-size:clamp(26px,3.2vw,38px);letter-spacing:-.03em;line-height:1.25;margin:0 0 12px}
/* v7.5 영상 미리보기 */
.vid-media{min-width:0}
.vp-main{position:absolute;inset:0}
.vp-main iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vp-btn{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:#241C19;display:block;color:#fff;text-align:left}
.vp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.vp-btn:hover .vp-img{transform:scale(1.03)}
.vp-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,28,25,.0) 35%,rgba(36,28,25,.55) 68%,rgba(36,28,25,.92) 100%),linear-gradient(90deg,rgba(94,31,22,.35),rgba(94,31,22,0) 45%)}
.vp-btn::after{content:"";position:absolute;inset:10px;border:1px solid rgba(246,242,236,.35);border-radius:3px;pointer-events:none}
.vp-tag{position:absolute;left:18px;top:18px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 9px;background:#F6F2EC;color:#823123;border-radius:2px;font-size:12.5px;font-weight:900;letter-spacing:-.01em;box-shadow:0 4px 12px -4px rgba(0,0,0,.4)}
.vp-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#823123}
.vp-seal{position:absolute;right:18px;top:16px;width:52px;height:52px;border-radius:6px;background:rgba(246,242,236,.92);padding:3px;transform:rotate(-8deg);box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.vp-yt{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%)}
.vp-yt svg{display:block;width:72px;height:51px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.45));transition:transform .15s}
.vp-btn:hover .vp-yt svg{transform:scale(1.08)}
.vp-btn:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.vp-cap{position:absolute;left:20px;right:20px;bottom:18px;display:flex;flex-direction:column;gap:6px}
.vp-t{font-family:var(--serif);font-weight:900;font-size:clamp(17px,2vw,23px);line-height:1.32;letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 2px 10px rgba(0,0,0,.4);word-break:keep-all}
.vp-m{font-size:12.5px;font-weight:700;opacity:.85}
.vp-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.vp-list button{display:flex;flex-direction:column;gap:7px;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:#241C19;min-width:0}
.vp-th{position:relative;display:block;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:#e9e2da;outline:2px solid transparent;outline-offset:2px;transition:outline-color .15s}
.vp-th img{width:100%;height:100%;object-fit:cover;display:block}
.vp-list button:hover .vp-th,.vp-list button:focus-visible .vp-th{outline-color:rgba(130,49,35,.45)}
.vp-list button.on .vp-th{outline-color:#823123}
.vp-list button.on .vp-th::after{content:"";position:absolute;inset:0;background:rgba(130,49,35,.28)}
.vp-lt{font-size:13px;font-weight:700;line-height:1.38;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}
@media(max-width:560px){.vp-list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:44%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;margin-right:-16px;padding-right:16px}.vp-list button{scroll-snap-align:start}
  .vp-tag{left:12px;top:12px;font-size:11.5px}.vp-seal{width:40px;height:40px;right:12px;top:10px}.vp-cap{left:14px;right:14px;bottom:12px}.vp-yt svg{width:58px;height:41px}.vp-btn::after{inset:6px}}
@media(prefers-reduced-motion:reduce){.vp-img,.vp-yt svg{transition:none}}
.vp-yt{left:auto;top:auto;right:20px;bottom:18px;transform:none}
.vp-yt svg{width:60px;height:43px}
.vp-cap{right:96px}
@media(max-width:560px){.vp-yt{right:14px;bottom:12px}.vp-yt svg{width:48px;height:34px}.vp-cap{right:72px}.vp-list{padding:3px 16px 4px 3px;margin-left:-3px}}
/* v7.6 영상 칸 위로 이동 */
.vid-sec{padding-bottom:clamp(8px,2vw,16px)!important}
.vid-sec+section.s7{padding-top:clamp(20px,3vw,36px)!important}
.vid-cta{display:flex;flex-wrap:wrap;gap:8px}
.vid-sub{display:inline-flex;align-items:center;gap:8px;background:#823123;color:#fff!important;border:1px solid #823123}
.vid-sub:hover{background:#5E1F16;border-color:#5E1F16}
.vid-sub svg{width:22px;height:22px;flex:0 0 auto}
html:not([data-lang=ko]) .chips button{white-space:normal;text-align:center;max-width:100%}
/* v7.9 공식 로고 자리 (파일이 있으면 로고, 없으면 기본 아이콘) */
.blg{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;line-height:0}
.blg>img{width:20px;height:20px;object-fit:contain;border-radius:4px}
.blg>img+svg,.blg>img+.ico{display:none}
.blg.nf>img{display:none}.blg.nf>img+svg,.blg.nf>img+.ico{display:inline-block}
.btn .blg{margin-right:7px}.btn .blg.nf{display:none}
.rail .blg>img,.bbar .blg>img{width:22px;height:22px}
.pf-i.blg>img{width:26px;height:26px;border-radius:5px}
.btn:has(>.blg){display:inline-flex;align-items:center;justify-content:center;gap:8px;padding-left:12px;padding-right:12px}
.btn>.blg{margin:0}.btn>.blg>img{width:22px;height:22px;border-radius:5px}
@media(max-width:560px){.btn-row:has(>.btn>.blg){flex-wrap:wrap}.btn-row>.btn:has(>.blg){flex:1 1 calc(50% - 6px)!important;min-width:0}.btn-row:has(>.btn>.blg)>#copy-addr{flex:1 1 100%!important}}