/* Aside — 내 편만 말해 주는 편파중계. 모바일 우선, 흰 바닥(사용자 결정 10-22)에 팀 색(--team)이 들어간다. */
:root {
  --bg: #f6f7f9; --panel: #ffffff; --panel2: #f0f2f5; --line: #e2e5ea; --fg: #15171c; --muted: #6b7280; --dim: #9aa0ab;
  --team: #e5484d; --team-fg: #fff; --ok: #1f9d61; --warn: #c97a00; --live: #e5304f;
  --radius: 14px; --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 16px; line-height: 1.45; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-left)) calc(48px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right)); }
@media (max-width: 480px) { body { font-size: 15px; } header.top { padding-top: max(12px, env(safe-area-inset-top)); } header.top .brand small { display: none; } header.top .brand { font-size: 17px; letter-spacing: 0; gap: 6px; } header.top nav a { margin-left: 4px; font-size: 15px; } }   /* 이름이 길어져(10-25 콘치즈 편파중계) 폰에서 메뉴가 잘렸다 */
header.top { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 10px; }
header.top h1.site { margin: 0; font-size: inherit; font-weight: inherit; }   /* 검색용 h1(10-29) — 모양은 .brand 그대로 */
header.top .brand { font-weight: 800; letter-spacing: .02em; font-size: 20px; display: flex; align-items: center; gap: 8px; }
header.top .brand small { font-weight: 500; color: var(--muted); font-size: 12px; }
header.top nav a { color: var(--muted); font-size: 14px; margin-left: 8px; display: inline-block; padding: 8px 4px; }   /* 누르는 칸 높이 32px 넘게(10-25 hub 실측 17px) */
header.top nav a.on { color: var(--fg); }
.logo { width: 24px; height: 24px; border-radius: 6px; background: url(/static/icon.svg?v=2) center / cover no-repeat; display: inline-block; flex: none; }   /* conchiz 브랜드 아이콘(10-25 메가폰) */
h1 { font-size: 22px; margin: 16px 0 10px; }
h2 { font-size: 15px; color: var(--muted); margin: 22px 0 8px; font-weight: 600; letter-spacing: .02em; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.small { font-size: 13px; }
.row { display: flex; align-items: center; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.card + .card { margin-top: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; cursor: pointer; font-weight: 600; font-size: 14px; min-height: 36px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn:hover { border-color: var(--muted); background: #e9ebef; }
.btn.primary:hover { background: var(--team); filter: brightness(.95); }
.btn.primary { background: var(--team); border-color: var(--team); color: var(--team-fg); }
.btn.small { padding: 5px 10px; font-size: 13px; border-radius: 8px; }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .5; cursor: default; }
.pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--panel2); color: var(--muted); letter-spacing: .03em; }
.pill.live { background: var(--live); color: #fff; animation: pulse 1.6s infinite; }
.pill.team { background: var(--team); color: var(--team-fg); }
.pill.ok { background: rgba(31,157,97,.12); color: var(--ok); }
.pill.warn { background: rgba(201,122,0,.12); color: var(--warn); }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
.onair { background: var(--team); color: var(--team-fg); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.onair .t { font-size: 12px; opacity: .85; font-weight: 700; letter-spacing: .08em; }
.onair .m { font-size: 18px; font-weight: 800; margin-top: 4px; }
.onair .s { font-size: 13px; opacity: .85; margin-top: 2px; }
/* 경기판 */
.game { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px; }
.game .when { font-size: 13px; color: var(--muted); line-height: 1.25; }
.game .when b { color: var(--fg); font-size: 15px; display: block; }
.game .teams { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.game .team { display: flex; align-items: center; gap: 8px; }
.game .team img { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; }
.game .team .n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game .team .sc { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 1.6em; text-align: right; }
.game .act { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.game .act a.btn { white-space: nowrap; }
.game.fin { opacity: .72; }
.league-h { font-size: 12px; color: var(--muted); font-weight: 700; margin: 18px 0 6px; letter-spacing: .06em; }
/* 중계 화면 */
.board { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.board .lg { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.board .lg > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* 리그·장소가 길면 줄인다 — 두 줄로 쪼개지고 공유 단추가 밀렸다(10-23) */
.board .lg > span:last-child { flex: none; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.board .score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 10px 0 4px; }
.board .score .t { text-align: center; font-weight: 700; font-size: 15px; word-break: keep-all; }   /* 낱말 가운데서 끊지 않는다(수원 KT 소 / 닉붐, 10-23) */
.board .score .t.us { color: var(--team); }
.board .score .t img { display: block; margin: 0 auto 6px; width: 40px; height: 40px; object-fit: contain; }
.board .score .n { font-size: 40px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.board .period { text-align: center; color: var(--muted); font-size: 13px; }
.board .sync { text-align: center; font-size: 11px; color: var(--dim); margin-top: 4px; }
.player { margin-top: 12px; }
@media (max-width: 720px) { .player.stick { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 8px 0; margin: 0 -16px; padding-left: 16px; padding-right: 16px; border-bottom: 1px solid var(--line); } }
.player .big { width: 100%; padding: 16px; font-size: 17px; border-radius: 14px; }
.player .meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 8px; }
.sides { display: flex; gap: 8px; margin-top: 12px; }
.sides a { flex: 1; text-align: center; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-weight: 600; font-size: 14px; }
.sides a.on { border-color: var(--team); background: var(--team); color: var(--team-fg); }
.sides a .r { display: block; font-size: 11px; font-weight: 500; opacity: .8; }
.said { margin-top: 14px; min-height: 64px; }
.said .line { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 15px; }
.said .line .who { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--muted); padding-top: 3px; width: 54px; }
.said .line.B .who { color: var(--team); }
.chat { margin-top: 16px; }
.chat .log { max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.chat .msg { font-size: 14px; }
.chat .msg .nick { font-weight: 700; color: var(--muted); margin-right: 6px; font-size: 13px; }
.chat .msg.them .nick { color: var(--warn); }
.chat form { display: flex; gap: 6px; margin-top: 8px; }
.chat input { flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.chat input.nick { flex: 0 0 90px; }
.chat input { min-width: 0; } .chat form .btn { flex: none; }
@media (max-width: 400px) { .chat input.nick { flex-basis: 72px; } }
.chars { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chars .c { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.chars .c b { display: block; font-size: 14px; }
.chars .c i { color: var(--muted); font-style: normal; }
.empty { padding: 28px 10px; text-align: center; color: var(--muted); }
footer { margin-top: 32px; font-size: 12px; color: var(--dim); text-align: center; }
footer > a { display: inline-block; padding: 9px 10px; }   /* 문의하기 — 누르는 칸 32px 넘게(10-25) */
footer .family { margin-top: 4px; font-size: 12px; line-height: 1.4; } footer .family span { white-space: nowrap; display: inline-block; }   /* 구분점 + 링크를 한 묶음 — 줄이 '·'로 시작하지 않게. 목록·점(" ·", 앞 묶음 끝)은 공통 부품(brand web/family.js)이 그린다 */
footer .family a, footer .family b { color: inherit; display: inline-block; padding: 8px 4px; } footer .family b { font-weight: 600; }   /* conchiz 제품군(10-25) */
/* 관리 */
.admin { max-width: 1080px; }
.admin .tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin th, .admin td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin th { color: var(--muted); font-weight: 600; }
.admin textarea { width: 100%; min-height: 90px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.admin input[type=text], .admin input[type=date], .admin input[type=number], .admin select { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.admin pre { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px; font-size: 12px; max-height: 420px; overflow: auto; white-space: pre-wrap; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.tabs .btn.on { border-color: var(--team); color: var(--team); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .grid2 { grid-template-columns: 1fr; } }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.kv b { color: var(--muted); font-weight: 600; }

/* 관리 화면 — 좁은 화면에선 표 한 줄을 카드로(td 의 data-label 이 머리글) */
@media (max-width: 760px) {
  .admin .wrap, .wrap.admin { padding-left: 12px; padding-right: 12px; }
  .admin table.cards, .admin table.cards tbody, .admin table.cards tr, .admin table.cards td { display: block; width: 100%; }
  .admin table.cards thead { display: none; }
  .admin table.cards tr { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; }
  .admin table.cards td { border: 0; padding: 4px 0; display: flex; gap: 8px; align-items: flex-start; }
  .admin table.cards td::before { content: attr(data-label); flex: 0 0 64px; color: var(--muted); font-weight: 600; }
  .admin table.cards td.row { flex-wrap: wrap; }
  .admin table.cards td.row::before { flex-basis: 100%; }
  .admin table.cards td:empty { display: none; }
  .admin textarea { min-height: 120px; }
  .admin .tabs .btn { flex: 1 1 auto; }
}

/* 화면들(10-22 껍데기로 합치며 옮김) */
.pick h1 { margin-top: 28px; }
.pick .lg { margin: 18px 0 8px; font-size: 13px; color: var(--muted); font-weight: 700; letter-spacing: .06em; display: flex; justify-content: space-between; }
.pick .lg .cur { font-weight: 500; }
.pick .teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.pick .t { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 6px 10px; text-align: center; cursor: pointer; font-size: 13px; font-weight: 600; }
.pick .t img { width: 44px; height: 44px; object-fit: contain; display: block; margin: 0 auto 6px; }
.pick .t:hover { border-color: var(--team); }
.pick .t.on { border-color: var(--team); box-shadow: 0 0 0 2px color-mix(in srgb, var(--team) 25%, transparent); }
.pick .t.on::after { content: "✓"; position: absolute; top: 6px; right: 8px; color: var(--team); font-weight: 800; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 4px 0 14px; }
.chips a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; font-weight: 600; }
.chips a.on { border-color: var(--team); color: var(--team); }
.chips a img { width: 18px; height: 18px; object-fit: contain; }
.chips a.add { color: var(--muted); }
.hero { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.hero img.logo-big { width: 64px; height: 64px; object-fit: contain; }
.hero .name { font-size: 22px; font-weight: 800; }
.hero .st { color: var(--muted); font-size: 14px; }
.hero .vs { font-size: 17px; font-weight: 700; }
.hero .btn.big { width: 100%; padding: 16px; font-size: 17px; border-radius: 14px; margin-top: 4px; }
.hero.live { border-color: var(--team); box-shadow: 0 0 0 3px color-mix(in srgb, var(--team) 20%, transparent); }
.days { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 0 8px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
.days::-webkit-scrollbar { display: none; }
.days a { flex: 0 0 auto; width: 54px; text-align: center; padding: 8px 0 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-size: 12px; color: var(--muted); position: relative; }
.days a b { display: block; font-size: 16px; color: var(--fg); }
.days a.on { border-color: var(--team); background: var(--team); color: var(--team-fg); }
.days a.on b { color: var(--team-fg); }
.days a .n { display: inline-block; margin-top: 3px; font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 999px; background: var(--panel2); color: var(--muted); }
.days a.on .n { background: #fff3; color: var(--team-fg); }
.days a .n.live { background: var(--live); color: #fff; }
.toggle { display: flex; gap: 6px; margin: 4px 0 10px; }
.toggle a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; font-weight: 600; color: var(--muted); }
.toggle a.on { border-color: var(--team); color: var(--team); }
.choose { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.choose a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); font-weight: 700; text-align: center; }
.choose a img { width: 52px; height: 52px; object-fit: contain; }
.choose a:hover { border-color: var(--team); }
.wait { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.wait .steps { list-style: none; padding: 0; margin: 10px 0; }
.wait .steps li { padding: 5px 0; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.wait .steps li.done { color: var(--fg); }
.wait .steps li.cur { color: var(--fg); font-weight: 700; }   /* 'now' 는 전체 화면(.now — position: fixed)과 이름이 겹쳐 줄이 겹쳤다(10-26) */
.wait .steps li .i { width: 18px; text-align: center; }
.spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--line); border-top-color: var(--team); border-radius: 50%; animation: sp 0.9s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
/* 미니 플레이어 — 경기 화면 밖에서 듣는 중일 때 아래에 붙는다 */
.mini { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 10px max(14px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(0,0,0,.08); }
.mini[hidden] { display: none; }
.mini .mi-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.mini .mi-info img { width: 32px; height: 32px; object-fit: contain; }
.mini .mi-info span { display: flex; flex-direction: column; min-width: 0; }
.mini .mi-info b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .mi-info i { font-style: normal; font-size: 12px; color: var(--muted); }
.mini .mi-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel2); font-size: 16px; cursor: pointer; }
body.has-mini .wrap { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
/* 경기 화면 — 상태별 */
.result { text-align: center; padding: 10px 0 2px; font-size: 20px; font-weight: 800; }
.result.w { color: var(--ok); } .result.l { color: var(--live); } .result.d { color: var(--muted); }
.ptable { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.ptable th, .ptable td { border-bottom: 1px solid var(--line); padding: 5px 4px; text-align: center; }
.ptable td:first-child, .ptable th:first-child { text-align: left; white-space: nowrap; }
.evs { list-style: none; padding: 0; margin: 6px 0 0; }
.evs li { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.evs li .w { flex: 0 0 64px; color: var(--muted); font-size: 12px; padding-top: 2px; }
.evs li.score b { color: var(--team); }
.evs li .s { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--panel2); color: var(--muted); height: fit-content; }
.lineups { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 13px; }
.lineups ol { margin: 4px 0 0; padding-left: 18px; }
.modebar { display: flex; justify-content: center; gap: 6px; margin-top: 8px; font-size: 12px; }
.modebar .pill.rt { background: rgba(229,48,79,.12); color: var(--live); }
.msg .tag { color: var(--dim); font-size: 11px; margin-left: 2px; }
.msg .fan { font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 999px; background: rgba(201,122,0,.14); color: var(--warn); margin-right: 4px; }
.msg .rep { color: var(--dim); font-size: 11px; margin-left: 6px; cursor: pointer; }
.msg.mine .nick { color: var(--team); }
.allg { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); margin: 0 0 6px; }

/* 경기 전 자료 그림(10-22) — 우리 편(.us)은 팀 색, 상대(.them)는 회색 */
.pv-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 10px; }
.pv-head .t { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.pv-head .t img { width: 44px; height: 44px; object-fit: contain; }
.pv-head .t b { font-size: 15px; }
.pv-head .rk { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--panel2); color: var(--muted); }
.pv-head .t.us .rk { background: var(--team); color: var(--team-fg); }
.pv-head .vs { color: var(--dim); font-weight: 800; font-size: 13px; }
.cmp { display: grid; grid-template-columns: 80px 1fr 36px 1fr 80px; align-items: center; gap: 6px; padding: 5px 0; font-size: 14px; }
.cmp .v { font-weight: 700; white-space: nowrap; font-size: 13px; } .cmp .v.r { text-align: right; }
.cmp .k { text-align: center; color: var(--muted); font-size: 12px; }
.cmp .bar { height: 8px; background: var(--panel2); border-radius: 99px; overflow: hidden; display: flex; }
.cmp .bar.l { justify-content: flex-end; }
.cmp .bar i { display: block; height: 100%; border-radius: 99px; background: #b8bec8; }
.cmp .bar.us i { background: var(--team); }
.pv-form .fr { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.pv-form .fr + .fr { border-top: 1px dashed var(--line); }
.pv-form .tn, .pv-pl .tn { flex: 0 0 72px; font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips5 { display: flex; gap: 5px; flex: 1; min-width: 0; }
.chips5 .f { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; border-radius: 8px; padding: 4px 2px; background: var(--panel2); font-size: 10px; color: var(--muted); line-height: 1.3; }
.chips5 .f b { font-size: 14px; }
.chips5 .f span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips5 .f.W { background: rgba(31,157,97,.12); } .chips5 .f.W b { color: var(--ok); }
.chips5 .f.L { background: rgba(229,48,79,.10); } .chips5 .f.L b { color: var(--live); }
.pv-h2h .sum { display: flex; justify-content: space-between; align-items: center; font-size: 16px; margin-bottom: 6px; }
.pv-h2h .sum .us { color: var(--team); }
.pv-h2h .g { display: grid; grid-template-columns: 44px 1fr auto 1fr; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px dashed var(--line); font-size: 13px; }
.pv-h2h .g .d { color: var(--muted); font-size: 12px; }
.pv-h2h .g span:nth-child(2) { text-align: right; }
.pv-h2h .g .win { font-weight: 800; }
.pv-pl { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; border-left: 4px solid #b8bec8; }
.pv-pl.us { border-left-color: var(--team); }
.pv-pl .tn { margin-bottom: 4px; color: var(--muted); }
.pv-pl .p { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.pv-pl .p + .p { border-top: 1px dashed var(--line); }
.pv-pl .ph { position: relative; flex: 0 0 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--panel2); display: flex; align-items: center; justify-content: center; color: var(--muted); font-weight: 700; }
.pv-pl .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pv-pl .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pv-pl .nm b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-pl .nm span { font-size: 11px; color: var(--muted); }
.pv-pl .st { display: flex; gap: 4px; }
.pv-pl .st div { display: flex; flex-direction: column; align-items: center; min-width: 38px; padding: 3px 4px; border-radius: 8px; background: var(--panel2); }
.pv-pl .st b { font-size: 14px; } .pv-pl .st span { font-size: 10px; color: var(--muted); }
@media (max-width: 400px) { .pv-pl .st div { min-width: 32px; } .pv-pl .st b { font-size: 13px; } .cmp { grid-template-columns: 88px 1fr 30px 1fr 88px; gap: 4px; } .cmp .v { font-size: 12px; } }

/* 내 팀 관리(10-22) */
.pick .note { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--team) 10%, #fff); color: var(--fg); font-size: 14px; font-weight: 600; }
.pick .mine { margin-top: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 12px; }
.pick .mine .m { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.pick .mine .m + .m { border-top: 1px dashed var(--line); }
.pick .mine img { width: 32px; height: 32px; object-fit: contain; }
.pick .mine .grow { display: flex; flex-direction: column; } .pick .mine .grow span { font-size: 12px; color: var(--muted); }
.pick .done { position: sticky; bottom: 0; padding: 14px 0 calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 30%); text-align: center; margin-top: 10px; }

/* 리그·팀·선수·뉴스(10-22) */
h2 .more { float: right; font-size: 12px; font-weight: 600; color: var(--muted); }
.lgchips { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-bottom: 8px; scrollbar-width: none; }
.lgchips a { white-space: nowrap; }
.face { position: relative; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--panel2); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-weight: 700; font-style: normal; }
.face i { font-style: normal; }
.face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.face.big { width: 48px; height: 48px; } .face.huge { width: 96px; height: 96px; font-size: 32px; }
.tablecard { padding: 4px 6px; overflow-x: auto; }
table.stand { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.stand th { color: var(--muted); font-weight: 600; font-size: 11px; padding: 8px 4px; text-align: center; border-bottom: 1px solid var(--line); }
table.stand td { padding: 8px 4px; text-align: center; border-bottom: 1px dashed var(--line); white-space: nowrap; }
table.stand tr:last-child td { border-bottom: 0; }
table.stand .tm { text-align: left; font-weight: 600; } table.stand td.tm img { width: 20px; height: 20px; object-fit: contain; vertical-align: -5px; margin-right: 6px; }
table.stand tr[data-href] { cursor: pointer; }
table.stand tr.me td { background: color-mix(in srgb, var(--team) 10%, #fff); } table.stand tr.me td:first-child { box-shadow: inset 3px 0 0 var(--team); }
.leaders { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 600px) { .leaders { grid-template-columns: 1fr 1fr; } }
.lc { padding: 10px 12px; } .lc .h { font-weight: 800; margin-bottom: 4px; }
.lc .p { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--line); }
.lc .p:first-of-type { border-top: 0; }
.lc .rk { width: 16px; text-align: center; color: var(--muted); font-weight: 700; font-size: 13px; }
.lc .grow { display: flex; flex-direction: column; min-width: 0; } .lc .grow b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc .grow span { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 4px; } .lc .grow span img { width: 14px; height: 14px; object-fit: contain; }
.lc .val { font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.lc .p.top .val { font-size: 20px; color: var(--team); }
.lc .p.me .grow b { color: var(--team); }
.news { display: flex; flex-direction: column; gap: 8px; }
.news .n { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.news .n .grow { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.news .n b { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news .n span { font-size: 12px; color: var(--muted); }
.news .n img { flex: 0 0 84px; width: 84px; height: 60px; object-fit: cover; border-radius: 8px; background: var(--panel2); }
.teamhead { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.teamhead .grow { min-width: 140px; }   /* 이름 칸이 버튼에 밀려 한 글자씩 세로로 쪼개지던 것(10-23) — 좁으면 버튼이 아래 줄로 */
@media (max-width: 520px) { .teamhead #mybtn { order: 3; flex: 1 1 100%; } .teamhead #mybtn .btn { width: 100%; white-space: normal; } }
.teamhead img { width: 56px; height: 56px; object-fit: contain; } .teamhead h1 { margin: 0 0 2px; font-size: 20px; }
.boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; margin-top: 14px; }
.boxes div { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 6px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.boxes b { font-size: 17px; white-space: nowrap; } .boxes b small { font-size: 12px; color: var(--muted); font-weight: 600; } .boxes span { font-size: 11px; color: var(--muted); }
.list { padding: 2px 12px; } .list .li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px dashed var(--line); font-size: 14px; }
.list .li:first-child { border-top: 0; } .list .li .d { color: var(--muted); font-size: 13px; flex: 0 0 auto; }
.chips5 a.f { color: var(--muted); }
.roster { padding: 8px 12px; } .roster + .roster { margin-top: 8px; } .roster .h { font-weight: 800; font-size: 13px; margin-bottom: 2px; }
.roster .p { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--line); }
.roster .h + .p { border-top: 0; }
.roster .no { width: 24px; text-align: center; color: var(--muted); font-size: 12px; font-weight: 700; }
.roster .p b.grow { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster .st { display: flex; gap: 8px; font-size: 10px; color: var(--muted); } .roster .st span { display: flex; flex-direction: column; align-items: center; min-width: 30px; } .roster .st b { font-size: 13px; color: var(--fg); }
.person { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.person.us .face { box-shadow: 0 0 0 3px var(--team); }
.person h1 { margin: 0 0 2px; } .person .tm { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 600; font-size: 14px; }
.person .tm img { width: 20px; height: 20px; object-fit: contain; }
.statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.statgrid div { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 4px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.statgrid b { font-size: 18px; font-variant-numeric: tabular-nums; } .statgrid span { font-size: 11px; color: var(--muted); }
.boxes.three { grid-template-columns: repeat(3, 1fr); } .boxes .wide { grid-column: span 2; }
.roster details summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 600; padding: 8px 0 4px; border-top: 1px dashed var(--line); list-style: none; text-align: center; }
.roster details summary::-webkit-details-marker { display: none; }
.roster details[open] summary { display: none; }

/* 편파 한 줄(10-22) */
/* 하루 코너 전체 화면(10-23) */
.clip-ctl { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 14px; }
.clip-bar { display: flex; align-items: center; gap: 10px; margin: 12px 4px 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.clip-bar input { flex: 1; accent-color: var(--team); }
.clip-script { margin-top: 6px; }
.clip-script h3 { font-size: 13px; color: var(--muted); margin: 14px 0 4px; }
.clip-script p { margin: 0; padding: 6px 8px; border-radius: 8px; line-height: 1.5; font-size: 15px; color: var(--muted); }
.clip-script p b { color: var(--fg); margin-right: 4px; font-size: 13px; }
.clip-script p.on { background: color-mix(in srgb, var(--team) 12%, #fff); color: var(--fg); }
/* 문의하기(10-24) — 이름표 위, 칸은 전체 폭 */
.contact > label { display: block; margin-bottom: 4px; }
.contact > input, .contact > textarea { display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 10px 12px;   /* 16px 아래면 iOS 가 누를 때 확대한다(10-25) */
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.contact > textarea { resize: vertical; min-height: 120px; }
.contact .chips { flex-wrap: wrap; justify-content: flex-start; }
/* 문자 중계 한 줄 — 팀 색 띠(10-23) */
.fl { padding: 4px 0 4px 8px; border-left: 3px solid transparent; margin: 2px 0; }
.fl b { font-size: 12px; }
/* 하루 예정·하루 정리(10-23) */
.shows { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.shows .sh { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.shows .sh .ic { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; background: var(--panel2); overflow: hidden; }
.shows .sh .ic img { width: 34px; height: 34px; object-fit: contain; }
.shows .sh.recap .ic { background: #1d2340; color: #f6d77a; }
.shows .sh.preview .ic { background: #fff4d6; color: #e08a00; }
.shows .sh .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shows .sh b { font-size: 15px; }
.shows .sh i { font-style: normal; font-size: 12px; color: var(--muted); }
.shows .sh .sh-tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; vertical-align: 2px; margin-left: 4px; }
.shows .sh .sh-tag.new { background: var(--team); color: var(--team-fg); } .shows .sh .sh-tag.done { background: var(--panel2); color: var(--muted); }
.shows .sh.heard b { color: var(--muted); }
.shows .sh em { font-style: normal; flex: 0 0 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--team); color: var(--team-fg); font-size: 14px; }
.quip { margin-top: 12px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--team); border-radius: 12px; padding: 10px 14px; }
.quip .who { font-size: 11px; font-weight: 700; color: var(--team); letter-spacing: .02em; }
.quip p { margin: 4px 0 0; font-size: 15px; font-weight: 600; line-height: 1.45; }
.quip.wait p { color: var(--dim); }
/* 운영 현장음(10-22) */
.sndpick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .sndpick label { border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 12px; background: var(--panel); cursor: pointer; }
.sndpick label:has(input:checked) { border-color: var(--team); background: color-mix(in srgb, var(--team) 8%, #fff); } .sndpick a { color: var(--team); margin-left: 2px; }
.sndreact { border-top: 1px dashed var(--line); padding: 8px 0; }
.sndmore summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; font-size: 12px; }
.sndmore summary::-webkit-details-marker { display: none; } .sndmore .chip { border: 1px solid var(--team); border-radius: 999px; padding: 3px 10px; background: color-mix(in srgb, var(--team) 8%, #fff); }
.sndmore[open] summary .muted { display: none; }
.lc .p.mine { border-top: 2px dotted var(--team); margin-top: 2px; } .lc .p.mine .rk { width: auto; min-width: 16px; color: var(--team); }
/* 선수 대 선수(10-22) */
.vsbtn { width: 100%; margin-top: 12px; }
.vs-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 14px; }
.vs-p { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.vs-p .face.big { width: 72px; height: 72px; } .vs-p.us .face { box-shadow: 0 0 0 3px var(--team); }
.vs-p b { font-size: 16px; } .vs-p span { font-size: 12px; color: var(--muted); }
.vs-head .vs { font-weight: 800; color: var(--dim); }
.vs-pick { text-align: center; margin-top: 8px; color: var(--muted); } .vs-pick select { margin-left: 6px; }
.vs-sum { display: flex; justify-content: space-between; margin-top: 14px; font-size: 14px; }
.vs-sum b { font-size: 24px; margin-right: 4px; } .vs-sum .us b { color: var(--team); } .vs-sum .them { color: var(--muted); }
.vs-rows { margin-top: 10px; }
.vsr .v.win { color: var(--team); } .vsr .v.r.win { color: var(--fg); }
.vsr .k small { margin-left: 2px; color: var(--dim); }
.vsr.a { background: color-mix(in srgb, var(--team) 6%, transparent); border-radius: 8px; }
/* 경기 전 맞대결(10-22) */
.mu { padding: 10px 12px; } .mu + .mu { margin-top: 8px; }
.mu-h { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 6px; }
.mu-h a.us, .mu-h a.them { display: flex; align-items: center; gap: 8px; min-width: 0; } .mu-h a.them { justify-content: flex-end; }
.mu-h b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mu-h .us .face { box-shadow: 0 0 0 2px var(--team); }
.mu-h .more { font-size: 12px; color: var(--muted); }
.mu-r { display: grid; grid-template-columns: 1fr 70px 1fr; text-align: center; padding: 4px 0; border-top: 1px dashed var(--line); font-size: 14px; font-variant-numeric: tabular-nums; }
.mu-r span:first-child { text-align: left; padding-left: 8px; } .mu-r span:last-child { text-align: right; padding-right: 8px; }
.mu-r .k { color: var(--muted); font-size: 12px; } .mu-r .win { font-weight: 800; color: var(--team); } .mu-r .win.them { color: var(--fg); }
/* 편파 리포트(10-22) */
.report { margin-top: 12px; text-align: center; border-top: 5px solid var(--team); }
.report .rh { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-weight: 700; }
.report .big { font-size: 28px; font-weight: 900; margin-top: 8px; } .report.w .big { color: var(--team); } .report.l .big { color: var(--muted); }
.report .big b { margin-left: 6px; color: var(--fg); } .report .vsx { color: var(--muted); font-size: 14px; }
.rstars { margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .rstars .h { width: 100%; font-size: 12px; color: var(--muted); font-weight: 700; }
.rstars .s { display: flex; flex-direction: column; align-items: center; gap: 3px; } .rstars .face { width: 52px; height: 52px; box-shadow: 0 0 0 2px var(--team); }
.rstars b { font-size: 14px; } .rstars span { font-size: 12px; color: var(--muted); }
.report blockquote { margin: 14px 4px 10px; font-size: 15px; font-weight: 700; line-height: 1.5; } .report cite { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 4px; }
/* 시즌 흐름(10-22) */
.season svg { width: 100%; height: 120px; display: block; } .season .zero { stroke: var(--line); stroke-dasharray: 4 3; stroke-width: 1; }
.season .ln { fill: none; stroke: var(--team); stroke-width: 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.season circle.W { fill: var(--team); } .season circle.L { fill: #b8bec8; } .season circle.D { fill: var(--dim); }
.season .sf { display: flex; justify-content: space-between; margin: 6px 0 2px; font-size: 13px; color: var(--muted); } .season .sf b { color: var(--fg); font-size: 15px; }
/* 라이벌전(10-22) */
.pill.rival { background: #fff1e6; color: #d9480f; margin-left: 4px; }
.game .rv-tag { align-self: flex-start; margin: 0 0 2px; font-size: 11px; padding: 1px 8px; }   /* 경기판 카드 — 시간 칸(56px)에 넣으면 팀 로고와 겹쳤다(10-23), 팀 칸 맨 위로 */
.rival { text-align: center; margin-top: 8px; font-weight: 800; color: #d9480f; font-size: 14px; }
.report #share { margin-top: 10px; }
/* 심장 박동(10-22) */
.heart { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .heart .hb { font-size: 30px; color: var(--live); animation: beat 1s ease-in-out infinite; display: inline-block; }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } }
.heart .bpm { font-weight: 800; color: var(--live); font-variant-numeric: tabular-nums; } .hbar { height: 8px; border-radius: 99px; background: var(--panel2); margin: 6px 0 4px; overflow: hidden; }
.hbar i { display: block; height: 100%; background: linear-gradient(90deg, #f59f00, var(--live)); border-radius: 99px; }
/* 우리 선수 바꾸기 — 사진 줄·전체 창(10-22) */
.vs-strip-h { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 12px; color: var(--muted); font-weight: 700; }
button.link { background: none; border: 0; color: var(--team); font-weight: 700; font-size: 12px; cursor: pointer; padding: 4px; }
.vs-strip { display: flex; gap: 6px; overflow-x: auto; padding: 6px 2px 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
.vs-strip::-webkit-scrollbar { display: none; }
.vc { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; padding: 4px 2px; border-radius: 12px; cursor: pointer; scroll-snap-align: center; font: inherit; color: inherit; }
.vc .face { width: 44px; height: 44px; } .vc b { font-size: 12px; max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vc span { font-size: 10px; color: var(--muted); }
.vc.on { background: color-mix(in srgb, var(--team) 10%, transparent); } .vc.on .face { box-shadow: 0 0 0 2.5px var(--team); } .vc.on b { color: var(--team); }
.vsep { flex: 0 0 1px; background: var(--line); margin: 8px 4px; }
.vs-sheet { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.vs-sheet .sh { background: var(--panel); width: 100%; max-width: 720px; max-height: 78vh; overflow-y: auto; border-radius: 18px 18px 0 0; padding: 14px 14px calc(18px + env(safe-area-inset-bottom)); animation: up .18s ease-out; }
@keyframes up { from { transform: translateY(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.vs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; margin-top: 6px; } .vs-grid .vc { flex: none; width: auto; }
/* 운영 팀 고르기 격자(10-22) */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; margin-top: 6px; }
.tpick { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; font: inherit; color: inherit; }
.tpick img { width: 34px; height: 34px; object-fit: contain; } .tpick b { font-size: 12px; } .tpick i { position: absolute; top: 4px; right: 6px; font-style: normal; color: var(--ok); font-weight: 800; font-size: 12px; }
.tpick.on { border-color: var(--team); box-shadow: 0 0 0 2px color-mix(in srgb, var(--team) 25%, transparent); }
.rteam img { width: 18px; height: 18px; object-fit: contain; }
/* 에뮬 회차(10-22) */
.emu-banner { margin-top: 10px; background: #fff8e6; border-color: #f5d48a; font-size: 13px; } .list .li.on { background: color-mix(in srgb, var(--team) 8%, transparent); border-radius: 8px; }
.egame img { width: 22px; height: 22px; object-fit: contain; }
/* 모바일 다시 보기(10-22) */
#quip:not(:empty) { margin-bottom: 10px; }
.evs-more summary { cursor: pointer; list-style: none; text-align: center; color: var(--muted); font-size: 13px; font-weight: 600; padding: 8px 0 2px; } .evs-more summary::-webkit-details-marker { display: none; } .evs-more[open] summary { display: none; }
.grid2 > * { min-width: 0; }   /* 줄바꿈 없는 칩 줄이 칸을 넓혀 운영 화면이 가로로 넘쳤다(10-22 모바일) */
/* 날짜 띠 달력 단추(10-22) */
.days .cal { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: 52px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-size: 20px; cursor: pointer; }
.days .cal input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* 전체 화면 플레이어(10-22) */
.mini .mi-info { background: none; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.mini .mi-info em { font-style: normal; color: var(--muted); margin-left: auto; padding-right: 4px; }
.now { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0); transition: background .2s; }
.now.on { background: rgba(0,0,0,.3); }
.now-in { position: absolute; inset: 0; top: env(safe-area-inset-top); background: linear-gradient(180deg, color-mix(in srgb, var(--team) 14%, #fff) 0, var(--bg) 260px); border-radius: 18px 18px 0 0;
  transform: translateY(100%); transition: transform .22s ease-out; display: flex; flex-direction: column; padding: 8px max(16px, env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom)); max-width: 720px; margin: 0 auto; }
.now.on .now-in { transform: none; }
body.now-open { overflow: hidden; }
.now-top { display: flex; align-items: center; justify-content: space-between; } .now-x { background: none; border: 0; font-size: 28px; line-height: 1; padding: 4px 10px 4px 0; cursor: pointer; color: var(--fg); }
.now-team { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 4px; } .now-team img { width: 56px; height: 56px; object-fit: contain; } .now-team b { font-size: 19px; }
.now-score { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 8px; } .now-score div { display: flex; flex-direction: column; align-items: center; }
.now-score span { font-size: 11px; color: var(--muted); } .now-score b { font-size: 40px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; } .now-score i { font-style: normal; font-size: 28px; color: var(--dim); }
.now-period { text-align: center; color: var(--muted); font-size: 13px; }
.now-ctl { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.now-play { width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--team); color: var(--team-fg); font-size: 26px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.15); display: flex; align-items: center; justify-content: center; }
.now-msg { text-align: center; min-height: 18px; margin-top: 4px; }
.now-tabs { justify-content: center; margin-top: 6px; }
.now-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.now-said { max-height: none; } .now-chat .log { max-height: 48vh; }
.now-score .us b { color: var(--team); }
/* 점수판(10-22) */
.lboard { overflow-x: auto; margin-top: 10px; } .lboard table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.lboard th { font-size: 10px; color: var(--muted); font-weight: 600; padding: 2px 3px; } .lboard td { text-align: center; padding: 5px 3px; border-top: 1px solid var(--line); }
.lboard td.tm { text-align: left; font-weight: 700; white-space: nowrap; padding-right: 8px; } .lboard .tot { border-left: 1px solid var(--line); }
.lboard tr.us td { background: color-mix(in srgb, var(--team) 9%, transparent); } .lboard tr.us td.tm { color: var(--team); }
.lboard .rc { color: #e03131; font-size: 10px; letter-spacing: -1px; }
.situ { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 8px; } .situ.q-only { margin-top: 6px; }
.situ .dia { width: 52px; height: 52px; } .situ .dia rect { fill: var(--panel2); stroke: var(--dim); stroke-width: 1; } .situ .dia rect.on { fill: #f59f00; stroke: #e67700; } .situ .dia rect.home { fill: var(--panel); }
.situ .cnts { display: flex; flex-direction: column; gap: 3px; } .situ .cnt { display: flex; align-items: center; gap: 3px; font-size: 10px; } .situ .cnt i { font-style: normal; width: 10px; color: var(--muted); font-weight: 700; }
.situ .cnt em { width: 9px; height: 9px; border-radius: 50%; background: var(--panel2); border: 1px solid var(--line); } .situ .cnt em.on.B { background: #2f9e44; border-color: #2f9e44; } .situ .cnt em.on.S { background: #f59f00; border-color: #f59f00; } .situ .cnt em.on.O { background: #e03131; border-color: #e03131; }
.situ .q { font-size: 15px; }
.player .pfull { width: 100%; margin-top: 8px; font-size: 14px; }
/* 전체 화면 — 머리를 작게, 탭 칸을 넓게(10-22 휴대폰) */
.now-top { gap: 8px; } .now-id { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; } .now-id img { width: 30px; height: 30px; object-fit: contain; }
.now-id span { display: flex; flex-direction: column; min-width: 0; } .now-id b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .now-id i { font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.now-head .now-play { width: 52px; height: 52px; font-size: 20px; flex: none; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.now-head .now-score { margin-top: 0; gap: 12px; } .now-head .now-score b { font-size: 32px; }
.now-bt { flex: none; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; font-size: 12px; color: var(--muted); cursor: pointer; }
.now-period { margin-top: 2px; } .now-board .lboard { margin-top: 4px; }
.now-tabs { margin-top: 4px; } .now-body { margin-top: 4px; }
.now-said { max-height: none !important; overflow: visible !important; } .now-chat .log { max-height: none; border: 0; background: transparent; padding: 4px 0; }
.now-chat form { position: sticky; bottom: 0; background: var(--bg); padding: 6px 0 2px; margin-top: 4px; }
.now-body.chat-mode { display: flex; flex-direction: column; } .now-body.chat-mode .now-chat { flex: 1; display: flex; flex-direction: column; margin-top: 0; } .now-body.chat-mode .now-chat .log { flex: 1; }   /* 채팅 입력은 늘 아래 */
/* 운영 모바일 다시 보기(10-22) — 그리드 칸이 내용보다 작아지지 못해 입력칸·칩이 카드 밖으로, 상태 알약·작은 단추가 세로로 쪼개지던 것 */
.admin .kv > * { min-width: 0; } .admin .kv input[type=text], .admin .kv input:not([type]), .admin .kv textarea, .admin .kv select { max-width: 100%; }
.admin .kv span.row { flex-wrap: wrap; } .admin .kv span.row input { min-width: 120px; }
.pill { white-space: nowrap; } .btn.small { white-space: nowrap; }
.admin .sndpick label { max-width: 100%; }
.admin .egame { flex-wrap: wrap; row-gap: 2px; } .admin .egame > span { white-space: nowrap; } .admin .egame > span:first-child { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* 운영 머리글 — 폰에선 이메일을 줄이고 줄바꿈 없이(10-23: 이메일·나가기·청취 화면이 세 줄로 접혔다) */
.admin header.top nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 4px 0; white-space: nowrap; }
@media (max-width: 480px) { .admin .adm-who { max-width: 150px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; } }
/* 운영 하루 코너 목록(10-23) — 묶음(날짜·예정/정리) 안의 한 줄 */
.shgrp summary { cursor: pointer; }
.shrow { border-top: 1px solid var(--line); padding: 6px 0; }
.shrow > summary { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; cursor: pointer; list-style: none; }
.shrow > summary::-webkit-details-marker { display: none; }
.shrow .acts { display: flex; gap: 6px; } .shrow .m { grid-column: 1 / -1; }
/* 이름과 목소리 + 캐스터·해설(10-24 한 목록) — 줄마다 [성별] [이름] 목소리 ▶ [캐스터][해설], 폰에선 전체 폭(왼쪽 이름표 칸 아래로) */
.vnames { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 2px 12px; margin: 4px 0; }
.vrow { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 6px; border: 1px solid transparent; border-radius: 8px; }
.vrow.on { border-color: var(--team); }
.vrow .vl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrow input { width: 64px; flex: none; }
.vrole { display: flex; gap: 3px; flex: none; }
.vrole button { font: inherit; font-size: 11px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); color: var(--muted); cursor: pointer; }
.vrole button.on { background: var(--team); border-color: var(--team); color: var(--team-fg); }
@media (max-width: 480px) { .admin .kv .kv-wide { grid-column: 1 / -1; } }
@media (max-width: 480px) { .admin .kv { grid-template-columns: 78px 1fr; } .admin .sndreact .row { flex-wrap: wrap; gap: 6px; } }
/* 공유(10-23) */
.sharebtn { padding: 4px 10px; min-height: 28px; font-size: 12px; }
.toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; background: #15171c; color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; z-index: 80; transition: .25s; white-space: nowrap; }
.toast.on { transform: translate(-50%, 0); opacity: 1; }
.sharebanner { margin-top: 10px; display: flex; align-items: center; gap: 10px; justify-content: space-between; border-color: var(--team); background: color-mix(in srgb, var(--team) 7%, #fff); }
.sharebanner b { font-size: 14px; }
/* 운영 통계(10-23) — 개요 카드 · 날마다 막대 · 가로 막대 */
.st-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.st-card { background: var(--card, #fff); border: 1px solid var(--line, #e5e7eb); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-card span { font-size: 12px; color: var(--muted, #6b7280); }
.st-card b { font-size: 24px; line-height: 1.2; }
.st-card small { font-size: 11px; color: var(--muted, #6b7280); }
.st-card.warn { border-color: #e5484d; background: rgba(229, 72, 77, .06); }
.st-card i, .st-grid i.up, .st-grid i.down { font-style: normal; }
.st-card i.up { color: #16a34a; } .st-card i.down { color: #e5484d; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.st-grid .card { min-width: 0; margin: 0; }
.st-grid h3 { font-size: 13px; margin: 12px 0 4px; color: var(--muted, #6b7280); }
.st-bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; margin: 4px 0 10px; }
.st-bars > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.st-bars i { display: block; width: 100%; max-width: 28px; min-height: 2px; background: var(--brand, #e5484d); border-radius: 4px 4px 0 0; opacity: .85; }
.st-bars span { font-size: 10px; color: var(--muted, #6b7280); height: 14px; }
.st-h > div { display: grid; grid-template-columns: minmax(60px, 30%) 1fr auto; align-items: center; gap: 8px; font-size: 13px; margin: 3px 0; }
.st-h span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-h i { display: block; height: 10px; min-width: 2px; background: var(--brand, #e5484d); border-radius: 5px; opacity: .7; }
.warn-t { color: #e5484d; }