/* =================================================================
   pages.css — 추가 페이지(시작하기/단계/신청) 전용
   style.css 의 변수(--navy, --gold 등)를 그대로 사용
   ================================================================= */

.sec__inner--narrow{ max-width:720px; }

/* ── 데스크탑 네비게이션 ───────────────────────────────── */
.nav{ display:flex; align-items:center; gap:4px; margin-left:28px; margin-right:auto; }
.nav__item{ position:relative; }
.nav__link{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 14px; border-radius:10px;
  font-size:15px; font-weight:700; color:var(--navy);
  background:none; border:none; cursor:pointer; font-family:var(--font);
  transition:background .2s, color .2s;
}
.nav__link:hover{ background:var(--gold-soft); color:var(--gold); }
.nav__link.is-active{ color:var(--gold); }
.nav__caret{
  width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); opacity:.6;
}
.nav__sub{
  position:absolute; top:calc(100% + 6px); left:0; min-width:200px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:8px; display:none; z-index:60;
}
/* 링크와 서브메뉴 사이 6px 틈을 투명하게 연결(hover 유지) */
.nav__sub::before{
  content:""; position:absolute; left:0; right:0; top:-10px; height:10px;
}
.nav__item--has:hover .nav__sub,
.nav__item.is-open .nav__sub{ display:block; }
.nav__sublink{
  display:block; padding:10px 12px; border-radius:9px;
  font-size:14px; font-weight:600; color:var(--ink);
}
.nav__sublink:hover{ background:var(--gold-soft); color:var(--gold); }

/* ── 선착순 알약(상단) ─────────────────────────────────── */
.spots-pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px; border-radius:999px;
  font-size:13px; font-weight:800; color:var(--navy);
  background:var(--gold-soft); border:1px solid rgba(184,137,58,.3);
}
.spots-pill b{ color:var(--gold); }
.spots-pill.is-closed{ color:var(--down); background:#fbeceb; border-color:rgba(194,80,62,.3); }
.spots-pill__dot{
  width:8px; height:8px; border-radius:50%; background:var(--up);
  box-shadow:0 0 0 0 rgba(31,157,107,.5); animation:pulse 1.8s infinite;
}
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(31,157,107,.5);} 70%{box-shadow:0 0 0 7px rgba(31,157,107,0);} 100%{box-shadow:0 0 0 0 rgba(31,157,107,0);} }

/* ── 모바일 햄버거 + 패널 ─────────────────────────────── */
.navtoggle{
  display:none; width:42px; height:42px; border-radius:11px;
  background:var(--surface); border:1px solid var(--line); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.navtoggle span{ width:18px; height:2px; background:var(--navy); border-radius:2px; transition:transform .25s, opacity .25s; }
.navtoggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.navtoggle.is-open span:nth-child(2){ opacity:0; }
.navtoggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.navpanel{ display:none; border-top:1px solid var(--line); background:var(--surface); padding:12px; }
.navpanel.is-open{ display:block; }
.navpanel__link{
  display:block; width:100%; text-align:left; padding:13px 14px; border-radius:11px;
  font-size:16px; font-weight:700; color:var(--navy); background:none; border:none;
  cursor:pointer; font-family:var(--font);
}
.navpanel__link:hover{ background:var(--gold-soft); }
.navpanel__sub{ display:block; padding:11px 14px 11px 30px; border-radius:10px;
  font-size:14px; font-weight:600; color:var(--ink-soft); }
.navpanel__sub:hover{ background:var(--gold-soft); color:var(--gold); }
.navpanel__cta{ display:flex; gap:8px; margin-top:10px; }
.navpanel__cta .btn{ flex:1; justify-content:center; }
.navpanel__spots{ margin:12px 4px 2px; font-size:13px; color:var(--ink-soft); text-align:center; }
.navpanel__spots b{ color:var(--gold); }

/* ── 진행 표시 바 ─────────────────────────────────────── */
.prog{ background:var(--surface); border-bottom:1px solid var(--line); }
.prog__inner{ max-width:var(--maxw); margin-inline:auto; padding:18px 24px; }
.prog__bar{ height:5px; border-radius:999px; background:var(--line-soft); overflow:hidden; }
.prog__bar span{ display:block; height:100%; background:var(--gold-grad); border-radius:999px; transition:width .5s var(--ease); }
.prog__dots{ list-style:none; display:flex; gap:8px; margin:14px 0 0; padding:0; }
.prog__dot{ flex:1; }
.prog__dot a{ display:flex; align-items:center; gap:8px; }
.prog__dot span{
  flex:none; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:var(--ink-dim);
  background:var(--bg-alt); border:1px solid var(--line);
}
.prog__dot em{ font-style:normal; font-size:13px; font-weight:700; color:var(--ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prog__dot.is-done span{ background:var(--up); border-color:transparent; color:#fff; }
.prog__dot.is-now span{ background:var(--gold-grad); border-color:transparent; color:#fff; box-shadow:0 6px 14px -8px rgba(184,137,58,.7); }
.prog__dot.is-now em{ color:var(--navy); }

/* ── 단계 헤더 메타바 ─────────────────────────────────── */
.metabar{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:22px 0 0; padding:0; }
.metabar li{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.metabar b{ font-size:12px; color:var(--gold); font-weight:800; }
.metabar span{ font-size:14px; color:var(--navy); font-weight:600; }

/* ── STEP1 추천 링크 박스 ─────────────────────────────── */
.refbox{
  max-width:720px; margin:0 auto 36px; padding:24px;
  background:linear-gradient(135deg,#13233f 0%,#1d3056 100%);
  border:1px solid rgba(202,162,74,.4); border-radius:var(--radius);
  box-shadow:0 16px 36px -20px rgba(15,31,61,.6); text-align:center;
}
.refbox__head{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; color:#fff; font-size:16px; }
.refbox__head strong{ color:#fff; font-weight:700; }
.refbox__badge{ padding:4px 10px; border-radius:999px; font-size:12px; font-weight:800;
  color:#1a1205; background:var(--gold-2); }
.refbox__cta{ margin:18px 0 14px; width:100%; max-width:360px; justify-content:center; }
.refbox__code{ display:inline-flex; align-items:center; gap:10px; padding:8px 8px 8px 16px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:999px; }
.refbox__code span{ font-size:12px; color:#c4cdda; font-weight:700; letter-spacing:.05em; }
.refbox__code code{ font-size:15px; color:#f3d98a; font-weight:800; letter-spacing:.04em; }
.refbox__copy{ padding:6px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.1); color:#fff; font-size:13px; font-weight:700; cursor:pointer; font-family:var(--font); }
.refbox__copy:hover{ border-color:var(--gold-2); color:var(--gold-2); }
.refbox__copy.is-done{ background:var(--up); border-color:transparent; }

/* ── 캡쳐 + 설명 + 팁 ─────────────────────────────────── */
.shots{ list-style:none; max-width:760px; margin:0 auto; padding:0; display:grid; gap:22px; }
.shot{ position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:20px; padding-top:30px; }
.shot__no{ position:absolute; top:-14px; left:20px; width:32px; height:32px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800;
  color:#fff; background:var(--gold-grad); box-shadow:0 6px 14px -8px rgba(184,137,58,.7); }
.shot__img{ display:block; width:100%; padding:0; border:1px solid var(--line); border-radius:var(--radius-sm);
  overflow:hidden; cursor:zoom-in; background:var(--bg-alt); position:relative; }
.shot__img img{ width:100%; height:auto; display:block; }
.shot__zoom{ position:absolute; right:10px; bottom:10px; padding:6px 12px; border-radius:999px;
  font-size:12px; font-weight:700; color:#fff; background:rgba(15,31,61,.78); }
.shot__ph{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:120px; border:1px dashed var(--line); border-radius:var(--radius-sm);
  color:var(--ink-dim); font-size:14px; text-align:center; background:var(--bg-alt); }
.shot__ph code{ font-size:12px; color:var(--gold); }
.shot__body{ margin-top:16px; }
.shot__desc{ margin:0; font-size:16px; color:var(--ink); line-height:1.7; }

.tip{ display:flex; gap:10px; margin:14px 0 0; padding:13px 16px; border-radius:var(--radius-sm);
  background:var(--gold-soft); border:1px solid rgba(184,137,58,.25);
  font-size:14.5px; color:#6b531f; line-height:1.6; }
.tip__ic{ flex:none; width:20px; height:20px; margin-top:1px;
  -webkit-mask:var(--ico-tip) center/contain no-repeat; mask:var(--ico-tip) center/contain no-repeat;
  background:var(--gold); }
:root{ --ico-tip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 21h6v-1H9v1zm3-19a7 7 0 00-4 12.7V17h8v-2.3A7 7 0 0012 2z'/%3E%3C/svg%3E"); }

/* ── 단계 이동 버튼 ───────────────────────────────────── */
.stepnav{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; max-width:760px; margin:36px auto 0; }
.stepnav__next{ }
.stepnav__prev{ }

/* ── 시작하기 허브 카드 ───────────────────────────────── */
.hubgrid{ display:grid; gap:18px; grid-template-columns:repeat(2,1fr); }
.hubcard{ position:relative; display:block; padding:28px 26px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; overflow:hidden; }
.hubcard::before{ content:""; position:absolute; top:0; left:0; width:4px; height:100%; background:var(--gold-grad); }
.hubcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(184,137,58,.35); }
.hubcard__no{ position:absolute; top:20px; right:24px; font-size:46px; font-weight:800;
  color:var(--gold-soft); line-height:1; }
.hubcard__tag{ font-size:12px; font-weight:800; letter-spacing:.1em; color:var(--gold); }
.hubcard__title{ margin:8px 0 8px; font-size:21px; font-weight:800; color:var(--navy); }
.hubcard__lead{ margin:0; font-size:15px; color:var(--ink-soft); line-height:1.6; }
.hubcard__meta{ display:block; margin-top:14px; font-size:13px; color:var(--ink-dim); }
.hubcard__go{ display:inline-block; margin-top:14px; font-size:14px; font-weight:800; color:var(--gold); }

/* ── 선착순 배너 ─────────────────────────────────────── */
.spots-banner{ max-width:520px; margin:34px auto 0; padding:22px 26px; text-align:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.spots-banner--wide{ max-width:720px; margin:0 auto 28px; }
.spots-banner__k{ font-size:12px; font-weight:800; letter-spacing:.14em; color:var(--gold); }
.spots-banner__v{ display:block; margin:6px 0 12px; font-size:30px; font-weight:800; color:var(--navy); }
.spots-banner__v b{ color:var(--gold); }
.spots-banner__v.is-closed{ color:var(--down); font-size:24px; }
.spots-banner__track{ height:8px; border-radius:999px; background:var(--line-soft); overflow:hidden; }
.spots-banner__track span{ display:block; height:100%; background:var(--gold-grad); border-radius:999px; transition:width .5s var(--ease); }
.spots-banner__sub{ margin:12px 0 0; font-size:13.5px; color:var(--ink-soft); }
.spots-banner__sub b{ color:var(--down); font-weight:800; }

/* ── FAQ ─────────────────────────────────────────────── */
.faq{ max-width:760px; margin:0 auto; display:grid; gap:12px; }
.faq__item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); overflow:hidden; }
.faq__q{ list-style:none; cursor:pointer; padding:18px 22px; font-size:16px; font-weight:700; color:var(--navy);
  display:flex; align-items:center; justify-content:space-between; gap:12px; }
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::after{ content:""; flex:none; width:11px; height:11px; border-right:2px solid var(--gold);
  border-bottom:2px solid var(--gold); transform:rotate(45deg); transition:transform .25s; }
.faq__item[open] .faq__q::after{ transform:rotate(-135deg); }
.faq__a{ padding:0 22px 20px; font-size:15px; color:var(--ink-soft); line-height:1.75; }

/* ── 신청 폼 ─────────────────────────────────────────── */
.applyform{ max-width:560px; margin:0 auto; display:grid; gap:18px; }
.field{ display:block; }
.field__label{ display:block; margin-bottom:8px; font-size:14px; font-weight:700; color:var(--navy); }
.field__label i{ color:var(--down); font-style:normal; }
.field__input{ width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-size:16px; font-family:var(--font); color:var(--ink); background:var(--surface); transition:border-color .2s, box-shadow .2s; }
.field__input:focus{ outline:none; border-color:var(--gold-2); box-shadow:0 0 0 3px rgba(202,162,74,.18); }
.field__input--area{ resize:vertical; min-height:84px; line-height:1.6; }
.agree{ display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.agree input{ flex:none; width:20px; height:20px; margin-top:1px; accent-color:var(--gold); }
.applyform__submit{ justify-content:center; padding:15px; font-size:16px; }
.applyform__note{ margin:0; text-align:center; font-size:13px; color:var(--ink-dim); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.formerr{ max-width:560px; margin:0 auto 18px; padding:13px 18px; border-radius:var(--radius-sm);
  background:#fbeceb; border:1px solid rgba(194,80,62,.3); color:var(--down); font-size:14px; font-weight:600; text-align:center; }

/* ── 신청 결과 ───────────────────────────────────────── */
.result{ max-width:560px; margin:0 auto; text-align:center; padding:34px 26px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.result__ic{ width:64px; height:64px; border-radius:50%; margin:0 auto 18px; position:relative; }
.result__ic--ok{ background:var(--up); }
.result__ic--ok::after{ content:""; position:absolute; inset:0; margin:18px;
  background:#fff; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.result__ic--wait{ background:var(--gold-soft); border:1px solid rgba(184,137,58,.3); }
.result__ic--wait::after{ content:"⏳"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:28px; }
.result__title{ margin:0 0 12px; font-size:24px; font-weight:800; color:var(--navy); }
.result__msg{ margin:0; font-size:16px; color:var(--ink-soft); line-height:1.7; }
.result__msg strong{ color:var(--gold); }
.result__cta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:24px; }

/* ── 이미지 확대 라이트박스 ───────────────────────────── */
.imgzoom{ position:fixed; inset:0; z-index:110; background:rgba(4,4,7,.94);
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden;
  transition:opacity .25s var(--ease); }
.imgzoom.is-open{ opacity:1; visibility:visible; }
.imgzoom__stage{ width:100%; height:100%; overflow:auto; display:flex; align-items:center; justify-content:center;
  -webkit-overflow-scrolling:touch; touch-action:pinch-zoom; }
.imgzoom__stage img{ max-width:100%; max-height:100%; object-fit:contain; transition:transform .2s; transform-origin:center; user-select:none; }
.imgzoom__stage.is-zoomed{ align-items:flex-start; justify-content:flex-start; }
.imgzoom__stage.is-zoomed img{ max-width:none; max-height:none; cursor:grab; }
.imgzoom__close{ position:absolute; top:14px; right:16px; z-index:3; width:42px; height:42px; border-radius:11px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#f4f1e9; font-size:26px; cursor:pointer; }
.imgzoom__close:hover{ border-color:var(--gold-2); color:var(--gold-2); }
.imgzoom__hint{ position:absolute; left:0; right:0; bottom:16px; margin:0; text-align:center;
  font-size:12px; color:#8b95a4; pointer-events:none; }

/* ── 반응형 ──────────────────────────────────────────── */
@media (max-width:1000px){
  .nav{ display:none; }
  .navtoggle{ display:flex; }
}
@media (max-width:900px){
  .hubgrid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .topbar__cta{ display:none; }
  .prog__dot em{ display:none; }
  .prog__dot{ flex:none; }
  .prog__dots{ justify-content:center; gap:10px; }
  .stepnav{ flex-direction:column; }
  .stepnav .btn{ width:100%; justify-content:center; }
  .result__cta .btn{ flex:1 1 100%; justify-content:center; }
}