/* ============ 가챠샵온라인 gachashoponline.com — v2 "블루 토이팝" ============ */
:root{
  --blue:#2A4BD7;
  --blue-vivid:#3560F5;
  --navy:#18246B;
  --ink:#1C2440;
  --sky:#EEF4FF;
  --sky-deep:#DCE9FF;
  --yellow:#FFC831;
  --yellow-deep:#F5A800;
  --red:#E94F3D;
  --cream:#FFF6E4;
  --white:#FFFFFF;
  --muted:#5A6485;
  --r-xl:34px;
  --r-lg:24px;
  --r-md:16px;
  --shadow-soft:0 14px 40px -14px rgba(24,36,107,.22);
  --shadow-card:0 10px 30px -12px rgba(24,36,107,.18);
  --font-display:'Jua','Pretendard Variable',Pretendard,sans-serif;
  --font-body:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1100px 500px at 85% -100px, #FFE9B830, transparent),
    radial-gradient(1200px 600px at -10% 5%, #C9DBFF55, transparent),
    var(--sky);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;line-height:1.7;word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
.display{font-family:var(--font-display);font-weight:400;line-height:1.22;letter-spacing:-.005em}
h1.display{font-size:clamp(40px,6vw,72px)}
h2.display{font-size:clamp(30px,4.2vw,48px)}
h3.display{font-size:clamp(21px,2.4vw,27px)}
p.lead{font-size:clamp(16px,1.6vw,19px);color:var(--muted)}
strong{font-weight:800;color:var(--ink)}
.accent{color:var(--blue-vivid)}
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--white);border-radius:99px;padding:8px 18px;
  font-size:13.5px;font-weight:800;color:var(--blue);
  box-shadow:var(--shadow-card);
}
.kicker::before{content:"●";font-size:9px;color:var(--yellow-deep)}

/* ---------- floating nav ---------- */
.navbar{position:sticky;top:14px;z-index:60;margin:14px 0 0}
.navbar .bar{
  max-width:1160px;margin:0 auto;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border-radius:99px;box-shadow:var(--shadow-soft);
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px 10px 22px;
}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:21px;color:var(--navy)}
.logo img{width:34px;height:34px}
nav.menu{display:flex;gap:28px;font-weight:700;font-size:15px;color:#39415f}
nav.menu a:hover{color:var(--blue-vivid)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:99px;padding:13px 26px;font-weight:800;font-size:15.5px;
  transition:transform .15s,box-shadow .15s,filter .15s;cursor:pointer;border:0;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.04)}
.btn-blue{background:linear-gradient(180deg,var(--blue-vivid),var(--blue));color:#fff;box-shadow:0 10px 22px -8px rgba(42,75,215,.55)}
.btn-yellow{background:linear-gradient(180deg,#FFD75E,var(--yellow));color:var(--navy);box-shadow:0 10px 22px -8px rgba(245,168,0,.5)}
.btn-ghost{background:var(--white);color:var(--navy);box-shadow:var(--shadow-card)}
.btn-big{padding:17px 34px;font-size:17px;border-radius:20px}

/* ---------- hero ---------- */
.hero{padding:74px 0 30px;text-align:center;position:relative;overflow:hidden}
.hero .kicker{margin-bottom:26px}
.hero h1{color:var(--navy)}
.hero h1 .u{position:relative;white-space:nowrap}
.hero h1 .u::after{
  content:"";position:absolute;left:0;right:0;bottom:6px;height:14px;
  background:var(--yellow);border-radius:8px;z-index:-1;opacity:.85;
}
.hero p.lead{max-width:640px;margin:22px auto 34px}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-note{margin-top:18px;font-size:13.5px;color:var(--muted)}

/* hero collage */
.collage{position:relative;margin:54px auto 0;max-width:1160px;padding:0 22px}
.collage-grid{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:24px;align-items:end}
.collage-card{
  background:var(--white);border-radius:var(--r-xl);box-shadow:var(--shadow-soft);
  overflow:hidden;position:relative;
}
.collage-card.main img{width:100%;height:100%;object-fit:cover}
.collage-card.side{padding:26px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.collage-card.side img{width:72%;max-width:220px}
.collage-card.side .t{font-family:var(--font-display);font-size:19px;color:var(--navy)}
.collage-card.side .s{font-size:13.5px;color:var(--muted);line-height:1.5}
.collage-card.tilt-l{transform:rotate(-2.4deg)}
.collage-card.tilt-r{transform:rotate(2.2deg)}
.sticker{position:absolute;z-index:3;filter:drop-shadow(0 10px 18px rgba(24,36,107,.25))}
.sticker.s-newtoday{width:130px;left:4%;top:-34px;transform:rotate(-8deg)}
.sticker.s-onemore{width:120px;right:5%;top:-30px;transform:rotate(9deg)}
.sticker.s-star{width:74px;right:22%;bottom:-16px;transform:rotate(-6deg)}

/* ---------- ticker ---------- */
.ticker{background:var(--navy);color:#fff;overflow:hidden;margin-top:70px;padding:15px 0;transform:rotate(-1.2deg) scale(1.02)}
.ticker-inner{display:flex;gap:0;white-space:nowrap;animation:tick 28s linear infinite;width:max-content}
.ticker span{font-family:var(--font-display);font-size:17px;letter-spacing:.04em;padding:0 18px}
.ticker i{font-style:normal;color:var(--yellow);padding-right:0}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{padding:96px 0}
.sec-head{text-align:center;max-width:680px;margin:0 auto 58px}
.sec-head h2{color:var(--navy);margin:18px 0 14px}
.sec-head p{color:var(--muted)}

/* intro panel */
.intro-panel{
  background:linear-gradient(135deg,var(--blue-vivid),var(--blue) 55%,var(--navy));
  border-radius:44px;color:#fff;overflow:hidden;
  display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;
  box-shadow:0 30px 60px -30px rgba(24,36,107,.55);
}
.intro-media{padding:40px 0 40px 44px}
.intro-media img{border-radius:28px;box-shadow:0 20px 50px -20px rgba(0,0,0,.45)}
.intro-copy{padding:56px}
.intro-copy .kicker{color:var(--blue);margin-bottom:20px}
.intro-copy h2{margin-bottom:18px}
.intro-copy p{color:#D9E4FF;font-size:16.5px;margin-bottom:14px}
.intro-copy p strong{color:#fff}
.intro-copy .link{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-weight:800;color:var(--yellow);
}
.intro-copy .link:hover{text-decoration:underline;text-underline-offset:4px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:step}
.step{
  background:var(--white);border-radius:var(--r-xl);box-shadow:var(--shadow-card);
  padding:0 0 30px;overflow:hidden;text-align:center;position:relative;
  transition:transform .18s;
}
.step:hover{transform:translateY(-6px)}
.step .ph{background:var(--cream);padding:10px}
.step:nth-child(2) .ph{background:var(--sky-deep)}
.step:nth-child(3) .ph{background:#FFE8E4}
.step .ph img{border-radius:26px}
.step .n{
  counter-increment:step;
  width:44px;height:44px;border-radius:50%;background:var(--yellow);
  font-family:var(--font-display);font-size:18px;color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  margin:-22px auto 12px;position:relative;box-shadow:0 6px 14px -4px rgba(245,168,0,.6);
}
.step .n::before{content:counter(step,decimal-leading-zero)}
.step h3{color:var(--navy);margin-bottom:10px}
.step p{font-size:15px;color:var(--muted);padding:0 28px}

/* categories */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cat-card{
  border-radius:var(--r-xl);padding:38px 30px 34px;text-align:center;position:relative;
  background:var(--white);box-shadow:var(--shadow-card);
  transition:transform .18s;
}
.cat-card:hover{transform:translateY(-6px) rotate(0deg) !important}
.cat-card.t1{transform:rotate(-1.6deg);background:linear-gradient(180deg,#FFF,#F2F6FF)}
.cat-card.t2{transform:rotate(1.2deg);background:linear-gradient(180deg,#FFF,#EFFBF3)}
.cat-card.t3{transform:rotate(-1deg);background:linear-gradient(180deg,#FFF,#FFF7E4)}
.cat-card img{width:130px;margin:0 auto 18px;filter:drop-shadow(0 12px 16px rgba(24,36,107,.18))}
.cat-card .en{font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.cat-card h3{color:var(--navy);margin:6px 0 10px}
.cat-card p{font-size:15px;color:var(--muted)}

/* guide list */
.guide-list{max-width:860px;margin:0 auto;display:grid;gap:18px}
.guide-row{
  background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-card);
  display:flex;align-items:center;gap:26px;padding:26px 32px;
  transition:transform .16s,box-shadow .16s;
}
.guide-row:hover{transform:translateX(8px);box-shadow:var(--shadow-soft)}
.guide-row .gn{
  font-family:var(--font-display);font-size:26px;color:var(--blue-vivid);
  background:var(--sky);width:60px;height:60px;border-radius:20px;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.guide-row .gt{flex:1}
.guide-row h3{color:var(--navy);font-size:19px;margin-bottom:5px;font-family:var(--font-display)}
.guide-row p{font-size:14.5px;color:var(--muted)}
.guide-row .ga{
  flex:none;width:44px;height:44px;border-radius:50%;background:var(--yellow);
  display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--navy);
}
.guide-row .min{flex:none;font-size:12.5px;font-weight:800;color:var(--muted);background:var(--sky);border-radius:99px;padding:5px 12px}

/* trend */
.trend-band{background:var(--cream);border-radius:44px;overflow:visible;position:relative;
  display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:20px;
  padding:64px 60px;box-shadow:var(--shadow-card);
}
.trend-band h2{color:var(--navy);margin:16px 0 16px}
.trend-band p{color:#6b6046;max-width:480px}
.trend-band .duck{position:relative}
.trend-band .duck img{max-width:400px;margin:0 auto;filter:drop-shadow(0 22px 30px rgba(120,90,20,.25))}
.trend-band .badge{position:absolute;width:110px;right:2%;top:-12%;transform:rotate(8deg);filter:drop-shadow(0 10px 16px rgba(120,90,20,.3))}

/* FAQ */
.faq-wrap{max-width:780px;margin:0 auto;display:grid;gap:14px}
.faq-wrap details{
  background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-card);
  overflow:hidden;
}
.faq-wrap summary{
  list-style:none;cursor:pointer;padding:24px 30px;
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  font-weight:800;font-size:17px;color:var(--navy);
}
.faq-wrap summary::-webkit-details-marker{display:none}
.faq-wrap summary::after{
  content:"+";flex:none;width:34px;height:34px;border-radius:50%;
  background:var(--sky);color:var(--blue-vivid);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:600;transition:transform .2s;
}
.faq-wrap details[open] summary::after{transform:rotate(45deg);background:var(--yellow);color:var(--navy)}
.faq-wrap .a{padding:0 30px 26px;color:var(--muted);font-size:15.5px}
.faq-wrap .a a{color:var(--blue-vivid);font-weight:700}
.faq-wrap .a a:hover{text-decoration:underline}

/* CTA */
.cta{padding:0 22px 100px}
.cta-inner{
  max-width:1160px;margin:0 auto;text-align:center;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--blue-vivid),var(--blue) 50%,var(--navy));
  border-radius:52px;padding:96px 30px 90px;
  box-shadow:0 34px 70px -30px rgba(24,36,107,.6);
}
.cta-inner h2{margin:22px 0 14px}
.cta-inner p{color:#D9E4FF;max-width:520px;margin:0 auto 36px}
.cta-duck{width:150px;margin:0 auto;filter:drop-shadow(0 16px 26px rgba(0,0,0,.35))}
.cta-badge{position:absolute;filter:drop-shadow(0 12px 20px rgba(0,0,0,.3))}
.cta-badge.b1{width:150px;left:6%;top:12%;transform:rotate(-10deg)}
.cta-badge.b2{width:130px;right:7%;top:16%;transform:rotate(9deg)}
.cta-badge.b3{width:110px;right:14%;bottom:10%;transform:rotate(-7deg)}
.cta-badge.b4{width:100px;left:12%;bottom:8%;transform:rotate(6deg)}

/* footer */
footer.site{background:var(--navy);color:#C7D2F5;padding:70px 0 44px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;margin-bottom:52px}
.foot-grid .logo{color:#fff}
.foot-grid .desc{font-size:14.5px;color:#8E9BD1;margin-top:16px;max-width:330px}
.foot-grid h4{font-family:var(--font-display);font-size:15px;color:var(--yellow);margin-bottom:18px;font-weight:400}
.foot-grid ul{list-style:none;display:grid;gap:12px;font-size:15px}
.foot-grid ul a:hover{color:#fff}
.foot-bottom{border-top:1px solid #2A3780;padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#7683B8}

/* ---------- article pages ---------- */
.article-head{padding:64px 0 0;text-align:center}
.article-head .crumb{font-size:13.5px;font-weight:700;color:var(--muted);margin-bottom:18px;display:block}
.article-head .crumb a{color:var(--blue-vivid)}
.article-head .crumb a:hover{text-decoration:underline}
.article-head h1{font-size:clamp(32px,4.6vw,52px);color:var(--navy);margin:16px 0 20px}
.article-head .meta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.chip{background:var(--white);border-radius:99px;padding:7px 16px;font-size:13px;font-weight:800;color:var(--blue);box-shadow:var(--shadow-card)}
article.body{
  max-width:840px;margin:52px auto 90px;
  background:var(--white);border-radius:var(--r-xl);box-shadow:var(--shadow-soft);
  padding:clamp(30px,5vw,64px);
}
article.body h2{font-family:var(--font-display);font-weight:400;font-size:clamp(23px,2.8vw,31px);color:var(--navy);margin:52px 0 16px}
article.body h2:first-child{margin-top:0}
article.body h3{font-size:19px;font-weight:800;color:var(--navy);margin:32px 0 10px}
article.body p{margin-bottom:16px;color:#3A4258}
article.body ul,article.body ol{margin:0 0 18px 22px;color:#3A4258}
article.body li{margin-bottom:8px}
article.body table{width:100%;border-collapse:separate;border-spacing:0;margin:24px 0;font-size:15px;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-card)}
article.body th{background:var(--blue);color:#fff;font-weight:800}
article.body th,article.body td{padding:12px 14px;text-align:left}
article.body tr:nth-child(even) td{background:var(--sky)}
article.body a.sec-link{color:var(--blue-vivid);font-weight:800}
article.body a.sec-link:hover{text-decoration:underline}
.callout{
  background:var(--sky);border-radius:var(--r-md);padding:22px 26px;margin:26px 0;
  border-left:6px solid var(--blue-vivid);
}
.callout b{display:block;margin-bottom:6px;color:var(--navy)}
.next-cta{
  background:linear-gradient(135deg,var(--blue-vivid),var(--navy));
  border-radius:var(--r-lg);color:#fff;padding:36px;margin-top:56px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.next-cta h3{font-family:var(--font-display);font-weight:400;font-size:24px}
.next-cta p{color:#D9E4FF !important;margin:6px 0 0 !important}
.next-cta img{width:86px;flex:none}

/* 404 */
.err{min-height:76vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 22px}
.err img{width:180px;margin:0 auto 26px}

/* responsive */
@media(max-width:1020px){
  nav.menu{display:none}
  .collage-grid{grid-template-columns:1fr;gap:18px}
  .collage-card.side{flex-direction:row;text-align:left;align-items:center}
  .collage-card.side img{width:96px}
  .collage-card.tilt-l,.collage-card.tilt-r{transform:none}
  .sticker.s-star{display:none}
  .intro-panel{grid-template-columns:1fr}
  .intro-media{padding:36px 36px 0}
  .intro-copy{padding:40px 36px 44px}
  .steps,.cats{grid-template-columns:1fr}
  .cat-card.t1,.cat-card.t2,.cat-card.t3{transform:none}
  .trend-band{grid-template-columns:1fr;padding:48px 34px;text-align:center}
  .trend-band p{margin:0 auto}
  .trend-band .badge{display:none}
  .guide-row{flex-wrap:wrap;gap:14px}
  .guide-row .min{order:5}
  .cta-badge{display:none}
  .foot-grid{grid-template-columns:1fr;gap:32px}
}