/* 가나원 CC — 샘플 사이트 스타일
   방향: 프리미엄 리조트 · 딥그린/크림/브라스 · 넓은 풍경 사진 · 작은 대문자 라벨 */
:root{
  --green:#0E2A20;      /* 가장 짙은 초록 (바탕) */
  --green-2:#173D2F;
  --green-3:#245A45;
  --cream:#F4EFE3;
  --cream-2:#E9E1CF;
  --brass:#A07A3F;      /* 크림 위 큰 글씨·선 전용 */
  --brass-lt:#D2B07A;   /* 짙은 초록 위 글자 (대비 7:1) */
  --ink:#16231D;
  --mute:#53605A;       /* 크림 위 대비 6:1 */
  --line:#D8CEB8;
  --wrap:1280px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--cream); color:var(--ink); font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif; font-size:clamp(1rem,.96rem + .2vw,1.0625rem); line-height:1.75; word-break:keep-all; overflow-wrap:break-word; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-weight:300; letter-spacing:-.03em; line-height:1.25; margin:0; }
h2{ font-size:clamp(1.9rem,1.3rem + 2.4vw,3.3rem); }
h3{ font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem); font-weight:500; letter-spacing:-.02em; }
p{ margin:0 0 1em; }
:focus-visible{ outline:2px solid var(--brass-lt); outline-offset:3px; }
.wrap{ width:min(100% - 32px, var(--wrap)); margin-inline:auto; }
.skip{ position:absolute; left:-9999px; top:0; background:var(--brass-lt); color:var(--green); padding:10px 16px; z-index:100; }
.skip:focus{ left:16px; top:16px; }
.sc{ font-size:.74rem; letter-spacing:.28em; text-transform:uppercase; font-weight:600; font-variant:small-caps; }
.label{ display:flex; align-items:center; gap:14px; color:var(--brass); margin-bottom:20px; }
.label::before{ content:""; width:36px; height:1px; background:currentColor; }
.dark .label{ color:var(--brass-lt); }

.sample-bar{ background:#071811; color:#E6DECB; font-size:.8rem; text-align:center; padding:7px 16px; line-height:1.5; }
.sample-bar a{ color:var(--brass-lt); }

/* 머리글 */
.site-header{ position:sticky; top:0; z-index:50; background:var(--green); color:var(--cream); border-bottom:1px solid rgba(210,176,122,.25); }
.head-in{ display:flex; align-items:center; gap:24px; min-height:72px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand .sym{ width:40px; height:40px; background:var(--cream); border-radius:50%; display:grid; place-items:center; }
.brand .sym img{ width:28px; height:auto; }
.brand b{ font-weight:600; letter-spacing:.12em; font-size:1.05rem; display:block; line-height:1.2; }
.brand small{ display:block; font-size:.62rem; letter-spacing:.34em; color:var(--brass-lt); }
.gnb{ margin-left:auto; }
.gnb ul{ list-style:none; margin:0; padding:0; display:flex; gap:clamp(6px,1.4vw,22px); }
.gnb a{ display:inline-flex; align-items:center; min-height:44px; text-decoration:none; font-size:.92rem; color:#E9E2D2; }
.gnb a:hover,.gnb a[aria-current="page"]{ color:var(--brass-lt); }
.head-cta{ display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border:1px solid var(--brass-lt); color:var(--brass-lt); text-decoration:none; font-size:.86rem; letter-spacing:.06em; }
.head-cta:hover{ background:var(--brass-lt); color:var(--green); }
.menu-btn{ display:none; margin-left:auto; min-width:48px; min-height:48px; background:transparent; border:1px solid rgba(233,226,210,.4); color:var(--cream); cursor:pointer; align-items:center; justify-content:center; }
.menu-btn svg{ width:22px; height:22px; }

/* 버튼 */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 28px; font:inherit; font-size:.95rem; font-weight:600; letter-spacing:.04em; text-decoration:none; border:1px solid transparent; cursor:pointer; }
.btn-brass{ background:var(--brass-lt); color:var(--green); }
.btn-brass:hover{ background:#E0C291; }
.btn-green{ background:var(--green); color:var(--cream); }
.btn-green:hover{ background:var(--green-3); }
.btn-line{ border-color:currentColor; background:transparent; }

/* 첫 화면 */
.hero{ position:relative; min-height:min(92vh,880px); color:#fff; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; }
.hero > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,24,17,.45) 0%,rgba(7,24,17,0) 30%,rgba(7,24,17,.15) 55%,rgba(7,24,17,.85) 100%); }
.hero-txt{ position:relative; z-index:1; padding-bottom:36px; }
.hero-txt .label{ color:var(--brass-lt); }
.hero h1{ font-size:clamp(2.4rem,1.4rem + 4.6vw,5.6rem); font-weight:200; letter-spacing:-.04em; animation:up 1.1s ease both; }
.hero h1 b{ font-weight:600; }
.hero p{ max-width:32em; color:#EDE7D9; margin-top:16px; }
@keyframes up{ from{ transform:translateY(20px); } to{ opacity:1; transform:none; } }
.book-bar{ position:relative; z-index:1; background:rgba(14,42,32,.92); backdrop-filter:blur(6px); border-top:1px solid rgba(210,176,122,.35); }
.book-bar form{ display:grid; grid-template-columns:repeat(3,1fr) auto; gap:0; }
.book-bar .bf{ padding:14px 22px; border-right:1px solid rgba(210,176,122,.2); }
.book-bar label{ display:block; color:var(--brass-lt); margin-bottom:2px; }
.book-bar select,.book-bar input{ width:100%; min-height:40px; background:transparent; color:#fff; border:0; font:inherit; font-size:1.05rem; color-scheme:dark; }
.book-bar select option{ color:#000; }
.book-bar button{ min-height:72px; padding:0 36px; border:0; background:var(--brass-lt); color:var(--green); font:inherit; font-weight:700; letter-spacing:.06em; cursor:pointer; }

/* 섹션 */
.sec{ padding:clamp(72px,10vw,140px) 0; }
.dark{ background:var(--green); color:#E9E2D2; }
.dark h2,.dark h3{ color:#F7F2E6; }
.green2{ background:var(--green-2); color:#E9E2D2; }
.cream2{ background:var(--cream-2); }
.ex{ display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.08em; border:1px solid currentColor; padding:0 8px; margin-left:8px; vertical-align:middle; color:var(--brass); }
.dark .ex{ color:var(--brass-lt); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,6vw,96px); align-items:center; }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--ink); margin-top:36px; }
.stats div{ padding:18px 12px 0 0; }
.stats b{ display:block; font-size:clamp(1.7rem,1.3rem + 1.4vw,2.6rem); font-weight:200; letter-spacing:-.03em; }
.stats span{ color:var(--mute); }
.pano{ width:100%; aspect-ratio:21/9; object-fit:cover; }

/* 코스 표 */
.tabs{ display:flex; gap:0; border-bottom:1px solid rgba(210,176,122,.35); margin:36px 0 0; }
.tabs button{ min-height:52px; padding:0 26px; background:transparent; border:0; border-bottom:2px solid transparent; color:#CFC7B4; font:inherit; cursor:pointer; letter-spacing:.06em; }
.tabs button[aria-selected="true"]{ color:var(--brass-lt); border-bottom-color:var(--brass-lt); }
.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.score{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:.95rem; }
.score caption{ text-align:left; padding:18px 0 10px; color:var(--brass-lt); }
.score th,.score td{ padding:12px 8px; text-align:center; border-bottom:1px solid rgba(233,226,210,.14); }
.score thead th{ color:var(--brass-lt); font-weight:600; font-size:.78rem; letter-spacing:.14em; }
.score tbody th{ font-weight:600; color:#fff; }
.score tfoot td,.score tfoot th{ font-weight:700; color:var(--brass-lt); border-bottom:0; }
.score .t-black{ color:#fff; } .score .t-red{ color:#F0A9A0; }
.course-panel[hidden]{ display:none; }
.course-head{ display:grid; grid-template-columns:1fr 1.4fr; gap:28px; align-items:center; margin-top:28px; }
.course-head img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.mobile-note{ display:none; font-size:.82rem; color:#BFB7A4; }

/* 티타임 예약 */
.tee{ display:grid; grid-template-columns:minmax(0,1fr); gap:28px; }
.tee > *{ min-width:0; }
.dates{ display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x proximity; }
.dates button{ flex:0 0 auto; width:76px; min-height:84px; border:1px solid var(--line); background:#fff; cursor:pointer; font:inherit; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.2; scroll-snap-align:start; color:var(--ink); }
.dates button small{ font-size:.72rem; color:var(--mute); letter-spacing:.06em; }
.dates button b{ font-size:1.5rem; font-weight:300; }
.dates button.we small{ color:#9A3B2E; }
.dates button[aria-pressed="true"]{ background:var(--green); color:var(--cream); border-color:var(--green); }
.dates button[aria-pressed="true"] small{ color:var(--brass-lt); }
.tee-filter{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.tee-filter button{ min-height:44px; padding:0 18px; border:1px solid var(--line); background:transparent; cursor:pointer; font:inherit; color:var(--ink); }
.tee-filter button[aria-pressed="true"]{ border-color:var(--green); background:var(--green); color:var(--cream); }
.slot-group h3{ font-size:1rem; font-weight:600; margin:22px 0 10px; color:var(--mute); letter-spacing:.06em; }
.slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:8px; }
.slots button{ min-height:64px; border:1px solid var(--line); background:#fff; cursor:pointer; font:inherit; text-align:left; padding:8px 12px; color:var(--ink); line-height:1.35; }
.slots button b{ display:block; font-size:1.15rem; font-weight:600; font-variant-numeric:tabular-nums; }
.slots button span{ font-size:.78rem; color:var(--mute); }
.slots button:hover:not(:disabled){ border-color:var(--green); box-shadow:inset 0 0 0 1px var(--green); }
.slots button:disabled{ background:transparent; color:#9B9686; cursor:not-allowed; text-decoration:line-through; }
.slots button.disc span{ color:#8A5A12; font-weight:600; }
.tee-empty{ padding:24px; border:1px dashed var(--line); color:var(--mute); }
dialog.modal{ border:0; padding:0; width:min(460px, calc(100vw - 32px)); background:var(--cream); color:var(--ink); }
dialog.modal::backdrop{ background:rgba(7,24,17,.7); }
.modal-head{ background:var(--green); color:var(--cream); padding:20px 24px; }
.modal-head .label{ color:var(--brass-lt); margin-bottom:6px; }
.modal-body{ padding:20px 24px 24px; }
.modal dl{ margin:0 0 16px; }
.modal dl div{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); }
.modal dd{ margin:0; font-weight:600; font-variant-numeric:tabular-nums; }
.modal .total{ font-size:1.35rem; color:var(--green); }
.modal .warn{ background:#FFF4DA; color:#5A3E0E; padding:12px 14px; font-size:.9rem; margin:0 0 16px; border-left:3px solid var(--brass); }
.modal .actions{ display:flex; gap:8px; }
.modal .actions .btn{ flex:1; }
.modal .done{ text-align:center; padding:12px 0; color:var(--green); font-weight:700; }
.modal .players{ display:flex; gap:6px; }
.modal .players button{ min-width:44px; min-height:44px; border:1px solid var(--line); background:#fff; cursor:pointer; font:inherit; }
.modal .players button[aria-pressed="true"]{ background:var(--green); color:#fff; border-color:var(--green); }

/* 요금표 */
.fee{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.fee th,.fee td{ padding:18px 14px; border-bottom:1px solid var(--line); text-align:right; }
.fee th:first-child,.fee td:first-child{ text-align:left; }
.fee thead th{ border-bottom:1px solid var(--ink); font-weight:600; font-size:.8rem; letter-spacing:.14em; color:var(--mute); }
.fee tbody th{ font-weight:500; }
.fee td b{ font-size:1.2rem; font-weight:500; }
.fee-notes{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:32px; border-top:1px solid var(--ink); }
.fee-notes div{ padding:20px 20px 0 0; }
.fee-notes b{ display:block; font-size:1.5rem; font-weight:300; }
.fee-notes span{ color:var(--mute); font-size:.9rem; }

/* 클럽하우스 */
.house{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:44px; }
.house article{ background:var(--green-2); display:flex; flex-direction:column; }
.house .vis{ aspect-ratio:4/3; overflow:hidden; background:#1E4A39; }
.house .vis img,.house .vis svg{ width:100%; height:100%; object-fit:cover; display:block; }
.house .body{ padding:24px 26px 30px; }
.house h3{ color:#F7F2E6; margin-bottom:8px; }
.house p{ color:#CFC7B4; font-size:.95rem; }
.menu-list{ list-style:none; padding:0; margin:12px 0 0; font-size:.92rem; }
.menu-list li{ display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px dotted rgba(210,176,122,.3); color:#E9E2D2; }
.menu-list span:last-child{ color:var(--brass-lt); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* 앱 소개 / 오시는 길 */
.app-row{ display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; }
.map svg{ width:100%; height:auto; display:block; background:#E2DAC6; }
.way{ list-style:none; padding:0; margin:0; }
.way li{ padding:16px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:110px 1fr; gap:14px; }
.way b{ color:var(--brass); font-weight:600; }

/* 바닥글 */
.site-footer{ background:#071811; color:#BDB5A2; padding:56px 0 110px; font-size:.88rem; }
.site-footer a{ color:var(--brass-lt); }
.site-footer .brand{ margin-bottom:16px; color:#E9E2D2; }
.site-footer .made{ border-top:1px solid rgba(210,176,122,.2); margin-top:22px; padding-top:18px; }

/* 모바일 하단 바 */
.quick{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; grid-template-columns:1fr 2fr; background:var(--green); border-top:1px solid rgba(210,176,122,.35); padding-bottom:env(safe-area-inset-bottom); }
.quick a{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:58px; text-decoration:none; color:var(--cream); font-weight:600; letter-spacing:.04em; }
.quick a:last-child{ background:var(--brass-lt); color:var(--green); }
.quick svg{ width:20px; height:20px; }

/* 하위 페이지 — 코스 상세 */
.sub-hero{ position:relative; color:#fff; min-height:min(60vh,560px); display:flex; align-items:flex-end; overflow:hidden; }
.sub-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sub-hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,24,17,.2),rgba(7,24,17,.82)); }
.sub-hero .wrap{ position:relative; z-index:1; padding-bottom:52px; }
.sub-hero h1{ font-size:clamp(2.4rem,1.6rem + 3.4vw,4.6rem); font-weight:200; }
.sub-hero .label{ color:var(--brass-lt); }
.crumb{ font-size:.82rem; color:#E2DBCB; margin-bottom:12px; }
.course-nav{ position:sticky; top:72px; z-index:40; background:var(--cream); border-bottom:1px solid var(--line); }
.course-nav .wrap{ display:flex; gap:4px; overflow-x:auto; padding:8px 0; }
.course-nav a{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; text-decoration:none; font-variant-numeric:tabular-nums; border:1px solid transparent; font-size:.92rem; }
.course-nav a:hover{ border-color:var(--green); }
.course-nav .grp{ color:var(--brass); padding:0 10px; font-weight:700; }
.holes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr)); gap:2px; margin-top:36px; }
.hole{ background:#fff; display:grid; grid-template-columns:110px 1fr; gap:20px; padding:22px; scroll-margin-top:150px; }
.hole svg{ width:110px; height:200px; }
.hole .no{ display:flex; align-items:baseline; gap:10px; }
.hole .no b{ font-size:2.6rem; font-weight:200; line-height:1; color:var(--green); }
.hole .no span{ color:var(--brass); }
.hole dl{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin:12px 0; font-variant-numeric:tabular-nums; }
.hole dt{ font-size:.66rem; letter-spacing:.12em; color:var(--mute); }
.hole dd{ margin:0; font-weight:600; }
.hole p{ font-size:.92rem; color:var(--mute); margin:0; }
.rules{ columns:2 300px; gap:48px; }
.rules li{ break-inside:avoid; margin-bottom:12px; }

/* 앱 시안 */
.app-head{ padding:clamp(48px,8vw,110px) 0 16px; }
.app-head h1{ font-size:clamp(2.2rem,1.6rem + 2.6vw,3.8rem); font-weight:200; }
.phones{ display:flex; gap:28px; overflow-x:auto; scroll-snap-type:x mandatory; padding:28px 16px 56px; justify-content:safe center; }
.phone-col{ flex:0 0 auto; width:280px; max-width:calc(100vw - 48px); scroll-snap-align:center; }
.phone{ border-radius:44px; background:#050F0B; padding:11px; box-shadow:0 30px 60px rgba(7,24,17,.35); position:relative; }
.screen{ border-radius:34px; background:var(--cream); height:590px; overflow:hidden; display:flex; flex-direction:column; position:relative; font-size:.8rem; line-height:1.5; }
.screen.dk{ background:var(--green); color:#E9E2D2; }
.notch{ position:absolute; top:9px; left:50%; transform:translateX(-50%); width:92px; height:25px; border-radius:20px; background:#050F0B; z-index:3; }
.status{ display:flex; justify-content:space-between; padding:12px 22px 4px; font-size:.7rem; font-weight:700; position:relative; z-index:2; }
.scr-body{ flex:1; overflow:hidden; padding:8px 14px; }
.scr-title{ font-size:1.2rem; font-weight:300; margin:6px 0 10px; }
.tabbar{ display:grid; grid-template-columns:repeat(4,1fr); background:var(--green); color:#A9A18E; padding:8px 0 16px; text-align:center; font-size:.64rem; letter-spacing:.06em; }
.tabbar span{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.tabbar svg{ width:20px; height:20px; }
.tabbar .on{ color:var(--brass-lt); }
.a-card{ background:#fff; padding:10px 12px; margin-bottom:8px; }
.dk .a-card{ background:var(--green-2); }
.a-card h4{ margin:0 0 2px; font-size:.86rem; font-weight:600; }
.next-tee{ background:var(--green); color:var(--cream); padding:14px; margin-bottom:8px; }
.next-tee b{ font-size:1.9rem; font-weight:200; display:block; line-height:1.1; }
.next-tee small{ color:var(--brass-lt); letter-spacing:.2em; font-size:.62rem; }
.mini-dates{ display:flex; gap:4px; margin-bottom:8px; }
.mini-dates span{ flex:1; text-align:center; padding:6px 0; background:#fff; font-size:.7rem; line-height:1.2; }
.mini-dates .on{ background:var(--green); color:var(--cream); }
.mini-slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.mini-slots span{ background:#fff; text-align:center; padding:7px 0; font-weight:600; font-size:.78rem; }
.mini-slots .off{ color:#A9A396; text-decoration:line-through; font-weight:400; }
.mini-slots .on{ background:var(--brass-lt); color:var(--green); }
.sc-tbl{ width:100%; border-collapse:collapse; font-size:.7rem; text-align:center; font-variant-numeric:tabular-nums; }
.sc-tbl th,.sc-tbl td{ padding:5px 2px; border-bottom:1px solid rgba(233,226,210,.15); }
.sc-tbl thead th{ color:var(--brass-lt); }
.sc-tbl .bd{ color:#F0A9A0; } .sc-tbl .bi{ color:#9BD3B4; }
.qr{ width:150px; height:150px; margin:10px auto; background:#fff; padding:10px; display:grid; grid-template-columns:repeat(15,1fr); }
.qr i{ background:#0E2A20; } .qr i.w{ background:#fff; }
.push{ background:#fff; color:var(--ink); border-radius:14px; box-shadow:0 8px 20px rgba(0,0,0,.2); padding:10px 12px; display:grid; grid-template-columns:30px 1fr; gap:10px; margin-bottom:10px; font-size:.74rem; }
.push .ap{ width:30px; height:30px; border-radius:8px; background:var(--green); display:grid; place-items:center; }
.push .ap img{ width:20px; height:auto; }
.cap{ margin-top:18px; }
.cap b{ display:block; font-weight:600; font-size:1.05rem; }
.cap span{ color:var(--mute); font-size:.92rem; }

/* 등장 효과 */
html.js .reveal:not(.in){ opacity:.85; transform:translateY(22px); }
.reveal{ transition:opacity .9s ease, transform .9s ease; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  html.js .reveal:not(.in){ opacity:1; transform:none; }
}

/* 반응형 */
@media (max-width:1080px){
  .menu-btn{ display:inline-flex; }
  .head-cta{ display:none; }
  .gnb{ position:fixed; top:0; right:0; bottom:0; width:min(86vw,360px); background:var(--green); padding:96px 24px 28px; transform:translateX(100%); visibility:hidden; transition:transform .3s, visibility .3s; z-index:45; border-left:1px solid rgba(210,176,122,.3); overflow-y:auto; }
  .gnb.open{ transform:none; visibility:visible; }
  .gnb ul{ flex-direction:column; gap:0; }
  .gnb a{ min-height:56px; width:100%; border-bottom:1px solid rgba(233,226,210,.12); font-size:1.1rem; }
  .menu-btn{ position:relative; z-index:55; }
}
@media (max-width:860px){
  .split,.course-head,.app-row{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .book-bar form{ grid-template-columns:1fr 1fr; }
  .book-bar .bf:nth-child(3){ grid-column:span 2; border-top:1px solid rgba(210,176,122,.2); }
  .book-bar button{ grid-column:span 2; min-height:56px; }
  .house{ grid-template-columns:1fr; }
  .fee-notes{ grid-template-columns:1fr; }
  .quick{ display:grid; }
  .mobile-note{ display:block; }
  .score .hide-m{ display:none; }
  .course-nav{ top:72px; }
}
@media (max-width:560px){
  .fee th,.fee td{ padding:14px 6px; font-size:.9rem; }
  .fee td b{ font-size:1rem; }
  .way li{ grid-template-columns:1fr; gap:0; }
  .hole{ grid-template-columns:84px 1fr; gap:14px; padding:18px; }
  .hole svg{ width:84px; height:152px; }
  .score th,.score td{ padding:10px 4px; font-size:.85rem; }
  .tabs button{ padding:0 16px; }
}