/*
  KT 공식 대리점 홈 이미지 에셋 연결 CSS (강화 버전)
  - 현재 preview-mobile.html / mobile-app.js의 실제 구조에 맞춤
  - HTML / JS 일체 수정 없이 CSS background-image 만으로 자산 노출
  - 기존 main.css 다음에 로드하면 됨
*/

:root {
  --kt-red: #ed1b2f;
  --kt-red-soft: #fff1f3;
}

/* =============================================================
   1. 헤더 로고 — 2026-05-27 갱신: <img src="public/images/logo/kt-directshop.svg">로 통일
   ============================================================= */
.header .logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 0;        /* 안에 텍스트가 남아 있더라도 보이지 않게 강제 */
  line-height: 0;
}
.header .logo img { display: block; height: 32px; width: auto; }
/* 옛 마크업 잔재 (캐시된 HTML에 logo-box/logo-tag span이 남아있는 케이스) 완전 차단 */
.header .logo .logo-box,
.header .logo .logo-tag,
.header .logo > span { display: none !important; }

/* =============================================================
   2. 메인 배너 — <section class="banner-slider"><div class="banner-track">...</div></section>
   ============================================================= */
.banner-slider { border-radius: 28px; overflow: hidden; position: relative; }
.banner-slider .banner-track:empty {
  display: block;
  min-height: 180px;
  background-image: url('../images/banner/main-hero-exact.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 28px;
}
.banner-track > .slide:not([style*="background-image"]) {
  background-image: url('../images/banner/main-hero-exact.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* =============================================================
   3. 빠른 메뉴 (5개) — 갤럭시 / 아이폰 / 공지사항 / 구매후기 / 상담신청
   ============================================================= */
.quick-links .ql {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding-top: 8px; position: relative;
}
.quick-links .ql::before {
  content: ''; display: block; width: 32px; height: 32px;
  background-position: center; background-size: contain; background-repeat: no-repeat;
  margin-bottom: 2px;
}
/* ★ 2026-05-20: 5개 메뉴 변경 — 갤럭시 / 아이폰 / 특가판매 / 공지사항 / 상담신청
   nth-child 의존성 제거 → data-brand 기반 안정 매핑 */
.quick-links .ql[data-brand="samsung"]::before { background-image: url('../images/icons/quick/phone.png'); }
.quick-links .ql[data-brand="apple"]::before   { background-image: url('../images/icons/quick/iphone.png'); }
.quick-links .ql[data-brand="special"]::before { background-image: url('../images/icons/quick/special.svg'); }
.quick-links .ql[data-brand="notice"]::before  { background-image: url('../images/icons/quick/notice.png'); }
.quick-links .ql[data-brand="consult"]::before { background-image: url('../images/icons/quick/consult.png'); }

/* =============================================================
   4. 혜택 안내 strip (3개) — 제휴카드 X / 부가서비스 X / KT 인증
   ============================================================= */
.info-strip .info-item {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding-top: 38px;
}
.info-strip .info-item::before {
  content: ''; position: absolute; top: 4px; left: 50%;
  transform: translateX(-50%);
  width: 32px; height: 32px;
  background-position: center; background-size: contain; background-repeat: no-repeat;
}
.info-strip .info-item:nth-child(1)::before { background-image: url('../images/icons/benefit/card-discount.png'); }
.info-strip .info-item:nth-child(2)::before { background-image: url('../images/icons/benefit/safe-contract.png'); }
.info-strip .info-item:nth-child(3)::before { background-image: url('../images/icons/benefit/kt-certified.png'); }

/* =============================================================
   5. 하단 고정 네비 (5개) — 홈 / 휴대폰 / 요금제 / 매장 / 상담
   ============================================================= */
.bottom-nav a > svg { display: none; }
.bottom-nav a {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding-top: 30px; position: relative;
}
.bottom-nav a::before {
  content: ''; position: absolute; top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 24px;
  background-position: center; background-size: contain; background-repeat: no-repeat;
  opacity: 0.85; transition: opacity 0.15s;
}
.bottom-nav a.active::before { opacity: 1; }
.bottom-nav a:nth-child(1)::before { background-image: url('../images/icons/bottom/home.png'); }
.bottom-nav a:nth-child(2)::before { background-image: url('../images/icons/bottom/mypage.png'); }
.bottom-nav a:nth-child(3)::before { background-image: url('../images/icons/bottom/delivery.png'); }
.bottom-nav a:nth-child(4)::before { background-image: url('../images/icons/bottom/store.png'); }
.bottom-nav a:nth-child(5)::before { background-image: url('../images/icons/bottom/benefit.png'); }

/* =============================================================
   6. 구매후기 아바타 — JS가 .review-card-v2 동적 생성
   ============================================================= */
.review-card-v2 .avatar,
.review-card .avatar,
.review-item .avatar {
  width: 36px; height: 36px; border-radius: 999px;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  background-color: var(--kt-red-soft);
  display: inline-block; vertical-align: middle;
}
.review-card-v2 .avatar img,
.review-card .avatar img,
.review-item .avatar img {
  width: 100%; height: 100%; border-radius: 999px; object-fit: cover;
}
.review-card-v2:nth-child(4n+1) .avatar,
.review-card:nth-child(4n+1) .avatar,
.review-item:nth-child(4n+1) .avatar { background-image: url('../images/review/avatar-female-01.png'); }
.review-card-v2:nth-child(4n+2) .avatar,
.review-card:nth-child(4n+2) .avatar,
.review-item:nth-child(4n+2) .avatar { background-image: url('../images/review/avatar-male-01.png'); }
.review-card-v2:nth-child(4n+3) .avatar,
.review-card:nth-child(4n+3) .avatar,
.review-item:nth-child(4n+3) .avatar { background-image: url('../images/review/avatar-female-02.png'); }
.review-card-v2:nth-child(4n) .avatar,
.review-card:nth-child(4n) .avatar,
.review-item:nth-child(4n) .avatar { background-image: url('../images/review/avatar-male-02.png'); }

/* =============================================================
   7. 카카오톡 상담 톤
   ============================================================= */
.kakao, .kakao-card, .kakao-consult { --kakao-yellow: #fee500; }

/* =============================================================
   8. 안전망 - 기존 셀렉터 보존 (구버전 호환)
   ============================================================= */
.banner-slider.use-bg,
.hero-banner.use-bg,
.main-banner.use-bg {
  background-image: url('../images/banner/main-hero-exact.png');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  min-height: 170px;
}
.logo-image, .site-logo-image, .header-logo-image {
  width: 168px; height: 42px;
  background: url('../images/logo/kt-official-logo.png') center/contain no-repeat;
}

/* =============================================================
   9. 단말 카드 가격 위계 (출고가/공시/다이렉트몰/기기값)
   - 모바일 2열 카드. 위계: 회색 흐림 → 검정 굵게 → 레드 강조
   - JS 측 mobile-app.js renderDevices에서 .price-breakdown 생성
   ============================================================= */
.device-card .device-prices.price-breakdown {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px solid #f0f0f0;
}
.device-card .price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  font-size: 11px;
  line-height: 1.35;
}
.device-card .price-row .lbl { color: #9ca3af; font-weight: 500; }
.device-card .price-row .val { color: #9ca3af; font-weight: 500; font-variant-numeric: tabular-nums; }

/* 1) 출고가, 2) 공통지원금 할인 — 회색 흐림 */
.device-card .price-row-retail .val,
.device-card .price-row-public .val { color: #9ca3af; font-weight: 500; }

/* 3) 다이렉트몰 할인 — 검정 굵게 */
.device-card .price-row-direct .lbl,
.device-card .price-row-direct .val { color: #111827; font-weight: 700; }

/* 4) 기기값 — KT 레드, 가장 크게/굵게 */
.device-card .price-row-final {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed #eef1f5;
}
.device-card .price-row-final .lbl { color: #111827; font-weight: 800; font-size: 12px; }
.device-card .price-row-final .val.price-final-amt {
  color: var(--kt-red);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

/* ★ 2026-05-14: 중복 hover 규칙 제거 — main.css에서 일원화 (깜빡임/이중 그림자 회귀 차단).
   selected 만 빨간 보더 유지. hover/active 그림자 규칙은 main.css ③ 블록에서 처리. */
.device-card { transition: border-color 0.15s; }
.device-card.selected {
  border-color: var(--kt-red);
}

/* =============================================================
   10. Hero 배너 가독성 (텍스트 위계 + 어두운 오버레이)
   - 배경 이미지 위에 흰 텍스트가 옅게 보이는 문제 해결
   ============================================================= */
.banner-track > .slide {
  position: relative;
  min-height: 200px;
}
/* 어두운 그라디언트 오버레이 (이미 hero-overlay 있어도 추가 강제) */
.banner-track > .slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}
.banner-track > .slide > * { position: relative; z-index: 2; }
.banner-track .hero-content {
  text-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4);
}
.banner-track .hero-content h2,
.banner-track .hero-content .hero-title { font-weight: 900 !important; }
.banner-track .hero-content .hero-cta {
  text-shadow: none;
  background: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  display: inline-block;
  font-weight: 800;
}

/* =============================================================
   11. 카카오톡 상담 CTA (메인 홈 / 플로팅 / 폼 영역)
   - 개인정보 폼 위에 카톡 CTA 부각
   - 친구추가 후 빠른 상담 보조 문구
   ============================================================= */
.section-form { position: relative; }
.section-form::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--line, #eef1f5);
  margin: 0 16px 14px;
}
/* 카카오 상담 카드 (JS가 .section-form 위에 생성) */
.kakao-consult-card {
  margin: 0 16px 14px;
  background: linear-gradient(135deg, #fff8d6, #fee500);
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 22px rgba(254, 229, 0, 0.22);
  cursor: pointer;
  text-decoration: none;
  color: #111827;
  transition: transform 0.12s, box-shadow 0.15s;
}
.kakao-consult-card:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(254, 229, 0, 0.32); }
.kakao-consult-card .kakao-icon {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  background: #3c1e1e url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fee500" d="M12 4C6.48 4 2 7.6 2 12c0 2.7 1.7 5.06 4.27 6.43-.13.5-.7 2.5-.78 2.84 0 0-.02.13.07.18.09.05.19.01.19.01.27-.04 3.1-2.04 3.6-2.4.85.13 1.74.2 2.65.2 5.52 0 10-3.6 10-8s-4.48-8-10-8z"/></svg>') center/24px no-repeat;
}
.kakao-consult-card .kakao-text { flex: 1; }
.kakao-consult-card .kakao-title {
  font-size: 14.5px;
  font-weight: 900;
  color: #111827;
  letter-spacing: -0.3px;
}
.kakao-consult-card .kakao-sub {
  font-size: 11.5px;
  color: #4b3a00;
  margin-top: 2px;
  font-weight: 600;
}
.kakao-consult-card .kakao-arrow {
  font-size: 18px; font-weight: 900; color: #3c1e1e; opacity: 0.7;
}

/* 플로팅 카톡 버튼 (모바일 우하단, 하단 네비 위) — 2026-05-11 라벨 추가 */
.kakao-floating {
  position: fixed;
  right: 14px;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 110;
  height: 52px;
  padding: 0 16px 0 48px;
  border-radius: 26px;
  background: #fee500;
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
  display: inline-flex; align-items: center; gap: 0;
  cursor: pointer;
  text-decoration: none;
  color: #381e1e;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.3px;
  white-space: nowrap;
  animation: kakao-pulse 2.4s ease-in-out infinite;
}
.kakao-floating::before {
  content: '';
  position: absolute;
  left: 13px;
  width: 26px; height: 26px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23381e1e" d="M12 4C6.48 4 2 7.6 2 12c0 2.7 1.7 5.06 4.27 6.43-.13.5-.7 2.5-.78 2.84 0 0-.02.13.07.18.09.05.19.01.19.01.27-.04 3.1-2.04 3.6-2.4.85.13 1.74.2 2.65.2 5.52 0 10-3.6 10-8s-4.48-8-10-8z"/></svg>') center/contain no-repeat;
}
.kakao-floating .kakao-fab-label {
  display: inline-block;
  font-size: 14px;
  font-weight: 900;
  color: #1a1a1a;
}
.kakao-floating:hover { background: #ffd900; transform: translateY(-1px); transition: all 0.18s; }
@keyframes kakao-pulse {
  0%, 100% { box-shadow: 0 10px 28px rgba(0,0,0,0.22), 0 0 0 0 rgba(254,229,0,0.55); }
  50% { box-shadow: 0 10px 28px rgba(0,0,0,0.22), 0 0 0 10px rgba(254,229,0,0); }
}
@media (max-width: 380px) {
  .kakao-floating { height: 48px; padding: 0 14px 0 44px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); font-size: 13px; }
  .kakao-floating::before { width: 24px; height: 24px; left: 12px; }
}

/* 메인 단말 카드 가격 단순화 — "기기값 50,000원" (2026-05-11) */
.device-card .device-prices .price-main {
  font-size: 18px;
  font-weight: 900;
  color: #DC2626;
  letter-spacing: -0.4px;
  line-height: 1.2;
}
.device-card .device-prices .price-from-label {
  font-size: 12px;
  font-weight: 700;
  color: #555;
  margin-right: 4px;
}
.device-card .device-prices .price-suffix {
  font-size: 13px;
  font-weight: 700;
  margin-left: 1px;
}

/* 메인 홈에서는 개인정보 폼을 더 작고 부드럽게 */
.section-form .form-row.agree { font-size: 11px; color: #6b7280; }
.section-form .form-row label { font-size: 12px; color: #4b5563; }

/* ============================================================
   고객접수페이지 모달 — 상단 좌우 2열 재배치 (2026-05-11)
   좌측: 이미지 + 모델명 + 색상  /  우측: 용량/가입유형/요금제/할인방식
   ============================================================ */
.modal-top-grid {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  margin-bottom: 10px;
  align-items: start;
}
.modal-top-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.modal-top-left .modal-detail-img {
  width: 130px;
  height: 130px;
  background: #f7f7fb;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  overflow: hidden;
}
.modal-top-left .modal-detail-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.modal-top-left .modal-model-name {
  font-size: 13px;
  font-weight: 800;
  margin: 0 0 2px;
  color: #1a1a1a;
  line-height: 1.25;
  word-break: keep-all;
}
.modal-top-left .modal-sub-price {
  font-size: 10.5px;
  color: #888;
  margin-bottom: 4px;
}
.modal-top-left .modal-sub-price strong {
  font-weight: 700;
  color: #555;
}
.modal-top-left .modal-sub-color {
  font-size: 10.5px;
  color: #444;
  font-weight: 600;
  margin-bottom: 6px;
}
.modal-top-left .color-picker {
  display: flex;
  gap: 5px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
}
.modal-top-left .color-picker .color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #ddd;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s, border-color 0.15s;
}
.modal-top-left .color-picker .color-swatch.active {
  transform: scale(1.15);
  border-color: #E60012 !important;
}
.modal-top-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.modal-top-right .calc-row-compact {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.modal-top-right .calc-row-compact > label {
  font-size: 10.5px;
  color: #777;
  font-weight: 600;
  margin: 0;
  padding: 0;
}
.modal-top-right .seg-control {
  display: flex;
  gap: 3px;
  width: 100%;
}
.modal-top-right .seg-control button {
  flex: 1;
  padding: 5px 4px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #ddd;
  background: #f4f4f8;
  color: #555;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  min-width: 0;
}
.modal-top-right .seg-control button.active {
  background: #DC2626;
  color: #fff;
  border-color: #DC2626;
}
.modal-top-right .seg-control.dark button.active {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}
/* ★ 2026-05-20: 공시/선약 자체할인 차액 배지 — 차액 25만원 이상일 때 큰 쪽에 표시 */
.modal-top-right .seg-control button .seg-label {
  display: inline-block;
  vertical-align: middle;
}
.modal-top-right .seg-control button .discount-badge {
  display: inline-block;
  background: #FBBF24;
  color: #78350F;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: -0.3px;
  line-height: 1.3;
}
.modal-top-right .seg-control button.active .discount-badge {
  background: #FEF3C7;
  color: #92400E;
}
.modal-top-right select#calcPlan {
  width: 100%;
  font-size: 11px;
  padding: 5px 6px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #fff;
  color: #333;
  min-width: 0;
}

/* 모바일 우선 — 320~360px 좁은 viewport */
@media (max-width: 360px) {
  .modal-top-grid { grid-template-columns: 110px 1fr; gap: 10px; }
  .modal-top-left .modal-detail-img { width: 110px; height: 110px; }
  .modal-top-right .seg-control button { font-size: 10.5px; padding: 5px 3px; }
  .modal-top-right select#calcPlan { font-size: 10.5px; }
}