/* ================== Base / Layout ================== */
body {
  font-family: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', Arial, sans-serif !important;
  letter-spacing: -0.02em; color: #222;
  background: transparent; margin: 0; padding: 0;
}
.main-layout { display:flex; justify-content:center; align-items:flex-start; max-width:1200px; margin:40px auto; gap:36px; width:100%; box-sizing:border-box; }
.summary-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; }

/* ================== Panels / Cards ================== */
#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; box-sizing:border-box; }
#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; align-items:stretch; box-sizing:border-box; margin-top:0; display:block; }

.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); }
.plan-label{font-size:15px; font-weight:700; color:#223454; margin-bottom:2px;}
.plan-desc{font-size:13px; color:#919ca7;}
.plan-price{font-size:17px; font-weight:700; color:#18315b; text-align:right; margin-right:5px;}
.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; }
.chgbtn:hover{ background:#185f45; }

.section-label{ font-size:20px; font-weight:900; margin:32px 0 11px 0; color:#223454; letter-spacing:-0.5px; }

/* ================== Summary Values ================== */
#plan-summary-side .plan-summary-label,
#plan-summary-mobile .plan-summary-label{ font-size:15px; font-weight:800; color:#2a3d62; }

#plan-summary-side .plan-summary-value,
#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;
}

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

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

/* ================== Discount Toggle & Detail ================== */
#plan-summary-side .summary-row:has(#discount-arrow),
#plan-summary-mobile .summary-row:has(.discount-arrow){
  padding:12px 14px !important; border:1px solid #eef2f7; border-radius:10px; background:#fafcff; column-gap:10px;
}
#plan-summary-side .summary-row button,
#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;
}
#discount-detail,
.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;
}
.bundle-discount-text, .mobile-discount-text{ display:block; text-align:right !important; padding-right:2px; }

/* ================== Buttons ================== */
#plan-summary-side .banner-btns{ display:flex; flex-direction:row; gap:10px; margin-top:22px; }
.banner-btns{ display:flex; gap:12px; margin-top:10px; flex-wrap:nowrap; }
.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:box-shadow .14s, filter .14s; box-shadow:0 2px 8px rgba(60,80,120,0.08); display:flex; align-items:center; justify-content:center; }
.btn-kakao{ background:#FEE500; color:#181600; }
.btn-call{ background:#217d5a; color:#fff; }
.btn-apply{ background:#246af4; color:#fff; }
.banner-btn:hover{ filter:brightness(.96); }

/* ================== Top Summary ================== */
.top-summary{ position:relative; top:auto; z-index:1; background:#fff; border-bottom:1px solid #ebeef0; }
.top-summary-inner{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px;}
.top-summary .brand{ display:flex; align-items:center; gap:4px; min-width:auto; }
.top-summary .brand .name{ font-weight:800; color:#223454; letter-spacing:-0.02em; }
.top-summary .chips{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; flex:1 1 0; }
.top-summary .chip{ padding:6px 10px; border:1px solid #e4e8ee; border-radius:999px; font-size:13px; color:#18315b; background:#f9fbff; }
.main-layout{ margin-top:8px; }

/* ================== Responsive ================== */
#plan-summary-mobile{ display:none; }

@media (max-width: 1000px){
  .main-layout { flex-direction: column; gap: 0; }
  #plan-app, #plan-summary-side { max-width: 680px; width: 100%; margin: 0 auto; }
  #plan-summary-side { margin-top: 28px; }
}
@media (max-width: 700px) {
  #plan-app, #plan-summary-side { padding: 12px 5px; }
  .plan-block { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; }
  .plan-label{ font-size:14px; } .plan-desc{ font-size:12px; } .plan-price{ font-size:15px; margin-right:6px; }
  .chgbtn{ height:36px; font-size:14px; padding:0 12px; min-width:auto; }
  #modal-content { margin: 30vw 2vw 0 2vw; }
}
@media (max-width:700px){
  #plan-summary-side { display:none !important; }
  #plan-summary-mobile{
    position:fixed; bottom:0; left:0; width:100%; z-index:999; display:flex !important; 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); box-sizing:border-box; transition:transform .3s ease;
  }
  #plan-summary-mobile.collapsed{ transform: translateY(calc(100% - 56px)); }
  #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; cursor:pointer; border-radius:10px 10px 0 0; text-align:center;
    display:flex; align-items:center; justify-content:center; height:28px; box-shadow:0 -2px 12px rgba(60,80,120,0.06);
  }
  .summary-main{ display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
  .summary-row{ margin-bottom:5px; }
  #plan-summary-mobile .summary-main{ max-height:52vh; overflow:auto; }
}

/* ================== Modal Position ================== */
@media (min-width:701px){
  #modal-bg{ position:fixed !important; inset:0 !important; z-index:4000 !important; padding-top:0 !important; overflow:hidden !important; }
  #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){
  #modal-bg{ padding-top:0 !important; overflow:auto !important; }
  #modal-content{ position:static !important; transform:none !important; margin:30vw 2vw 0 2vw !important; max-height:80vh !important; width:auto !important; }
}

/* ================== Wing (PC Sticky Summary) ================== */
@media (min-width:701px){
  #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;
  }
  #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;
  }
  #plan-summary-side .summary-row{
    background:#fafcff; border:1px solid #eef2f7; border-radius:10px; padding:12px 14px; margin-bottom:10px;
  }
  #plan-summary-side .summary-row:hover{ background:#f7fbff; border-color:#e6eef9; }
}

/* ================== Icon Set ================== */
#plan-summary-side .plan-summary-label,
#plan-summary-mobile .plan-summary-label{ padding-left:38px; position:relative; }

#plan-summary-side .plan-summary-label::before,
#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;
}

/* 1) 월요금 합계 — Wallet */
#plan-summary-side .summary-row:has(#total-fee-side) .plan-summary-label::before,
#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>");
}

/* 4) 제휴카드 할인시 — Credit Card */
#plan-summary-side .summary-row:has(#card-discount-fee-side) .plan-summary-label::before,
#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 */
#plan-summary-side .summary-row:has(#gift-fee-side) .plan-summary-label::before,
#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>");
}

/* ================== 안내/설명 섹션(공통 스타일) ================== */
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);
}
details.info-box + .info-box{ margin-top:10px; }
.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;
}
.info-title::-webkit-details-marker{ display:none; }
.info-title .caret{
  font-size:16px; line-height:1; color:#6b7280;
  transform:rotate(0deg); transition:transform .18s ease;
}
details[open] .info-title .caret{ transform:rotate(180deg); }
.info-body{
  font-size:13px; color:#66748a; line-height:1.6; margin-top:10px;
}
@media (min-width:701px){
  #plan-summary-side .info-box{ margin-top:12px; }
}
@media (max-width:700px){
  #plan-summary-mobile .info-box{ margin-top:10px; }
}