/* 유틸리티로 못 쓰는 것들: 의사요소, 상태, 키프레임, 절대배치 콜라주. */

.ic { width: 1.25em; height: 1.25em; flex-shrink: 0; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 10px 16px; background: var(--yellow); color: var(--ink);
  border: var(--bd); font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

/* 종이 / 콘크리트 질감 */
.pg-home, .bg-paper, .bg-paper-2 {
  background-image: radial-gradient(rgba(17, 17, 17, 0.045) 1px, transparent 1.2px);
  background-size: 7px 7px;
}
.bg-concrete {
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.5px),
    radial-gradient(rgba(0, 0, 0, 0.25) 1px, transparent 1.5px);
  background-size: 9px 9px, 13px 13px;
  background-position: 0 0, 4px 6px;
}

/* 헤더 */
.site-head {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 3px solid var(--yellow);
  padding-block: 12px;
}
.logo-mark {
  display: grid; place-items: center; width: 38px; height: 38px;
  background: var(--yellow); color: var(--ink); border: 3px solid var(--paper);
  font-family: var(--f-num); font-weight: 800; font-size: 22px; rotate: -8deg; border-radius: 9px;
}
.logo:hover .logo-mark { rotate: 8deg; background: var(--pink); }
.logo-mark { transition: rotate 0.2s, background 0.2s; }
.site-nav-list { display: flex; align-items: center; gap: 4px; }
.site-nav-list a {
  display: inline-block; padding: 8px 14px; border-radius: 999px;
  color: var(--paper); text-decoration: none; font-weight: 700; font-size: 15px;
}
.site-nav-list a:hover { background: rgba(246, 241, 231, 0.12); }
.site-nav-list a[aria-current="page"] { color: var(--yellow); box-shadow: inset 0 -3px 0 var(--yellow); border-radius: 0; }
.site-nav-list .nav-cta { background: var(--pink); color: var(--ink); border: 2px solid var(--paper); margin-left: 8px; }
.site-nav-list .nav-cta:hover { background: var(--yellow); }
.site-nav-list .nav-cta[aria-current="page"] { box-shadow: none; border-radius: 999px; color: var(--ink); }
.nav-toggle { display: none; width: 44px; height: 44px; place-items: center; color: var(--paper); border: 2px solid var(--paper); border-radius: 10px; }

@media (max-width: 979.98px) {
  .nav-toggle { display: grid; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--ink); border-bottom: 3px solid var(--yellow);
    padding: 8px var(--gut) 20px;
    display: none;
  }
  .site-head.is-open .site-nav { display: block; }
  .site-nav-list { flex-direction: column; align-items: stretch; }
  .site-nav-list a { display: block; padding: 14px 4px; border-bottom: 1px solid rgba(246, 241, 231, 0.15); border-radius: 0; font-size: 18px; }
  .site-nav-list .nav-cta { margin: 14px 0 0; text-align: center; border-radius: 999px; }
}

/* 버튼 */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 52px; padding: 12px 22px;
  border: var(--bd); border-radius: 999px; font-weight: 900; font-size: 16px;
  text-decoration: none; box-shadow: var(--hard);
  transition: translate 0.12s, box-shadow 0.12s, background 0.15s;
}
.btn:hover { translate: -2px -2px; box-shadow: 7px 7px 0 var(--ink); }
.btn:active { translate: 3px 3px; box-shadow: 1px 1px 0 var(--ink); }
.btn-pink { background: var(--pink); color: var(--ink); }
.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-ghost { background: var(--paper); color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--paper); box-shadow: 5px 5px 0 var(--pink); }
.btn-ink:hover { box-shadow: 7px 7px 0 var(--pink); }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; text-decoration-color: var(--pink); }
.link-arrow .ic { transition: translate 0.15s; }
.link-arrow:hover .ic { translate: 5px 0; }

/* 스토어 배지 */
.store {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 7px 16px 7px 12px;
  background: var(--ink); color: #fff; border: 2px solid var(--ink); border-radius: 10px;
  text-decoration: none; transition: background 0.15s, translate 0.12s;
}
.store:hover { background: #2d2d31; translate: 0 -2px; }
.store-ic { width: 26px; height: 26px; }
.store-t { display: flex; flex-direction: column; line-height: 1.05; }
.store-t small { font-size: 10px; opacity: 0.85; }
.store-t b { font-size: 18px; letter-spacing: -0.01em; }

/* 히어로 콜라주 */
.collage { position: relative; overflow: hidden; border-bottom: 3px solid var(--ink); }
.collage-art img { width: 100%; height: 100%; object-fit: cover; }
.collage-title { font-size: clamp(50px, 5.4vw, 92px); line-height: 0.98; margin-top: 10px; }
.spray {
  color: var(--pink);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--ink);
}
.collage-sub { max-width: 30em; }
.stk { border: var(--bd); box-shadow: var(--hard); }
.stk-rating {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 136px; height: 136px; border-radius: 50%; background: var(--yellow);
  text-align: center; rotate: 9deg;
}
.stk-rating-n { font-size: 40px; }
.stk-stars { display: flex; color: var(--ink); }
.stk-stars .ic { width: 14px; height: 14px; }
.stk-live {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  padding: 12px 18px; background: var(--pink); rotate: -3deg; border-radius: 4px;
}
.live-dot {
  width: 11px; height: 11px; border-radius: 50%; background: var(--ink); align-self: center;
  box-shadow: 0 0 0 0 rgba(17, 17, 17, 0.6); animation: blip 1.4s infinite;
}
@keyframes blip { 70% { box-shadow: 0 0 0 9px rgba(17, 17, 17, 0); } 100% { box-shadow: 0 0 0 0 rgba(17, 17, 17, 0); } }
.stk-qr {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px; background: var(--paper); rotate: 4deg;
}
.stk-qr img { width: 88px; height: 88px; border: 2px solid var(--ink); }
.stk-store { position: relative; padding: 14px 14px 10px; background: var(--sky); rotate: -2deg; }
.stk-qr::before, .stk-store::before, .finale-card::before, .tape::before {
  content: ""; position: absolute; top: -14px; left: 50%; width: 92px; height: 26px; translate: -50% 0;
  background: rgba(255, 212, 0, 0.82); rotate: -4deg;
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 4% 96%, 0 50%);
}
.stk-note { padding: 4px 14px 6px; background: var(--paper); font-size: 26px; rotate: -8deg; }

@media (min-width: 980px) {
  .collage {
    display: grid; grid-template-rows: auto 1fr;
    min-height: clamp(660px, 52vw, 880px);
    padding: clamp(40px, 5vw, 72px) var(--gut) 44px;
  }
  .collage-art { position: absolute; inset: 0; z-index: 0; }
  .collage-art img { object-position: left center; }
  .collage-copy { position: relative; z-index: 1; max-width: 32vw; }
  .collage-stickers { z-index: 2; align-self: end; display: flex; align-items: flex-end; gap: 28px; }
  .collage-stickers > * { position: relative; z-index: 2; }
  .stk-qr { translate: 0 -18px; }
  .stk-rating { position: absolute; top: clamp(20px, 3vw, 48px); left: 31.5%; }
  .stk-live { position: absolute; right: 4%; bottom: 7%; }
  .stk-note { position: absolute; right: 9%; top: 15%; }
}
@media (max-width: 979.98px) {
  .collage { display: flex; flex-direction: column; }
  .collage-copy { order: -1; padding: 40px var(--gut) 32px; }
  .collage-art { position: relative; border-block: 3px solid var(--ink); }
  .collage-art img { aspect-ratio: 4 / 3; object-position: 70% center; }
  .collage-stickers {
    position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 22px 18px; padding: 0 var(--gut) 40px; margin-top: -54px;
  }
  .stk-note { display: none; }
  .stk-rating { order: -1; }
  .stk-rating { width: 116px; height: 116px; }
  .stk-rating-n { font-size: 32px; }
}

/* 트릭 이름 띠 */
.ticker { overflow: hidden; padding-block: 12px; }
.ticker-track { display: flex; width: max-content; gap: 44px; font-size: 22px; animation: roll 38s linear infinite; }
.ticker-track span::after { content: "✶"; margin-left: 44px; color: var(--pink); }
@keyframes roll { to { translate: -50% 0; } }

/* 섹션 머리 라벨 */
.label-tape {
  display: inline-block; padding: 5px 14px 4px; background: var(--yellow); border: 2px solid var(--ink);
  font-family: var(--f-num); font-weight: 800; font-size: 13px; letter-spacing: 0.1em; rotate: -1.5deg;
}
.label-pink { background: var(--pink); }

/* 필터 */
.chip {
  min-height: 42px; padding: 8px 16px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--paper); font-weight: 700; font-size: 15px; transition: background 0.15s, translate 0.12s;
}
.chip:hover { translate: 0 -2px; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--yellow); }
.select-wrap { position: relative; display: inline-flex; align-items: center; }
.select-wrap select {
  appearance: none; min-height: 42px; padding: 8px 40px 8px 16px;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); font-weight: 700; cursor: pointer;
}
.select-wrap .ic { position: absolute; right: 12px; pointer-events: none; }
.search {
  min-height: 42px; padding: 8px 16px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper);
  width: min(100%, 260px);
}
.search::placeholder { color: var(--mute); }

/* 트릭 카드 */
.tag { display: inline-block; padding: 3px 10px; border: 2px solid var(--ink); border-radius: 999px; font-size: 12px; font-weight: 700; }
.tag-flip { background: var(--yellow); }
.tag-nivba { background: var(--pink); }
.tag-slide { background: var(--sky); }
.tag-manual { background: var(--paper-2); }
.tag-air { background: var(--ink); color: var(--yellow); }
.trick {
  height: 100%; display: flex; flex-direction: column; padding: 18px;
  box-shadow: var(--hard); transition: translate 0.15s, box-shadow 0.15s, rotate 0.15s;
}
.trick:hover { translate: -2px -3px; rotate: -0.6deg; box-shadow: 8px 8px 0 var(--ink); }
[data-cat="nivba"] .trick:hover { box-shadow: 8px 8px 0 var(--pink); }
[data-cat="slide"] .trick:hover { box-shadow: 8px 8px 0 var(--sky); }
[data-cat="flip"] .trick:hover { box-shadow: 8px 8px 0 var(--yellow); }
.trick-desc { flex: 1; }
.trick-meta {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px 12px;
  margin-top: 16px; padding-top: 12px; border-top: 2px dashed rgba(17, 17, 17, 0.3);
}
.trick-meta > div:nth-child(2) { grid-column: 1 / -1; order: -1; display: flex; align-items: center; gap: 8px; }
.trick-meta dt { font-size: 11px; color: var(--mute); font-weight: 700; }
.trick-score { font-size: 28px; line-height: 1; }
.trick-score small { font-size: 12px; font-family: var(--f-body); font-weight: 700; margin-left: 2px; }
.pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.pips i { width: 9px; height: 14px; border: 2px solid var(--ink); border-radius: 2px; background: transparent; }
.pips i.on { background: var(--ink); }
.bg-ink .pips i, .bg-concrete .pips i { border-color: var(--paper); }
.bg-ink .pips i.on, .bg-concrete .pips i.on { background: var(--yellow); }
.keys { display: flex; flex-wrap: wrap; gap: 3px; }
kbd {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px;
  border: 2px solid var(--ink); border-bottom-width: 4px; border-radius: 6px; background: #fff;
  font-family: var(--f-body); font-weight: 900; font-size: 13px;
}
.add-trick {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px;
  min-height: 40px; border: 2px solid var(--ink); border-radius: 999px; font-weight: 700; font-size: 14px; background: var(--yellow);
}
.add-trick:hover { background: var(--pink); }
.add-trick .ic { width: 16px; height: 16px; }
.empty { font-weight: 700; }

/* 착지 판정 */
.judge-fig { max-width: 320px; margin-inline: auto; }
.judge-pop {
  position: absolute; left: 46%; top: 63%; padding: 4px 12px; background: var(--yellow); border: 3px solid var(--ink);
  font-size: clamp(15px, 1.6vw, 20px); rotate: -10deg; box-shadow: 4px 4px 0 var(--ink);
  animation: pop 2.4s ease-in-out infinite;
}
@keyframes pop { 0%, 55% { scale: 0.6; opacity: 0; } 65% { scale: 1.15; opacity: 1; } 75%, 92% { scale: 1; opacity: 1; } 100% { opacity: 0; } }
.judge-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 2px dashed rgba(17, 17, 17, 0.2); }
.j { display: inline-block; min-width: 86px; padding: 2px 8px; border: 2px solid var(--ink); font-family: var(--f-num); font-size: 13px; text-align: center; }
.j-perfect { background: var(--yellow); }
.j-clean { background: var(--sky); }
.j-sketchy { background: var(--paper-2); }
.j-bail { background: var(--ink); color: var(--pink); }

/* 스팟 맵 */
.map-frame { border: 3px solid var(--ink); border-radius: 18px; box-shadow: 9px 9px 0 var(--yellow); background: #e4ddcd; }
.map-img { width: 100%; border-radius: 15px; }
.pin {
  position: absolute; left: var(--x); top: var(--y); translate: -50% -100%;
  display: grid; place-items: center; width: 48px; height: 48px;
  border: 3px solid var(--ink); border-radius: 50% 50% 50% 0; rotate: -45deg;
  box-shadow: 3px 3px 0 var(--ink); transition: scale 0.15s;
}
.pin > .f-num { rotate: 45deg; font-size: 15px; }
.pin-yellow { background: var(--yellow); }
.pin-pink { background: var(--pink); }
.pin-sky { background: var(--sky); }
.pin:hover { scale: 1.12; }
.pin[aria-pressed="true"] { scale: 1.2; z-index: 2; }
.pin[aria-pressed="true"]::after {
  content: ""; position: absolute; inset: -9px; border: 3px solid var(--paper); border-radius: inherit;
  animation: ring 1.6s ease-out infinite;
}
@keyframes ring { from { opacity: 1; scale: 0.8; } to { opacity: 0; scale: 1.4; } }
.pin-label {
  position: absolute; left: 50%; top: 100%; rotate: 45deg; translate: 14px 10px; transform-origin: left top;
  padding: 2px 8px; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 700; white-space: nowrap; border-radius: 4px;
  pointer-events: none;
}
@media (max-width: 719.98px) {
  .pin { width: 38px; height: 38px; }
  .pin-label { display: none; }
}
.map-phone {
  position: absolute; width: 140px; left: -44px; top: -86px; rotate: -7deg; z-index: 3;
  filter: drop-shadow(6px 8px 0 rgba(0, 0, 0, 0.45));
}
.map-phone figcaption { margin-top: -6px; text-align: center; rotate: 4deg; }
@media (max-width: 1320px) { .map-phone { left: -18px; top: -110px; width: 118px; } }
@media (max-width: 979.98px) { .map-phone { display: none; } }
.spot-panel { overflow: hidden; box-shadow: 9px 9px 0 var(--pink); }
.spot-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 3px solid var(--ink); }
.spot-photo img { width: 100%; height: 100%; object-fit: cover; }
.spot-photo.crop-6 img { scale: 1.07; }
#spot-harbor .spot-photo img { scale: 1.08; }
.spot-no {
  position: absolute; left: 14px; top: 14px; padding: 4px 10px; border: 3px solid var(--ink); font-size: 18px; rotate: -6deg;
}
.line { display: flex; flex-wrap: wrap; gap: 6px; counter-reset: ln; }
.line li {
  counter-increment: ln; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 2px solid var(--ink); border-radius: 999px; font-size: 13px; font-weight: 700; background: #fff;
}
.line li::before { content: counter(ln); font-family: var(--f-num); color: var(--pink); }
.line li + li { margin-left: 18px; position: relative; }
.line li + li::after { content: "→"; position: absolute; left: -20px; font-weight: 900; }
.spot-stats dd { font-weight: 700; }
.spot-panel .pips i { border-color: var(--ink); }
.spot-panel .pips i.on { background: var(--pink); }

/* 스코어보드 */
.board-sec { position: relative; overflow: hidden; }
.scoreboard { padding: clamp(16px, 2.6vw, 28px); color: var(--paper); }
.sb-top { padding-bottom: 14px; border-bottom: 2px dashed rgba(246, 241, 231, 0.25); }
.sb-clock { display: inline-flex; align-items: center; gap: 6px; font-size: 32px; color: var(--yellow); min-width: 4.2ch; }
.sb-clock .ic { width: 22px; height: 22px; }
.sb-clock.is-low { color: var(--pink); }
.sb-toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px;
  border: 2px solid var(--paper); border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--paper);
}
.sb-toggle .ic { width: 15px; height: 15px; }
.sb-toggle:hover { background: var(--paper); color: var(--ink); }
.sb-rows { margin-top: 12px; }
.sb-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 12px; border-radius: 12px;
  border: 2px solid transparent;
}
.sb-row + .sb-row { margin-top: 4px; }
.sb-row:first-child { background: rgba(255, 212, 0, 0.1); border-color: var(--yellow); }
.sb-rank { width: 1.4em; font-size: 26px; color: var(--mute-dk); }
.sb-row:first-child .sb-rank { color: var(--yellow); }
.sb-av { display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid var(--paper); border-radius: 50%; font-weight: 900; }
.sb-row small { font-size: 12px; }
.sb-combo { padding: 2px 8px; border: 2px solid var(--sky); border-radius: 6px; color: var(--sky); font-size: 14px; }
.sb-score { min-width: 5.2ch; text-align: right; font-size: clamp(22px, 2.6vw, 30px); }
.sb-row.is-hit .sb-score { color: var(--pink); }
.sb-row.is-hit { animation: hit 0.5s ease-out; }
@keyframes hit { 30% { background: rgba(255, 63, 164, 0.25); } }
.sb-feed { margin-top: 16px; padding-top: 14px; border-top: 2px dashed rgba(246, 241, 231, 0.25); }
.sb-feed-list { margin-top: 8px; display: grid; gap: 4px; font-size: 14px; min-height: 4.8em; }
.sb-feed-list li { color: var(--mute-dk); }
.sb-feed-list li:first-child { color: var(--paper); }
.sb-final {
  margin-top: 16px; padding: 14px; text-align: center; font-size: clamp(22px, 3vw, 32px);
  background: var(--yellow); color: var(--ink); border: 3px solid var(--paper); rotate: -1deg;
}
@media (max-width: 559.98px) {
  .sb-row { gap: 10px; padding: 10px 6px; }
  .sb-combo, .sb-row small { display: none; }
  .sb-av { width: 34px; height: 34px; }
}

/* 포디움 목업 — 숫자와 빈 UI는 HTML로 얹는다 */
.podium { width: 100%; max-width: 340px; margin-inline: auto; container-type: inline-size; }
.podium-n, .podium-bar, .podium-btn { position: absolute; translate: -50% -50%; pointer-events: none; }
.podium-n { font-size: 9cqw; color: var(--ink); line-height: 1; }
.podium-n.n1 { left: 51%; top: 54%; font-size: 12cqw; }
.podium-n.n2 { left: 33%; top: 61%; }
.podium-n.n3 { left: 69%; top: 62%; }
.podium-bar { left: 50%; top: 70.4%; font-size: 3.6cqw; color: var(--ink); white-space: nowrap; }
.podium-btn { top: 76.6%; font-size: 3.4cqw; font-weight: 900; white-space: nowrap; }
.podium-btn.b1 { left: 36%; }
.podium-btn.b2 { left: 64.5%; }

.record { box-shadow: var(--hard); }

/* 캘린더 */
.cal { padding: clamp(14px, 2.4vw, 26px); }
.cal-top { margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
.dot { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 50%; vertical-align: middle; margin-right: 5px; }
.dot-plaza { background: var(--yellow); }
.dot-harbor { background: var(--pink); }
.dot-halfpipe { background: var(--sky); }
.dot-rooftop { background: var(--concrete); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cal-dow { text-align: center; font-size: 12px; font-weight: 700; color: var(--mute); padding-bottom: 4px; }
.cal-day {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-height: 92px; padding: 7px; text-align: left;
  border: 2px solid var(--ink); border-radius: 8px; background: #fff;
  transition: translate 0.12s, background 0.15s;
}
.cal-day:hover { translate: 0 -2px; }
.cal-n { font-size: 17px; line-height: 1; }
.cal-day .dot { margin: 0; }
.cal-t {
  font-size: 11px; line-height: 1.3; font-weight: 700; color: var(--mute);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cal-day.is-past { background: var(--paper-2); }
.cal-day.is-past::after {
  content: "CLEAR"; position: absolute; right: 4px; top: 6px; font-family: var(--f-num); font-size: 9px;
  color: var(--pink); border: 1.5px solid var(--pink); padding: 0 3px; rotate: 8deg;
}
.cal-day.is-today { background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); }
.cal-day.is-future { border-style: dashed; background: transparent; }
.cal-day.is-future .cal-t { visibility: hidden; }
.cal-day.is-future::after { content: "?"; position: absolute; right: 8px; bottom: 6px; font-family: var(--f-disp); font-size: 22px; color: rgba(17, 17, 17, 0.25); }
.cal-day[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.cal-day[aria-pressed="true"] .cal-t { color: var(--mute-dk); }
.cal-day[aria-pressed="true"] .dot { border-color: var(--paper); }
@media (max-width: 719.98px) {
  .cal-day { min-height: 52px; padding: 6px 4px; align-items: center; }
  .cal-t { display: none; }
  .cal-day.is-past::after, .cal-day.is-future::after { display: none; }
  .cal-n { font-size: 15px; }
}
.cal-detail { padding: clamp(20px, 3vw, 32px); }
.cal-spot { display: flex; align-items: center; gap: 4px; font-weight: 700; }
.cal-detail .dot { border-color: var(--paper); }

/* 피날레 */
.finale { padding-bottom: clamp(56px, 8vw, 110px); }
.finale-banner img { width: 100%; max-height: 640px; object-fit: cover; object-position: center 40%; border-bottom: 3px solid var(--ink); }
.finale-cap {
  position: absolute; left: 50%; top: 9%; translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: var(--paper);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.finale-season { font-size: clamp(30px, 5vw, 64px); color: var(--paper); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--pink); }
.finale-body { margin-top: clamp(-120px, -9vw, -40px); position: relative; }
.finale-card { position: relative; padding: clamp(24px, 4vw, 48px); max-width: 860px; margin-inline: auto; rotate: -0.8deg; }
.finale-qr img { width: 76px; height: 76px; border: 2px solid var(--ink); }
@media (max-width: 719.98px) {
  .finale-cap { top: 6%; }
  .finale-banner img { aspect-ratio: 4 / 3; }
  .finale-body { margin-top: -28px; }
}

/* 푸터 */
.site-foot { padding-block: clamp(56px, 7vw, 88px) 32px; border-top: 3px solid var(--yellow); }
.foot-word { font-size: clamp(64px, 8vw, 116px); letter-spacing: -0.04em; }
.foot-h { font-size: 13px; letter-spacing: 0.08em; color: var(--yellow); margin-bottom: 12px; }
.foot-list { display: grid; gap: 8px; font-size: 14px; color: var(--mute-dk); }
.foot-list a { color: var(--paper); text-decoration: none; }
.foot-list a:hover { color: var(--yellow); text-decoration: underline; }
.foot-social a {
  display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--paper); border-radius: 50%; color: var(--paper);
  transition: background 0.15s, color 0.15s;
}
.foot-social a:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.foot-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(246, 241, 231, 0.2); }
.foot-legal { color: var(--paper); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; padding: 6px 0; }
.foot-legal:hover { color: var(--yellow); }
.site-foot .store { border-color: var(--paper); }

/* 법적 고지 모달 */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(17, 17, 17, 0.72); }
.modal-panel {
  position: relative; display: flex; flex-direction: column;
  width: min(720px, 100%); max-height: min(86vh, 900px);
  background: var(--paper); box-shadow: 10px 10px 0 var(--yellow);
  animation: drop 0.22s ease-out;
}
@keyframes drop { from { translate: 0 18px; rotate: -1.5deg; opacity: 0; } }
.modal-head { padding: 18px 22px; border-bottom: 3px solid var(--ink); }
.modal-x { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 50%; }
.modal-x:hover { background: var(--pink); }
.modal-body { overflow-y: auto; padding: 20px 22px 28px; overscroll-behavior: contain; }
.modal-foot { padding: 14px 22px; border-top: 3px solid var(--ink); display: flex; justify-content: flex-end; }
.modal-foot .btn { min-height: 46px; }
.legal { font-size: 14.5px; line-height: 1.75; }
.legal h3 { font-size: 16px; margin: 22px 0 6px; padding-left: 10px; border-left: 5px solid var(--pink); }
.legal p + p { margin-top: 8px; }
.legal ol { list-style: decimal; padding-left: 1.4em; }
.legal ul { list-style: disc; padding-left: 1.3em; }
.legal li + li { margin-top: 3px; }
.legal-biz { margin-top: 22px !important; padding-top: 14px; border-top: 2px dashed rgba(17, 17, 17, 0.25); font-size: 13px; color: var(--mute); }
body.is-locked { overflow: hidden; }

/* 폰으로 보고 있으면 QR은 쓸모가 없다 */
@media (max-width: 719.98px) {
  .stk-qr, .finale-qr { display: none; }
}

/* 서브 페이지 공통 */
.crumbs { color: inherit; opacity: 0.8; }
.crumbs a { text-decoration: none; font-weight: 700; }
.crumbs a:hover { text-decoration: underline; }
.text-btn { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; color: inherit; }
.text-btn:hover { color: var(--pink); }
.feats { display: grid; gap: 6px; }
.feats li { position: relative; padding-left: 20px; }
.feats li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; background: var(--pink); border: 2px solid var(--ink); rotate: 45deg; }
.bg-ink .feats li::before { border-color: var(--paper); }

.faq-wrap { max-width: 860px; }
.faq details { border: var(--bd); border-radius: 14px; background: #fff; box-shadow: var(--hard); }
.faq details + details { margin-top: 14px; }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 20px; font-weight: 900; font-size: 17px; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-num); font-size: 26px; line-height: 1; transition: rotate 0.2s; }
.faq details[open] summary::after { rotate: 45deg; color: var(--pink); }
.faq details p { padding: 0 20px 20px; color: var(--mute); }

/* 트릭 사전 */
.dict-cover { padding-block: 28px clamp(48px, 7vw, 88px); border-bottom: 3px solid var(--ink); }
.dict-cover-in { display: grid; gap: 24px; margin-top: 24px; align-items: end; }
@media (min-width: 980px) { .dict-cover-in { grid-template-columns: auto 1fr; gap: 64px; } }
.dict-title { font-size: clamp(72px, 13vw, 190px); line-height: 0.9; }
.dict-index a {
  display: inline-block; padding: 8px 14px; border: 2px solid var(--ink); border-radius: 999px;
  font-weight: 700; text-decoration: none; background: #fff;
}
.dict-index a:hover { background: var(--yellow); }
.dict-stats > div { box-shadow: var(--hard); min-width: 120px; }

.landing .judge-fig { max-width: 360px; }
.rings { position: relative; width: 150px; height: 150px; }
.ring { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 4px solid; }
.r-sketchy { border-color: var(--mute-dk); border-style: dashed; }
.r-clean { width: 100px; height: 100px; border-color: var(--sky); }
.r-perfect { width: 54px; height: 54px; border-color: var(--yellow); box-shadow: 0 0 18px var(--yellow); animation: tighten 2.4s ease-in-out infinite; }
@keyframes tighten { 0% { scale: 2.6; opacity: 0.2; } 60% { scale: 1; opacity: 1; } 100% { scale: 1; opacity: 1; } }
.judge-table { color: var(--paper); font-size: 15px; }
.judge-table th, .judge-table td { padding: 10px 8px; text-align: left; border-bottom: 1px solid rgba(246, 241, 231, 0.18); }
.judge-table thead th { font-size: 12px; color: var(--mute-dk); }
.landing .j { color: var(--ink); }
.landing .j-bail { color: var(--pink); background: var(--concrete); border-color: var(--paper); }

.builder { padding: 22px; color: var(--paper); }
.judge-pick { border: 0; margin: 0; padding: 0; }
.judge-pick label { position: relative; }
.judge-pick input { position: absolute; opacity: 0; }
.judge-pick span {
  display: inline-block; padding: 6px 12px; border: 2px solid var(--paper); border-radius: 999px;
  font-family: var(--f-num); font-size: 13px; cursor: pointer;
}
.judge-pick input:checked + span { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.judge-pick input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
.builder-chain { display: grid; gap: 6px; min-height: 60px; max-height: 260px; overflow-y: auto; font-size: 14px; counter-reset: c; }
.builder-chain li { counter-increment: c; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px dashed rgba(246, 241, 231, 0.2); }
.builder-chain li:not(.tx-mute)::before { content: counter(c); font-family: var(--f-num); color: var(--pink); width: 1.4em; }
.builder-chain .j { min-width: 0; font-size: 11px; padding: 0 6px; color: var(--ink); }
.builder-chain .j-bail { color: var(--pink); }
.builder-chain .tx-mute { color: var(--mute-dk); }
.btn-mini {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px;
  border: 2px solid var(--paper); border-radius: 999px; color: var(--ink); font-weight: 900;
}
.btn-mini .ic { width: 16px; height: 16px; }
.btn-mini:hover { translate: 0 -2px; }
.combo-mini {
  position: fixed; left: 50%; bottom: 16px; translate: -50% 0; z-index: 40;
  display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 18px;
  background: var(--ink); color: var(--yellow); border: 3px solid var(--yellow); border-radius: 999px;
  text-decoration: none; box-shadow: 4px 4px 0 var(--pink); white-space: nowrap;
}
@media (min-width: 980px) { .combo-mini { display: none !important; } }

.combo-sec .label-tape { background: var(--yellow); }
.rules { counter-reset: r; display: grid; gap: 14px; }
.rules li { counter-increment: r; position: relative; padding: 14px 16px 14px 58px; background: var(--paper); border: var(--bd); border-radius: 12px; }
.rules li::before {
  content: counter(r); position: absolute; left: 14px; top: 12px; width: 32px; height: 32px; display: grid; place-items: center;
  background: var(--ink); color: var(--yellow); border-radius: 50%; font-family: var(--f-num); font-weight: 800;
}
.combo-fig { width: 100%; max-width: 360px; margin-inline: auto; container-type: inline-size; }
.combo-burst {
  position: absolute; left: 69%; top: 77.4%; translate: -50% -50%; rotate: -8deg;
  font-size: 8cqw; color: var(--paper); -webkit-text-stroke: 1.2cqw var(--ink); paint-order: stroke fill;
}

/* 스팟 */
.spots-cover { padding-block: 28px clamp(48px, 7vw, 96px); border-bottom: 3px solid var(--ink); }
.spot-jump { display: grid; gap: 10px; max-width: 460px; }
.spot-jump a {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 2px solid var(--paper); border-radius: 12px;
  text-decoration: none; font-weight: 900; font-size: 17px; transition: background 0.15s, translate 0.15s;
}
.spot-jump a:hover { background: rgba(246, 241, 231, 0.1); translate: 6px 0; }
.spot-jump small { margin-left: auto; font-weight: 700; color: var(--mute-dk); font-size: 13px; }
.pin-dot { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--ink); border-radius: 50%; font-size: 12px; color: var(--ink); box-shadow: 2px 2px 0 var(--paper); }
.cover-phone { max-width: 300px; margin-inline: auto; rotate: 3deg; }
.cover-phone img { filter: drop-shadow(10px 12px 0 rgba(0, 0, 0, 0.45)); }

.sheet { padding-block: clamp(56px, 8vw, 110px); }
.sheet + .sheet { border-top: 3px dashed rgba(17, 17, 17, 0.2); }
.sheet-rooftop { background: var(--concrete); color: var(--paper); }
.sheet-rooftop .tx-mute, .sheet-rooftop .sheet-facts dt { color: var(--mute-dk); }
.sheet-rooftop .pips i { border-color: var(--paper); }
.sheet-rooftop .pips i.on { background: var(--pink); }
.polaroid {
  width: min(100%, 440px); flex-shrink: 0; padding: 14px 14px 10px; background: #fff;
  border: var(--bd); box-shadow: var(--hard-lg); position: relative;
}
.polaroid::before { content: ""; position: absolute; top: -14px; left: 50%; width: 110px; height: 28px; translate: -50% 0; background: rgba(60, 196, 255, 0.75); rotate: 3deg; }
.polaroid-img { aspect-ratio: 1; overflow: hidden; border: 2px solid var(--ink); }
.polaroid-img img { width: 100%; height: 100%; object-fit: cover; }
.polaroid.crop-6 .polaroid-img img { scale: 1.07; }
.sheet-harbor .polaroid-img img { scale: 1.06; }
.polaroid figcaption { color: var(--ink); text-align: center; margin-top: 8px; }
.spot-chip { display: inline-block; padding: 1px 8px; border: 2px solid var(--ink); color: var(--ink); margin-right: 6px; }
.sheet-facts > div { padding: 10px 12px; border: 2px solid currentColor; border-radius: 10px; }
.sheet-facts dt { font-size: 12px; color: var(--mute); font-weight: 700; }
.sheet-facts dd { font-weight: 900; margin-top: 2px; }
.trick-links a {
  display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--ink); color: var(--yellow);
  font-size: 13px; font-weight: 700; text-decoration: none;
}
.sheet-rooftop .trick-links a { background: var(--yellow); color: var(--ink); }
.trick-links a:hover { background: var(--pink); color: var(--ink); }
.sheet-rooftop .line li { background: var(--concrete-2); color: var(--paper); border-color: var(--paper); }
.mini-rank { max-width: 520px; font-size: 14px; }
.mini-rank caption { text-align: left; padding-bottom: 6px; }
.mini-rank th, .mini-rank td { padding: 8px 6px; border-bottom: 2px solid currentColor; text-align: left; }
.mini-rank thead th { font-size: 12px; opacity: 0.7; border-bottom-width: 3px; }
.mini-rank tbody tr:first-child th::after { content: " ★"; color: var(--pink); }
.rot-table { min-width: 560px; border: var(--bd); box-shadow: var(--hard); }
.rot-table th, .rot-table td { padding: 12px 14px; border-bottom: 2px solid var(--ink); text-align: left; }
.rot-table thead th { background: var(--ink); color: var(--yellow); font-size: 13px; }
.rot-table tbody th { font-family: var(--f-disp); font-weight: 400; font-size: 18px; width: 64px; }

/* 배틀 */
.season-cover { position: relative; overflow: hidden; border-bottom: 3px solid var(--ink); }
.season-art img { width: 100%; height: clamp(420px, 52vw, 680px); object-fit: cover; object-position: center 30%; }
.season-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17, 17, 17, 0.95) 8%, rgba(17, 17, 17, 0.55) 34%, rgba(17, 17, 17, 0) 62%); }
.season-copy { position: absolute; left: 0; right: 0; bottom: clamp(20px, 4vw, 48px); z-index: 1; }
.season-title { font-size: clamp(52px, 9vw, 132px); line-height: 0.95; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--pink); }
.season-dday {
  position: absolute; right: var(--gut); bottom: 0; padding: 8px 16px; background: var(--yellow); color: var(--ink);
  border: 3px solid var(--ink); font-size: clamp(26px, 3.5vw, 44px); rotate: 6deg; box-shadow: 5px 5px 0 var(--ink);
}
@media (max-width: 719.98px) { .season-dday { position: static; display: inline-block; margin-top: 12px; rotate: -3deg; } }

.mode-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 4px 0; }
.mode-tabs [role="tab"] {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 12px 18px; border: var(--bd); border-bottom: 0; border-radius: 14px 14px 0 0;
  background: var(--paper-2); font-weight: 900; font-size: 15px; translate: 0 3px;
}
.mode-tabs [role="tab"] .f-num { color: var(--pink); }
.mode-tabs [role="tab"][aria-selected="true"] { background: var(--yellow); translate: 0 0; padding-bottom: 15px; }
.mode-panel { padding: clamp(20px, 3.4vw, 40px); border-top-left-radius: 0; }
.mode-facts li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 2px solid var(--ink); border-radius: 999px; font-size: 13px; font-weight: 700; background: #fff; }
.mode-facts .ic { width: 16px; height: 16px; }
.steps { counter-reset: s; display: grid; gap: 8px; }
.steps li { counter-increment: s; display: flex; gap: 10px; align-items: baseline; }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--f-num); font-weight: 800; color: var(--pink); }
.mini-card { box-shadow: var(--hard); }
.skate-letters { display: grid; gap: 10px; }
.skate-letters li { display: flex; align-items: center; gap: 6px; }
.skate-letters li > span { width: 72px; }
.skate-letters b {
  display: grid; place-items: center; width: 46px; height: 46px; border: 3px solid var(--ink);
  font-family: var(--f-disp); font-weight: 400; font-size: 26px; background: var(--pink);
}
.skate-letters .is-me b { background: var(--sky); }
.skate-letters b.off { background: transparent; color: rgba(17, 17, 17, 0.2); border-style: dashed; }
.crew-fig { position: relative; max-width: 420px; margin-inline: auto; }
.crew-fig img { border: var(--bd); border-radius: 14px; box-shadow: var(--hard-lg); rotate: 2deg; }
.crew-tags { display: flex; justify-content: space-around; margin-top: -18px; position: relative; }
.crew-tags span { padding: 3px 12px; border: 2px solid var(--ink); font-weight: 900; font-size: 14px; rotate: -4deg; }
.crew-tags span:nth-child(2) { rotate: 3deg; }

.rank-tabs .chip { border-color: var(--paper); background: transparent; color: var(--paper); }
.rank-tabs .chip[aria-selected="true"] { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.rank-table { min-width: 620px; font-size: 15px; }
.rank-table th, .rank-table td { padding: 13px 10px; text-align: left; border-bottom: 1px solid rgba(246, 241, 231, 0.16); }
.rank-table thead th { font-size: 12px; color: var(--mute-dk); font-weight: 700; }
.rank-table tbody th { font-weight: 900; }
.rank-table tr.top td:first-child { color: var(--yellow); font-size: 20px; }
.rank-table .ta-r { text-align: right; }
.up-v { color: var(--sky); font-weight: 700; }
.dn-v { color: var(--pink); font-weight: 700; }
.tier { display: inline-block; padding: 2px 10px; border: 2px solid var(--ink); border-radius: 6px; font-size: 12px; font-weight: 900; color: var(--ink); }
.t-bronze { background: #d39a6a; }
.t-silver { background: #d5d7dc; }
.t-gold { background: var(--yellow); }
.t-plat { background: var(--sky); }
.t-concrete { background: var(--concrete); color: var(--yellow); border-color: var(--yellow); }
.tier-card { color: var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.ranks .tier-card { box-shadow: 5px 5px 0 #000; }
@media (min-width: 980px) { .tiers { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* 다운로드 */
.start-cover { padding-block: 28px clamp(48px, 7vw, 96px); border-bottom: 3px solid var(--ink); }
.start-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) { .start-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.start-dl { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.start-qr img { width: 84px; height: 84px; border: 2px solid var(--ink); }
.specs > div { padding: 10px 12px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; }
.specs dt { font-size: 12px; color: var(--mute); font-weight: 700; }
.specs dd { font-weight: 900; }
.start-crew { max-width: 460px; margin-inline: auto; }
.start-crew img { border: var(--bd); border-radius: 18px; box-shadow: var(--hard-lg); rotate: -2.5deg; }

.coupon-box { padding: clamp(20px, 3.4vw, 36px); box-shadow: 10px 10px 0 var(--pink); }
.decks { border: 0; padding: 0; margin: 0; }
.deck-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.deck {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px;
  border: 2px solid var(--ink); border-radius: 12px; cursor: pointer; text-align: center; transition: background 0.15s, translate 0.15s;
}
.deck small { font-size: 11px; color: var(--mute); }
.deck input { position: absolute; opacity: 0; }
.deck:has(input:checked) { background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); translate: -2px -2px; }
.deck:has(input:focus-visible) { outline: 3px solid var(--sky); outline-offset: 3px; }
.deck-art { width: 26px; height: 92px; border: 3px solid var(--ink); border-radius: 13px; margin-bottom: 8px; rotate: 18deg; }
.deck-sky { background: var(--sky); }
.deck-pink { background: var(--pink); }
.deck-yellow { background: var(--yellow); }
.deck:has(input:checked) .deck-yellow { background: #fff; }
.field { border: 0; padding: 0; margin-inline: 0; }
.input {
  display: block; width: 100%; min-height: 52px; padding: 12px 16px;
  border: 3px solid var(--ink); border-radius: 12px; background: #fff; font-size: 17px;
}
.input:focus { outline: 3px solid var(--sky); outline-offset: 2px; }
.input[aria-invalid="true"] { border-color: var(--pink); background: #fff2f8; }
.seg { display: flex; gap: 8px; }
.seg label { position: relative; flex: 1; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: block; padding: 12px; border: 2px solid var(--ink); border-radius: 12px; text-align: center; font-weight: 900; cursor: pointer; }
.seg input:checked + span { background: var(--ink); color: var(--yellow); }
.seg input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 15px; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--pink); flex-shrink: 0; }
.check-detail { margin: 6px 0 0 32px; }
.err { margin-top: 6px; color: #c2006b; font-size: 14px; font-weight: 700; }
.err::before { content: "! "; }
.signup-done { padding: 24px 8px; }
.signup-done:focus { outline: none; }
.done-stamp {
  display: inline-block; padding: 6px 18px; border: 4px solid var(--pink); color: var(--pink);
  font-size: 34px; rotate: -8deg;
}
.done-code { display: inline-block; padding: 10px 18px; background: var(--ink); color: var(--yellow); font-size: 24px; border-radius: 10px; letter-spacing: 0.04em; }

.route { display: grid; gap: 28px; position: relative; }
@media (min-width: 720px) {
  .route { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .route::before { content: ""; position: absolute; left: 30px; right: 10%; top: 28px; border-top: 4px dashed var(--ink); }
}
.route li { position: relative; }
.route-n {
  position: relative; display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 14px;
  border: 3px solid var(--ink); border-radius: 50%; font-size: 24px; box-shadow: 4px 4px 0 var(--ink);
}
.route li:nth-child(even) .route-n { rotate: -8deg; border-radius: 14px; }

/* 404 */
.bail { min-height: 70vh; display: grid; align-items: center; padding-block: 72px; }
.bail-word {
  font-size: clamp(96px, 22vw, 280px); line-height: 0.85; color: var(--pink);
  -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 10px 10px 0 var(--yellow); rotate: -6deg; margin-bottom: 24px;
}