/* ==================================================================
   공통 컴포넌트 (.ns-* 시나리오 라이브러리 팝업)
   구 style.css 6217~6323줄
   ⚠️ 파일명 번호 = 로드 순서. 뒤 파일이 앞을 덮어쓰므로 순서를 바꾸면 화면이 깨진다.
   ================================================================== */
/* ===== 시나리오 라이브러리 팝업 — 디자인 시스템(--ns-) 정렬 ===== */
.ns-pop-overlay {
    position: fixed; inset: 0; z-index: 100010;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ns-pop-overlay.stacked { z-index: 100014; }
.ns-pop-card {
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(0, 240, 255, 0.06), transparent 60%),
        linear-gradient(160deg, var(--ns-bg-elevated, #1c2333), var(--ns-bg-card, #161b2e) 55%);
    border: 1px solid var(--ns-border-accent, rgba(0, 240, 255, 0.2));
    border-radius: var(--ns-radius-lg, 14px);
    box-shadow: var(--ns-shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.6)), 0 0 0 1px rgba(0, 240, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: var(--ns-text-primary, #e0e6ed);
    width: 96%; max-width: 460px; max-height: 88vh; overflow-y: auto; padding: 18px;
}
.ns-pop-card.narrow { max-width: 420px; }
.ns-pop-title {
    text-align: center; color: var(--ns-accent-cyan, #00f0ff); margin: 0 0 6px;
    font-size: 1.1rem; font-weight: bold; letter-spacing: 0.02em;
    text-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
}
.ns-pop-title.gold { color: var(--ns-accent-gold, #ffd700); text-shadow: 0 0 14px rgba(255, 215, 0, 0.35); }
.ns-pop-sub { color: var(--ns-text-secondary, #8b9bb4); font-size: 0.74rem; text-align: center; margin-bottom: 14px; line-height: 1.5; }
.ns-pop-item {
    background: linear-gradient(160deg, var(--ns-bg-elevated, #1c2333), rgba(22, 27, 46, 0.6));
    border: 1px solid var(--ns-border-default, rgba(255, 255, 255, 0.1));
    border-radius: var(--ns-radius-md, 10px); padding: 11px 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ns-pop-item:hover { border-color: var(--ns-border-accent, rgba(0, 240, 255, 0.2)); box-shadow: 0 0 16px rgba(0, 240, 255, 0.08); }
.ns-pop-label { color: var(--ns-text-secondary, #8b9bb4); font-size: 0.76rem; display: block; margin-bottom: 4px; }
.ns-input, .ns-textarea {
    width: 100%; box-sizing: border-box; padding: 9px;
    background: var(--ns-bg-input, rgba(0, 0, 0, 0.3));
    border: 1px solid var(--ns-border-default, rgba(255, 255, 255, 0.1));
    color: var(--ns-text-primary, #e0e6ed);
    border-radius: var(--ns-radius-sm, 6px);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ns-input:focus, .ns-textarea:focus {
    outline: none; border-color: var(--ns-accent-cyan, #00f0ff);
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.12);
}
.ns-textarea { resize: vertical; }
.ns-btn { border: none; border-radius: var(--ns-radius-sm, 6px); font-weight: bold; cursor: pointer; padding: 10px; font-size: 0.85rem; transition: transform 0.08s ease, box-shadow 0.15s ease, filter 0.15s ease; }
.ns-btn:hover { filter: brightness(1.08); }
.ns-btn:active { transform: translateY(1px); }
.ns-btn-primary { background: linear-gradient(135deg, var(--ns-accent-blue, #0066ff), var(--ns-accent-cyan, #00f0ff)); color: #001018; box-shadow: 0 2px 14px rgba(0, 240, 255, 0.28); }
.ns-btn-gold { background: linear-gradient(135deg, #b8860b, var(--ns-accent-gold, #ffd700)); color: #111; box-shadow: 0 2px 14px rgba(255, 215, 0, 0.25); }
.ns-btn-ghost { background: var(--ns-bg-elevated, #1c2333); border: 1px solid var(--ns-border-default, rgba(255, 255, 255, 0.1)); color: var(--ns-text-secondary, #8b9bb4); }
.ns-btn-danger { background: rgba(255, 51, 102, 0.12); border: 1px solid rgba(255, 51, 102, 0.4); color: #ff6b8a; }
.ns-btn-tab { flex: 1; padding: 9px; border-radius: var(--ns-radius-md, 10px); border: 1px solid var(--ns-border-default, rgba(255, 255, 255, 0.1)); background: var(--ns-bg-elevated, #1c2333); color: var(--ns-text-secondary, #8b9bb4); font-weight: bold; font-size: 0.85rem; cursor: pointer; transition: all 0.15s ease; }
.ns-btn-tab.active { border-color: var(--ns-accent-cyan, #00f0ff); background: rgba(0, 240, 255, 0.1); color: var(--ns-accent-cyan, #00f0ff); box-shadow: 0 0 16px rgba(0, 240, 255, 0.18), inset 0 0 12px rgba(0, 240, 255, 0.06); }
.ns-pop-blind-box { position: relative; border: 1px solid var(--ns-border-default, rgba(255,255,255,0.1)); border-radius: var(--ns-radius-md, 10px); padding: 12px; background: var(--ns-bg-primary, #0b0b15); overflow: hidden; }
.ns-pop-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(11, 11, 21, 0.55); border-radius: var(--ns-radius-md, 10px); }

/* 처음 화면으로 — 우측 상단. 송출(TV) 모드에서만 노출한다.
   운영자 모드에서 보이면 진행 중인 게임을 실수로 빠져나갈 수 있다. */
.tv-home-btn {
    position: fixed;
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: calc(14px + env(safe-area-inset-right, 0px));
    z-index: 2600;
    display: none;
    align-items: center;
    padding: 8px 13px;
    background: rgba(0, 243, 255, 0.06);
    border: 1px solid rgba(0, 243, 255, 0.3);
    border-radius: 2px;
    color: rgba(0, 243, 255, 0.8);
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
body.tv-mode .tv-home-btn { display: flex; }
.tv-home-btn:hover { background: rgba(0, 243, 255, 0.12); border-color: #00f3ff; color: #00f3ff; }

/* 테마 필터 드롭다운 — 옵션 목록은 OS 기본색을 타서 흰 배경에 흰 글씨가 되는 경우가 있다 */
#scen-theme option { background: var(--ns-bg-elevated, #1c2333); color: var(--ns-text-primary, #e0e6ed); }

/* 시나리오 상세 — 연도별 사건 / 종목별 흐름.
   <table>은 좁은 폭에서 열이 무너지거나 컨테이너를 넘어 잘렸다
   (.ns-pop-blind-box의 overflow:hidden에 걸려 통째로 안 보임).
   → flex + flex-wrap 으로 교체. 폭이 모자라면 잘리는 대신 아랫줄로 접힌다. */
.scen-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.scen-row {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px;
    padding: 6px 9px; font-size: 0.8rem;
    border: 1px solid var(--ns-border-default, rgba(255, 255, 255, 0.1));
    border-radius: var(--ns-radius-sm, 6px);
    background: rgba(255, 255, 255, 0.02);
}
.scen-row.clickable { cursor: pointer; }
.scen-row.clickable:hover { border-color: var(--ns-accent-cyan, #00f0ff); }
.scen-row .sc-y { flex: 0 0 auto; color: var(--ns-text-tertiary, #8b9bb4); font-size: 0.72rem; white-space: nowrap; }
.scen-row .sc-k { flex: 1 1 auto; min-width: 0; text-align: right; font-weight: bold; color: var(--ns-accent-gold, #ffd700); word-break: keep-all; overflow-wrap: anywhere; }
.scen-row .sc-n { flex: 1 1 auto; min-width: 0; color: var(--ns-text-primary, #e0e6ed); word-break: keep-all; overflow-wrap: anywhere; }
.scen-row .sc-p { flex: 1 1 auto; min-width: 0; text-align: right; color: var(--ns-accent-cyan, #00f0ff); font-family: monospace; font-size: 0.76rem; letter-spacing: 0.08em; word-break: break-all; }
.scen-row .none { color: var(--ns-text-tertiary, #8b9bb4); font-weight: normal; font-family: inherit; font-size: 0.72rem; letter-spacing: 0; opacity: 0.75; }
@media (max-width: 420px) {
    .scen-row { font-size: 0.75rem; padding: 5px 7px; }
    .scen-row .sc-p { font-size: 0.7rem; letter-spacing: 0.02em; }
}