:root {
  --bg: #f8f5f7;
  --surface: #ffffff;

  --text: #302b2d;
  --muted: #766d71;
  --line: #ece5e8;

  --official: #f477a8;
  --official-soft: #fff0f6;

  --nagano: #71ad86;
  --nagano-soft: #edf8f1;

  --accent: #7568e8;
  --accent-soft: #f1efff;

  --warning: #9c6b16;
  --warning-bg: #fff9e9;
  --warning-line: #f0dfad;

  --shadow:
    0 16px 40px
    rgba(64, 46, 54, 0.10);

  --radius-large: 22px;
  --radius-medium: 14px;
  --radius-small: 9px;
}


* {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  padding: 0;

  min-height: 100%;

  color: var(--text);
  background: var(--bg);

  font-family:
    "Zen Maru Gothic",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Hiragino Sans",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
}


button,
input,
select {
  font: inherit;
}


button {
  cursor: pointer;
}


/* ==========================================================
   HEADER
   ========================================================== */

.site-header {
  background:
    radial-gradient(
      circle at top right,
      rgba(244, 119, 168, 0.13),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #ffffff,
      #fffafd 55%,
      #f5f2ff
    );

  border-bottom: 1px solid var(--line);
}


.site-header-inner {
  width: min(1180px, calc(100% - 32px));

  margin: 0 auto;

  padding: 17px 0 15px;
}


.site-header-top {
  display: flex;
  align-items: center;

  gap: 9px;

  margin-bottom: 4px;
}


.site-kicker {
  color: var(--accent);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 0.14em;
}


.unofficial-badge {
  padding: 3px 7px;

  border: 1px solid var(--line);
  border-radius: 999px;

  color: var(--muted);
  background: rgba(255, 255, 255, 0.8);

  font-size: 9px;
  font-weight: 700;
}


.site-header h1 {
  margin: 0 0 3px;

  color: #443a43;

  font-size: clamp(24px, 3.2vw, 33px);
  font-weight: 900;

  line-height: 1.25;
  letter-spacing: 0.01em;

  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.96),
    0 5px 15px rgba(117, 104, 232, 0.08);
}


.site-description {
  margin: 0;

  color: var(--muted);

  font-size: 12px;
  line-height: 1.55;
}


/* ==========================================================
   NOTICE
   ========================================================== */

.site-notice {
  border-bottom: 1px solid var(--warning-line);

  background: var(--warning-bg);
}


.site-notice-inner {
  display: flex;
  align-items: flex-start;

  gap: 8px;

  width: min(1180px, calc(100% - 32px));

  margin: 0 auto;

  padding: 8px 0;
}


.notice-icon {
  flex: 0 0 auto;

  padding-top: 1px;

  font-size: 13px;
}


.site-notice p {
  margin: 0;

  color: #705c32;

  font-size: 10px;
  line-height: 1.65;
}


.site-notice strong {
  color: #5e4b24;
}


.site-notice a {
  margin-left: 5px;

  color: #6657c9;

  font-weight: 700;

  text-decoration: none;
}


.site-notice a:hover {
  text-decoration: underline;
}


/* ==========================================================
   PAGE
   ========================================================== */

.page-shell {
  width: min(1240px, calc(100% - 32px));

  margin: 18px auto 32px;
}


/* ==========================================================
   MAP CARD
   ========================================================== */

.map-card {
  overflow: hidden;

  background: var(--surface);

  border: 1px solid var(--line);
  border-radius: var(--radius-large);

  box-shadow: var(--shadow);
}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================
   SEARCH
   ========================================================== */

.map-search-bar {
  position: relative;
  z-index: 1500;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;

  gap: 10px;

  padding: 12px 14px;

  border-bottom: 1px solid var(--line);

  background:
    linear-gradient(
      90deg,
      rgba(255, 240, 246, 0.72),
      rgba(241, 239, 255, 0.58)
    );
}

.spot-search-wrap {
  position: relative;
  min-width: 0;
}

.spot-search-field {
  display: flex;
  align-items: center;

  min-height: 44px;

  border: 1px solid #ddd4da;
  border-radius: 14px;

  background: rgba(255, 255, 255, 0.98);

  box-shadow:
    0 5px 16px
    rgba(60, 45, 51, 0.07);
}

.spot-search-field:focus-within {
  border-color: #bbb1f5;
  box-shadow:
    0 0 0 3px rgba(117, 104, 232, 0.10),
    0 6px 18px rgba(60, 45, 51, 0.08);
}

.spot-search-icon {
  flex: 0 0 auto;
  margin-left: 13px;

  color: var(--accent);

  font-size: 20px;
  font-weight: 900;

  line-height: 1;
}

#spot-search {
  min-width: 0;
  width: 100%;

  padding: 10px 9px;

  border: 0;
  outline: 0;

  color: var(--text);
  background: transparent;

  font-size: 13px;
  font-weight: 700;
}

#spot-search::placeholder {
  color: #9a9095;
  font-weight: 500;
}

#spot-search::-webkit-search-cancel-button {
  display: none;
}

.spot-search-clear {
  flex: 0 0 auto;

  width: 30px;
  height: 30px;
  margin-right: 7px;

  padding: 0;

  border: 0;
  border-radius: 50%;

  color: #756c70;
  background: #f5f1f3;

  font-size: 18px;
  line-height: 1;
}

.spot-search-suggestions {
  position: absolute;
  z-index: 1600;

  top: calc(100% + 6px);
  left: 0;
  right: 0;

  max-height: min(360px, 48vh);
  overflow-y: auto;

  padding: 6px;

  border: 1px solid var(--line);
  border-radius: 14px;

  background: rgba(255, 255, 255, 0.99);

  box-shadow:
    0 18px 40px
    rgba(60, 44, 51, 0.16);
}

.search-suggestion {
  display: block;
  width: 100%;

  padding: 9px 10px;

  border: 0;
  border-radius: 10px;

  color: var(--text);
  background: transparent;

  text-align: left;
}

.search-suggestion:hover,
.search-suggestion:focus-visible,
.search-suggestion.is-keyboard-active {
  background: var(--accent-soft);
  outline: none;
}

.search-suggestion-name {
  display: block;

  font-size: 12px;
  font-weight: 800;
}

.search-suggestion-meta {
  display: block;
  margin-top: 2px;

  color: var(--muted);

  font-size: 10px;
  line-height: 1.5;
}

.search-suggestion-empty {
  padding: 10px;

  color: var(--muted);

  font-size: 11px;
  text-align: center;
}

.prefecture-filter-wrap {
  display: grid;
  gap: 4px;

  min-width: 130px;
}

.prefecture-filter-wrap label {
  padding-left: 3px;

  color: var(--muted);

  font-size: 9px;
  font-weight: 800;
}

#prefecture-filter {
  min-height: 44px;

  padding: 8px 34px 8px 11px;

  border: 1px solid #ddd4da;
  border-radius: 14px;

  color: var(--text);
  background: #ffffff;

  font-size: 12px;
  font-weight: 700;

  cursor: pointer;
}

#prefecture-filter:focus-visible {
  outline: 3px solid rgba(117, 104, 232, 0.12);
  outline-offset: 1px;
}


/* ==========================================================
   TOOLBAR
   ========================================================== */

.map-toolbar {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  min-height: 56px;

  padding: 9px 14px;

  border-bottom: 1px solid var(--line);

  background: #ffffff;
}


.map-toolbar-left,
.map-legend {
  display: flex;

  align-items: center;

  gap: 8px;
}


.map-toolbar-left {
  flex-wrap: wrap;
}


.toolbar-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 7px;

  min-height: 37px;

  padding: 7px 12px;

  border: 1px solid var(--line);
  border-radius: 10px;

  color: var(--text);
  background: #ffffff;

  font-weight: 700;

  box-shadow:
    0 3px 10px
    rgba(60, 45, 51, 0.05);
}


.toolbar-button:hover,
.toolbar-button.is-active {
  background: var(--accent-soft);

  border-color: #d7d1ff;
}


.help-button-icon {
  display: grid;
  place-items: center;

  width: 16px;
  height: 16px;

  border: 1.5px solid currentColor;
  border-radius: 50%;

  font-size: 10px;
  font-weight: 800;
}


.result-count {
  margin-left: 2px;

  color: var(--muted);

  font-size: 12px;
  font-weight: 700;
}


.active-filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 8px 14px;

  border-bottom: 1px solid #e5dce1;

  color: #62595d;
  background: #fffafb;
}


.active-filter-summary[hidden] {
  display: none;
}


.active-filter-summary-content,
.active-filter-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}


.active-filter-summary-label {
  flex: 0 0 auto;

  color: #8b7580;

  font-size: 10px;
  font-weight: 900;
}


.active-filter-list {
  margin: 0;
  padding: 0;

  list-style: none;
}


.active-filter-list li {
  padding: 4px 8px;

  border: 1px solid #e8dce2;
  border-radius: 999px;

  color: #6f5762;
  background: #ffffff;

  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}


.active-filter-reset,
.no-results-reset {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 5px 10px;

  border: 1px solid #d7c7cf;
  border-radius: 9px;

  color: #725966;
  background: #ffffff;

  font-size: 10px;
  font-weight: 900;
}


.active-filter-reset:hover,
.no-results-reset:hover {
  border-color: #c7aaba;
  background: #fff3f7;
}


.no-results {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  padding: 10px 14px;

  border-bottom: 1px solid #ead8b2;

  color: #745d2b;
  background: #fff9e9;

  font-size: 11px;
  line-height: 1.55;
}


.no-results[hidden] {
  display: none;
}


.app-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 9px 14px;

  border-bottom: 1px solid #e3dce0;

  color: #5f575a;
  background: #f8f6f7;

  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}


.app-status[hidden] {
  display: none;
}


.app-status.is-warning {
  color: #7c5a18;
  background: #fff8e6;
  border-color: #ecd9a8;
}


.app-status.is-error {
  color: #93442f;
  background: #fff0eb;
  border-color: #efc5b8;
}


.app-status.is-success {
  color: #39724d;
  background: #edf8f1;
  border-color: #c7e2d0;
}


.app-status-action {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 5px 10px;

  border: 1px solid currentColor;
  border-radius: 8px;

  color: inherit;
  background: rgba(255, 255, 255, 0.76);

  font-size: 10px;
  font-weight: 800;
}


.legend-item {
  display: inline-flex;

  align-items: center;

  gap: 5px;

  color: var(--muted);

  font-size: 11px;
  font-weight: 700;
}


.legend-dot {
  width: 9px;
  height: 9px;

  border-radius: 50%;
}


.official-dot {
  background: var(--official);
}


.nagano-confirmed-dot {
  background: var(--nagano);
}

.nagano-inferred-dot {
  background: #d9efdf;
  border: 1.5px dashed #5f9b73;
}


/* ==========================================================
   MAP + DETAIL
   ========================================================== */

.map-content {
  display: grid;

  grid-template-columns: minmax(0, 1fr);

  min-width: 0;
}


.map-content.has-detail {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(300px, 360px);
}


/* ==========================================================
   MAP
   ========================================================== */

#map-wrapper {
  position: relative;

  min-width: 0;

  background: #e5e4e4;
}


#map {
  width: 100%;

  height:
    clamp(
      460px,
      64svh,
      690px
    );

  background: #dddddd;
}


/* ==========================================================
   MAP STATUS
   ========================================================== */

#map-status {
  position: absolute;

  z-index: 1300;

  top: 12px;
  left: 50%;

  transform: translateX(-50%);

  max-width: calc(100% - 30px);

  padding: 9px 13px;

  border: 1px solid var(--line);
  border-radius: 999px;

  color: var(--text);

  background: rgba(255, 255, 255, 0.96);

  box-shadow:
    0 8px 25px
    rgba(55, 40, 46, 0.13);

  font-size: 11px;
  font-weight: 700;

  text-align: center;

  pointer-events: none;
}


/* ==========================================================
   OVERLAY PANELS
   ========================================================== */

.overlay-panel {
  position: absolute;

  z-index: 1250;

  top: 12px;
  left: 12px;

  width:
    min(
      410px,
      calc(100% - 24px)
    );

  max-height:
    calc(100% - 24px);

  overflow: hidden;

  border: 1px solid var(--line);
  border-radius: 18px;

  background:
    rgba(255, 255, 255, 0.985);

  box-shadow:
    0 16px 36px
    rgba(59, 44, 50, 0.15);
}


.overlay-panel-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 14px 15px 11px;

  border-bottom: 1px solid var(--line);
}


.panel-kicker {
  color: var(--accent);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.15em;
}


.overlay-panel h2 {
  margin: 2px 0 0;

  font-size: 17px;
}


.icon-button {
  display: grid;

  place-items: center;

  flex: 0 0 auto;

  width: 32px;
  height: 32px;

  padding: 0;

  border: 0;
  border-radius: 50%;

  color: #6f666a;
  background: #f6f3f4;

  font-size: 21px;
}


.overlay-panel-body {
  max-height:
    calc(64svh - 100px);

  overflow-y: auto;

  padding: 13px 15px 4px;
}


.overlay-panel-footer {
  display: flex;

  justify-content: flex-end;

  padding: 10px 15px 13px;

  border-top: 1px solid var(--line);
}


.saved-data-tools {
  padding: 13px;

  border: 1px solid var(--line);
  border-radius: 12px;

  background: #fbfafb;
}


.saved-data-tools h3 {
  margin: 0 0 5px;

  color: #544c4f;

  font-size: 11px;
}


.saved-data-tools p {
  margin: 0 0 9px;

  color: var(--muted);

  font-size: 10px;
  line-height: 1.55;
}


.saved-data-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}


.saved-data-panel {
  width:
    min(
      440px,
      calc(100% - 24px)
    );
}


.saved-data-panel-body {
  display: grid;
  gap: 12px;

  padding-bottom: 15px;
}


.saved-data-intro,
.saved-data-note {
  margin: 0;

  color: #625a5d;

  font-size: 11px;
  line-height: 1.65;
}


.saved-data-current {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}


.saved-data-current span {
  padding: 7px 10px;

  border: 1px solid var(--line);
  border-radius: 999px;

  color: #665d61;
  background: #ffffff;

  font-size: 11px;
  font-weight: 700;
}


.saved-data-current strong {
  color: #6457ce;
}


.saved-data-button {
  min-height: 40px;
  padding: 8px 12px;
}


.saved-data-note {
  color: #887e82;
  font-size: 10px;
}


/* ==========================================================
   FILTER
   ========================================================== */

.filter-group {
  margin: 0 0 15px;
  padding: 0;

  border: 0;
}


.filter-group legend,
.filter-details summary {
  margin-bottom: 7px;

  color: #544c4f;

  font-size: 11px;
  font-weight: 800;
}


.filter-hint {
  margin:
    -2px
    0
    8px;

  color: #8b8285;

  font-size: 10px;
  line-height: 1.5;
}


.filter-chip-list {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;
}


.filter-chip {
  position: relative;

  cursor: pointer;
}


.filter-chip input {
  position: absolute;

  opacity: 0;

  pointer-events: none;
}


.filter-chip span {
  display: inline-flex;

  align-items: center;

  min-height: 30px;

  padding: 5px 9px;

  border: 1px solid var(--line);
  border-radius: 999px;

  color: #6f6669;
  background: #ffffff;

  font-size: 11px;
  font-weight: 700;
}


.filter-chip input:checked + span {
  color: #6055c8;

  background: var(--accent-soft);

  border-color: #d8d2ff;
}


.filter-chip input:focus-visible + span {
  outline:
    3px solid
    rgba(117, 104, 232, 0.18);

  outline-offset: 2px;
}


.filter-details {
  margin-bottom: 13px;

  padding-top: 9px;

  border-top: 1px dashed var(--line);
}


.filter-details summary {
  cursor: pointer;

  list-style: none;
}


.filter-details summary::-webkit-details-marker {
  display: none;
}


.filter-details summary::after {
  content: "＋";

  float: right;

  color: var(--muted);
}


.filter-details[open] summary::after {
  content: "−";
}


.filter-chip-list-inner {
  padding: 5px 0 2px;
}


.secondary-button {
  min-height: 34px;

  padding: 7px 10px;

  border: 0;
  border-radius: 9px;

  color: #5e5659;
  background: #f5f2f3;

  font-size: 11px;
  font-weight: 800;
}


/* ==========================================================
   HELP
   ========================================================== */

.help-body {
  padding-bottom: 15px;
}


.help-section {
  padding:
    0
    0
    14px;

  margin-bottom: 14px;

  border-bottom: 1px dashed var(--line);
}


.help-section:last-child {
  margin-bottom: 0;

  border-bottom: 0;
}


.help-section h3 {
  margin:
    0
    0
    8px;

  font-size: 13px;
}


.help-section p {
  margin:
    0
    0
    7px;

  color: #645b5f;

  font-size: 11px;
  line-height: 1.65;
}


.example-card {
  display: grid;

  gap: 3px;

  margin-bottom: 7px;

  padding: 9px 10px;

  border: 1px solid #ded8ff;
  border-radius: 10px;

  background: #f7f5ff;
}


.example-card strong {
  color: #584cc4;

  font-size: 11px;
}


.example-card span {
  color: #665e61;

  font-size: 10px;
  line-height: 1.55;
}


.help-definition-list {
  display: grid;

  gap: 7px;

  margin: 0;
}


.help-definition-list > div {
  padding: 8px 9px;

  border-radius: 9px;

  background: #f8f6f7;
}


.help-definition-list dt {
  margin-bottom: 2px;

  font-size: 11px;
  font-weight: 800;
}


.help-definition-list dd {
  margin: 0;

  color: #6f666a;

  font-size: 10px;
  line-height: 1.55;
}


.reservation-guide {
  display: grid;

  gap: 6px;
}


.reservation-guide > div {
  display: grid;

  grid-template-columns: 70px 1fr;

  gap: 8px;

  align-items: start;

  padding: 8px 9px;

  border: 1px solid #f0dfb0;
  border-radius: 9px;

  background: #fff9e9;
}


.reservation-guide strong {
  color: #6f571f;

  font-size: 10px;
}


.reservation-guide span {
  color: #6f6550;

  font-size: 10px;
  line-height: 1.5;
}


.evidence-guide {
  display: grid;
  gap: 7px;
  margin: 7px 0 9px;
}


.evidence-guide > div {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px 9px;
  border-radius: 9px;
}


.evidence-guide-confirmed {
  background: #eef9f2;
  border: 1px solid #cfe9d7;
}


.evidence-guide-inferred {
  background: #fff9e9;
  border: 1px solid #f0dfad;
}


.evidence-guide strong {
  font-size: 10px;
}


.evidence-guide span {
  color: #6f666a;
  font-size: 10px;
  line-height: 1.55;
}


.nagano-evidence-filter {
  padding-top: 9px;
  border-top: 1px dashed var(--line);
}


.help-important {
  margin-top: 9px !important;

  padding: 8px 9px;

  border-radius: 9px;

  color: #71591e !important;
  background: #fff4d6;

  font-weight: 700;
}


/* ==========================================================
   NORMAL MARKERS
   ========================================================== */

.spot-marker {
  background: transparent;

  border: 0;
}


.spot-pin {
  display: grid;

  place-items: center;

  width: 38px;
  height: 38px;

  border: 3px solid #ffffff;

  border-radius:
    50%
    50%
    50%
    18%;

  color: #ffffff;

  transform: rotate(-45deg);

  box-shadow:
    0 5px 14px
    rgba(62, 46, 52, 0.26);
}


.spot-pin span {
  transform: rotate(45deg);

  font-size: 13px;
  font-weight: 800;
}


.spot-pin-official {
  background:
    linear-gradient(
      145deg,
      #ff95bc,
      var(--official)
    );
}


.spot-pin-nagano-confirmed {
  background:
    linear-gradient(
      145deg,
      #8bca9f,
      var(--nagano)
    );
}

.spot-pin-nagano-inferred {
  border-style: dashed;

  color: #3f7451;
  background:
    linear-gradient(
      145deg,
      #edf8f1,
      #b9dfc5
    );

  box-shadow:
    0 5px 14px
    rgba(75, 126, 91, 0.24);
}

.spot-pin-nagano-confirmed span,
.spot-pin-nagano-inferred span {
  font-size: 11px;
}


/* 単独ピンのスポット名 */
.spot-name-label {
  max-width: 220px;

  padding: 4px 7px;

  border: 1px solid rgba(230, 220, 224, 0.96);
  border-radius: 8px;

  color: #4f474a;
  background: rgba(255, 255, 255, 0.94);

  box-shadow:
    0 3px 10px
    rgba(61, 46, 52, 0.13);

  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;

  white-space: nowrap;

  pointer-events: none;
}


.spot-name-label::before {
  display: none;
}


.spot-name-label-duplicate {
  cursor: pointer;
  pointer-events: auto;
}


.spot-name-label-duplicate:focus-visible {
  outline: 3px solid rgba(100, 87, 206, 0.35);
  outline-offset: 2px;
}


.spot-name-label-duplicate::after {
  content: "";

  position: absolute;

  display: block;

  background: rgba(90, 66, 119, 0.92);

  box-shadow:
    0 0 0 1px
    rgba(255, 255, 255, 0.96),
    0 1px 4px
    rgba(62, 44, 77, 0.32);

  pointer-events: none;
}


.spot-name-label-duplicate::before {
  content: "";

  position: absolute;

  z-index: 1;

  display: block;

  width: 7px;
  height: 7px;

  border: 2px solid #ffffff;
  border-radius: 50%;

  background: #5a4277;

  box-shadow:
    0 1px 4px
    rgba(62, 44, 77, 0.36);

  pointer-events: none;
}


.spot-name-label-right::after,
.spot-name-label-left::after {
  top: 50%;

  width: 28px;
  height: 3px;

  transform:
    translateY(-50%);
}


.spot-name-label-right::after {
  right: 100%;
}


.spot-name-label-left::after {
  left: 100%;
}


.spot-name-label-right::before,
.spot-name-label-left::before {
  top: 50%;

  transform:
    translateY(-50%);
}


.spot-name-label-right::before {
  right: calc(100% + 25px);
}


.spot-name-label-left::before {
  left: calc(100% + 25px);
}


.spot-name-label-top::after,
.spot-name-label-bottom::after {
  left: 50%;

  width: 3px;
  height: 68px;

  transform:
    translateX(-50%);
}


.spot-name-label-top::after {
  top: 100%;
}


.spot-name-label-bottom::after {
  bottom: 100%;
}


.spot-name-label-top::before,
.spot-name-label-bottom::before {
  left: 50%;

  transform:
    translateX(-50%);
}


.spot-name-label-top::before {
  top: calc(100% + 65px);
}


.spot-name-label-bottom::before {
  bottom: calc(100% + 65px);
}


.leaflet-marker-icon.is-selected .spot-pin {
  transform:
    rotate(-45deg)
    scale(1.13);

  box-shadow:
    0 8px 20px
    rgba(63, 46, 52, 0.35);
}


/* ==========================================================
   MARKER CLUSTER
   ========================================================== */

.marker-cluster-custom {
  overflow: visible !important;

  background: transparent !important;

  border: 0 !important;
}


.cluster-label-wrap {
  position: relative;

  width: 100%;
  height: 100%;
}


.cluster-name-list {
  position: absolute;

  z-index: 0;

  top: calc(100% + 5px);
  left: 50%;

  display: grid;

  gap: 2px;

  width: max-content;
  max-width: 230px;

  transform: translateX(-50%);

  pointer-events: none;
}


.cluster-name-item {
  overflow: hidden;

  max-width: 230px;

  padding: 3px 6px;

  border: 1px solid rgba(230, 220, 224, 0.95);
  border-radius: 6px;

  color: #554c50;
  background: rgba(255, 255, 255, 0.93);

  box-shadow:
    0 2px 7px
    rgba(61, 46, 52, 0.10);

  font-family: inherit;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;

  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.cluster-bubble {
  position: relative;

  z-index: 1;

  display: grid;

  place-items: center;

  width: 100%;
  height: 100%;

  border: 3px solid #ffffff;

  border-radius: 50%;

  color: #ffffff;

  font-size: 13px;
  font-weight: 800;

  line-height: 1;

  box-shadow:
    0 6px 18px
    rgba(60, 44, 51, 0.28);

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}


.marker-cluster-custom:hover
.cluster-bubble {
  transform: scale(1.08);

  box-shadow:
    0 8px 22px
    rgba(60, 44, 51, 0.34);
}


.cluster-official {
  background:
    linear-gradient(
      145deg,
      #ff9bc1,
      #f477a8
    );
}


.cluster-nagano {
  background:
    linear-gradient(
      145deg,
      #91cda3,
      #71ad86
    );
}


.cluster-mixed {
  background:
    linear-gradient(
      135deg,
      #f477a8 0%,
      #8c7bf3 50%,
      #71ad86 100%
    );
}


.cluster-count {
  transform: translateY(-0.5px);
}


.leaflet-cluster-spider-leg {
  stroke: #8d8387;

  stroke-width: 1.5;

  stroke-opacity: 0.65;
}


/* ==========================================================
   DETAIL
   ========================================================== */

.spot-detail-panel {
  min-width: 0;

  scroll-margin-top: 12px;

  overflow-y: auto;

  max-height:
    clamp(
      460px,
      64svh,
      690px
    );

  border-left: 1px solid var(--line);

  background: #ffffff;
}


.spot-detail-header {
  position: sticky;

  z-index: 2;

  top: 0;

  display: flex;

  align-items: center;
  justify-content: space-between;

  padding: 12px 14px;

  background:
    rgba(255, 255, 255, 0.96);

  border-bottom: 1px solid var(--line);
}


.spot-detail-kicker {
  color: var(--accent);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.14em;
}


.spot-detail-body {
  padding: 15px;
}


.spot-detail-title {
  margin: 0 0 9px;

  font-size: 19px;
  line-height: 1.4;
}


.spot-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-bottom: 11px;
}


.spot-tag {
  padding: 4px 8px;

  border-radius: 999px;

  font-size: 10px;
  font-weight: 800;
}


.tag-official {
  color: #c64f80;

  background: var(--official-soft);
}


.tag-nagano {
  color: #4e8c62;

  background: var(--nagano-soft);
}


.tag-neutral {
  color: #71686b;

  background: #f3f1f2;
}


.tag-evidence-confirmed {
  color: #39784e;
  background: #e9f7ee;
  border: 1px solid #c9e8d3;
}


.tag-evidence-inferred {
  color: #8a6418;
  background: #fff4d6;
  border: 1px solid #efdca8;
}


.spot-relation {
  margin-bottom: 9px;

  color: #625a5d;

  font-size: 12px;
}


.spot-period {
  margin-bottom: 11px;

  padding: 8px 9px;

  border-radius: var(--radius-small);

  color: #585052;
  background: #f5f3f4;

  font-size: 12px;
  font-weight: 800;
}


.period-upcoming {
  background: #fff6dc;
}


.period-active {
  background: #edf8f0;
}


/* ==========================================================
   DETAIL CARDS
   ========================================================== */

.spot-info-card {
  margin-bottom: 10px;

  padding: 11px;

  border-radius: 12px;
}


.spot-hours-card {
  background: #eef8ff;

  border: 1px solid #d3e9f7;
}


.spot-entry-card {
  background: #fff8e7;

  border: 1px solid #efdfb4;
}


.spot-evidence-card {
  margin-top: 2px;
}


.spot-evidence-card.evidence-confirmed {
  background: #eef9f2;
  border: 1px solid #cfe9d7;
}


.spot-evidence-card.evidence-inferred {
  background: #fff9e9;
  border: 1px solid #f0dfad;
}


.spot-evidence-note {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}


.spot-info-title {
  margin-bottom: 6px;

  font-size: 12px;
  font-weight: 800;
}


.spot-info-row {
  margin-bottom: 3px;

  font-size: 12px;
  line-height: 1.55;
}


.spot-info-note {
  margin-top: 7px;

  padding-top: 7px;

  border-top:
    1px solid
    rgba(0, 0, 0, 0.07);

  font-size: 12px;
  line-height: 1.55;
}


.spot-info-checked {
  margin-top: 7px;

  color: #80777b;

  font-size: 10px;
}


.spot-address {
  margin: 11px 0 7px;

  font-size: 12px;
  line-height: 1.55;
}


.spot-description {
  margin-bottom: 9px;

  color: #595154;

  font-size: 12px;
  line-height: 1.65;
}


.spot-detail-body a {
  display: block;

  margin-top: 6px;

  color: #6457ce;

  font-size: 12px;
  font-weight: 700;

  text-decoration: none;
}


.spot-detail-body a:hover {
  text-decoration: underline;
}


.spot-detail-body a.spot-report-link {
  margin-top: 12px;
  padding-top: 10px;

  border-top: 1px dashed var(--line);

  color: #7b6f74;

  font-size: 11px;
}


/* ==========================================================
   FOOT NOTE
   ========================================================== */

.site-note {
  margin:
    12px
    3px
    0;

  color: #8a8185;

  font-size: 10px;
  line-height: 1.6;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 899px) {

  .map-content.has-detail {
    grid-template-columns: minmax(0, 1fr);
  }


  .spot-detail-panel {
    max-height: none;

    border-left: 0;
    border-top: 1px solid var(--line);
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 650px) {

  .site-header-inner,
  .site-notice-inner {
    width: calc(100% - 24px);
  }


  .site-header-inner {
    padding:
      12px
      0
      11px;
  }


  .site-header h1 {
    font-size: 22px;
  }


  .site-description {
    font-size: 11px;
  }


  .site-notice-inner {
    padding:
      7px
      0;
  }


  .site-notice p {
    font-size: 9px;
  }


  .page-shell {
    width: calc(100% - 18px);

    margin:
      10px
      auto
      24px;
  }


  .map-card {
    border-radius: 17px;
  }


  .map-search-bar {
    grid-template-columns: minmax(0, 1fr) 104px;

    gap: 7px;

    padding: 8px 9px;
  }

  .spot-search-field,
  #prefecture-filter {
    min-height: 44px;
  }

  .spot-search-clear {
    width: 44px;
    height: 44px;
    margin-right: 0;
  }

  #spot-search {
    min-height: 44px;
    padding: 8px 7px;
    font-size: 11px;
  }

  .search-suggestion {
    min-height: 44px;
  }

  .spot-search-icon {
    margin-left: 10px;
    font-size: 17px;
  }

  .prefecture-filter-wrap {
    min-width: 0;
  }

  #prefecture-filter {
    padding: 7px 27px 7px 8px;
    font-size: 10px;
  }

  .map-toolbar {
    min-height: 50px;

    padding: 7px 9px;
  }


  .toolbar-button {
    min-height: 44px;

    padding:
      6px
      9px;

    font-size: 11px;
  }


  .icon-button,
  .secondary-button,
  .app-status-action,
  .spot-list-tool-button,
  .spot-list-favorite-button,
  .spot-list-share-button,
  .spot-list-visited-button,
  .spot-list-open-button,
  .spot-favorite-button,
  .spot-visited-button,
  .spot-share-button {
    min-width: 44px;
    min-height: 44px;
  }


  .leaflet-control-zoom a {
    width: 44px;
    height: 44px;
    line-height: 44px;
  }


  .app-status {
    align-items: flex-start;
    justify-content: space-between;
    padding: 9px;
  }


  .active-filter-summary,
  .no-results {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding: 9px;
  }


  .active-filter-reset,
  .no-results-reset {
    width: 100%;
    min-height: 44px;
  }


  .result-count {
    font-size: 10px;
  }

  .map-legend {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .legend-item {
    font-size: 9px;
  }


  #map {
    height:
      clamp(
        320px,
        48svh,
        470px
      );
  }


  .spot-detail-panel {
    max-height: none;

    scroll-margin-top: 10px;
  }


  .spot-name-label {
    max-width: 170px;

    padding: 3px 5px;

    font-size: 9px;
  }


  .cluster-name-list,
  .cluster-name-item {
    max-width: 190px;
  }


  .cluster-name-item {
    padding: 3px 5px;

    font-size: 8px;
  }


  .spot-detail-body {
    padding: 13px;
  }


  .overlay-panel {
    top: 8px;
    left: 8px;

    width: calc(100% - 16px);

    max-height: calc(100% - 16px);
  }


  .overlay-panel-body {
    max-height: 36svh;
  }


  #map-status {
    top: 8px;

    font-size: 10px;
  }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 420px) {

  .unofficial-badge {
    display: none;
  }


  .map-legend {
    display: none;
  }


  #map {
    height:
      clamp(
        300px,
        45svh,
        420px
      );
  }


  .reservation-guide > div {
    grid-template-columns: 64px 1fr;
  }

}


/* ==========================================================
   NAGANO HELP
   ========================================================== */

.nagano-help-intro {
  padding: 10px 11px 13px;
  border: 1px solid #cfe5d6;
  border-radius: 11px;
  background: var(--nagano-soft);
}

.nagano-help-intro h3 {
  color: #47785a;
}

.nagano-relation-guide {
  display: grid;
  gap: 6px;
}

.nagano-relation-guide > div {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px 9px;
  border: 1px solid #cfe5d6;
  border-radius: 9px;
  background: var(--nagano-soft);
}

.nagano-relation-guide strong {
  color: #47785a;
  font-size: 10px;
}

.nagano-relation-guide span {
  color: #5f6f65;
  font-size: 10px;
  line-height: 1.5;
}

.nagano-example-card {
  border-color: #cfe5d6;
  background: var(--nagano-soft);
}

.nagano-example-card strong {
  color: #47785a;
}

.nagano-help-note {
  color: #47785a !important;
  background: #e8f5ed;
}


/* ==========================================================
   CURRENT LOCATION / VIEW SWITCH / FAVORITES
   ========================================================== */

.view-switch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.view-switch-button {
  min-width: 68px;
}

.favorite-filter-button.is-active {
  color: #c34f7d;
  background: var(--official-soft);
  border-color: #f2bdd1;
}

#favorite-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  font-weight: 800;
}

#location-button.is-loading {
  opacity: 0.72;
  cursor: progress;
}

.spot-favorite-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin: 0 0 11px;
  padding: 8px 12px;
  border: 1px solid #efc4d5;
  border-radius: 999px;
  color: #b34f75;
  background: #fff7fa;
  font-size: 12px;
  font-weight: 800;
}

.spot-favorite-button:hover,
.spot-favorite-button.is-active {
  color: #a53f68;
  background: #ffeaf2;
  border-color: #e9a7c1;
}

.spot-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0 2px;
}

.spot-detail-actions .spot-favorite-button {
  margin: 0;
}

.spot-share-button,
.spot-detail-actions .spot-map-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 36px;
  margin: 0;
  padding: 7px 11px;

  border: 1px solid #dcd6fb;
  border-radius: 10px;

  color: #6257c5;
  background: #faf9ff;

  font-size: 10px;
  font-weight: 800;

  text-decoration: none;
}

.spot-share-button:hover,
.spot-detail-actions .spot-map-button:hover {
  background: var(--accent-soft);
  border-color: #cbc3ff;

  text-decoration: none;
}

.spot-detail-actions .spot-map-button {
  color: #397396;
  background: #f3faff;
  border-color: #cde3ef;
}

.spot-detail-actions .spot-map-button:hover {
  color: #2f6688;
  background: #e9f6fd;
  border-color: #acd3e6;
}


/* ==========================================================
   LIST VIEW
   ========================================================== */

.spot-list-panel {
  padding: 18px;
  background: #fbf9fa;
}

.spot-list-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.spot-list-kicker {
  color: var(--accent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.spot-list-header h2 {
  margin: 2px 0 0;
  font-size: 19px;
}

.spot-list-header p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.spot-list-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.spot-list-tool-button {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #655d60;
  background: #ffffff;
  font-size: 10px;
  font-weight: 800;
}

.spot-list-tool-button:hover,
.spot-list-tool-button.is-active {
  color: #5e53c2;
  background: var(--accent-soft);
  border-color: #d7d1ff;
}

.spot-list-tool-button.is-loading {
  opacity: 0.65;
  cursor: progress;
}

.spot-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.spot-list-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 7px 20px rgba(60, 45, 51, 0.05);
}

.spot-list-card.is-favorite {
  border-color: #f0bed1;
  box-shadow: 0 7px 22px rgba(196, 78, 126, 0.09);
}

.spot-list-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.spot-list-card-heading {
  min-width: 0;
}

.spot-list-card-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.spot-list-card h3 {
  margin: 0 0 5px;
  font-size: 14px;
  line-height: 1.45;
}

.spot-list-card-meta {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}

.spot-list-favorite-button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #eed6df;
  border-radius: 50%;
  color: #b95d80;
  background: #fff9fb;
  font-size: 20px;
  line-height: 1;
}

.spot-list-favorite-button:hover,
.spot-list-favorite-button.is-active {
  color: #a74369;
  background: #ffeaf2;
  border-color: #e9adc4;
}

.spot-list-share-button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #ddd8f7;
  border-radius: 50%;
  color: #665bc5;
  background: #faf9ff;
  font-size: 14px;
}

.spot-list-share-button:hover {
  background: var(--accent-soft);
  border-color: #cfc7ff;
}

.spot-list-evidence {
  display: inline-flex;
  margin-top: 9px;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
}

.spot-list-evidence.evidence-confirmed {
  color: #39784e;
  background: #e9f7ee;
}

.spot-list-evidence.evidence-inferred {
  color: #8a6418;
  background: #fff4d6;
}

.spot-list-address,
.spot-list-hours,
.spot-list-distance {
  margin-top: 8px;
  color: #61595c;
  font-size: 10px;
  line-height: 1.55;
}

.spot-list-distance {
  color: #6557c7;
  font-weight: 800;
}

.spot-list-open-button {
  width: 100%;
  min-height: 36px;
  margin-top: 12px;
  padding: 7px 10px;
  border: 0;
  border-radius: 10px;
  color: #5f55c1;
  background: var(--accent-soft);
  font-size: 10px;
  font-weight: 800;
}

.spot-list-open-button:hover {
  background: #e8e4ff;
}

.spot-list-empty {
  grid-column: 1 / -1;
  padding: 36px 18px;
  border: 1px dashed #ddd3d8;
  border-radius: 14px;
  color: var(--muted);
  background: #ffffff;
  font-size: 12px;
  text-align: center;
}

@media (max-width: 899px) {
  .spot-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .view-switch {
    gap: 4px;
  }

  .view-switch-button {
    min-width: 0;
  }

  .spot-list-panel {
    padding: 12px 10px 14px;
  }

  .spot-list-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .spot-list-tools {
    width: 100%;
    justify-content: flex-start;
  }

  .spot-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  .spot-list-card {
    padding: 12px;
  }
}


/* ==========================================================
   PERIOD TIMING / VISITED / SHARE CONDITION ENHANCEMENTS
   ========================================================== */

.visited-filter-button.is-active {
  background: #eef8f1;
  border-color: #b8dbc4;
  color: #477c59;
}

#visited-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(113, 173, 134, 0.14);
  font-size: 10px;
}

.spot-visited-button {
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: #655e61;
  font-weight: 800;
  cursor: pointer;
}

.spot-visited-button:hover,
.spot-visited-button.is-active {
  background: var(--nagano-soft);
  border-color: #b8dbc4;
  color: #477c59;
}

.spot-list-visited-button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: #786f73;
  font-weight: 900;
  cursor: pointer;
}

.spot-list-visited-button:hover,
.spot-list-visited-button.is-active {
  background: var(--nagano-soft);
  border-color: #b8dbc4;
  color: #477c59;
}

.spot-list-card.is-visited {
  box-shadow: inset 4px 0 0 rgba(113, 173, 134, 0.55);
}

.spot-timing-badge,
.spot-list-timing {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 8px 0 4px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f1efff;
  color: #6557c8;
  font-size: 11px;
  font-weight: 900;
}

.spot-timing-badge.timing-ending,
.spot-list-timing.timing-ending {
  background: #fff5df;
  color: #8b6219;
}

.spot-timing-badge.is-soon,
.spot-list-timing.is-soon {
  background: #fff0e9;
  color: #a6532e;
  border: 1px solid #f2c5ae;
}

.filter-chip-attention input:checked + span {
  color: #9b542e;
  background: #fff0e9;
  border-color: #f2c5ae;
}

@media (max-width: 760px) {
  .spot-detail-actions {
    align-items: stretch;
  }

  .spot-detail-actions .spot-visited-button {
    width: 100%;
  }
}


@media (max-width: 650px) {
  button {
    min-height: 44px;
  }

  .filter-chip span,
  .filter-details summary {
    min-height: 44px;
  }

  .filter-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .icon-button,
  .spot-list-favorite-button,
  .spot-list-share-button,
  .spot-list-visited-button {
    min-width: 44px;
    width: 44px;
    height: 44px;
  }

  .spot-list-tool-button,
  .spot-list-open-button,
  .spot-favorite-button,
  .spot-visited-button,
  .spot-share-button,
  .spot-detail-actions .spot-map-button {
    min-height: 44px;
  }
}