@font-face{font-family:"A2Z";src:url("/fonts/A2Z-400.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"A2Z";src:url("/fonts/A2Z-500.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"A2Z";src:url("/fonts/A2Z-600.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"A2Z";src:url("/fonts/A2Z-700.ttf") format("truetype");font-weight:700;font-display:swap}
/* 스토어 스타일: 밝은 회색 바탕, 흰 카드, 큰 굵은 제목, 파란 알약 버튼, 반투명 상단바. 라이트 테마 고정. */
:root{
  --paper:#F5F5F7; --sheet:#FFFFFF; --ink:#1D1D1F; --muted:#6E6E73; --line:#D2D2D7; --soft:#F5F5F7;
  --signal:#0071E3; --signal-h:#0077ED; --signal-soft:#E8F2FD; --save:#008009; --loss:#D70015;
  --skt:#EA002C; --kt:#1D1D1F; --lgu:#E6007E;
  --shadow:0 4px 18px rgba(0,0,0,.07); --shadow-h:0 10px 32px rgba(0,0,0,.12);
  --f-text:"A2Z",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-num:"A2Z",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--f-text);font-size:17px;line-height:1.47;letter-spacing:-.022em;-webkit-font-smoothing:antialiased;
  word-break:keep-all;overflow-wrap:break-word;line-break:strict}
h1,h2,h3,.lead,.pname,.mitem b{text-wrap:balance}
p,.mdesc,.mitem span,.hint,.note{text-wrap:pretty}
.num,.price-strip b,.msum b,.btn,.seg button,.crumbs a,.crumbs span{white-space:nowrap}
.bill div>span:last-child,.pline b{flex-shrink:0;text-align:right}
.share,.share input{word-break:break-all}
a{color:inherit}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
:focus-visible{outline:3px solid rgba(0,113,227,.6);outline-offset:2px}
.spacer{flex:1}

/* 상단 바 */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;flex-wrap:wrap;min-height:52px;
  background:rgba(251,251,253,.8);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08);
  padding:6px max(22px,env(safe-area-inset-right)) 6px max(22px,env(safe-area-inset-left))}
.logo{font-weight:600;text-decoration:none;font-size:17px}
.toplink{font-size:13px;color:var(--muted);text-decoration:none}.toplink:hover{color:var(--ink)}
.crumbs{display:flex;gap:2px;flex-wrap:wrap}
.crumbs a,.crumbs span{font-size:13px;padding:6px 12px;border-radius:999px;text-decoration:none;color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.crumbs .on{color:var(--ink);font-weight:600;background:rgba(0,0,0,.05)}

.view{max-width:1240px;margin:0 auto;padding:44px max(22px,env(safe-area-inset-right)) 96px max(22px,env(safe-area-inset-left))}
h1{font-size:clamp(28px,3.6vw,40px);font-weight:700;line-height:1.1;letter-spacing:-.03em;margin:0 0 10px;text-wrap:balance}
h1.hero{font-size:clamp(36px,5.4vw,56px);max-width:22ch}
h1.hero span{color:var(--muted)}
.lead{color:var(--muted);margin:0 0 32px;font-size:19px}
.panel{background:var(--sheet);border-radius:18px;padding:24px;min-width:0;box-shadow:var(--shadow)}
.note{font-size:13px;color:var(--muted)}
.empty{padding:48px;text-align:center;color:var(--muted)}

/* 버튼: 알약형 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;padding:11px 22px;font-size:15px;font-weight:500;border:0;
  background:rgba(0,0,0,.06);color:var(--ink);cursor:pointer;text-decoration:none;transition:background .15s}
.btn:hover{background:rgba(0,0,0,.1)}
.btn.primary{background:var(--signal);color:#fff}.btn.primary:hover{background:var(--signal-h)}
.btn.dark{background:var(--ink);color:#fff}
.btn:disabled{opacity:.4;cursor:not-allowed}
.seg{display:inline-flex;background:rgba(0,0,0,.05);border-radius:999px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;color:var(--ink);padding:8px 16px;border-radius:999px;cursor:pointer;font-size:14px}
.seg button[aria-pressed="true"]{background:var(--sheet);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.14)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* ① 통신사 */
.carriers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:32px}
@media (max-width:700px){.carriers{grid-template-columns:1fr}}
.carrier{background:var(--sheet);border:0;border-radius:18px;padding:48px 24px 36px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:24px;font-weight:600;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s}
.carrier:hover{transform:scale(1.015);box-shadow:var(--shadow-h)}
.carrier .mark{width:76px;height:76px;border-radius:22px;display:grid;place-items:center;color:#fff;font:700 22px var(--f-num);margin-bottom:6px}
.carrier[aria-pressed="true"]{box-shadow:0 0 0 2px var(--signal),var(--shadow-h)}
.carrier small{font-size:14px;color:var(--muted);font-weight:400}

/* ② 단말: 상품 카드 */
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:28px}
.toolbar input{flex:1 1 280px;padding:12px 18px;border:1px solid var(--line);border-radius:12px;background:var(--sheet);font-size:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.prod{display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--sheet);border:0;border-radius:18px;padding:26px 24px 22px;cursor:pointer;
  box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s}
.prod:hover{transform:scale(1.015);box-shadow:var(--shadow-h)}
.pbrand{font-size:12px;color:#BF4800;font-weight:600}
.pname{font-size:21px;font-weight:600;line-height:1.2;letter-spacing:-.02em;min-height:2.4em}
.pimg{display:grid;place-items:center;height:170px;margin:6px 0 14px}
.pimg i{display:block;width:78px;height:156px;border-radius:18px;border:3px solid #2C2C2E;background:linear-gradient(160deg,#E9EEF7,#C9D6EA 60%,#A9B9D6);position:relative}
.pimg i::after{content:"";position:absolute;top:7px;left:50%;width:22px;height:6px;border-radius:6px;background:#2C2C2E;transform:translateX(-50%)}
.pline{display:flex;justify-content:space-between;font-size:14px;color:var(--muted)}
.pline b{color:var(--ink);font-weight:500}
.pline .sv{color:var(--save)}.pline .off{color:var(--muted)}
.pline.big{border-top:1px solid var(--line);padding-top:10px;margin-top:4px;color:var(--ink)}
.pline.big b{font-size:19px;font-weight:600}

/* ③ 상세 */
.detail{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center;padding:48px}
@media (max-width:800px){.detail{grid-template-columns:1fr;padding:28px}}
.phone-art{aspect-ratio:9/18;max-width:240px;width:100%;margin:0 auto;border:4px solid #2C2C2E;border-radius:40px;position:relative;
  background:linear-gradient(160deg,#E9EEF7,#C9D6EA 55%,#9FB2D3)}
.phone-art::after{content:"";position:absolute;top:14px;left:50%;width:60px;height:14px;border-radius:14px;background:#2C2C2E;transform:translateX(-50%)}
.detail h1{font-size:clamp(30px,4vw,44px)}
.kv{display:grid;grid-template-columns:90px minmax(0,1fr);gap:10px 18px;margin:22px 0 28px;font-size:15px}
.kv dt{color:var(--muted)}.kv dd{margin:0}
.price-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:24px 0 0}
.price-strip div{background:var(--soft);border-radius:14px;padding:14px 16px}
.price-strip span{display:block;font-size:12px;color:var(--muted)}
.price-strip b{font-size:21px;font-weight:600}
@media (max-width:520px){.price-strip{grid-template-columns:1fr}}

/* ④ 계산 */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(320px,.95fr);gap:20px;align-items:start}
@media (max-width:1120px){.calc{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.calc .result{grid-column:1/-1}}
@media (max-width:720px){.calc{grid-template-columns:1fr}}
.calc h2{font-size:21px;font-weight:600;margin:0 0 18px;display:flex;gap:10px;align-items:center;letter-spacing:-.02em}
.tag{font:600 12px var(--f-num);background:var(--ink);color:#fff;border-radius:999px;padding:3px 9px}
.fr{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:10px;margin-bottom:10px}
.fr>span{font-size:14px;color:var(--muted)}
.fr input,.fr select{width:100%;font:500 16px var(--f-num);text-align:right;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--sheet);transition:border-color .15s}
.fr input:focus,.fr select:focus{border-color:var(--signal);outline:0;box-shadow:0 0 0 4px rgba(0,113,227,.15)}
.fr select{font-family:var(--f-text);text-align:left;-webkit-appearance:none;appearance:none;
  background:var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E6E73' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:36px}
.fr input[readonly]{background:var(--soft)}
.hint{font-size:12px;color:var(--muted);text-align:right;margin:-4px 0 12px}
.plan-desc{font-size:13px;color:var(--muted);background:var(--soft);border-radius:12px;padding:10px 12px;margin:-2px 0 12px}
.seg.join{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
.seg.join button{padding:9px 4px;font-size:14px}
.pickbtn{width:100%;text-align:right;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--sheet);cursor:pointer;font-size:14px;color:var(--signal)}
.pickbtn:hover{border-color:var(--signal)}
.pickbtn b{font-weight:600;color:var(--ink)}.pickbtn .num{color:var(--save);margin-left:6px}
.result{position:sticky;top:72px}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card{position:relative;border:2px solid transparent;border-radius:14px;padding:14px;background:var(--soft);text-align:left;cursor:pointer;transition:border-color .15s}
.card[aria-pressed="true"]{border-color:var(--signal);background:var(--sheet)}
.card .t{font-size:13px;color:var(--muted)}
.card .v{font-size:24px;font-weight:600;letter-spacing:-.02em}
.card .d{font-size:11.5px;color:var(--muted)}
.best{position:absolute;top:-10px;right:10px;background:var(--save);color:#fff;font-size:11px;font-weight:600;border-radius:999px;padding:2px 9px}
.bill{border-top:1px solid var(--line);margin-top:18px;padding-top:14px;display:flex;flex-direction:column;gap:7px;font-size:14px}
.bill div{display:flex;justify-content:space-between;gap:10px}
.bill div span:first-child{color:var(--muted)}
.minus{color:var(--save)}
.total{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-weight:600}
.total .v{font-size:clamp(32px,3.4vw,42px);font-weight:700;color:var(--ink);letter-spacing:-.03em}
.cmp{margin-top:16px;background:var(--soft);border-radius:14px;padding:14px;font-size:14px}
.cmp .fr{margin-bottom:8px}
.good b{color:var(--save)}.bad b{color:var(--loss)}
.actions{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.actions .btn{padding:14px}
.share{margin-top:12px;background:var(--signal-soft);border-radius:14px;padding:14px;font-size:14px;word-break:break-all}
.share input{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--sheet);font-size:13px;margin:8px 0}

/* ⑤ 고객 견적 */
.quote{max-width:560px;margin:0 auto;background:var(--sheet);border-radius:22px;padding:40px 32px;box-shadow:var(--shadow)}
.quote h1{font-size:30px}
.quote .big{font-size:52px;font-weight:700;color:var(--ink);letter-spacing:-.035em;margin:4px 0 2px}
.quote .bill{font-size:15px}
.quote .who{font-size:13px;color:#BF4800;font-weight:600;margin:0 0 6px}

/* 관리자 */
.admin h2{font-size:24px;font-weight:600;margin:40px 0 14px}
.tw{overflow-x:auto;background:var(--sheet);border-radius:18px;box-shadow:var(--shadow)}
.et{border-collapse:collapse;width:100%;min-width:1400px;font-size:14px}
.et th{text-align:left;color:var(--muted);font-weight:500;padding:12px 8px;border-bottom:1px solid var(--line);vertical-align:bottom}
.et th small{font-weight:400}
.et td{padding:6px;border-bottom:1px solid #EDEDF0}
.et input,.et select,.pcard input{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--sheet)}
.et input[type=number],.pcard input[type=number]{font-family:var(--f-num);text-align:right}
.sub3{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.del{border:0;background:none;color:var(--loss);cursor:pointer;padding:6px;font-size:13px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:20px}
.pcard h3{margin:0 0 12px;font-size:17px;font-weight:600}
.prow{display:grid;grid-template-columns:84px minmax(0,1.2fr) 100px minmax(0,1.5fr) auto;gap:6px;margin-bottom:6px}
.jbox{width:100%;min-height:360px;font:12.5px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--soft);margin-top:10px}
.savebar{position:sticky;bottom:0;margin-top:28px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 0;
  background:rgba(245,245,247,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.msg{font-size:14px}.msg.err{color:var(--loss)}.msg.ok{color:var(--save)}
.login{max-width:380px;margin:56px auto;display:flex;flex-direction:column;gap:14px;text-align:center}
.login input{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--sheet);font:600 24px var(--f-num);text-align:center;letter-spacing:.4em}

/* 결합 · 복지 창 */
.modal-back{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.32);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px;animation:fade .2s}
.modal{background:var(--sheet);border-radius:22px;width:min(980px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:28px 30px;display:flex;flex-direction:column;gap:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.25);animation:rise .25s cubic-bezier(.2,.8,.2,1)}
@keyframes fade{from{opacity:0}}@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.98)}}
@media (prefers-reduced-motion:reduce){.modal,.modal-back{animation:none}.carrier,.prod{transition:none}}
.mh{display:flex;align-items:center;gap:10px}.mh h2{margin:0;font-size:24px;font-weight:600;flex:1}
.x{border:0;background:rgba(0,0,0,.06);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:14px;color:var(--muted)}
.mdesc{margin:0;color:var(--muted);font-size:15px}
.mlist{display:flex;flex-direction:column;gap:10px}
.mitem{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:18px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--sheet);padding:18px 20px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.mitem:hover{border-color:var(--signal)}
.mitem.on{border-color:var(--signal);box-shadow:0 0 0 1px var(--signal)}
.mitem b{font-size:17px;font-weight:600}.mitem span{font-size:14px;color:var(--muted)}
.mitem em{font-style:normal;font-size:12px;font-weight:600;background:var(--soft);color:var(--ink);border-radius:999px;padding:5px 11px;white-space:nowrap}
@media (max-width:640px){.mitem{grid-template-columns:1fr}}
.mf{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;padding-top:4px}
.msum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.msum div{background:var(--soft);border-radius:14px;padding:14px 16px}.msum span{display:block;font-size:12px;color:var(--muted)}
.msum b{font-size:22px;font-weight:600}.msum .hl{background:var(--signal-soft)}.msum .hl b{color:var(--signal)}
@media (max-width:560px){.msum{grid-template-columns:1fr}}
.mopts{display:flex;flex-direction:column;gap:8px}.mopts>span{font-size:13px;color:var(--muted)}
.mopts small{opacity:.6;margin-left:4px}
.chk{font-size:14px;display:flex;gap:8px;align-items:center}
.modal .tw{box-shadow:none;border:1px solid var(--line);border-radius:14px}
.mt{width:100%;border-collapse:collapse;min-width:620px;font-size:14px}
.mt th{color:var(--muted);font-weight:500;padding:12px 8px;text-align:center;border-bottom:1px solid var(--line)}
.mt td{padding:8px;border-bottom:1px solid #EDEDF0;text-align:center}
.mt tr:last-child td{border-bottom:0}
.mt select,.mt input[type=number]{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--sheet)}
.mt input[type=number]{text-align:right}.mt input[readonly]{background:var(--soft)}
.mt .dis{color:var(--save);font-weight:600}
.macc{display:flex;justify-content:space-around;gap:10px;flex-wrap:wrap;background:var(--soft);border-radius:14px;padding:14px;font-size:14px;color:var(--muted)}
.macc b{color:var(--ink)}
@media print{.top,.actions,.share{display:none!important}.quote{box-shadow:none}}

.chg-out{margin-top:6px}
.chg-out .total{margin-top:6px}
.chg-out .total .v{font-size:28px;color:var(--signal)}
.chg-out .bill{margin-top:8px}
.chg-out p{margin:10px 0 0}
.quote .cmp .total .v{font-size:28px}

/* 즐겨찾기 별표 */
.prod{position:relative}
.star{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.04);font-size:20px;line-height:1;color:#C7C7CC;cursor:pointer;transition:transform .15s,color .15s}
.star:hover{transform:scale(1.1)}
.star.on{color:#FF9F0A;background:#FFF4E0}
.pmodel{font-size:12px;color:var(--muted);font-family:var(--f-num)}
.pname{min-height:0;padding-right:40px}

/* 단말 선택: 즐겨찾기 + 전체 목록 */
.search{width:100%;padding:14px 20px;border:1px solid var(--line);border-radius:14px;background:var(--sheet);font-size:17px;margin-bottom:8px}
.search:focus{outline:0;border-color:var(--signal);box-shadow:0 0 0 4px rgba(0,113,227,.15)}
.dsec{margin-top:36px}
.dsec h2{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:0 0 16px}
.dhead{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.dhead h2{margin:0;flex:1 1 auto}
.sort{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted)}
.sort select{padding:8px 34px 8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E6E73' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;-webkit-appearance:none;appearance:none;font-size:14px;color:var(--ink)}
.more{display:flex;justify-content:center;margin-top:24px}
.more .btn{padding:13px 28px}
#favs .empty{grid-column:1/-1;padding:28px;background:var(--sheet);border-radius:18px;border:1px dashed var(--line)}

/* 자동 계산 칸 */
.fr.auto output{display:block;text-align:right;padding:11px 14px;border-radius:12px;background:var(--soft);font:600 16px var(--f-num);color:var(--ink)}
.fr.auto.strong output{background:var(--signal-soft);color:var(--signal);font-size:18px}

.seg.join.two{grid-template-columns:1fr 1fr}
#selRow.on output{background:var(--signal-soft);color:var(--save)}
.sel-note{text-align:left;color:var(--signal)}

/* 제조사 탭 */
.btabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:8px 0 24px}
.btabs button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:20px 10px;border:0;border-radius:18px;background:var(--sheet);box-shadow:var(--shadow);cursor:pointer;transition:transform .2s,box-shadow .2s}
.btabs button:hover{transform:translateY(-2px);box-shadow:var(--shadow-h)}
.btabs button b{font-size:20px;font-weight:600}
.btabs button span{font-size:13px;color:var(--muted)}
.btabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.btabs button[aria-selected="true"] span{color:rgba(255,255,255,.7)}
@media (max-width:560px){.btabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dhead .note{flex:1;margin:0;font-size:15px}
.series{margin-bottom:36px}
.series h3{font-size:21px;font-weight:600;letter-spacing:-.02em;margin:0 0 14px}

/* 제조사 창 (플로팅) */
.btabs.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.btabs.three button span{color:var(--signal)}
.favh{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:12px 0 16px}
#favs .empty{grid-column:1/-1}
.modal.picker{width:min(860px,100%);padding:24px 24px 28px}
.jump{display:flex;gap:8px;flex-wrap:wrap;position:sticky;top:-24px;background:var(--sheet);padding:8px 0;z-index:2}
.jump button{border:0;background:var(--soft);border-radius:999px;padding:8px 14px;font-size:14px;cursor:pointer}
.jump button:hover{background:var(--signal-soft);color:var(--signal)}
.dlist section{margin-top:18px;scroll-margin-top:60px}
.dlist h3{font-size:17px;font-weight:600;margin:0 0 8px;color:var(--muted)}
.dlist h3 span{font-size:13px;font-weight:400}
.drow{display:grid;grid-template-columns:40px minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:12px;align-items:center;padding:12px 10px;border-radius:12px;cursor:pointer}
.drow:hover,.drow:focus-visible{background:var(--signal-soft)}
.drow+.drow{border-top:1px solid #EDEDF0}
.dn{display:flex;flex-direction:column;min-width:0}.dn b{font-weight:600;font-size:16px}.dn small{color:var(--muted);font-size:12px}
.dv{display:flex;flex-direction:column;align-items:flex-end}.dv small{font-size:11px;color:var(--muted)}.dv b{font-weight:500;font-size:15px}
.dv .sv{color:var(--save)}
.star.sm{position:static;width:34px;height:34px;font-size:17px}
@media (max-width:640px){.drow{grid-template-columns:36px minmax(0,1fr) auto}.drow .dv:nth-of-type(2),.drow .dv:nth-of-type(3){display:none}}

/* 단말 사진 */
.pimg.has img{max-height:170px;max-width:100%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.12))}
.detail-img{display:block;width:100%;max-width:340px;max-height:460px;object-fit:contain;margin:0 auto}
.dn{flex-direction:row;align-items:center;gap:12px}
.dn>span{display:flex;flex-direction:column;min-width:0}
.thumb{width:40px;height:52px;object-fit:contain;flex-shrink:0}
.imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.imgtile{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--sheet);border-radius:16px;padding:16px 12px;box-shadow:var(--shadow);cursor:pointer;text-align:center}
.imgtile .it{height:120px;display:grid;place-items:center}
.imgtile .it img{max-height:120px;max-width:100%;object-fit:contain}
.imgtile .it i{font-style:normal;font-size:13px;color:var(--muted);border:1px dashed var(--line);border-radius:12px;padding:40px 18px}
.imgtile b{font-size:14px;font-weight:600}
.imgtile input{display:none}
.imgtile .btn{padding:8px 14px;font-size:13px}

/* 색상 선택 */
.gallery{display:flex;flex-direction:column;align-items:center;gap:14px}
.swatches{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.swatches button{width:30px;height:30px;border-radius:50%;border:0;background:var(--c);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);transition:transform .15s}
.swatches button:hover{transform:scale(1.1)}
.swatches button[aria-checked="true"]{box-shadow:inset 0 0 0 1px rgba(0,0,0,.15),0 0 0 2px var(--sheet),0 0 0 4px var(--signal)}
.cname{margin:0;font-size:15px;color:var(--muted)}

/* ===== 모바일 · 아이패드 ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,a,.prod,.drow,.carrier{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.modal{max-height:calc(100dvh - 32px)}
/* 터치 기기에서는 입력칸 글자를 16px 이상으로 (아이폰 자동 확대 방지) */
@media (pointer:coarse){
  input,select,textarea,.sort select,.mt select,.mt input,.et input,.et select,.pcard input{font-size:16px!important}
  .carrier:hover,.prod:hover,.btabs button:hover{transform:none}
}
/* 휴대폰 */
@media (max-width:700px){
  .top{gap:6px 12px;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:8px}
  .logo{order:1}
  .toplink{order:2;margin-left:auto}
  .top .spacer{display:none}
  .crumbs{order:3;flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -4px}
  .crumbs::-webkit-scrollbar{display:none}
  .crumbs a,.crumbs span{flex-shrink:0}
  .view{padding-top:24px;padding-bottom:calc(110px + env(safe-area-inset-bottom))}
  h1.hero{font-size:34px}
  .lead{font-size:16px;margin-bottom:22px}
  .carriers{gap:10px;margin-bottom:20px}
  .carrier{flex-direction:row;justify-content:flex-start;padding:16px 18px;font-size:20px;gap:14px;text-align:left}
  .carrier .mark{width:48px;height:48px;border-radius:14px;font-size:16px;margin:0}
  .carrier small{margin-left:auto}
  .row .btn.primary{width:100%}
  .btabs.three{gap:8px}
  .btabs button{padding:14px 6px}
  .btabs button b{font-size:17px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .prod{padding:16px 12px 14px}
  .pname{font-size:15px;padding-right:30px}
  .pimg{height:120px;margin:4px 0 8px}
  .pimg.has img{max-height:120px}
  .pline{font-size:12px}.pline.big b{font-size:15px}
  .star{top:8px;right:8px;width:32px;height:32px;font-size:16px}
  .detail{padding:22px 18px;gap:20px}
  .detail-img{max-height:300px}
  .panel{padding:18px}
  .fr{grid-template-columns:88px minmax(0,1fr)}
  .fr:has(.seg){grid-template-columns:1fr;gap:6px}
  .seg.join button{font-size:13px;padding:9px 2px}
  .calc h2{font-size:19px}
  .modal-back{padding:0;align-items:end}
  .modal{border-radius:22px 22px 0 0;max-height:92dvh;padding:20px 16px calc(20px + env(safe-area-inset-bottom));width:100%}
  .modal.picker{padding:16px 14px calc(20px + env(safe-area-inset-bottom))}
  .mh h2{font-size:20px}
  .msum b{font-size:18px}
  .mf .btn{flex:1}
  .quote{padding:28px 20px}
  .quote .big{font-size:42px}
}
/* 아이패드 세로 · 작은 노트북 */
@media (min-width:701px) and (max-width:1120px){
  .view{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .detail{padding:32px;gap:28px}
}
/* 계산 화면 하단 고정 바 (결과가 아래로 내려가는 폭에서만) */
.mbar{display:none}
@media (max-width:1120px){
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;align-items:center;gap:12px;
    padding:12px max(16px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    background:rgba(251,251,253,.9);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-top:1px solid rgba(0,0,0,.08)}
  .mbar .ml{display:flex;flex-direction:column;line-height:1.2;min-width:0}
  .mbar .ml small{font-size:12px;color:var(--muted)}
  .mbar .ml b{font-size:24px;font-weight:700;letter-spacing:-.02em}
  .mbar .btn{margin-left:auto}
  .result{position:static}
}
/* 상세: 핵심 스펙 */
.specs{margin:24px 0 8px}
.spts{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.spts li{position:relative;padding-left:20px;font-size:15px;line-height:1.5;word-break:keep-all}
.spts li::before{content:"";position:absolute;left:4px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--signal)}
.sgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stile{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.stile span{font-size:13px;color:var(--muted)}
.stile small{font-size:11px;opacity:.8}
.stile b{font-size:15px;font-weight:600;line-height:1.4;word-break:keep-all;overflow-wrap:anywhere}
@media (min-width:1120px){.sgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vsbox{margin-top:14px;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.vsbox h3{margin:0 0 10px;font-size:15px}
.vsbox ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.vsbox li{display:flex;gap:8px;font-size:14px;line-height:1.5;word-break:keep-all}
.vsbox i{font-style:normal;font-size:11px;flex:none;width:16px;padding-top:3px}
.vsbox .up i{color:var(--save)}.vsbox .down i{color:var(--loss)}.vsbox .same i{color:var(--muted)}
/* 요금제 선택 창 */
.ptabs{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 2px}
.ptabs button{flex:1 1 auto}
.mdesc.age{font-size:13px;border-top:1px solid var(--line,#e5e5ea);padding-top:10px;margin-top:4px}
.mitem em small{display:block;font-size:11px;font-weight:500;color:var(--muted)}
@media (max-width:640px){.prow{grid-template-columns:84px 1fr 100px}.prow [data-k=desc]{grid-column:1/-2}}

/* 제휴카드 선택 */
.cardpk .cmon{font-size:13px;font-weight:400;color:var(--sub,#6e6e73);margin-left:6px}
.cardpk .ctop{display:flex;align-items:center;gap:12px;justify-content:space-between;margin:0 0 10px}
.cardpk .ctop .hint{margin:0}
.cardpk .clist{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.cardpk .crow{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;text-align:left;padding:14px 6px;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;color:inherit;cursor:pointer}
.cardpk .crow:hover,.cardpk .crow.on{background:var(--sheet)}
.cardpk .crow.on{box-shadow:inset 3px 0 0 var(--accent,#0071e3)}
.cardpk .crow.none{grid-template-columns:1fr;color:var(--sub,#6e6e73)}
.cardpk .cco{display:inline-grid;place-items:center;height:30px;border-radius:8px;background:var(--sheet);border:1px solid var(--line);font-size:13px;font-weight:600}
.cardpk .cco.big{width:64px;height:40px;font-size:15px}
.cardpk .cnm b{display:block;font-weight:600}
.cardpk .cnm em{font-style:normal;font-size:12px;color:#d70015}
.cardpk .camt{text-align:right;font-weight:600;color:var(--accent,#0071e3)}
.cardpk .camt small{display:block;font-weight:400;font-size:12px;color:var(--sub,#6e6e73)}
.cardpk .back{border:0;background:none;font:inherit;color:var(--accent,#0071e3);cursor:pointer;padding:0 0 10px}
.cardpk .chead{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.cardpk .chead b{display:block;font-size:17px}
.cardpk .chead small{color:var(--sub,#6e6e73)}
.cardpk .kv dd.pre{white-space:pre-line}
.cardpk .kv .small,.cardpk .small{font-size:12px;color:var(--sub,#6e6e73)}
.cardpk .ctier{width:100%;border-collapse:collapse;margin:12px 0}
.cardpk .ctier th,.cardpk .ctier td{padding:8px;border-bottom:1px solid var(--line);text-align:left}
.cardpk .ctier td.num{text-align:right}
.cardpk .ctier tr[data-t]{cursor:pointer}
.cardpk .ctier tr.on td{background:var(--sheet);font-weight:600}
.cardpk .ctot{margin:12px 0;padding:14px;border-radius:12px;background:var(--sheet);text-align:center;font-size:15px}
.cardpk .ctot b{font-size:22px;color:var(--accent,#0071e3);margin-left:6px}
.cardpk .ctot small{display:block;font-size:12px;color:var(--sub,#6e6e73);margin-top:4px}
@media (max-width:600px){.cardpk .crow{grid-template-columns:48px 1fr}.cardpk .camt{grid-column:2;text-align:left}}
.cardpk .cthumb{width:56px;height:36px;object-fit:contain}
.cardpk .cco2{display:block;font-size:12px;color:var(--sub,#6e6e73)}
.cardpk .chead{align-items:flex-start;flex-wrap:wrap}
.cardpk .cimg{width:200px;max-width:45%;height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.18))}
.cardpk .cinfo{flex:1;min-width:200px}
.cardpk .cqr{display:flex;gap:12px;margin-top:10px}
.cardpk .cqr figure{margin:0;text-align:center}
.cardpk .cqr img{width:120px;height:120px;image-rendering:pixelated;background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px}
.cardpk .cqr figcaption{font-size:12px;color:var(--sub,#6e6e73);margin-top:4px}

/* ===== 첫 화면: 분홍 그라데이션 히어로 ===== */
/* 첫 화면은 #hero에 그려 두고, 상담 화면은 그 위에 뜨는 창(.win) 안에서 진행한다 */
.hero-bg,.lights{display:none}
body.home,body.inwin{background:#fff}
body.home .hero-bg,body.inwin .hero-bg{display:block;position:fixed;inset:0;padding:10px;overflow:auto}
body.home .win{display:none}
.hm-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;
  padding:26px max(40px,env(safe-area-inset-right)) 0 max(40px,env(safe-area-inset-left))}
.hm-top .logo{padding:0}
.hm-top .clock{font-size:12px;margin-left:28px;color:rgba(29,29,31,.72)}
.hm-menu{position:relative;z-index:2}
.hm-menu summary{display:flex;align-items:center;gap:12px;list-style:none;cursor:pointer;font-size:12px;color:var(--ink);padding:10px 0 10px 12px;-webkit-tap-highlight-color:transparent}
.hm-menu summary::-webkit-details-marker{display:none}
.hm-dot{width:12px;height:12px;border-radius:50%;background:var(--ink);transition:transform .2s}
.hm-menu[open] .hm-dot{transform:scale(1.35)}
.hm-menu nav{position:absolute;right:0;top:100%;min-width:168px;padding:6px;border-radius:14px;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);box-shadow:0 0 0 .5px rgba(0,0,0,.14),0 16px 40px rgba(90,30,50,.25)}
.hm-menu nav a{display:block;padding:11px 14px;border-radius:10px;font-size:14px;text-decoration:none;color:var(--ink)}
.hm-menu nav a:hover{background:rgba(0,0,0,.06)}
.win-x{display:none}
body.inwin .win-x{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;border:1px solid rgba(0,0,0,.14);background:rgba(255,255,255,.6);color:var(--ink);transition:background .15s,color .15s}
body.inwin .win-x:hover{background:var(--ink);color:#fff}
.win-x svg{width:12px;height:12px}
.hm-core,.hm-top,.hm-side{transition:opacity .3s}
body.inwin .hm-core,body.inwin .hm-top,body.inwin .hm-side{opacity:0}

/* 맥 스타일 플로팅 창 */
body.inwin{overflow:hidden}
body.inwin .win{position:fixed;z-index:10;inset:max(26px,5vh) max(26px,5vw);max-width:1360px;margin:0 auto;display:flex;flex-direction:column;overflow:hidden;
  border-radius:14px;background:rgba(246,246,248,.8);backdrop-filter:saturate(180%) blur(36px);-webkit-backdrop-filter:saturate(180%) blur(36px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 0 0 .5px rgba(0,0,0,.2),0 40px 90px rgba(90,30,50,.34),0 12px 28px rgba(90,30,50,.18);
  animation:win-in .32s cubic-bezier(.2,.8,.2,1)}
@keyframes win-in{from{opacity:0;transform:translateY(18px) scale(.97)}}
body.inwin .top{position:static;flex:none;min-height:46px;gap:14px;padding:6px 18px;background:rgba(255,255,255,.5);
  backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid rgba(0,0,0,.08)}
body.inwin .logo{display:none}
body.inwin .lights{display:inline-flex;align-items:center;gap:8px;margin-right:4px}
.lights a,.lights i{display:block;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.2)}
.lights a{position:relative;background:#FF5F57}
.lights a::after{content:"";position:absolute;inset:-14px -6px -14px -14px}
.lights a:hover{background:#E0443E}
.lights i:nth-of-type(1){background:#FEBC2E}
.lights i:nth-of-type(2){background:#28C840}
body.inwin .win-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body.inwin .view{padding-top:34px}
body.inwin .result{top:20px}
body.inwin .savebar{background:rgba(246,246,248,.92)}
@media (max-width:700px){
  body.inwin .win{inset:8px;border-radius:16px}
  body.inwin .top{padding:10px 14px 8px}
  body.inwin .view{padding-top:22px}
}
@media (prefers-reduced-motion:reduce){body.inwin .win{animation:none}}

/* 창 안 통신사 카드: 창보다 조금 더 짙은 반투명 유리 */
body.inwin .carrier{background:rgba(255,255,255,.5);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 0 .5px rgba(0,0,0,.08),0 8px 24px rgba(90,30,50,.1)}
body.inwin .carrier:hover{background:rgba(255,255,255,.68);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 0 0 .5px rgba(0,0,0,.1),0 14px 34px rgba(90,30,50,.16)}
body.inwin .carrier[aria-pressed="true"]{background:rgba(255,255,255,.74);box-shadow:inset 0 0 0 1.5px var(--ink),0 14px 34px rgba(90,30,50,.16)}

/* 창 안 글씨: 전체적으로 한 단계 작고 가볍게 */
body.inwin .win-body{font-size:15px}
body.inwin .crumbs a,body.inwin .crumbs span{font-size:12px}
body.inwin h1{font-size:clamp(22px,2.3vw,28px);font-weight:600;letter-spacing:-.025em}
body.inwin .lead{font-size:15px;margin-bottom:24px}
body.inwin .btn{font-size:14px}
body.inwin .carrier{font-size:18px;font-weight:600}
body.inwin .carrier small{font-size:12.5px}
body.inwin .dsec h2,body.inwin .series h3,body.inwin .calc h2,body.inwin .admin h2{font-size:18px}
body.inwin .card .v{font-size:20px}
body.inwin .total .v{font-size:clamp(24px,2.5vw,30px);font-weight:600}
body.inwin .price-strip b{font-size:18px}
body.inwin .mbar .ml b{font-size:20px}
@media (min-width:701px){
  body.inwin .carrier{padding:36px 20px 28px;gap:10px}
  body.inwin .carrier .mark{width:58px;height:58px;border-radius:17px;font-size:17px}
  body.inwin .btabs button{padding:14px 10px}
  body.inwin .btabs button b{font-size:16px}
  body.inwin .btabs button span{font-size:12px}
  body.inwin .pname{font-size:17px}
  body.inwin .pline{font-size:13px}
  body.inwin .pline.big b{font-size:16px}
  body.inwin .pimg{height:150px}
  body.inwin .detail h1{font-size:clamp(24px,2.8vw,32px)}
  body.inwin .kv,body.inwin .spts li{font-size:14px}
  body.inwin .fr>span{font-size:13px}
  body.inwin .fr input,body.inwin .fr select,body.inwin .fr.auto output{font-size:15px;padding-top:9px;padding-bottom:9px}
  body.inwin .seg button{font-size:13px}
  body.inwin .bill{font-size:13px}
}
.hm{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;min-height:calc(100vh - 20px);min-height:calc(100dvh - 20px);
  border-radius:28px;background:#EBCBD8;padding:110px 24px 150px;box-shadow:inset 0 0 0 1px rgba(29,29,31,.06)}
.hm-blob{position:absolute;z-index:-1;border-radius:50%;filter:blur(48px);animation:hm-drift 16s ease-in-out infinite alternate}
.hm-blob.b1{left:-14vw;bottom:-22vh;width:48vw;height:78vh;background:radial-gradient(closest-side,#CC7E94 0%,#DC9CA6 38%,#EDBFB6 68%,rgba(237,191,182,0) 100%)}
.hm-blob.b2{right:-14vw;bottom:-10vh;width:38vw;height:64vh;background:radial-gradient(closest-side,#CE8497 0%,#E3AAAD 42%,#EEC4BA 70%,rgba(238,196,186,0) 100%);animation-delay:-6s}
.hm-blob.b3{left:-9vw;top:-14vh;width:24vw;height:70vh;background:radial-gradient(closest-side,#DB98A5 0%,#EDBDB6 55%,rgba(237,189,182,0) 100%);animation-delay:-11s}
@keyframes hm-drift{to{transform:translate3d(3vw,-4vh,0) scale(1.08)}}
.hm-core{width:min(560px,100%)}
.hm-title{margin:0;text-align:center;white-space:nowrap;font-size:clamp(72px,13vw,150px);font-weight:600;font-style:italic;line-height:1;letter-spacing:-.06em}
.hm-meta{margin:22px 0 30px;text-align:center;font-size:12px;letter-spacing:.04em;color:rgba(29,29,31,.62)}
.hm-meta i{font-style:normal;margin:0 12px;opacity:.5}
.hm-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:start}
.hm-desc{margin:0;font-size:15px;line-height:1.45;color:rgba(29,29,31,.8)}
.hm-carriers{display:flex;flex-direction:column;gap:8px}
.hm-pill{text-decoration:none;display:flex;align-items:center;gap:10px;min-width:196px;padding:13px 16px;border:1px solid rgba(29,29,31,.55);border-radius:12px;background:transparent;
  color:var(--ink);cursor:pointer;font-size:14px;transition:background .2s,color .2s,transform .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.hm-pill i{width:8px;height:8px;border-radius:50%;flex:none}
.hm-pill b{font-weight:600;letter-spacing:.03em}
.hm-pill small{margin-left:auto;font-size:12px;opacity:.6}
.hm-pill svg{width:11px;height:11px;flex:none;transition:transform .2s}
.hm-pill:hover,.hm-pill[aria-pressed="true"]{background:var(--ink);color:#fff}
.hm-pill:hover svg{transform:translate(2px,-2px)}
.hm-pill:active{transform:scale(.98)}
.hm-side{position:absolute;top:50%;font-size:11px;font-style:italic;color:rgba(29,29,31,.7)}
.hm-side.l{left:44px}.hm-side.r{right:44px}
.hm-count{position:absolute;left:44px;bottom:-78px;width:168px;height:168px;border-radius:50%;border:1px solid rgba(29,29,31,.5);
  display:flex;flex-direction:column;align-items:center;padding-top:20px}
.hm-count span{font-size:11px;letter-spacing:.08em;color:rgba(29,29,31,.7)}
.hm-count b{font-size:44px;font-weight:600;line-height:1.1;letter-spacing:-.04em}
.hm-disc{position:absolute;right:44px;bottom:-96px;width:168px;height:168px;border-radius:50%;background:#A82B4C;overflow:hidden}
.hm-disc i{position:absolute;left:52px;top:16px;width:74px;height:150px;border-radius:14px;background:#7A2038;transform:rotate(-16deg)}
@media (max-width:900px){.hm-side{display:none}}
@media (max-width:700px){
  .hm-top{padding:18px 18px 0;gap:10px}
  .hm-top .clock{margin-left:4px;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hm-top>*{order:0}
  .win-x{order:2;margin-left:auto}
  body.home .hero-bg,body.inwin .hero-bg{padding:8px}
  .hm{min-height:calc(100vh - 16px);min-height:calc(100dvh - 16px);border-radius:22px;padding:90px 20px 130px}
  .hm-blob.b1{width:90vw;height:60vh;left:-40vw}.hm-blob.b2{width:80vw;height:50vh;right:-40vw}.hm-blob.b3{width:50vw}
  .hm-meta{margin:16px 0 24px}
  .hm-row{grid-template-columns:1fr;gap:20px}
  .hm-desc{text-align:center}
  .hm-pill{padding:15px 18px;font-size:16px}
  .hm-count,.hm-disc{width:120px;height:120px}
  .hm-count{left:20px;bottom:-52px;padding-top:12px}.hm-count b{font-size:32px}
  .hm-disc{right:20px;bottom:-66px}.hm-disc i{left:36px;top:12px;width:54px;height:108px;border-radius:10px}
}
@media (prefers-reduced-motion:reduce){.hm-blob{animation:none}.hm-pill,.hm-pill svg{transition:none}}
@media print{.hm-blob{display:none}}

/* 로고: 진한 점 세 개 */
.logo{display:inline-flex;align-items:center;gap:5px;padding:10px 4px 10px 0}
.logo i{width:9px;height:9px;border-radius:50%;background:var(--ink)}
/* 첫 화면 영문 제목 */
.hm-title{display:flex;justify-content:center;font-size:clamp(58px,12vw,140px);letter-spacing:-.05em;padding-bottom:.08em}

/* 첫 화면 제목 글씨체: Instrument Serif Italic (OFL) */
@font-face{font-family:"Instrument Serif";src:url("/fonts/InstrumentSerif-Italic.woff2") format("woff2");font-style:italic;font-weight:400;font-display:swap}
.hm-title{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(76px,15vw,176px);letter-spacing:-.02em;line-height:.95;padding-bottom:.04em}

/* ===== 창 안 표면 전체를 유리 느낌으로 =====
   창 자체가 뒤 배경을 흐리게 하므로, 안쪽 카드·패널은 반투명 흰색만 얹는다 (카드마다 blur를 걸면 태블릿에서 무겁다). */
body.inwin .win,body.inwin .modal{
  --sheet:rgba(255,255,255,.52); --soft:rgba(110,50,70,.055); --line:rgba(60,20,35,.14); --signal-soft:rgba(0,113,227,.1);
  --shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 0 .5px rgba(60,20,35,.08),0 8px 22px rgba(90,30,50,.07);
  --shadow-h:inset 0 0 0 1px rgba(255,255,255,.85),0 0 0 .5px rgba(60,20,35,.1),0 14px 32px rgba(90,30,50,.14)}
body.inwin .prod:hover,body.inwin .btabs button:hover{background:rgba(255,255,255,.7)}
body.inwin .btabs button[aria-selected="true"]{background:var(--ink)}
body.inwin .fr input,body.inwin .fr select,body.inwin .pickbtn,body.inwin .search,body.inwin .toolbar input,body.inwin .sort select{background-color:rgba(255,255,255,.62)}
body.inwin .fr input[readonly]{background-color:var(--soft)}
body.inwin .seg{background:rgba(110,50,70,.08)}
body.inwin .seg button[aria-pressed="true"]{background:rgba(255,255,255,.9)}
body.inwin .card[aria-pressed="true"]{background:rgba(255,255,255,.8)}
body.inwin .stile{border-color:transparent}
body.inwin .star{background:rgba(110,50,70,.07)}
body.inwin .star.on{background:rgba(255,159,10,.16)}
body.inwin .drow+.drow,body.inwin .et td,body.inwin .mt td{border-color:rgba(60,20,35,.08)}
body.inwin .mbar{background:rgba(250,246,248,.86);border-top-color:rgba(60,20,35,.1)}
body.inwin .login input,body.inwin .et input,body.inwin .et select,body.inwin .pcard input{background-color:rgba(255,255,255,.62)}

/* 요금제 · 결합 · 카드 선택 팝업도 같은 유리 */
/* 바깥 막에 blur를 걸면 안쪽 창의 blur가 먹지 않으므로 막은 색만 입힌다 */
body.inwin .modal-back{background:rgba(60,20,35,.3);backdrop-filter:none;-webkit-backdrop-filter:none}
body.inwin .cardpk .ctop select{-webkit-appearance:none;appearance:none;border:1px solid var(--line);border-radius:999px;padding:7px 30px 7px 14px;font-size:13px;color:var(--ink);cursor:pointer;
  background:rgba(255,255,255,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E6E73' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center}
body.inwin .modal{background:rgba(250,246,248,.84);backdrop-filter:saturate(180%) blur(36px);-webkit-backdrop-filter:saturate(180%) blur(36px);
  border-radius:18px;font-size:15px;gap:14px;padding:24px 26px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 0 0 .5px rgba(0,0,0,.2),0 30px 80px rgba(60,20,35,.32)}
body.inwin .modal .jump{background:rgba(245,238,242,.97)}
body.inwin .mh h2{font-size:19px}
body.inwin .x{width:30px;height:30px;border-radius:8px;border:1px solid rgba(0,0,0,.14);background:rgba(255,255,255,.6);color:var(--ink);font-size:12px}
body.inwin .x:hover{background:var(--ink);color:#fff}
body.inwin .mdesc{font-size:13.5px}
body.inwin .mitem{padding:14px 16px;gap:14px;border-radius:12px}
body.inwin .mitem b{font-size:15px}
body.inwin .mitem span{font-size:13px}
body.inwin .mitem em{font-size:11.5px}
body.inwin .mitem:hover,body.inwin .mitem.on{background:rgba(255,255,255,.8)}
body.inwin .msum b{font-size:18px}
body.inwin .mt,body.inwin .macc,body.inwin .chk{font-size:13px}
body.inwin .mt select,body.inwin .mt input[type=number]{background-color:rgba(255,255,255,.62)}
body.inwin .jump button,body.inwin .ptabs button{font-size:13px}
body.inwin .dlist h3{font-size:15px}
body.inwin .dn b{font-size:14.5px}
body.inwin .dv b{font-size:14px}
body.inwin .cardpk .chead b{font-size:16px}
body.inwin .cardpk .ctot{font-size:14px}
body.inwin .cardpk .ctot b{font-size:19px}
body.inwin .cardpk .cco.big{font-size:14px}

/* 휴대폰 폭: 창 안 글씨 한 단계 더 정리 */
@media (max-width:700px){
  body.inwin .win-body{font-size:14.5px}
  body.inwin h1{font-size:21px}
  body.inwin .lead{font-size:14px;margin-bottom:18px}
  body.inwin .crumbs a,body.inwin .crumbs span{padding:5px 10px}
  body.inwin .carrier{font-size:17px;padding:14px 16px;gap:12px}
  body.inwin .carrier .mark{width:42px;height:42px;border-radius:12px;font-size:14px}
  body.inwin .carrier small{font-size:12px}
  body.inwin .btabs button{padding:12px 6px}
  body.inwin .btabs button b{font-size:15px}
  body.inwin .btabs button span{font-size:11.5px}
  body.inwin .dsec h2,body.inwin .series h3,body.inwin .calc h2,body.inwin .favh{font-size:17px}
  body.inwin .pname{font-size:14px}
  body.inwin .pmodel{font-size:11px}
  body.inwin .pline{font-size:11.5px}
  body.inwin .pline.big b{font-size:14px}
  body.inwin .detail h1{font-size:22px}
  body.inwin .kv,body.inwin .spts li,body.inwin .vsbox li{font-size:13.5px}
  body.inwin .stile b{font-size:14px}
  body.inwin .price-strip b{font-size:17px}
  body.inwin .fr>span{font-size:13px}
  body.inwin .seg button,body.inwin .seg.join button{font-size:13px}
  body.inwin .bill{font-size:13px}
  body.inwin .card .v{font-size:18px}
  body.inwin .total .v{font-size:24px}
  body.inwin .mbar .ml b{font-size:19px}
  body.inwin .modal{border-radius:18px 18px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));font-size:14.5px}
  body.inwin .mh h2{font-size:17px}
  body.inwin .mitem b{font-size:14.5px}
  body.inwin .msum b{font-size:16px}
}
@media (max-width:640px){body.inwin .mitem{gap:8px}body.inwin .mitem em{justify-self:start}}