/* =============================================
   team_detail.css — 팀 상세 페이지 (탭형 · 스포티)
   토큰: tokens.css 사용. 다크모드 [data-theme=dark] 자동 대응.
   클래스 접두사: td-
   ============================================= */

.page-team-detail { background: var(--color-background-tertiary); }

.td-page {
    max-width: 1440px;    /* 사이트 헤더(.header-inner)와 같은 폭 — 좌우 끝을 헤더에 맞춤 */
    margin: 0 auto;
    padding: 0 34px 64px;
}

/* ─────────── 히어로 ─────────── */
.td-hero {
    position: relative;
    margin: 16px 0 0;
    border-radius: 0;
    overflow: hidden;
    color: var(--color-white);
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: var(--shadow-md);
}
.td-hero-bg {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #04231a 0%, var(--cl-primary) 60%, #064634 100%);
    background-size: cover;
    background-position: center;
}
.td-hero-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.78) 100%);
}

.td-back {
    position: relative; z-index: 2;
    align-self: flex-start;
    margin: 16px 0 0 18px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    font-size: .85rem; font-weight: 600;
    color: var(--color-white);
    background: rgba(0,0,0,.28);
    border-radius: 0;
    text-decoration: none;
    backdrop-filter: blur(4px);
    transition: background .15s;
}
.td-back:hover { background: rgba(0,0,0,.45); }

.td-hero-body {
    position: relative; z-index: 2;
    display: flex;
    align-items: flex-end;
    gap: 20px;
    padding: 24px;
    flex-wrap: wrap;
}

.td-emblem {
    width: 104px; height: 104px;
    flex-shrink: 0;
    border-radius: 50%;                    /* 팀 로고 아바타 — 원형 유지 */
    background: var(--color-white);
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    display: grid; place-items: center;
    overflow: hidden;
}
.td-emblem img { width: 100%; height: 100%; object-fit: cover; }
.td-emblem i { font-size: 3rem; color: var(--color-primary); }

.td-hero-text { flex: 1 1 320px; min-width: 0; }
.td-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.td-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    font-size: .78rem; font-weight: 600;
    color: var(--color-white);
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 0;
}
.td-chip-vis { background: rgba(4,35,26,.55); border-color: rgba(255,255,255,.35); }

.td-name {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.td-short { margin: 4px 0 0; font-size: 1rem; opacity: .9; font-weight: 500; }

.td-stats { display: flex; gap: 18px; margin-top: 12px; }
.td-stat { font-size: .9rem; opacity: .92; }
.td-stat strong { font-size: 1.05rem; font-weight: 800; }

/* 구단주·감독 표시 */
.td-leaders { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.td-leader {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px;
    font-size: .85rem;
    color: var(--color-white);
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 0;
}
.td-leader i { opacity: .85; }
.td-leader strong { font-weight: 800; }

.td-hero-action {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
}

/* ─────────── 버튼 ─────────── */
.td-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 22px;
    font-size: .95rem; font-weight: 700;
    border: none; border-radius: 0;
    cursor: pointer;
    transition: transform .12s, filter .15s, background .15s;
    text-decoration: none;
}
.td-btn:active { transform: translateY(1px); }
.td-btn-join {
    background: var(--color-primary); color: var(--color-white);
    box-shadow: 0 4px 14px rgba(4,70,52,.45);
}
.td-btn-join:hover { background: var(--color-primary-hover); }
.td-btn-review {
    background: var(--color-accent); color: var(--color-white);
    box-shadow: 0 4px 14px rgba(37,99,235,.4);
}
.td-btn-review:hover { background: var(--color-accent-hover); }
.td-btn-settings {
    background: rgba(255,255,255,.16); color: var(--color-white);
    border: 1px solid rgba(255,255,255,.4);
}
.td-btn-settings:hover { background: rgba(255,255,255,.28); }
.td-num {
    display: inline-grid; place-items: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    font-size: .72rem; font-weight: 800;
    background: rgba(255,255,255,.32); border-radius: 0;
}
.td-btn-pending {
    background: rgba(255,255,255,.85); color: var(--color-neutral-800);
    cursor: default;
}
.td-pending-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px;
    font-size: .9rem; font-weight: 700;
    color: var(--color-white);
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 0;
}
.td-btn-cancel {
    background: rgba(255,255,255,.16); color: var(--color-white);
    border: 1px solid rgba(255,255,255,.4);
}
.td-btn-cancel:hover { background: rgba(239,68,68,.85); border-color: transparent; }
.td-btn-leave {
    background: rgba(255,255,255,.16); color: var(--color-white);
    border: 1px solid rgba(255,255,255,.4);
}
.td-btn-leave:hover { background: rgba(239,68,68,.85); border-color: transparent; }

.td-owner-badge, .td-member-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px;
    font-size: .9rem; font-weight: 700;
    border-radius: 0;
}
.td-owner-badge { background: #f5b301; color: #3a2c00; box-shadow: 0 4px 12px rgba(245,179,1,.4); }
.td-member-badge { background: rgba(255,255,255,.2); color: var(--color-white); border: 1px solid rgba(255,255,255,.35); }

/* ─────────── 팀 전용 내비 (서버 서브내비 대체) ─────────── */
.tnav {
    position: sticky;
    top: var(--site-header-height);
    z-index: 30;
    background: var(--color-background-primary);
    border-bottom: 1px solid var(--color-border-tertiary);
    box-shadow: var(--shadow-sm);
}
.tnav-inner {
    max-width: 1440px;    /* 사이트 헤더(.header-inner)와 같은 폭 — 좌우 끝을 헤더에 맞춤 */
    margin: 0 auto;
    padding: 0 34px;
    height: var(--subnav-height);
    display: flex;
    align-items: center;
    gap: 16px;
}

/* 팀 브랜드(엠블럼+이름) — 이곳이 팀 공간임을 표시 */
.tnav-brand {
    display: inline-flex; align-items: center; gap: 9px;
    flex-shrink: 0;
    text-decoration: none;
    max-width: 230px;
}
.tnav-emblem {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 50%; overflow: hidden;  /* 팀 로고 아바타 — 원형 유지 */
    background: var(--color-primary);
    display: grid; place-items: center;
}
.tnav-emblem img { width: 100%; height: 100%; object-fit: cover; }
.tnav-emblem i { font-size: 1.1rem; color: var(--color-white); }
.tnav-team {
    font-size: 1rem; font-weight: 800;
    color: var(--color-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 팀 메뉴 */
.tnav-menu {
    display: flex; align-items: center; gap: 2px;
    flex: 1; min-width: 0;
    overflow-x: auto;
    height: 100%;
    scrollbar-width: none;
}
.tnav-menu::-webkit-scrollbar { display: none; }
.tnav-item {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 6px;
    height: 100%;
    padding: 0 14px;
    font-size: .92rem; font-weight: 700;
    color: var(--color-text-secondary);
    background: transparent; border: none;
    cursor: pointer; white-space: nowrap; text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color .15s, border-color .15s;
}
.tnav-item:hover { color: var(--color-text-primary); }
.tnav-item.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.tnav-item-manage.is-active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.tnav-badge {
    display: inline-grid; place-items: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    font-size: .72rem; font-weight: 800;
    color: var(--color-white); background: var(--color-danger);
    border-radius: 0;
}

/* 가입신청 버튼 (탭 아님 — 메뉴바 우측 CTA) */
.tnav-cta {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    font-size: .85rem; font-weight: 800;
    color: var(--color-white);
    background: var(--color-accent);
    border: none; border-radius: 0;
    cursor: pointer; white-space: nowrap;
    transition: background .15s;
}
.tnav-cta:hover { background: var(--color-accent-hover); }
.tnav-cta .tnav-badge { background: rgba(255,255,255,.35); }

/* 서버(팀 목록)로 나가기 */
.tnav-exit {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    font-size: .85rem; font-weight: 700;
    color: var(--color-text-secondary);
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 0;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.tnav-exit:hover { color: var(--color-text-primary); background: var(--color-neutral-200); }

/* ─────────── 패널 ─────────── */
.td-panels { margin-top: 24px; }
.td-panel { display: none; animation: tdfade .2s ease; }
.td-panel.is-active { display: block; }
@keyframes tdfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.td-panel-head { margin-bottom: 16px; }
.td-panel-head h2 { margin: 0; font-size: 1.3rem; font-weight: 800; color: var(--color-text-primary); }
.td-count {
    display: inline-grid; place-items: center;
    min-width: 26px; height: 24px; padding: 0 8px; margin-left: 4px;
    font-size: .85rem; font-weight: 800;
    color: var(--color-primary);
    background: var(--color-background-success);
    border-radius: 0; vertical-align: middle;
}
.td-muted { margin: 6px 0 0; color: var(--color-text-secondary); font-size: .9rem; }

/* ─────────── 카드 공통 ─────────── */
.td-card {
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 0;
    padding: 22px;
    box-shadow: var(--shadow-sm);
}
.td-card-title { margin: 0 0 14px; font-size: 1.05rem; font-weight: 800; color: var(--color-text-primary); }

/* ─────────── 선수단 보기 전환 ─────────── */
.td-roster-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.td-roster-note { margin: -6px 0 16px; }
.td-view-toggle {
    display: inline-flex; gap: 2px;
    padding: 3px;
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 0;
}
.td-view-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px;
    font-size: .85rem; font-weight: 700;
    color: var(--color-text-secondary);
    background: none; border: none; border-radius: 0;
    cursor: pointer; white-space: nowrap;
}
.td-view-btn.is-active { color: var(--color-white); background: var(--color-primary); }

/* ─────────── 배번표 (배번 + 선수명) ─────────── */
.td-jboard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}
.td-jcell {
    display: flex; flex-direction: column; align-items: center;
    gap: 3px;
    padding: 10px 6px;
    border: 1px solid var(--color-border-tertiary);
    border-radius: 0;
    text-align: center;
    min-height: 64px;
    justify-content: center;
}
.td-jcell-no { font-size: 1.3rem; font-weight: 800; line-height: 1; }
.td-jcell-name {
    font-size: .8rem; font-weight: 700;
    word-break: break-all; line-height: 1.2;
}
.td-jcell.is-filled {
    background: var(--color-background-success);
    border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.td-jcell.is-filled .td-jcell-no { color: var(--color-primary); }
.td-jcell.is-filled .td-jcell-name { color: var(--color-text-primary); }
.td-jcell.is-empty { background: var(--color-background-primary); }
.td-jcell.is-empty .td-jcell-no { color: var(--color-text-secondary); opacity: .55; }

/* ─────────── 선수단 (포지션 그룹) ─────────── */
.td-pos-group { margin-bottom: 22px; }
.td-pos-group-title {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 12px;
    font-size: 1.05rem; font-weight: 800;
    color: var(--color-text-primary);
    padding-left: 10px;
    border-left: 4px solid var(--color-primary);
}
.td-roster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}
/* 포지션 분류 셀렉트 */
.td-player-pos {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--color-border-tertiary);
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.td-jersey-input {
    width: 52px; flex: 0 0 auto;
    padding: 6px 8px;
    font-size: .85rem; font-weight: 700; text-align: center;
    color: var(--color-text-primary);
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 0;
}
.td-jersey-input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--ring-accent); }
.td-pos-select {
    flex: 1;
    padding: 6px 10px;
    font-size: .85rem; font-weight: 600;
    color: var(--color-text-primary);
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 0;
    cursor: pointer;
}
.td-pos-select:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--ring-accent); }
.td-player-pos .td-save-status { flex-basis: 100%; min-width: 0; font-size: .74rem; line-height: 1.3; }
.td-player {
    position: relative;
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-tertiary);
    border-top: 4px solid var(--color-neutral-300);
    border-radius: 0;
    padding: 16px;
    box-shadow: var(--shadow-sm);
    transition: transform .14s, box-shadow .14s;
}
.td-player:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.td-player-owner { border-top-color: #f5b301; }
.td-player-admin { border-top-color: var(--color-accent); }
.td-player-staff { border-top-color: var(--color-text-info); }
.td-player-member { border-top-color: var(--color-primary); }

.td-player-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* 배번 배지 */
.td-jersey-badge {
    font-size: 1.5rem; font-weight: 800;
    color: var(--color-primary);
    line-height: 1; letter-spacing: -.02em;
}
.td-jersey-hash { font-size: .9rem; font-weight: 700; opacity: .6; margin-right: 1px; }
.td-player-avatar {
    width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
    background: var(--color-avatar-bg); flex-shrink: 0;
    display: block;
}
.td-player-avatar img { width: 100%; height: 100%; object-fit: cover; }

.td-role {
    font-size: .72rem; font-weight: 800;
    padding: 3px 9px; border-radius: 0;
    color: var(--color-white);
}
.td-role-owner  { background: #f5b301; color: #3a2c00; }
.td-role-admin  { background: var(--color-accent); }
.td-role-staff  { background: var(--color-text-info); }
.td-role-member { background: var(--color-primary); }

.td-player-name {
    margin: 12px 0 0;
    font-size: 1.15rem; font-weight: 800;
    color: var(--color-text-primary);
}
.td-player-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; min-height: 22px; }
.td-pos {
    font-size: .74rem; font-weight: 800;
    padding: 2px 8px; border-radius: 0;
    color: var(--color-primary);
    background: var(--color-background-success);
    border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.td-level {
    font-size: .74rem; font-weight: 600;
    padding: 2px 8px; border-radius: 0;
    color: var(--color-text-secondary);
    background: var(--color-background-secondary);
}
.td-level-none {
    background: transparent;
    border: 1px solid var(--color-border-tertiary);
}
/* 보직 칩 (로스터) — 구단주·감독 등 보직 표시. 바탕 노란색. */
.td-duty {
    font-size: .74rem; font-weight: 800;
    padding: 2px 8px; border-radius: 0;
    color: #3a2c00;
    background: #f5b301;
}
/* 매니저/휴면 라벨 (선수명 옆) */
.td-duty-manager { background: var(--color-text-info); color: var(--color-white); margin-left: 6px; }
.td-duty-dormant  { background: var(--color-neutral-300); color: var(--color-text-secondary); margin-left: 6px; }
.td-pos-group-dormant .td-pos-group-title { border-left-color: var(--color-neutral-300); opacity: .85; }
.td-player-dormant { opacity: .7; }
/* 선수/매니저 분류 + 휴면 토글 */
.td-player-extra {
    margin-top: 8px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.td-type-select {
    flex: 1;
    padding: 6px 10px;
    font-size: .82rem; font-weight: 600;
    color: var(--color-text-primary);
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 0;
    cursor: pointer;
}
.td-btn-dormant {
    font-size: .76rem; font-weight: 700;
    padding: 5px 10px;
    color: var(--color-text-secondary);
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
}
.td-btn-dormant:hover { background: var(--color-neutral-200); }

/* ─────────── 소개 ─────────── */
.td-about-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 16px;
    align-items: start;
}
/* 세로로 쌓는 카드 묶음 — 설정 페이지에서 폭이 좁은 섹션들을 순서대로 나열할 때 */
.td-card-stack { display: flex; flex-direction: column; gap: 16px; }
.td-desc { margin: 0; line-height: 1.7; color: var(--color-text-primary); white-space: pre-wrap; }
.td-meta { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.td-meta > div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border-tertiary); }
.td-meta > div:last-child { border-bottom: none; padding-bottom: 0; }
.td-meta dt { color: var(--color-text-secondary); font-size: .9rem; }
.td-meta dd { margin: 0; font-weight: 700; color: var(--color-text-primary); font-size: .92rem; text-align: right; }
.td-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }

/* 팀 정보 카드 내 가입/탈퇴/철회 액션 */
.td-info-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid var(--color-border-tertiary);
}
.td-info-actions .td-btn-join { box-shadow: none; }
.td-info-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .9rem; font-weight: 700;
    color: var(--color-text-secondary);
}
.td-info-owner { color: #b8860b; }
.td-info-owner i { color: #f5b301; }
.td-btn-out {
    margin-left: auto;
    background: var(--color-neutral-100);
    color: var(--color-neutral-800);
    border: 1px solid var(--color-neutral-200);
}
.td-btn-out:hover { background: var(--color-background-danger); color: var(--color-text-danger); border-color: transparent; }

/* ─────────── 일정·결과 ─────────── */
.td-sched-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.td-game-list { display: flex; flex-direction: column; gap: 10px; }
.td-game {
    display: flex; flex-direction: column; gap: 10px;
    padding: 12px 16px;
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-tertiary);
    border-left: 4px solid var(--color-primary);
    border-radius: 0;
    box-shadow: var(--shadow-sm);
}
/* .td-game(flex)와 .td-game.td-gr(grid)가 각각 display를 직접 지정해 hidden 속성의
   기본 UA 스타일을 덮어쓴다 — 시즌/상태 필터(filterGames())가 g.hidden으로 카드를
   감추려면 두 규칙보다 우선하도록 명시해야 한다 */
.td-game[hidden] { display: none !important; }
.td-game-badge { font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 0; color: var(--color-white); }
.td-game-practice { background: var(--color-primary); }
.td-game-scrimmage { background: var(--color-accent); }
.td-game-memo { font-size: .82rem; color: var(--color-text-secondary); display: inline-flex; align-items: center; gap: 3px; }
.td-icon-edit {
    background: none; border: none; cursor: pointer;
    color: var(--color-text-secondary); padding: 5px; border-radius: 0;
    display: inline-grid; place-items: center;
}
.td-icon-edit:hover { color: var(--color-accent); background: var(--color-background-info); }

/* 경기 카드 상단 줄 — 종류 배지 + 상태 배지 + 메모 + 액션 아이콘 */
.td-gc-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.td-gc-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.td-gc-status {
    font-size: .74rem; font-weight: 800; padding: 3px 10px; border-radius: 0;
    background: var(--color-background-secondary); color: var(--color-text-secondary);
}
.td-gc-st-sch   { background: var(--color-background-secondary); color: var(--color-text-secondary); }
.td-gc-st-live  { background: #fde8e8; color: #d92d20; animation: td-live-pulse 1.6s ease-in-out infinite; }
.td-gc-st-susp  { background: #fff4e0; color: #b45309; }
.td-gc-st-done  { background: #e7f3ea; color: #1f7a3f; }
.td-gc-st-cancel{ background: #f1f2f4; color: #6b7280; }
.td-gc-st-win   { background: #e7f3ea; color: #1f7a3f; }
.td-gc-st-loss  { background: #fde8e8; color: #d92d20; }
@keyframes td-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* 경기 카드 — 원정 로고 · VS(일시/장소) · 홈 로고 */
.td-gc-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.td-gc-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.td-gc-team.home { justify-content: flex-end; text-align: right; }
.td-gc-logo {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;  /* 팀 로고 아바타 — 원형 유지 */
    display: inline-grid; place-items: center; background: var(--color-background-secondary);
    font-size: 1.2rem; color: var(--color-text-tertiary);
}
.td-gc-logo img { width: 100%; height: 100%; object-fit: cover; }
.td-gc-name { font-weight: 800; font-size: .96rem; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-gc-tag {
    flex: 0 0 auto; font-size: .68rem; font-weight: 700; color: var(--color-text-tertiary);
    border: 1px solid var(--color-border-tertiary); border-radius: 0; padding: 1px 7px;
}
.td-gc-mid { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 140px; }
.td-gc-vs { font-weight: 800; font-size: .95rem; color: var(--color-text-tertiary); letter-spacing: .04em; }
.td-gc-score { font-weight: 800; font-size: 1.3rem; color: var(--color-primary); letter-spacing: .02em; }
.td-gc-score em { font-style: normal; margin: 0 6px; color: var(--color-text-tertiary); }
.td-gc-info { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; }
.td-gc-date, .td-gc-time, .td-gc-loc {
    font-size: .78rem; color: var(--color-text-secondary); display: inline-flex; align-items: center; gap: 3px;
}
.td-icon-edit {
    background: none; border: none; cursor: pointer;
    color: var(--color-text-secondary); padding: 5px; border-radius: 0;
    display: inline-grid; place-items: center;
}
.td-icon-edit:hover { color: var(--color-accent); background: var(--color-background-info); }
/* 경기 → 기록/중계 진입 */
.td-game-live, .td-game-rec, .td-game-lineup {
    text-decoration: none; cursor: pointer; padding: 5px; border-radius: 0;
    display: inline-grid; place-items: center; color: var(--color-text-secondary);
}
.td-game-live:hover, .td-game-lineup:hover { color: var(--color-accent); background: var(--color-background-info); }
.td-game-rec  { color: var(--color-primary); }
.td-game-rec:hover  { background: var(--color-background-info); }
.td-score-row { display: flex; align-items: center; gap: 8px; }
.td-score-row input { width: 70px; text-align: center; }
.td-score-row span { font-weight: 800; color: var(--color-text-secondary); }

/* ─────────── 기록 ─────────── */
.td-stat-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
.td-statbox {
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 0;
    padding: 22px 12px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.td-statbox-num { display: block; font-size: 2rem; font-weight: 800; color: var(--color-primary); line-height: 1; }
.td-statbox-label { display: block; margin-top: 8px; font-size: .85rem; color: var(--color-text-secondary); font-weight: 600; }
.td-player-stats-filter { margin-bottom: 18px; }
.td-record-tabs { display: flex; gap: 7px; margin: 0 0 14px; }
.td-record-tabs button { min-width: 82px; padding: 9px 14px; border: 1px solid var(--color-border-tertiary); background: var(--color-background-primary); color: var(--color-text-secondary); font-weight: 800; cursor: pointer; }
.td-record-tabs button.is-active { color: #fff; border-color: var(--color-primary); background: var(--color-primary); }
.td-player-stat-scroll { overflow-x: auto; max-width: 100%; border: 1px solid var(--color-border-tertiary); background: var(--color-background-primary); scrollbar-gutter: stable; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.td-player-stat-scroll:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.td-player-stat-table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: .9rem; }
.td-player-stat-table--wide { width: max-content; min-width: 100%; }
.td-player-stat-table th, .td-player-stat-table td { padding: 12px 11px; border-bottom: 1px solid var(--color-border-tertiary); text-align: center; white-space: nowrap; }
.td-player-stat-table th { color: var(--color-text-secondary); font-size: .78rem; font-weight: 800; background: var(--color-background-secondary); }
.td-player-stat-table tbody tr:last-child td { border-bottom: 0; }
.td-player-stat-table tbody tr:hover { background: var(--color-background-hover); }
.td-player-stat-name { min-width: 155px; text-align: left !important; }
.td-player-stat-table--wide .td-player-stat-name { position: sticky; left: 58px; z-index: 1; background: var(--color-background-primary); box-shadow: 1px 0 var(--color-border-tertiary); }
.td-player-stat-table--wide thead .td-player-stat-name,
.td-player-stat-table--wide th:first-child { position: sticky; left: 0; z-index: 2; background: var(--color-background-secondary); box-shadow: 1px 0 var(--color-border-tertiary); }
.td-player-stat-table--wide th:nth-child(2) { position: sticky; left: 58px; z-index: 2; background: var(--color-background-secondary); box-shadow: 1px 0 var(--color-border-tertiary); }
.td-player-stat-rank { position: sticky; left: 0; z-index: 1; width: 58px; min-width: 58px; background: var(--color-background-primary); font-weight: 900; }
.td-player-stat-table--wide tbody tr:hover .td-player-stat-name { background: var(--color-background-hover); }
.td-player-stat-table--wide tbody tr:hover .td-player-stat-rank { background: var(--color-background-hover); }
.td-player-stat-sort-controls { display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.td-player-stat-sort-label { margin-right: 2px; }
.td-player-stat-sort-button { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--color-border-tertiary); border-radius: 4px; background: var(--color-background-primary); color: var(--color-text-secondary); cursor: pointer; }
.td-player-stat-sort-button:hover { color: var(--color-primary); border-color: var(--color-primary); }
.td-player-stat-sort-button.is-active { color: var(--color-text-success); border-color: var(--color-text-success); background: var(--color-background-primary); }
.td-player-stat-sort-button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.td-player-stat-table th.is-sorted,
.td-player-stat-table td.is-sorted,
.td-player-stat-table tbody tr:hover td.is-sorted { background: var(--color-background-success); }
.td-player-stat-name img, .td-player-stat-name span { display: inline-flex; width: 28px; height: 28px; margin-right: 8px; border-radius: 50%; vertical-align: middle; align-items: center; justify-content: center; object-fit: cover; background: var(--color-background-tertiary); color: var(--color-text-secondary); }
.td-title-badge { display:inline-flex; align-items:center; min-height:24px; padding:3px 8px; border:1px solid var(--color-border-tertiary); border-radius:999px; font-size:.72rem; font-weight:850; }
.td-title-badge.is-qualified { border-color:var(--color-text-success); background:var(--color-background-success); color:var(--color-text-success); }
.td-title-badge.is-short { color:var(--color-text-secondary); background:var(--color-background-secondary); }
.td-player-stat-table tr[data-title-qualified="false"] td { color:var(--color-text-secondary); }

/* ─────────── 가입신청 ─────────── */
.td-req-list { display: flex; flex-direction: column; gap: 10px; }
.td-req {
    display: flex; align-items: center; gap: 14px;
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 0;
    padding: 12px 16px;
    box-shadow: var(--shadow-sm);
}
.td-req-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--color-avatar-bg); flex-shrink: 0; }
.td-req-avatar img { width: 100%; height: 100%; object-fit: cover; }
.td-req-name { flex: 1; font-weight: 700; color: var(--color-text-primary); }
.td-req-actions { display: flex; gap: 8px; }
.td-btn-approve { background: var(--color-primary); color: var(--color-white); padding: 8px 18px; }
.td-btn-approve:hover { background: var(--color-primary-hover); }
.td-btn-reject {
    background: var(--color-neutral-100); color: var(--color-neutral-800);
    padding: 8px 18px; border: 1px solid var(--color-neutral-200);
}
.td-btn-reject:hover { background: var(--color-background-danger); color: var(--color-text-danger); }

/* ─────────── 권한 관리 ─────────── */
.td-perm-list { display: flex; flex-direction: column; gap: 8px; }
.td-perm-card {
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 0;
    padding: 12px 14px;
    box-shadow: var(--shadow-sm);
}
.td-perm-owner { border-left: 4px solid #f5b301; }
.td-perm-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.td-perm-name { font-size: .98rem; font-weight: 800; color: var(--color-text-primary); }
.td-perm-count {
    font-size: .74rem; font-weight: 700;
    padding: 2px 8px; border-radius: 0;
    color: var(--color-primary); background: var(--color-background-success);
}
.td-perm-owner .td-perm-top { margin-bottom: 0; }

/* 멤버 검색 (보직 배정) */
.td-member-search {
    display: flex; align-items: center; gap: 8px;
    margin: 12px 0 10px; padding: 8px 12px;
    border: 1px solid var(--color-neutral-300);
    background: var(--color-background-primary);
}
.td-member-search i { color: var(--color-text-secondary); font-size: .95rem; flex-shrink: 0; }
.td-member-search input {
    flex: 1; min-width: 0; border: none; outline: none; background: none;
    font-size: .9rem; color: var(--color-text-primary); font-family: inherit;
}
.td-member-search .td-muted { flex-shrink: 0; white-space: nowrap; font-size: .78rem; }

/* 페이지네이션 (보직 배정 — 15명/페이지) */
.td-pager { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 14px; }
.td-pager-btn {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-border-tertiary);
    background: var(--color-background-primary); color: var(--color-text-secondary);
    cursor: pointer; font-size: .9rem;
}
.td-pager-btn:hover:not(:disabled) { color: var(--color-text-primary); border-color: var(--color-text-secondary); }
.td-pager-btn:disabled { opacity: .4; cursor: default; }
.td-pager-pages { display: flex; gap: 4px; }
.td-pager-page {
    min-width: 30px; height: 30px; padding: 0 8px;
    border: 1px solid var(--color-border-tertiary);
    background: var(--color-background-primary); color: var(--color-text-secondary);
    font-size: .85rem; font-weight: 700; cursor: pointer;
}
.td-pager-page:hover { color: var(--color-text-primary); }
.td-pager-page.is-active { color: var(--color-white); background: var(--color-primary); border-color: var(--color-primary); }

.td-perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 6px;
    margin-bottom: 0;
}
.td-perm-toggle {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 9px;
    border: 1px solid var(--color-border-tertiary);
    border-radius: 0;
    cursor: pointer;
    font-size: .82rem; color: var(--color-text-primary);
    transition: background .15s, border-color .15s;
}
.td-perm-toggle:hover { background: var(--color-background-secondary); }
.td-perm-toggle input { width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; }
.td-perm-toggle:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-background-success);
}

.td-perm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.td-btn-transfer {
    background: transparent; color: var(--color-text-warning);
    border: 1px solid var(--color-text-warning);
    padding: 8px 18px;
}
.td-btn-transfer:hover { background: var(--color-background-warning); }

/* 보직 관리 */
.td-mt { margin-top: 32px; }
.td-role-toolbar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    margin-bottom: 16px;
}
.td-role-add { display: flex; gap: 8px; flex: 1; min-width: 240px; }
.td-role-add input {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--color-neutral-300);
    border-radius: 0;
    background: var(--color-background-primary);
    color: var(--color-text-primary);
    font-size: .92rem;
}
.td-role-add input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--ring-accent); }
.td-btn-ghost2 {
    background: var(--color-background-secondary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-tertiary);
}
.td-btn-ghost2:hover { background: var(--color-neutral-200); }

.td-role-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.td-role-card {
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 0;
    padding: 12px 14px;
    box-shadow: var(--shadow-sm);
}
.td-role-card-owner { border-left: 4px solid #f5b301; }
.td-role-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.td-role-title { font-size: .98rem; font-weight: 800; color: var(--color-text-primary); display: inline-flex; align-items: center; gap: 6px; }
.td-role-title i { color: #f5b301; }
.td-role-name-input {
    font-size: 1.02rem; font-weight: 800;
    color: var(--color-text-primary);
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 0;
    padding: 6px 12px; min-width: 140px;
}
.td-role-name-input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--ring-accent); }
.td-role-mc { margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--color-text-secondary); white-space: nowrap; }

/* 리그 보직 — 배정된 서버 유저 칩 + 검색 추가(참가 팀 소속 무관) */
.td-role-users { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--color-border-tertiary); }
.td-role-users-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.td-role-user-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 6px 3px 3px;
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-tertiary);
    font-size: .82rem; font-weight: 600; color: var(--color-text-primary);
}
.td-role-user-chip .tm-avatar { width: 20px; height: 20px; font-size: 9px; flex-shrink: 0; }
.td-role-user-remove {
    display: inline-grid; place-items: center;
    width: 16px; height: 16px; margin-left: 2px;
    background: none; border: none; cursor: pointer;
    color: var(--color-text-secondary); font-size: .7rem;
}
.td-role-user-remove:hover { color: var(--color-text-danger); }
.td-role-user-transfer {
    border: 1px solid var(--color-text-warning); background: transparent;
    color: var(--color-text-warning); padding: 2px 6px; cursor: pointer;
    font-size: .7rem; font-weight: 700;
}
.td-role-user-transfer:hover { background: var(--color-background-warning); }
.td-role-user-search { position: relative; }
.td-role-user-search input {
    width: 100%; padding: 7px 10px;
    font-size: .85rem; color: var(--color-text-primary);
    background: var(--color-background-primary);
    border: 1px solid var(--color-neutral-300);
    border-radius: 0;
}
.td-role-user-search input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--ring-accent); }
.ru-search-results {
    position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 2px);
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-tertiary);
    box-shadow: var(--shadow-md);
    max-height: 220px; overflow-y: auto;
}
.ru-search-result {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; cursor: pointer; font-size: .85rem;
}
.ru-search-result:hover { background: var(--color-background-secondary); }
.ru-search-result .td-btn { margin-left: auto; padding: 4px 10px; font-size: .75rem; }
.ru-search-result .tm-avatar { width: 22px; height: 22px; font-size: 10px; flex-shrink: 0; }
.ru-search-empty { padding: 10px; font-size: .8rem; color: var(--color-text-secondary); text-align: center; }

/* 인라인 저장 상태 */
.td-save-status {
    font-size: .78rem; font-weight: 700;
    color: var(--color-text-secondary);
    min-width: 56px;
    transition: color .15s;
}
.td-save-status.is-ok  { color: var(--color-text-success); }
.td-save-status.is-err { color: var(--color-text-danger); }

/* 보직 삭제 아이콘 버튼 */
.td-icon-del {
    background: none; border: none; cursor: pointer;
    color: var(--color-text-secondary);
    padding: 5px; border-radius: 0;
    display: inline-grid; place-items: center;
    transition: color .15s, background .15s;
}
.td-icon-del:hover { color: var(--color-text-danger); background: var(--color-background-danger); }

/* 멤버 카드 헤더의 위임 버튼 (우측 정렬, 작게) */
.td-perm-transfer { margin-left: auto; padding: 6px 14px; font-size: .82rem; }

/* ─────────── 가입 신청 모달 ─────────── */
.td-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.td-modal[hidden] { display: none; }
.td-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.td-modal-box {
    position: relative;
    width: min(560px, 92vw);
    max-height: 84vh;
    /* 넓은 모달(팀 설정)은 아래에서 override */
    display: flex; flex-direction: column;
    background: var(--color-background-primary);
    border-radius: 0;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: tdfade .15s ease;
}
.td-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--color-border-tertiary);
}
.td-modal-head h2 { margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--color-text-primary); }
.td-modal-close {
    background: none; border: none; cursor: pointer;
    font-size: 1.3rem; color: var(--color-text-secondary);
    display: inline-grid; place-items: center;
    width: 34px; height: 34px; border-radius: 0;
    transition: background .15s, color .15s;
}
.td-modal-close:hover { background: var(--color-background-secondary); color: var(--color-text-primary); }
.td-modal-body { padding: 18px 20px; overflow-y: auto; }
.td-modal-body .td-muted { margin: 0 0 14px; }
/* 넓은 모달 — 팀 설정(보직·권한) */
.td-modal-wide .td-modal-box { width: min(820px, 94vw); max-height: 88vh; }
/* 모달 하단 액션 버튼 행 (리그 경기·투표 생성 모달) */
.td-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }


/* 팀 정보 수정 폼 */
.td-set-form { display: flex; flex-direction: column; gap: 12px; }
.td-set-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.td-set-field { display: flex; flex-direction: column; gap: 5px; }
.td-set-field label { font-size: .82rem; font-weight: 700; color: var(--color-text-secondary); }
.td-set-field input,
.td-set-field select,
.td-set-field textarea {
    padding: 9px 12px;
    font-size: .92rem;
    color: var(--color-text-primary);
    background: var(--color-background-primary);
    border: 1px solid var(--color-neutral-300);
    border-radius: 0;
    font-family: inherit;
}
.td-set-field textarea { min-height: 60px; }
.td-char-count { margin-top: 4px; text-align: right; font-size: .75rem; color: var(--color-text-secondary); }
.td-set-field input:focus,
.td-set-field select:focus,
.td-set-field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--ring-accent); }
.td-set-check { display: flex; align-items: flex-start; gap: 8px; font-size: .85rem; color: var(--color-text-primary); cursor: pointer; }
.td-set-check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--color-primary); cursor: pointer; flex-shrink: 0; }
.td-set-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.td-set-sep { border: none; border-top: 1px solid var(--color-border-tertiary); margin: 22px 0; }
@media (max-width: 560px) { .td-set-row { grid-template-columns: 1fr; } }

/* 팀 로고 변경 — 정보 수정 카드 상단 */
.td-logo-field {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 18px; padding-bottom: 18px;
    border-bottom: 1px solid var(--color-border-tertiary);
}
.td-logo-avatar-wrap { position: relative; width: 76px; height: 76px; flex-shrink: 0; }
.td-logo-avatar {
    width: 76px; height: 76px; border-radius: 50%; overflow: hidden;
    background: var(--tdv-green-soft, var(--color-background-secondary));
    border: 1px solid var(--color-border-tertiary);
    display: grid; place-items: center;
}
.td-logo-avatar img { width: 100%; height: 100%; object-fit: cover; }
.td-logo-avatar i { font-size: 1.8rem; color: var(--color-primary); }
.td-logo-edit-btn {
    position: absolute; right: -2px; bottom: -2px;
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--color-background-primary);
    background: var(--color-primary); color: var(--color-white);
    font-size: .85rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: filter .15s;
}
.td-logo-edit-btn:hover { filter: brightness(1.08); }
.td-logo-edit-btn:disabled { opacity: .6; cursor: default; }
.td-logo-field-text { min-width: 0; }
.td-logo-name { margin: 0 0 3px; font-size: .92rem; font-weight: 800; color: var(--color-text-primary); }
.td-logo-hint, .td-field-hint { margin: 4px 0 0; font-size: .78rem; color: var(--color-text-secondary); }

/* ─────────── 빈 상태 ─────────── */
.td-empty {
    text-align: center; padding: 48px 20px;
    color: var(--color-text-secondary);
    background: var(--color-background-primary);
    border: 1px dashed var(--color-border-tertiary);
    border-radius: 0;
}
.td-empty i { font-size: 2.4rem; opacity: .5; }
.td-empty p { margin: 12px 0 0; font-weight: 700; color: var(--color-text-primary); }
.td-empty-lg { padding: 64px 20px; }
.td-soon { display: block; margin-top: 6px; font-size: .88rem; color: var(--color-text-secondary); }

/* ─────────── 반응형 ─────────── */
@media (max-width: 720px) {
    .td-about-grid { grid-template-columns: 1fr; }
    .td-stat-cards { grid-template-columns: repeat(2, 1fr); }
    .td-name { font-size: 1.7rem; }
    .td-hero-action { width: 100%; }
    .td-emblem { width: 84px; height: 84px; }
    .tnav-inner { gap: 10px; }
    .tnav-team { max-width: 120px; font-size: .92rem; }
    .tnav-exit span { display: none; }
    .tnav-exit { padding: 7px 10px; }
}

/* ── 팀 게시판 관리 ── */
.td-board-wrap { display: flex; flex-direction: column; gap: 14px; }
.td-board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.td-board-h { font-size: 18px; font-weight: 700; color: var(--color-text-primary); margin: 0; }
.td-board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.td-board-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px;
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: 0;
}
.td-board-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.td-board-name { font-size: 15px; font-weight: 600; color: var(--color-text-primary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.td-board-desc { font-size: 13px; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; }
.td-board-badge {
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 0;
  background: var(--color-background-secondary); color: var(--color-text-secondary);
}
.td-board-badge-notice { background: rgba(8,120,83,.10); color: var(--cl-primary); }
[data-theme="dark"] .td-board-badge-notice { background: rgba(106,168,46,.16); color: #9ccc5a; }
.td-board-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.td-board-btn {
  width: 32px; height: 32px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0.5px solid var(--color-border-tertiary); border-radius: 0;
  background: var(--color-background-primary); color: var(--color-text-secondary);
  font-size: 16px; cursor: pointer; transition: all .12s;
}
.td-board-btn:hover { color: var(--color-text-primary); border-color: var(--color-text-secondary); }
.td-board-btn-del:hover { color: var(--color-text-danger); border-color: var(--color-text-danger); }
.td-board-lock { flex-shrink: 0; color: var(--color-text-tertiary, var(--color-text-secondary)); font-size: 16px; opacity: .6; }
.td-board-foot { font-size: 12.5px; margin: 4px 0 0; }

/* ── 팀 탭 안 커뮤니티 게시판 임베드 (구단주 관리 컨트롤) ──
   community.css의 .community-wrap은 max-width:1100px로 좁게 잡혀 있는데, 여기서는
   다른 팀 탭들과 똑같이 .td-page(1440px, 헤더와 좌우 끝 일치)를 꽉 채우도록 해제한다.
   .community-wrap.td-board-embed로 클래스 두 개를 묶어 community.css의 단일 클래스
   규칙(로드 순서상 이 파일보다 나중에 걸림)보다 우선순위를 확실히 높인다. */
.community-wrap.td-board-embed { max-width: none; width: 100%; margin-left: 0; margin-right: 0; }
.td-board-embed .board-item { display: flex; align-items: center; }
.td-board-embed .board-item .board-item-link { flex: 1 1 auto; min-width: 0; }
.sidebar-heading .td-board-add-mini {
  margin-left: auto; width: 24px; height: 24px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0.5px solid var(--color-border-tertiary); border-radius: 0;
  background: var(--color-background-primary); color: var(--color-text-secondary);
  font-size: 15px; cursor: pointer; transition: all .12s;
}
.sidebar-heading .td-board-add-mini:hover { color: var(--cl-primary); border-color: var(--cl-primary); }
.td-board-mini { display: inline-flex; align-items: center; gap: 2px; padding-right: 8px; flex-shrink: 0; }
.td-board-mini button {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--color-text-secondary);
  font-size: 15px; cursor: pointer; border-radius: 0; transition: all .12s;
}
.td-board-mini button:hover { background: var(--color-background-secondary); color: var(--color-text-primary); }
.td-board-mini button:last-child:hover { color: var(--color-text-danger); }
.td-board-mini-lock { color: var(--color-text-tertiary, var(--color-text-secondary)); opacity: .55; font-size: 14px; }

/* ── 게시판 관리 (팀 설정 · 게시판 설정 카드) ── */
.td-bm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.td-bm-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 0.5px solid var(--color-border-tertiary);
  border-radius: 0; background: var(--color-background-primary);
}
.td-bm-move { display: inline-flex; flex-direction: column; flex-shrink: 0; gap: 1px; }
.td-bm-mv {
  width: 22px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--color-text-secondary);
  cursor: pointer; font-size: 13px; border-radius: 0;
}
.td-bm-mv:hover { background: var(--color-background-secondary); color: var(--color-text-primary); }
.td-bm-lockicon { color: var(--color-text-tertiary, var(--color-text-secondary)); opacity: .5; font-size: 15px; width: 22px; text-align: center; }
.td-bm-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.td-bm-name { font-size: 14px; font-weight: 600; color: var(--color-text-primary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.td-bm-prefixes { font-size: 12px; color: var(--color-text-secondary); }
.td-bm-actions { display: inline-flex; gap: 4px; flex-shrink: 0; }

/* ── 팀 게시판 전용 페이지 (back bar) — Field Green 디자인, community.css 의
   .page-community 스코프 --board-* 토큰을 함께 로드한 페이지에서만 사용 ── */
.tb-page { max-width: 1100px; margin: 0 auto; }
.tb-backbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; }
.tb-backbar > a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--color-text-secondary); text-decoration: none; transition: color .12s; }
.tb-backbar > a:hover { color: var(--board-accent, var(--logo-primary)); }
.tb-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .01em; padding: 4px 11px; border-radius: 0; background: var(--board-accent-soft, rgba(8,120,83,.10)); color: var(--board-accent, var(--logo-primary)); }

/* ════════════════════════════════════════════════════════════
   팀 상세 UX 개선 — 반응형 · 핵심 액션 부각 · 정보 레이아웃 정리
   (뒤에 와서 기존 규칙을 부분 오버라이드)
════════════════════════════════════════════════════════════ */

/* 핵심 액션(가입) 데스크탑에서도 더 도드라지게 */
.td-hero-action .td-btn-join { padding: 13px 26px; font-size: 1rem; }

/* 모바일 하단 고정 액션바 — 기본(데스크탑)은 숨김 */
.td-mobcta { display: none; }

/* 탭 활성 표시를 살짝 더 또렷하게 */
.tnav-item.is-active { font-weight: 800; }

/* ─────────── 참석 투표 ─────────── */
.td-vote-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; }
.td-vote-card {
    padding: 14px 16px;
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-tertiary);
    border-left: 4px solid var(--color-primary);
    border-radius: 0;
    box-shadow: var(--shadow-sm);
}
/* eyebrow — 예전엔 색색의 종류·상태 배지 두 개였는데, 한 줄의 옅은 라벨로 통합 */
.td-vote-eyebrow {
    margin: 0; color: var(--color-text-secondary);
    font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.td-vote-title { margin: 6px 0 2px; font-size: 1.05rem; font-weight: 800; color: var(--color-text-primary); }
.td-vote-desc { margin: 0 0 6px; font-size: .88rem; color: var(--color-text-secondary); white-space: pre-wrap; }
.td-vote-meta { margin: 0 0 10px; font-size: .78rem; color: var(--color-text-secondary); }
.td-vote-meta b { color: var(--color-text-primary); font-weight: 800; }

.td-vote-options { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.td-vote-option { padding: 0; }
.td-vote-flash-row { display: block; margin-top: 6px; }
.td-vote-detail-input {
    margin: 6px 0 0 26px;
    width: 90px; padding: 4px 8px;
    font-size: .82rem; text-align: center;
    color: var(--color-text-primary);
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 0;
}
.td-vote-voters { margin: 4px 0 0 26px; font-size: .78rem; color: var(--color-text-tertiary); }

/* 카드 안 버튼 공통 — 이 페이지의 각진(border-radius:0) 톤에 맞춘 전용 버튼(공용 .td-btn류와 무관) */
.td-vote-btn {
    display: inline-flex; align-items: center; gap: 5px;
    height: 32px; padding: 0 12px;
    font-size: .8rem; font-weight: 700; font-family: inherit;
    color: var(--color-text-secondary);
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 0;
    cursor: pointer;
}
.td-vote-btn:hover { color: var(--color-text-primary); background: var(--color-neutral-200); }
.td-vote-btn-primary { color: var(--color-white); background: var(--color-primary); border-color: var(--color-primary); }
.td-vote-btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.td-vote-btn-danger:hover { color: var(--color-text-danger, #dc2626); background: var(--color-background-danger); border-color: var(--color-text-danger, #dc2626); }

/* 투표 댓글 — 옵션과 무관하게 시간·사유 등을 자유 기재 */
.td-vote-comments { margin-top: 4px; }
.td-vote-comment-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.td-vote-comment-list li { font-size: .84rem; color: var(--color-text-primary); }
.td-vote-comment-list b { margin-right: 6px; color: var(--color-primary); font-weight: 800; }
.td-vote-comment-form { display: flex; align-items: center; gap: 8px; }
.td-vote-comment-input {
    flex: 1 1 auto; height: 32px; padding: 0 10px; font-size: .85rem; box-sizing: border-box;
    color: var(--color-text-primary);
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 0;
}
.td-vote-comment-input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--ring-accent); }

.td-vote-form-actions {
    display: flex; align-items: center; gap: 10px; margin-top: 10px;
    padding-top: 10px; border-top: 1px solid var(--color-border-tertiary);
}
.td-vote-publish-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.td-vote-title-input, .td-vote-desc-input, .td-vote-deadline-input {
    padding: 7px 10px;
    font-size: .88rem;
    color: var(--color-text-primary);
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 0;
}
.td-vote-opts-editor {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed var(--color-border-tertiary);
}
.td-vote-opts-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.td-vote-opt-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 6px 3px 10px; font-size: .8rem;
    color: var(--color-text-primary);
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 0;
}
.td-vote-opt-chip em { font-style: normal; color: var(--color-text-tertiary); }
.td-vote-opt-del {
    display: inline-grid; place-items: center;
    width: 18px; height: 18px; padding: 0;
    border: none; border-radius: 0; cursor: pointer;
    color: var(--color-text-tertiary); background: transparent;
}
.td-vote-opt-del:hover { color: var(--color-text-danger, #dc2626); background: var(--color-background-danger); }
.td-vote-opt-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.td-vote-opt-add-label {
    flex: 1 1 160px; height: 32px; padding: 0 10px; font-size: .82rem; box-sizing: border-box;
    color: var(--color-text-primary);
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 0;
}

/* 카드 목록에서는 제목을 누르면 상세(댓글·투표자·관리)를 여는 버튼으로 */
.td-vote-title-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; margin: 0; padding: 2px 0;
    background: none; border: 0; cursor: pointer; text-align: left;
}
.td-vote-title-btn .td-vote-title { margin: 4px 0 0; flex: 1 1 auto; min-width: 0; }
.td-vote-title-btn i { flex-shrink: 0; color: var(--color-text-tertiary); font-size: 1.1rem; transition: transform .15s ease; }
.td-vote-title-btn:hover i { color: var(--color-primary); transform: translateX(2px); }

/* 상세 모달 — 항목별 득표율 + 투표자 명단 */
.td-vote-detail-options { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
.td-vote-detail-option { padding: 12px 14px; border: 1px solid var(--color-border-tertiary); }
.td-vote-detail-option .td-vote-opt-bar { margin-top: 7px; }
.td-vote-detail-option .td-vote-opt-count { margin: 6px 0 0; }
.td-vote-detail-option .td-vote-voters { margin: 4px 0 0; padding-top: 6px; border-top: 1px dashed var(--color-border-tertiary); }

.td-vote-section-label { margin: 18px 0 10px; font-size: .8rem; font-weight: 800; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .06em; }
.td-vote-actions-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--color-border-tertiary); }

/* ── 태블릿 (≤900px) ── */
@media (max-width: 900px) {
  .td-page { padding-left: 12px; padding-right: 12px; }
  .td-hero { min-height: 200px; }
  .td-hero-body { padding: 18px; gap: 16px; }
  .td-name { font-size: 1.9rem; }
  .td-detail-grid { grid-template-columns: 1fr; }
  .td-vote-list { grid-template-columns: repeat(2, 1fr); }
}

/* ── 모바일 (≤560px) ── */
@media (max-width: 560px) {
  .td-hero { min-height: 0; border-radius: 0; }
  .td-hero-body {
    flex-direction: column; align-items: flex-start;
    padding: 16px; gap: 12px;
  }
  .td-emblem { width: 64px; height: 64px; border-radius: 50%; }
  .td-emblem i { font-size: 2rem; }
  .td-name { font-size: 1.5rem; }
  .td-short { font-size: .9rem; }
  .td-stats { gap: 14px; margin-top: 8px; }
  .td-leaders { gap: 6px; margin-top: 8px; }
  .td-stat-cards { grid-template-columns: repeat(2, 1fr); }

  /* 가입/철회 1차 동작은 하단 고정바로 옮기고 히어로에선 숨김(중복 제거) */
  .td-hero-action .td-btn-join,
  .td-hero-action .td-btn-cancel { display: none; }
  .td-hero-action { width: 100%; gap: 8px; }
  .td-hero-action .td-btn { flex: 1 1 auto; justify-content: center; }

  /* 탭: 활성 항목을 알약 배경으로 더 명확하게 */
  .tnav-inner { padding: 0 10px; gap: 8px; }
  .tnav-item { padding: 0 11px; font-size: .88rem; }
  .tnav-item.is-active { background: rgba(8,120,83,.10); border-radius: 0; }
  [data-theme="dark"] .tnav-item.is-active { background: rgba(106,168,46,.16); }

  /* 모바일 하단 고정 액션바 노출 */
  .td-mobcta {
    display: flex; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: var(--color-background-primary);
    border-top: 1px solid var(--color-border-tertiary);
    box-shadow: 0 -4px 16px rgba(0,0,0,.12);
  }
  .td-mobcta-btn { flex: 1 1 auto; justify-content: center; padding: 13px 14px; font-size: .95rem; }
  .td-mobcta-icon { flex: 0 0 auto; }

  /* 고정바에 콘텐츠가 가리지 않도록 하단 여백 확보 */
  .td-page { padding-bottom: 78px; }

  .td-vote-list { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   Field Green 비주얼 재단장 — 팀 목록·팀 만들기(teams.css)와 같은
   톤(#087853)으로 통일. 구조·클래스·JS는 그대로, 색상·표면 스타일만 교체.
   .page-team-detail 스코프에서 --color-primary 를 덮어써서(캐스케이드)
   이 페이지에 이미 var(--color-primary) 를 쓰던 대부분의 규칙이
   자동으로 그린 톤을 따라가게 한다 — 개별 규칙을 일일이 바꾸지 않음.
════════════════════════════════════════════════════════════ */
.page-team-detail {
  --color-primary: #087853;
  --color-primary-hover: #066044;
  --tdv-green-dark: #064634;
  --tdv-green-deep: #04231a;
  --tdv-green-soft: #e7f3eb;
  --tdv-green-line: #cfe1d6;
  --tdv-coral: #ff5b42;
}
[data-theme="dark"] .page-team-detail {
  --tdv-green-soft: rgba(140, 240, 189, .10);
  --tdv-green-line: rgba(140, 240, 189, .18);
}

/* 히어로 — 필드 그린 그라디언트 + 다이아몬드 엠블럼(목업 구성) */
.td-hero { border-radius: 0; box-shadow: 0 16px 34px rgba(6, 70, 52, .18); }
.td-hero-bg { background: linear-gradient(118deg, var(--tdv-green-deep), var(--tdv-green-dark) 55%, var(--color-primary) 100%); }
.td-hero-scrim { background: linear-gradient(180deg, rgba(3, 35, 26, .12) 0%, rgba(3, 35, 26, .58) 70%, rgba(3, 35, 26, .84) 100%); }
.td-hero::after {
  content: ""; position: absolute; z-index: 1; right: -46px; bottom: -70px;
  width: 190px; height: 190px; transform: rotate(45deg);
  border: 20px solid rgba(255, 255, 255, .08); pointer-events: none;
}
.td-emblem {
  border-radius: 50%;                    /* 팀 로고 아바타 — 원형 유지 */
  background: #d9ebbe;
  box-shadow: 0 0 0 9px rgba(255, 255, 255, .1);
}
.td-emblem b { font: 800 2.2rem var(--number, inherit); color: #1c623e; letter-spacing: -.05em; }
.td-emblem i { color: #1c623e; }
.td-hero-desc { margin: 7px 0 0; color: #d1e8dc; font-size: .92rem; }
.td-chip { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }
.td-chip-vis { background: rgba(3, 35, 26, .55); }
.td-leader { background: rgba(3, 35, 26, .34); border-color: rgba(255, 255, 255, .22); }
.td-btn-join { box-shadow: 0 8px 19px rgba(0, 0, 0, .2); }
.td-btn-review { background: var(--color-primary); box-shadow: 0 8px 19px rgba(0, 0, 0, .2); }
.td-btn-review:hover { background: var(--color-primary-hover); }
/* 구단주 배지 — '가입 신청 관리' 버튼과 동일한 크기·모양(패딩·폰트·라운드)로 맞춤 */
.td-owner-badge {
  padding: 11px 22px;
  font-size: .95rem;
  border-radius: 0;
  background: #e5a900; color: #263b2e;
  box-shadow: 0 8px 19px rgba(0, 0, 0, .2);
}

/* 팀 전용 서브내비 — header.html 아래 <main> 밖에서 렌더되므로 별도 지정 */
.tnav { backdrop-filter: blur(10px); }
.tnav-emblem { background: #087853; }
.tnav-item.is-active { color: #087853; border-bottom-color: #087853; }
.tnav-settings {
  flex-shrink: 0; align-self: center; margin-left: 2px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  font-size: .85rem; font-weight: 700;
  color: #087853;
  background: #f6faf7;
  border: 1px solid #cfe0d5;
  border-radius: 0;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.tnav-settings:hover { border-color: #087853; background: #e7f3eb; }
[data-theme="dark"] .tnav-settings { background: rgba(140, 240, 189, .08); border-color: rgba(140, 240, 189, .18); }
[data-theme="dark"] .tnav-settings:hover { background: rgba(140, 240, 189, .16); }
.tnav-cta { background: var(--tdv-coral, #ff5b42); }
.tnav-cta:hover { background: #e14b34; }
[data-theme="dark"] .tnav-item.is-active { background: rgba(140, 240, 189, .12); }

/* 카드 표면 — 상단 그린 라인 + 각진 모서리로 teams.css 와 결을 맞춤 */
.td-card, .td-player, .td-game, .td-vote-card, .td-statbox,
.td-req, .td-role-card, .td-perm-card, .td-empty {
  border-radius: 0;
}
.td-card { border-top: 3px solid var(--tdv-green-line); }
.td-card-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--color-border-tertiary);
}
.td-card-head .td-card-title { margin: 3px 0 0; }
.td-card-num {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 24px; height: 24px;
  background: var(--tdv-green-soft); color: var(--color-primary);
  font-size: .72rem; font-weight: 800;
}
.td-card-head-text { flex: 1 1 auto; min-width: 0; }
.td-card-eyebrow {
  margin: 0; color: var(--color-text-secondary);
  font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.td-card-edit {
  flex-shrink: 0; align-self: center;
  padding: 6px 11px;
  font-size: .78rem; font-weight: 700;
  color: var(--color-text-secondary);
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-tertiary);
  text-decoration: none;
}
.td-card-edit:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--tdv-green-soft); }

/* 소개 카드 — 창단일·소속 리그 요약 스트립. 카드 너비를 정확히 반반으로 분할 */
.intro-moments {
  display: grid; grid-template-columns: 1fr 1fr;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--color-border-tertiary);
}
.intro-moments > span, .intro-moments > .league-entry {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0; text-align: left;
  background: none; border: 0;
}
.intro-moments > span:first-child, .intro-moments > .league-entry:first-child {
  padding-right: 14px; border-right: 1px solid var(--color-border-tertiary);
}
.intro-moments > span:last-child, .intro-moments > .league-entry:last-child { padding-left: 14px; }
.intro-moments b { font-size: 1rem; font-weight: 800; color: var(--color-text-primary); letter-spacing: -.02em; }
.intro-moments small { font-size: .74rem; color: var(--color-text-secondary); font-weight: 600; }
.league-entry { position: relative; cursor: help; }
.league-entry em {
  margin-left: 3px; padding: 1px 5px;
  background: var(--tdv-green-soft); color: var(--color-primary);
  font-size: .68rem; font-style: normal; font-weight: 800;
}
.league-tooltip {
  position: absolute; z-index: 5; bottom: calc(100% + 8px); left: 14px;
  width: 200px; padding: 9px 10px;
  background: var(--tdv-green-dark); color: #eff9f2;
  font-size: .72rem; font-weight: 600; line-height: 1.55;
  opacity: 0; pointer-events: none; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
}
.league-entry:hover .league-tooltip, .league-entry:focus-visible .league-tooltip { opacity: 1; transform: none; }

.td-meta dd.td-mono { display: inline-flex; align-items: center; }
.td-code-copy {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 8px; padding: 3px 8px;
  font-size: .72rem; font-weight: 800;
  color: var(--color-primary);
  background: var(--tdv-green-soft);
  border: 1px solid var(--tdv-green-line);
  border-radius: 0;
  cursor: pointer;
}
.td-code-copy:hover { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }

/* 선수단 카드 — 상단 라인만 그린, 나머지는 기존 셀렉트/입력 스타일 유지 */
.td-player { border-top-width: 3px; }
.td-player-member { border-top-color: var(--color-primary); }
.td-player-owner  { border-top-color: #e5a900; }

/* 선수단 카드 — 아바타·이름·태그를 한 행에 배치(목업의 가로형 카드), 배번은 우측 정렬 */
.td-roster { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.td-player-top { align-items: flex-start; }
.td-player-id { flex: 1 1 auto; min-width: 0; }
.td-player-id .td-player-name { margin: 0; font-size: 1rem; }
.td-player-id .td-player-tags { margin-top: 6px; min-height: 0; }
.td-jersey-badge { flex-shrink: 0; }

/* 일정 카드 — 좌측 라인 유지, 상태색만 그린 톤으로 정렬 */
.td-game { border-radius: 0; }
.td-gc-st-done, .td-gc-st-win { background: var(--tdv-green-soft); color: var(--color-text-success); }

/* 기록 스탯 카드 */
.td-statbox { border-top: 3px solid var(--tdv-green-line); }


/* ── 일정·결과 — 요약 바 + 3열 카드(①일시·구장 ②대진+선발투수 예고 ③공통·특수 버튼) ── */
.td-grow-summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px;
  padding: 11px 16px; margin-bottom: 10px;
  background: var(--color-background-primary);
  border: 1px solid var(--tdv-green-line);
}
.td-grow-summary > .td-grow-item {
  display: flex; align-items: baseline; gap: 5px;
  padding: 0 16px 0 0; margin: 0;
  border: none; border-right: 1px solid var(--color-border-tertiary);
  background: none; border-radius: 0; font-family: inherit;
}
.td-grow-summary > .td-grow-item:last-of-type { border-right: 0; padding-right: 0; }
.td-grow-summary b { color: var(--color-primary); font-size: 1.1rem; font-weight: 800; }
.td-grow-summary span { color: var(--color-text-secondary); font-size: .78rem; font-weight: 700; }
/* 전체 경기/예정/결과 — 클릭해서 경기 목록을 그 상태로 필터링 */
.td-grow-stat { cursor: pointer; transition: opacity .12s; }
.td-grow-stat:not(.is-active) { opacity: .5; }
.td-grow-stat:hover { opacity: .85; }
.td-grow-stat.is-active { opacity: 1; }
.td-sched-season {
  padding: 0; margin: 0;
  border: none; background: none; box-shadow: none;
  color: var(--color-primary); font-size: 1.1rem; font-weight: 800;
  font-family: inherit; cursor: pointer; border-radius: 0;
}
.td-sched-season:disabled { color: var(--color-text-secondary); cursor: default; }
.td-sched-season:focus { outline: none; }
.td-sched-filter { min-width: 150px; }
.td-sched-filter-control {
  min-width: 135px; max-width: 220px; padding: 0; margin: 0;
  border: 0; background: none; box-shadow: none;
  color: var(--color-primary); font-size: .9rem; font-weight: 800;
  font-family: inherit; cursor: pointer; outline: none;
}
.td-sched-filter-control option { color: var(--color-text-primary); font-weight: 600; }
.td-grow-create {
  margin-left: auto; flex-shrink: 0;
  padding: 7px 14px; font-size: .85rem; border-radius: 0;
}

.td-game.td-gr {
  display: grid;
  grid-template-columns: 150px minmax(260px, 1fr) 230px;
  grid-template-areas: "meta match actions";
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border-left: 3px solid var(--color-primary);
}
/* 상태 사유(지연개시/중단/서스펜디드 등) — VS·스코어 바로 아래, 가운데 정렬(.td-gc-mid 안) */
.td-gr-notice {
  max-width: 220px;
  font-size: .78rem; font-weight: 600;
  color: var(--color-text-secondary);
  text-align: center;
}

/* 1열 — 종류·상태 배지 + 일시·구장 */
.td-gr-meta { grid-area: meta; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.td-gr-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.td-gr-datetime, .td-gr-loc {
  display: inline-flex; align-items: center; gap: 4px;
  max-width: 100%; min-width: 0;
  font-size: .95rem; font-weight: 700; color: var(--color-text-primary);
}
/* 구장 이름이 길어져도 1열 폭을 벗어나지 않도록 말줄임(전체 이름은 title 툴팁으로) */
.td-gr-loc-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* 2열 — 원정팀 VS 홈팀 + 팀별 선발투수 예고 */
.td-gr-match { grid-area: match; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; min-width: 0; }
.td-gr-match .td-gc-team { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.td-gc-team-row { display: flex; align-items: center; gap: 8px; }
.td-gr-pitcher { font-size: .74rem; font-weight: 600; color: var(--color-text-secondary); }
.td-gr-pitcher.is-live { color: var(--color-text-primary); font-weight: 800; }
.td-gr-pitcher.is-win { color: var(--color-text-success); font-weight: 800; }
.td-gc-score.is-live { color: var(--color-text-primary); animation: td-live-pulse 1.6s ease-in-out infinite; }
.td-gc-mid { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.td-gr-type-line {
  max-width: 170px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 1rem; font-weight: 800; color: var(--color-primary);
  letter-spacing: -.01em;
}
.td-gr-subtype-line {
  max-width: 190px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .72rem; font-weight: 700; color: var(--color-text-secondary);
}

/* 경기 상태(경기 전/경기 종료 등) — 딱지가 아니라 줄글로 */
.td-gr-badges .td-gc-status { padding: 0; border-radius: 0; background: none; }

/* 3열 — 공통 버튼(라인업 보기·실시간 중계·경기 기록) / 특수 버튼(라인업 제출·기록 센터·경기 수정·경기 삭제 — 권한자 전용) */
.td-gr-actions { grid-area: actions; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.td-gr-actions-common, .td-gr-actions-special { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.td-gr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 108px; box-sizing: border-box;
  padding: 7px 12px; font-size: .8rem; font-weight: 700;
  font-family: inherit; cursor: pointer;
  color: var(--color-text-secondary);
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-tertiary);
  text-decoration: none;
}
.td-gr-btn:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--tdv-green-soft); }
.td-gr-btn-special {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 108px; box-sizing: border-box;
  padding: 7px 12px; font-size: .8rem; font-weight: 800;
  font-family: inherit; cursor: pointer;
  color: var(--color-white);
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(8, 120, 83, .25);
}
.td-gr-btn-special:hover { background: var(--color-primary-hover); }
/* 경기 삭제 — 특수 버튼 중에서도 위험 액션이므로 붉은 톤으로 구분 */
.td-gr-btn-special.td-gr-btn-danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  box-shadow: 0 4px 10px rgba(239, 68, 68, .3);
}
.td-gr-btn-special.td-gr-btn-danger:hover { background: var(--color-danger-hover); }

@media (max-width: 900px) {
  .td-game.td-gr { grid-template-columns: 130px 1fr; grid-template-areas: "meta match" "actions actions"; gap: 12px 16px; }
  .td-gr-actions {
    flex-direction: row; align-items: center; justify-content: space-between;
    padding-top: 12px; border-top: 1px dashed var(--color-border-tertiary);
  }
  .td-gr-actions-common, .td-gr-actions-special { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .td-game.td-gr { grid-template-columns: 1fr; grid-template-areas: "meta" "match" "actions"; padding: 14px; }
  .td-gr-actions { flex-direction: column; align-items: stretch; }
  .td-gr-actions-common, .td-gr-actions-special { justify-content: flex-start; }
  .td-gr-btn, .td-gr-btn-special { flex: 1 1 auto; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════
   팀 투표 — 카카오톡형 빠른 작성 패널 + "선택지 클릭 = 즉시 투표"
   (BaseballLog-team-poll 목업 재단장 — 엔드포인트·기능은 그대로 두고
   표면 디자인·상호작용만 교체)
════════════════════════════════════════════════════════════ */

/* 패널 헤더 — eyebrow + 진행중 뱃지 */
.td-poll-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.td-poll-head h2 { margin: 0; }
.td-poll-eyebrow {
  margin: 0 0 4px; color: var(--color-text-secondary);
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}

/* "클릭하면 바로 반영" 안내 바 */
.td-poll-note {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px; padding: 10px 14px;
  border-left: 3px solid var(--color-primary);
  background: var(--tdv-green-soft); color: var(--color-text-secondary);
}
.td-poll-note i { flex-shrink: 0; color: var(--color-primary); font-size: 1rem; }
.td-poll-note p { margin: 0; font-size: .8rem; }
.td-poll-note b { color: var(--color-primary); }

/* 투표 카드 — 좌측 굵은 라인 대신 목업처럼 얇은 상단 라인 */
.td-vote-card { border-left: none; border-top: 3px solid var(--tdv-green-line); }

/* 선택지 — 라벨/득표율(위) · 진행바(가운데) · 표수(아래)로 쌓은 카드형.
   네이티브 라디오/체크박스는 시각적으로만 숨기고, 카드 전체를 즉시-투표 버튼으로 쓴다. */
.td-vote-opt-label {
  position: relative; display: flex; flex-direction: column; gap: 7px;
  padding: 12px 14px;
  border: 1px solid var(--color-border-tertiary);
  cursor: pointer;
  transition: border-color .15s ease;
}
.td-vote-opt-label:hover { border-color: var(--tdv-green-line); }
/* opacity:0으로 숨기면 접근성 트리에서도 제외돼 키보드·스크린리더로 투표할 수 없게 된다 —
   시각적으로만 숨기고 포커스·클릭은 그대로 살리는 표준 sr-only 패턴 사용 */
.td-vote-opt-label input[type="radio"],
.td-vote-opt-label input[type="checkbox"] {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.td-vote-opt-label:has(input:focus-visible) {
  outline: 2px solid var(--color-primary); outline-offset: 2px;
}
.td-vote-opt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.td-vote-opt-text { font-weight: 700; color: var(--color-text-primary); font-size: .94rem; }
.td-vote-opt-pct { color: var(--color-text-secondary); font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.td-vote-opt-bar { height: 6px; background: var(--color-background-secondary); overflow: hidden; }
.td-vote-opt-fill { display: block; height: 100%; width: 0; background: var(--tdv-green-line); transition: width .25s ease; }
.td-vote-opt-count { color: var(--color-text-secondary); font-size: .74rem; font-weight: 700; }
.td-vote-opt-label.is-selected { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.td-vote-opt-label.is-selected .td-vote-opt-pct { color: var(--color-primary); }
.td-vote-opt-label.is-selected .td-vote-opt-fill { background: var(--color-primary); }

/* ── 빠른 투표 만들기 — 카카오톡형 원패널 작성 오버레이 ── */
.td-poll-composer-overlay {
  position: fixed; z-index: 120; inset: 0;
  display: grid; place-items: center; padding: 22px;
  background: rgba(4, 35, 26, .52);
  backdrop-filter: blur(4px);
}
.td-poll-composer-overlay[hidden] { display: none; }
.td-poll-composer {
  display: flex; flex-direction: column;
  width: min(560px, 100%); max-height: min(760px, calc(100vh - 44px));
  background: var(--color-background-primary);
  box-shadow: 0 28px 70px rgba(0, 34, 23, .3);
  animation: tdPollComposerIn .18s ease-out;
}
@keyframes tdPollComposerIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.td-poll-composer-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-shrink: 0; padding: 20px 22px 16px;
  background: var(--tdv-green-dark); color: #fff;
}
.td-poll-composer-head p { margin: 0; color: #a7d6bd; font-size: .68rem; font-weight: 800; letter-spacing: .14em; }
.td-poll-composer-head h2 { margin: 6px 0 0; font-size: 1.35rem; letter-spacing: -.02em; }
.td-poll-composer-close {
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08);
  color: #e8f7ed; font-size: 1.1rem; cursor: pointer;
}

.td-poll-composer-body { padding: 18px 22px 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }

/* 질문 — 라벨과 입력을 하나의 테두리 카드로 묶는다(목업 스타일) */
.td-poll-question {
  display: block; box-sizing: border-box;
  padding: 14px 15px; border: 1px solid var(--color-border-tertiary);
  background: var(--color-background-primary);
}
.td-poll-question:focus-within { border-color: var(--color-primary); box-shadow: var(--ring-accent); }
.td-poll-question > span {
  display: block; margin-bottom: 8px; color: var(--color-text-secondary); font-size: .78rem; font-weight: 800;
}
.td-poll-question input {
  box-sizing: border-box; width: 100%; padding: 0; border: 0; background: transparent;
  color: var(--color-text-primary); font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
}
.td-poll-question input:focus { outline: none; }
.td-poll-question textarea {
  box-sizing: border-box; width: 100%; padding: 0; border: 0; background: transparent;
  color: var(--color-text-primary); font-size: .88rem; font-weight: 500; font-family: inherit;
  resize: vertical;
}
.td-poll-question textarea:focus { outline: none; }
.td-poll-question input:disabled, .td-poll-question textarea:disabled { color: var(--color-text-tertiary); cursor: not-allowed; }
.td-poll-question:has(input:disabled), .td-poll-question:has(textarea:disabled) { background: var(--color-background-secondary); }

.td-poll-locked-note {
  display: flex; align-items: center; gap: 6px; margin: -6px 0 0;
  padding: 9px 12px; font-size: .76rem; font-weight: 700;
  color: var(--color-text-secondary); background: var(--color-background-secondary);
  border: 1px solid var(--color-border-tertiary);
}

.td-poll-section-label { display: flex; align-items: baseline; gap: 7px; margin-bottom: 8px; }
.td-poll-section-label b { color: var(--color-text-primary); font-size: .84rem; }
.td-poll-section-label span { color: var(--color-text-secondary); font-size: .74rem; }
.td-poll-option-list { display: flex; flex-direction: column; gap: 7px; }
.td-poll-option-row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) 26px; align-items: center; gap: 8px;
  padding: 0 9px; border: 1px solid var(--color-border-tertiary); background: var(--color-background-primary);
}
.td-poll-option-order { color: var(--color-text-secondary); font-size: .78rem; font-weight: 800; text-align: center; }
.td-poll-option-row .vOptLabel {
  box-sizing: border-box; width: 100%; height: 37px; padding: 0; border: 0; background: transparent;
  color: var(--color-text-primary); font-size: .88rem; font-family: inherit;
}
.td-poll-option-row .vOptLabel:focus { outline: none; }
.td-poll-option-del {
  display: inline-grid; place-items: center; width: 23px; height: 23px; padding: 0;
  border: 0; background: transparent; color: var(--color-text-secondary); cursor: pointer;
}
.td-poll-option-del:hover { color: var(--color-text-danger, #dc2626); }
.td-poll-option-del:disabled { opacity: .25; cursor: not-allowed; }
.td-poll-add-option {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0; border: 0; background: transparent;
  color: var(--color-primary); font-size: .78rem; font-weight: 800; cursor: pointer;
}
/* '보기 추가' 버튼과 '복수 선택 허용' 토글을 한 줄에 */
.td-poll-option-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }

/* 자주 쓰는 선택지 빠른 추가 — 원래 '복수 선택 허용'이 있던 구분선 행 자리 */
.td-poll-quickadd-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 0; border-top: 1px solid var(--color-border-tertiary); border-bottom: 1px solid var(--color-border-tertiary);
}
.td-poll-quickadd-row > span { color: var(--color-text-secondary); font-size: .72rem; font-weight: 800; flex-shrink: 0; }
.td-poll-quickadd-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.td-poll-quick-chip {
  padding: 5px 9px; font-size: .76rem; font-weight: 700;
  color: var(--color-primary);
  background: var(--tdv-green-soft);
  border: 1px solid var(--tdv-green-line); cursor: pointer;
}
.td-poll-quick-chip:hover { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }

/* 스위치형 토글(복수선택·무기명·미투표자 알림) — opacity:0 대신 클립 기반으로 숨겨
   접근성 트리·키보드 포커스는 유지한다(색맹/스크린리더 대응) */
.td-poll-switch, .td-poll-toggle {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  color: var(--color-text-primary); font-size: .8rem; font-weight: 700;
}
.td-poll-switch input, .td-poll-toggle input {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.td-poll-switch:has(input:focus-visible) span,
.td-poll-toggle:has(input:focus-visible) > span { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.td-poll-switch span, .td-poll-toggle > span {
  position: relative; flex-shrink: 0; width: 30px; height: 17px; border-radius: 0;
  background: var(--color-neutral-300); transition: background .15s ease;
}
.td-poll-switch span::after, .td-poll-toggle > span::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
  border-radius: 0; background: var(--color-white); transition: transform .15s ease;
}
.td-poll-switch input:checked + span, .td-poll-toggle input:checked + span { background: var(--color-primary); }
.td-poll-switch input:checked + span::after, .td-poll-toggle input:checked + span::after { transform: translateX(13px); }
.td-poll-toggle:has(input:disabled) { opacity: .55; cursor: not-allowed; }

.td-poll-advanced { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.td-poll-field-box { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--color-border-tertiary); }
.td-poll-field-box span { color: var(--color-text-secondary); font-size: .72rem; font-weight: 800; }
.td-poll-field-box input, .td-poll-field-box select {
  width: 100%; padding: 0; border: 0; background: transparent;
  color: var(--color-text-primary); font-size: .84rem; font-weight: 700; font-family: inherit;
}
/* 직접 마감 시한 — datetime-local 은 OS 로캘에 따라 12시간제(오전/오후)로 보일 수 있어
   날짜 + 시(24h)/분(5분 단위) select 조합으로 표기를 고정한다 */
.td-poll-deadline-inputs { display: flex; align-items: center; gap: 4px; }
.td-poll-deadline-inputs input[type="date"] { flex: 1 1 auto; min-width: 0; }
.td-poll-deadline-inputs select { flex: 0 0 auto; width: auto; cursor: pointer; }
.td-poll-deadline-inputs span { color: var(--color-text-secondary); font-weight: 800; }
.td-poll-toggle-grid { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.td-poll-toggle { align-items: flex-start; grid-template-columns: 26px minmax(0, 1fr); padding: 10px; border: 1px solid var(--color-border-tertiary); }
.td-poll-toggle > span { margin-top: 2px; }
.td-poll-toggle b { display: block; color: var(--color-text-primary); font-size: .8rem; }
.td-poll-toggle small { display: block; color: var(--color-text-secondary); font-size: .7rem; font-weight: 600; }

/* 실시간 미리보기 */
.td-poll-preview { padding: 13px 14px; background: var(--tdv-green-soft); border: 1px solid var(--tdv-green-line); }
.td-poll-preview-label { display: flex; align-items: center; justify-content: space-between; color: var(--color-primary); font-size: .68rem; font-weight: 800; letter-spacing: .08em; }
.td-poll-preview-label b { padding: 3px 6px; background: var(--color-background-primary); font-size: .68rem; }
.td-poll-preview h3 { margin: 8px 0 10px; color: var(--color-text-primary); font-size: 1rem; letter-spacing: -.02em; }
.td-poll-preview-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.td-poll-preview-options span {
  padding: 7px 8px; background: var(--color-background-primary);
  border: 1px solid var(--tdv-green-line);
  color: var(--color-text-primary); font-size: .78rem; font-weight: 700;
}
.td-poll-preview-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.td-poll-preview-tags:empty { display: none; }
.td-poll-preview-tags span { padding: 3px 6px; background: var(--color-background-primary); border: 1px solid var(--tdv-green-line); color: var(--color-primary); font-size: .68rem; font-weight: 800; }
.td-poll-preview-tags .tag-anonymous { border-color: #d7c9ed; color: #73539a; }
.td-poll-preview-tags .tag-reminder { border-color: #e5c98a; color: #8e6610; }
.td-poll-preview-tags .tag-game { border-color: #abc9db; color: #2f5b73; }

.td-poll-preview p { margin: 9px 0 0; color: var(--color-text-secondary); font-size: .74rem; }

.td-poll-composer-foot {
  flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  margin-top: 16px; padding: 13px 22px; border-top: 1px solid var(--color-border-tertiary);
}
/* 취소·투표 올리기 — 이 페이지 전체의 각진(border-radius:0) 톤에 맞추고, 패딩·테두리를
   동일하게 맞춰 높이가 정확히 일치하도록 전용 클래스로 분리(공용 .td-btn류와 무관) */
.td-poll-foot-btn {
  box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 18px;
  border: 1px solid transparent; border-radius: 0;
  font-size: .9rem; font-weight: 800; font-family: inherit;
  cursor: pointer;
}
.td-poll-foot-btn-cancel {
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
  border-color: var(--color-border-tertiary);
}
.td-poll-foot-btn-cancel:hover { background: var(--color-neutral-200); }
.td-poll-foot-btn-submit { background: var(--color-primary); color: var(--color-white); }
.td-poll-foot-btn-submit:hover { background: var(--color-primary-hover); }

@media (max-width: 600px) {
  .td-poll-composer-overlay { align-items: flex-end; padding: 0; }
  .td-poll-composer { max-height: min(92vh, 780px); }
  .td-poll-advanced { grid-template-columns: 1fr; }
  .td-poll-toggle-grid { grid-template-columns: 1fr; }
  .td-poll-preview-options { grid-template-columns: 1fr; }
}