/* =========================================================================
   selpic-enhance.css
   셀픽 홈페이지 UX 개선 — 드롭인 스타일
   적용: public/css/style.css 끝에 붙여넣기 (또는 이 파일을 따로 <link>)
   전제: Tailwind 설정의 teal(#0891B2/light #22D3EE/bright #67E8F9/dark #0E7490),
         accent(#F97316) 가 이미 있음. 아래 :root 는 CSS 변수 백업용.
   ========================================================================= */

:root{
  --teal:#0891B2; --teal-light:#22D3EE; --teal-bright:#67E8F9; --teal-dark:#0E7490;
  --accent:#F97316;
}

/* ---------- 1. 페이지 전환 (MPA View Transitions) ----------
   크로미엄 계열에서 페이지 이동 시 흰 화면 깜빡임 대신 부드러운 페이드.
   미지원 브라우저는 자동으로 기존 동작(무시). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation: selpic-fade-out .22s ease both; }
  ::view-transition-new(root){ animation: selpic-fade-in  .30s ease both; }
}
@keyframes selpic-fade-out{ to{ opacity:0; transform:translateY(-6px) } }
@keyframes selpic-fade-in { from{ opacity:0; transform:translateY(8px) } }
/* 헤더는 전환 중에도 고정 유지 */
#header{ view-transition-name: selpic-header; }
::view-transition-group(selpic-header){ animation: none; }

/* ---------- 2. 스크롤 진행 바 (헤더 하단) ---------- */
#scroll-progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:0%;
  background:linear-gradient(90deg, var(--teal), var(--teal-light));
  transition:width .1s linear; z-index:1;
}

/* ---------- 3. 현재 페이지 활성 표시 (nav) ---------- */
.nav-active{ color:var(--teal-dark) !important; font-weight:600; position:relative; }
.nav-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--teal); border-radius:2px;
}

/* ---------- 4. 인라인 띠배너 (차단형 모달 대체) ---------- */
#promo-bar{ overflow:hidden; transition:height .3s ease, opacity .3s ease; }
#promo-bar.promo-collapsed{ height:0 !important; opacity:0; }

/* ---------- 5. 모바일 하단 스티키 CTA ---------- */
.mobile-cta{ display:none; }
@media (max-width:767px){
  .mobile-cta{
    display:flex; position:fixed; left:12px; right:12px; bottom:12px; z-index:70;
    gap:8px; align-items:center;
    background:rgba(15,23,42,.96); backdrop-filter:blur(8px);
    padding:8px 8px 8px 20px; border-radius:999px;
    box-shadow:0 18px 36px -14px rgba(0,0,0,.5);
  }
  body{ padding-bottom:76px; } /* 스티키 CTA 가림 방지 */
}

/* ---------- 6. 맨 위로 버튼 ---------- */
#to-top{
  position:fixed; right:18px; bottom:84px; z-index:55;
  width:44px; height:44px; border-radius:50%;
  background:#fff; border:1px solid #e2e8f0; color:#475569;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.3);
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:all .25s ease; cursor:pointer;
}
#to-top.show{ opacity:1; pointer-events:auto; transform:none; }
@media (max-width:767px){ #to-top{ bottom:84px; right:14px; } }

/* ---------- 7. 히어로 기기 라인업 쇼케이스 ---------- */
.hero-devices{ position:relative; width:100%; height:46vh; max-height:520px;
  display:flex; align-items:center; justify-content:center; }
@media (min-width:768px){ .hero-devices{ height:64vh; max-height:600px; } }
.hero-device{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.92) translateY(10px);
  transition:opacity .6s ease, transform .6s ease; pointer-events:none; }
.hero-device.on{ opacity:1; transform:none; }
.hero-device img{ max-height:100%; max-width:78%; object-fit:contain;
  filter:drop-shadow(0 30px 55px rgba(0,0,0,.5)); }
.hero-device-label{ position:absolute; bottom:2%; left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,.12); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.2);
  color:#fff; font-size:12.5px; font-weight:600; padding:7px 16px; border-radius:999px;
  white-space:nowrap; z-index:20; }
.hero-device-dots{ position:absolute; bottom:-30px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:20; }
.hero-device-dots button{ width:8px; height:8px; border-radius:999px; border:0; padding:0;
  cursor:pointer; background:rgba(255,255,255,.3); transition:all .25s; }
.hero-device-dots button.on{ width:22px; background:var(--teal-bright); }

/* ---------- 8. 기기 상세 드로어 (슬라이드오버) ---------- */
#device-drawer{ position:fixed; inset:0; z-index:110; }
#device-drawer.hidden{ display:none; }
#device-backdrop{ position:absolute; inset:0; background:rgba(15,23,42,.4); backdrop-filter:blur(3px); }
#device-panel{ position:absolute; top:0; right:0; bottom:0; width:100%; max-width:460px;
  background:#fff; display:flex; flex-direction:column; will-change:transform;
  transition:transform .3s cubic-bezier(.4,0,.2,1); box-shadow:-20px 0 50px -20px rgba(0,0,0,.3); }
#device-panel.translate-x-full{ transform:translateX(100%); }
.dd-head{ display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid #f1f5f9; }
.dd-close{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; color:#94a3b8; cursor:pointer; transition:all .15s; }
.dd-close:hover{ background:#f1f5f9; color:#0f172a; }
#device-body{ overflow-y:auto; flex:1; }
.dd-photo{ position:relative; background:linear-gradient(135deg,#f8fafc,#eef6f8);
  height:300px; display:flex; align-items:center; justify-content:center; padding:24px; }
.dd-photo img{ max-height:100%; max-width:100%; object-fit:contain;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.15)); }
.dd-photo.cover{ padding:0; } .dd-photo.cover img{ width:100%; height:100%; object-fit:cover; filter:none; }
.dd-new{ position:absolute; top:16px; left:16px; background:var(--accent); color:#fff;
  font-size:10px; font-weight:700; padding:4px 9px; border-radius:999px; z-index:1; }
.dd-content{ padding:24px 24px 32px; }
.dd-badge{ display:inline-block; background:rgba(8,145,178,.08); color:var(--teal);
  font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px; }
.dd-name{ font-size:26px; font-weight:800; letter-spacing:-.02em; margin:12px 0 8px; }
.dd-price{ font-size:24px; font-weight:800; color:var(--teal-dark); margin-bottom:18px; }
.dd-desc{ font-size:14.5px; line-height:1.7; color:#475569; margin-bottom:12px; }
.dd-h{ font-size:14px; font-weight:700; color:#0f172a; margin:24px 0 12px; }
.dd-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.dd-tag{ background:rgba(8,145,178,.08); color:var(--teal-dark); font-size:12.5px;
  font-weight:600; padding:7px 14px; border-radius:999px; }
.dd-specs{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.dd-specs > div{ background:#f8fafc; border:1px solid #f1f5f9; border-radius:12px;
  padding:12px 10px; text-align:center; }
.dd-specs span{ display:block; font-size:11px; color:#94a3b8; margin-bottom:4px; }
.dd-specs b{ font-size:14px; font-weight:700; }
.dd-sw{ display:flex; flex-direction:column; gap:10px; }
.dd-sw li{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:#475569; line-height:1.5; }
.dd-sw li i{ color:var(--teal); flex-shrink:0; margin-top:2px; }
.dd-cta{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:28px;
  background:var(--teal); color:#fff; font-weight:700; padding:14px; border-radius:999px; transition:background .2s; }
.dd-cta:hover{ background:var(--teal-dark); }
.detail-btn{ display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:600;
  color:var(--teal); cursor:pointer; transition:gap .15s; }
.detail-btn:hover{ gap:8px; color:var(--teal-dark); }

/* ---------- 9. 매장찾기 필터칩 + 지도 핀 ---------- */
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
  color:#475569; background:#fff; border:1px solid #e2e8f0; padding:8px 16px; border-radius:999px;
  cursor:pointer; transition:all .15s; white-space:nowrap; }
.chip:hover{ border-color:#cbd5e1; color:#0f172a; }
.chip.chip-on{ background:var(--teal); border-color:var(--teal); color:#fff; }
.map-pin{ position:absolute; width:14px; height:14px; border-radius:50% 50% 50% 0;
  background:var(--teal); transform:rotate(-45deg); box-shadow:0 2px 6px rgba(0,0,0,.3); }
.map-pin.accent{ background:var(--accent); }
.map-pin::after{ content:""; position:absolute; inset:4px; background:#fff; border-radius:50%; transform:rotate(45deg); }
.map-pin.ping{ animation:selpic-pin-ping 2s ease-out infinite; }
@keyframes selpic-pin-ping{ 0%{ box-shadow:0 0 0 0 rgba(8,145,178,.4) }
  70%{ box-shadow:0 0 0 12px rgba(8,145,178,0) } 100%{ box-shadow:0 0 0 0 rgba(8,145,178,0) } }