:root {
  --guide-navy: #0B2C67;
  --guide-navy-deep: #071F4B;
  --guide-gold: #D4A62A;
  --guide-off-white: #F7F5F0;
  --guide-gray: #697386;
  --guide-line: #E2E5EA;
  --guide-radius: 0.95rem;
  --guide-shadow: 0 0.22rem 0.75rem rgba(11, 44, 103, 0.09);
}

.guide-shell {
  background: var(--guide-off-white);
}

.guide-header {
  display: flex;
  min-height: calc(4.1rem + env(safe-area-inset-top));
  align-items: center;
  justify-content: space-between;
  padding: calc(0.55rem + env(safe-area-inset-top)) 1rem 0.55rem;
  background: #fff;
  border-bottom: 1px solid rgba(11, 44, 103, 0.08);
  color: var(--guide-navy);
}

.guide-header__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.guide-header__bell {
  width: 1.65rem;
  height: 1.65rem;
  color: var(--guide-navy);
}

.guide-main {
  --guide-fixed-nav-clearance: calc(
    var(--bottom-nav-height) + 3.75rem + env(safe-area-inset-bottom) + var(--app-visual-viewport-bottom, 0px)
  );
  padding: 0.7rem 0.45rem var(--guide-fixed-nav-clearance);
  scroll-padding-bottom: var(--guide-fixed-nav-clearance);
}

.guide-switcher {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  margin: 0 0.15rem 0.7rem;
  padding: 0.23rem;
  border: 1px solid rgba(11, 44, 103, 0.12);
  border-radius: 999px;
  background: #fff;
}

.guide-switcher a {
  display: grid;
  min-height: 2.65rem;
  place-items: center;
  border-radius: 999px;
  color: var(--guide-navy);
  font-size: .875rem;
  font-weight: 750;
}

.guide-switcher a.is-active {
  background: var(--guide-navy);
  color: #fff;
}

.guide-hero-card,
.guide-info-panel,
.guide-illustration-map,
.guide-spot-card,
.guide-timeline-section,
.guide-notes-section {
  border: 1px solid rgba(11, 44, 103, 0.08);
  border-radius: var(--guide-radius);
  background: #fff;
  box-shadow: var(--guide-shadow);
}

.guide-hero-card {
  overflow: hidden;
}

.guide-hero-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 8.95;
  object-fit: cover;
}

.guide-hero-card__body {
  padding: 1rem 0.95rem 1.08rem;
}

.guide-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.guide-title-emblem {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 3.5rem;
  place-items: center;
  border-radius: 50%;
  background: var(--guide-gold);
  color: #fff;
  --icon-accent: #fff;
}

.guide-title-emblem .guide-icon {
  width: 2.05rem;
  height: 2.05rem;
}

.guide-title-row h2 {
  margin: 0;
  color: var(--guide-navy-deep);
  font-size: clamp(1.8rem, 8.4vw, 2.25rem);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: 0.01em;
}

.guide-title-row h2 > span {
  display: block;
}

.guide-title-row h2.guide-title--stacked {
  font-size: clamp(1.45rem, 6.8vw, 1.85rem);
  line-height: 1.13;
}

.guide-title-row h2.guide-title--stacked > span {
  white-space: nowrap;
}

.guide-title-row h2.guide-title--stacked > span + span {
  margin-top: 0.12rem;
}

.guide-title-subtitle {
  margin: 0.27rem 0 0;
  color: var(--guide-navy);
  font-size: 0.92rem;
  font-weight: 700;
}

.guide-description {
  margin: 0.9rem 0 0;
  color: #26354d;
  font-size: 0.96rem;
  font-weight: 560;
  line-height: 1.72;
}

.guide-info-panel {
  margin-top: 0.75rem;
  overflow: hidden;
  border-color: rgba(11, 44, 103, 0.2);
  background: var(--guide-navy);
  color: #fff;
}

.guide-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guide-info-item {
  display: grid;
  min-width: 0;
  min-height: 7.15rem;
  grid-template-rows: 1.6rem auto auto 1fr;
  place-items: center;
  padding: 0.75rem 0.45rem 0.68rem;
  text-align: center;
}

.guide-info-item:nth-child(odd) {
  border-right: 1px solid rgba(255,255,255,0.17);
}

.guide-info-item:nth-child(-n+2) {
  border-bottom: 1px solid rgba(255,255,255,0.17);
}

.guide-info-item__icon {
  width: 1.45rem;
  height: 1.45rem;
  color: var(--guide-gold);
  --icon-accent: #fff;
}

.guide-info-item__label {
  margin-top: 0.15rem;
  font-size: .875rem;
  font-weight: 650;
}

.guide-info-item__value {
  margin-top: 0.25rem;
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.25;
}

.guide-info-item__sub {
  align-self: start;
  margin-top: 0.23rem;
  color: rgba(255,255,255,0.74);
  font-size: .875rem;
  line-height: 1.36;
}

.guide-warning-line {
  display: grid;
  grid-template-columns: 0.25rem auto minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
  padding: 0.72rem 0.82rem 0.78rem;
  border-top: 1px solid rgba(255,255,255,0.2);
  background: #fff;
  color: var(--guide-navy-deep);
  font-size: .875rem;
  line-height: 1.55;
}

.guide-warning-line__bar {
  width: 0.25rem;
  height: 100%;
  min-height: 2.2rem;
  border-radius: 999px;
  background: var(--guide-gold);
}

.guide-map-section,
.guide-spots-section {
  margin-top: 1.25rem;
}

.guide-section-heading {
  padding: 0 0.45rem;
}

.guide-section-heading h2 {
  margin: 0;
  color: var(--guide-navy-deep);
  font-size: 1.06rem;
  font-weight: 820;
  letter-spacing: 0.01em;
}

.guide-section-heading p {
  margin: 0.35rem 0 0;
  color: var(--guide-gray);
  font-size: .875rem;
  line-height: 1.55;
}

.guide-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 0.68rem;
}

.guide-filter {
  display: flex;
  min-width: 0;
  min-height: 3.65rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  padding: 0.35rem 0.2rem;
  border: 1px solid rgba(11, 44, 103, 0.12);
  border-radius: 0.72rem;
  background: #fff;
  color: var(--guide-navy-deep);
  box-shadow: 0 0.12rem 0.35rem rgba(11,44,103,0.05);
  font: inherit;
  font-size: .875rem;
  font-weight: 750;
  cursor: pointer;
}

.guide-filter[aria-pressed="true"] {
  border-color: var(--guide-navy);
  background: var(--guide-navy);
  color: #fff;
  --icon-accent: var(--guide-gold);
}

.guide-filter__icon {
  width: 1.45rem;
  height: 1.45rem;
  color: currentColor;
  --icon-accent: var(--guide-gold);
}

.guide-illustration-map {
  margin: 0.62rem 0 0;
  overflow: hidden;
}

.guide-illustration-map img {
  width: 100%;
  height: auto;
  background: #eef1ec;
}

.guide-illustration-map figcaption {
  padding: 0.72rem 0.8rem 0.8rem;
  border-top: 1px solid var(--guide-line);
  color: var(--guide-gray);
  font-size: .875rem;
  line-height: 1.58;
}


.guide-map-zoom-trigger {
  position: relative;
}

.guide-map-zoom-trigger.is-enabled {
  cursor: zoom-in;
}

.guide-map-zoom-trigger.is-enabled:focus-visible {
  outline: 0.2rem solid var(--guide-gold);
  outline-offset: -0.2rem;
}

.guide-map-zoom-label {
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  padding: 0.42rem 0.68rem;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 999px;
  background: rgba(11,44,103,0.92);
  color: #fff;
  font-size: .875rem;
  font-weight: 800;
  box-shadow: 0 0.18rem 0.55rem rgba(11,44,103,0.24);
  pointer-events: none;
}

.guide-map-dialog {
  width: min(96vw, 92rem);
  max-width: none;
  height: auto;
  max-height: min(88dvh, 70rem);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 0.8rem;
  background: #f7f5f0;
  color: var(--guide-navy-deep);
  box-shadow: 0 1rem 3rem rgba(6,22,49,0.35);
}

.guide-map-dialog[open] {
  display: flex;
  flex-direction: column;
}

.guide-map-dialog::backdrop {
  background: rgba(4,14,32,0.72);
}

.guide-map-dialog__toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--guide-line);
  background: rgba(255,255,255,0.97);
}

.guide-map-dialog__toolbar strong {
  font-size: .875rem;
}

.guide-map-dialog__toolbar button {
  min-width: 4.4rem;
  min-height: 2.55rem;
  padding: 0.45rem 0.8rem;
  border: 0;
  border-radius: 999px;
  background: var(--guide-navy);
  color: #fff;
  font: inherit;
  font-size: .875rem;
  font-weight: 800;
  cursor: pointer;
}

.guide-map-dialog__viewport {
  min-width: 0;
  min-height: 0;
  max-height: calc(min(88dvh, 70rem) - 3.5rem);
  overflow: auto;
  padding: 0.75rem;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}

.guide-map-dialog__viewport img {
  display: block;
  width: min(1448px, max(900px, 88vw));
  height: auto;
  max-width: none;
  margin: 0;
  background: #fff;
}

body.is-map-dialog-open {
  overflow: hidden;
}

.guide-location-badge--primary,
.guide-location-badge--booked {
  border-color: #d4a62a;
  background: #fff4cc;
  color: #5e4300;
}

.guide-location-badge--alternative {
  border-color: #aeb8c5;
  background: #f3f5f7;
  color: #4d5969;
}

.map-policy-note {
  display: flex;
  min-height: 3.2rem;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.62rem;
  padding: 0.72rem 0.8rem;
  border-left: 0.25rem solid var(--guide-gold);
  border-radius: 0.5rem;
  background: #fff;
  color: #34445e;
  font-size: .875rem;
  line-height: 1.55;
}

.map-policy-note .guide-icon {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--guide-navy);
  --icon-accent: var(--guide-gold);
}

.guide-spots {
  display: grid;
  gap: 0.72rem;
  margin-top: 0.72rem;
}

.guide-spot-card {
  padding: 0.85rem;
}

.guide-spot-card[hidden] {
  display: none;
}

.guide-spot-card__heading {
  display: grid;
  grid-template-columns: 2rem 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
}

.guide-spot-card__number {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--guide-navy);
  color: #fff;
  font-size: .875rem;
  font-weight: 800;
}

.guide-spot-card__icon {
  width: 1.8rem;
  height: 1.8rem;
  color: var(--guide-navy);
  --icon-accent: var(--guide-gold);
}

.guide-spot-card h3 {
  margin: 0;
  color: var(--guide-navy-deep);
  font-size: 1rem;
  font-weight: 820;
  line-height: 1.35;
}

.guide-spot-card__role {
  margin: 0.15rem 0 0;
  color: #735f28;
  font-size: .875rem;
  font-weight: 700;
}

.guide-spot-card__description {
  margin: 0.72rem 0 0;
  color: #34445e;
  font-size: .875rem;
  line-height: 1.68;
}

.guide-spot-card__facts {
  margin: 0.72rem 0 0;
  padding: 0;
  border-top: 1px solid var(--guide-line);
}

.guide-spot-card__facts > div {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  gap: 0.55rem;
  padding-top: 0.55rem;
}

.guide-spot-card__facts dt {
  color: var(--guide-gray);
  font-size: .875rem;
  font-weight: 700;
}

.guide-spot-card__facts dd {
  margin: 0;
  color: #26354d;
  font-size: .875rem;
  line-height: 1.48;
}

.guide-map-link {
  display: flex;
  min-height: 3.35rem;
  align-items: center;
  justify-content: center;
  gap: 0.62rem;
  margin-top: 0.78rem;
  padding: 0.58rem 0.75rem;
  border: 1px solid rgba(11,44,103,0.2);
  border-radius: 0.7rem;
  background: #fff;
  color: var(--guide-navy);
  font-size: .875rem;
  font-weight: 800;
  text-align: left;
}

.guide-map-link__icon {
  width: 1.45rem;
  height: 1.45rem;
  --icon-accent: var(--guide-gold);
}

.guide-map-link small {
  display: block;
  margin-top: 0.08rem;
  color: var(--guide-gray);
  font-size: .875rem;
  font-weight: 550;
}

.guide-timeline-section,
.guide-notes-section {
  margin-top: 1.25rem;
  padding: 0.9rem 0.85rem;
}

.guide-timeline {
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
}

.guide-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 4.7rem 2.1rem minmax(0, 1fr);
  gap: 0.38rem;
  align-items: start;
  padding: 0.62rem 0;
}

.guide-timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 5.73rem;
  top: 2.55rem;
  bottom: -0.25rem;
  width: 1px;
  background: #d9dde4;
}

.guide-timeline time {
  padding-top: 0.34rem;
  color: var(--guide-navy);
  font-size: .875rem;
  font-weight: 800;
  text-align: right;
}

.guide-timeline__marker {
  position: relative;
  z-index: 1;
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  border: 1px solid rgba(11,44,103,0.12);
  border-radius: 50%;
  background: #fff;
}

.guide-timeline__icon {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--guide-navy);
  --icon-accent: var(--guide-gold);
}

.guide-timeline strong {
  display: block;
  color: var(--guide-navy-deep);
  font-size: .875rem;
  line-height: 1.4;
}

.guide-timeline p {
  margin: 0.2rem 0 0;
  color: var(--guide-gray);
  font-size: .875rem;
  line-height: 1.52;
}

.guide-notes {
  display: grid;
  gap: 0.62rem;
  margin: 0.62rem 0 0;
  padding: 0;
  list-style: none;
}

.guide-notes li {
  padding: 0.65rem 0.7rem;
  border-left: 0.25rem solid var(--guide-gold);
  background: var(--guide-off-white);
  color: #34445e;
  font-size: .875rem;
  line-height: 1.58;
}

.guide-icon,
.shared-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  line-height: 0;
}

.guide-icon > svg,
.shared-icon > svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (min-width: 31rem) {
  .guide-main {
    padding-inline: 0.8rem;
  }

  .guide-info-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .guide-info-item:nth-child(n) {
    border-bottom: 0;
  }

  .guide-info-item:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,0.17);
  }
}

@media (max-width: 22rem) {
  .guide-title-row h2 {
    font-size: 1.65rem;
  }

  .guide-info-item {
    min-height: 7.35rem;
  }

  .guide-filter {
    font-size: .875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Google Maps formal location master v1.4 */
.guide-location-section {
  margin-top: 1.25rem;
}

.guide-section-heading__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.7rem;
}

.guide-master-badge {
  display: inline-flex;
  min-height: 1.75rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0.28rem 0.55rem;
  border: 1px solid rgba(11, 44, 103, 0.16);
  border-radius: 999px;
  background: #fff;
  color: var(--guide-navy);
  font-size: .875rem;
  font-weight: 800;
  white-space: nowrap;
}

.guide-master-badge.is-ready {
  border-color: rgba(50, 121, 84, 0.25);
  background: #f2f8f4;
  color: #24643f;
}

.guide-data-error {
  margin-top: 0.7rem;
  padding: 0.8rem;
  border-left: 0.28rem solid #a33b3b;
  border-radius: 0.55rem;
  background: #fff4f4;
  color: #6d2929;
  font-size: .875rem;
  line-height: 1.6;
}

.guide-filters {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.guide-filter {
  min-height: 3.8rem;
  padding: 0.4rem 0.18rem;
}

.guide-filter__count {
  display: block;
  color: var(--guide-gray);
  font-size: .875rem;
  font-weight: 650;
  line-height: 1;
}

.guide-filter[aria-pressed="true"] .guide-filter__count {
  color: rgba(255, 255, 255, 0.72);
}

.guide-coordinate-map-card {
  margin-top: 0.68rem;
  overflow: hidden;
  border: 1px solid rgba(11, 44, 103, 0.1);
  border-radius: var(--guide-radius);
  background: #fff;
  box-shadow: var(--guide-shadow);
}

.guide-coordinate-map__toolbar {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.68rem 0.78rem;
  border-bottom: 1px solid var(--guide-line);
}

.guide-coordinate-map__toolbar strong {
  display: block;
  color: var(--guide-navy-deep);
  font-size: 0.88rem;
}

.guide-coordinate-map__toolbar small {
  display: block;
  margin-top: 0.08rem;
  color: var(--guide-gray);
  font-size: .875rem;
}

.guide-map-reset {
  min-height: 2.35rem;
  padding: 0.45rem 0.72rem;
  border: 1px solid rgba(11, 44, 103, 0.18);
  border-radius: 999px;
  background: #fff;
  color: var(--guide-navy);
  font: inherit;
  font-size: .875rem;
  font-weight: 800;
  cursor: pointer;
}

.guide-coordinate-map {
  position: relative;
  width: 100%;
  min-height: 20rem;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(133deg, transparent 0 43%, rgba(214, 232, 242, 0.92) 43% 56%, transparent 56% 100%),
    linear-gradient(25deg, rgba(232, 237, 224, 0.9) 0 37%, rgba(247, 245, 240, 0.95) 37% 100%);
}

.guide-coordinate-map::before,
.guide-coordinate-map::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  transform: rotate(-17deg);
}

.guide-coordinate-map::before {
  width: 135%;
  height: 0.36rem;
  left: -18%;
  top: 35%;
}

.guide-coordinate-map::after {
  width: 120%;
  height: 0.3rem;
  left: -8%;
  top: 69%;
}

.guide-coordinate-map__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(11, 44, 103, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 44, 103, 0.09) 1px, transparent 1px);
  background-size: 12.5% 12.5%;
}

.guide-coordinate-map__north {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 4;
  display: grid;
  width: 2.45rem;
  height: 2.45rem;
  place-items: center;
  border: 1px solid rgba(11, 44, 103, 0.15);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--guide-navy);
  box-shadow: 0 0.12rem 0.45rem rgba(11, 44, 103, 0.12);
  font-size: .875rem;
  line-height: 1;
}

.guide-coordinate-map__north b {
  display: block;
  margin-top: -0.15rem;
  font-size: 1rem;
}

.guide-map-pins {
  position: absolute;
  inset: 0.7rem;
}

.guide-map-pin {
  --pin-color: var(--guide-navy);
  position: absolute;
  z-index: 2;
  display: grid;
  width: 2.45rem;
  min-height: 2.45rem;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transform: translate(-50%, -84%);
}

.guide-map-pin__shape {
  position: relative;
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border: 0.16rem solid #fff;
  border-radius: 50% 50% 50% 0;
  background: var(--pin-color);
  box-shadow: 0 0.14rem 0.45rem rgba(7, 31, 75, 0.28);
  transform: rotate(-45deg);
}

.guide-map-pin__shape > span {
  display: grid;
  width: 1.2rem;
  height: 1.2rem;
  place-items: center;
  transform: rotate(45deg);
}

.guide-map-pin__shape .guide-icon {
  width: 1.1rem;
  height: 1.1rem;
  color: #fff;
  --icon-accent: #fff;
}

.guide-map-pin[data-variable="true"] .guide-map-pin__shape {
  border-style: dashed;
}

.guide-map-pin[data-status="conditional"] .guide-map-pin__shape::after {
  content: "!";
  position: absolute;
  top: -0.4rem;
  right: -0.45rem;
  display: grid;
  width: 1rem;
  height: 1rem;
  place-items: center;
  border: 0.1rem solid #fff;
  border-radius: 50%;
  background: var(--guide-gold);
  color: var(--guide-navy-deep);
  font-size: .875rem;
  font-weight: 900;
  transform: rotate(45deg);
}

.guide-map-pin__label {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.2rem);
  display: none;
  width: max-content;
  max-width: 9rem;
  padding: 0.28rem 0.42rem;
  border: 1px solid rgba(11, 44, 103, 0.12);
  border-radius: 0.38rem;
  background: rgba(255, 255, 255, 0.96);
  color: var(--guide-navy-deep);
  box-shadow: 0 0.12rem 0.45rem rgba(11, 44, 103, 0.12);
  font-size: .875rem;
  font-weight: 750;
  line-height: 1.35;
  text-align: left;
  transform: translateX(-50%);
}

.guide-map-pin:hover,
.guide-map-pin:focus-visible,
.guide-map-pin.is-selected {
  z-index: 7;
}

.guide-map-pin:hover .guide-map-pin__label,
.guide-map-pin:focus-visible .guide-map-pin__label,
.guide-map-pin.is-selected .guide-map-pin__label {
  display: block;
}

.guide-map-pin.is-selected .guide-map-pin__shape {
  outline: 0.2rem solid rgba(212, 166, 42, 0.5);
  outline-offset: 0.15rem;
}

.guide-map-pin[data-group="viewing"],
.guide-map-pin[data-group="sightseeing"] { --pin-color: #0b2c67; }
.guide-map-pin[data-group="rest"],
.guide-map-pin[data-group="food"] { --pin-color: #a9790b; }
.guide-map-pin[data-group="photo"] { --pin-color: #b44f2b; }
.guide-map-pin[data-group="boat"] { --pin-color: #167a83; }
.guide-map-pin[data-group="grab"] { --pin-color: #56657a; }

.guide-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem 0.72rem;
  padding: 0.62rem 0.75rem 0;
}

.guide-map-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #45536a;
  font-size: .875rem;
  font-weight: 650;
}

.guide-map-legend__dot {
  width: 0.72rem;
  height: 0.72rem;
  border: 0.1rem solid #fff;
  border-radius: 50%;
  background: var(--legend-color);
  box-shadow: 0 0 0 1px rgba(11, 44, 103, 0.15);
}

.guide-coordinate-map__note {
  margin: 0;
  padding: 0.58rem 0.75rem 0.75rem;
  color: var(--guide-gray);
  font-size: .875rem;
  line-height: 1.55;
}

.guide-spot-card {
  overflow: hidden;
  padding: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.guide-spot-card.is-selected {
  border-color: rgba(212, 166, 42, 0.75);
  box-shadow: 0 0 0 0.12rem rgba(212, 166, 42, 0.18), var(--guide-shadow);
}

.guide-spot-card > summary {
  display: grid;
  min-height: 5rem;
  grid-template-columns: 2.35rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.62rem;
  padding: 0.78rem;
  cursor: pointer;
  list-style: none;
}

.guide-spot-card > summary::-webkit-details-marker {
  display: none;
}

.guide-spot-card__summary-icon {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: 50%;
  background: var(--guide-off-white);
  color: var(--guide-navy);
  --icon-accent: var(--guide-gold);
}

.guide-spot-card__summary-icon .guide-icon {
  width: 1.55rem;
  height: 1.55rem;
}

.guide-spot-card__summary-main {
  min-width: 0;
}

.guide-spot-card__summary-main h3 {
  margin: 0;
  color: var(--guide-navy-deep);
  font-size: 0.9rem;
  font-weight: 820;
  line-height: 1.42;
}

.guide-spot-card__official {
  margin: 0.18rem 0 0;
  overflow-wrap: anywhere;
  color: var(--guide-gray);
  font-size: .875rem;
  line-height: 1.42;
}

.guide-spot-card__chevron {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border-radius: 50%;
  background: var(--guide-off-white);
  color: var(--guide-navy);
  font-size: 1rem;
  font-weight: 800;
  transition: transform 0.15s ease;
}

.guide-spot-card[open] .guide-spot-card__chevron {
  transform: rotate(180deg);
}

.guide-spot-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  padding: 0 0.78rem 0.68rem 3.75rem;
}

.guide-location-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid rgba(11, 44, 103, 0.12);
  border-radius: 999px;
  background: #f7f8fa;
  color: #47566e;
  font-size: .875rem;
  font-weight: 750;
  line-height: 1.2;
}

.guide-location-badge--formal {
  background: #f1f7f3;
  color: #276344;
}

.guide-location-badge--conditional {
  border-color: rgba(212, 166, 42, 0.36);
  background: #fff9e9;
  color: #765914;
}

.guide-location-badge--variable {
  border-style: dashed;
  background: #fff8ed;
  color: #7b5020;
}

.guide-spot-card__body {
  padding: 0 0.82rem 0.85rem;
  border-top: 1px solid var(--guide-line);
}

.guide-location-alert {
  margin: 0.72rem 0 0;
  padding: 0.62rem 0.68rem;
  border-left: 0.24rem solid var(--guide-gold);
  border-radius: 0.4rem;
  background: #fffaf0;
  color: #634d1f;
  font-size: .875rem;
  font-weight: 650;
  line-height: 1.55;
}

.guide-photo-purpose {
  margin: 0.72rem 0 0;
  padding: 0.62rem 0.68rem;
  border-radius: 0.45rem;
  background: #f7f5f0;
  color: #4a3d2f;
  font-size: .875rem;
  line-height: 1.55;
}

.guide-photo-purpose strong {
  color: var(--guide-navy-deep);
}

.guide-location-facts {
  display: grid;
  gap: 0;
  margin: 0.72rem 0 0;
}

.guide-location-facts > div {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  gap: 0.55rem;
  padding: 0.58rem 0;
  border-top: 1px solid var(--guide-line);
}

.guide-location-facts dt {
  color: var(--guide-gray);
  font-size: .875rem;
  font-weight: 750;
}

.guide-location-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: #26354d;
  font-size: .875rem;
  line-height: 1.58;
}

.guide-location-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.52rem;
  margin-top: 0.78rem;
}

.guide-location-action {
  display: flex;
  min-height: 3.45rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 0.45rem;
  border: 1px solid rgba(11, 44, 103, 0.18);
  border-radius: 0.68rem;
  background: #fff;
  color: var(--guide-navy);
  font-size: .875rem;
  font-weight: 820;
  line-height: 1.32;
  text-align: center;
}

.guide-location-action--route {
  border-color: var(--guide-navy);
  background: var(--guide-navy);
  color: #fff;
}

.guide-location-action .guide-icon {
  width: 1.28rem;
  height: 1.28rem;
  --icon-accent: var(--guide-gold);
}

.guide-location-action--route .guide-icon {
  color: #fff;
  --icon-accent: var(--guide-gold);
}

.guide-empty-state {
  margin: 0.72rem 0 0;
  padding: 1rem;
  border: 1px dashed rgba(11, 44, 103, 0.2);
  border-radius: 0.7rem;
  background: #fff;
  color: var(--guide-gray);
  font-size: .875rem;
  text-align: center;
}

@media (max-width: 22rem) {
  .guide-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guide-coordinate-map {
    min-height: 18.5rem;
  }

  .guide-location-actions {
    grid-template-columns: 1fr;
  }
}

/* v1.4 location interaction refinements */
.guide-map-reset:disabled {
  opacity: 0.48;
  cursor: default;
}

.guide-map-pin {
  transform: translate(
    calc(-50% + var(--pin-offset-x, 0px)),
    calc(-84% + var(--pin-offset-y, 0px))
  );
}

.guide-filter__label {
  display: block;
  max-width: 100%;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.guide-spot-card__summary-meta {
  display: block;
  margin-top: 0.15rem;
  color: var(--guide-navy);
  font-size: .875rem;
  font-weight: 750;
  line-height: 1.35;
}

.guide-spot-card__body > .guide-spot-card__badges {
  padding: 0.72rem 0 0;
}

.guide-location-badge--priority {
  background: #f5f6f8;
  color: #4c5a70;
}

.guide-location-badge--recommended {
  border-color: rgba(180, 79, 43, 0.25);
  background: #fff2ed;
  color: #8a3c23;
}

.guide-coordinate-map[aria-busy="true"] {
  opacity: 0.7;
}

@media (min-width: 27rem) {
  .guide-filters:not(.guide-filters--many) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


.guide-location-section,
.guide-spots-section,
.guide-map-section,
.guide-timeline-section,
.guide-notes-section {
  scroll-margin-bottom: var(--guide-fixed-nav-clearance);
}

/* Leaflet + OpenStreetMap formal map implementation v1.4 */
.guide-live-map-card {
  overflow: hidden;
  scroll-margin-block: 0.75rem var(--guide-fixed-nav-clearance);
}

.guide-map-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

.guide-map-interaction[aria-pressed="true"] {
  border-color: var(--guide-navy);
  background: var(--guide-navy);
  color: #fff;
}

.guide-leaflet-wrap {
  position: relative;
  min-height: 21rem;
  background: #e9eef2;
}

.guide-leaflet-wrap[hidden] {
  display: none;
}

.guide-leaflet-map {
  width: 100%;
  height: 21rem;
  min-height: 21rem;
  overflow: hidden;
  background: #e9eef2;
  touch-action: pan-y;
}

.guide-leaflet-map.is-interactive {
  touch-action: none;
}

.guide-leaflet-map[hidden] {
  display: none;
}

.guide-map-interaction-hint {
  display: flex;
  width: 100%;
  min-height: 3.15rem;
  align-items: center;
  justify-content: center;
  gap: 0.52rem;
  padding: 0.42rem 0.68rem;
  border-top: 1px solid var(--guide-line);
  background: #f8fafb;
  color: #43506a;
  font-size: .875rem;
  line-height: 1.35;
}

.guide-map-interaction-hint[hidden] {
  display: none;
}

.guide-map-interaction-hint button {
  min-height: 2.4rem;
  flex: 0 0 auto;
  padding: 0.48rem 0.72rem;
  border: 0;
  border-radius: 999px;
  background: var(--guide-navy);
  color: #fff;
  font: inherit;
  font-size: .875rem;
  font-weight: 800;
  cursor: pointer;
}

.guide-map-status {
  min-height: 2.3rem;
  padding: 0.55rem 0.76rem;
  border-top: 1px solid var(--guide-line);
  background: #f8fafb;
  color: #4b596f;
  font-size: .875rem;
  line-height: 1.55;
}

.guide-map-status[data-state="ready"] {
  color: #2c6545;
}

.guide-map-status[data-state="error"] {
  border-left: 0.25rem solid #a33b3b;
  background: #fff4f4;
  color: #6d2929;
}

.guide-map-fallback {
  border-top: 1px solid var(--guide-line);
}

.guide-map-fallback[hidden] {
  display: none;
}

.guide-map-fallback__heading {
  display: grid;
  gap: 0.08rem;
  padding: 0.68rem 0.78rem;
  background: #fff8e7;
  color: var(--guide-navy-deep);
}

.guide-map-fallback__heading strong {
  font-size: .875rem;
}

.guide-map-fallback__heading span {
  color: #6e6040;
  font-size: .875rem;
}

.guide-map-fallback .guide-coordinate-map {
  min-height: 20rem;
}

.guide-leaflet-div-icon {
  border: 0;
  background: transparent;
}

.guide-leaflet-marker {
  position: relative;
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  border: 0.16rem solid #fff;
  border-radius: 50% 50% 50% 0.35rem;
  background: var(--marker-color, var(--guide-navy));
  box-shadow: 0 0.18rem 0.62rem rgba(17, 36, 62, 0.28);
  transform: translate(var(--marker-offset-x, 0), var(--marker-offset-y, 0)) rotate(-45deg);
  transform-origin: center;
  transition: box-shadow 150ms ease, scale 150ms ease;
}

.guide-leaflet-marker.is-variable {
  border-style: dashed;
}

.guide-leaflet-marker.is-selected {
  box-shadow: 0 0 0 0.24rem rgba(212, 166, 42, 0.72), 0 0.3rem 0.85rem rgba(17, 36, 62, 0.34);
  scale: 1.12;
}

.guide-leaflet-marker__icon {
  display: grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  color: #fff;
  --icon-accent: #f4c65b;
  transform: rotate(45deg);
}

.guide-leaflet-marker__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.guide-leaflet-marker__alert {
  position: absolute;
  top: -0.42rem;
  right: -0.42rem;
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  border: 0.12rem solid #fff;
  border-radius: 50%;
  background: var(--guide-gold);
  color: #3d2c05;
  font-size: .875rem;
  font-weight: 900;
  transform: rotate(45deg);
}

.guide-leaflet-popup {
  display: grid;
  gap: 0.16rem;
  min-width: 9.5rem;
  color: #26354d;
  font-family: inherit;
  line-height: 1.4;
}

.guide-leaflet-popup strong {
  color: var(--guide-navy-deep);
  font-size: .875rem;
}

.guide-leaflet-popup span {
  color: #56657a;
  font-size: .875rem;
}

.guide-leaflet-popup small {
  width: fit-content;
  padding: 0.12rem 0.35rem;
  border-radius: 999px;
  background: #fff3cf;
  color: #6d5314;
  font-size: .875rem;
  font-weight: 750;
}

.guide-live-map-card .leaflet-container {
  font-family: inherit;
  outline: none;
}

.guide-live-map-card .leaflet-control-zoom a {
  color: var(--guide-navy);
}

.guide-live-map-card .leaflet-control-attribution {
  max-width: calc(100% - 0.5rem);
  padding: 0.18rem 0.28rem;
  background: rgba(255, 255, 255, 0.92);
  color: #34445e;
  font-size: .875rem;
  line-height: 1.35;
  white-space: normal;
}

.guide-live-map-card .leaflet-control-attribution a {
  color: #0b4f87;
  text-decoration: underline;
  text-underline-offset: 0.1em;
}

.guide-live-map-card .leaflet-marker-icon:focus-visible {
  outline: 0.2rem solid var(--guide-gold);
  outline-offset: 0.18rem;
}

@media (max-width: 24.4rem) {
  .guide-coordinate-map__toolbar {
    align-items: flex-start;
  }

  .guide-map-toolbar-actions {
    max-width: 12.8rem;
  }

  .guide-map-reset {
    min-height: 2.5rem;
    padding-inline: 0.62rem;
  }

  .guide-leaflet-wrap,
  .guide-leaflet-map {
    min-height: 20rem;
    height: 20rem;
  }

  .guide-map-interaction-hint span {
    max-width: 8.2rem;
  }
}

@media (min-width: 48rem) {
  .guide-leaflet-wrap,
  .guide-leaflet-map {
    min-height: 25rem;
    height: 25rem;
  }
}


/* iPhone Safariの動的ビューポート下端を固定ナビへ反映する。 */
@media (max-width: 480px) {
  .guide-shell .bottom-nav {
    bottom: var(--app-visual-viewport-bottom, 0px);
  }
}
/* v1.12 accessibility: map attribution / map UI text floor */
.guide-leaflet-map,.leaflet-control-attribution { font-size:.875rem; }

/* v1.12 public UI */
.guide-location-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}.guide-location-actions a{min-width:0;min-height:2.7rem;white-space:normal;word-break:keep-all;overflow-wrap:normal;font-size:.92rem}.guide-spot-card__badges:empty{display:none}.guide-location-facts dd{word-break:normal;overflow-wrap:normal}
@media(max-width:380px){.guide-location-actions{grid-template-columns:1fr}}
@media(min-width:700px){.guide-filter-tabs,.guide-tabs,.guide-category-tabs{overflow:visible;flex-wrap:wrap}}

/* Production-final: secondary Guide photos stay supporting thumbnails */
.guide-hero-card__image{display:block;width:auto;max-width:min(14rem,calc(100% - 1.9rem));height:auto;aspect-ratio:auto;object-fit:contain;margin:.9rem .95rem 0;border-radius:.8rem}
.guide-location-badge--dining{background:#f5efe0;color:#735713}.guide-location-action--dining{background:#f7f9fc;color:#0B2C67}
.leaflet-control-attribution,.leaflet-control-attribution a{font-size:10px!important;line-height:1.25!important;font-weight:400!important;text-decoration:none!important}.leaflet-control-attribution{padding:2px 5px!important;background:rgba(255,255,255,.88)!important;border:0!important;border-radius:0!important;box-shadow:none!important;min-height:0!important}.leaflet-control-attribution a{display:inline!important;padding:0!important;margin:0!important;background:none!important;color:#365b83!important}


/* v1.12 ui-fix-revised: Guide switcher remains reachable below the standalone safe area */
@media(max-width:699px){
  .guide-switcher{
    position:sticky; z-index:24; top:var(--app-sticky-top);
    margin:0 -.05rem .7rem; padding:.28rem;
    background:rgba(255,255,255,.97); backdrop-filter:blur(14px);
  }
  .guide-switcher a{min-height:2.45rem;}
}