/* mlb.css — 전부 .nm- 로 네임스페이스. 그누보드 테마 CSS와 충돌하지 않는다. */

.nm-container {
    --navy: #0c2d6b;
    --navy-deep: #061a3f;
    --accent: #c8102e;
    --bg: #fff;
    --bg-soft: #f5f7fb;
    --line: #e2e8f0;
    --line-strong: #cbd5e1;
    --text: #0f172a;
    --text-soft: #64748b;
    --text-mute: #94a3b8;
    --win: #16a34a;
    --loss: #dc2626;

    max-width: 1200px;
    margin: 0 auto;
    padding: 0 12px;
    font-family: 'Pretendard', -apple-system, 'Segoe UI', 'Malgun Gothic', sans-serif;
    color: var(--text);
    line-height: 1.5;
    box-sizing: border-box;
}
.nm-container *,
.nm-container *::before,
.nm-container *::after { box-sizing: border-box; }

/* ===== 헤더 ===== */
.nm-header {
    border-bottom: 3px solid var(--navy);
    padding-bottom: 14px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.nm-header-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.nm-header h1 { margin: 0; font-size: 20px; color: var(--navy); }
.nm-date { font-size: 13px; color: var(--text-soft); }
.nm-today-tag {
    display: inline-block; background: var(--accent); color: #fff;
    font-size: 10px; font-weight: 700; padding: 2px 6px;
    border-radius: 8px; margin-left: 4px; vertical-align: middle;
}
.nm-date-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nm-btn {
    display: inline-block; padding: 6px 14px; font-size: 12px; font-weight: 700;
    color: var(--navy); background: #fff; border: 1px solid var(--navy);
    border-radius: 4px; text-decoration: none; cursor: pointer; transition: all .12s;
}
.nm-btn:hover { background: var(--navy); color: #fff; }
.nm-btn.is-current { background: var(--navy); color: #fff; }
.nm-btn.is-disabled {
    color: var(--line-strong); background: #f1f5f9;
    border-color: var(--line); cursor: not-allowed; pointer-events: none;
}

.nm-empty {
    padding: 60px 20px; text-align: center;
    color: var(--text-mute); background: var(--bg-soft);
    border: 1px solid var(--line); border-radius: 8px;
}

/* ===== 카드 ===== */
.nm-card {
    border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px;
    background: #fff; overflow: hidden; transition: box-shadow .15s, border-color .15s;
}
.nm-card:hover { border-color: var(--line-strong); box-shadow: 0 2px 8px rgba(12,45,107,.08); }
.nm-card[open] { border-color: var(--navy); box-shadow: 0 4px 14px rgba(12,45,107,.12); }

.nm-summary {
    list-style: none; cursor: pointer; padding: 14px 18px;
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 16px; user-select: none;
}
.nm-summary::-webkit-details-marker { display: none; }
.nm-summary::marker { content: ''; }

.nm-team { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nm-team.away { justify-content: flex-end; flex-direction: row-reverse; }
.nm-team.home { justify-content: flex-start; }
.nm-logo { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.nm-team-info { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.nm-team-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nm-team-rec { font-size: 11px; color: var(--text-soft); font-weight: 600; }

.nm-center { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 200px; }
.nm-vs { font-size: 12px; font-weight: 800; color: var(--navy); letter-spacing: 1px; display: flex; align-items: center; gap: 6px; }
.nm-side { font-size: 10px; color: var(--text-soft); font-weight: 600; letter-spacing: 0; }
.nm-vs-text { color: var(--navy); font-weight: 800; }
.nm-score { font-size: 18px; font-weight: 800; color: var(--text); min-width: 22px; text-align: center; }
.nm-score.lead { color: var(--accent); }
.nm-time { font-size: 13px; font-weight: 600; }
.nm-venue { font-size: 11px; color: var(--text-soft); }

.nm-state { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; margin-top: 2px; letter-spacing: .3px; }
.nm-state.is-pre { background: var(--line); color: var(--text-soft); }
.nm-state.is-live { background: var(--accent); color: #fff; animation: nm-pulse 1.6s infinite; }
.nm-state.is-final { background: var(--navy-deep); color: #fff; }
@keyframes nm-pulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }

/* ===== 선발 미리보기 ===== */
.nm-preview {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 18px; background: var(--bg-soft);
    border-top: 1px solid var(--line);
}
.nm-preview-side { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.nm-preview-side.away { justify-content: flex-start; }
.nm-preview-side.home { justify-content: flex-end; }
.nm-thumb { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #fff; border: 1px solid var(--line); }
.nm-preview-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.nm-preview-label { font-size: 10px; color: var(--text-mute); font-weight: 700; letter-spacing: .5px; white-space: nowrap; }
.nm-tbd { font-size: 12px; color: var(--text-mute); }

.nm-scroll-hint { display: none; }

/* ===== 상세 =====
   구조:  .nm-detail
            └ .nm-h2h        (스크롤 밖 — 항상 뷰포트 폭)
            └ .nm-scroll     (모바일에서만 가로 스크롤)
                 └ .nm-panels  (좌/우 두 패널)                     */
.nm-detail { border-top: 1px solid var(--line); padding: 16px; }
.nm-h2h    { margin-bottom: 16px; }
.nm-scroll { min-width: 0; }
.nm-panels {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}

.nm-loading { padding: 40px; text-align: center; color: var(--text-mute); font-size: 13px; }
.nm-spinner {
    width: 26px; height: 26px; margin: 0 auto 10px;
    border: 3px solid var(--line); border-top-color: var(--navy);
    border-radius: 50%; animation: nm-spin .8s linear infinite;
}
@keyframes nm-spin { to { transform: rotate(360deg) } }
.nm-error { padding: 30px; text-align: center; color: var(--loss); font-size: 13px; }

/* ===== 패널 / 섹션 ===== */
.nm-panel { min-width: 0; }
.nm-section { margin-bottom: 18px; }
.nm-section-title {
    font-size: 13px; font-weight: 700; color: var(--navy);
    padding-bottom: 6px; margin-bottom: 8px; border-bottom: 2px solid var(--navy);
}
.nm-section-sub { font-weight: 400; font-size: 11px; color: var(--text-mute); margin-left: 6px; }

.nm-pitcher-head { text-align: center; padding: 12px 0 16px; }
.nm-pitcher-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); background: #fff; }
.nm-pitcher-icon { font-size: 40px; line-height: 72px; }
.nm-pitcher-name { font-size: 15px; font-weight: 700; margin-top: 6px; }
.nm-pitcher-name.is-tbd { color: var(--text-mute); }
.nm-pitcher-sub { font-size: 11px; color: var(--text-soft); }

/* ===== 탭 ===== */
.nm-tab-bar { display: flex; gap: 4px; margin-bottom: 6px; }
.nm-tab-btn {
    flex: 1; padding: 5px 0; font-size: 11px; font-weight: 700;
    color: var(--text-soft); background: var(--bg-soft);
    border: 1px solid var(--line); border-radius: 4px;
    cursor: pointer; font-family: inherit; transition: all .1s;
}
.nm-tab-btn:hover { border-color: var(--line-strong); }
.nm-tab-btn.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ===== 표 ===== */
.nm-table { width: 100%; border-collapse: collapse; font-size: 11.5px; table-layout: fixed; }
.nm-table th {
    background: var(--bg-soft); color: var(--text-soft);
    font-weight: 700; padding: 6px 3px; text-align: center;
    border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
.nm-table td {
    padding: 6px 3px; text-align: center;
    border-bottom: 1px solid var(--line);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nm-row-cur { background: rgba(12,45,107,.04); font-weight: 600; }
.nm-row-empty td { color: var(--text-mute); }
.nm-empty-cell { color: var(--text-mute); font-size: 11px; }
/* 날짜는 잘리면 안 된다.
   ★ `.nm-table td` 는 특이도 (0,1,1) 이고 `.nm-date-yy` 는 (0,1,0) 이라
     클래스만으로는 td 의 text-overflow:ellipsis 를 못 이긴다.
     `td.nm-date-yy` (0,2,1) 로 올려야 한다. */
.nm-table td.nm-date-yy,
.nm-table th:first-child {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    letter-spacing: -0.2px;
}
.nm-team-score { font-variant-numeric: tabular-nums; }

.nm-res-w { color: var(--win); font-weight: 700; }
.nm-res-l { color: var(--loss); font-weight: 700; }
.nm-res-nd { color: var(--text-mute); }
.nm-ha-home { color: var(--navy); font-weight: 700; }
.nm-ha-away { color: var(--text-soft); }
.nm-avg { color: var(--text-mute); font-size: 10.5px; }
.nm-diff-plus { color: var(--win); font-weight: 700; }
.nm-diff-minus { color: var(--loss); font-weight: 700; }

/* ===== H2H 맞대결 전적 =====
   기존 /stat 페이지의 배치를 그대로 따른다.
     - 스코어보드(흰 박스)가 위, 승률바 + 표가 아래  (항상 세로)
     - 원정 = 빨강(accent), 홈 = 남색(navy)
     - 제목 왼쪽에 남색 세로바                                      */
.nm-h2h {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.nm-h2h-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px; gap: 8px;
}
.nm-h2h-title {
    font-size: 13px; font-weight: 700; color: var(--navy);
    border-left: 3px solid var(--navy); padding-left: 8px;
}
.nm-h2h-meta  { font-size: 10.5px; color: var(--text-mute); white-space: nowrap; }
.nm-h2h-empty {
    text-align: center; color: var(--text-mute);
    font-style: italic; padding: 16px 0; font-size: 12px;
}

/* 스코어보드 위 / 바+표 아래 — 항상 세로 */
.nm-h2h-body  { display: flex; flex-direction: column; gap: 12px; }

.nm-h2h-board {
    display: flex; flex-direction: row;
    align-items: center; justify-content: center; gap: 16px;
    width: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 14px 16px;
    flex-shrink: 0;
}
.nm-h2h-block      { display: flex; align-items: center; gap: 8px; justify-content: center; }
.nm-h2h-team       { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }
.nm-h2h-wins       { font-size: 32px; font-weight: 900; line-height: 1; }
.nm-h2h-wins.is-away { color: var(--accent); }
.nm-h2h-wins.is-home { color: var(--navy);   }
.nm-h2h-wins-label { font-size: 13px; color: var(--text-soft); font-weight: 600; }
.nm-h2h-div {
    font-size: 12px; font-weight: 700; color: var(--text-mute);
    padding: 0 8px; letter-spacing: 1px;
}

.nm-h2h-right    { flex: 1; min-width: 0; }
.nm-h2h-bar-wrap { margin-bottom: 8px; }
.nm-h2h-bar-labels {
    display: flex; justify-content: space-between;
    font-size: 10px; color: var(--text-mute); margin-bottom: 3px;
}
.nm-h2h-bar {
    display: flex; height: 18px; border-radius: 4px;
    overflow: hidden; background: var(--line);
}
.nm-h2h-bar-a, .nm-h2h-bar-h {
    display: flex; align-items: center; justify-content: center;
    transition: width .4s ease;
}
.nm-h2h-bar-a { background: var(--accent); }   /* 원정 */
.nm-h2h-bar-h { background: var(--navy);   }   /* 홈   */
.nm-h2h-pct   { font-size: 10px; font-weight: 700; color: #fff; }

.nm-h2h-table    { margin-top: 0; }
.nm-h2h-winner   { font-weight: 700; color: var(--navy); }
.nm-h2h-score    { font-size: 12px; white-space: nowrap; }
.nm-h2h-sep      { margin: 0 3px; color: var(--text-mute); }
.nm-h2h-badge {
    display: inline-block; font-size: 10px; font-weight: 700;
    padding: 1px 6px; border-radius: 3px; white-space: nowrap; color: #fff;
}
.nm-h2h-badge.is-away { background: var(--accent); }   /* 원정 승 */
.nm-h2h-badge.is-home { background: var(--navy);   }   /* 홈 승   */
.nm-year-badge {
    display: inline-block; font-size: 9px; font-weight: 700;
    padding: 0 4px; border-radius: 3px;
    background: var(--bg-soft); color: var(--text-mute);
    border: 1px solid var(--line);
    margin-left: 2px; vertical-align: middle;
}

/* ===== 모바일 ===== */
@media (max-width: 780px) {
    .nm-container { padding: 0 8px; }
    .nm-summary { padding: 12px 10px; gap: 8px; }
    .nm-logo { width: 34px; height: 34px; }
    .nm-team-name { font-size: 13px; }
    .nm-center { min-width: 0; }
    .nm-time { font-size: 11px; }
    .nm-venue { display: none; }

    .nm-preview { padding: 8px 10px; }
    .nm-preview-name { max-width: 84px; font-size: 11px; }

    .nm-scroll-hint {
        display: block; font-size: 10px; color: var(--text-mute);
        text-align: center; padding: 7px 0 3px; letter-spacing: .3px;
        border-top: 1px solid var(--line);
    }

    /* 두 패널만 가로 스크롤. H2H 는 스크롤 밖이라 영향받지 않는다.
       ★ grid + 1fr + width:max-content 를 쓰면 안 된다.
         max-content 컨테이너 안에서 fr 은 "내용의 최대 폭"까지 부풀어오르고,
         표 셀이 nowrap 이라 트랙이 수천 px 로 커진다. 결과적으로 표 내용이
         화면 밖으로 밀려 빈 줄처럼 보인다.
         → flex + 뷰포트 기준 고정 폭(88vw)으로 못박는다. */
    .nm-detail { padding: 12px; }
    .nm-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
    }
    .nm-panels {
        display: flex;
        gap: 12px;
        width: max-content;
        align-items: flex-start;
    }
    .nm-panel {
        flex: 0 0 88vw;
        max-width: 88vw;
        min-width: 0;
        scroll-snap-align: start;
    }
    /* 88vw(≈330px) 안에 10열. colgroup 이 비율을 잡고, 텍스트 열만 말줄임. */
    .nm-table { font-size: 10.5px; }
    .nm-table th, .nm-table td { padding: 5px 1px; }
    .nm-date-yy { font-size: 10px; }
    .nm-h2h       { padding: 10px 12px; }
    .nm-h2h-head  { flex-direction: column; align-items: flex-start; gap: 2px; }
    .nm-h2h-board { padding: 10px 8px; gap: 8px; }
    .nm-h2h-wins  { font-size: 24px; }
    .nm-h2h-team  { font-size: 11px; }
    .nm-h2h-div   { padding: 0 2px; }
    .nm-h2h-table { font-size: 10px; }
}

@media (max-width: 380px) {
    .nm-logo { width: 28px; height: 28px; }
    .nm-team-name { font-size: 11.5px; }
    .nm-preview-name { max-width: 64px; }
}