:root{
  --bg:#f3f4f6;
  --section:#ffffff;
  --card:#f9fafb;

  --line:rgba(0,0,0,.08);
  --line-strong:rgba(0,0,0,.18);

  --text:#111827;
  --muted:#6b7280;
  --accent:#4f46e5;

  --radius:16px;
  --h-btn:64px;
  --h-card:108px;

  --shadow:0 8px 24px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family: system-ui,-apple-system,"Noto Sans KR",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  padding-bottom:140px;
}

/* =====================
   layout
===================== */
.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:24px 16px 0;
}

/* =====================
   header
===================== */
.header{margin-bottom:20px}
.title{margin:0;font-size:22px}
.subtitle{margin-top:6px;font-size:13px;color:var(--muted)}

/* =====================
   section
===================== */
.section{
  background:var(--section);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  margin-bottom:16px;
  box-shadow:var(--shadow);
}

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
  overflow: visible;
}

.section h2{margin:0;font-size:15px}

/* =====================
   1. 통신사
===================== */
.hscroll{
  display:flex;
  gap:12px;
  overflow:auto;
  padding-bottom:4px;
}

.logo-btn{
  height:var(--h-btn);
  min-width:180px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--card);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  transition:.2s;
}

.logo-btn img{max-height:26px}
.logo-btn .small{font-size:11px;color:var(--muted)}

.logo-btn:hover{border-color:var(--line-strong)}
.logo-btn.selected{
  border-color:var(--accent);
  background:#eef2ff;
  box-shadow:0 0 0 2px rgba(79,70,229,.25);
}

/* =====================
   2. 인터넷 속도
===================== */
.segmented{display:flex;gap:12px}

.chip{
  height:var(--h-btn);
  flex:1;
  border-radius:6px;
  border:1px solid var(--line);
  background:var(--card);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  cursor:pointer;
  transition:.2s;
}

.chip:hover{border-color:var(--line-strong)}
.chip.selected{
  border-color:var(--accent);
  background:#eef2ff;
  box-shadow:0 0 0 2px rgba(79,70,229,.25);
}

.chip.disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* =====================
   TV 옵션
===================== */
.tv-toggle{
  margin-top:12px;
  padding:12px;
  border-radius:10px;
  border:1px dashed var(--line-strong);
  background:#fff;
}

.check{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  cursor:pointer;
}

.check input{width:18px;height:18px}

.check.wifi .check-text::before{content:"📶 "}

.hint{
  margin-top:10px;
  font-size:11px;
  color:#9ca3af;
}



/* =====================
   3. TV 상품
===================== */
#tvSection[aria-hidden="true"]{display:none}

.tv-wrap{
  display:flex;
  gap:16px;
  overflow:auto;
}

.tv-card{
  width:360px;
  height:var(--h-card);
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--card);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
}

.tv-card.selected{
  border-color:var(--accent);
  background:#eef2ff;
}

.tv-title{font-size:14px;font-weight:900}
.tv-meta,.tv-desc{font-size:12px;color:var(--muted)}

/* =====================
   4. 모바일 결합
===================== */
.mobile-wrap{display:flex;gap:16px}

.mobile-card{
  width:360px;
  height:96px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--card);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
}

.mobile-card.selected{
  border-color:var(--accent);
  background:#eef2ff;
}

/* =====================
   하단 sticky
===================== */
.sticky{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  background:#fff;
  border-top:1px solid var(--line);
  z-index:99999; /* ← 이 줄 추가 또는 수정 */
}

.cta,
.cta-btn{
  pointer-events:auto;
  cursor:pointer;
}

.sticky-inner{
  max-width:1200px;
  margin:0 auto;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:32px;
}

.summary-main{
  display:flex;
  gap:60px;
}

.label{
  font-size:13px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px;
}

.value{
  font-size:22px;
  font-weight:900;
  color:#111827;
}

/* 상세보기 */
.detail-link{
  font-size:12px;
  font-weight:700;
  color:var(--accent);
  position:relative;
  cursor:pointer;
}

.detail-link:hover{text-decoration:underline}

/* 말풍선 */
.detail-link .bubble{
  position:absolute;
  bottom:140%;
   white-space:nowrap;
  left:50%;
  transform:translateX(-50%);
  background:#111827;
  color:#fff;
  font-size:11px;
  padding:6px 8px;
  border-radius:8px;
  opacity:0;
  pointer-events:none;
  transition:.2s;
}

.detail-link:hover .bubble{opacity:1}

/* CTA */
.cta{display:flex;gap:10px}

.cta-btn{
  height:48px;
  padding:0 18px;
  border-radius:16px;
  font-weight:900;
   font-size: 17px;
  border:none;
}

.cta-btn.primary{
  background:var(--accent);
  color:#fff;
}

/* 🔥 sticky 때문에 푸터 안 가려지게 */
.sticky-footer-spacer {
  height: 100px; /* sticky 실제 높이 */
}

/* =====================
   mobile
===================== */
@media (max-width:640px){
  body{padding-bottom:200px}

  .sticky-inner{
    flex-direction:column;
    gap:16px;
  }

  .summary-main{
    width:100%;
    justify-content:space-between;
  }

  .cta{width:100%}
  .cta-btn{flex:1}
}

@media (max-width:640px){
  .sticky-footer-spacer {
    height: 150px;
  }
}


/* =====================
   신청 모달
===================== */
.modal{
  position: fixed;
  inset: 0;
  z-index: 100000;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* ⭐ hidden 속성 복구 (이게 핵심) */
.modal[hidden]{
  display: none !important;
}

.modal-dim{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}

.modal-box{
  position: relative;
  z-index: 100001;

  width: 92%;
  max-width: 960px;
  height: 90vh;

  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}

#applyFrame{
  width: 100%;
  height: 100%;
  border: none;
}

.modal-close{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  z-index: 100002;
}


/* =========================
   주문 신청 모달 (index 전용)
========================= */

.order-modal{
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-modal[hidden]{
  display: none !important;
}

.order-modal-dim{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.order-modal-box{
  position: relative;
  z-index: 1;
  width: 92%;
  max-width: 960px;
  height: 90vh;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}

.order-modal-box iframe{
  width: 100%;
  height: 100%;
  border: none;
}

.order-modal-close{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  z-index: 2;
}



.carrier-guide,
.samsung-gift-section,
.review-section{
  max-width:1200px;
  margin:0 auto 16px;
}

/* =====================
   통신사 스크롤 화살표
===================== */
.nav-arrows{
  display:flex;
  gap:6px;
  flex-shrink:0;
}

.arrow{
  all: unset;                 /* 🔥 핵심: 기본 button 스타일 제거 */
  width:32px;
  height:32px;
  border-radius:8px;
  border:1px solid var(--line);
  background:#fff;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:18px;
  font-weight:900;
  line-height:1;
  font-family: system-ui, -apple-system, Arial, sans-serif;

  cursor:pointer;
}

.arrow:hover{
  background:#f9fafb;
  border-color:var(--line-strong);
}



/* ===============================
   상담신청 버튼 : 테두리 확산형 글로우
=============================== */

/* 스케일 + 테두리 빛 */
@keyframes ctaGlow {
  0% {
    transform: scale(1);
    box-shadow:
      0 0 0 rgba(79,70,229,0),
      0 0 0 rgba(79,70,229,0);
  }

  10% {
    transform: scale(1.045);
    box-shadow:
      0 0 0 0 rgba(79,70,229,.35),
      0 0 22px 6px rgba(79,70,229,.25);
  }

  22% {
    transform: scale(1);
    box-shadow:
      0 0 0 6px rgba(79,70,229,.18),
      0 0 36px 14px rgba(79,70,229,.12);
  }

  38% {
    transform: scale(1);
    box-shadow:
      0 0 0 14px rgba(79,70,229,0),
      0 0 56px 26px rgba(79,70,229,0);
  }

  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 rgba(79,70,229,0),
      0 0 0 rgba(79,70,229,0);
  }
}

#orderConsultBtn{
  animation: ctaGlow 4.8s cubic-bezier(.25,.6,.35,1) infinite;
  position: relative;
  will-change: transform, box-shadow;
}