/* ====== 전/후반 view 분리 — body class 기반 row hiding ======
     기본 default = front. 'sc-view-back' 으로 토글. 'sc-view-all' 일 때는 모두 노출 (캡쳐용).
     Total (grand 18홀) summary 는 두 view 모두에서 마지막에 노출. */
  body.sc-view-front #scorecardBody tr.sc-row-back,
  body.sc-view-front #scorecardBody tr.summary-row[data-section="back"] { display: none !important; }
  body.sc-view-back #scorecardBody tr.sc-row-front,
  body.sc-view-back #scorecardBody tr.summary-row[data-section="front"] { display: none !important; }
  /* sc-view-all (캡쳐 모드) — 아무것도 숨기지 않음. 기본 행동. */
  /* 저장 라운드 게임 조회(읽기전용) — 전/후반 토글 없이 전후반 한 화면(관전·공유와 일관). 편집(saved-round-editing) 시엔 토글 복귀.
     게임뷰 = 저장 라운드에서 스코어/상세 서브뷰가 아닌 경우(기본 or saved-sub-game). */
  body.saved-round-view:not(.saved-sub-score):not(.saved-sub-detail):not(.saved-round-editing) #scHalfCourseNav { display: none !important; }
  body.saved-round-view:not(.saved-sub-score):not(.saved-sub-detail):not(.saved-round-editing) #scorecardBody tr.sc-row-front,
  body.saved-round-view:not(.saved-sub-score):not(.saved-sub-detail):not(.saved-round-editing) #scorecardBody tr.sc-row-back,
  body.saved-round-view:not(.saved-sub-score):not(.saved-sub-detail):not(.saved-round-editing) #scorecardBody tr.summary-row { display: table-row !important; }

  /* 디테일 행(1~18홀 + summary-front/back) — body.details-shown 일 때만 노출 (라이브/OCR 공용).
     라이브(manual): default open (details-shown), 사용자가 토글하면 접힘.
     OCR(photo-done): default closed, 토글하면 펼침. */
  body:not(.details-shown) #scorecardBody tr.sc-row-front,
  body:not(.details-shown) #scorecardBody tr.sc-row-back,
  body:not(.details-shown) #scorecardBody tr.summary-front,
  body:not(.details-shown) #scorecardBody tr.summary-back {
    display: none;
  }
  /* 게임설정/마킹 버튼 — 상세 스코어카드가 펼쳐졌을 때만 노출. */
  body.photo-done-stage #scorecardCard .sc-bottom-actions { display: none; }
  body.photo-done-stage.details-shown #scorecardCard .sc-bottom-actions {
    display: grid;
  }

  /* flex order — scorecardCard(10, 결과를 title) → settlementCard(11, 토글+테이블+정산) → step2-back(12).
     scorecard-wrap(테이블) 은 settlementCard 안으로 이동됨 → 토글과 실시간 정산 사이에 위치. */
  body.photo-done-stage .container {
    display: flex;
    flex-direction: column;
  }
  body.photo-done-stage #scorecardCard { order: 10; }
  body.photo-done-stage #settlementCard { order: 11; }
  body.photo-done-stage .step2-back-wrap { order: 12; }
  body.photo-done-stage #historyCard { order: 13; }
  /* 토글 wrap 사용 안 함 — 항상 숨김. */
  .step2-settle-wrap { display: none !important; }
  .step2-back-wrap { display: none; }
  body.photo-done-stage .step2-back-wrap {
    display: flex;
    flex-direction: column;
    margin: 8px 0 24px;
  }
  /* (구) 사진 OCR 상단 탭 (전체/전반/후반) — scCardHead(전반/후반)로 대체됨. 항상 숨김. */
  .section-tabs-top,
  body.photo-done-stage #scorecardCard .section-tabs-top { display: none !important; }
  body.photo-done-stage .section-tabs-top .sv-btn {
    /* 가로 탭 — Step 1 의 큰 세로 버튼보다 작게, 그러나 명확하게 */
    padding: 10px 8px;
    border-radius: 10px;
    background: var(--gray-100);
    border: 1.5px solid var(--gray-300);
    color: var(--gray-700);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.3px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
  }
  body.photo-done-stage .section-tabs-top .sv-btn.active {
    background: #1c5734;
    border-color: #1c5734;
    color: white;
  }
  body.photo-done-stage .section-tabs-top .sv-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
  }
  /* show-settlement 일 때만 토글 버튼 텍스트 다르게 — JS 가 text 갱신 */
  .step2-settle-btn {
    width: 100%;
    padding: clamp(8px, 2.2vw, 12px) clamp(14px, 4.5vw, 22px);
    border-radius: 14px;
    background: #1c5734;
    border: 1.5px solid #1c5734;
    color: white;
    font-size: clamp(16px, 4.8vw, 20px);
    font-weight: 800;
    letter-spacing: -0.3px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
  }
  .step2-settle-btn:hover, .step2-settle-btn:active {
    background: #163f24;
    border-color: #163f24;
  }
  .step2-back-btn {
    width: 100%;
    padding: clamp(8px, 2.2vw, 12px) clamp(14px, 4.5vw, 22px);
    border-radius: 14px;
    background: var(--gray-100);
    border: 1.5px solid var(--gray-300);
    color: var(--gray-700);
    font-size: clamp(16px, 4.8vw, 20px);
    font-weight: 700;
    letter-spacing: -0.3px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
  }
  .step2-back-btn:hover, .step2-back-btn:active {
    background: var(--gray-200);
    border-color: var(--gray-400);
  }
  /* OCR 결과 '사진 추가'(머지) — 초록 primary. wrap 이 photo-done 에서만 flex 라 자동으로 결과화면에서만 노출. */
  body.photo-done-stage .step2-back-wrap { gap: 8px; }
  .step2-add-btn {
    width: 100%;
    padding: clamp(8px, 2.2vw, 12px) clamp(14px, 4.5vw, 22px);
    border-radius: 14px;
    background: var(--green-50, #eef7f0);
    border: 1.5px solid var(--green-600, #16a34a);
    color: var(--green-800, #166534);
    font-size: clamp(15px, 4.4vw, 18px);
    font-weight: 800;
    letter-spacing: -0.3px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
  }
  .step2-add-btn:hover, .step2-add-btn:active { background: #e2f2e6; }
  /* 스코어카드 상단 1x2 — 게임 설정 / 마킹 (위치를 위로 이동했지만 클래스명은 유지). */
  .sc-bottom-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
    margin-top: 16px;
  }
  /* 스코어카드 하단 버튼 — 상단 탭(.section-tabs-top .sv-btn) 과 동일한 포맷 */
  .sc-bottom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 8px;
    background: var(--gray-100);
    border: 1.5px solid var(--gray-300);
    color: var(--gray-700);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.3px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .sc-bottom-btn .sc-game-emoji { font-size: 0.95em; }
  .sc-bottom-btn:hover,
  .sc-bottom-btn:active {
    background: var(--gray-200);
    border-color: var(--gray-400);
  }
  /* 모바일에서는 3개가 한 줄에 들어가게 폰트 살짝 축소 */
  @media (max-width: 600px) {
    .sc-bottom-btn { padding: 9px 4px; font-size: 13px; }
  }
  /* 전반/후반/전체 결과 3-button 스택 — 종료후(photo-done) Step 1 에서 단독 노출. */
  .section-pick-wrap { display: none; }
  body.photo-section-pending .section-pick-wrap {
    display: block;
    margin: 8px 0 14px;
  }
  .section-view-switcher {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  /* Step 1 (photo-section-pending) — 베뉴바 + 3 버튼만 보이고 나머지 모두 숨김 */
  body.photo-section-pending #scVenueBar,
  body.photo-section-pending #ocrCard,
  body.photo-section-pending #gameCard,
  body.photo-section-pending #scorecardCard,
  body.photo-section-pending #settlementCard { display: none !important; }
  .sv-btn {
    padding: clamp(8px, 2.2vw, 12px) clamp(14px, 4.5vw, 22px);
    border-radius: 14px;
    background: var(--gray-100);
    border: 1.5px solid var(--gray-300);
    color: var(--gray-700);
    font-size: clamp(16px, 4.8vw, 20px);
    font-weight: 700;
    letter-spacing: -0.3px;
    text-align: center;
    width: 100%;
    cursor: pointer;
    transition: all 0.15s;
  }
  .sv-btn.active {
    background: #1c5734;
    border-color: #1c5734;
    color: white;
  }
  .sv-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
  }
  /* 스코어카드 section view — 전반/후반 클릭 시 다른 섹션 행 숨김.
     entry-photo (photo/photo-done 스테이지) 에서만 적용 — 라이브 모드에는 안 새어들어가게. */
  /* 탭/필터 제거 — 사진 OCR 모드에선 모든 row(전반+후반+summary) 동시 노출. */
  /* 제목 옆 chip 버튼 (데모로 보기 등) */
  .title-chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 9px;
    background: white;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 6px;
    vertical-align: middle;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.2;
    white-space: nowrap;
  }
  .title-chip-btn:hover {
    background: var(--green-50);
    color: var(--green-900);
    border-color: var(--green-500);
  }
  /* 업로드 예시 chip — 타이틀(picker-h1) 우측 inline.
     네비게이션 버튼 박스 모양(살짝 각진 14px radius) + 살짝 흐린 톤. */
  .upload-example-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: var(--gray-100);
    border: 1.5px solid var(--gray-300);
    color: var(--gray-600);
    border-radius: 10px;                  /* 네비게이션 박스(14px) 보다 살짝 작게, pill(20)보다 각짐 */
    font-size: 12px;
    font-weight: 600;
    margin-left: 10px;
    vertical-align: middle;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.2;
    white-space: nowrap;
    letter-spacing: -0.3px;
    opacity: 0.75;                        /* 살짝 흐리게 */
  }
  .upload-example-chip:hover,
  .upload-example-chip:active {
    background: var(--gray-200);
    border-color: var(--gray-400);
    color: var(--gray-800);
    opacity: 1;
  }
  @media (max-width: 600px) {
    .upload-example-chip { font-size: 11px; padding: 4px 10px; margin-left: 6px; border-radius: 9px; }
  }
  /* 업로드 예시 모달 — 기본 modal-overlay 와 동일한 동작, 콘텐츠 폭 넓게. */
  .upload-example-modal { max-width: 720px; width: calc(100vw - 32px); max-height: 85vh; overflow-y: auto; }
  .upload-example-modal h3 { font-size: 18px; margin-bottom: 12px; color: var(--green-900); }
  .upload-example {
    margin-top: 8px;
    padding: 10px;
    background: var(--gray-50);
    border: 1px dashed var(--gray-300);
    border-radius: 10px;
  }
  .upload-example-tips {
    margin-top: 8px;
    font-size: 11px;
    color: var(--gray-700);
    line-height: 1.5;
  }
  .upload-example-tips strong { color: var(--green-700); }
  /* 업로드 예시 탭 (1장 / 2장 전환) */
  .example-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
  }
  .example-tabs .ex-tab {
    flex: 1;
    padding: 7px 8px;
    font-size: 12px;
    font-weight: 600;
    background: white;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .example-tabs .ex-tab:hover { background: var(--gray-50); }
  .example-tabs .ex-tab.active {
    background: var(--green-700);
    color: white;
    border-color: var(--green-700);
  }
  .example-tab-panel { display: none; }
  .example-tab-panel.active { display: block; }
  /* 2장 예시 — 두 사진을 위아래로 배치, 각각의 카드 사이 작은 간격 */
  .example-pair { display: flex; flex-direction: column; gap: 10px; }
  .example-pair .ex-card { margin: 0; }
  .example-pair .ex-photo-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--blue-light);
    color: var(--blue);
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 4px;
  }
  /* 예시 스코어카드 - 스마트스코어 스타일을 흉내낸 HTML 표 */
  .ex-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }
  .ex-card-header {
    padding: 10px 12px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }
  .ex-card-title { font-weight: 700; color: #0c4a6e; font-size: 13px; }
  .ex-card-sub { font-size: 10px; color: var(--gray-600); margin-top: 1px; }
  .ex-totals {
    display: flex;
    gap: 8px;
    font-size: 10px;
    color: var(--gray-700);
  }
  .ex-totals .ex-total { display: flex; flex-direction: column; align-items: center; }
  .ex-totals .ex-total b { color: #1d4ed8; font-size: 13px; font-weight: 700; }
  .ex-section-header {
    background: #1e3a5f;
    color: white;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  table.ex-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
  }
  table.ex-table th,
  table.ex-table td {
    padding: 4px 2px;
    text-align: center;
    border-bottom: 1px solid var(--gray-100);
  }
  table.ex-table thead th {
    background: #1e3a5f;
    color: white;
    font-weight: 700;
    font-size: 10px;
  }
  table.ex-table tr.par td {
    background: var(--gray-50);
    color: var(--gray-700);
    font-weight: 600;
    font-size: 10px;
  }
  table.ex-table td.ex-name {
    text-align: left;
    padding-left: 8px;
    font-weight: 600;
    color: var(--gray-900);
    min-width: 44px;
  }
  table.ex-table td.ex-t {
    color: #1d4ed8;
    font-weight: 700;
  }
  table.ex-table td.ex-neg { color: #b91c1c; font-weight: 700; background: #fff7ed; }
  @media (max-width: 600px) {
    .title-chip-btn { font-size: 10.5px; padding: 2px 8px; margin-left: 4px; }
    .upload-example-tips { font-size: 10.5px; }
    details.upload-example-toggle summary { font-size: 11px; padding: 4px 9px; }
    .ex-card-title { font-size: 12px; }
    table.ex-table { font-size: 10px; }
    table.ex-table th, table.ex-table td { padding: 3px 1px; }
    table.ex-table td.ex-name { font-size: 10px; padding-left: 5px; min-width: 32px; }
    .example-tabs .ex-tab { font-size: 11px; padding: 6px 6px; }
    .example-pair .ex-photo-label { font-size: 9.5px; padding: 2px 6px; }
    /* OCR 제목 — 한 줄 강제 + 뱃지·칩 슬림화 (마지막 글자가 줄바꿈되는 것 방지) */
    h2 {
      font-size: 15px;
      white-space: nowrap;
      gap: 4px;
      flex-wrap: nowrap;
    }
    .badge-beta {
      font-size: 9.5px;
      padding: 1px 6px;
      margin-left: 3px;
    }
    .title-chip-btn {
      font-size: 9.5px;
      padding: 1px 7px;
      margin-left: 3px;
    }
  }
  .upload-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
  }
  /* 사진 업로드 버튼 + 우측 (i) 래퍼 — (i) 는 absolute 로 우측 가운데에 부착 */
  .upload-btn-wrap {
    position: relative;
    width: 100%;
    display: block;
  }
  /* 업로드 버튼 위에 얹는 (i) — 골프장 (i) 와 동일한 회색 톤으로 통일.
     위치만 살짝 안쪽으로(right:14px) 조정해서 라운드코너에 시각적으로 어울리게. */
  .upload-info-i {
    right: 14px !important;
  }
  /* OCR 첫 화면 — 사진 선택만 주 행동으로 두고 예시/데모는 보조 링크로 낮춘다. */
  .upload-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    min-height: 218px;
    padding: 30px 22px 26px;
    box-sizing: border-box;
    background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(240,248,242,0.92));
    color: var(--green-900);
    border: 1.5px solid rgba(20,83,45,0.18);
    border-radius: 22px;
    cursor: pointer;
    transition: background 0.15s;
    text-align: center;
    flex: 0 0 auto;
  }
  .upload-btn:hover,
  .upload-btn:active {
    background: linear-gradient(145deg, #fff, var(--green-50));
    border-color: rgba(20,83,45,0.34);
  }
  .upload-btn .ub-sample { display: none; }
  .upload-btn .ub-icon {
    width: 78px;
    height: 64px;
    display: grid;
    place-items: center;
    background: transparent;
  }
  .upload-btn .ub-icon svg {
    width: 72px;
    height: 60px;
    filter: drop-shadow(0 6px 12px rgba(36,64,95,0.14));
  }
  .upload-btn .ub-icon .pack-icon { width:68px; height:56px; }
  .upload-btn .ub-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
  }
  .upload-btn .ub-cta-text {
    font-size: clamp(18px, 5vw, 22px);
    font-weight: 800;
    letter-spacing: -0.3px;
  }
  .upload-btn .ub-cta-sub {
    font-size: clamp(12px, 3.4vw, 14px);
    font-weight: 500;
    color: var(--gray-600);
  }
  .upload-btn .ub-format {
    font-size: 11px;
    font-weight: 650;
    color: var(--green-700);
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(20,83,45,0.07);
  }
  .ocr-helper-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
  }
  /* 단체 정산(2팀+) 토글 — 업로드 화면 우측 하단 */
  .ocr-team-toggle-wrap { display: flex; justify-content: flex-end; margin: 14px 4px 0; }
  .ocr-team-toggle { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; padding: 4px; }
  .ocr-team-toggle .ott-label { font-size: 12.5px; font-weight: 700; color: var(--gray-500, #6b7280); }
  .ocr-team-toggle.on .ott-label { color: var(--green-700, #15803d); }
  .ocr-team-toggle .ott-sw { position: relative; width: 40px; height: 24px; flex: 0 0 auto; border-radius: 999px; background: var(--gray-300, #d1d5db); transition: background .18s ease; }
  .ocr-team-toggle.on .ott-sw { background: var(--green-600, #16a34a); }
  .ocr-team-toggle .ott-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s ease; }
  .ocr-team-toggle.on .ott-knob { transform: translateX(16px); }
  .ocr-helper-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--gray-600);
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
  }
  .ocr-helper-btn:active { color: var(--green-900); }
  .ocr-helper-divider { width: 1px; height: 12px; background: var(--gray-300); }
  /* OCR 액션 버튼 영역 */
  .ocr-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 12px;
  }
  /* 업로드 화면 '이전' — 진행 버튼들과 시각적으로 명확히 분리. 약 3 버튼 높이만큼 간격. */
  .ocr-exit-wrap {
    display: none;
  }
  /* 결과 확인(Step 1) '이전' — picker '이전' 과 동일한 짧은 간격. */
  .section-pick-back-wrap {
    margin-top: 32px;
    margin-bottom: 20px;
  }
  @media (max-width: 600px) {
    .section-pick-back-wrap { margin-top: 24px; margin-bottom: 14px; }
  }
  .ocr-exit-btn,
  .section-pick-back-btn {
    width: 100%;
    padding: clamp(8px, 2.2vw, 12px) clamp(14px, 4.5vw, 22px);
    border-radius: 14px;
    background: var(--gray-100);
    border: 1.5px solid var(--gray-300);
    color: var(--gray-700);
    font-size: clamp(16px, 4.8vw, 20px);
    font-weight: 700;
    letter-spacing: -0.3px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
  }
  .ocr-exit-btn:hover,
  .ocr-exit-btn:active,
  .section-pick-back-btn:hover,
  .section-pick-back-btn:active {
    background: var(--gray-200);
    border-color: var(--gray-400);
  }
  /* (구) ocr-secondary-nav — 호환 유지 */
  .ocr-secondary-nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
  }
  .ocr-secondary-btn {
    padding: clamp(8px, 2.2vw, 12px) clamp(14px, 4.5vw, 22px);
    border-radius: 14px;
    background: var(--gray-100);
    border: 1.5px solid var(--gray-300);
    color: var(--gray-700);
    font-size: clamp(16px, 4.8vw, 20px);
    font-weight: 700;
    letter-spacing: -0.3px;
    text-align: center;
    width: 100%;
    cursor: pointer;
    transition: all 0.15s;
  }
  .ocr-secondary-btn:hover,
  .ocr-secondary-btn:active {
    background: var(--gray-200);
    border-color: var(--gray-400);
  }
  /* 추가 업로드 버튼 — 파란색으로 구분, 기존 데이터에 머지됨을 시사 */
  .upload-btn.additional {
    background: var(--blue, #2563eb);
    border: 1px dashed rgba(255,255,255,0.4);
  }
  .upload-btn.additional:hover { background: #1d4ed8; }
  #imagePreviewContainer img {
    max-width: 100%;
    max-height: 280px;
    flex: 1 1 240px;
    min-width: 0;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    display: block;
  }
  @media (max-width: 600px) {
    #imagePreviewContainer img { max-height: 200px; flex-basis: 100%; }
  }
  .ocr-progress {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--blue-light);
    border-radius: 8px;
  }
  .ocr-progress-label {
    font-size: 13px;
    color: var(--blue);
    font-weight: 600;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
  }
  .ocr-progress-bar {
    height: 6px;
    background: white;
    border-radius: 3px;
    overflow: hidden;
  }
  .ocr-progress-bar > div {
    height: 100%;
    background: var(--blue);
    width: 0%;
    transition: width 0.3s;
  }
  .ocr-stage { font-size: 11px; color: var(--gray-500); margin-top: 4px; }
  .ocr-result-summary {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--green-50);
    border-left: 3px solid var(--green-500);
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--green-900);
  }
  .ocr-result-summary strong { color: var(--green-900); }
  .ocr-raw {
    margin-top: 10px;
    font-size: 12px;
  }
  .ocr-raw summary {
    cursor: pointer;
    color: var(--gray-500);
    padding: 4px 0;
  }
  .ocr-raw pre {
    background: var(--gray-50);
    padding: 10px;
    border-radius: 6px;
    font-size: 11px;
    color: var(--gray-700);
    overflow-x: auto;
    margin-top: 6px;
    max-height: 160px;
    overflow-y: auto;
  }
  /* 자동 채움 노란 배경은 제거 — 모양 표시로 충분히 식별됨. 홀별 정산금 — 데스크탑 12px. */
  .score-delta {
    font-size: 12px;
    margin-top: 3px;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.2;
    min-height: 14px;
  }
  .eagle-type-btn {
    margin-top: 3px;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 700;
    border: 1px solid var(--gray-300);
    background: white;
    color: var(--gray-700);
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.3;
  }
  .eagle-type-btn:hover { background: var(--gray-100); }
  .eagle-type-btn.shot {
    background: var(--red-light);
    color: var(--red);
    border-color: var(--red);
  }
  .eagle-type-btn.shot:hover { background: #fecaca; }
  /* 니어 버튼 — 파3 홀에서만 표시
     세로형 좁은 탭: score-hover-area의 왼쪽 padding(18px) 안에 absolute로 배치 →
     score-input-wrap 위치에는 전혀 영향을 주지 않음
     width 14px → 점수박스(left:18)와 약 4px gap 확보 */
  .near-btn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 34px;
    padding: 2px 1px;
    font-size: 9px;
    font-weight: 700;
    border: 1px solid var(--gray-300);
    background: white;
    color: var(--gray-700);
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.05;
    letter-spacing: -0.5px;
    text-align: center;
    white-space: normal;
    box-sizing: border-box;
    z-index: 2;
  }
  .near-btn:hover { background: var(--gold-light); color: #92400e; border-color: var(--gold); }
  .near-btn.active {
    background: var(--gold);
    color: white;
    border-color: var(--gold);
  }
  .near-btn.active:hover { background: #d97706; }
  /* 니어 마킹 모드 — 버튼 클릭영역을 버튼 자신(타원형) 으로 제한.
     이전엔 ::before 로 확장해 hover-area 전체를 덮어 스코어 입력을 막았는데,
     사용자 피드백: 점수 클릭이 막혀서 불편함. 가시 영역(.near-btn) 만 hit area 로. */
  .score-hover-area.near-active .near-btn {
    z-index: 6;
  }
  /* input/스피너는 정상 클릭 가능 — 니어 버튼 영역 외에서는 점수 수정 가능. */
  /* 컬러 다이어트 — 가산금 텍스트를 브랜드 그린(green-900)으로 통일. 손실 빨강 유지. */
  .score-delta.positive { color: var(--green-900); }
  .score-delta.negative { color: var(--red); }
  .score-delta.zero { color: var(--gray-400); }
  /* Mode tab with info button */
  .mode-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  .info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--gray-200);
    color: var(--gray-700);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
  }
  .mode-tab.active .info-btn { background: var(--green-100); color: var(--green-700); }
  .info-btn:hover { background: var(--green-500); color: white; }
  /* Modal */
  .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  /* 작은 화면 (iPhone SE, 저가 Android ≤360px) — 모달 padding 축소로 콘텐츠 폭 확보. */
  @media (max-width: 360px) {
    .modal-overlay { padding: 8px; }
    .modal { padding: 16px; border-radius: 12px; }
    .history-modal { max-width: 100%; }
    /* gameCard.modal-open — 작은 화면에서 풀폭 + 좌우 여백 최소. */
    #gameCard.modal-open { padding: 14px !important; }
  }
  .modal-overlay.open { display: flex; }
  /* 조인 그리너·관전자 당겨서 새로고침 UI = 피드 방식(#ptrInd, styles/04). 별도 스타일 없음. */
  /* ===== 플레이어 순서 관리 모달 (기록·게임 공통) ===== */
  /* 기록(관전) 모드 #spectatePage=9000 위로 떠야 함 → 두 모드 동일하게 높은 z. */
  #rosterOrderModal { z-index: 100100; }
  #handicapPickerModal { z-index: 100160; }   /* 순서관리 모달 위에서 핸디 피커가 열리게 */
  #rosterOrderModal .pom-sheet { background:#fff; border-radius:16px; width:min(92vw,420px); max-height:86vh; overflow-y:auto; padding:14px 14px calc(12px + env(safe-area-inset-bottom,0px)); box-shadow:0 12px 40px rgba(0,0,0,0.25); }
  #rosterOrderModal .pom-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:3px; }
  #rosterOrderModal .pom-title { font-size:17px; font-weight:800; color:var(--gray-900,#111827); }
  #rosterOrderModal .pom-actions { display:flex; gap:7px; flex:0 0 auto; }
  #rosterOrderModal .pom-cancel { border:1px solid var(--gray-300,#d1d5db); background:#fff; color:var(--gray-700,#374151); font-weight:700; font-size:13px; padding:6px 14px; border-radius:999px; cursor:pointer; }
  #rosterOrderModal .pom-done { border:none; background:var(--green-700,#15803d); color:#fff; font-weight:800; font-size:13px; padding:6px 16px; border-radius:999px; cursor:pointer; }
  #rosterOrderModal .pom-list { display:flex; flex-direction:column; gap:7px; margin-top:10px; }
  #rosterOrderModal .pom-row { display:flex; align-items:center; gap:9px; background:var(--gray-50,#f9fafb); border-radius:12px; padding:7px 10px; }
  #rosterOrderModal .pom-num { flex:0 0 auto; width:22px; height:22px; border-radius:999px; background:#dcfce7; color:var(--green-800,#166534); font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center; }
  #rosterOrderModal .pom-info { flex:1 1 auto; min-width:0; }
  #rosterOrderModal .pom-name { font-size:15px; font-weight:800; color:var(--gray-900,#111827); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #rosterOrderModal .pom-hcp { margin-top:2px; border:1px solid var(--green-500,#22c55e); background:#f0fdf4; color:var(--green-700,#15803d); font-weight:700; font-size:11px; padding:1px 8px; border-radius:999px; cursor:pointer; }
  #rosterOrderModal .pom-arrows { flex:0 0 auto; display:flex; flex-direction:column; gap:3px; }
  #rosterOrderModal .pom-arw { width:38px; height:23px; border:1px solid var(--gray-300,#d1d5db); background:#fff; color:var(--green-700,#15803d); font-size:14px; font-weight:800; border-radius:7px; cursor:pointer; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; }
  #rosterOrderModal .pom-arw:disabled { opacity:.3; cursor:default; color:var(--gray-400,#9ca3af); }
  #rosterOrderModal .pom-del { flex:0 0 auto; width:38px; height:49px; border:1px solid var(--gray-300,#d1d5db); background:#fff; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; line-height:1; -webkit-tap-highlight-color:transparent; }
  /* 이모지를 빨갛게(#dc2626 근사) — brightness(0)로 실루엣화 후 red 로 틴트. */
  #rosterOrderModal .pom-trash { filter:brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%); }
  #rosterOrderModal .pom-del:disabled { opacity:.3; cursor:default; }
  #rosterOrderModal .pom-add { width:100%; margin-top:9px; border:1.5px dashed var(--green-500,#22c55e); background:#f0fdf4; color:var(--green-700,#15803d); font-weight:800; font-size:13px; padding:9px; border-radius:11px; cursor:pointer; }
  #rosterOrderModal .pom-order { text-align:center; font-size:12px; color:var(--gray-500,#6b7280); margin-top:11px; }
  /* 코스 리뷰 시트 — 태그 칩 */
  .rv-tags { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:12px; row-gap:10px; }
  /* 리뷰 슬라이더 — 커스텀 트랙 + 11개 흰 원 눈금(썸 이동범위와 동일 inset 11px 로 정확 정렬). */
  .rv-slider-wrap { position:relative; height:26px; margin:4px 0 1px; }
  .rv-track { position:absolute; left:11px; right:11px; top:50%; transform:translateY(-50%); height:4px; border-radius:999px; background:var(--gray-200,#e5e7eb); }
  .rv-fill { position:absolute; left:11px; top:50%; transform:translateY(-50%); height:4px; border-radius:999px; background:#16a34a; width:0; }
  .rv-ticks { position:absolute; left:11px; right:11px; top:50%; transform:translateY(-50%); display:flex; justify-content:space-between; align-items:center; pointer-events:none; }
  .rv-ticks .tk { width:2px; height:10px; border-radius:1px; background:var(--gray-300,#cbd5e1); }
  .rv-slider { position:absolute; left:0; right:0; top:0; width:100%; height:100%; margin:0; padding:0; background:transparent; -webkit-appearance:none; appearance:none; cursor:pointer; }
  .rv-slider::-webkit-slider-runnable-track { height:4px; background:transparent; border:0; }
  .rv-slider::-moz-range-track { height:4px; background:transparent; border:0; }
  .rv-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:22px; height:22px; margin-top:-9px; border-radius:50%; background:#16a34a; border:3px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,0.3); cursor:pointer; }
  .rv-slider::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:#16a34a; border:3px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,0.3); cursor:pointer; }
  /* 미평가 — 회색 썸(채움은 0). 만지면 초록. 평가한 항목 구분용. */
  .rv-slider-wrap.rv-unrated .rv-slider::-webkit-slider-thumb { background:var(--gray-300,#d1d5db); border-color:#fff; box-shadow:0 1px 4px rgba(0,0,0,0.18); }
  .rv-slider-wrap.rv-unrated .rv-slider::-moz-range-thumb { background:var(--gray-300,#d1d5db); }
  /* 리뷰 태그 = 라벨(고정폭) + 2택 세그먼트. 모든 행의 세그먼트 시작점·너비 일치(공통 grid). */
  .rv-tag { display:grid; grid-template-columns:54px minmax(0,1fr); align-items:center; column-gap:8px; min-width:0; }
  .rv-tag-lbl { font-size:12.5px; font-weight:500; color:var(--gray-900,#111827); white-space:nowrap; }
  .rv-seg { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:2px; background:var(--gray-100,#f1f0ec); border-radius:11px; padding:3px; }
  .rv-seg-btn { min-width:0; border:0; background:transparent; border-radius:9px; padding:9px 2px; font-size:12px; font-weight:400; color:var(--gray-500,#9ca3af); font-family:inherit; cursor:pointer; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .15s, color .15s; -webkit-tap-highlight-color:transparent; }
  .rv-seg-btn:active { transform:scale(.96); }
  .rv-seg-btn.on { background:var(--green-700,#15803d); color:#fff; font-weight:500; }
  @media (max-width:360px) { .rv-tags { grid-template-columns:1fr; } .rv-tag { grid-template-columns:64px minmax(0,1fr); } }
  /* '가장 기억에 남는 점' 헤더(제목+부제+카운트) + 최대 3개 초과 비활성 */
  .rv-detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
  .rv-detail-tt { min-width:0; }
  .rv-detail-title { font-size:13px; font-weight:700; color:var(--gray-900,#111827); }
  .rv-detail-sub { font-size:11.5px; color:var(--gray-500,#6b7280); margin-top:2px; line-height:1.4; }
  .rv-detail-count { flex:0 0 auto; font-size:12px; font-weight:700; color:var(--green-700,#15803d); white-space:nowrap; }
  .rv-tag-off { opacity:0.4; pointer-events:none; }
  /* 선택 문구 미리보기 — 실제 리뷰 카드에 뜰 문구와 동일 */
  .rv-tag-sum { margin-top:12px; background:var(--green-50,#eef7f0); border-radius:12px; padding:11px 14px; font-size:12.5px; line-height:1.75; color:var(--green-800,#166534); font-weight:600; }
  .rv-sum-dot { color:var(--green-400,#86c99b); }
  /* 필수/완료/CTA/아코디언 — 리뷰 부담 감소 레이아웃 */
  .rv-req-head { display:flex; align-items:center; justify-content:space-between; margin:0 0 12px; }
  .rv-req-t { font-size:13px; font-weight:700; color:var(--gray-900,#111827); }
  .rv-req-hint { font-size:12px; color:var(--gray-400,#9ca3af); }
  .rv-done { display:flex; align-items:center; gap:6px; background:var(--green-50,#eef7f0); color:var(--green-800,#166534); font-size:13px; font-weight:700; border-radius:10px; padding:9px 12px; margin:2px 0 12px; }
  .rv-done-ic { font-weight:900; }
  .rv-done-stars { margin-left:auto; font-size:13px; letter-spacing:0.5px; }
  .rv-done-num { font-size:13px; font-weight:800; }
  .rv-cta { width:100%; padding:13px; border-radius:10px; border:0; font-size:14px; font-weight:700; font-family:inherit; cursor:pointer; background:var(--green-700,#15803d); color:#fff; transition:background .15s; margin:16px 0 10px; }   /* 위 16px — 아코디언과 붙어 한 컨트롤로 보이던 것 분리 */
  .rv-cta:disabled { background:var(--gray-100,#f1f0ec); color:var(--gray-400,#9ca3af); cursor:not-allowed; }
  .rv-opt-row { width:100%; display:flex; align-items:center; justify-content:space-between; background:var(--gray-50,#f9fafb); border:0.5px solid var(--gray-200,#e6e2d6); border-radius:10px; padding:12px 14px; font-family:inherit; cursor:pointer; font-size:13.5px; font-weight:700; color:var(--gray-900,#111827); -webkit-tap-highlight-color:transparent; }
  .rv-opt-r { display:flex; align-items:center; gap:6px; color:var(--gray-400,#9ca3af); font-weight:400; font-size:12.5px; }
  .rv-opt-chev { transition:transform .2s; }
  .rv-opt-row.rv-opt-open .rv-opt-chev { transform:rotate(180deg); }
  .rv-opt-body { padding:14px 2px 0; }
  .rv-sub-l { font-size:13px; font-weight:700; color:var(--gray-900,#111827); margin:0 0 8px; }
  .rv-sub-l span { font-weight:400; color:var(--gray-500,#6b7280); font-size:11.5px; }
  .rv-later { width:100%; background:transparent; border:0; color:var(--gray-500,#6b7280); font-size:13px; font-family:inherit; cursor:pointer; padding:12px 0 2px; margin-top:8px; }
  /* 관전/기록 풀스크린 페이지(z-index 9000) 위에서 열리는 모달(태그 picker, 댓글, 공개프로필 등)이
     페이지 뒤에 가려지지 않도록 — 관전 중엔 열린 모달을 9000 위로 올림. */
  body.viewing-spectate .modal-overlay.open,
  body.viewing-history .modal-overlay.open,
  body.viewing-weather .modal-overlay.open { z-index: 9500; }
  /* 공개 프로필 모달은 댓글 시트(9710) 등 어떤 오버레이 위에도 떠야 함 */
  .modal-overlay#publicProfileModal.open { z-index: 12000; }
  /* 룰 모달은 다른 모달(게임 선택, 추가 룰) 위에 표시되어야 함 */
  .modal-overlay#rulesModal { z-index: 1100; }
  .modal-overlay#extraRulesModal { z-index: 1050; }
  /* 챌린지 하위 모달(참가/생성/멤버관리)은 챌린지 풀윈도우(.comp-wz z1200) 위에 */
  .modal-overlay#compManageModal.open, .modal-overlay#compJoinModal.open, .modal-overlay#compCreateModal.open, .modal-overlay#compInfoModal.open, .modal-overlay#compAddModal.open, .modal-overlay#teHcModal.open, .modal-overlay#teAwPicker.open { z-index: 9700; }
  /* 공유 시트 — 단체전 대기실(.comp-wz z:9600) 위에서 열려도 보이도록 최상단 근처로 */
  .modal-overlay#shareLinkModal.open { z-index: 9800; }
  /* 공용 확인/선택 모달은 무엇 위에서 눌러도(챌린지 풀윈도우·공개프로필 포함) 최상단에 */
  .modal-overlay#appConfirmModal.open, .modal-overlay#appChooseModal.open { z-index: 100060; }
  /* 점수 입력 키패드 — 점수 셀 탭 시 팝업으로 표시 (-3 ~ +5) */
  .score-keypad {
    position: fixed;
    z-index: 1200;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.22);
    display: none;
  }
  .score-keypad.open { display: block; }
  .score-keypad-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
  }
  .score-keypad-title { font-size: 16px; color: var(--gray-900); font-weight: 800; letter-spacing: -0.3px; }
  .score-keypad-close {
    width: 44px;
    height: 44px;
    border: none;
    background: var(--gray-100);
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    color: var(--gray-700);
    padding: 0;
  }
  .keypad-grid {
    display: grid;
    grid-template-columns: repeat(3, 60px);
    gap: 6px;
  }
  .keypad-btn {
    width: 60px;
    height: 48px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 10px;
    border: 1px solid var(--gray-200);
    background: white;
    color: var(--gray-700);
    cursor: pointer;
    padding: 0;
    transition: transform 0.08s, background 0.12s;
    user-select: none;
  }
  .keypad-btn:active { transform: scale(0.94); }
  .keypad-btn:hover { background: var(--gray-50); }
  /* 컬러 다이어트 — 3톤만:  par(0)=그린 / under(-)=레드 / over(+1~+5)=중성. */
  .keypad-btn.under { color: var(--red); background: #fef2f2; border-color: #fecaca; }
  .keypad-btn.under:hover { background: #fee2e2; }
  /* par (0) — 초록 톤, 가장 prominent */
  .keypad-btn.par {
    color: var(--green-900);
    background: #ecfdf5;
    border-color: #86efac;
    font-size: 19px;
  }
  .keypad-btn.par:hover { background: #d1fae5; }
  /* +1~+5 모두 동일 중성 톤 — 노란/주황 단계 제거 (트리플↑ 도 동일 회색) */
  .keypad-btn.over,
  .keypad-btn.over-bad { color: var(--gray-900); background: white; border-color: var(--gray-300); }
  .keypad-btn.over:hover,
  .keypad-btn.over-bad:hover { background: var(--gray-50); }
  /* 현재 점수 강조 (선택된 상태) */
  .keypad-btn.current {
    outline: 3px solid var(--green-500);
    outline-offset: -1px;
  }
  .keypad-clear {
    margin-top: 8px;
    width: 100%;
    min-height: 44px;
    padding: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--red);
    background: white;
    border: 1px solid #fecaca;
    border-radius: 8px;
    cursor: pointer;
  }
  .keypad-clear:hover { background: #fef2f2; }
  /* PAR 키패드 — 3/4/5 선택 (구조는 score keypad 재사용, grid는 가로 3 by 1) */
  .par-keypad {
    position: fixed;
    z-index: 1200;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.22);
    display: none;
  }
  .par-keypad.open { display: block; }
  .par-keypad-grid {
    display: grid;
    grid-template-columns: repeat(3, 60px);
    gap: 6px;
  }
  .par-btn {
    width: 60px;
    height: 56px;
    font-size: 22px;
    font-weight: 800;
    border-radius: 10px;
    border: 1px solid var(--gray-200);
    background: white;
    color: var(--gray-700);
    cursor: pointer;
    padding: 0;
    transition: transform 0.08s, background 0.12s;
    user-select: none;
  }
  .par-btn:active { transform: scale(0.94); }
  /* 컬러 다이어트 — par 3/4/5 모두 중성 톤. 선택된 PAR 만 .current(그린 outline)으로 강조. */
  .par-btn.par3,
  .par-btn.par4,
  .par-btn.par5 {
    color: var(--gray-900);
    background: white;
    border-color: var(--gray-300);
  }
  .par-btn.par3:hover,
  .par-btn.par4:hover,
  .par-btn.par5:hover { background: var(--gray-50); }
  .par-btn.current {
    outline: 3px solid var(--green-500);
    outline-offset: -1px;
  }
  /* 니어 선택 모달 — par 3 홀 완성 시 정산 팝업 직전에 표시 */
  .near-picker-modal { max-width: 360px; }
  .near-picker-modal h3 { font-size: 16px; margin-bottom: 6px; }
  .near-picker-hint {
    font-size: 12px;
    color: var(--gray-700);
    margin-bottom: 12px;
  }
  .near-picker-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
  }
  .near-pick-btn {
    padding: 14px 8px;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-900);
    transition: all 0.15s;
    text-align: center;
  }
  .near-pick-btn:hover {
    background: var(--gold-light);
    border-color: var(--gold);
    color: #92400e;
    transform: translateY(-1px);
  }
  .near-pick-btn .npb-label { display: block; font-size: 11px; color: var(--gray-500); font-weight: 500; margin-bottom: 2px; }
  .near-pick-btn:hover .npb-label { color: #92400e; }
  /* 니어 비후보(보기 이상) — 경계·이름 흐리게(디하이라이트). 퍼트 비후보(opacity)와 동일 결. 클릭은 여전히 가능. */
  .near-pick-btn.npb-dim { border-color: transparent; color: rgba(17,24,39,0.28); background: rgba(255,255,255,0.5); }
  .near-pick-btn.npb-dim .npb-label { color: rgba(107,114,128,0.4); }
  .near-pick-none {
    width: 100%;
    padding: 10px;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    color: var(--gray-700);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
  }
  .near-pick-none:hover { background: var(--gray-50); border-color: var(--gray-400); }
  @media (max-width: 600px) {
    .near-pick-btn { padding: 12px 6px; font-size: 13px; }
    .near-pick-btn .npb-label { font-size: 10px; }
    .near-pick-none { font-size: 12px; padding: 9px; }
  }
  /* 한 홀 정산 팝업 — 한 홀 완성 시(par + P1~P4 score 모두 입력) 자동 표시 */
  .hole-settle-modal { max-width: 380px; }
  .hole-settle-modal h3 { font-size: 16px; margin-bottom: 12px; }
  .hp-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--gray-50);
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 12px;
  }
  /* 배판 chip — 강조 (조금 더 크고 굵게) */
  .hp-multiplier {
    padding: 5px 12px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border-radius: 12px;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -0.3px;
  }
  .hole-settle-modal .hp-multiplier.double {
    background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
    color: #9a3412;
  }
  /* 홑판(기본 단가) — 회색 톤 chip (강조 X) */
  .hole-settle-modal .hp-multiplier.single {
    background: var(--gray-100);
    color: var(--gray-700);
    font-weight: 700;
    font-size: 13px;
  }
  /* 클릭 가능한 multiplier chip (오장 popup 안) — button 요소 base 스타일 reset + 클릭 affordance */
  button.hp-multiplier.clickable {
    border: 1.5px dashed transparent;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
  }
  button.hp-multiplier.clickable:hover {
    border-color: rgba(0,0,0,0.25);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }
  button.hp-multiplier.clickable:active {
    transform: scale(0.96);
  }
  /* 배판 트리거 — 강조 (배판일 때만 노출. 폰트 조금 더 크게 + 진하게) */
  .hp-triggers { color: #92400e; font-size: 13px; font-weight: 700; }
  .hp-bet { color: var(--green-900); font-weight: 700; font-size: 13px; margin-left: auto; }
  .hp-players { display: flex; flex-direction: column; gap: 4px; }
  .hp-player {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-size: 13px;
  }
  .hp-player .hp-name { font-weight: 700; color: var(--gray-900); }
  .hp-player .hp-score { font-size: 12px; color: var(--gray-600); }
  .hp-player .hp-delta {
    font-weight: 800;
    font-size: 14px;
    color: var(--gray-700);
    min-width: 70px;
    text-align: right;
    white-space: nowrap;
  }
  .hp-player .hp-delta.win { color: var(--green-700); }
  .hp-player .hp-delta.lose { color: var(--red); }
  /* 뽑기 동타 시 위쪽 박스(팀A, 팀B, 결과) 페이드 — 누적정산(:last-child) 및 니어 보너스는 그대로 */
  #holePopupBody.tied-section > *:not(:last-child):not(.near-bonus) {
    opacity: 0.5;
    filter: saturate(0.5);
    transition: opacity 0.2s, filter 0.2s;
  }
  .hole-popup-footer {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
  }
  .hole-popup-mute {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--gray-700);
    cursor: pointer;
    user-select: none;
  }
  .hole-popup-mute input { accent-color: var(--green-700); cursor: pointer; }
  /* 최소송금 + 실시간 정산 섹션 */
  .hole-settle-modal .hp-section + .hp-section { margin-top: 14px; }
  .hp-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--green-900);
    margin-bottom: 8px;
  }
  .hp-transfers { display: flex; flex-direction: column; gap: 6px; }
  /* 최소 송금 — 하이라이트 X (배판/트리거가 강조 대상). 잔잔한 회색 톤. */
  .hp-transfer-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-size: 15px;
  }
  .hp-transfer-row .hp-from { color: var(--red); font-weight: 700; }
  .hp-transfer-row .hp-arrow { color: var(--gray-500); }
  .hp-transfer-row .hp-to { color: var(--green-700); font-weight: 700; }
  .hp-transfer-row .hp-amt { font-weight: 700; color: var(--gray-900); white-space: nowrap; }
  .hp-empty { color: var(--gray-500); font-size: 12px; padding: 10px; text-align: center; background: var(--gray-50); border-radius: 8px; }
  .hp-balances { display: flex; flex-direction: column; gap: 4px; }
  .hp-balance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 12px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-size: 13px;
  }
  .hp-balance-row.win { background: var(--green-50); border-color: #86efac; }
  .hp-balance-row.lose { background: var(--red-light); border-color: #fecaca; }
  .hp-balance-row .hp-name { font-weight: 600; color: var(--gray-900); }
  .hp-balance-row .hp-delta { font-weight: 800; font-size: 14px; color: var(--gray-700); }
  .hp-balance-row .hp-delta.win { color: var(--green-700); }
  .hp-balance-row .hp-delta.lose { color: var(--red); }
  @media (max-width: 600px) {
    .hp-player { font-size: 12px; padding: 6px 8px; }
    .hp-player .hp-delta { font-size: 13px; min-width: 64px; }
    .hp-multiplier { font-size: 14px; padding: 4px 10px; }
    .hp-triggers { font-size: 12px; }
    .hp-bet { font-size: 12px; }
    .hp-section-title { font-size: 13px; }
    .hp-transfer-row { font-size: 14px; padding: 8px 10px; }
    .hp-balance-row { font-size: 12px; padding: 6px 10px; }
    .hp-balance-row .hp-delta { font-size: 13px; }
    .hp-section-title { font-size: 11.5px; }
  }
  .modal {
    background: white;
    border-radius: 16px;
    padding: 24px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    animation: modalIn 0.18s ease-out;
  }
  .modal-wide { max-width: 640px; }
  @keyframes modalIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }
  .modal h3 {
    margin: 0 0 12px;
    font-size: 20px;
    color: var(--green-900);
  }
  .modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: var(--gray-500);
    cursor: pointer;
    padding: 4px 10px;
  }
  .modal-close:hover { color: var(--gray-900); }
  /* 프로필 편집 — 프로필 화면의 크림/그린 톤을 이어가는 전용 모달. */
  .profile-edit-modal {
    max-width: 390px;
    padding: 26px 24px 22px;
    background: linear-gradient(155deg, rgba(255,255,255,0.98), rgba(244,249,244,0.98));
    border: 1px solid rgba(21,128,61,0.14);
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(20,83,45,0.22), inset 0 1px 0 rgba(255,255,255,0.9);
  }
  .profile-edit-modal .modal-close {
    top: 14px; right: 14px; width: 34px; height: 34px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(20,83,45,0.06); color: var(--gray-500);
    font-size: 23px; transition: background .16s ease, color .16s ease, transform .16s ease;
  }
  .profile-edit-modal .modal-close:hover { background: rgba(20,83,45,0.1); color: var(--green-900); }
  .profile-edit-modal .modal-close:active { transform: scale(0.92); }
  .profile-edit-head { display: flex; align-items: center; gap: 12px; margin: 0 42px 22px 0; }
  .profile-edit-head-icon {
    width: 42px; height: 42px; flex: 0 0 42px; display: flex; align-items: center; justify-content: center;
    border-radius: 14px; background: linear-gradient(145deg, var(--green-700, #15803d), var(--green-900, #14532d));
    color: #fff; box-shadow: 0 8px 18px rgba(20,83,45,0.22);
  }
  .profile-edit-head-icon svg { width: 19px; height: 19px; }
  .profile-edit-modal .profile-edit-title { margin: 0; color: var(--green-900); font-size: 20px; font-weight: 850; letter-spacing: -0.35px; }
  .profile-edit-field { margin-bottom: 14px; }
  .profile-edit-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 3px 7px; }
  .profile-edit-label strong { color: var(--gray-900); font-size: 13.5px; font-weight: 800; }
  .profile-edit-label span { color: var(--gray-500); font-size: 10.5px; line-height: 1.35; text-align: right; }
  .profile-edit-modal #profileNameLastInput,
  .profile-edit-modal #profileNameFirstInput,
  .profile-edit-modal #profileHandicapInput {
    width: 100%; margin: 0; padding: 14px 15px; border: 1.5px solid rgba(21,128,61,0.13);
    border-radius: 14px; background: rgba(255,255,255,0.82); color: var(--gray-900);
    box-shadow: inset 0 1px 2px rgba(20,83,45,0.03); transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
  }
  .profile-edit-modal #profileNameLastInput:focus,
  .profile-edit-modal #profileNameFirstInput:focus,
  .profile-edit-modal #profileHandicapInput:focus {
    outline: none; border-color: var(--green-600, #16a34a); background: #fff;
    box-shadow: 0 0 0 4px rgba(22,163,74,0.1);
  }
  /* 성/이름 두 칸 — 성 좁게, 이름 넓게 */
  .profile-edit-name-row { display: grid; grid-template-columns: 0.8fr 1.6fr; gap: 9px; }
  .profile-edit-handle { min-height: 48px; display: flex; align-items: center; }
  .profile-edit-handle-current { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 11px 12px 11px 15px; border: 1.5px solid rgba(21,128,61,0.13); border-radius: 14px; background: rgba(255,255,255,0.82); }
  .profile-edit-handle-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--green-900); font-size: 15px; font-weight: 800; }
  .profile-edit-handle-change { flex-shrink: 0; padding: 7px 12px; border: none; border-radius: 10px; background: var(--green-50, #eaf6ee); color: var(--green-700, #15803d); font: 800 12.5px/1 inherit; cursor: pointer; }
  .profile-edit-actions { display: grid; grid-template-columns: .85fr 1.5fr; gap: 9px; margin-top: 20px; }
  .profile-edit-actions button { min-height: 48px; border: none; border-radius: 14px; font-family: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
  .profile-edit-actions button:active { transform: scale(0.98); }
  .profile-edit-reset { background: rgba(255,255,255,0.72); color: var(--gray-600); border: 1px solid rgba(107,114,128,0.18) !important; }
  .profile-edit-save { background: linear-gradient(135deg, var(--green-700, #15803d), var(--green-900, #14532d)); color: #fff; box-shadow: 0 9px 20px rgba(20,83,45,0.2); }
  .profile-edit-save:hover { box-shadow: 0 11px 24px rgba(20,83,45,0.27); }
  .profile-onboard-overlay { align-items:stretch; padding:0; background:var(--app-bg,#F7F9F7); }
  .profile-onboard-modal { width:100%; max-width:none; min-height:100%; padding:calc(28px + env(safe-area-inset-top, 0px)) max(20px, calc((100vw - 480px)/2)) calc(20px + env(safe-area-inset-bottom, 0px)); border-radius:0; background:linear-gradient(155deg,#fbf7ec,#f1f7ed); box-shadow:none; overflow-y:auto; box-sizing:border-box; }
  .profile-onboard-step { font-size:11px; font-weight:800; color:var(--green-700); letter-spacing:.2px; }
  .profile-onboard-title { margin:5px 0 0; font-size:23px; line-height:1.25; font-weight:900; color:var(--gray-900); letter-spacing:-.55px; }
  .profile-onboard-copy { margin:7px 0 18px; font-size:13px; line-height:1.55; color:var(--gray-500); }
  .profile-onboard-photo { display:flex; align-items:center; gap:12px; width:100%; margin:17px 0; padding:13px; border:1.5px solid rgba(21,128,61,.12); border-radius:16px; background:rgba(255,255,255,.58); text-align:left; font-family:inherit; cursor:pointer; }
  .profile-onboard-avatar { width:58px; height:58px; flex:0 0 58px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:50%; background:var(--green-50); border:1.5px solid rgba(21,128,61,.18); color:var(--green-800); font-size:23px; font-weight:900; background-size:cover; background-position:center; }
  .profile-onboard-photo strong { display:block; font-size:13.5px; color:var(--gray-900); }
  .profile-onboard-photo span { display:block; margin-top:3px; font-size:11.5px; color:var(--gray-500); }
  .profile-onboard-field { margin-bottom:13px; }
  /* 성/이름 두 칸 — 성 좁게, 이름 넓게 */
  .profile-onboard-name-row { display:grid; grid-template-columns:0.8fr 1.6fr; gap:9px; margin-bottom:13px; }
  .profile-onboard-name-row .profile-onboard-field { margin-bottom:0; }
  .profile-onboard-field label { display:block; margin:0 3px 6px; font-size:12px; font-weight:800; color:var(--gray-700); }
  .profile-onboard-field label span { font-weight:600; color:var(--gray-400); }
  .profile-onboard-field input { width:100%; min-height:50px; margin:0; padding:12px 14px; border:1.5px solid rgba(21,128,61,.14); border-radius:14px; background:rgba(255,255,255,.86); color:var(--gray-900); font-family:inherit; font-size:16px; box-sizing:border-box; }
  .profile-onboard-field input:focus { outline:none; border-color:var(--green-600); box-shadow:0 0 0 4px rgba(22,163,74,.1); }
  .profile-onboard-handle-wrap { position:relative; }
  .profile-onboard-handle-wrap::before { content:'@'; position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--green-800); font-size:16px; font-weight:900; }
  .profile-onboard-handle-wrap input { padding-left:31px; }
  .profile-onboard-handle-help { display:block; min-height:17px; margin:5px 3px 0; color:var(--gray-400); font-size:10.5px; }
  .profile-onboard-handle-help.error { color:#b91c1c; }
  .profile-onboard-benefit { display:flex; align-items:center; gap:8px; margin:14px 1px 0; font-size:11.5px; line-height:1.45; color:var(--gray-500); }
  .profile-onboard-benefit::before { content:'✓'; width:20px; height:20px; flex:0 0 20px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--green-50); color:var(--green-700); font-weight:900; }
  .profile-onboard-actions { display:grid; grid-template-columns:.72fr 1.45fr; gap:9px; margin-top:19px; }
  .profile-onboard-actions button { min-height:50px; border-radius:14px; font-family:inherit; font-size:14px; font-weight:850; cursor:pointer; }
  .profile-onboard-later { border:1px solid rgba(107,114,128,.16); background:rgba(255,255,255,.72); color:var(--gray-500); }
  .profile-onboard-save { border:0; background:linear-gradient(135deg,var(--green-700),var(--green-900)); color:#fff; box-shadow:0 9px 20px rgba(20,83,45,.2); }
  @media (max-width: 360px) {
    .profile-edit-modal { padding: 22px 18px 18px; border-radius: 20px; }
    .profile-edit-label { display: block; }
    .profile-edit-label span { display: block; margin-top: 3px; text-align: left; }
  }
  .rule-section { margin-bottom: 14px; line-height: 1.65; font-size: 14px; color: var(--gray-700); }
  .rule-section strong { color: var(--green-900); }
  .rule-section ul { margin: 6px 0; padding-left: 20px; }
  .rule-section li { margin-bottom: 4px; }
  .rule-example {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--green-50);
    border-left: 3px solid var(--green-500);
    border-radius: 4px;
    font-size: 13px;
    color: var(--green-900);
  }
  .rule-example .ex-label { font-weight: 700; margin-bottom: 4px; }
  /* Game option cards */
  .game-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 16px;
  }
  .game-option {
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    padding: 14px;
    transition: all 0.15s;
  }
  .game-option:hover { border-color: var(--green-500); background: var(--green-50); }
  .game-option-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--green-900);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .game-option-tag {
    font-size: 10px;
    padding: 2px 8px;
    background: var(--gold-light);
    color: #92400e;
    border-radius: 20px;
    font-weight: 600;
  }
  .game-option-desc {
    font-size: 12px;
    color: var(--gray-700);
    line-height: 1.5;
    margin-bottom: 10px;
  }
  .game-option-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
  }
  button.small { padding: 6px 12px; font-size: 12px; }
  /* ====== 모든 모드 공통 — hole-num 셀 우상단 라벨 (실제 button 요소) ======
     오장에선 클릭 가능 (×1→×2→×4→×1 cycle). 뽑기/스킨스는 display only. */
  td.hole-num { position: relative; }
  .hole-mul-chip {
    position: absolute;
    top: 2px;
    right: 2px;
    background: transparent;
    border: none;
    padding: 1px 2px;
    margin: 0;
    font-size: 9px;
    font-weight: 700;
    color: var(--gray-500);   /* 기본 — ×1 / Tied (하이라이트 없음) */
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0;
    cursor: default;
    z-index: 3;
    border-radius: 3px;
  }
  /* 스코어카드 chip 은 표시 전용 — cycle 은 정산 popup 의 chip 에서 처리.
     클릭은 부모 cell 로 bubble up 되어 popup 열림. */
  .hole-mul-chip { cursor: inherit; }
  /* 배판 highlight (오장) — 노란 그라데이션 + 진한 갈색 라벨 */
  tr.baepan td.hole-num {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  }
  tr.baepan .hole-mul-chip { color: #92400e; }
  /* 배배판 (×4) — 더 진한 주황 */
  tr.baepan-double td.hole-num {
    background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
  }
  tr.baepan-double .hole-mul-chip { color: #9a3412; }
  /* 뽑기 이월 ×N 배판 — 노란 그라데이션 + 진한 갈색 라벨 */
  tr.ppopgi-baepan td.hole-num {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  }
  tr.ppopgi-baepan .hole-mul-chip { color: #92400e; }
  /* 스킨스 승리 row — 더 진한 연두 배경 + 좌측 그린 accent stripe (시각 강조) */
  tr.skins-winner-row td {
    background: #d1fae5 !important;  /* green-100 보다 살짝 진한 톤 */
  }
  tr.skins-winner-row td:first-child {
    box-shadow: inset 4px 0 0 #16a34a;  /* 좌측 4px 짙은 그린 accent */
  }
  /* 스킨스 winner 트로피 badge — score 왼쪽 (세로 중앙) — score-shape 침투 없이 가까이. */
  .skins-trophy-badge {
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    font-size: 12px;
    line-height: 1;
    pointer-events: none;
    z-index: 5;
  }
  /* 전원 동타 — 배경은 일반 행과 동일 (흰색). 결과 셀의 "🤝 전원 동타" 텍스트로만 구분 */
  /* Rule toggle */
  .rule-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.5;
    color: var(--gray-700);
    transition: all 0.15s;
  }
  /* hover 효과는 진짜 마우스 호버 가능 장치만 — 터치 디바이스에서 sticky :hover 방지 */
  @media (hover: hover) {
    .rule-toggle:hover { border-color: var(--green-500); background: var(--green-50); }
  }
  .rule-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--green-700);
    cursor: pointer;
  }
  .rule-toggle strong { color: var(--green-900); }
  .rule-toggle input[type="checkbox"]:checked ~ span { color: var(--gray-900); }
  /* iOS 스타일 슬라이드 스위치 행 — 라벨(좌) + 스위치(우) */
  .switch-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 12px; margin-bottom: 4px;
    background: #fff;
    border: 1px solid var(--gray-200); border-radius: 8px; cursor: pointer;
    font-size: 15px; font-weight: 600; color: var(--gray-900);
  }
  .switch-row .switch-label { display: flex; flex-direction: column; line-height: 1.25; }
  .switch-row .switch-sub { font-size: 11px; font-weight: 500; color: var(--gray-500); margin-top: 1px; }
  .switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; }
  .switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .switch .track { position: absolute; inset: 0; background: var(--gray-300); border-radius: 999px; transition: background .18s; pointer-events: none; }
  .switch .thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s; pointer-events: none; }
  .switch input:checked ~ .track { background: var(--green-700, #166534); }
  .switch input:checked ~ .thumb { transform: translateX(20px); }
  /* OECD 하위 옵션 — 들여쓰기 + 좌측 라인으로 OECD 소속임을 표시 */
  .oecd-suboptions { margin-left: 6px; padding-left: 12px; border-left: 2px solid var(--green-200, #bbf7d0); }
  /* OECD penalty 확인 모달 (아니오 / 예) */
  .ppopgi-confirm-overlay {
    display: none; position: fixed; inset: 0; z-index: 100000;
    background: rgba(0,0,0,.45); align-items: center; justify-content: center; padding: 24px;
  }
  .ppopgi-confirm-overlay.open { display: flex; }
  .ppopgi-confirm-box {
    background: #fff; border-radius: 16px; padding: 22px 20px 16px; max-width: 340px; width: 100%;
    box-shadow: 0 12px 40px rgba(0,0,0,.25); text-align: center;
  }
  .ppopgi-confirm-title { font-size: 16px; font-weight: 800; color: var(--gray-900); margin-bottom: 8px; }
  .ppopgi-confirm-msg { font-size: 14px; font-weight: 500; color: var(--gray-700); line-height: 1.5; margin-bottom: 18px; }
  .ppopgi-confirm-btns { display: flex; gap: 10px; }
  .ppopgi-confirm-btns .pc-btn {
    flex: 1; padding: 12px 0; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; border: none;
  }
  .ppopgi-confirm-btns .pc-no { background: var(--gray-100, #f3f4f6); color: var(--gray-700); }
  .ppopgi-confirm-btns .pc-yes { background: var(--green-600, #16a34a); color: #fff; }
  /* 컴팩트 옵션 — 1줄짜리 짧은 라벨용 */
  .rule-toggle.compact {
    align-items: center;
    padding: 9px 12px;
    margin-bottom: 4px;
    font-size: 15px;
    line-height: 1.3;
    color: var(--gray-900);
    font-weight: 600;
  }
  /* 체크박스 시각 제거 — 박스 자체를 탭해 토글, checked 상태는 박스 하이라이트로 표시.
     input 은 접근성·JS 호환 위해 DOM 에 유지 (position:absolute + opacity:0). */
  .rule-toggle.compact input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    margin: 0;
  }
  /* 미선택 단일 옵션 — 흐릿한 회색 (선택 전 == 선택 후 해제 상태 모두 동일) */
  .rule-toggle.compact:not(.compact-compound):not(:has(input[type="checkbox"]:checked)) {
    background: var(--gray-50);
    border-color: var(--gray-200);
    opacity: 0.55;
  }
  .rule-toggle.compact:not(.compact-compound):not(:has(input[type="checkbox"]:checked)) > span {
    color: var(--gray-600);
    font-weight: 500;
  }
  /* 체크된 단일 옵션 — 그린 border + 그린 배경 (full opacity) */
  .rule-toggle.compact:not(.compact-compound):has(input[type="checkbox"]:checked) {
    border-color: var(--green-600);
    background: var(--green-50);
    opacity: 1;
  }
  .rule-toggle.compact:not(.compact-compound):has(input[type="checkbox"]:checked) > span {
    color: var(--green-900);
    font-weight: 700;
  }
  /* 미선택 compound — 박스 전체 흐릿하게 (마스터 체크박스 기준) */
  .rule-toggle.compact-compound:not(:has(> label:first-of-type input[type="checkbox"]:checked)) {
    background: var(--gray-50);
    border-color: var(--gray-200);
    opacity: 0.55;
  }
  .rule-toggle.compact-compound:not(:has(> label:first-of-type input[type="checkbox"]:checked)) > label:first-of-type {
    color: var(--gray-600);
    font-weight: 500;
  }
  /* compound 마스터 체크 → 박스 전체 하이라이트 (full opacity) */
  .rule-toggle.compact-compound:has(> label:first-of-type input[type="checkbox"]:checked) {
    border-color: var(--green-600);
    background: var(--green-50);
    opacity: 1;
  }
  .rule-toggle.compact-compound:has(> label:first-of-type input[type="checkbox"]:checked) > label:first-of-type {
    color: var(--green-900);
  }
  /* compound sub-row — 체크 시 자체 강조 (그린 배경 + 균일 solid border, 좌측 비대칭 X) */
  .rule-toggle.compact-compound > label.sub-row:has(input[type="checkbox"]:checked) {
    background: var(--green-100);
    color: var(--green-900);
    font-weight: 700;
    border: 1.5px solid var(--green-500);
  }
  .rule-toggle.compact.sub {
    margin-left: 22px;
    padding-left: 14px;
    border-left: 2px solid var(--gray-200);
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-700);
  }
  .rule-toggle.compact .rule-amt {
    color: var(--green-700);
    font-weight: 700;
    font-size: 14px;
    margin-left: 2px;
  }
  .rule-toggle.compact .rule-meta {
    color: var(--gray-500);
    font-weight: 500;
    font-size: 13px;
    margin-left: 4px;
  }
  /* 옵션 그룹 라벨 — 작은 회색 부제 */
  .rule-group-label {
    font-size: 11px;
    color: var(--gray-500);
    font-weight: 700;
    margin: 14px 0 6px;
    padding-left: 2px;
    letter-spacing: 0.3px;
  }
  .rule-group-label:first-child { margin-top: 0; }
  /* 모달 옵션 — 제목과 설명을 같은 줄에 (인라인 회색 부연) */
  .rule-inline-desc {
    color: var(--gray-500);
    font-size: 12px;
    font-weight: 400;
    margin-left: 2px;
  }
  /* 앱 화면(인라인) + 모달 옵션 — 같은 2열 그리드 구조
     모바일(≤420px)에선 1열로 폴백 */
  #extraRulesSection,
  #modalRulesSection {
    display: grid !important;
    /* minmax(0, 1fr) — 내용에 따라 컬럼이 늘어나지 않게 강제로 50/50 균등 분배 */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px 8px;
    align-items: start;
  }
  /* compound 박스 내부 추가 설명글 — 제목 아래에 별도 줄로 표시 (긴 경우 2줄 wrap 허용) */
  .rule-toggle.compact-compound > .rule-desc {
    font-size: 10px;
    color: var(--gray-600);
    padding-left: 24px;  /* 체크박스 폭(16) + gap(8) — 라벨 텍스트와 정렬 */
    line-height: 1.3;
    margin-top: -2px;
    word-break: keep-all;
  }
  @media (max-width: 600px) {
    .rule-toggle.compact-compound > .rule-desc { font-size: 9.5px; padding-left: 22px; }
  }
  #extraRulesSection > .rule-group-label,
  #modalRulesSection > .rule-group-label,
  #extraRulesSection > .wizard-panel-title,
  #modalRulesSection > .wizard-panel-title,
  #extraRulesSection > .rule-toggle.compact.sub,
  #modalRulesSection > .rule-toggle.compact.sub {
    grid-column: 1 / -1;
  }
  #extraRulesSection > .rule-toggle.compact,
  #modalRulesSection > .rule-toggle.compact { margin-bottom: 0; }
  /* compound 박스 — master 체크박스 + sub 체크박스를 한 박스 안에 세로로 */
  .rule-toggle.compact-compound {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    padding: 7px 12px;
    cursor: default;
  }
  .rule-toggle.compact-compound > label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 600;
    color: var(--gray-900);
    /* 글로벌 label{font-size:12px} 의 영향을 차단 — 단일 항목(.rule-toggle.compact)과 동일한 15px */
    font-size: 15px;
    margin-bottom: 0;
  }
  /* sub-row — 메인에 종속된 별도 박스. 좌측 indent (margin-left) 로 종속 관계 표시.
     이전엔 좌측만 3px 두꺼운 다크 그린 border 였지만 시각적 불균형이 있어 균일 1px 로 통일. */
  .rule-toggle.compact-compound > label.sub-row {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-700);
    padding: 6px 10px;
    margin-left: 14px;
    margin-top: 4px;
    background: rgba(255,255,255,0.6);
    border: 1px dashed var(--gray-300);
    border-radius: 6px;
    position: relative;
  }
  .rule-toggle.compact-compound > label.sub-row .rule-amt { font-size: 10px; }
  .rule-toggle.compact-compound > label > input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--green-700);
    flex-shrink: 0;
    cursor: pointer;
  }
  /* compound 박스가 같은 컬럼의 2개 행을 덮도록 span (앱/모달 공통) */
  #extraRulesSection > .rule-toggle.compact-compound.compound-span-2,
  #modalRulesSection > .rule-toggle.compact-compound.compound-span-2 {
    grid-row: span 2;
  }
  /* 모바일 — 2-col 유지하면서 폰트 크게 (한줄 유지 한도까지) */
  @media (max-width: 600px) {
    #extraRulesSection .rule-toggle.compact,
    #modalRulesSection .rule-toggle.compact { font-size: 13.5px; padding: 8px 10px; }
    #extraRulesSection .rule-toggle.compact .rule-amt,
    #modalRulesSection .rule-toggle.compact .rule-amt { font-size: 12.5px; }
    #extraRulesSection .rule-toggle.compact .rule-meta,
    #modalRulesSection .rule-toggle.compact .rule-meta { font-size: 11.5px; }
    #extraRulesSection .rule-toggle.compact.compact-compound,
    #modalRulesSection .rule-toggle.compact.compact-compound { padding: 7px 10px; }
    /* 모바일 — compound 의 메인 라벨도 단일과 동일한 13.5px */
    #extraRulesSection .rule-toggle.compact.compact-compound > label:not(.sub-row),
    #modalRulesSection .rule-toggle.compact.compact-compound > label:not(.sub-row) { font-size: 13.5px; }
    #extraRulesSection .rule-toggle.compact.compact-compound > label.sub-row,
    #modalRulesSection .rule-toggle.compact.compact-compound > label.sub-row {
      font-size: 12.5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      letter-spacing: -0.3px;
      padding: 5px 8px;
      margin-left: 10px;
      margin-top: 4px;
    }
    #extraRulesSection .rule-toggle.compact.compact-compound > label.sub-row .rule-amt,
    #modalRulesSection .rule-toggle.compact.compact-compound > label.sub-row .rule-amt { font-size: 11px; }
    #extraRulesSection .rule-group-label,
    #modalRulesSection .rule-group-label { font-size: 10px; margin: 10px 0 4px; }
  }
  @media (max-width: 340px) {
    #extraRulesSection,
    #modalRulesSection { grid-template-columns: 1fr; }
    #extraRulesSection > .rule-toggle.compact-compound.compound-span-2,
    #modalRulesSection > .rule-toggle.compact-compound.compound-span-2 { grid-row: span 1; }
  }
  /* 땅 버튼 — 항상 줄바꿈해 별도 행에 (×2/×4 뱃지가 위쪽 코너에 있어도 안 겹치도록) */
  .ttang-btn {
    display: block;
    width: fit-content;
    margin: 4px auto 0;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    background: var(--gray-100);
    color: var(--gray-500);
    border: 1px solid var(--gray-300);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
  }
  .ttang-btn:hover { background: var(--gold-light); color: #92400e; border-color: var(--gold); }
  .ttang-btn.active {
    background: var(--gold);
    color: white;
    border-color: var(--gold);
  }
  /* skip 버튼 — 땅 버튼 아래 별도 행. 회색 톤으로 구분 */
  .skip-btn {
    display: block;
    width: fit-content;
    margin: 3px auto 0;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    background: var(--gray-100);
    color: var(--gray-500);
    border: 1px solid var(--gray-300);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
  }
  .skip-btn:hover { background: var(--gray-200); color: var(--gray-700); border-color: var(--gray-400); }
  .skip-btn.active {
    background: var(--gray-700);
    color: white;
    border-color: var(--gray-700);
  }
  /* 미기록 셀 표시 — 홀의 par+P1~P4 중 4개 채워졌고 1개 비었을 때 사용자가 빠뜨린 칸 강조 */
  /* 빈칸 강조(주황 dashed) — 사용자 요청으로 시각적으로만 비활성화. JS 로직(class 추가)은 유지. */
  td.missing-required-cell {
    background: transparent !important;
    position: relative;
  }
  td.missing-required-cell::before {
    content: '';
    display: none;
    position: absolute;
    inset: 2px;
    border: 2px dashed #f59e0b;
    border-radius: 4px;
    pointer-events: none;
    z-index: 1;
  }
  /* 정산 제외된 홀 — 점수는 그대로 두되 행을 옅게 표시 */
  tr.skipped td { opacity: 0.5; }
  tr.skipped td.hole-num { opacity: 1; background: var(--gray-50); }
  /* 결과 컬럼 제거됨 — td.hole-result 관련 CSS 도 정리. 홀번호 셀이 click target. */
  td.hole-num { cursor: pointer; transition: background-color 0.15s; }
  td.hole-num:hover { background: var(--gray-100); }

  /* ===== 골프장 autocomplete dropdown + section chips (모바일·데스크탑 공통) ===== */
  .venue-autocomplete-wrap { position: relative; }
  .venue-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    max-height: 280px;
    overflow-y: auto;
    z-index: 9999;
    padding: 4px 0;
  }
  .venue-suggestion-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 15px;
    color: #111827;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid #f3f4f6;
  }
  .venue-suggestion-item:last-child { border-bottom: none; }
  .venue-suggestion-item:hover,
  .venue-suggestion-item.active { background: var(--green-50, #e5f5ea); }
  /* 내 주변 골프장(GPS) 추천 */
  .nearby-venues { margin-top: 8px; }
  .nearby-venues .nv-hint { font-size: 12px; color: var(--gray-500,#6b7280); font-weight: 600; padding: 2px 2px; }
  /* 헤더 — 제목 + 우측 새로고침 버튼 */
  .nearby-venues .nv-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 6px; }
  .nearby-venues .nv-title { font-size: 11.5px; font-weight: 800; color: var(--green-700,#166534); }
  .nearby-venues .nv-refresh { display: flex; align-items: center; justify-content: center; padding: 3px; border: none; background: none; color: var(--green-700,#166534); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .nearby-venues .nv-refresh .pack-icon { width: 16px; height: 16px; }
  .nearby-venues .nv-refresh:active { transform: scale(.94); }
  /* 리스트 — 항목당 한 줄(이름 좌 · 거리 우). 흰색 박스. */
  .nearby-venues .nv-list { display: flex; flex-direction: column; gap: 6px; }
  .nearby-venues .nv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 13px; background: #fff; border: 1px solid var(--gray-200,#e5e7eb); border-radius: 12px; color: var(--gray-900,#111827); font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; text-align: left; box-shadow: 0 1px 2px rgba(15,23,42,.03); -webkit-tap-highlight-color: transparent; }
  .nearby-venues .nv-row:active { transform: scale(0.99); background: var(--gray-50,#f9fafb); }
  .nearby-venues .nv-row-name { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nearby-venues .nv-row-ico { width: 15px; height: 15px; flex: 0 0 15px; color: var(--green-700,#166534); }
  .nearby-venues .nv-km { flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: var(--gray-500,#6b7280); }
  .nearby-venues .nv-par-badge { flex: 0 0 auto; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--green-50,#e5f5ea); color: var(--green-800,#166534); font-size: 10.5px; font-weight: 800; }
  /* #2 골프장 검색창 — 우측 검색 아이콘(빈 상태에서만) */
  .venue-input-wrap .venue-search-ico { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; pointer-events: none; color: var(--gray-400,#9ca3af); }
  .venue-input-wrap #courseName:not(:placeholder-shown) ~ .venue-search-ico { display: none; }
  /* #1 전/후반 코스 셀 — 독립 라운드 박스 + round.svg 리딩 아이콘 */
  .section-tab-cell { position: relative; flex: 1 1 0; min-width: 0; }
  .section-tab-cell .stc-flag { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--green-700,#166534); pointer-events: none; z-index: 1; }
  #gameCard.wizard-active .section-tabs .section-tab-input { padding-left: 34px !important; text-align: left; width: 100%; box-sizing: border-box; }
  .section-tab-cell .section-tab-x { right: 10px; }
  /* #4 날짜칸 — 우측 아래화살표(CSS chevron, 네이티브 인디케이터 숨김) */
  .date-input-wrap { position: relative; }
  .date-input-wrap .date-ico { position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--gray-500,#6b7280); border-bottom: 2px solid var(--gray-500,#6b7280); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
  #gameCard.wizard-active .date-input-wrap #roundDate { padding-right: 40px; }
  #roundDate::-webkit-calendar-picker-indicator { opacity: 0; }
  .venue-suggestion-item .vs-name {
    font-weight: 600; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .venue-suggestion-item .vs-region {
    font-size: 11px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
  }
  .vs-former { font-size: 11.5px; font-weight: 500; color: var(--gray-400, #9ca3af); }
  .venue-suggestion-item.venue-new {
    color: #166534;
    font-weight: 700;
    background: #fafafa;
  }
  .venue-suggestion-item.venue-new::before {
    content: '+';
    font-size: 18px;
    color: #166534;
    margin-right: 4px;
  }
  .venue-suggestion-empty {
    padding: 12px 14px;
    color: #6b7280;
    font-size: 14px;
    text-align: center;
  }
  /* 전반/후반 탭 — wrapper 의 테두리/라운드를 골프장 input(border 1.5px var(--gray-300), radius 12px) 과 정확히 동일하게.
     탭 input 자체는 색·폰트·플레이스홀더 모두 골프장 input 의 기본 스타일을 따른다(별도 color/weight 미지정). */
  .section-tabs {
    display: flex;
    gap: 0;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid var(--gray-300);
    background: #fff;
    position: relative;
  }
  /* X 클리어 버튼 — 골프장/전반/후반 코스 input 우측 원형 회색 버튼.
     값 있을 때만 inline-style 로 display:flex. position:absolute 로 wrapper 우측에 부착. */
  .input-clear-x {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #9ca3af;
    color: #fff;
    border: none;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .input-clear-x:hover { background: #6b7280; }
  .input-clear-x:active { transform: translateY(-50%) scale(0.92); }
  /* 골프장/코스 입력 헬퍼 텍스트 — 한 줄. 사용자가 직접 적은 문구 그대로. */
  .course-helper-text {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.4;
    margin-top: 8px;
    padding: 0 2px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.3px;
  }
  .wizard-field-label { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 2px 6px; font-size:12px; font-weight:700; color:var(--gray-700); }
  .wizard-field-label .optional { font-size:10.5px; font-weight:600; color:var(--gray-400); }
  .wizard-field-label .optional.filled { color:var(--green-700,#166534); font-weight:800; }
  .wizard-field-label .optional.manual { color:var(--gray-500,#6b7280); font-weight:600; font-size:9px; }
  .venue-input-wrap { position:relative; }
  .section-field-labels { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .section-field-labels .wizard-field-label { justify-content:center; }
  .course-par-status { display:none; margin-top:7px; padding:7px 10px; border-radius:9px; background:var(--gray-100); color:var(--gray-500); font-size:11.5px; font-weight:600; text-align:left; }
  .course-par-status.applied { display:block; background:var(--green-50,#eef7f0); color:var(--green-800,#166534); }
  /* 라운드 정보 입력 가이드 — 다음으로 채울 한 칸만 순차 강조. */
  #gameCard.wizard-active .wizard-panel[data-step="2"].active .wizard-guided-next {
    border-color:var(--green-700,#15803d) !important;
    outline:none !important;
    background:rgba(255,255,255,.92);
    box-shadow:inset 0 0 0 1px var(--green-700,#15803d) !important;
  }
  /* 플레이어 이름 입력 가이드 — 다음으로 채울 한 칸만 강조(서준호 다음=2번째, 칩 넣으면 다음 칸). */
  /* 가이드 하이라이트는 카드(.player-field.wizard-guided-next .pr2)에서 처리 — 입력 자체엔 테두리 없음 */
  #gameCard.wizard-active #playerInputs .player-name.wizard-guided-next {
    outline:none !important;
    box-shadow:none !important;
  }
  /* 전/후반은 이제 독립 라운드 박스라, 골프장칸과 동일한 generic .wizard-guided-next 강조 규칙을
     그대로 사용(별도 특수 규칙 불필요) → 초록 링 두께·라운드·코너 밀착이 골프장칸과 100% 동일. */
  #gameCard.wizard-active .wizard-panel[data-step="2"].active .wizard-guided-label {
    color:#285a41;
  }
  /* 과거 우측 상단 예시 칩은 사용하지 않고 카드 아래 보조 링크로 통합. */
  .upload-example-link {
    position: static;
  }
  /* (i) 정보 버튼 — 더 이상 사용 안함. 헬퍼 텍스트로 대체됨. 클래스만 잔존. */
  .input-info-i {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #4b5563;
    border: none;
    font-size: 13px;
    font-weight: 800;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    right: 10px;
  }
  .input-info-i:hover { background: #d1d5db; }
  .input-info-i:active { transform: translateY(-50%) scale(0.92); }
  /* 골프장 input — X 는 우측 끝 안쪽 */
  #courseNameClearX { right: 10px; }
  /* 코스 탭 — 좌측 탭 X 는 가운데 라인 좌측에, 우측 탭 X 는 우측 끝 안쪽에 */
  .section-tab-x-front { right: calc(50% + 13px); }   /* 두 박스 사이 10px 간격 반영 */
  .section-tab-x-back { right: 10px; }
  .section-tab-input {
    flex: 1 1 50%;
    min-width: 0;
    border: none !important;
    background: #fff !important;
    text-align: center;
    outline: none;
    border-radius: 0 !important;
    /* 좌우 탭 구분선 — 가운데 1px 라인 */
    border-right: 1px solid var(--gray-300) !important;
    /* padding/font-size 는 #gameCard.wizard-active input[type="text"] 규칙(16px 14px / 17px) 을 그대로 따름 — !important 없음 */
  }
  .section-tab-input:last-child {
    border-right: none !important;
  }
  /* focus 시 placeholder 즉시 사라짐 — 수기 입력 직관적 UX (#7) */
  .section-tab-input:focus::placeholder {
    color: transparent !important;
  }
  /* .active 클래스는 JS 상태(어느 탭에 chip 채울지)로만 사용. 시각 차이 없음. */
  /* sections chip 추천 — 코스 입력칸 아래 노출 */
  .section-chips {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .section-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 14px;
    background: var(--green-50, #e5f5ea);
    color: #166534;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #bbf7d0;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.2;
    white-space: nowrap;
  }
  .section-chip:hover { background: #dcfce7; }
  .section-chip:active { transform: scale(0.95); }
  .section-chip.active {
    background: #166534;
    color: #fff;
    border-color: #166534;
  }
  .section-chip.recommended {
    order:-1;
    border-color:var(--green-700,#15803d);
    background:var(--green-50,#eef7f0);
    box-shadow:inset 0 0 0 1px rgba(21,128,61,.22);
    font-weight:800;
  }
  /* .section-chips-hint — 전반/후반 탭 도입으로 '9홀 코스를 선택하세요' 힌트 제거됨. CSS 도 함께 정리. */
  /* par 자동 채움 ✓ 인증 배지 — section chips row 의 가장 우측 (margin-left:auto 로 밀어붙임). 클릭 시 alert. */
  .par-verified-badge {
    margin-left: auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    border: 1.5px solid #166534;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
    transition: transform 0.15s;
    box-shadow: 0 1px 3px rgba(34,197,94,0.3);
    flex-shrink: 0;
  }
  .par-verified-badge:hover { transform: scale(1.1); }
  .par-verified-badge:active { transform: scale(0.92); }

  @media (max-width: 600px) {
    h1 { font-size: 24px; }
    .card { padding: 16px; }
    .mode-tabs { flex-direction: column; }

    /* 플레이어 이름: 위저드 입력 박스 통일성 위해 4x1 세로 스택 (한 행에 한 명씩) */
    #playerInputs {
      display: grid !important;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    #playerInputs .field {
      min-width: 0;
      flex: none;
      width: 100%;
    }
    #playerInputs .field label {
      font-size: 12px;
    }
    /* 골프장 / 코스 / 날짜 — 모두 세로 스택 (한 줄에 한 칸씩) */
    #courseFields {
      display: grid !important;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    #courseFields .course-field {
      min-width: 0;
      flex: none;
      width: 100%;
    }
    #courseFields label { font-size: 12px; }

    /* 업로드 버튼 — 모바일에서 한 줄에 2-3개 들어가도록 */
    .upload-row { gap: 8px; flex-wrap: wrap; }
    /* upload-btn 의 clamp 패딩·폰트 사용 — 모바일에서도 위저드 '이전' 박스와 동일 사이즈 유지 */

    /* 스코어카드 — 18홀이 모바일 화면에 스크롤 없이 들어가도록 컴팩트화.
       결과 컬럼 제거 후 총 100%: 홀 10% + PAR 10% + (P1~P4) 20%×4 = 80% */
    .scorecard-wrap { overflow-x: visible; }
    table.scorecard {
      min-width: 0;
      width: 100%;
      table-layout: fixed;
      font-size: 10px;
    }
    table.scorecard th, table.scorecard td { padding: 2px 0; }
    table.scorecard thead th { font-size: 12px; padding: 5px 1px; }
    /* 결과 컬럼 제거 → 홀/PAR 칼럼 조금 더 넓힘 (10→13%). 플레이어 칸 4개 18.5%씩. */
    table.scorecard thead th.th-hole    { width: 13%; }
    table.scorecard thead th.th-par     { width: 13%; }
    table.scorecard thead th.th-player  { width: 18.5%; }
    /* 홀/PAR/점수 — 모두 동일한 폰트(14px)로 통일·확대 (기존 9~11px) */
    table.scorecard td.hole-num {
      font-size: 14px;
      padding: 6px 0;
    }
    /* 모바일 par-cell — padding-top 은 hole-num 과 동일하게 (위쪽 정렬 규칙에서 적용). 좌우/하단은 0. */
    table.scorecard td.par-cell { padding-left: 0; padding-right: 0; padding-bottom: 0; }
    table.scorecard input.par {
      width: 100%;
      max-width: 28px;
      padding: 4px 0;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.1;
    }
    /* 점수 셀 — 모바일 wrap 크기 */
    table.scorecard .score-input-wrap {
      width: 34px;
      height: 26px;
    }
    table.scorecard input.score { font-size: 18px; padding: 0; font-weight: 700; line-height: 1; }
    /* score-hover-area padding 좁힘 — 니어 버튼만 좌측에 배치 */
    /* 좌측 padding 늘려서 near-btn 과 score 박스 사이 간격 확보 */
    table.scorecard .score-hover-area { padding: 0 4px 0 16px; }
    .near-btn {
      width: 12px;
      font-size: 8.5px;
      padding: 2px 0;
      letter-spacing: -0.8px;
    }
    table.scorecard .score-delta {
      font-size: 10px;
      margin-top: 2px;
      min-height: 12px;
    }
    /* 결과 컬럼 제거됨 — 관련 모바일 룰 (hole-result, ppopgi-draw-btn) 도 같이 정리. */
    /* 합계 행 — 모바일: 라벨 13px / 2번째 줄 11px / 셀 18px (스코어보다 약간 큼). */
    table.scorecard tr.summary-row td { padding: 10px 4px !important; }
    table.scorecard tr.summary-row .summary-label {
      font-size: 13px;
    }
    table.scorecard tr.summary-row .summary-label .summary-par-line { font-size: 11px; }
    table.scorecard tr.summary-row .summary-cell { font-size: 18px; }
    /* 땅·skip 버튼은 모바일에서 더 작게 (margin-left는 데스크톱 규칙의 auto 중앙정렬 유지) */
    .ttang-btn, .skip-btn {
      padding: 1px 5px;
      font-size: 9px;
    }
    .ttang-btn { margin-top: 3px; }
    .skip-btn { margin-top: 2px; }
    /* 배판 ×2/×4 라벨도 작게 */
    tr.baepan td.hole-num::after,
    tr.baepan-double td.hole-num::after {
      font-size: 8px;
      top: 1px;
      right: 1px;
    }
  }

  /* ===== 동반자 총타 (상대기록) ===== */
  .sp-comp-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:13px; margin:0 0 12px; border:1.5px dashed var(--green-600,#16a34a); background:#f0f7f1; color:var(--green-800,#166534); font-family:inherit; font-size:14.5px; font-weight:800; border-radius:12px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .sp-comp-btn:active { opacity:.7; }
  .sp-comp-btn[disabled] { border-color:var(--gray-300,#d1d5db); background:var(--gray-100,#f3f4f6); color:var(--gray-400,#9ca3af); cursor:default; }
  .sp-comp-btn .sp-comp-ic { font-size:17px; }
  .sp-comp-btn .sp-comp-hint { font-size:11.5px; font-weight:700; color:var(--gray-400,#9ca3af); }
  .comp-standings { margin:12px 0 4px; border:0.5px solid var(--border,#e5e7eb); border-radius:12px; overflow:hidden; background:#fff; }
  .cst-head { padding:9px 13px; font-size:13px; font-weight:800; color:var(--gray-800,#1f2937); background:var(--gray-50,#f9fafb); border-bottom:0.5px solid var(--border,#eee); }
  .cst-head .cst-sub { font-size:11px; font-weight:700; color:var(--gray-400,#9ca3af); margin-left:4px; }
  .cst-row { display:flex; align-items:center; gap:10px; padding:9px 13px; border-top:0.5px solid var(--gray-100,#f3f4f6); font-size:14px; }
  .cst-row:first-of-type { border-top:none; }
  .cst-row.cst-me { background:#f0f7f1; }
  .cst-rank { width:18px; text-align:center; font-weight:800; color:var(--gray-400,#9ca3af); }
  .cst-name { flex:1; min-width:0; font-weight:700; color:var(--gray-900,#111827); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cst-metag { margin-left:5px; font-size:10px; font-weight:800; color:var(--green-700,#15803d); background:#dcefe1; padding:1px 5px; border-radius:999px; }
  .cst-g { font-weight:900; color:var(--green-800,#166534); min-width:34px; text-align:right; }
  .cst-tot { font-size:12px; color:var(--gray-400,#9ca3af); min-width:38px; text-align:right; }
  .comp-modal-overlay { position:fixed; inset:0; z-index:11000; background:rgba(20,30,24,.4); opacity:0; pointer-events:none; transition:opacity .2s ease; display:flex; align-items:flex-end; justify-content:center; }
  .comp-modal-overlay.open { opacity:1; pointer-events:auto; }
  .comp-modal { width:100%; max-width:440px; background:#F7F9F7; border-radius:22px 22px 0 0; padding:20px 18px calc(env(safe-area-inset-bottom,0px) + 20px); transform:translateY(20px); transition:transform .24s cubic-bezier(.2,.8,.2,1); }
  .comp-modal-overlay.open .comp-modal { transform:translateY(0); }
  .comp-modal-head { display:flex; align-items:center; justify-content:space-between; }
  .comp-modal-title { font-size:17px; font-weight:900; color:var(--gray-900,#111827); }
  .comp-modal-x { border:none; background:none; font-size:20px; color:var(--gray-400,#9ca3af); cursor:pointer; padding:4px; }
  .comp-modal-sub { font-size:12.5px; color:var(--gray-500,#6b7280); margin:2px 0 14px; }
  .comp-rows { display:grid; gap:9px; }
  .comp-row { display:grid; grid-template-columns:1fr 78px 34px; gap:8px; align-items:center; }
  .comp-row input { height:44px; border:1px solid var(--gray-200,#e5e7eb); border-radius:10px; padding:0 12px; font-family:inherit; font-size:15px; background:#fff; box-sizing:border-box; }
  .comp-in-total { text-align:center; }
  .comp-rm { border:none; background:none; color:var(--gray-300,#d1d5db); font-size:16px; cursor:pointer; }
  .comp-add { width:100%; margin-top:11px; padding:11px; border:1px dashed var(--gray-300,#d1d5db); background:none; border-radius:10px; font-family:inherit; font-size:13.5px; font-weight:700; color:var(--gray-600,#4b5563); cursor:pointer; }
  .comp-save { width:100%; margin-top:11px; padding:14px; border:none; border-radius:12px; background:var(--green-700,#15803d); color:#fff; font-family:inherit; font-size:15px; font-weight:800; cursor:pointer; }
  /* 함께한 라운드 일괄 태그 모달 — 라운드 리스트 + 행별 태그+ / 태그완료 */
  .cop-modal { max-height:82vh; overflow:hidden; display:flex; flex-direction:column; }
  .cop-rows { display:flex; flex-direction:column; gap:8px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .cop-row { display:flex; align-items:center; gap:10px; padding:11px 12px; background:#fff; border:1px solid rgba(20,83,45,.07); border-radius:13px; }
  .cop-info { flex:1; min-width:0; }
  .cop-course { font-size:13.5px; font-weight:800; color:var(--gray-900,#111827); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cop-sub { margin-top:2px; font-size:11.5px; color:var(--gray-500,#6b7280); }
  .cop-tag-btn { flex:0 0 auto; border:none; background:var(--green-700,#15803d); color:#fff; font-family:inherit; font-size:13px; font-weight:800; padding:9px 14px; border-radius:10px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .cop-tag-btn:disabled { opacity:.6; }
  .cop-done { flex:0 0 auto; font-size:13px; font-weight:800; color:var(--green-700,#15803d); background:var(--green-50,#eaf6ee); padding:9px 13px; border-radius:10px; white-space:nowrap; }
  .cop-pending { flex:0 0 auto; font-size:13px; font-weight:800; color:var(--gray-500,#6b7280); background:var(--gray-100,#f3f4f6); padding:9px 13px; border-radius:10px; white-space:nowrap; }
  .cop-empty { text-align:center; color:var(--gray-400,#9ca3af); font-size:13px; padding:24px 0; }
  #coplayModal { z-index:13000; }   /* 공개 프로필 모달(12000) 위로 — 안 그러면 뒤에 깔려 안 보임 */
  /* 함께한 라운드 버튼 — 연한초록 fill 고정. base .promote-btn:hover(다크그린)가 모바일서 탭 후 남는 문제 → 모든 상태 !important 로 고정. */
  .pp-coplay-btn, .pp-coplay-btn:hover, .pp-coplay-btn:focus, .pp-coplay-btn:focus-visible { background:var(--green-50,#eaf6ee) !important; color:var(--green-700,#15803d) !important; border:none; font-weight:800; }
  .pp-coplay-btn:active { background:var(--green-100,#dcfce7) !important; }
  .pp-coplay-btn .pp-coplay-sub { font-weight:700; color:var(--green-700,#15803d); opacity:.75; }