/* ========== 공통 스코프(이 페이지 전용) ========== */
#skylife-root * { box-sizing: border-box; }
#skylife-root {
  font-family:'Pretendard','Noto Sans KR','Apple SD Gothic Neo',Arial,sans-serif !important;
  letter-spacing:-0.02em; color:#222;
}

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

/* 본문 카드 */
#skylife-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;
}
#skylife-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);
}
#skylife-root .plan-label{ font-size:15px; font-weight:700; color:#223454; margin-bottom:2px; }
#skylife-root .plan-desc{ font-size:13px; color:#919ca7; }
#skylife-root .plan-price{ font-size:17px; font-weight:700; color:#18315b; text-align:right; margin-right:5px; }

#skylife-root .chgbtn{
  min-width:64px; height:38px; padding:0 16px; border-radius:8px; border:none;
  background:#217d5a; color:#fff; font-weight:700; font-size:15px; margin-left:12px; cursor:pointer;
  transition:background .16s, transform .14s, box-shadow .14s;
}
#skylife-root .chgbtn:hover{ background:#185f45; transform:translateY(-1px); box-shadow:0 4px 12px rgba(33,125,90,.25); }

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

/* ================== 우측 요약(PC 날개) ================== */
#skylife-root #plan-summary-side{
  position:sticky; top:90px;
  width:380px; min-width:200px; max-width:380px;
  background:#fff; border-radius:18px; border:1px solid #e9edf2;
  box-shadow:0 10px 32px rgba(30,50,90,.08);
  padding:22px 20px 20px 20px; display:block;
}
#skylife-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;
}
#skylife-root #plan-summary-side .summary-row{
  background:#fafcff; border:1px solid #eef2f7; border-radius:12px;
  padding:12px 14px; margin-bottom:10px; transition:border-color .14s, background .14s;
}
#skylife-root #plan-summary-side .summary-row:hover{
  background:#f7fbff; border-color:#e6eef9;
}

/* 값/라벨 타이포(숫자 탭룰라) */
#skylife-root #plan-summary-side .plan-summary-label,
#skylife-root #plan-summary-mobile .plan-summary-label{
  font-size:15px; font-weight:800; color:#2a3d62;
}
#skylife-root #plan-summary-side .plan-summary-value,
#skylife-root #plan-summary-mobile .plan-summary-value{
  font-size:18px; font-weight:900; color:#0f2b5a; min-width:120px; text-align:right;
  font-variant-numeric:tabular-nums; letter-spacing:.01em; line-height:1.25; padding-right:6px;
}

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

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

/* 총할인 토글 행 */
#skylife-root #plan-summary-side .summary-row:has(#discount-arrow),
#skylife-root #plan-summary-mobile .summary-row:has(.discount-arrow){
  padding:10px 14px !important;
  border:1px solid #eef2f7; border-radius:12px; background:#fafcff; column-gap:10px;
}
#skylife-root #plan-summary-side .summary-row button,
#skylife-root #plan-summary-mobile .summary-row button{
  padding:6px 12px; border-radius:10px; background:#fff; border:1px solid #eef2f7;
  color:#6b7686; gap:6px; font-weight:700;
}

/* 총할인 상세 박스 */
#skylife-root #discount-detail,
#skylife-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:10px; margin-top:8px;
}
#skylife-root .bundle-discount-text,
#skylife-root .mobile-discount-text{
  display:block; text-align:right !important; padding-right:2px;
}

/* ================== 배너 버튼 ================== */
#skylife-root .banner-btns{ display:flex; gap:10px; margin-top:16px; }
#skylife-root .banner-btn{
  flex:1 1 0; min-width:0; height:46px; font-size:15px; font-weight:700; border:none; border-radius:12px; cursor:pointer;
  color:#181600; transition:filter .14s, box-shadow .14s, transform .14s; box-shadow:0 6px 18px rgba(20,40,80,.08);
  display:flex; align-items:center; justify-content:center;
}
#skylife-root .banner-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(20,40,80,.12); filter:brightness(.98); }
#skylife-root .btn-kakao{ background:#FEE500; color:#181600; box-shadow:0 6px 16px rgba(248,220,0,.25); }
#skylife-root .btn-call { background:#1f7b57; color:#fff; }
#skylife-root .btn-apply{ background:#2a62f1; color:#fff; }

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

/* ================== 요약 행 아이콘 ================== */
#skylife-root #plan-summary-side .plan-summary-label,
#skylife-root #plan-summary-mobile .plan-summary-label{
  position:relative; padding-left:38px;
}
#skylife-root #plan-summary-side .plan-summary-label::before,
#skylife-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 */
#skylife-root #plan-summary-side .summary-row:has(#total-fee-side) .plan-summary-label::before,
#skylife-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 */
#skylife-root #plan-summary-side .summary-row:has(#mobile-discount-fee-side) .plan-summary-label::before,
#skylife-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 */
#skylife-root #plan-summary-side .summary-row:has(#discount-arrow) .plan-summary-label::before,
#skylife-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 */
#skylife-root #plan-summary-side .summary-row:has(#card-discount-fee-side) .plan-summary-label::before,
#skylife-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' y='10' x2='22' y2='10'/><rect x='6' y='14' width='4' height='2' rx='.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' y='10' x2='22' y2='10'/><rect x='6' y='14' width='4' height='2' rx='.3'/></svg>");
}
/* Gift */
#skylife-root #plan-summary-side .summary-row:has(#gift-fee-side) .plan-summary-label::before,
#skylife-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>");
}

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

/* ================== 모바일 하단 요약 배너 ================== */
#plan-summary-mobile{ display:none !important; }
#skylife-root #plan-summary-mobile{ display:none !important; }

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

  #plan-summary-mobile, #skylife-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: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,
  #skylife-root #plan-summary-mobile.collapsed{
    transform: translateY(calc(100% - 56px));
  }
  #toggle-summary-btn, #skylife-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;
    cursor:pointer; border-radius:10px 10px 0 0;
    display:flex; align-items:center; justify-content:center;
    z-index:1000; box-shadow:0 -2px 12px rgba(60,80,120,0.06);
  }
  #skylife-root #plan-summary-mobile .summary-main{ max-height:52vh; overflow:auto; }
}

/* 버튼/유의사항 간격 */
#skylife-root #plan-summary-side .banner-btns { margin-bottom:14px; }
#skylife-root #plan-summary-side .banner-btns + .info-box { margin-top:6px; }
#skylife-root #plan-summary-mobile .banner-btns { margin-bottom:14px; }
#skylife-root #plan-summary-mobile .banner-btns + details.info-box { margin-top:6px; }

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

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

/* ================== 체크박스 + 형광펜 텍스트 ================== */
#skylife-root label:has(#rate30){
  display:inline-flex; align-items:center; gap:6px;
  margin:0; padding:0; line-height:1;
}
#skylife-root #rate30{
  width:18px; height:18px; accent-color:#ff5722; cursor:pointer; margin:0;
  vertical-align:middle; transform:translateY(0.5px);
}
#skylife-root .rate30-text,
#skylife-root #rate30 + span{
  display:inline-block; font-size:13px; font-weight:700; color:#223454; cursor:pointer;
  white-space:nowrap; line-height:1.1;
  background:linear-gradient(transparent 55%, rgba(255,230,0,0.85) 0);
  padding:0 2px; box-decoration-break:clone; -webkit-box-decoration-break:clone;
}