/* ===== 귤모바일 v4 · Apple 스타일 ===== */
:root{
  --o:#FF7A1A;--o2:#EE5F00;--os:#FFF3EA;--ink:#1d1d1f;--ink2:#424245;--sub:#6e6e73;--line:#e5e5ea;
  --bg:#fff;--soft:#f5f5f7;--card:#f5f5f7;--r:28px;
  --grad:linear-gradient(100deg,#FFB038 0%,#FF7A1A 35%,#FF4B4B 70%,#F7357E 100%);
  --ease:cubic-bezier(.2,.75,.2,1)
}
*{box-sizing:border-box}
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",sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:17px;letter-spacing:-.012em;word-break:keep-all;-webkit-font-smoothing:antialiased;padding-bottom:78px}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
b,strong{font-weight:700}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.narrow{max-width:820px}
.grad,.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone}

/* ---------- 헤더 ---------- */
header.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.06);transition:box-shadow .3s,background .3s}
header.top.scrolled{background:rgba(255,255,255,.86);box-shadow:0 6px 30px rgba(0,0,0,.05)}
.top .wrap{display:flex;align-items:center;gap:8px;height:58px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:800;font-size:18px;letter-spacing:-.04em}
.logo img{width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.logo b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
nav.gnb{margin-left:auto;display:flex;gap:2px}
.gnb .g{position:relative}
.gnb .g>button{background:none;border:0;font:inherit;font-size:14px;font-weight:550;letter-spacing:-.01em;padding:8px 12px;border-radius:999px;color:var(--ink2);cursor:pointer;transition:background .2s,color .2s}
.gnb .g:hover>button,.gnb .g:focus-within>button{color:var(--ink);background:rgba(0,0,0,.045)}
.gnb .dd{position:absolute;top:calc(100% + 8px);left:-6px;min-width:210px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid rgba(0,0,0,.06);border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.12);padding:8px}
.gnb .dd a{display:block;padding:10px 14px;border-radius:12px;text-decoration:none;font-size:14.5px;color:var(--ink2);transition:background .2s,color .2s}
.gnb .dd a:hover{background:var(--soft);color:var(--ink)}
@media(min-width:921px){.gnb .dd{opacity:0;visibility:hidden;transform:translateY(6px) scale(.98);transform-origin:top left;transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}.gnb .g:hover .dd,.gnb .g:focus-within .dd{opacity:1;visibility:visible;transform:none}}
.top .cta{white-space:nowrap}
.burger{display:none;margin-left:auto;background:none;border:0;font-size:24px;cursor:pointer;padding:6px 8px;color:var(--ink)}
@media(max-width:920px){
  .burger{display:block}.top .cta{display:none}
  nav.gnb{display:none;position:absolute;top:58px;left:0;right:0;background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);flex-direction:column;padding:8px 20px 24px;border-bottom:1px solid var(--line);max-height:calc(100vh - 58px);overflow:auto}
  nav.gnb.on{display:flex;animation:slideDown .35s var(--ease)}
  .gnb .dd{position:static;border:0;box-shadow:none;padding:0 0 10px;background:none;display:grid;grid-template-columns:1fr 1fr;gap:2px}
  .gnb .g>button{pointer-events:none;color:var(--sub);font-size:12.5px;font-weight:700;letter-spacing:.04em;padding:14px 0 4px}
  .gnb .dd a{padding:9px 10px;font-size:15px}
}

/* ---------- 버튼 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:13px 24px;border-radius:999px;font:inherit;font-weight:700;font-size:16px;letter-spacing:-.015em;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform .25s var(--ease),box-shadow .3s,background .25s,color .25s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn-o{background:var(--o);color:#fff;box-shadow:0 10px 24px -8px rgba(255,122,26,.6)}
.btn-o:hover{background:var(--o2);box-shadow:0 14px 30px -8px rgba(238,95,0,.6)}
.btn-w{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.btn-w:hover{box-shadow:inset 0 0 0 1px rgba(0,0,0,.2),0 8px 20px -10px rgba(0,0,0,.2)}
.btn-k{background:#FEE500;color:#191919}
.btn-d{background:var(--ink);color:#fff}
.btn-sm{padding:8px 16px;font-size:14px}
.btn-lg{padding:17px 30px;font-size:17.5px}

/* ---------- 공통 히어로(서브 페이지) ---------- */
.crumb{font-size:13px;color:var(--sub);padding-top:22px}.crumb a{text-decoration:none}
.hero{padding-top:52px;padding-bottom:44px}
.hero h1{font-size:clamp(34px,5.2vw,58px);line-height:1.12;letter-spacing:-.045em;font-weight:800;margin:0 0 18px}
.lead{font-size:clamp(17px,1.9vw,21px);color:var(--ink2);line-height:1.62;max-width:760px;letter-spacing:-.02em}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.chip{font-size:14px;background:var(--os);color:#C2410C;padding:7px 14px;border-radius:999px;font-weight:650}

/* ---------- 섹션 ---------- */
main>section.s{padding:96px 0;--card:var(--soft)}
main>section.s:nth-of-type(even){background:var(--soft);--card:#fff}
main>section.s.dark{background:#000;color:#f5f5f7;--card:#1c1c1e;position:relative;overflow:hidden}
main>section.s.dark::before{content:"";position:absolute;left:50%;top:-260px;width:900px;height:600px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,122,26,.35),rgba(247,53,126,.12) 60%,transparent);pointer-events:none}
main>section.s.dark .wrap{position:relative}
.dark p,.dark .note{color:#a1a1a6}
@media(max-width:700px){main>section.s{padding:68px 0}}
h2{font-size:clamp(30px,4.4vw,48px);letter-spacing:-.045em;line-height:1.16;margin:0 0 22px;font-weight:800}
h3{font-size:21px;letter-spacing:-.03em;margin:26px 0 8px;line-height:1.35}
.sec-head{text-align:center;max-width:780px;margin:0 auto 52px}
.sec-head h2{margin-bottom:16px}
.sec-head p{color:var(--sub);font-size:clamp(17px,1.8vw,20px);margin:0;letter-spacing:-.02em}
.dark .sec-head p{color:#a1a1a6}
.eyebrow{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.16em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:12px}
.center-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:36px 0 0}

/* ---------- 그리드·카드 ---------- */
.grid{display:grid;gap:18px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--card);border-radius:var(--r);padding:28px;text-decoration:none;display:block;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
a.card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -18px rgba(0,0,0,.18)}
.card .net{font-size:12px;font-weight:800;letter-spacing:.08em}
.net-kt{color:#E4002B}.net-lg{color:#E6007E}
.card .nm{font-size:20px;font-weight:800;margin:8px 0 4px;letter-spacing:-.03em}
.card .fee{font-size:30px;font-weight:800;letter-spacing:-.04em}
.card .fee small{font-size:14px;color:var(--sub);font-weight:600}
.card .spec{font-size:14.5px;color:var(--sub);margin-top:8px}
.best{display:inline-block;background:var(--grad);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;padding:3px 9px;border-radius:999px;margin-left:8px;vertical-align:3px}
.soft{background:var(--card);border-radius:var(--r);padding:28px}
.orange{background:linear-gradient(145deg,#FFF7F0,#FFE9D9);border-radius:var(--r);padding:32px;color:var(--ink)}
.note{font-size:14px;color:var(--sub)}
.todo{background:#fff8d6;border:1px dashed #e0b400;border-radius:8px;padding:1px 6px;font-size:.92em;color:#7a5c00}
.figure{border-radius:var(--r);overflow:hidden;margin:16px 0;background:var(--card)}
.warn{background:#FFF4F2;border-radius:20px;padding:18px 20px;font-size:15.5px;color:#5c1d12}
.warn b{color:#C2361A}

/* 목록 */
.steps{counter-reset:st;list-style:none;padding:0;margin:0;display:grid;gap:12px}
.steps li{counter-increment:st;position:relative;padding:18px 20px 18px 66px;background:var(--card);border-radius:20px}
.steps li::before{content:counter(st);position:absolute;left:18px;top:16px;width:32px;height:32px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;display:grid;place-items:center;font-size:15px}
.steps b{display:block;margin-bottom:2px}
.check{list-style:none;padding:0;margin:0}.check li{padding:7px 0 7px 30px;position:relative}
.check li::before{content:"";position:absolute;left:0;top:12px;width:19px;height:19px;border-radius:50%;background:var(--o) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/13px no-repeat}

/* 표 */
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:14px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-weight:700;white-space:nowrap;color:var(--sub);font-size:13.5px;letter-spacing:.02em}
.tbl{overflow-x:auto;border-radius:22px;background:var(--card);padding:6px 10px}
.tbl tr:last-child td{border-bottom:0}
.tbl table th:first-child,.tbl table td:first-child{padding-left:14px}
tr.is-best td{background:rgba(255,122,26,.06)}
.netpill{display:inline-block;font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px;margin:0 4px 4px 0;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.netpill.KT{background:#FFECEF;color:#C4001A;box-shadow:none}.netpill.LG{background:#FFE8F4;color:#B0006A;box-shadow:none}

/* FAQ */
details{background:var(--card);border-radius:20px;padding:0 22px;margin-bottom:10px;transition:background .3s}
summary{cursor:pointer;font-weight:700;padding:19px 30px 19px 0;list-style:none;position:relative;font-size:17px;letter-spacing:-.02em}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:2px;top:50%;width:10px;height:10px;border-right:2px solid var(--sub);border-bottom:2px solid var(--sub);transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details>div{padding:0 0 20px;color:var(--ink2);animation:fadeDown .35s var(--ease)}

/* CTA 박스 (서브 페이지 하단) */
.cta-box{position:relative;overflow:hidden;background:#0b0b0f;color:#fff;border-radius:34px;padding:44px 48px;display:flex;flex-wrap:wrap;align-items:center;gap:24px;justify-content:space-between}
.cta-box::before{content:"";position:absolute;right:-120px;top:-180px;width:520px;height:520px;background:radial-gradient(closest-side,rgba(255,122,26,.55),rgba(247,53,126,.2) 60%,transparent);pointer-events:none}
.cta-box>*{position:relative}
.cta-box h2{margin:0 0 6px;color:#fff;font-size:clamp(24px,3vw,32px)}
.cta-box p{margin:0;color:#a1a1a6}
.cta-box .btns{display:flex;gap:10px;flex-wrap:wrap}
.cta-box .cta-emo{width:84px;flex:none;animation:bob 4s ease-in-out infinite}
@media(max-width:600px){.cta-box{padding:32px 26px}.cta-box .cta-emo{width:60px}}

/* ===== 홈 히어로 ===== */
.home-hero{text-align:center;padding:64px 0 40px;background:radial-gradient(1200px 520px at 50% 0%,#FFF1E5 0%,rgba(255,241,229,0) 70%),#fff;overflow:hidden}
.hh-badge{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;background:#fff;border-radius:999px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 8px 24px -10px rgba(0,0,0,.15);font-size:15px}
.hh-badge img{width:32px;height:32px;border-radius:50%}
.hh-badge span{color:var(--sub);font-size:13.5px;padding-left:10px;border-left:1px solid var(--line)}
.home-hero h1{font-size:clamp(38px,6.6vw,76px);line-height:1.08;letter-spacing:-.05em;font-weight:850;margin:26px auto 22px}
.home-hero .lead{margin:0 auto;max-width:720px}
.hh-checks{list-style:none;padding:0;margin:26px 0 30px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;font-weight:700;font-size:16px}
.hh-checks li{display:flex;align-items:center;gap:7px}
.hh-checks li::before{content:"✓";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--grad);color:#fff;font-size:12px;font-weight:900}
.hh-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hh-time{margin:20px 0 0;font-size:15px;color:var(--ink2);font-weight:600}
.hh-time span{display:block;font-size:13px;color:var(--sub);font-weight:500;margin-top:2px}

/* 폰 목업 */
.stage{position:relative;height:640px;margin:46px auto 10px;max-width:760px}
.stage .glow{position:absolute;left:50%;top:50%;width:620px;height:620px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,138,40,.42),rgba(247,53,126,.14) 55%,transparent);filter:blur(6px)}
.phone{position:absolute;left:50%;top:10px;width:300px;height:612px;margin-left:-150px;border-radius:54px;background:linear-gradient(145deg,#2b2b2e,#0d0d0f);padding:11px;box-shadow:0 0 0 2px #3a3a3d inset,0 50px 90px -30px rgba(80,30,0,.55),0 30px 60px -30px rgba(0,0,0,.5)}
.phone .island{position:absolute;left:50%;top:22px;width:96px;height:28px;margin-left:-48px;background:#000;border-radius:20px;z-index:2}
.scr{height:100%;border-radius:44px;background:linear-gradient(180deg,#FFFFFF 0%,#FFF5EC 100%);padding:56px 18px 18px;text-align:left;overflow:hidden;position:relative}
.sb{position:absolute;top:18px;left:30px;right:28px;display:flex;justify-content:space-between;align-items:center;font-size:14px}
.sb .bat{width:24px;height:11px;border-radius:3px;border:1.5px solid #1d1d1f;position:relative}.sb .bat::after{content:"";position:absolute;inset:1.5px 4px 1.5px 1.5px;background:#1d1d1f;border-radius:1px}
.app-h{display:flex;align-items:center;gap:10px;margin:8px 2px 18px}
.app-h img{width:40px;height:40px;border-radius:12px;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.app-h b{display:block;font-size:17px;letter-spacing:-.03em}.app-h span{font-size:12.5px;color:var(--sub)}
.ps{list-style:none;margin:0;padding:0}
.ps li{display:flex;align-items:center;gap:12px;background:#fff;border-radius:18px;padding:13px 14px;margin-bottom:10px;box-shadow:0 6px 16px -8px rgba(0,0,0,.15);opacity:.35;transform:scale(.98)}
.ps li i{width:24px;height:24px;border-radius:50%;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat,var(--grad)}
.ps li b{display:block;font-size:14px;letter-spacing:-.02em}.ps li span{font-size:12px;color:var(--sub)}
.ps li:nth-child(1){animation:st1 9s infinite}.ps li:nth-child(2){animation:st2 9s infinite}.ps li:nth-child(3){animation:st3 9s infinite}.ps li:nth-child(4){animation:st4 9s infinite}
@keyframes st1{0%,4%{opacity:.35;transform:scale(.98)}9%,92%{opacity:1;transform:none}97%,100%{opacity:.35;transform:scale(.98)}}
@keyframes st2{0%,18%{opacity:.35;transform:scale(.98)}23%,92%{opacity:1;transform:none}97%,100%{opacity:.35;transform:scale(.98)}}
@keyframes st3{0%,32%{opacity:.35;transform:scale(.98)}37%,92%{opacity:1;transform:none}97%,100%{opacity:.35;transform:scale(.98)}}
@keyframes st4{0%,46%{opacity:.35;transform:scale(.98)}51%,92%{opacity:1;transform:none}97%,100%{opacity:.35;transform:scale(.98)}}
.done{position:absolute;left:18px;right:18px;bottom:22px;background:#1d1d1f;color:#fff;border-radius:24px;padding:18px 18px 18px 92px;min-height:96px;animation:pop 9s infinite;opacity:0}
.done img{position:absolute;left:14px;top:50%;width:66px;transform:translateY(-50%)}
.done b{display:block;font-size:19px;letter-spacing:-.03em;margin-top:6px}.done span{font-size:13px;color:#a1a1a6}
@keyframes pop{0%,58%{opacity:0;transform:translateY(24px) scale(.94)}64%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(12px)}}
.stage .fl{position:absolute;width:96px;filter:drop-shadow(0 16px 24px rgba(200,80,0,.25));animation:bob 5s ease-in-out infinite}
.stage .f1{left:4%;top:8%;animation-delay:-1s}.stage .f2{right:5%;top:16%;width:110px;animation-delay:-2.3s}.stage .f3{left:9%;bottom:12%;width:84px;animation-delay:-3.2s}.stage .f4{right:10%;bottom:6%;width:78px;animation-delay:-.6s}
.gchip{position:absolute;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.9);border-radius:999px;padding:10px 18px 10px 10px;font-weight:750;font-size:15px;box-shadow:0 16px 36px -14px rgba(0,0,0,.25);animation:bob2 6s ease-in-out infinite;white-space:nowrap}
.gchip i{font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:14px}
.gchip.c1{left:0;top:42%;animation-delay:-1.5s}.gchip.c2{right:-2%;top:46%;animation-delay:-3s}.gchip.c3{left:16%;top:2%;animation-delay:-4s}
@media(max-width:760px){.stage{height:560px;transform:scale(.88);transform-origin:top center;margin-bottom:-60px}.stage .f1,.stage .f3{display:none}.gchip.c1{left:-4%}.gchip.c2{right:-6%}.gchip.c3{left:2%}}
@media(max-width:420px){.gchip{font-size:13px;padding:8px 14px 8px 8px}.stage .f2{width:84px;right:-2%}.stage .f4{width:64px}}

/* 숫자 */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:34px auto 0;max-width:980px}
.stats div{padding:22px 10px}
.stats b{display:block;font-size:clamp(30px,4.2vw,50px);font-weight:850;letter-spacing:-.05em;line-height:1.1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{display:block;margin-top:6px;color:var(--sub);font-size:14.5px;font-weight:600}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}

/* 개통 방법 2가지 */
.way{position:relative;background:var(--card);border-radius:34px;padding:40px 36px 34px;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.way:hover{transform:translateY(-4px);box-shadow:0 30px 60px -24px rgba(0,0,0,.2)}
.way img{position:absolute;right:26px;top:26px;width:92px;animation:bob 5s ease-in-out infinite}
.way .tag{font-size:13px;font-weight:800;color:var(--o2);letter-spacing:.04em}
.way h3{font-size:clamp(26px,3vw,34px);margin:8px 0 10px;letter-spacing:-.045em}
.way p{color:var(--sub);max-width:400px}
.way .wb{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* 벤토 */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(220px,auto);gap:18px}
.bt{position:relative;background:var(--card);border-radius:30px;padding:28px;overflow:hidden;transition:transform .45s var(--ease)}
.bt:hover{transform:translateY(-4px)}
.bt .k{font-size:13px;font-weight:800;color:var(--sub);letter-spacing:.1em}
.bt h3{font-size:24px;margin:10px 0 8px;letter-spacing:-.045em}
.bt p{color:var(--sub);font-size:15px;margin:0;max-width:85%}
.bt img{position:absolute;right:18px;bottom:16px;width:72px;transition:transform .5s var(--ease)}
.bt:hover img{transform:rotate(-8deg) scale(1.08)}
.bt.big{grid-column:span 2;grid-row:span 2;background:linear-gradient(160deg,#1d1d1f,#000);color:#fff}
.bt.big h3{font-size:clamp(44px,5.6vw,72px);line-height:1.02;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:18px}
.bt.big p{color:#a1a1a6;font-size:17px;max-width:72%}
.bt.big img{width:150px;right:28px;bottom:26px;animation:bob 5s ease-in-out infinite}
@media(max-width:860px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.bt.big{grid-column:auto;grid-row:auto;min-height:320px}.bt{min-height:180px}}

/* 상황별 */
.sit{display:flex;align-items:center;gap:16px;background:var(--card);border-radius:24px;padding:18px 22px;text-decoration:none;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.sit:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(0,0,0,.2)}
.sit img{width:52px;flex:none;transition:transform .45s var(--ease)}
.sit:hover img{transform:rotate(-10deg) scale(1.1)}
.sit b{display:block;font-size:17px;letter-spacing:-.03em}.sit span{font-size:14px;color:var(--sub)}
.sit i{margin-left:auto;font-style:normal;color:var(--o);font-weight:800;transition:transform .3s var(--ease)}
.sit:hover i{transform:translateX(4px)}

/* 유심 카드 */
.usim-card{padding:0;overflow:hidden}
.usim-card .uimg{aspect-ratio:4/4.3;overflow:hidden;background:#eee}
.usim-card .uimg img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s var(--ease)}
.usim-card:hover .uimg img{transform:scale(1.05)}
.usim-card .p{padding:20px 24px 24px}
.usim-card h3{margin:10px 0 2px;font-size:20px}
.usim-card .fee{font-size:28px;font-weight:850;letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.cmp th:not(:first-child),.cmp td:not(:first-child){text-align:center}
.cmp .cp{font-size:20px;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* 요금제 탭 */
.ptabs{position:relative}
.ptabs>input{position:absolute;opacity:0;pointer-events:none}
.seg-tabs{display:flex;width:max-content;margin:0 auto 34px;background:rgba(0,0,0,.06);border-radius:999px;padding:4px}
.seg-tabs label{padding:11px 30px;border-radius:999px;font-weight:700;cursor:pointer;color:var(--sub);transition:background .3s var(--ease),color .3s,box-shadow .3s}
#pt-kt:checked~.seg-tabs label[for=pt-kt],#pt-lg:checked~.seg-tabs label[for=pt-lg]{background:#fff;color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.1)}
.pp{display:none}
#pt-kt:checked~.pp-kt,#pt-lg:checked~.pp-lg{display:block;animation:fadeUp .5s var(--ease)}
.pg{font-size:15px;color:var(--ink);margin:28px 0 14px;letter-spacing:-.02em}.pg span{color:var(--sub);font-weight:500;margin-left:8px;font-size:14px}
.pcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.pc{position:relative;display:flex;flex-direction:column;gap:4px;background:var(--card);border-radius:24px;padding:22px;text-decoration:none;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.pc:hover{transform:translateY(-4px);box-shadow:0 20px 40px -18px rgba(0,0,0,.22)}
.pc .pn{font-weight:750;font-size:16px;letter-spacing:-.02em}
.pc .pf{font-size:32px;font-weight:850;letter-spacing:-.05em;line-height:1.15}
.pc .pf small{font-size:13px;color:var(--sub);font-weight:600;margin-left:2px;letter-spacing:0}
.pc .pd{font-weight:700;font-size:15px}.pc .pd em{font-style:normal;color:var(--o2)}
.pc .pv{font-size:13px;color:var(--sub)}
.pc.best-c{background:linear-gradient(160deg,#1d1d1f,#000);color:#fff}
.pc.best-c .pf{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pc.best-c .pv{color:#a1a1a6}.pc.best-c .pd em{color:#FFB27A}
.pc .pb{position:absolute;right:16px;top:16px;font-size:11px;font-weight:800;letter-spacing:.08em;padding:4px 10px;border-radius:999px;background:var(--grad);color:#fff}

/* 9단계 */
.steps9{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.steps9 li{background:var(--card);border-radius:26px;padding:26px 24px;transition:transform .4s var(--ease)}
.steps9 li:hover{transform:translateY(-3px)}
.steps9 .n{display:block;font-size:34px;font-weight:850;letter-spacing:-.05em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.steps9 b{display:block;font-size:18px;margin:12px 0 4px;letter-spacing:-.03em}
.steps9 p{margin:0;color:var(--sub);font-size:14.5px}
.steps9 li.hl{background:linear-gradient(150deg,#FFF3E8,#FFE3CF);box-shadow:inset 0 0 0 1.5px rgba(255,122,26,.35)}
@media(max-width:860px){.steps9{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps9{grid-template-columns:1fr}}

/* 안면인증(다크) */
.tl{margin-bottom:18px}
.tl-c{background:#1c1c1e;border-radius:28px;padding:30px}
.tl-c .tag{font-size:12.5px;font-weight:800;letter-spacing:.06em;color:#a1a1a6}
.tl-c.now{background:linear-gradient(150deg,#2a1608,#1c1c1e);box-shadow:inset 0 0 0 1px rgba(255,122,26,.35)}
.tl-c.now .tag{color:#FFB27A}
.tl-c h3{font-size:24px;color:#fff;margin:10px 0 6px}
.tips{margin-top:18px}
.tip{background:#1c1c1e;border-radius:24px;padding:24px}
.tip .ic{font-size:26px}
.tip b{display:block;color:#fff;margin:10px 0 4px;font-size:17px}
.tip p{margin:0;font-size:14.5px}
.face-help{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:18px;background:#1c1c1e;border-radius:28px;padding:22px 26px}
.face-help img{width:64px}
.face-help div{flex:1;min-width:220px}
.face-help b{color:#fff;font-size:18px}
.face-help p{margin:4px 0 0;font-size:15px}

/* 충전 */
.rc{align-items:stretch}
.bank{position:relative;border-radius:34px;padding:36px;background:linear-gradient(140deg,#FFB038 0%,#FF7A1A 45%,#F7357E 100%);color:#fff;overflow:hidden;min-height:280px;box-shadow:0 30px 60px -28px rgba(238,95,0,.65)}
.bank::after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.14)}
.bk-l{font-size:14px;font-weight:700;opacity:.9;letter-spacing:.04em}
.bk-n{font-size:clamp(28px,3.4vw,40px);font-weight:850;letter-spacing:-.03em;margin:14px 0 6px;font-variant-numeric:tabular-nums}
.bk-m{font-size:16px;opacity:.95;margin-bottom:22px}
.bank .btn-w{position:relative;z-index:1;background:rgba(255,255,255,.95)}
.bk-emo{position:absolute;right:24px;bottom:22px;width:96px;animation:bob 4.6s ease-in-out infinite}
.mini{list-style:none;padding:0;margin:0 0 16px;counter-reset:m}
.mini li{counter-increment:m;position:relative;background:var(--card);border-radius:20px;padding:16px 18px 16px 62px;margin-bottom:10px}
.mini li::before{content:counter(m);position:absolute;left:18px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px}
.mini b{display:block}.mini span{color:var(--sub);font-size:14.5px}
.why{background:var(--card);border-radius:20px;padding:18px 20px}
.why p{margin:6px 0 0;color:var(--sub);font-size:14.5px}

/* 마지막 CTA */
.final{position:relative;text-align:center;background:#000;color:#fff;border-radius:40px;padding:80px 26px;overflow:hidden}
.final::before{content:"";position:absolute;left:50%;top:-200px;width:800px;height:600px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,122,26,.5),rgba(247,53,126,.18) 60%,transparent)}
.final>*{position:relative}
.final img{width:110px;margin:0 auto 18px;animation:bob 4.4s ease-in-out infinite}
.final h2{color:#fff;font-size:clamp(34px,5vw,60px)}
.final p{color:#a1a1a6;font-size:18px;margin:0 auto 30px;max-width:560px}

/* ===== 서브 페이지 요소 ===== */
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:28px;align-items:center}
.hero-grid .mascot{justify-self:center;width:min(260px,70%);border-radius:50%}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr}.hero-grid .mascot{display:none}}
.case .tag{font-size:12px;font-weight:800;color:var(--o2)}
.case .sample{font-size:11px;background:#fff8d6;color:#8a6d00;padding:2px 7px;border-radius:6px;margin-left:6px}
.case h3{font-size:16px;margin:8px 0 0;line-height:1.45}
.rel a{display:flex;justify-content:space-between;align-items:center;font-weight:650}
.rel a::after{content:"→";color:var(--o);font-weight:800;transition:transform .3s var(--ease)}
.rel a:hover::after{transform:translateX(4px)}
.calc label{display:block;font-weight:700;margin:16px 0 8px}
.calc select,.calc input{width:100%;padding:14px 16px;border:0;border-radius:14px;font:inherit;font-size:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.sum{font-size:42px;font-weight:850;letter-spacing:-.05em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.seg{display:flex;gap:4px;background:rgba(0,0,0,.06);border-radius:999px;padding:4px}
.seg button{flex:1;padding:11px;border-radius:999px;border:0;background:none;font:inherit;font-weight:700;cursor:pointer;color:var(--sub);transition:background .3s,color .3s,box-shadow .3s}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.toc{display:flex;flex-wrap:wrap;gap:8px}.toc a{font-size:14px;padding:8px 16px;border-radius:999px;text-decoration:none;background:var(--soft);font-weight:600;transition:background .2s}.toc a:hover{background:#ebebf0}
.sm-list a{display:block;padding:7px 0;text-decoration:none}.sm-list a:hover{color:var(--o2)}
.branch{background:#fff;border-radius:28px;padding:24px;box-shadow:0 20px 50px -24px rgba(0,0,0,.25)}
.branch .q{font-weight:800;font-size:18px}.branch .opts{display:flex;gap:10px;margin-top:14px}.branch .opts .btn{flex:1}
.branch .ans{display:none;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}.branch .ans.on{display:block;animation:fadeUp .4s var(--ease)}
.ans-emo{width:56px;float:right;margin:-6px 0 0 10px}
.hero-art{display:none}
.hero.has-emo{position:relative}
.hero-emo{position:absolute;right:22px;top:40px;width:120px;animation:bob 4.4s ease-in-out infinite;pointer-events:none;filter:drop-shadow(0 16px 24px rgba(200,80,0,.22))}
.has-emo>h1,.has-emo>.lead{max-width:calc(100% - 160px)}
.post-art.has-emo .hero-emo{right:0;top:24px;width:92px}
@media(max-width:700px){.hero-emo{width:64px;top:20px;right:16px}.has-emo>h1{max-width:calc(100% - 66px)}.has-emo>.lead{max-width:none}}
.h2e{display:flex;align-items:center;gap:12px}.h2e img{width:44px;height:auto;flex:none}
.sec-head .h2e{justify-content:center}

/* 블로그 */
.blog-wrap{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start}
@media(max-width:900px){.blog-wrap{grid-template-columns:1fr}}
.post{padding:0;overflow:hidden}
.post img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#eee;transition:transform .6s var(--ease)}
.post:hover img{transform:scale(1.04)}
.post .p{padding:20px 22px}
.post h3{font-size:18px;margin:4px 0 6px;line-height:1.45}
.post .tag{font-size:12px;font-weight:800;color:var(--o2)}
.post.row{display:grid;grid-template-columns:1fr 190px;align-items:center;margin-top:14px}
.post.row img{height:100%;aspect-ratio:auto;min-height:130px}
@media(max-width:560px){.post.row{grid-template-columns:1fr 110px}.post.row .note{display:none}}
.side{display:grid;gap:14px;position:sticky;top:84px}
.pop{padding-left:20px;margin:10px 0 0;font-size:14.5px}.pop li{padding:5px 0}.pop a{text-decoration:none}.pop a:hover{color:var(--o2)}
.post-art{max-width:820px}
.post-art h1{font-size:clamp(28px,4.2vw,44px)}
.post-art h2{margin-top:52px;font-size:clamp(24px,3vw,32px)}
.toc-box{margin:26px 0}.toc-box ol{margin:8px 0 0;padding-left:20px}.toc-box a{text-decoration:none}.toc-box a:hover{color:var(--o2)}
.sum3{margin:36px 0}.sum3 ol{margin:8px 0 0;padding-left:20px}
.share{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:30px 0;padding:18px;background:var(--soft);border-radius:22px}
.share b{margin-right:6px}
.md img{border-radius:18px;margin:16px 0}.md h2{margin-top:48px}
code{background:var(--soft);padding:2px 6px;border-radius:6px;font-size:.92em}

/* 푸터 */
footer.ft{background:var(--soft);padding:48px 0 28px;font-size:13.5px;color:var(--sub);position:relative;border-top:1px solid var(--line)}
.ft .wrap{position:relative}
.ft .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
@media(max-width:760px){.ft .cols{grid-template-columns:1fr}}
.ft a{text-decoration:none}.ft a:hover{color:var(--ink)}
.ft h4{margin:0 0 10px;color:var(--ink);font-size:13px;letter-spacing:.02em}
.ft .lnk a{display:block;padding:4px 0}
.ft .appr{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:10px;text-decoration:none;margin-top:12px;max-width:280px}
.ft .appr span.ph{width:54px;height:40px;border-radius:8px;background:repeating-linear-gradient(45deg,#eee,#eee 6px,#f8f8f8 6px,#f8f8f8 12px);flex:none}
.ft .legal{border-top:1px solid #d2d2d7;margin-top:26px;padding-top:18px;line-height:1.75}
.ft-peek{position:absolute;right:40px;top:-112px;width:92px;pointer-events:none}

/* 하단 바·상담 버튼 */
.bar{position:fixed;left:10px;right:10px;bottom:10px;z-index:60;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:22px;box-shadow:0 12px 40px -10px rgba(0,0,0,.25);display:flex;gap:6px;padding:8px calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) 8px}
.bar a{flex:1;padding:12px 6px;font-size:14.5px}
@media(min-width:921px){.bar{display:none}body{padding-bottom:0}}
.fw{position:fixed;right:24px;bottom:24px;z-index:70}
.fw-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:72px;height:72px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;font-size:11.5px;cursor:pointer;box-shadow:0 14px 34px -8px rgba(238,95,0,.6);transition:transform .3s var(--ease)}
.fw-btn:hover{transform:scale(1.06)}
.fw-btn img{width:32px}
.fw-panel{display:none;position:absolute;right:0;bottom:86px;width:310px;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-radius:24px;box-shadow:0 24px 60px rgba(0,0,0,.18);padding:20px;gap:8px;flex-direction:column}
#fw-t:checked~.fw-panel{display:flex;animation:fadeUp .35s var(--ease)}
.fw-plan{display:flex;justify-content:space-between;gap:8px;font-size:14px;padding:10px 12px;border-radius:12px;background:var(--soft);text-decoration:none}
.fw-plan b{color:var(--o2)}
@media(max-width:920px){.fw{display:none}}

/* ===== 움직임 ===== */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s ease both}
::view-transition-new(root){animation:vt-in .4s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}
[id]{scroll-margin-top:84px}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-6px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-3deg)}}
@keyframes bob2{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .home-hero .hh-badge,.js .home-hero h1,.js .home-hero .lead,.js .home-hero .hh-checks,.js .home-hero .hh-cta,.js .home-hero .hh-time{animation:heroIn 1s var(--ease) both}
.js .home-hero h1{animation-delay:.08s}.js .home-hero .lead{animation-delay:.16s}.js .home-hero .hh-checks{animation-delay:.24s}.js .home-hero .hh-cta{animation-delay:.32s}.js .home-hero .hh-time{animation-delay:.4s}
.js .home-hero .stage{animation:heroIn 1.2s .3s var(--ease) both}
@keyframes heroIn{from{opacity:0;transform:translateY(30px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}.done,.ps li{opacity:1!important}html{scroll-behavior:auto}}

.bt:not(.big){padding-bottom:100px}
.bt:not(.big) p{max-width:none}

/* ===== 첫 화면 셀프개통 버튼 (통통 튀는 강조) ===== */
.hh-cta{align-items:center}
.btn-xl{padding:24px 48px;font-size:21px;font-weight:800;letter-spacing:-.03em}
.cta-hero{position:relative;color:#fff;isolation:isolate;
  background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%) no-repeat,var(--grad);
  background-size:260% 100%,100% 100%;
  box-shadow:0 20px 44px -14px rgba(242,80,30,.75),inset 0 1px 0 rgba(255,255,255,.35);
  animation:ctaBounce 2.6s cubic-bezier(.28,.84,.42,1) infinite,ctaShine 2.6s ease-in-out infinite}
.cta-hero::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;animation:ctaPulse 2.6s ease-out infinite}
.cta-hero:hover{animation:ctaShine 2.6s ease-in-out infinite;transform:translateY(-3px) scale(1.06);box-shadow:0 26px 54px -14px rgba(242,80,30,.85)}
.cta-hero:active{transform:scale(.97)}
.cta-hero .arr{display:inline-block;margin-left:4px;animation:arrNudge 1.3s ease-in-out infinite}
.cta-hero .cta-tag{position:absolute;top:-14px;right:14px;background:#fff;color:var(--o2);font-size:12.5px;font-weight:800;padding:5px 11px;border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,.14);transform:rotate(4deg);animation:tagWiggle 2.6s ease-in-out infinite;white-space:nowrap}
@keyframes ctaBounce{0%,58%,100%{transform:translateY(0) scale(1)}66%{transform:translateY(-12px) scale(1.05)}74%{transform:translateY(0) scale(.97,1.03)}80%{transform:translateY(-5px) scale(1.01)}86%{transform:translateY(0) scale(1)}}
@keyframes ctaPulse{0%,55%{box-shadow:0 0 0 0 rgba(255,122,26,.6)}100%{box-shadow:0 0 0 26px rgba(255,122,26,0)}}
@keyframes ctaShine{0%,50%{background-position:130% 0,0 0}80%,100%{background-position:-40% 0,0 0}}
@keyframes arrNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@keyframes tagWiggle{0%,58%,100%{transform:rotate(4deg)}66%{transform:rotate(-6deg) scale(1.08)}74%{transform:rotate(6deg)}82%{transform:rotate(4deg)}}
@media(max-width:600px){.hh-cta{flex-direction:column}.hh-cta .btn{width:100%;max-width:380px}.btn-xl{padding:22px 24px;font-size:20px}}

/* ===== 1만 명 신뢰 표시 ===== */
.hh-badge strong{font-weight:850}
.stats div:first-child b{font-size:clamp(34px,4.8vw,58px)}
.final .proof{display:inline-block;margin:0 auto 18px;padding:9px 18px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#f5f5f7;font-size:15px;font-weight:600}
.final .proof b{color:#FFB27A}
.stats b span{display:inline;margin:0;font-size:inherit;font-weight:inherit;color:inherit;letter-spacing:inherit}


/* ===== 셀프개통 카드 넘기기 ===== */
.gcar{position:relative;margin:0 auto 34px;max-width:1120px}
.gtrack{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:10px 6px 26px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gtrack::-webkit-scrollbar{display:none}
.gslide{flex:0 0 min(340px,80vw);margin:0;scroll-snap-align:center;border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 24px 50px -26px rgba(120,50,0,.45);transition:transform .45s var(--ease)}
.gslide:hover{transform:translateY(-4px)}
.gslide img{width:100%;height:auto;display:block}
.gnav{position:absolute;top:calc(50% - 30px);width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.92);box-shadow:0 10px 24px rgba(0,0,0,.15);font-size:28px;line-height:1;cursor:pointer;color:var(--ink);z-index:2;transition:transform .2s}
.gnav:hover{transform:scale(1.08)}
.gprev{left:-8px}.gnext{right:-8px}
.gdots{display:flex;justify-content:center;gap:7px;margin-top:-6px}
.gdots i{width:7px;height:7px;border-radius:999px;background:#d2d2d7;transition:all .3s}
.gdots i.on{width:22px;background:var(--o)}
@media(max-width:700px){.gnav{display:none}}

/* ===== 셀프개통 세로 단계 (이미지 + 설명) ===== */
.gv-toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.gv-toc a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--soft);text-decoration:none;font-size:14px;font-weight:600;transition:background .2s}
.gv-toc a:hover{background:#ebebf0}
.gv-toc b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--grad);color:#fff;font-size:12px}
.gv{position:relative;display:grid;gap:22px;max-width:1000px;margin:0 auto}
.gv::before{content:"";position:absolute;left:50%;top:40px;bottom:40px;width:2px;background:linear-gradient(180deg,rgba(255,122,26,.0),rgba(255,122,26,.35) 10%,rgba(247,53,126,.35) 90%,rgba(247,53,126,0));transform:translateX(-50%)}
.gv-row{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:18px 0}
.gv-row::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;border:4px solid var(--o);transform:translate(-50%,-50%);box-shadow:0 0 0 6px rgba(255,122,26,.15)}
.gv-img{margin:0;justify-self:end;width:min(380px,100%);border-radius:30px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -30px rgba(120,50,0,.5)}
.gv-img img{width:100%;height:auto;display:block}
.gv-row:nth-child(even) .gv-img{order:2;justify-self:start}
.gv-row:nth-child(even) .gv-txt{order:1;text-align:right}
.gv-row:nth-child(even) .check li{padding:7px 30px 7px 0}
.gv-row:nth-child(even) .check li::before{left:auto;right:0}
.gv-txt{max-width:430px}
.gv-row:nth-child(even) .gv-txt{justify-self:end}
.gv-n{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.14em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gv-txt h3{font-size:clamp(24px,2.8vw,32px);letter-spacing:-.045em;margin:6px 0 6px}
.gv-d{color:var(--sub);margin:0 0 14px;font-size:16px}
.gv-txt .check{font-size:15.5px;color:var(--ink2)}
.gv-cta{margin:16px 0 0}
@media(max-width:820px){
  .gv::before,.gv-row::after{display:none}
  .gv{gap:8px}
  .gv-row{grid-template-columns:1fr;gap:20px;padding:26px 0;border-bottom:1px solid var(--line)}
  .gv-row:last-child{border-bottom:0}
  .gv-img,.gv-row:nth-child(even) .gv-img{order:0;justify-self:center;width:min(420px,100%)}
  .gv-row:nth-child(even) .gv-txt{order:1;text-align:left;justify-self:stretch}
  .gv-row:nth-child(even) .check li{padding:7px 0 7px 30px}
  .gv-row:nth-child(even) .check li::before{left:0;right:auto}
  .gv-txt{max-width:none}
}
.gv-row:nth-child(even) .gv-txt{text-align:left;justify-self:end;width:min(430px,100%)}
.gv-row:nth-child(even) .check li{padding:7px 0 7px 30px}
.gv-row:nth-child(even) .check li::before{left:0;right:auto}
.steps li b{display:inline;margin:0}
.steps li>b:first-child{display:block;margin-bottom:2px}


/* ===== 센터 찾기 ===== */
.cf-search{position:relative;max-width:640px;margin:0 auto 18px}
.cf-search input{width:100%;padding:18px 110px 18px 22px;border:0;border-radius:999px;font:inherit;font-size:17px;background:#fff;box-shadow:0 10px 30px -12px rgba(0,0,0,.18),inset 0 0 0 1px var(--line)}
.cf-search input:focus{outline:none;box-shadow:0 10px 30px -12px rgba(255,122,26,.4),inset 0 0 0 2px var(--o)}
.cf-n{position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:14px;font-weight:700;color:var(--o2)}
.cf-regs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 26px;max-width:880px}
.cf-regs button{border:0;background:#fff;box-shadow:inset 0 0 0 1px var(--line);padding:9px 16px;border-radius:999px;font:inherit;font-size:14.5px;font-weight:650;cursor:pointer;transition:all .2s}
.cf-regs button small{color:var(--sub);font-weight:600;margin-left:2px}
.cf-regs button.on{background:var(--ink);color:#fff;box-shadow:none}.cf-regs button.on small{color:#c7c7cc}
.cf-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.cf-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cf-list{grid-template-columns:1fr}}
.cf-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border-radius:22px;padding:18px 20px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.cf-card:hover{transform:translateY(-3px);box-shadow:0 18px 36px -18px rgba(0,0,0,.2)}
.cf-top b{display:block;font-size:17px;letter-spacing:-.03em;margin:4px 0 2px}
.cf-area{font-size:13.5px;color:var(--sub)}
.cf-tag{font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--o2);background:var(--os);padding:3px 8px;border-radius:999px}
.cf-tag.p{color:#5856d6;background:#efeefe}
.cf-go{flex:none;text-decoration:none;font-weight:800;font-size:14px;color:#191919;background:#FEE500;padding:9px 14px;border-radius:999px;transition:transform .2s}
.cf-go:hover{transform:scale(1.05)}
.cf-card.hide{display:none}
.cf-toast{position:fixed;left:50%;bottom:100px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:13px 20px;border-radius:999px;font-weight:650;font-size:14.5px;opacity:0;pointer-events:none;transition:all .35s var(--ease);z-index:90}
.cf-toast.on{opacity:1;transform:translate(-50%,0)}
.cf-emo{width:56px}
.cf-steps{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.cf-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cf-steps{grid-template-columns:1fr}}
.cf-msg{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-top:22px;background:var(--card);border-radius:24px;padding:22px 26px}
.cf-msg pre{margin:8px 0 0;font:inherit;font-size:15px;line-height:1.7;color:var(--ink2);white-space:pre-wrap}
.cf-msg .btns{display:flex;gap:10px;flex-wrap:wrap}
.hero .eyebrow{letter-spacing:.02em;font-size:15px}


/* ===== 상황별 예시 이미지 ===== */
.sit-who{display:grid;grid-template-columns:minmax(0,400px) 1fr;gap:36px;align-items:center}
.sit-img{margin:0;border-radius:30px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(120,50,0,.5);background:#fff}
.sit-img img{width:100%;height:auto;display:block}
@media(max-width:820px){.sit-who{grid-template-columns:1fr}.sit-img{max-width:420px;margin:0 auto}}
.tl-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0 14px}
.tl-flow div{position:relative;background:var(--card);border-radius:20px;padding:18px 16px}
.tl-flow div:last-child{background:#FFF1EF}
.tl-flow b{display:block;font-size:16px;margin-bottom:4px}
.tl-flow span{font-size:14px;color:var(--sub);line-height:1.5}
@media(max-width:760px){.tl-flow{grid-template-columns:1fr 1fr}}
.src-note{margin-top:22px;padding-top:14px;border-top:1px dashed var(--line)}
