/* Quiet landscapes, warm paper, and clear controls. Fonts are served locally. */
@import url("assets/fonts/cards.css?v=fukenoyu-1");
@import url("assets/fonts/bathnames.css");
:root {
  --paper: #f3f0e7;
  --surface: #fbf9f3;
  --ink: #303832;
  --muted: #626d64;
  --moss: #344f43;
  --deep: #192e29;
  --gold: #c5ad7c;
  --gensei: #a5832f;
  --line: #dcd9ce;
  --serif: "Iowan Old Style", "Palatino Linotype", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.7; }
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid #a17b3f; outline-offset: 4px;
}
button, a, input, select { -webkit-tap-highlight-color: transparent; }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: 32px; }
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--surface); padding: 30px 0 76px;
  background: linear-gradient(120deg, #192e29 10%, #293d33 65%, #35483b);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--hero-bg-shade, linear-gradient(90deg, #102a23d1 0%, #102a239e 38%, #102a236b 62%, #102a231a 80%, #102a2305 100%)), url("assets/hero-onsen-bg.webp");
  background-repeat: no-repeat;
  background-size: cover, var(--hero-bg-size, 115% auto);
  background-position: center, var(--hero-bg-position, 0% 15%);
}
:root[data-hero-background="mist"] { --hero-bg-size: 115% auto; --hero-bg-position: 0% 15%; }
:root[data-hero-background="ridge"] { --hero-bg-size: 140% auto; --hero-bg-position: 35% 0%; }
:root[data-hero-background="water"] { --hero-bg-size: 140% auto; --hero-bg-position: 30% 100%; }
:root[data-hero-background="ryokan"] { --hero-bg-size: 125% auto; --hero-bg-position: 100% 35%; }
:root[data-hero-background="lantern"] { --hero-bg-size: 155% auto; --hero-bg-position: 100% 60%; }
@media (max-width: 900px) {
  :root { --hero-bg-shade: linear-gradient(90deg, #102a23d6 0%, #102a23c7 38%, #102a23ab 62%, #102a2326 82%, #102a230a 100%); }
  .hero .hero-main::before { inset: 32px -24px 100px; background: radial-gradient(ellipse 85% 95% at 42% 48%, #081e18f2 0%, #081e18e6 62%, transparent 100%); }
  :root[data-hero-background="mist"] { --hero-bg-size: auto 115%; --hero-bg-position: 25% 15%; }
  :root[data-hero-background="ridge"] { --hero-bg-size: auto 140%; --hero-bg-position: 47% 0%; }
  :root[data-hero-background="water"] { --hero-bg-size: auto 185%; --hero-bg-position: 50% 100%; }
  :root[data-hero-background="ryokan"] { --hero-bg-size: auto 115%; --hero-bg-position: 87% 50%; }
  :root[data-hero-background="lantern"] { --hero-bg-size: auto 150%; --hero-bg-position: 100% 60%; }
}
.top { display: flex; align-items: center; justify-content: space-between; gap: 20px clamp(10px, 2vw, 20px); flex-wrap: wrap; }
.logo { font-size: 22.8px; font-weight: 650; letter-spacing: .08em; line-height: 1.4; }
.logo small { display: block; color: #bdc8b8; font-size: 11.8px; letter-spacing: .17em; line-height: 1.5; margin-top: 8px; font-weight: 500; }
.login { border: 1px solid #a7b19d70; background: transparent; color: #e2e5d9; padding: 10px 16px; border-radius: 4px; font-size: 12px; min-height: 44px; max-width: 100%; }
/* Googleログイン(設定がある環境だけ表示)。ヘッダーの既存ボタンの下に、控えめな小さな行として出す */
.account-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; color: #bdc8b8; font-size: 11.5px; line-height: 1.6; }
.account-row[hidden], .account-row [hidden] { display: none; }
.account-name { color: #e2e5d9; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-remember { display: inline-flex; align-items: center; gap: 6px; }
.account-remember input { width: 16px; height: 16px; accent-color: var(--gold); }
.account-row .account-msg { flex-basis: 100%; margin: 0; max-width: none; color: var(--gold); font-size: 11.5px; line-height: 1.6; }
.login:disabled { opacity: .6; cursor: default; }
/* Compact account header; the panel changes presentation only. */
.top { flex-wrap: nowrap; }
.account-tools { position: relative; display: flex; align-items: center; gap: 8px; flex: none; }
.account-compact-status { min-height: 36px; padding: 4px 10px; border: 1px solid #c5ad7c80; border-radius: 4px; background: transparent; color: var(--gold); font-size: 11.5px; line-height: 1.5; white-space: nowrap; }
.account-compact-status:disabled { opacity: .6; cursor: default; }
.account-header-notice { position: absolute; top: calc(100% + 4px); right: 0; color: #e5c78c; font-size: 10.5px; line-height: 1.5; white-space: nowrap; }
.account-compact-status[data-state="synced"] { color: #d1dbc9; }
.account-compact-status[data-state="error"], .account-compact-status[data-state="conflicts"], .account-compact-status[data-state="cloudReset"] { color: #e5c78c; }
.account-settings { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; color: #e7e3d6; background: transparent; border: 0; }
.account-settings[aria-expanded="true"] { color: var(--gold); }
.account-panel { position: fixed; z-index: 1200; width: min(246px, calc(100vw - 32px)); margin: 0; padding: 12px; overflow-y: auto; color: #e5e9e0; background: #2d453b; border: 1px solid #5a7064; border-radius: 8px; font-size: 13px; line-height: 1.7; }
.account-panel[hidden], .account-panel [hidden] { display: none !important; }
.account-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 5px; }
.account-panel h2 { margin: 0; color: #f3f0e7; font: inherit; font-weight: 600; font-size: 14px; letter-spacing: .04em; }
.account-panel-close { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-right: -5px; padding: 0; border: 0; background: transparent; color: #c0cabe; font-size: 19px; line-height: 1; }
.account-panel .account-row { display: block; margin: 0; color: #f3f0e7; font-size: 13px; line-height: 1.7; }
.account-panel .account-identity { padding: 5px 0 10px; overflow-wrap: anywhere; }
.account-panel .account-name { color: #e5e9e0; font-size: 13px; font-weight: 400; white-space: normal; overflow-wrap: anywhere; }
#accountSignedOut, .account-local-only { color: #c5ad7c; font-size: 12px; }
.account-divider { height: 0; margin: 8px 0 12px; border: 0; border-top: 1px solid #5a7064; }
.account-sync-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; color: #e5e9e0; font-size: 13px; }
#accountSyncText { color: #bfccad; font-size: 11px; }
.account-source-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.account-panel .account-cloud-info { margin: 0; }
.account-cloud-info summary { display: flex; align-items: center; gap: 7px; min-height: 38px; cursor: pointer; list-style: none; color: #e5e9e0; }
.account-cloud-info summary::before { content: 'ⓘ'; font-size: 14px; }
.account-cloud-info summary::-webkit-details-marker { display: none; }
.account-cloud-info summary span { margin-left: auto; color: #c5ad7c; font-size: 14px; }
.account-cloud-info[open] summary span { transform: rotate(180deg); }
.account-panel .account-note, .account-panel .account-msg { margin: 0 0 8px; color: #c5ad7c; font-size: 11.5px; line-height: 1.8; overflow-wrap: anywhere; }
.account-panel .account-remember { display: flex; align-items: flex-start; margin: 4px 0 8px; gap: 8px; color: #c5ad7c; font-size: 11px; line-height: 1.7; }
.account-panel .account-remember input { flex: none; margin: 2px 0 0; }
.account-panel .login, .account-panel .sync-btn { display: block; width: 100%; min-height: 38px; padding: 8px 0; border: 0; border-radius: 3px; background: transparent; color: #e5e9e0; text-align: left; font-size: 13px; }
.account-panel .login::before { content: '↪'; margin-right: 7px; }
.account-panel .login { min-height: 44px; }
.account-panel .account-sync-actions { display: flex; flex-wrap: wrap; gap: 0 8px; }
.account-panel .account-sync-actions .sync-btn { width: auto; color: #c5ad7c; font-size: 12px; }
.account-panel .account-delete { color: #d2bd81; font-size: 11px; min-height: 28px; padding-bottom: 0; }
.account-subheading { margin: 8px 0 6px; color: var(--gold); font: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; }
.account-backup-tools { display: flex; flex-direction: column; gap: 6px; }
.account-panel .account-backup-btn { display: inline-flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 7px 10px; border: 1px solid #5a7064; border-radius: 4px; background: #243830; color: #e5e9e0; text-align: left; font-size: 12.5px; }
.account-panel .account-backup-btn:hover { background: #344f43; border-color: #c5ad7ca0; color: #f3f0e7; }
.account-panel .account-backup-btn svg { flex: none; color: var(--gold); }
.account-panel button:hover, .account-cloud-info summary:hover { background: #c5ad7c0a; }
.account-panel button:focus-visible, .account-panel summary:focus-visible { outline: 2px solid #c5ad7c; outline-offset: 2px; }
@media (max-width: 360px) {
  .top { gap: 8px; }
  .account-tools { gap: 4px; }
  .account-compact-status { padding-inline: 6px; font-size: 10px; }
  .hero .logo small { font-size: 9px; letter-spacing: .09em; }
  .hero .beta-badge-header { margin-left: 3px; font-size: 8px; padding: 1px 4px; }
}
/* クラウド同期(試験環境だけ)。ログイン中の控えめな状態表示と、必要な時だけ出る小さなボタン */
.sync-status { color: #bdc8b8; }
.sync-status[data-state="synced"] { color: #cfe0c4; }
.sync-status[data-state="error"], .sync-status[data-state="conflicts"] { color: var(--gold); }
.sync-btn { border: 1px solid #a7b19d70; background: transparent; color: #e2e5d9; padding: 6px 12px; border-radius: 4px; font-size: 11.5px; min-height: 36px; }
.sync-btn[hidden] { display: none; }
.sync-dialog .tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sync-dialog ul { margin: 8px 0; padding-left: 20px; }
.sync-dialog button { min-height: 44px; }
.sync-conflict-list { list-style: none; padding: 0 !important; }
.sync-conflict { border-top: 1px solid var(--line); padding: 12px 0; }
.sync-conflict p { margin: 6px 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.cloud-delete-scope { border: 1px solid var(--line); border-radius: 6px; margin: 12px 0; padding: 8px 12px; }
.cloud-delete-scope label, .cloud-delete-ack { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; }
.cloud-delete-word { display: block; margin: 10px 0; }
.cloud-delete-word input { display: block; margin-top: 6px; padding: 10px; width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 4px; font: inherit; background: var(--surface); color: var(--ink); }
.sync-dialog h3 { margin: 14px 0 4px; font-size: 14px; }
.sync-dialog .danger { background: #8a3d2f; border-color: #8a3d2f; color: #fffaf0; }
.sync-dialog .danger:disabled { opacity: .45; }
.memo-section { margin-top: 18px; }
.modal .memo-section { margin: 0 0 6px; padding-top: 20px; border-top: 1px solid var(--line); } /* 詳細画面の最後(施設情報 → 訪問記録 → 施設メモ) */
.memo-section textarea::placeholder { color: var(--ink); opacity: .4; }
@media (max-width: 600px) { .memo-section textarea { min-height: 72px; } } /* 狭い画面ではプレースホルダーが2行になるため、切れないように少し高くする */
.memo-section textarea { margin-top: 8px; width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; resize: vertical; }
.hero-main { position: relative; isolation: isolate; padding: 76px 0 32px; }
.hero-main::before { content: ""; position: absolute; inset: 60px 10% 100px -32px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 90% 75% at 30% 50%, #081e18c7 0%, #081e18ad 55%, transparent 100%); filter: blur(20px); }
.eyebrow { color: var(--gold); font-size: 11px; letter-spacing: .19em; line-height: 1.6; font-weight: 600; }
.hero-main > .eyebrow { font-size: 13.2px; letter-spacing: .16em; line-height: 1.7; }
.hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(25.5px, 4.08vw, 51px); letter-spacing: .015em; line-height: 1.5; min-height: 1.5em; margin: 22px 0 26px; text-wrap: balance; line-break: strict; }
.hero h1 span { display: inline-block; max-width: 100%; }
.hero p { line-height: 2; color: #d4dbce; font-size: 15px; max-width: 620px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.btn.icon-text-link, .icon-text-link { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.external-link-icon { width: 14px; height: 14px; flex: none; }
.btn { display: inline-flex; justify-content: center; align-items: center; text-align: center; min-height: 46px; border-radius: 4px; padding: 12px 22px; border: 1px solid var(--line); background: var(--surface); color: var(--moss); font-size: 14px; font-weight: 600; line-height: 1.5; white-space: normal; }
.btn.primary { background: var(--gold); border-color: var(--gold); color: #27352a; }
.btn.dark { background: var(--moss); border-color: var(--moss); color: var(--surface); }
.btn.outline { background: transparent; color: var(--surface); border-color: #a7b19d80; }
.muted, .note, .lead, .sub { color: var(--muted); }
.sub { font-size: 13px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 16px #30383205; }
.dashboard { margin-top: -30px; position: relative; scroll-margin-top: 28px; }
.beta-badge { display: inline-block; flex: none; white-space: nowrap; padding: 2px 6px; border: 1px solid #c5ad7c; border-radius: 3px; color: #785b2f; background: #eee7d8; font-size: 10px; font-weight: 600; line-height: 1.5; letter-spacing: .08em; vertical-align: middle; }
.beta-badge-header { margin-left: 6px; color: var(--gold); background: transparent; border-color: #c5ad7c80; font-size: 9px; }
.progress-summary { padding: 16px; background: var(--paper); box-shadow: none; }
.progress-rings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.progress-card { --ring-color: var(--moss); min-width: 0; padding: 12px 10px; text-align: center; }
.progress-card-chi { --ring-color: #a58a52; }
.progress-card-kake { --ring-color: #567864; }
.progress-card-gensei { --ring-color: var(--gensei); }
.progress-card h3 { margin: 0 0 10px; color: var(--moss); font-size: 14px; font-weight: 500; line-height: 1.5; }
.progress-label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; vertical-align: top; }
.progress-help { position: relative; }
.progress-help-button { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0; border: 0; background: transparent; color: var(--gensei); font: inherit; font-size: 11px; }
.progress-help-button:focus-visible { outline: 2px solid var(--gensei); outline-offset: 2px; }
.progress-help-tip { position: absolute; z-index: 10; top: 100%; right: 0; width: min(248px, calc(100vw - 48px)); padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--moss); font-size: 12px; font-weight: 400; line-height: 1.7; text-align: left; white-space: normal; }
.progress-ring { position: relative; width: 104px; height: 104px; margin: auto; }
.progress-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 6; }
.progress-ring-track { stroke: #e3e4dd; }
.progress-ring-fill { stroke: var(--ring-color); stroke-dasharray: 100; stroke-linecap: round; }
.progress-percent { position: absolute; inset: 0; display: grid; place-items: center; color: var(--moss); font-family: var(--serif); font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1; }
.progress-count { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.stathead { font-size: 11px; letter-spacing: .1em; color: var(--muted); font-weight: 600; line-height: 1.7; }
.heading { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin: 72px 0 26px; }
.section-kicker { color: #766744; margin-bottom: 10px; font-size: 10px; letter-spacing: .17em; }
#regional-progress .section-kicker, #onsens .section-kicker { font-size: 12px; }
h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 27px; letter-spacing: .04em; line-height: 1.5; text-wrap: balance; }
.lead { font-size: 13px; margin-top: 10px; line-height: 1.8; max-width: 62ch; }
.prefgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pref-progress { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); min-width: 0; }
.pref-progress-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; cursor: pointer; list-style: none; }
.pref-progress-toggle::-webkit-details-marker { display: none; }
.pref-progress-toggle::marker { content: ""; }
.pref-progress-toggle strong { font-size: 16px; font-weight: 500; line-height: 1.6; }
.pref-progress-chevron { flex: none; color: var(--muted); }
.pref-progress[open] .pref-progress-chevron { transform: rotate(180deg); }
.pref-progress .prefgrid { padding: 0 16px 16px; }
.pref-progress-toggle:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }
.pref { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); text-align: left; padding: 20px; }
.pref strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.pref .fraction { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pref .mini { height: 3px; background: #e3e4d9; overflow: hidden; border-radius: 1px; margin-top: 16px; }
.mini i { display: block; background: #597461; height: 100%; }
.pref.selected { border-color: #748774; background: #e9eee3; }
.filters { padding: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: end; }
.filters .search-row { grid-column: 1 / -1; display: flex; align-items: end; gap: 12px; min-width: 0; }
.search-row .filter { flex: 1; }
.filters .search-clear, .filters .stay-save { flex: none; height: 46px; padding: 10px 16px; border-color: var(--line); background: transparent; color: var(--moss); }
.filters .search-clear { border-color: #b9ccb6; background: #e7eee5; color: #294338; transition: background-color .15s, border-color .15s; }
.filters .search-clear:hover { border-color: #9bb497; background: #d3e0d0; }
@media (min-width: 601px) {
  .filters { padding: 18px; gap: 12px; }
  /* PC・タブレット: 検索欄と宿泊条件は必要な幅だけ使い、左揃え(余った幅を埋めない) */
  .filters .search-row { justify-content: flex-start; }
  .search-row .filter { flex: 0 1 420px; max-width: 420px; }
  .stay-form { justify-content: flex-start; }
  .stay-form .stay-field.stay-date { flex: 0 1 190px; }
  .stay-form .stay-field.stay-nights { flex: 0 1 100px; }
  .stay-form .stay-field.stay-adults { flex: 0 1 110px; }
  .filters .filter label { margin-bottom: 4px; }
  .filters input, .filters select, .filters .btn { height: 46px; }
}
.filter { min-width: 0; }
.filter label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 8px; font-weight: 500; line-height: 1.5; }
.filter input, .filter select { width: 100%; border: 1px solid #cecec1; padding: 11px 12px; border-radius: 4px; background: #fdfbf6; min-height: 46px; color: var(--ink); font-size: 14px; }
.filter input::placeholder { color: #687167; opacity: 1; }
.collection-picker { position: relative; font-size: 14px; }
.collection-picker summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 46px; padding: 0 12px; border: 1px solid #cecec1; border-radius: 4px; background: #fdfbf6; cursor: pointer; list-style: none; }
.collection-picker summary::-webkit-details-marker { display: none; }
/* 絞り込み中(「すべて」以外)の4つのプルダウン */
.filter select.is-filtered, .collection-picker summary.is-filtered { border-color: #b9ccb6; background-color: #e7eee5; color: #294338; }
.collection-picker summary { -webkit-tap-highlight-color: transparent; user-select: none; }
.collection-picker summary::after { content: '⌄'; color: var(--moss); }
.collection-picker summary:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.collection-options { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: 100%; padding: 4px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.collection-options button { display: block; width: 100%; min-height: 44px; padding: 10px 8px; border: 0; border-radius: 2px; background: transparent; text-align: left; color: var(--ink); font-size: 14px; }
.collection-options button:hover, .collection-options button[aria-pressed="true"] { background: #e9eee3; }
.collection-label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.collection-label .kake-svg { color: var(--moss); }
.collection-label .gensei-svg { color: var(--gensei); }
.resulthead { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; margin: 26px 0 18px; font-size: 12px; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.card-top { height: 3px; background: #637965; }
.card-content { padding: 16px; }
.tags { display: flex; gap: 7px; flex-wrap: wrap; }
.tag { font-size: 11px; color: #4a5d4c; background: #e9ede2; padding: 4px 8px; border-radius: 2px; overflow-wrap: anywhere; }
.tag.gold { background: #eee8d8; color: #746039; }
/* 「秘♨」(日本秘湯を守る会 加盟宿)は「地♨」と同じ見た目のリンク。サイズ・色・枠・余白は .tag.gold と共通で、下線だけ消す */
a.tag.gold { text-decoration: none; cursor: pointer; }
a.tag.gold:link, a.tag.gold:visited { color: #746039; }
a.tag.gold:focus-visible { outline: 2px solid var(--moss); outline-offset: 1px; }
.card h3 { font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 20px; font-weight: 600; line-height: 1.4; margin: 8px 0 6px; overflow-wrap: anywhere; }
.facility { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.facility-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.card .facility { display: block; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.card .facility-name { display: inline; padding: 0; }
.card .facility-name-link { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.card .facility-name-link:hover { color: var(--moss); text-decoration-color: currentColor; }
/* 詳細の主見出し全体を公式リンクにする。下線を使わず、色とフォーカス枠で示す。 */
.modal .facility-name-link { display: block; padding-block: 10px; margin-block: -10px; color: inherit; text-decoration: none; }
.modal .facility-name-link:hover, .modal .facility-name-link:focus-visible { color: var(--moss); }
.modal .facility-name-link:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.modal .facility-name-link .external-link-icon { display: inline-block; vertical-align: baseline; margin-left: 4px; opacity: .6; }
.card .map-link { flex: none; width: 28px; min-height: 28px; }
.facility-links { display: inline-flex; align-items: center; flex: none; gap: 2px; }
.facility-link, .map-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; color: var(--moss); border-radius: 4px; }
.facility-link { font-size: 11px; letter-spacing: .06em; }
.map-link { position: relative; }
.map-link svg { flex: none; }
.map-tooltip { position: absolute; right: 0; bottom: calc(100% + 6px); width: max-content; padding: 6px 10px; border-radius: 4px; background: var(--deep); color: var(--surface); font-size: 11px; line-height: 1.6; white-space: nowrap; visibility: hidden; opacity: 0; pointer-events: none; z-index: 2; }
.map-link:focus-visible .map-tooltip { visibility: visible; opacity: 1; }
#modalTitle { margin: 12px 0 6px; color: var(--muted); font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 16px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
#modalSubtitle .facility { margin: 0 0 20px; font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif; font-size: 24px; font-weight: 600; line-height: 1.45; color: #866329; }
.visit-count { font-size: 11px; color: var(--muted); }
.visit-section { border-top: 1px solid var(--line); padding-top: 20px; margin: 22px 0; }
.visit-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.visit-actions > * { min-width: 0; min-height: 46px; }
.visit-section h3, .memo-section h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; margin: 0; }
.visit-summary { font-size: 12px; color: var(--muted); line-height: 1.9; }
.visit-list { list-style: none; padding: 0; margin: 16px 0; }
.visit-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 8px 0; font-size: 13px; }
.visit-list li > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.visit-list small { display: block; }
.visit-row-actions { display: flex; flex: none; gap: 4px; }
.visit-row-actions button { min-width: 44px; min-height: 44px; border: 0; border-radius: 4px; background: transparent; color: var(--moss); font-size: 12px; }
.visit-form { background: #f1f3e9; border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; margin-top: 12px; }
/* 訪問日と訪問形態は同じ行(収まらない幅だけ縦並び)。ラベルは各入力欄の上。 */
.visit-fields { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.visit-field { min-width: 0; }
.visit-field-date { flex: 1 1 150px; max-width: 190px; }
.visit-field-type { flex: 1 1 110px; max-width: 140px; }
.visit-field > label { display: block; margin-bottom: 4px; font-size: 13px; }
.visit-form .visit-field input[type=date], .visit-form .visit-field select { height: 46px; } /* 同じ行の2つの入力欄の高さを揃える */
.visit-form select { display: block; width: 100%; min-height: 44px; margin: 0; padding: 8px; border: 1px solid #cecec1; border-radius: 4px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
.visit-type { display: inline-block; margin-left: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.sync-consent-error { color: #8b452f; overflow-wrap: anywhere; }
.sync-heading-phrase { display: inline-block; }
.visit-form input[type=date] { display: block; width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 8px; border: 1px solid #cecec1; border-radius: 4px; background: var(--surface); color: var(--ink); }
.visit-form .unknown-date { display: flex; gap: 8px; align-items: center; min-height: 44px; margin: 4px 0 2px; font-size: 13px; }
.unknown-date input { width: 18px; height: 18px; accent-color: var(--moss); }
.visit-error { font-size: 12px; color: #8b432d; margin-bottom: 0; }
.migration-panel { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 8px; }
[hidden] { display: none !important; }
.desc { line-height: 1.85; font-size: 13px; color: var(--muted); min-height: 48px; margin-top: 20px; overflow-wrap: anywhere; }
.card-foot { border-top: 1px solid #e4e1d7; padding: 16px 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; }
.stamp { border: 1px solid #cbd1c3; background: #f1f3e9; color: var(--moss); border-radius: 4px; padding: 10px 13px; min-height: 44px; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: normal; }
.stamp.done { background: var(--moss); color: var(--surface); border-color: var(--moss); }
.link { font-size: 12px; font-weight: 500; color: var(--moss); min-height: 44px; padding: 8px 0; }
.more { display: flex; margin: 32px auto 0; min-width: 190px; }
.footer { margin:72px 0 0; padding:0; padding-bottom:env(safe-area-inset-bottom); border-top:1px solid #c5ad7c80; background:var(--deep); color:var(--paper); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; min-height:58px; padding-block:7px; font-size:12px; line-height:1.6; }
.footer-brand { font-family:var(--serif); font-size:14px; white-space:nowrap; }
.footer-copy { margin-left:4px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:11px; opacity:.8; }
.footer-about { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0; border:0; background:transparent; color:var(--gold); font:inherit; white-space:nowrap; }
.footer-about svg { flex:none; }
.footer-about:hover { color:var(--paper); }
.footer-about:focus-visible { outline:2px solid var(--gold); outline-offset:4px; border-radius:2px; }
.about-brand { font-family:var(--serif); font-size:16px; }
@media (max-width:400px) { .footer-inner { gap:8px; } .footer-brand { font-size:13px; } .footer-copy { font-size:10px; } .footer-about { font-size:11px; gap:4px; } }
.empty { grid-column: 1 / -1; text-align: center; padding: 56px 20px; color: var(--muted); }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--deep); color: var(--surface); padding: 14px 20px; border-radius: 6px; box-shadow: 0 4px 16px #0002; z-index: 10; max-width: 90%; font-size: 13px; display: none; }
.modal-bg { position: fixed; inset: 0; background: #16261fd0; z-index: 20; display: none; align-items: center; justify-content: center; padding: 24px; }
.modal { background: var(--surface); width: min(620px, 100%); border-radius: 8px; max-height: 90vh; overflow: auto; padding: 36px; position: relative; }
.close { position: absolute; right: 16px; top: 16px; border: 1px solid var(--line); background: #eeeee4; color: var(--ink); width: 44px; height: 44px; border-radius: 4px; }
.details { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px 24px; font-size: 13px; margin: 20px 0; }
.details dt { color: var(--muted); }
.details dd { margin: 0; line-height: 1.8; overflow-wrap: anywhere; }
.feature-baths { margin: 20px 0 0; }
.visit-meta { margin: 14px 0; }
.feature-baths:not([hidden]) + .details { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.feature-baths[hidden] { display: none; }
/* 「代表的な湯」の見出しは、どの施設でも太字(700)にそろえ、端末の明朝1種類で描く。各浴場名(.feature-bath h4)は施設名(#modalSubtitle .facility)と同じ Noto Sans JP・太さ600。cards.css のWebフォントは施設名などの固定文字しか持たないため、浴場名の全ての字を収めた別のサブセット(assets/fonts/bathnames.css。scripts/build-bath-name-font.cjs で生成、tests/bath-name-fonts.test.cjs で字の不足を検出)を読み込み、一部の字だけ端末の代替フォント(Androidでは細く見える)になるのを防ぐ。 */
.modal .feature-baths h3 { font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-weight: 700; font-size: 22px; line-height: 1.4; margin: 0 0 10px; }
.modal .visit-section h3, .modal .memo-section h3 { font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif; font-weight: 600; font-size: 18px; line-height: 1.4; }
.feature-bath-section-note { margin: -4px 0 10px; font-size: 12px; line-height: 1.8; color: var(--muted); }
.feature-bath-list { list-style: none; margin: 0; padding: 0; }
.feature-bath + .feature-bath { margin-top: 16px; }
.feature-bath-head { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.feature-bath-head .bath-colors { align-self: center; margin-inline-start: -4px; }
.feature-bath-head .kake-wrap { align-self: center; margin-inline-start: -4px; }
.feature-bath-head .bath-colors + .kake-wrap { margin-inline-start: -10px; }
.feature-bath h4 { margin: 0; font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 15px; font-weight: 600; line-height: 1.5; color: #866329; overflow-wrap: anywhere; }
.feature-bath-meta { font-size: 12px; color: var(--moss); letter-spacing: .04em; }
.feature-bath-color, .feature-bath-note { margin: 2px 0 0; font-size: 12px; line-height: 1.8; color: var(--muted); overflow-wrap: anywhere; }
.feature-bath-tags { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.feature-bath-tags .tag { font-size: 11px; line-height: 1.4; padding: 2px 7px; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tools button { border: 1px solid #cbd1c3; border-radius: 4px; background: transparent; color: var(--moss); padding: 10px 12px; font-size: 12px; min-height: 44px; line-height: 1.5; }
.note { font-size: 12px; line-height: 1.9; }
/* 検索パネル内の宿泊条件(施設の絞り込みではない独立セクション) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stay-search[hidden] { display: none !important; }
.filters .stay-search { grid-column: 1 / -1; margin-top: 0; padding-top: 10px; border-top: 1px solid var(--line); min-width: 0; }
.stay-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.stay-field { flex: 0 1 104px; min-width: 88px; }
.stay-field.stay-date { flex: 1 1 150px; }
.stay-field label { display: block; margin-bottom: 4px; font-size: 12px; white-space: nowrap; }
.filters .stay-field input, .filters .stay-field select { display: block; width: 100%; min-width: 0; height: 46px; padding: 8px; border: 1px solid #cecec1; border-radius: 4px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
/* 施設カードのベッドアイコン: 地図ピン(.map-link)と同じ大きさ・色。タップ領域だけ余白で広げる */
.facility-meta .map-link:not(.stay-link) + .stay-link { margin-left: -6px; } /* 地図ピンのすぐ右(アイコン同士の間隔を詰める) */
.card .stay-link::before { content: ''; position: absolute; inset: -8px -2px; }
@media (max-width: 600px) {
}
.hide { display: none !important; }
#onsens { scroll-margin-top: 28px; }
#onsen-map { scroll-margin-top: 28px; }
.map-panel { overflow: hidden; }
.map-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 18px; padding: 24px; }
.map-toolbar .filter { flex: 1 1 180px; }
.map-legend { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding-bottom: 12px; font-size: 12px; color: var(--muted); }
.map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; }
.is-visited { --marker-color: #344f43; }
.is-unvisited { --marker-color: #a17b3f; }
.legend-dot { background: var(--marker-color); }
.map-idle { display: grid; place-content: center; text-align: center; gap: 12px; min-height: 260px; padding: 28px; background: #e8ece2; color: var(--moss); }
.map-idle p { font-family: var(--serif); }
.map-canvas { height: clamp(380px, 60vh, 620px); background: #e7ebe2; z-index: 0; font-family: inherit; }
/* Warm ink and paper tones belong only to the background tiles, below markers and controls. */
#mapCanvas .leaflet-tile-pane .leaflet-tile { filter: grayscale(1) sepia(.16) saturate(.55) contrast(.94) brightness(1.03); }
.map-notice { margin: 0; padding: 12px 24px; }
.map-pending { margin-top: 16px; color: var(--muted); font-size: 12px; }
.map-pending summary { cursor: pointer; min-height: 44px; display: list-item; padding-block: 10px; }
.map-pending ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.map-pending button { min-height: 44px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--moss); font: inherit; padding: 8px 12px; }
/* Leaflet CSS loads later and sets marker icons to block. Keep the dot centered on its coordinate anchor. */
.map-canvas .onsen-map-marker { display: grid; place-items: center; background: transparent; }
/* Keep the focusable anchor, but let only the painted circle receive pointer input.
   The ID selector also wins over Leaflet's interactive-icon rule loaded later. */
#mapCanvas .onsen-map-marker { pointer-events: none; }
#mapCanvas .onsen-map-marker span { pointer-events: auto; clip-path: circle(50%); }
.onsen-map-marker span { display: block; width: 20px; height: 20px; background: var(--marker-color); border: 3px solid var(--surface); border-radius: 50%; box-shadow: 0 1px 5px #192e2940; }
.onsen-map-marker.is-visited span::after { content: ""; display: block; width: 6px; height: 3px; border-left: 1.5px solid var(--surface); border-bottom: 1.5px solid var(--surface); transform: rotate(-45deg); margin: 4px auto; }
/* 試作: 県別地図の♨マーカー(map.js の MARKER_STYLE='spring')。♨のグリフ(BIZ UDゴシック・SIL OFL 1.1、assets/licenses/BIZUDGothic-OFL.txt)をSVGパスとして固定し、マスクで色(--marker-color)を塗る。
   文字要素は使わない。背景の丸・枠・バッジは付けない。見た目は幅21px、タップ可能な円(span)は24px。近接マーカーの選択テストが円の重なりを前提にしているため、円はこれ以上大きくしていない。
   丸に戻す場合は MARKER_STYLE='dot' にするだけでよく、このブロックは使われなくなる。 */
:root { --spring-glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-60 -60 2128 1830%22%3E%3Cpath d=%22M1735 967Q1968 1081 1968 1261Q1968 1459 1743 1590Q1487 1739 1024 1739Q604 1739 351 1615Q80 1482 80 1259Q80 1080 313 967L369 1043Q299 1078 259 1134Q223 1186 223 1238Q223 1355 376 1451Q601 1592 1025 1592Q1408 1592 1633 1473Q1825 1372 1825 1237Q1825 1118 1679 1043ZM903 1344Q1014 1197 1014 1004Q1014 852 916 662Q823 482 823 333Q823 184 952 0L1041 37Q979 166 979 293Q979 432 1086 641Q1176 818 1176 974Q1176 1191 983 1387ZM504 1247Q584 1126 584 993Q584 869 494 684Q430 552 430 430Q430 291 551 121L631 156Q571 267 571 378Q571 503 653 670Q729 824 729 955Q729 1038 688 1130Q650 1217 582 1288ZM1352 1250Q1426 1133 1426 986Q1426 860 1348 709Q1258 534 1258 397Q1258 273 1346 127L1432 160Q1395 242 1395 346Q1395 483 1493 670Q1573 822 1573 948Q1573 1138 1434 1286Z%22 fill=%22%23000%22 stroke=%22%23000%22 stroke-width=%2280%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
#mapCanvas .onsen-map-marker--spring span { width: 24px; height: 24px; border: 0; border-radius: 50%; box-shadow: none; background: var(--marker-color);
  -webkit-mask: var(--spring-glyph) center / 21px 18px no-repeat; mask: var(--spring-glyph) center / 21px 18px no-repeat;
  filter: drop-shadow(0 0 1px var(--surface)) drop-shadow(0 0 1.5px var(--surface)); }
/* 県別地図の凡例(.map-legend)も♨に統一。map.js が MARKER_STYLE='spring' のときだけ .is-spring を付ける。全国地図の凡例(.legend-marker)は従来の丸のまま。 */
.map-legend.is-spring .legend-dot { width: 17px; height: 15px; border-radius: 0; -webkit-mask: var(--spring-glyph) center / contain no-repeat; mask: var(--spring-glyph) center / contain no-repeat; }
/* 近くの温泉施設の選択(♨の周囲をタップして複数候補があるとき) */
.map-choice-list { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.map-choice-list button { width: 100%; min-height: 44px; text-align: left; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--moss); font: inherit; padding: 8px 12px; }
.map-canvas .leaflet-control-attribution { color: #303832; background: #fbf9f3f2; font-size: 10px; }
.map-canvas .leaflet-control-attribution a { color: #344f43; text-decoration: underline; }
.map-canvas .leaflet-popup-content-wrapper { background: var(--surface); color: var(--ink); border-radius: 6px; }
.map-canvas .leaflet-popup-tip { background: var(--surface); }
.map-canvas .leaflet-popup-close-button { width: 44px; height: 44px; line-height: 44px; color: var(--moss); }
.onsen-popup { line-height: 1.8; padding-top: 8px; }
.onsen-popup strong { font-family: var(--serif); font-size: 18px; font-weight: 500; padding-right: 16px; display: block; }
.onsen-popup > div { color: var(--muted); font-size: 12px; }
.map-popup-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.map-popup-actions button, .map-popup-actions a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 10px; font: inherit; font-size: 12px; color: var(--moss); border: 1px solid var(--line); background: var(--surface); border-radius: 4px; }
@media (hover: hover) {
  .facility-link:hover, .map-link:hover { color: #596d4e; background: #344f4309; }
  .map-link:hover .map-tooltip { visibility: visible; opacity: 1; }
  .pref:hover { border-color: #748774; background: #eef1e7; }
  .card:hover { border-color: #bfc7b8; box-shadow: 0 4px 14px #30383208; }
  .btn:hover, .stamp:hover, .tools button:hover { filter: brightness(.96); }
}
@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prefgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .wrap { padding-inline: 20px; }
  .hero { padding: 24px 0 54px; }
  .hero-main { padding: 48px 0 28px; }
  .hero h1 { font-size: clamp(22.1px, 6.545vw, 30.6px); letter-spacing: .01em; margin-top: 20px; line-height: 1.6; min-height: 3.2em; }
  .hero p { font-size: 14px; }
  .hero-actions { gap: 12px; margin-top: 28px; }
  .logo { font-size: 20.4px; }
  .logo small { font-size: 10.6px; }
  .login { padding: 9px 12px; font-size: 11px; }
  .dashboard { margin-top: -24px; }
  .progress-summary { padding: 12px; }
  .progress-rings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .progress-card { padding: 12px 8px; }
  .progress-card h3 { font-size: 13px; }
  .progress-ring { width: 88px; height: 88px; }
  .progress-percent { font-size: 20px; }
  .progress-count { font-size: 11.5px; }
  .heading { margin-top: 52px; gap: 16px; margin-bottom: 22px; align-items: center; }
  h2 { font-size: 24px; }
  .prefgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pref { padding: 18px 16px; }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .filters { padding: 16px; gap: 16px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-options { width: max(100%, 240px); }
  .filters .search-row { gap: 8px; }
  .filters input { height: 46px; }
  .filters .search-clear, .filters .stay-save { padding-inline: 10px; font-size: 12px; }
  .search-row label { font-size: 11px; }
  .details { grid-template-columns: 96px minmax(0, 1fr); gap: 10px 14px; margin: 16px 0; }
  .feature-baths { margin-top: 16px; }
  .feature-baths:not([hidden]) + .details { margin-top: 16px; padding-top: 16px; }
  .visit-section { padding-top: 16px; margin: 18px 0; }
  .detail-actions { margin-top: 16px; }
  .modal-bg { padding: 16px; }
  .modal { padding: 28px 24px; }
  .modal h2 { padding-right: 30px; }
  .detail-actions > * { flex: 1 1 180px; }
  .footer { margin-top: 52px; }
}
/* ==========================================================================
   Interactive Japan Map for Regional Progress (和モダン仕様)
   ========================================================================== */
:root {
  --pref-complete: #1e352b; /* 100%: 深緑 */
  --pref-mid: #587b64;      /* 50〜99%: 中程度の苔色 */
  --pref-low: #b3c2ae;      /* 1〜49%: 薄い苔色 */
  --pref-zero: #f4f1e8;     /* 0%: 生成り系 */
  --pref-empty: #e6e5e0;    /* 登録施設なし: 淡いグレー */
  --pref-stroke: #c8c4b7;   /* 境界線 */
  --pref-stroke-hover: #506152;
  --pref-accent: #a17b3f;   /* 黄土・金茶（選択・フォーカス） */
}

#regional-progress > .heading { margin-bottom: 20px; }

.pref-section-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.japan-map-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px 20px 20px;
  box-shadow: 0 4px 16px #30383205;
}

.japan-map-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.japan-map-svg-frame {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  aspect-ratio: auto;
}

.geolonia-svg-map {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
  touch-action: none;
  cursor: grab;
}

.geolonia-svg-map:active { cursor: grabbing; }
.japan-map-svg-frame { overflow: hidden; }
.japan-map-zoom-controls { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; align-items: flex-start; gap: 8px; }
.map-zoom-controls, #mapCanvas .leaflet-control-zoom { font-family: "Segoe UI", "Yu Gothic", sans-serif; display: flex; flex: none; flex-direction: column; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: 0 2px 8px #3038320c; }
.map-zoom-controls button, #mapCanvas .leaflet-control-zoom a { display: block; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: var(--surface); color: var(--moss); font-family: inherit; font-size: 20px; font-weight: 500; line-height: 44px; text-align: center; text-decoration: none; }
.map-zoom-controls button:first-child, #mapCanvas .leaflet-control-zoom a:first-child { border-bottom: 1px solid var(--line); border-radius: 5px 5px 0 0; }
.map-zoom-controls button:last-child, #mapCanvas .leaflet-control-zoom a:last-child { border-radius: 0 0 5px 5px; }
.map-zoom-controls button:hover, #mapCanvas .leaflet-control-zoom a:hover { background: var(--paper); color: var(--deep); }
.map-zoom-controls button:focus-visible, #mapCanvas .leaflet-control-zoom a:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--gold); outline-offset: 2px; }
.map-zoom-controls button:disabled, #mapCanvas .leaflet-control-zoom a.leaflet-disabled { color: var(--muted); opacity: .4; cursor: default; }

.geolonia-svg-map .prefecture {
  cursor: pointer;
  stroke: var(--pref-stroke);
  stroke-width: 1px;
  stroke-linejoin: round;
  transition: filter .18s ease, stroke .18s ease;
  outline: none;
}

.geolonia-svg-map .prefecture.status-empty polygon,
.geolonia-svg-map .prefecture.status-empty path {
  fill: var(--pref-empty);
}

.geolonia-svg-map .prefecture.status-zero polygon,
.geolonia-svg-map .prefecture.status-zero path {
  fill: var(--pref-zero);
}

.geolonia-svg-map .prefecture.status-low polygon,
.geolonia-svg-map .prefecture.status-low path {
  fill: var(--pref-low);
}

.geolonia-svg-map .prefecture.status-mid polygon,
.geolonia-svg-map .prefecture.status-mid path {
  fill: var(--pref-mid);
}

.geolonia-svg-map .prefecture.status-complete polygon,
.geolonia-svg-map .prefecture.status-complete path {
  fill: var(--pref-complete);
}

.geolonia-svg-map .boundary-line line {
  stroke: var(--line) !important;
  stroke-width: 2px !important;
  stroke-dasharray: 4 4;
}

@media (hover: hover) {
  .geolonia-svg-map .prefecture:hover polygon,
  .geolonia-svg-map .prefecture:hover path {
    filter: brightness(1.08) drop-shadow(0 1px 3px rgba(25, 46, 41, 0.2));
    stroke: var(--pref-stroke-hover);
    stroke-width: 1.6px;
  }
}

.geolonia-svg-map .prefecture.selected polygon,
.geolonia-svg-map .prefecture.selected path {
  stroke: var(--pref-accent) !important;
  stroke-width: 2.4px !important;
  filter: drop-shadow(0 2px 5px rgba(25, 46, 41, 0.35));
}

.geolonia-svg-map .prefecture:focus-visible {
  outline: 3px solid var(--pref-accent);
  outline-offset: 2px;
}

.geolonia-svg-map .prefecture polygon,
.geolonia-svg-map .prefecture path {
  vector-effect: non-scaling-stroke;
  stroke-width: .7px;
}

.japan-map-markers-layer {
  cursor: pointer;
}

.japan-map-detail-bar:has(.japan-map-choices) { display: block; }
.japan-map-choices { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: 8px; margin-top: 10px; }
.japan-map-choices .stamp { white-space: normal; min-height: 44px; text-align: left; }

.japan-map-marker {
  cursor: pointer;
  transition: transform 0.15s ease, stroke-width 0.15s ease, filter 0.15s ease;
  vector-effect: non-scaling-stroke;
  transform-origin: center;
  transform-box: fill-box;
}

/* Visited: calm moss green (#344f43) with kinari/white border */
.japan-map-marker.is-visited {
  fill: #344f43;
  stroke: #ffffff;
  stroke-width: 1.2px;
}

/* Unvisited: subtle golden brown (#a17b3f) with kinari/white border */
.japan-map-marker.is-unvisited {
  fill: #a17b3f;
  stroke: #fbf9f3;
  stroke-width: 1.2px;
}

/* Hover & focus states: subtle pop */
.japan-map-marker:hover,
.japan-map-marker:focus-visible {
  stroke-width: 2.2px;
  stroke: #fff9ea;
  filter: drop-shadow(0 1px 3px rgba(25, 46, 41, 0.45));
  outline: none;
}

/* When a prefecture is selected: emphasize its markers */
.japan-map-marker.is-selected-pref {
  stroke-width: 2px;
  stroke: #ffffff;
  filter: drop-shadow(0 2px 5px rgba(25, 46, 41, 0.5));
}

.japan-map-marker.is-selected-pref:hover,
.japan-map-marker.is-selected-pref:focus-visible {
  r: 6.5px;
  stroke-width: 2.5px;
}


.japan-map-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--deep);
  color: var(--surface);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 4px 14px rgba(25, 46, 41, 0.28);
  z-index: 20;
  white-space: nowrap;
  animation: fadeIn .12s ease;
}

.japan-map-tooltip strong {
  display: block;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
  color: #f7f5ef;
}

.japan-map-tooltip .tooltip-stat {
  font-variant-numeric: tabular-nums;
  color: #dbe2d6;
}

.japan-map-tooltip .tooltip-stat.facility-sub {
  font-size: 11px;
  color: #c4cdc0;
  margin-bottom: 2px;
}

.japan-map-tooltip .tooltip-stat.bold {
  font-weight: 600;
  color: #f2e9d2;
}

.japan-map-tooltip .tooltip-stat.muted {
  color: #aeb5a8;
}

.japan-map-tooltip .tooltip-hint {
  font-size: 10px;
  color: #a7b7a0;
  margin-top: 4px;
  border-top: 1px solid #ffffff24;
  padding-top: 3px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(.97); }
  to { opacity: 1; transform: scale(1); }
}

.japan-map-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.japan-map-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  font-size: 11px;
  color: var(--muted);
}

.legend-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.legend-group.marker-legend {
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-swatch {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  border: 1px solid var(--pref-stroke);
  flex: none;
}

.legend-marker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  border: 1.5px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(25, 46, 41, 0.15);
}

.legend-marker.is-visited {
  background: #344f43;
}

.legend-marker.is-unvisited {
  background: #a17b3f;
  border-color: #fbf9f3;
}

.legend-swatch.status-complete { background: var(--pref-complete); border-color: #0f1f18; }
.legend-swatch.status-mid { background: var(--pref-mid); border-color: #3c5845; }
.legend-swatch.status-low { background: var(--pref-low); border-color: #8fa489; }
.legend-swatch.status-zero { background: var(--pref-zero); border-color: #c7c1b2; }
.legend-swatch.status-empty { background: var(--pref-empty); border-color: #d2cdc0; }

.japan-map-detail-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 14px;
  min-height: 48px;
}

.japan-map-detail-bar[hidden] { display: none; }
.japan-map-help-row { display: flex; justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 8px; }
.japan-map-help-link { min-height: 44px; padding: 6px 0 6px 12px; border: 0; background: transparent; color: #876d3d; font-size: 12px; }
.japan-map-help-link:hover { text-decoration: underline; }
.privacy-dialog.japan-map-help-dialog { width: min(440px, calc(100% - 32px)); }
.japan-map-help-dialog #japanMapHelpClose { display: block; min-height: 44px; margin: 18px 0 0 auto; }

.japan-map-detail-bar .detail-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.japan-map-detail-bar .detail-title {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--moss);
  line-height: 1.4;
}

.japan-map-detail-bar .detail-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.japan-map-detail-bar .detail-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.japan-map-detail-bar .detail-actions button {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 11px;
}

.japan-map-attribution {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  max-width: 100%;
  padding-left: 6px;
  border-radius: 4px 0 0 0;
  background: #fbf9f3e6;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  text-align: right;
}

.japan-map-attribution a {
  text-decoration: underline;
  color: var(--muted);
}
.japan-map-attribution .japan-map-credit-info { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 20px; text-decoration: none; }

@media (max-width: 1050px) {
  .pref-section-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

@media (max-width: 900px) {
  .pref-section-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .japan-map-svg-frame {
    max-width: 1000px;
  }
}

@media (max-width: 600px) {
  .japan-map-panel {
    padding: 18px 14px 14px;
  }
  .japan-map-svg-frame {
    max-width: 100%;
  }
  .japan-map-legend {
    gap: 8px 12px;
    font-size: 10.5px;
  }
  .japan-map-detail-bar {
    padding: 8px 12px;
  }
}


@media (max-width: 360px) {
  .prefgrid { grid-template-columns: minmax(0, 1fr); }
}


/* One map, two views. Keep hidden Leaflet containers out of layout. */
#japanMap[hidden], #prefectureMap[hidden], .map-canvas[hidden] { display: none; }
#prefectureMap { width: 100%; min-width: 0; }
#mapHeading { font-size: 1.35rem; }
#mapReset { margin-left: auto; }

.privacy-settings, .privacy-more { border: 0; background: none; color: var(--moss); padding: 4px; text-decoration: underline; font: inherit; }
.privacy-settings { min-height: 44px; font-size: 12px; }
.analytics-choice { display: block; }
.privacy-dialog { position: fixed; width: min(620px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 24px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 13px; line-height: 1.8; }
.privacy-dialog::backdrop { background: #16261fb0; }
.privacy-dialog h2 { margin: 0 48px 16px 0; font-size: 20px; }
.privacy-dialog p { margin: 10px 0; line-height: 1.9; }
.privacy-dialog .privacy-section { margin: 0; padding: 18px 0 4px; border-top: 1px solid var(--line); }
.privacy-dialog .privacy-section:first-of-type { border-top: 0; padding-top: 4px; }
.privacy-dialog h3 { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: var(--moss); }
.privacy-dialog p strong { color: var(--deep); }
.privacy-dialog a { color: var(--moss); text-decoration: underline; overflow-wrap: anywhere; }
.privacy-dialog .analytics-choice { display: block; margin: 16px 0 8px; }
.privacy-dialog .analytics-actions[hidden] { display: none; }
.privacy-settings:focus-visible, .privacy-more:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
@media (max-width: 600px) { .privacy-dialog { padding: 20px; } }
.analytics-notice { position: fixed; bottom: 16px; right: 16px; width: max-content; max-width: calc(100vw - 32px); display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 14px; padding: 8px 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 2px 12px #192e2926; z-index: 1100; font-size: 13px; }
.analytics-notice[hidden] { display: none; }
.analytics-notice p { margin: 0; flex: 0 1 auto; line-height: 1.6; white-space: nowrap; }
.analytics-notice .analytics-actions { gap: 8px; flex: 0 0 auto; }
.analytics-notice .analytics-actions button { flex: none; min-height: 44px; padding: 6px 14px; font-size: 13px; white-space: nowrap; }
.analytics-notice .analytics-actions #analyticsNoticeAccept { background: #e7eee5; border-color: #b9ccb6; color: #294338; }
.analytics-actions { display: flex; gap: 12px; }
.analytics-actions button { flex: 1; min-height: 44px; }
#analyticsMessage:empty { display: none; }
@media (max-width: 600px) { .analytics-notice p { white-space: normal; flex: 1 1 100%; } .analytics-notice { left: 12px; right: 12px; width: auto; max-width: none; bottom: max(12px, env(safe-area-inset-bottom)); padding: 10px 12px; } .analytics-notice .analytics-actions { width: 100%; } .analytics-notice .analytics-actions button { flex: 1; } }

/* Compact facility rows remain independent inside display-only groups. */
#cards .card { font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 500; }
#cards .facility-detail, #cards .map-tooltip, #cards .tag { font-family: inherit; font-weight: 500; }
.card .tags { gap: 4px; }
.card .tag { font-size: 10px; line-height: 1.4; padding: 2px 6px; }
.facility-entry + .facility-entry { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.card .is-unvisited .facility-name { color: #866329; }
.card .is-visited .facility-name { color: var(--moss); }
.conquered-badge { display: inline-flex; align-items: center; vertical-align: middle; margin-inline-start: 8px; padding: 1px 7px; border: 1px solid #87652f; border-radius: 999px; background: #87652f; color: #ffffff; font-size: 10px; font-weight: 500; line-height: 1.4; letter-spacing: .04em; white-space: nowrap; }
#cards .conquered-badge { font-family: inherit; font-weight: 600; }
.card.is-complete { position: relative; }
.card.is-complete .card-content { padding-right: 96px; }
.onsen-stamp { position: absolute; right: 19px; top: 50%; width: 66px; height: 66px; color: var(--gold); opacity: .6; transform: translateY(-50%) rotate(-7deg); pointer-events: none; }
.onsen-stamp > svg { display: block; width: 100%; height: 100%; }
@media (max-width: 600px) {
  .card.is-complete .card-content { padding-right: 80px; }
  .onsen-stamp { width: 52px; height: 52px; }
}
.facility-meta { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 4px 10px; margin-top: 5px; }
.facility-meta > * { flex: none; }
.card .facility-detail { flex: none; white-space: nowrap; border: 0; background: transparent; min-height: 28px; padding: 4px 0; font-size: 12px; }
.facility-meta .tag { max-width: 100%; }
/* 湯の色の丸(◯)。施設名のすぐ右(間隔は約8px)。塗りのみ・光沢やアニメーションなし。色名はホバー/フォーカス/タップで表示。 */
#cards .facility { position: relative; }
.bath-colors { display: inline-flex; align-items: center; margin-inline-start: 6px; vertical-align: middle; }
.bath-color { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font: inherit; }
.bath-color-dot { display: block; box-sizing: border-box; width: 16px; height: 16px; border: 1px solid var(--ring); border-radius: 50%; background: var(--dot); }
.bath-color-dot.is-hollow { border-width: 2px; background: transparent; }
.bath-color:focus-visible { outline: 2px solid var(--moss); outline-offset: 0; }
.bath-color-tip { position: absolute; left: 0; bottom: calc(100% + 2px); width: max-content; max-width: 100%; padding: 6px 10px; border-radius: 4px; background: var(--deep); color: var(--surface); font-size: 11px; line-height: 1.6; text-align: left; white-space: normal; visibility: hidden; opacity: 0; pointer-events: none; z-index: 3; }
.bath-color:hover .bath-color-tip, .bath-color:focus-visible .bath-color-tip, .bath-color.is-open .bath-color-tip,
.kake-icon:hover .bath-color-tip, .kake-icon:focus-visible .bath-color-tip, .kake-icon.is-open .bath-color-tip,
.gensei-icon:hover .bath-color-tip, .gensei-icon:focus-visible .bath-color-tip, .gensei-icon.is-open .bath-color-tip { visibility: visible; opacity: 1; }
/* 源泉かけ流しの三本波アイコン(16px・深緑)。湯色の丸の右、無ければ施設名のすぐ右。 */
.kake-wrap { display: inline-flex; align-items: center; vertical-align: middle; margin-inline-start: 6px; }
.bath-colors + .kake-wrap { margin-inline-start: 0; }
.kake-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--moss); cursor: pointer; font: inherit; }
.kake-svg, .gensei-svg { display: block; width: 16px; height: 16px; }
/* 源生の湯: 深緑の三本波の右に並べる金色の塗りつぶし水滴。16px・装飾やアニメーションなし。アイコン間隔は4px */
.gensei-wrap { display: inline-flex; align-items: center; vertical-align: middle; margin-inline-start: 0; }
.gensei-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--gensei); cursor: pointer; font: inherit; }
.gensei-icon:focus-visible { outline: 2px solid var(--gensei); outline-offset: 0; }
.feature-bath-head .gensei-wrap { align-self: center; margin-inline-start: -10px; }
.kake-icon:focus-visible { outline: 2px solid var(--moss); outline-offset: 0; }
@media (min-width: 601px) {
  #cards .card .conquered-badge { font-size: 12px; line-height: 1.3; padding: 1px 7px; }
  #cards .card .tag { font-size: 12px; line-height: 1.4; padding: 3px 7px; }
}

/* Shared facility detail: registered map link, beside the official facility name. */
#modalSubtitle .facility { flex-wrap:wrap; }
#modalSubtitle .facility-name { flex:0 1 auto; }
#modalSubtitle .map-link { flex:none; width:44px; min-height:44px; color:#967637; border:0; background:transparent; }
#modalSubtitle .map-link:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.regional-map-choices { margin-top:12px; padding:12px; border:1px solid var(--line); border-radius:4px; font-size:13px; }

/* 湯の色フィルター: 施設カードの丸(.bath-color-dot)と同じ見た目の丸+色名 */
.color-option-label { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.color-option-label .bath-color-dot { flex: none; }
.bath-color-dot.is-none { border-color: transparent; background: transparent; }
.bath-color-dot.is-unknown { border: 1px dashed #8f8a7e; background: #ece9df; }
.color-option-label { gap: 8px; white-space: nowrap; }
.color-option-label > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.color-picker summary .color-option-label { flex: 1 1 auto; }