/* 고객 화면 보강 (2026-10-09 UX 감사 반영) — theme.css 뒤에 로드. 관리자 화면은 안 씀 */
/* 헤더: 모바일 스크롤 시 검색줄 접기 + 로고 상단 여백 */
.head .sbtn{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:50%;color:var(--navy);margin-left:auto}
@media (max-width:900px){
  .head .row1{padding-top:10px}
  .head.stuck:not(.sopen) .sbox{display:none}
  .head.stuck:not(.sopen) .sbtn{display:inline-flex}
  .head.stuck:not(.sopen) .util{margin-left:0}
  .head.stuck .row1{padding-top:6px;padding-bottom:6px}
}
/* 터치영역 44px */
.hero-nav button{min-width:44px;min-height:44px;padding:0;font-size:18px}
.hero-nav{padding:0 2px;gap:0}
@media (max-width:900px){.hero-nav{right:8px;bottom:8px}.hero-nav button{min-width:44px}}
.hero-dots i{position:relative}
.hero-dots i::before{content:"";position:absolute;left:-4px;right:-4px;top:-20px;bottom:-20px}
.ntc td a{display:block;padding:12px 0;min-height:44px}
.hero-dots{pointer-events:auto}
/* 첫 화면 가치 한 줄 */
.herohook{max-width:var(--wrap);margin:14px auto 0;padding:0 20px}
.herohook a{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 20px;box-shadow:var(--shadow);color:var(--ink)}
.herohook b{font-family:var(--font-d);font-size:20px;color:var(--navy);letter-spacing:-.6px}
.herohook small{color:var(--ink3);font-size:12.5px}
.herohook .go{margin-left:auto;font-weight:800;color:var(--brand);font-size:14px;white-space:nowrap}
@media (max-width:900px){.herohook{padding:0 12px}.herohook a{padding:12px 14px;gap:6px 10px}.herohook b{font-size:17px}.herohook .go{margin-left:0}}
/* 서비스 타일 — 메뉴 대신 '얼마부터' 정보 타일 */
.quick .from{display:block;margin-top:6px;font-size:13px;font-weight:800;color:var(--gold-d)}
@media (max-width:900px){.quick .from{font-size:11.5px;margin-top:2px}.quick span span.from{display:block}}
/* 가격 카드 줄 */
.card .price .l.k span{color:var(--ink3)}
.card .price .l .dc{color:var(--red)}
.card .plan-ref{display:block;font-size:12px;color:var(--ink3);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 상세 계산박스 */
.pd-box .r.off{opacity:.42}
.pd-box .r.hide{display:none}
.pd-box .cond{padding:6px 12px 10px;font-size:11.5px;color:var(--ink3);line-height:1.5;border-top:1px dashed #E3E7EE}
.pd-kait{font-size:12px;color:var(--ink3);margin-top:8px;display:flex;align-items:center;gap:6px}
.foot .kait{display:flex;align-items:center;gap:6px}
.foot .kait{gap:12px;margin-top:6px}
.foot .kait a{display:inline-flex;flex:none}
.foot .kait img{width:80px;height:80px;display:block}
/* 목록 정렬·비교 */
.pl-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.pl-tools .inp{width:auto;min-height:44px}
.card.ph{position:relative}
.card.ph .badge.r{top:62px}  /* 우측 배지는 비교 버튼 아래로 */
.cmpbtn{position:absolute;right:10px;top:10px;z-index:3;min-width:44px;min-height:44px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.94);
  border:1px solid var(--line);font-size:12.5px;font-weight:800;color:var(--ink2);display:flex;align-items:center;gap:4px}
.cmpbtn.on{background:var(--navy);border-color:var(--navy);color:#fff}
.cmpbar{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:80;background:var(--navy);color:#fff;border-radius:999px;
  padding:8px 8px 8px 20px;display:flex;align-items:center;gap:12px;box-shadow:0 14px 40px rgba(10,24,47,.35);font-size:14px;font-weight:700;max-width:calc(100% - 24px)}
.cmpbar.hide{display:none}
.cmpbar a,.cmpbar button{min-height:44px;padding:0 16px;border-radius:999px;font-weight:800;display:inline-flex;align-items:center}
.cmpbar a{background:var(--gold);color:var(--navy)}
.cmpbar button{color:#fff;opacity:.8}
@media (max-width:900px){.cmpbar{bottom:76px}}
.cmptbl th{width:130px;white-space:nowrap}
.cmptbl td{text-align:center;vertical-align:top;min-width:150px}
.cmptbl td img{width:96px;height:96px;object-fit:contain;display:block;margin:0 auto 6px}
.cmptbl .best{color:var(--red);font-weight:800}
/* 알뜰유심 더보기 */
.mvmore{display:flex;justify-content:center;margin-top:20px}
/* 고객센터 */
.cs-top{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cs-top .dbox{display:flex;flex-direction:column;gap:6px}
.cs-top .big{font-family:var(--font-d);font-size:24px;color:var(--navy);letter-spacing:-.6px}
.cs-top .btn{margin-top:auto;min-height:48px}
.cs-hours{font-size:14px;color:var(--ink2);line-height:1.8}
.cs-hours .now{display:inline-block;margin-top:6px;font-size:12.5px;font-weight:800;padding:4px 10px;border-radius:999px;background:var(--brand-l);color:var(--brand-d)}
.cs-hours .now.off{background:#FFF1E6;color:#A24A00}
@media (max-width:900px){.cs-top{grid-template-columns:1fr}}
.qa-q{min-height:44px}
/* 완료·마이페이지 가격 요약 */
.sumbox{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.sumbox div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.sumbox span{display:block;font-size:12.5px;color:var(--ink3);font-weight:700}
.sumbox b{display:block;font-size:19px;font-weight:800;color:var(--navy);margin-top:4px;letter-spacing:-.4px}
.sumbox small{display:block;font-size:11.5px;color:var(--ink3);margin-top:2px}
@media (max-width:600px){.sumbox{grid-template-columns:1fr}}
.eta{margin-top:12px;font-size:14px;font-weight:700;padding:10px 14px;border-radius:12px;background:var(--brand-l);color:var(--brand-d)}
.eta.off{background:#FFF1E6;color:#A24A00}
.kvgrid{margin-top:12px;display:grid;grid-template-columns:repeat(2,1fr);gap:6px 18px;font-size:13.5px}
.kv{display:flex;gap:8px}.kv span{color:var(--ink3);min-width:96px;flex:0 0 auto}.kv.wide{grid-column:1/-1}
@media (max-width:600px){.kvgrid{grid-template-columns:1fr}}

/* 상세 위 개통방법 4단계(2x2) + 카톡 플러스친구 포스터 (_howto.html, 띵폰 참고 10/12) */
.howto{margin:26px 0 10px}
.howto-h{text-align:center;margin:10px 0 34px}
.howto-h h2{font-family:'ZDisplay',var(--font);font-size:48px;font-weight:800;line-height:1.3;letter-spacing:-1.2px;margin:0;color:var(--ink)}
.howto-h h2 em{font-style:normal;color:var(--gold)}
.howto-h h2 strong{color:#2B5BD7}
.howto-h p{margin:14px 0 0;color:var(--ink3);font-size:19px}
.howto-s{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:56px 40px;background:#fff;border-radius:22px;padding:56px 30px;box-shadow:0 18px 40px rgba(10,24,47,.06)}
.howto-s li{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.howto-s li:nth-child(odd)::after{content:'';position:absolute;right:-28px;top:150px;width:26px;height:26px;border-top:5px solid #C9CED8;border-right:5px solid #C9CED8;transform:rotate(45deg);border-radius:2px}
.howto-s .ci{position:relative;width:320px;height:320px;border-radius:50%;background:#F1F3F7;display:flex;align-items:center;justify-content:center}
.howto-s .ci img{width:250px;height:250px;object-fit:contain}
.howto-s .ci .cw{position:absolute;inset:0;border-radius:50%;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.howto-s .ci .cw img{width:205px;height:auto}
.howto-s .ci i{position:absolute;left:4px;top:4px;width:58px;height:58px;z-index:1;border-radius:50%;background:var(--gold);color:#fff;font-style:normal;font-family:'ZDisplay',var(--font);font-size:27px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.12)}
.howto-s b{font-family:'ZDisplay',var(--font);font-size:34px;font-weight:800;letter-spacing:-.8px;margin-top:28px;color:var(--ink)}
.howto-s span{font-size:19px;color:var(--ink3);margin-top:12px;line-height:1.6}
.kplus{display:block;margin:56px 0 8px;border-radius:22px;overflow:hidden;text-decoration:none;color:#3A1D1D;box-shadow:0 18px 40px rgba(60,40,0,.14);transition:transform .2s}
.kplus:hover{transform:translateY(-3px)}
.kp-top{background:#FEE500;text-align:center;padding:42px 20px 34px;position:relative}
.kp-top::before,.kp-top::after{content:'✦';position:absolute;color:#fff;font-size:34px;top:40px;left:9%}
.kp-top::after{left:auto;right:10%;top:auto;bottom:70px;font-size:28px}
.kp-tag{display:inline-block;background:#fff;border-radius:99px;padding:6px 16px;font-size:15px;font-weight:800}
.kp-logo{font-size:64px;font-weight:300;letter-spacing:-2px;margin:14px 0 4px;line-height:1}
.kp-logo b{font-weight:900}
.kp-bub{display:inline-flex;align-items:center;gap:14px;font-family:'ZDisplay',var(--font);font-size:58px;font-weight:800;letter-spacing:-1.5px;line-height:1.1}
.kp-bub span{background:#3A1D1D;color:#FEE500;border-radius:60px;padding:8px 30px 12px;position:relative}
.kp-bub span::after{content:'';position:absolute;left:26px;bottom:-16px;border:12px solid transparent;border-top:16px solid #3A1D1D;border-left:6px solid transparent}
.kp-open{font-family:'ZDisplay',var(--font);font-size:34px;font-weight:800;margin-top:26px;letter-spacing:-.8px}
.kp-open em{font-style:normal;color:#fff;-webkit-text-stroke:1.4px #3A1D1D;paint-order:stroke fill}
.kp-sub{font-size:17px;margin-top:10px}
.kp-sub u{font-weight:800}
.kp-cta{background:#3A1D1D;text-align:center;padding:26px 20px 24px;position:relative}
.kp-cta::before,.kp-cta::after{content:'';position:absolute;left:0;right:0;height:12px;background:radial-gradient(circle at 12px 0,#FEE500 9px,transparent 10px) 0 0/24px 12px repeat-x}
.kp-cta::before{top:0}.kp-cta::after{bottom:0;transform:scaleY(-1)}
.kp-cta b{display:block;font-family:'ZDisplay',var(--font);font-size:46px;font-weight:800;color:#5FD4FF;letter-spacing:-1px}
.kp-cta span{display:block;color:#fff;font-size:16px;margin-top:6px}
.kp-ben{background:#FEE500;display:flex;align-items:center;gap:40px;padding:40px 56px 18px}
.kp-ph{flex:0 0 170px;height:320px;border-radius:34px;background:#fff;border:9px solid #2B2B2B;position:relative;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px rgba(60,40,0,.25)}
.kp-ph::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:54px;height:15px;border-radius:10px;background:#2B2B2B}
.kp-ph::after{content:'';position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:56px;height:4px;border-radius:4px;background:#C9C9C9}
.kp-ph img{width:136px}
.kp-ben h4{font-family:'ZDisplay',var(--font);font-size:34px;font-weight:800;margin:0 0 16px;letter-spacing:-.8px}
.kp-ben ol{list-style:none;margin:0;padding:0;font-size:19px;line-height:2}
.kp-ben ol b{margin-right:12px}
.kp-end{background:#FEE500;text-align:center;padding:22px 20px 34px}
.kp-end b{display:block;font-family:'ZDisplay',var(--font);font-size:46px;font-weight:800;letter-spacing:-1.2px}
.kp-end span{display:inline-block;margin-top:14px;font-size:16px;font-weight:700}
.kp-end span i{font-style:normal;background:#3A1D1D;color:#FEE500;border-radius:99px;padding:2px 10px;margin-left:4px}
.kp-chat{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 0;min-height:56px;border-radius:14px;background:#fff;border:2px solid #3A1D1D;color:#3A1D1D;font-weight:800;font-size:17px;text-decoration:none}
@media (max-width:760px){
  .howto-h{margin-bottom:24px}.howto-h h2{font-size:26px}.howto-h p{font-size:14.5px}
  .howto-s{gap:26px 10px;padding:26px 10px;border-radius:16px}.howto-s li:nth-child(odd)::after{display:none}
  .howto-s .ci{width:140px;height:140px}.howto-s .ci img{width:110px;height:110px}.howto-s .ci .cw img{width:92px}
  .howto-s .ci i{width:34px;height:34px;font-size:16px}
  .howto-s b{font-size:18px;margin-top:14px}.howto-s span{font-size:13.5px}
  .kplus{margin-top:36px;border-radius:16px}
  .kp-top{padding:28px 14px 24px}.kp-logo{font-size:38px}.kp-bub{font-size:32px;gap:8px}.kp-bub span{padding:5px 16px 8px}
  .kp-open{font-size:21px;margin-top:20px}.kp-sub{font-size:13.5px}
  .kp-cta b{font-size:28px}.kp-cta span{font-size:13px}
  .kp-ben{flex-direction:column;gap:18px;padding:28px 18px 10px;text-align:center}
  .kp-ph{flex:0 0 auto;width:130px;height:244px;border-width:7px;border-radius:28px}.kp-ph img{width:104px}
  .kp-ben h4{font-size:23px}.kp-ben ol{font-size:15px;line-height:1.7;text-align:left;display:inline-block}.kp-ben ol li{margin:4px 0}
  .kp-end b{font-size:27px}
}
/* 상세 하단 상담 안내 — PC에서 글자 작다는 보스 지적(10/12) */
.pd-call{display:flex;flex-direction:column;gap:10px}
.pd-call b{font-size:26px;font-weight:800;letter-spacing:-.4px;color:var(--ink);line-height:1.4}
.pd-call span{font-size:21px;color:var(--ink2)}
.pd-call a{font-weight:800;color:var(--navy);text-decoration:none}
.pd-callbox{display:flex;align-items:center;gap:20px;margin-top:14px}
.pd-callbox img{width:160px;flex:0 0 auto}
.pd-call a{white-space:nowrap}
@media (max-width:760px){
  .pd-callbox{flex-direction:column;text-align:center;gap:10px;padding-top:20px}
  .pd-callbox img{width:96px}
  .pd-call b{font-size:17px}.pd-call span{font-size:15px;line-height:1.6}
}

/* 비교표 모바일 한 화면(가로 스와이프 없이, 보스 10/12) */
@media (max-width:760px){
  .cmptbl table{table-layout:fixed;width:100%;font-size:12.5px}
  .cmptbl th{width:68px;white-space:normal;word-break:keep-all;font-size:12px;padding:9px 6px;line-height:1.35}
  .cmptbl td{min-width:0;padding:9px 4px;word-break:keep-all;overflow-wrap:anywhere;line-height:1.4}
  .cmptbl td img{width:60px;height:60px}
  .cmptbl td small{font-size:11px}
  .cmptbl td .btn{padding:6px 8px;font-size:12px;min-height:34px}
}
/* 기종 카드 가격 줄: 라벨 한 줄, 금액 오른쪽 정렬 */
.card .price .l>span{white-space:nowrap}
.card .price .l .lx{font-style:normal;font-size:11px;color:var(--ink3);margin-left:2px}
@media (max-width:760px){.card .price .l .lx{display:none}}

/* 기종 카드: 다른 할인방법 월 납부액 비교 줄 */

/* 찜(10/12): 헤더 하트 진입점 · 상세 하트 켜짐 · 찜 목록 카드(왼쪽 위 하트=해제, 오른쪽 위 +비교) */
.head .util a.favlink{display:inline-flex;align-items:center;gap:5px;color:var(--ink2)}
.head .util a.favlink .ic{color:var(--red)}
.head .util a.favlink em{font-style:normal;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.head .util a.favlink.cur{background:var(--brand-l);color:var(--navy)}
@media (max-width:900px){.head .util a.favlink{padding:7px 8px}.head .util a.favlink span{display:none}}
.pd-cta.fav.on{color:var(--red)!important;border-color:#F3B7BB}
.card.favc{position:relative}
.favx{position:absolute;left:10px;top:10px;z-index:3;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.94);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--red);cursor:pointer}
.favx .ic{fill:currentColor}
.favx:hover{border-color:var(--red)}
.card.favc .badge{display:none}
#favTabs .chip{cursor:pointer;border:1px solid var(--line);font-size:13.5px;padding:8px 14px;min-height:40px}
#favTabs .chip b{margin-left:4px;color:var(--brand)}
#favTabs .chip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
#favTabs .chip.on b{color:#fff}
@media (max-width:480px){  /* 하트 추가로 로그인 상태 유틸이 로고 옆 한 줄에 들어가게 */
  .head .util{gap:2px}
  .head .util a{padding:6px 7px;font-size:12.5px}
  .head .util a.favlink{padding:6px 5px}
}
@media (max-width:380px){.head .util a{padding:6px 5px}.head .util a.favlink{padding:6px 3px}.head .util a.favlink em{display:none}}
/* 목록 카드 찜 하트(10/12) — 꺼짐=회색 빈 하트, 켜짐=빨강 */
.card.favh{position:relative}
.favx.lst:not(.on){color:#8F98AA}
.favx.lst:not(.on) .ic{fill:none}
.favlogin{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:300;background:var(--navy);color:#fff;border-radius:14px;padding:12px 12px 12px 18px;display:flex;align-items:center;gap:12px;font-size:14.5px;box-shadow:0 14px 30px rgba(10,24,47,.3);white-space:nowrap}
.favlogin a{background:var(--gold);color:#fff;font-weight:800;border-radius:10px;padding:8px 14px;text-decoration:none}
.favlogin button{background:none;border:0;color:#fff;font-size:20px;opacity:.7;cursor:pointer;padding:0 4px}

/* 상품 카드(인터넷·유심·렌탈): 요약 한 줄은 줄바꿈 허용, 배지는 찜 하트 피해 오른쪽 */
.card .price .l>span:only-child{white-space:normal;word-break:keep-all}
.card.favh .thumb .badge{left:auto;right:11px}
@media (max-width:900px){.head .util a.favlink.anon{display:none}}   /* 비로그인 모바일 헤더 줄넘김 방지 — 하트는 카드에서 안내 */
.card .price{word-break:keep-all}

/* 고객 화면 양식 통일(10/12): 인터넷·알뜰유심·알뜰폰 카드(_pcard.html .card.ph.pc)·상세를 휴대폰 기준으로 */
.card.ph .thumb .badge{top:62px}                    /* 배지는 오른쪽 위 +비교 버튼 아래 */
.card.ph .thumb .badge.r{top:96px}
.card.pc .mvthumb img{object-position:80% center}  /* 1:1 썸네일에서 유심 그림이 오른쪽에 남게 */
.card.pc .mvov{padding-top:30px}
.card.pc .price .l b{text-align:right}
@media (max-width:600px){.card.pc .mvov b{font-size:20px}}
.pd.svc{grid-template-columns:420px minmax(0,1fr) 280px;gap:36px}   /* 가로 사진만 이미지 칸 넓게, 옵션 라벨은 휴대폰처럼 왼쪽 */
.pd.svc .pd-row{grid-template-columns:110px 1fr;gap:12px}
@media (max-width:1100px){.pd.svc{grid-template-columns:360px minmax(0,1fr)}}
@media (max-width:760px){.pd.svc{grid-template-columns:1fr;gap:20px}.pd.svc .pd-row{grid-template-columns:1fr;gap:6px}}
.pd.svc #optBox,.pd.svc #mvCard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}   /* 버튼 여러 개는 2열로 가지런히(휴대폰 용량·할인 버튼처럼) */
.pd.svc #optBox button,.pd.svc #mvCard button{min-width:0;padding:0 8px;white-space:normal;word-break:keep-all;line-height:1.3}
@media (max-width:640px){   /* 목록 하단 상담 박스: 모바일은 캐릭터 위·글 아래로 */
  .plask{flex-direction:column;text-align:center!important;gap:6px!important;padding:20px 16px!important}
  .plask img{width:110px!important;margin:0!important}
  .plask .plask-b{justify-content:center}
}
/* 10/15 기종 카드 기기값 강조(레퍼런스형): 출고가 취소선 → 큰 빨간 기기값 → 할인 박스 */
.card .price .was{display:block;font-size:12.5px;color:var(--ink3)}
.card .price .big.dev{color:var(--red);font-size:26px;line-height:1.15}
.card .price .dline{margin-top:8px}
.card .price .dline div{font-size:15px;line-height:1.6;color:var(--ink);font-weight:700;white-space:nowrap}
@media (max-width:760px){.card .price .big.dev{font-size:21px}.card .price .dline div{font-size:13px}}
/* 10/15 푸터: 글씨 키움 + 고객센터 오른쪽 분리(오늘의폰 참고) */
.foot{font-size:14.5px}
.foot .fgrid{display:flex;justify-content:space-between;gap:40px}
.foot .finfo{flex:1;min-width:0}
.foot .fcs{flex:none;width:260px;padding-left:40px;border-left:1px solid rgba(255,255,255,.14);align-self:flex-start;margin-top:4px}
.foot .fcs b{display:block;color:#fff;font-size:16px;font-weight:800}
.foot .fcs .ftel{display:block;color:var(--gold-2);font-family:var(--font-d);font-size:28px;font-weight:800;letter-spacing:-.5px;margin:8px 0 10px}
.foot .fcs p{margin-bottom:3px;color:rgba(255,255,255,.75)}
@media (max-width:760px){.foot{font-size:13.5px}.foot .fgrid{flex-direction:column-reverse;gap:22px}.foot .fcs{width:auto;padding:0 0 18px;border-left:0;border-bottom:1px solid rgba(255,255,255,.14)}}