:root{
  --blue:#1D3F91;
  --blue-deep:#122A63;
  --navy-deep:#09173A;
  --blue-soft:#EAEEFA;
  --red:#D6293D;
  --red-deep:#A81F2D;
  --ink:#171923;
  --ink-soft:#5B6072;
  --ink-faint:#8B95A1;
  --bg:#F5F5FA;
  --card:#F0F1FA;
  --line:#E7E8F2;
  --radius:20px;
  --maxw:520px;
  --red-grad: linear-gradient(135deg, #E03246 0%, var(--red) 55%, #C32436 100%);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, "Malgun Gothic", "Segoe UI", sans-serif;
  background:#fff; color:var(--ink); line-height:1.5;
  -webkit-font-smoothing:antialiased; min-width:360px; padding-bottom:56px;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

/* Header */
header{background:var(--navy-deep);}
.gnb-inner{max-width:var(--maxw); margin:0 auto; padding:20px 24px; display:flex; align-items:center; justify-content:space-between;}
.brand img{height:30px; width:auto;}
.gnb-burger{width:30px; height:22px; display:flex; flex-direction:column; justify-content:space-between; background:none; border:none; cursor:pointer; padding:0; z-index:420; position:relative;}
.gnb-burger span{display:block; width:100%; height:2.5px; background:#fff; border-radius:2px; transition:transform .3s ease, opacity .2s ease;}
.gnb-burger.open span:nth-child(1){transform:translateY(9.75px) rotate(45deg);}
.gnb-burger.open span:nth-child(2){opacity:0;}
.gnb-burger.open span:nth-child(3){transform:translateY(-9.75px) rotate(-45deg);}
.nav-drawer{position:fixed; inset:0; z-index:400; background:rgba(9,23,54,0.97); backdrop-filter:blur(8px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; opacity:0; pointer-events:none; transition:opacity .28s ease;}
.nav-drawer.open{opacity:1; pointer-events:auto;}
.nav-drawer a{color:#fff; font-size:20px; font-weight:800; padding:16px 28px; border-radius:12px; transition:background-color .2s ease;}
.nav-drawer a:hover{background:rgba(255,255,255,0.1);}

/* Page hero */
.page-hero{background:var(--navy-deep); color:#fff; padding:20px 0 46px; text-align:center;}
.page-hero h1{font-size:clamp(24px,7vw,30px); font-weight:800; letter-spacing:-0.02em;}
.page-hero p{margin-top:10px; font-size:14px; color:rgba(255,255,255,0.7);}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:16px 26px; border-radius:14px; font-weight:800; font-size:16px; border:none; cursor:pointer; white-space:nowrap; transition:filter .12s ease, transform .12s ease;}
.btn:active{transform:scale(0.98);}
.btn-blue{background:var(--red-grad); color:#fff; box-shadow:0 14px 26px -12px rgba(214,41,61,0.45);}
.btn-full{width:100%;}

.sec-pad{padding:50px 0;}
.head{margin-bottom:26px; text-align:center;}
.head .eyebrow{display:block; font-size:14px; font-weight:800; color:var(--blue); margin-bottom:8px;}
.head h2{font-size:clamp(21px,5.5vw,26px); font-weight:800; letter-spacing:-0.02em; line-height:1.4; color:var(--ink);}
.head h2 b{color:var(--blue);}
.head p{margin-top:10px; font-size:14px; color:var(--ink-soft); line-height:1.6;}
.alt-bg{background:var(--bg);}

/* Product cards */
.why-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
.why-card{position:relative; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 14px 26px -16px rgba(18,20,43,0.25); padding-bottom:20px;}
.why-best{position:absolute; top:0; left:14px; background:var(--red-grad); color:#fff; font-size:10.5px; font-weight:800; letter-spacing:0.03em; padding:5px 10px; border-radius:0 0 7px 7px;}
.why-flag{padding:26px 16px 6px; text-align:center;}
.why-ico{position:relative; width:50px; height:50px; border-radius:50%; background:linear-gradient(150deg, #ED5468 0%, var(--red) 55%, var(--red-deep) 100%); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; box-shadow:inset 0 2px 3px rgba(255,255,255,0.5), inset 0 -4px 6px rgba(0,0,0,0.3), 0 10px 16px -6px rgba(214,41,61,0.55);}
.why-ico::before{content:""; position:absolute; top:4px; left:9px; width:16px; height:8px; border-radius:50%; background:rgba(255,255,255,0.55); filter:blur(2px);}
.why-ico svg{width:22px; height:22px;}
.why-card-blue .why-ico{background:linear-gradient(150deg, #4A7FE0 0%, var(--blue) 55%, var(--blue-deep) 100%); box-shadow:inset 0 2px 3px rgba(255,255,255,0.5), inset 0 -4px 6px rgba(0,0,0,0.3), 0 10px 16px -6px rgba(29,63,145,0.55);}
.why-card-blue .why-badge{background:linear-gradient(135deg, #4A7FE0, var(--blue-deep));}
.why-card-mint .why-ico{background:linear-gradient(150deg, #3FD9C4 0%, #16B8A2 55%, #0E8A7A 100%); box-shadow:inset 0 2px 3px rgba(255,255,255,0.5), inset 0 -4px 6px rgba(0,0,0,0.3), 0 10px 16px -6px rgba(22,184,162,0.55);}
.why-card-mint .why-badge{background:linear-gradient(135deg, #3FD9C4, #0E8A7A);}
.why-title{display:block; font-size:16px; font-weight:800; color:var(--ink); line-height:1.35;}
.why-badge{margin:14px 16px 0; background:var(--red-grad); color:#fff; font-size:12.5px; font-weight:800; text-align:center; padding:9px 10px; border-radius:9px;}
.why-list{margin-top:14px; padding:0 18px; display:flex; flex-direction:column; gap:8px;}
.why-list li{display:flex; align-items:center; justify-content:center; gap:8px; font-size:12px; color:var(--ink-soft); font-weight:600;}
.why-list li svg{width:14px; height:14px; color:#2AAE6C; flex-shrink:0;}

/* Compare */
.cmp-wrap{display:flex; gap:12px; margin-top:22px;}
.cmp-col{flex:1; border-radius:16px; overflow:hidden; border:1px solid var(--line); transition:transform .25s ease, box-shadow .25s ease;}
.cmp-col-head{padding:14px 4px; text-align:center; font-size:16px; font-weight:800; color:var(--ink-faint); background:var(--bg);}
.cmp-col.hi .cmp-col-head{position:relative; overflow:hidden; background:var(--red-grad); color:#fff;}
.cmp-col.hi .cmp-col-head::after{content:""; position:absolute; top:0; left:-60%; width:50%; height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent); animation:cmp-shine 3s ease-in-out infinite;}
@keyframes cmp-shine{0%{left:-60%;} 55%{left:130%;} 100%{left:130%;}}
.cmp-col.hi{animation:cmp-pulse 2.6s ease-in-out infinite;}
@keyframes cmp-pulse{0%,100%{box-shadow:0 0 0 0 rgba(214,41,61,0.35);} 50%{box-shadow:0 0 0 8px rgba(214,41,61,0);}}
.cmp-col li{padding:16px 4px; text-align:center; font-size:15px; font-weight:700; color:var(--ink-faint); border-top:1px solid var(--line);}
.cmp-col.hi li{color:var(--blue-deep); font-weight:800;}

/* Live status */
.dark-sec{background:var(--navy-deep); color:#fff;}
.dark-sec .head .eyebrow{color:#8FBBFF;}
.dark-sec .head h2{color:#fff;}
.dark-sec .head h2 b{color:#FF6B7A;}
.live-tag{display:inline-flex; align-items:center; gap:7px;}
.live-dot{width:8px; height:8px; border-radius:50%; background:#FF4D5E; animation:live-pulse 1.4s ease-in-out infinite;}
@keyframes live-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,77,94,0.5);} 50%{box-shadow:0 0 0 6px rgba(255,77,94,0);}}
.live-grid{display:flex; flex-direction:column; gap:10px;}
.live-row{display:flex; align-items:center; justify-content:space-between; gap:10px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 18px; transition:background-color .4s ease;}
.live-name{font-size:13px; color:var(--ink-soft); font-weight:700;}
.live-amt{font-size:19px; font-weight:800; background:var(--red-grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.live-status{font-size:11px; font-weight:800; color:#5CE0A0; background:rgba(92,224,160,0.12); padding:5px 10px; border-radius:999px; flex-shrink:0;}

/* Trust */
.trust-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.trust-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px 14px; text-align:center;}
.trust-ico{width:44px; height:44px; border-radius:50%; background:var(--red-grad); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 12px;}
.trust-card h4{font-size:14px; font-weight:800; line-height:1.4; color:var(--ink);}
.trust-card p{margin-top:8px; font-size:11.5px; color:var(--ink-soft); line-height:1.6;}

/* FAQ */
.faq-item{background:var(--card); border-radius:14px; margin-bottom:8px; overflow:hidden;}
.faq-q{width:100%; display:flex; align-items:center; gap:12px; padding:16px 18px; background:none; border:none; text-align:left; cursor:pointer; font-size:13.5px; font-weight:700; color:var(--ink); font-family:inherit;}
.faq-q .plus{margin-left:auto; flex-shrink:0; width:20px; height:20px; position:relative;}
.faq-q .plus::before, .faq-q .plus::after{content:""; position:absolute; background:var(--ink-faint); transition:transform .2s ease;}
.faq-q .plus::before{left:0; top:50%; width:100%; height:2px; margin-top:-1px;}
.faq-q .plus::after{top:0; left:50%; width:2px; height:100%; margin-left:-1px;}
.faq-item.open .plus::after{transform:rotate(90deg);}
.faq-a-wrap{display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease;}
.faq-item.open .faq-a-wrap{grid-template-rows:1fr;}
.faq-a-inner{overflow:hidden;}
.faq-a-inner p{padding:0 18px 16px; font-size:12.5px; color:var(--ink-soft); line-height:1.7;}
.faq-qmark{color:var(--red); margin-right:6px;}

/* CTA */
.page-cta{text-align:center; padding:0 24px 20px;}
.page-cta .btn{max-width:340px; width:100%;}

/* Bottom bar */
.bottom-bar{position:fixed; left:0; right:0; bottom:0; z-index:210; display:flex; border-top:2px solid var(--blue); box-shadow:0 -10px 24px -12px rgba(0,0,0,0.35);}
.bottom-bar a{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:15px 0; font-size:15px; font-weight:800;}
.bottom-bar a svg{width:18px; height:18px; flex-shrink:0;}
.bb-call{background:var(--navy-deep); color:#fff;}
.bb-kakao{background:#FFD93B; color:#181600;}

footer{background:var(--navy-deep); color:rgba(255,255,255,0.6); padding:40px 0; text-align:center;}
footer b{display:block; color:#fff; font-size:15px; font-weight:800; margin-bottom:14px;}
footer p{font-size:11.5px; line-height:1.8;}

@media (min-width:960px){
  :root{--maxw:1180px;}
  body{font-size:16px;}
  .gnb-inner{padding:20px 32px;}
  .sec-pad{padding:80px 0;}
  .page-hero{padding:30px 0 70px;}
  .head{max-width:640px; margin-left:auto; margin-right:auto; margin-bottom:44px;}
  .head h2{font-size:clamp(26px,3vw,34px);}
  .why-grid{grid-template-columns:repeat(4,1fr); gap:24px;}
  .why-title{font-size:19px;}
  .why-badge{font-size:13px; padding:10px 12px;}
  .cmp-wrap{max-width:640px; margin-left:auto; margin-right:auto;}
  .trust-grid{grid-template-columns:repeat(4,1fr); gap:20px;}
  .live-grid{max-width:720px; margin:0 auto;}
  .faq-wrap{max-width:720px; margin:0 auto;}
}