/*
  KT 공식 대리점 모바일 디자인 리뉴얼 CSS
  - HTML / JS 구조 변경 없이 CSS만 교체하는 것을 전제로 작성
  - 톤: 흰 배경, 둥근 카드, KT Red 포인트, 앱/인스타 스타일
*/

:root {
  --kt-red: #ed1b2f;
  --kt-red-light: #ff3349;
  --kt-red-soft: #fff1f3;
  --bg: #ffffff;
  --bg-sub: #f7f9fc;
  --ink: #111827;
  --muted: #6b7280;
  --line: #eef1f5;
  --line-strong: #e5e7eb;
  --yellow: #fbbf24;
  --green: #16a34a;
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --shadow-card: 0 12px 34px rgba(15, 23, 42, .08);
  --shadow-red: 0 16px 36px rgba(237, 27, 47, .16);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #eef2f7;
  color: var(--ink);
  font-family: Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: -0.025em;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }

.mobile-frame {
  position: relative;
  max-width: 430px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--bg);
  overflow-x: hidden;
  box-shadow: 0 0 0 1px rgba(15,23,42,.04), 0 24px 80px rgba(15,23,42,.16);
  padding-bottom: calc(92px + var(--safe-bottom));
}

.demo-banner {
  background: #fff8e1 !important;
  color: #8a5a00 !important;
  border-bottom: 1px solid #fde68a !important;
  font-size: 10.5px !important;
  font-weight: 700;
  line-height: 1.35;
}

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* ★ 2026-05-27: 3-컬럼 grid — [햄버거] [로고 가운데] [상담]
     로고가 좌우 버튼 폭에 영향받지 않고 정확히 가운데 정렬됨 */
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding: 0 18px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(238,241,245,.9);
}
.header .logo { justify-self: center; }
.hbtn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 6px 16px rgba(15,23,42,.05);
}
.menu-btn { flex-direction: column; gap: 4px; }
.menu-btn span {
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: var(--ink);
}
.icon-btn svg { width: 18px; height: 18px; color: var(--kt-red); }
.logo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 900;
}
/* ★ 2026-05-27: 옛 .logo-box / .logo-tag 정의 제거됨.
   현재 헤더 로고는 <img src="public/images/logo/kt-directshop.svg">로 통일.
   만약 캐시된 옛 HTML에 logo-box/logo-tag span이 남아있어도 표시되지 않도록 display:none 처리.
*/
.logo-box, .logo-tag { display: none !important; }

.banner-slider {
  margin: 16px 16px 10px;
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(135deg, #fff 0%, #fff5f6 55%, #ffe8ec 100%);
  box-shadow: var(--shadow-card);
}
.banner-track {
  min-height: 178px;
}
.banner-track:empty::before {
  content: "5월, 스마트한 선택!\A KT 휴대폰 특가 세일";
  white-space: pre-line;
  display: flex;
  align-items: center;
  min-height: 178px;
  padding: 28px 24px;
  color: var(--ink);
  font-size: 23px;
  font-weight: 900;
  line-height: 1.2;
  background:
    radial-gradient(circle at 82% 22%, rgba(237,27,47,.18), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,241,243,.92));
}
.banner-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0 0 13px;
}
.banner-dots button,
.banner-dots span {
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: #d9dde5;
  padding: 0;
}
.banner-dots .active,
.banner-dots button.active { width: 18px; background: var(--kt-red); }

.quick-links {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 12px 16px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow-card);
}
.ql {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: var(--bg-sub);
  color: #374151;
  font-size: 11.5px;
  font-weight: 800;
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
/* ★ 2026-05-15 v4: 빠른 메뉴 hover/active 효과 재도입 — 안전한 옵션 B (box-shadow inset 만).
   다일님 환경 paint flicker 우려 회피:
   - background, border-color, transform 변경 X (모두 깜빡임 유발 보고됨)
   - box-shadow inset + color 만 변경 (다일님 환경에서 유일 안전 패턴)
   사장님 요청: 호버 + 클릭 시 빨간 강조 (v9 §17.2 안전 패턴 기반). */
/* ★ 2026-05-27: 모바일 hover/stuck 제거 + 가벼운 탭 피드백만 */
.ql {
  transition: opacity .1s ease, transform .1s ease;
  -webkit-tap-highlight-color: transparent;
}
.ql:active {
  opacity: 0.6;
  transform: scale(0.97);
}

/* ★ 2026-05-15: 갤럭시 / 아이폰 브랜드별 단말기 섹션 (탭 UI 대체) */
.brand-device-section {
  margin-top: 24px;
}
.brand-device-section:first-of-type {
  margin-top: 4px;
}
.brand-section-head {
  margin-bottom: 12px;
  padding-left: 2px;
}
.brand-section-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.brand-section-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}

.info-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 12px 16px 18px;
  padding: 6px;
  background: var(--line);
  border-radius: 24px;
  box-shadow: 0 8px 22px rgba(15,23,42,.04);
}
.info-item {
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #fff;
}
.info-item:first-child { border-radius: 18px 8px 8px 18px; }
.info-item:last-child { border-radius: 8px 18px 18px 8px; }
.info-item strong { font-size: 11.5px; color: var(--ink); font-weight: 900; }
.info-item span { margin-top: 2px; font-size: 10.5px; color: var(--muted); font-weight: 700; }

.section {
  margin: 18px 16px;
}
.section-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 12px;
}
.section-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: -0.04em;
}
.section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}
.tabs {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 13px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  height: 34px;
  padding: 0 15px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: #4b5563;
  font-size: 12px;
  font-weight: 800;
  transition: all .18s ease;
}
/* ★ 2026-05-14 v3: 탭 hover 효과 제거 (다일님 환경 반짝임 회피).
   active 탭만 빨간 단색 — border + background 동시 변경이 반짝임 원인이었음.
   모바일이 주 사용자라 hover 자체가 발현 안 함. */
.tab {
  transition: color .12s ease, background .12s ease;
}
.tab.active {
  color: #fff;
  border-color: var(--kt-red);
  background: var(--kt-red);
}

.device-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
/* ★ 2026-05-15: 단말 카드 뱃지 — 라운드 라벨 (옵션 B). HOT/인기/개봉/특가판매 모두 동일 빨강 톤 */
.device-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #DC2626;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: -0.2px;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35);
}
.device-card,
.device-item,
.phone-card,
.product-card,
.device-list > * {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: #fff;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow .12s ease;  /* ★ 2026-05-14: box-shadow만 transition (GPU 합성, layout 영향 0) */
  cursor: pointer;  /* ★ 2026-05-18: 카드 어디든 클릭 가능 표시 */
}
/* ★ 2026-05-18 (가안 A): 카드 자식 요소 클릭 통과 — 사이드/빈 영역 눌러도 부모 카드에서 click 발생 */
.device-card > *,
.device-item > *,
.phone-card > *,
.product-card > * {
  pointer-events: none;
}
/* 예외: 카드 안에 별도 클릭 필요한 요소 — input/select/textarea/label 포함 (★ 2026-05-19 추가) */
.device-card a, .device-card button, .device-card input, .device-card select, .device-card textarea, .device-card label,
.device-item a, .device-item button, .device-item input, .device-item select, .device-item textarea, .device-item label,
.phone-card a, .phone-card button, .phone-card input, .phone-card select, .phone-card textarea, .phone-card label,
.product-card a, .product-card button, .product-card input, .product-card select, .product-card textarea, .product-card label {
  pointer-events: auto;
}
/* ★ 2026-05-14: 카드 hover U+ 스타일 (4가지 효과) — translateY 없음, 깜빡임 0
   ① 빨간 보더, ② 상품명 빨강, ③ 옅은 회색 배경, ④ 이미지 6% 확대 (scale은 img에만).
   참고: U+ 투게더몰 hover 패턴 — 카드 boundary는 안 움직여 hover 재진입 없음. */
/* ★ 2026-05-14: hover에 box-shadow inset으로 안쪽 빨간 보더 — layout 영향 0, paint flicker 위험 0.
   border-color 변경은 일부 환경에서 깜빡임 → box-shadow inset이 가장 안전한 대안. */
.device-list > *:hover,
.device-card:hover,
.device-item:hover,
.product-card:hover {
  box-shadow: inset 0 0 0 2px var(--kt-red), var(--shadow-card);
  cursor: pointer;
}
/* ★ 2026-05-14: :active 제거 (클릭 시 보더+그림자 발현이 깜빡임 원인이었음).
   .selected (JS 토글)만 유지. 클릭 시 시각 변화 0 → 깜빡임 0. */
.device-list > *.selected,
.device-card.selected,
.product-card.selected {
  border-color: var(--kt-red);
}
.device-list img,
.device-card img,
.device-item img,
.product-card img {
  display: block;
  width: 100%;
  max-height: 116px;
  object-fit: contain;
  margin: 10px auto 6px;
  /* ★ 2026-05-14 v4: 이미지 hover 효과 일체 제거 (transition 0). */
}
/* ★ 2026-05-14 v4: 이미지 hover 효과 일체 제거 — 다일님 환경에서
   transform/filter 모두 paint flicker 유발. 카드 box-shadow inset만 유지. */
/* (이미지 hover 효과 없음) */
.device-list h3,
.device-list .name,
.device-list .device-name,
.device-card h3,
.product-card h3 {
  margin: 0 12px 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.04em;
}
.badge,
.label,
.tag,
.device-list .badge,
.device-list .label,
.device-list .tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--kt-red);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}
.device-prices,
.price-box,
.price-breakdown {
  margin: 8px 10px 12px;
  padding: 10px;
  border-radius: 18px;
  background: #fbfcfe;
  border: 1px solid var(--line);
}
.device-prices .price-from,
.price-row,
.device-list .price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 22px;
  color: #a0a7b4;
  font-size: 10.5px;
  font-weight: 700;
}
.price-row .value,
.price-row strong { color: #9aa3b2; font-weight: 700; }
.price-row.direct,
.direct-discount,
.row-direct {
  margin: 5px -4px;
  padding: 7px 8px;
  border-radius: 13px;
  background: #f3f4f6;
  color: #111827;
  font-size: 11px;
  font-weight: 900;
}
.price-row.direct .value,
.direct-discount .value,
.row-direct .value {
  color: #111827;
  font-weight: 900;
}
.price-result,
.final-price,
.device-price-final {
  margin-top: 8px;
  padding-top: 9px;
  border-top: 1px dashed #e3e7ef;
}
.price-main,
.price-result .total-amt,
.final-price .value,
.device-price-final .value {
  color: var(--kt-red) !important;
  font-size: 19px !important;
  line-height: 1.08;
  font-weight: 950 !important;
  letter-spacing: -0.055em;
}
.price-result .total-label,
.final-price .label,
.device-price-final .label {
  color: var(--kt-red) !important;
  font-size: 11px;
  font-weight: 900;
}
.price-suffix { color: #9aa3b2 !important; font-size: 10px !important; }

/* (2026-05-11) 카드 가격 단순화 — placeholder 제거. JS가 "기기값 X원" 한 줄로 출력 */

#section-reviews,
.reviews-section,
.review-section {
  margin: 18px 16px;
}
.review-list,
.reviews-list,
#reviewList {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 74%);
  gap: 11px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: none;
}
.review-list::-webkit-scrollbar,
.reviews-list::-webkit-scrollbar,
#reviewList::-webkit-scrollbar { display: none; }
.review-card,
.review-item,
.review-list > *,
.reviews-list > * {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow-card);
  padding: 13px;
}
.review-card img,
.review-item img {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  object-fit: cover;
  float: right;
  margin-left: 10px;
  background: var(--bg-sub);
}
.stars,
.rating { color: var(--yellow); font-size: 11px; letter-spacing: -.02em; }
.review-card p,
.review-item p { color: #4b5563; font-size: 11.5px; margin: 6px 0; line-height: 1.55; }

.notice-list {
  list-style: none;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.notice-list li,
.notice-list > * {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--line);
  color: #374151;
  font-size: 11.5px;
  font-weight: 700;
}
.notice-list li:last-child,
.notice-list > *:last-child { border-bottom: 0; }

/* ★ 2026-05-24: 제목이 가용 공간 차지, 비고정 공지는 제목 가운데 정렬 */
.notice-list .ttl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-list .notice-normal .ttl { text-align: center; }
.notice-list .notice-pinned .ttl { text-align: left; }

.section-form {
  padding: 15px;
  border: 1px solid #fee2e2;
  border-radius: 28px;
  background: linear-gradient(135deg, #fff8f9, #fff);
  box-shadow: var(--shadow-card);
}
.section-form .section-head h2 { font-size: 17px; }
.section-form .section-head p { font-size: 11.5px; }
.form {
  display: none; /* 개인정보 입력 폼은 디자인 방향상 노출하지 않고 카카오톡 CTA로 대체 */
}
/* ★ 2026-06-26 .float-cta 시각 스타일 복원 (display/background/color 누락 fix) */
.btn-primary,
.float-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--kt-red), var(--kt-red-light));
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(237,27,47,.22);
}
.float-cta {
  position: fixed;
  left: 50%;
  bottom: calc(70px + var(--safe-bottom));
  z-index: 45;
  transform: translateX(-50%);
  width: min(390px, calc(100% - 40px));
  height: 48px;
  font-size: 13px;
}
.footer {
  margin: 20px 16px 6px;
  padding: 18px 16px;
  border-radius: 24px;
  background: #f8fafc;
  color: #6b7280;
  font-size: 10.5px;
  line-height: 1.7;
}
.footer strong { color: var(--ink); }
.mute { color: #9ca3af; }
/* ★ 2026-05-22: 푸터 인증 마크 행 — 깔끔 가로 일렬 (박스 X) */
.ft-certs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 16px;
  margin: 12px 0 8px;
  padding: 8px 4px 4px;
  border-top: 1px solid #e5e7eb;
  padding-top: 14px;
}
.cert-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #4b5563;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1;
}
.cert-row .cert-img-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  min-width: 26px;
}
.cert-row img, .cert-row svg {
  height: 22px;
  width: auto;
  max-width: 46px;
  display: block;
  object-fit: contain;
}
.cert-row.link { cursor: pointer; }
.cert-row.link:hover { color: #1d4ed8; }

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 60;
  transform: translateX(-50%);
  width: min(430px, 100%);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: calc(64px + var(--safe-bottom));
  padding: 8px 6px calc(8px + var(--safe-bottom));
  background: rgba(255,255,255,.95);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(14px);
  box-shadow: 0 -14px 34px rgba(15,23,42,.08);
}
.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #8b95a1;
  font-size: 10px;
  font-weight: 800;
  border-radius: 16px;
}
.bottom-nav svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.bottom-nav a.active {
  color: var(--kt-red);
  background: var(--kt-red-soft);
}

.sidemenu {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 100;
  width: min(330px, 82vw);
  height: 100vh;
  transform: translateX(calc(-50% - 430px));
  padding: 20px;
  border-radius: 0 30px 30px 0;
  background: #fff;
  box-shadow: 18px 0 44px rgba(15,23,42,.14);
  transition: transform .24s ease;
}
.sidemenu.open { transform: translateX(-215px); }
.sidemenu-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.sidemenu-header strong { font-size: 18px; font-weight: 900; }
.sidemenu-header button { width: 34px; height: 34px; border: 0; border-radius: 14px; background: var(--bg-sub); font-size: 22px; }
.sidemenu ul { list-style: none; margin: 0; padding: 0; }
.sidemenu li a { display: block; padding: 15px 12px; border-bottom: 1px solid var(--line); font-weight: 800; }
.sidemenu-foot { margin-top: 18px; padding: 16px; border-radius: 20px; background: var(--kt-red-soft); color: var(--kt-red); font-size: 12px; font-weight: 800; line-height: 1.6; }
/* ★ 2026-05-27: pointer-events 명시 — 숨김 상태에서 절대 클릭 가로채지 않게 */
.overlay { position: fixed; inset: 0; z-index: 90; background: rgba(15,23,42,.36); opacity: 0; visibility: hidden; pointer-events: none; transition: .2s; }
.overlay.open, .overlay.show { opacity: 1; visibility: visible; pointer-events: auto; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
  align-items: flex-end;
  justify-content: center;
  /* ★ 2026-05-27: PC 클릭 씹힘 fix — backdrop-filter:blur(8px) 제거 (GPU 부담 큰 요소) */
  background: rgba(15,23,42,.55);
}
.modal.open,
.modal.show { display: flex; }
.modal-card {
  width: min(430px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 30px 30px 0 0;
  background: #fff;
  box-shadow: 0 -18px 54px rgba(15,23,42,.22);
  padding: 22px 16px 28px;
}
.modal-close {
  position: sticky;
  top: 0;
  float: right;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 14px;
  background: var(--bg-sub);
  color: var(--ink);
  font-size: 22px;
  z-index: 1;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(126px + var(--safe-bottom));
  z-index: 130;
  transform: translateX(-50%);
  max-width: 360px;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(17,24,39,.92);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
}
.toast.show { opacity: 1; }

@media (max-width: 360px) {
  .device-list { gap: 9px; }
  .section { margin-left: 12px; margin-right: 12px; }
  .quick-links, .info-strip, .banner-slider { margin-left: 12px; margin-right: 12px; }
  .price-main, .device-prices::after { font-size: 15.5px !important; }
}