/* ===== 투어리스트 (TOURLIST, 구 골프라이프) — 모바일 우선 스타일 =====
   디자인 언어는 토스뱅크 벤치마킹(밝은 회색 배경 · 흰 카드 · 굵은 타이포 · 여백으로 구분),
   포인트 색만 브랜드 그린. 토스가 파랑을 쓰는 자리를 그대로 그린이 맡는다. */
:root {
  /* 배경 — 토스: 페이지는 옅은 회색, 카드는 순백 (경계선 대신 여백·그림자로 구분) */
  --bg-1: #f2f4f6;
  --bg-2: #f2f4f6;
  --surface: #ffffff;
  --surface-2: #f7f8fa;      /* 카드 안쪽 은은한 면 */
  --surface-press: #edeff2;  /* 눌림 상태 */
  --card: #ffffff;
  --card-strong: #ffffff;
  --line: #e8ebed;
  /* 글자 — 3단 위계만 사용. 흐린 회색 남발 금지가 토스 원칙 */
  --text: #191f28;
  --text-dim: #4e5968;
  --text-faint: #8b95a1;
  --text-on: #ffffff;
  /* 포인트 — 로고 그린.
     밝은 로고 그린(#10c43c) 위에 흰 글씨를 얹으면 대비가 2.3:1 밖에 안 나온다.
     그래서 역할을 나눈다: 아이덴티티는 밝은 그린, 흰 글씨가 올라가는 면은 한 톤 진하게. */
  --brand: #10c43c;          /* 로고 그린 — 진행바·아이콘·활성 표시 */
  --primary: #0b9e36;        /* 버튼 등 흰 글씨가 올라가는 면 (대비 3.9:1) */
  --primary-press: #087d2a;
  --primary-weak: #e9f8ed;   /* 연한 그린 배경 */
  --primary-ink: #0a7f2c;    /* 흰 배경 위 그린 글씨 (대비 5.2:1) */
  /* 서브 컬러 — 로고 깃발의 빨강.
     그린이 '풀·코스'라면 빨강은 '핀·목표·지금'이다. 그 뜻이 맞는 자리에만 쓴다:
     지도 위 핀, 오버파, 실시간 '지금' 표시. 장식으로는 쓰지 않는다. */
  --flag: #f5232b;
  --flag-ink: #d81b23;       /* 흰 배경 위 빨간 글씨 */
  --flag-weak: #ffecec;
  --accent: #0b9e36;         /* 기존 코드 호환 */
  --green: #0b9e36;
  --green-weak: #e9f8ed;
  --danger: #f04452;
  --danger-weak: #ffeff0;
  --warn: #ff9500;
  --warn-weak: #fff4e5;
  /* 모양 */
  --radius: 16px;
  --radius-s: 12px;
  --shadow-1: 0 1px 3px rgba(25, 31, 40, 0.04), 0 4px 14px rgba(25, 31, 40, 0.05);
  --shadow-2: 0 4px 12px rgba(25, 31, 40, 0.08), 0 12px 32px rgba(25, 31, 40, 0.10);
  /* 모션 — 토스 특유의 살짝 튕기는 감속 */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; overflow-x: hidden; } /* 가로 밀림 방지 */
/* ⚠️ .view 에 overflow-x 를 주면 그 요소가 스크롤 컨테이너가 되어
   sticky 헤더(★ 저장·골프장 이름)가 붙지 않고 window.scrollY 가 항상 0 이 된다.
   가로 잘라내기는 위 html,body 규칙만으로 충분하다 (2026-07-28 점검에서 발견). */
input, select { min-width: 0; }

body {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Malgun Gothic", "Segoe UI", sans-serif;
  background: var(--bg-2);
  color: var(--text);
  overscroll-behavior-y: none;
  /* ⚠️ body 에 touch-action 을 걸지 말 것.
     더블탭 확대를 막으려고 manipulation 을 넣었다가 실기기(iOS)에서 탈이 나
     되돌렸다(v133→v134, 2026-07-28). 브라우저 기본 터치 동작을 그대로 둔다. */
}
/* 그라데이션 배경은 고정 레이어로 분리 —
   body 에 background-attachment:fixed 를 쓰면 iOS 가 화면 갱신을 누락해
   스크롤 전까지 회색 화면만 보이는 문제가 있었다 (2026-07-24) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--bg-2);
}

.view {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  /* 아래쪽 여백은 '안전영역'만으로는 모자란다 — 하단 플로팅 버튼(뒤로가기·공유)이
     화면에 고정돼 있어서 마지막 카드의 글자를 덮는다(2026-07-31 사장님 지적, 골프 정신 화면).
     버튼은 bottom 20px + 지름 46px = 66px 을 쓰므로 손가락 여유까지 더해 비워 둔다.
     특정 화면만 고치면 다른 화면에서 같은 일이 또 나므로 전 화면 공통으로 둔다. */
  padding: env(safe-area-inset-top) 16px calc(88px + env(safe-area-inset-bottom));
}

/* ===== 홈 ===== */
.home-header {
  display: flex; align-items: baseline; gap: 10px;
  padding: 22px 4px 14px;
}
.home-header h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.5px; }
.beta-badge {
  font-size: 11px; font-weight: 700; color: var(--primary-ink);
  border: 1px solid var(--brand); border-radius: 999px;
  padding: 2px 8px; opacity: 0.9;
}
.home-sub {
  padding: 0 4px 12px;
  font-size: 13px; color: var(--text-dim);
}
.home-ask {
  padding: 6px 4px 10px;
  font-size: 21px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text);
}

.search-wrap { position: relative; z-index: 30; }
.search-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2);
  border-radius: 12px; padding: 10px 12px;
}
.icon-search { width: 18px; height: 18px; color: var(--text-faint); flex: none; }
.search-box input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-size: 16px;
}
.search-box input::placeholder { color: var(--text-faint); }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-clear {
  background: var(--surface-press); color: var(--bg-2);
  border: none; border-radius: 50%; width: 20px; height: 20px;
  font-size: 14px; line-height: 1; cursor: pointer; flex: none;
}
.search-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(25,31,40,0.10);
}
.search-results li {
  padding: 12px 14px; cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.search-results li:last-child { border-bottom: none; }
.search-results li:active { background: var(--surface-2); }
.search-results .r-name { font-size: 15px; font-weight: 600; }
.search-results .r-name .r-tag {
  font-size: 10px; font-weight: 700; color: var(--primary-ink);
  border: 1px solid var(--brand); border-radius: 6px;
  padding: 1px 5px; margin-left: 6px; vertical-align: 1px;
  white-space: nowrap;
}
.search-results .r-name .r-tag-area { color: var(--primary-ink); border-color: var(--primary-ink); }
.search-results .r-note { color: var(--text-faint); font-size: 11px; }
.search-results .r-addr { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.search-status {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px; text-align: center;
  font-size: 13px; color: var(--text-dim);
  box-shadow: 0 12px 30px rgba(25,31,40,0.10);
}

/* 저장된 골프장 카드 */
.course-list { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.course-card {
  position: relative;
  border-radius: var(--radius);
  padding: 16px 18px;
  min-height: 108px;
  cursor: pointer;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  border-left: 4px solid var(--text-faint);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform 0.08s ease;
}
.course-card:active { transform: scale(0.985); }
.course-card.wx-rain  { border-left-color: var(--primary-ink); }
.course-card.wx-clear { border-left-color: #ffb020; }
.course-card.wx-snow  { border-left-color: #74b0fb; }
.cc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cc-name { font-size: 19px; font-weight: 700; line-height: 1.25; }
.cc-sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.cc-temp { font-size: 40px; font-weight: 300; line-height: 1; white-space: nowrap; }
.cc-bottom {
  display: flex; justify-content: space-between; align-items: flex-end;
  font-size: 13px; color: var(--text-dim); margin-top: 12px;
}
.cc-remove {
  position: absolute; top: -6px; right: -6px;
  width: 34px; height: 34px;
  background: none; border: none; color: transparent; /* 터치영역만, X는 hover/편의용 */
}
.cc-del {
  background: var(--surface-2); color: var(--text-dim);
  border: none; border-radius: 50%;
  width: 22px; height: 22px; font-size: 13px; line-height: 1;
  cursor: pointer; flex: none; margin-left: 4px;
}
.cc-del:active { background: var(--danger); color: #fff; }

.empty-state { text-align: center; margin-top: 46px; color: var(--text-dim); line-height: 1.7; }
.empty-icon { font-size: 44px; margin-bottom: 12px; }

/* 검색 사용 안내 */
.howto-card {
  margin: 26px auto 0; max-width: 340px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px;
  text-align: left;
}
.howto-title {
  font-size: 13px; font-weight: 700; color: var(--primary-ink);
  margin-bottom: 12px;
}
.howto-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.howto-list li { line-height: 1.45; }
.howto-list b { display: block; font-size: 13px; color: var(--text); font-weight: 600; }
.howto-list span { font-size: 12px; color: var(--text-dim); }
.howto-tip {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--text-faint); line-height: 1.6;
}

/* 날씨 로딩 실패 재시도 */
.retry-btn {
  display: inline-block; margin-top: 10px;
  padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--brand); background: rgba(16,196,60,0.14);
  color: var(--primary-ink); font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}

/* ===== 상세 ===== */
.detail-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0;
  background: linear-gradient(180deg, rgba(242,244,246,0.96) 55%, rgba(242,244,246,0));
  backdrop-filter: saturate(180%) blur(8px);
}
.hdr-btn {
  width: 44px; height: 44px; border-radius: 50%;   /* 손가락 터치 최소 크기 */
  background: var(--surface-2); color: var(--text);
  border: none; font-size: 24px; line-height: 1; cursor: pointer;
}
.hdr-btn.star { font-size: 24px; }   /* 2026-07-31 사장님 지시로 20% 키움 (20 → 24px) */
.hdr-btn.star.saved { color: #e08600; }
.hdr-title { font-size: 15px; font-weight: 600; opacity: 0; transition: opacity 0.2s; }
.hdr-title.show { opacity: 1; }

.detail-scroll { padding-bottom: 24px; }

.hero { text-align: center; padding: 8px 0 26px; }
.hero-name { font-size: 26px; font-weight: 700; }
.hero-addr { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.hero-temp { font-size: 84px; font-weight: 200; line-height: 1.1; margin-top: 6px; }
.hero-desc { font-size: 17px; color: var(--text-dim); }
.hero-minmax { font-size: 15px; margin-top: 4px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  backdrop-filter: blur(6px);
}
.card-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.4px;
  color: var(--text-dim); text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px;
}
.card-title .ic { font-size: 13px; }
.card-title small { font-weight: 500; margin-left: auto; color: var(--text-faint); }

.outfit-card { border: 1px solid rgba(16, 150, 60, .22); }
.outfit-title { margin: 0 0 6px; font-size: 18px; line-height: 1.4; }
.outfit-scope, .outfit-period, .outfit-note, .outfit-air {
  margin: 6px 0; color: var(--text-dim); font-size: 12px; line-height: 1.55;
}
.outfit-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.outfit-controls label { display: grid; gap: 5px; min-width: 0; font-size: 12px; color: var(--text-dim); }
.outfit-controls select {
  width: 100%; min-width: 0; min-height: 44px; padding: 8px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 16px;
}
.outfit-controls select:focus-visible { outline: 2px solid var(--primary-ink); outline-offset: 2px; }
.outfit-range { margin: 12px 0 0; font-size: 19px; font-weight: 800; color: var(--primary-ink); }
.outfit-lead { font-size: 17px; line-height: 1.5; margin: 10px 0 6px; }
.outfit-clothes { margin: 0; font-size: 15px; line-height: 1.7; }
.outfit-tips { padding-left: 20px; margin: 10px 0; font-size: 13px; line-height: 1.6; color: var(--text-dim); }
.outfit-tips li + li { margin-top: 5px; }
.outfit-note { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px; }
.summary-text {
  font-size: 14px; line-height: 1.55;
  padding-bottom: 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

/* 시간별 */
.hourly-scroll {
  display: flex; gap: 4px; overflow-x: auto;
  padding: 10px 2px 4px;
  scrollbar-width: none;
}
.hourly-scroll::-webkit-scrollbar { display: none; }
.hour-item {
  flex: none; width: 58px; text-align: center;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.hour-item .h-time { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.hour-item.now .h-time { color: var(--text); font-weight: 700; }
.hour-item .h-icon { font-size: 22px; }
.hour-item .h-pop { font-size: 11px; color: var(--primary-ink); font-weight: 600; min-height: 14px; }
.hour-item .h-temp { font-size: 15px; font-weight: 600; }

/* 날짜별 8일 — 시간별 바로 아래, 같은 카드 안 (2026-08-13) */
.daily-scroll {
  display: flex; gap: 4px; overflow-x: auto; padding: 12px 2px 2px;
  margin-top: 10px; border-top: 1px solid var(--line);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.daily-scroll::-webkit-scrollbar { display: none; }
.day-item {
  flex: none; width: 62px; text-align: center;
  display: flex; flex-direction: column; gap: 5px; align-items: center;
  border-radius: var(--radius-s); padding: 6px 2px 8px; cursor: pointer;
}
.day-item.now { background: var(--primary-weak); }
.day-item .d-name { font-size: 12px; color: var(--text-dim); font-weight: 600; white-space: nowrap; }
.day-item.now .d-name { color: var(--primary-ink); font-weight: 700; }
.day-item .d-date { font-size: 10.5px; color: var(--text-faint); margin-top: -3px; }
.day-item .d-temp { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
.day-item .d-temp b { font-size: 14px; color: var(--text); font-weight: 700; }

/* ===== 내 위치 → 골프장 거리 ===== */
.dist-card { padding: 12px 16px; }
.dist-content { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.dist-main { flex: 1; font-size: 14px; font-weight: 600; }
.dist-main small { display: block; font-size: 11px; font-weight: 500; color: var(--text-faint); margin-top: 2px; }
.dist-btn {
  flex: 1; padding: 10px; border-radius: 10px;
  border: 1px dashed var(--line); background: var(--surface-2);
  color: var(--text-dim); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.dist-why {
  display: block; margin-top: 6px; padding: 0 2px;
  font-size: 11.5px; line-height: 1.5; color: var(--text-faint);
}
/* 빠른 필수 확인 시트가 떠 있는 동안은 플로팅 뒤로가기·공유(z 5100)를 숨긴다 —
   시트(z 3000)를 뚫고 눌려서 뒤 화면만 이동하고 시트가 고아로 남는 사고 방지 */
body.qc-open .float-btn { display: none; }
.dist-navs { flex: none; display: flex; flex-direction: column; gap: 6px; }
.dist-nav {
  padding: 7px 14px; border-radius: 999px; text-align: center;
  font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.dist-nav.kakao { background: #fee500; color: #191919; }
.dist-nav.tmap { background: #2b6bff; color: #fff; }
.dist-loading { font-size: 13px; color: var(--text-dim); }
.dist-content.has-course-nav { display: block; }
.dist-route-estimate { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.dist-route-estimate .dist-why { flex-basis: 100%; }
.course-navigation { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.course-navigation > strong { display: block; font-size: 14px; }
.course-nav-address { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--text-dim); overflow-wrap: anywhere; }
.course-nav-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.course-nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  flex: 1 1 80px; padding: 8px 10px; border: 0; border-radius: 10px; font: inherit;
  font-size: 12px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; }
.course-nav-link.naver { background: #087f39; color: white; }
.course-nav-link.kakao { background: #fee500; color: #191919; }
.course-nav-link.tmap { background: #2b6bff; color: white; }
.course-nav-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-dim); }

/* ===== 레이더 ===== */
.radar-card { padding: 14px 12px 12px; }
.map-mode {
  display: flex; gap: 6px; margin-bottom: 10px;
}
.mode-btn {
  flex: 1; padding: 8px 10px;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text-dim);
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit;
}
.mode-btn small { font-size: 10px; font-weight: 500; opacity: 0.75; margin-left: 2px; }
.mode-btn.active {
  background: rgba(16,196,60,0.16);
  border-color: var(--primary-ink); color: var(--primary-ink);
}
.map-wrap { position: relative; border-radius: 14px; overflow: hidden; }
#map { height: 340px; background: #e9edf2; }
#map .leaflet-control-attribution {
  background: var(--surface-press); color: var(--text-faint); font-size: 9px;
}
#map .leaflet-control-attribution a { color: var(--text-dim); }

/* 골프장 위치 녹색점 + 강수량 칩 */
.course-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: #2ecc71; border: 3px solid #fff;
  box-shadow: 0 0 0 4px rgba(16,196,60,0.30), 0 2px 6px rgba(25,31,40,0.12);
}
[hidden] { display: none !important; }
.hole-course-label {
  grid-column: 1 / -1;
  text-align: left;
  color: var(--green);
  font-weight: 800;
  font-size: 13px;
  margin: 8px 2px 2px;
}
.hole-canvas-wrap { margin: 6px 0 10px; text-align: center; }
/* 세로 우선 표시: 세로를 먼저 채우고, 가로가 화면 최대치를 넘으면 비율 유지한 채 자동 축소 */
#hole-img { width: auto; height: auto; max-height: min(520px, 58vh); max-width: 92%; border-radius: 14px; display: inline-block; background: #fff; padding: 10px; box-sizing: border-box; }
/* 홀별 공략 준비 중 안내 (자료 미확보 구장) */
.course-prep-note {
  background: var(--warn-weak);
  border: 1px solid rgba(251,191,36,0.4);
  border-radius: 12px; padding: 13px 16px; margin-bottom: 12px;
  font-size: 14px; font-weight: 700; color: #e08600; line-height: 1.5;
}
.course-prep-note span { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--text-dim); }
.hole-video-wrap { margin-top: 12px; }
.hole-video-title { font-size: 13px; font-weight: 700; color: var(--text-dim); margin-bottom: 6px; }
.hole-video-box { position: relative; width: 100%; max-width: 460px; margin: 0 auto; }
#hole-video-player {
  width: 100%; max-height: 46vh;
  border-radius: 12px; background: #0d1418;
  display: block; margin: 0 auto;
  object-fit: cover;
}
/* 재생 버튼 — 영상을 가리지 않을 만큼만. 누르면 그때 컨트롤이 붙는다 */
.hv-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%; border: none;
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  cursor: pointer; padding: 0;
}
.hv-play::before {
  content: ""; display: block;
  width: 0; height: 0; margin: 0 auto;
  border-left: 17px solid #fff;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  transform: translateX(3px);
}
.hv-play:active { background: rgba(0, 0, 0, 0.58); transform: translate(-50%, -50%) scale(0.94); }
.hole-elev { color: var(--primary-ink); font-weight: 700; }
.hole-img-src { color: var(--text-faint); font-size: 11px; margin-top: 4px; }
/* 앱 공유 버튼 (전 화면 공통 플로팅) */
/* 헤더 좌상단 뒤로가기는 숨김 — 하단 플로팅 버튼 하나로 통일 (공간은 유지해 제목 중앙 정렬 보존) */
#btn-back, .btn-back-any { visibility: hidden; }

/* 플로팅 조작 버튼 공통 — 반투명, 항상 따라다님 */
.float-btn {
  position: fixed;
  /* 🔴 대기 화면(.rw-wait, z-index 5000)보다 **위**에 있어야 한다.
     90 이던 시절, 클럽피팅 정렬처럼 오래 걸리는 처리 중에는 뒤로가기가 통째로 덮여
     이용자가 끝날 때까지 빠져나갈 수 없었다(사장님 지적 2026-08-03 —
     "오래 걸려서 다른 메뉴를 보려 할 때 뒤로갈 수 있어야 하는데 그게 없으니 계속 기다려야 하고").
     스와이프 뒤로가기도 대기 화면이 화면을 다 덮고 있어 잘 안 먹혔다.
     기다릴지 말지는 이용자가 정한다. 버튼은 어느 화면에서도 살아 있어야 한다. */
  z-index: 5100;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  /* blur(backdrop-filter)는 아래 내용이 통째로 바뀔 때 iOS 가 스냅샷을 안 갱신하는
     문제가 있어 제거하고, 대신 배경을 살짝 진하게 */
  background: rgba(30, 42, 52, 0.82);
  color: var(--text-dim);
  box-shadow: 0 4px 12px rgba(25,31,40,0.07);
  transition: opacity 0.2s, transform 0.08s, background 0.2s;
  opacity: 0.65;
}

/* 사진을 크게 볼 때는 떠 있는 버튼을 감춘다.
   버튼을 대기 화면 위(5100)로 올리면서 사진 뷰어(z-index 200)까지 덮어,
   뷰어의 ‹ › 버튼과 겹쳐 눌렸다(2026-08-03 사장님 화면).
   뷰어에는 제 닫기(×)와 넘김 버튼이 따로 있으므로 우리 버튼은 필요 없다.
   body 에 표시를 달아 두고 여기서 감춘다 — 뷰어를 닫으면 저절로 돌아온다. */
body.lb-open .float-btn { display: none; }

.float-btn:hover { opacity: 1; }
.float-btn:active { transform: scale(0.92); opacity: 1; background: rgba(30, 42, 52, 0.95); }
.float-back-btn { left: 14px; bottom: calc(20px + env(safe-area-inset-bottom)); }
.app-share-btn { right: 14px; bottom: calc(20px + env(safe-area-inset-bottom)); }
.app-share-toast {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(80px + env(safe-area-inset-bottom));
  z-index: 91;
  background: rgba(25,31,40,0.92); color: #fff;
  font-size: 13px; font-weight: 600;
  padding: 10px 16px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(25,31,40,0.10);
  max-width: 86vw; text-align: center;
}
/* 맛집: 카카오/네이버 전체보기 포털 */
.food-portal {
  background: var(--surface); box-shadow: var(--shadow-1);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 12px;
}
.food-portal-title { font-size: 15px; font-weight: 800; }
.food-portal-sub { font-size: 12px; color: var(--text-dim); margin: 4px 0 12px; line-height: 1.4; }
.food-portal-btns { display: flex; gap: 8px; }
.fp-btn {
  flex: 1; text-align: center; padding: 12px 0; border-radius: 10px;
  font-size: 14px; font-weight: 800; text-decoration: none;
}
.fp-btn.kakao { background: #fee500; color: #191600; }
.fp-btn.naver { background: #03c75a; color: #fff; }
.food-osm-sub { font-size: 12px; color: var(--text-faint); margin: 4px 2px 8px; }
.food-osm-empty { font-size: 13px; color: var(--text-dim); padding: 6px 2px; line-height: 1.5; }
.hole-green-label { font-size: 12px; color: var(--text-faint); margin: 10px 0 4px; }
#hole-green-img { width: 42%; max-width: 190px; height: auto; border-radius: 12px; background: #fff; padding: 6px; box-sizing: border-box; }
#hole-canvas { max-height: 46vh; max-width: 100%; width: auto; height: auto; border-radius: 14px; display: inline-block; }
.hole-canvas-loading { color: var(--text-faint); font-size: 13px; padding: 18px 0; }
.hole-num-dot {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 800;
  border: 2px solid var(--line);
  box-shadow: 0 2px 6px rgba(25,31,40,0.12);
}
.precip-chip {
  width: max-content;
  background: #fff; color: #222;
  border-radius: 999px; padding: 5px 12px;
  font-size: 11px; font-weight: 600;
  white-space: nowrap; text-align: center;
  box-shadow: 0 3px 10px rgba(25,31,40,0.11);
  transform: translate(-50%, calc(-100% - 16px));
  position: relative;
}
.precip-chip b { font-size: 15px; }
.precip-chip::after {
  content: ""; position: absolute; left: 50%; bottom: -5px;
  width: 8px; height: 8px; background: #fff;
  transform: translateX(-50%) rotate(45deg);
}
/* 지도 도시 라벨 (현지 언어) */
.city-label { pointer-events: none; }
.city-label span {
  display: inline-block;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 11px; font-weight: 600;
  color: var(--text-dim);
  text-shadow: 0 0 3px rgba(25,31,40,0.12), 0 0 6px rgba(25,31,40,0.12);
  letter-spacing: 0.2px;
}

.radar-legend {
  position: absolute; top: 8px; left: 8px; z-index: 500;
  display: flex; align-items: center; gap: 4px;
  background: var(--surface-press); border-radius: 8px;
  padding: 4px 8px; font-size: 10px; color: var(--text);
}
.radar-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 4px; }
.radar-legend i:first-child { margin-left: 0; }

/* 타임라인 */
.radar-controls { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.radar-play {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: none; background: var(--surface-press);
  color: var(--text); font-size: 15px; cursor: pointer;
}
.radar-play.playing { background: var(--primary); color: #10312a; }
.radar-track { flex: 1; min-width: 0; }
#radar-slider {
  width: 100%; appearance: none; -webkit-appearance: none;
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill, 0%), var(--surface-press) var(--fill, 0%));
  outline: none;
}
#radar-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent);
  box-shadow: 0 1px 4px rgba(25,31,40,0.10); cursor: pointer;
}
#radar-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent); cursor: pointer;
}
.radar-times {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--text-faint); margin-top: 4px;
}
.radar-now-label { color: var(--primary-ink); font-weight: 700; }
.radar-frame-time { flex: none; text-align: right; min-width: 74px; }
#radar-time { display: block; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.badge {
  display: inline-block; font-size: 9px; font-weight: 700;
  border-radius: 6px; padding: 1px 6px; margin-top: 2px;
}
.badge.past { background: var(--surface-press); color: var(--text-dim); }
.badge.future { background: rgba(16,196,60,0.2); color: var(--primary-ink); }

/* ===== 시간별 강수 예보 (모레까지) ===== */
.precip-scroll {
  display: flex; overflow-x: auto;
  padding: 6px 2px 2px;
  scrollbar-width: none;
}
.precip-scroll::-webkit-scrollbar { display: none; }
.p-hour {
  flex: none; width: 52px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 0;
}
.p-hour.day-start { border-left: 1px solid var(--line); }
.p-hour.active {
  background: rgba(16,196,60,0.14);
  border-radius: 12px;
}
.p-hour.active .p-time { color: var(--primary-ink); font-weight: 700; }
.p-hour { cursor: pointer; }
.p-day {
  font-size: 10px; font-weight: 700; color: var(--primary-ink);
  min-height: 14px; line-height: 14px;
  white-space: nowrap; overflow: visible;
}
.p-day i { font-style: normal; font-weight: 500; color: var(--text-faint); }
.p-time { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.p-hour.now .p-time { color: var(--text); font-weight: 700; }
.p-bar {
  width: 100%; height: 44px;
  display: flex; align-items: flex-end; justify-content: center;
}
.p-bar i {
  display: block; width: 14px; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--primary), #74b0fb);
  min-height: 2px;
}
.p-bar i.zero { background: var(--surface-press); }
.p-mm { font-size: 12px; font-weight: 700; white-space: nowrap; }
.p-mm small { font-size: 9px; font-weight: 500; color: var(--text-dim); }
.p-mm.has-rain { color: var(--primary-ink); }
.p-mm.dry { color: var(--text-faint); font-weight: 500; }
.p-pop { font-size: 11px; color: var(--text-dim); min-height: 14px; }
.p-pop.high { color: var(--primary-ink); font-weight: 600; }

/* ===== 지표 그리드 ===== */
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.metric { margin-bottom: 0; min-height: 120px; }
.metric-main { font-size: 26px; font-weight: 600; letter-spacing: -0.5px; }
.metric-main small { font-size: 14px; font-weight: 500; color: var(--text-dim); }
.metric-eval { font-size: 12px; font-weight: 700; margin-top: 6px; line-height: 1.45; }
.metric-sub { font-size: 11px; color: var(--text-faint); margin-top: 6px; line-height: 1.5; }
.wind-main { display: flex; align-items: center; gap: 8px; }
.wind-arrow { display: inline-block; font-size: 22px; color: var(--primary-ink); }
.grade-good { color: var(--green); } .grade-normal { color: var(--primary-ink); }
.grade-bad { color: #e08600; } .grade-worst { color: var(--danger); }

/* ===== 홈 화면 추가 버튼 ===== */
.install-cta { position: relative; margin-top: 16px; }
.install-btn {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 14px 40px 14px 16px;
  background: linear-gradient(135deg, rgba(16,196,60,0.22), rgba(16,196,60,0.10));
  border: 1px solid rgba(16,196,60,0.45);
  border-radius: var(--radius);
  color: var(--text); font-family: inherit; text-align: left;
  cursor: pointer; transition: transform 0.08s ease;
}
.install-btn:active { transform: scale(0.985); }
.ic-ico { font-size: 26px; flex: none; }
.ic-txt { flex: 1; min-width: 0; }
.ic-txt b { display: block; font-size: 15px; font-weight: 700; }
.ic-txt small { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.ic-go { font-size: 24px; color: var(--primary-ink); flex: none; line-height: 1; }
.ic-x {
  position: absolute; top: 8px; right: 8px;
  background: var(--surface-2); border: none; color: var(--text-dim);
  width: 24px; height: 24px; border-radius: 50%; font-size: 12px; cursor: pointer;
}

/* 안내 시트 (아이폰·인앱 브라우저) */
.sheet-back {
  position: fixed; inset: 0; z-index: 3000;
  background: var(--surface-press);
  display: flex; align-items: flex-end; justify-content: center;
  animation: sheetFade 0.18s ease;
}
@keyframes sheetFade { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  width: 100%; max-width: 480px;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 10px 20px calc(22px + env(safe-area-inset-bottom));
  max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateY(0);          /* 애니메이션이 안 돌아도 제자리에 있도록 */
  animation: sheetUp 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet-back, .update-toast { animation: none; }
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-bar {
  width: 38px; height: 4px; border-radius: 2px;
  background: var(--surface-press); margin: 0 auto 16px;
}
.sheet-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.sheet-desc { font-size: 13px; color: var(--text-dim); line-height: 1.55; margin-bottom: 16px; }
.guide-steps { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.guide-steps li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; line-height: 1.5;
}
.guide-steps .gs-num {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--primary); color: var(--text-on);
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.guide-steps .gs-ico {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 5px; margin: 0 3px;
  background: var(--surface-press); border-radius: 7px;
  vertical-align: -7px; font-size: 15px;
}
.guide-copy, .guide-close {
  width: 100%; padding: 13px; border-radius: 12px;
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.guide-copy {
  background: var(--primary); color: var(--text-on); border: none; margin-bottom: 8px;
}
.guide-close {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line);
}

/* ===== 허브 ===== */
.hub-head { text-align: center; padding: 6px 0 22px; }
.hub-name { font-size: 26px; font-weight: 700; }
.hub-addr { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.hub-now { font-size: 15px; margin-top: 10px; color: var(--text-dim); }
.hub-now b { font-size: 22px; color: var(--text); font-weight: 600; }
.hub-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hub-item {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 14px 16px;
  color: var(--text); text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  font-family: inherit; transition: transform 0.08s;
}
.hub-item:active { transform: scale(0.97); }
.hub-ic { font-size: 30px; margin-bottom: 6px; }
.hub-item b { font-size: 17px; font-weight: 700; }
.hub-item span:last-child { font-size: 11px; color: var(--text-dim); line-height: 1.4; }
.hub-tip { text-align: center; font-size: 11px; color: var(--text-faint); margin-top: 22px; }

/* ===== 코스공략 ===== */
#course-map { height: 300px; background: #e9edf2; }
.hole-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.hole-btn {
  padding: 10px 0; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text); font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.hole-btn small { display: block; font-size: 9px; font-weight: 500; color: var(--text-dim); }
.hole-btn.active { background: rgba(16,196,60,0.2); border-color: var(--primary-ink); color: var(--primary-ink); }
.hole-strategy { font-size: 14px; line-height: 1.65; }

/* 홀별 실전 통계 (일본 · じゃらん 공개 자료) — 스코어대별 5벌 */
.jps-band { display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
  margin: 12px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.jps-band-t { font-size: 12px; color: var(--text-dim); margin-right: 2px; }
.jps-band-b { font-size: 11.5px; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--text-dim); cursor: pointer; }
.jps-band-b.on { background: rgba(16,196,60,0.16); border-color: var(--primary-ink);
  color: var(--primary-ink); font-weight: 700; }
.jps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 14px; }
.jps-row { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.jps-row span { color: var(--text-dim); font-size: 12px; }
.jps-row b { font-weight: 700; }
.jps-src { font-size: 11px; color: var(--text-faint, var(--text-dim)); margin-top: 8px; }
@media (max-width: 380px) { .jps { grid-template-columns: 1fr; } }

/* 내 플레이 정보 */
.pf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-row-1 { grid-template-columns: 1fr; margin-top: 10px; }
.pf-row label { font-size: 12px; color: var(--text-dim); }
.pf-row label { font-size: 13px; }
.pf-row select, .pf-row input {
  display: block; width: 100%; margin-top: 4px; min-height: 46px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px;
  color: var(--text); font-size: 16px; font-family: inherit;  /* 16px: iOS에서 탭 시 확대 방지 */
  appearance: none; -webkit-appearance: none;
}
.pf-dist-wrap { position: relative; }
.pf-dist-wrap span {
  position: absolute; right: 12px; top: 50%; transform: translateY(-32%);
  color: var(--text-faint); font-size: 13px;
}

/* AI 캐디 공략 */
.ai-strategy-btn {
  display: block; width: 100%; margin-top: 12px; min-height: 50px;
  padding: 14px; border-radius: 12px;
  border: 1px solid rgba(16,196,60,0.45); background: rgba(16,196,60,0.12);
  color: var(--primary-ink); font-size: 15px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.ai-strategy { margin-top: 10px; }

/* 샷별 캐디 카드 — 티박스에서 한눈에 읽혀야 하므로 글자를 키운다.
   (나이 드신 분들이 읽고 스윙 준비하기 좋게 — 2026-07-29 지시) */
.cad-card {
  margin-top: 10px; padding: 12px 14px;
  background: rgba(16,196,60,0.08);
  border-left: 3px solid var(--accent); border-radius: 8px;
}
.cad-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.cad-ico { font-size: 16px; line-height: 1; }
.cad-label { font-size: 13px; font-weight: 800; color: var(--primary-ink); flex: 1; }
.cad-text { font-size: 16px; line-height: 1.65; margin: 0; }
/* 듣기 버튼 — 손가락으로 확실히 눌리는 크기(44px) */
.cad-play {
  flex: none; width: 44px; height: 44px; margin: -6px 0;
  border-radius: 12px; border: 1px solid rgba(16,196,60,0.45);
  background: rgba(16,196,60,0.14); color: var(--primary-ink);
  font-size: 17px; line-height: 1; cursor: pointer; font-family: inherit;
}
/* 그 샷 차례에 누르는 버튼 — 누르면 공략이 열리면서 캐디가 읽어준다 */
.cad-open {
  display: block; width: 100%; min-height: 48px; margin-top: 2px;
  border-radius: 12px; border: 1px solid rgba(16,196,60,0.45);
  background: rgba(16,196,60,0.14); color: var(--primary-ink);
  font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.cad-foot { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.cad-all {
  flex: 1; min-height: 46px; border-radius: 12px;
  border: 1px solid rgba(16,196,60,0.45); background: rgba(16,196,60,0.12);
  color: var(--primary-ink); font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.cad-mute {
  flex: none; min-height: 46px; padding: 0 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text-dim); font-size: 13px; cursor: pointer; font-family: inherit;
}
/* 공식 홀 자료가 없는 구장 — 캐디 대신 이 안내 (위성 홀 그림은 위에 그대로 보인다) */
.cad-prep {
  margin-top: 10px; padding: 13px 16px;
  background: var(--warn-weak); border: 1px solid rgba(251,191,36,0.4);
  border-radius: 12px; font-size: 14px; font-weight: 700; color: #e08600; line-height: 1.5;
}
.cad-prep span { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--text-dim); }
.video-btn {
  display: block; margin-top: 12px; padding: 11px;
  text-align: center; border-radius: 12px;
  background: rgba(235,87,87,0.15); border: 1px solid rgba(235,87,87,0.4);
  color: var(--danger); font-size: 13px; font-weight: 700; text-decoration: none;
}
.course-note { text-align: center; font-size: 12px; color: var(--text-dim); line-height: 1.7; padding: 10px 16px 24px; }

/* ===== 주변맛집 ===== */
.food-desc { font-size: 13px; color: var(--text-dim); padding: 4px 4px 14px; }
.food-list { display: flex; flex-direction: column; gap: 10px; padding-bottom: 24px; }
.food-item {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 13px 15px; cursor: pointer;
}
.fi-row { display: flex; align-items: center; gap: 10px; }
.fi-emoji { font-size: 24px; flex: none; }
/* 추천 순위 배지 — 이모지 자리에 대신 들어간다(줄 높이가 안 바뀌게 같은 크기).
   1~3 위만 초록으로 눈에 띄게 하고 나머지는 옅게 — 상위 몇 곳이 먼저 읽히게 한다. */
.fi-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--surface-2); color: var(--text-dim);
}
/* 1~3위는 초록으로 — 위쪽 몇 곳이 먼저 읽히게 */
.fi-rank.top { background: var(--primary); color: #fff; }
.fi-name { font-size: 15px; font-weight: 700; flex: 1; min-width: 0; }
.fi-dist { font-size: 13px; color: var(--primary-ink); font-weight: 700; white-space: nowrap; }
.fi-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.fi-detail { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-dim); line-height: 1.7; }
.food-item.open .fi-detail { display: block; }
.fi-links { display: flex; gap: 8px; margin-top: 8px; }
.fi-links a {
  flex: 1; text-align: center; padding: 9px 0; border-radius: 10px;
  font-size: 12px; font-weight: 700; text-decoration: none;
}
.fi-links a.kakao { background: #fee500; color: #191919; }
.fi-links a.naver { background: #03c75a; color: #fff; }
.fi-links a.kakaonavi { background: rgba(254,229,0,0.18); color: #e08600; border: 1px solid rgba(254,229,0,0.5); }
.fi-links a.tmapnavi { background: rgba(16,196,60,0.2); color: var(--primary-ink); border: 1px solid rgba(16,196,60,0.55); }
.fi-verify { color: #e08600; font-weight: 600; }
/* 맛집 사진 (카카오 이미지) */
.fi-photos {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px;
  margin-bottom: 10px; scrollbar-width: none;
}
.fi-photos::-webkit-scrollbar { display: none; }
.fi-photos img {
  flex: none; width: 128px; height: 96px; object-fit: cover;
  border-radius: 10px; background: var(--surface-2);
}
.fi-photo-loading { font-size: 12px; color: var(--text-faint); padding: 26px 4px; }
.fi-photos img { cursor: pointer; }
.places-more { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.places-more button {
  min-height: 48px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--primary-ink); font: inherit; font-weight: 600;
}
.fi-photos.is-placeholder {
  min-height: 96px; box-sizing: border-box; padding: 14px 10px;
  align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px 12px;
  background: var(--surface-2); border-radius: 10px; text-align: center;
}
.fi-photo-status { flex-basis: 100%; color: var(--text-dim); font-size: 12px; line-height: 1.5; }
.fi-photo-retry, .fi-photo-source {
  min-height: 44px; padding: 10px 12px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--primary-ink); font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer;
}
/* 사진이 한 장뿐인 카드 — 라쿠텐이 객실 사진을 안 주는 숙소가 3곳 중 1곳이다(실측 2026-08-03).
   128px 짜리 하나만 덜렁 놓이면 옆 카드(두 장)와 견줘 빈 곳처럼 보인다.
   한 장일 때는 넓게 펴서 그 한 장이라도 제대로 보이게 한다. */
.fi-photos img:only-child { width: 100%; max-width: 264px; height: 132px; }

/* 사진 크게 보기 (라이트박스) */
.img-lightbox {
  position: fixed; inset: 0; z-index: 200;
  /* 앱 화면이 은은하게 비치는 정도만 — 사진 감상에 방해되지 않게 */
  background: rgba(17, 24, 32, 0.62);
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.img-lightbox img { box-shadow: 0 18px 50px rgba(25,31,40,0.12); border-radius: 12px; }
.lb-stage {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 56px 12px;
}
#lb-img {
  /* 어르신도 잘 보이게: 화면 가로에 꽉 차게, 비율은 자동 맞춤 */
  width: 100vw; max-width: 560px;
  height: auto; max-height: 74vh;
  object-fit: contain; border-radius: 0;
  background: var(--surface-2);
}
.lb-close {
  position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px;
  z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text-dim);
  font-size: 17px; cursor: pointer; opacity: 0.65;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lb-close:active { opacity: 1; }
.lb-nav {
  position: absolute; top: auto; bottom: calc(16px + env(safe-area-inset-bottom));
  transform: none;
  z-index: 2; width: 74px; height: 54px; border-radius: 14px;
  border: none; background: var(--surface-press);
  color: var(--text-dim); font-size: 32px; line-height: 1;
  cursor: pointer; opacity: 0.6;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lb-nav:active { opacity: 1; }
.lb-prev { left: max(20px, calc(50% - 150px)); }
.lb-next { right: max(20px, calc(50% - 150px)); }
.lb-count {
  position: absolute; bottom: calc(32px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  color: var(--text-dim); font-size: 13px; font-weight: 600;
  background: var(--surface-2); padding: 5px 12px; border-radius: 999px;
}
.fi-addr { margin-bottom: 6px; }
.fi-addr-dist { color: var(--primary-ink); font-weight: 700; white-space: nowrap; }
.fi-phone {
  display: inline-block; margin: 2px 0 8px; padding: 7px 12px;
  background: rgba(16,196,60,0.16); border: 1px solid rgba(16,196,60,0.5);
  border-radius: 999px; color: var(--primary-ink);
  font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.fi-phone span { font-size: 10px; font-weight: 600; color: var(--text-dim); }

/* ===== MY스코어 통계 ===== */
.year-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.year-tabs::-webkit-scrollbar { display: none; }
.year-tab {
  flex: none; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text-dim); font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.year-tab.active { background: rgba(16,196,60,0.18); border-color: var(--primary-ink); color: var(--primary-ink); }
.stat-row { display: flex; gap: 8px; }
.stat-box {
  flex: 1; text-align: center; padding: 10px 4px;
  background: var(--surface-2); border-radius: 12px;
}
.stat-label { display: block; font-size: 11px; color: var(--text-dim); }
.stat-value { display: block; font-size: 24px; font-weight: 600; margin-top: 2px; }
.stat-sub { display: block; font-size: 10px; color: var(--text-faint); margin-top: 2px; }
#goal-box { cursor: pointer; }

/* 스코어 사진 AI 입력 */
.sf-photo-row { margin-bottom: 12px; }
.sf-photo-btn {
  display: block; text-align: center; padding: 12px;
  border: 1px dashed rgba(16,196,60,0.5); border-radius: 12px;
  background: rgba(16,196,60,0.08); color: var(--primary-ink);
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.sf-photo-preview {
  width: 100%; max-height: 340px; object-fit: contain;
  background: var(--surface-2); border-radius: 12px; margin-top: 10px;
}
.sf-photo-tip { font-size: 11px; color: var(--text-faint); margin-top: 6px; text-align: center; }
#ocr-raw {
  display: none; margin: 8px 0; padding: 10px;
  background: var(--surface-2); border-radius: 10px;
  font-size: 10px; color: var(--text-dim);
  max-height: 160px; overflow-y: auto; white-space: pre-wrap; word-break: break-all;
}
#ocr-raw.show { display: block; }
.ocr-raw-btn {
  background: none; border: 1px solid var(--line); border-radius: 8px;
  color: var(--text-faint); font-size: 11px; padding: 2px 8px;
  cursor: pointer; font-family: inherit; margin-left: 6px;
}
#sf-photo { display: none !important; } /* 네이티브 파일 UI 숨김 */
.ocr-status { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; }
.ocr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ocr-chips .chip-label { font-size: 12px; color: var(--text-dim); width: 100%; }
.ocr-chip {
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--primary); background: rgba(16,196,60,0.12);
  color: var(--primary-ink); font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.ocr-chip.active { border-color: var(--primary-ink); background: rgba(16,196,60,0.2); color: var(--primary-ink); }
.sf-time-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.sf-time-row input[type="time"] { flex: 1; margin-top: 0; }
.sf-check {
  display: flex !important; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-dim); white-space: nowrap; margin: 0 !important;
}
.sf-check input { width: auto !important; margin: 0 !important; }
.si-photo { width: 100%; border-radius: 10px; margin-top: 10px; }

/* ===== MY스코어 ===== */
.score-form label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 10px; }
.score-form input, .score-form select {
  display: block; width: 100%; margin-top: 4px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px;
  color: var(--text); font-size: 15px; font-family: inherit;
}
.score-form select { appearance: none; -webkit-appearance: none; }
.score-form [hidden] { display: none !important; }
.sf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sf-friends-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.sf-friends-grid input { margin-top: 0; }

/* 홀별 입력 */
.holes-toggle {
  display: block; width: 100%; margin-bottom: 10px;
  padding: 11px; border-radius: 10px;
  border: 1px dashed var(--line); background: var(--surface-2);
  color: var(--text-dim); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.holes-grid { margin-bottom: 12px; }
.hg-label { font-size: 11px; color: var(--text-faint); margin: 8px 0 4px; }
.hg-row { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.hg-row input {
  margin-top: 0 !important; padding: 8px 2px !important;
  text-align: center; font-size: 14px !important;
  border-radius: 8px !important;
}
.hg-row input::placeholder { font-size: 10px; color: var(--text-faint); }
.hg-sum { font-size: 13px; font-weight: 700; color: var(--primary-ink); margin-top: 8px; text-align: center; }

/* 스코어판 (앱 다크·그린 테마) */
.sb-card {
  margin-top: 12px; border-radius: 16px;
  background: linear-gradient(150deg, rgba(16,196,60,0.14) 0%, var(--surface-2) 60%);
  border: 1px solid rgba(16,196,60,0.28);
  padding: 14px 12px 12px; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sb-top { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; }
.sb-name { font-size: 19px; font-weight: 800; }
.sb-total { font-size: 36px; font-weight: 800; line-height: 1; color: var(--primary-ink); }
.sb-courses { font-size: 12px; color: var(--text-dim); padding: 2px 4px 8px; }
.sb-table {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; margin-top: 8px;
}
.sb-row {
  display: grid; grid-template-columns: 1.5fr repeat(9, 1fr) 1.3fr;
  align-items: center; text-align: center; font-size: 12px;
}
.sb-head {
  background: rgba(16,196,60,0.16); color: var(--primary-ink);
  font-weight: 700; font-size: 10px; letter-spacing: 0.4px; padding: 5px 0;
}
.sb-par {
  color: var(--text-faint); font-weight: 600; padding: 5px 0;
  border-bottom: 1px solid var(--line); font-size: 11px;
}
.sb-score { color: var(--text); font-weight: 700; padding: 7px 0; }
.sb-score > span:first-child { color: var(--text-faint); font-size: 9px; }
.sb-t { color: var(--primary-ink); font-weight: 800; }
.sf-actions { display: flex; gap: 10px; margin-top: 14px; }
.sf-cancel, .sf-save {
  flex: 1; padding: 12px; border-radius: 12px; border: none;
  font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.sf-cancel { background: var(--surface-press); color: var(--text-dim); }
.sf-save { background: var(--primary); color: #0d3327; }
.score-list { display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; }
.score-item {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; position: relative;
}
.si-top { display: flex; justify-content: space-between; align-items: baseline; }
.si-course { font-size: 16px; font-weight: 700; }
.si-score { font-size: 30px; font-weight: 300; }
.si-score small { font-size: 12px; color: var(--text-dim); }
.si-date { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.si-friends { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.si-wx {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px;
}
.si-wx span {
  font-size: 11px; background: var(--surface-2); border-radius: 8px;
  padding: 3px 8px; color: var(--text-dim);
}
.si-actions {
  display: flex; gap: 8px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--line);
}
.si-actions button {
  flex: 1; padding: 8px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text-dim); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.si-actions .si-del2:active { border-color: var(--danger); color: var(--danger); }
.si-photo { display: none; }
.score-item.show-photo .si-photo { display: block; }
.si-memo { font-size: 12px; color: var(--text-dim); margin-top: 6px; font-style: italic; }

.credits {
  text-align: center; font-size: 11px; color: var(--text-faint);
  line-height: 1.7; padding: 14px 0 24px;
}

/* 로딩 */
.loading-line { color: var(--text-dim); font-size: 13px; text-align: center; padding: 20px 0; }


/* ===== 최초 진입 동의 화면 ===== */
.consent-back {
  position: fixed; inset: 0; z-index: 4000;
  background: var(--bg-2);
  display: flex; flex-direction: column;      /* 내용은 스크롤, 버튼은 하단 고정 */
}
.consent-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.consent-box {
  max-width: 480px; margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top)) 20px 16px;
}
/* 하단 고정 버튼 영역 — 아이폰 툴바·홈바에 가리지 않도록 여유를 둔다 */
.consent-actions {
  flex: none;
  max-width: 480px; width: 100%; margin: 0 auto;
  /* 인앱 브라우저(카카오 등) 하단 툴바가 웹 화면 위를 덮으므로 여유를 크게 둔다 */
  padding: 12px 20px calc(28px + env(safe-area-inset-bottom));
  background: #1e2731;          /* backdrop-filter 는 일부 인앱 브라우저에서 터치를 막아 사용하지 않음 */
  border-top: 1px solid var(--line);
}
.consent-actions-sub {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 4px; color: var(--text-faint); font-size: 12px;
}
.consent-head { text-align: center; padding: 12px 0 22px; }
.consent-logo { font-size: 46px; }
.consent-head h2 { font-size: 25px; font-weight: 800; margin-top: 8px; }
.consent-ver {
  font-size: 11px; font-weight: 700; color: var(--primary-ink);
  border: 1px solid var(--brand); border-radius: 999px;
  padding: 2px 8px; vertical-align: 6px;
}
.consent-head p { font-size: 13px; color: var(--text-dim); margin-top: 8px; line-height: 1.5; }

.consent-all {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px; margin-bottom: 10px;
  background: var(--card-strong); border: 1px solid var(--line);
  border-radius: 14px; cursor: pointer;
}
.consent-all span { display: flex; flex-direction: column; gap: 2px; }
.consent-all b { font-size: 16px; font-weight: 700; }
.consent-all small { font-size: 12px; color: var(--text-dim); }

.consent-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.consent-list li {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 6px;
}
.consent-list label {
  flex: 1; display: flex; align-items: center; gap: 12px;
  cursor: pointer; font-size: 14px; line-height: 1.4;
  min-height: 44px;                 /* 글자를 눌러도 체크되도록 넉넉히 */
}
.consent-list label span { flex: 1; }
.consent-list b.req, .consent-list b.opt {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 2px 6px; border-radius: 5px; margin-right: 6px;
  vertical-align: 1px;
}
.consent-list b.req { color: var(--text-on); background: var(--primary); }
.consent-list b.opt { color: var(--text-dim); background: var(--surface-press); }
.c-view {
  flex: none; background: none; border: none;
  color: var(--text-dim); font-size: 13px; font-family: inherit;
  text-decoration: underline; cursor: pointer;
  padding: 12px 10px; min-height: 44px;      /* 손가락으로 누를 수 있는 크기 */
}
.consent-list li.c-sub {
  display: block; margin: -6px 6px 6px 40px; padding: 10px 12px;
  background: rgba(16,196,60,0.10); border-radius: 10px;
  font-size: 12px; color: var(--text-dim); line-height: 1.55;
}
.consent-list li.c-sub b { color: var(--text); font-weight: 600; }

/* 체크박스 */
.consent-back input[type="checkbox"] {
  flex: none; width: 22px; height: 22px;
  accent-color: var(--primary-ink); cursor: pointer;
}

/* 연령대·성별 선택 */
.profile-input { display: block !important; padding: 6px 6px 12px 40px !important; }
.pi-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pi-label { font-size: 13px; color: var(--text-dim); min-width: 44px; }
.pi-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pi-chip {
  padding: 7px 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text-dim); font-size: 13px; font-family: inherit; cursor: pointer;
}
.pi-chip.on { background: var(--primary); border-color: var(--primary-ink); color: var(--text-on); font-weight: 700; }

.consent-note {
  margin: 14px 6px 18px; padding: 12px 14px;
  background: var(--surface-2); border-radius: 12px;
  font-size: 12px; color: var(--text-dim); line-height: 1.6;
}
.consent-note b { color: var(--text); }
.consent-start {
  width: 100%; padding: 16px; border-radius: 14px; border: none;
  background: var(--primary); color: var(--text-on);
  font-family: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
}
.consent-start:disabled,
.consent-start.is-off { background: var(--surface-press); color: var(--text-dim); }
/* 필수 항목을 빠뜨리고 시작하기를 눌렀을 때 해당 줄을 짚어준다 */
@keyframes cNeed {
  0%, 100% { background: transparent; }
  20%, 60% { background: rgba(255,107,107,0.22); }
}
.consent-list li.c-need {
  animation: cNeed 1.2s ease;
  border-radius: 10px;
}
/* 인앱 브라우저에서 터치가 먹지 않는 경우를 막기 위한 보강 */
.consent-back button, .sheet button, .consent-back label, .consent-back input {
  pointer-events: auto; touch-action: manipulation;
}
.consent-later {
  background: none; border: none; color: var(--text-faint);
  font-family: inherit; font-size: 12px; cursor: pointer;
  text-decoration: underline; padding: 12px 10px; min-height: 44px;
}
.consent-links { text-align: center; margin-top: 14px; }
.consent-links .c-view { font-size: 12px; }

/* 약관 전문 — 동의 화면(z-index 4000) 위에 떠야 읽을 수 있다 */
#doc-sheet { z-index: 4500; }
.doc-sheet { max-height: 82vh; display: flex; flex-direction: column; }
.doc-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  font-size: 13px; line-height: 1.75; color: var(--text-dim);
  padding: 4px 2px 16px;
}
.doc-body h4 {
  color: var(--text); font-size: 14px; font-weight: 700;
  margin: 18px 0 6px;
}
.doc-body h4:first-child { margin-top: 4px; }
.doc-body p { margin-bottom: 8px; }
.doc-body ul { margin: 0 0 10px 18px; }
.doc-body li { margin-bottom: 4px; }
.doc-body table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 12px; }
.doc-body th, .doc-body td {
  border: 1px solid var(--line); padding: 7px 8px; text-align: left; vertical-align: top;
}
.doc-body th { background: var(--surface-2); color: var(--text); font-weight: 600; }
.doc-body .doc-em { color: var(--primary-ink); font-weight: 600; }

/* 업데이트 알림 (상단에서 잠깐 내려왔다 사라짐) */
.update-toast {
  position: fixed; z-index: 5000;
  top: calc(24px + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px); max-width: 420px;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: 14px;
  background: rgba(20, 52, 42, 0.96);
  border: 1px solid var(--brand);
  box-shadow: 0 10px 28px rgba(25,31,40,0.11);
  animation: utDrop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.update-toast.hide { animation: utUp 0.28s ease forwards; }
@keyframes utDrop { from { opacity: 0; transform: translate(-50%, -18px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes utUp { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -18px); } }
.ut-ico { font-size: 22px; flex: none; }
.ut-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ut-body b { font-size: 14px; font-weight: 700; color: var(--primary-ink); }
.ut-body small {
  font-size: 12px; color: var(--text-dim); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 기록 지키기 (백업·복구) */
.bk-state {
  margin: 4px 0 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--surface-2); font-size: 13px; color: var(--text-dim);
  line-height: 1.5;
}
.bk-code-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; }
.bk-code {
  flex: 1; text-align: center;
  font-size: 22px; font-weight: 800; letter-spacing: 1.5px;
  padding: 12px; border-radius: 12px;
  background: rgba(16,196,60,0.12); border: 1px dashed var(--brand);
  color: var(--primary-ink); user-select: all; -webkit-user-select: all;
}
.bk-hint { font-size: 12px; color: var(--text-dim); line-height: 1.55; margin: 6px 0 4px; }
.bk-restore {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.bk-restore-title { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
/* 앱 지우기 전 확인 — 백업 시트 아래쪽 입구 */
.bye-open { display: block; width: 100%; margin: 14px 0 8px; }
#bye-sheet #bye-drop { margin-top: 6px; }
.bk-restore input {
  width: 100%; padding: 13px 12px; margin-bottom: 8px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); font-size: 18px; font-family: inherit;
  letter-spacing: 1px; text-align: center;
}
#backup-sheet .consent-start { margin-top: 4px; }
#backup-sheet .guide-close { margin-top: 10px; }

/* 홈 하단 약관 링크 */
/* 항목이 6개라 한 줄에 안 들어간다 — 줄바꿈을 허용한다.
   nowrap 이던 시절엔 폭 403px 짜리 줄이 358px 칸에 눌려 좌우 글자가 잘렸고,
   그 바람에 **본문 전체가 가로로 밀렸다**(body scrollWidth > 화면폭).
   2026-07-31 발견 — 화면 어디에도 가로 스크롤은 있으면 안 된다. */
.home-foot {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 2px 6px; row-gap: 2px;
  margin: 28px 0 10px; font-size: 11px; color: var(--text-faint);
}
.home-foot .c-view { font-size: 12px; padding: 10px 8px; }   /* 손가락으로 누를 수 있는 크기 확보 */
/* 버전 표시 + 업데이트 (2026-08-16) — 폰이 옛 버전에 갇혔을 때의 탈출구 */
.home-ver {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin: 4px 0 18px;
}
.home-ver #app-update {
  font-size: 12px; padding: 8px 14px; border-radius: 999px;
  background: var(--surface, #f2f4f6); color: var(--text-dim, #667);
  border: 1px solid var(--line, #dde1e6);
}
.home-ver .ver-label { font-size: 11px; color: var(--text-faint, #99a); }
/* 언어 전환 — 지금 어느 언어인지 한눈에 보여야 한다(누른 쪽이 진해진다) */
.home-foot .lang-btn { padding: 8px 10px; border-radius: 999px; }
.home-foot .lang-btn.on {
  background: rgba(16,196,60,0.16); color: var(--primary-ink); font-weight: 700;
}
.dist-denied { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin-bottom: 8px; }
.dist-denied small { display: block; font-size: 12px; color: var(--text-faint); margin-top: 4px; }
.dist-denied b { color: var(--text-dim); }

/* ===== 인앱 브라우저(카카오·네이버 등) 안전 보강 ===== */

/* 오버레이 높이 — 인앱 툴바를 감안한 실제 보이는 영역 */
.consent-back, .sheet-back { height: 100dvh; }

/* 숨김 상태를 셀렉터에도 명시 — 전역 [hidden] 규칙이 어긋나도 오버레이가 새지 않음 */
.consent-back[hidden], .sheet-back[hidden] { display: none; }

/* 하단 툴바 방어 — 인앱 웹뷰는 safe-area 값을 0으로 주는 경우가 잦다 */
.consent-actions { padding-bottom: max(34px, calc(env(safe-area-inset-bottom) + 28px)); }

/* 눌렀다는 느낌 주기 — 전역에서 탭 하이라이트를 껐기 때문에 직접 준다.
   피드백이 없으면 연타 → 더블탭 확대로 오인식되어 실제로 안 눌리는 악순환이 생긴다. */
.consent-start:active, .consent-later:active, .c-view:active,
.guide-copy:active, .guide-close:active, .install-btn:active {
  opacity: 0.72; transform: scale(0.98);
}
.consent-list label:active { background: var(--surface-2); border-radius: 10px; }

/* 필수 항목을 빠뜨렸을 때 버튼 바로 위에 알려준다 (스크롤 위쪽 안내는 안 보일 수 있음) */
.consent-warn {
  margin-bottom: 10px; padding: 10px 12px; border-radius: 10px;
  background: rgba(255,107,107,0.18); border: 1px solid rgba(255,107,107,0.5);
  color: var(--danger); font-size: 13px; line-height: 1.5; text-align: center;
}

/* 홈 화면 앱 첫 실행 시 — 약관이 다시 나오는 이유 설명 (신뢰 보호) */
.consent-standalone-note {
  margin: 10px 2px 0; padding: 11px 13px;
  background: rgba(16,196,60,0.14); border: 1px solid rgba(16,196,60,0.35);
  border-radius: 10px; font-size: 12.5px; line-height: 1.6; color: var(--text-dim);
}
.consent-standalone-note b { color: var(--text); }

/* 코스 공략 카드 안의 연령대·성별 입력 줄 */
.pfc-row { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }

/* 맛집 — 카카오맵 실제 사진 보기 버튼 (자동 수집 사진 대체) */
.fi-place-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 14px; border-radius: 12px; text-decoration: none;
  background: rgba(250, 219, 20, 0.12); border: 1px solid rgba(250, 219, 20, 0.35);
  color: #b26a00; font-size: 14px; font-weight: 700;
}
.fi-place-btn small { font-size: 11px; font-weight: 400; color: var(--text-dim); }

/* 맛집 정렬·종류 선택 칩 */
.food-filter { margin: 4px 0 10px; }
.ff-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ff-chip {
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text-dim); border-radius: 999px; padding: 7px 13px;
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.ff-chip.sm { padding: 5px 11px; font-size: 12px; }
.ff-chip.on { background: var(--primary); border-color: var(--primary-ink); color: var(--text-on); }

/* 카드의 별점 */
.fi-star { color: #e08600; font-weight: 700; }
.fi-star em { font-style: normal; color: var(--text-faint); font-weight: 400; }

/* 네이버 검증 링크 */
.fi-naver {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 8px; padding: 10px 12px; border-radius: 12px; text-decoration: none;
  background: rgba(3,199,90,0.10); border: 1px solid rgba(3,199,90,0.35);
  color: var(--green); font-size: 13px; font-weight: 600;
}
.fi-naver b {
  background: #03c75a; color: #fff; border-radius: 5px;
  width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900;
}

/* 맛집 추천 준비 중 안내 */
.food-loading {
  text-align: center; padding: 44px 12px; color: var(--text-dim);
  font-size: 14px; line-height: 1.7;
}

/* 기상청 레이더·예측 애니메이션 (한국 구장) */
.kma-radar { margin-top: 4px; }
.kma-radar img {
  width: 100%; border-radius: 14px; background: #fff;
  min-height: 220px; object-fit: contain;
}
.kma-radar-cap {
  margin-top: 8px; font-size: 12px; color: var(--text-dim);
  text-align: center; line-height: 1.55;
}
.kma-radar-cap b { color: var(--primary-ink); }

/* 레이더 확대 뷰포트 + 내 골프장 점 */
.kma-viewport {
  position: relative; overflow: hidden;
  border-radius: 14px; background: #fff;
}
.kma-viewport img { display: block; transition: transform .25s ease, width .25s ease; }
.kma-dot {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  background: #ff3b30; border: 2.5px solid #fff; border-radius: 50%;
  box-shadow: 0 0 6px rgba(25,31,40,0.12); z-index: 3; pointer-events: none;
}
.kma-dot-ring {
  position: absolute; inset: -9px; border: 2px solid rgba(255,59,48,.75);
  border-radius: 50%; animation: kma-pulse 1.6s ease-out infinite;
}
@keyframes kma-pulse {
  0% { transform: scale(.55); opacity: 1; }
  100% { transform: scale(1.7); opacity: 0; }
}
.kma-zoom-btn {
  display: block; margin: 10px auto 0; padding: 8px 18px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text);
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.kma-dot-legend { color: #ff3b30; }

/* 맛집 카드 v2 — 전면 펼침·컴팩트 */
.food-item.v2 { padding: 14px 14px 12px; }
.food-item.v2 .fi-row { cursor: default; }
.food-item.v2 .fi-photos { margin: 10px 0 2px; }
.food-item.v2 .fi-meta {
  margin-top: 8px; font-size: 12px; color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 버튼이 넘치면 줄을 바꾼다. 한 줄에 밀어 넣으면 칸이 좁아져 글자가 잘린다 —
   일본어는 「Yahoo!カーナビ」처럼 라벨이 길어 375px 화면에서 4개도 빠듯하다.
   flex:1 만 있고 wrap 이 없으면 글자가 잘려도 아무도 모른 채 배포된다(2026-08-03). */
.fi-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.fi-actions .fa-btn { flex: 1 1 auto; min-width: 84px; }
.fa-btn {
  flex: 1; text-align: center; padding: 9px 4px; border-radius: 10px;
  font-size: 12.5px; font-weight: 700; text-decoration: none;
  white-space: nowrap; overflow: hidden;
}
.fa-tel   { background: rgba(16,196,60,0.14); border: 1px solid rgba(16,196,60,0.4); color: var(--green); }
.fa-kakao { background: rgba(250,219,20,0.12); border: 1px solid rgba(250,219,20,0.35); color: #b26a00; }
.fa-tmap  { background: rgba(16,196,60,0.13); border: 1px solid rgba(16,196,60,0.4); color: var(--primary-ink); }
.fa-naver { background: rgba(3,199,90,0.10); border: 1px solid rgba(3,199,90,0.35); color: var(--green); }
.fa-naver b {
  background: #03c75a; color: #fff; border-radius: 4px; padding: 0 4px;
  margin-right: 3px; font-size: 11px;
}
.fi-place-mini {
  display: inline-block; margin: 8px 0 0; font-size: 12.5px;
  color: #b26a00; text-decoration: none;
  border-bottom: 1px dashed rgba(250,219,20,0.5); padding-bottom: 1px;
}

/* 레이더 시각 띠 — 기상청 영상의 프레임별 시각(제목부)을 그대로 확대 표시 */
.kma-timebar {
  overflow: hidden; border-radius: 10px 10px 0 0; background: #fff;
  margin-bottom: 2px; position: relative;
}
.kma-timebar img { display: block; max-width: none; }

/* 맛집 추천순 준비 배너 */
.food-reco-banner {
  position: sticky; top: 0; z-index: 10;   /* 스크롤 중에도 '추천순으로 보기' 버튼이 보이게 */
  margin: 2px 0 10px; padding: 9px 12px; border-radius: 10px;
  background: rgba(255,215,106,0.10); border: 1px solid rgba(255,215,106,0.3);
  color: var(--text-dim); font-size: 12.5px; text-align: center;
}
.food-reco-banner b { color: #e08600; }


/* ══════════════════════════════════════════════════════════════════
   토스 벤치마킹 레이어 — 타이포 위계 · 눌림 반응 · 화면 전환
   (2026-07-27 전면 개편. 이전 다크 글래스 테마는 git v110 참조)

   토스에서 가져온 원칙 네 가지:
   1) 색을 줄이고 굵기와 크기로 위계를 만든다 (회색 남발 금지)
   2) 경계선 대신 여백과 흰 카드로 영역을 나눈다
   3) 숫자는 크게·굵게, 설명은 작게·연하게
   4) 모든 터치에 반응이 있다 (눌리면 살짝 들어간다)
   ══════════════════════════════════════════════════════════════════ */

/* ── 타이포 ─────────────────────────────────────────────────────── */
body {
  font-size: 15px;
  letter-spacing: -0.02em;   /* 토스 특유의 촘촘한 자간 */
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .cc-name, .hero-name, .card-title, .sheet-title { letter-spacing: -0.03em; }

/* 숫자는 자릿수가 바뀌어도 흔들리지 않게 */
.cc-temp, .hero-temp, .metric-main, .p-mm, #radar-time, .si-score {
  font-variant-numeric: tabular-nums;
}

.home-header { padding: 26px 4px 10px; }
.home-header h1 { font-size: 26px; font-weight: 800; }
.beta-badge {
  color: var(--text-faint); border-color: transparent;
  background: var(--surface-press); opacity: 1; font-weight: 600;
}
.home-sub { color: var(--text-faint); }

/* ── 홈 골프장 카드 ─────────────────────────────────────────────── */
.course-card { min-height: 96px; padding: 18px; }
.cc-name  { font-size: 17px; font-weight: 700; }
.cc-sub   { color: var(--text-faint); }
.cc-temp  { font-size: 34px; font-weight: 700; letter-spacing: -0.04em; }
.cc-bottom { color: var(--text-faint); font-weight: 500; }

/* ── 상세 히어로 — 온도를 주인공으로 ────────────────────────────── */
.hero-name { font-size: 22px; font-weight: 800; }
.hero-addr { color: var(--text-faint); }
.hero-temp { font-size: 76px; font-weight: 700; letter-spacing: -0.05em; }
.hero-desc { font-size: 16px; color: var(--text-dim); font-weight: 500; }

/* ── 카드 ───────────────────────────────────────────────────────── */
.card, .howto-card, .metric {
  background: var(--surface);
  border: none;
  box-shadow: var(--shadow-1);
}
.card-title { font-size: 15px; font-weight: 700; color: var(--text); }
.metric-main { font-weight: 700; letter-spacing: -0.03em; }
.metric-sub  { color: var(--text-faint); }

/* ── 버튼 — 토스는 크고 둥글고 꽉 찬 버튼 ───────────────────────── */
.consent-start, .retry-btn, .guide-close, .install-btn {
  border-radius: var(--radius-s);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.consent-start { min-height: 54px; font-size: 16px; }

/* ── 눌림 반응 — 토스의 살짝 들어가는 감각 ──────────────────────── */
button, .course-card, .hub-item, .chip, .food-item, .search-results li {
  transition: transform 0.12s var(--ease), background-color 0.12s var(--ease),
              box-shadow 0.12s var(--ease);
}
button:active, .hub-item:active, .chip:active {
  transform: scale(0.97);
}
.course-card:active { transform: scale(0.985); box-shadow: var(--shadow-2); }
/* 스크롤 컨테이너·지도 등 눌림 축소가 어색한 곳은 제외 */
.hour-item:active, .p-hour:active, .radar-play:active, .hdr-btn:active,
.mode-btn:active, .cc-remove:active, .cc-del:active { transform: none; }

/* ── 화면 전환 — 들어올 땐 아래에서 떠오르고, 뒤로가면 반대로 ───── */
@keyframes viewIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes viewBack {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.view.is-entering      { animation: viewIn 0.34s var(--ease) both; }
.view.is-entering-back { animation: viewBack 0.30s var(--ease) both; }

/* 리스트는 위에서부터 차례로 등장 (한꺼번에 튀어나오면 산만하다) */
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.stagger > * { animation: riseIn 0.36s var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: 0.02s; }
.stagger > *:nth-child(2) { animation-delay: 0.06s; }
.stagger > *:nth-child(3) { animation-delay: 0.10s; }
.stagger > *:nth-child(4) { animation-delay: 0.14s; }
.stagger > *:nth-child(5) { animation-delay: 0.18s; }
.stagger > *:nth-child(n+6) { animation-delay: 0.22s; }

/* ── 대기 화면 (js/loading.js) ──────────────────────────────────── */
.rw-wait {
  position: fixed; inset: 0; z-index: 5000;
  background: var(--bg-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 28px calc(60px + env(safe-area-inset-bottom));
  text-align: center;
  animation: waitFade 0.24s var(--ease) both;
}
@keyframes waitFade { from { opacity: 0; } to { opacity: 1; } }
.rw-wait.is-closing { animation: waitFade 0.22s var(--ease) reverse both; }

/* 진행 표시 — 원 안의 퍼센트.
   막대는 '어디까지 왔나'를 곁눈으로 봐야 하지만, 원 안의 숫자는 바로 읽힌다. */
.rw-ring { position: relative; width: 132px; height: 132px; margin-bottom: 30px; }
.rw-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rw-ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.rw-ring-bg { stroke: var(--surface-press); }
.rw-ring-fg {
  stroke: var(--brand);
  transition: stroke-dashoffset 0.6s var(--ease);
}
.rw-ring-pct {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 800; letter-spacing: -0.04em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.rw-ring-pct i { font-style: normal; font-size: 16px; color: var(--text-faint); margin-left: 1px; }

/* 문구 — 한 줄씩 바뀌며 읽는 동안 기다림이 지워진다 */
.rw-wait-msg {
  font-size: 20px; font-weight: 700; line-height: 1.45;
  letter-spacing: -0.03em; color: var(--text);
  min-height: 3.2em; display: flex; align-items: center; justify-content: center;
}
.rw-wait-msg span { display: block; animation: msgIn 0.44s var(--ease) both; }
@keyframes msgIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.rw-wait-sub {
  margin-top: 12px; font-size: 14px; color: var(--text-faint);
  font-weight: 500; line-height: 1.6;
}

/* 스켈레톤 — 내용이 들어올 자리를 미리 보여준다 */
.skel {
  background: linear-gradient(90deg, var(--surface-press) 25%, #f4f6f8 37%, var(--surface-press) 63%);
  background-size: 400% 100%;
  animation: skelShimmer 1.3s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes skelShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (prefers-reduced-motion: reduce) {
  .view.is-entering, .view.is-entering-back, .stagger > *,
  .rw-wait, .rw-wait-msg span { animation: none !important; }
  .rw-ring-fg { transition: none; }
  .skel { animation: none; }
  button:active, .hub-item:active, .course-card:active { transform: none; }
}


/* ══════════════════════════════════════════════════════════════════
   클럽 피팅 — 앱 전체와 같은 토스 무드로 통일
   (이전 작업지시서 종이 테마는 _cf_paper_backup.css 에 보관)
   ══════════════════════════════════════════════════════════════════ */
.cf-paper { background: transparent; padding: 0 0 24px; }

/* 상단 진행 — 문서 번호 대신 단계 이름을 크게 */
.cf-doc-tab {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 2px 14px;
}
.cf-doc-tab .no { font-size: 13px; font-weight: 700; color: var(--text); }
.cf-doc-tab .badge {
  font-size: 11px; font-weight: 700; color: var(--text-faint);
  background: var(--surface-press); padding: 4px 10px; border-radius: 999px;
}
.cf-stitch-wrap { margin-bottom: 18px; }
.cf-stitch-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: var(--text-faint); font-weight: 600; margin-bottom: 8px;
}
.cf-stitch-label b { color: var(--primary-ink); font-weight: 700; }
.cf-stitch { height: 4px; border-radius: 999px; background: var(--surface-press); overflow: hidden; }
.cf-stitch i {
  display: block; height: 100%; border-radius: 999px; background: var(--brand);
  transition: width 0.45s var(--ease);
}

/* 질문 화면 — 흰 카드 없이 배경 위에 바로. 질문이 주인공 */
.cf-screen {
  background: transparent; border: none; padding: 4px 2px 0;
  position: relative; min-height: 340px; display: flex; flex-direction: column;
}
.cf-screen .q-eyebrow {
  font-size: 13px; font-weight: 700; color: var(--primary-ink); margin-bottom: 10px;
}
.cf-screen .q-title {
  font-size: 24px; font-weight: 800; letter-spacing: -0.035em;
  line-height: 1.38; color: var(--text); margin-bottom: 8px;
}
.cf-screen .q-sub {
  font-size: 15px; color: var(--text-faint); font-weight: 500;
  line-height: 1.55; margin-bottom: 22px;
}
.cf-screen .q-body { flex: 1; }

/* 선택지 — 토스식 큰 흰 카드 버튼 */
.cf-screen .chips { display: flex; flex-direction: column; gap: 10px; }
.cf-screen .chips.row { flex-direction: row; flex-wrap: wrap; }
.cf-screen .chip {
  background: var(--surface); border: 2px solid transparent;
  box-shadow: var(--shadow-1); color: var(--text);
  font-family: inherit; font-size: 16px; font-weight: 600;
  letter-spacing: -0.02em; padding: 17px 18px; cursor: pointer;
  border-radius: var(--radius-s); text-align: left; line-height: 1.4;
}
.cf-screen .chips.row .chip { padding: 13px 16px; font-size: 15px; }
.cf-screen .chip small {
  display: block; font-size: 13px; color: var(--text-faint);
  font-weight: 500; margin-top: 3px;
}
.cf-screen .chip[aria-pressed="true"] {
  border-color: var(--brand); background: var(--primary-weak);
  color: var(--primary-ink); font-weight: 700;
}
.cf-screen .chip[aria-pressed="true"] small { color: var(--primary-ink); opacity: 0.85; }

/* 슬라이더 — 숫자를 크게 */
.cf-screen .slider-box {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-1); padding: 22px 20px 16px;
}
.cf-screen .slider-val {
  font-size: 40px; font-weight: 800; color: var(--text);
  letter-spacing: -0.045em; text-align: center; margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.cf-screen .slider-val span:last-child { font-size: 17px; color: var(--text-faint); font-weight: 600; }
.cf-screen input[type=range] { width: 100%; accent-color: var(--primary-ink); }
.cf-screen .range-ends {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--text-faint); font-weight: 500; margin-top: 6px;
}

.cf-screen .inline-note {
  margin-top: 14px; background: var(--warn-weak); border-radius: var(--radius-s);
  padding: 14px 16px; font-size: 14px; color: var(--text-dim); line-height: 1.55;
}
.cf-screen .inline-note b { color: #b26a00; }

/* 이미 아는 정보 카드 */
.cf-screen .known-card {
  background: var(--surface); border-radius: var(--radius-s);
  box-shadow: var(--shadow-1); padding: 16px 18px; margin-bottom: 10px;
}
.cf-screen .known-card .k-label { font-size: 13px; color: var(--text-faint); font-weight: 600; }
.cf-screen .known-card .k-val { font-size: 18px; font-weight: 700; margin-top: 3px; letter-spacing: -0.03em; }
.cf-screen .known-card .k-src { font-size: 12px; color: var(--text-faint); margin-top: 4px; }

/* 하단 버튼 — 토스는 화면 아래 꽉 찬 파란 버튼 */
.cf-screen .btn-row { display: flex; gap: 10px; margin-top: 24px; }
.cf-btn {
  flex: 1; border: none; background: var(--primary); color: #fff;
  font-family: inherit; font-size: 16px; font-weight: 700;
  letter-spacing: -0.02em; padding: 16px; cursor: pointer;
  border-radius: var(--radius-s); min-height: 54px;
}
.cf-btn:active { background: var(--primary-press); }
.cf-btn.ghost { background: var(--surface-press); color: var(--text-dim); }
.cf-btn.accent { background: var(--text); }
.cf-btn:disabled { background: var(--surface-press); color: var(--text-faint); cursor: default; }
/* 이전 문항으로 — 선택지를 누르면 바로 넘어가므로 되돌리기가 잘 보여야 한다.
   손가락으로 누를 수 있는 크기(44px)를 확보한다. */
.cf-back {
  position: absolute; top: -6px; right: -6px;
  background: var(--surface-press); border: none; color: var(--text-dim);
  font-size: 14px; font-weight: 700; cursor: pointer;
  padding: 9px 14px; border-radius: 999px; min-height: 40px;
}
.cf-back:active { background: var(--line); }
.cf-screen .skip {
  display: block; margin: 14px auto 0; background: none; border: none;
  color: var(--text-faint); font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit; padding: 6px 10px;
}
.cf-screen .sub-q { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }

/* 판정 — 결과는 크고 굵은 글씨로 단언 */
.cf-screen .verdict {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-1); padding: 26px 20px; text-align: center;
  position: relative; margin-bottom: 14px;
}
.cf-screen .verdict .v-label { font-size: 13px; font-weight: 700; color: var(--text-faint); }
.cf-screen .verdict .v-main {
  font-size: 26px; font-weight: 800; letter-spacing: -0.04em;
  margin: 8px 0 6px; line-height: 1.3;
}
.cf-screen .verdict .v-sub { font-size: 14px; color: var(--text-dim); line-height: 1.55; }
.cf-screen .v-stamp {
  display: inline-block; margin-bottom: 10px;
  background: var(--danger-weak); color: var(--danger);
  font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 999px;
  letter-spacing: -0.01em;
}
.cf-screen .v-stamp.keep { background: var(--primary-weak); color: var(--primary-ink); }

/* 추천 카드 */
.cf-screen .res-card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-1); padding: 18px; margin-bottom: 10px; position: relative;
}
.cf-screen .res-card.pick-alt { background: var(--surface-2); box-shadow: none; }
.cf-screen .res-card .kind {
  display: inline-block; font-size: 11px; font-weight: 700;
  background: var(--primary-weak); color: var(--primary-ink);
  padding: 4px 9px; border-radius: 999px; margin-bottom: 8px;
}
.cf-screen .res-card.pick-alt .kind { background: var(--surface-press); color: var(--text-faint); }
.cf-screen .res-card .r-name { font-size: 18px; font-weight: 700; letter-spacing: -0.03em; }
.cf-screen .res-card .r-spec { font-size: 13px; color: var(--text-faint); font-weight: 500; margin: 3px 0 10px; }
.cf-screen .res-card ul { list-style: none; }
.cf-screen .res-card li {
  font-size: 14px; color: var(--text-dim); line-height: 1.5;
  padding-left: 16px; position: relative; margin-top: 5px;
}
.cf-screen .res-card li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--text-faint);
}
/* 다른 브랜드 제안 — 권유하는 말투가 드러나게 */
.cf-screen .alt-lead {
  font-size: 14px; font-weight: 600; color: var(--primary-ink);
  margin: 16px 2px 8px; line-height: 1.5;
}

.cf-screen .warn-card {
  background: var(--warn-weak); border-radius: var(--radius-s);
  padding: 15px 16px; font-size: 14px; color: var(--text-dim);
  line-height: 1.55; margin-bottom: 10px;
}
.cf-screen .warn-card b { color: #b26a00; }
.cf-screen .tip-line {
  font-size: 14px; color: var(--text-dim); line-height: 1.55;
  padding: 12px 2px; border-bottom: 1px solid var(--line);
}
.cf-screen .alt-toggle {
  width: 100%; margin-top: 8px; border: none; background: var(--surface-press);
  color: var(--text-dim); font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 14px; cursor: pointer; border-radius: var(--radius-s);
}
.cf-screen .section-h {
  font-size: 17px; font-weight: 800; letter-spacing: -0.03em;
  margin: 26px 0 10px; display: flex; align-items: baseline; gap: 8px;
}
.cf-screen .section-h .cnt { font-size: 13px; color: var(--text-faint); font-weight: 600; }
.cf-screen .restart-row { display: flex; gap: 10px; margin-top: 14px; }
.cf-foot {
  margin-top: 20px; font-size: 12px; color: var(--text-faint);
  line-height: 1.7; text-align: center;
}
.hub-item.hub-wide { grid-column: 1 / -1; }

/* ── 허브 타일 — 앱의 첫 갈림길이라 가장 또렷하게 ────────────────── */
.hub-item {
  border: none;
  box-shadow: var(--shadow-1);
  padding: 20px 16px 18px;
}
.hub-item b { font-size: 16px; letter-spacing: -0.03em; }
.hub-item span:last-child { font-size: 12px; color: var(--text-faint); }
.hub-ic { font-size: 28px; }
.hub-tip { color: var(--text-faint); font-size: 12px; }

/* 홀 버튼 — 선택 상태를 색 채움으로 (테두리만으로는 눈에 안 띔) */
.hole-btn { border: none; box-shadow: var(--shadow-1); background: var(--surface); }
.hole-btn.active { background: var(--primary); border-color: var(--primary-ink); color: #fff; }
.hole-btn.active small { color: rgba(255, 255, 255, 0.8); }

/* 검색창 — 토스는 테두리 없이 면으로만 구분 */
.search-box { background: var(--surface); box-shadow: var(--shadow-1); padding: 13px 14px; }
.search-results { border: none; box-shadow: var(--shadow-2); }

/* ══════════════════════════════════════════════════════════════════
   토스 무드 심화 — 전 화면 공통 (2026-07-27 리브랜딩 때 도입)

   1차 개편에서 색만 바꾼 곳들을 구조까지 토스식으로 정리한다.
   핵심은 "카드를 줄이고 여백을 늘린다" — 토스 화면에는 테두리가 거의 없다.
   ══════════════════════════════════════════════════════════════════ */

/* ── 상단 헤더 — 토스는 얇고 조용하다 ───────────────────────────── */
.detail-header { padding: 8px 0; }
.hdr-btn {
  background: transparent; color: var(--text);
  font-size: 26px; width: 40px; height: 40px;
}
.hdr-btn:active { background: var(--surface-press); }
.hdr-title { font-weight: 700; font-size: 16px; letter-spacing: -0.03em; }

/* ── 히어로 — 숫자 하나만 크게, 나머지는 물러난다 ───────────────── */
.hero { padding: 14px 0 30px; }
.hero-name { font-size: 20px; font-weight: 700; color: var(--text); }
.hero-addr { font-size: 13px; margin-top: 5px; }
.hero-temp { margin-top: 10px; color: var(--text); }
.hero-desc { margin-top: 2px; font-weight: 600; color: var(--text-dim); }
.hero-minmax { font-size: 14px; color: var(--text-faint); font-weight: 500; margin-top: 6px; }

/* ── 카드 — 토스식 여백. 카드끼리는 넉넉히 떨어뜨린다 ───────────── */
.card {
  border-radius: var(--radius);
  padding: 20px 18px;
  margin-bottom: 14px;
}
.summary-text { font-size: 15px; line-height: 1.65; color: var(--text-dim); font-weight: 500; }

/* 시간별 — 지금 시각만 강조하고 나머지는 담백하게 */
.hour-item { padding: 4px 2px; }
.hour-item .h-time { font-size: 12px; color: var(--text-faint); font-weight: 600; }
.hour-item .h-temp { font-size: 16px; font-weight: 700; letter-spacing: -0.03em; }

/* ── 지표 카드 — 큰 숫자 + 한 줄 평가 ───────────────────────────── */
.metric { padding: 18px 16px; min-height: 116px; }
.metric-main { font-size: 24px; }
.metric-eval { font-size: 13px; margin-top: 7px; }
.metric-sub { font-size: 12px; }

/* ── 목록 행 — 토스의 기본 단위 (왼쪽 라벨 · 오른쪽 값 · 화살표) ── */
.tl-row {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; background: var(--surface);
  cursor: pointer; width: 100%; border: none;
  font-family: inherit; text-align: left; color: var(--text);
}
.tl-row + .tl-row { box-shadow: inset 0 1px 0 var(--line); }
.tl-row:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.tl-row:last-child  { border-radius: 0 0 var(--radius) var(--radius); }
.tl-row:only-child  { border-radius: var(--radius); }
.tl-row:active { background: var(--surface-press); }
.tl-label { flex: 1; font-size: 15px; font-weight: 600; }
.tl-label small { display: block; font-size: 12.5px; color: var(--text-faint); font-weight: 500; margin-top: 2px; }
.tl-value { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.tl-go { color: var(--text-faint); font-size: 18px; flex: none; }

/* 섹션 제목은 카드 밖에 — 토스가 화면을 나누는 방식 */
.sec-title {
  font-size: 17px; font-weight: 800; letter-spacing: -0.03em;
  color: var(--text); margin: 26px 2px 10px;
}
.sec-title small { display: block; font-size: 13px; font-weight: 500; color: var(--text-faint); margin-top: 3px; }

/* ── 버튼 위계 — 채운 것 하나, 나머지는 조용하게 ────────────────── */
/* 채운 버튼은 화면당 하나만 — 나머지는 물러난다.
   (.guide-close 는 '닫기·나중에·그냥 받기' 같은 보조 동작이라 채우면 안 된다) */
.retry-btn, .guide-copy {
  background: var(--primary); color: #fff; border: none;
  min-height: 52px; font-size: 16px; font-weight: 700;
}
.retry-btn:active, .guide-copy:active { background: var(--primary-press); }
.guide-close {
  background: var(--surface-press); color: var(--text-dim); border: none;
  min-height: 52px; font-size: 16px; font-weight: 600;
}
.guide-close:active { background: var(--line); }
.install-btn { background: var(--surface); box-shadow: var(--shadow-1); border: none; padding: 16px; }
.ic-txt b { font-size: 15px; font-weight: 700; }
.ic-txt small { font-size: 12.5px; color: var(--text-faint); }
.ic-go { color: var(--text-faint); }

/* 하단 링크 — 존재감을 낮춘다 */
.home-foot { color: var(--text-faint); }
.c-view { color: var(--text-faint); font-weight: 500; }
.credits { color: var(--text-faint); font-size: 12px; }

/* ── 시트(바텀시트) — 토스는 위가 크게 둥글고 손잡이가 있다 ─────── */
.sheet { border-radius: 20px 20px 0 0; padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); }
.sheet-bar { width: 40px; height: 4px; border-radius: 999px; background: var(--line); }
.sheet-title { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.sheet-desc { font-size: 14px; color: var(--text-faint); }

/* ── 동의 화면 — 첫인상이라 가장 토스답게 ───────────────────────── */
.consent-box h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.035em; }
.consent-start {
  background: var(--primary); color: #fff; border: none;
  min-height: 56px; font-size: 17px; font-weight: 700; border-radius: var(--radius-s);
}
.consent-start:active { background: var(--primary-press); }
.consent-start.is-off { background: var(--surface-press); color: var(--text-faint); }

/* ── 맛집 카드 ──────────────────────────────────────────────────── */
.food-item { background: var(--surface); box-shadow: var(--shadow-1); border: none; }
.fi-name { font-size: 16px; font-weight: 700; letter-spacing: -0.03em; }

/* ── 스코어 ─────────────────────────────────────────────────────── */
.si-score { font-weight: 800; letter-spacing: -0.04em; }

/* ── 허브 — 토스 홈처럼 "이름 · 지금 온도"를 왼쪽 정렬로 크게 ───── */
.hub-head { text-align: left; padding: 6px 2px 24px; }
.hub-name { font-size: 26px; font-weight: 800; letter-spacing: -0.035em; }
.hub-addr { font-size: 13.5px; color: var(--text-faint); margin-top: 5px; }
.hub-now { font-size: 14px; margin-top: 14px; color: var(--text-faint); font-weight: 500; }
.hub-now b {
  font-size: 30px; color: var(--text); font-weight: 800;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}

/* 메뉴는 2열 타일 유지 — 아이콘이 커서 한눈에 구분된다.
   대신 카드 사이 간격을 넓히고 설명 글씨를 눌러 위계를 세운다. */
.hub-menu { gap: 11px; }
.hub-item { padding: 18px 16px 16px; gap: 2px; }
.hub-item.hub-wide {
  flex-direction: row; align-items: center; gap: 14px;
  padding: 18px 16px;
}
.hub-item.hub-wide .hub-ic { margin-bottom: 0; font-size: 26px; }
.hub-item.hub-wide b { flex: none; }
.hub-item.hub-wide span:last-child { flex: 1; }

/* ── 서브 컬러(깃발 빨강) 적용 ────────────────────────────────────
   그린이 코스라면 빨강은 핀이다. 뜻이 맞는 세 곳에만 쓴다. */

/* 1) 지도 위 골프장 위치 — 깃대가 꽂힌 자리 */
.course-dot {
  background: var(--flag);
  box-shadow: 0 0 0 4px rgba(245, 35, 43, 0.22), 0 2px 6px rgba(25, 31, 40, 0.18);
}
.hole-num-dot { background: var(--flag); color: #fff; }

/* 2) 지금 이 순간 — 레이더의 현재 시각, 실시간 표시 */
.radar-now-label { color: var(--text-faint); font-weight: 600; }
.badge.now { background: var(--flag); color: #fff; }

/* 3) 오버파 — 목표(파)를 넘긴 타수 */
.hg-over, .si-over { color: var(--flag-ink); font-weight: 700; }

/* 저장(즐겨찾기) 별은 눈에 띄어야 하므로 채워진 상태를 빨강으로 */
.hdr-btn.star.saved { color: var(--flag); }

/* ── 데이터 색 — 브랜드색과 구분한다 ──────────────────────────────
   포인트색(그린)은 브랜드이고, 날씨 수치는 '읽는 색'이다.
   비를 초록으로 칠하면 예쁘긴 해도 한눈에 안 읽힌다. 비는 파랑이 맞다.
   그래서 강수 관련 표시에만 쓰는 별도 색을 둔다. */
:root { --rain: #3d8bfd; --rain-weak: #eaf2ff; }

.course-card.wx-rain { border-left-color: var(--rain); }
.course-card.wx-snow { border-left-color: #7fb2f0; }
.p-bar i { background: linear-gradient(180deg, var(--rain), #8fbdfd); }
.p-mm.has-rain { color: var(--rain); }
.p-pop.high { color: var(--rain); font-weight: 600; }
.hour-item .h-pop { color: var(--rain); }
.grade-normal { color: var(--rain); }
.precip-chip { background: var(--rain-weak); color: #1f5fb8; }

/* 같은 시트 안의 두 번째 동작 — 테두리만 (채운 버튼은 하나로 유지) */
.btn-outline {
  background: transparent !important;
  color: var(--primary-ink) !important;
  box-shadow: inset 0 0 0 1.5px var(--brand);
}
.btn-outline:active { background: var(--primary-weak) !important; }

/* 밝은 지도 위 도시 라벨 — 흰 테두리로 강수 오버레이 위에서도 읽히게 */
.city-label span {
  color: var(--text);
  text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 1px 2px rgba(255,255,255,0.9);
}

/* ── 한글 줄바꿈 — 단어 중간에서 끊지 않는다 ──────────────────────
   기본값은 어절 구분 없이 아무 데서나 끊어서 "마세/요" 같은 꼴이 나온다.
   토스를 포함한 완성도 높은 한국어 앱은 전부 keep-all 을 쓴다. */
body, .view, .cf-screen, .card, .sheet { word-break: keep-all; overflow-wrap: break-word; }

/* 🔴 일본어에서는 keep-all 을 **전부 푼다**.
   한국어는 띄어쓰기가 있어 keep-all 이어도 어절에서 끊긴다. 일본어는 공백이 없다 —
   「カバー・コンプレッション・スピン量 — すべてのショットに使う唯一のギア」 가
   **한 덩어리**가 되어 상자를 밀어내고 화면이 가로로 넘친다
   (2026-08-03 사장님 화면에서 클럽 선택 카드가 잘려 나온 원인. 320px 에서 body 가 379px 로 벌어졌다).
   lang 은 I18N 이 <html> 에 찍어 준다. keep-all 을 쓴 21곳을 하나씩 손대지 않고 여기서 되돌린다.
   ⚠️ 새 규칙에 keep-all 을 또 적더라도 이 블록이 뒤에 있어 이깁니다 — 순서를 바꾸지 말 것. */
html[lang="ja"] body,
html[lang="ja"] .view,
html[lang="ja"] .cf-screen,
html[lang="ja"] .card,
html[lang="ja"] .sheet,
html[lang="ja"] body * { word-break: normal; overflow-wrap: anywhere; }

/* 격자·플렉스 칸은 기본값(min-width:auto)이라 내용이 크면 칸이 늘어난다.
   글자가 안 끊기는 순간 그대로 화면 밖으로 밀린다 — 0 으로 못 박아 둔다. */
.cf-club-grid > *, .fi-actions > *, .bk-links > * { min-width: 0; }

/* iOS 가 글자를 제멋대로 키우면 위와 같은 넘침이 되살아난다 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ── 클럽 선택 타일 (피팅 첫 화면) ──────────────────────────────
   드라이버부터 강제로 시작하던 흐름을 없애고, 맞추고 싶은 클럽을 먼저 고르게 한다. */
.cf-club-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.cf-club-tile {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 18px 12px 14px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--card); color: var(--text);
  text-align: center; cursor: pointer; transition: transform .12s var(--ease), border-color .12s var(--ease);
}
.cf-club-tile:active { transform: scale(0.97); }
.cf-club-tile b { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.cf-club-tile small {
  font-size: 11.5px; line-height: 1.45; color: var(--text-faint);
  word-break: keep-all;
}
/* 실루엣은 마스크로 그린다.
   원본 4장은 tools/make_club_icons_src.py 로 **여백 없이 딱 잘라서** 만든다.
   알파도 그때 단단하게 만든다 — 반투명이 남으면 그 아이콘만 회색으로 떠 보인다. */
.cf-club-ico {
  display: block; width: 62px; height: 83px; background-color: #000;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: bottom center; mask-position: bottom center;
  /* ⚠️ contain 을 쓰지 않는다 — contain 은 상자 크기에 그림을 맞추므로
     하나만 키우려고 상자를 키우면 네 개가 전부 따라 커진다.
     그래서 **그림 높이를 직접 적는다**(auto 72px = 가로는 비율대로).
     상자 높이 83px 은 넷이 같다 — 타일이 2열 격자라 상자 높이가 서로 다르면
     웨지·퍼터 줄만 아래로 내려앉는다. 남는 위쪽은 빈 공간이고, 그림은
     mask-position: bottom 이라 항상 바닥에 붙어 네 개의 발 높이가 맞는다. */
  -webkit-mask-size: auto 72px; mask-size: auto 72px;
}
.cf-club-ico.ico-golfer { -webkit-mask-image: url("../assets/golfer.png"); mask-image: url("../assets/golfer.png"); }
/* 아이언만 가로 기준으로 맞춘다.
   아이언은 클럽이 옆으로 길게 뻗어 가로가 세로보다 길다(520×400). 세로를 72px 로 맞추면
   가로가 94px 이 되므로 상자도 94px 로 넓혀 클럽 헤드까지 담는다(사장님 지적 2026-07-29).
   이렇게 하면 사람 키가 55px → 72px 이 되어 나머지 셋과 **정확히 같아진다**.
   타일이 가운데 정렬이라 위치는 그대로고, 320px 폭 폰에서도 타일 안에 들어간다. */
.cf-club-ico.ico-iron   { width: 94px;
  -webkit-mask-size: 94px auto; mask-size: 94px auto;
  -webkit-mask-image: url("../assets/iron.png");   mask-image: url("../assets/iron.png"); }
/* 웨지만 15% 크게 (사장님 지시 2026-07-29 — "나머지에 비해 이미지가 좀 작아요").
   웨지는 피니시 자세라 세로로 홀쭉해 같은 72px 이어도 폭이 37px 밖에 안 된다
   (드라이버 46 · 퍼터 43 · 아이언 94). 그래서 눈에는 혼자 작아 보인다.
   72 → 83px (×1.15). 상자 높이 83px 안에 딱 들어가므로 잘리는 곳은 없다. */
.cf-club-ico.ico-wedge  { -webkit-mask-size: auto 83px; mask-size: auto 83px;
  -webkit-mask-image: url("../assets/wedge.png");  mask-image: url("../assets/wedge.png"); }
.cf-club-ico.ico-putter { -webkit-mask-image: url("../assets/putter.png"); mask-image: url("../assets/putter.png"); }
/* 볼 아이콘 — 실루엣 PNG 가 없어 CSS 로 그린다.
   ⛔ tools/draw_wedge_icon.py · tools/build_club_icons.js 는 배포 중인 아이콘을 덮어쓴다. 쓰지 않는다.
   ⛔ mask-size: contain 금지 — 이 앱에서 아이언을 두 번이나 망가뜨린 속성이다.
   마스크를 쓰지 않으므로 배경 그라디언트로 직접 그린다(테마와 무관하게 공은 흰색이 맞다). */
.cf-club-ico.ico-ball {
  position: relative; width: 54px; height: 54px; border-radius: 50%;
  background-color: transparent;
  background-image: radial-gradient(circle at 32% 28%, #fff 0%, #f3f5f7 45%, #d8dde2 78%, #bcc4cc 100%);
  box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .18);
  -webkit-mask-image: none; mask-image: none;
}
.cf-club-ico.ico-ball::after {                 /* 딤플 */
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  background-image: radial-gradient(circle, rgba(0, 0, 0, .11) 1.1px, transparent 1.3px);
  background-size: 9px 9px;
}
/* 클럽 이름에 색 — 네 가지를 눈으로 바로 구분하게 한다.
   ⚠️ 앱의 색 역할(브랜드 그린 · 깃발 빨강 · 강수 파랑 · 경고 주황)과 겹치지 않는
   색만 골랐다. 여기서 쓴 색은 **클럽 구분 표시 전용**이며 다른 화면으로 넘기지 말 것.
   흰 배경 대비 5:1 이상. */
.cf-club-tile[data-club="driver"] b { color: #2f4a7d; }   /* 짙은 남색 */
.cf-club-tile[data-club="iron"]   b { color: #0f6f66; }   /* 딥 틸 */
.cf-club-tile[data-club="wedge"]  b { color: #8a5a1e; }   /* 브론즈 */
.cf-club-tile[data-club="putter"] b { color: #6b3fa0; }   /* 딥 퍼플 */
.cf-club-tile[data-club="ball"]   b { color: #a8443c; }   /* 테라코타 */

.cf-club-done {
  position: absolute; top: 8px; right: 8px; font-size: 10.5px; font-weight: 700;
  color: var(--primary-ink); background: var(--primary-weak);
  padding: 2px 7px; border-radius: 999px;
}
/* 볼 타일만 가로 한 줄 — 클럽 4개(2×2) 아래에 붙는다. 2열 격자라 span 2 로 편다. */
.cf-club-tile.wide {
  grid-column: 1 / -1; flex-direction: row; justify-content: flex-start;
  gap: 14px; padding: 14px 16px; text-align: left;
}
.cf-club-tile.wide .cf-club-ico { flex: none; }
.cf-club-tile.wide > b, .cf-club-tile.wide > small { display: block; }
.cf-club-tile.wide small { margin-top: 2px; }

/* ── 내 골프백 ──────────────────────────────────────────────────
   저장한 클럽을 다시 볼 수 있는 화면(사장님 지시 2026-07-30).
   저장은 되는데 볼 곳이 없으면 저장 버튼은 아무 말도 하지 않는 버튼이다. */
.bag-strip {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; margin-bottom: 14px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--card); color: var(--text);
  text-align: left; cursor: pointer;
}
.bag-strip.empty { background: var(--surface-2); cursor: default; }
.bag-strip:not(.empty):active { transform: scale(0.99); }
.bag-strip-ic { font-size: 24px; line-height: 1; flex: none; }
.bag-strip-t { flex: 1; min-width: 0; }
.bag-strip-t b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.bag-strip-t span {
  display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.5;
  color: var(--text-faint); word-break: keep-all;
}
.bag-strip-go { flex: none; font-size: 13px; font-weight: 700; color: var(--primary-ink); }

.bag-card {
  margin-bottom: 12px; padding: 15px 16px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--card);
}
.bag-card.empty { background: var(--surface-2); border-style: dashed; }
.bag-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.bag-head b { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.bag-head span { font-size: 11.5px; color: var(--text-faint); font-weight: 600; flex: none; }
.bag-row {
  display: flex; align-items: baseline; gap: 10px; padding: 6px 0;
  border-top: 1px solid var(--line);
}
.bag-row:first-of-type { border-top: none; padding-top: 0; }
.bag-row > span { flex: none; width: 78px; font-size: 12px; color: var(--text-faint); font-weight: 600; }
.bag-row > b { flex: 1; font-size: 14px; font-weight: 700; letter-spacing: -0.02em; word-break: keep-all; }
.bag-none { font-size: 13px; color: var(--text-faint); margin-bottom: 12px; }
.bag-why {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.65; color: var(--text-dim); word-break: keep-all;
}
.bag-btn { margin-top: 12px; width: 100%; padding: 11px; font-size: 14px; }
/* 직접 입력 칸 (지금 쓰는 모델 등) */
.cf-text {
  width: 100%; padding: 13px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--card); color: var(--text);
  font-size: 15px; font-family: inherit;
}
.cf-text:focus { outline: none; border-color: var(--brand); }

/* ── 피팅 결과 설명 ────────────────────────────────────────────
   "왜 이 클럽인가"를 납득할 때까지 풀어 쓰는 자리.
   스펙 카드보다 이쪽이 신뢰를 만든다(사장님 지시 2026-07-27). */
.cf-read {
  margin: 18px 0 6px; border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; background: var(--card);
}
.cf-read-h {
  padding: 13px 16px; font-size: 13px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--primary-ink); background: var(--primary-weak);
}
.cf-read-row { padding: 13px 16px; border-top: 1px solid var(--line); }
.cf-read-row:first-of-type { border-top: none; }
.cf-read-k { font-size: 11.5px; font-weight: 700; color: var(--text-faint); margin-bottom: 3px; }
.cf-read-v { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; word-break: keep-all; }
.cf-read-b {
  margin-top: 6px; font-size: 13px; line-height: 1.65;
  color: var(--text-dim); word-break: keep-all;
}
.cf-story { margin: 16px 0; padding: 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.cf-story-h { font-size: 14.5px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; }
.cf-story p {
  margin: 0 0 11px; font-size: 13.5px; line-height: 1.75;
  color: var(--text-dim); word-break: keep-all;
}
.cf-story p:last-child { margin-bottom: 0; }
.cf-story b { color: var(--text); font-weight: 700; }
/* 기대 효과는 긍정, 주의는 경고 — 색으로 성격을 구분한다 */
.cf-story.good { background: var(--primary-weak); border-color: transparent; }
.cf-story.good .cf-story-h { color: var(--primary-ink); }
.cf-story.warn { background: transparent; border-style: dashed; }
.cf-story.warn .cf-story-h { color: var(--text-dim); }

/* ── 결과 세 줄 요약 (사장님 지시 2026-07-30) ──────────────────────
   "내용이 너무 많아서 다 읽어볼 엄두가 안 난다."
   설명을 없애는 게 아니라 순서를 바꾼다 — 결론 먼저, 근거는 접어서 아래로. */
.cf-tldr {
  margin: 14px 0 16px; padding: 4px 0; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line); overflow: hidden;
}
.cf-tldr-r { display: flex; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--line); }
.cf-tldr-r:first-child { border-top: none; }
.cf-tldr-r > span {
  flex: none; width: 34px; padding-top: 1px; font-size: 11.5px; font-weight: 800;
  color: var(--text-faint); letter-spacing: -0.02em;
}
.cf-tldr-r > p {
  margin: 0; flex: 1; font-size: 14.5px; line-height: 1.7;
  color: var(--text); word-break: keep-all;
}
.cf-tldr-r > p b { font-weight: 800; }
/* 추정값 표시 — 단정한 숫자와 눈으로 구분되게 (절대 원칙 2) */
.cf-tldr-r > p i { font-style: normal; font-size: 12px; color: var(--text-faint); font-weight: 600; }
.cf-tldr-r.act { background: var(--primary-weak); border-top-color: transparent; }
.cf-tldr-r.act > span { color: var(--primary-ink); }
.cf-tldr-r.act > p { color: var(--primary-ink); }
.cf-tldr-r.act > p b { color: var(--primary-ink); }

/* 1순위만 한 줄씩 — 대안·단종은 접힌 쪽으로 내린다 */
.cf-picks {
  margin: 0 0 16px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--card); overflow: hidden;
}
.cf-pick { display: flex; gap: 12px; align-items: baseline; padding: 12px 16px; border-top: 1px solid var(--line); }
.cf-pick:first-child { border-top: none; }
.cf-pick-k { flex: none; width: 62px; font-size: 12px; font-weight: 700; color: var(--text-faint); }
.cf-pick-v { flex: 1; min-width: 0; }
.cf-pick-v b { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; word-break: keep-all; }
.cf-pick-v small {
  display: block; margin-top: 2px; font-size: 12px; line-height: 1.5;
  color: var(--text-faint); word-break: keep-all;
}

/* 접이식 — <details> 대신 앱의 다른 버튼과 같은 모양으로 만든다 */
.cf-fold { margin: 10px 0; }
.cf-fold-h {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer;
}
.cf-fold-h:active { background: var(--surface-press); }
.cf-fold-t { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; }
.cf-fold-t small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--text-faint); }
.cf-fold-x { flex: none; font-size: 17px; font-weight: 700; color: var(--text-faint); line-height: 1; }
.cf-fold-b { padding: 2px 0 6px; }
.cf-fold-b .cf-fold-h { background: transparent; }

/* 가격대·단종 표시 — 스펙만큼 고르는 데 중요한 정보 */
.r-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.r-tag {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  color: var(--text-dim); background: var(--bg-1); border: 1px solid var(--line);
}
.r-tag.old { color: #8a5a1e; background: #fdf4e7; border-color: #f0dcc0; }

/* 클럽 피팅 하단 고지 — 질문 화면에서는 존재감을 더 낮춘다 */
.cf-foot { font-size: 11.5px; line-height: 1.6; opacity: 0.85; padding: 0 8px; }

/* ── 클럽 피팅 진행 = 티샷 한 번 ──────────────────────────────────
   문항을 넘길수록 공이 그린 쪽으로 날아가고, 마지막에 홀에 떨어진다. */
.cf-shot { width: 100%; margin-bottom: 6px; }
.cf-shot svg { width: 100%; height: auto; display: block; overflow: visible; }
.cf-ground { stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.cf-green  { fill: var(--primary-weak); }
.cf-hole   { fill: #2b3b2f; }
.cf-pole   { stroke: var(--text-faint); stroke-width: 1.6; }
.cf-flag   { fill: var(--flag); }
/* 앞으로 갈 길 — 옅은 점선 */
.cf-arc-plan {
  fill: none; stroke: var(--line); stroke-width: 2;
  stroke-linecap: round; stroke-dasharray: 2 7;
}
/* 지나온 길 — 진한 실선이 공을 따라 그려진다 */
.cf-arc {
  fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round;
  transition: stroke-dashoffset 0.55s var(--ease);
}
/* 골퍼 — 사장님이 주신 실루엣 이미지.
   그림을 그대로 넣으면 색을 못 바꾸므로 마스크로 써서 글자색을 입힌다
   (다크 모드나 브랜드색 변경에도 그대로 따라온다). */
.cf-golfer .cf-fig {
  width: 100%; height: 100%;
  background-color: var(--text);
  -webkit-mask: url("../assets/golfer.png") no-repeat bottom left;
  mask: url("../assets/golfer.png") no-repeat bottom left;
  /* ⚠️ contain 을 쓰지 말 것 (클럽 선택 타일과 같은 이유).
     contain 은 상자에 맞추므로 **아이언만 혼자 납작해진다** — 아이언은 클럽이 옆으로
     길어(520×400) 가로에 먼저 걸리기 때문이다. 실제로 사람 키가 다른 셋의 80% 밖에
     안 됐다(사장님 지적 2026-07-29). 그래서 클럽 선택 타일과 **똑같은 비율**로
     높이를 직접 적는다: 드라이버·퍼터 = 기준, 아이언 = 가로 기준, 웨지 = +15%.
     ※ foreignObject 안이라 여기 px 는 SVG 좌표(viewBox 320×78) 단위다.
       바닥선이 y=68 이고 상자 아래가 68 이므로 네 실루엣의 발 높이가 자동으로 맞는다.
     타일 72px : 여기 50px = 0.694 배. 이 배율만 바꾸면 넷이 같이 커진다. */
  -webkit-mask-size: auto 50px;
  mask-size: auto 50px;
  transform-origin: 50% 100%;
}
/* 고른 클럽에 맞춰 실루엣이 바뀐다 (사장님 제공 이미지, 배경 투명·지면선 제거).
   파일만 갈아 끼우면 되도록 경로를 고정해 둔다. */
.cf-golfer.club-iron .cf-fig {
  -webkit-mask-size: 65px auto; mask-size: 65px auto;   /* 타일 94px × 0.694 */
  -webkit-mask-image: url("../assets/iron.png"); mask-image: url("../assets/iron.png");
}
.cf-golfer.club-wedge .cf-fig {
  -webkit-mask-size: auto 58px; mask-size: auto 58px;    /* 타일 83px × 0.694 */
  -webkit-mask-image: url("../assets/wedge.png"); mask-image: url("../assets/wedge.png");
}
.cf-golfer.club-putter .cf-fig {
  -webkit-mask-image: url("../assets/putter.png"); mask-image: url("../assets/putter.png");
}
/* 첫 티샷에서 살짝 반동 */
.cf-golfer.swing .cf-fig { animation: cfSwing 0.6s var(--ease); }
@keyframes cfSwing {
  0%   { transform: rotate(-6deg) translateY(1px); }
  45%  { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}

.cf-ball {
  fill: #fff; stroke: var(--text-faint); stroke-width: 1.4;
  transition: cx 0.55s var(--ease), cy 0.55s var(--ease), r 0.3s var(--ease);
}
/* 홀인 — 공이 컵에 떨어지고 깃발이 한 번 흔들린다 */
.cf-ball.holed { r: 2.4; fill: var(--brand); stroke: none; }
.cf-flag.cheer { animation: cfCheer 0.9s var(--ease) 2; transform-origin: 288px 36px; }
@keyframes cfCheer {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(0.72); }
}
.cf-stitch-label { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .cf-arc, .cf-ball { transition: none; }
  .cf-golfer.swing, .cf-flag.cheer { animation: none; }
}


/* ══════════════════════════════════════════════════════════════════
   하늘 장면 — iOS 날씨 앱처럼 카드가 그날 하늘이 된다
   (사장님 지시 2026-07-27: 비 오면 비가 내리고, 흐리면 구름이 흘러야 함)

   구현 원칙:
   · DOM 은 최소로. 빗방울 하나하나를 요소로 만들지 않고 배경 타일을 흘린다.
   · transform / background-position 만 애니메이션한다 (레이아웃 재계산 없음)
   · 목록에 카드가 여러 장 떠 있어도 부담이 없어야 한다
   ══════════════════════════════════════════════════════════════════ */
.course-card.has-scene {
  border-left: none;
  padding: 18px;
  color: #fff;
  box-shadow: 0 4px 16px rgba(25, 31, 40, 0.14);
  isolation: isolate;              /* 장면이 카드 밖으로 새지 않게 */
}
.course-card.has-scene .cc-name { color: #fff; }
.course-card.has-scene .cc-sub,
.course-card.has-scene .cc-bottom { color: rgba(255, 255, 255, 0.82); }
.course-card.has-scene .cc-temp { color: #fff; }
.course-card.has-scene .cc-del { background: rgba(255, 255, 255, 0.22); color: #fff; }

.wx-scene {
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; overflow: hidden;
  pointer-events: none;
}
.wx-scene > * { position: absolute; }

/* ── 하늘 바탕 ───────────────────────────────────────────────────── */
.wx-sky { inset: 0; background: linear-gradient(170deg, #6b7c8d 0%, #46545f 100%); }
.wx-clear  .wx-sky { background: linear-gradient(170deg, #2c7fd0 0%, #63b3e8 55%, #8fcdf2 100%); }
.wx-partly .wx-sky { background: linear-gradient(170deg, #3d87c4 0%, #77aed6 100%); }
.wx-cloud  .wx-sky { background: linear-gradient(170deg, #71828f 0%, #4f5d68 100%); }
.wx-rain   .wx-sky { background: linear-gradient(170deg, #58697a 0%, #2f3b46 100%); }
.wx-storm  .wx-sky { background: linear-gradient(170deg, #3d4654 0%, #1e242c 100%); }
.wx-snow   .wx-sky { background: linear-gradient(170deg, #7b8fa3 0%, #556674 100%); }
.wx-fog    .wx-sky { background: linear-gradient(170deg, #8b959e 0%, #5d666e 100%); }
/* 밤 — 같은 날씨라도 하늘색이 완전히 달라진다 */
.is-night.wx-clear  .wx-sky { background: linear-gradient(155deg, #0e1a30 0%, #26385c 100%); }
.is-night.wx-partly .wx-sky { background: linear-gradient(155deg, #13203a 0%, #33456b 100%); }
.is-night.wx-cloud  .wx-sky { background: linear-gradient(155deg, #1e2634 0%, #3b4759 100%); }
.is-night.wx-rain   .wx-sky { background: linear-gradient(155deg, #161d28 0%, #333e4c 100%); }
.is-night.wx-storm  .wx-sky { background: linear-gradient(155deg, #10141c 0%, #2a3140 100%); }
.is-night.wx-snow   .wx-sky { background: linear-gradient(155deg, #26313f 0%, #4a5a6c 100%); }
.is-night.wx-fog    .wx-sky { background: linear-gradient(155deg, #232a33 0%, #454e58 100%); }

/* ── 해 · 달 · 별 ────────────────────────────────────────────────── */
.wx-sun {
  right: -18px; top: -22px; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,238,170,0.95) 0%, rgba(255,214,110,0.45) 42%, rgba(255,214,110,0) 70%);
  animation: wxSun 6s ease-in-out infinite;
}
@keyframes wxSun { 0%,100% { opacity: 0.9; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.wx-moon {
  right: 22px; top: 16px; width: 26px; height: 26px; border-radius: 50%;
  background: #eef2f7;
  box-shadow: 0 0 18px 4px rgba(238, 242, 247, 0.28), inset -7px -2px 0 0 rgba(0,0,0,0.001);
}
/* 달은 보름달 그대로 — 작게 표시되므로 초승달로 깎으면 오히려 안 읽힌다 */
.wx-stars {
  inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 26%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.2px 1.2px at 42% 14%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 66% 34%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.1px 1.1px at 82% 18%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.3px 1.3px at 30% 48%, rgba(255,255,255,0.55), transparent);
  animation: wxTwinkle 4.5s ease-in-out infinite;
}
@keyframes wxTwinkle { 0%,100% { opacity: 0.75; } 50% { opacity: 1; } }

/* ── 구름 — 천천히 흘러간다 ─────────────────────────────────────── */
/* ⚠️ 클래스명 주의: wx-cloud 는 '흐림'이라는 날씨 상태(카드·장면에 붙음)이고,
   구름 덩어리 하나하나는 wx-puff 다. 둘을 같은 이름으로 쓰면 카드 전체가
   구름이 되어 통째로 블러 처리된다(2026-07-27 실제 사고). */
.wx-puff {
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  filter: blur(14px);
  animation: wxDrift linear infinite;
}
.is-night .wx-puff { background: rgba(255, 255, 255, 0.12); }
/* 카드 높이(약 100px)를 넘지 않게 — 크면 화면 전체가 뿌옇게 뭉친다 */
.wx-puff.c1 { width: 120px; height: 30px; top: 10px; left: -35%; animation-duration: 38s; }
.wx-puff.c2 { width: 88px;  height: 24px; top: 44px; left: -28%; animation-duration: 52s; animation-delay: -16s; opacity: 0.75; }
.wx-puff.c3 { width: 150px; height: 34px; top: 70px; left: -45%; animation-duration: 66s; animation-delay: -34s; opacity: 0.5; }
@keyframes wxDrift { from { transform: translateX(0); } to { transform: translateX(320px); } }
/* 흐린 날·뇌우는 구름이 더 두껍게 */
.wx-cloud .wx-puff, .wx-storm .wx-puff { background: rgba(255, 255, 255, 0.34); }

/* ── 비·눈 — js/weatherfx.js 가 캔버스에 그린다 ─────────────────
   CSS 로는 깊이감과 모션 블러를 낼 수 없어 두 번 어색하게 나왔다. */
.wx-fx {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ── 번개 — 아주 가끔 한 번 번쩍 ────────────────────────────────── */
.wx-bolt {
  inset: 0; background: #fff; opacity: 0;
  animation: wxBolt 7s ease-out infinite;
}
@keyframes wxBolt {
  0%, 92%, 100% { opacity: 0; }
  93%  { opacity: 0.42; }
  95%  { opacity: 0; }
  96%  { opacity: 0.24; }
  97%  { opacity: 0; }
}

/* ── 안개 — 뿌옇게 지나간다 ─────────────────────────────────────────
   🔴 2026-08-17 사장님 신고: 안개일 때 화면에 **이상한 박스**가 보인다.
      원인은 이 띠였다 — 폭이 좁고(가운데만 0.30) 가장자리가 뚜렷해,
      340px 히어로를 가로지르는 **밝은 세로 박스**처럼 보였다.
      안개 느낌은 남기되 박스로 안 보이게: 훨씬 옅게(0.30→0.10),
      가장자리를 부드럽게(색 정지점을 넓게), 흐림을 줘서 경계를 지운다. */
.wx-haze {
  inset: -30%;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 75%, transparent 100%);
  filter: blur(18px);
  animation: wxHaze 16s ease-in-out infinite;
}
@keyframes wxHaze { 0%,100% { transform: translateX(-25%); } 50% { transform: translateX(25%); } }

@media (prefers-reduced-motion: reduce) {
  .wx-sun, .wx-stars, .wx-puff, .wx-bolt, .wx-haze {
    animation: none !important;
  }
}

/* ── 상세 화면 — 위쪽 절반이 지금 하늘 ──────────────────────────── */
#detail-view.has-sky { position: relative; }
#detail-view.has-sky > .wx-scene {
  position: absolute; inset: 0 0 auto 0; height: 340px; z-index: -1;
  border-radius: 0 0 28px 28px;
  /* 아래로 갈수록 흐려지며 앱 배경에 스며든다 */
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
#detail-view.has-sky .detail-header { background: none; backdrop-filter: none; }
#detail-view.has-sky .hdr-btn,
#detail-view.has-sky .hdr-title { color: #fff; }
#detail-view.has-sky .hdr-btn { background: rgba(255,255,255,0.18); }
#detail-view.has-sky .hero-name { color: #fff; }
#detail-view.has-sky .hero-addr { color: rgba(255,255,255,0.78); }
#detail-view.has-sky .hero-temp { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.14); }
#detail-view.has-sky .hero-desc { color: rgba(255,255,255,0.92); }
#detail-view.has-sky .hero-minmax { color: rgba(255,255,255,0.78); }
#detail-view.has-sky .hero { padding: 18px 0 34px; }

/* 목록 카드에서는 해·달을 빼고 하늘색과 구름만 남긴다.
   (카드는 좁아서 해/달이 온도 숫자와 겹친다 — iOS 날씨도 목록에는 넣지 않는다) */
.course-card .wx-sun,
.course-card .wx-moon { display: none; }
.course-card .wx-stars { opacity: 0.7; }
.course-card .wx-puff.c1 { top: 4px; }
.course-card .wx-puff.c3 { display: none; }
/* 삭제 버튼이 하늘에 묻히지 않게 */
.course-card.has-scene .cc-del {
  background: rgba(0, 0, 0, 0.28); color: #fff;
}

/* ── 플로팅 버튼 (뒤로가기 · 공유) ────────────────────────────────
   라이트 테마로 바꾸면서 '어두운 배경 + 어두운 아이콘'이 되어 거의 안 보였다.
   흰 원 + 진한 아이콘으로 바꿨다.

   2026-07-31 사장님 지시 — "투명하게, 주변은 아주 조금만 블러".
   글 위에 늘 떠 있는 물건이라 꽉 찬 원은 읽기를 방해한다. 반투명 + 옅은 블러로
   '아래 글이 비쳐 보이되 아이콘은 또렷하게' 만든다.
   ⚠️ 블러는 한 번 뺐던 이력이 있다 — iOS 에서 아래 내용이 통째로 바뀌면(화면 전환)
   블러 스냅샷이 옛 화면으로 굳는 문제였다. 그래서 이번엔 화면을 바꿀 때
   js/app.js 의 nudgeFloatBlur() 가 버튼을 한 번 흔들어 다시 그리게 한다. */
/* 2026-07-31 3차 — 사장님이 보내주신 동영상 플레이어 버튼처럼(글래스모피즘).
   애플이 미디어 컨트롤·제어센터에 쓰는 '간유리' 방식이고, 재료가 다섯 가지다:

     ① 어두운 반투명 면      — 흰 아이콘이 어떤 배경 위에서도 읽힌다
     ② 뒤 배경 블러 + 채도↑  — 비치는 것이 '글자'가 아니라 '흐린 그림'이 된다
     ③ 얇고 밝은 테두리      — 유리 가장자리에 빛이 걸린 선
     ④ **안쪽 하이라이트**   — 위는 밝게, 아래는 어둡게. 유리에 '두께'가 생긴다
     ⑤ 겹친 바깥 그림자      — 가까운 그림자 + 멀리 퍼지는 그림자로 떠 있게

   전에는 ①이 흰색이고 ④가 아예 없어서, 블러는 걸렸는데도 평평한 원으로 보였다.
   ④가 이 느낌의 핵심이다. */
/* 핵심은 '채워진 원'이 아니라 **렌즈**라는 것이다.
   가운데는 거의 맑아서 뒤 글자·사진이 통과하고, 가장자리로 갈수록 진해지면서
   유리의 두께가 보인다. 그래서 배경은 단색이 아니라 **방사형 그라데이션**이고,
   안쪽 링(0 0 0 1px)이 유리테를 그린다.
   사장님이 네 가지 시안 중 '2 살짝'을 고르셨다(2026-07-31, 사진 위에서 대조). */
.float-btn {
  width: 52px; height: 52px;
  /* 가운데는 사실상 투명하다 — 유리를 통과해 뒤 글자·그림이 그대로 보인다.
     원의 존재는 ①가장자리 그늘 ②유리테 ③위쪽 빛 반사, 이 세 가지가 만든다. */
  background: radial-gradient(circle at 50% 38%,
    rgba(255, 255, 255, 0.06) 0%,                  /* 빛이 맺힌 자리 */
    rgba(255, 255, 255, 0) 58%,                    /* 완전히 맑은 구간 */
    rgba(6, 10, 16, 0.22) 100%);                   /* ① 가장자리 그늘 = 유리 두께 */
  /* ⚠️ 블러를 세게 걸면 뒤가 뭉개져 그냥 회색 원이 된다. 얕게 걸어야
     '무엇인지 알아볼 수 있게' 통과한다 — 유리지 젖빛유리가 아니다. */
  backdrop-filter: blur(1.8px) saturate(1.4);
  -webkit-backdrop-filter: blur(1.8px) saturate(1.4);
  border: 0;                                       /* 테두리는 아래 inset 링이 그린다 */
  color: #fff;
  box-shadow:
    inset 0 0 0 1.2px rgba(255, 255, 255, 0.44),   /* ② 유리테 */
    inset 0 2px 1px rgba(255, 255, 255, 0.7),      /* ③ 위쪽 빛 반사 */
    inset 0 -3px 8px rgba(0, 0, 0, 0.2),           /* 아래쪽 그늘 */
    0 3px 8px rgba(8, 11, 16, 0.2),                /* 가까운 그림자 */
    0 14px 28px rgba(8, 11, 16, 0.18);             /* 퍼지는 그림자 */
  opacity: 1;
  font-size: 22px;
  line-height: 1;
}
.float-btn:hover { opacity: 1; }
.float-btn:active {
  transform: scale(0.92);
  /* 누른 건 확실히 — 잠깐 진해진다 */
  background: radial-gradient(circle at 50% 38%,
    rgba(255, 255, 255, 0.06) 0%, rgba(10, 14, 20, 0.16) 58%, rgba(6, 10, 16, 0.5) 100%);
  opacity: 1;
}
/* 유리가 맑아진 만큼 아이콘 자체가 대비를 만들어야 한다 —
   흰 배경 위에서는 이 그림자가 없으면 흰 아이콘이 사라진다. */
.float-btn svg {
  width: 22px; height: 22px; fill: currentColor;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
/* 공유는 주된 행동이라 브랜드색을 입히되, 렌즈 구조는 그대로 쓴다.
   초록이 사라지지 않을 만큼만 진하게 — 뒤로가기보다 가장자리를 조금 더 준다. */
.app-share-btn {
  background: radial-gradient(circle at 50% 38%,
    rgba(160, 255, 195, 0.12) 0%,
    rgba(11, 158, 54, 0.14) 56%,
    rgba(5, 78, 28, 0.5) 100%);                    /* --primary #0b9e36 계열 */
}
.app-share-btn:active {
  background: radial-gradient(circle at 50% 38%,
    rgba(160, 255, 195, 0.12) 0%, rgba(11, 158, 54, 0.34) 56%, rgba(5, 78, 28, 0.74) 100%);
}
/* 블러를 못 쓰는 브라우저에서는 통과가 안 되므로 진하게 — 글자 위에서 안 보이는 일은 없어야 한다 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .float-btn {
    background: rgba(18, 23, 30, 0.86);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.28),
      inset 0 1.5px 1px rgba(255, 255, 255, 0.4),
      0 3px 8px rgba(8, 11, 16, 0.26),
      0 14px 32px rgba(8, 11, 16, 0.24);
  }
  .app-share-btn { background: rgba(9, 120, 42, 0.9); }
}

/* 백업 실패 안내 — 눈에 띄어야 한다 (백업된 줄 알고 앱을 지우는 사고 방지) */
.bk-bad {
  color: var(--danger) !important; font-weight: 600;
  white-space: pre-line; line-height: 1.5;
}

/* 글자가 하늘 위에서도 또렷하게 — 아래쪽을 살짝 어둡게 깔아준다 (iOS 도 같은 처리) */
.course-card.has-scene .wx-scene::after,
#detail-view.has-sky > .wx-scene::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.22) 100%);
  pointer-events: none;
}
.course-card.has-scene .cc-name,
#detail-view.has-sky .hero-name { text-shadow: 0 1px 3px rgba(0,0,0,0.22); }

/* ── 숙박 — 예약 사이트 버튼 ─────────────────────────────────────
   요금은 앱이 알 수 없으므로(합법적인 공개 API 없음) 예약 사이트에서 직접 보게 한다.
   버튼은 한 줄에 하나 — 여러 개를 늘어놓으면 어디를 눌러야 할지 오히려 헷갈린다. */
.stay-book { margin-top: 6px; }
.bk-ya { background: #ff3d6e; color: #fff; border: none; }
.bk-gc { background: #1a6dff; color: #fff; border: none; }
.bk-nv { background: #03c75a; color: #fff; border: none; }
.bk-tc { background: #2577e3; color: #fff; border: none; }
.stay-book .fa-btn { font-weight: 700; padding: 11px 6px; font-size: 13.5px; }

/* 숙소 예약 연동 여부 — 눌러보기 전에 알 수 있게 */
.stay-ok, .stay-tel {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; margin-left: 4px; vertical-align: 1px;
}
.stay-ok  { background: var(--primary-weak); color: var(--primary-ink); }
.stay-tel { background: var(--surface-press); color: var(--text-faint); }

/* 숙소 조회 조건 — 날짜·박수·인원 */
.stay-when {
  background: var(--surface); border-radius: var(--radius-s);
  box-shadow: var(--shadow-1); padding: 12px 14px; margin: 10px 0 4px;
}
.sw-row { display: flex; gap: 8px; align-items: flex-end; }
.sw-f { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sw-f.sw-n { flex: 0 0 76px; }
.sw-f span { font-size: 11.5px; color: var(--text-faint); font-weight: 600; }
.sw-f input, .sw-f select {
  width: 100%; min-width: 0; font-family: inherit; font-size: 15px; font-weight: 600;
  color: var(--text); background: var(--surface-2);
  border: none; border-radius: 10px; padding: 10px 8px; min-height: 44px;
}
.sw-note { font-size: 12px; color: var(--text-faint); margin-top: 9px; line-height: 1.5; }

/* 숙박 — 조건 먼저 받는 화면 */
.stay-form { padding: 8px 2px 0; }
.sf-title { font-size: 24px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.38; color: var(--text); }
.sf-sub { font-size: 14.5px; color: var(--text-faint); font-weight: 500; line-height: 1.6; margin: 8px 0 20px; }
.stay-form .stay-when { margin: 0 0 18px; }
.stay-form .cf-btn { width: 100%; }
/* 목록 위 조건 요약 */
.stay-cond {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border-radius: var(--radius-s);
  box-shadow: var(--shadow-1); padding: 11px 13px; margin: 10px 0 4px;
  font-size: 13.5px; font-weight: 600; color: var(--text-dim);
}
.stay-cond span { flex: 1; min-width: 0; }
.sc-edit {
  flex: none; border: none; background: var(--surface-press);
  color: var(--text-dim); font-family: inherit; font-size: 12.5px; font-weight: 700;
  padding: 8px 12px; border-radius: 999px; cursor: pointer; min-height: 36px;
}

/* 카카오 예약 — 그 숙소 페이지로 바로 가는 확실한 길 (검색 실패 없음) */
.bk-kk { background: #fee500; color: #191600; border: none; font-weight: 700; }

/* 숙소 요금·객실 한 줄 */
.fi-room { font-size: 13px; margin-top: 3px; display: flex; align-items: baseline; gap: 7px; }
.fi-room b { font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }
.fi-room span { color: var(--text-faint); font-weight: 500; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-room.none { color: var(--text-faint); font-size: 12.5px; }

/* ── 부킹 — 골팡·골프몬 연결 허브 ─────────────────────────────────
   날짜를 우리 예보로 고르게 하는 게 이 화면의 핵심이다.
   골팡·골프몬에는 날씨가 없다 — 이 결합이 원스톱의 값어치다. */
#booking-body { padding: 0 16px 28px; }

.bk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 4px 0 10px; }
.bk-day {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 0 8px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); cursor: pointer;
  transition: transform .12s var(--ease), border-color .12s var(--ease), background .12s var(--ease);
}
.bk-day:active { transform: scale(0.96); }
/* 고른 날은 테두리 2px 로 확실히 — 색만 바꾸면 야외 햇빛에서 구분이 안 된다 */
.bk-day.on { border: 2px solid var(--primary); background: var(--primary-weak); }
.bk-dow { font-size: 11px; color: var(--text-faint); font-weight: 600; }
.bk-day.on .bk-dow { color: var(--primary-ink); }
.bk-dow.sat { color: #2f6fd0; }
.bk-dow.sun { color: var(--flag-ink); }
.bk-ic { font-size: 16px; line-height: 1.1; }
.bk-t  { font-size: 11px; color: var(--text-dim); font-weight: 600; }

.bk-note {
  margin: 0 2px 14px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim);
}

.bk-links { display: flex; flex-direction: column; gap: 8px; }
.bk-card {
  display: flex; align-items: center; gap: 11px; text-decoration: none;
  padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); color: var(--text);
  transition: transform .12s var(--ease), border-color .12s var(--ease);
}
.bk-card:active { transform: scale(0.98); border-color: var(--text-faint); }
.bk-card-ic {
  width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.bk-pang  .bk-card-ic { background: #e8f2fd; }
.bk-pang2 .bk-card-ic { background: #eef1f5; }
.bk-mon   .bk-card-ic { background: var(--primary-weak); }
.bk-site  .bk-card-ic { background: var(--surface-2); }
.bk-card-tx { flex: 1; min-width: 0; }
.bk-card-tx b {
  display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bk-card-tx small { display: block; font-size: 12px; color: var(--text-faint); margin-top: 1px; }
.bk-card-go { flex: none; font-size: 15px; color: var(--text-faint); }
.bk-plat .bk-card-ic { background: var(--surface-2); }

/* 요금 자리 — 지금은 "요금 보기", 제휴가 열리면 여기에 최저가가 들어온다(설계 §6) */
.bk-price {
  flex: none; font-size: 10.5px; color: var(--text-faint); white-space: nowrap;
  padding: 3px 7px; border-radius: 999px; background: var(--surface-2);
}
/* 부제는 **한 줄**로 — 요금 배지가 들어오며 폭이 좁아져 세 줄로 넘쳤다(2026-08-20 실측) */
.bk-card-tx small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 예약처 무리 제목 — 위는 바로 가는 곳, 아래는 목록에서 한 번 더 고르는 곳 */
.bk-grp {
  margin: 14px 2px 2px; font-size: 12px; font-weight: 800; letter-spacing: -0.01em;
  color: var(--primary-ink);
}
.bk-grp:first-child { margin-top: 2px; }
.bk-grp-dim { color: var(--text-faint); font-weight: 700; }

/* ───────── 구장 선택 칸 (2026-08-20) ───────── */
.bk-pick-title { margin: 4px 2px 12px; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.bk-pick { margin-bottom: 14px; position: relative; }
.bk-pick-box {
  display: flex; align-items: center; background: var(--surface-2);
  border-radius: 12px; padding: 11px 13px;
}
.bk-pick-box input {
  flex: 1; border: 0; background: none; font: inherit; font-size: 15px;
  color: var(--text); outline: none; min-width: 0;
}
.bk-results {
  list-style: none; margin: 6px 0 0; padding: 4px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; max-height: 260px; overflow-y: auto;
}
.bk-results li {
  padding: 11px 12px; border-radius: 9px; font-size: 14.5px; cursor: pointer;
}
.bk-results li:active { background: var(--surface-2); }
.bk-res-none { color: var(--text-faint); font-size: 13px; }
.bk-favs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.bk-favs-label { font-size: 12px; color: var(--text-faint); margin-right: 2px; }
.bk-fav {
  border: 1px solid var(--line); background: var(--card); color: var(--text);
  border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer;
}
.bk-fav:active { background: var(--surface-2); }
/* 고른 구장 — 이름을 누르면 바꾸기, 별을 누르면 저장(홈과 같은 별) */
.bk-picked { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.bk-picked-name {
  flex: 1; min-width: 0; text-align: left; border: 1px solid var(--line);
  background: var(--card); color: var(--text); border-radius: 12px;
  padding: 10px 13px; font: inherit; font-size: 16px; font-weight: 800;
  letter-spacing: -0.02em; cursor: pointer;
}
.bk-picked-name small {
  display: block; font-size: 11.5px; font-weight: 600; color: var(--text-faint);
  margin-top: 2px; letter-spacing: 0;
}
.bk-picked-star {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card);
  font-size: 20px; color: var(--text-faint); cursor: pointer;
}
.bk-picked-star.on { color: #f5a623; border-color: #f5a623; }

.bk-legal {
  margin: 16px 2px 0; font-size: 11.5px; line-height: 1.6; color: var(--text-faint);
}

/* 부킹/조인 선택 — 어디로 보낼지가 여기서 갈린다 */
.bk-modes {
  display: flex; gap: 4px; padding: 4px; margin: 2px 0 8px;
  background: var(--surface-2); border-radius: 12px;
}
.bk-mode {
  flex: 1; padding: 9px 0; border: 0; border-radius: 9px; background: transparent;
  font-size: 14px; font-weight: 700; color: var(--text-faint); cursor: pointer;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.bk-mode.on { background: var(--card); color: var(--primary-ink); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.bk-mode-sub { margin: 0 2px 12px; font-size: 12.5px; color: var(--text-faint); }
/* 날짜 칸에 달까지 들어가 글자가 길어졌다 — 7칸이 안 깨지게 살짝 줄인다 */
.bk-dow { font-size: 10.5px; letter-spacing: -0.03em; white-space: nowrap; }

/* 부킹 카드 아이콘이 각 서비스 로고일 때 — 이모지 자리를 그대로 쓴다 */
.bk-card-ic img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 골팡 로고는 가로로 긴 워드마크(259×51)라 정사각 칸에 넣으면 아주 작아진다.
   로고 칸만 넓혀서 글자가 읽히게 한다. 골프몬 캐릭터는 가운데 정렬로 그대로 둔다. */
.bk-pang .bk-card-ic, .bk-mon .bk-card-ic {
  width: 52px; background: var(--surface-2); padding: 4px;
}

/* 조인 인원 고르기 */
.bk-cnt-row { margin: 0 0 12px; }
.bk-cnt-label { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px; }
.bk-cnts { display: flex; gap: 5px; flex-wrap: wrap; }
.bk-cnt {
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); font-size: 12.5px; font-weight: 600; color: var(--text-dim);
  cursor: pointer; transition: transform .12s var(--ease), border-color .12s var(--ease);
}
.bk-cnt:active { transform: scale(0.96); }
.bk-cnt.on { border: 2px solid var(--primary); background: var(--primary-weak); color: var(--primary-ink); }
.bk-cnt-note { margin: 10px 2px 0; font-size: 11.5px; line-height: 1.55; color: var(--text-faint); }

/* 기본 음성뿐일 때의 안내 — 캐디 카드 아래 한 줄 */
.cad-voice-tip {
  margin: 10px 2px 0; padding: 10px 12px; border-radius: 10px;
  background: var(--surface-2); font-size: 12.5px; line-height: 1.6; color: var(--text-dim);
}
.cad-voice-tip b { color: var(--text); font-weight: 700; }

/* 골팡 보조 경로 — PC 목록(정확) 아래에 모바일 화면(읽기 편함)을 한 줄로.
   어느 쪽도 완벽하지 않아 그 자리에서 고르게 한다(골팡이 모바일 딥링크를 막아둠). */
.bk-slot { display: flex; flex-direction: column; }
.bk-alt {
  align-self: flex-start; margin: 5px 0 0 12px; padding: 5px 2px;
  font-size: 11.5px; color: var(--text-faint); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.bk-alt:active { color: var(--primary-ink); }

/* ── 베타 의견 (시험 배포 기간 한정) ─────────────────────────────
   홈 맨 아래 한 줄짜리 초대 + BETA 배지 탭 + 푸터 링크, 세 갈래로 들어온다.
   베타가 끝나면 .beta-invite 만 지우면 나머지는 조용히 남는다. */
.beta-invite {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 2px 4px; padding: 14px 16px;
  border-radius: var(--radius-s);
  background: var(--surface); box-shadow: var(--shadow-1);
}
.bi-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bi-txt b { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; }
.bi-txt small { font-size: 12px; color: var(--text-faint); line-height: 1.45; }
.bi-btn {
  flex: none; padding: 10px 14px; border-radius: 999px; border: none;
  background: var(--primary); color: #fff;
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.bi-btn:active { background: var(--primary-press); transform: scale(0.97); }

.beta-badge { cursor: pointer; }

.fb-label {
  margin: 16px 0 8px; font-size: 13.5px; font-weight: 700; color: var(--text);
}
.fb-label small { font-weight: 500; color: var(--text-faint); }
.fb-cats { display: flex; flex-wrap: wrap; gap: 7px; }
.fb-cats .pi-chip { font-size: 13px; padding: 9px 13px; }

.fb-stars { display: flex; gap: 4px; }
.fb-stars button {
  background: none; border: none; padding: 2px 4px; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--text-faint);
}
.fb-stars button.on { color: #f5a623; }

.fb-text {
  width: 100%; box-sizing: border-box; resize: vertical;
  padding: 12px 14px; border-radius: var(--radius-s);
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text); font-family: inherit; font-size: 15px; line-height: 1.55;
}
.fb-text:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.fb-count { margin-top: 5px; text-align: right; font-size: 11.5px; color: var(--text-faint); }

.fb-note {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 10px;
  background: var(--surface-2); font-size: 12px; line-height: 1.6; color: var(--text-faint);
}
.fb-msg {
  margin: 12px 0 0; padding: 11px 12px; border-radius: 10px;
  font-size: 13px; line-height: 1.55; font-weight: 600; white-space: pre-line;
}
.fb-msg.ok { background: rgba(46, 160, 106, 0.14); color: #2ea06a; }
.fb-msg.bad { background: rgba(255, 107, 107, 0.16); color: #d94a4a; }
#fb-send { margin-top: 14px; }

/* ══════════════════════════════════════════════════════════════════
   골프 정신 — 매너 · 세계 골프 룰 · 오늘의 한마디  (2026-07-31)

   설계: docs/골프정신_설계.md
   토스 무드 그대로 — 테두리 없는 흰 카드 + 여백으로 구분.
   ⚠️ 본문(.sp-d)은 16px 이상을 지킨다. 캐디 멘트와 같은 이유로,
      읽으라고 만든 글이라 고령 이용자 가독성이 기준이다(sweep 3-11 이 검사).
   ══════════════════════════════════════════════════════════════════ */

.sp-tagline {
  margin: 0 0 14px; font-size: 13px; font-weight: 700;
  color: var(--primary); letter-spacing: -0.02em;
}

/* ── 오늘의 한마디 (화면 안) ─────────────────────────────────── */
.sp-quote {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-1); padding: 18px 16px 14px; margin-bottom: 18px;
}
.sp-q-h { font-size: 12px; font-weight: 700; color: var(--text-faint); }
.sp-q-ko {
  margin-top: 9px; font-size: 18px; font-weight: 700;
  line-height: 1.5; letter-spacing: -0.02em; word-break: keep-all;
}
.sp-q-who { margin-top: 8px; font-size: 13px; color: var(--text-dim); font-weight: 600; }
.sp-q-tip {
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line);
  font-size: 15px; line-height: 1.6; color: var(--text-dim); word-break: keep-all;
}
.sp-toggle {
  margin-top: 14px; width: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
  padding: 12px 14px; border: none; border-radius: var(--radius-s);
  background: var(--surface-2); color: var(--text-dim);
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.sp-toggle.on { background: var(--primary); color: #fff; }
.sp-tg-s { font-size: 13px; font-weight: 700; opacity: 0.85; }

/* ── 탭 ──────────────────────────────────────────────────────── */
.sp-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.sp-tab {
  padding: 9px 13px; border: none; border-radius: 999px;
  background: var(--surface-2); color: var(--text-dim);
  font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.sp-tab.on { background: var(--primary); color: #fff; }

.sp-intro {
  margin: 0 0 14px; font-size: 13.5px; line-height: 1.65;
  color: var(--text-faint); word-break: keep-all;
}
.sp-notice {
  margin: 0 0 14px; padding: 11px 13px; border-radius: var(--radius-s);
  background: var(--warn-weak); color: var(--warn);
  font-size: 13.5px; font-weight: 700; line-height: 1.6;
}

/* ── 카드 목록 ───────────────────────────────────────────────── */
.sp-group {
  margin: 22px 0 10px; font-size: 15px; font-weight: 800; letter-spacing: -0.02em;
}
.sp-group:first-child { margin-top: 0; }
.sp-list { display: flex; flex-direction: column; gap: 10px; }
.sp-item {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-1); padding: 16px 15px;
}
.sp-t { font-size: 15.5px; font-weight: 800; letter-spacing: -0.02em; word-break: keep-all; }
/* 읽는 글이라 16px — 캐디 멘트와 같은 기준(고령 이용자 가독성) */
.sp-d { margin-top: 8px; font-size: 16px; line-height: 1.65; word-break: keep-all; }
.sp-ref {
  margin-top: 10px; display: inline-block; padding: 4px 9px; border-radius: 8px;
  background: var(--surface-2); color: var(--text-faint);
  font-size: 11.5px; font-weight: 700;
}

/* ── 룰 탭 꼬리말 ────────────────────────────────────────────── */
.sp-foot {
  margin-top: 16px; padding: 14px 15px; border-radius: var(--radius);
  background: var(--surface-2);
}
.sp-foot p {
  margin: 0 0 7px; font-size: 12.5px; line-height: 1.65; color: var(--text-faint);
  word-break: keep-all;
}
.sp-link {
  display: inline-block; margin-top: 4px; font-size: 13.5px;
  font-weight: 700; color: var(--primary); text-decoration: none;
}

/* ── 홈 화면 카드 ────────────────────────────────────────────── */
#quote-card { margin-bottom: 14px; }
.sp-home {
  position: relative; background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-1); padding: 15px 40px 15px 15px; cursor: pointer;
}
.sp-home-x {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px;
  border: none; background: none; color: var(--text-faint);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.sp-home-h { font-size: 11.5px; font-weight: 700; color: var(--text-faint); }
.sp-home-q {
  margin-top: 7px; font-size: 16px; font-weight: 700;
  line-height: 1.5; letter-spacing: -0.02em; word-break: keep-all;
}
.sp-home-w { margin-top: 6px; font-size: 12.5px; color: var(--text-dim); font-weight: 600; }
.sp-home-t {
  margin-top: 8px; font-size: 14px; line-height: 1.6;
  color: var(--text-dim); word-break: keep-all;
}

/* 승락 요청 카드 — 딱 한 번만 뜬다 */
.sp-ask {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-1); padding: 16px 15px;
}
.sp-ask-t { font-size: 15.5px; font-weight: 800; letter-spacing: -0.02em; }
.sp-ask-d {
  margin-top: 7px; font-size: 14px; line-height: 1.6;
  color: var(--text-dim); word-break: keep-all;
}
.sp-ask-btns { display: flex; gap: 8px; margin-top: 13px; }
.sp-btn {
  flex: 1; padding: 12px 10px; border: none; border-radius: var(--radius-s);
  background: var(--surface-2); color: var(--text-dim);
  font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.sp-btn.on { background: var(--primary); color: #fff; }

/* 골프 정신 — 룰 번호·비교 버튼 (2026-07-31 사장님 지시: 공식/동호회를 나란히, 번호 붙여 비교) */
.sp-no {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 5px; margin-right: 7px;
  border-radius: 7px; background: var(--primary); color: #fff;
  font-size: 12.5px; font-weight: 800; vertical-align: 2px;
}
.sp-see {
  display: inline-block; margin-top: 10px; padding: 7px 11px;
  border: none; border-radius: 9px; background: var(--surface-2);
  color: var(--primary); font-family: inherit; font-size: 13px;
  font-weight: 700; cursor: pointer;
}
/* 비교로 건너왔을 때 어느 카드인지 잠깐 알려 준다 */
.sp-item.focus { box-shadow: 0 0 0 2px var(--primary), var(--shadow-1); }

/* ── 구장 공략 영상 (유튜브) ─────────────────────────────────
   골프존 홀 3D 영상과 같은 폭(max-width 460px)으로 아래로 하나씩 쌓는다.
   처음엔 썸네일만 — 누른 것만 재생기로 바뀐다(가벼움 + 데이터 절약). */
.cv-sub { margin: 0 2px 10px; font-size: 12.5px; color: var(--text-faint); }
.cv-list { display: flex; flex-direction: column; gap: 14px; }
.cv-item { max-width: 460px; width: 100%; margin: 0 auto; cursor: pointer; }
.cv-thumb {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden; background: #0d1418;
}
.cv-thumb img, .cv-thumb iframe {
  width: 100%; height: 100%; display: block; border: 0; object-fit: cover;
}
/* 재생 삼각형 — 유튜브를 흉내내지 않고 우리 톤으로 */
.cv-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px);
}
.cv-play::after {
  content: ""; position: absolute; left: 21px; top: 16px;
  border-left: 18px solid #fff; border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
.cv-item:active .cv-thumb { transform: scale(0.99); }
.cv-meta { padding: 8px 2px 0; }
.cv-meta b {
  display: block; font-size: 14px; font-weight: 700; line-height: 1.4;
  letter-spacing: -0.02em; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cv-meta small { display: block; margin-top: 3px; font-size: 12px; color: var(--text-faint); }

/* 지표 카드가 '지금 값'이 아니라 앞으로 8시간 종합임을 밝히는 한 줄 (2026-08-17) */
.metric-scope {
  margin: 18px 4px 6px; font-size: 12px; line-height: 1.5;
  color: var(--text-dim, #667);
}
.metric-scope b { color: var(--primary-ink, #0a8a2f); font-weight: 700; }

/* 요금이 들어온 카드 — 값이 있으면 진하게, 최저가는 테두리로 (2026-08-20) */
.bk-price.has { color: var(--primary-ink); font-weight: 800; background: var(--primary-weak); font-size: 12px; }
.bk-price.dim { opacity: 0.6; }
/* 🔴 '최저가' 배지는 2026-08-24 삭제했다 — 요금을 못 받아오는 예약처(골프몬 등)가 있는데
   아는 것 중 최저를 '최저가'라 불러 **거짓 정보**가 됐다(골프몬 12만 < 우리 표시 13만).
   되살리지 말 것. 모든 예약처 요금을 받게 되기 전에는 최상급을 쓰지 않는다. */
.bk-slot { position: relative; }
.bk-price-src {
  margin: 10px 2px 0; padding: 9px 11px; border-radius: 10px;
  background: var(--surface-2); color: var(--text-dim);
  font-size: 11.5px; line-height: 1.55;
}

/* 날짜 칸의 요금 — 날씨 바로 아래. "제일 싼 날"을 한눈에 (2026-08-20) */
.bk-fee {
  display: block; margin-top: 3px; font-size: 10.5px; font-weight: 700;
  color: var(--text-faint); letter-spacing: -0.02em;
}
.bk-fee.best { color: var(--primary-ink); }
.bk-fee.urgent::after { content: "⚡"; font-size: 9px; }
.bk-day.cheap { border-color: var(--brand); }
.bk-pnote { color: var(--primary-ink); font-weight: 700; margin-bottom: 4px; }

/* 오늘의 한마디 매일 알림 팝업 (2026-08-20) */
.sp-time-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 14px 0 6px; font-size: 14.5px; font-weight: 700;
}
.sp-time-row input[type="time"] {
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
  font: inherit; font-size: 16px; background: var(--surface-2); color: var(--text);
}
.sp-notify-note { margin: 0 2px 14px; font-size: 11.5px; line-height: 1.5; color: var(--text-faint); }

/* 날짜 칸의 요금 출처 — "어디 값이냐"에 답한다 (2026-08-25 사장님 요청) */
.bk-fee-src {
  display: block; margin-top: 1px; font-size: 9px; font-weight: 700;
  color: var(--text-faint); letter-spacing: -0.03em;
}