/* ================== KT 모듈 스코프: 전역 충돌 방지 ================== */
#kt-app-root * { box-sizing: border-box; }
#kt-app-root {
  font-family:'Pretendard','Noto Sans KR','Apple SD Gothic Neo',Arial,sans-serif !important;
  letter-spacing:-0.02em; color:#222;
}
#kt-app-root button,
#kt-app-root .btn-reset { all: unset; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }

/* ================== 레이아웃 / 기본 ================== */
#kt-app-root body { margin:0; padding:0; }
#kt-app-root .main-layout{
  display:flex; justify-content:center; align-items:flex-start;
  max-width:1200px; margin:40px auto; gap:36px; width:100%;
}
#kt-app-root .summary-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; }
#kt-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;
}
#kt-app-root #plan-summary-side{
  width:380px; min-width:200px; max-width:420px; 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; display:block;
}

/* ================== 카드 ================== */
#kt-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);
}
#kt-app-root .plan-label{ font-size:15px; font-weight:700; color:#223454; margin-bottom:2px; }
#kt-app-root .plan-desc{ font-size:13px; color:#919ca7; }
#kt-app-root .plan-price{ font-size:17px; font-weight:700; color:#18315b; text-align:right; margin-right:5px; }
#kt-app-root .chgbtn{
  min-width:64px; height:38px; padding:0 16px; border-radius:6px; background:#217d5a; color:#fff;
  font-weight:700; font-size:15px; margin-left:12px; cursor:pointer; transition:background .16s;
}
#kt-app-root .chgbtn:hover{ background:#185f45; }
#kt-app-root .section-label{ font-size:20px; font-weight:900; margin:32px 0 11px 0; color:#223454; letter-spacing:-0.5px; }

/* ================== 요약값 ================== */
#kt-app-root #plan-summary-side .plan-summary-label,
#kt-app-root #plan-summary-mobile .plan-summary-label{
  font-size:15px; font-weight:800; color:#2a3d62;
}
#kt-app-root #plan-summary-side .plan-summary-value,
#kt-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;
}
#kt-app-root .plan-summary-label.gift,
#kt-app-root .plan-summary-value.gift{
  color:#d92d20 !important; background:none; border:none; padding:0;
}

/* 주문/상담 팝업 전용 리셋 */
#order-popup-bg,
#order-popup-bg *{
  font-family:'Pretendard','Noto Sans KR','Apple SD Gothic Neo',Arial,sans-serif;
}
#order-popup-bg .btn-reset{
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#order-close-btn{
  width: 32px;
  height: 32px;
  font-size: 28px;
  line-height: 1;
  color: #8892a0;
  border-radius: 8px;
}
#order-close-btn:hover{ background:#f4f6f9; color:#667085; }
#order-close-btn:focus-visible{ outline:2px solid #2a62f1; outline-offset:2px; }

/* 구분선 */
#kt-app-root .summary-line{ width:100%; height:0; border-top:1px dashed #e6eaf0; background:transparent; margin:12px 0; }

/* ================== 할인 토글 행 / 상세 박스 ================== */
#kt-app-root #plan-summary-side .summary-row:has(#discount-arrow),
#kt-app-root #plan-summary-mobile .summary-row:has(.discount-arrow){
  padding:10px 14px !important;
  border:1px solid #eef2f7; border-radius:10px; background:#fafcff;
  column-gap:10px;
}
#kt-app-root #plan-summary-side .summary-row button,
#kt-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;
}
#kt-app-root #discount-detail,
#kt-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;
}
#kt-app-root .bundle-discount-text,
#kt-app-root .mobile-discount-text{
  display:block; text-align:right !important; padding-right:2px;
}

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

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

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

/* ================== 모바일 하단 요약(<=700px만 노출) ================== */
#kt-app-root #plan-summary-mobile{ display:none; }

@media (max-width:700px){
  #kt-app-root #plan-summary-side{ display:none !important; }

  #kt-app-root #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:12px 2px 40px 2px;
    background:#fff; border-top:1.5px solid #ebeef0;
    box-shadow:0 -3px 18px rgba(60,80,120,0.06);
    box-sizing:border-box; transition:transform .3s ease;
  }

  #kt-app-root #plan-summary-mobile.collapsed{
    transform: translateY(calc(100% - 48px));
  }

  #kt-app-root #plan-summary-mobile .summary-main{
    max-height:48vh; overflow:auto;
    gap:3px;
    margin-bottom:10px;
  }

  /* --- 기본 행 --- */
  #kt-app-root #plan-summary-mobile .summary-row{
    margin-bottom:4px;
    padding:8px 10px;
  }

  /* --- 할인 토글 행 --- */
  #kt-app-root #plan-summary-mobile .summary-row:has(.discount-arrow){
    padding:8px 10px !important;
    column-gap:6px;
    border:1px solid #eef2f7;
    border-radius:8px;
    background:#fafcff;
  }

  #kt-app-root #plan-summary-mobile .summary-row:has(.discount-arrow) .btn-reset{
    padding:3px 8px;
    border-radius:6px;
    border:1px solid #eef2f7;
  }

  #kt-app-root #plan-summary-mobile .discount-detail{
    padding:8px 12px !important;
    margin-top:5px;
    border-width:1px;
    border-left-width:3px;
  }

  /* --- 🎯 특정 4개 행만 높이 간격 압축 --- */
  #kt-app-root #plan-summary-mobile .summary-row:has(#total-fee),
  #kt-app-root #plan-summary-mobile .summary-row:has(#mobile-discount-fee),
  #kt-app-root #plan-summary-mobile .summary-row:has(#card-discount-fee),
  #kt-app-root #plan-summary-mobile .summary-row:has(#gift-fee){
    margin-bottom:2px !important;   /* 4px → 2px */
    padding-top:6px !important;     /* 8px → 6px */
    padding-bottom:6px !important;  /* 8px → 6px */
  }
}


  /* --- 텍스트/아이콘 미세 조정 --- */
  #kt-app-root #plan-summary-mobile .plan-summary-label{ font-size:14px; } /* 15 → 14 */
  #kt-app-root #plan-summary-mobile .plan-summary-value{
    font-size:17px;                       /* 18 → 17 */
    min-width:96px;                       /* 유지(숫자 열 폭) */
    padding-right:4px;                    /* 6 → 4 */
  }
  #kt-app-root #plan-summary-mobile .summary-row .plan-summary-label{
    padding-left:34px;                    /* 38 → 34 */
  }
  #kt-app-root #plan-summary-mobile .summary-row .plan-summary-label::before{
    left:8px; width:20px; height:20px;    /* 22 → 20 */
    opacity:.95;
  }

  /* --- 접힘 탭 버튼 --- */
  #kt-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 8px; font-size:16px; line-height:1; height:26px;  /* 28 → 26 */
    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);
  }

  /* --- 배너 버튼 체감 높이 완화 --- */
  #kt-app-root .banner-btns{ gap:10px; }               /* 12 → 10 */
  #kt-app-root .banner-btn{
    height:46px;                                       /* 48 → 46 */
    box-shadow:0 2px 6px rgba(60,80,120,0.06);         /* 0 2px 8px → 6px */
  }
}

/* ================== 모달 정렬 ================== */
@media (min-width:701px){
  #kt-app-root #modal-bg{ position:fixed !important; inset:0 !important; z-index:4000 !important; padding-top:0 !important; overflow:hidden !important; }
  #kt-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){
  #kt-app-root #modal-bg{ padding-top:0 !important; overflow:auto !important; }
  #kt-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){
  #kt-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;
  }
  #kt-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;
  }
  #kt-app-root #plan-summary-side .summary-row{
    background:#fafcff; border:1px solid #eef2f7; border-radius:10px; padding:10px 12px; margin-bottom:10px;
  }
  #kt-app-root #plan-summary-side .summary-row:hover{
    background:#f7fbff; border-color:#e6eef9;
  }
  #kt-app-root #plan-summary-side .summary-line{
    height:0; border-top:1px dashed #e6eaf0; background:transparent; margin:10px 0;
  }
  #kt-app-root #plan-summary-side .plan-summary-label{ color:#2a3d62; font-weight:800; }
  #kt-app-root #plan-summary-side .plan-summary-value{
    color:#0f2b5a; font-weight:900; font-variant-numeric: tabular-nums; letter-spacing:.01em; min-width:auto; font-size:18px;
  }
  #kt-app-root #plan-summary-side .summary-row:first-of-type .plan-summary-value{ font-size:18px; }
  #kt-app-root #plan-summary-side .banner-btns{
    display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:16px;
  }
  #kt-app-root #plan-summary-side .banner-btn{
    height:46px; border-radius:12px;
    box-shadow: 0 6px 18px rgba(20,40,80,.08);
    transform: translateY(0);
  }
  #kt-app-root #plan-summary-side .banner-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(20,40,80,.12);
    filter: brightness(.98);
  }
  #kt-app-root #plan-summary-side .btn-kakao{ box-shadow: 0 6px 16px rgba(248,220,0,.25); }
  #kt-app-root #plan-summary-side .btn-call { background:#1f7b57; }
  #kt-app-root #plan-summary-side .btn-apply{ background:#2a62f1; }
}



/* ================== 요금 요약 행 아이콘 + 간격 개선 ================== */
#kt-app-root #plan-summary-side .summary-row .plan-summary-label,
#kt-app-root #plan-summary-mobile .summary-row .plan-summary-label{
  position: relative;
  padding-left: 38px;
}
#kt-app-root #plan-summary-side .summary-row .plan-summary-label::before,
#kt-app-root #plan-summary-mobile .summary-row .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;
}
#kt-app-root #plan-summary-side .summary-row{ padding:12px 14px; }
#kt-app-root #plan-summary-mobile .summary-row{ padding:12px 12px; }
#kt-app-root #plan-summary-side .summary-row:has(#discount-arrow) .btn-reset,
#kt-app-root #plan-summary-mobile .summary-row:has(.discount-arrow) .btn-reset{
  padding:6px 10px;
  gap:6px;
}

/* 1) 월요금 합계 — Wallet */
#kt-app-root #plan-summary-side .summary-row:has(#total-fee-side) .plan-summary-label::before,
#kt-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 */
#kt-app-root #plan-summary-side .summary-row:has(#mobile-discount-fee-side) .plan-summary-label::before,
#kt-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) 총 할인금액 — Price Tag */
#kt-app-root #plan-summary-side .summary-row:has(#discount-arrow) .plan-summary-label::before,
#kt-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 */
#kt-app-root #plan-summary-side .summary-row:has(#card-discount-fee-side) .plan-summary-label::before,
#kt-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 */
#kt-app-root #plan-summary-side .summary-row:has(#gift-fee-side) .plan-summary-label::before,
#kt-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>");
}

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