:root {
    color-scheme: light dark;
    --bg-top: #ffffff;
    --bg-bottom: #f3f5f7;
    --panel: #ffffff;
    --panel-border: rgba(15, 23, 42, 0.08);
    --text-main: #16202a;
    --text-subtle: #66737f;
    --accent: #2c5aa0;
    --accent-strong: #1c3f73;
    --shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --input-bg: #ffffff;
    --input-disabled-bg: #f0f0f0;
    --input-disabled-color: #000000;
    --row-bg: #ffffff;
    --border-color: rgba(34, 47, 62, 0.06);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg-top: #0f1923;
      --bg-bottom: #1a2332;
      --panel: #1e2837;
      --panel-border: rgba(255, 255, 255, 0.08);
      --text-main: #e8edf2;
      --text-subtle: #8a9bb0;
      --accent: #5b8dd9;
      --accent-strong: #7aaae8;
      --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      --input-bg: #2c3f53;
      --input-disabled-bg: #162030;
      --input-disabled-color: #ffffff;
      --row-bg: #1e2d3d;
      --border-color: rgba(255, 255, 255, 0.06);
    }

    body {
      background: #0f1923;
    }
  }

  * {
    box-sizing: border-box;
    touch-action: manipulation;
  }
  
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }
  
  body {
    margin: 0;
    min-height: 100vh;
    font-family: "Segoe UI", "Apple SD Gothic Neo", sans-serif;
    color: var(--text-main);
    background: var(--bg-bottom);
  }
  
  button,
  input,
  select {
    font: inherit;
  }
  
  .app {
    width: min(960px, calc(100% - 24px));
    margin: 0 auto;
    padding: 28px 0 40px;
  }
  
  .panel {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
  }
  
  .controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    margin-top: 18px;
  }

  .top-controls {
    flex-direction: row;
    align-items: center;
    margin-top: 0;
    margin-bottom: 18px;
  }

  .match-mode-toggle {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
  }

  .mode-button {
    min-height: 46px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--text-subtle);
    cursor: pointer;
    font-weight: 700;
  }

  .mode-button.is-active {
    color: #fff;
    background: var(--accent);
  }

  .top-options-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
  }

  .font-size-controls {
    display: flex;
    gap: 6px;
  }

  .font-btn {
    min-width: 56px;
    min-height: 46px;
    padding: 0 14px;
    font-size: 1rem;
    font-weight: 700;
  }

  .upload-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .top-controls .secondary {
    min-height: 46px;
    padding: 0 18px;
  }

  .admin-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-subtle);
  }

  .admin-menu {
    display: flex;
    gap: 12px;
    margin-top: 10px;
  }

  .admin-menu.hidden {
    display: none;
  }
  
  .primary,
  .secondary {
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    min-height: 46px;
    padding: 0 18px;
    font-weight: 700;
  }
  
  .primary {
    color: #fff;
    background: var(--accent);
  }
  
  .secondary {
    color: var(--accent-strong);
    background: rgba(44, 90, 160, 0.08);
  }
  
  .table-panel {
    overflow: hidden;
  }
  
  .table-wrap {
    overflow-x: auto;
    padding: 0 10px 12px;
  }
  
  table {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0 6px;
    table-layout: fixed;
    font-size: 1rem;
  }
  
  th,
  td {
    text-align: left;
    padding: 0 6px;
  }
  
  th {
    color: var(--text-subtle);
    font-size: inherit;
    font-weight: 700;
  }
  
  .sort-button {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    text-align: inherit;
    cursor: pointer;
  }
  
  .sort-icon {
    font-size: 0.75em;
    opacity: 0.4;
  }

  .hidden {
    display: none !important;
  }

  table.individual-mode .team-result,
  table.individual-mode .team-column,
  table.team-mode .individual-result {
    display: none;
  }

  .sort-button.is-active .sort-icon {
    opacity: 1;
  }
  
  tbody tr {
    background: var(--row-bg);
  }
  
  tbody td:first-child {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }
  
  tbody td:last-child {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }
  
  tbody td {
    padding-top: 4px;
    padding-bottom: 4px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
  }
  
  tbody td:first-child {
    border-left: 1px solid var(--border-color);
  }
  
  tbody td:last-child {
    border-right: 1px solid var(--border-color);
  }
  
  input,
  select {
    width: 100%;
    min-height: 32px;
    padding: 6px 8px;
    border: 1px solid rgba(34, 47, 62, 0.12);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--text-main);
    font-size: inherit;
    line-height: 1;
  }
  
  input:focus,
  select:focus {
    outline: 2px solid rgba(44, 90, 160, 0.16);
    border-color: rgba(44, 90, 160, 0.4);
  }
  
  input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-height: auto;
    padding: 0;
  }
  
  input:disabled {
    background: var(--input-disabled-bg);
    color: var(--input-disabled-color);
  }

  .checkbox-cell {
    text-align: center;
    width: 4ch;
  }
  
  .value-cell {
    min-width: 8ch;
    width: 8ch;
    font-weight: 700;
    vertical-align: middle;
    text-align: center;
  }

  .par3-panel {
    margin-top: 18px;
    padding: 14px;
  }

  .par3-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: var(--text-subtle);
    font-size: inherit;
  }

  .par3-list {
    display: grid;
    gap: 8px;
  }

  .par3-col-header {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) minmax(92px, 0.7fr) 4ch;
    gap: 8px;
    padding: 0 6px;
    color: var(--text-subtle);
    font-size: inherit;
    font-weight: 700;
  }

  .par3-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) minmax(92px, 0.7fr) 4ch;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--row-bg);
  }

  .par3-row.par3-completed select,
  .par3-row.par3-completed input[readonly] {
    opacity: 0.4;
    background: var(--input-disabled-bg);
    color: var(--input-disabled-color);
  }

  .par3-title {
    font-weight: 800;
    white-space: nowrap;
  }

  .par3-row input[readonly] {
    cursor: pointer;
    text-align: right;
    font-weight: 800;
  }

  .par3-done-label {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .par3-done-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
  }

  thead th:nth-child(1),
  tbody td:nth-child(1) {
    width: 4ch;
    text-align: center;
    white-space: nowrap;
  }
  
  thead th:nth-child(2),
  tbody td:nth-child(2) {
    width: 2ch;
  }

  thead th:nth-child(10),
  tbody td:nth-child(10) {
    width: 4ch;
  }

  thead th:nth-child(3),
  tbody td:nth-child(3) {
    width: 15ch;
  }

  thead th:nth-child(4),
  tbody td:nth-child(4) {
    width: 4ch;
  }

  thead th:nth-child(5),
  tbody td:nth-child(5) {
    width: 4ch;
  }

  thead th:nth-child(6),
  tbody td:nth-child(6) {
    width: 4ch;
  }

  thead th:nth-child(7),
  tbody td:nth-child(7) {
    width: 4ch;
  }

  thead th:nth-child(8),
  tbody td:nth-child(8),
  thead th:nth-child(9),
  tbody td:nth-child(9),
  thead th:nth-child(11),
  tbody td:nth-child(11) {
    width: 4ch;
  }

  
  .active-score-row {
    background: rgba(44, 90, 160, 0.3) !important;
    outline: 2px solid var(--accent);
  }

  /* 팀별 배경색 - 팀전 모드 + 참가자만 */
  table.team-mode tbody tr[data-team="1"] { background: rgba(255, 182, 193, 0.35); }
  table.team-mode tbody tr[data-team="2"] { background: rgba(173, 216, 230, 0.35); }
  table.team-mode tbody tr[data-team="3"] { background: rgba(144, 238, 144, 0.35); }
  table.team-mode tbody tr[data-team="4"] { background: rgba(255, 218, 185, 0.35); }
  table.team-mode tbody tr[data-team="5"] { background: rgba(221, 160, 221, 0.35); }
  table.team-mode tbody tr[data-team="6"] { background: rgba(255, 255, 153, 0.35); }
  table.team-mode tbody tr[data-team="7"] { background: rgba(175, 238, 238, 0.35); }
  table.team-mode tbody tr[data-team="8"] { background: rgba(255, 200, 150, 0.35); }
  table.team-mode tbody tr[data-team="9"] { background: rgba(200, 200, 255, 0.35); }


  .muted-row {
    opacity: 0.72;
  }

  thead th:nth-child(12),
  tbody td:nth-child(12) {
    width: 32px;
    padding: 0;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
  }

  .self-input-col {
    width: 80px;
  }

  .self-input-cell {
    width: 80px;
    padding: 2px 4px;
    vertical-align: middle;
  }

  select[data-field="team"] {
    min-width: 0;
    width: 2ch;
    -webkit-appearance: none;
    appearance: none;
    padding-left: 2px;
    padding-right: 2px;
    text-align: center;
  }

  .self-input-btns {
    display: flex;
    gap: 3px;
  }

  .self-input-btn {
    flex: 1;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    height: 32px;
    border-radius: var(--radius-sm);
    line-height: 1;
    padding: 0;
    color: #fff;
  }

  .self-input-btn.minus {
    background: #e53e3e;
  }

  .self-input-btn.plus {
    background: #38a169;
  }

  .self-input-btn:active {
    opacity: 0.7;
  }

  table.self-input-mode thead th:nth-child(3),
  table.self-input-mode tbody td:nth-child(3) {
    width: 22%;
  }

  table.team-mode:not(.self-input-mode) thead th:nth-child(3),
  table.team-mode:not(.self-input-mode) tbody td:nth-child(3) {
    width: 12ch;
  }

  table.team-mode.self-input-mode thead th:nth-child(3),
  table.team-mode.self-input-mode tbody td:nth-child(3) {
    width: 17.6%;
  }

  table.team-mode thead th:nth-child(2),
  table.team-mode tbody td:nth-child(2),
  table.team-mode select[data-field="team"] {
    width: 2.6ch;
  }

  .score-popup {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
  }

  .score-popup.hidden {
    display: none;
  }

  .score-popup-btn {
    border: none;
    cursor: pointer;
    font-size: 1.6rem;
    font-weight: 700;
    width: 96px;
    height: 64px;
    border-radius: var(--radius-md);
    line-height: 1;
    padding: 0;
    color: #fff;
  }

  .score-popup-btn.minus {
    background: #e53e3e;
  }

  .score-popup-btn.plus {
    background: #38a169;
  }

  .score-popup-btn.close {
    background: var(--text-subtle);
  }

  .score-popup-btn:active {
    opacity: 0.7;
  }

  .par3-slider-popup {
    position: fixed;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    z-index: 110;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 8px;
    width: min(420px, calc(100% - 24px));
    margin: 0 auto;
    padding: 14px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
  }

  .par3-slider-popup.hidden {
    display: none;
  }

  .par3-slider-value {
    font-size: 2em;
    font-weight: 900;
    text-align: center;
    color: var(--accent-strong);
  }

  .par3-step-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .par3-fine-button {
    width: 100%;
    min-height: 50px;
    padding: 0 10px;
    font-size: 1.2em;
    font-weight: 900;
  }

  #par3-slider-close {
    width: auto;
    min-height: 44px;
    padding: 0 14px;
  }



  .delete-cell,
  thead th:last-child {
    display: none;
  }

  .delete-button {
    border: 0;
    background: transparent;
    color: var(--text-subtle);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    line-height: 1;
  }

  .delete-button:hover {
    color: #e53e3e;
    background: rgba(229, 62, 62, 0.08);
  }
  
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  
  @media (max-width: 720px) {
    .app {
      width: 100%;
      padding: 10px 0 20px;
    }
  
    .panel {
      border-radius: var(--radius-md);
    }
  
    .controls {
      flex-direction: column;
      padding: 10px;
      gap: 8px;
      margin: 10px 8px 0;
    }

    .top-controls {
      flex-direction: row;
      flex-wrap: wrap;
      margin: 8px 8px 0;
    }

    .top-controls .secondary {
      flex: 1;
      min-height: 40px;
      padding: 0 8px;
      font-size: 0.85rem;
      width: auto;
    }

    .match-mode-toggle {
      flex: 1;
    }

    .mode-button {
      flex: 1;
      min-height: 40px;
      padding: 0 8px;
      font-size: 0.85rem;
    }

    .upload-button {
      flex-basis: 100%;
    }

    .top-options-row {
      width: 100%;
      justify-content: center;
      margin-left: 0;
      padding-top: 4px;
    }

    .font-size-controls {
      flex: 0 0 auto;
    }

    .top-options-row .font-btn {
      width: 54px;
      flex: 0 0 54px;
      min-height: 44px;
      padding: 0 10px;
      font-size: 1rem;
    }

    .admin-menu {
      flex-direction: row;
    }

    .admin-menu .primary,
    .admin-menu .secondary {
      flex: 1;
    }

    .par3-panel {
      margin: 10px 8px 0;
      padding: 10px;
    }

    .par3-row {
      grid-template-columns: 54px minmax(0, 1fr) minmax(76px, 0.62fr) 4ch;
      gap: 6px;
      padding: 6px;
    }

    .par3-col-header {
      grid-template-columns: 54px minmax(0, 1fr) minmax(76px, 0.62fr) 4ch;
      gap: 6px;
    }

    .par3-slider-popup {
      grid-template-columns: 1fr;
      gap: 8px;
      padding: 12px;
    }

    .par3-slider-value {
      font-size: 2.2em;
    }

    .primary,
    .secondary {
      width: 100%;
    }
  
    .table-wrap {
      padding: 0 4px 8px;
      overflow-x: hidden;
    }
  
    table {
      min-width: unset;
      width: 100%;
      border-spacing: 0 3px;
      font-size: 1rem;
    }
  
    th {
      font-size: inherit;
      height: 44px;
      white-space: nowrap;
    }

    input,
    select {
      min-height: 28px;
      padding: 3px 4px;
      font-size: inherit;
      line-height: 1;
    }
  
    th,
    td {
      padding: 0 2px;
    }
  
    tbody td {
      padding-top: 5px;
      padding-bottom: 5px;
    }
  
input[type="checkbox"] {
      width: 16px;
      height: 16px;
    }
  
    thead th:nth-child(1),
    tbody td:nth-child(1) {
      width: 2ch;
    }
  
    thead th:nth-child(2),
    tbody td:nth-child(2) {
      width: 2ch;
    }

    thead th:nth-child(10),
    tbody td:nth-child(10) {
      width: 3ch;
    }

    thead th:nth-child(3),
    tbody td:nth-child(3) {
      width: 22%;
    }

    table.self-input-mode thead th:nth-child(3),
    table.self-input-mode tbody td:nth-child(3) {
      width: 15%;
    }

    table.team-mode:not(.self-input-mode) thead th:nth-child(3),
    table.team-mode:not(.self-input-mode) tbody td:nth-child(3) {
      width: 17.6%;
    }

    table.team-mode.self-input-mode thead th:nth-child(3),
    table.team-mode.self-input-mode tbody td:nth-child(3) {
      width: 4ch;
    }

    table.team-mode.self-input-mode thead th:nth-child(6),
    table.team-mode.self-input-mode tbody td:nth-child(6) {
      width: 6ch;
    }

    table.team-mode.self-input-mode thead th:nth-child(7),
    table.team-mode.self-input-mode tbody td:nth-child(7) {
      width: 3ch;
      text-align: right;
    }

    table.team-mode.self-input-mode thead th:nth-child(10),
    table.team-mode.self-input-mode tbody td:nth-child(10) {
      width: 2ch;
    }

    table.team-mode thead th:nth-child(2),
    table.team-mode tbody td:nth-child(2),
    table.team-mode select[data-field="team"] {
      width: 2.6ch;
    }

    table.team-mode thead th:nth-child(3),
    table.team-mode tbody td:nth-child(3) {
      width: 4ch;
    }

    table.team-mode thead th:nth-child(5),
    table.team-mode tbody td:nth-child(5) {
      width: 4ch;
    }

    table.team-mode thead th:nth-child(6),
    table.team-mode tbody td:nth-child(6) {
      width: 7ch;
    }

    table.team-mode thead th:nth-child(8),
    table.team-mode tbody td:nth-child(8),
    table.team-mode thead th:nth-child(9),
    table.team-mode tbody td:nth-child(9) {
      width: 4ch;
    }

    table.team-mode thead th:nth-child(10),
    table.team-mode tbody td:nth-child(10) {
      width: 3ch;
    }

    table.team-mode thead th:nth-child(11),
    table.team-mode tbody td:nth-child(11),
    table.team-mode thead th:nth-child(12),
    table.team-mode tbody td:nth-child(12) {
      width: 3ch;
    }

    table.team-mode tbody td:nth-child(7),
    table.team-mode tbody td:nth-child(9),
    table.team-mode tbody td:nth-child(10),
    table.team-mode tbody td:nth-child(11),
    table.team-mode tbody td:nth-child(12) {
      padding-right: 2;
      text-align: center;
    }

    table.team-mode.self-input-mode thead th:nth-child(1) .sort-button,
    table.team-mode.self-input-mode thead th:nth-child(3) .sort-button {
      height: 42px;
      font-size: 0.8em;
      text-align: start;
      text-orientation: upright;
      white-space: nowrap;
      writing-mode: vertical-rl;
    }

    table.team-mode.self-input-mode thead th:nth-child(1) .sort-icon,
    table.team-mode.self-input-mode thead th:nth-child(3) .sort-icon {
      display: none;
    }

    table.team-mode.self-input-mode thead th:nth-child(9) {
      width: 2.7ch;
    }
    table.team-mode.self-input-mode tbody td:nth-child(9) {
      font-size: 0.75em;
      width: 2.7ch;
    }

    table.team-mode.self-input-mode thead th:nth-child(10) {
      width: 2.7ch;
    }
    table.team-mode.self-input-mode tbody td:nth-child(10) {
      font-size: 0.75em;
      width: 2.7ch;
    }

    table.team-mode thead th:nth-child(7) .sort-button,
    table.team-mode thead th:nth-child(9) .sort-button,
    table.team-mode thead th:nth-child(10) .sort-button,
    table.team-mode thead th:nth-child(11) .sort-button,
    table.team-mode thead th:nth-child(12) .sort-button {
      height: 42px;
      font-size: 0.8em;
      text-align: start;
      text-orientation: upright;
      white-space: nowrap;
      writing-mode: vertical-rl;
    }

    table.team-mode thead th:nth-child(7) .sort-icon,
    table.team-mode thead th:nth-child(9) .sort-icon,
    table.team-mode thead th:nth-child(10) .sort-icon,
    table.team-mode thead th:nth-child(11) .sort-icon,
    table.team-mode thead th:nth-child(12) .sort-icon {
      display: none;
    }

    thead th:nth-child(4),
    tbody td:nth-child(4) {
      width: 3ch;
    }

    thead th:nth-child(5),
    tbody td:nth-child(5) {
      width: 3ch;
    }

    thead th:nth-child(6),
    tbody td:nth-child(6) {
      width: 5ch;
    }

    thead th:nth-child(7),
    tbody td:nth-child(7) {
      width: 3ch;
    }

    thead th:nth-child(8),
    tbody td:nth-child(8) {
      width: 2ch;
    }

    thead th:nth-child(9),
    tbody td:nth-child(9),
    thead th:nth-child(11),
    tbody td:nth-child(11) {
      width: 3ch;
    }

    thead th:nth-child(12),
    tbody td:nth-child(12) {
      width: 32px;
      padding: 0;
    }

    .self-input-btns {
      min-width: 64px;
    }

    .self-input-btn {
      font-size: 1rem !important;
      height: 32px !important;
    }

    select[data-field="team"] {
      width: 2ch;
      padding-left: 0;
      padding-right: 0;
    }
  
  }