@font-face {
  font-family: "Pretendard Variable";
  src: url("./assets/fonts/PretendardVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --white: #ffffff;
  --blue: #0718ff;
  --red: #ff0a3d;
  --ink: #141414;
  --paper: #fbfbf7;
  --app-ivory: #fff7e6;
  --header-ivory: var(--app-ivory);
  --header-control-y: 0.18rem;
  --header-logo-y: 0.04rem;
  --lime: #caff45;
  --sky: #7de2ff;
  --soft: #f1f1ee;
  --line: #d6d6d0;
  --muted: #777872;
  --charcoal: #666760;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--paper);
  color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  letter-spacing: 0;
}

body {
  height: 100%;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--paper);
}

button {
  color: inherit;
  font: inherit;
}

.app-shell {
  position: relative;
  width: min(100%, 468px);
  height: 100dvh;
  min-height: 0;
  margin: 0 auto;
  overflow: clip;
  overscroll-behavior: none;
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(20, 20, 20, 0.08);
}

.topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 0.24rem;
  padding: 1.48rem 2rem 0.7rem;
  pointer-events: auto;
}

.brand-button,
.edition-chip,
.admin-button,
.settings-button,
.menu-button,
.login-circle-button,
.floating-login-anchor,
.global-search-box {
  pointer-events: auto;
}

.topbar-row {
  display: contents;
}

.top-actions {
  display: flex;
  grid-column: 2;
  grid-row: 2;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.34rem;
  min-width: 0;
  pointer-events: auto;
}

.brand-button {
  grid-column: 1;
  grid-row: 1;
}

.global-search-box {
  grid-column: 2;
  grid-row: 1;
}

.brand-button {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--red);
  cursor: pointer;
  display: block;
  width: clamp(8.55rem, 36vw, 11.2rem);
  height: clamp(2.95rem, 12vw, 3.88rem);
  padding: 0;
}

.brand-logo-mark {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--red);
  -webkit-mask: url("./assets/yoribu-logo.svg?v=20260916-logo-final-15") left bottom / contain no-repeat;
  mask: url("./assets/yoribu-logo.svg?v=20260916-logo-final-15") left bottom / contain no-repeat;
}

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

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

.login-button,
.admin-button,
.settings-button,
.menu-button,
.login-circle-button {
  appearance: none;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--charcoal);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 780;
  padding: 0.42rem 0.62rem;
  white-space: nowrap;
}

.login-circle-button {
  border-color: rgba(255, 255, 255, 0.94);
  background: var(--red);
  color: var(--white);
  display: grid;
  place-items: center;
  width: 2.86rem;
  height: 2.86rem;
  padding: 0;
  font-size: 0.88rem;
  letter-spacing: 0;
  overflow: hidden;
  transition:
    background 160ms ease,
    color 160ms ease,
    border-color 160ms ease;
}

.login-circle-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.login-person-icon {
  display: block;
  width: 1.42rem;
  height: 1.42rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.15;
}

.login-circle-button.is-logged-in {
  background: var(--white);
  padding: 0.16rem;
}

.login-circle-button.is-logged-in img {
  border-radius: 999px;
}

.login-circle-button:hover {
  border-color: var(--white);
  background: var(--charcoal);
  color: var(--white);
}

.floating-login-anchor {
  position: absolute;
  z-index: 12;
  right: 1.6rem;
  bottom: 3.1rem;
  display: grid;
  place-items: center;
}

.fixed-flag-frame.is-guide-open .floating-login-anchor {
  display: none;
}

.edition-chip {
  display: none;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--charcoal);
  font-size: 0.92rem;
  font-weight: 760;
  padding: 0.48rem 0.82rem;
  white-space: nowrap;
}

.fixed-flag-frame {
  position: relative;
  height: 100%;
  padding: 8.9rem 1.35rem 2.7rem;
  background: var(--white);
}

.fixed-flag-frame::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 8.9rem;
  right: 1.35rem;
  bottom: 2.7rem;
  left: 1.35rem;
  border-radius: 4rem;
  background:
    linear-gradient(180deg, rgba(20, 20, 20, 0.08) 0%, rgba(20, 20, 20, 0.026) 0.9rem, transparent 2rem),
    linear-gradient(90deg, rgba(20, 20, 20, 0.07) 0%, rgba(20, 20, 20, 0.024) 0.82rem, transparent 1.85rem);
  box-shadow:
    inset 0 0 0 1px rgba(20, 20, 20, 0.16),
    inset 0.28rem 0.28rem 0.52rem rgba(20, 20, 20, 0.035);
  pointer-events: none;
}

.flag-blue,
.flag-red {
  position: absolute;
  left: -5%;
  right: -5%;
  pointer-events: none;
}

.flag-blue {
  top: 36.2%;
  height: 30.2%;
  background: var(--blue);
  border-radius: 50% 50% 0 0 / 5% 6% 0 0;
}

.flag-red {
  top: 63.1%;
  bottom: 0.45rem;
  background: var(--red);
  border-radius: 50% 50% 0 0 / 4% 5% 0 0;
}

.app-shell[data-country="usa"][data-background="flag"] .flag-blue {
  top: 48%;
  height: 14%;
  background: var(--red);
  border-radius: 50% 50% 0 0 / 10% 12% 0 0;
}

.app-shell[data-country="usa"][data-background="flag"] .flag-red {
  top: 59%;
  background: var(--blue);
  border-radius: 50% 50% 0 0 / 8% 10% 0 0;
}

.app-shell[data-country="korea"][data-background="flag"] .flag-blue {
  background: var(--red);
  height: 50%;
}

.app-shell[data-country="korea"][data-background="flag"] .flag-red {
  top: 56%;
  background: var(--blue);
  clip-path: polygon(
    0 54%,
    8% 46%,
    18% 32%,
    32% 18%,
    48% 8%,
    64% 0,
    100% 0,
    100% 100%,
    0 100%
  );
}

.app-shell[data-background="city"] .fixed-flag-frame,
.app-shell[data-background="nature"] .fixed-flag-frame,
.app-shell[data-background="night"] .fixed-flag-frame,
.app-shell[data-background="seoul-cafe-street"] .fixed-flag-frame,
.app-shell[data-background="seoul-evening-street"] .fixed-flag-frame,
.app-shell[data-background="seoul-neon-tower"] .fixed-flag-frame,
.app-shell[data-background="seoul-neon-alley"] .fixed-flag-frame,
.app-shell[data-background="custom"] .fixed-flag-frame {
  background: var(--custom-bg);
  background-position: center;
  background-size: cover;
}

.app-shell[data-background="city"] .flag-blue,
.app-shell[data-background="city"] .flag-red,
.app-shell[data-background="nature"] .flag-blue,
.app-shell[data-background="nature"] .flag-red,
.app-shell[data-background="night"] .flag-blue,
.app-shell[data-background="night"] .flag-red,
.app-shell[data-background="seoul-cafe-street"] .flag-blue,
.app-shell[data-background="seoul-cafe-street"] .flag-red,
.app-shell[data-background="seoul-evening-street"] .flag-blue,
.app-shell[data-background="seoul-evening-street"] .flag-red,
.app-shell[data-background="seoul-neon-tower"] .flag-blue,
.app-shell[data-background="seoul-neon-tower"] .flag-red,
.app-shell[data-background="seoul-neon-alley"] .flag-blue,
.app-shell[data-background="seoul-neon-alley"] .flag-red,
.app-shell[data-background="custom"] .flag-blue,
.app-shell[data-background="custom"] .flag-red {
  opacity: 0;
}

.content-window {
  position: relative;
  z-index: 2;
  isolation: isolate;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: contain;
  border-radius: 4rem;
  background: var(--paper);
  box-shadow: none;
}

.content-window::-webkit-scrollbar {
  display: none;
}

.page-track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  width: 200%;
  height: 100%;
  min-height: 0;
  transform: translateX(0);
  transition: transform 900ms cubic-bezier(0.2, 0.78, 0.16, 1);
  will-change: transform;
}

.page-track.is-dragging {
  transition: none;
}

.page-track.is-detail-open {
  transform: translateX(-50%);
}

.page-stack {
  min-width: 0;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.page-stack::-webkit-scrollbar {
  display: none;
}

.scroll-panel {
  min-height: 100%;
}

.guide-entry {
  display: grid;
  width: calc(100% - 1.64rem);
  margin: 0.6rem 0.82rem 0.9rem;
  padding: 1rem 1.1rem;
  text-align: left;
  border: 0;
  border-radius: 1rem;
  background: var(--red);
  color: white;
  cursor: pointer;
}
.list-panel.is-searching .today-course,
.list-panel.is-searching .guide-entry {
  display: none;
}
.guide-entry > span, .guide-heading span { font-size: .66rem; font-weight: 850; letter-spacing: .14em; }
.guide-entry strong { display: flex; justify-content: space-between; align-items: center; margin-top: .25rem; font-size: 1.3rem; }
.guide-entry strong b { font-size: 1.6rem; font-weight: 500; }
.guide-entry small { margin-top: .25rem; font-size: .76rem; opacity: .88; }
.guide-screen {
  position: absolute;
  z-index: 4;
  top: 8.9rem;
  right: 1.35rem;
  bottom: 2.7rem;
  left: 1.35rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 4rem;
  box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.16);
  -webkit-overflow-scrolling: touch;
}

.guide-screen[aria-hidden="true"] {
  visibility: hidden;
  pointer-events: none;
}

.guide-screen::-webkit-scrollbar {
  display: none;
}

.guide-panel { padding: 1.6rem .82rem 3rem; background: #f6f3eb; }
.guide-heading { display: flex; align-items: flex-start; gap: .8rem; padding: 0 .15rem .8rem; }
.guide-heading > div { position: relative; min-width: 0; }
.guide-heading span { position: absolute; top: -.85rem; left: 0; color: var(--red); white-space: nowrap; }
.guide-heading h2 { margin: 0 0 .15rem; font-size: 1.55rem; line-height: 1.15; }
.guide-heading p { margin: 0; color: var(--muted); font-size: .83rem; }
.guide-back { flex: 0 0 2.25rem; height: 2.25rem; border: 1px solid var(--line); border-radius: 50%; background: white; font-size: 1.25rem; cursor: pointer; }
.guide-pan-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: 0 0 .7rem; }
.guide-pan-controls button { min-height: 2.2rem; border: 1px solid #ded8ca; border-radius: 999px; background: #fffdf7; color: #514c43; font-size: .72rem; font-weight: 800; cursor: pointer; }
.guide-pan-controls button:focus-visible { outline: 2px solid var(--red); }
.guide-map-shell { position: relative; width: calc(100% + 1.64rem); margin-left: -.82rem; }
.guide-map-viewport { width: 100%; height: 547px; overflow: auto; overscroll-behavior: contain; touch-action: none; cursor: grab; scrollbar-width: none; }
.guide-map-viewport:active { cursor: grabbing; }
.guide-map-viewport::-webkit-scrollbar { display: none; }
.guide-zoom-controls { position: absolute; right: .28rem; top: .28rem; z-index: 5; display: grid; gap: 0; }
.guide-zoom-controls button { position: relative; isolation: isolate; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #505a53; font-size: 1rem; font-weight: 700; line-height: 1; cursor: pointer; }
.guide-zoom-controls button::before { content: ""; position: absolute; z-index: -1; width: 28px; height: 28px; border: 1px solid #777e73; border-radius: 50%; background: #fffdf5f2; box-shadow: 0 2px 5px #403c2929; }
.guide-zoom-controls button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.guide-map-stage { position: relative; width: calc(820px * var(--guide-zoom, 1)); aspect-ratio: var(--guide-map-aspect, 3 / 2); overflow: hidden; background: #f8f2e8 var(--guide-map-image) center / 100% 100% no-repeat; }
.guide-map-note { margin: .55rem .15rem .1rem; color: var(--muted); font-size: .68rem; line-height: 1.4; }
.guide-map-stage::before { content: ""; position: absolute; inset: 0; background: rgba(255,250,238,.10); pointer-events: none; }
.guide-map-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.guide-river, .guide-river-inner, .guide-route { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.guide-river, .guide-river-inner { display: none; }
.guide-route { stroke: var(--red); stroke-width: .8; stroke-dasharray: 1.3 1.2; opacity: .8; }
.guide-district { position: absolute; z-index: 1; padding: calc(.2rem * var(--guide-marker-zoom, 1)) calc(.38rem * var(--guide-marker-zoom, 1)); border: 1.5px solid #3e4740; border-radius: .48rem; background: #fff6d9e8; box-shadow: 1.5px 1.5px 0 #3e4740; color: #303b34; font-size: calc(.72rem * var(--guide-marker-zoom, 1)); font-family: "Pretendard Variable", Pretendard, sans-serif; font-weight: 850; letter-spacing: -.02em; transform: rotate(-3deg); pointer-events: none; white-space: nowrap; }
.guide-district.small { padding: calc(.13rem * var(--guide-marker-zoom, 1)) calc(.28rem * var(--guide-marker-zoom, 1)); border-color: #788577; background: #f5f6e7e8; box-shadow: none; color: #556456; font-size: calc(.6rem * var(--guide-marker-zoom, 1)); font-weight: 800; transform: rotate(2deg); }
.guide-district.river { border: 0; background: #f4fbf0d9; box-shadow: none; color: #267c7d; font-size: calc(.76rem * var(--guide-marker-zoom, 1)); letter-spacing: .14em; transform: rotate(-7deg); }
.guide-landmark { position: absolute; z-index: 1; display: grid; justify-items: center; width: calc(4.7rem * var(--guide-marker-zoom, 1)); transform: translate(-50%,-50%); pointer-events: none; }
.guide-landmark svg { display: block; width: calc(2.55rem * var(--guide-marker-zoom, 1)); height: calc(2.55rem * var(--guide-marker-zoom, 1)); overflow: visible; filter: drop-shadow(1px 1px 0 #fff9e9); }
.guide-landmark > span { display: block; max-width: 100%; padding: calc(.08rem * var(--guide-marker-zoom, 1)) calc(.18rem * var(--guide-marker-zoom, 1)); border: 1px solid #3e4740; border-radius: .3rem; background: #f9dce0f0; color: #303936; font-size: calc(.57rem * var(--guide-marker-zoom, 1)); font-weight: 850; letter-spacing: -.04em; line-height: 1.15; white-space: nowrap; }
.guide-pin { position: absolute; z-index: 2; display: grid; place-items: center; transform: translate(-50%,-50%); width: calc(2.5rem * var(--guide-marker-zoom, 1)); height: calc(2.5rem * var(--guide-marker-zoom, 1)); border: calc(3px * var(--guide-marker-zoom, 1)) solid white; border-radius: 50%; box-shadow: 0 3px 10px #25201740; cursor: pointer; font-size: calc(.64rem * var(--guide-marker-zoom, 1)); font-weight: 900; }
.guide-pin.go, .guide-list-status.go { background: var(--red); color: white; }
.guide-pin.skip, .guide-list-status.skip { background: #ffdc35; color: #111; }
.guide-pin:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.guide-legend { display: flex; align-items: center; gap: .8rem; padding: .72rem .25rem 1.2rem; font-size: .72rem; font-weight: 850; }
.guide-legend > span { display: flex; align-items: center; gap: .3rem; }
.guide-legend i { width: .7rem; height: .7rem; border-radius: 50%; }
.guide-legend i.go { background: var(--red); } .guide-legend i.skip { background: #ffdc35; }
.guide-legend small { margin-left: auto; color: var(--muted); font-weight: 600; font-size: .68rem; }
.guide-course { padding: 1rem; border-radius: 1rem; background: #171717; color: white; }
.guide-course > span { display: block; margin-bottom: .25rem; color: #f1b7c4; font-size: .7rem; font-weight: 800; }
.guide-course > strong { display: block; font-size: 1.15rem; }
.guide-course > div { display: grid; gap: .45rem; margin-top: .85rem; }
.guide-course button { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .55rem; border: 1px solid #ffffff30; border-radius: .55rem; background: #ffffff13; color: white; text-align: left; font-size: .8rem; cursor: pointer; }
.guide-course button b { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--red); font-size: .7rem; }
.guide-all { margin-top: 1.6rem; }
.guide-all h3 { margin: 0 0 .55rem; font-size: 1.1rem; } .guide-all h3 small { color: var(--muted); font-size: .72rem; }
.guide-all > button { display: flex; align-items: center; gap: .5rem; width: 100%; min-width: 0; padding: .6rem .2rem; border: 0; border-bottom: 1px solid #dfdcd3; background: transparent; text-align: left; cursor: pointer; }
.guide-all > button strong { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .82rem; }
.guide-all > button small { margin-left: auto; max-width: 24%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size: .7rem; }
.guide-list-status { flex: 0 0 auto; min-width: 2.5rem; padding: .22rem .3rem; border-radius: 99px; text-align: center; font-size: .58rem; font-weight: 900; }
@media (max-width: 360px) { .guide-legend small { display: none; } }

.start-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: end;
  background:
    radial-gradient(circle at 16% 14%, rgba(255, 255, 255, 0.72), transparent 18rem),
    linear-gradient(145deg, #f8efe2 0%, #e9eadb 46%, #dcebe9 100%);
}

.start-panel > img,
.start-panel > video,
.place-card img,
.detail-image video,
.detail-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.start-panel > img,
.start-panel > video {
  position: absolute;
  inset: 0;
}

.photo-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 20, 20, 0.08) 0%, transparent 38%),
    linear-gradient(0deg, rgba(20, 20, 20, 0.72) 0%, transparent 58%);
}

.map-shade {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 30%),
    linear-gradient(0deg, rgba(20, 20, 20, 0.76) 0%, rgba(20, 20, 20, 0.38) 38%, transparent 72%);
}

.hero-map {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.76), transparent 12rem),
    radial-gradient(circle at 82% 26%, rgba(255, 240, 210, 0.72), transparent 11rem),
    linear-gradient(145deg, #f4ead9 0%, #e2e6d8 48%, #d9ece8 100%);
}

.hero-map::before,
.hero-map::after,
.map-paper-texture,
.map-river,
.map-road,
.map-route,
.map-district,
.map-pin {
  position: absolute;
}

.hero-map::before {
  content: "";
  inset: -4rem;
  opacity: 0.3;
  background-image:
    linear-gradient(rgba(20, 20, 20, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 20, 20, 0.045) 1px, transparent 1px);
  background-size: 4.2rem 4.2rem;
  transform: rotate(-8deg);
}

.hero-map::after {
  content: "";
  inset: 0;
  background:
    radial-gradient(circle at 50% 47%, transparent 0 40%, rgba(255, 255, 255, 0.28) 68%, rgba(20, 20, 20, 0.12) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 34%, rgba(255, 255, 255, 0.14));
}

.map-paper-texture {
  inset: 0;
  opacity: 0.24;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(20, 20, 20, 0.08) 0 1px, transparent 1px),
    radial-gradient(circle at 82% 70%, rgba(20, 20, 20, 0.07) 0 1px, transparent 1px);
  background-size: 1.2rem 1.2rem, 1.55rem 1.55rem;
}

.map-river {
  left: -16%;
  right: -18%;
  top: 38%;
  height: 7.1rem;
  border-radius: 50%;
  background: rgba(91, 164, 196, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.42);
  transform: rotate(-11deg);
  box-shadow:
    inset 0 0 0 1px rgba(32, 95, 125, 0.14),
    0 0.8rem 1.8rem rgba(75, 118, 130, 0.16);
}

.map-road {
  width: 42%;
  height: 2px;
  border-top: 2px dashed rgba(96, 101, 91, 0.24);
  border-radius: 999px;
}

.map-road-a {
  left: 7%;
  top: 24%;
  transform: rotate(18deg);
}

.map-road-b {
  right: 8%;
  top: 30%;
  transform: rotate(-26deg);
}

.map-road-c {
  left: 14%;
  bottom: 29%;
  transform: rotate(-15deg);
}

.map-road-d {
  right: 5%;
  bottom: 25%;
  transform: rotate(22deg);
}

.map-route {
  left: 30%;
  top: 27%;
  width: 41%;
  height: 32%;
  border: 2px solid rgba(255, 10, 61, 0.24);
  border-right: 0;
  border-bottom: 0;
  border-radius: 54% 0 0 0;
  transform: rotate(-8deg);
  overflow: hidden;
}

.map-route::after {
  content: "";
  position: absolute;
  inset: -2px auto auto -18%;
  width: 42%;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 10, 61, 0.82);
  box-shadow: 0 0 0.5rem rgba(255, 10, 61, 0.38);
  animation: routeTrace 3.6s ease-in-out infinite;
}

.map-district {
  z-index: 2;
  color: rgba(20, 20, 20, 0.46);
  font-size: 0.72rem;
  font-weight: 860;
  letter-spacing: 0;
  transform: rotate(-8deg);
}

.district-north {
  left: 21%;
  top: 26%;
}

.district-center {
  right: 16%;
  top: 34%;
}

.district-south {
  right: 18%;
  bottom: 30%;
}

.district-west {
  left: 19%;
  bottom: 31%;
}

.map-pin {
  z-index: 3;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  min-width: 2.18rem;
  min-height: 2.18rem;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 999px 999px 999px 0;
  box-shadow: 0 0.5rem 1.3rem rgba(20, 20, 20, 0.18);
  color: var(--white);
  font-size: 0.52rem;
  font-weight: 900;
  line-height: 1;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.map-pin.go {
  background: var(--red);
}

.map-pin.skip {
  background: rgba(95, 98, 91, 0.95);
}

.map-pin::after {
  content: attr(class);
}

.map-pin {
  text-indent: -999px;
}

.map-pin::before {
  content: "";
}

.map-pin.go::after {
  content: "GO";
  text-indent: 0;
  transform: rotate(45deg);
}

.map-pin.skip::after {
  content: "SKIP";
  text-indent: 0;
  transform: rotate(45deg);
}

@keyframes routeTrace {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  18% {
    opacity: 1;
  }
  62% {
    opacity: 1;
    transform: translate(11rem, 0);
  }
  100% {
    opacity: 0;
    transform: translate(13rem, 0);
  }
}

.panel-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.78rem;
  padding: 2.2rem 1.45rem 2.4rem;
}

.hero-copy {
  color: var(--white);
}

.intro-kicker {
  width: fit-content;
  margin: 0;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--charcoal);
  font-size: 0.88rem;
  font-weight: 780;
  padding: 0.48rem 0.78rem;
}

.hero-copy h1,
.sticky-panel-head h1,
.detail-copy h1 {
  margin: 0;
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 870;
  letter-spacing: 0;
  line-height: 0.95;
}

.hero-copy h1 {
  max-width: 12.2rem;
  font-size: clamp(1.78rem, 7.2vw, 2.42rem);
  line-height: 1;
  word-break: keep-all;
}

.hero-copy p:not(.intro-kicker),
.detail-short,
.reason-box p,
.place-card p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.45;
}

.hero-copy p:not(.intro-kicker) {
  color: rgba(255, 255, 255, 0.82);
  max-width: 17.5rem;
  font-size: 0.98rem;
  word-break: keep-all;
}

.primary-action,
.secondary-action,
.filter-button,
.status-pill {
  appearance: none;
  border: 0;
  cursor: pointer;
}

.media-badge {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  border-radius: 999px;
  background: rgba(63, 64, 61, 0.78);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1;
  padding: 0.42rem 0.58rem;
}

.primary-action {
  width: 100%;
  border-radius: 1.4rem;
  background: var(--charcoal);
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 820;
  padding: 1rem 1.2rem;
}

.primary-action.compact {
  width: auto;
  min-width: 9.4rem;
}

.secondary-action {
  border: 2px solid rgba(20, 20, 20, 0.18);
  border-radius: 1.4rem;
  background: var(--white);
  font-weight: 780;
  padding: 0.9rem 1.15rem;
}

.secondary-action.full {
  width: 100%;
}

.hero-secondary {
  width: 100%;
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.88);
  color: var(--charcoal);
}

.list-panel,
.detail-panel {
  background: rgba(255, 255, 255, 0.96);
}

.sticky-panel-head {
  position: sticky;
  top: 0;
  z-index: 12;
  display: grid;
  gap: 0.48rem;
  border-bottom: 1px solid rgba(20, 20, 20, 0.1);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.82rem 1.05rem 0.68rem;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.42rem;
}

.global-search-box {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.48rem;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 2.34rem;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  cursor: text;
  margin: 0;
  padding: 0.28rem 0.82rem 0.28rem 0.9rem;
}

.global-search-box input {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 1.82rem;
  min-width: 0;
  border: 0;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  caret-color: var(--white);
  color: var(--white);
  font: inherit;
  font-size: 16px;
  font-weight: 760;
  letter-spacing: 0;
  pointer-events: auto;
  -webkit-user-select: text;
  user-select: text;
}

input,
textarea,
select {
  font-size: max(16px, 1rem);
}

.global-search-box input::placeholder {
  color: rgba(255, 255, 255, 0.78);
}

.global-search-box:focus-within {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.42);
}

.search-submit {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 1.72rem;
  height: 1.72rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  padding: 0;
}

.search-submit:hover,
.search-submit:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  outline: none;
}

.search-icon {
  width: 0.98rem;
  height: 0.98rem;
  color: var(--white);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.45;
}

.category-row {
  display: flex;
  gap: 0.42rem;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  cursor: grab;
  touch-action: none;
  user-select: none;
  overscroll-behavior: contain;
  padding: 0 0 0.12rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.category-row.is-dragging {
  cursor: grabbing;
}

.category-row::-webkit-scrollbar {
  display: none;
}

.filter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 4.4rem;
  min-height: 2rem;
  border: 1px solid rgba(20, 20, 20, 0.12);
  border-radius: 999px;
  background: var(--white);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  padding: 0.36rem 0.72rem 0.4rem;
}

.category-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 2.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 780;
  line-height: 1;
  padding: 0.42rem 0.72rem 0.46rem;
}

.category-button.is-active {
  background: var(--soft);
  color: var(--charcoal);
}

.filter-button.is-active {
  border-color: var(--charcoal);
  background: var(--charcoal);
  color: var(--white);
}

.result-count {
  margin: -0.28rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.today-course {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.72rem;
  margin: 0.82rem 0.82rem 0.72rem;
  border: 1px solid rgba(20, 20, 20, 0.1);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.82);
  padding: 0.88rem;
}

.course-head {
  display: grid;
  gap: 0.24rem;
}

.course-head span {
  width: fit-content;
  border-radius: 999px;
  background: var(--soft);
  color: var(--charcoal);
  font-size: 0.72rem;
  font-weight: 820;
  padding: 0.28rem 0.52rem;
}

.course-head strong {
  font-size: 1.08rem;
  line-height: 1.1;
}

.course-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.38;
}

.course-steps {
  display: grid;
  gap: 0.42rem;
}

.course-area-row {
  display: flex;
  gap: 0.34rem;
  overflow-x: auto;
  padding-bottom: 0.08rem;
  scrollbar-width: none;
}

.course-area-row::-webkit-scrollbar {
  display: none;
}

.course-area-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid rgba(20, 20, 20, 0.12);
  border-radius: 999px;
  background: var(--white);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
  padding: 0.32rem 0.58rem 0.36rem;
  white-space: nowrap;
}

.course-area-button.is-active {
  border-color: var(--charcoal);
  background: var(--charcoal);
  color: var(--white);
}

.course-step {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.16rem 0.56rem;
  width: 100%;
  border: 1px solid rgba(20, 20, 20, 0.1);
  border-radius: 0.68rem;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  padding: 0.56rem 0.64rem;
  text-align: left;
  touch-action: pan-y;
}

.course-step span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 1.74rem;
  height: 1.74rem;
  border-radius: 999px;
  background: var(--charcoal);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 860;
}

.course-step strong {
  font-size: 0.92rem;
  line-height: 1.1;
}

.course-step small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 720;
}

.place-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.78rem;
  padding: 0 0.82rem 1.1rem;
}

.empty-list {
  display: grid;
  gap: 0.34rem;
  min-height: 8rem;
  align-content: center;
  border: 1px solid rgba(20, 20, 20, 0.12);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.74);
  padding: 1rem;
  text-align: center;
}

.empty-list strong {
  color: var(--charcoal);
  font-size: 1rem;
}

.empty-list p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.place-card {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: 5.7rem 1fr;
  gap: 0.75rem;
  min-height: 7.7rem;
  overflow: hidden;
  border: 2px solid rgba(20, 20, 20, 0.08);
  border-radius: 0.9rem;
  background: var(--white);
  cursor: pointer;
  padding: 0.64rem;
  touch-action: pan-y;
}

.place-card img,
.place-card .status-pill,
.guide-course [data-place],
.guide-all [data-place] {
  touch-action: pan-y;
}

.place-card.go {
  box-shadow: none;
}

.place-card.go .status-pill {
  border-color: var(--red);
  color: var(--red);
  font-size: 0.78rem;
}

.place-card.skip {
  box-shadow: none;
}

.place-card.skip .status-pill {
  border-color: var(--charcoal);
  color: var(--charcoal);
}

.place-card.pending {
  background: #fbfbf8;
}

.place-card img {
  aspect-ratio: 1;
  border-radius: 0.34rem;
}

.product-list-card {
  background: #fffdf7;
}

.product-list-object {
  display: grid;
  place-items: end center;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: 0.34rem;
  background: linear-gradient(180deg, #f7f1e2, #ece1ce);
  overflow: hidden;
}

.product-list-object .product-object {
  transform: scale(0.82);
  transform-origin: bottom center;
}

.product-status-pill {
  border-color: var(--charcoal);
  color: var(--charcoal);
  font-size: 0.66rem;
}

.product-trust-badge {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  margin: 0.18rem 0 0.08rem;
  padding: 0.22rem 0.42rem;
  border: 1px solid rgba(255, 10, 61, 0.22);
  border-radius: 999px;
  background: rgba(255, 10, 61, 0.06);
  color: var(--red);
  font-size: 0.62rem;
  font-weight: 860;
  line-height: 1;
  white-space: nowrap;
}

.place-copy {
  min-width: 0;
  padding: 0.1rem 4rem 0.2rem 0;
}

.place-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.32rem;
  color: rgba(20, 20, 20, 0.58);
  font-size: 0.78rem;
  font-weight: 740;
}

.place-meta.single {
  margin: 0;
}

.place-card h2 {
  margin: 0 0 0.32rem;
  font-size: 1.04rem;
  font-weight: 840;
  line-height: 1.05;
}

.rating-row {
  display: grid;
  align-items: center;
  grid-template-columns: auto 1fr auto;
  gap: 0.36rem;
  margin: 0 0 0.35rem;
  color: var(--charcoal);
  font-weight: 850;
}

.rating-label {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1;
  white-space: nowrap;
}

.stars {
  display: inline-flex;
  gap: 0.06rem;
  font-size: 0.94rem;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

.stars .is-filled {
  color: var(--charcoal);
}

.stars .is-empty {
  color: #d7d7d1;
}

.star-meter {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
}

.star-base,
.star-fill {
  position: absolute;
  inset: 0;
}

.star-base {
  color: #d7d7d1;
}

.star-fill {
  width: var(--fill);
  overflow: hidden;
  color: var(--charcoal);
}

.rating-number {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1;
}

.rating-row.is-pending {
  color: rgba(20, 20, 20, 0.46);
}

.place-card p {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(20, 20, 20, 0.7);
  font-size: 0.86rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.status-pill {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  top: 0.72rem;
  right: 0.72rem;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  max-width: none;
  border: 2.5px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: var(--red);
  font-size: 0.68rem;
  font-weight: 830;
  line-height: 1;
  box-shadow: none;
  padding: 0;
  text-align: center;
}

.detail-panel {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 1.1rem;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.92rem 0.9rem 1.2rem;
  background: var(--paper);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-y;
}

.detail-panel::-webkit-scrollbar {
  display: none;
}

.detail-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 0.78;
  overflow: hidden;
  border-radius: 2.15rem;
  background: var(--soft);
  margin-bottom: 0.25rem;
}

.detail-image.go {
  outline: 0;
}

.detail-image.skip {
  outline: 0;
}

.floating-status {
  position: absolute;
  z-index: 2;
  right: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 2.5px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 860;
  line-height: 1;
  padding: 0;
  text-align: center;
}

.detail-image.skip .floating-status {
  border-color: rgba(255, 255, 255, 0.82);
  background: var(--charcoal);
  color: var(--white);
}

.detail-back-button {
  position: absolute;
  z-index: 3;
  top: 0.9rem;
  left: 0.9rem;
  display: inline-grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--charcoal);
  cursor: pointer;
  box-shadow: 0 0.42rem 1.1rem rgba(20, 20, 20, 0.18);
}

.detail-back-button svg {
  display: block;
  width: 1.32rem;
  height: 1.32rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.7;
}

.detail-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.72rem;
  min-width: 0;
  padding: 0.78rem 0.45rem 0;
  background: var(--paper);
}

.detail-short,
.reason-box p,
.tip-box p {
  color: rgba(20, 20, 20, 0.72);
}

.rating-box {
  display: grid;
  gap: 0.58rem;
  border: 2px solid rgba(20, 20, 20, 0.08);
  border-radius: 0.78rem;
  background: var(--white);
  padding: 0.9rem;
}

.rating-box .rating-row {
  margin: 0;
}

.rating-box .stars {
  font-size: 1.08rem;
}

.rating-box .rating-label {
  min-width: 3.6rem;
  font-size: 0.88rem;
}

.reason-box {
  border-left: 0.42rem solid var(--line);
  border-radius: 0.62rem;
  background: var(--soft);
  padding: 1rem;
}

.reason-box h2 {
  margin: 0 0 0.45rem;
  font-size: 1.02rem;
}

.tip-box {
  display: grid;
  gap: 0.78rem;
  border: 1px solid rgba(20, 20, 20, 0.16);
  border-radius: 0.78rem;
  background: rgba(255, 255, 255, 0.92);
  padding: 0.95rem;
}

.tip-section {
  display: grid;
  gap: 0.46rem;
  border-top: 1px solid var(--line);
  padding-top: 0.78rem;
}

.tip-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.tip-box h2,
.tip-box h3,
.tip-box p {
  margin: 0;
}

.tip-box h2 {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 820;
}

.tip-section.is-caution h2 {
  color: var(--charcoal);
}

.tip-box h3 {
  color: var(--ink);
  font-size: 1.04rem;
  line-height: 1.18;
}

.tip-box p {
  font-size: 0.98rem;
  line-height: 1.52;
}

.save-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.save-bar button,
.save-bar a {
  border: 1px solid var(--line);
  border-radius: 0.78rem;
  background: var(--white);
  color: var(--charcoal);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 820;
  padding: 0.72rem;
  text-align: center;
  text-decoration: none;
}

.save-bar button.is-saved {
  background: var(--soft);
}

.info-box {
  display: grid;
  gap: 0.72rem;
  border: 2px solid rgba(20, 20, 20, 0.08);
  border-radius: 0.78rem;
  background: var(--white);
  padding: 0.9rem;
}

.info-box h2 {
  margin: 0;
  font-size: 1.02rem;
}

.info-box dl {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}

.info-box div {
  display: grid;
  grid-template-columns: 4.4rem 1fr;
  gap: 0.55rem;
}

.info-box dt {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 760;
}

.info-box dd {
  margin: 0;
  color: var(--charcoal);
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1.3;
}

.product-box {
  display: grid;
  gap: 0.7rem;
  border: 2px solid rgba(20, 20, 20, 0.08);
  border-radius: 0.78rem;
  background: var(--white);
  padding: 0.9rem;
}

.product-box h2 {
  margin: 0;
  font-size: 1.02rem;
}

.product-list {
  display: grid;
  gap: 0.62rem;
}

.product-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.72rem;
  align-items: start;
  border-top: 1px solid var(--line);
  padding-top: 0.62rem;
}

.product-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.product-item h3 {
  margin: 0 0 0.25rem;
  color: var(--charcoal);
  font-size: 0.96rem;
}

.product-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.product-item span {
  color: var(--charcoal);
  font-size: 0.78rem;
  font-weight: 820;
  white-space: nowrap;
}

.related-box {
  display: grid;
  gap: 0.72rem;
  border: 2px solid rgba(20, 20, 20, 0.08);
  border-radius: 0.78rem;
  background: var(--white);
  padding: 0.9rem;
}

.section-head {
  display: grid;
  gap: 0.18rem;
}

.section-head h2,
.section-head p {
  margin: 0;
}

.section-head h2 {
  font-size: 1.02rem;
}

.section-head p {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

.related-row {
  display: grid;
  grid-auto-columns: minmax(10.5rem, 68%);
  grid-auto-flow: column;
  gap: 0.62rem;
  overflow-x: auto;
  padding-bottom: 0.1rem;
  scrollbar-width: none;
}

.related-row::-webkit-scrollbar {
  display: none;
}

.related-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.72rem;
  background: var(--white);
}

.related-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.related-card div {
  display: grid;
  gap: 0.26rem;
  padding: 0.62rem;
}

.related-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 820;
}

.related-card h3,
.related-card p {
  margin: 0;
}

.related-card h3 {
  color: var(--charcoal);
  font-size: 0.92rem;
  line-height: 1.15;
}

.related-card p {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.32;
}

.photo-gallery {
  display: grid;
  gap: 0.58rem;
  min-width: 0;
  border: 2px solid rgba(20, 20, 20, 0.08);
  border-radius: 0.78rem;
  background: var(--white);
  padding: 0.72rem;
}

.photo-gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.photo-gallery-head h2 {
  margin: 0;
  color: var(--charcoal);
  font-size: 0.96rem;
}

.photo-gallery-head span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 820;
}

.photo-gallery-row {
  display: grid;
  grid-auto-columns: minmax(7.8rem, 46%);
  grid-auto-flow: column;
  gap: 0.52rem;
  overflow-x: auto;
  padding-bottom: 0.08rem;
  scrollbar-width: none;
}

.photo-gallery-row::-webkit-scrollbar {
  display: none;
}

.photo-gallery-card {
  appearance: none;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 0.68rem;
  background: var(--soft);
  color: inherit;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.photo-gallery-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.photo-gallery-card span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1;
  padding: 0.48rem 0.52rem 0.52rem;
}

.detail-image[data-photo-open] {
  cursor: zoom-in;
}

.photo-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(20, 20, 20, 0.72);
  padding: 1rem;
  touch-action: manipulation;
}

.photo-panel {
  position: relative;
  display: grid;
  gap: 0.72rem;
  width: min(100%, 21rem);
  max-height: calc(100% - 1rem);
  border-radius: 1rem;
  background: var(--white);
  padding: 0.82rem;
}

.photo-panel img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  max-height: 64vh;
  border-radius: 0.72rem;
  object-fit: cover;
  background: var(--soft);
}

.photo-panel-caption,
.photo-panel-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.photo-panel-caption strong {
  color: var(--charcoal);
  font-size: 0.92rem;
}

.photo-panel-caption span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 820;
}

.photo-panel-actions button {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  cursor: pointer;
  padding: 0;
}

.photo-arrow svg {
  width: 1.55rem;
  height: 1.55rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.8;
}

.review-box {
  display: grid;
  gap: 0.78rem;
  min-width: 0;
  max-width: 100%;
  border: 2px solid rgba(20, 20, 20, 0.08);
  border-radius: 0.78rem;
  background: var(--white);
  padding: 0.9rem;
}

.yoribu-review {
  min-width: 0;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.72rem;
}

.must-try-box {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.72rem;
}

.must-try-box h3 {
  margin: 0;
  color: var(--charcoal);
  font-size: 0.96rem;
}

.must-try-list {
  display: grid;
  gap: 0.52rem;
}

.must-try-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: start;
  border-radius: 0.68rem;
  background: var(--soft);
  padding: 0.68rem;
}

.must-try-item.has-image {
  grid-template-columns: 4.8rem minmax(0, 1fr);
}

.must-try-image {
  display: block;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 0.52rem;
  object-fit: cover;
}

.must-try-item div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.must-try-item span,
.must-try-item em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 820;
  line-height: 1.24;
}

.must-try-item em {
  justify-self: end;
  max-width: 7.2rem;
  text-align: right;
}

.must-try-item.has-image em {
  grid-column: 2;
  justify-self: start;
  max-width: 100%;
  text-align: left;
}

.must-try-item strong {
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.16;
  word-break: keep-all;
}

.must-try-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
  word-break: keep-all;
}

@media (max-width: 380px) {
  .must-try-item.has-image {
    grid-template-columns: 4.2rem minmax(0, 1fr);
  }

  .must-try-image {
    width: 4.2rem;
    height: 4.2rem;
  }
}

/* Review release: shared chrome, forms and operational screens. */
:root { --surface-warm:#f7f6f0; --text-strong:#202c26; --text-soft:#626a64; --focus:#285b48; }
button, a, input, select, textarea { -webkit-tap-highlight-color:transparent; }
button:not(:disabled), summary { cursor:pointer; }
button:disabled { opacity:.5; cursor:wait; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [role="button"]:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
input, select, textarea { font:inherit; font-size:16px; color:var(--text-strong); }
[hidden] { display:none !important; }
.app-shell { --chrome-top:6.8rem; --chrome-bottom:calc(4.8rem + env(safe-area-inset-bottom)); width:min(100%,520px); background:#fff; color:var(--text-strong); }
.app-shell .topbar { grid-template-columns:6.7rem minmax(0,1fr) 2.6rem; gap:.7rem; padding:1.2rem 1rem .5rem; height:4.8rem; background:#fff; }
.topbar .brand-button { grid-column:auto; grid-row:auto; width:100%; height:2.35rem; }
.topbar .global-search-box { grid-column:auto; grid-row:auto; width:100%; margin:0; }
.header-account { display:grid; place-items:center; width:2.6rem; height:2.6rem; padding:.6rem; border:1px solid var(--line); border-radius:50%; background:#fff; }
.header-account svg { width:100%; fill:none; stroke:currentColor; stroke-width:1.6; }
.demo-banner { position:absolute; z-index:21; left:1rem; right:1rem; top:5rem; padding:.2rem .5rem; font-size:.63rem; line-height:1.4; color:#756346; background:#faf5e8; border-radius:.4rem; text-align:center; }
.app-shell .fixed-flag-frame { padding:var(--chrome-top) .8rem var(--chrome-bottom); background:#fff; }
.app-shell .fixed-flag-frame::after { display:none; }
.app-shell .flag-blue,.app-shell .flag-red { display:none; }
.app-shell .content-window { border-radius:1.5rem; border:1px solid #ecece5; background:var(--surface-warm); }
.app-shell .guide-screen { top:var(--chrome-top); bottom:var(--chrome-bottom); left:.8rem; right:.8rem; border-radius:1.5rem; box-shadow:none; border:1px solid #e4e6dc; }
.page-track { transition:transform 300ms cubic-bezier(.2,.7,.2,1); }
.page-stack { scroll-behavior:auto; }
.hero-copy { padding:1.6rem 1.4rem; gap:.8rem; }
.hero-copy h1 { max-width:16rem; line-height:1.18; letter-spacing:-.04em; }
.detail-copy h1 { font-size:1.85rem; line-height:1.25; letter-spacing:-.035em; }
.place-card { border:1px solid #e4e6dd; border-radius:1.05rem; padding:.7rem; gap:.8rem; }
.place-card img { width:100%; height:auto; align-self:start; aspect-ratio:1; object-fit:cover; border-radius:.65rem; }
.place-card h2 { line-height:1.3; }
.place-card p { color:var(--text-soft); font-size:.85rem; line-height:1.55; }
.place-meta { color:var(--text-soft); }
.detail-panel { padding:.8rem .8rem 1.5rem; }
.detail-image { border-radius:1.1rem; aspect-ratio:1; }
.detail-copy { gap:1.15rem; }
.bottom-navigation { position:absolute; z-index:25; inset:auto 0 0; display:grid; grid-template-columns:repeat(3,1fr); padding:.35rem 1rem calc(.5rem + env(safe-area-inset-bottom)); min-height:4.25rem; background:#fff; border-top:1px solid #edece5; }
.bottom-navigation button { display:grid; gap:.16rem; justify-items:center; padding:.3rem; min-height:3rem; border:0; background:none; color:#687168; font-size:.74rem; font-weight:650; }
.bottom-navigation button span { font-size:1.45rem; line-height:1.25; }
.bottom-navigation button[aria-current="page"] { color:var(--red); }
.action-notice { position:absolute; z-index:2000; top:.55rem; left:1rem; right:1rem; max-height:6rem; overflow:auto; padding:.8rem 1rem; border-radius:.9rem; color:#fff; background:#254f3e; box-shadow:0 5px 20px #0002; font-size:.85rem; line-height:1.5; pointer-events:none; }
.action-notice.is-error { background:#91362e; }
.field-note { margin:.2rem 0 .6rem; color:var(--text-soft); font-size:.8rem; line-height:1.65; }
.form-error { padding:.8rem; border-radius:.6rem; color:#882f27; background:#fff1ed; }
.login-page { overflow:auto; overscroll-behavior:contain; padding:1.5rem 1rem; height:100%; }
.login-page-card { width:100%; max-width:32rem; }
.login-page-form label,.member-form label { display:grid; gap:.45rem; }
.login-page-form input { width:100%; min-height:3rem; }
.login-overlay,.admin-overlay,.settings-overlay { position:absolute; inset:0; padding:.6rem; align-items:stretch; }
.login-panel,.admin-panel,.settings-panel { min-height:0; max-height:100%; overflow:auto; padding:1.25rem; border-radius:1.15rem; }
.admin-panel,.account-panel { display:block; }
.admin-hero { margin-bottom:1.4rem; padding-right:1.5rem; }
.admin-hero h2 { font-size:1.65rem; line-height:1.3; }
.admin-section { margin-top:1.4rem; }
.admin-section summary { font-weight:750; padding:.65rem 0; }
.admin-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
.admin-place-row { grid-template-columns:minmax(0,1fr); gap:.45rem; }
.admin-place-row > * { grid-column:1; }
.admin-place-row .admin-status-chip { width:fit-content; }
.admin-place-actions { display:flex; justify-content:space-between; align-items:center; }
.admin-place-actions button,.admin-approval-list button,.map-buttons a { min-height:2.75rem; }
.member-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.member-form > strong,.member-form > small,.member-form > h3,.member-form > p { grid-column:1 / -1; overflow-wrap:anywhere; }
.member-form input:not([type="checkbox"]),.member-form select { width:100%; min-width:0; min-height:2.8rem; border:1px solid var(--line); border-radius:.5rem; padding:.5rem; background:#fff; }
.member-form label:has(input[type="checkbox"]) { display:flex; align-items:center; }
.member-form button { border:0; border-radius:.6rem; background:#eaf0e8; color:#234b3a; padding:.6rem; }
.managed-place-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.managed-place-form input,.managed-place-form select,.managed-place-form textarea { width:100%; min-width:0; }
.managed-place-form .is-wide { grid-column:1 / -1; }
.managed-place-form textarea { min-height:6rem; }
.isolated-edit-actions { position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:1rem 0 0; padding:.8rem 0; }
.isolated-edit-actions button { min-height:2.9rem; padding:.65rem; }
.approval-preview-overlay { position:fixed; z-index:1100; padding:.6rem; }
.approval-preview-panel { width:min(100%,34rem); max-height:94dvh; padding:1.2rem 1.2rem 6.8rem; }
.approval-preview-panel h2 { margin-right:2rem; line-height:1.3; }
.approval-preview-actions { position:sticky; bottom:-6.8rem; display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0 -6.8rem; padding:1rem 0; background:#fff; }
.approval-preview-actions button { min-width:5rem; min-height:2.75rem; }
.diff-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
.diff-columns > div { padding:.7rem; background:#f4f4ef; border-radius:.6rem; min-width:0; }
.diff-columns > div:last-child { background:#edf4eb; }
.diff-columns small { color:var(--text-soft); }
.diff-columns pre { white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; margin:.5rem 0 0; font:inherit; font-size:.85rem; line-height:1.55; }
.revision-diff section { border-top:1px solid var(--line); padding-top:.8rem; }
.account-panel h2 { margin-top:.4rem; font-size:1.7rem; line-height:1.3; }
.account-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.3rem; padding:.25rem; margin:1.3rem 0; background:#f1f2ed; border-radius:.8rem; }
.account-tabs button { border:0; border-radius:.6rem; padding:.8rem .3rem; background:transparent; font-size:.8rem; }
.account-tabs button[aria-pressed="true"] { background:#fff; color:#234b3a; box-shadow:0 2px 8px #152b1d0e; }
.account-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
.account-menu { margin-top:1rem; }
.account-saved article { display:grid; gap:.35rem; padding:.9rem 0; border-bottom:1px solid var(--line); }
.account-saved article > button:first-child { display:flex; gap:.85rem; align-items:center; text-align:left; border:0; padding:0; background:none; }
.account-saved img { width:4.5rem; height:4.5rem; object-fit:cover; border-radius:.8rem; }
.account-saved strong,.account-saved small { display:block; line-height:1.5; }
.account-saved small { margin-top:.25rem; color:var(--text-soft); }
.account-saved article > button:last-child { justify-self:end; border:0; background:none; color:var(--text-soft); font-size:.75rem; min-height:2.4rem; }
.account-feedback article { padding:1rem 0; border-bottom:1px solid var(--line); }
.account-feedback article > span { display:block; margin-top:.5rem; font-size:.8rem; color:var(--text-soft); }
.account-feedback article p { line-height:1.6; }
.review-form select { padding:.7rem; border:1px solid var(--line); border-radius:.6rem; background:white; }
.vote-summary strong { font-size:1.65rem; line-height:1.35; }
.vote-row button { min-height:3rem; font-size:.85rem; }
.vote-row button[aria-pressed="true"] { border-color:#2d6049; background:#eaf3e8; }
.map-buttons { display:flex; flex-wrap:wrap; gap:.5rem; }
.map-buttons a { display:flex; align-items:center; padding:.6rem .8rem; border:1px solid var(--line); border-radius:.7rem; color:var(--text-strong); text-decoration:none; font-size:.85rem; }
.guide-pin.is-cluster { background:#254f3e; border:2px solid #fff; min-width:2rem; min-height:2rem; }
.guide-pin.is-cluster span { color:white; }
.cluster-selection { margin:1rem 0; padding:1rem; border:1px solid #cbd8c4; border-radius:1rem; background:#fff; }
.cluster-selection > button:first-child { float:right; border:0; background:none; min-height:2.5rem; }
.cluster-selection h3 { margin:.4rem 0 1rem; }
.cluster-selection button[data-place] { display:grid; width:100%; text-align:left; gap:.3rem; background:none; border:0; border-top:1px solid var(--line); padding:.85rem 0; }
.cluster-selection button span { color:var(--text-soft); font-size:.75rem; }
.photo-panel img { object-fit:contain; }
.photo-overlay { position:absolute; }
.category-row,.course-area-row,.category-button,.course-area-button { touch-action:pan-x; }
@media (min-width:740px) {
  body { padding:1.25rem; background:#efefe8; }
  .app-shell { height:calc(100dvh - 2.5rem); border-radius:1.6rem; box-shadow:0 12px 70px #2a34241c; }
}
@media (max-width:420px) {
  .app-shell .topbar { grid-template-columns:5.7rem minmax(0,1fr) 2.5rem; gap:.5rem; padding-left:.85rem; padding-right:.85rem; }
  .managed-place-form,.member-form { grid-template-columns:minmax(0,1fr); }
  .approval-rating-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .admin-role-grid,.admin-check-grid { grid-template-columns:minmax(0,1fr); }
  .diff-columns { grid-template-columns:minmax(0,1fr); }
  .approval-preview-panel { padding:1rem 1rem 6.8rem; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}

.place-list.is-shopping {
  display: block;
  padding: 0;
  overflow: hidden;
  touch-action: pan-y;
}

.shopping-scope {
  overflow: hidden;
  width: 100%;
}

.shopping-scope-track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 200%;
  align-items: stretch;
  transform: translateX(0);
  transition: transform 300ms cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}

.shopping-scope[data-shopping-view-current="places"] .shopping-scope-track {
  transform: translateX(-50%);
}

.shopping-scope.is-dragging .shopping-scope-track {
  transition: none;
}

.shopping-scope-panel {
  min-width: 0;
}

.shopping-shelf {
  --shelf-plank-bottom: -25px;
  --shelf-plank-shift-x: 5px;
  /* Preserve source canvases: the entire image height occupies 70% of the stage. */
  --shelf-stage-height: 16.2rem;
  --shelf-photo-height: calc(var(--shelf-stage-height) * 0.7);
  --shelf-photo-lift: 0px;
  --shelf-product-bottom: calc(5.35rem - 15px);
  --shelf-price-bottom: calc(0.58rem + 10px);
  min-height: calc(100dvh - 10rem);
  padding: 1rem 0 3.2rem;
  background: linear-gradient(155deg, #e9e8e2 0%, #d9d6cd 55%, #c9c4b8 100%);
}

.shelf-intro {
  position: relative;
  padding: 0.4rem 1.07rem 1.1rem;
}

.shelf-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: .7rem;
}

.shopping-mode-switch {
  display: inline-flex;
  gap: .38rem;
  position: absolute;
  top: .34rem;
  right: .25rem;
  padding-top: 0;
}

.shopping-mode-button {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid rgba(47, 49, 45, .28);
  border-radius: 50%;
  background: transparent;
  color: #4a4c45;
  font-size: .66rem;
  font-weight: 880;
  line-height: 1;
  padding: 0;
}

.shopping-mode-button.is-active {
  border-color: var(--red);
  color: var(--red);
}

.shelf-intro > span,
.product-stores-head > span,
.product-advice-grid section > span {
  color: #746d5f;
  font-size: 0.65rem;
  font-weight: 880;
  letter-spacing: 0.14em;
}

.shelf-intro h2 {
  margin: 0.28rem 0 0.3rem;
  color: #2f312d;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: clamp(1.75rem, 7.6vw, 2.25rem);
  font-weight: 500;
  line-height: 1.05;
}

.shelf-intro p,
.shelf-note {
  margin: 0;
  color: #747166;
  font-size: 0.82rem;
  line-height: 1.45;
}

.shelf-cabinet {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0.72rem 0 0.15rem;
}

.shelf-category {
  position: relative;
  padding-top: 0;
}

.shelf-category + .shelf-category {
  margin-top: 0.28rem;
}

.shelf-category-label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.46rem;
  max-width: 100%;
  margin: 0 1.07rem 0.38rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.shelf-category-label::before {
  display: none;
  width: 1.15rem;
  height: 2px;
  border-radius: 999px;
  background: #111;
  content: "";
}

.shelf-category-label span {
  overflow: hidden;
  color: #161616;
  font-size: 0.82rem;
  font-weight: 820;
  letter-spacing: 0.02em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shelf-stage {
  position: relative;
  min-height: var(--shelf-stage-height);
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 32%, rgba(255, 255, 255, .28), transparent 68%);
}

.shelf-stage::after {
  position: absolute;
  right: -10%;
  bottom: var(--shelf-plank-bottom);
  left: -10%;
  z-index: 4;
  display: block;
  aspect-ratio: 3968 / 1000;
  background: url("./assets/products/shelf-current.png?v=20260916-shelf-03") center bottom / 100% auto no-repeat;
  content: "";
  pointer-events: none;
}

/* Both layers inherit the rendered count and span the visible stage, not
   the oversized plank. Image width may overflow a cell without moving centers. */
.shelf-stage-products,
.shelf-stage-prices {
  position: absolute;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(var(--shelf-item-count, 1), minmax(0, 1fr));
  gap: 0;
}

.shelf-stage-products {
  bottom: var(--shelf-product-bottom);
  z-index: 2;
  align-items: end;
}

.shelf-stage-product {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 9.84rem;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  touch-action: manipulation;
  transform: translateY(var(--shelf-product-y, 0));
  transform-origin: bottom center;
}

.shelf-stage-product > img,
.shelf-stage-product > .product-object {
  flex: 0 0 auto;
  align-self: flex-end;
}

.shelf-stage-product img {
  display: block;
  width: auto;
  height: var(--shelf-photo-height);
  transform: translateY(calc(var(--shelf-photo-bottom-correction, 0px) - var(--shelf-photo-lift)));
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: bottom center;
  vertical-align: bottom;
  filter: drop-shadow(0.65rem 0.4rem 0.38rem rgba(57, 49, 37, 0.24));
}

/* Preserve every original pixel. Shift only the transparent bottom margin
   so visible product bottoms meet the same shelf baseline. No alpha scaling. */
.shelf-stage-product[data-product="hair-107-scalp-purifying"] {
  --shelf-photo-bottom-correction: calc(var(--shelf-photo-height) * 116 / 1000);
}

.shelf-stage-product[data-product="hair-107-hydrating-treatment"] {
  --shelf-photo-bottom-correction: calc(var(--shelf-photo-height) * 114 / 1000);
}

.shelf-stage-product[data-product="hair-107-scalp-cooling"] {
  --shelf-photo-bottom-correction: calc(var(--shelf-photo-height) * 114 / 1000);
}

.shelf-stage-product[data-product="elumi-enzyme"] {
  --shelf-photo-bottom-correction: calc(var(--shelf-photo-height) * 113 / 1000);
}

.shelf-stage-product[data-product="innerbeauty-107-aronia-collagen"] {
  --shelf-photo-bottom-correction: calc(var(--shelf-photo-height) * 113 / 1000);
}


.shelf-stage-product--bottle {
  height: 10.4rem;
}

.shelf-stage-product--pouch {
  height: 9.92rem;
}

.shelf-stage-product--jar {
  height: 6.4rem;
}

.shelf-stage-product--box {
  height: 10.4rem;
}

.shelf-stage-prices {
  bottom: var(--shelf-price-bottom);
  z-index: 5;
  pointer-events: none;
}

.shelf-stage-price {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: #111;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: none;
  white-space: nowrap;
}





.shelf-plank {
  position: absolute;
  bottom: var(--shelf-plank-bottom);
  left: 50%;
  z-index: 1;
  display: block;
  width: 120%;
  max-width: none;
  height: auto;
}

.shelf-stage.is-empty {
  min-height: 16.2rem;
}

.shelf-stage::after,
.shelf-plank {
  transform: translateX(var(--shelf-plank-shift-x));
}

.shelf-plank {
  transform: translateX(calc(-50% + var(--shelf-plank-shift-x)));
}

.shelf-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: 0.22rem;
  min-height: 15.2rem;
  padding: 0.15rem 0.1rem 1rem;
}

.shelf-row::before {
  position: absolute;
  right: -0.98rem;
  bottom: 2.5rem;
  left: -0.98rem;
  z-index: 0;
  height: 4.35rem;
  background: url("./assets/products/shelf-current.png?v=20260916-shelf-03") center center / cover no-repeat;
  filter: drop-shadow(0 0.48rem 0.5rem rgba(54, 35, 17, 0.22));
  content: "";
}

.shelf-row::after {
  content: none;
}

.shelf-row--image {
  display: block;
  position: relative;
  min-height: 0;
  margin: 0 0 0.15rem;
  overflow: hidden;
  padding: 0;
  width: 100%;
  aspect-ratio: 3968 / 2350;
}

.shelf-row--image::before,
.shelf-row--image::after {
  content: none;
}

.shelf-row--image img {
  display: block;
  position: absolute;
  right: 50%;
  bottom: 0;
  left: auto;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  transform: translateX(50%);
}

.shelf-product {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 9.2rem auto;
  align-items: end;
  min-width: 0;
  min-height: 13rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0.3rem 0.1rem 0;
  text-align: center;
  touch-action: manipulation;
}

.shelf-product::after {
  position: absolute;
  right: 13%;
  bottom: 4.1rem;
  left: 13%;
  height: 0.42rem;
  border-radius: 50%;
  background: rgba(63, 43, 24, 0.16);
  filter: blur(0.08rem);
  content: "";
}

.shelf-product-stage {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: end center;
  height: 9.2rem;
  transform: translateY(0.4rem);
  transition: transform 180ms ease;
}

.shelf-product:hover .shelf-product-stage,
.shelf-product:focus-visible .shelf-product-stage {
  transform: translateY(0.18rem);
}

.shelf-product-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  margin: 0.94rem 0.04rem 0;
  padding: 0.55rem 0.08rem 0;
}

.shelf-product-copy small {
  color: #83796a;
  font-size: 0.62rem;
  font-weight: 760;
}

.shelf-product-copy strong {
  overflow: hidden;
  color: #2f312d;
  font-size: 0.78rem;
  font-weight: 830;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shelf-product-copy em {
  color: #8b5f4c;
  font-size: 0.63rem;
  font-style: normal;
  font-weight: 730;
}

.product-photo-object {
  width: 7.25rem;
  height: 9.85rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  overflow: visible;
}

.product-photo-object img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: contain;
  object-position: center center;
  mix-blend-mode: normal;
  transform: none;
  filter: drop-shadow(0.24rem 0.38rem 0.36rem rgba(57, 39, 20, 0.22));
}

.product-photo-object.is-large {
  width: 8rem;
  height: 10.8rem;
  transform: none;
  box-shadow: none;
}

.shelf-note {
  padding: 1rem 0.25rem 0;
  text-align: center;
}

.product-object {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 5.4rem;
  border: 1px solid rgba(48, 49, 45, 0.42);
  background: linear-gradient(145deg, #d9d2bc, #aaa58d);
  box-shadow: 0.35rem 0.42rem 0.58rem rgba(72, 55, 34, 0.18);
  color: rgba(48, 49, 45, 0.72);
}

.product-object::before,
.product-object::after {
  position: absolute;
  content: "";
}

.product-object-mark {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 0.72rem;
}

.product-object.bottle {
  width: 2.55rem;
  height: 5.65rem;
  border-radius: 0.65rem 0.65rem 0.38rem 0.38rem;
  background: linear-gradient(90deg, #5d402c, #987153 50%, #5b3d2b);
  color: #eee1c9;
}

.product-object.bottle::before {
  top: -0.92rem;
  width: 1.28rem;
  height: 1rem;
  border: 1px solid rgba(48,49,45,.5);
  border-radius: 0.22rem 0.22rem 0.08rem 0.08rem;
  background: #32362f;
}

.product-object.lamp {
  width: 4.8rem;
  height: 4.45rem;
  border-radius: 48% 48% 0.7rem 0.7rem;
  background: linear-gradient(135deg, #fff6dd, #d9be8f);
}

.product-object.lamp::after {
  bottom: -0.38rem;
  width: 3.2rem;
  height: 0.38rem;
  border-radius: 999px;
  background: #766148;
}

.product-object.tube {
  width: 2.8rem;
  height: 5rem;
  border-radius: 0.3rem 0.3rem 0.75rem 0.75rem;
  background: linear-gradient(100deg, #9fb29a, #e6dfc8 58%, #879d84);
}

.product-object.tube::after {
  bottom: -0.48rem;
  width: 2.25rem;
  height: 0.55rem;
  border-radius: 0.12rem;
  background: #595e53;
}

.product-object.spoon {
  width: 1.15rem;
  height: 5.7rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #7f7047, #d1bc78 52%, #75673f);
  box-shadow: 0.28rem 0.35rem 0.4rem rgba(72,55,34,.2);
}

.product-object.spoon::before {
  top: -0.72rem;
  width: 2.25rem;
  height: 2.55rem;
  border: 1px solid #77643c;
  border-radius: 50%;
  background: linear-gradient(100deg, #8e7a48, #dbc681 56%, #79683e);
}

.product-object.spoon .product-object-mark { display: none; }

.product-object.pouch {
  width: 4.2rem;
  height: 5.15rem;
  border-radius: 0.28rem 0.28rem 0.72rem 0.72rem;
  background: linear-gradient(130deg, #d59b55, #f0d6a3 55%, #a96e38);
}

.product-object.pouch::before {
  top: 0.28rem;
  right: 0.2rem;
  left: 0.2rem;
  height: 0.12rem;
  background: rgba(70,48,28,.42);
}

.product-object.wallet {
  width: 4.7rem;
  height: 3.55rem;
  border-radius: 0.38rem;
  background:
    radial-gradient(circle at 25% 30%, #a7d5cf 0 8%, transparent 9%),
    radial-gradient(circle at 72% 65%, #d7b7d4 0 9%, transparent 10%),
    linear-gradient(135deg, #1e2726, #536964 52%, #182120);
  color: #e8ddd0;
}

.product-object.is-large {
  transform: scale(1.65);
  box-shadow: 0.6rem 0.75rem 1rem rgba(54, 43, 29, 0.24);
}

.product-detail-panel {
  gap: 0.7rem;
  background: #f4eee3;
  padding: 0.72rem 0.72rem 1.25rem;
}

.product-detail-hero {
  --detail-canvas-height: 23rem;
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--detail-canvas-height);
  overflow: hidden;
  border-radius: 2.15rem;
  background:
    radial-gradient(circle at 50% 33%, rgba(255,255,255,.375), transparent 42%),
    linear-gradient(160deg, #d9ded1, #c0b59f 62%, #99856a);
}


.product-detail-shelf-stage {
  position: absolute;
  left: 50%;
  bottom: calc(3rem - 100px);
  width: 180%;
  aspect-ratio: 3968 / 1000;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}

.product-detail-shelf {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

.product-detail-photo {
  filter: drop-shadow(1.05rem 0.55rem 0.5rem rgba(57, 49, 37, 0.24));
  position: absolute;
  z-index: 1;
  left: 50%;
  /* The real shelf's wooden top is at source y=152 of its 1000px canvas. */
  bottom: 84.8%;
  width: auto;
  max-width: none;
  height: calc(var(--detail-canvas-height) * 0.8);
  object-fit: contain;
  transform: translate(-50%, calc(var(--detail-canvas-height) * 0.8 * var(--detail-photo-bottom-padding, 0) + 5px));
}


.product-detail-back {
  top: 0.85rem;
  left: 0.85rem;
}


.product-detail-copy {
  padding: 0.75rem 0.25rem 0.4rem;
}

.product-detail-copy h1 {
  margin-bottom: 0.3rem;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 2rem;
  font-weight: 500;
}

.product-tagline {
  margin: 0 0 1.1rem;
  color: #6b665e;
  font-size: 1rem;
  font-weight: 680;
  line-height: 1.5;
}

.product-reason-box {
  border-color: rgba(83, 74, 59, 0.2);
  background: rgba(255,255,255,.68);
}

.product-advice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0.75rem 0;
}

.product-advice-grid section {
  border: 1px solid rgba(80, 69, 53, 0.14);
  border-radius: 1rem;
  background: rgba(255,255,255,.58);
  padding: 0.85rem;
}

.product-advice-grid h2,
.product-stores h2 {
  margin: 0.18rem 0 0.35rem;
  font-size: 1rem;
}

.product-advice-grid p,
.product-stores-head p {
  margin: 0;
  color: #706b62;
  font-size: 0.82rem;
  line-height: 1.5;
}

.product-stores {
  margin-top: 1rem;
}

.product-stores-head {
  padding: 0.25rem 0.2rem 0.7rem;
}

.product-store-list {
  display: grid;
  gap: 0.5rem;
}

.product-store-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 4.35rem;
  border: 1px solid rgba(82, 71, 55, 0.16);
  border-radius: 1rem;
  background: rgba(255,255,255,.78);
  color: #30312d;
  padding: 0.75rem 0.85rem;
  text-decoration: none;
  touch-action: manipulation;
}

.product-store-list a span {
  display: grid;
  gap: 0.18rem;
}

.product-store-list small {
  color: #83796b;
  font-size: 0.68rem;
  font-weight: 760;
}

.product-store-list strong {
  font-size: 0.92rem;
}

.product-store-list b {
  color: #8b5f4c;
  font-size: 1.25rem;
}

.product-detail-actions {
  margin: 1rem 0 0.25rem;
}

@media (max-width: 380px) {
  .shelf-row {
    gap: 0.16rem;
    min-height: 14.4rem;
  }

  .shelf-product {
    grid-template-rows: 8.55rem auto;
  }

  .shelf-product-stage {
    height: 8.55rem;
  }

  .product-photo-object {
    width: 7.25rem;
    height: 9.85rem;
  }

  .shelf-product-copy strong {
    font-size: 0.72rem;
  }

  .product-detail-hero {
    --detail-canvas-height: 20rem;
  }

  .product-advice-grid {
    grid-template-columns: 1fr;
  }
}

.yoribu-review h2,
.user-review-head h2 {
  margin: 0 0 0.42rem;
  font-size: 1.02rem;
}

.yoribu-review p,
.point-note,
.empty-review,
.user-review p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.user-review-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.user-review-head h2 {
  margin: 0;
}

.user-review-head button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--charcoal);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 820;
  max-width: 9.4rem;
  padding: 0.42rem 0.62rem;
  text-align: center;
  white-space: normal;
}

.vote-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.55rem;
  border-radius: 0.72rem;
  background: var(--soft);
  padding: 0.72rem;
}

.vote-summary strong {
  color: var(--charcoal);
  font-size: 1.35rem;
  line-height: 1;
}

.vote-summary span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.25;
}

.vote-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.vote-row button {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
  min-height: 3.5rem;
  border: 1px solid var(--line);
  border-radius: 0.78rem;
  background: var(--white);
  color: var(--charcoal);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.15;
  overflow-wrap: anywhere;
  padding: 0.72rem 0.6rem;
  text-align: left;
  touch-action: pan-y;
}

.review-box label,
.review-form,
.user-review-head button {
  touch-action: pan-y;
}

.review-form input,
.review-form textarea,
.review-form button {
  touch-action: pan-y;
}

.vote-row button span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 760;
}

.point-note {
  border-radius: 0.58rem;
  background: var(--soft);
  padding: 0.62rem 0.7rem;
}

.user-review-list {
  display: grid;
  gap: 0.65rem;
}

.user-review {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  border-top: 1px solid var(--line);
  padding-top: 0.65rem;
}

.user-review.is-me {
  border-radius: 0.72rem;
  border-top: 0;
  background: rgba(255, 10, 61, 0.06);
  padding: 0.65rem;
}

.user-review.is-verified {
  border-radius: 0.72rem;
  border-top: 0;
  background: rgba(20, 20, 20, 0.035);
  padding: 0.65rem;
}

.user-review:first-child {
  border-top: 0;
  padding-top: 0;
}

.user-review-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.52rem;
  min-width: 0;
}

.user-review-meta img {
  display: block;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  object-fit: cover;
}

.reviewer-avatar-button,
.reviewer-name-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.reviewer-avatar-button {
  border-radius: 999px;
}

.reviewer-avatar-button:hover img {
  border-color: var(--red);
}

.reviewer-name-button {
  color: var(--charcoal);
  font-size: 0.9rem;
  font-weight: 850;
  text-align: left;
}

.user-review-meta div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
  align-items: center;
  min-width: 0;
}

.user-review strong {
  color: var(--charcoal);
  font-size: 0.9rem;
}

.user-review .rating-row {
  margin: 0;
  grid-template-columns: auto auto auto;
}

.point-chip {
  width: fit-content;
  border-radius: 999px;
  background: var(--soft);
  color: var(--charcoal);
  font-size: 0.72rem;
  font-weight: 850;
  padding: 0.32rem 0.48rem;
}

.feedback-chip {
  width: fit-content;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 820;
  padding: 0.32rem 0.48rem;
}

.review-role-chip {
  width: fit-content;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.06);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 820;
  padding: 0.32rem 0.48rem;
}

.review-role-chip.is-me {
  background: var(--red);
  color: var(--white);
}

.review-role-chip.is-verified {
  background: var(--charcoal);
  color: var(--white);
}

.review-form {
  display: grid;
  gap: 0.65rem;
}

.feedback-author-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  border-radius: 0.72rem;
  background: rgba(255, 10, 61, 0.06);
  padding: 0.62rem;
}

.feedback-author-preview img {
  display: block;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--red);
  border-radius: 999px;
  object-fit: cover;
}

.feedback-author-preview div {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.feedback-author-preview strong {
  color: var(--charcoal);
  font-size: 0.9rem;
}

.feedback-author-preview span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.review-form label {
  display: grid;
  gap: 0.38rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 760;
}

.review-form textarea,
.photo-upload input {
  width: 100%;
  min-width: 0;
  min-height: 5.5rem;
  resize: vertical;
  border: 2px solid var(--line);
  border-radius: 0.72rem;
  color: var(--ink);
  font: inherit;
  padding: 0.82rem 0.9rem;
}

.photo-upload {
  border: 1px dashed var(--line);
  border-radius: 0.72rem;
  background: rgba(255, 255, 255, 0.74);
  padding: 0.72rem;
}

.photo-upload input {
  min-height: auto;
  background: var(--white);
  font-size: 0.78rem;
}

.photo-upload span {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.visit-box {
  display: grid;
  gap: 0.78rem;
  border: 2px solid rgba(20, 20, 20, 0.08);
  border-radius: 0.78rem;
  background: var(--white);
  padding: 0.9rem;
}

.direction-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
}

.direction-row a {
  border: 1px solid var(--line);
  border-radius: 0.62rem;
  color: var(--charcoal);
  font-size: 0.72rem;
  font-weight: 820;
  padding: 0.52rem 0.35rem;
  text-align: center;
  text-decoration: none;
}

.visit-copy h2,
.map-copy h2 {
  margin: 0 0 0.55rem;
  font-size: 1.02rem;
}

.visit-copy dl {
  display: grid;
  gap: 0.48rem;
  margin: 0;
}

.visit-copy div {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0.55rem;
  align-items: start;
}

.visit-copy dt {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 760;
}

.visit-copy dd {
  margin: 0;
  color: var(--charcoal);
  font-size: 0.94rem;
  font-weight: 760;
  line-height: 1.3;
}

.map-canvas {
  display: block;
  width: 100%;
  min-height: 8rem;
  height: 12rem;
  overflow: hidden;
  border: 0;
  border-radius: 0.55rem;
  background:
    linear-gradient(90deg, transparent 0 47%, rgba(63, 64, 61, 0.08) 47% 53%, transparent 53% 100%),
    linear-gradient(0deg, transparent 0 47%, rgba(63, 64, 61, 0.08) 47% 53%, transparent 53% 100%),
    repeating-linear-gradient(35deg, #eeeeea 0 0.9rem, #f7f7f3 0.9rem 2.1rem);
}

.map-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 740;
}

.map-copy p {
  margin: 0;
}

.login-overlay,
.admin-overlay,
.settings-overlay,
.reviewer-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  align-items: end;
  background: rgba(20, 20, 20, 0.28);
  padding: 1rem;
}

.login-overlay {
  isolation: isolate;
  align-items: stretch;
  pointer-events: auto;
  touch-action: pan-y;
}

.login-auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  background: #f6f3eb;
}

.login-page {
  position: fixed;
  inset: 0;
  z-index: 5000;
  overflow-y: auto;
  box-sizing: border-box;
  min-height: 100dvh;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1.5rem, env(safe-area-inset-bottom));
  background: #f6f3eb;
  color: var(--ink);
}

.login-page-card {
  width: min(100%, 27rem);
  margin: 0 auto;
  padding: .35rem 0 1.5rem;
}

.login-back-button {
  min-height: 2.75rem;
  margin: 0 0 1.65rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .86rem;
  font-weight: 800;
}

.login-page h1 { margin: .45rem 0 .35rem; font-size: clamp(2rem, 9vw, 2.7rem); }
.login-page-card > p { margin: 0 0 1.35rem; color: var(--muted); }
.login-page-form { display: grid; gap: .55rem; }
.login-page-form label { margin-top: .35rem; color: var(--muted); font-size: .82rem; font-weight: 800; }
.login-page-form input {
  display: block;
  width: 100%;
  min-height: 3.35rem;
  box-sizing: border-box;
  border: 2px solid var(--line);
  border-radius: .75rem;
  background: #fff;
  color: var(--ink);
  padding: .82rem .9rem;
  font: inherit;
  font-size: 16px;
  pointer-events: auto;
  touch-action: manipulation;
  user-select: text;
  -webkit-user-select: text;
}
.login-page-form input:focus { border-color: var(--charcoal); outline: 3px solid rgba(37,37,35,.14); }
.login-page-form .primary-action { min-height: 3.35rem; margin-top: .5rem; }
.login-page .login-divider { margin: 1.15rem 0; }
.logout-button { min-height: 2.8rem; border: 1px solid var(--line); border-radius: .75rem; background: #fff; color: var(--red); font: inherit; font-weight: 850; }

.login-page-card,
.login-panel,
.admin-panel,
.admin-section,
.admin-approval-list article,
.approval-preview-panel { min-width: 0; }
.login-page-card *,
.login-panel *,
.admin-panel *,
.approval-preview-panel * { box-sizing: border-box; }
.login-page h1,
.login-page p,
.login-panel h2,
.login-panel h3,
.login-panel p,
.admin-panel h2,
.admin-panel h3,
.admin-panel p,
.admin-approval-list strong,
.admin-approval-list em,
.approval-preview-title h2,
.approval-preview-panel p { overflow-wrap: anywhere; word-break: keep-all; }
.admin-section-head { flex-wrap: wrap; align-items: flex-start; }
.admin-approval-list article { grid-template-columns: minmax(4.25rem,auto) minmax(0,1fr); align-items: start; }
.admin-approval-list article > span { line-height: 1.35; }
.admin-approval-list article > strong { min-width: 0; line-height: 1.4; }
.admin-approval-list article > em { min-width: 0; }
.admin-approval-list article > div { width: 100%; align-items: stretch; }
.admin-approval-list button { min-height: 2.5rem; white-space: normal; line-height: 1.25; }
.approval-action-message { border-radius: .65rem; background: #eef7eb; padding: .65rem .75rem; color: #31552d!important; font-size: .78rem!important; font-weight: 800; line-height: 1.45; }
.admin-governance-note { border-left: 3px solid var(--red); background: #fff8f1; padding: .7rem .75rem; color: var(--muted)!important; font-size: .78rem!important; line-height: 1.5!important; }
.approval-preview-panel { padding-bottom: 5.8rem; }
.approval-preview-title { flex-wrap: wrap; }
.approval-preview-title > div { min-width: 0; flex: 1 1 12rem; }
.approval-preview-actions { flex-wrap: wrap; margin-bottom: -5.8rem; }
.approval-preview-actions button { flex: 1 1 6.5rem; min-height: 2.7rem; white-space: normal; line-height: 1.25; }
.admin-place-table > div { min-width: 0; height: auto; }
.admin-place-table strong,
.admin-place-table em,
.admin-place-table small { min-width: 0; overflow-wrap: anywhere; line-height: 1.4; }
.admin-place-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.admin-place-actions button { flex: 1 1 6.5rem; min-height: 2.5rem; border: 0; border-radius: 999px; background: var(--charcoal); color: #fff; font: inherit; font-size: .72rem; font-weight: 850; }
.admin-place-actions span { align-self: center; padding: .35rem .55rem; border-radius: 999px; background: var(--soft); font-size: .7rem; font-weight: 850; }
.managed-place-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; margin-top: .85rem; }
.managed-place-form label { display: grid; min-width: 0; gap: .35rem; color: var(--muted); font-size: .76rem; font-weight: 800; }
.managed-place-form label.is-wide { grid-column: 1 / -1; }
.managed-place-form input,
.managed-place-form select,
.managed-place-form textarea { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: .65rem; background: #fff; padding: .7rem; color: var(--ink); font: inherit; line-height: 1.4; }
.managed-place-form textarea { min-height: 5rem; resize: vertical; }
.managed-place-isolated-form input,
.managed-place-isolated-form textarea,
.managed-place-isolated-form select { position: relative; z-index: 2; min-height: 3.2rem; pointer-events: auto; touch-action: manipulation; user-select: text; -webkit-user-select: text; }
.managed-place-isolated-form textarea { min-height: 7rem; }
.isolated-edit-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; margin-top: .4rem; }
.isolated-edit-actions button { min-height: 3.1rem; border: 1px solid var(--line); border-radius: .72rem; background: #fff; color: var(--ink); font: inherit; font-weight: 850; }
.isolated-edit-actions .primary-action { border-color: var(--red); background: var(--red); color: #fff; }
.admin-place-row { cursor: pointer; }
.admin-place-row:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 3px; }
.managed-place-form .approval-preview-actions { grid-column: 1 / -1; }
.admin-alert-list { display: grid; gap: .55rem; }
.admin-alert-list article { display: grid; gap: .65rem; min-width: 0; border: 1px solid var(--line); border-radius: .75rem; background: var(--soft); padding: .75rem; }
.admin-alert-list article.is-threshold { border-color: rgba(204,35,60,.42); background: #fff3f2; box-shadow: inset 4px 0 0 var(--red); }
.admin-alert-list article > div:first-child { display: grid; min-width: 0; gap: .22rem; }
.admin-alert-list span { color: var(--red); font-size: .7rem; font-weight: 900; }
.admin-alert-list strong { min-width: 0; overflow-wrap: anywhere; font-size: .9rem; line-height: 1.4; }
.admin-alert-list p,.admin-alert-list em { margin: 0; overflow-wrap: anywhere; font-size: .76rem; line-height: 1.45; }
.admin-alert-list em { color: var(--muted); font-style: normal; }
.admin-alert-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .4rem; }
.admin-alert-actions button { min-height: 2.5rem; border: 0; border-radius: .65rem; background: var(--charcoal); color: #fff; font: inherit; font-size: .7rem; font-weight: 850; line-height: 1.25; white-space: normal; }

@media (max-width: 420px) {
  .admin-overlay, .settings-overlay { padding: .45rem; }
  .admin-panel { padding: .85rem; border-radius: .9rem; }
  .admin-role-grid, .admin-check-grid { grid-template-columns: 1fr; }
  .admin-member-list article { grid-template-columns: minmax(0,1fr) auto; }
  .admin-member-list article > button { grid-column: 1 / -1; width: 100%; min-height: 2.5rem; }
  .admin-approval-list article { grid-template-columns: 1fr; }
  .admin-approval-list article > em,
  .admin-approval-list article > div { grid-column: 1; }
  .admin-approval-list article > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-approval-list article > div button:first-child:last-child { grid-column: 1 / -1; }
  .approval-preview-overlay { padding: .4rem; }
  .approval-preview-panel { width: 100%; padding: 1rem 1rem 5.8rem; }
  .approval-rating-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .profile-box { grid-template-columns: 1fr; text-align: left; }
  .managed-place-form { grid-template-columns: 1fr; }
  .managed-place-form label.is-wide { grid-column: 1; }
  .isolated-edit-actions { grid-template-columns: 1fr; }
}

.login-auth-panel {
  width: min(100%, 27rem);
  height: auto;
  max-height: min(92dvh, 36rem);
  align-self: center;
  overflow: auto;
}

.login-eyebrow { color: var(--red); font-size: .68rem; font-weight: 900; letter-spacing: .14em; }
.login-form label small { margin-left: .3rem; color: #999a93; font-size: .7rem; font-weight: 650; }
.login-error { margin: -.15rem 0 0; color: var(--red); font-size: .78rem; font-weight: 800; }
.demo-admin-login { min-height: 2.8rem; color: var(--muted); }
.login-divider { display: flex; align-items: center; gap: .7rem; color: #999a93; font-size: .7rem; font-weight: 750; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.approval-preview-overlay { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: end center; padding: 1rem; background: #17171766; }
.approval-preview-panel { position: relative; width: min(100%, 28rem); max-height: 92dvh; overflow-y: auto; padding: 1.15rem; border-radius: 1.2rem; background: #fff; box-shadow: 0 1rem 3rem #1115; }
.approval-kicker { display: block; padding-right: 2.5rem; color: var(--red); font-size: .68rem; font-weight: 900; letter-spacing: .08em; }
.approval-preview-photo { width: 100%; height: 11rem; margin-top: .8rem; border-radius: .85rem; object-fit: cover; }
.approval-preview-title { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; margin: .8rem 0; }
.approval-preview-title h2 { margin: .15rem 0 0; font-size: 1.35rem; }.approval-preview-title small { color: var(--muted); }
.approval-preview-title b { flex: none; padding: .35rem .55rem; border-radius: 999px; font-size: .68rem; }.approval-preview-title b.go { background: var(--red); color: white; }.approval-preview-title b.skip { background: #ffdc35; }
.approval-rating-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: .35rem; }.approval-rating-grid span { padding: .5rem .2rem; border-radius: .55rem; background: var(--soft); text-align: center; }.approval-rating-grid small,.approval-rating-grid strong { display:block; }.approval-rating-grid small { color:var(--muted);font-size:.62rem }.approval-rating-grid strong { margin-top:.15rem;font-size:.9rem }
.approval-preview-panel section { margin-top: 1rem; }.approval-preview-panel section h3 { margin: 0 0 .4rem; font-size: .9rem; }.approval-preview-panel section p { margin: 0; color: #555750; font-size: .78rem; line-height: 1.55; }
.approval-menu { padding: .55rem 0; border-top: 1px solid var(--line); }.approval-menu p { margin:.15rem 0!important }.approval-menu small { color:var(--muted);font-size:.68rem }
.approval-map-links,.approval-preview-actions { display:flex; gap:.45rem; margin-top:.6rem }.approval-map-links a,.approval-preview-actions button { flex:1; padding:.6rem; border:1px solid var(--line); border-radius:.6rem; background:white; color:var(--ink); text-align:center; text-decoration:none; font-size:.72rem;font-weight:800 }.approval-preview-actions button:last-child { background:var(--red);color:white;border-color:var(--red) }
.approval-preview-actions { position:sticky; bottom:-1.15rem; z-index:3; padding:.7rem 0 1.15rem; background:linear-gradient(to bottom,rgba(255,255,255,.9),#fff 28%); }

.admin-overlay,
.settings-overlay {
  align-items: stretch;
  overflow: auto;
}

.login-panel,
.admin-panel,
.settings-panel,
.reviewer-panel {
  position: relative;
  display: grid;
  gap: 0.85rem;
  border-radius: 1.1rem;
  background: var(--white);
  padding: 1.25rem;
  box-shadow: 0 1rem 2.4rem rgba(20, 20, 20, 0.22);
}

.login-panel {
  position: relative;
  z-index: 1;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  overflow-anchor: none;
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

.reviewer-profile-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
}

.reviewer-profile-head img {
  display: block;
  width: 4.1rem;
  height: 4.1rem;
  border: 2px solid var(--red);
  border-radius: 999px;
  object-fit: cover;
}

.reviewer-profile-head h2,
.reviewer-profile-head p,
.reviewer-public-note h3,
.reviewer-public-note p,
.privacy-note {
  margin: 0;
}

.reviewer-profile-head h2 {
  color: var(--charcoal);
  font-size: 1.2rem;
}

.reviewer-profile-head p,
.privacy-note {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.reviewer-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.reviewer-stats article,
.reviewer-public-note {
  border-radius: 0.72rem;
  background: var(--soft);
  padding: 0.72rem;
}

.reviewer-stats article {
  display: grid;
  gap: 0.18rem;
}

.reviewer-stats span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 820;
}

.reviewer-stats strong {
  color: var(--charcoal);
  font-size: 0.94rem;
}

.reviewer-public-note {
  display: grid;
  gap: 0.38rem;
}

.reviewer-public-note h3 {
  color: var(--charcoal);
  font-size: 0.98rem;
}

.reviewer-public-note p {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.admin-panel,
.settings-panel {
  align-content: start;
  overflow-y: auto;
}

.login-panel h2,
.login-panel p,
.admin-panel h2,
.admin-panel p,
.settings-panel h2,
.settings-panel p {
  margin: 0;
}

.wallet-box,
.reward-box,
.admin-mini,
.profile-box {
  display: grid;
  gap: 0.65rem;
  border: 2px solid rgba(20, 20, 20, 0.08);
  border-radius: 0.78rem;
  background: var(--soft);
  padding: 0.85rem;
}

.profile-box {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.profile-preview {
  overflow: hidden;
  width: 4.3rem;
  height: 4.3rem;
  border: 2px solid var(--red);
  border-radius: 999px;
  background: var(--white);
  padding: 0.18rem;
}

.profile-preview img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
}

.profile-box h3 {
  margin: 0 0 0.24rem;
  color: var(--charcoal);
  font-size: 0.98rem;
}

.avatar-upload {
  display: inline-grid;
  width: fit-content;
  margin-top: 0.58rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--charcoal);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 820;
  padding: 0.46rem 0.7rem;
}

.avatar-upload input {
  display: none;
}

.account-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.account-summary article {
  display: grid;
  gap: 0.18rem;
  border: 1px solid var(--line);
  border-radius: 0.72rem;
  background: var(--white);
  padding: 0.68rem;
}

.account-summary span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 820;
}

.account-summary strong {
  color: var(--charcoal);
  font-size: 1rem;
  line-height: 1;
}

.account-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.account-menu button {
  min-height: 2.55rem;
  border: 1px solid var(--line);
  border-radius: 0.72rem;
  background: var(--white);
  color: var(--charcoal);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 820;
  padding: 0.62rem;
}

.login-form.is-hidden {
  display: none;
}

.wallet-box div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
}

.wallet-box span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 760;
}

.wallet-box strong {
  color: var(--charcoal);
  font-size: 1.55rem;
}

.reward-box h3,
.admin-mini h3 {
  margin: 0;
  color: var(--charcoal);
  font-size: 0.98rem;
}

.reward-list {
  display: grid;
  gap: 0.55rem;
}

.reward-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.7rem;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 0.58rem;
}

.reward-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.reward-item h4,
.reward-item p {
  margin: 0;
}

.reward-item h4 {
  color: var(--charcoal);
  font-size: 0.92rem;
}

.reward-item p,
.reward-item span,
.admin-mini p {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.reward-item span {
  display: block;
  margin-top: 0.22rem;
  color: var(--charcoal);
  font-weight: 760;
}

.reward-item button {
  border: 0;
  border-radius: 999px;
  background: var(--charcoal);
  color: var(--white);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 850;
  padding: 0.5rem 0.7rem;
  white-space: nowrap;
}

.reward-item button:disabled {
  background: var(--line);
  color: var(--muted);
  cursor: default;
}

.login-panel h2,
.admin-panel h2,
.settings-panel h2 {
  color: var(--charcoal);
  font-size: 1.35rem;
}

.login-panel p,
.admin-panel p,
.settings-panel p {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.38;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.45rem;
}

.admin-stats article {
  display: grid;
  gap: 0.18rem;
  border-radius: 0.72rem;
  background: var(--soft);
  padding: 0.7rem 0.52rem;
}

.admin-stats span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
}

.admin-stats strong {
  color: var(--charcoal);
  font-size: 1.2rem;
}

.admin-hero {
  display: grid;
  gap: 0.3rem;
  padding-right: 2.35rem;
}

.admin-hero > span {
  width: fit-content;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 900;
  padding: 0.28rem 0.62rem;
}

.admin-section {
  display: grid;
  gap: 0.62rem;
  border: 2px solid rgba(20, 20, 20, 0.08);
  border-radius: 0.78rem;
  padding: 0.85rem;
}

.admin-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.admin-section h3 {
  margin: 0;
  color: var(--charcoal);
  font-size: 0.98rem;
}

.admin-section-head > span,
.admin-section-head > strong {
  border-radius: 999px;
  background: var(--soft);
  color: var(--charcoal);
  font-size: 0.76rem;
  font-weight: 900;
  padding: 0.34rem 0.62rem;
  white-space: nowrap;
}

.admin-role-grid,
.admin-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.admin-role-grid article,
.admin-check-grid article,
.admin-member-list article,
.admin-approval-list article {
  display: grid;
  gap: 0.35rem;
  border-radius: 0.74rem;
  background: var(--soft);
  padding: 0.78rem;
}

.admin-role-grid article.is-owner {
  background: rgba(255, 18, 71, 0.11);
  border: 1px solid rgba(255, 18, 71, 0.22);
}

.admin-role-grid span,
.admin-check-grid span,
.admin-approval-list span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 880;
}

.admin-role-grid strong,
.admin-check-grid strong,
.admin-approval-list strong,
.admin-member-list strong {
  color: var(--charcoal);
  font-size: 0.88rem;
}

.admin-role-grid p {
  margin: 0;
  color: var(--charcoal);
  font-size: 0.82rem;
  line-height: 1.35;
}

.admin-role-grid em,
.admin-check-grid em,
.admin-approval-list em,
.admin-member-list span,
.admin-member-list em {
  color: var(--muted);
  font-size: 0.74rem;
  font-style: normal;
  line-height: 1.35;
}

.admin-member-list,
.admin-approval-list {
  display: grid;
  gap: 0.52rem;
}

.admin-member-list article {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}

.admin-member-list article > div {
  display: grid;
  gap: 0.18rem;
}

.admin-member-list button,
.admin-approval-list button,
.admin-form-actions button {
  border: 0;
  border-radius: 999px;
  background: var(--charcoal);
  color: var(--white);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 900;
  padding: 0.48rem 0.72rem;
}

.admin-approval-list article {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.admin-approval-list article > em,
.admin-approval-list article > div {
  grid-column: 2;
}

.admin-approval-list article > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.admin-approval-list button:last-child {
  background: var(--line);
  color: var(--charcoal);
}

.admin-progress {
  height: 0.62rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.admin-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--red);
}

.admin-check-grid article {
  gap: 0.22rem;
}

.admin-check-grid article.is-done {
  background: rgba(21, 131, 77, 0.1);
}

.admin-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.62rem;
}

.admin-form label {
  display: grid;
  gap: 0.36rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 840;
}

.admin-form input,
.admin-form select {
  width: 100%;
  border: 2px solid var(--line);
  border-radius: 0.72rem;
  background: var(--white);
  color: var(--charcoal);
  font: inherit;
  font-size: 0.84rem;
  padding: 0.72rem 0.8rem;
}

.admin-form .is-wide,
.admin-form-actions {
  grid-column: 1 / -1;
}

.admin-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.admin-table {
  display: grid;
  gap: 0.52rem;
}

.admin-table div {
  display: grid;
  grid-template-columns: 3.4rem 1fr auto;
  gap: 0.48rem;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 0.52rem;
}

.admin-table div:first-child {
  border-top: 0;
  padding-top: 0;
}

.admin-table span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.admin-table strong {
  min-width: 0;
  color: var(--charcoal);
  font-size: 0.84rem;
}

.admin-table em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  white-space: nowrap;
}

.admin-place-table div {
  grid-template-columns: 3.2rem minmax(0, 1.15fr) minmax(0, 0.9fr) auto minmax(5.4rem, auto);
  align-items: start;
}

.admin-place-table small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
  white-space: nowrap;
}

.admin-place-table p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: flex-end;
  margin: 0;
}

.admin-status-chip,
.admin-issue-chip,
.admin-ready-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.42rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 950;
  line-height: 1;
  padding: 0.25rem 0.48rem;
  white-space: nowrap;
}

.admin-status-chip.go {
  background: var(--red);
  color: var(--white);
}

.admin-status-chip.skip {
  background: #ffe95c;
  color: var(--charcoal);
}

.admin-issue-chip {
  background: rgba(20, 20, 20, 0.08);
  color: var(--muted);
}

.admin-ready-chip {
  background: rgba(21, 131, 77, 0.12);
  color: #157a4b;
}

.admin-section ul {
  display: grid;
  gap: 0.42rem;
  margin: 0;
  padding-left: 1.15rem;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.background-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.52rem;
}

.background-grid button {
  display: grid;
  gap: 0.35rem;
  border: 2px solid var(--line);
  border-radius: 0.72rem;
  background: var(--white);
  color: var(--charcoal);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 820;
  padding: 0.52rem;
  text-align: left;
}

.background-grid button.is-active {
  background: var(--soft);
}

.background-swatch {
  height: 3.6rem;
  border-radius: 0.48rem;
  background: linear-gradient(180deg, var(--white) 0 36%, var(--blue) 36% 64%, var(--red) 64% 100%);
  background-position: center;
  background-size: cover;
}

.upload-placeholder {
  display: grid;
  gap: 0.45rem;
  border: 1px dashed var(--line);
  border-radius: 0.78rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 760;
  padding: 0.8rem;
}

.upload-placeholder input {
  width: 100%;
  color: var(--muted);
  font: inherit;
}

.close-button {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: var(--soft);
  color: var(--charcoal);
  cursor: pointer;
  font-size: 1.28rem;
  line-height: 1;
}

.login-form {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.7rem;
  pointer-events: auto;
  touch-action: manipulation;
}

.login-form label {
  display: grid;
  gap: 0.38rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 760;
}

.login-form input {
  position: relative;
  z-index: 3;
  width: 100%;
  border: 2px solid var(--line);
  border-radius: 0.72rem;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  padding: 0.82rem 0.9rem;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-user-select: text;
  user-select: text;
}

.detail-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.35rem;
}

button:focus-visible,
.content-window:focus-visible {
  outline: 3px solid var(--charcoal);
  outline-offset: 3px;
}

@media (min-width: 740px) {
  body {
    display: grid;
    place-items: start center;
    padding: 2rem;
  }

  .app-shell {
    height: calc(100dvh - 4rem);
  }
}

@media (max-width: 520px) {
  .topbar {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.05rem;
    row-gap: 0;
    padding-top: 1.12rem;
    padding-right: 1.2rem;
    padding-bottom: 0.42rem;
    padding-left: 1.2rem;
  }

  .brand-button {
    width: 8.1rem;
    height: 2.85rem;
  }

  .login-circle-button {
    width: 2.86rem;
    height: 2.86rem;
  }

  .floating-login-anchor {
    right: 0.52rem;
    bottom: 1.68rem;
  }

  .global-search-box {
    min-height: 2.08rem;
    padding-right: 0.64rem;
    padding-left: 0.74rem;
  }

  .global-search-box input {
    font-size: 16px;
  }

  .fixed-flag-frame {
    padding-top: 5rem;
    padding-right: 0.68rem;
    padding-bottom: 1.62rem;
    padding-left: 0.68rem;
  }

  .fixed-flag-frame::after {
    top: 5rem;
    right: 0.68rem;
    bottom: 1.62rem;
    left: 0.68rem;
  }

  .guide-screen {
    top: 5rem;
    right: 0.68rem;
    bottom: 1.62rem;
    left: 0.68rem;
  }

  .admin-stats,
  .admin-role-grid,
  .admin-check-grid,
  .admin-form {
    grid-template-columns: 1fr 1fr;
  }

  .admin-place-table div {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.34rem 0.52rem;
  }

  .admin-place-table em,
  .admin-place-table small,
  .admin-place-table p {
    grid-column: 2;
  }

  .admin-place-table p {
    justify-content: flex-start;
  }

  .admin-member-list article {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .admin-member-list em {
    grid-column: 1;
  }
}

@media (max-width: 380px) {
  .topbar,
  .fixed-flag-frame {
    padding-left: 0.72rem;
    padding-right: 0.72rem;
  }

  .fixed-flag-frame::after {
    right: 0.72rem;
    left: 0.72rem;
    border-radius: 4rem;
  }

  .guide-screen {
    right: 0.72rem;
    left: 0.72rem;
    border-radius: 3.35rem;
  }

  .content-window {
    border-radius: 3.35rem;
  }

  .topbar {
    padding-top: 1.12rem;
    column-gap: 1.05rem;
    row-gap: 0;
  }

  .brand-button {
    width: 8.1rem;
    height: 2.85rem;
  }

  .floating-login-anchor {
    right: 0.54rem;
    bottom: 1.68rem;
  }

  .edition-chip {
    display: none;
  }

  .fixed-flag-frame {
    padding-top: 5rem;
  }

  .fixed-flag-frame::after {
    top: 5rem;
  }

  .user-review-head,
  .vote-row {
    grid-template-columns: 1fr;
  }

  .user-review-head button {
    width: fit-content;
    max-width: 100%;
  }

  .admin-stats,
  .admin-role-grid,
  .admin-check-grid,
  .admin-form {
    grid-template-columns: 1fr;
  }
}

/* Inner window recessed shadow */
.app-shell .content-window,
.app-shell .guide-screen {
  box-shadow:
    inset 0 0 0 1px rgba(20, 20, 20, .14),
    inset .28rem .28rem .58rem rgba(20, 20, 20, .045),
    inset 0 -1.15rem 2rem rgba(62, 43, 31, .07);
}

/* Inner window radius adjustment */
.app-shell .content-window,
.app-shell .guide-screen {
  border-radius: 2rem;
}

/* Keep the map over the content window instead of in the document flow. */
.app-shell .guide-screen { position: absolute; }
.app-shell .content-window { position: relative; }
/* Visible inner window shadow overlay */
.app-shell .content-window,
.app-shell .guide-screen {
  box-shadow:
    inset 0 0 0 1px rgba(20, 20, 20, .15),
    0 .72rem 1.8rem rgba(45, 32, 24, .11);
}

.app-shell .content-window::after,
.app-shell .guide-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 .72rem 1.05rem rgba(20, 20, 20, .095),
    inset .42rem 0 .78rem rgba(20, 20, 20, .048),
    inset 0 0 0 1px rgba(20, 20, 20, .115);
}

/* Review section width and swipe fix */
.app-shell .detail-copy,
.app-shell .review-box,
.app-shell .review-form,
.app-shell .review-form label,
.app-shell .vote-summary,
.app-shell .vote-row,
.app-shell .user-review-list,
.app-shell .user-review {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.app-shell .review-form input,
.app-shell .review-form select,
.app-shell .review-form textarea,
.app-shell .review-form button,
.app-shell .vote-row button {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.app-shell .review-form input[type="file"] {
  overflow: hidden;
  font-size: .76rem;
}

.app-shell .review-box,
.app-shell .review-form,
.app-shell .review-form label,
.app-shell .vote-row,
.app-shell .vote-row button,
.app-shell .user-review-head,
.app-shell .user-review-list {
  touch-action: pan-y;
}

/* Outer shell ivory tone */
.app-shell {
  background: var(--app-ivory);
}

.app-shell .fixed-flag-frame {
  background: var(--app-ivory);
}

/* Demo banner strip only */
.demo-banner {
  left: 0;
  right: 0;
  top: 5rem;
  height: .12rem;
  min-height: .12rem;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background: var(--red);
  color: transparent;
  box-shadow: none;
}

/* Outer ivory boundary border */
.demo-banner {
  display: none;
}

.app-shell {
  border: 1px solid rgba(20, 20, 20, .18);
}

.app-shell .fixed-flag-frame {
  box-shadow: none;
}

/* Inner window upward adjustment */
.app-shell {
  --chrome-top: 5.75rem;
}

/* Header account logo color */
.header-account {
  color: var(--red);
  border-color: var(--red);
}

/* Header account stronger ring */
.header-account {
  border-width: 2.5px;
}

/* Search input focus cleanup */
.global-search-box input:focus,
.global-search-box input:focus-visible {
  outline: none;
  box-shadow: none;
}

.global-search-box:focus-within {
  outline: none;
}

/* Hide bottom navigation */
.bottom-navigation {
  display: none !important;
}

.app-shell {
  --chrome-bottom: calc(1.35rem + env(safe-area-inset-bottom));
}

/* Header account larger person icon */
.header-account {
  padding: .24rem;
}

.header-account svg {
  stroke-width: 2.45;
}


.header-account svg {
  stroke-width: 2.45;
}

/* Header account match control height */
.app-shell .topbar {
  grid-template-columns: 6.7rem minmax(0, 1fr) 2.34rem;
}

.header-account {
  width: 2.34rem;
  height: 2.34rem;
  padding: .34rem;
}

.app-shell .topbar .brand-button,
.app-shell .topbar .global-search-box,
.app-shell .topbar .header-account {
  transform: translateY(var(--header-control-y));
}

.app-shell .topbar .brand-logo-mark {
  transform: translateY(var(--header-logo-y));
}

.app-shell .topbar {
  background: var(--header-ivory);
}

.app-shell .brand-button {
  background: transparent;
  border-radius: 999px;
  padding: 0;
}

/* Ivory to white boundary line */
.app-shell .fixed-flag-frame::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .18);
}

/* White header to ivory boundary line */
.app-shell .topbar::after {
  display: none;
}

/* Content window true rounded clipping */
.app-shell .content-window {
  overflow: hidden;
  clip-path: inset(0 round 2rem);
  contain: paint;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}

/* Keep the top menu safely inside the rounded window */
.app-shell .sticky-panel-head {
  gap: .38rem;
  padding-top: 1rem;
  padding-bottom: .52rem;
}

/* List thumbnails use the same full product source as detail, without shelf sizing. */
.product-list-object { place-items: center; background: linear-gradient(160deg, #d9ded1, #c0b59f 62%, #99856a); }
.product-list-object .product-list-photo { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; filter: drop-shadow(3px 2px 3px rgba(57,49,37,.24)); }
.product-list-card .place-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .4rem; }
.product-list-card .place-meta .product-trust-badge { margin: 0; white-space: nowrap; }

/* Explicit beta examples: persistent notice and editorial review reminder. */
.beta-chip {color:#775215;background:#fff0cc;border-radius:4px;padding:2px 5px;}
.beta-detail-note,.beta-review-reminder {background:#fff2d8;color:#5d431a;padding:12px;border-radius:8px;font-size:12px;line-height:1.6;}

/* Molded matte controls: same warm-gray material as the surrounding tray. */
.app-shell .sticky-panel-head {
  padding: .65rem .7rem .5rem;
  gap: 0;
  border-bottom: 1px solid #dcdad2;
  background: #eeede7;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 8px rgba(65,59,43,.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.category-row {
  gap: .7rem;
  padding: .35rem .4rem .5rem;
  scroll-padding-inline: .4rem;
}
.category-button {
  min-height: 2.4rem;
  padding: .55rem .95rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(160deg, #eeede7, #e5e4de);
  color: #42433e;
  font-size: .8rem;
  font-weight: 550;
  letter-spacing: -.025em;
  box-shadow: 2px 3px 3px rgba(71,68,56,.24), 4px 6px 9px rgba(71,68,56,.12), -2px -2px 5px rgba(255,255,252,.8), inset 0 1px 1px rgba(255,255,255,.55), inset 0 -1px 2px rgba(105,102,88,.12);
  transition: background .12s ease, box-shadow .12s ease, color .12s ease;
}
.category-button.is-active {
  border-color: transparent;
  background: linear-gradient(160deg, #c0e4d2, #add7c2);
  color: #223e30;
  font-weight: 650;
  box-shadow: 2px 3px 3px rgba(53,91,71,.28), 3px 5px 8px rgba(53,91,71,.14), -2px -2px 5px rgba(248,255,250,.8), inset 0 1px 2px rgba(244,255,248,.7), inset 0 -2px 2px rgba(70,120,93,.18);
}
.category-button:active {
  box-shadow: inset 2px 3px 5px rgba(72,66,50,.24), inset -2px -2px 4px rgba(255,255,255,.65);
}
.category-button:focus-visible {
  outline: 2px solid #426c57;
  outline-offset: 3px;
}
@media (hover: hover) {
  .category-button:not(.is-active):hover {
    color: #303b33;
    background: linear-gradient(160deg, #f1f0ea, #e8e7e1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .category-button { transition: none; }
}