/* ── NWR2026 Main Stylesheet ────────────────────────────────── */


/* ── LIGHT SYSTEM TOKENS ─────────────────────────────────── */
:root {
  --surface-0:  #ffffff;
  --surface-1:  #f8fafc;   /* slate-50 */
  --surface-2:  #f1f5f9;   /* slate-100 */
  --surface-3:  #e2e8f0;   /* slate-200 */
  --ink:        #0f172a;   /* slate-900 */
  --ink-2:      #334155;   /* slate-700 */
  --ink-3:      #64748b;   /* slate-500 */
  --ink-4:      #94a3b8;   /* slate-400 */
  --accent:     #00E85E;
  --accent-dim: rgba(0,232,94,0.12);
  --accent-border: rgba(0,232,94,0.25);
  --blue:       #009CFF;
}
* { word-break: keep-all; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--surface-0); color: var(--ink); overflow-x: hidden;
  font-family: 'Nanum Square Neo', sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
/* 입력 필드는 선택/붙여넣기 허용 */
input, textarea, select { user-select: text; -webkit-user-select: text; }

/* ── NAV ──────────────────────────────────────────────────── */
.nav-glass {
  background: #ffffff;
  border-bottom: 1px solid var(--surface-3);
}
header {
  transform: translateY(-100%);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
header.nav-visible { transform: translateY(0); }
.drawer {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: #fff;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(.16,1,.3,1);
  overflow-y: auto;
}
.drawer.open { transform: translateX(0); }
.drawer-link {
  display: block;
  padding: 12px 0;
  font-family: 'Nanum Square Neo', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #1e1e1e;
  text-decoration: none;
  text-align: left;
  border-bottom: none;
}
.drawer-link-active { color: #00b840; }
.ham { display: none; }
@media (max-width: 768px) {
  .ham { display: flex; }
  .nav-desktop { display: none !important; }
}

/* ── SCROLL REVEAL ────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(2.8rem) scale(0.97);
  transition:
    opacity   .9s cubic-bezier(.16,1,.3,1),
    transform .9s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: translateY(0) scale(1); }
.d1 { transition-delay: .12s; } .d2 { transition-delay: .26s; }
.d3 { transition-delay: .40s; } .d4 { transition-delay: .54s; }

/* ── KIT CARD HOVER ───────────────────────────────────────── */
.kit-card {
  transition: transform 0.35s cubic-bezier(.22,.68,0,1.2), box-shadow 0.35s ease;
  cursor: pointer;
}
.kit-card:hover {
  transform: scale(1.04);
  box-shadow: 0 20px 60px -12px rgba(0,0,0,0.25);
  z-index: 10;
}
.kit-card .kit-img {
  transition: opacity 0.35s ease;
}

@media (max-width: 640px) {
  /* 상단 네비 높이: 모바일에서 62px (데스크톱은 인라인 100px 유지) */
  .nav-glass > div { height: 62px !important; }

  /* 푸터 사업자정보: 모바일에서 10px (데스크톱은 인라인 12px 유지) */
  .biz-info { font-size: 10px !important; }

  .kit-card .kit-img {
    background-size: auto 85% !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
  }
  .kit-card .kit-img-push {
    background-position: 150% center !important;
  }
  .kit-card .kit-img-bag {
    background-size: auto 110% !important;
    background-position: 95% center !important;
  }

}

.kit-card:hover .kit-img {
  opacity: 0.7 !important;
}

/* ── HERO ─────────────────────────────────────────────────── */
.hero-bg {
  background: #dfe2e6;
}
.hero-bg .hero-sub      { color: rgba(255,255,255,.88); }
.hero-bg .hero-info-sep { border-color: rgba(255,255,255,.20); }
.hero-bg .hero-info-val { color: #ffffff; }
.hero-bg .hero-cd-sep   { color: rgba(255,255,255,.60); }
.hero-bg .btn-outline {
  color: #ffffff;
  border-color: rgba(255,255,255,.40);
}
.hero-bg .btn-outline:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.70);
  color: #ffffff;
}
.hero-bg img[alt="NAVER WORKS RUN"] { filter: invert(1); }
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(100px); pointer-events: none;
}
.lanes-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; animation: lanePulse 6s ease-in-out infinite; }

/* ── CARDS ─────────────────────────────────────────────────── */
.card {
  background: var(--surface-0);
  border: 1px solid var(--surface-3);
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 8px 24px -8px rgba(0,0,0,.06);
}
.card-tint { background: var(--surface-1); border: 1px solid var(--surface-3); }
.card-accent { background: var(--surface-0); border: 1px solid var(--accent-border); box-shadow: 0 0 0 4px var(--accent-dim); }
.hero-card {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 8px 32px -8px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,1);
  backdrop-filter: blur(12px);
}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(105deg, #00E85E 0%, #009CFF 100%);
  color: #fff;
  font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em;
  padding: 15px 32px; border-radius: 9999px;
  transition: transform .2s cubic-bezier(.16,1,.3,1), filter .2s;
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-primary:active { transform: scale(.97); }
.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--ink-2);
  font-size: 1.25rem; font-weight: 700;
  padding: 14px 28px; border-radius: 9999px;
  border: 1.5px solid var(--surface-3);
  transition: border-color .2s, background .2s;
}
.btn-outline:hover { border-color: var(--accent-border); background: var(--accent-dim); color: var(--ink); }
.btn-outline:active { transform: scale(.97); }

/* ── MARQUEE ──────────────────────────────────────────────── */
.mq-strip { border-top: 1px solid var(--surface-3); border-bottom: 1px solid var(--surface-3); background: var(--surface-1); }

/* ── STAT NUMBER ──────────────────────────────────────────── */
.stat-num { font-size: clamp(40px,5.5vw,68px); font-weight: 800; letter-spacing: -.05em; line-height: 1; }

/* ── PRICE ────────────────────────────────────────────────── */
.price-big { font-size: clamp(34px,3.5vw,50px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }

/* ── FAQ ICON ─────────────────────────────────────────────── */
.fq-arr { transition: transform .2s ease; }
details[open] .fq-arr { transform: rotate(180deg); }
details > summary { list-style: none; }

/* ── FAQ 내용 구분선 ──────────────────────────────────────── */
.faq-body { position: relative; }
.faq-body::before {
  content: ''; display: block;
  position: absolute; top: 0; left: 24px; right: 24px;
  height: 1px; background: #1e1e1e;
}
.faq-body > div { padding: 18px 24px; position: relative; }
.faq-body > div:not(:last-child)::after {
  content: ''; display: block;
  position: absolute; bottom: 0; left: 24px; right: 24px;
  height: 1px; background: #e2e8f0;
}
.faq-body > div:last-child { padding-bottom: 22px; }
details > summary::-webkit-details-marker { display: none; }

/* ── SPONSOR CHIP ─────────────────────────────────────────── */
.spon-chip { transition: border-color .2s, color .2s, background .2s; }
.spon-chip:hover { border-color: var(--accent-border) !important; color: #00b840 !important; background: var(--accent-dim) !important; }

/* ── SECTION ALTERNATION ──────────────────────────────────── */
.sec-white { background: var(--surface-0); }
.sec-tint  { background: var(--surface-1); }
.sec-soft  { background: var(--surface-2); }

/* fixed nav 높이(54px)만큼 앵커 스크롤 오프셋 */
section[id] { scroll-margin-top: 54px; }

/* ── 보안: 개인정보 영역 선택/복사 방지 ── */
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* ── 보안: 개인정보 취급 안내 배너 ── */
.privacy-notice {
  background: #FFF7ED; border: 1.5px solid #FED7AA;
  border-radius: 18px; padding: 12px 16px;
  color: #92400E; line-height: 1.6;
  margin-bottom: 28px;
}
.privacy-notice strong { color: #C2410C; }

/* ── 보안: 세션 만료 경고 오버레이 ── */
#session-warn {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.55); align-items: center; justify-content: center;
}
#session-warn.show { display: flex; }
.session-warn-box {
  background: #fff; border-radius: 18px; padding: 32px 36px;
  max-width: 360px; width: 90%; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

/* ── COURSE PATH BOX ──────────────────────────────────────── */
.path-box { background: var(--accent-dim); border-radius: 18px; }

/* ── CTA BAND ─────────────────────────────────────────────── */
.cta-band {
  background: linear-gradient(110deg, #0f172a 0%, #1e293b 100%);
}

/* ── HERO FLUID GRADIENT ─────────────────────────────────── */
@keyframes b1move {
  0%   { top: 20%;  left: 75%;  transform: translate(-50%,-50%) scale(1);    }
  20%  { top: 80%;  left: 10%;  transform: translate(-50%,-50%) scale(1.12); }
  40%  { top: 5%;   left: 25%;  transform: translate(-50%,-50%) scale(0.9);  }
  60%  { top: 70%;  left: 85%;  transform: translate(-50%,-50%) scale(1.08); }
  80%  { top: 40%;  left: 40%;  transform: translate(-50%,-50%) scale(1.05); }
  100% { top: 20%;  left: 75%;  transform: translate(-50%,-50%) scale(1);    }
}
@keyframes b2move {
  0%   { top: 80%;  left: 18%;  transform: translate(-50%,-50%) scale(1);    }
  20%  { top: 15%;  left: 80%;  transform: translate(-50%,-50%) scale(1.1);  }
  40%  { top: 85%;  left: 75%;  transform: translate(-50%,-50%) scale(0.92); }
  60%  { top: 10%;  left: 10%;  transform: translate(-50%,-50%) scale(1.14); }
  80%  { top: 55%;  left: 55%;  transform: translate(-50%,-50%) scale(0.96); }
  100% { top: 80%;  left: 18%;  transform: translate(-50%,-50%) scale(1);    }
}
@keyframes b3move {
  0%   { top: 10%;  left: 42%;  transform: translate(-50%,-50%) scale(1);    }
  25%  { top: 60%;  left: 70%;  transform: translate(-50%,-50%) scale(1.15); }
  50%  { top: 90%;  left: 15%;  transform: translate(-50%,-50%) scale(0.88); }
  75%  { top: 30%;  left: 85%;  transform: translate(-50%,-50%) scale(1.1);  }
  100% { top: 10%;  left: 42%;  transform: translate(-50%,-50%) scale(1);    }
}
@keyframes b4move {
  0%   { top: 88%;  left: 88%;  transform: translate(-50%,-50%) scale(1);    }
  30%  { top: 12%;  left: 55%;  transform: translate(-50%,-50%) scale(1.2);  }
  55%  { top: 50%;  left: 5%;   transform: translate(-50%,-50%) scale(0.85); }
  80%  { top: 75%;  left: 45%;  transform: translate(-50%,-50%) scale(1.1);  }
  100% { top: 88%;  left: 88%;  transform: translate(-50%,-50%) scale(1);    }
}
@keyframes b5move {
  0%   { top: 5%;   left: 5%;   transform: translate(-50%,-50%) scale(1);    }
  33%  { top: 65%;  left: 60%;  transform: translate(-50%,-50%) scale(1.18); }
  66%  { top: 25%;  left: 90%;  transform: translate(-50%,-50%) scale(0.9);  }
  100% { top: 5%;   left: 5%;   transform: translate(-50%,-50%) scale(1);    }
}

.hero-fluid {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none; z-index: 1;
}
.hero-dim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(0,5,15,.55) 0%, rgba(0,5,15,.20) 55%, transparent 100%);
}
.hero-text-layer { text-shadow: 0 1px 14px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35); }
.fblob {
  position: absolute; border-radius: 50%;
  filter: blur(55px); will-change: transform, top, left;
}
.fblob-1 {
  width: 130vw; height: 120vh;
  background: radial-gradient(ellipse, #00E85E 0%, rgba(0,232,94,0.80) 30%, rgba(0,232,94,0.18) 60%, transparent 75%);
  animation: b1move 9s cubic-bezier(.45,0,.55,1) infinite;
}
.fblob-2 {
  width: 130vw; height: 120vh;
  background: radial-gradient(ellipse, #009CFF 0%, rgba(0,156,255,0.80) 30%, rgba(0,156,255,0.18) 60%, transparent 75%);
  animation: b2move 8s cubic-bezier(.45,0,.55,1) infinite;
}
.fblob-3 {
  width: 100vw; height: 100vh;
  background: radial-gradient(ellipse, rgba(0,220,140,0.95) 0%, rgba(0,200,120,0.55) 38%, transparent 68%);
  animation: b3move 11s cubic-bezier(.45,0,.55,1) infinite;
}
.fblob-4 {
  width: 90vw; height: 90vh;
  background: radial-gradient(ellipse, rgba(0,100,240,0.92) 0%, rgba(0,80,210,0.50) 38%, transparent 68%);
  animation: b4move 7s cubic-bezier(.45,0,.55,1) infinite;
}
.fblob-5 {
  width: 80vw; height: 80vh;
  background: radial-gradient(ellipse, rgba(0,232,94,0.90) 0%, rgba(0,232,94,0.42) 38%, transparent 68%);
  animation: b5move 13s cubic-bezier(.45,0,.55,1) infinite;
}
#fblob-mouse {
  position: absolute; border-radius: 50%;
  width: 55vw; height: 55vh;
  filter: blur(45px);
  background: radial-gradient(ellipse, rgba(0,232,94,0.70) 0%, rgba(0,156,255,0.55) 40%, transparent 68%);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none; will-change: left, top;
}

@media (prefers-reduced-motion: reduce) {
  .animate-float, .animate-floatd, .animate-floatc { animation: none; }
  .animate-marquee { animation: none; }
  .fblob-1, .fblob-2, .fblob-3, .fblob-4, .fblob-5 { animation: none !important; }
}

/* ── MINIMUM FONT SIZE (desktop only) ─────────────────────── */
.text-base { font-size: 1.3rem; }
@media (min-width: 1024px) {
  .text-sm  { font-size: 1rem; }
  .text-lg  { font-size: 1.25rem; }
}

/* ── HERO VIDEO BACKGROUND ──────────────────────────────────── */
#hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
}
#hero-video-overlay {
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(0,232,94,0.85) 0%,
    rgba(0,232,94,0.0) 6%);
  pointer-events: none;
}

/* ── SCROLL LINE ANIMATION ─────────────────────────────────── */
@keyframes scrollLine {
  0%   { transform: translateY(-100%); opacity: 1; }
  80%  { transform: translateY(250%);  opacity: 1; }
  100% { transform: translateY(250%);  opacity: 0; }
}
.scroll-line-anim {
  animation: scrollLine 1.6s ease-in-out infinite;
}

/* ── KIT TABS ──────────────────────────────────────────────── */
.kit-tab-active {
  background: #1e1e1e !important;
  color: #fff !important;
}

/* 모바일: 탭 버튼 13px, 폭이 넘치면 두 줄로 줄바꿈 (가운데 정렬) */
@media (max-width: 640px) {
  .kit-tabs { flex-wrap: wrap; gap: 6px; justify-content: center; }
  .kit-tabs button {
    font-size: 13px !important;
    padding-left: 14px;
    padding-right: 14px;
    white-space: nowrap;
  }
}
@media (max-width: 380px) {
  .kit-tabs { gap: 5px; }
  .kit-tabs button {
    font-size: 12px;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* ── STICKY BOTTOM BAR ─────────────────────────────────────── */
#sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050;
  background: transparent;
  display: flex; align-items: stretch;
  padding: 16px 16px 16px;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
#sticky-bar .sticky-inner {
  width: 100%;
  display: flex; align-items: stretch; gap: 12px;
}
#sticky-bar.visible { transform: translateY(0); }
.sticky-apply {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  background: #00E85E;
  border: 1.5px solid #1e1e1e;
  color: #1e1e1e; font-size: 1.1rem; font-weight: 800;
  padding: 13px 28px; border-radius: 18px;
  box-shadow: 0 6px 8px -3px rgba(0,0,0,0.40);
  transition: filter .2s, transform .15s;
  text-decoration: none;
  font-family: 'Nanum Square Neo', sans-serif;
}
.sticky-apply:hover  { background: #1e1e1e !important; color: #00E85E !important; border-color: #1e1e1e; transform: translateY(-1px); }
.sticky-apply:active { transform: scale(.97); }

/* ── 그린 버튼 공통 hover ──────────────────────────────────── */
.btn-green {
  background: #00E85E;
  color: #1e1e1e;
  border: 1.5px solid #1e1e1e;
  border-radius: 18px;
  font-weight: 800;
  cursor: pointer;
  transition: background .2s, color .2s, transform .15s;
  font-family: 'Nanum Square Neo', sans-serif;
}
.btn-green:hover  { background: #1e1e1e; color: #00E85E; }
.btn-green:active { transform: scale(.97); }

/* 인라인 style에 background:#00E85E 또는 그라데이션이 있는 버튼/링크 hover */
button[style*="background:#00E85E"]:hover,
a[style*="background:#00E85E"]:hover,
button[style*="background:linear-gradient"]:hover {
  background: #1e1e1e !important;
  color: #00E85E !important;
  transition: background .2s, color .2s;
}
.sticky-share {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #00E85E; border: 1.5px solid #1e1e1e;
  color: #1e1e1e; font-size: 1rem; font-weight: 700;
  padding: 0 20px; border-radius: 18px;
  cursor: pointer;
  box-shadow: 0 6px 8px -3px rgba(0,0,0,0.40);
  transition: filter .2s, transform .15s;
  align-self: stretch;
}
.sticky-share:hover  { background: #1e1e1e; color: #00E85E; border-color: #1e1e1e; }
.sticky-share:active { transform: scale(.97); }
.share-wrap { position: relative; flex-shrink: 0; display: flex; }
#share-sheet, #about-share-sheet {
  position: absolute; bottom: calc(100% + 10px); right: 0;
  background: #fff; border-radius: 18px; padding: 14px 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18); border: 1px solid #f1f5f9;
  display: flex; gap: 20px; align-items: flex-start;
  opacity: 0; pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16,1,0.3,1);
  z-index: 1100; white-space: nowrap;
}
#share-sheet.open, #about-share-sheet.open { opacity: 1; pointer-events: all; transform: translateY(0); }
.sitem {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; background: none; border: none; padding: 0;
  font-family: 'Nanum Square Neo',sans-serif;
  font-size: 15px; font-weight: 700; color: #64748B;
  transition: transform 0.2s; min-width: 48px;
}
.sitem:hover { transform: translateY(-2px); }
.sitem-icon {
  width: 46px; height: 46px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}

/* ── SCROLL TO TOP ──────────────────────────────────────────── */
#scrollTop {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 999;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ink); color: #fff;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  opacity: 0; transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, background .2s, bottom .35s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
#scrollTop.visible {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
#sticky-bar.visible ~ #scrollTop {
  bottom: calc(2rem + 72px);
}
#scrollTop:hover { background: var(--accent); }
#scrollTop:active { transform: scale(.93); }

/* 동작 줄이기: 영상은 재생하지 않지만(위 JS에서 처리) poster 정지화면은 배경으로 유지 → 숨기지 않음 */

/* ── LOOKUP MODAL ─────────────────────────────────────────── */
.lk-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.lk-overlay.active { opacity: 1; pointer-events: all; }
.lk-box {
  background: #fff;
  border-radius: 18px;
  width: 100%; max-width: 540px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease;
  box-shadow: 0 32px 80px rgba(0,0,0,0.2);
  will-change: transform;
}
.lk-overlay.active .lk-box { transform: translateY(0) scale(1); }
.lk-step { display: none; }
.lk-step.active {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0;
}
.lk-step.active > .lk-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.lk-step.active > .lk-scroll::-webkit-scrollbar { display: none; }
.lk-footer {
  flex: 0 0 auto;
  display: flex; gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid #F1F5F9;
  background: #fff;
}
.lk-progress { height: 3px; background: #E2E8F0; border-radius: 100px; overflow: hidden; margin-bottom: 24px; }
.lk-progress-fill { height: 100%; background: #00E85E; border-radius: 100px; transition: width 0.5s cubic-bezier(0.16,1,0.3,1); }
.lk-form-group { margin-bottom: 22px; }
.lk-label { display: block; font-weight: 700; color: #334155; margin-bottom: 6px; }
.lk-label .req { color: #EF4444; margin-left: 2px; }
.lk-input {
  width: 100%; border: 1.5px solid #E2E8F0; border-radius: 18px;
  padding: 12px 16px; font-family: 'Nanum Square Neo',sans-serif;
  color: #0F172A; background: #F8FAFC;
  transition: border-color 0.2s, box-shadow 0.2s; outline: none;
}
.lk-input:focus { border-color: #00E85E; background: #fff; box-shadow: 0 0 0 4px rgba(0,232,94,0.12); }
.lk-input:disabled { background: #F1F5F9; color: #94A3B8; cursor: not-allowed; }
.lk-select {
  width: 100%; border: 1.5px solid #E2E8F0; border-radius: 18px;
  padding: 12px 16px; font-family: 'Nanum Square Neo',sans-serif;
  color: #0F172A; background: #F8FAFC;
  transition: border-color 0.2s; outline: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.lk-select:focus { border-color: #00E85E; box-shadow: 0 0 0 4px rgba(0,232,94,0.12); }
.lk-radio-group { display: flex; gap: 8px; flex-wrap: wrap; }
.lk-radio-pill {
  flex: 1; min-width: 70px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #E2E8F0; border-radius: 18px;
  padding: 9px 8px; font-weight: 700; color: #64748B;
  cursor: pointer; text-align: center; white-space: nowrap; transition: all 0.2s ease;
  font-family: 'Nanum Square Neo',sans-serif;
}
.wave-tag { font-size: 15px; font-weight: 800; letter-spacing: 0.03em; }
.lk-radio-pill.selected { border-color: #00E85E; background: rgba(0,232,94,0.12); color: #00a838; }
.lk-radio-pill[data-color="blue"].selected { border-color: #009CFF; background: rgba(0,156,255,0.12); color: #007fd4; }
.btn-lk-back {
  flex: 1; background: #F8FAFC; border: 1.5px solid #E2E8F0; border-radius: 18px;
  padding: 13px; font-weight: 700; color: #64748B; cursor: pointer;
  font-family: 'Nanum Square Neo',sans-serif; transition: all 0.2s;
}
.btn-lk-back:hover { border-color: #94A3B8; color: #334155; }
.btn-lk-next {
  flex: 2; background: #00E85E; border: 1.5px solid #1e1e1e; border-radius: 18px;
  padding: 13px; font-weight: 700; color: #1e1e1e; cursor: pointer;
  font-family: 'Nanum Square Neo',sans-serif;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.btn-lk-next:hover { background: #1e1e1e; color: #00E85E; }
.btn-lk-next:active { transform: scale(0.98); }
.lk-result-icon {
  width: 68px; height: 68px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.lk-info-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #e2e8f0; }
.lk-info-row:last-child { border-bottom: none; }
.lk-info-label { color: #94A3B8; font-weight: 700; }
.lk-info-value { color: #0F172A; font-weight: 700; }
.lk-info-value.green { color: #00b840; }
.lk-cancel-btn {
  background: transparent; border: 1.5px solid #FECACA;
  color: #EF4444; font-size: 15px; font-weight: 700;
  transition: background .2s, border-color .2s, color .2s;
}
.lk-cancel-btn:hover {
  background: #EF4444; border-color: #EF4444; color: #fff;
}

/* ── REGISTRATION MODAL ───────────────────────────────────── */
.reg-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.reg-overlay.active { opacity: 1; pointer-events: all; }
.reg-box {
  position: relative; /* 모바일 상시 스크롤바(.reg-scrollbar) 기준 */
  background: #fff; border-radius: 18px;
  width: 100%; max-width: 680px; max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease;
  box-shadow: 0 32px 80px rgba(0,0,0,0.2);
  will-change: transform;
}
/* 모달 열림 중 배경 애니메이션 정지 — backdrop-filter가 매 프레임 재블러하는 비용 제거(버튼 클릭 랙 방지) */
body.modal-open .animate-float,
body.modal-open .animate-floatd,
body.modal-open .animate-floatc,
body.modal-open .animate-marquee,
body.modal-open .fblob-1,
body.modal-open .fblob-2,
body.modal-open .fblob-3,
body.modal-open .fblob-4,
body.modal-open .fblob-5,
body.modal-open .lanes-svg {
  animation-play-state: paused !important;
}
@media (min-width: 769px) {
  /* 크기(font-size)는 :root 변수(--form-*)로 관리 — 여기선 여백만 */
  .lk-label { margin-bottom: 8px; }
  .lk-input { padding: 14px 18px; border-radius: 18px; }
  .lk-select { padding: 14px 18px; border-radius: 18px; }
  .lk-radio-pill { padding: 11px 14px; }
  .lk-form-group { margin-bottom: 22px; }
  .btn-reg-back { padding: 15px; }
  .btn-reg-next { padding: 15px; }
  .btn-lk-back { padding: 15px; }
  .btn-lk-next { padding: 15px; }
  .reg-footer { padding: 18px 32px 24px; }
  .lk-progress { margin-bottom: 28px; }
  .reg-scroll.p-6 { padding: 32px 36px 8px !important; }
  .reg-scroll.p-8 { padding: 40px 36px !important; }
}
.reg-overlay.active .reg-box { transform: translateY(0) scale(1); }
.reg-step { display: none; }
.reg-step.active { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
/* 팝업 전체 스크롤바 표시 — 스크롤 가능함을 인지할 수 있게 얇은 스크롤바 노출
   (흰 테두리로 가장자리에서 띄우고, 트랙 상하 여백으로 둥근 모서리를 피해 자연스럽게) */
.reg-step.active > .reg-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #e3e9f0 transparent;
}
.reg-step.active > .reg-scroll::-webkit-scrollbar { width: 9px; }
.reg-step.active > .reg-scroll::-webkit-scrollbar-thumb {
  background: #e3e9f0; border-radius: 8px;
  border: 3px solid #fff; background-clip: padding-box; /* 실제 보이는 두께 ~3px */
}
.reg-step.active > .reg-scroll::-webkit-scrollbar-thumb:hover { background: #c9d3df; background-clip: padding-box; }
.reg-step.active > .reg-scroll::-webkit-scrollbar-track { background: transparent; margin: 16px 0; }
/* 모바일: 스크롤바 상시 노출 — iOS/안드로이드 오버레이 스크롤바는 스크롤 중에만 보이므로
   네이티브는 숨기고 JS 로 동기화되는 커스텀 인디케이터(.reg-scrollbar)를 항상 표시 */
.reg-scrollbar { position: absolute; top: 16px; bottom: 16px; right: 5px; width: 4px; z-index: 20; pointer-events: none; display: none; }
.reg-scrollbar-thumb { position: absolute; left: 0; width: 100%; background: #c9d3df; border-radius: 4px; min-height: 28px; }
@media (max-width: 640px) {
  .reg-step.active > .reg-scroll { scrollbar-width: none; }
  .reg-step.active > .reg-scroll::-webkit-scrollbar { display: none; }
  .reg-scrollbar.visible { display: block; }
}
.reg-civil-notice {
  background: #FFF7ED; border: 1.5px solid #FED7AA; border-radius: 18px;
  padding: 10px 14px; color: #C2410C; font-weight: 700;
  margin-top: 8px; display: none;
  white-space: pre-line; word-break: keep-all; overflow-wrap: break-word; line-height: 1.5;
}
.reg-footer {
  flex: 0 0 auto; display: flex; gap: 10px;
  padding: 16px 24px 20px; border-top: 1px solid #F1F5F9; background: #fff;
}
.btn-reg-back {
  flex: 1; background: #F8FAFC; border: 1.5px solid #E2E8F0; border-radius: 18px;
  padding: 13px; font-weight: 700; color: #64748B; cursor: pointer;
  font-family: 'Nanum Square Neo',sans-serif;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.btn-reg-back:hover { border-color: #94A3B8; color: #334155; }
.btn-reg-next {
  flex: 2; background: #00E85E; border: 1.5px solid #1e1e1e; border-radius: 18px;
  padding: 13px; font-weight: 700; color: #1e1e1e; cursor: pointer;
  font-family: 'Nanum Square Neo',sans-serif;
  transition: background 0.2s, color 0.2s, transform 0.1s ease;
}
.btn-reg-next:hover { background: #1e1e1e; color: #00E85E; }
.btn-reg-next:active { transform: scale(0.98); }
.btn-reg-next:disabled {
  background: #E2E8F0; border-color: #CBD5E1; color: #94A3B8;
  cursor: not-allowed; transform: none;
}
.terms-agree-row {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 14px;
  padding: 14px 16px; border: 1.5px solid #00E85E; border-radius: 14px;
  background: rgba(0,232,94,0.07); font-weight: 700;
  color: #1e1e1e; cursor: pointer; transition: border-color 0.2s, background 0.2s, opacity 0.2s;
}
.terms-agree-row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; accent-color: #00b840; }
.terms-agree-row.locked {
  border-color: #E2E8F0; background: #F8FAFC; color: #94A3B8;
  cursor: not-allowed;
}
.pay-option {
  border: 1.5px solid #E2E8F0; border-radius: 18px; padding: 14px 16px;
  cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease;
  display: flex; align-items: center; gap: 12px;
}
.pay-option.selected { border-color: #00E85E; background: rgba(0,232,94,0.07); }
.pay-option:hover { border-color: #94A3B8; }
.pay-radio {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid #CBD5E1;
  transition: all 0.2s; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.pay-option.selected .pay-radio { border-color: #00E85E; background: #00E85E; }
.pay-option.selected .pay-radio::after { content: ''; width: 6px; height: 6px; background: #fff; border-radius: 50%; }

/* ── 반응형 보정 ─────────────────────────────────────────────── */

/* 카운트다운 배너: 모바일에서 박스 축소 */
@media (max-width: 480px) {
  #dday-banner > div { height: 80px !important; gap: 12px !important; }
  #dday-banner [style*="width:64px"] { width: 48px !important; height: 44px !important; border-radius: 18px !important; }
  #dday-banner [style*="font-size:32px"] { font-size: 22px !important; }
  #dday-banner [style*="font-size:24px"] { font-size: 16px !important; }
  #dday-banner [style*="font-size:13px"] { display: none !important; }
  #dday-banner [style*="gap:8px"] { gap: 5px !important; }
}

/* 키트 캐러셀 */
#kit-track { user-select: none; -webkit-user-select: none; cursor: grab; }
#kit-track:active { cursor: grabbing; }
/* 모바일: 카드 높이를 이미지 비율(894×548 완성 컷)에 맞춰 자동 계산 — PC 구도 그대로 축소됨 */
@media (max-width: 640px) {
  #kit-card { height: auto !important; aspect-ratio: 894 / 548; }
}

/* 혜택 카드 텍스트: 모바일에서 폰트 조정 */
@media (max-width: 639px) {
  #info .rounded-3xl p[style*="font-size:30px"] { font-size: 22px !important; }
  #info .rounded-3xl .text-2xl { font-size: 1.25rem; }
}

/* 코스 섹션: 모바일에서 경로 태그·타임라인 폰트 축소 (촘촘함/짤림 방지) */
@media (max-width: 640px) {
  #course div[style*="font-size:15px"]  { font-size: 12px !important; }   /* 코스 경로 태그 */
  #course span[style*="font-size:15px"] { font-size: 13.5px !important; } /* 타임라인 설명 */
  #course span[style*="font-size:13px"] { font-size: 12px !important; }   /* 타임라인 시각 */
}

/* 티셔츠 사이즈표: 모바일에서 가로 스크롤 없이 한 화면에 (셀 여백·폰트 축소) */
@media (max-width: 640px) {
  #kit-size-chart th,
  #kit-size-chart td {
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 12px !important;
  }
}

/* ── 반응형 표시 유틸 ──────────────────────────────────────────── */
/* tw.css 빌드에 sm: 변형이 전혀 없어(sm:hidden/sm:inline 등 미포함)   */
/* Tailwind 반응형 클래스가 동작하지 않으므로 자체 정의해서 사용        */
.only-desktop      { display: none; }
.only-mobile       { display: inline; }
.only-mobile-block { display: block; }
@media (min-width: 641px) {
  .only-desktop      { display: inline; }
  .only-mobile,
  .only-mobile-block { display: none; }
}

/* ── 레이스팩 안내 문구: PC 15px / 모바일 13px ─────────────────── */
.kit-note { font-size: 15px; }
@media (max-width: 640px) {
  .kit-note { font-size: 13px; }
}

/* ── 환불 기준표: 모바일에서 잘리지 않도록 ──────────────────────── */
/* 셀 좌우 여백(px-5=20px)이 좁은 화면에서 부담 → 모바일에서 축소      */
/* .refund-table th/td (0-1-1) > .px-5 (0-1-0) 이라 !important 불필요  */
/* '비고' 열은 데스크톱에서만 표시 (원래 의도: hidden sm:table-cell) */
/* sm:table-cell 이 tw.css 빌드에 없어 항상 숨겨지던 문제를 대체       */
.refund-table .col-note { display: table-cell; }

/* 표 아래 '·' 안내 문구: 데스크톱만 좌측 여백, 모바일은 폭 확보 위해 제거 */
.refund-note { margin-left: 1.25rem; }

@media (max-width: 640px) {
  .refund-table th,
  .refund-table td {
    padding-left: 10px;
    padding-right: 10px;
    word-break: keep-all;
  }
  .refund-table .col-note { display: none; }
  .refund-note { margin-left: 0; }
}

/* ── 코스 카드 이미지 호버 확대 효과 ───────────────────────────── */
#course-5km-card,
#course-10km-card {
  overflow: hidden;
}
#course-5km-card img.course-map-img,
#course-10km-card img.course-map-img {
  transition: transform 0.4s ease;
}
#course-5km-card:hover img.course-map-img,
#course-10km-card:hover img.course-map-img {
  transform: scale(1.07);
}

/* ── 모바일 폰트 완화 (최소 15px 일괄적용분 되돌리기) ──────────── */
/* 데스크톱은 15px 유지, 모바일(≤640px)에서만 13px로 축소            */
/* 인라인 style을 덮어써야 하므로 !important 사용                    */
/* hero(#top)·footer·nav는 개별 지정 스펙이라 15px 그대로 유지        */
@media (max-width: 640px) {
  [style*="font-size:15px"],
  .text-\[15px\] {
    font-size: 15px !important;
  }

  #top [style*="font-size:15px"],
  footer [style*="font-size:15px"],
  nav [style*="font-size:15px"],
  #top .text-\[15px\],
  footer .text-\[15px\],
  nav .text-\[15px\] {
    font-size: 15px !important;
  }

  /* ※ 접수/조회 폼 요소(.privacy-notice / .lk-label / .lk-radio-pill /          */
  /*   .lk-info-row / .terms-agree-row / 입력창 / 버튼)의 글씨 크기는             */
  /*   파일 맨 아래 "★ 접수/조회 폼 글씨·버튼 크기" 블록에서 관리합니다.          */
  /*   여기엔 그 블록에 없는 것만 남깁니다.                                       */
  .lk-cancel-btn,       /* 원래 14px */
  .sitem {              /* 원래 11px */
    font-size: 13px !important;
  }

  /* ── 큰 제목류 모바일 축소 (데스크톱 크기는 그대로 유지) ────────── */
  /* 24/20/18px 고정이라 모바일에서 과하게 커 보이던 부분 정리          */
  .text-2xl { font-size: 20px !important; line-height: 1.35 !important; }
  .text-xl  { font-size: 18px !important; }
  .text-lg  { font-size: 16px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   ★ 접수/조회 폼 글씨·버튼 크기 — 요소별로 하나씩 수정하세요
     (다른 곳에 흩어져 있지 않고 여기서만 정해집니다)
   ═══════════════════════════════════════════════════════════════════ */

/* ── 데스크톱 ─────────────────────────────────────────────── */
.privacy-notice   { font-size: 15px; }  /* 개인정보 수집·이용 안내 박스 */
.lk-label         { font-size: 15px; }  /* 항목 라벨 (이름, 휴대전화 …) */
.lk-input         { font-size: 16px; }  /* 입력창 */
.lk-select        { font-size: 16px; }  /* 드롭다운 (사이즈·코스 선택 등) */
.lk-radio-pill    { font-size: 15px; }  /* 선택칩 (개인/단체/공무원, 성별 …) */
.reg-civil-notice { font-size: 15px; }  /* 공무원 안내 문구 */
.terms-agree-row  { font-size: 15px; }  /* 동의 체크 줄 */
#termsScrollBox   { font-size: 15px; }  /* 동의 항목 스크롤 박스 (안쪽 문단 전체) */
.reg-intro-note     { font-size: 13px; }  /* "…모두 읽고 확인한 것으로 간주합니다" 안내 */
#group-privacy-note { font-size: 13px; }  /* 단체 개인정보 빨간 안내 문구 */
#termsScrollHint,
#termsScrollHintTop { font-size: 15px; }  /* "동의 항목을 끝까지 스크롤…" 안내 (상/하단) */
.excel-btn          { font-size: 15px; }  /* 엑셀 양식 다운로드 / 엑셀 업로드 버튼 */
.member-add-btn     { font-size: 15px; }  /* 참가자 추가 버튼 (공무원·단체) */
.wave-hint          { font-size: 15px; }  /* 출발그룹 옆 "10K만 해당 (A·B)" */
.form-hint          { font-size: 13px; }  /* 버튼·라벨 옆 보조설명 (단체 참가자 정보 /
                                             동반 1인 할인 / @korea.kr 계정 안내) */
.mem-text         { font-size: 15px; font-weight: 800; }
                                        /* [참가자 추가] 눌러 생기는 카드 안의 글씨
                                           (참가자 1 제목 / 이름·생년월일·휴대전화·사이즈·
                                            코스·성별·출발그룹 라벨 / "마감" 뱃지) */
.civil-send-btn   { font-size: 15px; }  /* 공무원 이메일 인증 [발송] 버튼 */
.lk-info-row      { font-size: 15px; }  /* 신청 조회 결과 정보 행 */
.btn-reg-back     { font-size: 16px; }  /* 접수 [이전] 버튼 */
.btn-reg-next     { font-size: 16px; }  /* 접수 [다음/결제] 버튼 */
.btn-lk-back      { font-size: 16px; }  /* 조회 [이전] 버튼 */
.btn-lk-next      { font-size: 16px; }  /* 조회 [다음] 버튼 */

/* ── 모바일 (640px 이하) ──────────────────────────────────── */
@media (max-width: 640px) {
  .privacy-notice   { font-size: 13px; }
  .lk-label         { font-size: 13px; }
  .lk-input         { font-size: 13px; }  /* ⚠️ 16px 미만 → iOS에서 입력 시 화면 확대 */
  .lk-select        { font-size: 13px; }  /* ⚠️ 위와 동일 */
  .lk-radio-pill    { font-size: 13px; }
  .reg-civil-notice { font-size: 13px; }
  .terms-agree-row  { font-size: 13px; }
  #termsScrollBox   { font-size: 13px; }  /* ← 동의 항목 스크롤 박스 (모바일) */
  .reg-intro-note     { font-size: 13px; }
  #group-privacy-note { font-size: 13px; }
  #termsScrollHint    { font-size: 13px; }
  #termsScrollHintTop { font-size: 13px; }
  .excel-btn          { font-size: 13px; }
  .member-add-btn     { font-size: 13px; }
  .wave-hint          { font-size: 13px; }
  .form-hint          { font-size: 13px; }
  .mem-text           { font-size: 13px; }
  .civil-send-btn   { font-size: 13px; }
  .lk-info-row      { font-size: 13px; }
  .btn-reg-back     { font-size: 13px; }
  .btn-reg-next     { font-size: 13px; }
  .btn-lk-back      { font-size: 13px; }
  .btn-lk-next      { font-size: 13px; }
  .wave-tag         { font-size: 13px; }
}