:root{
  --card:#EAEBE4; --card-2:#F4F5EF; --card-3:#DFE1D8;
  /* --ink-3 은 9~11px 작은 글씨에 주로 쓰인다. 예전 #6B747C 는 4.34:1 로
     소형 텍스트 기준(4.5:1)에 못 미쳤다. #556069 로 올려 5.87:1 확보. */
  --ink:#16202B; --ink-2:#57626E; --ink-3:#556069;
  --rule:#C7CBC0; --rule-2:#B0B5A8;
  --blue:#1B4E6B; --blue-soft:#DCE6EC;
  /* --gold 는 시상 배지 「배경」용이라 그대로 둔다.
     같은 색을 글자에 쓰면 3.19:1 로 직사광에서 읽히지 않으므로,
     본문·경고 문구 전용으로 --gold-tx(5.70:1)를 따로 둔다. */
  --gold:#A8842B; --gold-tx:#7A5C00; --silver:#7E8791; --pewter:#8C7350;
  --red:#9B3A2E; --green:#3F6B45;
  --tab-pill:#BFD8C3; --tab-ic:#1E5128; --tab-lb:var(--ink);   /* 선택된 탭 (v61.1) */
  --paper:#EAEBE4;
  --f-ko:system-ui,-apple-system,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-n:ui-monospace,"Roboto Mono",SFMono-Regular,Menlo,Consolas,monospace;
  /* 손가락 한 개가 확실히 닿는 최소 크기. 장갑을 끼면 더 커야 한다. */
  --tap:44px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--card); color:var(--ink); font-family:var(--f-ko);
  font-size:15px; line-height:1.55; -webkit-text-size-adjust:100%;
  padding-bottom:calc(64px + env(safe-area-inset-bottom));
  overscroll-behavior-y:none;
}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}

/* ── 로딩 자리표시 ──
   빈 상태 문구를 성급히 띄우지 않기 위한 회색 블록. */
.sk{margin:9px 0;border-radius:8px;border:1px solid var(--rule);
  background:linear-gradient(100deg,var(--card-3) 30%,var(--card-2) 50%,var(--card-3) 70%);
  background-size:300% 100%;animation:skmove 1.4s ease-in-out infinite}
@keyframes skmove{0%{background-position:150% 0}100%{background-position:-50% 0}}
/* 움직임에 민감한 사람에게는 흐르는 효과를 끈다 */
@media (prefers-reduced-motion:reduce){.sk{animation:none;background:var(--card-3)}}
/* 화면에는 안 보이고 스크린리더만 읽는 문구 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── 더블 탭 확대 차단 ──
   스코어 키패드는 4명×18홀을 빠르게 두드린다. 300ms 안에 두 번 눌리면
   iOS·안드로이드가 「더블 탭 확대」로 알아듣고 화면을 키워 버린다.
   touch-action:manipulation 은 더블 탭 확대와 비표준 제스처만 끄고
   ★두 손가락 핀치 확대는 그대로 남겨 둔다★ — viewport 에서
   maximum-scale 을 뺀 이유(야외·노안 대비)를 훼손하지 않는다.
   덤으로 탭 반응이 300ms 빨라진다. */
button, [role="button"], select, summary, a, label, input[type="file"]{
  touch-action:manipulation}

/* ── 카카오톡 인앱 브라우저 안내 ── */
.inapp{position:fixed;left:0;right:0;top:0;z-index:70;
  padding:11px 12px calc(11px) 14px;
  display:flex;align-items:center;gap:9px;
  background:var(--gold-tx);color:#FFF;font-size:12.5px;line-height:1.5}
.inapp span{flex:1;min-width:0}
.inapp button{flex:0 0 auto;min-height:36px;padding:0 12px;border-radius:7px;
  border:1px solid #FFF;background:transparent;color:#FFF;font-size:12px;font-weight:600}
.inapp #inappNo{min-width:36px;padding:0;border-color:transparent;font-size:15px}
body.hasinapp header.head{margin-top:46px}

/* ── 새 버전 알림 막대 ──
   하단 탭 바로 위에 앉는다. render() 가 만들지 않고 common.js 가
   body 에 직접 붙이므로, 화면을 다시 그려도 사라지지 않는다. */
.updbar{position:fixed;left:10px;right:10px;z-index:60;
  bottom:calc(72px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:8px;
  padding:9px 10px 9px 14px;border-radius:10px;
  background:var(--ink);color:var(--card-2);
  font-size:13px;box-shadow:0 6px 18px rgba(22,32,43,.28)}
.updbar span{flex:1;min-width:0}
.updbar button{flex:0 0 auto;min-height:var(--tap);padding:0 14px;
  border-radius:8px;border:1px solid var(--card-2);
  background:transparent;color:var(--card-2);font-size:13px;font-weight:600}
.updbar button:disabled{opacity:.55}
.updbar #updno{min-width:var(--tap);padding:0;border-color:transparent;font-size:15px}
body.outdoor .updbar{background:#000;border:2px solid #FFF}

/* 새 버전 막대 — 변경 요약 (v8 신설)
   요약이 붙으면 has-notes 가 켜지고 막대가 위쪽 정렬로 바뀐다.
   요약이 없으면 아래 규칙이 하나도 걸리지 않아 예전 모습 그대로다. */
.updbar .updtxt{flex:1;min-width:0}
.updbar.has-notes{align-items:flex-start}
.updbar.has-notes button{align-self:flex-start}
.updbar .updone{margin-top:3px;font-size:12px;opacity:.85;line-height:1.45}
.updbar .updnotes{margin-top:3px}
.updbar .updnotes ul{margin:0;padding:0;list-style:none}
.updbar .updnotes li{position:relative;padding-left:11px;
  font-size:12px;opacity:.85;line-height:1.5;word-break:break-word}
.updbar .updnotes li::before{content:"·";position:absolute;left:2px}
.updbar .updnotes li.more{opacity:.6}
/* 야외 모드는 대비를 최대로 — 흐린 글씨를 없앤다 */
body.outdoor .updbar .updone,
body.outdoor .updbar .updnotes li{opacity:1}

/* 연결 실패 안내 — 「비어 있음」과 구분해서 보여준다 */
.errbar{display:flex;align-items:center;gap:9px;margin:0 0 10px;padding:11px 13px;
  border:1px solid #D8BDB7;border-left:4px solid var(--red);border-radius:8px;
  background:#FBF3F1;font-size:13px;color:var(--ink)}
.errbar b{color:var(--red)}
.errbar button{margin-left:auto;flex:0 0 auto;padding:0 14px;min-height:var(--tap);
  border:1px solid var(--rule-2);border-radius:8px;background:var(--card-2);
  font-size:13px;font-weight:600;white-space:nowrap}
body.outdoor .errbar{background:#FFF;border-color:#000;border-left-color:#7A1C10;border-width:2px}

/* ── 야외 조작 최소 규격 ──
   장갑을 끼거나 걸으면서 한 손으로 누르는 상황을 전제로 한다.
   개별 규칙에서 min-height 를 다시 지정하지 않는 한 모든 버튼이 44px 를 넘는다. */
button, [role="button"], select{min-height:var(--tap)}

/* iOS 는 16px 미만 입력칸에 포커스가 가면 화면을 자동으로 확대한다.
   예전에는 그것을 막으려고 viewport 에 maximum-scale=1 을 걸었는데,
   그러면 「사용자가 원해서 확대하는 것」까지 함께 막혀 노안에 불리했다.
   입력 글씨를 16px 로 올리면 자동 확대가 애초에 일어나지 않아
   maximum-scale 없이도 문제가 없다. */
input,select,textarea{font-size:16px}

/* ---------- header ---------- */
header.head{
  position:sticky;top:0;z-index:40;background:var(--card);
  padding:calc(10px + env(safe-area-inset-top)) 16px 0;
  border-bottom:1px solid var(--rule);
}
.eyebrow{
  font-family:var(--f-n);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);display:flex;justify-content:space-between;align-items:baseline
}
.pill{
  font-family:var(--f-n);font-size:9px;letter-spacing:.07em;padding:3px 9px;border-radius:999px;
  border:1px solid var(--rule-2);background:var(--card-2);color:var(--ink-3);white-space:nowrap
}
.pill.ok{color:var(--green);border-color:#B4C7B6}
.pill.busy{color:var(--blue);border-color:#B5C8D3}
.pill.warn{color:var(--red);border-color:#D8BDB7}
.syncbox{display:flex;align-items:center;gap:10px;padding:12px 14px}
.syncbox .dot{width:9px;height:9px;border-radius:50%;background:var(--rule-2);flex:0 0 auto}
.syncbox .dot.ok{background:var(--green)} .syncbox .dot.warn{background:var(--red)} .syncbox .dot.busy{background:var(--blue)}
.syncbox .tx{flex:1;font-size:13px;line-height:1.4}
.syncbox .tx small{display:block;color:var(--ink-3);font-size:11px;font-family:var(--f-n)}
.head h1{font-size:19px;font-weight:700;margin:1px 0 0;letter-spacing:-.01em}
.head .sub{font-family:var(--f-n);font-size:10.5px;letter-spacing:.1em;color:var(--ink-2);padding-bottom:9px}
/* ★ v45 — 다섯 탭 모두 같은 헤더를 쓴다 (v44 에서는 홈에서만 그랬다).
   로고를 가운데 두고 제목(h1)은 없앤다. 로고 밑 한 줄이 그 자리를 대신하는데,
   홈에서는 슬로건, 나머지 탭에서는 그 탭의 한글 이름이 들어간다.
   ★ 「지금 어디」는 두 곳이 함께 알린다 — 이 한 줄과 아래 탭바의 반전 알약.
     위를 보고 있으면 이 줄이, 아래를 보고 있으면 알약이 답한다.
   ★ 값이 전부 한글이므로 --f-n(영문·숫자 글꼴)과 0.1em 자간을 함께 푼다.
   round.html 은 같은 .head 를 쓰지만 .brandrow · h1 · .sub 가 없어 영향을 받지 않는다. */
.head .sub{font-family:var(--f-ko);font-size:11px;letter-spacing:.01em;text-align:center}

/* ★ v46 — 헤더 한 줄 합치기 (index.html 전용 · 100px → 75px)
   ----------------------------------------------------------
   v45 의 헤더는 네 층이었다 — 위 여백 10 + 「HOME·온라인」줄 22 + 로고줄 40 + 한 줄 26.
   그런데 로고(폭 136px) 좌우로 왼쪽 80px · 오른쪽 62px 가 통째로 비어 있었다.
   그 빈 자리에 두 요소를 옮겨 넣으면 22px 짜리 줄 하나가 없어진다.

   ★ 왜 .head.wb 로 가두나 — common.css 는 round.html 과 함께 쓴다.
     round.html 의 헤더에는 .wb 가 없으므로 아래 규칙이 하나도 닿지 않는다.
     padding-top 처럼 .head 공통 규칙을 덮어쓰는 것이 있어 반드시 필요하다.

   ★ .sideL / .sideR 을 같은 폭(flex:1)으로 두는 이유
     「HOME」(31px)과 「온라인」(49px)은 폭이 다르다. 그냥 늘어놓으면 로고가
     9px 오른쪽으로 밀린다. 양쪽 칸을 같은 폭으로 잡아야 로고가 정중앙에 선다.
     넓은 쪽이 양쪽 폭을 정하므로 가장 긴 조합(REFERENCE + 오프라인 = 70.4px)이 기준이 되고,
     그때 로고가 쓸 수 있는 최대 폭은 390px 화면에서 217px 다. 지금은 164px 를 쓴다.

   ★ margin-top:-4px 의 정체 — logo.svg 자체가 빈 여백을 물고 있다.
     300×88 캔버스에서 그림은 세로 19.0~68.5 에만 있다. 높이 48px 로 그리면
     위 10.4px · 아래 10.6px 가 투명한 공백이다. 그중 위 4px 만 되가져온다.
     아래 공백은 그대로 둔다 — 그것이 로고와 슬로건 사이의 간격(13.5px)이 된다.

   ★ translateX(21px) 의 정체 — 가로도 마찬가지다.
     폭 300 중 그림은 16~205 에만 있고 오른쪽 95 가 비어 있다. 그래서 상자를
     정중앙에 놓으면 「보이는 로고」는 화면 중심에서 21px 왼쪽에 선다(v45 도 그랬다).
     되밀어 준 뒤 실측한 그림의 가로 중심은 194.2px — 화면 중심 195 와 0.8px 차이다.
     상자가 오른쪽으로 21px 나가 좁은 화면에서 「온라인」칩의 상자와 겹치지만,
     겹치는 부분은 전부 투명한 공백이다. 보이는 것끼리는 340px 화면에서도 44px 떨어져 있고,
     칩은 누르는 물건이 아니며 DOM 순서상 칩이 위에 그려진다.

   ★ align-items:flex-start — 좌우 요소를 로고보다 위에 앉힌다.
     가운데 정렬이면 「HOME」이 로고 한가운데에 오는데, 로고가 세로로 가장 큰 요소라
     위로 올려도 헤더 높이는 늘지 않는다. 로고는 그대로 두고 옆의 둘만 14px 올라간다. */
/* ★ v47 — 위 여백 8 → 14px. 실기기에서 「위가 갑갑하다」는 판단.
   v46 은 8px 이었는데, F1 정렬(좌우 요소를 줄 맨 위로) 때문에 「HOME」글자가
   헤더 위에서 10.5px 밖에 안 떨어졌다. v45 는 14.5px 였다.
   14px 로 두면 글자 위치가 16.5px 가 되어 v45 보다도 여유가 생기고,
   헤더는 81px — 줄을 합쳐 번 19px 는 그대로 남는다.
   ★ 로고를 더 끌어올려(margin-top:-10px) 81 → 75px 로 되돌릴 수도 있지만,
     그러면 「HOME」이 로고 꼭대기와 같은 높이로 내려앉아 v46 에서 고친 것이 되돌아간다. */
.head.wb{padding-top:calc(14px + env(safe-area-inset-top))}
.head.wb .eyebrow{align-items:flex-start;padding:0}
.head.wb .eyebrow .sideL,
.head.wb .eyebrow .sideR{flex:1 1 0;min-width:0;display:flex;align-items:flex-start}
.head.wb .eyebrow .sideR{justify-content:flex-end}
.head.wb img.brand{height:48px;flex:0 0 auto;margin-top:-4px;transform:translateX(21px)}
.head.wb .sub{line-height:1.3;padding-bottom:7px}

/* ---------- shell ---------- */
main{padding:14px 14px 26px;max-width:640px;margin:0 auto}
.sec-label{
  font-family:var(--f-ko);font-size:10.5px;font-weight:600;letter-spacing:.02em;
  color:var(--ink-3);display:flex;align-items:center;gap:9px;margin:22px 0 9px
}
.sec-label::after{content:"";flex:1;height:1px;background:var(--rule)}
.sec-label:first-child{margin-top:2px}
.panel{background:var(--card-2);border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.pad{padding:13px 14px}

/* ---------- tab bar ---------- */
nav.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--card-2);border-top:1px solid var(--rule-2);
  padding-bottom:env(safe-area-inset-bottom)
}
/* ★ v61.1 — 선 아이콘 + 선택 알약 (BBC Sounds 참고 · 2026-09-17 J Lee · E안).
   ① 선택된 탭: 아이콘 뒤에만 옅은 초록 알약 · 아이콘 진한 초록 · 글자는 잉크색 굵게.
      직사광에서 알약이 흐려져도 굵은 잉크 글자가 남는다(회색 탭과 2.56:1).
      야외 모드는 검정 알약 + 흰 아이콘 + 검정 글자.
   ② 탭바 높이는 v61.0 과 같게 맞췄다 — 기호(14px) 자리에 알약(26px)이 들어온 만큼
      위 여백 9→2 · 간격 3→2 · 아래 여백 8→4 로 줄였다 (2+26+2+글자줄+4 = 9+14+3+글자줄+8).
      이 넷 중 하나를 바꾸면 높이가 달라진다. J Lee 조건: 「높이 변동 없음」.
   ③ 아이콘은 index.html TAB_ICON 의 SVG. 색은 currentColor 로 따라온다.
   ④ v61.0 의 확대(scale 1.15)는 없앴다 — 알약이 위치를 알린다. */
nav.tabs button{padding:2px 2px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ink-3)}
nav.tabs button .ic{display:flex;align-items:center;justify-content:center;width:46px;height:26px;border-radius:13px}
nav.tabs button .ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
nav.tabs button .ic svg .f{fill:currentColor;stroke:none}
nav.tabs button .lb{font-size:10.5px;letter-spacing:-.02em}
nav.tabs button[aria-selected="true"] .ic{background:var(--tab-pill);color:var(--tab-ic)}
nav.tabs button[aria-selected="true"] .lb{color:var(--tab-lb);font-weight:700}

/* ---------- generic chips ---------- */
.chiprow{display:flex;gap:6px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}
.chiprow::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;padding:0 14px;min-height:var(--tap);display:inline-flex;align-items:center;
  border:1px solid var(--rule-2);border-radius:999px;
  background:var(--card-2);font-size:13px;white-space:nowrap;color:var(--ink-2)
}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--card-2);font-weight:600}
.chip .n{font-family:var(--f-n);font-size:11px;opacity:.7;margin-left:5px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.grid4 .chip{width:100%;text-align:center;justify-content:center;padding:9px 4px}

/* ---------- leaderboard ---------- */
table.lb{width:100%;border-collapse:collapse;font-family:var(--f-n)}
table.lb th{
  white-space:nowrap;font-size:9.5px;letter-spacing:.09em;color:var(--ink-3);font-weight:500;text-transform:uppercase;
  padding:8px 3px;border-bottom:1px solid var(--rule-2);text-align:center
}
table.lb th.nm,table.lb td.nm{text-align:left;padding-left:11px}
table.lb td{padding:9px 3px;text-align:center;font-size:13px;border-bottom:1px solid var(--rule)}
table.lb tr:last-child td{border-bottom:none}
td.rk{width:34px;font-weight:700;font-size:14px}
td.nm{font-family:var(--f-ko);font-size:14px;font-weight:600;white-space:nowrap}
td.nm .hc{font-family:var(--f-n);font-size:10px;color:var(--ink-3);margin-left:5px;font-weight:400}
td.rd{color:var(--ink-2);font-size:12.5px;width:12%}
td.rd.dnf{color:var(--red);font-style:italic}
td.tot{font-weight:700;font-size:15px;width:16%}
.medal td.rk{position:relative}
.medal td.rk::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:2px}
tr.m-gold td.rk::before{background:var(--gold)}
tr.m-silver td.rk::before{background:var(--silver)}
tr.m-pewter td.rk::before{background:var(--pewter)}
tr.m-gold td.nm,tr.m-silver td.nm,tr.m-pewter td.nm{position:relative}
.prizeTag{font-family:var(--f-n);font-size:9px;letter-spacing:.06em;padding:1px 5px;border-radius:3px;margin-left:6px;vertical-align:1px;color:var(--card-2)}
.p-gold{background:var(--gold)} .p-silver{background:var(--silver)} .p-pewter{background:var(--pewter)}
.emptyrow td{color:var(--ink-3);font-style:italic}

/* ---------- prizes strip ---------- */
.prizes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:9px}
.prize{border:1px solid var(--rule-2);border-radius:8px;padding:10px;background:var(--card-2);text-align:center}
.prize .mt{font-family:var(--f-n);font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.prize .who{font-size:13px;font-weight:700;margin-top:3px;min-height:20px;line-height:1.3;word-break:keep-all}
.prize .amt{font-family:var(--f-n);font-size:12px;color:var(--ink-2);margin-top:1px}
.prize.g{border-top:3px solid var(--gold)} .prize.g .mt{color:var(--gold-tx)}
.prize.s{border-top:3px solid var(--silver)} .prize.s .mt{color:var(--silver)}
.prize.p{border-top:3px solid var(--pewter)} .prize.p .mt{color:var(--pewter)}

/* ---------- score entry ---------- */
.holes{width:100%;border-collapse:collapse}
.holes tr.hole td{border-bottom:1px solid var(--rule);padding:0}
.holes tr.sub td{background:var(--card-3);font-family:var(--f-n);font-size:11px;letter-spacing:.08em;
  color:var(--ink-2);padding:5px 12px;border-bottom:1px solid var(--rule-2)}
.holes tr.sub td span{float:right;font-weight:700;color:var(--ink)}
.hrow{display:grid;grid-template-columns:52px 1fr 116px 44px;align-items:center;gap:6px;padding:5px 10px 5px 0}
.hid{font-family:var(--f-n);display:flex;align-items:baseline;gap:6px;padding-left:12px}
.hid .no{font-size:15px;font-weight:700;width:17px}
.hid .pr{font-size:10px;color:var(--ink-3)}
.hmeta{font-family:var(--f-n);font-size:9.5px;color:var(--ink-3);letter-spacing:.05em}
.hmeta .ex{color:var(--pewter);font-weight:700}
.step{display:flex;align-items:center;justify-content:flex-end;gap:2px}
.step button{
  width:34px;height:34px;border:1px solid var(--rule-2);border-radius:7px;background:var(--card);
  font-family:var(--f-n);font-size:17px;font-weight:700;color:var(--blue);
  display:flex;align-items:center;justify-content:center
}
.step button:active{background:var(--blue);color:var(--card-2)}
.step .val{
  width:44px;height:34px;border:1px solid var(--rule-2);border-radius:7px;background:var(--card);
  font-family:var(--f-n);font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center
}
.step .val.on{background:#fff;border-color:var(--blue)}
.step .val.e{color:var(--ink-3);font-weight:400}
.step .val.under{color:var(--green)} .step .val.over1{color:var(--ink)} .step .val.over2{color:var(--red)}
.gross{font-family:var(--f-n);font-size:14px;font-weight:700;text-align:center;color:var(--ink-2)}
.gross.cap{color:var(--red)}
.gross.blank{color:var(--ink-3);font-weight:400}
tr.hole.excl .hid .no{color:var(--pewter)}
tr.hole.ded{background:#F7F1DF}
tr.hole.ded .gross{color:var(--gold-tx)}
tr.hole.half{background:#FBF7EC}

/* ---------- signature: deduction strip ---------- */
.strip{padding:12px 12px 10px}
.stripbars{display:grid;grid-template-columns:repeat(18,1fr);gap:2px;align-items:end;height:64px}
.sb{position:relative;border-radius:2px 2px 0 0;background:var(--rule-2);min-height:3px;transition:height .25s ease}
.sb.d{background:var(--gold)}
.sb.h{background:repeating-linear-gradient(0deg,var(--gold) 0 3px,#EFE2BE 3px 6px)}
.sb.x{background:repeating-linear-gradient(45deg,var(--card-3) 0 3px,var(--rule) 3px 6px)}
.striplbl{display:grid;grid-template-columns:repeat(18,1fr);gap:2px;margin-top:4px}
.striplbl span{font-family:var(--f-n);font-size:7.5px;color:var(--ink-3);text-align:center}
.striplbl span.d{color:var(--gold-tx);font-weight:700}
.stripkey{display:flex;flex-wrap:wrap;gap:11px;margin-top:9px;font-family:var(--f-n);font-size:9.5px;color:var(--ink-2)}
.stripkey i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:-1px}

/* ---------- pinned result ---------- */
#sticky{
  position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:35;
  pointer-events:none
}
.result{
  max-width:640px;margin:0 auto;padding:10px 14px 12px;pointer-events:auto;
  background:var(--ink);color:var(--card-2);border-top:2px solid var(--gold);
  box-shadow:0 -6px 18px rgba(22,32,43,.13)
}
body.scoring{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
.rrow{display:grid;grid-template-columns:repeat(4,1fr) 1.25fr;gap:4px;align-items:end}
.rcell .k{font-family:var(--f-n);font-size:8.5px;letter-spacing:.1em;color:#93A1AE;text-transform:uppercase}
.rcell .v{font-family:var(--f-n);font-size:17px;font-weight:700;line-height:1.15}
.rcell.net{text-align:right;border-left:1px solid #35414F;padding-left:8px}
.rcell.net .k{color:var(--gold-tx)}
.rcell.net .v{font-size:27px;color:var(--gold)}
.rnote{font-size:11px;color:#93A1AE;margin-top:5px;display:flex;justify-content:space-between;gap:10px}
.rnote b{color:var(--card-2);font-weight:600}

/* ---------- buttons ---------- */
.btn{
  display:block;width:100%;padding:12px;border:1px solid var(--rule-2);border-radius:8px;
  background:var(--card-2);font-size:14px;font-weight:600;text-align:center
}
.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--card-2)}
.btn.warn{color:var(--red);border-color:#D8BDB7}
.btn.sm{padding:9px;font-size:13px;font-weight:500}
.btnrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.dnfbar{display:flex;align-items:center;gap:10px;padding:10px 13px;border-top:1px solid var(--rule)}
.dnfbar .t{flex:1;font-size:12.5px;color:var(--ink-2);line-height:1.35}
.sw{width:46px;height:27px;border-radius:999px;background:var(--rule-2);position:relative;flex:0 0 auto;transition:background .18s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:transform .18s}
.sw[aria-pressed="true"]{background:var(--red)}
.sw[aria-pressed="true"]::after{transform:translateX(19px)}

/* ---------- prose / docs ---------- */
.prose{font-size:14px;line-height:1.72}
.prose h3{font-size:15px;margin:20px 0 6px;letter-spacing:-.01em}
.prose h3:first-child{margin-top:0}
.prose p{margin:0 0 9px;color:var(--ink-2)}
.prose ul{margin:0 0 10px;padding-left:17px;color:var(--ink-2)}
.prose li{margin-bottom:5px}
.prose b{color:var(--ink)}
.kv{display:grid;grid-template-columns:78px 1fr;gap:2px 10px;font-size:13.5px;margin-bottom:11px}
.kv dt{font-family:var(--f-n);font-size:10px;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase;padding-top:4px}
.kv dd{margin:0;color:var(--ink)}
.callout{border-left:3px solid var(--gold);background:#F7F1DF;padding:10px 12px;border-radius:0 6px 6px 0;margin:11px 0;font-size:13.5px}
.callout b{display:block;margin-bottom:3px}
table.ref{width:100%;border-collapse:collapse;font-family:var(--f-n);font-size:12px}
table.ref th{font-size:9.5px;letter-spacing:.08em;color:var(--ink-3);font-weight:500;padding:7px 4px;border-bottom:1px solid var(--rule-2);text-transform:uppercase}
table.ref td{padding:6px 4px;text-align:center;border-bottom:1px solid var(--rule);color:var(--ink-2)}
table.ref td.l{text-align:left;padding-left:11px;color:var(--ink);font-weight:600}
table.ref tr:nth-child(even) td{background:rgba(255,255,255,.45)}
table.ref tr.tot td{font-weight:700;color:var(--ink);background:var(--card-3)}
textarea{
  width:100%;min-height:110px;font-family:var(--f-n);font-size:11px;padding:10px;
  border:1px solid var(--rule-2);border-radius:8px;background:#fff;color:var(--ink);resize:vertical
}
input.ti{
  width:100%;padding:9px 10px;border:1px solid var(--rule-2);border-radius:7px;background:#fff;
  font-family:var(--f-ko);font-size:14px;color:var(--ink)
}
input.ti.n{font-family:var(--f-n);text-align:center}
.plrow{display:grid;grid-template-columns:1fr 66px;gap:8px;padding:8px 13px;border-bottom:1px solid var(--rule)}
.plrow:last-child{border-bottom:none}
.foot{font-size:11px;color:var(--ink-3);text-align:center;margin-top:20px;line-height:1.6}
.toast{
  position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);
  background:var(--ink);color:var(--card-2);padding:10px 18px;border-radius:999px;font-size:13px;
  z-index:99;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(-4px)}
/* ★ v52 — 안내 문구가 놓치기 쉬웠다. 원인이 둘이라 고침도 둘이다.
   ① .up — 화면 위쪽에서 누르면 안내도 위쪽에 뜬다(헤더 아래). 눈이 가 있는 쪽에 띄운다.
   ② .bad — 실패·요청은 빨간 바탕에 조금 크게, 오래(4초) 둔다.
      예전에는 「등록했습니다」와 「내용을 입력하세요」가 똑같이 생겨,
      스쳐 보면 둘 다 「됐구나」로 읽혔다. */
.toast.up{bottom:auto;top:calc(88px + env(safe-area-inset-top))}
.toast.up.on{transform:translateX(-50%) translateY(4px)}
/* width:max-content 가 꼭 필요하다 — left:50% 인 고정 위치라 자동 너비가
   「가운데부터 오른쪽 끝까지」로만 잡혀, 긴 문구가 화면 절반 폭에 세로로 길게 눌렸다. */
.toast.bad{background:var(--red);font-size:14.5px;font-weight:600;padding:12px 20px;
  width:max-content;max-width:calc(100vw - 36px);white-space:normal;text-align:center;line-height:1.4}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ═══════════ 신규: 대시보드 / 티타임 / 갤러리 ═══════════ */

/* D-day 카드 */
.dday{background:var(--ink);color:var(--card-2);border-radius:10px;padding:14px;position:relative;overflow:hidden}
.dday .dnum{font-family:var(--f-n);font-size:34px;font-weight:700;line-height:1;color:var(--gold);letter-spacing:-.02em}
.dday .dwhen{font-size:17px;font-weight:700;margin-top:2px}
.dday .dsub{font-family:var(--f-n);font-size:11px;color:#93A1AE;letter-spacing:.05em;margin-top:3px}
.dday .drow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.dday .dslots{font-family:var(--f-n);font-size:12px;color:#B9C4CE;margin-top:9px;padding-top:9px;border-top:1px solid #35414F;line-height:1.6}
.dday .dslots b{color:var(--card-2);font-weight:600}
.dday .none{color:#93A1AE;font-size:14px;padding:6px 0}
.ansrow{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:11px}
.ansrow button{padding:10px 4px;border:1px solid #46525F;border-radius:7px;font-size:13px;color:#C7D0D8;background:transparent}
.ansrow button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#1A1408;font-weight:700}

/* 미니 통계 */
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mini .m{border:1px solid var(--rule);border-radius:8px;background:var(--card-2);padding:9px 6px;text-align:center}
.mini .k{font-family:var(--f-n);font-size:8.5px;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}
.mini .v{font-family:var(--f-n);font-size:19px;font-weight:700;margin-top:2px}
.mini .v small{font-size:11px;font-weight:400;color:var(--ink-3)}

/* 리스트 아이템 */
.item{padding:11px 13px;border-bottom:1px solid var(--rule)}
.item:last-child{border-bottom:none}
.item .top{display:flex;justify-content:space-between;align-items:baseline;gap:9px}
.item .who{font-size:12px;color:var(--ink-3);font-family:var(--f-n)}
.item .tx{font-size:14px;line-height:1.55;margin-top:3px;white-space:pre-wrap;word-break:break-word}
.item .tt{font-size:14.5px;font-weight:600}
.item.pin{background:#F7F3E6}
.item.pin .tt::before{content:"고정 ";font-family:var(--f-n);font-size:9px;color:var(--gold-tx);letter-spacing:.1em}
.act{display:flex;gap:7px;align-items:center;font-family:var(--f-n);font-size:11px;color:var(--ink-3);padding:9px 13px;border-bottom:1px solid var(--rule)}
.act:last-child{border-bottom:none}
.act .dot{width:6px;height:6px;border-radius:50%;background:var(--rule-2);flex:0 0 auto}
.act .dot.t{background:var(--blue)} .act .dot.p{background:var(--pewter)} .act .dot.s{background:var(--green)} .act .dot.n{background:var(--gold)}
.act .tx{flex:1;font-family:var(--f-ko);font-size:13px;color:var(--ink)}

/* 배지 */
.bdg{font-family:var(--f-n);font-size:9.5px;letter-spacing:.07em;padding:2px 7px;border:1px solid var(--rule-2);border-radius:3px;color:var(--ink-2);white-space:nowrap}
.bdg.open{color:var(--blue);border-color:#B5C8D3}
.bdg.lock{color:var(--gold-tx);border-color:#D6C79E}
/* 기록실 라운드 카드 배지 (v12).
   ★ .bdg.gold 는 index.html 이 「완료」에 오래전부터 쓰고 있었으나
     정의가 없어 기본 회색으로 뜨고 있었다. 여기서 뒤늦게 정의한다.
   .bdg.done 은 라운드 종료 — 자물쇠 쪽(.lock)과 같은 금색 계열로 묶는다. */
.bdg.gold{color:var(--gold-tx);border-color:#D6C79E}
.bdg.done{color:var(--gold-tx);border-color:#D6C79E;font-weight:700}

/* ── 버전 기록 (v12 신설) ──
   정보 탭에서 버전을 누르면 펼쳐지는 목록. 값 자체가 버튼이므로
   「눌러도 되는 것」임이 보이게 점선 밑줄을 둔다. */
.verbtn{-webkit-appearance:none;appearance:none;background:none;border:0;padding:0;
  font-size:13px;color:var(--ink);cursor:pointer;text-align:left;
  border-bottom:1px dotted var(--rule-2)}
.verbtn em{font-family:var(--f-ko);font-style:normal;font-size:10.5px;
  color:var(--ink-3);margin-left:6px;letter-spacing:0}
.vhist{margin-top:10px;border-top:1px solid var(--rule);padding-top:9px}
.vh{padding:8px 0;border-bottom:1px solid var(--rule)}
.vh:last-child{border-bottom:0;padding-bottom:0}
.vh .vhh{display:flex;align-items:baseline;gap:8px}
.vh .vhh b{font-size:13px;color:var(--ink-2)}
.vh.now .vhh b{color:var(--gold-tx)}
.vh .vhh span{font-family:var(--f-n);font-size:10.5px;color:var(--ink-3)}
.vh ul{margin:5px 0 0;padding-left:16px}
.vh li{font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.bdg.cxl{color:var(--red);border-color:#D8BDB7}

/* 확정 슬롯 */
.slots{display:grid;gap:6px}
.slot{display:flex;align-items:center;gap:10px;border:1px solid var(--rule);border-radius:6px;background:var(--card);padding:9px 11px}
.slot .ix{font-family:var(--f-n);font-size:12px;color:var(--ink-3);width:14px}
.slot .nm2{flex:1;font-weight:600;font-size:14px}
.slot .hd{font-family:var(--f-n);font-size:11px;color:var(--ink-3)}
.slot .gs{font-family:var(--f-n);font-size:9.5px;color:var(--pewter);font-weight:700}
.slot.mt{border-style:dashed;background:transparent}
.slot.mt .nm2{color:var(--ink-3);font-weight:400}

/* 태그 */
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tg{font-size:12.5px;padding:4px 9px;border:1px solid var(--rule);border-radius:4px;background:var(--card)}
.tg.off{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:1.5px}  /* v38 · 선만 빨강 */
.tg.g{color:var(--pewter)}

/* 폼 */
input,select,textarea{font-family:var(--f-ko);font-size:16px;color:var(--ink);background:#FBFBF7;
  border:1px solid var(--rule-2);border-radius:7px;padding:10px;width:100%;min-height:var(--tap)}
input[type=date],input[type=time],input[type=number],input.mono{font-family:var(--f-n)}
textarea{resize:vertical;min-height:76px;line-height:1.5}
.lb2{display:block;font-family:var(--f-n);font-size:9.5px;letter-spacing:.1em;color:var(--ink-3);
  text-transform:uppercase;margin:0 0 4px}
.fld{margin-bottom:10px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
.inline{display:flex;gap:8px}.inline>:first-child{flex:1}

/* 갤러리 */
/* ── 알림 켜기 안내 막대 (v20) ──
   T10 — 여백은 전부 여기서 준다. 마크업에 인라인 padding 을 박지 말 것. */
.phint .phttl{font-size:14.5px;font-weight:700}
.phint .phtx{font-size:12.5px;color:var(--ink-2);line-height:1.55;margin-top:5px}
.phint .phbtn{display:flex;align-items:center;gap:8px;margin-top:11px}
.phint .phbtn .btn{width:auto;flex:0 0 auto}

.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
/* ★ height:auto 가 반드시 있어야 한다 (v20 에서 고친 것).
   마크업의 height="270" 은 브라우저에 「높이 270px」로 전달된다.
   가로(width:100%)와 세로가 둘 다 정해지면 aspect-ratio 규칙이 통째로 무시되어,
   폭 118px · 높이 270px 짜리 세로 띠가 된다 — 격자가 아니라 기둥이 보였다.
   height:auto 로 세로를 비워 주어야 aspect-ratio:1 이 살아난다. */
.gal img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:5px;
  background:var(--card-3);display:block}
.gcap{font-size:11px;color:var(--ink-3);padding:3px 1px 0;line-height:1.35}
/* ── 사진 크게 보기 (라이트박스) ──
   ★ v20 — 세로·가로 어느 쪽으로 들어도 사진이 화면을 채우도록 고쳤다.
     예전에는 max-height:74vh 라는 고정값이라, 세로에서도 화면의 22% 밖에
     못 쓰고 가로로 눕히면 45% 였다. 아래는 고정값 대신 「남는 자리를 다 쓴다」다.
       flex:1 + min-height:0  → 설명·버튼이 쓰고 남은 자리를 사진이 전부 차지
       object-fit:contain     → 비율을 지키며 그 안에 맞춘다 (잘리지 않는다)
     min-height:0 이 없으면 flex 항목이 내용 크기 아래로 안 줄어서 넘친다. */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(22,32,43,.94);display:flex;
  flex-direction:column;align-items:center;justify-content:center;padding:14px;gap:10px}
.lightbox img{flex:1;min-height:0;min-width:0;max-width:100%;object-fit:contain;border-radius:6px}
.lightbox .cap{color:#C7D0D8;font-size:13px;text-align:center;line-height:1.5;flex:0 0 auto}
.lightbox .lbtn{display:flex;gap:9px;flex:0 0 auto;flex-wrap:wrap;justify-content:center}
.lightbox .lbtn button{padding:9px 16px;border:1px solid #46525F;border-radius:7px;color:#C7D0D8;font-size:13px}
/* 세로에서는 껍데기일 뿐 — 예전과 똑같이 사진 아래로 쌓인다 */
.lightbox .side{display:flex;flex-direction:column;align-items:center;gap:10px;
  flex:0 0 auto;width:100%}

/* 가로로 눕혔을 때 — 설명·버튼을 오른쪽 기둥으로 보내고 사진에 자리를 몰아준다.
   ★ 화면이 낮을 때(가로) 위아래로 쌓으면 사진 높이가 통째로 깎인다. */
@media (orientation:landscape) and (max-height:560px){
  .lightbox{flex-direction:row;padding:10px;gap:12px}
  .lightbox img{height:100%;max-height:100%}
  .lightbox .side{display:flex;flex-direction:column;justify-content:center;gap:10px;
    flex:0 0 132px;max-height:100%;overflow:auto}
  .lightbox .lbtn{flex-direction:column}
  .lightbox .lbtn button{width:100%}
  .lightbox .cap{text-align:left;font-size:12px}
}

/* 프로필 */
.prof{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pc{border:1px solid var(--rule);border-radius:8px;background:var(--card-2);padding:10px 11px}
.pc .pn{font-size:14.5px;font-weight:700}
.pc .pe{font-family:var(--f-n);font-size:9.5px;color:var(--ink-3);letter-spacing:.06em}
.pc .pr{display:flex;justify-content:space-between;font-family:var(--f-n);font-size:11px;
  color:var(--ink-2);margin-top:5px;padding-top:5px;border-top:1px solid var(--rule)}
.pc .pr b{color:var(--ink);font-weight:700}

/* 코스 표 */
table.crs{width:100%;border-collapse:collapse;font-family:var(--f-n);font-size:11.5px}
table.crs th{font-size:9px;letter-spacing:.07em;color:var(--ink-3);font-weight:500;padding:6px 2px;
  border-bottom:1px solid var(--rule-2);text-transform:uppercase}
/* ★ v30 — 그리스 문자 열은 대문자 변환에서 뺀다.
   text-transform:uppercase 는 「S.I.·PAR」를 세우려고 건 것인데
   σ(소문자)까지 Σ(합계 기호)로 바꿔 그려 뜻이 달라졌다. 실기기에서 잡았다. */
table.crs th.sg{text-transform:none;font-size:10.5px}
table.crs td{padding:6px 2px;text-align:center;border-bottom:1px solid var(--rule)}
table.crs td.h{font-weight:700}
table.crs tr.si1 td{background:#F7F1DF}
table.crs tr:last-child td{border-bottom:none}

/* 링크형 큰 버튼 */
a.bigbtn{display:block;text-decoration:none;color:inherit;border:1px solid var(--rule-2);
  border-radius:9px;background:var(--card-2);padding:13px 14px}
a.bigbtn .t1{font-size:15px;font-weight:700}
a.bigbtn .t2{font-family:var(--f-n);font-size:11px;color:var(--ink-3);margin-top:2px;letter-spacing:.04em}
a.bigbtn .go{float:right;font-family:var(--f-n);color:var(--blue);font-size:13px}


/* ═══════════ 로고 ═══════════ */
.brandrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brandrow h1{margin:0}
img.brand{display:block;height:40px;width:auto;flex:0 0 auto}
@media (max-width:340px){ img.brand{height:34px} }

/* ═══════════ 야외 모드 ═══════════
   직사광 아래에서는 화면에 반사된 주변광이 밝은 색과 어두운 색에 똑같이 더해져
   명암비가 압축된다. 어두운 바탕 + 밝은 글씨가 특히 빨리 무너지므로
   D-day 카드를 밝은 바탕으로 뒤집고, 회색 계열을 전부 끌어올린다.
   금색은 어디에 놓아도 직사광에서 2.5:1을 못 넘어 강조색에서 뺀다. */
body.outdoor{
  --paper:#FFFFFF;
  --card:#FFFFFF; --card-2:#FFFFFF; --card-3:#ECECEC;
  --ink:#000000; --ink-2:#242424; --ink-3:#3D3D3D;
  --rule:#D4D4D4; --rule-2:#8C8C8C;
  --blue:#00375F; --blue-soft:#DCE8F0;
  --gold:#5A4506; --silver:#4A4A4A; --pewter:#4A3410;
  --red:#7A1C10; --green:#14421C;
  --tab-pill:#000000; --tab-ic:#FFFFFF; --tab-lb:#000000;
}
body.outdoor .head{border-bottom-width:2px}
body.outdoor .panel{border-color:#8C8C8C}

/* D-day 카드를 뒤집는다 — 직사광 1.6:1 → 3.2:1 */
body.outdoor .dday{background:#FFFFFF;color:#000000;border:2px solid #000000}
body.outdoor .dday .dnum{color:#000000}
body.outdoor .dday .dsub,
body.outdoor .dday .none{color:#242424}
body.outdoor .dday .dslots{color:#000000;border-top-color:#8C8C8C}
body.outdoor .dday .dslots b{color:#000000}
body.outdoor .ansrow button{border:2px solid #000000;color:#000000}
body.outdoor .ansrow button[aria-pressed="true"]{background:#000000;border-color:#000000;color:#FFFFFF}

/* 괘선은 어떤 색으로도 야외에서 안 보인다 — 줄무늬로 구분한다 */
body.outdoor table.lb tbody tr:nth-child(even) td,
body.outdoor table.crs tbody tr:nth-child(even) td{background:#E4E4E4}
body.outdoor .item:nth-child(even){background:#F2F2F2}
body.outdoor .act:nth-child(even){background:#F2F2F2}
body.outdoor .item.pin{background:#E0E0E0}
body.outdoor .slot,
body.outdoor .hole{border-color:#8C8C8C}
body.outdoor .hole.sel{border-color:#000000;border-width:3px}
body.outdoor .hole.si1::after{background:#000000}

/* 라운드 카드·요약의 어두운 배경도 함께 뒤집는다 */
body.outdoor .rcell .k,
body.outdoor .rnote{color:#242424}
body.outdoor .rcell.net{border-left-color:#8C8C8C}

/* 버튼·칩 테두리를 두껍게 */
body.outdoor .btn,
body.outdoor .chip,
body.outdoor .keypad button{border-width:2px}
body.outdoor .btn.dark{background:#000000;border-color:#000000;color:#FFFFFF}
body.outdoor .chip[aria-pressed="true"]{background:#000000;border-color:#000000;color:#FFFFFF}

/* 스코어 색 구분도 굵기로 보강 */
body.outdoor .o-under,
body.outdoor .o-dbl{font-weight:700}