/* ====== Team Up Down 스코어카드 색상 + 누적 표시 ====== */
  /* teamupdown 모드 — hole-mul-chip 숨김 (×1/×2/×4 표시 불필요)
     실시간 정산 / 최소 송금 영역도 숨김 (live + photo-done 양쪽). */
  body.mode-teamupdown .hole-mul-chip { display: none !important; }
  body.mode-teamupdown #settleHeaderRow,
  body.mode-teamupdown #playerResults,
  body.mode-teamupdown #settlement {
    display: none !important;
  }
  /* ====== 점수 기록 모드 — 정산/베팅 UI 모두 숨김 ====== */
  body.mode-record .hole-mul-chip,
  body.mode-record #settleHeaderRow,
  body.mode-record #playerResults,
  body.mode-record #settlement,
  body.mode-record .min-transfer-wrap,
  body.mode-record .min-transfer-toggle,
  body.mode-record .skins-trophy-badge,
  body.mode-record .tud-cum-label {
    display: none !important;
  }
  /* 점수 기록 모드 — 스코어 셀 아래 정산금/델타 숫자(0 0 0 0) 숨김. 행 높이는 유지(visibility). */
  body.mode-record table.scorecard td.score-cell .cell-sub { visibility: hidden !important; }
  /* 플레이어 이름 헤더 칸 — 팀 색상 (단색 fill, 그라데이션 X).
     White 팀: 옅은 회색 bg + 진한 글씨 (가독성). Green 팀: 그린 bg + 흰 글씨. */
  th.th-player.team-white { background: #e5e7eb !important; }
  th.th-player.team-green { background: #16a34a !important; }
  th.th-player.team-white .th-player-input,
  th.th-player.team-white .th-static-name { color: #1f2937 !important; }
  th.th-player.team-green .th-player-input,
  th.th-player.team-green .th-static-name { color: #ffffff !important; }
  th.th-player.team-white .th-player-input::placeholder { color: rgba(31,41,55,0.5) !important; }
  th.th-player.team-green .th-player-input::placeholder { color: rgba(255,255,255,0.7) !important; }
  /* 핸디캡 cell — 팀 색상 단색 fill */
  th.th-hdcp-val.team-white { background: #e5e7eb !important; }
  th.th-hdcp-val.team-green { background: #16a34a !important; }
  th.th-hdcp-val.team-white .th-handicap-chip {
    background: transparent !important;
    color: #1f2937 !important;
    border-color: rgba(31,41,55,0.3) !important;
  }
  th.th-hdcp-val.team-green .th-handicap-chip {
    background: transparent !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.4) !important;
  }
  /* 누적 lead label — hole-num cell 안에 absolute 로 배치, par column 까지 시각적 침범 OK */
  td.hole-num .tud-cum-label {
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 72px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    letter-spacing: -0.2px;
    white-space: nowrap;
    z-index: 5;
    pointer-events: none;
  }
  td.hole-num .tud-cum-label.white { color: var(--gray-700); }
  td.hole-num .tud-cum-label.green { color: #16a34a; }
  td.hole-num .tud-cum-label.tied  { color: var(--gray-500); font-size: 10.5px; }
  @media (max-width: 600px) {
    td.hole-num .tud-cum-label { width: 64px; font-size: 10px; }
    td.hole-num .tud-cum-label.tied { font-size: 9.5px; }
  }

  /* ====== 팀 Up Down — 가로 스코어카드 (사람=행, 홀=열) ====== */
  body.mode-teamupdown .scorecard-wrap { display: none !important; }
  body.mode-teamupdown #tudScoreWrap { display: block !important; }
  body.mode-teamupdown.saved-sub-score #tudScoreWrap,
  body.mode-teamupdown.saved-sub-detail #tudScoreWrap { display: none !important; }
  body.mode-teamupdown #scHalfCourseNav { display: none !important; }
  .tud-match-chip-row { display: flex; justify-content: center; margin: 2px 0 12px; }
  .tud-match-chip {
    font-size: 15px; font-weight: 800; padding: 5px 16px; border-radius: 999px;
    letter-spacing: -0.2px;
  }
  .tud-match-chip.white { background: #e5e7eb; color: #1f2937; }
  .tud-match-chip.green { background: #16a34a; color: #ffffff; }
  .tud-match-chip.tied  { background: var(--gray-200); color: var(--gray-600); }
  /* 팀 색·업다운 행 — 라이브(#tudScoreWrap)·관전(#spectateBody) 공용(.sp-table 스코프) */
  .sp-table tr.tud-row.team-white .sp-name { background: #f4f5f7; color: var(--gray-800); font-weight: 600; border-left: 3px solid #b6bcc4; }
  .sp-table tr.tud-row.team-green .sp-name { background: #ecf6ef; color: #15603a; font-weight: 600; border-left: 3px solid #4ea877; }
  #tudScoreWrap .tud-cell { cursor: pointer; }
  #tudScoreWrap .tud-cell-cur { background: #ecfdf5; box-shadow: inset 0 0 0 2px #16a34a; border-radius: 4px; }
  /* 결과(마지막) 행 — 어두운 배경으로 White(흰)·Green(초록) 텍스트 모두 잘 보이게 */
  .sp-table tr.tud-ud-row td { background: #1f2a37; font-weight: 800; font-size: 12px; }
  .sp-table tr.tud-ud-row td.sp-name { background: #1f2a37; color: #cbd5e1; font-weight: 700; border-left: 3px solid #1f2a37; }
  .sp-table tr.tud-ud-row td.tud-ud-white { color: #ffffff; }
  .sp-table tr.tud-ud-row td.tud-ud-green { color: #4ade80; }
  .sp-table tr.tud-ud-row td.tud-ud-tied  { color: #9aa7b5; }

  /* ====== Team Up Down picker (dev) — Step 4 wizard 패널의 팀 선택 row ====== */
  .team-picker-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 8px;
  }
  .team-picker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: white;
    border: 1.5px solid var(--gray-300);
    border-radius: 12px;
  }
  .team-picker-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .team-picker-toggle {
    display: inline-flex;
    background: var(--gray-100);
    border-radius: 10px;
    padding: 3px;
    gap: 0;
  }
  .team-picker-toggle button {
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: var(--gray-600);
    font-weight: 700;
    font-size: 13px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    line-height: 1.2;
  }
  .team-picker-toggle button.active.white {
    background: #e5e7eb;
    color: #1f2937;
    border: 1.5px solid #9ca3af;
  }
  .team-picker-toggle button.active.green {
    background: #16a34a;
    color: white;
  }
  .team-picker-row.team-white { border-left: 4px solid #9ca3af; }
  .team-picker-row.team-green { border-left: 4px solid #16a34a; }
  .team-picker-hint {
    font-size: 12.5px;
    color: var(--gray-500);
    text-align: center;
    margin-top: 12px;
    padding: 8px 10px;
    background: var(--gray-50);
    border-radius: 8px;
  }
  .team-picker-hint.warn {
    background: #fef3c7;
    color: #92400e;
    font-weight: 600;
  }
  /* ====== 핸디캡 wizard (오장 전용) — Step 5 ====== */
  .handicap-wizard-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 8px;
  }
  /* row 의 box 는 player-name input 의 wizard 변형과 동일한 시각 — padding/border/radius 일치.
     이전 step (플레이어명 입력) → 이 step 으로 넘어갈 때 "박스는 그대로, 핸디캡 chip 만 새로 생긴" 느낌.
     chip 자체가 텍스트보다 커서 row 가 padding 더해지면 더 두꺼워지는 문제 → height 명시 lock. */
  .handicap-wizard-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 14px;             /* 세로 padding 없음. height 로 lock. chip 은 flex center. */
    height: 55px;                /* wizard input (#gameCard.wizard-active input) 와 동일 시각 높이 */
    box-sizing: border-box;
    background: white;
    border: 1.5px solid var(--gray-300);
    border-radius: 12px;
  }
  .handicap-wizard-row .hw-name {
    font-size: 17px;             /* wizard input 과 동일 */
    font-weight: 400;            /* input value 처럼 */
    color: var(--gray-900);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .handicap-wizard-row .hw-chip {
    min-width: 64px;
    padding: 8px 14px;
    background: var(--gray-100);
    border: 1.5px solid var(--gray-300);
    color: var(--gray-700);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    flex-shrink: 0;
  }
  .handicap-wizard-row .hw-chip.has-handicap {
    background: var(--green-50);
    border-color: var(--green-500);
    color: var(--green-900);
  }
  .handicap-wizard-row .hw-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }
  /* (구) .handicap-wizard-hint — 제거됨. course-helper-text 재사용 (골프장 입력 위저드와 동일 톤). */

  /* ====== 플레이어명 step — hint + 실시간 인원 indicator ====== */
  .player-name-hint {
    font-size: 12.5px;
    color: var(--gray-600);
    margin: 0 4px 14px;
    line-height: 1.5;
    padding: 8px 12px;
    background: var(--gray-50);
    border-radius: 8px;
    border-left: 3px solid var(--green-500);
  }
  .player-count-indicator {
    margin-top: 12px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--green-700);
    padding: 8px 14px;
    background: var(--green-50);
    border: 1px solid var(--green-200);
    border-radius: 999px;
    transition: all 0.2s ease-out;
  }
  /* 1명 이하면 경고 톤 (활성자 1명은 게임 X) */
  .player-count-indicator.warn {
    color: #92400e;
    background: #fef3c7;
    border-color: #fde68a;
  }

  /* ====== Host 전용 — 본인 슬롯 선택 wizard step (data-step=6) ====== */
  .host-slot-pick-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 8px;
  }
  .host-slot-pick-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 14px;               /* wizard input / handicap row 와 동일 — height 로 lock */
    height: 55px;
    box-sizing: border-box;
    background: white;
    border: 1.5px solid var(--gray-300);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .host-slot-pick-row:hover {
    border-color: var(--green-500);
  }
  .host-slot-pick-row.selected {
    border-color: var(--green-600);
    background: var(--green-50);
    box-shadow: 0 0 0 2px var(--green-100);
  }
  .host-slot-pick-row .hs-radio {
    width: 22px;
    height: 22px;
    border: 2px solid var(--gray-400);
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s;
  }
  .host-slot-pick-row.selected .hs-radio {
    border-color: var(--green-600);
  }
  .host-slot-pick-row.selected .hs-radio::after {
    content: '';
    width: 12px;
    height: 12px;
    background: var(--green-600);
    border-radius: 50%;
  }
  .host-slot-pick-row .hs-name {
    flex: 1;
    min-width: 0;
    font-size: 17px;
    font-weight: 400;
    color: var(--gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .host-slot-pick-row .hs-chip {
    min-width: 64px;
    padding: 8px 14px;
    background: var(--gray-100);
    border: 1.5px solid var(--gray-300);
    color: var(--gray-700);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 800;
    flex-shrink: 0;
    text-align: center;
    font-family: inherit;
  }
  .host-slot-pick-row.selected .hs-chip {
    background: white;
    border-color: var(--green-500);
    color: var(--green-900);
  }

  /* ====== 게임 참여자 (옵션 모달 내 인라인 섹션 — 항상 열림, 카드 X) ====== */
  .ingame-section {
    margin: 0 0 18px;
  }
  /* record 모드 — 정산이 없으니 참여자 section 자체 숨김 (옵션 모달도 거의 없지만 안전) */
  body.mode-record .ingame-section { display: none !important; }
  /* 초기 wizard ('게임 옵션 선택해주세요') 단계에선 게임 참여자 dropdown 숨김.
     아직 골프장/플레이어 이름 입력 전이라 참여자 결정 부자연스러움.
     스코어카드의 '룰변경' chip → 설정 모달 (modal-open) 에서만 노출. */
  #gameCard.wizard-active .ingame-section { display: none !important; }

  /* ====== 게임 참여자 선택 — 2x2 그리드, 플레이어명 폭 동일 (배판 트리거와 동일 서식) ====== */
  .ingame-pick-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 8px;
  }
  .ingame-pick-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    min-width: 0;
    height: 48px;
    box-sizing: border-box;
    background: white;
    border: 1.5px solid var(--gray-300);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .ingame-pick-row.checked {
    border-color: var(--green-600);
    background: var(--green-50);
  }
  .ingame-pick-row.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--gray-50);
  }
  .ingame-pick-row .igp-check {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-400);
    border-radius: 5px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    font-size: 13px;
    color: white;
  }
  .ingame-pick-row.checked .igp-check {
    background: var(--green-600);
    border-color: var(--green-600);
  }
  .ingame-pick-row.checked .igp-check::after {
    content: '✓';
    font-weight: 900;
  }
  .ingame-pick-row .igp-name {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 400;
    color: var(--gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ingame-pick-row .igp-chip {
    min-width: 40px;
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: var(--gray-700);
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 700;
    flex-shrink: 0;
    text-align: center;
  }
  .ingame-pick-row.checked .igp-chip {
    background: transparent;
    border: none;
    color: var(--green-900);
  }
  /* '시작' 비활성화 상태 — 본인 슬롯 미선택 시 */
  #gameCard.wizard-active #wizardNextBtn:disabled,
  #gameCard.wizard-active #wizardNextBtn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* ====== Activity toast — 다른 참가자가 점수 입력했을 때 잠깐 노출 ====== */
  .round-activity-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 8px 16px;
    background: rgba(28,87,52,0.92);
    color: white;
    font-size: 13px;
    font-weight: 700;
    border-radius: 20px;
    z-index: 9998;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    white-space: nowrap;
    max-width: 90vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .round-activity-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* ====== 프로필 chip (entryMethodCard 우측 상단 — h1 첫 줄 line 정렬) ====== */
  /* Header 안에 위치 — header flex (space-between) 의 우측 자식. align-items center 가 세로 중앙. */
  .profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 5px;
    background: white;
    border: 1.5px solid var(--gray-200);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    max-width: 160px;
    flex-shrink: 0;
  }
  .profile-chip:hover {
    border-color: var(--green-500);
    transform: scale(1.03);
  }
  .profile-chip .pc-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--green-700);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
  }
  .profile-chip .pc-avatar.no-profile {
    background: var(--gray-300);
    color: var(--gray-700);
  }
  .profile-chip .pc-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 110px;
  }
  /* 홈 외 화면에선 숨김 — header 영역은 globalBackChevron 또는 round-status-chip 용으로 활용 */
  body.away-from-home .profile-chip,
  body.round-active .profile-chip {
    display: none !important;
  }
  @media (max-width: 600px) {
    .profile-chip { padding: 5px 11px 5px 4px; font-size: 12px; }
    .profile-chip .pc-avatar { width: 24px; height: 24px; font-size: 11px; }
    .profile-chip .pc-name { max-width: 90px; }
  }

  /* ====== Round 진행 중 — 헤더 코드 chip (디자인 그린) ====== */
  .round-status-chip {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(20,83,45,.16);
    border-radius: 999px;
    color: var(--green-900,#14532d);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    box-shadow: 0 3px 10px rgba(20,83,45,0.10);
    z-index: 60;
  }
  .round-status-chip:hover { box-shadow: 0 3px 10px rgba(20,83,45,0.4); transform: translateY(-50%) scale(1.03); }
  .round-status-chip .rsc-emoji { font-size: 14px; line-height: 1; }
  .round-status-chip .rsc-code { letter-spacing: 0.15em; }
  .round-status-chip img, .sp-net-code-chip img { width:20px; height:20px; object-fit:contain; }
  /* 단순기록 네트워크 접속번호 칩 — 편집기 헤더 우측상단(round-status-chip 톤 동일). */
  .sp-net-code-chip {
    margin-left: auto;   /* 헤더 flex 우측정렬 — align-items:center 로 그리너 로고와 세로중앙 정렬 */
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(20,83,45,.16); border-radius: 999px; color: var(--green-900,#14532d); font-size: 13px; font-weight: 800;
    letter-spacing: 0.15em; cursor: pointer; font-family: inherit;
    box-shadow: 0 3px 10px rgba(20,83,45,0.10); z-index: 60;
  }
  .sp-net-code-chip span:first-child { font-size: 14px; line-height: 1; letter-spacing: 0; }
  /* 스코어카드 관전자 칩 — 베뉴 아래, 표 위. 중앙정렬. */
  .sc-viewers-row { margin: 2px 0 8px; }
  /* .sc-viewers-chip 레이아웃은 styles/03 공용 규칙(.sp-viewers, .sc-viewers-chip)이 담당 — 풀폭 flex(관전 헤더+LIVE+💬). */
  .sc-viewers-chip .scv-avs, .sp-viewers .scv-avs { display: inline-flex; }
  .sc-viewers-chip .scv-av, .sp-viewers .scv-av { width: 20px; height: 20px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; border: 1.5px solid #fff; box-sizing: border-box; transition: opacity .3s ease; }
  .sc-viewers-chip .scv-av.scv-off, .sp-viewers .scv-av.scv-off { opacity: 0.38; }   /* 나갔지만 한 번이라도 본 관전자 — 흐리게 유지 */
  .sp-viewers .scv-avs { vertical-align: middle; margin-right: 5px; }
  .sc-viewers-chip .scv-eye { font-size: 12px; }
  /* 라운드 진행 중일 때만 노출 — body.round-active 토글 */
  body.round-active .round-status-chip { display: inline-flex !important; }
  body.round-active .subtitle { display: none !important; }
  body.round-active .header-rule-chip { display: none !important; }
  /* 모바일 — 헤더 우측 fixed 위치 */
  @media (max-width: 600px) {
    .round-status-chip { right: 8px; padding: 5px 10px; font-size: 12px; }
    .round-status-chip .rsc-emoji { font-size: 13px; }
  }
  /* round-status-modal */
  .round-status-modal { max-width: 420px; }

  /* ====== Round 공유 (dev) — 슬롯 미클레임 사용자 표시 (read-only 아님) ======
     코드 입장자는 슬롯 클레임 여부와 무관하게 모든 슬롯 점수 입력 가능.
     unclaim 상태는 단지 "내 이름이 라운드에 표시 안 됨" 의미. */
  body.round-unnamed::after {
    content: '👤 이름 없이 참가 중 — 점수 입력 가능';
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    background: #1c5734;
    color: white;
    font-size: 12px;
    font-weight: 700;
    border-radius: 20px;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  }
  /* slot-claim-modal — 라운드 join 후 슬롯 선택 */
  .slot-claim-modal { max-width: 420px; }
  .slot-claim-modal h3 { font-size: 17px; font-weight: 800; color: var(--green-900); margin: 0 0 4px; }
  /* round-code-modal — host 모드 코드 발급 */
  .round-code-modal { max-width: 420px; }
  /* join-round-modal — 동반자 모드 코드 입력 */
  .join-round-modal { max-width: 380px; }
  .join-round-modal h3 { font-size: 17px; font-weight: 800; color: var(--green-900); margin: 0 0 4px; }

  /* ====== Dev mode (feature flag) ======
     일반 사용자에겐 .dev-only 요소가 안 보이고, body.dev-mode 사용자에겐 표시.
     JS 의 setupDevMode 가 body 클래스를 토글.
     ⚠️ 'display: revert' 는 button 의 UA 기본값(inline-block) 으로 되돌리므로 .picker-btn 의 flex 가 깨짐.
        → 각 dev-only 요소 타입별로 명시적 display 지정. 새 dev-only 요소 추가 시 같은 패턴으로 한 줄 추가. */
  .dev-only { display: none !important; }
  body.dev-mode .dev-only { display: revert !important; }
  body.dev-mode button.dev-only.picker-btn { display: flex !important; }
  body.dev-mode button.dev-only.method-btn { display: grid !important; }
  /* dev 사용자에게 보이는 모서리 배지 — 어느 모드인지 즉시 알 수 있게 */
  body.dev-mode::before {
    content: 'DEV';
    position: fixed;
    top: 4px;
    left: 4px;
    background: #b45309;
    color: white;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.85;
  }
  .container { max-width: 1100px; margin: 0 auto; }
  /* 넓은 웹 화면 — 모바일 중심 콘텐츠가 과도하게 늘어나지 않도록 탭별 폭 제한. */
  @media (min-width: 900px) {
    body.tab-game .container { max-width: 560px; }
    body.tab-feed .container,
    body.tab-record .container,
    body.tab-profile .container { max-width: 820px; }
    .bottom-nav {
      left: 50%;
      right: auto;
      width: min(620px, calc(100% - 24px));
      box-sizing: border-box;
      transform: translateX(-50%);
    }
  }
  header {
    text-align: center;
    margin-bottom: 28px;
  }
  /* 헤더 — PASS 스타일: greener(좌, 크게) + 부제(우, 작게 2줄).
     position: fixed 로 viewport 상단 절대 고정 — iOS 키패드 열려도 절대 안 움직임.
     viewport meta 의 interactive-widget=resizes-content 와 결합하면 키보드 위 visible area 의 top 에 stays. */
  /* 헤더 — 배경 투명 + 고정. 스크롤 다운 시 위로 숨김, 스크롤 업 시 다시 등장(.header-hidden 토글). */
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    /* 최상단에서도 불투명 크림 — 살짝 오버스크롤 시 콘텐츠가 로고 밑으로 겹쳐 보이는 현상 방지.
       페이지 배경과 동일한 크림이라 겉보기는 그대로. 스크롤 시엔 .header-glass 가 프로스트로 덮음. */
    background: var(--app-bg);
    /* 상단 안전영역(아이폰 노치/상단바)까지 헤더가 덮도록 — 글라스 시 상단바도 블러 */
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 20px 10px;
    margin: 0;
    min-height: calc(env(safe-area-inset-top, 0px) + 84px);
    box-sizing: border-box;
    transform: translateY(0);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }
  header.header-hidden { transform: translateY(-120%); }
  /* 스크롤 중(최상단 아님) 헤더 등장 시 — 글라스 배경으로 콘텐츠와 분리 (더 불투명 + less blur) */
  header.header-glass {
    background: rgba(250,248,242,0.95);
    -webkit-backdrop-filter: blur(6px) saturate(150%);
    backdrop-filter: blur(6px) saturate(150%);
    box-shadow: 0 2px 14px rgba(0,0,0,0.06);
  }
  body { padding-top: calc(env(safe-area-inset-top, 0px) + 84px); }
  @media (max-width: 600px) {
    header { min-height: calc(env(safe-area-inset-top, 0px) + 70px); }
    body { padding-top: calc(env(safe-area-inset-top, 0px) + 70px); }
  }
  h1 {
    margin: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0;                          /* 글자 ↔ 마크 ↔ 글자 가까이 붙임 */
    line-height: 1;
  }
  h1 .brand-letters {
    font-family: 'Bebas Neue', 'Oswald', 'Helvetica Neue', -apple-system, sans-serif;
    font-size: 52px;                 /* 디스플레이 폰트는 비주얼 사이즈가 작아 보여 크게 */
    font-weight: 400;                /* Bebas Neue 는 single weight */
    color: #1c5734;
    letter-spacing: 1.5px;
    line-height: 1;
    /* 폰트 metrics 정렬 보정 (Bebas Neue x-height) */
    vertical-align: middle;
    display: inline-block;
    padding-top: 2px;
  }
  h1 .brand-mark {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    margin: 0 1px;                   /* 양쪽 글자와 살짝 간격 */
  }
  /* greener 워드마크 이미지 (메인 로고에서 추출) */
  h1 .brand-wordmark {
    height: 42px;
    width: auto;
    display: block;
    margin: 0;
  }
  @media (max-width: 600px) {
    h1 .brand-letters { font-size: 42px; letter-spacing: 1.2px; }
    h1 .brand-mark { width: 36px; height: 36px; }
    h1 .brand-wordmark { height: 38px; }
  }
  .subtitle {
    color: var(--gray-500);
    font-size: 13px;
    line-height: 1.45;
    text-align: right;
    margin: 0;
    white-space: pre-line;
    font-weight: 500;
  }
  /* 게임룰 변경 chip — scorecardCard 의 title("결과를 확인해주세요" / "게임을 시작해주세요") 우측 하단.
     .sc-title-wrap (relative) 안에 absolute 로 위치 → title 두 줄 텍스트 마지막 줄과 같은 baseline. */
  .sc-title-wrap { position: relative; }
  /* 룰 변경 — 톱니바퀴 SVG 아이콘만. 칩 배경/테두리/텍스트 모두 제거. */
  .header-rule-chip {
    position: absolute;
    right: 4px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: transparent;
    border: none;
    color: var(--green-900);
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
    font-family: inherit;
  }
  .header-rule-chip:hover { opacity: 0.7; }
  .header-rule-chip:active { transform: translateY(-50%) scale(0.92); }
  .header-rule-chip .hgr-emoji,
  .header-rule-chip .hgr-label {
    display: none !important;             /* 이모지 + 텍스트 라벨 모두 숨김 */
  }
  .header-rule-chip::before {
    content: '';
    width: 22px;
    height: 22px;
    /* 톱니바퀴 SVG inline (currentColor 사용 — green-900) */
    background: currentColor;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.4 13a7.4 7.4 0 0 0 0-2l2.1-1.6a.5.5 0 0 0 .1-.6l-2-3.4a.5.5 0 0 0-.6-.2l-2.5 1a7.3 7.3 0 0 0-1.7-1L14.4 2.4a.5.5 0 0 0-.5-.4h-4a.5.5 0 0 0-.5.4L9 5.2a7.3 7.3 0 0 0-1.7 1l-2.5-1a.5.5 0 0 0-.6.2l-2 3.4a.5.5 0 0 0 .1.6L4.6 11a7.4 7.4 0 0 0 0 2l-2.1 1.6a.5.5 0 0 0-.1.6l2 3.4a.5.5 0 0 0 .6.2l2.5-1a7.3 7.3 0 0 0 1.7 1l.4 2.8a.5.5 0 0 0 .5.4h4a.5.5 0 0 0 .5-.4l.4-2.8a7.3 7.3 0 0 0 1.7-1l2.5 1a.5.5 0 0 0 .6-.2l2-3.4a.5.5 0 0 0-.1-.6L19.4 13zM12 15.5A3.5 3.5 0 1 1 15.5 12 3.5 3.5 0 0 1 12 15.5z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.4 13a7.4 7.4 0 0 0 0-2l2.1-1.6a.5.5 0 0 0 .1-.6l-2-3.4a.5.5 0 0 0-.6-.2l-2.5 1a7.3 7.3 0 0 0-1.7-1L14.4 2.4a.5.5 0 0 0-.5-.4h-4a.5.5 0 0 0-.5.4L9 5.2a7.3 7.3 0 0 0-1.7 1l-2.5-1a.5.5 0 0 0-.6.2l-2 3.4a.5.5 0 0 0 .1.6L4.6 11a7.4 7.4 0 0 0 0 2l-2.1 1.6a.5.5 0 0 0-.1.6l2 3.4a.5.5 0 0 0 .6.2l2.5-1a7.3 7.3 0 0 0 1.7 1l.4 2.8a.5.5 0 0 0 .5.4h4a.5.5 0 0 0 .5-.4l.4-2.8a7.3 7.3 0 0 0 1.7-1l2.5 1a.5.5 0 0 0 .6-.2l2-3.4a.5.5 0 0 0-.1-.6L19.4 13zM12 15.5A3.5 3.5 0 1 1 15.5 12 3.5 3.5 0 0 1 12 15.5z"/></svg>');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  /* subtitle (헤더 우측) — 라운드 진행 중엔 시각 충돌 없음. body.away-from-home 의 기존 subtitle 숨김 규칙은
     다른 곳에서 처리되므로 여기선 유지. */
  body.manual-stage .header-rule-chip,
  body.photo-done-stage .header-rule-chip { display: inline-flex !important; }
  /* 점수 기록 모드 — 룰/베팅은 없지만 톱니바퀴(설정)는 노출해 게임 모드를 바꿀 수 있게 함. */
  @media (max-width: 600px) {
    .header-rule-chip { right: 2px; padding: 5px; }
    .header-rule-chip::before { width: 20px; height: 20px; }
  }
  @media (max-width: 600px) {
    header { gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 8px; }
    h1 { font-size: 30px; }
    .subtitle { font-size: 12px; line-height: 1.4; }
  }
  .card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(20,83,45,0.05);
    margin-bottom: 20px;
    border: 1px solid var(--gray-200);
  }
  h2 {
    font-size: 18px;
    margin: 0 0 16px;
    color: var(--green-900);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
  .field { flex: 1; min-width: 180px; }
  label {
    display: block;
    font-size: 12px;
    color: var(--gray-500);
    margin-bottom: 6px;
    font-weight: 500;
  }
  input[type="text"], input[type="number"], input[type="date"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 14px;
    background: white;
    transition: all 0.15s;
    font-family: inherit;
    color: var(--gray-900);
    appearance: none;
    -webkit-appearance: none;
  }
  input[type="text"]:focus, input[type="number"]:focus, input[type="date"]:focus {
    outline: none;
    border-color: var(--green-500);
    box-shadow: 0 0 0 3px var(--green-100);
  }
  /* 키보드 포커스 — 색 변화만이 아니라 딥그린 외곽선으로 현재 입력 위치를 명확히 표시. */
  input[type="text"]:focus-visible,
  input[type="number"]:focus-visible,
  input[type="date"]:focus-visible,
  input[type="email"]:focus-visible,
  input[type="password"]:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 2px solid var(--green-800, #166534);
    outline-offset: 2px;
    border-color: var(--green-700, #15803d);
    box-shadow: 0 0 0 4px rgba(21,128,61,.12);
  }
  /* 날짜 input — 값이 없을 때 placeholder 처럼 보이게 (iOS Safari 는 빈 date 의 자체 placeholder 가 없음).
     ::-webkit-datetime-edit-* pseudo 로 라벨 색을 회색으로 처리. */
  input[type="date"]::-webkit-date-and-time-value { text-align: left; }
  input[type="date"]:not(.has-value)::-webkit-datetime-edit { color: var(--gray-400); }
  input[type="date"] { color: var(--gray-900); }
  /* iOS Safari 줌인 방지 — 모바일에서 편집 가능한 input의 글꼴이 16px 미만이면 포커스 시 페이지가 확대됨.
     readonly 입력(스코어/Par)은 키보드가 안 떠서 줌도 안 되므로 제외. 편집 가능한 input만 16px로 강제. */
  @media (max-width: 600px) {
    input[type="text"]:not([readonly]),
    input[type="number"]:not([readonly]),
    input[type="date"]:not([readonly]),
    input[type="tel"]:not([readonly]),
    input[type="email"]:not([readonly]),
    textarea {
      font-size: 16px;
    }
  }
  .mode-tabs {
    display: flex;
    gap: 8px;
    background: var(--gray-100);
    padding: 4px;
    border-radius: 10px;
  }
  .bet-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  /* 모든 게임모드의 금액 chip — 같은 넓이(flex:1 균등) + 한 줄이 화면 폭을 꽉 채움. */
  .bet-btn {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    padding: 8px 6px;
    border: 1px solid var(--gray-300);
    background: white;
    color: var(--gray-700);
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .bet-btn:hover { background: var(--gray-100); border-color: var(--gray-500); }
  .bet-btn.active {
    background: var(--green-700);
    color: white;
    border-color: var(--green-700);
  }
  .bet-btn.active:hover { background: var(--green-900); }
  /* 모바일 — chip 5개가 한 줄에 균등하게 들어오도록 폰트/패딩 축소. */
  @media (max-width: 600px) {
    .bet-btn { font-size: 12px; padding: 8px 3px; }
  }
  /* 기타 금액 입력 시 활성화 표시 */
  input#betAmount.custom-active {
    border-color: var(--green-500);
    background: var(--green-50);
    color: var(--green-900);
    font-weight: 700;
    box-shadow: 0 0 0 3px var(--green-100);
  }
  .custom-bet-confirm {
    margin-top: 6px;
    padding: 6px 10px;
    background: var(--green-100);
    color: var(--green-900);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .custom-bet-confirm::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: var(--green-700);
    color: white;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
  }
  /* 점수 모양 표시 — 입력칸을 SVG로 둘러쌈
     wrap 크기를 사각형 모양과 동일하게 62×34로 키워서 파/보기 모두 같은 크기로 보이게 함 */
  .score-input-wrap {
    position: relative;
    /* inline-flex + center 로 input 의 텍스트가 wrap 의 정중앙에 위치 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 28px;
    vertical-align: middle;
    line-height: 1;
    /* 시각적 박스 — 옅은 초록 배경 + 회색 보더. score-shape 가 있을 때 보더는 투명해지고 SVG 가 시각 박스 역할. */
    border: 1.5px solid var(--gray-300);
    border-radius: 6px;
    background: var(--green-50, #f0fdf4);
    box-sizing: border-box;
  }
  .score-shape-overlay {
    position: absolute;
    /* inset 최소화 — shape 가 wrap 의 거의 전체 영역을 채우도록 키움 */
    top: -2px;
    bottom: -2px;
    left: 1px;
    right: 1px;
    pointer-events: none;
    z-index: 1;
    display: block;
  }
  .score-shape-overlay svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }
  /* table.scorecard input.score 의 width: 48px 를 덮어쓰기 위해 더 구체적인 선택자 사용 */
  table.scorecard .score-input-wrap input.score {
    position: relative;
    z-index: 2;
    /* 배경 투명 — wrap 의 옅은 초록 배경/SVG shape 가 보이도록 */
    background: transparent;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-align: center;
  }
  /* 기본 number 스피너 제거 — 텍스트가 진짜 중앙에 오도록 */
  .score-input-wrap input.score::-webkit-inner-spin-button,
  .score-input-wrap input.score::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    display: none;
  }
  .score-input-wrap input.score {
    -moz-appearance: textfield;
    appearance: textfield;
  }
  /* 입력칸 + 스피너 + (옵션) 니어 탭을 묶는 hover 컨테이너
     좌우 padding 동일 → score-input-wrap이 score-hover-area의 정중앙에 위치 → 헤더와 셀 가운데 정렬 */
  .score-hover-area {
    position: relative;
    display: inline-block;
    padding: 0 18px;
    vertical-align: middle;
  }
  /* 커스텀 스피너 — 호버 시에만 input 박스 오른쪽 바깥에 떠오름 */
  /* 스피너 ▲▼는 키패드 도입으로 사용 안 함 — DOM은 그대로 둬도 표시 안 됨 */
  .score-spinner {
    display: none !important;
  }
  .spinner-btn {
    flex: 1;
    border: 1px solid var(--gray-300);
    background: white;
    color: var(--gray-700);
    cursor: pointer;
    font-size: 7px;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s, color 0.1s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  }
  .spinner-btn:hover {
    background: var(--green-700);
    color: white;
    border-color: var(--green-700);
  }
  .spinner-up {
    border-radius: 4px 4px 0 0;
    border-bottom: none;
  }
  .spinner-down {
    border-radius: 0 0 4px 4px;
  }
  /* shape 가 있는 경우 — wrap 보더 투명 (SVG shape 가 시각 박스 역할). 배경은 옅은 초록 유지. */
  table.scorecard .score-input-wrap.has-shape {
    border-color: transparent;
  }
  /* 파 (diff === 0) — 기본 wrap 스타일 그대로 (옅은 초록 배경 + 회색 보더). 강조 없음. */
  /* Scorecard 헤더 — 행 구조 */
  .sc-header-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .sc-header-row-1 { margin-bottom: 8px; }
  .sc-header-row-2 { margin-bottom: 14px; align-items: center; }
  /* 스코어카드 헤더 한 줄: 좌측 게임타입 (클릭=모달) + 우측 마킹 토글 */
  .sc-header-row-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
  }
  .sc-game-display {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: white;
    border: 1px solid var(--green-100);
    border-radius: 10px;
    color: var(--green-900);
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 120px;
  }
  .sc-game-display:hover {
    background: var(--green-50);
    border-color: var(--green-500);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  }
  .sc-game-display .sc-game-emoji { font-size: 22px; line-height: 1; }
  .sc-game-label-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }
  .sc-game-display .sc-game-label { font-size: 14px; letter-spacing: -0.2px; line-height: 1.1; }
  .sc-game-display .sc-game-edit-hint {
    font-size: 10px;
    font-weight: 600;
    color: var(--gray-500);
    line-height: 1;
  }
  .sc-game-display:hover .sc-game-edit-hint { color: var(--green-700); }
  @media (max-width: 600px) {
    .sc-header-row-grid { gap: 6px; margin-bottom: 12px; }
    .sc-game-display { padding: 7px 12px; gap: 6px; min-width: 110px; }
    .sc-game-display .sc-game-emoji { font-size: 20px; }
    .sc-game-display .sc-game-label { font-size: 13px; }
    .sc-game-display .sc-game-edit-hint { font-size: 9.5px; }
  }
  /* 스코어카드 박스 위쪽에 위치하는 골프장(코스)·날짜 행 */
  .sc-venue-bar {
    display: none;  /* 기본 숨김 — setAppStage에서 manual/photo-done일 때 노출 */
    flex-direction: column;      /* 베뉴·코스 줄 / 날짜·토글 줄 — 중앙정렬 텍스트 포맷 */
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex-wrap: nowrap;
    margin: 4px 4px 8px;
  }
  .sc-venue-bar.visible { display: flex; }
  .sc-venue-bar.sp-vbar { display: flex; margin: 0 0 4px; text-align: left; }
  .sp-venue-cell { position: relative; }
  .sp-venue-suggest { display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:50; background:#fff; border:1px solid var(--gray-200,#e5e7eb); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.14); overflow:hidden; max-height:220px; overflow-y:auto; }
  /* 기록 편집기(sp-vbar) 자동완성 드롭다운 — 셀이 좁아도 선택지가 보이도록 넓게. */
  .sp-vbar .sp-venue-suggest { right:auto; min-width:180px; max-width:78vw; width:max-content; }
  .sp-vsug-item { padding:10px 12px; font-size:13.5px; font-weight:700; color:var(--gray-800,#1f2937); cursor:pointer; border-bottom:1px solid var(--gray-100,#f3f4f6); -webkit-tap-highlight-color:transparent; white-space:nowrap; }
  .sp-vsug-item:last-child { border-bottom:none; }
  .sp-vsug-item:active { background:var(--green-50,#f0fdf4); }
  /* '설정변경' 버튼 (모달 trigger) */
  .sc-settings-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: white;
    color: var(--green-900);
    border: 1px solid var(--green-100);
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
  }
  .sc-settings-btn:hover {
    background: var(--green-50);
    border-color: var(--green-500);
  }
  .sc-settings-btn .sc-settings-gear { font-size: 14px; }
  @media (max-width: 600px) {
    .sc-settings-btn { padding: 6px 10px; font-size: 12px; }
  }