/* ════════════════════════════
   RESET & BASE
════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Noto Sans KR', sans-serif;
  background:#fff;
  color:#1a1a2e;
  letter-spacing:-0.3px;
  overflow-x:hidden;
}
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }

:root {
  --blue:#0052CC;
  --blue2:#2684FF;
  --pale:#E8F0FE;
  --gray:#6B7280;
  --lgray:#F3F4F6;
  --r:16px;
  --sh:0 4px 24px rgba(0,82,204,.10);
  --sh2:0 12px 40px rgba(0,82,204,.18);
}

/* ════════════════════════════
   HEADER
════════════════════════════ */
.header {
  position:fixed; top:0; left:0; right:0;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid #E5E7EB;
  z-index:1000; height:60px;
}
.hinner {
  max-width:1200px; margin:0 auto; padding:0 20px;
  height:100%; display:flex; align-items:center; justify-content:space-between;
}
.logo { display:flex; align-items:center; gap:8px; }
.logo img { width:32px; height:32px; object-fit:contain; }
.logo-txt { font-size:1.1rem; font-weight:900; color:var(--blue); letter-spacing:-.5px; }
.logo-txt em { color:#1a1a2e; font-style:normal; }
.hnav { display:flex; align-items:center; gap:8px; }
.hnav a {
  padding:8px 16px; font-size:.9rem; font-weight:600;
  color:var(--gray); border-radius:8px; transition:all .2s;
}
.hnav a:hover, .hnav a.on { background:var(--pale); color:var(--blue); }
.hnav .cta {
  background:var(--blue) !important; color:#fff !important;
  box-shadow:0 2px 12px rgba(0,82,204,.3);
}
.hnav .cta:hover { background:var(--blue2) !important; }
.hamburger { display:none; background:none; border:none; cursor:pointer; padding:8px; }
.hamburger span { display:block; width:22px; height:2px; background:var(--blue); margin:5px 0; border-radius:2px; transition:all .3s; }
.mob-nav {
  display:none; position:fixed; top:60px; left:0; right:0;
  background:#fff; border-bottom:1px solid #E5E7EB;
  z-index:999; padding:10px 20px; flex-direction:column; gap:4px;
}
.mob-nav.open { display:flex; }
.mob-nav a { padding:12px 16px; font-weight:600; border-radius:8px; }
.mob-nav a:hover { background:var(--pale); color:var(--blue); }

/* ════════════════════════════
   HERO
════════════════════════════ */
.hero {
  padding-top:60px;
  min-height:100svh;
  display:flex; align-items:center;
  position:relative; overflow:hidden;
  background:#fff;
}
.hero-bg {
  position:absolute; inset:0;
  background-image:radial-gradient(circle, #0052CC18 1.5px, transparent 1.5px);
  background-size:28px 28px;
  pointer-events:none;
}
.hero-glow1 {
  position:absolute; top:-150px; right:-100px;
  width:520px; height:520px;
  background:radial-gradient(circle, #0052CC20 0%, transparent 65%);
  border-radius:50%; pointer-events:none;
}
.hero-glow2 {
  position:absolute; bottom:-100px; left:-150px;
  width:420px; height:420px;
  background:radial-gradient(circle, #2684FF12 0%, transparent 65%);
  border-radius:50%; pointer-events:none;
}
.hero-inner {
  max-width:1200px; margin:0 auto; padding:60px 20px;
  display:grid; grid-template-columns:1fr 1fr; gap:60px;
  align-items:center; position:relative; z-index:1; width:100%;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--pale); color:var(--blue);
  font-size:.82rem; font-weight:700;
  padding:6px 14px; border-radius:20px;
  margin-bottom:22px; border:1px solid #C7D7FD;
}
.hero-h1 {
  font-size:3rem; font-weight:900; line-height:1.2;
  letter-spacing:-1.5px; margin-bottom:18px;
}
.hero-h1 .hl {
  background:linear-gradient(135deg,#0052CC,#2684FF);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-desc { font-size:1.05rem; color:var(--gray); line-height:1.7; margin-bottom:30px; }
.hero-desc strong { color:var(--blue); font-weight:700; }
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; }
.btn-p {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--blue); color:#fff;
  font-size:1rem; font-weight:700;
  padding:16px 28px; border-radius:12px;
  box-shadow:0 4px 20px rgba(0,82,204,.35);
  transition:all .25s;
}
.btn-p:hover { background:var(--blue2); transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,82,204,.45); }
.btn-s {
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:var(--blue);
  font-size:1rem; font-weight:700;
  padding:16px 28px; border-radius:12px;
  border:2px solid var(--blue); transition:all .25s;
}
.btn-s:hover { background:var(--pale); transform:translateY(-2px); }

/* ────────────────────────────────────
   모바일 히어로 파티클 (Giftbox 떠오르기)
   ※ 데스크탑에선 display:none (미디어쿼리 처리)
   ※ 개수/위치/속도 조정: .gp1~.gp7 각 값 수정
   ※ 크기 조정: width 값 수정
   ※ 투명도 조정: opacity 값 수정 (현재 0.13)
──────────────────────────────────── */
.gift-particles {
  display:block; /* 데스크탑+모바일 모두 표시 */
  position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0;
}
/* Cash.png 검정 배경 제거 */
img[src*="Cash"] { mix-blend-mode: screen; }

/* 파티클 공통 */
.gp {
  position:absolute;
}

/* ── 각 파티클 전용 애니메이션 (회전 방향·각도 모두 다르게) ── */

/* gp1: 오른쪽으로 기울며 올라감 */
@keyframes gpFloat1 {
  0%   { transform:translateY(0)     rotate(-15deg)            ; opacity:0; }
  15%  { opacity:.45; }
  80%  { opacity:.40; }
  100% { transform:translateY(-300px) rotate(40deg)             ; opacity:0; }
}
/* gp2: 왼쪽으로 기울며 + 좌우 흔들 */
@keyframes gpFloat2 {
  0%   { transform:translateY(0)     rotate(20deg)  translateX(0)    ; opacity:0; }
  30%  { transform:translateY(-80px) rotate(-10deg) translateX(-14px); opacity:.45; }
  70%  { transform:translateY(-200px)rotate(15deg)  translateX(10px) ; opacity:.38; }
  100% { transform:translateY(-310px) rotate(-25deg) translateX(-6px) ; opacity:0; }
}
/* gp3: 크게 회전하며 올라감 */
@keyframes gpFloat3 {
  0%   { transform:translateY(0)     rotate(0deg)  scale(1)  ; opacity:0; }
  15%  { opacity:.50; }
  50%  { transform:translateY(-140px) rotate(90deg) scale(.9); opacity:.45; }
  100% { transform:translateY(-320px) rotate(180deg)scale(.8); opacity:0; }
}
/* gp4: 살짝 흔들리며 천천히 */
@keyframes gpFloat4 {
  0%   { transform:translateY(0)     rotate(10deg)  translateX(0)   ; opacity:0; }
  25%  { transform:translateY(-60px) rotate(-20deg) translateX(12px); opacity:.42; }
  60%  { transform:translateY(-170px)rotate(30deg)  translateX(-8px); opacity:.38; }
  100% { transform:translateY(-290px) rotate(-15deg) translateX(5px) ; opacity:0; }
}
/* gp5: 역방향 회전 + 살짝 확대 후 축소 */
@keyframes gpFloat5 {
  0%   { transform:translateY(0)     rotate(30deg)  scale(1)  ; opacity:0; }
  20%  { opacity:.48; }
  50%  { transform:translateY(-150px) rotate(-30deg) scale(1.1); opacity:.42; }
  100% { transform:translateY(-300px) rotate(-80deg) scale(.85); opacity:0; }
}
/* gp6: 가볍게 좌우 흔들 */
@keyframes gpFloat6 {
  0%   { transform:translateY(0)     rotate(-25deg) translateX(0)    ; opacity:0; }
  35%  { transform:translateY(-100px)rotate(15deg)  translateX(16px) ; opacity:.40; }
  75%  { transform:translateY(-220px)rotate(-10deg) translateX(-10px); opacity:.35; }
  100% { transform:translateY(-305px) rotate(35deg)  translateX(6px)  ; opacity:0; }
}
/* gp7: 느리게 큰 회전 */
@keyframes gpFloat7 {
  0%   { transform:translateY(0)     rotate(0deg)   scale(1)  ; opacity:0; }
  15%  { opacity:.44; }
  50%  { transform:translateY(-130px) rotate(-120deg)scale(.95); opacity:.40; }
  100% { transform:translateY(-315px) rotate(-240deg)scale(.8) ; opacity:0; }
}

/* 각 파티클: 위치(left/bottom) / 크기(width) / 전용 애니메이션 */
.gp1 { left:8%;  bottom:12%; width:96px;  animation:gpFloat1 8s   ease-in-out infinite 0s; }
.gp2 { left:22%; bottom:30%; width:78px;  animation:gpFloat2 10s  ease-in-out infinite 1.5s; }
.gp3 { left:38%; bottom:8%;  width:108px; animation:gpFloat3 9s   ease-in-out infinite 3s; }
.gp4 { left:55%; bottom:22%; width:72px;  animation:gpFloat4 11s  ease-in-out infinite 0.8s; }
.gp5 { left:70%; bottom:15%; width:90px;  animation:gpFloat5 7.5s ease-in-out infinite 2.2s; }
.gp6 { left:84%; bottom:35%; width:66px;  animation:gpFloat6 9.5s ease-in-out infinite 4s; }
.gp7 { left:48%; bottom:40%; width:84px;  animation:gpFloat7 12s  ease-in-out infinite 5.5s; }

/* 3D 카드 영역 */
.hero-vis { display:flex; justify-content:center; align-items:center; position:relative; }
.card-scene { perspective:1200px; position:relative; width:320px; height:420px; }
.card-main {
  position:absolute; top:20px; left:0; width:290px;
  background:#fff; border-radius:24px; padding:28px 24px;
  box-shadow:var(--sh2); border:1px solid #E8F0FE;
  transform:perspective(1200px) rotateY(-10deg) rotateX(4deg);
  animation:floatM 4s ease-in-out infinite; will-change:transform;
}
@keyframes floatM {
  0%,100%{transform:perspective(1200px) rotateY(-10deg) rotateX(4deg) translateY(0);}
  50%{transform:perspective(1200px) rotateY(-10deg) rotateX(4deg) translateY(-12px);}
}
.cm-badge {
  display:inline-flex; align-items:center; gap:4px;
  background:#FFF3E0; color:#E65100;
  font-size:.72rem; font-weight:700;
  padding:4px 10px; border-radius:20px; margin-bottom:14px;
}
.cm-logo { display:flex; align-items:center; gap:9px; margin-bottom:18px; }
.cm-logo img { width:34px; height:34px; object-fit:contain; }
.cm-logo span { font-size:.95rem; font-weight:800; }
.cm-plabel { font-size:.8rem; color:var(--gray); margin-bottom:4px; }
.cm-price { font-size:2.2rem; font-weight:900; color:var(--blue); letter-spacing:-1px; line-height:1; margin-bottom:3px; }
.cm-price span { font-size:.95rem; font-weight:600; color:var(--gray); }
.cm-sub { font-size:.78rem; color:var(--gray); margin-bottom:18px; }
.cm-div { height:1px; background:#F3F4F6; margin-bottom:18px; }
.cm-gift {
  background:linear-gradient(135deg,#0052CC08,#2684FF12);
  border:1px solid #C7D7FD; border-radius:12px;
  padding:13px 15px; display:flex; align-items:center; gap:10px;
}
.cm-gift img { width:28px; height:28px; object-fit:contain; }
.cm-gift-label { font-size:.72rem; color:var(--gray); }
.cm-gift-val { font-size:.95rem; font-weight:800; color:var(--blue); }

.card-f1 {
  position:absolute; top:0; right:-10px;
  background:#fff; border-radius:14px; padding:11px 15px;
  box-shadow:0 8px 28px rgba(0,82,204,.14); border:1px solid #E8F0FE;
  display:flex; align-items:center; gap:9px;
  transform:perspective(1200px) rotateY(5deg) rotateX(-3deg);
  animation:floatF1 3.5s ease-in-out infinite .5s; will-change:transform;
  white-space:nowrap;
}
@keyframes floatF1 {
  0%,100%{transform:perspective(1200px) rotateY(5deg) rotateX(-3deg) translateY(0);}
  50%{transform:perspective(1200px) rotateY(5deg) rotateX(-3deg) translateY(-8px);}
}
.card-f2 {
  position:absolute; bottom:30px; right:0;
  background:var(--blue); border-radius:14px; padding:11px 15px;
  box-shadow:0 8px 24px rgba(0,82,204,.3);
  display:flex; align-items:center; gap:9px;
  transform:perspective(1200px) rotateY(5deg) rotateX(3deg);
  animation:floatF2 4.2s ease-in-out infinite 1s; will-change:transform;
  white-space:nowrap;
}
@keyframes floatF2 {
  0%,100%{transform:perspective(1200px) rotateY(5deg) rotateX(3deg) translateY(0);}
  50%{transform:perspective(1200px) rotateY(5deg) rotateX(3deg) translateY(-8px);}
}
.fic { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.fic.b { background:var(--pale); color:var(--blue); }
.fic.w { background:rgba(255,255,255,.25); color:#fff; }
.ftxt-label { font-size:.68rem; color:var(--gray); }
.ftxt-label.wt { color:rgba(255,255,255,.75); }
.ftxt-val { font-size:.88rem; font-weight:800; }
.ftxt-val.wt { color:#fff; }

/* ════════════════════════════
   LIVE FEED
════════════════════════════ */
.live-sec { padding:48px 0 0; }
.live-inner { max-width:1200px; margin:0 auto; padding:0 20px; }
.live-box {
  background:#0a1628; border-radius:var(--r);
  overflow:hidden; box-shadow:0 8px 32px rgba(10,22,40,.3);
  max-width:640px; margin:0 auto;
}
.live-head {
  display:flex; align-items:center; gap:8px;
  padding:13px 18px 11px; border-bottom:1px solid rgba(255,255,255,.07);
}
.live-dot {
  width:9px; height:9px; border-radius:50%; background:#EF4444; flex-shrink:0;
  animation:ldot 1.4s ease-in-out infinite;
}
@keyframes ldot {
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(239,68,68,.5);}
  50%{opacity:.8;box-shadow:0 0 0 5px rgba(239,68,68,0);}
}
.live-htxt { font-size:.82rem; font-weight:700; color:rgba(255,255,255,.85); }
.live-pill {
  background:rgba(239,68,68,.2); border:1px solid rgba(239,68,68,.35);
  color:#FCA5A5; font-size:.65rem; font-weight:700;
  padding:2px 8px; border-radius:20px; letter-spacing:.5px;
}

/* 수직 스크롤 */
.vert-box { height:168px; overflow:hidden; padding:8px 18px 10px; }
.vert-track {
  display:flex; flex-direction:column; gap:0;
  animation:scrollUp 22s linear infinite;
}
.vert-track:hover { animation-play-state:paused; }
@keyframes scrollUp {
  0%{transform:translateY(0);}
  100%{transform:translateY(-50%);}
}
.v-row {
  display:flex; align-items:center; gap:10px;
  padding:7px 0; border-bottom:1px solid rgba(255,255,255,.05);
  flex-shrink:0;
}
.v-no {
  width:20px; height:20px; border-radius:6px;
  background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  font-size:.63rem; font-weight:700; color:rgba(255,255,255,.45); flex-shrink:0;
}
.v-body { flex:1; min-width:0; }
.v-name { font-size:.78rem; font-weight:700; color:rgba(255,255,255,.85); }
.v-prod { font-size:.68rem; color:rgba(255,255,255,.42); margin-top:1px; }
.v-done { font-size:.68rem; color:#86EFAC; font-weight:600; flex-shrink:0; }

/* ════════════════════════════
   SECTION COMMON
════════════════════════════ */
.sec { padding:72px 0; }
.sec-inner { max-width:1200px; margin:0 auto; padding:0 20px; }
.sec-title { font-size:1.8rem; font-weight:900; text-align:center; letter-spacing:-.8px; margin-bottom:8px; }
.sec-title .c { color:var(--blue); }
.sec-sub { text-align:center; color:var(--gray); font-size:.95rem; margin-bottom:44px; }

/* ════════════════════════════
   FEATURES
════════════════════════════ */
.feat-sec { background:var(--lgray); }
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feat-card {
  background:#fff; border-radius:var(--r);
  padding:30px 22px; text-align:center;
  box-shadow:var(--sh); border:1px solid transparent;
  transition:all .3s;
}
.feat-card:hover { transform:translateY(-6px); border-color:var(--blue); box-shadow:var(--sh2); }
.feat-icon {
  width:64px; height:64px; border-radius:18px;
  background:var(--pale); display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px;
}
.feat-icon img { width:36px; height:36px; object-fit:contain; }
.feat-card h3 { font-size:1.05rem; font-weight:800; margin-bottom:8px; }
.feat-card p { font-size:.88rem; color:var(--gray); line-height:1.6; }

/* ════════════════════════════
   PRODUCTS
════════════════════════════ */
.prod-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.prod-card {
  background:#fff; border-radius:var(--r);
  border:2px solid #E5E7EB; overflow:hidden;
  transition:all .3s; position:relative;
}
.prod-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--blue), var(--blue2));
  opacity:0; transition:opacity .3s;
}
.prod-card:hover { border-color:var(--blue); transform:translateY(-4px); box-shadow:var(--sh2); }
.prod-card:hover::before, .prod-card.best::before { opacity:1; }
.prod-card.best { border-color:var(--blue); background:linear-gradient(135deg,#F0F4FF,#FAFBFF); }
.prod-rec {
  position:absolute; top:14px; right:14px;
  background:var(--blue); color:#fff; font-size:.7rem; font-weight:700;
  padding:4px 10px; border-radius:20px; z-index:1;
}
.prod-rec.hot { background:#EF4444; }
.prod-body { padding:18px; }
.prod-name { font-size:1.05rem; font-weight:900; margin-bottom:5px; }
.prod-desc { font-size:.82rem; color:var(--gray); margin-bottom:14px; line-height:1.5; }
.prod-plabel { font-size:.75rem; color:var(--gray); margin-bottom:3px; }
.prod-price { font-size:1.55rem; font-weight:900; color:var(--blue); letter-spacing:-.5px; margin-bottom:3px; }
.prod-price sub { font-size:.85rem; font-weight:600; }
.prod-note { font-size:.72rem; color:var(--gray); margin-bottom:12px; }
.prod-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
.ptag { background:var(--pale); color:var(--blue); font-size:.72rem; font-weight:600; padding:3px 9px; border-radius:6px; }
.prod-gift {
  display:flex; align-items:center; gap:8px;
  background:#FFFBEB; border:1px solid #FDE68A;
  border-radius:10px; padding:10px 13px; margin-bottom:14px;
}
.prod-gift img { width:22px; height:22px; object-fit:contain; }
.prod-gift-label { font-size:.68rem; color:#92400E; }
.prod-gift-val { font-size:.9rem; font-weight:900; color:#B45309; }
.prod-btn {
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; padding:13px;
  background:var(--blue); color:#fff;
  font-size:.9rem; font-weight:700; border-radius:10px; transition:background .2s;
}
.prod-btn:hover { background:var(--blue2); }
.prod-card:not(.best) .prod-btn { background:#fff; color:var(--blue); border:2px solid var(--blue); }
.prod-card:not(.best) .prod-btn:hover { background:var(--blue); color:#fff; }

/* ════════════════════════════
   REVIEWS
════════════════════════════ */
.review-sec { background:var(--lgray); padding:72px 0; }
.review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.rv-card {
  background:#fff; border-radius:var(--r);
  padding:22px; box-shadow:var(--sh);
  border:1px solid #F3F4F6; transition:all .3s;
}
.rv-card:hover { transform:translateY(-4px); box-shadow:var(--sh2); }
.rv-top { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.rv-av {
  width:42px; height:42px; border-radius:50%;
  background:var(--pale); display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}
.rv-name { font-size:.88rem; font-weight:700; }
.rv-loc { font-size:.72rem; color:var(--gray); margin-top:1px; }
.rv-stars { color:#F59E0B; font-size:.78rem; letter-spacing:1px; margin-bottom:8px; }
.rv-text { font-size:.84rem; color:#374151; line-height:1.6; margin-bottom:12px; }
.rv-badge {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--pale); color:var(--blue);
  font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:20px;
}
.rv-badge img { width:14px; height:14px; object-fit:contain; }

/* ════════════════════════════
   FAQ
════════════════════════════ */
.faq-list { max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.faq-item { background:#fff; border-radius:var(--r); border:1px solid #E5E7EB; overflow:hidden; }
.faq-q {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; cursor:pointer; gap:14px;
}
.faq-ql { display:flex; align-items:center; gap:11px; }
.faq-qb {
  width:26px; height:26px; border-radius:7px;
  background:var(--blue); color:#fff; font-size:.75rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.faq-qt { font-size:.92rem; font-weight:700; }
.faq-arr { color:var(--gray); font-size:.82rem; transition:transform .3s; flex-shrink:0; }
.faq-item.open .faq-arr { transform:rotate(180deg); }
.faq-a {
  display:none; padding:14px 22px 18px;
  font-size:.88rem; color:var(--gray); line-height:1.7;
  border-top:1px solid #F3F4F6;
}
.faq-item.open .faq-a { display:block; }
.faq-a strong { color:var(--blue); }
.faq-a a { color:var(--blue); font-weight:700; }

/* ════════════════════════════
   CTA BOTTOM
════════════════════════════ */
.cta-sec {
  background:#F8FAFF;
  border-top:1px solid #E8F0FE;
  padding:80px 20px; text-align:center;
}
.cta-sec h2 { font-size:2rem; font-weight:900; color:#1a1a2e; letter-spacing:-.8px; margin-bottom:10px; }
.cta-sec p { color:var(--gray); font-size:1rem; margin-bottom:32px; }
.cta-phone { font-size:2rem; font-weight:900; color:var(--blue); display:block; margin-bottom:10px; }
.cta-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.cta-bw {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--blue); color:#fff; font-size:.95rem; font-weight:700;
  padding:14px 28px; border-radius:12px;
  border:none; transition:all .2s;
}
.cta-bw:hover { background:#003fa3; transform:translateY(-2px); }
.cta-bo {
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; border:1.5px solid var(--blue);
  color:var(--blue); font-size:.95rem; font-weight:700;
  padding:14px 28px; border-radius:12px; transition:all .2s;
}
.cta-bo:hover { background:var(--pale); transform:translateY(-2px); }

/* ════════════════════════════
   FOOTER
════════════════════════════ */
.footer { background:#111827; padding:40px 0 80px; }
.footer-inner {
  max-width:1200px; margin:0 auto; padding:0 20px;
  display:flex; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; gap:28px;
}
.footer-logo { display:flex; align-items:center; gap:7px; margin-bottom:12px; }
.footer-logo img { width:26px; height:26px; opacity:.7; }
.footer-logo span { font-size:.95rem; font-weight:800; color:rgba(255,255,255,.6); }
.footer-info { font-size:.8rem; color:rgba(255,255,255,.38); line-height:1.9; }
.footer-links { display:flex; flex-direction:column; gap:8px; }
.footer-links a { font-size:.82rem; color:rgba(255,255,255,.42); transition:color .2s; }
.footer-links a:hover { color:#fff; }
.footer-copy {
  max-width:1200px; margin:20px auto 0; padding:18px 20px 0;
  border-top:1px solid rgba(255,255,255,.07);
  font-size:.74rem; color:rgba(255,255,255,.22); text-align:center;
}

/* ════════════════════════════
   FLOATING
════════════════════════════ */
.floating { position:fixed; right:18px; bottom:110px; z-index:900; display:none; flex-direction:column; gap:9px; }
.fl {
  width:50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; box-shadow:0 4px 16px rgba(0,0,0,.2);
  transition:transform .2s, box-shadow .2s; position:relative; cursor:pointer;
}
.fl:hover { transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,0,0,.25); }
.fl.call { background:var(--blue); color:#fff; }
.fl.as   { background:#E53E3E; color:#fff; }
.fl.kak  { background:#FEE500; color:#3A1D1D; }
.fl-tip {
  position:absolute; right:58px;
  background:rgba(0,0,0,.72); color:#fff;
  font-size:.68rem; font-weight:600; padding:4px 9px; border-radius:6px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s;
}
.fl:hover .fl-tip { opacity:1; }

/* ════════════════════════════
   CHATBOT
════════════════════════════ */
.chat-trig {
  position: fixed; right: 24px; bottom: 60px;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--blue); color: #fff; font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,82,204,.32);
  cursor: pointer; z-index: 901; border: none;
  transition: transform .2s, box-shadow .2s;
}
.chat-trig:hover { transform: scale(1.07); box-shadow: 0 6px 20px rgba(0,82,204,.45); }
.chat-trig .chatbot-tooltip {
  position: absolute; right: 62px;
  background: #1a1a2e; color: #fff;
  font-size: .73rem; font-weight: 700;
  padding: 5px 10px; border-radius: 8px;
  white-space: nowrap; opacity: 1; pointer-events: none;
}

.chat-widget {
  position: fixed; right: 24px; bottom: 124px;
  width: 310px; background: #fff;
  border: 1px solid #E5E7EB; border-radius: 16px;
  box-shadow: 0 8px 44px rgba(0,0,0,.16); z-index: 902;
  display: none; flex-direction: column; overflow: hidden;
  animation: chatbot-slide-up .22s ease;
}
.chat-widget.open { display: flex; }
@keyframes chatbot-slide-up {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}
.cwhead {
  background: var(--blue);
  padding: 12px 16px; display: flex; align-items: center; justify-content: space-between;
}
.cwhead-l { display: flex; align-items: center; gap: 9px; }
.cwav {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.cwname { font-size: .88rem; font-weight: 700; color: #fff; }
.cwst { font-size: .68rem; color: rgba(255,255,255,.72); }
.cwx { background: none; border: none; color: rgba(255,255,255,.65); cursor: pointer; font-size: 1.2rem; padding: 0; line-height: 1; }
.cwx:hover { color: #fff; }
.cwbody {
  flex: 1; overflow-y: auto; padding: 14px 14px 8px;
  display: flex; flex-direction: column; gap: 10px; min-height: 0; max-height: 260px;
}
.cb {
  max-width: 92%; padding: 10px 13px;
  border-radius: 0 12px 12px 12px;
  font-size: .84rem; line-height: 1.52;
}
.cb.bot { background: #f0f4ff; color: #1a1a2e; border: 1px solid #e8ecf0; align-self: flex-start; }
.cb.usr { background: var(--blue); color: #fff; border-radius: 12px 0 12px 12px; align-self: flex-end; }
.chps { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.chp {
  background: #fff; border: 1.5px solid var(--blue); color: var(--blue);
  font-size: .82rem; font-weight: 600; padding: 8px 14px; border-radius: 20px;
  cursor: pointer; transition: all .2s; text-align: left;
}
.chp:hover { background: var(--blue); color: #fff; }
.cwfooter {
  padding: 10px 14px; border-top: 1px solid #E5E7EB; display: flex; gap: 8px;
}
.cwfooter a {
  flex: 1; text-align: center; font-size: .75rem; font-weight: 700;
  padding: 8px 6px; border-radius: 8px; text-decoration: none; transition: opacity .2s;
}
.cwfooter a:hover { opacity: .85; }
.cwfooter-call { background: var(--blue); color: #fff; }
.cwfooter-kakao { background: #FEE500; color: #191919; }

/* ════════════════════════════
   USIM PROMO  —  유심 결합 사은품 배너
════════════════════════════ */
.usim-promo-sec { padding:0 0 0; background:#fff; }
.usim-promo-box {
  background:linear-gradient(135deg,#0a1628 0%,#0d2240 100%);
  border-radius:var(--r); padding:40px 44px;
  display:flex; align-items:center; justify-content:space-between;
  gap:32px; overflow:hidden; position:relative;
}
.usim-promo-box::before {
  content:''; position:absolute; top:-80px; right:160px;
  width:300px; height:300px;
  background:radial-gradient(circle,rgba(38,132,255,.15) 0%,transparent 65%);
  border-radius:50%; pointer-events:none;
}
.usim-promo-left { flex:1; }
.usim-promo-badge {
  display:inline-block; background:rgba(38,132,255,.2);
  border:1px solid rgba(38,132,255,.4); color:#60A5FA;
  font-size:.75rem; font-weight:700; padding:4px 12px;
  border-radius:20px; margin-bottom:14px;
}
.usim-promo-left h2 {
  font-size:1.7rem; font-weight:900; color:#fff;
  line-height:1.25; letter-spacing:-1px; margin-bottom:12px;
}
.usim-promo-left h2 span { color:#60A5FA; }
.usim-promo-left p {
  font-size:.88rem; color:rgba(255,255,255,.65);
  line-height:1.7; margin-bottom:20px;
}
.usim-promo-left p strong { color:#fff; }

/* 비교 박스 */
.usim-promo-compare {
  display:flex; align-items:center; gap:12px;
}
.upc-item {
  background:rgba(255,255,255,.08); border-radius:10px;
  padding:10px 16px; text-align:center; border:1px solid rgba(255,255,255,.12);
}
.upc-item.best {
  background:rgba(38,132,255,.2); border-color:rgba(38,132,255,.5);
}
.upc-label { font-size:.7rem; color:rgba(255,255,255,.55); margin-bottom:4px; }
.upc-val { font-size:.95rem; color:#fff; }
.upc-val strong { color:#60A5FA; font-size:1.1rem; }
.upc-item.best .upc-val strong { color:#BFDBFE; }
.upc-arrow { color:rgba(255,255,255,.4); font-size:.9rem; }

/* 오른쪽 이미지 + 버튼 */
.usim-promo-right {
  display:flex; flex-direction:column; align-items:center; gap:16px; flex-shrink:0;
}
.usim-promo-img {
  width:90px; height:90px; object-fit:contain;
  filter:brightness(0) invert(1); opacity:.25;
}
.usim-promo-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:#2684FF; color:#fff;
  font-size:.9rem; font-weight:700; padding:13px 22px;
  border-radius:12px; text-decoration:none; white-space:nowrap;
  transition:all .2s;
}
.usim-promo-btn:hover { background:#0052CC; transform:translateY(-2px); }

/* 반응형 */
@media(max-width:768px) {
  .usim-promo-box { flex-direction:column; padding:28px 22px; text-align:center; }
  .usim-promo-left h2 { font-size:1.35rem; }
  .usim-promo-compare { justify-content:center; }
  .usim-promo-right { flex-direction:row; }
  .usim-promo-img { width:60px; height:60px; }
}

/* ════════════════════════════
   EXTRA BENEFITS  —  가족결합 + 제휴카드 섹션
════════════════════════════ */
.extra-sec { background:var(--lgray); }
.extra-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.extra-card {
  background:#fff; border-radius:var(--r);
  border:2px solid #E5E7EB; padding:28px 24px;
  display:flex; gap:20px; align-items:flex-start;
  transition:all .3s;
}
.extra-card:hover { border-color:var(--blue); box-shadow:var(--sh2); transform:translateY(-4px); }
.extra-card.card-benefit { border-color:#C7D7FD; background:linear-gradient(135deg,#F0F4FF,#fff); }
.extra-card.card-benefit:hover { border-color:var(--blue); }
.extra-icon {
  width:58px; height:58px; border-radius:16px;
  background:var(--pale); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.extra-icon img { width:32px; height:32px; object-fit:contain; }
.extra-body { flex:1; }
.extra-label {
  display:inline-block; background:var(--blue); color:#fff;
  font-size:.68rem; font-weight:700; padding:3px 10px; border-radius:20px; margin-bottom:8px;
}
.extra-body h3 { font-size:1.05rem; font-weight:900; margin-bottom:8px; }
.extra-body p { font-size:.86rem; color:var(--gray); line-height:1.65; margin-bottom:14px; }
.extra-body p strong { color:var(--blue); }
.extra-btn {
  display:inline-flex; align-items:center;
  background:none; border:1.5px solid var(--blue); color:var(--blue);
  font-size:.84rem; font-weight:700; padding:9px 16px; border-radius:10px;
  cursor:pointer; transition:all .2s; font-family:inherit;
  text-decoration:none;
}
.extra-btn:hover { background:var(--blue); color:#fff; }

/* ════════════════════════════
   MODAL  —  제휴카드 할인 팝업
════════════════════════════ */
/* 오버레이 */
.btv-extra-modal {
  position:fixed; inset:0; z-index:1100;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.btv-extra-modal.active {
  opacity:1; pointer-events:auto;
}
/* 배경 딤 */
.btv-extra-modal-backdrop {
  position:absolute; inset:0;
  background:rgba(0,0,0,.52); cursor:pointer;
}
/* 모달 박스 */
.btv-extra-modal-box {
  position:relative; z-index:1;
  background:#fff; border-radius:18px;
  width:min(680px, calc(100vw - 32px));
  max-height:88vh; overflow-y:auto;
  padding:28px 28px 24px;
  box-shadow:0 16px 60px rgba(0,0,0,.22);
  transform:translateY(16px); transition:transform .25s;
}
.btv-extra-modal.active .btv-extra-modal-box {
  transform:translateY(0);
}
/* 제목 */
.btv-extra-modal-title {
  font-size:1.25rem; font-weight:900; color:#1a1a2e;
  margin-bottom:18px; letter-spacing:-.5px;
}
/* 닫기 버튼 */
.btv-extra-modal-close {
  position:absolute; top:16px; right:18px;
  background:none; border:none; font-size:1.5rem;
  color:var(--gray); cursor:pointer; line-height:1; padding:4px;
}
.btv-extra-modal-close:hover { color:#1a1a2e; }
/* 카드 그리드 */
.card-discount-grid { display:grid; gap:16px; }
/* 카드 1개 */
.discount-card {
  border:1.5px solid #E5E7EB; border-radius:12px; padding:16px;
}
.discount-card.best { border-color:var(--blue); background:#F0F4FF; }
.dc-head {
  display:flex; align-items:center; gap:14px; margin-bottom:12px;
}
.dc-head img { width:72px; height:auto; object-fit:contain; flex-shrink:0; }
.dc-head h4 { font-size:1rem; font-weight:800; margin:0; }
.dc-body {
  background:var(--lgray); padding:11px 14px; border-radius:8px; margin-bottom:10px;
}
.dc-body.best { background:#E0E8FF; }
.dc-body p { font-size:.84rem; margin:4px 0; }
.dc-fee { font-size:.8rem; color:var(--gray); margin:6px 0 10px; }
.dc-link {
  display:block; padding:8px 14px; background:var(--blue); color:#fff;
  border-radius:8px; font-size:.88rem; font-weight:700; text-align:center;
  transition:background .2s; text-decoration:none;
}
.dc-link:hover { background:var(--blue2); }
/* 안내 문구 */
.dc-notice {
  background:var(--lgray); padding:11px 14px; border-radius:8px;
  margin-top:18px; font-size:.82rem; color:#4B5563;
  display:flex; gap:7px; align-items:flex-start; line-height:1.5;
}

/* ── 모달 공통 내부 요소 ────────────────── */
/* 인트로 문구 */
.modal-intro {
  font-size:.95rem; color:#374151; line-height:1.7;
  margin-bottom:10px; text-align:center;
}
/* 해시태그 */
.modal-tags {
  text-align:center; font-size:.82rem; font-weight:700;
  color:var(--blue); margin-bottom:20px;
}
/* 블록 (특징/테이블 묶음) */
.modal-block { margin-bottom:20px; }
.modal-block-title {
  font-size:.95rem; font-weight:800; color:#1a1a2e;
  margin-bottom:10px; padding-bottom:6px;
  border-bottom:2px solid var(--pale);
}
/* 체크리스트 */
.modal-check-list { list-style:none; display:flex; flex-direction:column; gap:7px; }
.modal-check-list li {
  font-size:.88rem; color:#374151; padding-left:20px; position:relative;
  line-height:1.5;
}
.modal-check-list li::before {
  content:'✓'; position:absolute; left:0;
  color:var(--blue); font-weight:800;
}
/* 테이블 */
.table-wrapper { overflow-x:auto; }
.modal-table {
  width:100%; border-collapse:collapse; font-size:.84rem;
  margin-top:8px;
}
.modal-table th {
  background:var(--blue); color:#fff;
  padding:9px 12px; text-align:center;
  font-size:.8rem; font-weight:700; white-space:nowrap;
}
.modal-table td {
  border:1px solid #E5E7EB; padding:10px 12px;
  vertical-align:top; line-height:1.6;
}
.modal-table td.tc { text-align:center; }
.modal-table td strong { color:var(--blue); }
.modal-table td small { font-size:.72rem; color:var(--gray); }
/* 주의사항 */
.modal-notice {
  background:var(--lgray); border-radius:8px; padding:12px 14px;
  font-size:.78rem; color:#6B7280; line-height:1.8; margin-top:4px;
}
/* 모달 푸터 */
.btv-extra-modal-footer {
  border-top:1px solid #F3F4F6; margin-top:20px; padding-top:16px;
  text-align:center;
}
/* 전화 상담 버튼 */
.btv-extra-modal-call {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--blue); color:#fff;
  font-size:.95rem; font-weight:700; padding:13px 28px;
  border-radius:12px; text-decoration:none; transition:background .2s;
}
.btv-extra-modal-call:hover { background:var(--blue2); }

/* ════════════════════════════
   RESPONSIVE
════════════════════════════ */
@media(max-width:900px) {
  .prod-grid { grid-template-columns:1fr; }
  .review-grid { grid-template-columns:1fr; }
  .extra-grid { grid-template-columns:1fr; }
  .feat-grid { grid-template-columns:1fr; gap:12px; }
  .feat-card { text-align:left; display:flex; align-items:flex-start; gap:16px; padding:22px 18px; }
  .feat-icon { margin:0; flex-shrink:0; width:52px; height:52px; }
  .footer-inner { flex-direction:column; gap:20px; }
}
@media(max-width:768px) {
  .hnav { display:none; }
  .hamburger { display:block; }
  .hero-inner { grid-template-columns:1fr; gap:0; padding:36px 20px 32px; }
  .hero-vis { display:none; }
  /* 모바일 파티클 원래 크기 유지 */
  .gp1 { width:64px; } .gp2 { width:52px; } .gp3 { width:72px; }
  .gp4 { width:48px; } .gp5 { width:60px; } .gp6 { width:44px; } .gp7 { width:56px; }
  .hero-h1 { font-size:2rem; letter-spacing:-1px; }
  .hero-desc { font-size:.95rem; }
  .hero-btns { flex-direction:column; }
  .btn-p, .btn-s { justify-content:center; }
  .sec-title { font-size:1.45rem; }
  .cta-sec h2 { font-size:1.5rem; color:#1a1a2e; }
  .cta-phone { font-size:1.65rem; }
  .cta-btns { flex-direction:column; align-items:center; }
  .floating { display:flex; }
  .chat-trig { bottom: 18px; }
  .chat-widget { width:calc(100vw - 36px); right:18px; bottom: 82px; }
  .live-box { max-width:100%; }
}
@media(max-width:480px) {
  .hero-h1 { font-size:1.75rem; }
}