:root {
  --bg-dark:#0f0c1b;
  --neon-pink:#ff007f;
  --neon-purple:#a100ff;
  --neon-cyan:#00f0ff;
  --neon-yellow:#ffea00;
  --text-white:#ffffff;
  --text-dim:#a2a2c2;
  --glass-border:rgba(255,255,255,.15);
  --radius:16px;
}

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html {
  scroll-behavior:smooth;
}

body {
  min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"Pretendard",Roboto,sans-serif;
  color:var(--text-white);
  line-height:1.6;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 5% 18%,rgba(255,0,127,.15),transparent 27%),
    radial-gradient(circle at 96% 18%,rgba(0,240,255,.055),transparent 24%),
    radial-gradient(circle at 95% 72%,rgba(161,0,255,.12),transparent 32%),
    var(--bg-dark);
}

a {
  color:inherit;
}

img {
  display:block;
  max-width:100%;
}


/* ==================================================
   상단 티커
================================================== */

.ticker-bar {
  width:100%;
  overflow:hidden;
  padding:6px 0;
  background:#05040a;
  border-bottom:1px solid var(--neon-pink);
  font-size:.82rem;
}

.ticker-bar {
  width:100%;
  height:30px;
  overflow:hidden;
  position:relative;
  padding:0;
  background:#05040a;
  border-bottom:1px solid var(--neon-pink);
  font-size:.82rem;
}

.ticker-wrapper {
  width:100%;
  height:100%;
  overflow:hidden;
  position:relative;
}

.ticker-content {
  position:absolute;
  top:50%;
  left:100%;
  width:max-content;
  white-space:nowrap;
  color:var(--text-dim);
  transform:translateY(-50%);
  will-change:transform;
  animation:tickerMove 28s linear infinite;
}

.ticker-content span {
  color:var(--neon-cyan);
  font-weight:700;
}

@keyframes tickerMove {
  from {
    transform:translate(0,-50%);
  }

  to {
    transform:translate(-220%,-50%);
  }
}


/* ==================================================
   헤더
================================================== */

.navbar {
  width:100%;
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(15,12,27,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.12);
}

.nav-container {
  width:100%;
  max-width:1100px;
  min-height:68px;
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo {
  display:flex;
  align-items:center;
  color:#fff;
  font-size:1.4rem;
  font-weight:900;
  text-decoration:none;
}

.logo .icon {
  margin-right:6px;
}

.neon-text {
  color:var(--neon-pink);
  text-shadow:0 0 10px rgba(255,0,127,.8);
}

.nav-menu {
  display:flex;
  align-items:center;
  gap:25px;
}

.nav-menu a {
  color:var(--text-dim);
  text-decoration:none;
  font-size:.9rem;
  font-weight:700;
  transition:.2s;
}

.nav-menu a:hover {
  color:var(--neon-cyan);
}


/* ==================================================
   HERO
================================================== */

.hero {
  width:100%;
  min-height:510px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:75px 20px 85px;
  overflow:hidden;
  text-align:center;
}

.hero-content {
  width:100%;
  max-width:680px;
  position:relative;
  z-index:10;
}

.badge-neon {
  display:inline-block;
  padding:6px 16px;
  border:1px solid var(--neon-pink);
  border-radius:30px;
  background:rgba(255,0,127,.07);
  color:var(--neon-pink);
  font-size:.75rem;
  font-weight:800;
  box-shadow:0 0 15px rgba(255,0,127,.12);
}

.hero h1 {
  margin:20px 0 14px;
  color:#fff;
  font-size:3.3rem;
  line-height:1.1;
  letter-spacing:-2px;
}

.hero p {
  margin-bottom:28px;
  color:var(--text-dim);
  font-size:1.02rem;
  line-height:1.75;
}

.gacha-trigger-btn {
  border:0;
  padding:15px 30px;
  border-radius:35px;
  background:linear-gradient(
    135deg,
    var(--neon-pink),
    var(--neon-purple)
  );
  color:#fff;
  font-size:1rem;
  font-weight:800;
  cursor:pointer;
  box-shadow:
    0 0 22px rgba(255,0,127,.45),
    0 8px 30px rgba(161,0,255,.15);
  transition:.25s;
}

.gacha-trigger-btn:hover {
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 0 35px rgba(255,0,127,.7);
}

.hero-mini-guide {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  margin-top:24px;
  color:rgba(255,255,255,.4);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:1px;
}

.hero-mini-guide i {
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--neon-pink);
  box-shadow:0 0 6px var(--neon-pink);
}


/* ==================================================
   떠다니는 작은 캡슐
================================================== */

.floating-capsule {
  position:absolute;
  width:68px;
  height:68px;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(255,255,255,.45);
  border-radius:50%;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.48) 47%,
    rgba(255,0,127,.9) 50%,
    rgba(161,0,255,.94) 100%
  );
  font-size:1.5rem;
  box-shadow:
    0 0 22px rgba(255,0,127,.45),
    inset 0 0 13px rgba(255,255,255,.25);
  animation:capsuleFloat 5s ease-in-out infinite;
}

.capsule-1 {
  top:18%;
  left:7%;
}

.capsule-3 {
  bottom:22%;
  left:17%;
  animation-delay:1.5s;
}

.capsule-5 {
  top:49%;
  left:3%;
  width:46px;
  height:46px;
  font-size:.95rem;
  opacity:.6;
  animation-delay:3s;
}

@keyframes capsuleFloat {
  0%,100% {
    transform:translateY(0) rotate(-5deg);
  }

  50% {
    transform:translateY(-17px) rotate(8deg);
  }
}


/* ==================================================
   왼쪽 곰돌이 캡슐
================================================== */

.hero-capsule-visual {
  position:absolute;
  right:calc(50% + 270px);
  top:50%;
  width:230px;
  max-width:18vw;
  z-index:5;
  pointer-events:none;
  animation:bearCapsuleFloat 5.5s ease-in-out infinite;
}

.hero-capsule-visual img {
  width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 15px 28px rgba(255,255,255,.08));
}

@keyframes bearCapsuleFloat {
  0%,100% {
    transform:
      translateY(-50%)
      translateY(0)
      rotate(-1deg);
  }

  50% {
    transform:
      translateY(-50%)
      translateY(-10px)
      rotate(1deg);
  }
}


/* ==================================================
   오른쪽 실제 가챠 머신
================================================== */

.hero-gacha-visual {
  position:absolute;

  /* 사용자가 정한 현재 기준 */
  left:calc(50% + 250px);

  top:50%;
  width:300px;
  max-width:22vw;
  z-index:5;
  pointer-events:none;
  animation:gachaVisualFloat 5s ease-in-out infinite;
}

.hero-gacha-visual::before {
  content:"";
  position:absolute;
  left:50%;
  bottom:15px;
  width:75%;
  height:35px;
  z-index:-1;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(255,0,127,.16);
  filter:blur(25px);
}

.hero-gacha-visual img {
  width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 18px 28px rgba(255,0,127,.2));
}

@keyframes gachaVisualFloat {
  0%,100% {
    transform:
      translateY(-50%)
      translateY(0)
      rotate(1deg);
  }

  50% {
    transform:
      translateY(-50%)
      translateY(-10px)
      rotate(-1deg);
  }
}


/* ==================================================
   가챠 머신 뒤쪽 게임기

   실제 가챠 머신보다 오른쪽으로 이동시켜
   서로 겹치지 않게 함
================================================== */

.hero-back-machines {
  position:absolute;

  /* 기존 +110px 근처에서 훨씬 오른쪽으로 이동 */
  left:calc(50% + 480px);

  top:50%;
  width:300px;
  height:300px;
  z-index:2;
  transform:translateY(-50%);
  pointer-events:none;
}

.back-machine {
  position:absolute;
  display:block;
  opacity:.10;
  user-select:none;
  pointer-events:none;
  filter:
    grayscale(1)
    drop-shadow(0 0 18px rgba(255,0,127,.20));
  animation:backMachineFloat 7s ease-in-out infinite;
}

.back-machine-1 {
  left:0;
  top:8%;
  font-size:5.4rem;
  transform:rotate(-10deg);
}

.back-machine-2 {
  right:0;
  top:36%;
  font-size:4.5rem;
  transform:rotate(9deg);
  animation-delay:1.4s;
}

.back-machine-3 {
  left:22%;
  bottom:0;
  font-size:3.7rem;
  transform:rotate(-5deg);
  animation-delay:2.8s;
}

@keyframes backMachineFloat {
  0%,100% {
    translate:0 0;
  }

  50% {
    translate:0 -10px;
  }
}


/* ==================================================
   MAIN
================================================== */

.main-container {
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:20px 20px 0;
  position:relative;
  z-index:5;
}


/* ==================================================
   공통 글라스 박스
================================================== */

.glass-box {
  width:100%;
  margin:0 0 32px;
  padding:26px;
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.glass-box h2 {
  margin-bottom:10px;
  color:var(--neon-yellow);
  font-size:1.45rem;
}

.glass-box > p {
  color:#e5e5ec;
  font-size:.94rem;
}

.sub-more-btn {
  display:inline-block;
  margin-top:10px;
  color:var(--neon-cyan);
  text-decoration:none;
  font-size:.9rem;
  font-weight:700;
}

.sub-more-btn:hover {
  text-decoration:underline;
}

.more-margin {
  margin-top:22px;
}


/* ==================================================
   특징 카드
================================================== */

.capsule-features {
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}

.feature-item {
  width:100%;
  padding:18px 15px;
  border:1px solid var(--glass-border);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  text-align:center;
}

.feature-icon {
  display:block;
  margin-bottom:7px;
  font-size:1.7rem;
}

.feature-item h4 {
  margin-bottom:4px;
  color:var(--neon-cyan);
  font-size:.98rem;
}

.feature-item p {
  color:var(--text-dim);
  font-size:.82rem;
}


/* ==================================================
   가챠샵 성지
================================================== */

.content-section {
  width:100%;
  margin-bottom:50px;
}

.section-header h2 {
  margin-bottom:4px;
  font-size:1.65rem;
}

.section-header p {
  margin-bottom:18px;
  color:var(--text-dim);
  font-size:.9rem;
}

.holy-grid {
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.glass-card {
  width:100%;
  overflow:hidden;
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  background:rgba(255,255,255,.04);
  transition:
    border-color .25s,
    box-shadow .25s,
    transform .25s;
}

.glass-card:hover {
  border-color:var(--neon-cyan);
  box-shadow:0 10px 25px rgba(0,240,255,.15);
}


/* 이미지 대신 지역 심볼 */

.holy-card-top {
  min-height:105px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(
      circle at center,
      rgba(255,0,127,.08),
      transparent 65%
    ),
    rgba(255,255,255,.02);
}

.holy-symbol {
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,240,255,.25);
  border-radius:50%;
  background:rgba(0,240,255,.05);
  color:var(--neon-cyan);
  font-size:1rem;
  font-weight:900;
  box-shadow:0 0 20px rgba(0,240,255,.08);
}

.status-badge {
  position:absolute;
  top:11px;
  right:11px;
  padding:5px 9px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  background:rgba(0,0,0,.6);
  color:var(--text-dim);
  font-size:.68rem;
  font-weight:700;
}

.card-body {
  padding:16px;
}

.location-tag {
  color:var(--neon-yellow);
  font-size:.72rem;
  font-weight:700;
}

.card-body h3 {
  margin:4px 0 7px;
  font-size:1.08rem;
}

.card-body p {
  margin-bottom:11px;
  color:var(--text-dim);
  font-size:.82rem;
}

.facility-tags span {
  display:inline-block;
  margin:0 4px 4px 0;
  padding:3px 7px;
  border-radius:4px;
  background:rgba(255,255,255,.08);
  font-size:.68rem;
}

.holy-more-wrap {
  display:flex;
  justify-content:center;
  margin-top:25px;
}

.holy-more-btn {
  display:inline-block;
  padding:11px 22px;
  border:1px solid var(--neon-cyan);
  border-radius:28px;
  color:var(--neon-cyan);
  text-decoration:none;
  font-size:.88rem;
  font-weight:800;
  transition:.25s;
}

.holy-more-btn:hover {
  background:var(--neon-cyan);
  color:#000;
  box-shadow:0 0 18px rgba(0,240,255,.35);
  transform:translateY(-2px);
}


/* ==================================================
   온라인 가챠 안내
================================================== */

.online-guide-section {
  position:static;
  display:block;
  width:100%;
  height:auto;
  min-height:0;
}

.neon-tag {
  color:var(--neon-pink);
  font-size:.75rem;
  font-weight:800;
}

.online-guide-section h2 {
  margin-top:5px;
}


/* ==================================================
   온라인 가챠 CTA
================================================== */

.target-banner-section {
  width:100%;
  margin:45px 0 55px;
}

.banner-neon-box {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:28px;
  border:1px solid var(--neon-cyan);
  border-radius:var(--radius);
  background:rgba(255,255,255,.04);
  box-shadow:0 0 22px rgba(0,240,255,.12);
}

.banner-text {
  max-width:680px;
}

.banner-text h3 {
  margin:4px 0;
  font-size:1.3rem;
}

.banner-text p {
  color:var(--text-dim);
  font-size:.88rem;
}

.neon-btn {
  flex-shrink:0;
  display:inline-block;
  padding:12px 22px;
  border-radius:26px;
  background:var(--neon-cyan);
  color:#000;
  text-decoration:none;
  font-size:.85rem;
  font-weight:800;
  box-shadow:0 0 15px rgba(0,240,255,.45);
  transition:.2s;
}

.neon-btn:hover {
  transform:translateY(-2px);
}


/* ==================================================
   MODAL
================================================== */

.modal-overlay {
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.85);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:.25s;
}

.modal-overlay.active {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.modal-glass {
  width:100%;
  max-width:440px;
  max-height:90vh;
  position:relative;
  overflow-y:auto;

  padding:30px 25px;

  border:2px solid var(--neon-pink);
  border-radius:18px;

  background:#191528;

  text-align:center;

  box-shadow:0 0 35px rgba(255,0,127,.55);
}

.modal-close {
  position:absolute;
  top:8px;
  right:15px;
  border:0;
  background:none;
  color:#fff;
  font-size:1.7rem;
  cursor:pointer;
}

.fortune-small-title {
  color:var(--neon-pink);
  font-size:.7rem;
  font-weight:800;
}

.gacha-machine h2 {
  margin-top:4px;
  font-size:1.5rem;
}

.gacha-machine > p {
  color:var(--text-dim);
  font-size:.82rem;
}

.capsule-dispenser {
  width:90px;
  height:90px;
  margin:18px auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border:3px dashed var(--neon-yellow);
  border-radius:50%;
  font-size:2.2rem;
}

.spin-btn {
  border:0;
  padding:10px 20px;
  border-radius:20px;
  background:var(--neon-yellow);
  color:#000;
  font-size:.9rem;
  font-weight:800;
  cursor:pointer;
}

.spin-btn:disabled {
  opacity:.6;
  cursor:not-allowed;
}

.result-box {
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--glass-border);
}

.hidden {
  display:none;
}

.result-badge {
  display:inline-block;
  margin-bottom:7px;
  padding:4px 10px;
  border:1px solid var(--neon-pink);
  border-radius:18px;
  background:rgba(255,0,127,.1);
  color:var(--neon-pink);
  font-size:.8rem;
  font-weight:800;
}

.result-box h3 {
  margin-bottom:4px;
  font-size:1.15rem;
}

.result-box > p {
  color:var(--text-dim);
  font-size:.82rem;
}

.fortune-result-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:15px;
}

.fortune-result-item {
  padding:10px;
  border:1px solid var(--glass-border);
  border-radius:9px;
  background:rgba(255,255,255,.04);
}

.fortune-result-item span {
  display:block;
  margin-bottom:3px;
  color:var(--text-dim);
  font-size:.68rem;
}

.fortune-result-item strong {
  color:var(--neon-yellow);
  font-size:.9rem;
}

.fortune-main-link {
  display:block;
  margin-top:14px;
  padding:12px;
  border-radius:25px;
  background:linear-gradient(
    135deg,
    var(--neon-pink),
    var(--neon-purple)
  );
  color:#fff;
  text-decoration:none;
  font-size:.85rem;
  font-weight:800;
  box-shadow:0 0 18px rgba(255,0,127,.4);
}


/* ==================================================
   CONFETTI
================================================== */

canvas {
  position:fixed !important;
  z-index:99999 !important;
  pointer-events:none !important;
}


/* ==================================================
   FOOTER
================================================== */

.footer {
  width:100%;
  margin-top:60px;
  padding:38px 20px 40px;
  border-top:1px solid rgba(255,255,255,.05);
  background:rgba(0,0,0,.18);
  text-align:center;
}

.footer .copyright {
  margin:0 0 12px;
  color:rgba(255,255,255,.48);
  font-size:.78rem;
}

.footer .footer-notice {
  max-width:1100px;
  margin:0 auto;
  color:rgba(255,255,255,.32);
  font-size:.72rem;
  line-height:1.7;
  word-break:keep-all;
}


/* ==================================================
   1250px 이하
================================================== */

@media (max-width:1250px) {

  .hero-back-machines {
    left:calc(50% + 340px);
    width:270px;
  }

  .back-machine-1 {
    font-size:4.8rem;
  }

  .back-machine-2 {
    font-size:4rem;
  }

  .back-machine-3 {
    font-size:3.2rem;
  }
}


/* ==================================================
   1100px 이하
================================================== */

@media (max-width:1100px) {

  .hero-gacha-visual {
    left:calc(50% + 205px);
    width:245px;
    max-width:24vw;
  }

  .hero-capsule-visual {
    right:calc(50% + 205px);
    width:195px;
    max-width:20vw;
  }

  /* 이 크기에서는 뒤 게임기 더 오른쪽 */
  .hero-back-machines {
    left:calc(50% + 320px);
    width:230px;
    opacity:.8;
  }

  .back-machine-1 {
    font-size:4rem;
  }

  .back-machine-2 {
    font-size:3.3rem;
  }

  .back-machine-3 {
    font-size:2.8rem;
  }
}


/* ==================================================
   900px 이하
================================================== */

@media (max-width:900px) {

  .hero {
    min-height:455px;
  }

  .hero-content {
    max-width:500px;
  }

  .hero-gacha-visual {
    left:calc(50% + 130px);
    width:185px;
    opacity:.85;
  }

  .hero-capsule-visual {
    right:calc(50% + 130px);
    width:155px;
    opacity:.78;
  }

  /*
    태블릿에서는 뒤 게임기까지 넣으면
    공간이 너무 좁아지므로 숨김
  */
  .hero-back-machines {
    display:none;
  }

  .holy-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .capsule-features {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* ==================================================
   MOBILE 700px 이하
================================================== */

@media (max-width:700px) {

  body {
    background:
      radial-gradient(
        circle at 0 12%,
        rgba(255,0,127,.10),
        transparent 25%
      ),
      radial-gradient(
        circle at 100% 72%,
        rgba(161,0,255,.09),
        transparent 30%
      ),
      var(--bg-dark);
  }


  /* 헤더 */

  .nav-container {
    min-height:0;
    flex-direction:column;
    gap:10px;
    padding:13px 14px;
  }

  .logo {
    font-size:1.3rem;
  }

  .nav-menu {
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
    gap:14px;
  }

  .nav-menu a {
    font-size:.78rem;
  }


  /* 히어로 */

  .hero {
    min-height:340px;
    padding:45px 20px 50px;
  }

  .hero-content {
    max-width:100%;
  }

  .hero h1 {
    font-size:2.5rem;
  }

  .hero p {
    margin-bottom:25px;
    font-size:.88rem;
    line-height:1.65;
  }

  .hero p br {
    display:none;
  }

  .gacha-trigger-btn {
    padding:13px 23px;
    font-size:.9rem;
  }

  .hero-mini-guide {
    margin-top:20px;
    gap:7px;
    font-size:.56rem;
  }


  /*
    모바일에서는 큰 가챠 이미지,
    곰돌이 이미지,
    배경 게임기 모두 제거
  */

  .hero-gacha-visual,
  .hero-capsule-visual,
  .hero-back-machines {
    display:none !important;
  }


  /* 작은 캡슐 2개만 유지 */

  .floating-capsule {
    width:45px;
    height:45px;
    font-size:.95rem;
    opacity:.5;
  }

  .capsule-1 {
    top:18%;
    left:-10px;
  }

  .capsule-3 {
    top:67%;
    right:-10px;
    bottom:auto;
    left:auto;
  }

  .capsule-5 {
    display:none;
  }


  /* 메인 */

  .main-container {
    width:100%;
    padding:15px 14px 0;
  }

  .glass-box {
    margin-bottom:26px;
    padding:21px 18px;
  }

  .glass-box h2 {
    font-size:1.35rem;
  }

  .glass-box > p {
    font-size:.9rem;
  }


  /* 특징 */

  .capsule-features {
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    margin-top:18px;
  }

  .feature-item {
    padding:19px 16px;
  }


  /* 성지 */

  .content-section {
    margin-bottom:40px;
  }

  .holy-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
  }

  .holy-card-top {
    min-height:85px;
  }

  .holy-symbol {
    width:50px;
    height:50px;
    font-size:.9rem;
  }

  .holy-more-wrap {
    margin-top:23px;
  }


  /*
    온라인 가챠
    고정 높이 / transform / position 없음
    → 이전 모바일 큰 공백 방지
  */

  .online-guide-section {
    position:static !important;
    width:100%;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 0 26px !important;
    padding:21px 18px !important;
    transform:none !important;
  }

  .online-guide-section .capsule-features {
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-auto-rows:auto !important;
    gap:14px !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }

  .online-guide-section .feature-item {
    position:static !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    transform:none !important;
  }


  /* CTA */

  .target-banner-section {
    margin:34px 0 40px;
  }

  .banner-neon-box {
    flex-direction:column;
    align-items:flex-start;
    padding:22px;
  }

  .banner-text h3 {
    font-size:1.15rem;
  }

  .neon-btn {
    width:100%;
    text-align:center;
  }


  /* 모달 */

  .modal-overlay {
    padding:14px;
  }

  .modal-glass {
    max-height:88vh;
  }


  /* 푸터 */

  .footer {
    margin-top:45px;
    padding:30px 18px 32px;
  }

  .footer .copyright {
    font-size:.72rem;
  }

  .footer .footer-notice {
    font-size:.66rem;
  }
}


/* ==================================================
   작은 모바일 420px 이하
================================================== */

@media (max-width:420px) {

  .ticker-bar {
    font-size:.7rem;
  }

  .hero {
    min-height:315px;
    padding:40px 16px 42px;
  }

  .badge-neon {
    padding:5px 12px;
    font-size:.66rem;
  }

  .hero h1 {
    font-size:2.15rem;
  }

  .hero p {
    font-size:.84rem;
  }

  .gacha-trigger-btn {
    width:100%;
    max-width:260px;
    padding:12px 16px;
    font-size:.86rem;
  }

  .hero-mini-guide {
    display:none;
  }

  .main-container {
    padding-left:14px;
    padding-right:14px;
  }

  .glass-box {
    padding:20px 17px;
  }

  .section-header h2 {
    font-size:1.45rem;
  }

  .fortune-result-grid {
    grid-template-columns:1fr;
  }

  .modal-glass {
    padding:27px 18px 22px;
  }
}

/* ==================================================
   SUB PAGE
================================================== */

.nav-active {
  color:var(--neon-cyan) !important;
}

.sub-hero {
  width:100%;
  min-height:340px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:65px 20px;
  text-align:center;
}

.sub-hero-inner {
  width:100%;
  max-width:900px;
  position:relative;
  z-index:5;
}

.breadcrumb {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:20px;
  color:rgba(255,255,255,.35);
  font-size:.72rem;
  font-weight:700;
}

.breadcrumb a {
  color:var(--neon-cyan);
  text-decoration:none;
}

.breadcrumb strong {
  color:rgba(255,255,255,.6);
}

.sub-hero h1 {
  margin:18px 0 12px;
  color:#fff;
  font-size:3rem;
  line-height:1.15;
  letter-spacing:-2px;
}

.sub-hero p {
  color:var(--text-dim);
  font-size:1rem;
  line-height:1.8;
}

.sub-hero-decoration {
  position:absolute;
  z-index:1;
  opacity:.07;
  pointer-events:none;
  filter:grayscale(1);
  animation:subDecorFloat 7s ease-in-out infinite;
}

.sub-decoration-1 {
  left:8%;
  top:29%;
  font-size:8rem;
  transform:rotate(-8deg);
}

.sub-decoration-2 {
  right:9%;
  bottom:15%;
  font-size:6rem;
  animation-delay:2s;
}

@keyframes subDecorFloat {
  0%,100% {
    translate:0 0;
  }

  50% {
    translate:0 -12px;
  }
}


/* 본문 */

.sub-main {
  width:100%;
  max-width:1000px;
  margin:0 auto;
  padding:20px 20px 0;
}

.article-section {
  width:100%;
  margin-bottom:30px;
  padding:32px;
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.article-intro {
  border-color:rgba(255,0,127,.22);
  background:
    linear-gradient(
      135deg,
      rgba(255,0,127,.055),
      rgba(161,0,255,.035)
    ),
    rgba(255,255,255,.035);
}

.article-label {
  display:inline-block;
  margin-bottom:5px;
  color:var(--neon-pink);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:1.2px;
}

.article-section > h2 {
  margin-bottom:14px;
  color:#fff;
  font-size:1.65rem;
}

.article-section > p {
  margin-top:10px;
  color:#d8d8e4;
  font-size:.94rem;
  line-height:1.9;
}

.article-section strong {
  color:#fff;
}

.article-highlight {
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:22px;
  padding:16px 18px;
  border:1px solid rgba(0,240,255,.18);
  border-radius:12px;
  background:rgba(0,240,255,.04);
}

.article-highlight > span {
  font-size:1.25rem;
}

.article-highlight p {
  color:var(--text-dim);
  font-size:.86rem;
}


/* 제목 */

.article-heading {
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:15px;
}

.article-number {
  min-width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,0,127,.3);
  border-radius:12px;
  background:rgba(255,0,127,.07);
  color:var(--neon-pink);
  font-size:.72rem;
  font-weight:900;
}

.article-heading h2 {
  color:#fff;
  font-size:1.55rem;
  line-height:1.3;
}

.article-heading .article-label {
  margin:0;
}

.article-desc {
  margin-bottom:20px;
}


/* 이용 순서 */

.step-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:22px;
}

.step-card {
  padding:20px 16px;
  border:1px solid var(--glass-border);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}

.step-icon {
  display:block;
  margin-bottom:10px;
  font-size:1.7rem;
}

.step-count {
  display:block;
  margin-bottom:3px;
  color:var(--neon-pink);
  font-size:.63rem;
  font-weight:900;
}

.step-card h3 {
  margin-bottom:7px;
  color:#fff;
  font-size:.95rem;
}

.step-card p {
  color:var(--text-dim);
  font-size:.79rem;
  line-height:1.65;
}


/* 인기 이유 */

.reason-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:20px;
}

.reason-card {
  padding:22px 18px;
  border:1px solid var(--glass-border);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}

.reason-card > span {
  display:block;
  margin-bottom:8px;
  font-size:1.6rem;
}

.reason-card h3 {
  margin-bottom:7px;
  color:var(--neon-cyan);
  font-size:.98rem;
}

.reason-card p {
  color:var(--text-dim);
  font-size:.8rem;
  line-height:1.7;
}


/* 비교 */

.compare-box {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  margin-top:20px;
}

.compare-item {
  padding:25px;
  border:1px solid var(--glass-border);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  text-align:center;
}

.compare-icon {
  display:block;
  margin-bottom:8px;
  font-size:2rem;
}

.compare-item h3 {
  margin-bottom:6px;
  color:var(--neon-cyan);
}

.compare-item p {
  color:var(--text-dim);
  font-size:.82rem;
  line-height:1.7;
}

.compare-center {
  color:var(--neon-pink);
  font-size:1.7rem;
  font-weight:900;
}


/* 링크 버튼 */

.article-link-btn {
  display:inline-block;
  margin-top:20px;
  padding:9px 17px;
  border:1px solid var(--neon-cyan);
  border-radius:22px;
  color:var(--neon-cyan);
  text-decoration:none;
  font-size:.82rem;
  font-weight:800;
  transition:.2s;
}

.article-link-btn:hover {
  background:var(--neon-cyan);
  color:#000;
}


/* 팁 */

.tip-list {
  margin-top:20px;
}

.tip-item {
  display:flex;
  align-items:flex-start;
  gap:15px;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.tip-item:last-child {
  border-bottom:0;
}

.tip-item > span {
  min-width:34px;
  color:var(--neon-pink);
  font-size:.75rem;
  font-weight:900;
}

.tip-item strong {
  display:block;
  margin-bottom:3px;
  font-size:.9rem;
}

.tip-item p {
  color:var(--text-dim);
  font-size:.82rem;
}


/* 온라인 CTA */

.sub-online-cta {
  width:100%;
  margin-bottom:30px;
  padding:30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  border:1px solid var(--neon-cyan);
  border-radius:var(--radius);
  background:
    linear-gradient(
      135deg,
      rgba(161,0,255,.10),
      rgba(0,240,255,.06)
    );
}

.sub-online-left {
  max-width:650px;
}

.sub-online-left h2 {
  margin:5px 0 8px;
  color:#fff;
  font-size:1.4rem;
}

.sub-online-left p {
  color:var(--text-dim);
  font-size:.87rem;
}


/* FAQ */

.faq-list {
  margin-top:20px;
}

.faq-item {
  border-bottom:1px solid rgba(255,255,255,.08);
}

.faq-item:first-child {
  border-top:1px solid rgba(255,255,255,.08);
}

.faq-item summary {
  position:relative;
  padding:17px 35px 17px 0;
  color:#fff;
  font-size:.9rem;
  font-weight:700;
  cursor:pointer;
  list-style:none;
}

.faq-item summary::-webkit-details-marker {
  display:none;
}

.faq-item summary::after {
  content:"+";
  position:absolute;
  top:50%;
  right:3px;
  transform:translateY(-50%);
  color:var(--neon-pink);
  font-size:1.3rem;
}

.faq-item[open] summary::after {
  content:"−";
}

.faq-item p {
  padding:0 0 17px;
  color:var(--text-dim);
  font-size:.83rem;
  line-height:1.75;
}


/* 하단 페이지 이동 */

.sub-page-nav {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin:10px 0 60px;
}

.sub-page-nav-item {
  padding:20px;
  border:1px solid var(--glass-border);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  text-decoration:none;
  transition:.2s;
}

.sub-page-nav-item.next {
  text-align:right;
}

.sub-page-nav-item span {
  display:block;
  margin-bottom:3px;
  color:var(--neon-cyan);
  font-size:.65rem;
  font-weight:800;
}

.sub-page-nav-item strong {
  color:#fff;
  font-size:.9rem;
}

.sub-page-nav-item:hover {
  border-color:var(--neon-cyan);
  background:rgba(0,240,255,.04);
}


/* ==================================================
   SUBPAGE TABLET
================================================== */

@media (max-width:900px) {

  .step-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .reason-grid {
    grid-template-columns:1fr;
  }

  .sub-decoration-1 {
    left:2%;
  }

  .sub-decoration-2 {
    right:2%;
  }
}


/* ==================================================
   SUBPAGE MOBILE
================================================== */

@media (max-width:700px) {

  .sub-hero {
    min-height:290px;
    padding:48px 18px;
  }

  .sub-hero h1 {
    font-size:2.25rem;
  }

  .sub-hero p {
    font-size:.86rem;
  }

  .sub-hero p br {
    display:none;
  }

  .sub-hero-decoration {
    display:none;
  }

  .sub-main {
    padding:14px 14px 0;
  }

  .article-section {
    margin-bottom:20px;
    padding:23px 19px;
  }

  .article-section > h2 {
    font-size:1.4rem;
  }

  .article-section > p {
    font-size:.88rem;
    line-height:1.8;
  }

  .article-heading {
    align-items:flex-start;
  }

  .article-heading h2 {
    font-size:1.35rem;
  }

  .article-number {
    min-width:42px;
    height:42px;
  }

  .step-grid {
    grid-template-columns:1fr;
  }

  .compare-box {
    grid-template-columns:1fr;
  }

  .compare-center {
    text-align:center;
  }

  .sub-online-cta {
    flex-direction:column;
    align-items:flex-start;
    padding:23px 19px;
  }

  .sub-online-cta .neon-btn {
    width:100%;
    text-align:center;
  }

  .sub-page-nav {
    grid-template-columns:1fr;
  }

  .sub-page-nav-item.next {
    text-align:left;
  }

}



/* 본문 */

.capsule-main {
  width:100%;
  max-width:1050px;
  margin:0 auto;
  padding:10px 20px 0;
}


/* INTRO */

.capsule-intro {
  display:grid;
  grid-template-columns:1.3fr .7fr;
  align-items:center;
  gap:40px;
  margin-bottom:55px;
  padding:34px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  background:rgba(255,255,255,.035);
}

.capsule-intro-text h2 {
  margin-bottom:15px;
  font-size:1.7rem;
}

.capsule-intro-text p {
  margin-bottom:11px;
  color:#d8d8e4;
  font-size:.94rem;
  line-height:1.9;
}

.capsule-point {
  margin-top:18px;
  padding:14px 16px;
  border-left:3px solid var(--neon-pink);
  background:rgba(255,0,127,.05);
  color:var(--text-dim);
  font-size:.84rem;
}


/* 큰 캡슐 */

.capsule-big-visual {
  width:190px;
  height:220px;
  position:relative;
  margin:0 auto;
  filter:drop-shadow(0 18px 30px rgba(255,0,127,.15));
}

.capsule-glass-top {
  height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(255,255,255,.45);
  border-radius:90px 90px 12px 12px;
  background:rgba(255,255,255,.09);
  backdrop-filter:blur(6px);
}

.capsule-glass-top span {
  font-size:3rem;
}

.capsule-glass-bottom {
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px 12px 90px 90px;
  background:linear-gradient(
    135deg,
    rgba(255,0,127,.8),
    rgba(161,0,255,.8)
  );
  color:#fff;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:2px;
}


/* 공통 제목 */

.capsule-section-title {
  margin-bottom:25px;
  text-align:center;
}

.capsule-section-title > span {
  display:block;
  margin-bottom:5px;
  color:var(--neon-pink);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:1.3px;
}

.capsule-section-title h2 {
  margin-bottom:7px;
  font-size:1.7rem;
}

.capsule-section-title p {
  color:var(--text-dim);
  font-size:.87rem;
}


/* COLLECTION */

.capsule-collection-section {
  margin-bottom:65px;
}

.capsule-collection-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.collection-card {
  position:relative;
  padding:28px 19px 22px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:18px;
  background:rgba(255,255,255,.028);
  text-align:center;
  transition:.25s;
}

.collection-card:hover {
  transform:translateY(-5px);
  border-color:rgba(0,240,255,.4);
  box-shadow:0 10px 25px rgba(0,240,255,.08);
}

.collection-capsule {
  width:82px;
  height:82px;
  margin:0 auto 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(255,255,255,.3);
  border-radius:50%;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.14) 48%,
      rgba(255,0,127,.25) 50%
    );
  font-size:1.8rem;
  box-shadow:inset 0 0 20px rgba(255,255,255,.05);
}

.collection-card small {
  display:block;
  margin-bottom:3px;
  color:var(--neon-pink);
  font-size:.6rem;
  font-weight:900;
  letter-spacing:1px;
}

.collection-card h3 {
  margin-bottom:7px;
  font-size:1rem;
}

.collection-card p {
  color:var(--text-dim);
  font-size:.8rem;
  line-height:1.7;
}


/* TIMELINE */

.capsule-timeline-section {
  margin-bottom:65px;
}

.capsule-timeline {
  max-width:780px;
  margin:0 auto;
  position:relative;
}

.capsule-timeline::before {
  content:"";
  position:absolute;
  left:27px;
  top:25px;
  bottom:25px;
  width:1px;
  background:linear-gradient(
    to bottom,
    var(--neon-pink),
    var(--neon-purple),
    var(--neon-cyan)
  );
  opacity:.6;
}

.timeline-item {
  display:grid;
  grid-template-columns:56px 1fr;
  gap:20px;
  position:relative;
  padding:15px 0 25px;
}

.timeline-dot {
  width:56px;
  height:56px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,0,127,.4);
  border-radius:50%;
  background:var(--bg-dark);
  color:var(--neon-pink);
  font-size:.7rem;
  font-weight:900;
  box-shadow:0 0 15px rgba(255,0,127,.1);
}

.timeline-content {
  padding:4px 0;
}

.timeline-content h3 {
  margin-bottom:5px;
  font-size:1rem;
}

.timeline-content p {
  color:var(--text-dim);
  font-size:.83rem;
  line-height:1.75;
}


/* SHELF */

.capsule-shelf-section {
  margin-bottom:65px;
}

.capsule-shelf {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  position:relative;
  gap:0;
  padding-bottom:12px;
  border-bottom:4px solid rgba(255,255,255,.12);
}

.shelf-item {
  position:relative;
  padding:25px 20px;
  text-align:center;
}

.shelf-item:not(:last-child)::after {
  content:"";
  position:absolute;
  right:0;
  top:25%;
  width:1px;
  height:50%;
  background:rgba(255,255,255,.08);
}

.shelf-icon {
  display:block;
  margin-bottom:8px;
  font-size:2rem;
}

.shelf-item > strong {
  display:block;
  margin-bottom:3px;
  color:var(--neon-cyan);
  font-size:.62rem;
  letter-spacing:1px;
}

.shelf-item h3 {
  margin-bottom:6px;
  font-size:1rem;
}

.shelf-item p {
  color:var(--text-dim);
  font-size:.8rem;
  line-height:1.7;
}


/* GACHA SHOP CONNECT */

.capsule-place-section {
  display:grid;
  grid-template-columns:130px 1fr;
  align-items:center;
  gap:28px;
  margin-bottom:35px;
  padding:30px;
  border:1px solid rgba(0,240,255,.22);
  border-radius:18px;
  background:linear-gradient(
    135deg,
    rgba(0,240,255,.04),
    rgba(161,0,255,.04)
  );
}

.capsule-place-icon {
  width:110px;
  height:110px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(0,240,255,.06);
  border:1px solid rgba(0,240,255,.2);
  font-size:3rem;
}

.capsule-place-text > span {
  color:var(--neon-cyan);
  font-size:.65rem;
  font-weight:900;
  letter-spacing:1px;
}

.capsule-place-text h2 {
  margin:4px 0 7px;
  font-size:1.35rem;
}

.capsule-place-text p {
  color:var(--text-dim);
  font-size:.84rem;
  line-height:1.75;
}

.capsule-place-buttons {
  display:flex;
  gap:10px;
  margin-top:13px;
}

.capsule-place-buttons a {
  padding:7px 12px;
  border:1px solid rgba(0,240,255,.25);
  border-radius:18px;
  color:var(--neon-cyan);
  text-decoration:none;
  font-size:.73rem;
  font-weight:800;
}


/* FAQ */

.capsule-faq-section {
  margin:35px 0 30px;
  padding:30px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  background:rgba(255,255,255,.028);
}


/* TABLET */

@media (max-width:900px) {

  .capsule-collection-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .capsule-intro {
    grid-template-columns:1fr;
    text-align:center;
  }

  .capsule-intro-text p {
    text-align:left;
  }

}


/* MOBILE */

@media (max-width:700px) {

}


/* SMALL MOBILE */

@media (max-width:420px) {

  .capsule-collection-grid {
    grid-template-columns:1fr;
  }

}


/* ==================================================
   가챠샵 성지 PAGE
   - '가챠샵 성지란?' 소개 박스 제거 기준
   - 7개 지역 카드용
   - PC: 4개 + 가운데 3개
   - Tablet: 2개 + 마지막 카드 가운데
   - Mobile: 1열
================================================== */

.spot-main{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:45px 24px 80px;
  box-sizing:border-box;
}

/* ==================================================
   공통 섹션 제목
================================================== */

.spot-section-head{
  margin-bottom:30px;
  text-align:center;
}

.spot-section-head > span{
  display:block;
  margin-bottom:6px;
  color:#ff007f;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.2px;
}

.spot-section-head h2{
  margin:0 0 8px;
  color:#fff;
  font-size:28px;
}

.spot-section-head p{
  max-width:650px;
  margin:0 auto;
  color:#9995aa;
  font-size:14px;
  line-height:1.7;
}

/* ==================================================
   7개 지역 카드
================================================== */

.spot-explore{
  width:100%;
  margin:0 0 75px;
}

.spot-area-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px;
}

.spot-area-card{
  grid-column:span 3;
  min-width:0;
  position:relative;
  padding:20px 19px 18px;
  overflow:hidden;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.012)
    );
  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

/* 2번째 줄 3개 가운데 정렬 */
.spot-area-card:nth-child(5){
  grid-column:2 / span 3;
}

.spot-area-card:nth-child(6){
  grid-column:5 / span 3;
}

.spot-area-card:nth-child(7){
  grid-column:8 / span 3;
}

.spot-area-card::after{
  content:"";
  position:absolute;
  right:-55px;
  top:-55px;
  width:120px;
  height:120px;
  border-radius:50%;
  background:#ff007f;
  opacity:.025;
  pointer-events:none;
}

.spot-area-japan::after{
  background:#00f0ff;
}

.spot-area-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,0,127,.35);
  background:
    linear-gradient(
      145deg,
      rgba(255,0,127,.045),
      rgba(255,255,255,.015)
    );
  box-shadow:0 12px 30px rgba(255,0,127,.06);
}

.spot-area-japan:hover{
  border-color:rgba(0,240,255,.40);
  background:
    linear-gradient(
      145deg,
      rgba(0,240,255,.045),
      rgba(255,255,255,.015)
    );
  box-shadow:0 12px 30px rgba(0,240,255,.05);
}

/* 카드 상단 */

.spot-area-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}

.spot-area-flag{
  font-size:20px;
  line-height:1;
}

.spot-area-no{
  color:rgba(255,255,255,.14);
  font-size:19px;
  font-weight:900;
  line-height:1;
}

/* 지역 핀 */

.spot-area-icon{
  width:39px;
  height:39px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
  border:1px solid rgba(255,0,127,.25);
  border-radius:12px;
  background:rgba(255,0,127,.055);
  font-size:16px;
}

.spot-area-japan .spot-area-icon{
  border-color:rgba(0,240,255,.25);
  background:rgba(0,240,255,.05);
}

/* 지역 이름 */

.spot-area-name{
  margin-bottom:10px;
}

.spot-area-name > span{
  display:block;
  margin-bottom:1px;
  color:#ff007f;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.2px;
}

.spot-area-japan .spot-area-name > span{
  color:#00f0ff;
}

.spot-area-name h3{
  margin:0;
  color:#fff;
  font-size:20px;
  line-height:1.3;
}

/* 지역 설명 */

.spot-area-card p{
  min-height:63px;
  margin:0;
  color:#9995aa;
  font-size:12px;
  line-height:1.7;
}

/* 키워드 */

.spot-area-keywords{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:14px;
}

.spot-area-keywords span{
  padding:4px 7px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  color:#858193;
  font-size:9px;
}

/* ==================================================
   성지 탐방
================================================== */

.spot-route-section{
  width:100%;
  margin-bottom:80px;
}

.spot-route{
  width:100%;
  max-width:850px;
  margin:38px auto 0;
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;
}

.spot-route-item{
  text-align:center;
}

.route-circle{
  width:88px;
  height:88px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 12px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:50%;
  background:#181524;
  font-size:30px;
}

.spot-route-item > span{
  display:block;
  margin-bottom:4px;
  color:#ff007f;
  font-size:10px;
  font-weight:900;
}

.spot-route-item h3{
  margin:0 0 6px;
  color:#fff;
  font-size:17px;
}

.spot-route-item p{
  margin:0;
  color:#9995aa;
  font-size:12px;
  line-height:1.65;
}

.route-line{
  margin:0 18px;
  color:rgba(0,240,255,.4);
  letter-spacing:4px;
}

/* ==================================================
   국내 / 일본
================================================== */

.spot-country-section{
  width:100%;
  margin-bottom:60px;
  padding:38px 30px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  background:rgba(255,255,255,.02);
}

.spot-country-title{
  margin-bottom:32px;
  text-align:center;
}

.spot-country-title > span{
  display:block;
  color:#00f0ff;
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
}

.spot-country-title h2{
  margin:5px 0 0;
  color:#fff;
  font-size:27px;
}

.spot-country-row{
  display:grid;
  grid-template-columns:1fr 50px 1fr;
  align-items:center;
}

.country-side{
  padding:10px 30px;
  text-align:center;
}

.country-flag{
  display:block;
  margin-bottom:8px;
  font-size:35px;
}

.country-side small{
  color:#ff007f;
  font-size:10px;
  font-weight:900;
}

.country-side h3{
  margin:5px 0 9px;
  color:#fff;
  font-size:18px;
}

.country-side p{
  margin:0;
  color:#9995aa;
  font-size:13px;
  line-height:1.7;
}

.country-vs{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:auto;
  border:1px solid rgba(0,240,255,.3);
  border-radius:50%;
  color:#00f0ff;
  font-size:11px;
  font-weight:900;
}

/* ==================================================
   FAQ
================================================== */

.spot-faq-section{
  width:100%;
  margin:50px 0 30px;
  padding:32px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  background:rgba(255,255,255,.025);
}

/* ==================================================
   TABLET
================================================== */

@media(max-width:900px){

  .spot-main{
    padding-left:18px;
    padding-right:18px;
  }

  .spot-area-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .spot-area-card,
  .spot-area-card:nth-child(5),
  .spot-area-card:nth-child(6),
  .spot-area-card:nth-child(7){
    grid-column:auto;
  }

  /* 7번째 카드만 가운데 정렬 */
  .spot-area-card:nth-child(7){
    grid-column:1 / -1;
    width:calc(50% - 7px);
    justify-self:center;
  }
}

/* ==================================================
   MOBILE
================================================== */

@media(max-width:700px){

  .spot-main{
    padding:35px 14px 60px;
  }

  .spot-section-head{
    margin-bottom:22px;
  }

  .spot-section-head h2{
    font-size:23px;
  }

  .spot-section-head p{
    max-width:100%;
    font-size:12px;
  }

  .spot-explore{
    margin-bottom:55px;
  }

  .spot-area-grid{
    grid-template-columns:1fr;
    gap:10px;
  }

  .spot-area-card,
  .spot-area-card:nth-child(5),
  .spot-area-card:nth-child(6),
  .spot-area-card:nth-child(7){
    grid-column:auto;
    width:100%;
  }

  .spot-area-card{
    padding:18px;
  }

  .spot-area-top{
    margin-bottom:15px;
  }

  .spot-area-card p{
    min-height:0;
    font-size:12px;
  }

  .spot-area-name h3{
    font-size:19px;
  }

  .spot-route-section{
    margin-bottom:60px;
  }

  .spot-route{
    grid-template-columns:1fr;
    gap:5px;
  }

  .route-line{
    height:28px;
    margin:0;
    font-size:0;
    text-align:center;
  }

  .route-line::after{
    content:"↓";
    color:rgba(0,240,255,.5);
    font-size:15px;
  }

  .spot-route-item{
    padding:8px 0;
  }

  .spot-country-section{
    padding:28px 18px;
  }

  .spot-country-title h2{
    font-size:23px;
  }

  .spot-country-row{
    grid-template-columns:1fr;
    gap:18px;
  }

  .country-side{
    padding:10px;
  }

  .country-vs{
    margin:0 auto;
  }

  .spot-faq-section{
    padding:23px 18px;
  }
}

/* ==================================================
   PAGE ENTER ANIMATION
   페이지 접속 / 새로고침 시 1회 실행
   기존 디자인은 건드리지 않고 등장 효과만 추가
================================================== */

/* 히어로 */
.hero-content,
.sub-hero-inner{
  animation:pageEnterHero .75s cubic-bezier(.22,.7,.25,1) both;
}

/* 메인 영역 */
.main-container,
.sub-main,
.capsule-main,
.spot-main{
  opacity:0;
  transform:translateY(22px);
  animation:pageEnterMain .8s cubic-bezier(.22,.7,.25,1) .18s both;
}

/* 메인 안쪽 섹션도 살짝 시간차를 두고 등장 */
.main-container > *,
.sub-main > *,
.capsule-main > *,
.spot-main > *{
  opacity:0;
  transform:translateY(14px);
  animation:pageEnterItem .65s cubic-bezier(.22,.7,.25,1) both;
}

.main-container > *:nth-child(1),
.sub-main > *:nth-child(1),
.capsule-main > *:nth-child(1),
.spot-main > *:nth-child(1){
  animation-delay:.28s;
}

.main-container > *:nth-child(2),
.sub-main > *:nth-child(2),
.capsule-main > *:nth-child(2),
.spot-main > *:nth-child(2){
  animation-delay:.36s;
}

.main-container > *:nth-child(3),
.sub-main > *:nth-child(3),
.capsule-main > *:nth-child(3),
.spot-main > *:nth-child(3){
  animation-delay:.44s;
}

.main-container > *:nth-child(n+4),
.sub-main > *:nth-child(n+4),
.capsule-main > *:nth-child(n+4),
.spot-main > *:nth-child(n+4){
  animation-delay:.52s;
}

@keyframes pageEnterHero{
  from{
    opacity:0;
    transform:translateY(14px) scale(.97);
    filter:blur(4px);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

@keyframes pageEnterMain{
  from{
    opacity:0;
    transform:translateY(22px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes pageEnterItem{
  from{
    opacity:0;
    transform:translateY(14px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* 모바일 */
@media(max-width:700px){

  .hero-content,
  .sub-hero-inner{
    animation-duration:.6s;
  }

  .main-container,
  .sub-main,
  .capsule-main,
  .spot-main{
    animation-duration:.65s;
  }

  .main-container > *,
  .sub-main > *,
  .capsule-main > *,
  .spot-main > *{
    animation-duration:.55s;
  }
}

/* 모션 최소화 설정 사용자 */
@media(prefers-reduced-motion:reduce){

  .hero-content,
  .sub-hero-inner,
  .main-container,
  .sub-main,
  .capsule-main,
  .spot-main,
  .main-container > *,
  .sub-main > *,
  .capsule-main > *,
  .spot-main > *{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    animation:none !important;
  }
}


/* =========================
   SEO topic internal links
========================= */
.topic-links-section {
  margin-top: 32px;
}

.topic-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.topic-link-grid a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, border-color .2s ease;
}

.topic-link-grid a:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.28);
}

.topic-link-grid strong {
  font-size: 1rem;
}

.topic-link-grid span {
  font-size: .9rem;
  opacity: .72;
}

.nav-fortune-btn {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

@media (max-width: 700px) {
  .topic-link-grid {
    grid-template-columns: 1fr;
  }
}


/* 지역 카드 전체 링크 */
a.spot-area-card{
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}

/* ==================================================
   GACHA FORTUNE RESULT EFFECTS
   [추가] 기존 CSS 수정 없음
================================================== */

/* 효과가 모달 밖으로 자연스럽게 보이도록 */
.modal-glass{

}

/* ==================================================
   공통 효과 레이어
================================================== */

.fortune-effect-layer{
  position:fixed;
  inset:0;
  z-index:99998;
  overflow:hidden;
  pointer-events:none;
}

/* ==================================================
   대박운 - 네온 충격파
================================================== */

.fortune-neon-ring{
  position:fixed;
  left:50%;
  top:50%;
  width:90px;
  height:90px;
  border:3px solid #ff007f;
  border-radius:50%;
  opacity:0;
  transform:translate(-50%,-50%) scale(.3);
  box-shadow:
    0 0 20px rgba(255,0,127,.9),
    inset 0 0 20px rgba(255,0,127,.4);
  animation:fortuneNeonRing 1.25s ease-out forwards;
}

.fortune-neon-ring.cyan{
  border-color:#00f0ff;
  box-shadow:
    0 0 24px rgba(0,240,255,.9),
    inset 0 0 20px rgba(0,240,255,.4);
}

.fortune-neon-ring.purple{
  border-color:#a100ff;
  box-shadow:
    0 0 24px rgba(161,0,255,.9),
    inset 0 0 20px rgba(161,0,255,.4);
}

@keyframes fortuneNeonRing{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.25);
  }

  15%{
    opacity:1;
  }

  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(6);
  }
}


/* ==================================================
   행운 - 클로버 / 별 낙하
================================================== */

.fortune-lucky-particle{
  position:fixed;
  top:-60px;
  z-index:99999;
  pointer-events:none;
  user-select:none;
  animation:fortuneLuckyFall linear forwards;
  filter:
    drop-shadow(0 0 7px rgba(54,255,139,.75))
    drop-shadow(0 0 12px rgba(255,234,0,.25));
}

@keyframes fortuneLuckyFall{
  0%{
    opacity:0;
    transform:
      translate3d(0,-40px,0)
      rotate(0deg)
      scale(.5);
  }

  10%{
    opacity:1;
  }

  75%{
    opacity:1;
  }

  100%{
    opacity:0;
    transform:
      translate3d(var(--fall-x),110vh,0)
      rotate(var(--fall-rotate))
      scale(1.1);
  }
}


/* ==================================================
   설렘운 - 별빛 궤도
================================================== */

.fortune-star-orbit{
  position:fixed;
  left:50%;
  top:50%;
  width:260px;
  height:260px;
  z-index:99999;
  pointer-events:none;
  transform:translate(-50%,-50%);
  animation:fortuneOrbitContainer 2.2s ease-out forwards;
}

.fortune-orbit-star{
  position:absolute;
  left:50%;
  top:50%;
  font-size:22px;
  filter:
    drop-shadow(0 0 6px #00f0ff)
    drop-shadow(0 0 12px #a100ff);
  animation:fortuneOrbitStar 1.9s ease-in-out forwards;
}

@keyframes fortuneOrbitContainer{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.55);
  }

  15%{
    opacity:1;
  }

  70%{
    opacity:1;
  }

  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(1.25);
  }
}

@keyframes fortuneOrbitStar{
  0%{
    transform:
      rotate(var(--orbit-start))
      translateX(45px)
      scale(.4);
    opacity:0;
  }

  15%{
    opacity:1;
  }

  50%{
    transform:
      rotate(calc(var(--orbit-start) + 200deg))
      translateX(115px)
      scale(1.25);
    opacity:1;
  }

  100%{
    transform:
      rotate(calc(var(--orbit-start) + 420deg))
      translateX(145px)
      scale(.3);
    opacity:0;
  }
}


/* ==================================================
   도전운 - 연기 파티클
================================================== */

.fortune-smoke{
  position:fixed;
  z-index:99999;
  width:35px;
  height:35px;
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(
      circle,
      rgba(255,80,60,.58) 0%,
      rgba(110,45,60,.30) 38%,
      rgba(30,20,38,0) 72%
    );
  filter:blur(4px);
  animation:fortuneSmoke 1.8s ease-out forwards;
}

@keyframes fortuneSmoke{
  0%{
    opacity:0;
    transform:
      translate(0,10px)
      scale(.3);
  }

  20%{
    opacity:.85;
  }

  100%{
    opacity:0;
    transform:
      translate(var(--smoke-x),var(--smoke-y))
      scale(2.8);
  }
}


/* ==================================================
   초대박 - 화면 플래시
================================================== */

.fortune-jackpot-flash{
  position:fixed;
  inset:0;
  z-index:99997;
  pointer-events:none;
  background:
    radial-gradient(
      circle at center,
      rgba(255,234,0,.30),
      rgba(255,0,127,.17) 28%,
      rgba(161,0,255,.08) 50%,
      transparent 72%
    );
  opacity:0;
  animation:fortuneJackpotFlash 1s ease-out forwards;
}

@keyframes fortuneJackpotFlash{
  0%{
    opacity:0;
  }

  12%{
    opacity:1;
  }

  30%{
    opacity:.28;
  }

  48%{
    opacity:.75;
  }

  100%{
    opacity:0;
  }
}


/* ==================================================
   도전운 - 모달 붉은 펄스
================================================== */

.fortune-challenge-pulse{
  animation:fortuneChallengePulse 1.1s ease-out;
}

@keyframes fortuneChallengePulse{
  0%{
    box-shadow:
      0 0 0 rgba(255,70,45,0);
  }

  25%{
    box-shadow:
      0 0 45px rgba(255,65,45,.48),
      inset 0 0 25px rgba(255,65,45,.12);
  }

  55%{
    box-shadow:
      0 0 18px rgba(255,65,45,.20);
  }

  100%{
    box-shadow:
      0 0 0 rgba(255,65,45,0);
  }
}


/* ==================================================
   모바일
================================================== */

@media(max-width:700px){

  .fortune-neon-ring{
    width:65px;
    height:65px;
  }

  .fortune-star-orbit{
    width:200px;
    height:200px;
  }

  .fortune-orbit-star{
    font-size:18px;
  }

}


/* ==================================================
   모션 최소화
================================================== */

/* ========================================
   FAQ 전체보기 버튼
======================================== */

.faq-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.faq-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 13px 24px;

  border: 1px solid var(--neon-pink);
  border-radius: 999px;

  color: #fff;
  background: rgba(255, 0, 127, 0.06);

  font-size: 14px;
  font-weight: 700;
  text-decoration: none;

  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.faq-more-btn span {
  color: var(--neon-pink);
  font-size: 17px;

  transition: transform 0.25s ease;
}

.faq-more-btn:hover {
  background: rgba(255, 0, 127, 0.13);

  box-shadow:
    0 0 18px rgba(255, 0, 127, 0.18);

  transform: translateY(-2px);
}

.faq-more-btn:hover span {
  transform: translateX(4px);
}