/* ===== 네임스페이스 격리 ===== */
#lg-app-root * { box-sizing: border-box; }

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

#lg-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;
}
#lg-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;
}

/* ===== Cards ===== */
#lg-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);
}
#lg-app-root .plan-block--last { margin-bottom:0; }
#lg-app-root .plan-left{ display:flex; align-items:center; gap:15px; }
#lg-app-root .icon{ width:40px; height:40px; border-radius:9px; object-fit:contain; background:#f6f7f8; }
#lg-app-root .label{ font-weight:600; font-size:15px; margin-bottom:2px; }
#lg-app-root .sub{ font-size:14px; }
#lg-app-root .desc{ font-size:12px; color:#888; }
#lg-app-root .plan-right{ display:flex; align-items:center; gap:12px; }
#lg-app-root .price{ font-weight:700; font-size:15px; }

/* 가격 표시(취소선/강조) – JS가 주입하는 클래스 */
#lg-app-root .price-col{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; }
#lg-app-root .price-strike{ font-size:12px; color:#999; text-decoration:line-through; }
#lg-app-root .price-strong{ font-size:16px; font-weight:800; color:#18315b; }

/* ===== Section Label ===== */
#lg-app-root .section-label{ font-size:20px; font-weight:900; margin:32px 0 11px 0; color:#223454; letter-spacing:-.5px; }

/* ===== Buttons ===== */
#lg-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; cursor:pointer;
  transition:background .16s;
}
#lg-app-root .chgbtn:hover{ background:#185f45; }

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

#lg-app-root .btn-reset{ all:unset; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }

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

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

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

/* ▶ 사은품 강조 */
#lg-app-root .plan-summary-label.gift,
#lg-app-root .plan-summary-value.gift{
  color:#d92d20 !important; background:none; border:none; padding:0; margin:0; font-weight:900;
}

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

/* ===== Discount Toggle & Detail ===== */
#lg-app-root .summary-row--toggle{
  justify-content: space-between; align-items: center; font-size: 13px; color: #223454;
  padding:12px 14px !important; border:1px solid #eef2f7; border-radius:10px; background:#fafcff; column-gap:10px;
}
#lg-app-root .summary-row--toggle .btn-reset{
  padding:6px 12px; border-radius:8px; background:#fff; border:1px solid #eef2f7; color:#6b7686; gap:6px; margin-right:2px;
}
#lg-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;
}
#lg-app-root .bundle-discount-text,
#lg-app-root .mobile-discount-text{ display:block; text-align:right !important; padding-right:2px; }

#lg-app-root .strong{ font-weight:600; }

/* ===== Responsive ===== */
@media (max-width:1000px){
  #lg-app-root .main-layout{ flex-direction:column; gap:0; }
  #lg-app-root #plan-app, #lg-app-root #plan-summary-side{ max-width:680px; width:100%; margin:0 auto; }
  #lg-app-root #plan-summary-side{ margin-top:28px; }
}
@media (max-width:700px){
  #lg-app-root #plan-app, #lg-app-root #plan-summary-side{ padding:12px 5px; }
  #lg-app-root .plan-block{ flex-direction:row; align-items:center; justify-content:space-between; gap:12px; padding:14px; }
  #lg-app-root .label{ font-size:14px; } 
  #lg-app-root .desc{ font-size:12px; } 
  #lg-app-root .price{ font-size:15px; }
}

/* ===== Mobile Bottom Summary ===== */
#lg-app-root #plan-summary-mobile{ display:none; }
@media (max-width:700px){
  #lg-app-root #plan-summary-side{ display:none !important; }
  #lg-app-root #plan-summary-mobile{
    position:fixed; bottom:0; left:0; width:100%; z-index:999; display:flex; flex-direction:column;
    align-items:stretch; 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;
  }
  #lg-app-root #plan-summary-mobile.collapsed{ transform:translateY(calc(100% - 56px)); }
  #lg-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; 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);
  }
  #lg-app-root .summary-main{ display:flex; flex-direction:column; gap:4px; margin-bottom:12px; max-height:52vh; overflow:auto; }
  #lg-app-root .summary-row{ margin-bottom:5px; }
}

/* ===== Modal ===== */
#lg-app-root #modal-bg{
  display:none; position:fixed; z-index:4000; inset:0; width:100vw; height:100vh; background:rgba(60,60,70,0.13);
}
#lg-app-root #modal-content{
  position:fixed; top:calc(50% + 48px); left:50%; transform:translate(-50%, -50%);
  width:min(480px, calc(100vw - 48px)); max-height:calc(100vh - 160px);
  background:#fff; border-radius:16px; box-shadow:0 6px 28px rgba(0,0,0,0.14);
  overflow:auto; padding:24px 0 12px 0;
}
#lg-app-root .modal-inner{ padding:0 32px; position:relative; }
#lg-app-root #modal-title{ font-size:22px; font-weight:700; margin-bottom:16px; }
#lg-app-root .modal-close{ position:absolute; top:14px; right:18px; font-size:32px; color:#888; }

/* 옵션 카드 (누락분 보강) */
#lg-app-root .option-card{
  border:2px solid #eee; border-radius:11px; display:flex; align-items:center; justify-content:space-between;
  padding:18px; margin-bottom:12px; cursor:pointer; background:#fff; transition:border-color .15s, background .15s;
}
#lg-app-root .option-card.is-selected{ border-color:#246af4; background:#f8fafd; }
#lg-app-root .option-left{ display:flex; align-items:center; gap:14px; }
#lg-app-root .option-icon{ width:38px; height:38px; object-fit:contain; border-radius:8px; background:#f8f8f8; }
#lg-app-root .option-title{ font-size:17px; font-weight:600; }
#lg-app-root .option-desc{ font-size:13px; color:#666; }
#lg-app-root .option-price{ font-size:16px; font-weight:700; }

/* USIM 탭 */
#lg-app-root .usim-tabs{ display:flex; gap:8px; margin-bottom:12px; }
#lg-app-root .usim-tab{ padding:8px 12px; border:1px solid #e4e8ee; border-radius:999px; background:#fff; font-size:13px; cursor:pointer; }
#lg-app-root .usim-tab.active{ background:#f3f7ff; border-color:#cfe0ff; color:#1842a0; }

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

/* ===== Summary Icons (마스크 아이콘) ===== */
#lg-app-root #plan-summary-side .plan-summary-label,
#lg-app-root #plan-summary-mobile .plan-summary-label{ position:relative; padding-left:38px; }
#lg-app-root #plan-summary-side .plan-summary-label::before,
#lg-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;
}
/* wallet */
#lg-app-root #plan-summary-side .summary-row:has(#total-fee-side) .plan-summary-label::before,
#lg-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>");
}
/* smartphone */
#lg-app-root #plan-summary-side .summary-row:has(#mobile-discount-fee-side) .plan-summary-label::before,
#lg-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>");
}
/* tag */
#lg-app-root #plan-summary-side .summary-row:has(#discount-arrow) .plan-summary-label::before,
#lg-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>");
}
/* credit card */
#lg-app-root #plan-summary-side .summary-row:has(#card-discount-fee-side) .plan-summary-label::before,
#lg-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>");
}
/* gift */
#lg-app-root #plan-summary-side .summary-row:has(#gift-fee-side) .plan-summary-label::before,
#lg-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>");
}

/* ===== 신청서 팝업 ===== */
#lg-app-root #order-popup-bg{ display:none; position:fixed; inset:0; z-index:5000; background:rgba(17,24,39,.45); }
#lg-app-root #order-popup{
  position:fixed; left:50%; top:50%; transform:translate(-50%, -50%);
  width:min(1000px, calc(100vw - 24px)); height:min(90vh, 860px);
  background:#fff; border-radius:16px; box-shadow:0 12px 48px rgba(0,0,0,.25); overflow:hidden;
}
#lg-app-root .order-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 14px; border-bottom:1px solid #eef2f7;
}
#lg-app-root .order-head strong{ font-size:15px; color:#223454; }
#lg-app-root .close-x{ font-size:28px; line-height:1; color:#8892a0; }
#lg-app-root #order-frame{ width:100%; height:calc(100% - 48px); border:0; }


/* ===== 가입/설치 유의사항 (복구 전용) ===== */
#lg-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);
}
#lg-app-root details.info-box + .info-box{ margin-top:10px; }

#lg-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;
}
#lg-app-root .info-title::-webkit-details-marker{ display:none; }
#lg-app-root .info-title .caret{
  font-size:16px; line-height:1; color:#6b7280;
  transform:rotate(0deg); transition:transform .18s ease;
}
#lg-app-root details[open] .info-title .caret{ transform:rotate(180deg); }

#lg-app-root .info-body{
  font-size:13px; color:#66748a; line-height:1.6; margin-top:10px;
}

/* 위치별 여백 */
@media (min-width:701px){
  #lg-app-root #plan-summary-side .info-box{ margin-top:12px; }
}
@media (max-width:700px){
  #lg-app-root #plan-summary-mobile .info-box{ margin-top:10px; }
}