@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: transparent;
}

.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:var(--red); }
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:#595959; 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: static;
  flex: 0 0 auto;
  align-items: center;
  padding: 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=20260918-shelf-153") 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=20260918-shelf-153") 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 :is(article,button) {
  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 0 .5rem;
  gap: 0;
  border-bottom: 1px solid #dcdad2;
  background: rgba(246, 244, 237, .42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 8px rgba(65,59,43,.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.category-row {
  gap: .7rem;
  padding: .35rem 1.1rem .5rem;
  min-width: 0;
  width: 100%;
  scroll-padding-inline: 1.1rem;
}
.category-button {
  min-height: 2.4rem;
  padding: .55rem .95rem;
  border: .5px solid transparent;
  border-radius: 999px;
  background: rgba(246, 244, 237, .10);
  color: #686868;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: -.025em;
  box-shadow: 1px 2px 3px rgba(71,68,56,.23), 2px 3px 7px rgba(71,68,56,.12), -1px -1px 3px rgba(255,255,255,1), inset 0 1px 2px rgba(255,255,255,.9), inset 0 -1px 2px rgba(105,102,88,.09);
  transition: background .12s ease, box-shadow .12s ease, color .12s ease;
}
.category-button.is-active {
  border-color: var(--red);
  background: var(--red);
  color: #ffffff;
  font-weight: 750;
  box-shadow: inset 2px 3px 5px rgba(91, 0, 23, .38), inset -2px -2px 4px rgba(255, 170, 185, .35), 0 1px 0 #fffdf7;
}

.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 var(--red);
  outline-offset: 3px;
}
@media (hover: hover) {
  .category-button:not(.is-active):hover {
    color: #686868;
    background: rgba(246, 244, 237, .10);
  }
}
@media (prefers-reduced-motion: reduce) {
  .category-button { transition: none; }
}

/* Account actions share the category controls' softly molded finish. */
.login-page .login-page-form { gap: .75rem; }
.login-page .login-page-form .primary-action,
.login-page .secondary-action.full,
.login-page .login-back-button {
  border: 0;
  border-radius: 999px;
  min-height: 3.2rem;
  font-weight: 650;
  line-height: 1.3;
  transition: box-shadow .12s ease, background .12s ease;
}
.login-page .login-page-form .primary-action {
  margin-top: 1rem;
  background: var(--red);
  color: #fff;
  box-shadow: 2px 4px 7px rgba(100, 15, 32, .24), -2px -2px 5px rgba(255,255,255,.9), inset 0 1px 2px rgba(255,255,255,.4), inset 0 -2px 3px rgba(85,0,18,.18);
}
.login-page .secondary-action.full {
  display: block;
  margin-top: 16px;
  color: #595955;
  background: linear-gradient(150deg, #f9f7f0, #efede5);
  box-shadow: 2px 3px 6px rgba(71,68,56,.19), -2px -2px 5px rgba(255,255,255,.95), inset 0 1px 2px rgba(255,255,255,.9);
}
.login-page .login-back-button {
  min-height: 2.75rem;
  padding: .65rem 1rem;
  color: #595955;
  background: #f6f3eb;
  box-shadow: 1px 2px 4px rgba(71,68,56,.15), -2px -2px 4px rgba(255,255,255,.95);
}
.login-page .login-page-form .primary-action:active {
  box-shadow: inset 2px 3px 5px rgba(91,0,23,.38), inset -2px -2px 4px rgba(255,170,185,.3);
}
.login-page .secondary-action.full:active,
.login-page .login-back-button:active {
  box-shadow: inset 2px 3px 5px rgba(71,68,56,.19), inset -2px -2px 4px rgba(255,255,255,.9);
}
.login-page button:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.login-page button:disabled { opacity: .55; cursor: wait; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .login-page button { transition: none; }
}

/* Account header occupies separate rows; recessed pill fields match the controls. */
.login-page .login-back-button {
  display: block;
  width: fit-content;
  margin-bottom: 1.5rem;
}
.login-page .login-eyebrow {
  display: block;
  margin: 0 0 .65rem;
  line-height: 1.5;
}
.login-page .login-page-form input {
  border: 1px solid transparent;
  border-radius: 999px;
  min-height: 3.35rem;
  padding: .9rem 1.25rem;
  background: #f0eee7;
  color: #353630;
  box-shadow: inset 3px 3px 6px rgba(71,68,56,.18), inset -3px -3px 6px rgba(255,255,255,.95), 0 1px 0 rgba(255,255,255,.85);
  transition: box-shadow .12s ease, border-color .12s ease;
}
.login-page .login-page-form input:focus {
  border-color: rgba(198,12,48,.45);
  outline: 2px solid rgba(198,12,48,.18);
  outline-offset: 2px;
  box-shadow: inset 2px 3px 5px rgba(71,68,56,.16), inset -3px -3px 6px rgba(255,255,255,.95);
}
@media (prefers-reduced-motion: reduce) {
  .login-page .login-page-form input { transition: none; }
}

/* Selected wallpaper spans the header and the outer frame as one surface. */
.app-shell:not([data-background="flag"]) {
  background: var(--custom-bg, var(--app-ivory));
  background-position: center;
  background-size: cover;
}
.app-shell:not([data-background="flag"]) .fixed-flag-frame,
.app-shell:not([data-background="flag"]) .topbar { background: transparent; }
.feedback-cancel {
  display: block; margin: .8rem 0 1rem auto; padding: .6rem 1rem;
  border: 0; border-radius: 999px; background: #f2f2ee; color: #595959;
  font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
  box-shadow: 1px 2px 4px #0002, -1px -1px 3px #fff;
}
.feedback-cancel:active { box-shadow: inset 1px 2px 4px #0002; }

/* One wallpaper behind the full app, including the logo header. */
.app-shell[data-background="flag"] { background: #fff; }
.app-shell[data-background="flag"] > .flag-blue,
.app-shell[data-background="flag"] > .flag-red { display: block; }
.app-shell .fixed-flag-frame,
.app-shell .topbar { background: transparent; }
/* Account buttons use the same translucent molded material as the category menu. */
.login-page .secondary-action.full,
.login-page .login-back-button {
  background: rgba(242,242,242,.10);
  color: #686868;
  font-weight: 600;
  box-shadow: 1px 2px 3px rgba(71,68,56,.23), 2px 3px 7px rgba(71,68,56,.12), -1px -1px 3px #fff, inset 0 1px 2px rgba(255,255,255,.9), inset 0 -1px 2px rgba(105,102,88,.09);
}
.login-page .login-page-form .primary-action {
  box-shadow: 1px 2px 3px rgba(100,15,32,.23), 2px 3px 7px rgba(100,15,32,.12), -1px -1px 3px #fff, inset 0 1px 2px rgba(255,255,255,.55), inset 0 -1px 2px rgba(85,0,18,.18);
}
.login-page .secondary-action.full:active,
.login-page .login-back-button:active {
  box-shadow: inset 2px 3px 5px rgba(71,68,56,.19), inset -2px -2px 4px rgba(255,255,255,.9);
}
.login-page .login-page-form .primary-action:active {
  box-shadow: inset 2px 3px 5px rgba(91,0,23,.38), inset -2px -2px 4px rgba(255,170,185,.3);
}
.login-page button:disabled { box-shadow: none; }

/* A filled brand-red account button indicates an authenticated session. */
.app-shell .topbar .header-account.is-signed-in { background: var(--red); color: #fff; border-color: var(--red); }
.app-shell .topbar .header-account.is-signed-in svg { stroke: #fff; }

/* Personal account: molded surfaces, recessed tabs and brand-red selection. */
.app-shell .account-panel {
  --account-raised: 2px 3px 7px rgba(71,68,56,.16), -2px -2px 5px rgba(255,255,255,.95), inset 0 1px 1px rgba(255,255,255,.85);
  --account-inset: inset 2px 3px 6px rgba(71,68,56,.13), inset -2px -2px 5px rgba(255,255,255,.95);
  display: block; padding: 1.6rem 1.4rem; border-radius: 1.8rem;
  background: rgba(246,244,237,.94); backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px); color: #595959;
  box-shadow: 5px 10px 28px rgba(50,46,37,.20), inset 1px 1px 2px #fff;
}
.account-panel .account-identity { display: flex; align-items: center; gap: 1rem; margin: .65rem 2.5rem 1rem 0; min-width: 0; }
.account-identity > div { min-width: 0; }
.account-panel .account-avatar { display: grid; place-items: center; flex: 0 0 3.8rem; height: 3.8rem; border-radius: 50%; background: rgba(242,242,242,.4); color: var(--red); font-size: 1.5rem; font-weight: 750; box-shadow: var(--account-raised); }
.account-panel .account-caption { font-size: .72rem; font-weight: 600; color: #777; }
.account-panel h2 { margin: .25rem 0 0; font-size: 1.45rem; line-height: 1.35; font-weight: 750; letter-spacing: -.04em; overflow-wrap: anywhere; }
.account-panel > .field-note { font-size: .8rem; line-height: 1.7; color: #777; margin: 0 0 1.5rem; }
.account-panel .close-button { top: 1.2rem; right: 1.2rem; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: rgba(242,242,242,.25); color: #686868; box-shadow: var(--account-raised); font-weight: 400; }
.account-panel .account-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .4rem; margin: 0 0 1.6rem; padding: .4rem; border-radius: 999px; background: rgba(220,219,212,.3); box-shadow: var(--account-inset); }
.account-panel .account-tabs button { min-height: 2.6rem; padding: .55rem .25rem; border: 0; border-radius: 999px; background: transparent; color: #686868; font-size: .76rem; font-weight: 600; }
.account-panel .account-tabs button[aria-pressed="true"] { background: var(--red); color: #fff; box-shadow: inset 1px 2px 3px rgba(80,0,20,.24), inset -1px -1px 2px rgba(255,170,180,.3); }
.account-panel .account-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin: 0 0 1.6rem; }
.account-panel .account-summary :is(article,button) { border: 0; border-radius: 1.25rem; padding: 1.15rem; gap: .7rem; background: rgba(242,242,242,.25); box-shadow: var(--account-raised); }
.account-panel .account-summary span { color: #777; font-size: .76rem; font-weight: 600; }
.account-panel .account-summary strong { color: #595959; font-size: 1.65rem; font-weight: 700; }
.account-panel .account-menu { grid-template-columns: 1fr; gap: .85rem; margin: 0; }
.account-panel .account-menu button,
.account-panel .account-saved article > button:last-child { min-height: 2.9rem; border: 0; border-radius: 999px; background: rgba(242,242,242,.18); color: #686868; padding: .75rem 1.1rem; font-size: .82rem; font-weight: 600; box-shadow: var(--account-raised); }
.account-panel .account-menu button[data-logout] { margin-top: .55rem; color: var(--red); }
.account-panel .account-menu button:active,
.account-panel .close-button:active,
.account-panel .account-saved article > button:last-child:active { box-shadow: var(--account-inset); }
.account-panel .account-saved article,
.account-panel .account-feedback article { border: 0; border-radius: 1.2rem; padding: 1rem; margin-bottom: 1rem; background: rgba(242,242,242,.18); box-shadow: var(--account-raised); }
.account-panel .account-saved article { gap: .85rem; }
.account-panel .account-saved article > button:first-child { min-width: 0; color: #595959; }
.account-panel .account-saved article > button:first-child span { min-width: 0; overflow-wrap: anywhere; }
.account-panel .account-saved article > button:last-child { min-height: 2.4rem; padding: .5rem .9rem; font-size: .72rem; }
.account-panel .account-feedback article > strong { color: #595959; font-size: .95rem; }
.account-panel .account-feedback article p { margin: .75rem 0 0; font-size: .85rem; overflow-wrap: anywhere; }
.account-panel .empty-review { margin: 0; padding: 2.25rem 1rem; border-radius: 1.25rem; background: rgba(230,229,223,.15); color: #777; font-size: .85rem; line-height: 1.8; text-align: center; box-shadow: var(--account-inset); }
.account-panel button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
@media(max-width: 380px) { .app-shell .account-panel { padding: 1.25rem 1rem; } .account-panel .account-identity { gap: .7rem; } .account-panel h2 { font-size: 1.25rem; } }

/* The points wallet and gift exchange belong to the same personal surface. */
.account-panel .point-wallet { display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; padding:1.15rem 1.25rem; margin:0 0 1.4rem; border:0; border-radius:1.3rem; background:rgba(242,242,242,.2); color:#686868; box-shadow:var(--account-raised); text-align:left; font:inherit; font-size:.8rem; }
.point-wallet strong { display:block; margin-top:.5rem; color:var(--red); font-size:1.8rem; font-weight:750; }
.rewards-view { min-width:0; }
.rewards-view h3 { font-size:1.05rem; color:#595959; margin:1.4rem 0 1rem; }
.point-balance { display:grid; gap:.6rem; padding:1.25rem; border-radius:1.3rem; box-shadow:var(--account-inset); font-size:.8rem; }
.point-balance strong { font-size:2.1rem; color:var(--red); letter-spacing:-.04em; }
.reward-details { margin:1.25rem 0; padding:1rem; border-radius:1.1rem; background:rgba(242,242,242,.16); box-shadow:var(--account-raised); }
.reward-details summary { min-height:1.8rem; font-size:.84rem; font-weight:650; cursor:pointer; }
.reward-details > p { display:flex; gap:.7rem; justify-content:space-between; margin:.9rem 0 0; font-size:.76rem; line-height:1.6; }
.reward-details > p strong { white-space:nowrap; }
.account-panel .rewards-view .field-note { font-size:.74rem; line-height:1.7; color:#777; margin:.8rem 0; }
.reward-gift-list { display:grid; gap:1rem; }
.reward-gift-list article { padding:1.2rem; border-radius:1.3rem; background:rgba(242,242,242,.2); box-shadow:var(--account-raised); }
.reward-gift-icon { display:grid; place-items:center; width:3rem; height:3rem; border-radius:50%; box-shadow:var(--account-raised); color:var(--red); margin-bottom:1rem; }
.reward-gift-icon svg { width:1.6rem; height:1.6rem; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
.reward-gift-list h4 { margin:0; font-size:1rem; }
.reward-gift-list p { margin:.6rem 0; font-size:.8rem; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }
.reward-gift-list article > span { font-size:.72rem; color:#777; }
.reward-gift-footer { display:flex; align-items:center; justify-content:space-between; gap:.7rem; margin-top:1rem; }
.reward-gift-footer strong { color:var(--red); font-size:1rem; }
.rewards-view button { min-height:2.6rem; border:0; border-radius:999px; padding:.6rem 1rem; font:inherit; font-size:.78rem; font-weight:600; color:#686868; background:rgba(242,242,242,.2); box-shadow:var(--account-raised); }
.rewards-view button:active { box-shadow:var(--account-inset); }
.rewards-view button:disabled { opacity:.5; box-shadow:none; cursor:default; }
.rewards-view button.reward-primary { color:#fff; background:var(--red); }
.reward-form { display:grid; gap:1rem; padding:.75rem 0; }
.reward-form label { display:grid; gap:.5rem; font-size:.76rem; line-height:1.6; }
.reward-form input:not([type="checkbox"]),.reward-form textarea,.reward-form select { min-width:0; width:100%; min-height:2.8rem; border:0; border-radius:999px; padding:.8rem 1rem; color:#595959; background:rgba(230,229,223,.18); box-shadow:var(--account-inset); font:inherit; font-size:16px; }
.reward-form textarea { border-radius:1rem; resize:vertical; min-height:5rem; }
.reward-form .reward-check { display:flex; align-items:center; gap:.6rem; }
.reward-check input { width:1.1rem; height:1.1rem; accent-color:var(--red); }
.reward-form input:focus-visible,.reward-form textarea:focus-visible,.reward-form select:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
.reward-claim { padding:1rem; margin:1.2rem 0; border-radius:1.2rem; box-shadow:var(--account-inset); }
.reward-claim h3,.reward-claim p { margin:0; }
.reward-claim p { font-size:.8rem; line-height:1.7; }
.reward-actions { display:flex; flex-wrap:wrap; gap:.7rem; }
.reward-actions > button { flex:1; }
.reward-order { padding:1rem 0; border-bottom:1px solid rgba(90,80,60,.1); font-size:.8rem; }
.reward-order > div { display:flex; justify-content:space-between; gap:.7rem; }
.reward-order > div > span { flex-shrink:0; font-size:.72rem; color:var(--red); }
.reward-order p { margin:.65rem 0!important; line-height:1.7; overflow-wrap:anywhere; }
.reward-delivery { white-space:pre-wrap; }
.point-entry { display:flex; justify-content:space-between; gap:.7rem; padding:.9rem 0; font-size:.78rem; }
.point-entry small,.reward-admin-gifts small { display:block; margin-top:.35rem; color:#777; font-size:.7rem; }
.point-entry > strong { white-space:nowrap; }
.reward-admin-gifts { display:grid; gap:.75rem; }
.reward-admin-gifts button { display:flex; justify-content:space-between; align-items:center; gap:.75rem; border-radius:1rem; text-align:left; }
.reward-manage-link { width:100%; margin:.7rem 0; }
.account-panel { scrollbar-width: thin; scrollbar-color: rgba(100,95,85,.25) transparent; }
.account-panel::-webkit-scrollbar { width: 5px; }
.account-panel::-webkit-scrollbar-track { background: transparent; }
.account-panel::-webkit-scrollbar-thumb { background: rgba(100,95,85,.25); border-radius: 999px; }

/* Molded red login action: bright upper rim and a deeper lower edge. */
.login-page .login-page-form .primary-action {
  background: linear-gradient(175deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.02) 40%, rgba(75,0,18,.15) 100%), var(--red);
  box-shadow: 2px 4px 5px rgba(94,12,29,.26), 3px 6px 10px rgba(71,45,42,.13), -2px -2px 5px rgba(255,255,255,.95), inset 0 2px 2px rgba(255,255,255,.64), inset 1px 0 2px rgba(255,255,255,.25), inset 0 -2px 3px rgba(75,0,18,.30);
}
.login-page .login-page-form .primary-action:active {
  background: var(--red);
  box-shadow: inset 2px 3px 5px rgba(91,0,23,.38), inset -2px -2px 4px rgba(255,170,185,.3);
}
.login-page .login-page-form .primary-action:disabled { box-shadow: none; }

.recovery-link { display:block; margin:1.4rem auto 0; border:0; background:transparent; color:#686868; padding:.7rem; font:inherit; font-size:.82rem; text-decoration:underline; text-underline-offset:4px; }
.recovery-message { margin:1.25rem 0!important; color:#686868; line-height:1.7; font-size:.85rem; }

/* Reference-inspired molded toast: soft neutral slab with recessed status seal. */
.app-shell .action-notice {
  position: fixed; top: 50%; left: 50%; right: auto;
  width: min(22rem, calc(100% - 3rem)); transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 4.4rem; max-height: 9rem; padding: 1.15rem 1.2rem;
  border: 0; border-radius: 1.3rem; background: rgba(241,240,235,.94); color: #60605d;
  box-shadow: 4px 7px 12px rgba(60,57,48,.20), 1px 2px 3px rgba(60,57,48,.10), -2px -2px 5px rgba(255,255,255,.9), inset 1px 1px 2px rgba(255,255,255,.9), inset 0 -1px 2px rgba(110,105,93,.10);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: .84rem; font-weight: 600; line-height: 1.65;
  animation: notice-appear .18s ease-out;
}
.action-notice-text { min-width: 0; overflow-wrap: anywhere; }
.action-notice-seal { display: grid; place-items: center; flex: 0 0 1.9rem; height: 1.9rem; border-radius: 50%; color: #686862;
  background: rgba(224,224,218,.24); box-shadow: inset 2px 2px 4px rgba(70,67,58,.23), inset -2px -2px 4px rgba(255,255,255,.95), 0 1px 1px rgba(255,255,255,.8); }
.action-notice-seal svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 0 rgba(255,255,255,.9)); }
.app-shell .action-notice.is-error { background: rgba(245,235,231,.97); color: #91362e; }
.action-notice.is-error .action-notice-seal { color: #91362e; }
@keyframes notice-appear { from { opacity: 0; transform: translate(-50%, calc(-50% + .35rem)); } to { opacity: 1; transform: translate(-50%, -50%); } }
@media(prefers-reduced-motion: reduce) { .app-shell .action-notice { animation: none; } }

/* Member language follows the account's soft molded controls. */
.member-language-form {display:grid;gap:.7rem;margin:1rem 0;padding:1rem;border-radius:1.2rem;background:rgba(242,242,242,.32);box-shadow:inset 2px 2px 4px rgba(60,57,48,.1),inset -2px -2px 4px rgba(255,255,255,.85)}
.member-language-form>span {font-size:.75rem;color:#686868}
.member-language-form label,.member-filter-form label {display:grid;gap:.4rem;font-size:.8rem;color:#686868;font-weight:600}
.member-language-form select,.member-filter-form select,.login-page-form select {width:100%;min-width:0;min-height:2.8rem;border:0;border-radius:999px;padding:.65rem 1rem;font:inherit;font-size:16px;color:#60605d;background:rgba(242,242,242,.35);box-shadow:inset 2px 2px 4px rgba(60,57,48,.16),inset -2px -2px 4px rgba(255,255,255,.9)}
.member-language-form button,.member-filter-form button {border:0;border-radius:999px;padding:.7rem 1rem;color:#686868;font-weight:600;background:rgba(242,242,242,.3);box-shadow:2px 3px 5px rgba(60,57,48,.15),-2px -2px 4px #fff}
.member-filter-form {display:grid;gap:.7rem;margin:1rem 0;grid-template-columns:1fr 1fr}.member-filter-form button {grid-column:1/-1}

.account-panel .account-tabs {position:relative;isolation:isolate;touch-action:pan-y;user-select:none}
.account-tab-indicator {position:absolute;top:.4rem;bottom:.4rem;left:.4rem;width:calc((100% - 1.6rem)/3);border-radius:999px;background:var(--red);box-shadow:inset 1px 2px 3px rgba(80,0,20,.24),inset -1px -1px 2px rgba(255,170,180,.3);pointer-events:none;z-index:-1}
.account-panel .account-tabs button[aria-pressed="true"] {background:transparent;box-shadow:none;color:#fff}
.account-panel .account-tabs button {position:relative;transition:color .18s ease}
@media(prefers-reduced-motion:reduce){.account-panel .account-tabs button{transition:none}}

.account-feedback>article>button,.own-feedback-actions button {border:0;border-radius:999px;padding:.7rem 1rem;font-weight:600;color:#686868;background:rgba(242,242,242,.3);box-shadow:2px 3px 5px rgba(60,57,48,.15),-2px -2px 4px #fff}
.account-feedback .own-feedback-editor {margin-top:1rem}.own-feedback-actions {display:flex;gap:.75rem}.own-feedback-actions button {flex:1}.own-feedback-actions button[type="submit"] {background:var(--red);color:white}.own-feedback-editor textarea {min-height:7rem}

.account-panel .account-avatar {position:relative;padding:0;border:0;cursor:pointer;width:3.8rem}.account-avatar img {width:100%;height:100%;object-fit:cover;border-radius:50%}.avatar-edit-mark {position:absolute;right:-.1rem;bottom:-.1rem;border-radius:50%;width:1.25rem;height:1.25rem;display:grid;place-items:center;background:var(--red);color:white;font-size:.85rem;box-shadow:0 1px 3px #0002}.avatar-text-button {border:0;padding:.35rem .5rem .1rem 0;background:transparent;color:#686868;font-size:.72rem;font-weight:600}

/* Brand-red focus for every editable form field. */
.app-shell { --focus: var(--red); }
.app-shell :is(input,textarea,select):not([data-search-input]):focus {
  border-color: var(--red);
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.app-startup {padding:3rem 1.5rem;color:#686868}.app-startup h1 {font-size:1.3rem}.app-startup p {line-height:1.6}.app-startup a {display:inline-block;margin-top:1rem;padding:.8rem 1.4rem;border-radius:999px;background:var(--red);color:white;text-decoration:none}

/* Raised account shortcuts and one-way GO save action. */
.account-panel .account-summary button {display:grid;text-align:left;font:inherit;cursor:pointer;transition:box-shadow .15s,transform .15s}
.account-panel .account-summary button:active {box-shadow:var(--account-inset);transform:translateY(1px)}
.account-panel .account-summary button:focus-visible,.detail-go-save:focus-visible {outline:2px solid var(--red);outline-offset:4px}
.detail-image:is(.go,.skip) .detail-go-save {width:auto;min-width:4.5rem;height:2.8rem;padding:0 1.2rem;border:0;border-radius:999px;background:rgba(242,242,242,.88);color:#656565;font-size:.86rem;font-weight:700;box-shadow:inset 1px 1px 2px rgba(255,255,255,.95),3px 4px 7px rgba(45,35,30,.23),-2px -2px 5px rgba(255,255,255,.65);cursor:pointer;transition:transform .12s,box-shadow .12s}
.detail-image:is(.go,.skip) .detail-go-save:active {transform:translateY(1px);background:var(--red);color:#fff;box-shadow:inset 2px 3px 5px rgba(80,0,20,.3),inset -1px -1px 3px rgba(255,180,190,.35)}
.detail-image .detail-go-save:disabled {cursor:wait;opacity:.7}
@media(prefers-reduced-motion:reduce){.detail-image .detail-go-save,.account-panel .account-summary button{transition:none}}

/* Product prose flows directly over the detail surface. */
.product-detail-copy,.product-detail-copy .product-reason-box,.product-detail-copy .product-advice-grid section {background:transparent;border:0;box-shadow:none}
.product-detail-copy .product-reason-box {padding:1rem 0}
.product-detail-copy .product-advice-grid section {padding:.85rem 0}
.product-save-bar {margin:.25rem 0 .5rem}
.account-saved img.saved-product-image {object-fit:contain;background:transparent}

/* Saved state is a pressed logo-red surface across places and products. */
.save-bar button[data-save-place],.save-bar button[data-save-product] {border:0;border-radius:999px;background:rgba(242,242,242,.65);color:#686868;box-shadow:inset 1px 1px 2px rgba(255,255,255,.95),3px 4px 7px rgba(71,68,56,.15),-2px -2px 5px rgba(255,255,255,.8)}
.product-save-bar {grid-template-columns:minmax(7rem,max-content)}
.detail-image:is(.go,.skip) .detail-go-save.is-saved,.save-bar button.is-saved,.save-bar button[data-save-place]:active,.save-bar button[data-save-product]:active {background:var(--red);color:#fff;box-shadow:inset 2px 3px 5px rgba(80,0,20,.32),inset -1px -1px 3px rgba(255,170,180,.3)}

/* Reference-style save switch, outside the photo at its lower-right edge. */
.detail-panel:has(> .detail-save-row) {gap:.25rem}
.detail-save-row {display:flex;justify-content:flex-end;align-items:center;padding:0 .2rem;min-height:44px}
.detail-save-row + .detail-copy {padding-top:0}
.detail-save-row + .detail-copy > .place-meta {margin-top:0}
.detail-save-switch {position:relative;display:block;width:84px;height:44px;padding:4px;border:0;border-radius:999px;background:linear-gradient(135deg,#dedcdb 35%,#f8f6f1 100%);box-shadow:inset 4px 4px 5px rgba(42,39,38,.58),inset -4px -4px 6px rgba(255,255,255,.98);cursor:pointer;touch-action:manipulation}
.save-switch-thumb {display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:0;background:var(--save-thumb-surface);box-shadow:-1px -1px 1px #fff,1px 2px 2.5px rgba(45,45,40,.38);transform:translateX(0)}
.detail-save-switch.is-saved .save-switch-thumb {transform:translateX(40px)}
.save-switch-thumb svg {width:23px;height:23px;fill:none;stroke:var(--red);stroke-width:3.8;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.detail-save-switch.is-saved .save-switch-thumb svg {opacity:1}
.detail-save-switch:active .save-switch-thumb {box-shadow:inset 1px 2px 3px rgba(62,62,56,.2),inset -1px -1px 3px rgba(255,255,255,.95)}
.detail-save-switch:focus-visible {outline:2px solid var(--red);outline-offset:4px}
.detail-contact-bar {grid-template-columns:repeat(auto-fit,minmax(4rem,1fr))}

.detail-panel,.product-detail-panel {background:#f6f4ed;--save-thumb-surface:#f6f4ed}

/* Saved track uses the brand red; the thumb keeps the detail surface. */
.detail-save-switch.is-saved {background:var(--red);box-shadow:inset 4px 4px 5px rgba(65,0,15,.48),inset -4px -4px 6px rgba(255,255,255,.35)}

/* Detail surfaces share the account screen's molded, translucent finish. */
.detail-panel {
  --detail-raised:2px 3px 7px rgba(71,68,56,.16),-2px -2px 5px rgba(255,255,255,.95),inset 0 1px 1px rgba(255,255,255,.85);
  --detail-inset:inset 2px 3px 6px rgba(71,68,56,.13),inset -2px -2px 5px rgba(255,255,255,.95);
  color:#595959;
}
.detail-panel .detail-copy {background:transparent;gap:1.15rem;padding-inline:.5rem}
.detail-panel .detail-copy h1 {color:#484848;font-weight:750;letter-spacing:-.04em}
.detail-panel .detail-copy :is(h2,h3) {color:#595959;font-weight:700;letter-spacing:-.025em}
.detail-panel .detail-copy p {line-height:1.75}
.detail-panel :is(.reason-box,.yoribu-review.standalone,.product-stores,.visit-box,.related-box,.product-box,.review-box) {background:transparent;border:0;box-shadow:none;padding:1rem 0}
.detail-panel :is(.info-box,.rating-box,.tip-box) {border:0;border-radius:1.25rem;background:rgba(242,242,242,.18);padding:1.15rem;box-shadow:var(--detail-raised)}
.detail-panel :is(.related-card,.product-item,.user-review) {border:0;border-radius:1.2rem;background:rgba(242,242,242,.18);box-shadow:var(--detail-raised);padding:1rem}
.detail-panel :is(.must-try-box,.must-try-item,.vote-summary) {border:0;border-radius:1.15rem;background:rgba(242,242,242,.12);box-shadow:var(--detail-inset);padding:1rem}
.detail-panel .must-try-item {box-shadow:none;background:transparent}
.detail-panel .tip-section {border-color:rgba(90,85,80,.12)}
.detail-panel .product-advice-grid {gap:1rem}
.detail-panel .product-advice-grid section {border:0;border-radius:1.2rem;background:rgba(242,242,242,.18);padding:1rem;box-shadow:var(--detail-raised)}
.detail-panel .detail-copy :is(button:not(.photo-gallery-card),.map-buttons a,.save-bar a,.product-store-list a) {border:0;border-radius:999px;min-height:44px;background:rgba(242,242,242,.18);color:#595959;box-shadow:var(--detail-raised);font-weight:600;padding:.75rem 1rem;text-decoration:none}
.detail-panel .product-store-list a {border-radius:1.2rem;padding:1rem 1.15rem}
.detail-panel .detail-copy :is(button:not(.photo-gallery-card),.map-buttons a,.save-bar a,.product-store-list a):active {box-shadow:var(--detail-inset)}
.detail-panel .detail-copy :is(button[aria-pressed="true"],button[type="submit"],.primary-action) {background:var(--red);color:#fff;box-shadow:inset 1px 2px 3px rgba(80,0,20,.24),inset -1px -1px 2px rgba(255,170,180,.3)}
.detail-panel .detail-copy :is(button,a):focus-visible {outline:2px solid var(--red);outline-offset:4px}
.detail-panel .detail-copy button:disabled {opacity:.5;box-shadow:none;cursor:not-allowed}
.detail-panel .review-form {background:transparent;border:0;padding:.5rem 0;box-shadow:none;gap:1rem}
.detail-panel .review-form :is(input,select,textarea) {min-width:0;max-width:100%;min-height:44px;border:0;border-radius:999px;padding:.8rem 1rem;background:rgba(230,229,223,.18);color:#595959;box-shadow:var(--detail-inset);font-size:16px}
.detail-panel .review-form textarea {border-radius:1.25rem;min-height:8rem}
.detail-panel .review-form input[type="file"] {border-radius:1.15rem;font-size:.85rem}
.detail-panel .review-form input::file-selector-button {border:0;border-radius:999px;padding:.65rem .9rem;margin-right:.65rem;background:rgba(242,242,242,.3);color:#595959;box-shadow:var(--detail-raised)}
.detail-panel .detail-back-button {border:0;background:rgba(242,242,242,.85);color:#595959;box-shadow:var(--detail-raised)}
.detail-panel .detail-back-button:active {box-shadow:var(--detail-inset)}
.detail-panel :is(.detail-contact-bar,.map-buttons,.detail-actions) {gap:.8rem}
.detail-panel .detail-actions {padding:.5rem 0 1rem}
@media(max-width:380px) {
  .detail-panel .product-advice-grid {grid-template-columns:1fr}
  .detail-panel .map-buttons {display:flex;flex-wrap:wrap}
  .detail-panel .map-buttons a {flex:1 1 7rem;text-align:center}
}
.detail-panel .vote-row button[aria-pressed="true"] span {color:#fff}

.feedback-photo-field {display:grid;gap:.5rem;color:#595959;font-size:.85rem;font-weight:600}
.app-shell .review-form .feedback-photo-picker {position:relative;display:flex;align-items:center;min-height:52px;padding:.85rem 1rem;border-radius:999px;background:rgba(242,242,242,.18);box-shadow:var(--detail-raised);cursor:pointer;touch-action:manipulation;overflow:hidden}
.feedback-photo-picker [data-photo-filenames] {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
.app-shell .review-form .feedback-photo-picker input[type="file"] {position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;touch-action:manipulation}
.feedback-photo-picker:focus-within {outline:2px solid var(--red);outline-offset:3px}
.save-switch-thumb {transition:transform .2s ease}
.detail-save-switch {touch-action:pan-y}
.detail-save-switch.is-dragging .save-switch-thumb {transition:none}
@media(prefers-reduced-motion:reduce){.save-switch-thumb {transition:none}}

/* The document must not become a second scroller on mobile Safari. */
@media(max-width:739px){
 html {height:100%;overflow:hidden}
 body {position:fixed;inset:0;width:100%;height:100%;min-height:0;overflow:hidden}
 .app-shell {height:100dvh;max-height:100%;min-height:0}
}

.detail-save-row {gap:.75rem}
.detail-save-message {flex:1;min-width:0;padding-left:.3rem;color:#68635d;font-size:.85rem;font-weight:650;line-height:1.45;word-break:keep-all}
.detail-save-row .detail-save-switch {flex:0 0 84px}

/* Separate the detail heading from the save recommendation. */
.detail-panel .detail-save-row + .detail-copy {padding-top:.65rem}
.detail-save-message {font-size:1rem;font-weight:700}

.detail-save-message {display:flex;align-items:center;min-height:44px;margin:0;line-height:1.3}

.detail-save-row {border-bottom:1px solid rgba(105,101,94,.2);padding-bottom:.5rem}

/* Saved categories keep the account's raised pills and red selected state. */
.account-panel .saved-category-row {display:flex;gap:.65rem;overflow-x:auto;padding:.5rem .3rem .85rem;margin:-.5rem 0 .5rem;scrollbar-width:none;touch-action:pan-x;overscroll-behavior-x:contain}
.saved-category-row::-webkit-scrollbar {display:none}
.account-panel .saved-category-row button {flex:0 0 auto;min-height:44px;border:0;border-radius:999px;padding:.65rem 1rem;background:rgba(242,242,242,.18);color:#686868;font-size:.82rem;font-weight:600;box-shadow:var(--account-raised);white-space:nowrap}
.account-panel .saved-category-row button[aria-pressed="true"] {background:var(--red);color:#fff;box-shadow:inset 1px 2px 3px rgba(80,0,20,.24),inset -1px -1px 2px rgba(255,170,180,.3)}
.saved-category-row button span {margin-left:.2rem;font-size:.75rem}
.saved-category-row button:focus-visible {outline:2px solid var(--red);outline-offset:3px}

/* One shared shopping header keeps both modes on the same baseline. */
.shopping-header {padding:1.1rem 1.1rem 1rem;background:rgba(255,255,255,.96);border-bottom:1px solid rgba(105,101,94,.16);box-shadow:0 3px 8px rgba(65,59,43,.04)}
.shopping-heading-row {display:flex;align-items:center;justify-content:space-between;gap:.8rem;min-height:3.5rem}
.shopping-header h2 {margin:0;min-width:0;color:#595959;font-family:inherit;font-size:clamp(1.25rem,5.5vw,1.65rem);font-weight:700;line-height:1.3;letter-spacing:-.04em;word-break:keep-all}
.shopping-header p {margin:.55rem 0 0;color:#747166;font-size:.8rem;line-height:1.5}
.shopping-header .shopping-mode-button {width:44px;height:44px;flex:0 0 44px;border:0;color:#686868;background:rgba(242,242,242,.18);font-weight:650;box-shadow:2px 3px 7px rgba(71,68,56,.16),-2px -2px 5px rgba(255,255,255,.95),inset 0 1px 1px rgba(255,255,255,.85)}
.shopping-header .shopping-mode-button.is-active {color:#fff;background:var(--red);box-shadow:inset 1px 2px 3px rgba(80,0,20,.24),inset -1px -1px 2px rgba(255,170,180,.3)}
.shopping-header .shopping-mode-button:focus-visible {outline:2px solid var(--red);outline-offset:3px}
.shopping-scope-panel {padding-top:0}
.shopping-places-list {display:grid;gap:.78rem;padding:1rem .82rem 1.1rem}
.shopping-shelf > .empty-list {padding:1rem 1.1rem}

/* Shared photo → save → title spacing for place and product details. */
.detail-panel:has(> .detail-save-row) {--detail-section-gap:.5rem;gap:var(--detail-section-gap);padding:.8rem .8rem 1.5rem}
.detail-panel > :is(.detail-image,.product-detail-hero) {margin:0}
.detail-panel .product-detail-back {top:.9rem;left:.9rem}
.detail-panel .detail-copy > h1 {margin:0}

/* Isolate circular tab paint from the sliding panel layer on WebKit. */
.shopping-header {position:relative;z-index:1;isolation:isolate}
.shopping-header .shopping-mode-button {-webkit-appearance:none;appearance:none;transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;background-clip:padding-box}

.shopping-header .shopping-toggle {position:relative;display:block;flex:0 0 100px;width:100px;height:48px;padding:4px;border:0;border-radius:999px;background:rgba(220,219,212,.3);box-shadow:inset 2px 3px 6px rgba(71,68,56,.18),inset -2px -2px 5px rgba(255,255,255,.95);touch-action:pan-y;user-select:none;-webkit-appearance:none;appearance:none}
 .shopping-toggle-thumb {position:relative;z-index:1;display:block;width:40px;height:40px;border-radius:50%;background:var(--red);box-shadow:inset 1px 2px 3px rgba(80,0,20,.24),inset -1px -1px 2px rgba(255,170,180,.3);transform:translateX(0);transition:transform .2s ease;backface-visibility:hidden}
.shopping-toggle.is-places .shopping-toggle-thumb {transform:translateX(52px)}
.shopping-toggle-text {position:absolute;left:44px;top:0;width:52px;height:48px;display:grid;place-items:center;color:#686868;font-size:.8rem;font-weight:700;line-height:1}
.shopping-toggle.is-places .shopping-toggle-text {left:4px}
.shopping-toggle.is-dragging .shopping-toggle-thumb {transition:none}
.shopping-toggle:focus-visible {outline:2px solid var(--red);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.shopping-toggle-thumb{transition:none}}
/* Shopping switch uses the same recessed surface and raised knob as Save. */
.shopping-header .shopping-toggle {background:linear-gradient(135deg,#dedcdb 35%,#f8f6f1 100%);box-shadow:inset 4px 4px 5px rgba(42,39,38,.58),inset -4px -4px 6px rgba(255,255,255,.98)}
.shopping-toggle-thumb {box-shadow:-1px -1px 1px #fff,1px 2px 2.5px rgba(45,45,40,.38)}

/* Brand-red shopping track. */
.shopping-header .shopping-toggle {background:var(--red);box-shadow:inset 4px 4px 5px rgba(65,0,15,.48),inset -4px -4px 6px rgba(255,255,255,.35)}
.shopping-toggle-text {color:#fff}

.shopping-header .shopping-toggle-thumb {background:#fff}

/* Reserve the full title column before either shopping label is painted. */
.shopping-heading-row {display:grid;grid-template-columns:minmax(0,1fr) 100px}
.shopping-header h2 {width:100%;overflow:visible;transform:translateZ(0);backface-visibility:hidden}

/* Vote summary is informational text, not an input surface. */
.detail-panel .vote-summary {background:transparent;border:0;border-radius:0;box-shadow:none;padding:.25rem 0 .6rem}
.detail-panel .vote-summary strong {font-size:1rem;line-height:1.5}

/* Consistent summary copy and large inline vote totals. */
.detail-panel .vote-summary {display:flex;flex-direction:column;align-items:flex-start;gap:.2rem}
.detail-panel .vote-summary :is(strong,span) {font-size:.9rem;line-height:1.6;font-weight:500;color:#747166}
.detail-panel .vote-row button {display:flex;align-items:center;justify-content:center;gap:.55rem}
.detail-panel .vote-row .vote-label {font-size:.85rem;line-height:1.4;font-weight:650;color:inherit}
.detail-panel .vote-row .vote-count {flex:0 0 auto;font-size:1.65rem;line-height:1;font-weight:800;font-variant-numeric:tabular-nums;color:inherit}
.visit-map-frame {display:block;width:100%;height:260px;margin:.85rem 0 1rem;border:0;border-radius:1.15rem;background:#eeede7}

/* Read-only community tally directly below the editorial review. */
.detail-panel .feedback-tally {margin:.85rem 0 1.2rem;padding:1rem 1.1rem;border-radius:1.2rem;background:#f6f4ed;box-shadow:3px 3px 8px rgba(86,80,66,.13),-3px -3px 8px rgba(255,255,255,.85)}
.feedback-tally h3 {margin:0 0 .8rem;font-size:.85rem;font-weight:650;color:#747166}
.feedback-tally-counts {display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.feedback-tally-counts p {display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:0;color:#68655f;font-size:.8rem;line-height:1.4}
.feedback-tally-counts p+p {border-left:1px solid rgba(105,101,94,.2);padding-left:1rem}
.feedback-tally-counts strong {font-size:1.8rem;line-height:1.1;font-weight:800;font-variant-numeric:tabular-nums;color:var(--red)}

.detail-title-row {display:flex;align-items:center;gap:1rem;width:100%;margin:0 0 .65rem}
.detail-title-row h1 {flex:1;min-width:0;margin:0}
.detail-overall-score {flex:none;margin-left:auto;text-align:right;font-size:1.8rem;font-weight:800;line-height:1.2;color:var(--red);font-variant-numeric:tabular-nums}
.detail-contact-bar + .rating-box {margin-top:.8rem}

/* Slightly deepen recessed detail surfaces while keeping the warm ivory tone. */
.detail-panel :is(.must-try-box,.must-try-item),
.detail-panel .review-form :is(input:not([type="hidden"]):not([type="file"]),select,textarea) {background:rgba(224,222,214,.32)}

.feedback-identity {display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.65rem}
.feedback-avatar {display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:50%;overflow:hidden;background:#e8e5dc;box-shadow:1px 2px 4px #47443826,-1px -1px 3px #fff}
.feedback-avatar img {display:block;width:100%;height:100%;object-fit:cover}
.feedback-avatar svg {width:24px;height:24px;fill:none;stroke:#858076;stroke-width:1.5}

.reward-intro {font-size:.85rem;line-height:1.8;color:#747166;margin:.75rem 0 1.25rem}
.reward-gift-locked .reward-gift-icon {font-size:1.7rem;font-weight:750;color:#8a867c}

.recommendations-view {display:grid;gap:1rem}
.recommendation-card {padding:1rem;border-radius:1.2rem;box-shadow:var(--account-raised);margin:.5rem 0}
.recommendation-card header {display:flex;justify-content:space-between;gap:.7rem}
.recommendation-card p,.recommendation-card summary {font-size:.85rem;line-height:1.7;overflow-wrap:anywhere}
.recommendation-card header span {font-size:.75rem;color:var(--red)}
.recommendation-copy {white-space:pre-wrap}
.recommendation-photos {display:flex;gap:.5rem;flex-wrap:wrap}
.recommendation-photos img {width:80px;height:80px;object-fit:cover;border-radius:.75rem}
.recommendation-ratings {display:flex;gap:.6rem;flex-wrap:wrap;font-size:.8rem}
.rating-slider-controls {display:flex;align-items:center;gap:.6rem;color:var(--red)}
.rating-slider-controls output {min-width:3.5rem;text-align:right;font-size:.85rem;font-variant-numeric:tabular-nums}
.app-shell .rating-slider-controls input[type="range"] {width:100%;min-width:0;min-height:44px;margin:0;padding:0;box-shadow:none;background:transparent;accent-color:var(--red);border:0;cursor:pointer}
.account-menu .recommendation-entry {width:100%;border-radius:999px;min-height:48px;font-weight:700;box-shadow:var(--account-raised)}

.account-feedback article {display:flow-root}
.account-feedback [data-own-feedback-edit-open] {float:right;display:block;margin:.5rem 0 0 auto;min-width:64px}
.consumer-reviews-entry {display:block;width:100%;min-height:46px;border:0;border-radius:999px;background:#f6f4ed;box-shadow:var(--detail-raised);color:#68655f;font:inherit;font-size:.9rem;font-weight:650;margin:-.4rem 0 1.2rem}
.consumer-reviews-page {padding:1rem!important}
.consumer-review-list {display:grid;gap:1rem}
.consumer-review-card {border:0!important;border-radius:1.2rem;padding:1rem;background:#f6f4ed;box-shadow:var(--detail-raised)}
.consumer-review-card p {white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7}
.consumer-review-verdict {font-size:.8rem;color:var(--red);font-weight:650}
.consumer-review-photos {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.consumer-review-photos img {display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:.7rem}

/* v145: editorial decision facts; no date or interactive appearance. */
.detail-panel .decision-guide {margin:.9rem 0 1.2rem;padding:.2rem 1rem;border-radius:1.15rem;background:rgba(224,222,214,.32);box-shadow:inset 2px 2px 5px rgba(86,80,66,.09),inset -2px -2px 5px rgba(255,255,255,.78)}
.detail-panel .decision-guide dl {margin:0}
.detail-panel .decision-guide dl>div {display:grid;grid-template-columns:5.3rem minmax(0,1fr);gap:.6rem;padding:.85rem 0;align-items:start}
.detail-panel .decision-guide dl>div+div {border-top:1px solid rgba(105,101,94,.13)}
.detail-panel .decision-guide dt {font-size:.84rem;font-weight:700;line-height:1.65;color:#68655f}
.detail-panel .decision-guide dd {margin:0;font-size:.86rem;font-weight:500;line-height:1.65;color:#58564f;overflow-wrap:anywhere;white-space:pre-wrap}
.detail-panel .decision-guide dd.is-pending {color:#827e74;font-weight:400}
@media(max-width:360px){.detail-panel .decision-guide dl>div{grid-template-columns:4.8rem minmax(0,1fr);gap:.4rem}}

/* Approved comparison preview, 2026-09-18. */
.skip-alternatives{margin:1rem 0;padding:1rem;border-radius:1.2rem;background:rgba(246,244,237,.35);box-shadow:3px 4px 8px #47443824,-3px -3px 6px #fffffff0}
.skip-alternatives h2{font-size:1.05rem;margin:0 0 .7rem}.skip-alternatives h3{font-size:1.05rem;margin:.3rem 0}.skip-alternatives p,.skip-alternatives small{font-size:.85rem;line-height:1.7}.skip-alternatives article+article{margin-top:1rem;padding-top:1rem;border-top:1px solid #69655e22}
.skip-alternatives button,.saved-destination-actions :is(button,a){display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.65rem 1rem;border:0;border-radius:999px;background:rgba(242,242,242,.3);color:#68655f;font:inherit;font-size:.85rem;font-weight:650;text-decoration:none;box-shadow:2px 3px 7px #47443829,-2px -2px 5px #fffffff2}
.account-panel .account-saved .saved-destination{margin:1rem 0;padding:1rem;border:0;border-radius:1.2rem;background:rgba(246,244,237,.35);box-shadow:3px 4px 8px #47443824,-3px -3px 6px #fffffff0}
.saved-destination p{margin:0;font-size:.85rem;line-height:1.6;overflow-wrap:anywhere}.saved-address{color:#827d72}.saved-destination-actions{display:flex;flex-wrap:wrap;gap:.6rem}.saved-destination-actions>*{flex:1}.skip-alternatives button:active,.saved-destination-actions :is(button,a):active{box-shadow:inset 2px 2px 5px #56504224,inset -2px -2px 5px #fff}

/* Supplied 3968×977 shelf. Preserve the original wooden top contact line. */
.shelf-plank { margin-bottom: 4.20363%; }
.shelf-stage::after { margin-bottom: 4.20363%; }
.product-detail-shelf { margin-top: -2.92339%; }

/* Requested product lift: shopping shelf and product detail, 3 CSS px. */
.shopping-shelf { --shelf-photo-lift: 3px; }
.product-detail-photo { transform: translate(-50%, calc(var(--detail-canvas-height) * 0.8 * var(--detail-photo-bottom-padding, 0) + 2px)); }

/* Align skincare visible bottoms using the same source-canvas baseline as all products. */
.shelf-stage-product[data-product="skin-genabelle-pdrn"] { --shelf-photo-bottom-correction: calc(var(--shelf-photo-height) * 110 / 1000); }
.shelf-stage-product[data-product="skin-dr-reju-all-cream"] { --shelf-photo-bottom-correction: calc(var(--shelf-photo-height) * 109 / 1000); }
.shelf-stage-product[data-product="skin-zeroid-intensive"] { --shelf-photo-bottom-correction: calc(var(--shelf-photo-height) * 108 / 1000); }
.shelf-stage-product[data-product="skin-demaf-first-serum"] { --shelf-photo-bottom-correction: calc(var(--shelf-photo-height) * 111 / 1000); }
.shelf-stage-product[data-product="skin-heveblue-eye-cream"] { --shelf-photo-bottom-correction: calc(var(--shelf-photo-height) * 110 / 1000); }

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

.shelf-stage-product[data-product="skin-107-double-layer"] { --shelf-photo-bottom-correction: calc(var(--shelf-photo-height) * 113 / 1000); }
.shelf-horizontal-scroll {position:absolute;inset:0;overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y;scrollbar-width:thin;z-index:2;}
.shelf-horizontal-content {position:relative;height:100%;width:max(100%,calc(var(--shelf-item-count) * 33.333333%));}
.shelf-horizontal-scroll .shelf-stage-product {touch-action:pan-x pan-y;}
.shelf-horizontal-scroll .shelf-stage-prices {z-index:5;}
.shelf-stage::after {pointer-events:none;}

.shelf-horizontal-scroll { scrollbar-width:none; }
.shelf-horizontal-scroll::-webkit-scrollbar {display:none;}

/* Scroll the shelf grain with products, keeping its original height and contact line. */
.shelf-stage { container-type:inline-size; }
.shelf-stage::after { display:none; }
.shelf-horizontal-content::after { content:"";position:absolute;left:0;right:0;bottom:calc(-25px + 4.20363cqw);height:30.24194cqw;background:url("./assets/products/shelf-current.png?v=20260918-shelf-153") center bottom / 120% 29.54637cqw no-repeat;z-index:4;pointer-events:none; }
.shelf-horizontal-content > .shelf-plank {display:none;}

/* Extend the continuous plank beyond both scroll ends; suppress horizontal rubber-banding. */
.shelf-horizontal-scroll { overscroll-behavior-x:none; }
.shelf-horizontal-content::after { left:-100cqw; right:-100cqw; background-size:120% 29.54637cqw; }

.shelf-horizontal-content { overflow:hidden; }

/* Skincare shows four full products and a partial fifth; other shelves retain three. */
.shelf-category[aria-label="스킨케어 제품"] .shelf-horizontal-content { width:max(100%,calc(var(--shelf-item-count) * 22.3%)); }

.shelf-stage-product[data-product="innerbeauty-hanega-black-vinegar-ginseng"] { --shelf-photo-bottom-correction: calc(var(--shelf-photo-height) * 111 / 1000); }

/* Transparent image canvases overlap narrow slots; hit-test the product button only. */
.shelf-stage-product > img, .shelf-stage-product > .product-object { pointer-events:none; }
/* Product feedback reuses the place review controls. Keep the unselected label intact. */
.product-detail-panel .rating-slider-controls output,
.own-feedback-editor .rating-slider-controls output {min-width:6.5rem;white-space:nowrap;text-align:left}
.product-purchase {margin:1rem 0 1.5rem;display:grid;gap:.75rem}
.purchase-price {display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem}
.purchase-price strong {font-size:1.5rem;color:var(--red)}
.purchase-price span {color:#6b6965;font-size:.9rem}
.product-purchase .full {display:flex;justify-content:center;text-align:center;text-decoration:none;width:100%;box-sizing:border-box}
.purchase-request>summary {list-style:none;cursor:pointer;text-align:center;display:block;padding:1rem;border-radius:999px}
.purchase-request>summary::-webkit-details-marker {display:none}
.purchase-request[open]>.review-form {margin-top:1rem}
.purchase-dates {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;min-width:0}
.purchase-dates>label {min-width:0;overflow:hidden}
.purchase-dates input {min-width:0;width:100%;box-sizing:border-box}
.purchase-fee {font-size:.9rem;line-height:1.6;margin:0}
.purchase-consent {display:flex!important;align-items:flex-start;gap:.6rem;font-size:.85rem!important;line-height:1.6}
.purchase-consent input {width:20px!important;min-height:20px!important;flex:none;accent-color:var(--red)}
.purchase-history .reward-order {overflow-wrap:anywhere}
.commerce-orders {display:grid;gap:28px;padding:18px 8px}
.commerce-panel {min-width:0;padding:24px;border-radius:30px;background:#f3f0e8;color:#56554f;box-shadow:7px 7px 18px #d8d4ca,-7px -7px 18px #fffef8;overflow-wrap:anywhere}
.commerce-panel h3 {font-size:19px;margin:12px 0}
.commerce-panel p {margin:10px 0;line-height:1.6}
.commerce-inset {background:#eae6dc;border-radius:20px;padding:18px;box-shadow:inset 3px 3px 7px #d1cdc4,inset -3px -3px 7px #fffaf0;margin:18px 0}
.commerce-line {display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:7px 0}
.commerce-total {border-top:1px solid #d0ccc3;margin-top:14px;padding-top:16px;font-size:20px;font-weight:750}
.commerce-total strong,.commerce-status {color:#cd0034}
.commerce-status {font-size:13px;font-weight:650}
.commerce-tabs {display:flex;gap:14px;margin:22px 0}
.commerce-panel .commerce-pill {border:0;border-radius:100px;padding:12px 18px;background:#f3f0e8;box-shadow:3px 4px 7px #d0cdc4,-3px -3px 7px #fff;color:#5c5953;font:inherit;font-weight:650;cursor:pointer;min-height:44px}
.commerce-panel .commerce-pill.active,.commerce-panel .commerce-primary {background:#cd0034;color:white;box-shadow:inset 3px 3px 7px #960027,inset -2px -2px 6px #ef728c}
.commerce-panel .commerce-primary {width:100%;margin:16px 0}
.commerce-panel button:disabled {opacity:.55;cursor:not-allowed}
.commerce-panel label {display:block;margin:14px 0}
.commerce-panel input:not([type=checkbox]),.commerce-panel textarea {display:block;box-sizing:border-box;width:100%;min-width:0;border:0;border-radius:25px;padding:13px 17px;margin-top:8px;background:#eae6dc;box-shadow:inset 2px 2px 5px #ccc9c1,inset -2px -2px 5px #fffaf1;font:inherit;color:#555}
.commerce-panel input[type=range] {padding:0;box-shadow:none;accent-color:#cd0034;min-height:44px}
.commerce-panel :is(input,button,textarea):focus-visible {outline:2px solid #cd0034;outline-offset:3px}
.commerce-panel [hidden] {display:none!important}
.commerce-progress {list-style:none;padding:0;display:flex;justify-content:space-between;gap:6px;font-size:12px}
.commerce-progress li {border-bottom:3px solid #d4d0c7;padding:8px 2px}
.commerce-progress li.on {border-color:#cd0034;color:#cd0034;font-weight:700}
.commerce-history {margin-top:24px;font-size:13px}
.commerce-history summary {cursor:pointer;padding:12px 0}
.commerce-quote-form {border-top:1px solid #d0ccc3;margin-top:22px;padding-top:12px}
@media(max-width:480px){.commerce-panel{padding:18px}.commerce-line{gap:10px;font-size:14px}.commerce-total{font-size:18px}.commerce-tabs{gap:12px}.commerce-inset{padding:14px}}

/* Native iOS date controls need a full row on phone screens. */
@media (max-width:480px) {
 .purchase-dates {grid-template-columns:minmax(0,1fr);gap:1rem}
}

.purchase-delivery {margin:0;font-size:.9rem;line-height:1.7}
.purchase-delivery strong {display:block}

.purchase-delivery-fields {border:0;padding:0;margin:0;min-width:0}
.purchase-delivery-fields[hidden] {display:none!important}

.cart-page{position:absolute;inset:0;z-index:50;overflow:auto;overscroll-behavior:contain;padding:24px;box-sizing:border-box;background:#fff7e6;color:#56554f;text-align:left}
.cart-header,.cart-layout,.cart-steps{max-width:1060px;margin-left:auto;margin-right:auto}.cart-header{display:flex;align-items:center;gap:24px}.cart-header h1{font-size:25px}.cart-header h1 span{color:#cd0034}.cart-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:28px;padding:12px 6px 40px}.cart-steps{display:flex;list-style:none;gap:24px;padding:16px 0;font-size:13px;color:#99958b}.cart-steps .on{color:#cd0034;font-weight:750}.cart-summary{align-self:start;position:sticky;top:12px}.cart-item{display:grid;grid-template-columns:78px minmax(0,1fr);gap:16px;padding:24px 0;border-bottom:1px solid #dedad1}.cart-item>img{width:78px;height:118px;object-fit:contain;border-radius:18px;background:#eae6dc;box-shadow:inset 2px 2px 6px #d1cdc4,inset -2px -2px 5px #fffaf0}.cart-item-head,.cart-item-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px}.cart-item-head{align-items:start}.cart-item-head h3{font-size:16px;margin:0}.cart-item-head>strong{font-size:14px;text-align:right;flex-shrink:0}.cart-page small{display:block;font-size:11px;color:#77746c;font-weight:400}.cart-item-total{text-align:right;color:#cd0034;font-size:15px}.cart-counter{display:flex;gap:14px;align-items:center}.cart-counter .commerce-pill{width:36px;min-height:36px;padding:0}.cart-remove{display:block;margin:10px 0 0 auto;background:none;border:0;text-decoration:underline;font:inherit;font-size:12px;color:#8b877d}.cart-options{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}.cart-options .commerce-pill{padding:10px 14px;font-size:13px}.cart-layout>[hidden]{display:none!important}.cart-layout:has(.cart-items[hidden]){grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr)}.catalog-option{padding:15px 0;border-bottom:1px solid #d0ccc3}.product-cart-actions .commerce-pill,.cart-header .commerce-pill{border:0;border-radius:100px;padding:12px 18px;background:#f3f0e8;box-shadow:3px 4px 7px #d0cdc4,-3px -3px 7px #fff;color:#5c5953;font:inherit;cursor:pointer}.product-cart-actions .commerce-pill.active{background:#cd0034;color:white;box-shadow:inset 3px 3px 7px #960027,inset -2px -2px 6px #ef728c}.cart-shelf-link{margin:14px 20px}.cart-page button{cursor:pointer}.cart-page button:disabled{cursor:not-allowed;opacity:.5}
@media(max-width:760px){.cart-layout,.cart-layout:has(.cart-items[hidden]){grid-template-columns:1fr}.cart-summary{position:static}.cart-page{padding:18px 14px}.cart-header{gap:14px;align-items:start}.cart-header h1{font-size:20px}.cart-header .commerce-pill{font-size:13px}.cart-item{grid-template-columns:64px minmax(0,1fr);gap:12px}.cart-item>img{width:64px;height:105px}.cart-item-head{flex-wrap:wrap}.cart-item-head>strong{text-align:left}.cart-item-head h3{font-size:14px}}

.cart-example-notice{padding:14px;border-radius:16px;background:#eee6d6;color:#6d5540;font-size:13px;line-height:1.6}

.product-cart-actions{display:flex;flex-direction:column;gap:14px;margin:14px 0}.product-cart-actions>.full{margin:0;width:100%}

/* Reference pill: soft grey top, white lower rim, upper-left light. */
.shopping-shelf .cart-shelf-link {
 display:flex;align-items:center;justify-content:center;
 width:min(145px,calc(100% - 48px));min-height:48px;
 margin:18px auto 24px;padding:10px 12px;
 border:0;border-radius:999px;
 background:transparent;
 color:#595959;font-family:inherit;font-size:12px;font-weight:700;line-height:1.4;
 text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.8);
 box-shadow:-7px -7px 12px rgba(255,255,255,.95),7px 9px 11px rgba(65,65,65,.29),inset 0 2px 3px rgba(115,115,115,.13),inset 0 -2px 3px rgba(255,255,255,.98);
 cursor:pointer;
}
.shopping-shelf .cart-shelf-link:active {
 box-shadow:inset 3px 4px 7px rgba(80,80,80,.23),inset -3px -3px 6px rgba(255,255,255,.95);
}
.shopping-shelf .cart-shelf-link:focus-visible{outline:2px solid var(--red);outline-offset:6px}

/* Cart photo frame follows title, options and quantity rows; remove stays below. */
.cart-item{grid-template-columns:108px minmax(0,1fr);column-gap:16px;row-gap:0}
.cart-item>div:not(.cart-product-photo){display:contents}
.cart-item .cart-item-head{grid-column:2;grid-row:1}
.cart-item .cart-options,.cart-item>.field-note,.cart-item>div>.field-note{grid-column:2;grid-row:2}
.cart-item .cart-item-bottom{grid-column:2;grid-row:3}
.cart-item .cart-remove{grid-column:2;grid-row:4}
.cart-item .cart-product-photo{grid-column:1;grid-row:1/4;position:relative;align-self:stretch;overflow:hidden;border-radius:18px;background:#eae6dc;box-shadow:inset 2px 2px 6px #d1cdc4,inset -2px -2px 5px #fffaf0}
.cart-product-photo>img{position:absolute;width:150px;height:150px;max-width:none;object-fit:contain;left:50%;top:auto;bottom:15px;transform:translate(-50%,15px)}
@media(max-width:760px){.cart-item{grid-template-columns:96px minmax(0,1fr);column-gap:12px}}
.cart-item .cart-item-head{min-height:40px}
.cart-item>div>.field-note{min-height:48px;margin:12px 0}

.cart-window{position:relative;overflow:hidden}.cart-window .cart-page{z-index:1;background:transparent}
.cart-window .cart-layout,.cart-window .cart-layout:has(.cart-items[hidden]){grid-template-columns:minmax(0,1fr)}
.cart-window .cart-summary{position:static}
.cart-window .cart-page{padding:18px 14px}
.cart-window .cart-header{gap:12px;align-items:center}
.cart-window .cart-header h1{font-size:20px}
.cart-window .cart-header .commerce-pill{font-size:13px;padding:10px 14px;white-space:nowrap}
.cart-window .cart-item-head{flex-wrap:wrap}
.cart-window .cart-item-head>strong{text-align:left}
.cart-window .cart-item-head h3{font-size:14px}
.cart-window .cart-item{grid-template-columns:96px minmax(0,1fr);column-gap:12px}
.cart-window .cart-item-bottom{flex-wrap:wrap}

/* Approved delivery selector: shared by cart and product request forms. */
.delivery-picker{position:relative;min-width:0}.delivery-picker-label{display:block;font-size:14px;font-weight:700;margin-bottom:12px}.delivery-picker summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:17px 20px;border-radius:30px;background:linear-gradient(#e7e5df,#f9f8f3);box-shadow:5px 5px 10px #ceccc580,-5px -5px 10px #ffffffb3;color:#66675e;cursor:pointer;font-size:15px;font-weight:700}.delivery-picker summary::-webkit-details-marker{display:none}.delivery-chevron{width:9px;height:9px;flex-shrink:0;border-right:2px solid #77786e;border-bottom:2px solid #77786e;transform:rotate(45deg)}.delivery-picker details[open] .delivery-chevron{transform:rotate(225deg)}.delivery-choices{padding:9px;margin-top:14px;border-radius:26px;background:#e4e2da;box-shadow:inset 2px 2px 5px #cfcdc4,inset -2px -2px 5px #fff}.delivery-choices button{width:100%;border:0;background:transparent;text-align:left;border-radius:20px;padding:16px;color:#66675e;display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer}.delivery-choices strong{font-size:15px}.delivery-choices small{display:block;font-size:12px;margin-top:6px}.delivery-choices button[aria-pressed="true"]{background:#ce0034;color:#fff;box-shadow:inset 2px 3px 6px #970329,inset -2px -2px 5px #eb7793}.delivery-check{visibility:hidden}.delivery-choices button[aria-pressed="true"] .delivery-check{visibility:visible}.delivery-picker summary:focus-visible,.delivery-choices button:focus-visible{outline:2px solid #ce0034;outline-offset:3px}

.product-admin>summary{font-size:19px;font-weight:800}.product-admin input:not([type=checkbox]):not([type=file]),.product-admin textarea{width:100%;border:0;border-radius:20px;padding:14px;background:#e9e6dd;box-shadow:inset 2px 2px 5px #cecbc1,inset -2px -2px 5px white;color:#62635c}.product-admin>input{margin-top:18px}.catalog-filters{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.catalog-products>details>summary{cursor:pointer;line-height:1.6;font-weight:700}.catalog-products>details>summary small{display:block;font-weight:400}.catalog-products>details{margin:16px 0}.catalog-photo{display:flex;align-items:center;gap:16px}.catalog-photo img{width:95px;height:120px;object-fit:contain}.catalog-photo label{min-width:0}.catalog-photo input{max-width:100%}.catalog-store{padding:12px 0;border-bottom:1px solid #d5d2c9}.product-admin textarea{min-height:95px}.catalog-filters .active{background:#ce0034;color:white}
.product-admin button.commerce-pill{border:0;border-radius:24px;padding:12px 18px;background:linear-gradient(#e8e6df,#faf9f4);box-shadow:3px 4px 7px #cfccc2,-3px -3px 7px #fff;color:#62635c;cursor:pointer}.product-admin button.active,.product-admin button.commerce-primary{background:#ce0034;color:white;box-shadow:inset 2px 3px 6px #9a0027,inset -2px -2px 6px #ea7492}

.place-related-options{max-height:260px;overflow:auto}.place-related-options label{display:flex;gap:12px;align-items:center}.place-related-options input[type=checkbox]{width:auto}.place-related-options [hidden]{display:none!important}[data-place-extras] .commerce-panel{margin:16px 0}

.place-manager>input{width:100%;border:0;border-radius:24px;padding:16px;background:#e8e5dc;box-shadow:inset 2px 2px 5px #cbc8bf,inset -2px -2px 6px white;font:inherit}.place-manager-filters{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.place-manager-filters button,.place-manager-card{border:0;border-radius:24px;padding:13px 20px;background:linear-gradient(#e8e6df,#faf9f4);box-shadow:4px 5px 10px #d1cec4,-4px -4px 9px white;color:#62635c;cursor:pointer;font:inherit}.place-manager-filters button.active{background:#ce0034;color:white;box-shadow:inset 2px 3px 6px #980026,inset -2px -2px 5px #eb7895}.place-manager-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}.place-manager-card{display:flex;flex-direction:column;gap:12px;align-items:stretch;text-align:left;min-height:180px;padding:22px;border-radius:28px}.place-manager-card strong{font-size:20px}.place-manager-card>span{font-size:13px}.place-manager-card-top,.place-manager-card-foot{display:flex;justify-content:space-between;gap:8px}.place-manager-card-top .go{color:#ce0034;font-weight:800}.place-manager-card-foot{margin-top:auto;color:#86867c}.place-manager [hidden]{display:none!important}@media(max-width:720px){.place-manager-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.place-manager-card{padding:18px}.place-manager-card strong{font-size:18px}}@media(max-width:360px){.place-manager-grid{grid-template-columns:1fr}}

/* Account management actions share the product-management surface and rhythm. */
.account-panel .account-management-action{display:block;width:100%;box-sizing:border-box;margin:1.25rem 0;padding:1rem;min-height:3.8rem;border:0;border-radius:1.1rem;background:rgba(242,242,242,.16);color:inherit;box-shadow:var(--account-raised);text-align:left;font-family:inherit;font-size:.84rem;font-weight:650;line-height:1.8rem;}
.account-panel .product-admin>summary{color:inherit;font-family:inherit;line-height:1.8rem;}
.account-back{display:block;margin:0 0 1rem;padding:.6rem 1rem;border:0;border-radius:999px;background:rgba(242,242,242,.16);color:#686868;font:inherit;font-size:.84rem;box-shadow:var(--account-raised);}
.account-slide-forward{animation:account-enter-right .24s ease-out;}
.account-slide-back{animation:account-return-left .24s ease-out;}
@keyframes account-enter-right{from{opacity:.5;translate:-28px 0}to{opacity:1;translate:0 0}}
@keyframes account-return-left{from{opacity:.5;translate:28px 0}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.account-slide-forward,.account-slide-back{animation:none;}}

.account-panel .account-management-action{font-size:19px;font-weight:800;}
.account-panel .account-management-action::before{content:"▶";font-size:.75em;display:inline-block;margin-right:.55em;}

.account-dragging{animation:none!important;transition:none!important;will-change:translate;user-select:none;}

.has-floating-back{padding-bottom:100px!important;scroll-padding-bottom:100px;}
.has-floating-back>.account-back,.has-floating-back>.login-back-button{display:none;}
.account-floating-back{position:fixed;z-index:10000;width:58px;height:58px;display:grid;place-items:center;padding:0;border:1px solid #ffffff52;border-radius:50%;background:linear-gradient(145deg,#dd1244,#c90032 62%,#ad002a);color:#fff;box-shadow:5px 6px 12px #4b23254d,-3px -3px 8px #ffffffe6,inset 1px 2px 3px #ffffff4d,inset -2px -2px 4px #6400183d;cursor:pointer;touch-action:manipulation;}
.account-floating-back svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.account-floating-back:active{box-shadow:inset 3px 3px 6px #79002380,inset -2px -2px 4px #ff668755;}
.account-floating-back:focus-visible{outline:3px solid var(--red);outline-offset:4px;}

.account-floating-back{width:48px;height:48px;}
.account-floating-back svg{width:23px;height:23px;}
/* Identical typography and disclosure spacing across top-level account management. */
.account-panel .account-management-action,
.account-panel .product-admin>summary,
.account-panel .purchase-history>summary{display:flex;align-items:center;gap:10px;font-family:"Pretendard Variable",Pretendard,sans-serif;font-size:19px;font-weight:800;font-style:normal;line-height:1.8rem;letter-spacing:0;text-align:left;color:inherit;}
.account-panel .product-admin>summary,
.account-panel .purchase-history>summary{list-style:none;}
.account-panel .product-admin>summary::-webkit-details-marker,
.account-panel .purchase-history>summary::-webkit-details-marker{display:none;}
.account-panel .account-management-action::before,
.account-panel .product-admin>summary::before,
.account-panel .purchase-history>summary::before{content:"";display:block;flex:0 0 10px;width:10px;height:12px;margin:0;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);}
.account-panel .product-admin[open]>summary::before,
.account-panel .purchase-history[open]>summary::before{transform:rotate(90deg);}
/* MD lookup follows the account's ivory inset field and red raised pill. */
.account-panel .md-management [data-member-search]{display:grid;gap:16px;margin:20px 0;}
.account-panel .md-management [data-member-search] label{display:grid;gap:10px;font-size:15px;font-weight:650;}
.account-panel .md-management [data-member-search] input[type=email]{box-sizing:border-box;width:100%;min-width:0;min-height:60px;padding:18px 20px;border:1px solid rgba(255,255,255,.45);border-radius:22px;background:#e8e5dc;color:#595959;font-family:inherit;font-size:17px;line-height:1.4;box-shadow:inset 3px 3px 7px #c8c4b980,inset -3px -3px 7px #fffdf7;}
.account-panel .md-management [data-member-search] input::placeholder{color:#89867f;font-size:16px;}
.account-panel .md-management [data-member-search] button{width:100%;min-height:52px;padding:14px 24px;border:1px solid #ffffff40;border-radius:999px;background:linear-gradient(145deg,#dd1244,#c90032 62%,#ad002a);color:#fff;font-family:inherit;font-size:17px;font-weight:750;letter-spacing:0;box-shadow:4px 5px 10px #4b232530,-3px -3px 7px #ffffffe6,inset 1px 2px 3px #ffffff40,inset -2px -2px 4px #64001835;cursor:pointer;}
.account-panel .md-management [data-member-search] button:active{box-shadow:inset 3px 3px 6px #79002380,inset -2px -2px 4px #ff668755;}
.account-panel .md-management [data-member-search] button:disabled{opacity:.6;cursor:wait;}
.account-panel .md-management [data-member-search] :is(input,button):focus-visible{outline:2px solid var(--red);outline-offset:4px;}
/* Management area: separate from personal account actions. */
.account-panel .management-zone{border:2px dashed #aaa397;border-radius:28px;padding:22px 18px 26px;margin:24px 0 30px;background:#e7e2d8;}
.management-zone>h3{margin:0 0 20px;color:#777066;font-size:15px;font-weight:750;}
.account-panel .management-zone>.account-management-action,.account-panel .management-zone>.product-admin,.account-panel .management-zone>.purchase-history{background:#ded9cd;box-shadow:4px 4px 9px #bbb5a980,-4px -4px 9px #fffdf3b3;}
.admin-overlay{background:rgba(55,51,44,.28);backdrop-filter:blur(12px);}
.admin-overlay .admin-panel{background:#eeeae0;color:#595959;border:1px solid #fff9;border-radius:32px;font-family:inherit;box-shadow:12px 16px 40px #514b4226,inset 1px 1px 0 #fff;}
.admin-panel .admin-hero{background:none;border:0;color:#595959;padding:16px 0 24px;}
.admin-panel .admin-hero>span{display:none;}
.admin-panel .admin-hero h2{font-size:27px;font-weight:800;letter-spacing:-.7px;color:#595959;}
.admin-panel .admin-hero p{color:#817b72;line-height:1.7;}
.admin-panel .admin-stats article,.admin-panel .admin-section{background:#e8e3d9;border:1px solid #ffffff80;border-radius:22px;box-shadow:inset 2px 2px 6px #bdb6aa45,inset -2px -2px 6px #fffdf5;}
.admin-panel .admin-stats strong{color:#c90032;}
.admin-panel .admin-section{padding:20px;margin-top:22px;}
.admin-panel .primary-action,.admin-panel .admin-approval-list button{border-radius:999px;background:#ded9cd;color:#595959;border:1px solid #fff7;box-shadow:3px 4px 8px #b7afa25c,-3px -3px 8px #fffdf3;}
.admin-panel .primary-action{min-height:50px;font-weight:750;}
@media(max-width:600px){.account-panel .management-zone{padding:20px 14px;}.admin-overlay .admin-panel{border-radius:26px;}.admin-panel .admin-section{padding:16px;}}
/* Place editor shares the approved product-editor surface and controls. */
.managed-edit-page{background:#eeeae0;color:#595959;}
.managed-edit-page .managed-edit-card{width:min(100%,48rem);padding:26px 22px 100px;border:1px solid #ffffff99;border-radius:30px;background:#eeeae0;box-shadow:8px 10px 24px #bdb7aa55,inset 1px 1px 0 #fff;}
.managed-edit-card>.login-eyebrow{display:none;}
.managed-edit-page h1{font-size:27px;font-weight:800;color:#595959;letter-spacing:-.7px;}
.managed-edit-card>p{color:#817b72;font-size:15px;line-height:1.7;}
.managed-edit-card .managed-place-form{gap:20px 16px;}
.managed-edit-card .managed-place-form label{font-size:14px;font-weight:700;color:#68665f;gap:9px;}
.managed-edit-card .managed-place-form input:not([type=checkbox]):not([type=file]),.managed-edit-card .managed-place-form select,.managed-edit-card .managed-place-form textarea{min-height:48px;padding:14px;border:0;border-radius:20px;background:#e9e6dd;box-shadow:inset 2px 2px 5px #cecbc1,inset -2px -2px 5px white;color:#62635c;font-family:inherit;font-size:16px;line-height:1.5;}
.managed-edit-card .managed-place-form textarea{min-height:110px;}
.managed-edit-card .managed-place-form :is(input,select,textarea,button):focus-visible{outline:2px solid var(--red);outline-offset:3px;}
.managed-edit-card .managed-place-form button{min-height:46px;padding:12px 18px;border:1px solid #ffffff80;border-radius:999px;background:#ded9cd;color:#595959;font:inherit;font-weight:750;box-shadow:3px 4px 8px #b7afa25c,-3px -3px 8px #fffdf3;}
.managed-edit-card .managed-place-form .primary-action{background:linear-gradient(145deg,#dd1244,#c90032 62%,#ad002a);color:#fff;}
.managed-edit-card [data-place-extras]{padding:20px;border-radius:22px;background:#e8e3d9;box-shadow:inset 2px 2px 6px #bdb6aa45,inset -2px -2px 6px #fffdf5;}
.managed-edit-card .approval-preview-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;}
@media(max-width:600px){.managed-edit-page .managed-edit-card{padding:22px 16px 100px;border-radius:26px;}.managed-edit-card .approval-preview-actions button{flex:1 1 100%;}}

.registered-admins{display:grid;gap:14px;margin:20px 0 28px}.registered-admin-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:7px;width:100%;padding:20px 42px 20px 20px;border:1px solid #fff9;border-radius:23px;background:#e5e0d5;color:#595959;box-shadow:5px 5px 12px #bcb7ad66,-5px -5px 12px #fff9;text-align:left;cursor:pointer}.registered-admin-card strong{font-size:17px}.registered-admin-card span{font-size:14px;overflow-wrap:anywhere}.registered-admin-card small{font-size:13px}.registered-admin-card b{position:absolute;right:20px;top:40%;font-size:24px}.registered-admin-card:focus-visible{outline:2px solid #c90035;outline-offset:3px}

/* Account-style category rail; approved sliding menu. */
.app-shell .category-row{width:calc(100% - 24px);margin:4px 12px;gap:.4rem;padding:.4rem;border-radius:999px;background:rgba(220,219,212,.3);box-shadow:inset 2px 3px 6px rgba(71,68,56,.13),inset -2px -2px 5px rgba(255,255,255,.95);overflow-x:auto;scrollbar-width:none}
.app-shell .category-row .category-button{flex:0 0 auto;min-height:42px;padding:8px 16px;border:0;border-radius:999px;background:transparent;color:#686868;box-shadow:none;text-shadow:none;font-weight:600}
.app-shell .category-row .category-button.is-active{background:var(--red);color:#fff;box-shadow:inset 1px 2px 3px rgba(80,0,20,.24),inset -1px -1px 2px rgba(255,170,180,.3)}
.app-shell .category-row .category-button:not(.is-active):hover{background:transparent}


/* One contact line for plank and alpha-corrected product bottoms at every width.
   Shelf source 3968x977: wood begins at y=269, leaving 708px below it. */
.shelf-stage{--shelf-rendered-height:29.54637cqw;--shelf-rendered-bottom:calc(-25px + 4.20363cqw);--shelf-contact-bottom:calc(var(--shelf-rendered-bottom) + var(--shelf-rendered-height) * 708 / 977);--shelf-product-bottom:calc(var(--shelf-contact-bottom) - 3px - var(--shelf-photo-lift))}
.shelf-horizontal-content::after{bottom:var(--shelf-rendered-bottom);background-size:120% var(--shelf-rendered-height)}

/* Detail uses the same source contact line and 3px overlap as the list. */
.product-detail-shelf-stage{aspect-ratio:3968 / 977}
.product-detail-shelf{margin-top:0}
.product-detail-photo{top:calc(100% * 269 / 977);bottom:auto;transform:translate(-50%,calc(-100% + var(--detail-canvas-height) * 0.8 * var(--detail-photo-bottom-padding,0) + 3px))}

/* Approved deeper inset on selected main category. */
.app-shell .category-row .category-button.is-active{box-shadow:inset 3px 5px 8px rgba(75,0,19,.58),inset -2px -3px 5px rgba(255,151,175,.35),inset 0 1px 2px rgba(62,0,16,.45)}



/* Product and place management share the same card surface. */
.catalog-products.place-manager-grid>details{margin:0;min-width:0}
.catalog-products>details>summary.place-manager-card{font-weight:400;line-height:normal;list-style:none}
.catalog-products>details>summary::-webkit-details-marker{display:none}
.catalog-products>details[open]{grid-column:1/-1}
.catalog-products>details[open]>summary.place-manager-card{min-height:0;margin-bottom:20px}
.catalog-products>details[hidden]{display:none!important}

.catalog-products>details:not([open])>summary.place-manager-card{height:100%;box-sizing:border-box}

/* Shared editor spacing: nested field groups must participate in layout. */
.managed-place-form,
.product-admin [data-catalog-form]{min-width:0;gap:20px 16px;}
.managed-place-form :is(input,select,textarea),
.product-admin :is(input,select,textarea){box-sizing:border-box;max-width:100%;min-width:0;}
.managed-place-form :is([data-place-extras],[data-place-menus],[data-place-gallery-list],[data-place-menu],[data-place-gallery]),
.product-admin :is([data-catalog-options],[data-catalog-stores],[data-catalog-row],[data-catalog-store]){display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0;}
.managed-place-form [data-place-extras]{grid-column:1/-1;}
.managed-place-form [data-place-extras]>:is(h3,p),
.product-admin [data-catalog-form]>:is(h4,p){margin:0;}
.managed-place-form [data-place-extras]>h3:not(:first-child){margin-top:12px;}
.managed-place-form :is([data-place-menus],[data-place-gallery-list]):empty,
.product-admin :is([data-catalog-options],[data-catalog-stores]):empty{display:none;}
.product-admin [data-catalog-form] label{min-width:0;gap:9px;}
.product-admin .catalog-photo{display:grid;grid-template-columns:95px minmax(0,1fr);gap:16px;}
.managed-place-form input[type=file],.product-admin input[type=file]{width:100%;white-space:normal;overflow:hidden;}
.managed-place-form .place-related-options{display:grid;gap:12px;min-width:0;}
.managed-place-form .place-related-options label,
.product-admin [data-catalog-form] .purchase-consent{display:flex;align-items:flex-start;gap:10px;overflow-wrap:anywhere;}
.managed-place-form .place-related-options input[type=checkbox],
.product-admin [data-catalog-form] input[type=checkbox]{flex:0 0 20px;width:20px;height:20px;min-height:20px;margin:2px 0 0;padding:0;}
.managed-place-form .isolated-edit-actions{gap:16px;}
.managed-place-form button,.product-admin [data-catalog-form] button{max-width:100%;white-space:normal;overflow-wrap:anywhere;}
@media(max-width:600px){
 .managed-place-form{grid-template-columns:minmax(0,1fr);}
 .product-admin .catalog-photo{grid-template-columns:minmax(0,1fr);}
 .managed-edit-card [data-place-extras]{padding:16px;}
 .managed-place-form .isolated-edit-actions{grid-template-columns:minmax(0,1fr);}
}

.catalog-products>[data-catalog-product][hidden]{display:none!important}

/* Stable product management cards, regardless of product name length. */
.catalog-products>.place-manager-card{height:210px;min-height:210px;min-width:0;overflow:hidden;}
.catalog-products>.place-manager-card>strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;line-height:1.35;max-height:2.7em;min-height:2.7em;overflow-wrap:anywhere;}
.catalog-products>.place-manager-card>span:not(.place-manager-card-top):not(.place-manager-card-foot){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.product-manager>input{width:100%;margin:0;}

/* Full-width representative image in the product editor. */
.managed-edit-card.product-admin .catalog-photo{grid-template-columns:minmax(0,1fr);}
.managed-edit-card.product-admin .catalog-photo img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;}

/* Shared category selector: native radio state keeps save/reset and keyboard behavior. */
.app-shell .editor-category-field{min-width:0;width:100%;box-sizing:border-box;border:0;padding:0;margin:0;grid-column:1/-1}
.editor-category-field legend{padding:0;margin-bottom:10px;font:inherit;font-weight:650;color:#595959}
.app-shell .editor-category-rail{display:flex;gap:.4rem;width:100%;box-sizing:border-box;padding:.4rem;border-radius:999px;background:rgba(220,219,212,.3);box-shadow:inset 2px 3px 6px rgba(71,68,56,.13),inset -2px -2px 5px rgba(255,255,255,.95);overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x;scroll-padding:8px}
.editor-category-rail::-webkit-scrollbar{display:none}
.app-shell .editor-category-option{position:relative;display:block;flex:0 0 auto;margin:0;cursor:pointer;user-select:none}
.app-shell .editor-category-option input{position:absolute;width:1px;height:1px;opacity:0;padding:0;margin:0;pointer-events:none}
.app-shell .editor-category-option span{display:block;box-sizing:border-box;min-height:42px;padding:10px 16px;border-radius:999px;color:#686868;font-size:.8rem;font-weight:600;line-height:22px;white-space:nowrap}
.app-shell .editor-category-option input:checked+span{background:var(--red);color:#fff;box-shadow:inset 3px 5px 8px rgba(75,0,19,.58),inset -2px -3px 5px rgba(255,151,175,.35),inset 0 1px 2px rgba(62,0,16,.45)}
.editor-category-option input:focus-visible+span{outline:2px solid var(--red);outline-offset:-2px}
.editor-category-option input:disabled+span{opacity:.4;cursor:not-allowed}
.managed-edit-card .rating-slider-field [data-rating-clear]{justify-self:start;width:auto;margin-top:8px;font-size:.78rem;min-height:36px;padding:8px 14px}
.managed-edit-card .rating-slider-controls input[type="range"]{border:0;box-shadow:none;background:transparent;padding:0;min-width:0}

/* Editing forms must permit nested horizontal rails, not intersect them with pan-y. */
.app-shell .managed-edit-card .review-form,
.app-shell .managed-edit-card .managed-place-form,
.app-shell .member-form,
.app-shell .editor-category-field,
.app-shell .editor-category-rail,
.app-shell .editor-category-rail .editor-category-option{touch-action:pan-x pan-y pinch-zoom}

.product-request-management .product-request-card{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0}
.product-request-management .product-request-card>p{display:block;margin:0;overflow-wrap:anywhere}
.product-request-management .product-request-card>strong{overflow-wrap:anywhere}
.product-request-management .product-request-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:4px;min-width:0}
.product-request-management .product-request-actions>button{position:static;box-sizing:border-box;flex:1 1 160px;min-width:0;max-width:100%;min-height:44px;margin:0;white-space:normal;overflow-wrap:anywhere;line-height:1.45}
@media(max-width:600px){.product-request-management .product-request-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}.product-request-management .product-request-actions>button{width:100%}}

.app-shell button:is(.approval-primary,[data-approval-action="approve"],[data-approval-action="submit"],[data-product-request-approve],[data-product-proposal-edit],[data-revision-edit],[name="mode"][value="publish"]),
.app-shell .approval-preview-actions button[data-revision-edit]{background:linear-gradient(145deg,#dd1244,#c90032 62%,#ad002a);color:#fff;border-color:#d51946;box-shadow:inset 2px 3px 6px #9a0027,inset -2px -2px 6px #ea7492}
.app-shell button:is(.approval-primary,[data-approval-action="approve"],[data-product-request-approve]):disabled{opacity:.45;cursor:not-allowed}
.app-shell button[name="mode"][value="submit"]{background:linear-gradient(145deg,#dd1244,#c90032 62%,#ad002a);color:#fff;border-color:#d51946;box-shadow:inset 2px 3px 6px #9a0027,inset -2px -2px 6px #ea7492}

.yoribu-dialog{box-sizing:border-box;width:min(420px,calc(100vw - 40px));max-height:calc(100dvh - 48px);overflow:auto;padding:30px 26px 26px;border:1px solid #ffffffbc;border-radius:30px;background:#eae6da;color:#595959;box-shadow:12px 18px 40px #3e392c38,inset 2px 2px 3px #fff9;font-family:inherit;text-align:center}
.yoribu-dialog::backdrop{background:#29262066;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.yoribu-dialog-logo{width:105px;height:45px;margin:0 auto 18px;background:url('./assets/yoribu-logo.svg') center/contain no-repeat}
.yoribu-dialog h2{margin:0 0 14px;font-size:20px;font-weight:750}.yoribu-dialog p{margin:0;line-height:1.7;font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}
.yoribu-dialog-actions{display:flex;gap:14px;margin-top:24px}.yoribu-dialog-actions button{flex:1;min-width:0;min-height:46px;padding:12px 18px;border:0;border-radius:999px;background:#e5e0d5;color:#595959;font:inherit;font-weight:700;box-shadow:4px 4px 9px #bbb5a980,-4px -4px 9px #fffdf3b3;cursor:pointer}
.yoribu-dialog-actions .yoribu-dialog-primary{background:linear-gradient(145deg,#dd1244,#c90032 62%,#ad002a);color:#fff;box-shadow:inset 2px 3px 6px #9a0027,inset -2px -2px 6px #ea7492}
.yoribu-dialog button:focus-visible,.yoribu-dialog textarea:focus-visible{outline:2px solid #c90032;outline-offset:4px}.yoribu-dialog-copy{box-sizing:border-box;width:100%;min-height:110px;margin-top:16px;padding:14px;border:0;border-radius:16px;background:#e5e0d5;color:inherit;font:inherit;box-shadow:inset 2px 2px 6px #bdb6aa45,inset -2px -2px 6px #fffdf5;resize:vertical}

.information-request-group{margin-top:24px;padding-top:20px;border-top:1px solid #bdb5a84d}.information-request-group>h3{margin:0 0 16px}.information-request-group .product-request-management{margin-bottom:18px}
.change-report-detail .product-request-actions{display:grid;grid-template-columns:1fr;gap:14px;margin:20px 0}.change-report-detail .product-request-actions button{width:100%;min-height:44px}.change-report-detail{padding-bottom:54px}

/* Unified account surfaces: shared ivory, inset fields and tactile pill controls. */
.app-shell :is(.recommendations-view,.recommendation-card,.account-feedback,.md-management,.approval-preview-panel,.settings-panel) button:where(:not(.close-button):not(.registered-admin-card):not([data-background]):not(.editor-category-option)){box-sizing:border-box;border:0;border-radius:999px;min-height:44px;padding:12px 18px;font:inherit;font-size:14px;font-weight:700;line-height:1.45;color:#595959;background:#eae6dc;box-shadow:4px 4px 9px #bbb5a980,-4px -4px 9px #fffdf3b3;cursor:pointer;white-space:normal;overflow-wrap:anywhere}
.app-shell :is(.recommendations-view,.recommendation-card,.account-feedback,.md-management,.approval-preview-panel) :is(button[type="submit"],button[value="selected"],button[data-approval-action="approve"],button[data-revision-edit],button[data-approval-action="submit"]){background:linear-gradient(145deg,#dd1244,#c90032 62%,#ad002a);color:#fff;box-shadow:inset 2px 3px 6px #9a0027,inset -2px -2px 6px #ea7492}
.app-shell .recommendations-view button[value="reviewing"],.app-shell .recommendations-view button[value="rejected"]{background:#eae6dc;color:#595959;box-shadow:4px 4px 9px #bbb5a980,-4px -4px 9px #fffdf3b3}
.app-shell :is(.own-feedback-editor,.member-form) :is(textarea,input:where(:not([type="radio"]):not([type="checkbox"]):not([type="file"])),select){box-sizing:border-box;width:100%;min-width:0;min-height:48px;border:0;border-radius:24px;padding:14px 16px;color:#595959;background:#e6e1d6;box-shadow:inset 3px 3px 7px #c3bdae80,inset -3px -3px 7px #fffdf3b3;font:inherit;font-size:16px}
.app-shell .own-feedback-editor textarea{border-radius:18px;min-height:120px}
.app-shell :is(.account-panel,.managed-edit-card,.approval-preview-panel) input[type="file"]{display:block;box-sizing:border-box;max-width:100%;width:100%;min-width:0;border:0;background:transparent;color:#746e65;font:inherit;font-size:12px;line-height:2;padding:8px 0}
.app-shell :is(.account-panel,.managed-edit-card,.approval-preview-panel) input[type="file"]::file-selector-button{border:0;border-radius:999px;min-height:44px;padding:10px 16px;margin-right:10px;background:#e6e1d6;color:#595959;box-shadow:3px 3px 7px #bbb5a980,-3px -3px 7px #fffdf3b3;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.app-shell :is(.account-panel,.managed-edit-card) input[type="checkbox"]{accent-color:#c90032}
.app-shell .recommendations-view .reward-actions{display:grid;grid-template-columns:1fr;gap:14px}
.app-shell .recommendations-view>button,.app-shell .recommendation-card>button{margin:14px 0}
.app-shell .recommendation-card header{flex-wrap:wrap;line-height:1.5;gap:8px}
.app-shell .recommendations-view .managed-place-form{padding:0;margin:24px 0;max-width:100%;box-shadow:none;background:transparent;border:0}
.app-shell .member-form{gap:18px;grid-template-columns:minmax(0,1fr)}
.app-shell .member-form>button{margin-top:8px}
.app-shell :is(.account-panel,.managed-edit-card) .rating-slider-controls{box-sizing:border-box;min-width:0;width:100%;padding:8px 12px;border-radius:999px;background:#e6e1d6;box-shadow:inset 3px 3px 7px #c3bdae80,inset -3px -3px 7px #fffdf3b3}
.app-shell .rating-slider-controls output{flex:0 0 auto;min-width:3.5rem!important;white-space:nowrap}
.app-shell .rating-slider-controls input[type="range"]{appearance:none;-webkit-appearance:none;flex:1;min-width:0;height:44px;min-height:44px;outline-offset:2px}
.app-shell .rating-slider-controls input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:#c9bfb4}
.app-shell .rating-slider-controls input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;background:#c90032;border:2px solid #ea587c;box-shadow:1px 2px 4px #9b12334d}
.app-shell .rating-slider-controls input[type="range"]::-moz-range-track{height:6px;border-radius:6px;background:#c9bfb4}
.app-shell .rating-slider-controls input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#c90032;border:2px solid #ea587c}
.app-shell :is(.settings-panel,.approval-preview-panel){background:#eae6da;color:#595959;border:1px solid #ffffffb8;border-radius:28px;box-shadow:12px 18px 40px #3e392c38,inset 2px 2px 3px #fff9;padding:24px 20px 80px;box-sizing:border-box}
.app-shell .settings-overlay,.app-shell .approval-preview-overlay{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.app-shell .settings-panel .background-grid{gap:16px}
.app-shell .settings-panel [data-background]{border:1px solid transparent;border-radius:20px;padding:12px;background:#eae6da;color:#595959;box-shadow:4px 4px 9px #bbb5a980,-4px -4px 9px #fffdf3b3;font:inherit;font-size:13px;font-weight:700}
.app-shell .settings-panel [data-background].is-active{border-color:#c90032;box-shadow:inset 3px 3px 7px #bcb5a980,inset -3px -3px 7px #fffdf3b3;color:#bd0030}
.app-shell .settings-panel .background-swatch{border-radius:12px;margin-bottom:10px}
.app-shell .approval-preview-actions{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0 0;padding:0;background:transparent}
.app-shell .approval-preview-actions button{min-width:0;width:100%;min-height:46px;margin:0}
.app-shell .revision-diff .diff-columns{gap:14px}
.app-shell .revision-diff .diff-columns>div{border-radius:18px;background:#e2ddd2;box-shadow:inset 2px 2px 5px #bcb5a94d,inset -2px -2px 5px #fffdf3;padding:14px}
.app-shell .revision-diff .diff-columns>div:last-child{background:#eee4df}
.app-shell .admin-panel>[data-account-tab="product-requests"]{border:0;border-radius:999px;min-height:44px;padding:12px 18px;background:#ded9cd;color:#595959;font:inherit;font-size:14px;font-weight:700;box-shadow:4px 4px 9px #bbb5a980,-4px -4px 9px #fffdf3b3;margin:14px 0}
.app-shell .commerce-tabs{gap:12px;flex-wrap:wrap}.app-shell .commerce-tabs button{flex:1 1 100px;white-space:nowrap;padding-inline:12px}
@media(max-width:600px){.app-shell .purchase-history{padding:14px 10px}.app-shell .commerce-orders{padding:16px 0;gap:22px}.app-shell .commerce-orders .commerce-panel{padding:16px 12px}.app-shell .management-zone>.purchase-history{margin-inline:-6px}.app-shell .commerce-quote-form{gap:16px}.app-shell .commerce-quote-form label{min-width:0}.app-shell .approval-preview-actions{grid-template-columns:1fr}.app-shell .settings-panel,.app-shell .approval-preview-panel{padding:22px 16px 80px}}

.admin-drafts-link{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:6px;width:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;}
.admin-drafts-link small{color:#a52b40;font-size:12px;}
.admin-drafts-link:focus-visible{outline:2px solid #c90032;outline-offset:6px;border-radius:12px;}

/* Order workspaces use the full panel instead of nested profile accordions. */
.app-shell .order-account-panel{width:min(920px,100%);max-width:920px;box-sizing:border-box;}
.app-shell .order-page,.app-shell .commerce-orders,.app-shell .commerce-panel{min-width:0;}
.app-shell .order-page>.commerce-orders{padding:0;display:grid;gap:24px;}
.app-shell .order-page .commerce-panel{margin:0;box-sizing:border-box;width:100%;}
.app-shell .order-page h2{padding-right:36px;}
.app-shell .commerce-panel :is(input,textarea,select){box-sizing:border-box;max-width:100%;min-width:0;}
.app-shell .commerce-line{gap:12px;overflow-wrap:anywhere;}
.app-shell .commerce-history{overflow-wrap:anywhere;}
@media(max-width:600px){
 .app-shell .order-account-panel{padding:24px 16px 88px;}
 .app-shell .order-page .commerce-panel{padding:18px 12px;}
 .app-shell .product-request-card .diff-columns{grid-template-columns:minmax(0,1fr);}
 .app-shell .rewards-view>.reward-details{padding:16px 12px;}
 .app-shell .reward-form{min-width:0;}
 .app-shell .reward-form :is(input,textarea,select){box-sizing:border-box;max-width:100%;}
}

.app-shell .order-card-list{display:grid;gap:16px;}
.app-shell .order-summary-card{display:grid;gap:10px;text-align:left;width:100%;min-width:0;padding:20px;border:1px solid #ffffff80;border-radius:22px;background:#e8e3d9;color:#595959;font:inherit;box-shadow:4px 4px 9px #bbb5a950,-4px -4px 9px #fffdf3;cursor:pointer;}
.app-shell .order-summary-card strong{font-size:18px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.app-shell .order-page .order-detail>.commerce-panel{padding:0;border:0;background:transparent;box-shadow:none;border-radius:0;}
.app-shell .order-detail .commerce-inset{padding:16px 0;border-radius:0;box-shadow:none;background:transparent;border-bottom:1px solid #c9c2b5;}

.app-shell .management-caption{font-size:13px;line-height:1.65;color:#756e63;margin:8px 12px 22px;}
.app-shell .admin-manual-link{position:absolute;right:.75rem;top:76px;width:2rem;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:0;background:transparent;color:#c90032;font:inherit;font-size:12px;cursor:pointer;z-index:2;padding:0;}
.app-shell :is(.account-panel,.admin-panel):has(.admin-manual-link){position:relative;}
.app-shell .admin-help{padding:16px;margin:12px 0 22px;border-left:3px solid #c90032;border-radius:12px;background:#e9e3d8;}
.app-shell .admin-help p,.app-shell .admin-manual p,.app-shell .admin-manual li{font-size:14px;line-height:1.85;overflow-wrap:anywhere;}
.app-shell .admin-manual>section{padding:22px 0;border-bottom:1px solid #cbc2b4;}
.app-shell .manual-flow{display:grid;gap:10px;padding:0;list-style:none;}
.app-shell .manual-flow li{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:#e7e0d4;}
.app-shell .manual-flow b{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;border-radius:50%;background:#c90032;color:white;}
.app-shell .manual-roles{display:grid;gap:12px;}.app-shell .manual-roles article{padding:16px;border:1px dashed #b3a997;border-radius:18px;}

.app-shell [data-report-action][aria-pressed="true"]{background:#d8c4bd;color:#9b1636;box-shadow:inset 4px 4px 8px #a88d8580,inset -3px -3px 6px #fff8ec;border-color:#b68585;}

.app-shell .account-panel .admin-manual-link{right:1.2rem;width:2.6rem;}
.app-shell .admin-manual-link span{white-space:nowrap;text-align:center;}

.guide-blank{min-height:28px;border-bottom:1px solid #bdb5a8;margin-bottom:16px;}
.admin-manual dt{font-weight:700;margin-top:18px}.admin-manual dd{margin:8px 0;line-height:1.8;font-size:14px;}