/* 우아패밀리 — 깨끗한 화이트 포털 톤. 포인트 컬러는 에메랄드 하나만 절제해서 사용 */
:root{--bg:#fff;--fg:#111827;--sub:#4b5563;--mute:#6b7280;--line:#e9ecef;--soft:#f6f8fa;--brand:#10b981;--brand-d:#059669;--brand-bg:#ecfdf5;--warn:#b45309;--warn-bg:#fffbeb;--r:14px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.65 Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Malgun Gothic",sans-serif;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}.narrow{max-width:760px}
main{padding-top:8px;padding-bottom:56px}
h1{font-size:1.7rem;line-height:1.35;margin:.2em 0 .5em;letter-spacing:-.03em}h2{font-size:1.15rem;margin:0 0 .6em;letter-spacing:-.02em}
.muted{color:var(--mute)}.sm{font-size:.82rem;color:var(--mute)}.fine{font-size:.76rem;color:var(--mute);margin:.7em 0 0}

/* 헤더 */
.gh{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.gh-in{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.12rem;letter-spacing:-.03em}
.logo i{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--brand);color:#fff;font-style:normal;font-size:.95rem}
.logo.sm{font-size:1rem}.logo.sm i{width:26px;height:26px;font-size:.82rem}
.gnav{display:flex;align-items:center;gap:6px}.gnav>a,.dd-b{padding:8px 12px;border-radius:9px;font-size:.94rem;font-weight:600;color:var(--sub);background:none;border:0;cursor:pointer;font-family:inherit}
.gnav>a:hover,.dd-b:hover,.gnav>a.on{background:var(--soft);color:var(--fg)}
.dd{position:relative}.dd-b span{font-size:.7rem;margin-left:2px}
.dd-m{display:none;position:absolute;right:0;top:100%;width:300px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px;box-shadow:0 12px 32px rgba(17,24,39,.1)}
.dd:hover .dd-m,.dd:focus-within .dd-m{display:block}
.mi{display:flex;gap:12px;align-items:center;padding:10px;border-radius:10px}.mi:hover{background:var(--soft)}
.mi b{display:block;font-size:.92rem}.mi em{display:block;font-style:normal;font-size:.8rem;color:var(--mute)}
.mi-ic{font-size:1.3rem;width:34px;text-align:center}.mi.off{opacity:.5;cursor:default}.mi.off:hover{background:none}

/* 섹션 탭 */
.sub{border-bottom:1px solid var(--line);background:#fff}
.sub-in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}.sub-in::-webkit-scrollbar{display:none}
.sub a{padding:13px 14px;font-size:.92rem;font-weight:600;color:var(--mute);white-space:nowrap;border-bottom:2px solid transparent}
.sub a:hover{color:var(--fg)}.sub a.on{color:var(--brand-d);border-bottom-color:var(--brand)}

.crumbs{font-size:.82rem;color:var(--mute);padding:18px 0 4px}.crumbs a:hover{color:var(--fg)}.sep{margin:0 7px;opacity:.5}
.ph{margin-top:.5em}

/* 홈 히어로 */
.hero{text-align:center;padding:64px 0 48px}
.hero h1{font-size:2.4rem;margin:.3em 0 .35em}.hero p{color:var(--sub);font-size:1.08rem;max-width:560px;margin:0 auto}
.eyebrow{display:inline-block;padding:5px 14px;border-radius:999px;background:var(--brand-bg);color:var(--brand-d);font-size:.84rem;font-weight:700}
.hero-cta{margin-top:26px}
.hero.sec{text-align:left;padding:36px 0 20px}.hero.sec h1{font-size:1.9rem;margin-top:0}.hero.sec p{margin:0}
.btn{display:inline-block;padding:13px 24px;border-radius:12px;background:var(--brand);color:#fff!important;font-weight:700;font-size:.98rem}
.btn:hover{background:var(--brand-d)}
.sh{font-size:1.3rem;margin:40px 0 14px}.more{margin:12px 0 0;text-align:right;font-size:.92rem;font-weight:600;color:var(--brand-d)}

/* 서비스 카드 */
.svcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.svc{display:flex;flex-direction:column;gap:3px;padding:22px;border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:.15s}
a.svc:hover{border-color:var(--brand);box-shadow:0 8px 24px rgba(16,185,129,.12);transform:translateY(-2px)}
.svc-ic{font-size:1.7rem}.svc b{font-size:.84rem;color:var(--brand-d);margin-top:6px}.svc-t{font-size:1.08rem;font-weight:800;letter-spacing:-.02em}
.svc .muted{font-size:.88rem;margin-top:2px}.svc-go{margin-top:12px;font-weight:700;font-size:.9rem;color:var(--brand-d)}
.svc.off{background:var(--soft);border-style:dashed}.svc.off .svc-t,.svc.off .svc-ic{opacity:.55}.soon{margin-top:12px;font-size:.8rem;font-weight:700;color:var(--mute)}
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:44px}
.trust div{padding:20px 22px;background:var(--soft);border-radius:var(--r)}.trust b{font-size:1rem}.trust p{margin:.4em 0 0;color:var(--sub);font-size:.9rem}

/* 요금제 카드 */
.pcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.pc{display:flex;flex-direction:column;gap:5px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:.15s}
.pc:hover{border-color:var(--brand);box-shadow:0 8px 24px rgba(16,185,129,.12)}.pc .tag{align-self:flex-start}
.pc-n{font-size:1.02rem;letter-spacing:-.02em;margin-top:4px}.pc-p{margin-top:6px;font-size:.92rem;color:var(--sub)}.pc-p strong{font-size:1.5rem;color:var(--fg);letter-spacing:-.03em}

/* 카드/통계/그리드 */
.card{border:1px solid var(--line);border-radius:var(--r);padding:24px;margin:16px 0;background:#fff}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}
.stats div{padding:16px 18px;border-radius:var(--r);background:var(--soft)}.stats span{display:block;font-size:.8rem;color:var(--mute)}.stats b{font-size:1.35rem;letter-spacing:-.03em}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.grid div{padding:14px 16px;border-radius:12px;background:var(--soft)}.grid span{display:block;font-size:.78rem;color:var(--mute)}.grid b{font-size:.98rem}
.note{margin:16px 0 0;padding:12px 16px;border-radius:12px;background:var(--brand-bg);color:var(--brand-d);font-size:.92rem}
.hero-card h1{margin:.4em 0 .6em;font-size:1.65rem}.hc-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.flow{display:flex;align-items:stretch;gap:12px;margin:6px 0 16px;flex-wrap:wrap}.flow>div{flex:1;min-width:180px;padding:16px 20px;border-radius:12px;background:var(--soft)}
.flow span{display:block;font-size:.8rem;color:var(--mute)}.flow b{font-size:1.7rem;letter-spacing:-.04em}.flow i{align-self:center;font-style:normal;color:var(--mute);font-size:1.3rem}
.flow .after{background:var(--brand-bg)}.flow .after b{color:var(--brand-d)}

/* 칩/태그 */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px}
.chip{display:inline-block;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:.88rem;font-weight:500}
.chip i{font-style:normal;color:var(--mute);margin-left:4px;font-size:.8rem}.chip:hover{border-color:var(--brand);color:var(--brand-d)}
.rf{display:flex;gap:14px;align-items:flex-start;padding:6px 0}.rf>b{flex:0 0 78px;padding-top:8px;font-size:.88rem;color:var(--sub)}.rf .chips{margin:0}
.tag{display:inline-block;padding:3px 10px;border-radius:7px;font-size:.76rem;font-weight:700;background:var(--soft);color:var(--sub);white-space:nowrap}
.tag.lifetime{background:var(--brand-bg);color:var(--brand-d)}.tag.period{background:var(--warn-bg);color:var(--warn)}

/* 인덱스 카드 */
.idxs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:14px}
.idx{display:flex;flex-direction:column;gap:2px;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.idx:hover{border-color:var(--brand);box-shadow:0 8px 24px rgba(16,185,129,.1)}.idx b{font-size:1.02rem}

/* 표 */
.tw{overflow-x:auto;margin:12px -4px 0}
.tbl{width:100%;border-collapse:collapse;font-size:.92rem;min-width:680px}
.tbl th,.tbl td{padding:12px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{font-size:.78rem;color:var(--mute);font-weight:600;white-space:nowrap;background:#fff;border-bottom:1px solid var(--line)}
.sortable th[data-s]{cursor:pointer}.sortable th[data-s]:after{content:" ↕";opacity:.45}
.tbl tbody tr:hover{background:var(--soft)}.tbl td.nm a{font-weight:700}.tbl td.nm a:hover{color:var(--brand-d)}
details{border:1px solid var(--line);border-radius:12px;padding:4px 16px;margin:8px 0}summary{cursor:pointer;font-weight:600;padding:10px 0}details p{margin:0 0 12px;color:var(--sub)}
.prose h2{margin-top:1.6em}.prose p,.prose li{color:var(--sub)}

.coupang{text-align:center;overflow-x:auto;background:var(--soft);border:0}.coupang h2{margin-bottom:2px}.coupang .muted{margin:0 0 10px;font-size:.9rem}

/* 푸터 */
.gf{background:var(--soft);border-top:1px solid var(--line);padding:40px 0 28px;margin-top:20px;color:var(--sub)}
.gf-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}.gf h4{margin:0 0 10px;font-size:.88rem;color:var(--fg)}
.gf-grid a,.gf-grid span{display:block;font-size:.88rem;padding:3px 0;color:var(--sub)}.gf-grid a:hover{color:var(--brand-d)}.gf-grid em{font-style:normal;font-size:.72rem;color:var(--mute);margin-left:4px}
.gf .muted{font-size:.88rem;margin:.6em 0 0}.gf-note{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);font-size:.78rem;color:var(--mute)}.gf-note p{margin:.4em 0}

/* 모바일 */
@media(max-width:760px){
 .hero{padding:40px 0 30px}.hero h1{font-size:1.8rem}h1{font-size:1.4rem}.stats{grid-template-columns:repeat(2,1fr)}
 .gnav>a:not(.on){display:none}.dd-m{right:-8px;width:min(300px,92vw)}.gf-grid{grid-template-columns:1fr}
 .card{padding:18px}.rf{flex-direction:column;gap:2px}.rf>b{padding-top:0}
 /* 표 -> 카드형 */
 .tbl{min-width:0}.tbl thead{display:none}.tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
 .tbl tr{padding:14px 4px;border-bottom:1px solid var(--line)}.tbl td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:12px}
 .tbl td:before{content:attr(data-l);color:var(--mute);font-size:.8rem;flex:0 0 84px}.tbl td.nm{display:block}.tbl td.nm:before{content:none}.tw{margin:8px 0 0}
}

/* ===== 요금제 찾기 (리스트 + 필터) ===== */
[hidden]{display:none!important}
.ph-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:6px 0 4px}.ph-row .ph{margin:.3em 0}.ph-row .muted{margin:0;font-size:.92rem}
.finder{display:grid;grid-template-columns:292px minmax(0,1fr);gap:32px;align-items:start;margin:16px 0 8px}
.filters{position:sticky;top:76px;max-height:calc(100vh - 92px);overflow:auto;border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 8px;background:#fff}
.f-head{display:flex;align-items:center;gap:10px}.f-head b{font-size:1.02rem;flex:1}
.lnk{background:none;border:0;color:var(--mute);cursor:pointer;font:inherit;font-size:.84rem;padding:4px}.lnk:hover{color:var(--fg)}
.x{display:none;background:none;border:0;font-size:1.1rem;cursor:pointer;color:var(--mute)}
.f-g{margin:16px 0}.f-g h4{margin:0 0 8px;font-size:.8rem;color:var(--mute);font-weight:600}
.seg{display:flex;flex-wrap:wrap;gap:3px;background:var(--soft);padding:4px;border-radius:12px}
.seg button{flex:1 1 auto;border:0;background:transparent;padding:8px 10px;border-radius:9px;font:inherit;font-size:.85rem;font-weight:600;color:var(--sub);cursor:pointer;white-space:nowrap}
.seg button.on{background:#fff;color:var(--fg);box-shadow:0 1px 3px rgba(17,24,39,.14)}
.tgls{display:flex;flex-wrap:wrap;gap:6px}
.tgl{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font:inherit;font-size:.85rem;font-weight:600;color:var(--sub);cursor:pointer}
.tgl.on{background:var(--brand-bg);border-color:var(--brand);color:var(--brand-d)}
.cars{display:flex;flex-direction:column}.carchk{display:flex;align-items:center;gap:9px;font-size:.9rem;cursor:pointer;padding:5px 0}
.carchk input{accent-color:var(--brand);width:16px;height:16px;margin:0}
.apply{display:none}.backdrop{display:none}
.results{min-width:0}.mbar{display:none}
.res-head{display:flex;justify-content:space-between;align-items:center;padding:2px 2px 12px;border-bottom:1px solid var(--line);gap:10px;flex-wrap:wrap}
.rh-l{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.rh-l>span{font-size:.95rem;margin-right:8px}.rh-l b{font-size:1.15rem}
.sortb{border:0;background:var(--soft);border-radius:999px;padding:7px 14px;font:inherit;font-size:.84rem;font-weight:600;color:var(--sub);cursor:pointer}
.sortb.on{background:var(--brand-bg);color:var(--brand-d)}.asof{font-size:.8rem;color:var(--mute)}
.list{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:18px;padding:20px 8px;border-bottom:1px solid var(--line);transition:background .12s}
.row:hover{background:var(--soft)}
.r-main{flex:1;min-width:0}.r-top{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.net{display:inline-block;padding:2px 8px;border-radius:6px;font-size:.72rem;font-weight:800;color:#fff;letter-spacing:0;line-height:1.5}
.net.skt{background:#2563eb}.net.kt{background:#0f8a5f}.net.lgu{background:#be185d}
.car{font-size:.86rem;font-weight:600;color:var(--sub)}
.r-name{display:block;font-size:1.06rem;letter-spacing:-.02em;line-height:1.4}
.r-spec{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:6px}
.r-data{font-size:1.55rem;font-weight:800;color:#dc2626;letter-spacing:-.03em;line-height:1.2}
.r-sub{font-size:.88rem;color:var(--sub)}
.r-tags{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}.tg{padding:3px 9px;border-radius:7px;font-size:.74rem;font-weight:700;background:#eef2ff;color:#4338ca}
.r-price{text-align:right;flex:0 0 auto;display:flex;flex-direction:column;gap:3px;min-width:132px}.r-price b{font-size:1.5rem;letter-spacing:-.03em}
.af{font-size:.82rem;color:var(--mute)}.af.warn{color:#dc2626;font-weight:600}.af.good{color:var(--brand-d);font-weight:700}
.chev{color:#cbd5e1;font-size:1.7rem;line-height:1}
.morebtn{display:block;width:100%;margin:18px 0;padding:14px;border:1px solid var(--line);background:#fff;border-radius:12px;font:inherit;font-weight:700;color:var(--sub);cursor:pointer}
.morebtn:hover{border-color:var(--brand);color:var(--brand-d)}.empty{text-align:center;padding:56px 0;color:var(--mute)}
.list.static .row{padding:16px 8px}.hl .list.static{display:grid;grid-template-columns:1fr 1fr;column-gap:36px}
.prose-p{color:var(--sub);margin:0}

/* 요금제 상세: PC 2단 */
.pp{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}.pp-side{position:sticky;top:76px}
.pp-side .card:first-child{margin-top:16px}.side-sum h3{margin:0 0 10px;font-size:.98rem}.lnk-b{display:block;margin-top:6px;font-weight:700;font-size:.92rem;color:var(--brand-d)}

/* ===== 태블릿/모바일: 레이아웃이 달라짐 (필터는 하단 시트) ===== */
@media(max-width:900px){
 .finder{display:block}.pp{display:block}.pp-side{position:static}.hl .list.static{display:flex}
 .filters{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:60;max-height:88vh;border-radius:20px 20px 0 0;border:0;padding:20px 20px 0;
  transform:translateY(105%);transition:transform .25s ease;box-shadow:0 -12px 40px rgba(17,24,39,.2)}
 .filters.open{transform:translateY(0)}.filters.open+.backdrop{display:block;position:fixed;inset:0;background:rgba(17,24,39,.45);z-index:55}
 .x{display:block}.apply{display:block;position:sticky;bottom:0;width:calc(100% + 40px);margin:12px -20px 0;padding:16px;border:0;background:var(--brand);color:#fff;font:inherit;font-weight:800;font-size:1rem}
 body.lock{overflow:hidden}
 .mbar{display:flex;gap:8px;align-items:center;margin:0 0 6px}.mbar .seg{flex:1}.mbar .seg button{padding:9px 6px;font-size:.84rem}
 .fbtn{flex:0 0 auto;padding:11px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-weight:700;font-size:.88rem;cursor:pointer}
 .res-head{padding-top:10px}.row{gap:10px;padding:18px 2px;align-items:flex-start}.chev{display:none}
 .r-data{font-size:1.35rem}.r-price{min-width:96px}.r-price b{font-size:1.25rem}.r-name{font-size:1rem}
 .asof{width:100%;order:-1}
}
@media(max-width:520px){.row{flex-wrap:wrap}.r-price{flex-direction:row;align-items:baseline;gap:10px;width:100%;text-align:left;margin-top:2px;padding-left:0}.r-price b{font-size:1.3rem}}
.tg.unl{background:#fef3c7;color:#92400e}