/* GCPV 선수 명단: 빙상 기록지 느낌의 실무용 화면 */
:root {
  --ice-0: #f6f9fc;
  --ice-1: #eaf1f8;
  --ice-2: #d5e2ef;
  --line: #c3d3e3;
  --ink: #0f1d2c;
  --ink-soft: #4a5d72;
  --rink: #0b5cad;
  --rink-strong: #084785;
  --rink-tint: #dcebfa;
  --on-rink: #ffffff;
  --on-rink-soft: #dbe9f7;
  --record: #c2410c;
  --record-bg: #fdf5d9;
  --signal: #c62828;
  --signal-tint: #fdecec;
  --amber: #8a5a00;
  --amber-tint: #fff4d6;
  --surface: #ffffff;
  --shadow: 0 1px 2px rgb(15 29 44 / 0.06), 0 6px 18px rgb(15 29 44 / 0.08);
  --radius-sm: 4px;
  --radius-md: 8px;
  --font-ui: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", system-ui, sans-serif;
  --font-num: "SF Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  --duration: 140ms;
  /* 직접 고친 엑셀 행(노란색) */
  --corrected-bg: #fff3a3;
  --corrected-ink: #1f2933;
  /* pat 검색 창의 엑셀 줄 번호(주황색) */
  --tag-line: #c05621;
  /* 엑셀 SSC를 pat 번호로 쓰는 버튼(주황색) */
  --warning: #c05621;
  --warning-strong: #9c4221;
  --on-warning: #ffffff;
  /* 되돌리기 같은 복구 버튼(녹색) */
  --ok: #2f855a;
  --ok-tint: #e6f4ea;
  /* 공유 창의 공유 중인 사용자 아이디(분홍색). 오류 빨강(--signal)과 헷갈리지 않게 자홍 쪽 */
  --person: #be185d;
  color-scheme: light;
}

/* 다크 색: 테마는 theme-init.js(첫 화면)와 theme-toggle.js가 정한다. 고르기 전에는 운영체제 설정을 따른다 */
:root[data-theme="dark"] {
  --corrected-bg: #5c4f0a;
  --corrected-ink: #fdf6d8;
  --tag-line: #f6ad55;
  --warning: #f6ad55;
  --warning-strong: #fbd38d;
  --on-warning: #2a1606;
  --ok: #68d391;
  --ok-tint: #1c3a2a;
  --person: #f472b6;
  --ice-0: #0d141c;
  --ice-1: #131d28;
  --ice-2: #1c2a39;
  --line: #2a3b4e;
  --ink: #e6eef6;
  --ink-soft: #9db0c4;
  --rink: #5aa7f0;
  --rink-strong: #8cc4f7;
  --rink-tint: #16324f;
  --on-rink: #06213d;
  --on-rink-soft: #123a63;
  --record: #fb923c;
  --record-bg: #3a2e12;
  --signal: #ff8a80;
  --signal-tint: #3a1c1c;
  --amber: #ffd27a;
  --amber-tint: #3a2e12;
  --surface: #101923;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 18px rgb(0 0 0 / 0.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* display를 지정한 요소도 hidden 속성이 이기도록 */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink);
  background: var(--ice-0);
  min-height: 100vh;
}

h1, h2 { margin: 0; letter-spacing: -0.01em; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* 상단 바 */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 3px solid var(--rink);
}
.topbar h1 { font-size: 18px; font-weight: 800; }
.topbar h1::before {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px;
  border-radius: 50%; background: var(--signal); vertical-align: 1px;
}
.file-info { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.file-name {
  font-family: var(--font-num); font-size: 12px; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.badge {
  flex: none; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: var(--amber); background: var(--amber-tint);
}
.topbar-actions { position: relative; display: flex; gap: 8px; margin-left: auto; }
/* 한 줄에 들어가지 않을 때(topbar-compact.js): 문구는 화면에서만 숨기고(버튼 이름으로는 읽힘) 아이콘만 */
.topbar.compact .topbar-actions .button { flex: none; width: 38px; padding: 0; }
.topbar.compact .topbar-actions .button > span {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
/* 키보드로 옮겨 왔을 때도 이름이 보이게 버튼 아래에 표시(마우스는 title 툴팁) */
.topbar.compact .topbar-actions .button { position: relative; }
.topbar.compact .topbar-actions .button:focus-visible::after,
.topbar.compact .topbar-actions:has(#file-input:focus-visible) label[for="file-input"]::after {
  content: attr(title); position: absolute; top: calc(100% + 8px); left: 50%; z-index: 6;
  padding: 4px 8px; font-size: 12px; font-weight: 700; white-space: nowrap; pointer-events: none;
  color: var(--ice-0); background: var(--ink); border-radius: var(--radius-sm); transform: translateX(-50%);
}

/* 햄버거 메뉴(topbar-menu.js): 버튼 바로 아래, 오른쪽 끝을 맞춰 펼친다 */
.topbar-menu { position: relative; display: flex; }
.menu-button[aria-expanded="true"] { color: var(--rink); border-color: var(--rink); background: var(--rink-tint); }
.menu-button:active:not(:disabled) svg { transform: none; }
.top-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 7;
  display: flex; flex-direction: column; gap: 2px; min-width: max-content; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.top-menu[hidden] { display: none; }
.menu-item {
  display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink);
  font: inherit; font-weight: 700; text-align: left; white-space: nowrap; cursor: pointer;
}
.menu-item:hover:not(:disabled), .menu-item:focus-visible { color: var(--rink); background: var(--rink-tint); }
.menu-item:focus-visible { outline-offset: -3px; }
.menu-item:disabled { opacity: 0.45; cursor: not-allowed; }
a.menu-item { text-decoration: none; }
.menu-item[hidden] { display: none; }
.menu-separator { margin: 4px 2px; border: 0; border-top: 1px solid var(--line); }
.menu-separator[hidden] { display: none; }

/* 서버 모드 [pat 파일 열기] 패널(library-panel.js, ADR-006): 버튼 바로 아래, 왼쪽 끝을 맞춰 펼친다 */
.library-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 7;
  display: flex; flex-direction: column; gap: 2px;
  width: min(520px, calc(100vw - 32px)); max-height: min(70vh, 640px); overflow-y: auto; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.library-panel[hidden] { display: none; }
.library-heading {
  display: flex; align-items: center; gap: 6px; margin: 6px 6px 2px;
  font-size: 12px; font-weight: 700; color: var(--ink-soft);
}
.library-count { font-family: var(--font-num); font-weight: 400; }
.library-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.library-item { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 2px 0 0; }
.library-item:hover { background: var(--rink-tint); border-radius: var(--radius-sm); }
.library-name {
  flex: 1; min-width: 0; min-height: 34px; padding: 0 10px; border: 0; background: none; color: var(--ink);
  font: inherit; font-weight: 700; text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: var(--radius-sm);
}
.library-name:hover, .library-name:focus-visible { color: var(--rink); }
.library-name:focus-visible { outline-offset: -3px; }
.library-from { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--ink-soft); }
.library-dday { flex: none; font-family: var(--font-num); font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.library-dday.soon { color: var(--warning); }
.library-item .badge { font-size: 11px; }
.library-item .icon-button { width: 30px; height: 30px; }
.library-item .icon-button:active:not(:disabled) svg { transform: none; }
.library-empty { margin: 4px 10px 8px; font-size: 12px; color: var(--ink-soft); }
.library-empty[hidden] { display: none; }
.readonly-badge { color: var(--rink); background: var(--rink-tint); }
/* 읽기 전용 파일(ADR-006 D4): 선수 입력 폼은 inert로 막고 흐리게 보인다 */
#skater-form[inert] { opacity: 0.6; }
.share-file { margin: 0 0 8px; font-weight: 700; overflow-wrap: anywhere; }
.share-list { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; padding: 0; list-style: none; }
.share-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.share-list .button { margin-top: 0; }
.share-person { color: var(--person); font-weight: 700; overflow-wrap: anywhere; }
.share-result { min-height: 1.2em; margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-soft); white-space: pre-line; }

/* 버튼 */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 0 14px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font: inherit; font-weight: 700; cursor: pointer;
  transition: background var(--duration), border-color var(--duration), transform var(--duration);
}
.button:active:not(:disabled) { transform: translateY(1px); }
.button:disabled { opacity: 0.45; cursor: not-allowed; }
.button.primary { background: var(--rink); color: var(--on-rink); }
.button.primary:hover:not(:disabled) { background: var(--rink-strong); }
.button.secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.button.secondary:hover:not(:disabled) { border-color: var(--rink); color: var(--rink); }
.button.warning { background: var(--warning); color: var(--on-warning); }
.button.warning:hover:not(:disabled) { background: var(--warning-strong); }
.button.danger { background: var(--surface); color: var(--signal); border-color: var(--signal); }
.button.danger:hover:not(:disabled) { background: var(--signal-tint); }
.button.ok { background: var(--surface); color: var(--ok); border-color: var(--ok); }
.button.ok:hover:not(:disabled) { background: var(--ok-tint); }
.button.small { min-height: 28px; padding: 0 10px; font-size: 12px; }
/* 버튼 문구 왼쪽 아이콘(Lucide) */
.button:has(.button-icon) { gap: 6px; }
.button-icon { flex: none; width: 16px; height: 16px; }
/* En/Fr/Ko 언어 선택: 지금 언어를 강조 */
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  min-height: 34px; padding: 0 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.lang-switch button {
  padding: 3px 7px; border: 0; border-radius: 3px; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--ink-soft); background: none;
  transition: color var(--duration), background var(--duration);
}
.lang-switch button:hover { color: var(--rink); }
.lang-switch button[aria-pressed="true"] { color: var(--on-rink); background: var(--rink); }
.lang-switch .lang-divider { color: var(--line); }
/* 라이트/다크 전환: 누르면 바뀔 테마의 아이콘(라이트일 때 달, 다크일 때 해)만 보인다 */
.theme-toggle .theme-icon-sun,
:root[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
.theme-toggle:active:not(:disabled) svg { transform: none; }
.icon-button {
  display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 34px; padding: 0;
  color: var(--ink-soft); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
  transition: color var(--duration), border-color var(--duration), transform var(--duration);
}
.icon-button:hover:not(:disabled) { color: var(--rink); border-color: var(--rink); }
.icon-button:active:not(:disabled) svg { transform: rotate(-90deg); transition: transform var(--duration); }
.icon-button:disabled { opacity: 0.4; cursor: default; }
.link-button {
  margin-top: 10px; padding: 0; border: 0; background: none;
  color: var(--rink); font: inherit; text-decoration: underline; cursor: pointer;
}
:focus-visible { outline: 3px solid var(--rink); outline-offset: 2px; }

/* 빈 화면 */
.empty-state { display: grid; place-items: center; padding: 8vh 20px; }
.drop-card {
  max-width: 620px; padding: 36px 40px 40px; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}
.drop-card h2 { font-size: 22px; margin-bottom: 12px; }
.drop-card p { margin: 0 0 20px; color: var(--ink-soft); line-height: 1.6; }
.drop-zone {
  width: 100%; padding: 36px 20px; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--rink);
  background: var(--ice-0);
  border: 2px dashed var(--line); border-radius: var(--radius-md);
  transition: border-color var(--duration), background var(--duration);
}
.drop-zone:hover, .drop-zone.dragging { border-color: var(--rink); background: var(--rink-tint); }
/* 숨긴 파일 입력에 키보드 포커스가 가면 연결된 버튼에 표시 */
.topbar-actions:has(#file-input:focus-visible) label[for="file-input"],
.dialog-actions:has(#sb-file:focus-visible) label[for="sb-file"],
.dialog-actions:has(#t3-file:focus-visible) label[for="t3-file"],
.dialog-actions:has(#import-file:focus-visible) label[for="import-file"] {
  outline: 3px solid var(--rink); outline-offset: 2px;
}

/* 작업 화면 */
.workspace {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px;
  padding: 16px 20px; height: calc(100vh - 62px);
}
.list-panel { display: flex; flex-direction: column; min-height: 0; }
/* 오른쪽 패널 접기: 버튼은 필터 줄 끝(표 폭 안). 접으면 목록이 화면 폭을 다 쓴다 */
.panel-toggle svg { transition: transform var(--duration); }
/* 초기화 버튼의 누를 때 회전 효과는 쓰지 않는다 */
.panel-toggle:active:not(:disabled) svg { transform: none; }
.workspace.panel-collapsed { grid-template-columns: minmax(0, 1fr); }
.workspace.panel-collapsed .side-panel { display: none; }
.workspace.panel-collapsed .panel-toggle svg,
.workspace.panel-collapsed .panel-toggle:active:not(:disabled) svg { transform: rotate(180deg); }
.toolbar { display: flex; align-items: end; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.count { margin: 0 0 8px auto; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.count .count-shown { color: var(--signal); }

.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field.grow { flex: 1; min-width: 180px; }
/* 필터 줄의 검색칸은 필터가 늘어도 한 줄에 들어가도록 조금 더 줄어들 수 있게 */
.toolbar .field.grow { min-width: 120px; }
.field > span, .field > .field-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
input, select {
  min-height: 34px; padding: 0 10px; min-width: 0;
  font: inherit; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
input:focus, select:focus { border-color: var(--rink); outline: 2px solid var(--rink-tint); }
input[aria-invalid="true"] { border-color: var(--signal); background: var(--signal-tint); }
select:disabled { color: var(--ink-soft); background: var(--ice-1); }
.required { font-style: normal; color: var(--signal); font-size: 11px; margin-left: 4px; }

/* 표 */
.table-wrap {
  flex: 1; overflow: auto; min-height: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}
.grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.grid th {
  position: sticky; top: 0; z-index: 1;
  padding: 0; text-align: left; white-space: nowrap;
  background: var(--ice-1); border-bottom: 2px solid var(--line);
}
.grid th button {
  width: 100%; padding: 8px 10px; border: 0; background: none; color: var(--ink-soft);
  font: inherit; font-weight: 700; text-align: inherit; cursor: pointer;
}
.grid th button:hover { color: var(--rink); }
.grid th button[data-sort="asc"]::after { content: " \25B2" attr(data-sort-order); color: var(--rink); }
.grid th button[data-sort="desc"]::after { content: " \25BC" attr(data-sort-order); color: var(--rink); }
.grid td {
  padding: 6px 10px; white-space: nowrap;
  border-bottom: 1px solid var(--ice-2);
}
.grid th.num { text-align: right; }
.grid td.num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.grid td.muted { color: var(--ink-soft); }
/* 기본값(999)이 아닌 경기 결과 */
.grid td.recorded { color: var(--record); font-weight: 700; }
.grid tbody tr { cursor: pointer; }
.grid tbody tr:nth-child(even) td { background: var(--ice-0); }
.grid tbody tr:hover td { background: var(--rink-tint); }
.grid tbody tr[aria-current="true"] td {
  background: var(--rink); color: var(--on-rink);
}
.grid tbody tr[aria-current="true"] td.muted { color: var(--on-rink-soft); }
/* 선택 행(파란 배경)에서는 주황 대비가 낮아 굵기만 유지 */
.grid tbody tr[aria-current="true"] td.recorded { color: var(--on-rink); }
.grid.compact td, .grid.compact th { padding: 6px 12px; }

/* 오른쪽 패널 */
.side-panel { display: flex; flex-direction: column; gap: 16px; overflow: auto; min-height: 0; }
.card {
  padding: 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow);
}
.card h2 { font-size: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.card-head-actions { display: flex; gap: 8px; }
.card .hint, .hint { color: var(--ink-soft); font-size: 12px; font-weight: 400; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
fieldset { margin: 14px 0 0; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
legend { padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.category-box { display: grid; gap: 8px; }
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { min-height: 0; width: 16px; height: 16px; }
/* 필터 줄의 체크박스: 옆 선택 상자와 같은 높이·테두리 */
.filter-check {
  display: flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 0 10px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.filter-check:has(input:checked) { border-color: var(--rink); }
.filter-check input { min-height: 0; width: 16px; height: 16px; margin: 0; padding: 0; cursor: pointer; }
.filter-check:has(input:focus-visible) { outline: 3px solid var(--rink); outline-offset: 2px; }
/* 기록 칸 표시 형식(Rank / Time): 체크박스 필터와 같은 높이·테두리 */
.format-switch {
  display: flex; align-items: center; gap: 10px; box-sizing: border-box; height: 34px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
}
.format-switch label { display: flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.format-switch input { min-height: 0; width: 15px; height: 15px; margin: 0; padding: 0; cursor: pointer; }
.format-switch:has(input:focus-visible) { outline: 3px solid var(--rink); outline-offset: 2px; }
.ranking-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ranking-grid input { font-family: var(--font-num); text-align: right; }
/* 기준값(999)이 아닌 경기 결과가 적힌 칸 */
.ranking-grid input.recorded { background: var(--record-bg); }
.form-actions { display: flex; gap: 8px; margin-top: 16px; }
.errors {
  margin-bottom: 12px; padding: 10px 12px;
  color: var(--signal); background: var(--signal-tint);
  border-left: 4px solid var(--signal); border-radius: var(--radius-sm);
}
.errors ul { margin: 0; padding-left: 18px; }
.notice {
  margin: 0 0 12px; padding: 10px 12px; font-size: 12px; line-height: 1.5;
  color: var(--amber); background: var(--amber-tint);
  border-left: 4px solid var(--amber); border-radius: var(--radius-sm);
}
.inline { display: flex; align-items: end; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* 대화상자 / 알림 */
dialog {
  max-width: 560px; width: calc(100% - 32px); padding: 20px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow);
}
dialog::backdrop { background: rgb(15 29 44 / 0.45); }
dialog h2 { font-size: 16px; margin-bottom: 12px; }
/* 제목 아래 기능 정의(언제 쓰는 기능인지). 비슷한 가져오기 기능(Type.1/Type.2)을 구분한다 */
.dialog-purpose { margin: -4px 0 12px; font-size: 13px; line-height: 1.5; }
dialog .button { margin-top: 16px; }
#save-dialog { max-width: 520px; }
#save-dialog input { width: 100%; }
#save-dialog .hint { margin: 8px 0 0; }
#delete-dialog { max-width: 480px; }
#delete-dialog .hint { margin: 0; }
#delete-dialog input { width: 100%; }
.delete-target {
  margin: 12px 0; padding: 10px 12px; font-weight: 700; overflow-wrap: anywhere;
  color: var(--signal); background: var(--signal-tint); border-radius: var(--radius-sm);
}
.field-error { margin: 6px 0 0; color: var(--signal); font-size: 12px; font-weight: 700; }
.field-error:empty { display: none; }
/* 새 비밀번호 확인 칸 아래의 일치 여부(다르면 빨강, 같으면 녹색) */
.field-status { margin: -6px 0 0; font-size: 12px; font-weight: 700; }
.field-status:empty { display: none; }
.field-status[data-state="mismatch"] { color: var(--signal); }
.field-status[data-state="match"] { color: var(--ok); }
/* 로그인 비밀번호 칸 안 오른쪽의 보기 버튼. 눌린 동안(aria-pressed) 글자가 보이고 눈 감은 아이콘으로 바뀐다 */
.password-input { position: relative; }
.password-input input { width: 100%; padding-right: 40px; }
.password-input input::-ms-reveal { display: none; }
.password-toggle {
  position: absolute; top: 50%; right: 3px; transform: translateY(-50%);
  display: inline-grid; place-items: center; width: 30px; height: 28px; padding: 0;
  color: var(--ink-soft); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  transition: color var(--duration);
}
.password-toggle:hover { color: var(--rink); }
.password-toggle:focus-visible { outline: 2px solid var(--rink); outline-offset: 0; }
.password-toggle .icon-eye-off,
.password-toggle[aria-pressed="true"] .icon-eye { display: none; }
.password-toggle[aria-pressed="true"] .icon-eye-off { display: block; }
.dialog-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
.dialog-actions .spacer { flex: 1; }

/* 일괄등록 */
dialog.wide-dialog { max-width: 960px; }
.import-rules { margin: 0; padding-left: 18px; line-height: 1.7; color: var(--ink-soft); }
.import-rules strong { color: var(--ink); }
.import-summary { margin: 0 0 8px; font-weight: 700; }
.import-summary .count-update { color: var(--rink); }
.import-summary .count-error { color: var(--signal); }
.import-table-wrap { max-height: 55vh; margin-top: 8px; box-shadow: none; }
.import-table td { white-space: normal; vertical-align: top; }
.import-table td.status-update { color: var(--rink); font-weight: 700; }
.import-table td.status-error { color: var(--signal); font-weight: 700; }
.import-table td.status-unchanged { color: var(--ink-soft); }
.import-table ul { margin: 0; padding-left: 16px; }
/* 엑셀 기록 가져오기(시즌 베스트) */
/* 엑셀 기록 가져오기 단계 탭 */
.sb-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0; border-bottom: 2px solid var(--line); }
.sb-tabs [role="tab"] {
  margin-bottom: -2px; padding: 8px 14px; border: 0; border-bottom: 3px solid transparent;
  background: none; color: var(--ink-soft); font: inherit; font-weight: 700; cursor: pointer;
}
.sb-tabs [role="tab"]:hover:not(:disabled) { color: var(--rink); }
.sb-tabs [role="tab"][aria-selected="true"] { color: var(--rink); border-bottom-color: var(--rink); }
.sb-tabs [role="tab"]:disabled { opacity: 0.45; cursor: not-allowed; }
.sb-tabs [role="tab"]:focus-visible { outline: 3px solid var(--rink); outline-offset: -3px; }
.sb-tab-count { font-weight: 400; }
/* 요약: 결과 수 줄과 형식 변경 줄을 나눠 보인다 */
#sb-summary .sb-summary-line, #t3-summary .sb-summary-line { display: block; }
#sb-summary .sb-summary-warning, #t3-summary .sb-summary-warning { color: var(--warning); }
.sb-panel { min-height: 120px; }
.sb-options { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 12px 0; }
.sb-option { margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; }
.sb-option legend { font-weight: 700; padding: 0 4px; }
.sb-option .check { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
.sb-info { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 8px 0; }
.sb-info h3, #sb-clubs-box h3, #t3-clubs-box h3 { margin: 8px 0 4px; font-size: 0.95rem; }
.sb-info ul { margin: 0; padding-left: 18px; line-height: 1.6; }
.sb-clubs { width: auto; margin-bottom: 8px; }
.sb-clubs select { min-width: min(220px, 100%); max-width: 100%; }
/* 클럽 대응: "대응 안 함"은 주황 배경. 펼친 목록의 항목은 기본 색 */
.sb-clubs select.unmatched { background: var(--warning); color: var(--on-warning); border-color: var(--warning-strong); }
.sb-clubs select.unmatched option { background: var(--surface); color: var(--ink); }
#sb-clubs-box, #t3-clubs-box { overflow-x: auto; }
/* 3.신규 선수 등록(D20): 체크 칸, 이름 입력 칸, 비슷한 pat 선수 경고 */
.sb-new .sb-pick { width: 1%; white-space: nowrap; }
.sb-new input[type="text"] { width: 8em; min-width: 6em; }
.sb-new select { width: auto; min-width: 4em; }
/* SSC(3번째)·생년월일(8번째) 칸은 줄을 바꾸지 않는다 */
.sb-new td:nth-child(3), .sb-new td:nth-child(8) { white-space: nowrap; }
.sb-new tr.picked { background: var(--rink-tint); }
.sb-new-similar { color: var(--warning); }
/* 4.SSC 매칭 데이터 보정(D25): 3번 탭과 같은 체크·입력 칸, 다른 칸은 주황 글자, 같은 이름은 흐리게 */
.sb-ssc .sb-pick { width: 1%; white-space: nowrap; }
.sb-ssc input[type="text"] { width: 8em; min-width: 6em; }
.sb-ssc tr.picked { background: var(--rink-tint); }
/* SSC(3번째)·생년월일(7번째) 칸은 줄을 바꾸지 않는다 */
.sb-ssc td:nth-child(3), .sb-ssc td:nth-child(7) { white-space: nowrap; }
.sb-ssc td.sb-ssc-diff { color: var(--warning); font-weight: 600; }
.sb-ssc td.sb-ssc-same { color: var(--ink-soft); }
.sb-ssc-actions { display: flex; justify-content: flex-end; margin-bottom: 8px; }
@media (max-width: 520px) {
  /* 좁은 화면: 결과 표는 가로로 스크롤하고 내용 열이 한두 글자로 줄지 않게 */
  #sb-preview .import-table, #t3-preview .import-table { min-width: 560px; }
  .sb-clubs select { min-width: 0; width: 100%; }
}
.import-table td.status-merged { color: var(--ink-soft); }
/* 직접 고른 선수로 맞춘 엑셀 행(노란색). 표 줄무늬(짝수 행)·마우스 올림보다 앞서도록 .grid까지 붙인다 */
.grid.import-table tbody tr.corrected td { background: var(--corrected-bg); color: var(--corrected-ink); }
.import-table td.sb-action { white-space: nowrap; }
.sb-downloads { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
#sb-search-row .sb-tag-file, #t3-search-row .sb-tag-file { color: var(--rink); font-weight: 700; }
.sb-code-change { color: var(--signal); }
#sb-search-row .sb-tag-line, #t3-search-row .sb-tag-line { color: var(--tag-line); font-weight: 700; }
.sb-search-wrap { max-height: 45vh; margin-top: 8px; box-shadow: none; }
.sb-search-wrap tbody tr { cursor: pointer; }
.sb-search-wrap tbody tr.picked td { background: var(--rink-tint); }

/* 카테고리 나이 구간 편집(ADR-001) */
#categories-dialog .hint { margin: 0 0 12px; }
.categories-table-wrap { max-height: 55vh; margin-top: 4px; box-shadow: none; }
.categories-table tbody tr { cursor: default; }
.categories-table tbody tr:hover td { background: inherit; }
.categories-table td { padding: 4px 6px; }
.categories-table input { width: 100%; min-width: 0; padding: 4px 6px; }
.categories-table input[data-field="name"] { min-width: 160px; }
.categories-table input[type="number"] { width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.categories-table td:last-child { text-align: right; }
/* 팝업 공통 버튼 여백(dialog .button)을 표 안에서는 쓰지 않는다 */
.categories-table .button { margin-top: 0; }
/* 지울 행: 줄 긋고 흐리게(되살리기 가능) */
.categories-table tr.deleted input { text-decoration: line-through; opacity: 0.55; }
/* 남녀 구간이 다른 행: 나이 칸에 주의 색(ADR-001 D7) */
.categories-table tr.mismatch input[type="number"]:not([aria-invalid="true"]) {
  border-color: var(--amber); background: var(--amber-tint);
}
#categories-errors p { margin: 4px 0 0; }

/* More functions: 2단(왼쪽 그룹별 기능 목록, 오른쪽 고른 기능의 설명과 실행) */
.more-button:active:not(:disabled) svg { transform: none; }
#more-dialog { max-width: 820px; }
#more-help { margin: 0 0 12px; }
.more-layout {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden;
}
.more-tabs { display: flex; flex-direction: column; padding: 8px; background: var(--rink-tint); border-right: 1px solid var(--line); }
.more-group {
  margin: 10px 8px 4px; font-size: 12px; font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.02em;
}
.more-group:first-child { margin-top: 4px; }
.more-tabs [role="tab"] {
  padding: 8px 10px; border: 0; border-left: 3px solid transparent; border-radius: var(--radius-sm);
  background: none; color: var(--ink); font: inherit; text-align: left; line-height: 1.35; cursor: pointer;
}
.more-tabs [role="tab"]:hover { color: var(--rink); }
.more-tabs [role="tab"][aria-selected="true"] {
  color: var(--rink); font-weight: 700; background: var(--surface); border-left-color: var(--rink);
}
.more-tabs [role="tab"]:focus-visible { outline: 3px solid var(--rink); outline-offset: -3px; }
/* 기능을 바꿔도 창 크기가 흔들리지 않게 높이를 고정하고, 넘치면 오른쪽만 스크롤 */
.more-detail { height: min(440px, 62vh); overflow-y: auto; padding: 16px 18px; }
.more-competition-field { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.more-competition-field select { width: 100%; }
.more-panel h3 { margin: 0 0 8px; font-size: 15px; }
.more-panel .hint { margin: 0 0 8px; line-height: 1.5; }
.more-panel .more-count { margin: 10px 0 0; font-weight: 700; }
.helmet-range { display: flex; gap: 10px; margin: 12px 0 10px; }
.helmet-range .field { flex: 1; }
.helmet-range input { width: 100%; }
.more-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#more-dialog .more-actions .button { margin-top: 0; }
/* 좁은 화면: 목록이 위, 내용이 아래 */
@media (max-width: 640px) {
  .more-layout { grid-template-columns: minmax(0, 1fr); }
  .more-tabs { border-right: 0; border-bottom: 1px solid var(--line); }
  .more-detail { height: auto; overflow-y: visible; }
}

/* 템플릿 선택 */
.choice-list { display: grid; gap: 10px; }
.choice {
  display: grid; gap: 4px; padding: 14px 16px; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  transition: border-color var(--duration), background var(--duration);
}
.choice span { color: var(--ink-soft); font-size: 13px; }
.choice:hover { border-color: var(--rink); background: var(--rink-tint); }
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 10;
  max-width: calc(100% - 32px); padding: 10px 16px;
  color: var(--ice-0); background: var(--ink); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); transform: translateX(-50%);
  animation: rise var(--duration) ease-out;
}
.toast.error { background: var(--signal); }
.toast:empty { display: none; }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 6px); } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* 좁은 화면: 표 아래로 입력 패널 */
@media (max-width: 1000px) {
  .workspace, .workspace.panel-collapsed { grid-template-columns: minmax(0, 1fr); height: auto; }
  /* 패널이 목록 아래로 내려가므로 접기 버튼은 숨기고 패널을 항상 보여 준다 */
  .panel-toggle { display: none; }
  .workspace.panel-collapsed .side-panel { display: flex; }
  .table-wrap { max-height: 60vh; }
  .side-panel { overflow: visible; }
}
@media (max-width: 520px) {
  .topbar { padding: 10px 16px; }
  .workspace { padding: 12px 16px; }
  /* 버튼이 한 줄에 다 들어가지 않으면 다음 줄로(가로 스크롤 방지) */
  .topbar-actions { width: 100%; flex-wrap: wrap; }
  /* 글자를 쪼개지 않고 버튼 단위로 다음 줄에 넘긴다 */
  .topbar-actions .button { flex: 1 1 auto; white-space: nowrap; }
}

/* 서버 모드(ADR-005): 상단 로그인 표시, 로그인·비밀번호 변경·계정 관리 페이지 */
.session-bar { display: flex; align-items: center; gap: 6px; }
.session-user { font-size: 12px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.logout-button:active:not(:disabled) svg { transform: none; }
a.button { text-decoration: none; }
.auth-page { display: flex; justify-content: center; padding: 48px 16px; }
.auth-card { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 420px; }
.auth-card input { width: 100%; }
.auth-card .dialog-actions .button { margin-top: 0; }
.auth-privacy { margin: 4px 0 0; line-height: 1.5; }
.admin-page { display: flex; flex-direction: column; gap: 16px; max-width: 1200px; margin: 0 auto; padding: 20px 16px; }
.admin-drain { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.admin-table tbody tr { cursor: default; }
.admin-temp-password { display: inline-block; padding: 6px 10px; font-family: var(--font-num); font-size: 16px; background: var(--amber-tint); border-radius: var(--radius-sm); user-select: all; }