/* 사다리타기(ladder) 전용 스타일 + 공통 변수 alias.
   페이지별 stylesheet link라 horse-race 페이지엔 무영향. */

:root {
    /* 게임 전용 그라데이션 (amber/gold) */
    --ladder-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

    /* 사다리 게임 뷰 최대 폭 — 캔버스/라벨행/상태/시작버튼이 같은 폭으로 정렬되게 단일 토큰으로 관리.
       backing store(720×560)는 불변; 표시 크기만 키운다(좌표/공정성 무관, 720:560 종횡비 유지). */
    --ladder-view-max: 720px;

    /* 카운트다운 화면 디밍 그라데이션 — 하강 직전 카운트다운에 사다리 위로 깐다(시각 전용). */
    --ladder-dim-gradient: radial-gradient(ellipse at center,
        rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.45) 70%, rgba(0, 0, 0, 0.62) 100%);

    /* 내 채팅 말풍선 — 라이트/다크 무관하게 항상 밝은 배경(어두운 #333 텍스트 가독 확보)
       + 진한 이름색(배경과 충분히 대비). roulette의 green-50/green-800 패턴과 동일 의도. */
    --ladder-chat-bg: #fef3c7;     /* 밝은 amber, 모드 불변 */
    --ladder-chat-name: #92400e;   /* 진한 amber, 모드 불변 */

    /* 광고 패독(.ladder-adspot--landing / --game) 잔디 분위기 — 부드러운 그린 turf.
       모드 불변(라이트/다크 양쪽에서 잔디로 읽히게 고정). 하드코딩 색 금지 → 변수로 관리. */
    --ladder-turf-1: #d9f0c4;   /* 밝은 잔디 */
    --ladder-turf-2: #aedb8f;   /* 진한 잔디 */
    --ladder-turf-rail: rgba(255, 255, 255, 0.45);   /* 트랙 위 옅은 레일/지면선 */

    /* horse-race.css가 쓰는 var(--horse-*)를 ladder 색으로 alias */
    --horse-500: var(--ladder-500);
    --horse-600: var(--ladder-600);
    --horse-accent: var(--ladder-accent);
    --horse-gradient: var(--ladder-gradient);
    --horse-50: rgba(var(--ladder-500-rgb), 0.08);
    --horse-100: rgba(var(--ladder-500-rgb), 0.16);
    --horse-200: rgba(var(--ladder-500-rgb), 0.24);
    --horse-700: var(--ladder-600);
}

/* ⚠️ Tailwind CDN .container responsive(1280px)가 horse-race.css 800px override → 강제.
   사다리는 캔버스를 크게 보여주려고 데스크톱에서 컨테이너 폭을 키운다(아래 미디어쿼리). */
.container {
    max-width: 800px !important;
}

/* 데스크톱: 큰 사다리 화면 — 컨테이너를 넓혀 캔버스(960px까지)가 또렷하게 보이게.
   캔버스 backing store(720×560)는 불변 — 표시 크기만 CSS로 확대(좌표/공정성 무관). */
@media (min-width: 1000px) {
    .container {
        max-width: 1000px !important;
    }
    :root {
        --ladder-view-max: 960px;
    }
}

/* ⚠️ horse-race.css는 .game-section{display:none}+.active 토글. 진입 즉시 표시 */
.game-section {
    display: block;
}

/* ── 설정 단계 (Phase B: 칸 수 스테퍼 + 라벨 편집 + 미리보기) ── */
/* 칸 수 스테퍼 바 — 모바일 우선(세로 여백), 한 행에 라벨 + 스테퍼 */
/* 줄 수 행 — 3슬롯 그리드: [빈 1fr][가운데 main auto][우측 pill 1fr]. main이 진짜 중앙, 상점은 우측 끝. */
.ladder-setup-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    margin: 4px 0 16px;
}
.ladder-setup-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
/* 좌측 빈 슬롯 — 가운데 main을 중앙에 두기 위한 1fr 스페이서 */
.ladder-bar-spacer { display: block; min-width: 0; }
/* 우측 끝 정렬 pill(상점) */
.ladder-setup-bar .ladder-shop-open-btn { justify-self: end; }

.ladder-setup-label {
    font-weight: 700;
    color: var(--ladder-accent);
    font-size: 15px;
    font-family: 'Jua', 'Segoe UI', sans-serif;
}

.ladder-stepper {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 스테퍼 버튼 — 터치 타겟 ≥40px */
.ladder-step-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border: 2px solid var(--ladder-500);
    border-radius: 10px;
    background: var(--bg-white);
    color: var(--ladder-accent);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.1s, background 0.15s;
}

.ladder-step-btn:hover:not(:disabled) {
    background: rgba(var(--ladder-500-rgb), 0.12);
    transform: translateY(-2px);
}

.ladder-step-btn:active:not(:disabled) {
    transform: translateY(0);
}

.ladder-step-btn:focus-visible {
    outline: 3px solid var(--ladder-600);
    outline-offset: 2px;
}

.ladder-step-btn:disabled {
    border-color: var(--gray-300, #d1d5db);
    color: var(--text-muted, #9ca3af);
    cursor: not-allowed;
    opacity: 0.6;
}

.ladder-col-count {
    min-width: 40px;
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    color: var(--ladder-600);
}

/* 라벨 행 — 캔버스 폭에 맞춰 N개 입력을 균등 분할. 캔버스(720)와 같은 폭으로 칸 정렬. */
.ladder-labels-row {
    display: flex;
    gap: 6px;
    max-width: var(--ladder-view-max);
    margin: 0 auto;
    padding: 0 4px;
    box-sizing: border-box;
}

.ladder-label-input {
    flex: 1 1 0;
    min-width: 0;        /* 좁은 화면에서 입력이 넘치지 않게 */
    padding: 8px 4px;
    font-size: 13px;
    text-align: center;
    border: 2px solid var(--gray-300, #d1d5db);
    border-radius: 8px;
    background: var(--bg-white);
    color: var(--text-primary);
    box-sizing: border-box;
    font-family: 'Jua', 'Segoe UI', sans-serif;   /* 작업 H: 귀여운 폰트(메뉴 라벨 입력) */
}

.ladder-label-input:focus {
    outline: none;
    border-color: var(--ladder-500);
}

.ladder-label-input::placeholder {
    color: var(--text-muted, #9ca3af);
}

/* 라벨 편집 소프트락 — 남이 편집 중인 칸(readonly) 시각 표시 */
.ladder-label-input.ladder-label-locked {
    border-color: var(--ladder-accent);
    border-style: dashed;
    background: rgba(var(--ladder-500-rgb), 0.06);
    cursor: not-allowed;
}
.ladder-label-input[readonly] { cursor: not-allowed; }
.ladder-label-input.ladder-label-locked::placeholder { color: var(--ladder-600); opacity: 0.85; }

/* 인룸 글쓰기 권한 바 */
/* 메뉴취합 토글 행 — 3슬롯 그리드: [빈 1fr][가운데 토글 main][빈 1fr]. */
.ladder-edit-mode-bar {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
    max-width: var(--ladder-view-max); margin: 0 auto 10px;
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
.ladder-edit-mode-main {
    display: flex; align-items: center; justify-content: center; gap: 8px 18px; flex-wrap: wrap;
}
/* 한 줄 안의 옵션 그룹(권한 / 내려가기) — 라벨+토글+상태값을 한 덩어리로 묶어 줄바꿈 시 흩어지지 않게 */
.ladder-mode-group { display: inline-flex; align-items: center; gap: 8px; }
/* 두 그룹 사이 옅은 세로 구분선(첫 그룹 뒤에만) */
.ladder-mode-group + .ladder-mode-group {
    border-left: 1px solid var(--gray-300, #d1d5db); padding-left: 18px;
}

/* 모바일 — 좁은 폭에선 가운데 main + 우측 pill이 한 줄에 안 들어가 pill이 줄바꿈/깨짐.
   3열 그리드를 flex-wrap으로 바꿔 main(전폭) 아래 줄에 pill을 우측 정렬로 내린다(짤림/오버플로 방지). */
@media (max-width: 480px) {
    .ladder-setup-bar,
    .ladder-edit-mode-bar {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
        column-gap: 8px; row-gap: 6px;
    }
    .ladder-bar-spacer { display: none; }
    .ladder-setup-main,
    .ladder-edit-mode-main { flex: 1 1 100%; }
    .ladder-setup-bar .ladder-shop-open-btn { margin-left: auto; white-space: nowrap; }
    /* 좁은 폭에서 두 그룹이 줄바꿈되면 좌측 세로 구분선이 떠 보임 → 제거(간격만으로 구분) */
    .ladder-mode-group + .ladder-mode-group { border-left: none; padding-left: 0; }
}
.ladder-edit-mode-btn {
    width: auto; padding: 6px 12px; font-size: 12px; font-weight: 700;
    border: 2px solid var(--ladder-500); border-radius: 8px; cursor: pointer;
    background: var(--bg-white); color: var(--ladder-accent);
}
.ladder-edit-mode-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* 글쓰기 권한 ON/OFF 토글 스위치(작업 F) — 경마 '자동선택'식. ON='all'(모두 쓰기), OFF='host'(방장만). */
.ladder-mode-toggle-wrap { display: inline-flex; align-items: center; }
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;          /* 손잡이 28px가 22px 슬라이드 → 손잡이+여백 터치타깃 확보 */
    height: 28px;
    flex: none;
    margin: 0;
    cursor: pointer;
}
.toggle-switch input {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;           /* 실제 체크박스는 투명하게 깔아 두고 슬라이더로 표현(터치타깃 = 전체 영역) */
    cursor: pointer;
}
.toggle-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--gray-300, #d1d5db);   /* 꺼짐 = 회색 */
    border-radius: 28px;
    transition: background 0.2s ease;
    pointer-events: none;                   /* 클릭은 위의 투명 체크박스가 받는다 */
}
.toggle-slider::before {
    content: "";
    position: absolute;
    height: 22px; width: 22px;
    left: 3px; bottom: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}
.toggle-switch input:checked + .toggle-slider {
    background: var(--ladder-accent);       /* 켜짐 = 게임 accent색(CSS 변수) */
}
.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(22px);
}
.toggle-switch input:focus-visible + .toggle-slider {
    outline: 2px solid var(--ladder-600);
    outline-offset: 2px;
}
.toggle-switch input:disabled + .toggle-slider { opacity: 0.5; cursor: not-allowed; }

/* 결과 이미지 저장 버튼(작업 I4) — finished에서만 표시(JS가 display 토글). 시작 버튼 톤 재사용. */
.ladder-save-image-btn {
    display: block;
    width: 100%;
    max-width: var(--ladder-view-max);
    margin: 10px auto 0;
    padding: 12px 20px;
    min-height: 44px;                       /* 모바일 터치타깃 ≥44px */
    background: var(--bg-white);
    color: var(--ladder-accent);
    border: 2px solid var(--ladder-500);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Jua', 'Segoe UI', sans-serif;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ladder-save-image-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(var(--ladder-500-rgb), 0.4);
}
.ladder-save-image-btn:active { transform: translateY(0); }

/* 위쪽 라벨 행은 캔버스 위, 아래쪽은 캔버스 아래 — 약간의 세로 간격 */
/* scroll-margin-top: 사다리 시작 시 자동 스크롤(scrollIntoView) 앵커 — 화면 최상단에 딱 붙지 않도록 여유 */
#topLabelsRow { margin-bottom: 8px; scroll-margin-top: 12px; }
#bottomLabelsRow { margin-top: 8px; margin-bottom: 16px; }

/* 시작 버튼 */
.ladder-start-btn {
    display: block;
    width: 100%;
    max-width: var(--ladder-view-max);
    margin: 0 auto;
    padding: 14px 20px;
    background: var(--ladder-gradient);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Jua', 'Segoe UI', sans-serif;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    /* 유휴 시 은은한 box-shadow breathe — transform 미사용이라 hover translateY와 충돌 없음. */
    animation: ladderStartBreathe 2.8s ease-in-out infinite;
}

/* hover/active/disabled에선 breathe 중단 — hover box-shadow가 또렷하게 이기고, disabled는 정적. */
.ladder-start-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(var(--ladder-500-rgb), 0.4);
    animation: none;
}

.ladder-start-btn:active:not(:disabled) { transform: translateY(0); }

.ladder-start-btn:disabled {
    background: var(--btn-neutral, #e5e7eb);
    color: var(--text-muted, #9ca3af);
    cursor: not-allowed;
    animation: none;
}

/* box-shadow만 부드럽게 들숨/날숨 — 결과/입력 정확도와 무관(시작 버튼 단독). */
@keyframes ladderStartBreathe {
    0%, 100% { box-shadow: 0 2px 8px rgba(var(--ladder-500-rgb), 0.18); }
    50%      { box-shadow: 0 4px 16px rgba(var(--ladder-500-rgb), 0.34); }
}

/* 게임 상태 표시 (셔플/하강 단계 안내) */
.ladder-game-status {
    text-align: center;
    margin: 10px auto 14px;
    max-width: var(--ladder-view-max);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    min-height: 20px;
    font-family: 'Jua', 'Segoe UI', sans-serif;
}
.ladder-game-status.active { color: var(--ladder-600); }
.ladder-game-status.finished { color: var(--ladder-accent); }

/* 셔플 중 바닥 라벨 카드 — 강조(살짝 떠오름) + 위로 transition은 JS가 인라인 부여 */
.ladder-label-input.ladder-shuffling {
    border-color: var(--ladder-500);
    box-shadow: 0 4px 12px rgba(var(--ladder-500-rgb), 0.35);
    z-index: 2;
    position: relative;
    will-change: transform;
}

/* 결과 캡션 — 여러 줄(칸별 결과) */
.ladder-result-caption {
    line-height: 1.5;
}
.ladder-result-caption > div { font-size: 14px; }

/* 데스크톱: 라벨 입력을 약간 키워 가독성 확보 */
@media (min-width: 640px) {
    .ladder-label-input {
        font-size: 14px;
        padding: 9px 6px;
    }
    .ladder-labels-row { gap: 8px; }
}

/* ── 선택 단계 ── */
.ladder-select-section {
    background: var(--bg-white);
    border: 2px solid var(--ladder-500);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.ladder-select-title {
    font-weight: bold;
    color: var(--ladder-accent);
    font-size: 16px;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ladder-select-hint {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.ladder-lane-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.ladder-lane-btn {
    flex: 1 1 0;
    min-width: 52px;   /* 6레인 고정 — 좁은 폰에서도 1~6이 한두 줄에 들어가게 */
    max-width: 110px;
    padding: 14px 6px;
    border: 2px solid var(--ladder-500);
    border-radius: 10px;
    background: var(--bg-white);
    color: var(--ladder-accent);
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.1s, background 0.15s;
    text-align: center;
    line-height: 1.3;
}

.ladder-lane-btn .lane-owner {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ladder-lane-btn:hover:not(.taken):not(.mine) {
    transform: translateY(-2px);
    background: rgba(var(--ladder-500-rgb), 0.12);
}

/* 키보드 포커스 가시 — 레인 선택을 키보드로도 할 수 있게(P3-2) */
.ladder-lane-btn:focus-visible {
    outline: 3px solid var(--ladder-600);
    outline-offset: 2px;
}

.ladder-lane-btn.mine {
    background: var(--ladder-gradient);
    color: #fff;
    border-color: var(--ladder-600);
}

.ladder-lane-btn.mine .lane-owner {
    color: #fff;
}

.ladder-lane-btn.taken {
    background: var(--gray-100, #f3f4f6);
    color: var(--text-muted, #9ca3af);
    border-color: var(--gray-300, #d1d5db);
    cursor: not-allowed;
}

/* 주인 없는 빈 레인(인원 6 미만) — 점선 테두리 + 흐리게. 선택 가능(내가 고를 수 있음)하나 비어 있음을 표시. */
.ladder-lane-btn.empty {
    border-style: dashed;
    border-color: var(--gray-300, #d1d5db);
    color: var(--text-muted, #9ca3af);
    background: var(--bg-white);
}
.ladder-lane-btn.empty .lane-owner {
    color: var(--text-muted, #9ca3af);
}

.ladder-pick-status {
    text-align: center;
    margin-top: 12px;
    color: var(--text-secondary);
    font-size: 13px;
}

/* ── 캔버스(사다리 추적) ── */
.ladder-canvas-wrap {
    margin: 0 auto 20px;
    text-align: center;
}

#ladderCanvas {
    width: 100%;
    max-width: var(--ladder-view-max);
    height: auto;
    aspect-ratio: 720 / 560;   /* backing store 종횡비 유지 — height:auto와 함께 좌표 매핑 정확 */
    max-height: 72vh;   /* 세로로 긴 캔버스가 뷰포트를 넘지 않게(B3). aspect-ratio가 폭을 줄여 가운데 정렬 유지 */
    /* 캔버스 내부 텍스트·막대기 색이 하드코딩(어두운 갈색/회색)이라, 다크모드에서 페이지 그라데이션이
       비치면 대비가 나빠진다. 불투명 웜화이트 "보드"로 고정해 라이트·다크 모두 가독 확보(꽝/통과는 색+이모지). */
    background: #fbf6ec;
    border: 2px solid var(--ladder-500);
    border-radius: 12px;
    display: block;
    margin: 0 auto;
}

/* 캔버스 결과 캡션은 제거(결과 팝업이 정식 결과 목록) — 빈 자리 gap 없이 숨김. 그 영역은 house-ad가 차지. */
.ladder-result-caption {
    display: none;
}

/* 캔버스 + 레인 이름 라벨 정렬 래퍼 (캔버스와 같은 폭) */
.ladder-canvas-inner {
    position: relative;
    max-width: var(--ladder-view-max);
    margin: 0 auto;
}

/* 스크램블 카운트다운/"셔플!" 오버레이 — 캔버스 위에 큰 글자로 페이드 인/아웃.
   캔버스 표시크기(반응형) 기준 절대배치(부모 .ladder-canvas-inner가 relative + 캔버스와 같은 폭). */
.ladder-scramble-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 22px;   /* 캔버스 영역(레인 이름 라벨 22px 제외)의 세로 중앙에 오도록 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Jua', 'Segoe UI', Tahoma, sans-serif;
    font-size: clamp(48px, 16vw, 110px);   /* 모바일~데스크톱 가변 — 작은 화면에서도 또렷 */
    font-weight: 900;
    color: var(--ladder-accent);
    text-shadow: 0 2px 12px rgba(var(--ladder-500-rgb), 0.55), 0 0 4px rgba(255, 255, 255, 0.9);
    pointer-events: none;       /* 캔버스/구슬 위에 떠 있되 입력은 통과 */
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

/* JS가 단계마다 .show 토글 — 숫자가 커지며 나타났다 사라짐 */
.ladder-scramble-overlay.show {
    opacity: 1;
    transform: scale(1);
}

/* ── 카운트다운 화면 디밍 그라데이션 오버레이 (하강 직전 카운트다운에만 표시) ── */
.ladder-dim-overlay {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: var(--ladder-dim-gradient);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease-out;
    z-index: 1;   /* 사다리(캔버스) 위, 카운트다운 숫자(z=2 미만이지만 overlay는 형제) 아래로 자연 적층 */
}
.ladder-dim-overlay.show { opacity: 1; }
/* 카운트다운 숫자가 디밍 위로 또렷하게 보이도록 — scramble overlay를 dim보다 위에 둔다 */
.ladder-scramble-overlay { z-index: 3; }

/* ── 캔버스 위 떠다니는 채팅 오버레이 (경마식) ──
   라이브 채팅 메시지가 캔버스 하단부에서 말풍선으로 떠올랐다 사라진다(모든 phase 공통).
   scramble(z=3) 위, 풀스크린 버튼(top-right, z=4)과는 공간이 겹치지 않음.
   pointer-events:none이라 드래그/풀스크린 버튼/터치 드로잉을 절대 가로채지 않는다. */
.ladder-chat-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 26px;   /* 캔버스 하단(레인 이름 라벨 영역) 살짝 위에서 시작 */
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;   /* 아래에서 위로 쌓임 */
    align-items: flex-start;
    gap: 4px;
    padding: 0 8px;
    max-height: 70%;
    overflow: hidden;
    pointer-events: none;        /* 입력은 캔버스로 통과 — 드래그/풀스크린 방해 0 */
}

/* 말풍선 — 어두운/밝은 캔버스 모두 가독되도록 반투명 어두운 배경 + 흰 글자.
   (캔버스 위 가독 목적의 rgba 리터럴은 명세상 허용) */
.ladder-chat-bubble {
    max-width: 70%;
    padding: 5px 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-family: 'Jua', 'Segoe UI', Tahoma, sans-serif;
    font-size: 13px;
    line-height: 1.35;
    word-break: break-word;
    white-space: pre-wrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    will-change: transform, opacity;
    animation: ladderChatRise 4.5s ease-out forwards;
}
/* 내 메시지는 게임 accent 테두리로 살짝 구분 */
.ladder-chat-bubble.me {
    border: 1.5px solid var(--ladder-accent);
}
/* 시스템 메시지는 더 옅게(과하지 않게) */
.ladder-chat-bubble.system {
    background: rgba(0, 0, 0, 0.4);
    font-style: italic;
    opacity: 0.85;
}
.ladder-chat-bubble .ladder-chat-bubble-name {
    font-weight: 700;
    margin-right: 6px;
    color: var(--ladder-chat-bg);   /* 밝은 amber — 어두운 말풍선 위에서 또렷 */
}

/* 등장(아래에서 ↑ + fade in) → 잠깐 유지 → 위로 더 떠오르며 fade out. 총 4.5s. */
@keyframes ladderChatRise {
    0%   { opacity: 0; transform: translateY(16px); }
    10%  { opacity: 1; transform: translateY(0); }
    70%  { opacity: 1; transform: translateY(-6px); }
    100% { opacity: 0; transform: translateY(-26px); }
}

/* 출발 레인별 소유자 이름 — 캔버스 바로 아래, 각 레인 x좌표에 맞춰 고정 */
.ladder-lane-names {
    position: relative;
    width: 100%;
    height: 22px;
    margin-top: 2px;
}

.ladder-lane-name {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    max-width: 13%;
    font-size: 12px;
    font-weight: 700;
    color: var(--ladder-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    transition: color 0.15s, text-shadow 0.15s;
}

/* 현재 내려가는 중인 레인 강조 */
.ladder-lane-name.active {
    color: var(--ladder-600);
    text-shadow: 0 0 7px rgba(var(--ladder-500-rgb), 0.7);
}

/* 꽝(패자) 레인 강조 */
.ladder-lane-name.loser {
    color: var(--red-500, #ef4444);
    text-shadow: 0 0 7px rgba(239, 68, 68, 0.5);
}

/* 모바일: 레인 많을 때 이름 겹침 회피 */
@media (max-width: 480px) {
    .ladder-lane-name {
        font-size: 10px;
        max-width: 12%;
    }
    /* 좁은 화면에선 height:auto(2:1)로 캔버스가 너무 낮아짐(8인 곡선 그리기 답답) → 최소 높이 확보.
       toCanvas가 rect.height로 매핑하므로 종횡비가 늘어도 좌표는 정확. */
    .ladder-build-canvas {
        min-height: 220px;
    }
    #ladderCanvas {
        max-height: 60vh;   /* 좁은 화면: 채팅/컨트롤이 화면 밖으로 밀리지 않게 더 낮게 캡(B3/J) */
    }
    /* 일반 스킨/잔상 행은 좁은 화면에서도 [이모지 | 이름·상태 | 적용]이 한 줄로 깔끔히 들어간다(wrap 금지).
       한마디(custom_text) 행만 입력칸을 풀폭 컨트롤 줄로 내린다(base의 --text wrap + control flex:1 1 100%가 처리). */
    .ladder-shop-text-input { font-size: 14px; }
    /* 토큰픽 그리드는 ≤420px에서 2열 유지(기본값) — 별도 강제 불필요. 카드 폭은 calc(100vw-32px). */
    /* 캔버스 채팅 오버레이 — 좁은 화면에선 폰트 축소 + max-width 비례(캔버스 밖 넘침 방지). */
    .ladder-chat-bubble {
        font-size: 11px;
        max-width: 80%;
        padding: 4px 8px;
    }
}

/* ── 빌드(막대기 배치) 단계 ── */
.ladder-build-section {
    background: var(--bg-white);
    border: 2px solid var(--ladder-500);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.ladder-build-title {
    font-weight: bold;
    color: var(--ladder-accent);
    font-size: 16px;
    margin-bottom: 6px;
}

.ladder-build-hint {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.5;
}

/* 미연결 드래그 폐기 시 일시 강조 — 안내가 눈에 들어오게 (1.8s 후 평상 힌트로 복원) */
.ladder-build-hint.ladder-build-hint-flash {
    color: var(--ladder-accent);
    font-weight: 600;
}

/* 빌드 진행 표시 — 레인/막대기 고른 인원 카운트 (호스트 시작 타이밍 판단용) */
.ladder-build-progress {
    font-size: 12px;
    font-weight: 600;
    color: var(--ladder-accent);
    background: rgba(var(--ladder-500-rgb), 0.10);
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 12px;
    line-height: 1.5;
}
.ladder-build-progress .muted {
    color: var(--text-muted);
    font-weight: 400;
}

/* 빌드 단계 출발 레인 선택 */
.ladder-build-lane-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ladder-accent);
    margin: 4px 0 8px;
}

#ladderBuildLaneGrid {
    margin-bottom: 16px;
}

.ladder-build-grid {
    position: relative;
    width: 100%;
    background: rgba(var(--ladder-500-rgb), 0.06);
    border-radius: 10px;
    overflow: hidden;
}

/* 빌드 캔버스 — 두 기둥 사이를 드래그해 막대기를 자유롭게 긋는다.
   touch-action:none → 터치 드래그가 페이지 스크롤로 새지 않게 한다. */
.ladder-build-canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    cursor: crosshair;
    touch-action: none;
}

/* ── 결과 오버레이 순위 행 (공통 .result-overlay 안에서 사용) ── */
.ladder-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
}
/* 꽝(패자) 행 — 텍스트 색만이 아니라 배경 틴트로 또렷이 강조 */
.ladder-result-row.loser {
    background: rgba(239, 68, 68, 0.10);
    border-bottom-color: rgba(239, 68, 68, 0.25);
}
.ladder-result-name { font-weight: 600; }
.ladder-result-lane {
    color: var(--text-muted, #9ca3af);
    font-size: 12px;
    font-weight: 400;
}
.ladder-result-tag { font-weight: bold; white-space: nowrap; }
.ladder-result-tag.loser { color: #ef4444; }
.ladder-result-tag.pass { color: #10b981; }

/* ── 빠른 재준비(경마식) — 결과 카드 안 버튼들 ── */
.ladder-result-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}
.ladder-next-round-btn {
    width: 100%;
    padding: 14px 20px;
    background: var(--ladder-gradient);
    color: var(--text-primary);
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ladder-next-round-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(var(--ladder-500-rgb), 0.4);
}
.ladder-next-round-btn:active { transform: translateY(0); }
.ladder-result-close-btn {
    width: 100%;
    padding: 10px 20px;
    background: var(--btn-neutral, #e5e7eb);
    color: var(--text-secondary);
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* ── 무료(광고) 상점 — 열기 버튼 + 전용 팝업(모달) ── */
/* 상점 열기 — 방 헤더 액션 줄(room-header-actions)의 작은 알약 버튼(링크 옆). */
.ladder-shop-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    padding: 5px 12px;
    border: 1px solid var(--ladder-500);
    border-radius: 999px;
    background: rgba(var(--ladder-500-rgb), 0.08);
    color: var(--ladder-accent);
    font-size: 13px;
    font-weight: 700;
    font-family: 'Jua', 'Segoe UI', sans-serif;
    cursor: pointer;
    white-space: nowrap;
}
.ladder-shop-open-btn:hover { background: rgba(var(--ladder-500-rgb), 0.14); }

/* 건의 게시판 이동 버튼 — 접속자 헤더 우측 끝. 상점 알약과 같은 톤이되 외곽선형으로 구분. */
.ladder-board-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border: 1px solid rgba(var(--ladder-500-rgb), 0.45);
    border-radius: 999px;
    background: var(--bg-white);
    color: var(--ladder-accent);
    font-size: 13px;
    font-weight: 700;
    font-family: 'Jua', 'Segoe UI', sans-serif;
    text-decoration: none;
    white-space: nowrap;
}
.ladder-board-link-btn:hover { background: rgba(var(--ladder-500-rgb), 0.10); }

/* 접속자 헤더를 flex 행으로 — 라벨 좌측, 게시판 버튼은 margin-left:auto로 우측 끝.
   .users-title은 공유(horse-race.css) 클래스라 ladder.css(이 페이지 전용 로드)에서만 오버라이드한다. */
#usersSection .users-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#usersSection .users-title .ladder-board-link-btn { margin-left: auto; }
.ladder-shop-balance {
    font-size: 12px;
    font-weight: 800;
    color: var(--ladder-600);
    background: rgba(var(--ladder-500-rgb), 0.16);
    border-radius: 999px;
    padding: 2px 8px;
}

/* 상점 팝업(모달) — ladderAdModal과 동일 오버레이 규약. 모바일 먼저(폭 꽉 차게), PC는 폭 제한. */
.ladder-shop-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    z-index: 10003;
    /* display:flex는 JS(ladderOpenShop)에서 토글 — 닫힘 시 display:none */
}
.ladder-shop-card {
    background: var(--bg-white);
    border-radius: 16px;
    padding: 14px;
    width: calc(100vw - 32px);
    max-width: 440px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}
.ladder-shop-card-head {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.ladder-shop-card-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--ladder-accent);
    font-family: 'Jua', 'Segoe UI', sans-serif;
}
.ladder-shop-close-btn {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(var(--ladder-500-rgb), 0.10);
    color: var(--ladder-accent);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
}
.ladder-shop-close-btn:hover { background: rgba(var(--ladder-500-rgb), 0.18); }
.ladder-shop-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.ladder-shop-balance-big {
    font-size: 15px;
    font-weight: 800;
    color: var(--ladder-600);
    background: rgba(var(--ladder-500-rgb), 0.14);
    border-radius: 999px;
    padding: 5px 14px;
}
.ladder-shop-adcount {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg-primary);
    border-radius: 999px;
    padding: 5px 12px;
}
.ladder-shop-section-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 10px 0 6px;
}
.ladder-shop-section-hint {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}
.ladder-shop-items {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* 모바일에서도 2열 — 아이템 8개를 4행으로 압축(스크롤 방지 핵심) */
    gap: 6px;
    margin-bottom: 4px;
}
.ladder-shop-item {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;            /* grid 트랙(1fr)이 콘텐츠 최소폭 아래로 줄어 구매버튼이 잘리지 않게(짤림 방지) */
    padding: 7px 8px;
    border: 2px solid var(--gray-200, #e5e7eb);
    border-radius: 10px;
    background: var(--bg-primary);
}
.ladder-shop-item.owned { border-color: var(--ladder-500); background: rgba(var(--ladder-500-rgb), 0.06); }
.ladder-shop-item-emoji { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.ladder-shop-item-info { flex: 1 1 auto; min-width: 0; }
.ladder-shop-item-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ladder-shop-item-price { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.ladder-shop-buy-btn {
    flex: 0 0 auto;
    width: auto;
    padding: 6px 9px;
    border: none;
    border-radius: 8px;
    background: var(--ladder-gradient);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.ladder-shop-buy-btn:disabled {
    background: var(--btn-neutral, #e5e7eb);
    color: var(--text-muted, #9ca3af);
    cursor: not-allowed;
}
.ladder-shop-ad-btn {
    display: block;
    width: 100%;
    padding: 9px 14px;
    border: 2px solid var(--ladder-500);
    border-radius: 10px;
    background: var(--bg-white);
    color: var(--ladder-accent);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Jua', 'Segoe UI', sans-serif;
}
.ladder-shop-ad-btn:hover:not(:disabled) { background: rgba(var(--ladder-500-rgb), 0.12); }
.ladder-shop-ad-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.ladder-shop-note {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ── 토큰별 스킨 적용 섹션(상점 팝업 내) ── */
.ladder-shop-skins {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ladder-shop-skin-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 2px solid var(--gray-200, #e5e7eb);
    border-radius: 10px;
    background: var(--bg-primary);
}
.ladder-shop-skin-emoji { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.ladder-shop-skin-info { flex: 1 1 auto; min-width: 0; }
.ladder-shop-skin-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ladder-shop-skin-state { font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.ladder-shop-apply-btn {
    flex: 0 0 auto;
    width: auto;          /* 전역 button{width:100%} 덮기 — 안 그러면 버튼이 행을 다 먹고 토큰 이름이 "토…"로 짓눌린다 */
    min-width: 64px;      /* "적용"/"적용됨" 폭 통일 + 충분한 탭 타깃 */
    padding: 8px 16px;
    border: 2px solid var(--ladder-500);
    border-radius: 8px;
    background: var(--bg-white);
    color: var(--ladder-accent);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}
.ladder-shop-apply-btn:disabled {
    border-color: var(--gray-200, #e5e7eb);
    color: var(--text-muted, #9ca3af);
    cursor: not-allowed;
}
.ladder-shop-skins-empty {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 8px 2px;
}
/* 한마디(custom_text) 행 — 입력칸이 emoji/이름/버튼 사이에 좁게 끼지 않게 풀폭 컨트롤 줄로 분리.
   row를 wrap → 1줄: emoji + 이름/상태, 2줄: 입력칸(flex:1) + 적용 버튼(풀폭). */
.ladder-shop-skin-row--text { flex-wrap: wrap; }
.ladder-shop-skin-control {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* width:auto로 전역 button{width:100%}를 덮는다 — 안 그러면 버튼 flex-basis가 100%가 돼 입력칸이 짓눌린다. */
.ladder-shop-skin-control .ladder-shop-text-input { margin-top: 0; flex: 1 1 auto; min-width: 0; width: auto; }
.ladder-shop-skin-control .ladder-shop-apply-btn { flex: 0 0 auto; width: auto; }

/* 코스메틱 적용 애니메이션 — 아이템이 나타날 때 페이드/스케일 */
@keyframes cosmetic-applied {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

.cosmetic-applied {
    animation: cosmetic-applied 0.3s ease-out;
}

/* 한마디(custom_text) 입력칸 — .ladder-label-input 톤 재사용 + 귀여운 폰트. 터치 ≥40px. */
.ladder-shop-text-input {
    width: 100%;
    margin-top: 6px;
    min-height: 40px;
    padding: 8px 12px;
    border: 2px solid var(--gray-200, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-white);
    color: var(--text-primary);
    font-family: 'Yeon Sung', 'Jua', cursive;
    font-size: 15px;
    box-sizing: border-box;
}
.ladder-shop-text-input:focus {
    outline: none;
    border-color: var(--ladder-500);
}
.ladder-shop-text-input::placeholder { color: var(--text-muted, #9ca3af); }

/* 한마디 표시 방식(한글자씩/한번에) — info 다음 풀폭 줄, 두 라디오 가로 배치. */
.ladder-shop-text-mode {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 2px;
}
.ladder-shop-text-mode-opt {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--text-muted, #9ca3af);
    cursor: pointer;
}
.ladder-shop-text-mode-opt input { width: auto; margin: 0; cursor: pointer; }

/* ── 토큰 선택 시트(스킨 적용 대상) — 상점 팝업 위 ── */
.ladder-tokenpick-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.55);
    justify-content: center;
    align-items: center;
    z-index: 10005;
    /* display:flex는 JS에서 토글 */
}
.ladder-tokenpick-card {
    background: var(--bg-white);
    border-radius: 16px;
    padding: 18px 16px 16px;
    width: calc(100vw - 32px);
    max-width: 420px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}
.ladder-tokenpick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
@media (min-width: 420px) {
    .ladder-tokenpick-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.ladder-tokenpick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border: 2px solid var(--ladder-500);
    border-radius: 10px;
    background: var(--bg-white);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    word-break: break-word;
}
.ladder-tokenpick-btn:hover:not(:disabled) { background: rgba(var(--ladder-500-rgb), 0.10); }
.ladder-tokenpick-btn:disabled {
    border-color: var(--gray-200, #e5e7eb);
    color: var(--text-muted, #9ca3af);
    background: var(--bg-primary);
    cursor: not-allowed;
}
.ladder-tokenpick-num {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}
.ladder-tokenpick-locked {
    font-size: 16px;
    line-height: 1;
}

/* ── 광고 시청 모달 (시뮬레이션) ── */
.ladder-ad-card {
    background: var(--bg-white);
    border-radius: 16px;
    padding: 28px 24px;
    max-width: 360px;
    width: calc(100vw - 48px);
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}
.ladder-ad-icon { font-size: 48px; margin-bottom: 8px; }
.ladder-ad-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--ladder-accent);
    font-family: 'Jua', 'Segoe UI', sans-serif;
    margin-bottom: 6px;
}
.ladder-ad-sub { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }
.ladder-ad-countdown {
    font-size: 44px;
    font-weight: 900;
    color: var(--ladder-600);
    font-family: 'Jua', 'Segoe UI', sans-serif;
}

/* ── 게임 기록 (히스토리) — 라운드 카드 + 결과 칩 ── */
#historyList { display: flex; flex-direction: column; gap: 10px; }
.ladder-history-item {
    padding: 12px 14px;
    border: 1px solid rgba(var(--ladder-500-rgb), 0.18);
    border-radius: 12px;
    background: rgba(var(--ladder-500-rgb), 0.05);
}
.ladder-history-round {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.lh-round-badge {
    font-family: 'Jua', 'Segoe UI', sans-serif;
    font-weight: 800;
    font-size: 12px;
    color: var(--ladder-accent);
    background: rgba(var(--ladder-500-rgb), 0.16);
    padding: 3px 10px;
    border-radius: 999px;
}
.lh-round-meta {
    font-size: 12px;
    color: var(--text-tertiary);
    font-weight: 600;
}
.ladder-history-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    padding: 3px 0;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.lh-from { color: var(--text-secondary); font-weight: 600; }
.lh-arrow { color: var(--ladder-accent); }
.lh-to {
    color: var(--ladder-600);
    font-weight: 700;
    background: rgba(var(--ladder-500-rgb), 0.12);
    padding: 2px 8px;
    border-radius: 6px;
}

/* ══════════════════════════════════════════════════════════════════
   디스플레이 광고 슬롯 (.ladder-adspot) — 재사용 컴포넌트.
   상점 리워드 광고(.ladder-ad-*, #ladderAdModal)와는 별개 네임스페이스.
   빈 슬롯에는 "광고를 기다리고 있어요" + 🏇 갤럽 플레이스홀더를 표시하고,
   실제 광고가 채워지면(ins[data-ad-status="filled"]) CSS로 플레이스홀더를 숨긴다.
   현재는 push가 주석이라 status가 안 붙어 항상 플레이스홀더가 보이는 게 정상.
   ══════════════════════════════════════════════════════════════════ */

/* 공통: 컨테이너 폭(800px)을 못 넘게 width:100% + 상대배치. min-height는 표면별로 지정. */
.ladder-adspot {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
}
.ladder-adspot .adsbygoogle {
    display: block;
    width: 100%;
}

/* 광고가 실제로 "렌더된 높이"를 가질 때만(JS가 .ladder-ad-live 부여) 장식 플레이스홀더 숨김.
   ⚠ data-ad-status="filled"여도 빈/collapsed 광고(높이 0)면 숨기지 않는다 — '광고도 말도 없는 빈 칸' 방지.
      (배포 사이트에서 auto-ads가 filled로 보고하지만 빈 광고를 그릴 때 말까지 사라지던 문제 수정.)
   js/ladder-adspot-sprites.js의 initAdVisibility가 ins.offsetHeight≥30일 때만 .ladder-ad-live를 붙인다.
   JS 미실행(캐시 등) 시엔 클래스가 안 붙어 말이 계속 보임 — 안전한 폴백(사용자 의도=말 노출). */
.ladder-adspot.ladder-ad-live .ladder-adspot-wait {
    display: none;
}

/* 직접 광고(.ladder-ad-direct) — /admin에서 등록한 외부 이미지 배너(js/ladder.js ladderApplyDirectAds).
   활성 시 placeholder(.ladder-adspot-wait)와 AdSense <ins> 둘 다 숨겨 이중 렌더 방지.
   ⚠ <ins>는 인라인 style="display:block"이라 !important 필요. ins가 숨으면 offsetHeight 0 →
      initAdVisibility(.ladder-ad-live)가 자동 해제되므로 두 상태 클래스는 충돌하지 않는다. */
.ladder-adspot.ladder-ad-direct .ladder-adspot-wait {
    display: none;
}
.ladder-adspot.ladder-ad-direct ins.adsbygoogle {
    display: none !important;
}
.ladder-adspot-direct {
    display: block;
    width: 100%;
}
.ladder-adspot-direct img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 12px;
}
/* 앵커: 컴팩트 가로 스트립 — 앵커 높이(min 56px) 안에 맞춤. ✕ 버튼 자리는 앵커 padding-right(44px)가
   이미 확보(닫기 버튼은 absolute라 in-flow 광고 위에 그대로 뜨고 클릭도 유지). */
.ladder-adspot--anchor .ladder-adspot-direct img {
    max-height: 48px;
    width: auto;
    border-radius: 8px;
}

/* "광고를 기다리고 있어요" 장식 플레이스홀더 — 트랙 + 말 + 라벨 */
.ladder-adspot-wait {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    box-sizing: border-box;
    border-radius: 12px;
    background: rgba(var(--ladder-500-rgb), 0.08);
    border: 1px dashed rgba(var(--ladder-500-rgb), 0.28);
}

/* 말이 가로지르는 트랙(말 클리핑 영역) */
.ladder-adspot-track {
    position: relative;
    width: 100%;
    height: 28px;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(180deg,
        rgba(var(--ladder-500-rgb), 0.10) 0%,
        rgba(var(--ladder-500-rgb), 0.16) 100%);
}

/* 달리는 스프라이트 — 트랙 왼쪽(off-screen) → 오른쪽(off-screen) 루프.
   ⚠ LAMDice SVG 스프라이트(js/ladder-adspot-sprites.js)는 머리가 오른쪽(진행방향)을 향하므로
     예전 🏇 이모지용 scaleX(-1)을 제거했다(있으면 거꾸로 달림). translateY bob만 유지.
   인라인 2프레임 다리/날개 교차는 .horse.idle 게이트로 .vehicle-sprite 내부에서 따로 돈다(css/horse-race.css). */
.ladder-adspot-runner {
    position: absolute;
    top: 50%;
    left: 0;
    font-size: 18px;
    line-height: 1;
    will-change: left, transform;
    animation: ladderAdspotGallop 2.8s linear infinite;
}
.ladder-adspot-runner:nth-child(1) { animation-duration: 2.4s; animation-delay: 0s; }
.ladder-adspot-runner:nth-child(2) { animation-duration: 2.8s; animation-delay: 0.5s; }
.ladder-adspot-runner:nth-child(3) { animation-duration: 3.2s; animation-delay: 1s; }

/* ⚠ 스프라이트 모듈이 runner에 .horse(+.idle)를 부여해 다리/날개 교차 게이트(.horse.idle .vehicle-sprite)를
   켠다. 그런데 horse-race.css의 베이스 .horse 규칙(width/height:80px, bottom:0, display:flex 등)이
   runner 박스로 leak된다. 우발적 정렬에 의존하지 않게 runner가 자기 박스 기하를 명시 소유하도록 고정.
   (.horse.idle .vehicle-sprite 자식 게이트는 영향 없음 → 다리 교차는 그대로 작동.) */
.ladder-adspot-runner.horse {
    width: auto;
    height: auto;
    bottom: auto;
    display: block;
    font-size: 18px;
    z-index: auto;
}

/* 인라인 SVG 스프라이트 사이징 — .vehicle-sprite는 60×45 고정. 트랙(기본 28px / 캔버스 22px)에 맞게 축소.
   runner 자신은 gallop translate를 쓰므로 scale은 자식 .vehicle-sprite에만 걸어 충돌 회피.
   모든 override는 .ladder-adspot-runner 스코프 — horse-race 페이지(공유 css)엔 영향 0. */
.ladder-adspot-runner .vehicle-sprite {
    transform: scale(0.42);
    transform-origin: center center;
}

/* ⚠ left(트랙 기준 %)로 가로지른다. translateX %는 러너 자기 폭(~18px) 기준이라 트랙(100%)을
   끝까지 못 건너고 왼쪽 일부만 달리다 리셋됐다 → left로 교체해 트랙 전체를 횡단. translateY는 bob 전용. */
@keyframes ladderAdspotGallop {
    0%   { left: -14%; transform: translateY(-50%); }
    25%  { left: 22%;  transform: translateY(calc(-50% - 3px)); }
    50%  { left: 50%;  transform: translateY(-50%); }
    75%  { left: 78%;  transform: translateY(calc(-50% - 3px)); }
    100% { left: 114%; transform: translateY(-50%); }
}

.ladder-adspot-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--ladder-accent);
    font-family: 'Jua', 'Segoe UI', sans-serif;
    letter-spacing: 0.2px;
}

/* 클릭형 CTA — 슬롯별 env URL이 wiring된 wait만 .is-clickable 부여(JS). cursor + hover 라벨 강조. */
.ladder-adspot-wait.is-clickable { cursor: pointer; }
.ladder-adspot-wait.is-clickable:hover .ladder-adspot-label,
.ladder-adspot-wait.is-clickable:focus-visible .ladder-adspot-label {
    text-decoration: underline;
    color: var(--ladder-500);
}
.ladder-adspot-wait.is-clickable:focus-visible {
    outline: 2px solid var(--ladder-500);
    outline-offset: 2px;
}

/* 접근성: 모션 줄이기 설정 시 말 정지(가로 갤럽) + 다리/날개 2프레임 교차도 정지 + 신규 유휴/로고/힌트/시작버튼 애니 정지.
   ⚠ horse-race.css의 frame1Anim/frame2Anim은 .horse.idle 게이트로 도므로 여기서 명시적으로 멈춰야 한다(scaleX 정지만으론 다리가 계속 움직임). */
@media (prefers-reduced-motion: reduce) {
    .ladder-adspot-runner { animation: none; }
    .ladder-adspot-runner .vehicle-sprite .frame1,
    .ladder-adspot-runner .vehicle-sprite .frame2 { animation: none !important; }
    .ladder-start-btn,
    .ladder-build-hint { animation: none; }
    /* 스윕 배너도 정지(JS rAF 루프가 reduce-motion에서 미시작 → 기본 opacity:0이지만 명시적으로 숨김). */
    .ladder-adspot-adbanner { display: none; }
}

/* ── 표면별 모디파이어 ── */

/* 랜딩(.entry-ad와 합쳐짐): 큰 배너(250px). display는 .ladder-adspot가 block로 관리 */
.ladder-adspot--landing {
    min-height: 250px;
}
.ladder-adspot--landing .ladder-adspot-wait { min-height: 250px; }

/* 결과 발표 팝업: result-card(overflow-y:auto) 안 배너 */
.ladder-adspot--result {
    min-height: 100px;
    margin: 4px 0 16px;
}

/* 게임 화면: 사다리 바로 아래 배너(결과 발표·버튼보다 위). 큰 배너(250px). */
.ladder-adspot--game {
    min-height: 250px;
    margin: 16px 0;
}
.ladder-adspot--game .ladder-adspot-wait { min-height: 250px; }

/* ══════════════════════════════════════════════════════════════════
   패독(2D 자유 주행) — 큰 두 표면(.ladder-adspot--landing / --game)만.
   트랙을 250px 박스에 꽉 차게 키우고(28px 스트립 → flex 채움), 번호 말 6마리가
   js/ladder-adspot-sprites.js의 결정적 리사주 경로로 자유 주행. 라벨은 컬럼 flex 하단 고정.
   ⚠ 전역 .ladder-adspot-track / .ladder-adspot-runner 규칙은 건드리지 않는다(컴팩트 스트립 공유).
   ══════════════════════════════════════════════════════════════════ */

/* 트랙 확대: 컬럼 flex(.ladder-adspot-wait) 안에서 라벨 위 남는 공간을 전부 차지. overflow:hidden 유지(전역 규칙). */
.ladder-adspot--landing .ladder-adspot-track,
.ladder-adspot--game .ladder-adspot-track,
.ladder-adspot--canvas .ladder-adspot-track {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    width: 100%;
    border-radius: 12px;
    /* 잔디 turf 배경 + 6개 가로 레인 라인(말이 레인을 따라 달림).
       ⚠ 레인 칸 수(/6)는 js/ladder-adspot-sprites.js의 PADDOCK_HORSE_COUNT와 반드시 동기화. */
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent calc(100% / 6 - 1px),
            var(--ladder-turf-rail) calc(100% / 6 - 1px),
            var(--ladder-turf-rail) calc(100% / 6)
        ),
        linear-gradient(160deg, var(--ladder-turf-1) 0%, var(--ladder-turf-2) 100%);
}

/* (배경 스크롤 제거됨 — 사용자 요청. 정적 잔디 turf + 가로 레인 분리선만 유지(트랙 배경, 위 .ladder-adspot-track 규칙).
   구 .ladder-adspot-lane 스크롤 스트립(JS 생성 + 이 규칙)은 삭제. JS도 스트립 미생성.) */

/* 패독 caption(미니 경마 카피) — 트랙 좌상단에 떠 있는 작은 칩. JS 말 위로 떠도 pointer 방해 0. */
.ladder-adspot--landing .ladder-adspot-track::before,
.ladder-adspot--game .ladder-adspot-track::before,
.ladder-adspot--canvas .ladder-adspot-track::before {
    content: "🏇 미니 경마 — 한 판?";
    position: absolute;
    top: 8px;
    left: 10px;
    z-index: 3;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ladder-accent);
    background: rgba(255, 255, 255, 0.78);
    border-radius: 999px;
    font-family: 'Jua', 'Segoe UI', sans-serif;
    letter-spacing: 0.2px;
    pointer-events: none;
}

/* 결승선 — 트랙 우측 가장자리 체커보드 띠(EDGE_PAD 안쪽 결승 위치 근처). 말 아래·캡션 아래. */
.ladder-adspot--landing .ladder-adspot-track::after,
.ladder-adspot--game .ladder-adspot-track::after,
.ladder-adspot--canvas .ladder-adspot-track::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 6px;
    width: 6px;
    z-index: 1;
    opacity: 0.5;
    pointer-events: none;
    background: repeating-linear-gradient(45deg, #1a1a1a 0 4px, #fff 4px 8px);
}

/* 카운트다운 오버레이 — 트랙 정중앙 큰 숫자("3"/"2"/"1"/"출발!"). JS가 textContent + .show 토글.
   z-index 높게(말·결승선 위), pointer-events:none(입력 통과). 등장 시 pop. */
.ladder-adspot-countdown {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    z-index: 6;
    font-family: 'Jua', 'Segoe UI', Tahoma, sans-serif;
    font-size: clamp(34px, 11vw, 72px);
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 18px var(--ladder-accent);
    letter-spacing: 1px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}
.ladder-adspot-countdown.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* "여기는 광고자리!" 스윕 배너 — 경마 달리는 중 사이클당 1회 트랙을 가로지르는 큰 카피.
   JS(js/ladder-adspot-sprites.js)가 transform(가로 위치) + .show(페이드)를 토글. 트랙 overflow:hidden로 가장자리 클리핑.
   z-index 7: 카운트다운(6)보다 위. pointer-events:none(클릭형 CTA 입력 통과). 초기 transform은 트랙 밖(우측). */
.ladder-adspot-adbanner {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(110%, -50%);
    z-index: 7;
    white-space: nowrap;
    pointer-events: none;
    font-family: 'Jua', 'Segoe UI', Tahoma, sans-serif;
    font-size: clamp(18px, 6vw, 34px);
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 16px var(--ladder-accent);
    opacity: 0;
    transition: opacity 0.25s ease-out;
}
.ladder-adspot-adbanner.show { opacity: 1; }

/* 우승마 강조 — HOLD 구간에서 JS가 .winner 부여. 금빛 글로우로 리더가 또렷이 도드라짐. */
.ladder-adspot-runner.winner {
    z-index: 5;
    filter: drop-shadow(0 0 6px gold) drop-shadow(0 0 12px rgba(255, 215, 0, 0.7));
}

/* 패독 말: 전역 단일라인 갤럽(left/top 기반) 끄기 — JS가 transform translate로 직접 배치.
   top/left auto로 되돌려 transform 기준점이 트랙 좌상단(0,0)이 되게(JS는 EDGE_PAD부터 translate). */
.ladder-adspot--landing .ladder-adspot-runner,
.ladder-adspot--game .ladder-adspot-runner,
.ladder-adspot--canvas .ladder-adspot-runner {
    animation: none;
    top: auto;
    left: auto;
    will-change: transform;
}

/* ── 1등/꼴등 마커 칩 — 말에 붙는 작은 라벨(현재 리더/꼴찌만 표시). JS가 textContent + .show 토글. ──
   배지(번호) 위쪽에 떠서 누가 1등/꼴등인지 한눈에. 순위가 추월로 바뀌면 칩이 그 말로 옮겨간다.
   z-index 4: 지면(0)·러너(auto)·결승선(::after 1) 위, 우승글로우(5)·카운트다운(6) 아래. pointer 통과(입력 방해 0).
   runner 기준 절대배치(스프라이트 위 중앙, 번호 배지보다 더 위). 반투명/고대비로 잔디 위 가독. */
.ladder-adspot-place {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(2px);
    z-index: 4;
    margin-bottom: 1px;
    padding: 1px 6px;
    border-radius: 999px;
    font-family: 'Jua', 'Segoe UI', sans-serif;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.2px;
    white-space: nowrap;
    color: #6b4a00;                                /* 금빛 칩 위 어두운 글자(1등) */
    background: rgba(255, 215, 0, 0.92);           /* 1등 = 금빛 */
    border: 1.5px solid rgba(255, 255, 255, 0.95); /* 잔디 위 대비용 흰 테두리 */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease-out;
}
.ladder-adspot-place.show { opacity: 1; }
/* 꼴등 칩 — 회청색 톤으로 1등(금빛)과 구분. */
.ladder-adspot-place.is-last {
    color: #fff;
    background: rgba(100, 116, 139, 0.92);         /* slate(회청) */
}

/* (번호 배지 제거됨 — 사용자 요청. 구 .ladder-adspot-badge 규칙 삭제. 1등/꼴등 마커 .ladder-adspot-place만 유지.) */

/* 캔버스 결과영역: 캡션 아래 가로 배너(컨테이너 800px 안 width:100%). <ins> 없는 순수 house-ad CTA.
   finished/결과 상태에서만 JS가 display:block 토글(기본 display:none은 인라인 style). 절제된 높이. */
.ladder-adspot--canvas {
    max-width: var(--ladder-view-max);
    margin: 4px auto 10px;
    min-height: 150px;   /* 게임 종료 후 미니경마 paddock — 세로 크게(레인 6칸 가독). 두번째 사진 기준. */
}
.ladder-adspot--canvas .ladder-adspot-wait { min-height: 150px; }

/* 모바일 sticky 하단 앵커 — 가로 스트립. 데스크톱은 아래 규칙이 없어 절대 안 뜸(display:none 유지). */
.ladder-adspot--anchor {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    min-height: 56px;
    padding: 6px 44px 6px 10px;   /* 우측은 ✕ 버튼 자리 확보 */
    background: var(--bg-white);
    border-top: 1px solid rgba(var(--ladder-500-rgb), 0.24);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}
/* 앵커 안에서는 트랙을 한 줄(가로 스트립)로 — 라벨을 트랙 옆에 둬 높이 절약 */
.ladder-adspot--anchor .ladder-adspot-wait {
    flex-direction: row;
    gap: 10px;
    padding: 4px 8px;
    background: transparent;
    border: none;
}
.ladder-adspot--anchor .ladder-adspot-track {
    flex: 1;
    height: 24px;
}
.ladder-adspot--anchor .ladder-adspot-label {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* 앵커 ✕ 닫기 버튼 — 우상단 */
.ladder-adspot-dismiss {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--ladder-500-rgb), 0.24);
    border-radius: 8px;
    cursor: pointer;
    color: var(--ladder-accent);
    background: rgba(var(--ladder-500-rgb), 0.10);
}
.ladder-adspot-dismiss:hover { background: rgba(var(--ladder-500-rgb), 0.18); }

/* 모바일 전용: 게임 뷰 진입 시(is-active) + 닫지 않았을 때만(:not(.dismissed)) 표시.
   데스크톱은 이 media 밖에 display:flex 규칙이 없어 절대 안 뜬다. */
@media (max-width: 768px) {
    .ladder-adspot--anchor.is-active:not(.dismissed) {
        display: flex;
        align-items: center;
    }
    /* 앵커가 채팅 입력 등 하단 콘텐츠를 가리지 않게 body 하단 여백 확보(앵커 높이 + 여유) */
    body.has-adspot-anchor {
        padding-bottom: 72px;
    }
}