/* ========= 스코프 시작: SK 모듈만 스타일 적용 ========= */
#sk-app-root * { box-sizing: border-box; }
#sk-app-root {
  font-family:'Pretendard','Noto Sans KR','Apple SD Gothic Neo',Arial,sans-serif !important;
  letter-spacing:-0.02em; color:#222;
}

/* ===== 레이아웃 ===== */
#sk-app-root .main-layout{
  display:flex; justify-content:center; align-items:flex-start;
  max-width:1200px; margin:40px auto; gap:36px; width:100%;
}
#sk-app-root .summary-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; }

#sk-app-root #plan-app{
  flex:1 1 0; max-width:600px; background:#fff; border-radius:15px;
  box-shadow:0 2px 16px rgba(0,0,0,0.10); padding:34px 20px; margin:0;
}
#sk-app-root #plan-summary-side{
  width:380px; min-width:200px; max-width:380px; background:#fff; border-radius:16px;
  border:1.5px solid #ebeef0; box-shadow:0 6px 24px rgba(60,80,120,0.07);
  padding:28px 26px 22px 26px; margin-top:0; display:block;
}

/* ===== 카드 ===== */
#sk-app-root .plan-block{
  display:flex; align-items:center; justify-content:space-between;
  border:1.5px solid #e4e8ee; border-radius:11px; padding:18px 20px; margin-bottom:12px;
  background:#fff; box-shadow:0 2px 8px rgba(60,80,120,0.03);
}
#sk-app-root .plan-label{ font-size:15px; font-weight:700; color:#223454; margin-bottom:2px; }
#sk-app-root .plan-desc{ font-size:13px; color:#919ca7; }
#sk-app-root .plan-price{ font-size:17px; font-weight:700; color:#18315b; text-align:right; margin-right:5px; }
#sk-app-root .chgbtn{
  min-width:64px; height:38px; padding:0 16px; border-radius:6px; border:none;
  background:#217d5a; color:#fff; font-weight:700; font-size:15px; margin-left:12px; cursor:pointer;
  transition:background .16s;
}
#sk-app-root .chgbtn:hover{ background:#185f45; }
#sk-app-root .section-label{ font-size:20px; font-weight:900; margin:32px 0 11px 0; color:#223454; letter-spacing:-0.5px; }

/* ===== 요약값 ===== */
#sk-app-root #plan-summary-side .plan-summary-label,
#sk-app-root #plan-summary-mobile .plan-summary-label{
  font-size:15px; font-weight:800; color:#2a3d62;
}
#sk-app-root #plan-summary-side .plan-summary-value,
#sk-app-root #plan-summary-mobile .plan-summary-value{
  font-size:18px; font-weight:900; color:#0f2b5a; background:none; border-radius:0;
  padding:0 6px 0 0; display:inline-block; min-width:108px; text-align:right;
  letter-spacing:.01em; vertical-align:middle; font-variant-numeric:tabular-nums; line-height:1.2;
}

/* ▶ 사은품: 라벨/숫자 모두 붉은색 */
#sk-app-root .plan-summary-label.gift,
#sk-app-root .plan-summary-value.gift{
  color:#d92d20 !important; background:none; border:none; padding:0; margin:0; font-weight:900;
}

#sk-app-root .summary-line{ width:100%; height:1px; background:#f1f1f1; margin:14px 0; }

/* ===== 총할인 토글 & 상세 ===== */
#sk-app-root #plan-summary-side .summary-row:has(#discount-arrow),
#sk-app-root #plan-summary-mobile .summary-row:has(.discount-arrow){
  padding:12px 14px !important; border:1px solid #eef2f7; border-radius:10px; background:#fafcff; column-gap:10px;
}
#sk-app-root #plan-summary-side .summary-row button,
#sk-app-root #plan-summary-mobile .summary-row button{
  padding:6px 12px; border-radius:8px; background:#fff; border:1px solid #eef2f7; color:#6b7686; gap:6px; margin-right:2px;
}
#sk-app-root #discount-detail,
#sk-app-root .discount-detail{
  display:none; font-size:13px; color:#66748a !important;
  padding:12px 20px 12px 16px !important; line-height:1.55; text-align:right !important;
  background:#f8fbff; border:1px solid #e6eef9; border-left:3px solid #2b6cf6; border-radius:8px; margin-top:8px;
}
#sk-app-root .bundle-discount-text, #sk-app-root .mobile-discount-text{
  display:block; text-align:right !important; padding-right:2px;
}

/* ===== 배너 버튼 ===== */
#sk-app-root .banner-btns{ display:flex; gap:12px; margin-top:10px; flex-wrap:nowrap; }
#sk-app-root #plan-summary-side .banner-btns{ flex-direction:row; gap:10px; margin-top:22px; }
#sk-app-root .banner-btn{
  flex:1 1 0; min-width:0; height:48px; font-size:15px; font-weight:700; border:none; border-radius:10px; cursor:pointer;
  color:#181600; transition:filter .14s, box-shadow .14s; box-shadow:0 2px 8px rgba(60,80,120,0.08);
  display:flex; align-items:center; justify-content:center;
}
#sk-app-root .btn-kakao{ background:#FEE500; color:#181600; }
#sk-app-root .btn-call{ background:#217d5a; color:#fff; }
#sk-app-root .btn-apply{ background:#246af4; color:#fff; }
#sk-app-root .banner-btn:hover{ filter:brightness(.96); }

/* ===== 상단 선택 요약 바 ===== */
#sk-app-root .top-summary{ position:relative; z-index:1; background:#fff; border-bottom:1px solid #ebeef0; }
#sk-app-root .top-summary-inner{ max-width:1200px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:12px; }
#sk-app-root .top-summary .brand{ display:flex; align-items:center; gap:4px; }
#sk-app-root .top-summary .brand img{ width:28px; height:28px; object-fit:contain; }
#sk-app-root .top-summary .name{ font-weight:800; color:#223454; letter-spacing:-0.02em; }
#sk-app-root .top-summary .chips{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; flex:1 1 0; }
#sk-app-root .top-summary .chip{ padding:6px 10px; border:1px solid #e4e8ee; border-radius:999px; font-size:13px; color:#18315b; background:#f9fbff; }
#sk-app-root .top-summary .price{ display:none !important; }
#sk-app-root .main-layout{ margin-top:8px; }
@media (max-width:700px){
  #sk-app-root .top-summary .name{ display:none; }
  #sk-app-root .top-summary .price{ font-size:14px; }
  #sk-app-root .top-summary-inner{ padding:8px 10px; }
}

/* ===== 반응형 ===== */
@media (max-width:1000px){
  #sk-app-root .main-layout{ flex-direction:column; gap:0; }
  #sk-app-root #plan-app, #sk-app-root #plan-summary-side{ max-width:680px; width:100%; margin:0 auto; }
  #sk-app-root #plan-summary-side{ margin-top:28px; }
}
@media (max-width:700px){
  #sk-app-root #plan-app, #sk-app-root #plan-summary-side{ padding:12px 5px; }
  #sk-app-root .plan-block{ flex-direction:row !important; gap:12px; padding:14px; }
  #sk-app-root .plan-label{ font-size:14px; }
  #sk-app-root .plan-desc{ font-size:12px; }
  #sk-app-root .plan-price{ font-size:15px; margin-right:6px; }
  #sk-app-root .chgbtn{ height:36px; font-size:14px; padding:0 12px; min-width:auto; }
  #sk-app-root #modal-content{ margin:30vw 2vw 0 2vw; }
}

/* ===== 모바일 하단 요약: 기본 숨김(PC 보호) ===== */
#sk-app-root #plan-summary-mobile{ display:none !important; visibility:hidden; height:0; overflow:hidden; }

/* ===== 모바일(<=700px)에서만 배너 활성화 ===== */
@media (max-width:700px){
  #sk-app-root #plan-summary-side{ display:none !important; }
  #sk-app-root #plan-summary-mobile{
    display:flex !important; visibility:visible; height:auto; overflow:visible;
    position:fixed; bottom:0; left:0; width:100%; z-index:999; flex-direction:column;
    align-items:stretch; justify-content:flex-start; margin:0; padding:16px 12px 48px 12px;
    background:#fff; border-top:1.5px solid #ebeef0; box-shadow:0 -4px 24px rgba(60,80,120,0.07);
    transition:transform .3s ease;
  }
  #sk-app-root #plan-summary-mobile.collapsed{ transform:translateY(calc(100% - 56px)); }
  #sk-app-root #plan-summary-mobile .summary-main{ max-height:52vh; overflow:auto; }
  #sk-app-root #toggle-summary-btn{
    position:absolute; top:0; left:50%;
    transform:translate(-50%, calc(-100% + 1.5px));
    background:#fff; border:1.5px solid #ebeef0; border-bottom:0;
    padding:2px 10px; font-size:16px; line-height:1; height:28px;
    border-radius:10px 10px 0 0; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:1000;
    box-shadow:0 -2px 12px rgba(60,80,120,0.06);
  }
}

/* ===== 모달 중앙 정렬 (PC) ===== */
@media (min-width:701px){
  #sk-app-root #modal-bg{ position:fixed !important; inset:0 !important; z-index:4000 !important; padding-top:0 !important; overflow:hidden !important; }
  #sk-app-root #modal-content{
    position:fixed !important; top:calc(50% + 48px) !important; left:50% !important; transform:translate(-50%,-50%) !important;
    margin:0 !important; width:min(480px, calc(100vw - 48px)) !important; max-height:calc(100vh - 96px - 64px) !important; overflow:auto !important; border-radius:16px !important;
  }
}
/* ===== 모바일 모달 ===== */
@media (max-width:700px){
  #sk-app-root #modal-bg{ padding-top:0 !important; overflow:auto !important; }
  #sk-app-root #modal-content{ position:static !important; transform:none !important; margin:30vw 2vw 0 2vw !important; max-height:80vh !important; width:auto !important; }
}

/* ===== PC 스티키 요약 날개 ===== */
@media (min-width:701px){
  #sk-app-root #plan-summary-side{
    position: sticky; top: 90px;
    border:1px solid #e9edf2 !important;
    box-shadow: 0 10px 32px rgba(30,50,90,.08) !important;
    border-radius: 18px !important;
    padding: 22px 20px 20px 20px !important;
  }
  #sk-app-root #plan-summary-side::before{
    content: "요금 요약";
    display:block; font-weight:800; font-size:15px; letter-spacing:.02em; color:#1e3a8a;
    background: linear-gradient(90deg,#e9f0ff, #f2f7ff);
    padding:10px 12px; border-radius: 12px; margin: -4px 0 14px 0; box-shadow: inset 0 0 0 1px #e3ebff;
  }
  #sk-app-root #plan-summary-side .summary-row{
    background:#fafcff; border:1px solid #eef2f7; border-radius:10px; padding:12px 14px; margin-bottom:10px;
  }
  #sk-app-root #plan-summary-side .summary-row:hover{ background:#f7fbff; border-color:#e6eef9; }
}

/* ===== 아이콘 세트 ===== */
#sk-app-root #plan-summary-side .plan-summary-label,
#sk-app-root #plan-summary-mobile .plan-summary-label{ position: relative; padding-left:38px; }
#sk-app-root #plan-summary-side .plan-summary-label::before,
#sk-app-root #plan-summary-mobile .plan-summary-label::before{
  content:""; position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; background:currentColor; -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat; opacity:1;
}
#sk-app-root #plan-summary-side .summary-row:has(#discount-arrow) .btn-reset,
#sk-app-root #plan-summary-mobile .summary-row:has(.discount-arrow) .btn-reset{ padding:6px 10px; gap:6px; }

/* 1) 월요금 합계 — Wallet */
#sk-app-root #plan-summary-side .summary-row:has(#total-fee-side) .plan-summary-label::before,
#sk-app-root #plan-summary-mobile .summary-row:has(#total-fee) .plan-summary-label::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5z'/><path d='M16 12a2 2 0 1 0 0 4h5v-4h-5z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5z'/><path d='M16 12a2 2 0 1 0 0 4h5v-4h-5z'/></svg>");
}
/* 2) 휴대폰 결합시 — Smartphone */
#sk-app-root #plan-summary-side .summary-row:has(#mobile-discount-fee-side) .plan-summary-label::before,
#sk-app-root #plan-summary-mobile .summary-row:has(#mobile-discount-fee) .plan-summary-label::before{
   -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='2' width='12' height='20' rx='2'/><line x1='12' y1='18' x2='12' y2='18'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='2' width='12' height='20' rx='2'/><line x1='12' y1='18' x2='12' y2='18'/></svg>");
}
/* 3) 총 할인금액 — Tag */
#sk-app-root #plan-summary-side .summary-row:has(#discount-arrow) .plan-summary-label::before,
#sk-app-root #plan-summary-mobile .summary-row:has(.discount-arrow) .plan-summary-label::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.59 13.41 11 3H4v7l9.59 9.59a2 2 0 0 0 2.82 0l4.18-4.18a2 2 0 0 0 0-2.82z'/><path d='M7 7h.01'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.59 13.41 11 3H4v7l9.59 9.59a2 2 0 0 0 2.82 0l4.18-4.18a2 2 0 0 0 0-2.82z'/><path d='M7 7h.01'/></svg>");
}
/* 4) 제휴카드 할인시 — Credit Card */
#sk-app-root #plan-summary-side .summary-row:has(#card-discount-fee-side) .plan-summary-label::before,
#sk-app-root #plan-summary-mobile .summary-row:has(#card-discount-fee) .plan-summary-label::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><line x1='2' y1='10' x2='22' y2='10'/><rect x='6' y='14' width='4' height='2' rx='0.3'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><line x1='2' y1='10' x2='22' y2='10'/><rect x='6' y='14' width='4' height='2' rx='0.3'/></svg>");
}
/* 5) 사은품 — Gift Box */
#sk-app-root #plan-summary-side .summary-row:has(#gift-fee-side) .plan-summary-label::before,
#sk-app-root #plan-summary-mobile .summary-row:has(#gift-fee) .plan-summary-label::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='8' width='18' height='13' rx='2'/><path d='M12 8V21'/><path d='M3 12h18'/><path d='M12 8c-2.5 0-3.5-1-3.5-2.5S10 3 12 4c2-1 3.5.5 3.5 1.5S14.5 8 12 8z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='8' width='18' height='13' rx='2'/><path d='M12 8V21'/><path d='M3 12h18'/><path d='M12 8c-2.5 0-3.5-1-3.5-2.5S10 3 12 4c2-1 3.5.5 3.5 1.5S14.5 8 12 8z'/></svg>");
}

/* ===== 안내/설명 섹션 ===== */
#sk-app-root details.info-box{
  border:1px solid #e9edf2; border-radius:12px; background:#fbfdff;
  padding:10px 12px; box-shadow:0 4px 16px rgba(20,40,80,.05);
}
#sk-app-root details.info-box + .info-box{ margin-top:10px; }
#sk-app-root .info-title{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-weight:800; font-size:14px; color:#223454;
}
#sk-app-root .info-title::-webkit-details-marker{ display:none; }
#sk-app-root .info-title .caret{ font-size:16px; line-height:1; color:#6b7280; transform:rotate(0deg); transition:transform .18s ease; }
#sk-app-root details[open] .info-title .caret{ transform:rotate(180deg); }
#sk-app-root .info-body{ font-size:13px; color:#66748a; line-height:1.6; margin-top:10px; }
@media (min-width:701px){ #sk-app-root #plan-summary-side .info-box{ margin-top:12px; } }
@media (max-width:700px){ #sk-app-root #plan-summary-mobile .info-box{ margin-top:10px; } }
