/* Hallmark · genre: playful + atmospheric · macrostructure: Catalogue · theme: BoomMoa locked · scope: city listings */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */
body.route-page { min-height: 100dvh; }
.route-page .nav-slab { position: sticky; inset-block-start: 0; }
.route-page .slab-nav { display: none; }
.route-page .nav-menu { display: inline-flex; align-items: center; }
.route-page .mobile-menu[hidden] { display: none !important; }

.route-main { min-height: 70dvh; }
.route-wrap { width: min(100% - 2rem, 90rem); margin-inline: auto; }
.breadcrumbs { display: flex; gap: var(--space-xs); overflow-x: auto; padding-block: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; scrollbar-width: none; }
.breadcrumbs a { color: var(--color-ink-2); }
.breadcrumbs span::before { content: "/"; margin-inline-end: var(--space-xs); color: var(--color-rule); }

.route-hero { padding-block: clamp(var(--space-xl), 8vw, var(--space-3xl)); border-block-end: var(--rule-hair) solid var(--color-rule); }
.route-hero-grid { display: grid; gap: var(--space-xl); }
.route-kicker { color: var(--color-accent); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.route-hero h1 { max-width: 14ch; margin-block-start: var(--space-sm); font-family: var(--font-display); font-size: clamp(2.5rem, 8vw, 5.5rem); font-weight: 400; line-height: 1.03; }
.route-hero h1 em { color: var(--color-accent); font-style: normal; }
.route-lede { max-width: 62ch; margin-block-start: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-md); }
.route-summary { align-self: end; border: var(--rule-hair) solid var(--color-rule); border-block-start: var(--rule-bold) solid var(--color-accent); background: var(--color-paper-2); }
.route-summary div { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) var(--space-md); border-block-end: var(--rule-hair) solid var(--color-rule-2); }
.route-summary dt { color: var(--color-muted); }
.route-summary dd { margin: 0; font-weight: 700; text-align: end; }
.route-summary strong { color: var(--color-accent); }

.route-section { padding-block: clamp(var(--space-2xl), 8vw, var(--space-3xl)); }
.route-section + .route-section { border-block-start: var(--rule-hair) solid var(--color-rule); }
.section-head { display: grid; gap: var(--space-sm); margin-block-end: var(--space-xl); }
.section-head h2 { max-width: 18ch; font-family: var(--font-display); font-size: clamp(var(--text-xl), 5vw, var(--text-3xl)); font-weight: 400; line-height: 1.08; }
.section-head p { max-width: 62ch; color: var(--color-muted); }

.route-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.route-tile { display: grid; align-content: space-between; gap: var(--space-xl); min-height: 14rem; padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-block-start: var(--rule-bold) solid var(--color-accent); background: var(--color-paper-2); }
.route-tile small { color: var(--color-accent); font-weight: 700; letter-spacing: 0.08em; }
.route-tile h2,
.route-tile h3 {
  margin-block: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.1;
}
.route-tile p { color: var(--color-muted); }
.route-tile > span,
.route-tile > strong {
  color: var(--color-accent);
  font-weight: 700;
}
.tile-link { display: inline-flex; align-items: center; min-height: 2.75rem; width: fit-content; border-block-end: var(--rule-bold) solid var(--color-accent); font-weight: 700; }

.listing-tools { display: flex; gap: var(--space-xs); overflow-x: auto; margin-block-end: var(--space-xl); scrollbar-width: none; }
.listing-tools a,
.listing-tools button {
  flex: 0 0 auto;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
  padding-inline: var(--space-md);
  color: var(--color-ink);
}
.listing-tools .is-active { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }
.venue-operator-filters { margin-block-end: var(--space-xs); }
.venue-filter-status { margin-block-end: var(--space-xl); color: var(--color-muted); font-size: var(--text-sm); }

.route-venue-grid { display: grid; gap: var(--space-lg); }
.route-venue-card { min-width: 0; border: var(--rule-hair) solid var(--color-rule); border-block-start: var(--rule-bold) solid var(--color-accent); background: var(--color-paper-2); }
.route-venue-card > img { display: block; width: 100%; height: clamp(15rem, 24vw, 21rem); object-fit: cover; object-position: center; filter: saturate(1.12) contrast(1.08) brightness(0.82); }
.route-venue-copy { padding: var(--space-lg); }
.route-venue-top { display: flex; justify-content: space-between; align-items: start; gap: var(--space-md); }
.route-venue-top h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; }
.route-score { color: var(--color-accent); font-weight: 700; white-space: nowrap; }
.route-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  margin-block: var(--space-md);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}
.route-tags span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.08rem 0;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.25;
}
.route-tags span::before {
  content: "";
  width: 0.16rem;
  height: 0.9rem;
  flex: 0 0 auto;
  background: var(--color-accent);
  transform: skewX(-14deg);
}
.route-facts { display: grid; }
.route-facts div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-xs); border-block-end: var(--rule-hair) solid var(--color-rule-2); }
.route-facts dt { color: var(--color-muted); }
.route-facts dd { margin: 0; font-weight: 700; text-align: end; }
.route-price { display: grid; gap: var(--space-2xs); margin-block: var(--space-lg); }
.route-price span { color: var(--color-muted); font-size: var(--text-sm); }
.route-price strong { color: var(--color-accent); font-size: var(--text-lg); }
.route-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
.route-card-actions a,
.route-card-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  border: var(--rule-hair) solid var(--color-rule);
  background: transparent;
  color: inherit;
  font-weight: 700;
}
.route-card-actions .primary { grid-column: 1 / -1; border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }

.venue-hero { display: grid; gap: var(--space-lg); padding-block: var(--space-lg) var(--space-2xl); }
.venue-gallery { display: grid; min-width: 0; gap: var(--space-sm); }
.venue-gallery-stage { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--color-paper-2); }
.venue-gallery-main { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) contrast(1.04) brightness(0.94); transition: opacity var(--dur-short); }
.venue-gallery-count { position: absolute; inset: auto var(--space-sm) var(--space-sm) auto; min-width: 4.5rem; padding: 0.42rem 0.65rem; border-inline-start: 0.25rem solid var(--color-accent); background: color-mix(in oklab, var(--color-overlay) 90%, transparent); color: var(--color-ink); font-size: var(--text-xs); font-weight: 800; text-align: center; }
.venue-gallery-count b { color: var(--color-accent); }
.venue-gallery-thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(5.5rem, 22%); gap: var(--space-xs); overflow-x: auto; padding: 0.15rem 0.2rem var(--space-xs); scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--color-accent) transparent; }
.venue-gallery-thumb { position: relative; overflow: hidden; aspect-ratio: 4 / 3; scroll-snap-align: start; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); padding: 0; color: var(--color-ink); cursor: pointer; opacity: 0.62; transition: opacity var(--dur-short),
    border-color var(--dur-short),
    transform var(--dur-short); }
.venue-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.04) contrast(1.03) brightness(0.86); }
.venue-gallery-thumb > span { position: absolute; inset: auto 0 0 auto; padding: 0.2rem 0.42rem; background: var(--color-overlay); color: var(--color-accent); font-size: var(--text-xs); font-weight: 800; }
.venue-gallery-thumb[aria-pressed="true"] { border-color: var(--color-accent); box-shadow: 0 0 0 0.15rem var(--color-accent); opacity: 1; }
.venue-decision { display: grid; align-content: start; gap: var(--space-lg); padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-block-start: var(--rule-bold) solid var(--color-accent); background: var(--color-paper-2); }
.venue-decision h1 { font-family: var(--font-display); font-size: clamp(var(--text-xl), 5vw, var(--text-3xl)); font-weight: 400; line-height: 1.05; }
.venue-decision .route-tags { margin: 0; }
.venue-decision-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs) var(--space-md); align-items: end; }
.venue-decision-head .route-kicker { grid-column: 1; grid-row: 1; }
.venue-decision-head h1 { grid-column: 1; grid-row: 2; }
.venue-decision-rating { grid-column: 2; grid-row: 1 / 3; align-self: end; display: grid; grid-template-columns: auto auto; align-items: center; gap: 0 var(--space-xs); min-width: 6.25rem; padding: var(--space-sm); border-inline-start: 0.3rem solid var(--color-accent); background: var(--color-overlay); box-shadow: 0.24rem 0.28rem 0
    color-mix(in oklab, var(--color-accent) 45%, transparent); transform: rotate(2deg); }
.venue-decision-rating span { grid-row: 1 / 3; color: var(--color-accent); font-size: var(--text-lg); }
.venue-decision-rating strong { color: var(--color-accent); font-size: var(--text-lg); line-height: 1; }
.venue-decision-rating small { color: var(--color-muted); font-size: var(--text-xs); }
.venue-decision-facts { width: 100%; }
.venue-decision-facts .is-address { display: flex; align-items: flex-start; }
.venue-decision-facts .is-address dd { max-width: 78%; overflow-wrap: break-word; text-align: end; word-break: normal; }
.venue-hours-row { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-xs) var(--space-sm); }
.venue-decision-status { margin: 0; }
.decision-cta { display: grid; gap: var(--space-xs); }
.decision-cta a,
.decision-cta button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  border: var(--rule-hair) solid var(--color-accent);
  background: transparent;
  color: var(--color-ink);
  font-weight: 700;
}
.decision-cta .primary { background: var(--color-accent); color: var(--color-accent-ink); }
.grab-location-link {
  gap: 0.55rem;
}
.grab-location-icon {
  width: 1.45rem;
  height: 1.45rem;
  flex: 0 0 auto;
  overflow: visible;
}
.grab-location-icon circle {
  fill: #00b14f;
  stroke: #00b14f;
  stroke-width: 2;
}
.grab-location-icon path {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}
.decision-cta > a:only-of-type,
.venue-location-actions > a:only-of-type {
  grid-column: 1 / -1;
}

.fit-grid { display: grid; gap: var(--space-md); }
.fit-panel { padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.fit-panel h3 { margin-block-end: var(--space-md); color: var(--color-accent); font-size: var(--text-md); }
.fit-panel ul { display: grid; gap: var(--space-sm); margin: 0; padding-inline-start: 1.2rem; }

.course-table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; background: var(--color-paper-2); }
.course-table th,
.course-table td {
  padding: var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule);
  text-align: start;
  vertical-align: top;
}
.course-table th { color: var(--color-accent); font-size: var(--text-sm); letter-spacing: 0.05em; }
.course-table td:last-child { font-weight: 700; white-space: nowrap; }
.course-note { margin-block-start: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }

/* Venue detail · decision depth */
.venue-courses-section { overflow: hidden; }
.venue-course-grid { display: grid; gap: var(--space-md); }
.venue-course-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-lg);
  min-width: 0;
  padding: var(--space-lg);
  overflow: hidden;
  border-inline-start: 0.32rem solid var(--color-accent);
  background:
    linear-gradient(
      135deg,
      color-mix(in oklab, var(--color-accent) 8%, transparent),
      transparent 52%
    ),
    var(--color-paper-2);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule);
  clip-path: polygon(
    0.65rem 0,
    100% 0,
    100% calc(100% - 0.65rem),
    calc(100% - 0.65rem) 100%,
    0 100%,
    0 0.65rem
  );
}
.venue-course-card::after { content: ""; position: absolute; inset: auto -2.7rem -3.2rem auto; width: 7rem; aspect-ratio: 1; border: var(--rule-hair) solid
    color-mix(in oklab, var(--color-accent) 26%, transparent); border-radius: 50%; }
.venue-course-card header { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-md); }
.venue-course-card header > span { display: grid; width: 2.35rem; aspect-ratio: 1; place-items: center; background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 900; transform: rotate(-3deg); }
.venue-course-card header p { color: var(--color-accent); font-size: var(--text-xs); font-weight: 800; }
.venue-course-card h3 { margin-block-start: 0.3rem; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; line-height: 1.1; }
.venue-course-primary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-sm); padding-block: var(--space-md); border-block: var(--rule-hair) solid var(--color-rule-2); }
.venue-course-primary strong { color: var(--color-accent); font-size: var(--text-lg); line-height: 1; }
.venue-course-primary span { color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 700; }
.venue-course-includes { position: relative; z-index: 1; display: grid; gap: var(--space-sm); }
.venue-course-includes > span { width: fit-content; padding: 0.24rem 0.52rem; background: color-mix(in oklab, var(--color-accent) 12%, var(--color-paper)); color: var(--color-accent); font-size: var(--text-xs); font-weight: 850; transform: rotate(-1deg); }
.venue-course-includes ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem var(--space-sm); margin: 0; padding: 0; list-style: none; }
.venue-course-includes li { position: relative; min-width: 0; padding-inline-start: 0.85rem; color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 700; line-height: 1.35; }
.venue-course-includes li::before { content: ""; position: absolute; inset: 0.55em auto auto 0; width: 0.32rem; aspect-ratio: 1; background: var(--color-accent); transform: translateY(-50%) rotate(45deg); }

.venue-popular-section { background: linear-gradient(
    115deg,
    color-mix(in oklab, var(--color-accent) 10%, var(--color-paper)),
    var(--color-paper) 58%
  ); }
.venue-popular-layout { display: grid; gap: var(--space-xl); align-items: start; }
.venue-popular-layout > header { display: grid; gap: var(--space-sm); }
.venue-popular-layout > header h2 { max-width: 16ch; font-family: var(--font-display); font-size: clamp(var(--text-xl), 5vw, var(--text-3xl)); font-weight: 400; line-height: 1.08; }
.venue-popular-layout > header > p:not(.route-kicker) { max-width: 38rem; color: var(--color-muted); }
.venue-popular-layout > header small { width: fit-content; padding-block-end: 0.18rem; border-block-end: var(--rule-hair) solid var(--color-accent); color: var(--color-ink-2); font-weight: 700; }
.venue-popular-list { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; counter-reset: popular-course; }
.venue-popular-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); padding: var(--space-lg); background: var(--color-paper-2); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); }
.venue-popular-rank { display: grid; width: 2.7rem; aspect-ratio: 1; place-items: center; border: var(--rule-hair) solid var(--color-accent); color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-lg); transform: rotate(-4deg); }
.venue-popular-list h3 { font-size: var(--text-md); }
.venue-popular-list p { margin-block-start: 0.2rem; color: var(--color-muted); font-size: var(--text-xs); }
.venue-popular-list > li > strong { display: grid; justify-items: end; color: var(--color-accent); font-size: var(--text-md); }
.venue-popular-list > li > strong small { color: var(--color-muted); font-size: var(--text-xs); }
.venue-popular-meter { display: block; height: 0.2rem; margin-block-start: var(--space-sm); overflow: hidden; background: var(--color-rule); }
.venue-popular-meter i { display: block; width: var(--course-share); height: 100%; background: var(--color-accent); }
.course-star-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-xl); margin-block-end: var(--space-xl); }
.course-star-heading > div { display: grid; gap: var(--space-xs); }
.course-star-heading h2 { font-family: var(--font-display); font-size: clamp(var(--text-xl), 5vw, var(--text-3xl)); font-weight: 400; line-height: 1.05; }
.course-star-heading > p { max-width: 38rem; color: var(--color-muted); line-height: 1.65; }
.course-star-card { position: relative; display: grid; overflow: hidden; border: var(--rule-hair) solid var(--color-rule); border-block-start: 0.32rem solid var(--color-accent); background: radial-gradient(
      circle at 25% 50%,
      color-mix(in oklab, var(--color-accent) 14%, transparent),
      transparent 34%
    ),
    linear-gradient(
      128deg,
      var(--color-paper-2),
      color-mix(in oklab, var(--color-paper) 72%, #000)
    ); clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 1rem),
    calc(100% - 1rem) 100%,
    0 100%
  ); }
.course-star-card::after { content: "선택 패턴"; position: absolute; inset: auto 0.8rem -0.3rem auto; color: color-mix(in oklab, var(--color-accent) 10%, transparent); font-family: var(--font-display); font-size: clamp(4.5rem, 10vw, 9rem); line-height: 0.72; pointer-events: none; transform: rotate(-4deg); }
.course-star-visual { position: relative; z-index: 1; display: grid; min-height: 25rem; place-items: center; padding: var(--space-lg); border-block-end: var(--rule-hair) solid var(--color-rule); background: repeating-linear-gradient(
    135deg,
    transparent 0 1.4rem,
    color-mix(in oklab, var(--color-accent) 3%, transparent) 1.4rem 1.48rem
  ); }
.course-star-visual svg { width: min(100%, 25rem); overflow: visible; filter: drop-shadow(
    0 0 1.1rem color-mix(in oklab, var(--color-accent) 18%, transparent)
  ); }
.course-star-ring { fill: none; stroke: color-mix(in oklab, var(--color-accent) 25%, var(--color-rule)); stroke-dasharray: 3 8; stroke-width: 1; }
.course-star-ring.is-outer { stroke: color-mix(in oklab, var(--color-accent) 52%, transparent); }
.course-star-axis { stroke: color-mix(in oklab, var(--color-accent) 28%, var(--color-rule)); stroke-dasharray: 2 6; stroke-width: 1; }
.course-star-shape { stroke: var(--color-accent); stroke-width: 3; stroke-linejoin: bevel; animation: course-star-trace 1.1s var(--ease-out) both; }
.course-star-single circle { fill: color-mix(in oklab, var(--color-accent) 8%, transparent); stroke: var(--color-accent); stroke-width: 2; }
.course-star-single path { fill: color-mix(in oklab, var(--color-accent) 18%, transparent); stroke: color-mix(in oklab, var(--color-accent) 76%, transparent); stroke-width: 1.5; }
.course-star-marker circle { fill: var(--color-paper); stroke: var(--color-accent); stroke-width: 2; transition: fill var(--dur-short),
    filter var(--dur-short),
    r var(--dur-short); }
.course-star-marker text { fill: var(--color-accent); font-size: 0.78rem; font-weight: 900; }
.course-star-marker.is-active circle { fill: var(--color-accent); filter: drop-shadow(0 0 0.65rem var(--color-accent)); }
.course-star-marker.is-active text { fill: var(--color-accent-ink); }
.course-star-center text { fill: var(--color-ink-2); font-size: 0.9rem; font-weight: 850; }
.course-star-center .course-star-center-share { fill: var(--color-accent); font-family: var(--font-display); font-size: 2rem; font-weight: 400; }
.course-star-ranking { position: relative; z-index: 1; display: grid; align-content: center; gap: var(--space-lg); padding: clamp(var(--space-lg), 5vw, var(--space-2xl)); }
.course-star-ranking > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem var(--space-md); padding-block-end: var(--space-md); border-block-end: 0.2rem solid var(--color-accent); }
.course-star-ranking > header span { grid-column: 1 / -1; color: var(--color-accent); font-size: var(--text-xs); font-weight: 850; }
.course-star-ranking > header strong { font-size: var(--text-lg); }
.course-star-ranking > header small { align-self: center; padding: 0.28rem 0.52rem; background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-2xs); font-weight: 900; transform: rotate(-2deg); }
.course-star-ranking ol { display: grid; gap: 0.42rem; margin: 0; padding: 0; list-style: none; }
.course-star-ranking button { display: grid; width: 100%; grid-template-columns: 2.7rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); min-height: 4.7rem; padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-rule); background: color-mix(in oklab, var(--color-paper) 72%, transparent); color: var(--color-ink); text-align: start; cursor: pointer; transition: border-color var(--dur-short),
    background var(--dur-short),
    transform var(--dur-short); }
.course-star-ranking button > span:first-child { color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-lg); }
.course-star-ranking button > span:nth-child(2) { display: grid; gap: 0.18rem; min-width: 0; }
.course-star-ranking button strong { overflow-wrap: anywhere; font-size: var(--text-sm); }
.course-star-ranking button small { color: var(--color-muted); font-size: var(--text-xs); }
.course-star-ranking button b { color: var(--color-accent); font-size: var(--text-lg); }
.course-star-ranking button.is-active { border-color: var(--color-accent); background: color-mix(in oklab, var(--color-accent) 11%, var(--color-paper)); transform: translateX(0.35rem); }
.course-star-ranking > p { color: var(--color-muted); font-size: var(--text-xs); }
@keyframes course-star-trace {
  from {
    opacity: 0;
    transform: scale(0.72) rotate(-12deg);
    transform-origin: center;
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
    transform-origin: center;
  }
}

@media (prefers-reduced-motion: reduce) {
.course-star-shape { animation: none; }
}

.venue-access-layout { display: grid; gap: var(--space-md); }
.venue-map-preview { position: relative; display: grid; min-height: clamp(19rem, 42vw, 32rem); overflow: hidden; margin-block-end: var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-block-start: 0.35rem solid var(--color-accent); background: var(--color-paper-2); }
.venue-map-preview iframe { width: 100%; height: 100%; min-height: inherit; border: 0; filter: saturate(0.82) contrast(1.05); }
.venue-map-preview > div { position: absolute; inset: auto var(--space-md) var(--space-md); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm) var(--space-md); padding: var(--space-md); background: color-mix(in oklab, var(--color-paper) 93%, transparent); box-shadow: 0.4rem 0.4rem 0
    color-mix(in oklab, var(--color-accent) 26%, transparent); backdrop-filter: blur(0.45rem); }
.venue-map-preview > div > span { color: var(--color-accent); font-size: var(--text-xs); font-weight: 850; }
.venue-map-preview > div > strong { min-width: 0; overflow-wrap: anywhere; font-size: var(--text-sm); }
.venue-map-preview > div > a { border-block-end: var(--rule-hair) solid var(--color-accent); color: var(--color-accent); font-size: var(--text-sm); font-weight: 850; white-space: nowrap; }
.venue-location-frame { display: grid; overflow: hidden; border: var(--rule-hair) solid var(--color-rule); border-block-start: 0.35rem solid var(--color-accent); background: var(--color-paper-2); }
.venue-location-frame .venue-map-preview { min-height: 22rem; margin: 0; border: 0; }
.venue-location-dock { position: relative; display: grid; align-content: start; gap: var(--space-lg); min-width: 0; padding: clamp(var(--space-lg), 4vw, var(--space-xl)); border-block-start: var(--rule-hair) solid var(--color-rule); background: linear-gradient(
    145deg,
    color-mix(in oklab, var(--color-accent) 8%, var(--color-paper-2)),
    var(--color-paper-2) 64%
  ); }
.venue-location-dock::after { content: "위치"; position: absolute; inset: auto -0.08em -0.22em auto; color: color-mix(in oklab, var(--color-accent) 8%, transparent); font-family: var(--font-display); font-size: clamp(5rem, 10vw, 8rem); line-height: 1; transform: rotate(-5deg); pointer-events: none; }
.venue-location-dock > * { position: relative; z-index: 1; }
.venue-location-dock header { display: grid; gap: var(--space-xs); }
.venue-location-dock header > span { color: var(--color-accent); font-size: var(--text-xs); font-weight: 850; letter-spacing: 0.08em; }
.venue-location-dock h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; line-height: 1.1; }
.venue-location-dock header p { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.6; }
.venue-location-landmarks { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.venue-location-landmarks > span { display: grid; gap: 0.18rem; min-width: 7.5rem; padding: 0.65rem 0.8rem; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); }
.venue-location-landmarks b { font-size: var(--text-sm); }
.venue-location-landmarks small { color: var(--color-accent); font-size: var(--text-xs); font-weight: 750; }
.venue-location-pickup { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); border-block: var(--rule-hair) dashed var(--color-rule); }
.venue-location-pickup span { color: var(--color-muted); font-size: var(--text-sm); }
.venue-location-pickup strong { color: var(--color-ink); text-align: end; font-size: var(--text-sm); }
.venue-location-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); margin-block-start: auto; }
.venue-location-actions a,
.venue-location-actions button {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  border: var(--rule-hair) solid var(--color-accent);
  background: transparent;
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-accent);
  text-align: center;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 850;
  cursor: pointer;
}
.venue-location-actions button { grid-column: 1 / -1; background: var(--color-accent); color: var(--color-accent-ink); }
.venue-access-board,
.venue-pickup-card {
  min-width: 0;
  padding: clamp(var(--space-lg), 4vw, var(--space-xl));
}
.venue-access-board { border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.venue-access-board header { display: grid; gap: var(--space-xs); padding-block-end: var(--space-lg); border-block-end: var(--rule-hair) dashed var(--color-rule); }
.venue-access-board header > span,
.venue-pickup-card > span {
  width: fit-content;
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 850;
  letter-spacing: 0.08em;
}
.venue-access-board h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; }
.venue-access-board header p,
.venue-pickup-card p {
  color: var(--color-muted);
  line-height: 1.7;
}
.venue-access-board ul { display: grid; margin: 0; padding: 0; list-style: none; }
.venue-access-board li { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); border-block-end: var(--rule-hair) solid var(--color-rule-2); }
.venue-access-board li span { color: var(--color-ink-2); }
.venue-access-board li strong { color: var(--color-accent); white-space: nowrap; }
.venue-access-board > a { display: inline-flex; margin-block-start: var(--space-lg); border-block-end: var(--rule-hair) solid var(--color-accent); color: var(--color-accent); font-weight: 800; }
.venue-pickup-card { position: relative; display: grid; align-content: center; gap: var(--space-lg); overflow: hidden; border-inline-start: 0.42rem solid var(--color-accent); background: var(--color-overlay); }
.venue-pickup-card::after { content: "이동"; position: absolute; inset: auto -0.12em -0.3em auto; color: color-mix(in oklab, var(--color-accent) 11%, transparent); font-family: var(--font-display); font-size: clamp(5rem, 12vw, 9rem); line-height: 1; transform: rotate(-5deg); }
.venue-pickup-card h3,
.venue-pickup-card p,
.venue-pickup-card button {
  position: relative;
  z-index: 1;
}
.venue-pickup-card h3 { max-width: 23ch; font-size: var(--text-md); line-height: 1.55; }
.venue-pickup-card button { width: fit-content; min-height: 3rem; border: 0; background: var(--color-accent); padding-inline: var(--space-lg); color: var(--color-accent-ink); font-weight: 800; cursor: pointer; }

.venue-reviews-section { background: color-mix(in oklab, var(--color-accent) 3%, var(--color-paper)); }
.venue-reviews-section,
.venue-access-section {
  scroll-margin-top: 6rem;
}
.venue-review-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: var(--space-md); margin-block-end: var(--space-lg); }
.venue-review-heading .section-head { min-width: 0; margin: 0; }
.venue-review-score { display: grid; grid-template-columns: auto auto; gap: 0 var(--space-xs); align-items: center; min-width: 7.5rem; padding: var(--space-sm) var(--space-md); border-inline-start: 0.32rem solid var(--color-accent); background: var(--color-overlay); transform: rotate(1.5deg); }
.venue-review-score > span { grid-row: 1 / 3; color: var(--color-accent); font-size: var(--text-xl); }
.venue-review-score strong { color: var(--color-accent); font-size: var(--text-xl); line-height: 1; }
.venue-review-score small { color: var(--color-muted); font-size: var(--text-xs); }
.venue-review-insight { display: grid; gap: var(--space-md); margin-block-end: var(--space-lg); padding: clamp(var(--space-md), 3vw, var(--space-lg)); border-inline-start: 0.35rem solid var(--color-accent); background: linear-gradient(120deg, color-mix(in oklab, var(--color-accent) 12%, var(--color-paper-2)), var(--color-paper-2)); }
.venue-review-insight header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding-block-end: var(--space-sm); border-block-end: var(--rule-hair) solid var(--color-rule); }
.venue-review-insight header span { color: var(--color-accent); font-size: var(--text-xs); font-weight: 850; }
.venue-review-insight header strong {
  color: var(--color-accent);
  font-size: var(--text-sm);
  line-height: 1.25; }
.venue-review-distribution { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rule-hair); margin: 0; background: var(--color-rule); }
.venue-review-distribution > div { display: grid; gap: 0.15rem; min-width: 0; padding: var(--space-sm) var(--space-md); background: var(--color-paper); }
.venue-review-insight dt { color: var(--color-muted); font-size: var(--text-xs); }
.venue-review-insight dd { margin: 0; color: var(--color-accent); font-size: var(--text-lg); font-weight: 850; overflow-wrap: anywhere; }
.venue-review-criteria { display: grid; gap: var(--space-sm); padding-block-start: var(--space-md); border-block-start: var(--rule-hair) dashed var(--color-rule-2); }
.venue-review-criteria > strong { color: var(--color-accent); font-size: var(--text-xs); font-weight: 850; }
.venue-review-criteria ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.venue-review-criteria li { display: grid; gap: var(--space-sm); min-width: 0; padding: var(--space-sm) var(--space-md); background: var(--color-paper); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); }
.venue-review-criteria li > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.venue-review-criteria li span { color: var(--color-ink-2); font-weight: 800; }
.venue-review-criteria li b { display: inline-flex; align-items: baseline; gap: var(--space-xs); white-space: nowrap; }
.venue-review-criteria li em { color: var(--color-accent); font-size: var(--text-sm); font-style: normal; }
.venue-review-criteria li small { color: var(--color-muted); font-size: var(--text-xs); }
.venue-review-criteria progress { width: 100%; height: 0.24rem; overflow: hidden; border: 0; border-radius: 0; background: var(--color-rule); color: var(--color-accent); appearance: none; }
.venue-review-criteria progress::-webkit-progress-bar { background: var(--color-rule); }
.venue-review-criteria progress::-webkit-progress-value { background: var(--color-accent); }
.venue-review-criteria progress::-moz-progress-bar { background: var(--color-accent); }
.venue-balance-section { position: relative; overflow: hidden; background: linear-gradient(
      90deg,
      color-mix(in oklab, var(--color-accent) 5%, transparent),
      transparent 34%
    ),
    var(--color-paper); }
.venue-balance-section::after { content: "±"; position: absolute; inset: auto -0.05em -0.32em auto; color: color-mix(in oklab, var(--color-accent) 5%, transparent); font-family: var(--font-display); font-size: clamp(9rem, 24vw, 20rem); line-height: 1; pointer-events: none; }
.venue-balance-section .route-wrap { position: relative; z-index: 1; }
.venue-balance-heading { max-width: 54rem; }
.venue-balance-heading h2 > span { display: block; text-wrap: balance; word-break: keep-all; }
.venue-balance-heading > span { width: fit-content; padding: 0.28rem 0.62rem; background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 900; transform: rotate(-1.5deg); }
.venue-balance-grid { display: grid; gap: var(--space-md); margin-block-start: var(--space-xl); }
.venue-balance-panel { position: relative; display: grid; align-content: start; min-width: 0; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); clip-path: polygon(
    0.8rem 0,
    100% 0,
    100% calc(100% - 0.8rem),
    calc(100% - 0.8rem) 100%,
    0 100%,
    0 0.8rem
  ); }
.venue-balance-panel.is-strength { border-block-start: 0.35rem solid var(--color-accent); background: linear-gradient(
    145deg,
    color-mix(in oklab, var(--color-accent) 12%, var(--color-paper-2)),
    var(--color-paper-2) 48%
  ); }
.venue-balance-panel.is-consideration { border-block-start: 0.35rem solid var(--color-rule-2); background: linear-gradient(
    145deg,
    color-mix(in oklab, var(--color-ink) 5%, var(--color-paper-2)),
    var(--color-paper-2) 48%
  ); }
.venue-balance-panel > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg); border-block-end: var(--rule-hair) solid var(--color-rule); }
.venue-balance-panel > header > div { display: grid; gap: 0.2rem; }
.venue-balance-panel > header small { color: var(--color-muted); font-size: var(--text-xs); font-weight: 800; }
.venue-balance-panel > header h3 { margin: 0; font-family: var(--font-display); font-size: clamp(var(--text-xl), 3.5vw, var(--text-2xl)); font-weight: 400; line-height: 1; }
.venue-balance-panel > header strong { display: grid; place-items: center; width: 3.2rem; aspect-ratio: 1; border: var(--rule-hair) solid currentColor; border-radius: 50%; color: var(--color-muted); font-size: var(--text-xl); line-height: 1; transform: rotate(8deg); }
.venue-balance-panel.is-strength > header strong { color: var(--color-accent); box-shadow: 0 0 1.2rem
    color-mix(in oklab, var(--color-accent) 28%, transparent); }
.venue-balance-panel ul { display: grid; margin: 0; padding: 0; list-style: none; }
.venue-balance-panel li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md) var(--space-lg); }
.venue-balance-panel li + li { border-block-start: var(--rule-hair) dashed var(--color-rule); }
.venue-balance-panel li > span { color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.2; }
.venue-balance-panel li > div { display: grid; gap: 0.3rem; }
.venue-balance-panel li small { width: fit-content; color: var(--color-accent); font-size: var(--text-xs); font-weight: 850; }
.venue-balance-panel.is-consideration li small { color: var(--color-muted); }
.venue-balance-panel li p { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.65; }
.venue-review-grid { display: grid; gap: var(--space-md); }
.venue-review-card { position: relative; display: grid;
  align-self: start; align-content: start; gap: var(--space-md); min-width: 0; padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.venue-review-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 0.22rem; background: var(--color-accent); clip-path: polygon(0 0, 100% 4%, 65% 100%, 12% 96%); }
.venue-review-card header { display: flex; justify-content: space-between; gap: var(--space-sm); }
.venue-review-card header > div { display: grid; gap: 0.15rem; }
.venue-review-card header span { color: var(--color-muted); font-size: var(--text-xs); }
.venue-review-card header b { color: var(--color-accent); white-space: nowrap; }
.venue-review-person { display: flex !important; grid-template-columns: none !important; align-items: center; gap: var(--space-sm) !important; min-width: 0; }
.venue-review-person > img,
.venue-review-person > span { flex: 0 0 auto; width: 2.625rem; height: 2.625rem; border: var(--rule-hair) solid var(--color-accent); border-radius: 50%; object-fit: cover; }
.venue-review-person > span { display: grid; place-items: center; background: color-mix(in oklab, var(--color-accent) 14%, var(--color-paper)); color: var(--color-accent); font-weight: 850; }
.venue-review-person > div { display: grid; min-width: 0; gap: 0.1rem; }
.venue-review-person strong { overflow-wrap: anywhere; }
.venue-review-person time { color: var(--color-muted); font-size: var(--text-xs); }
.venue-review-card dl { margin: 0; }
.venue-review-card dl > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: center; padding: var(--space-sm); background: color-mix(in oklab, var(--color-accent) 7%, var(--color-paper)); }
.venue-review-card dt { color: var(--color-muted); font-size: var(--text-xs); }
.venue-review-card dd { margin: 0; text-align: end; font-weight: 800; }
.venue-review-card > p { color: var(--color-ink-2); line-height: 1.7; }
.venue-review-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; overflow: hidden; }
.venue-review-images--1 { grid-template-columns: minmax(0, 1fr); }
.venue-review-images--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.venue-review-images a { display: block; min-width: 0; aspect-ratio: 4 / 3; overflow: hidden; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); }
.venue-review-images img { width: 100%; height: 100%; object-fit: cover; transition: transform 180ms ease, filter 180ms ease; }
.venue-review-images a:is(:hover, :focus-visible) img { transform: scale(1.035); filter: brightness(1.08); }
.venue-review-card > button { width: fit-content; border: 0; border-block-end: var(--rule-hair) solid var(--color-rule); background: transparent; padding: 0 0 0.18rem; color: var(--color-muted); cursor: pointer; }
.venue-review-card > button[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent); }
.venue-review-card > .helpful-vote-button,
.forum-answer-card footer .helpful-vote-button { display: inline-flex; width: fit-content; min-width: 3.25rem; min-height: 2.25rem; align-items: center; justify-content: center; gap: 0.38rem; border: var(--rule-hair) solid var(--color-rule); padding: 0.34rem 0.62rem; background: transparent; color: var(--color-muted); line-height: 1; }
.helpful-vote-icon { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.helpful-vote-button[aria-pressed="true"] .helpful-vote-icon { fill: currentColor; }
.helpful-vote-button > span { min-width: 1ch; font-size: var(--text-xs); font-weight: 850; text-align: center; }
.venue-review-tools { display: grid; gap: var(--space-md); margin-block-end: var(--space-sm); padding: var(--space-md); border-block: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.venue-review-filters { display: flex; gap: var(--space-xs); min-width: 0; overflow-x: auto; padding-block: 0.15rem; scrollbar-width: none; }
.venue-review-filters::-webkit-scrollbar { display: none; }
.venue-review-filters button { flex: 0 0 auto; min-height: 2.65rem; border: var(--rule-hair) solid var(--color-rule); background: transparent; padding-inline: var(--space-md); color: var(--color-muted); font-weight: 750; cursor: pointer; }
.venue-review-filters button.is-active,
.venue-review-filters button[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
.venue-review-sort { display: grid; grid-template-columns: auto minmax(8rem, 1fr); align-items: center; gap: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); font-weight: 750; }
.venue-review-sort select { min-height: 2.65rem; border: var(--rule-hair) solid var(--color-rule); border-radius: 0; background: var(--color-paper); padding-inline: var(--space-sm); color: var(--color-ink); font: inherit; }
.venue-review-count { margin-block: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.venue-review-message { min-height: 1.4em; margin-block-start: var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); }
.venue-review-card[hidden] { display: none; }
.venue-review-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-block-start: var(--space-xl); }
.venue-review-footer > button,
.venue-review-write {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  border: var(--rule-hair) solid var(--color-accent);
  padding-inline: var(--space-lg);
  font-weight: 850;
  cursor: pointer;
}
.venue-review-footer > button { background: var(--color-accent); color: var(--color-accent-ink); }
.venue-review-footer > button[hidden] { display: none; }
.venue-review-write { color: var(--color-accent); }
.venue-review-assistant-section {
  border-block-start: var(--rule-hair) dashed var(--color-rule);
  border-block-end: var(--rule-hair) solid var(--color-rule);
  background: color-mix(in oklab, var(--color-accent) 4%, var(--color-paper));
  padding-block: clamp(var(--space-md), 3vw, var(--space-lg));
}
.venue-review-assistant-bridge {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-md);
  border-inline-start: 0.35rem solid var(--color-accent);
  background: var(--color-paper-2);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule);
}
.venue-review-assistant-bridge > div { display: grid; gap: 0.25rem; }
.venue-review-assistant-bridge span { color: var(--color-accent); font-size: var(--text-xs); font-weight: 850; }
.venue-review-assistant-bridge strong { font-size: var(--text-md); line-height: 1.45; word-break: keep-all; }
.venue-review-assistant-bridge button {
  min-height: 3.4rem;
  border: 0;
  background: var(--color-accent);
  padding-inline: var(--space-lg);
  color: var(--color-accent-ink);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  clip-path: polygon(0.55rem 0, 100% 0, calc(100% - 0.55rem) 100%, 0 100%);
}

.venue-tips-section { background: linear-gradient(
    110deg,
    color-mix(in oklab, var(--color-accent) 8%, var(--color-paper)),
    var(--color-paper) 62%
  ); }
.venue-tip-grid { display: grid; gap: var(--space-sm); }
.venue-tip-grid article { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-items: start; padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.venue-tip-grid article > span { display: grid; width: 2.5rem; aspect-ratio: 1; place-items: center; border: var(--rule-hair) solid var(--color-accent); color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-md); transform: rotate(-4deg); }
.venue-tip-grid article > div { display: grid; gap: var(--space-xs); }
.venue-tip-grid h3 { font-size: var(--text-md); }
.venue-tip-grid p { color: var(--color-muted); line-height: 1.65; }

.venue-faq-section { background: var(--color-paper-2); }
.venue-faq-layout { display: grid; gap: var(--space-xl); align-items: start; }
.venue-faq-layout > header { display: grid; gap: var(--space-sm); }
.venue-faq-layout > header h2 { max-width: 16ch; font-family: var(--font-display); font-size: clamp(var(--text-xl), 5vw, var(--text-3xl)); font-weight: 400; line-height: 1.08; }
.venue-faq-layout > header > p:last-child { color: var(--color-muted); line-height: 1.65; }
.venue-faq-list { display: grid; gap: var(--space-xs); }
.venue-faq-list details { border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); }
.venue-faq-list summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); min-height: 4.4rem; padding: var(--space-md); cursor: pointer; list-style: none; }
.venue-faq-list summary::-webkit-details-marker { display: none; }
.venue-faq-list summary > span { color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-md); }
.venue-faq-list summary > strong { line-height: 1.45; }
.venue-faq-list summary > i { position: relative; width: 1rem; aspect-ratio: 1; }
.venue-faq-list summary > i::before,
.venue-faq-list summary > i::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 0.12rem;
  background: var(--color-accent);
  transform: translateY(-50%);
}
.venue-faq-list summary > i::after { transform: translateY(-50%) rotate(90deg); transition: transform var(--dur-short); }
.venue-faq-list details[open] summary > i::after { transform: translateY(-50%) rotate(0); }
.venue-faq-list details > p { padding: 0 var(--space-lg) var(--space-lg) calc(2.5rem + var(--space-xl)); color: var(--color-muted); line-height: 1.75; }

.venue-verification-layout { display: grid; gap: var(--space-xl); }
.venue-verification-layout > header { display: grid; align-content: start; gap: var(--space-sm); }
.venue-verification-layout > header h2 { max-width: 18ch; font-family: var(--font-display); font-size: clamp(var(--text-xl), 5vw, var(--text-3xl)); font-weight: 400; line-height: 1.08; }
.venue-verification-layout > header > p:not(.route-kicker) { color: var(--color-muted); }
.venue-verification-layout dl { display: grid; margin-block-start: var(--space-lg); }
.venue-verification-layout dl > div { display: flex; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-sm); border-block-end: var(--rule-hair) solid var(--color-rule-2); }
.venue-verification-layout dt { color: var(--color-muted); }
.venue-verification-layout dd { margin: 0; max-width: 68%; text-align: end; font-weight: 700; }
.venue-verification-layout > ol { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.venue-verification-layout > ol li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.venue-verification-layout > ol li > span { color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-lg); }
.venue-verification-layout > ol p { margin-block-start: 0.2rem; color: var(--color-muted); font-size: var(--text-sm); }
.venue-verification-layout > ol b { border: var(--rule-hair) solid var(--color-accent); padding: 0.38rem 0.6rem; color: var(--color-accent); font-size: var(--text-xs); white-space: nowrap; transform: rotate(-2deg); }

.venue-nearby-section { overflow: hidden; }
.venue-nearby-grid { display: grid; gap: var(--space-md); }
.venue-nearby-grid article { display: grid; min-width: 0; overflow: hidden; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.venue-nearby-grid img { width: 100%; height: 12rem; object-fit: cover; filter: saturate(1.08) contrast(1.06) brightness(0.82); }
.venue-nearby-grid article > div { display: grid; gap: var(--space-sm); padding: var(--space-lg); }
.venue-nearby-grid span { color: var(--color-accent); font-size: var(--text-xs); font-weight: 800; }
.venue-nearby-grid h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; }
.venue-nearby-grid p { color: var(--color-muted); font-size: var(--text-sm); }
.venue-nearby-grid a { width: fit-content; border-block-end: var(--rule-hair) solid var(--color-accent); color: var(--color-accent); font-weight: 800; }

.venue-related-section { overflow: hidden; }
.venue-related-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); }
.venue-related-heading .section-head { margin-block-end: var(--space-lg); }
.venue-related-controls { display: flex; gap: var(--space-xs); margin-block-end: var(--space-xl); }
.venue-related-controls button { display: grid; width: 2.8rem; aspect-ratio: 1; place-items: center; border: var(--rule-hair) solid var(--color-accent); background: transparent; color: var(--color-accent); font-size: var(--text-md); cursor: pointer; }
.venue-related-controls button:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.venue-related-rail,
.venue-related-rail.venue-nearby-grid {
  display: flex;
  gap: var(--space-md);
  max-width: none;
  overflow-x: auto;
  padding: var(--space-xs) var(--space-xs) var(--space-lg);
  margin-inline: calc(var(--space-xs) * -1);
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent) var(--color-rule);
}
.venue-related-rail > article { flex: 0 0 clamp(17rem, 28vw, 22rem); scroll-snap-align: start; }
.venue-related-all { display: inline-flex; min-height: 3rem; align-items: center; margin-block-start: var(--space-md); border-block-end: var(--rule-hair) solid var(--color-accent); color: var(--color-accent); font-weight: 850; }
.venue-related-actions { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.venue-related-guide { display: grid; overflow: hidden; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.venue-related-guide-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-block-end: 0.28rem solid var(--color-accent); }
.venue-related-guide-cover img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) brightness(1.05); }
.venue-related-guide > div { display: grid; align-content: start; gap: var(--space-sm); min-height: 13rem; padding: var(--space-lg); }
.venue-related-guide span,
.venue-related-guide small {
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 800;
}
.venue-related-guide h3 { font-family: var(--font-display); font-size: var(--text-md); font-weight: 400; line-height: 1.2; }
.venue-related-guide p { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.6; }
.venue-related-guide small { margin-block-start: auto; }
.venue-related-forum { background: color-mix(in oklab, var(--color-accent) 3%, var(--color-paper)); }
.venue-related-thread { position: relative; display: grid; align-content: start; gap: var(--space-md); min-height: 19rem; padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.venue-related-thread > span { color: color-mix(in oklab, var(--color-accent) 42%, var(--color-paper-2)); font-family: var(--font-display); font-size: var(--text-2xl); line-height: 0.8; }
.venue-related-thread > div { display: grid; gap: var(--space-sm); }
.venue-related-thread small { color: var(--color-accent); font-size: var(--text-xs); font-weight: 750; }
.venue-related-thread h3 { font-size: var(--text-md); line-height: 1.35; }
.venue-related-thread p { display: -webkit-box; overflow: hidden; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.venue-related-thread > a { width: fit-content; margin-block-start: auto; border-block-end: var(--rule-hair) solid var(--color-accent); color: var(--color-accent); font-weight: 800; }

.review-list,
.thread-stack,
.guide-stack {
  display: grid;
  gap: var(--space-sm);
}
.review-card,
.thread-card,
.guide-card {
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
}
.review-meta,
.thread-meta,
.guide-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-block-end: var(--space-sm);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.review-card strong,
.thread-card h3,
.guide-card h3 {
  font-size: var(--text-md);
}
.review-card p,
.thread-card p,
.guide-card p {
  margin-block-start: var(--space-sm);
  color: var(--color-ink-2);
}
.thread-card { display: grid; gap: var(--space-sm); }
.thread-stats { display: flex; gap: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }

.article-layout { display: grid; gap: var(--space-xl); align-items: start; }
.article-toc { padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-block-start: var(--rule-bold) solid var(--color-accent); background: var(--color-paper-2); }
.article-toc strong { color: var(--color-accent); }
.article-toc nav { display: grid; gap: var(--space-xs); margin-block-start: var(--space-md); }
.article-body { min-width: 0; }
.article-answer { margin-block-end: var(--space-xl); padding: var(--space-lg); border-inline-start: var(--rule-bold) solid var(--color-accent); background: var(--color-paper-2); font-size: var(--text-md); }
.article-body h2 { margin-block: var(--space-2xl) var(--space-md); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; }
.article-body h2:first-of-type { margin-block-start: 0; }
.article-body p + p { margin-block-start: var(--space-md); }
.article-body ul { display: grid; gap: var(--space-sm); }
.updated { color: var(--color-muted); font-size: var(--text-sm); }

.thread-article { max-width: 52rem; }
.post-body { margin-block: var(--space-xl); padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); font-size: var(--text-md); }
.post-body p + p { margin-block-start: var(--space-md); }
.comment-list { display: grid; gap: var(--space-sm); }
.comment { padding: var(--space-lg); border-inline-start: var(--rule-bold) solid var(--color-rule); background: var(--color-paper-2); }
.comment header { display: flex; justify-content: space-between; gap: var(--space-md); margin-block-end: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }

.form-shell { width: min(100%, 44rem); }
.route-form { display: grid; gap: var(--space-lg); padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-block-start: var(--rule-bold) solid var(--color-accent); background: var(--color-paper-2); }
.route-form label { display: grid; gap: var(--space-xs); font-weight: 700; }
.route-form input,
.route-form textarea,
.route-form select {
  width: 100%;
  min-height: 3rem;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  padding: var(--space-sm);
  font: inherit;
}
.route-form textarea { min-height: 12rem; resize: vertical; }
.route-form small { color: var(--color-muted); font-weight: 400; }
.route-form button { min-height: 3rem; border: 0; background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700; }
.form-status { min-height: 1.5em; color: var(--color-success); }
.auth-switch { margin-block-start: var(--space-lg); color: var(--color-muted); }
.auth-switch a { color: var(--color-accent); font-weight: 700; }

.profile-grid { display: grid; gap: var(--space-lg); }
.profile-card { padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.profile-card h2 { font-family: var(--font-display); font-weight: 400; }
.profile-stat { margin-block-start: var(--space-lg); color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-3xl); }

.prototype-note { padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); color: var(--color-muted); font-size: var(--text-sm); }

@media (min-width: 40rem) {
  .route-grid.two,
  .fit-grid,
  .profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .route-grid.three,
  .route-venue-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .route-card-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .route-card-actions .primary { grid-column: auto; }
  .venue-course-grid,
  .venue-review-grid,
  .venue-nearby-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.venue-review-grid { grid-auto-flow: dense; grid-auto-rows: 0.5rem; align-items: start; }
.venue-course-grid > :last-child:nth-child(odd),
  .venue-nearby-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .venue-access-layout { grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr); }
  .venue-review-tools { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .venue-review-sort { grid-template-columns: auto 10rem; }
  .venue-review-assistant-bridge { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-inline: var(--space-lg); }
  .venue-review-insight { grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr); align-items: stretch; }
  .venue-review-insight header { grid-column: 1 / -1; }
  .venue-review-criteria { padding-block-start: 0; padding-inline-start: var(--space-md); border-block-start: 0; border-inline-start: var(--rule-hair) dashed var(--color-rule-2); }
.venue-review-criteria ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.venue-balance-grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); align-items: stretch; }
  .venue-tip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
  .route-page .nav-slab { grid-template-columns: auto 1fr auto; }
  .route-page .slab-nav { display: flex; justify-content: center; gap: var(--space-xl); }
  .route-page .slab-nav a { min-height: 2.75rem; display: inline-flex; align-items: center; font-weight: 700; }
  .route-page .nav-menu { display: none; }
  .route-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr); }
  .route-grid.three,
  .route-venue-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .venue-hero { grid-template-columns: minmax(0, 1.2fr) minmax(22rem, 0.8fr); }
  .venue-location-frame { grid-template-columns: minmax(0, 1.7fr) minmax(21rem, 0.72fr); min-height: 31rem; }
  .venue-location-frame .venue-map-preview { min-height: 100%; }
  .venue-location-dock { border-block-start: 0; border-inline-start: 0.32rem solid var(--color-accent); }
  .article-layout { grid-template-columns: 16rem minmax(0, 1fr); }
  .article-toc { position: sticky; inset-block-start: 6rem; }
.venue-verification-layout { grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.28fr); }
.course-star-card { grid-template-columns: minmax(20rem, 0.86fr) minmax(0, 1.14fr); }
.course-star-visual { border-block-end: 0; border-inline-end: var(--rule-hair) solid var(--color-rule); }
  .venue-faq-layout { grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.28fr); }
  .venue-course-grid,
  .venue-review-grid,
  .venue-nearby-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
.venue-course-grid > :last-child:nth-child(odd),
  .venue-nearby-grid > :last-child:nth-child(odd) { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
}

.venue-seo-rich-text {
  color: var(--color-ink-soft);
  line-height: 1.82;
}

.venue-seo-rich-text h2,
.venue-seo-rich-text h3,
.venue-seo-rich-text h4 {
  color: var(--color-ink);
  line-height: 1.28;
  margin: 1.8rem 0 0.65rem;
}

.venue-seo-rich-text h2 {
  font-size: clamp(1.45rem, 2.4vw, 2.15rem);
}

.venue-seo-rich-text h3 {
  border-left: 0.22rem solid var(--color-accent);
  font-size: clamp(1.18rem, 1.8vw, 1.55rem);
  padding-left: 0.75rem;
}

.venue-seo-rich-text h4 {
  font-size: 1.08rem;
}

/* Route families · 야간 스트리트 카탈로그 */
.route-page .nav-slab { box-shadow: 0 0.55rem 1.5rem
    color-mix(in oklab, var(--color-paper) 72%, transparent); }
.breadcrumbs { position: relative; padding-inline-start: var(--space-md); }
.breadcrumbs::before { content: ""; position: absolute; inset: 50% auto auto 0; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--color-accent); transform: translateY(-50%); }

.route-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(
      circle at 82% 20%,
      color-mix(in oklab, var(--color-accent) 24%, transparent),
      transparent 25%
    ),
    linear-gradient(145deg, var(--color-paper), var(--color-paper-2));
}
.route-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 12% -5rem auto auto;
  width: clamp(12rem, 34vw, 34rem);
  aspect-ratio: 1;
  border: 0.45rem double
    color-mix(in oklab, var(--color-accent) 26%, transparent);
  border-radius: 50%;
  transform: rotate(-12deg);
}
.city-route-hero {
  --city-hero-image: url("/assets/heroes/da-nang-hero-v3.webp");
  --city-hero-mobile-image: url("/assets/heroes/da-nang-hero-mobile-v1.webp");
  --city-hero-position: center;
  --city-hero-mobile-position: right top;
  --city-hero-glow: color-mix(in oklab, var(--color-accent) 28%, transparent);
  min-height: clamp(28rem, 58vw, 43rem);
}
.city-route-hero::before {
  z-index: -2;
  inset: 0;
  width: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: var(--city-hero-image) var(--city-hero-position) / cover no-repeat;
  filter: saturate(1.08) contrast(1.05) brightness(0.86);
  transform: scale(1.015);
}
.city-route-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 84% 24%, var(--city-hero-glow), transparent 30%),
    linear-gradient(
      92deg,
      color-mix(in oklab, var(--color-paper) 98%, transparent) 0 38%,
      color-mix(in oklab, var(--color-paper) 78%, transparent) 60%,
      color-mix(in oklab, var(--color-paper) 30%, transparent) 100%
    );
}
.city-route-hero--da-nang { --city-hero-image: url("/assets/heroes/da-nang-hero-v3.webp"); --city-hero-mobile-image: url("/assets/heroes/da-nang-hero-mobile-v1.webp"); }
.city-route-hero--nha-trang { --city-hero-image: url("/assets/heroes/nha-trang-hero-v3.webp"); --city-hero-mobile-image: url("/assets/heroes/nha-trang-hero-mobile-v1.webp"); --city-hero-glow: color-mix(in oklab, #ff3f7f 25%, transparent); }
.city-route-hero--ha-noi { --city-hero-image: url("/assets/heroes/ha-noi-hero-v3.webp"); --city-hero-mobile-image: url("/assets/heroes/ha-noi-hero-mobile-v1.webp"); --city-hero-glow: color-mix(in oklab, #ffb04a 25%, transparent); }
.route-kicker {
  display: inline-block;
  width: fit-content;
  padding: 0.35rem 0.75rem;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  clip-path: polygon(0.4rem 0, 100% 0.12rem, calc(100% - 0.4rem) 100%, 0 88%);
  transform: rotate(-1.5deg);
}
.route-hero h1 { position: relative; text-wrap: balance; text-shadow: 0.06em 0.06em 0
    color-mix(in oklab, var(--color-accent) 16%, transparent); }
.route-summary {
  position: relative;
  border: 0;
  background: var(--color-paper-2);
  box-shadow: 0.75rem 0.75rem 0 color-mix(in oklab, var(--color-accent) 24%, transparent),
    inset 0 0 0 var(--rule-hair) var(--color-rule);
  clip-path: polygon(
    1rem 0,
    100% 0,
    100% calc(100% - 1rem),
    calc(100% - 1rem) 100%,
    0 100%,
    0 1rem
  );
}
.route-summary::before { content: "확인표"; position: absolute; inset: -0.15rem var(--space-md) auto auto; padding: 0.25rem 0.6rem; background: var(--color-focus); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 700; transform: rotate(4deg); }
.route-summary div { border: 0; background-image: linear-gradient(
    90deg,
    var(--color-rule-2) 50%,
    transparent 0
  ); background-position: bottom; background-size: 0.55rem 1px; background-repeat: repeat-x; }

.route-section { position: relative; }
.route-section + .route-section { border: 0; }
.route-section + .route-section::before { content: ""; position: absolute; inset: 0 4vw auto; height: 1px; background: repeating-linear-gradient(
    90deg,
    var(--color-rule),
    var(--color-rule) 0.7rem,
    transparent 0.7rem,
    transparent 1.1rem
  ); }
.section-head { position: relative; padding-inline-start: clamp(var(--space-md), 3vw, var(--space-xl)); }
.section-head::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 0.5rem; background: var(--color-accent); clip-path: polygon(0 0, 100% 4%, 65% 100%, 18% 92%); }
.section-head::after { content: ""; position: absolute; inset: auto auto -0.75rem 0; width: min(10rem, 34vw); height: 0.38rem; background: var(--color-accent); clip-path: polygon(0 35%, 100% 0, 94% 100%, 4% 75%); opacity: 0.55; }
.section-head h2 { text-wrap: balance; }

.route-grid,
.route-venue-grid,
.fit-grid,
.review-list,
.thread-stack,
.guide-stack,
.profile-grid {
  align-items: stretch;
}
.route-tile,
.route-venue-card,
.fit-panel,
.review-card,
.thread-card,
.guide-card,
.profile-card {
  position: relative;
  border: 0;
  background: var(--color-paper-2);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule);
  clip-path: polygon(
    0 0.65rem,
    0.65rem 0,
    100% 0,
    100% calc(100% - 0.65rem),
    calc(100% - 0.65rem) 100%,
    0 100%
  );
}
.route-tile::after,
.guide-card::after,
.thread-card::after {
  content: "↗";
  position: absolute;
  inset: auto var(--space-md) var(--space-md) auto;
  color: var(--color-accent);
  font-size: var(--text-lg);
}
.route-tile:nth-child(even),
.guide-card:nth-child(even),
.thread-card:nth-child(even) {
  transform: translateY(var(--space-sm));
}
.route-tile small { width: fit-content; padding: 0.25rem 0.55rem; background: color-mix(in oklab, var(--color-accent) 14%, transparent); transform: rotate(-1deg); }
.tile-link,
.route-link {
  border: 0;
  padding: 0.35rem 0.55rem;
  background: color-mix(in oklab, var(--color-accent) 14%, transparent);
  clip-path: polygon(0.3rem 0, 100% 0, calc(100% - 0.3rem) 100%, 0 100%);
}

.listing-tools a,
.listing-tools button,
.route-card-actions a,
.route-card-actions button,
.decision-cta a,
.decision-cta button {
  clip-path: polygon(0.35rem 0, 100% 0, calc(100% - 0.35rem) 100%, 0 100%);
}
.listing-tools a,
.listing-tools button {
  border-style: dashed;
}
.route-venue-card { overflow: hidden; }
.route-venue-card > img { border-block-end: 0.35rem solid var(--color-accent); }
.route-score {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  border: 0;
  border-inline-start: 0.3rem solid var(--color-accent);
  border-radius: 0;
  background: color-mix(in oklab, var(--color-overlay) 88%, transparent);
  box-shadow: 0.18rem 0.2rem 0
    color-mix(in oklab, var(--color-accent) 48%, transparent);
  transform: rotate(2deg);
  white-space: nowrap;
}
.route-tags span { border: 0; box-shadow: none; }
.route-facts div { border: 0; background-image: linear-gradient(
    90deg,
    var(--color-rule-2) 50%,
    transparent 0
  ); background-position: bottom; background-size: 0.55rem 1px; background-repeat: repeat-x; }

.venue-hero { position: relative; }
.venue-gallery { transform: rotate(-0.2deg); }
.venue-gallery-stage { clip-path: polygon(
    0 0.7rem,
    0.7rem 0,
    100% 0,
    100% calc(100% - 0.7rem),
    calc(100% - 0.7rem) 100%,
    0 100%
  ); }
.venue-gallery-thumb { clip-path: polygon(
    0 0.35rem,
    0.35rem 0,
    100% 0,
    100% calc(100% - 0.35rem),
    calc(100% - 0.35rem) 100%,
    0 100%
  ); }
.venue-decision {
  position: relative;
  border: 0;
  background: var(--color-paper-2);
  box-shadow: 0.75rem 0.75rem 0 color-mix(in oklab, var(--color-accent) 23%, transparent),
    inset 0 0 0 var(--rule-hair) var(--color-rule);
  clip-path: polygon(
    1rem 0,
    100% 0,
    100% calc(100% - 1rem),
    calc(100% - 1rem) 100%,
    0 100%,
    0 1rem
  );
}
.venue-decision::before { content: "업체 확인표"; width: fit-content; padding: 0.3rem 0.65rem; background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 700; transform: rotate(-2deg); }

.fit-panel:nth-child(even) { transform: translateY(var(--space-sm)); }
.fit-panel h3 { display: inline-block; width: fit-content; padding: 0.25rem 0.55rem; background: var(--color-accent); color: var(--color-accent-ink); transform: rotate(-1deg); }
.course-table { border-spacing: 0.35rem; border-collapse: separate; background: transparent; }
.course-table th { border: 0; background: var(--color-accent); color: var(--color-accent-ink); }
.course-table td { border: 0; background: var(--color-paper-2); box-shadow: inset 0 -1px var(--color-rule); }
.prototype-note { border: 0; border-inline-start: 0.4rem solid var(--color-accent); background: var(--color-paper-2); }

.review-card::before { content: "후기"; position: absolute; inset: -0.35rem var(--space-md) auto auto; padding: 0.2rem 0.55rem; background: var(--color-focus); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 700; transform: rotate(3deg); }
.thread-card { border-inline-start: 0.35rem solid var(--color-accent); clip-path: polygon(0 0, 100% 0, calc(100% - 0.65rem) 100%, 0 100%); }
.guide-card { min-height: 12rem; }
.guide-card.has-cover { min-height: 0; overflow: hidden; padding: 0; }
.guide-card-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-block-end: 0.3rem solid var(--color-accent); }
.guide-card-cover img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) contrast(1.02) brightness(1.1); transition: transform var(--dur-medium),
    filter var(--dur-medium); }
.guide-card-copy { min-height: 8.5rem; padding: var(--space-md); }
.guide-card.has-cover::after { z-index: 2; }
.article-toc,
.article-answer,
.post-body,
.comment,
.route-form {
  border: 0;
  background: var(--color-paper-2);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule);
  clip-path: polygon(
    0 0.65rem,
    0.65rem 0,
    100% 0,
    100% calc(100% - 0.65rem),
    calc(100% - 0.65rem) 100%,
    0 100%
  );
}
.article-toc::before { content: "빠른 이동"; display: block; width: fit-content; margin-block-end: var(--space-sm); padding: 0.25rem 0.55rem; background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 700; transform: rotate(-2deg); }
.article-answer { border-inline-start: 0.45rem solid var(--color-accent); }
.article-body h2 { position: relative; padding-inline-start: var(--space-md); }
.article-body h2::before { content: ""; position: absolute; inset: 0.15em auto 0.15em 0; width: 0.32rem; background: var(--color-accent); transform: rotate(4deg); }
.comment { border-inline-start: 0.4rem solid var(--color-accent); clip-path: polygon(0 0, 100% 0, calc(100% - 0.65rem) 100%, 0 100%); }
.route-form { box-shadow: 0.65rem 0.65rem 0 color-mix(in oklab, var(--color-accent) 20%, transparent),
    inset 0 0 0 var(--rule-hair) var(--color-rule); }
.route-form input,
.route-form textarea,
.route-form select {
  border-style: dashed;
}
.route-form button { clip-path: polygon(0.45rem 0, 100% 0, calc(100% - 0.45rem) 100%, 0 100%); }
.profile-stat { display: inline-block; transform: rotate(-2deg); }

@media (hover: hover) and (pointer: fine) {
  .route-tile:hover,
  .route-venue-card:hover,
  .guide-card:hover,
  .thread-card:hover {
    filter: drop-shadow(
      0.55rem 0.55rem 0
        color-mix(in oklab, var(--color-accent) 22%, transparent)
    );
  }
}

@media (max-width: 39.99rem) {
  .city-route-hero { min-height: 40rem; }
  .city-route-hero::before {
    background-image: var(--city-hero-mobile-image);
    background-position: right bottom;
    background-size: auto 115%;
    filter: saturate(1.06) contrast(1.02) brightness(0.94);
  }
  .city-route-hero::after {
    background:
      radial-gradient(
        circle at 78% 18%,
        var(--city-hero-glow),
        transparent 28%
      ),
      linear-gradient(
        90deg,
        color-mix(in oklab, var(--color-paper) 90%, transparent) 0%,
        color-mix(in oklab, var(--color-paper) 70%, transparent) 46%,
        color-mix(in oklab, var(--color-paper) 26%, transparent) 78%,
        color-mix(in oklab, var(--color-paper) 9%, transparent) 100%
      ),
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--color-paper) 10%, transparent) 0%,
        transparent 54%,
        color-mix(in oklab, var(--color-paper) 42%, transparent) 100%
      );
  }
  .route-summary { box-shadow: 0.4rem 0.4rem 0
      color-mix(in oklab, var(--color-accent) 24%, transparent); }
  .route-tile:nth-child(n),
  .guide-card:nth-child(n),
  .thread-card:nth-child(n),
  .fit-panel:nth-child(n) {
    transform: none;
  }
}

@media (min-width: 60rem) {
  .city-route-hero .route-summary {
    align-self: end;
    margin-block-start: clamp(13rem, 20vw, 17rem);
  }
}

/* Micro-component refinement · route detail system */
.route-summary::before {
  content: "✓ 확인표";
  z-index: 2;
  inset: 0.45rem var(--space-lg) auto auto;
  padding: 0.32rem 0.72rem;
  border: var(--rule-hair) solid var(--color-paper);
  background: var(--color-focus);
  box-shadow: 0.25rem 0.28rem 0 var(--color-accent);
  color: var(--color-accent-ink);
  transform: rotate(2deg);
}
.route-hero .route-summary { padding-block-start: 2.15rem; }
.route-summary dt { display: flex; align-items: center; gap: var(--space-xs); }
.route-summary dt::before { content: ""; width: 0.35rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-accent); }
.route-summary dd { max-width: 62%; }

.section-head::after { border-radius: 50%; filter: drop-shadow(
    0 0 0.35rem color-mix(in oklab, var(--color-accent) 28%, transparent)
  ); }
.route-tile small,
.guide-meta span:first-child,
.thread-meta span:first-child {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.route-tile small::before,
.guide-meta span:first-child::before,
.thread-meta span:first-child::before {
  content: "";
  width: 0.38rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-accent);
}
.listing-tools { padding-block: var(--space-xs); }
.listing-tools .is-active { position: relative; padding-inline-start: calc(var(--space-md) + 0.6rem); }
.listing-tools .is-active::before { content: "✓"; position: absolute; inset-inline-start: var(--space-sm); font-weight: 700; }

.route-venue-card { transition: transform var(--dur-long) var(--ease-out),
    filter var(--dur-long) var(--ease-out); }
.route-venue-top { position: relative; min-height: 4.4rem; padding-inline-end: 6.3rem; }
.route-venue-top h3 { align-self: center; }
.route-score {
  position: absolute;
  inset: 0 0 auto auto;
  width: auto;
  min-width: 0;
  padding: 0.48rem 0.65rem;
  outline: 0;
  font-size: var(--text-sm);
  line-height: 1;
}
.route-facts dt::before { content: ""; display: inline-block; width: 0.32rem; aspect-ratio: 1; margin-inline-end: var(--space-xs); background: var(--color-accent); transform: rotate(45deg); }
.route-price {
  position: relative;
  margin-inline: calc(var(--space-lg) * -1);
  padding: var(--space-md) var(--space-lg);
  background: color-mix(in oklab, var(--color-accent) 8%, var(--color-paper));
  box-shadow: inset 0.32rem 0 var(--color-accent);
}
.route-price::before,
.route-price::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  width: 0.7rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-paper-2);
  transform: translateY(-50%);
}
.route-price::before { inset-inline-start: -0.35rem; }
.route-price::after { inset-inline-end: -0.35rem; }
.route-card-actions a,
.route-card-actions button {
  position: relative;
  overflow: hidden;
}
.route-card-actions .primary::after { content: "→"; margin-inline-start: var(--space-xs); transition: transform var(--dur-short); }
.route-card-actions .primary:hover::after { transform: translateX(0.22rem); }

.venue-decision::before {
  content: "✓ 업체 확인";
  justify-self: end;
  padding: 0.35rem 0.72rem;
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--color-accent) 9%, transparent);
  color: var(--color-accent);
  transform: rotate(2deg);
}
.venue-decision h1 { position: relative; padding-block-end: var(--space-sm); }
.venue-decision h1::after { content: ""; position: absolute; inset: auto 0 0 0; height: 0.18rem; background: linear-gradient(90deg, var(--color-accent), transparent); transform: rotate(-0.5deg); }
.venue-identity-panel { position: relative; display: grid; gap: var(--space-lg); margin: 0; overflow: visible; border: 0; padding: 0; background: transparent; box-shadow: none; clip-path: none; }
.venue-identity-panel::after { display: none; }
.venue-identity-tag-group { display: grid; gap: var(--space-sm); margin-inline: calc(var(--space-lg) * -1); padding: var(--space-md) var(--space-lg) calc(var(--space-lg) + 0.1rem); border-block-start: var(--rule-hair) dashed var(--color-rule-2); border-block-end: 0.32rem solid var(--color-accent); background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--color-accent) 7%, transparent),
    transparent 76%
  ); }
.venue-identity-tag-group > strong { width: fit-content; color: var(--color-muted); font-size: var(--text-sm); font-weight: 850; line-height: 1.35; letter-spacing: 0.025em; }
.venue-identity-tags { position: relative; z-index: 1; align-items: center; }
.venue-identity-tags span:is(.is-boomboom, .is-premium, .is-choice) { --keyword-color: var(--color-accent); --keyword-surface: var(--color-paper); position: relative; isolation: isolate; overflow: hidden; border: var(--rule-hair) solid var(--keyword-color); padding: 0.3rem 0.62rem; background: var(--keyword-surface); box-shadow: 0 0 0.85rem color-mix(in oklab, var(--keyword-color) 24%, transparent),
    inset 0 0 0.65rem color-mix(in oklab, var(--keyword-color) 9%, transparent); color: var(--keyword-color); text-shadow: 0 0 0.5rem
    color-mix(in oklab, var(--keyword-color) 48%, transparent); animation: venue-keyword-glow 3.8s ease-in-out infinite; }
.venue-identity-tags span:is(.is-boomboom, .is-premium, .is-choice)::before { width: 0.52rem; height: 0.52rem; background: var(--keyword-color); box-shadow: 0 0 0.68rem var(--keyword-color); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); transform: none; animation: venue-keyword-spark 1.9s ease-in-out infinite; }
.venue-identity-tags span:is(.is-boomboom, .is-premium, .is-choice)::after { content: ""; position: absolute; z-index: -1; inset: -80% auto -80% -55%; width: 38%; background: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklab, var(--keyword-color) 32%, transparent),
    transparent
  ); transform: skewX(-18deg); animation: venue-keyword-sheen 5.2s ease-in-out infinite; }
.venue-identity-tags span.is-boomboom { --keyword-color: var(--color-tag-boomboom); --keyword-surface: color-mix(in oklab, var(--color-tag-boomboom) 12%, var(--color-paper)); }
.venue-identity-tags span.is-premium { --keyword-color: var(--color-tag-premium); --keyword-surface: color-mix(in oklab, var(--color-tag-premium) 12%, var(--color-paper)); animation-delay: -1.25s; }
.venue-identity-tags span.is-choice { --keyword-color: var(--color-tag-choice); --keyword-surface: color-mix(in oklab, var(--color-tag-choice) 12%, var(--color-paper)); animation-delay: -2.35s; }
@keyframes venue-keyword-glow {
  0%,
  100% {
    filter: brightness(0.94);
    box-shadow:
      0 0 0.55rem color-mix(in oklab, var(--keyword-color) 18%, transparent),
      inset 0 0 0.55rem
        color-mix(in oklab, var(--keyword-color) 7%, transparent);
  }
  50% {
    filter: brightness(1.12);
    box-shadow:
      0 0 1rem color-mix(in oklab, var(--keyword-color) 38%, transparent),
      inset 0 0 0.8rem
        color-mix(in oklab, var(--keyword-color) 15%, transparent);
  }
}
@keyframes venue-keyword-spark {
  0%,
  100% { opacity: 0.58; transform: scale(0.78) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.12) rotate(45deg); }
}
@keyframes venue-keyword-sheen {
  0%,
  64% {
    transform: translateX(0) skewX(-18deg);
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  88%,
  100% {
    transform: translateX(430%) skewX(-18deg);
    opacity: 0;
  }
}
.venue-decision .route-summary { padding-block-start: 0; box-shadow: none; background: transparent; clip-path: none; }
.venue-decision .route-summary::before { display: none; }
.venue-decision .route-summary div { padding-inline: 0; }
.decision-cta { grid-template-columns: 1fr 1fr; }
.decision-cta .primary { grid-column: 1 / -1; position: relative; }
.decision-cta .primary::after { content: "→"; margin-inline-start: var(--space-xs); }
.decision-cta a { background: color-mix(in oklab, var(--color-paper) 40%, transparent); }

.fit-grid { gap: var(--space-lg); }
.fit-panel {
  min-height: 18rem;
  padding: var(--space-xl);
  background:
    linear-gradient(
    145deg,
    color-mix(in oklab, var(--color-accent) 6%, var(--color-paper-2)),
    var(--color-paper-2)
  );
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule),
    0.55rem 0.55rem 0 color-mix(in oklab, var(--color-accent) 12%, transparent);
}
.fit-panel:nth-child(even) { background: linear-gradient(
    145deg,
    color-mix(in oklab, var(--color-focus) 4%, var(--color-paper-2)),
    var(--color-paper-2)
  ); }
.fit-panel h3 {
  margin-block-end: var(--space-lg);
  clip-path: polygon(0.35rem 0, 100% 0, calc(100% - 0.35rem) 100%, 0 100%);
}
.fit-panel ul { padding: 0; list-style: none; }
.fit-panel li { position: relative; padding-inline-start: 1.7rem; }
.fit-panel li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--color-accent); font-weight: 700; }
.fit-panel:nth-child(even) li::before { content: "!"; width: 1.15rem; aspect-ratio: 1; display: grid; place-items: center; border: var(--rule-hair) solid var(--color-accent); border-radius: 50%; font-size: var(--text-xs); line-height: 1; }

.course-table-wrap { overflow-x: auto; padding: var(--space-xs); margin: calc(var(--space-xs) * -1); scrollbar-width: thin; }
.course-table { display: table; min-width: 42rem; table-layout: fixed; }
.course-table th { position: relative; padding-block: var(--space-md); }
.course-table th:first-child { clip-path: polygon(0.45rem 0, 100% 0, 100% 100%, 0 100%, 0 0.45rem); }
.course-table th:last-child { clip-path: polygon(
    0 0,
    calc(100% - 0.45rem) 0,
    100% 0.45rem,
    100% 100%,
    0 100%
  ); }
.course-table tbody tr { transition: transform var(--dur-short),
    background var(--dur-short); }
.course-table tbody tr:hover td { background: color-mix(in oklab, var(--color-accent) 7%, var(--color-paper-2)); }
.course-note,
.prototype-note {
  position: relative;
  padding-inline-start: calc(var(--space-md) + 0.45rem);
}
.course-note::before,
.prototype-note::before {
  content: "i";
  position: absolute;
  inset: 50% auto auto var(--space-sm);
  width: 1.1rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: 50%;
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  transform: translateY(-50%);
}

.review-list { gap: var(--space-lg); }
.review-card { min-height: 12rem; padding: var(--space-xl); overflow: hidden; }
.review-card::before {
  content: "인증 후기";
  inset: var(--space-md) var(--space-md) auto auto;
  border: var(--rule-hair) solid var(--color-accent);
  background: color-mix(in oklab, var(--color-accent) 9%, var(--color-paper-2));
  color: var(--color-accent);
  transform: rotate(2deg);
}
.review-card::after { content: "“"; position: absolute; inset: auto var(--space-md) -0.45em auto; color: color-mix(in oklab, var(--color-accent) 13%, transparent); font-family: serif; font-size: 8rem; line-height: 1; }
.review-meta,
.review-card p {
  position: relative;
  z-index: 1;
}
.review-meta { padding-inline-end: 5rem; }
.review-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-xl);
  border: var(--rule-hair) solid var(--color-rule);
  border-inline-start: 0.4rem solid var(--color-accent);
  background: var(--color-paper-2);
}
.review-empty > span {
  display: grid;
  width: 4.25rem;
  aspect-ratio: 1;
  place-items: center;
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: 50%;
  color: var(--color-accent);
  font-weight: 800;
  transform: rotate(-7deg);
}
.review-empty h3 { font-size: var(--text-lg); }
.review-empty p { margin-block-start: var(--space-xs); color: var(--color-muted); }
.review-empty a {
  grid-column: 2;
  width: fit-content;
  padding-block-end: 0.15rem;
  border-block-end: var(--rule-hair) solid var(--color-accent);
  color: var(--color-accent);
  font-weight: 800;
}

.venue-seo-section { background: color-mix(in oklab, var(--color-accent) 2.5%, var(--color-paper)); }
.venue-seo-body {
  display: grid;
  gap: var(--space-xl);
  margin-block-start: var(--space-md);
  padding: clamp(var(--space-lg), 5vw, var(--space-2xl));
  border: var(--rule-hair) solid var(--color-rule);
  border-inline-start: 0.45rem solid var(--color-accent);
  background: var(--color-paper-2);
}
.venue-fit-disclosure { display: grid; gap: var(--space-xl); }
.venue-fit-disclosure .fit-grid { width: 100%; }
.venue-seo-divider { width: 100%; height: var(--rule-hair); background: linear-gradient(
    90deg,
    var(--color-accent),
    var(--color-rule) 42%,
    transparent
  ); }
.venue-seo-body > header { display: grid; gap: var(--space-sm); max-width: 72ch; }
.venue-seo-body > header h2 { font-family: var(--font-display); font-size: clamp(var(--text-xl), 4vw, var(--text-2xl)); font-weight: 400; line-height: 1.05; }
.venue-seo-body > header > p:last-child { color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.75; }
.venue-seo-body > section { display: grid; gap: var(--space-sm); max-width: 76ch; }
.venue-seo-body h3 { padding-inline-start: var(--space-sm); border-inline-start: 0.25rem solid var(--color-accent); font-size: var(--text-lg); }
.venue-seo-body p,
.venue-seo-body li,
.venue-seo-body dd {
  color: var(--color-muted);
  line-height: 1.8;
}
.venue-seo-body ol { display: grid; gap: var(--space-xs); padding-inline-start: 1.4rem; }
.venue-seo-body a { color: var(--color-accent); font-weight: 750; text-decoration: underline; text-underline-offset: 0.2em; }
.venue-seo-faq dl { display: grid; gap: var(--space-sm); }
.venue-seo-faq dl > div { padding: var(--space-md); background: color-mix(in oklab, var(--color-accent) 4%, var(--color-paper)); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); }
.venue-seo-faq dt { font-weight: 800; }
.venue-seo-faq dd { margin-block-start: var(--space-xs); }
.venue-seo-updated { padding-block-start: var(--space-md); border-block-start: var(--rule-hair) dashed var(--color-rule); font-size: var(--text-xs); }

.article-toc { position: relative; }
.article-toc::after { content: ""; position: absolute; inset: var(--space-lg) 0 var(--space-lg) auto; width: 0.3rem; background: var(--color-accent); clip-path: polygon(0 0, 100% 6%, 70% 100%, 18% 93%); }
.article-toc nav a { position: relative; padding-inline-start: var(--space-md); }
.article-toc nav a::before { content: ""; position: absolute; inset: 0.65em auto auto 0; width: 0.3rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-accent); }
.article-answer { position: relative; padding-inline-start: calc(var(--space-xl) + var(--space-md)); }
.article-answer::before { content: "답"; position: absolute; inset: var(--space-lg) auto auto var(--space-lg); width: 2rem; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-display); }

.route-form { position: relative; padding: 3.5rem var(--space-xl) var(--space-xl); }
.route-form::before { content: "입력표"; position: absolute; inset: 0.65rem var(--space-lg) auto auto; padding: 0.28rem 0.65rem; background: var(--color-focus); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 700; transform: rotate(2deg); }
.route-form label { padding-block-end: var(--space-sm); background-image: linear-gradient(
    90deg,
    var(--color-rule-2) 50%,
    transparent 0
  ); background-position: bottom; background-size: 0.55rem 1px; background-repeat: repeat-x; }
.route-form input,
.route-form textarea,
.route-form select {
  transition:
    border-color var(--dur-short),
    background var(--dur-short);
}
.route-form input:focus,
.route-form textarea:focus,
.route-form select:focus {
  border-color: var(--color-accent);
  background: color-mix(in oklab, var(--color-accent) 4%, var(--color-paper));
  outline: 0;
}

.profile-card::before { content: "내 활동"; display: inline-block; margin-block-end: var(--space-lg); padding: 0.28rem 0.62rem; background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 700; transform: rotate(-2deg); }

@media (hover: hover) and (pointer: fine) {
  .route-venue-card:hover { transform: translateY(-0.35rem); }
}

@media (min-width: 40rem) {
  .review-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 39.99rem) {
  .route-summary::before { inset-inline-end: var(--space-md); }
  .route-venue-top { padding-inline-end: 6rem; }
  .route-score { width: auto; }
  .decision-cta { grid-template-columns: 1fr; }
  .decision-cta .primary { grid-column: auto; }
  .fit-panel { min-height: 0; padding: var(--space-lg); }
.course-star-heading { display: grid; gap: var(--space-sm); }
.course-star-card::after { font-size: 4rem; }
.course-star-visual { min-height: 20rem; padding: var(--space-sm); }
.course-star-visual svg { width: min(92%, 21rem); }
.course-star-ranking { gap: var(--space-md); padding: var(--space-lg); }
.course-star-ranking > header { grid-template-columns: minmax(0, 1fr); }
.course-star-ranking > header small { width: fit-content; }
.course-star-ranking button { grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: var(--space-sm); min-height: 4.25rem; padding-inline: var(--space-sm); }
.course-star-ranking button > span:first-child,
  .course-star-ranking button b { font-size: var(--text-md); }
  .course-table { display: table; min-width: 0; table-layout: auto; font-size: var(--text-xs); }
  .course-table th,
  .course-table td {
    padding: 0.65rem 0.45rem;
  }
  .course-table th:first-child,
  .course-table td:first-child {
    width: 48%;
  }
  .review-card { min-height: 10rem; padding: var(--space-lg); }
  .review-empty { grid-template-columns: 1fr; padding: var(--space-lg); }
  .review-empty a { grid-column: 1; }
  .venue-seo-body { gap: var(--space-lg); padding: var(--space-lg); }
  .venue-review-heading { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-sm); }
  .venue-review-heading .section-head { grid-column: 1 / -1; }
  .venue-location-frame .venue-map-preview { min-height: 20rem; }
  .venue-map-preview > div { inset: auto var(--space-sm) var(--space-sm); grid-template-columns: 1fr; gap: var(--space-xs); }
  .venue-map-preview > div > a { width: fit-content; white-space: normal; }
  .venue-location-dock { gap: var(--space-md); padding: var(--space-lg); }
  .venue-location-landmarks { flex-wrap: nowrap; overflow-x: auto; padding-block-end: var(--space-xs); scroll-snap-type: x mandatory; scrollbar-width: none; }
  .venue-location-landmarks::-webkit-scrollbar { display: none; }
  .venue-location-landmarks > span { flex: 0 0 8.6rem; scroll-snap-align: start; }
  .venue-review-score { min-width: 0; justify-self: start; padding: var(--space-xs) var(--space-sm); transform: rotate(1deg); }
  .venue-review-heading .review-compose { justify-self: end; }
  .venue-review-heading .review-compose[open] { grid-column: 1 / -1; width: 100%; }
  .venue-review-grid { display: flex; gap: var(--space-sm); overflow-x: auto; padding-block-end: var(--space-md); scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--color-accent) var(--color-rule); }
  .venue-review-card { flex: 0 0 min(84vw, 21rem); scroll-snap-align: start; }
  .venue-review-images { display: flex; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; }
  .venue-review-images a { flex: 0 0 78%; scroll-snap-align: start; }
  .venue-review-footer { display: grid; grid-template-columns: 1fr; }
  .venue-review-footer > button,
  .venue-review-write {
    width: 100%;
  }
  .venue-faq-list summary { gap: var(--space-sm); padding: var(--space-sm); }
  .venue-faq-list details > p { padding: 0 var(--space-md) var(--space-md); }
  .venue-related-heading { align-items: start; }
  .venue-related-heading .section-head { margin-block-end: var(--space-md); }
  .venue-related-controls { margin-block-end: var(--space-md); }
  .venue-related-controls button { width: 2.5rem; }
  .venue-related-rail > article { flex-basis: min(82vw, 20rem); }
  .route-form { padding: 3.2rem var(--space-lg) var(--space-lg); }
}

/* City venue comparison rows */
.city-venues-section .route-venue-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
}
.city-comparison-card {
  position: relative;
  display: grid;
  min-height: 0;
  overflow: visible;
  border: 0;
  border-inline-start: 0.38rem solid var(--color-accent);
  background:
    linear-gradient(
      115deg,
      color-mix(in oklab, var(--color-accent) 5%, transparent),
      transparent 48%
    ),
    var(--color-paper-2);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule),
    0.75rem 0.75rem 0 color-mix(in oklab, var(--color-accent) 12%, transparent);
  clip-path: none;
  transition: transform var(--dur-long) var(--ease-out),
    box-shadow var(--dur-long) var(--ease-out);
}
.city-comparison-card[hidden] { display: none; }
.city-comparison-link { position: absolute; z-index: 3; inset: 0; }
.city-comparison-link:focus-visible { outline: var(--rule-bold) solid var(--color-focus); outline-offset: 0.25rem; }
.city-comparison-media {
  position: relative;
  height: 14rem;
  min-height: 0;
  overflow: hidden;
  background: var(--color-paper-3);
}
.city-comparison-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 42%,
    oklch(7% 0.018 40 / 0.76)
  );
  pointer-events: none;
}
.city-comparison-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  filter: saturate(1.2) contrast(1.1) brightness(0.78);
  transition: transform 700ms var(--ease-out),
    filter 700ms var(--ease-out);
}
.city-comparison-index {
  position: absolute;
  z-index: 2;
  inset: var(--space-lg) auto auto -0.75rem;
  display: flex;
  gap: var(--space-sm);
  align-items: baseline;
  padding: 0.55rem 0.9rem 0.5rem 1.15rem;
  background: var(--color-accent);
  box-shadow: 0.35rem 0.38rem 0 oklch(8% 0.02 40 / 0.7);
  color: var(--color-accent-ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
  transform: rotate(-2deg);
}
.city-comparison-index small { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 800; }
.city-comparison-operator {
  position: absolute;
  z-index: 2;
  inset: auto var(--space-md) var(--space-md) auto;
  padding: 0.35rem 0.65rem;
  border: var(--rule-hair) solid var(--color-accent);
  background: var(--color-overlay);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 800;
}
.city-comparison-copy { display: grid; grid-template-rows: auto auto minmax(0, 1fr); align-content: stretch; min-width: 0; padding: var(--space-lg); }
.city-comparison-head { display: flex; justify-content: space-between; gap: var(--space-lg); align-items: start; }
.city-comparison-head p { margin-block-end: 0.25rem; color: var(--color-accent); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; }
.city-comparison-head h3 { font-family: var(--font-display); font-size: clamp(var(--text-lg), 4vw, var(--text-xl)); font-weight: 400; line-height: 1.08; }
.city-comparison-score {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
  gap: var(--space-2xs);
  min-width: 5rem;
  padding: 0 0 var(--space-xs) var(--space-sm);
  border-inline-start: var(--rule-hair) solid var(--color-rule-2);
  text-align: end;
}
.city-comparison-score::after {
  content: "";
  position: absolute;
  inset: auto 0 0 auto;
  width: 1.8rem;
  height: 0.18rem;
  background: var(--color-accent);
}
.city-comparison-score b {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  line-height: 1;
}
.city-comparison-score b i {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-style: normal;
}
.city-comparison-score small {
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.city-comparison-score.is-empty { align-content: end; }
.city-comparison-tags {
  display: flex;
  flex-wrap: wrap;
  margin-block: var(--space-md);
  border-block: var(--rule-hair) solid var(--color-rule-2);
}
.city-comparison-tags span {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
  padding: 0.45rem 0.85rem 0.45rem 1.15rem;
  border-inline-end: var(--rule-hair) solid var(--color-rule-2);
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  font-weight: 750;
}
.city-comparison-tags span::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.55rem;
  width: 0.28rem;
  aspect-ratio: 1;
  background: var(--color-accent);
  transform: rotate(45deg);
}
.city-comparison-details { display: grid; gap: var(--space-lg); min-width: 0; height: 100%; }
.city-comparison-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; }
.city-comparison-facts div { display: grid; min-width: 0; align-content: center; padding: var(--space-sm) var(--space-md); border-block-end: var(--rule-hair) dashed var(--color-rule-2); }
.city-comparison-facts dt { color: var(--color-muted); font-size: var(--text-xs); }
.city-comparison-facts dd { margin: 0.2rem 0 0; color: var(--color-ink); font-weight: 800; overflow-wrap: anywhere; }
.city-comparison-decision {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr);
  align-content: center;
  gap: var(--space-xs);
  padding: var(--space-md);
  border-inline-start: 0.25rem solid var(--color-accent);
  background: color-mix(in oklab, var(--color-accent) 8%, var(--color-paper));
}
.city-comparison-status,
.city-comparison-decision > small,
.city-comparison-decision > strong { grid-column: 1 / -1; }
.city-comparison-status { display: inline-flex; gap: 0.45rem; align-items: center; width: fit-content; margin-block-end: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); font-weight: 800; }
.city-comparison-status i { width: 0.48rem; aspect-ratio: 1; border-radius: 50%; background: currentColor; box-shadow: 0 0 0.65rem currentColor; }
.city-comparison-status.is-open { color: var(--color-success); }
.city-comparison-status.is-closing { color: var(--color-accent); }
.city-comparison-status.is-closed { color: var(--color-muted); }
.city-comparison-decision > small { color: var(--color-muted); font-size: var(--text-xs); }
.city-comparison-decision > strong { margin-block-end: var(--space-xs); color: var(--color-accent); font-size: var(--text-lg); line-height: 1.1; }
.city-comparison-decision button,
.city-comparison-decision > a {
  position: relative;
  z-index: 4;
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  background: transparent;
  color: var(--color-ink);
  font-weight: 800;
}
.city-comparison-decision button { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }

@media (min-width: 48rem) {
  .city-comparison-card { grid-template-columns: clamp(18rem, 40vw, 26rem) minmax(0, 1fr); height: 24rem; min-height: 0; }
  .city-comparison-media,
  .city-comparison-media img {
    width: clamp(18rem, 40vw, 26rem);
    height: 24rem;
    min-height: 0;
  }
  .city-comparison-copy { padding-block: var(--space-md); }
  .city-comparison-score { padding: 0 0 var(--space-xs) var(--space-sm); }
  .city-comparison-details { grid-template-columns: minmax(0, 1.35fr) minmax(13rem, 0.75fr); }
}

@media (min-width: 48rem) and (max-width: 74.99rem) {
  .city-comparison-card { height: 25.375rem; }
  .city-comparison-media,
  .city-comparison-media img {
    height: 25.375rem;
  }
  .city-comparison-copy { padding-block: var(--space-sm); }
  .city-comparison-tags { flex-wrap: nowrap; overflow-x: auto; margin-block: var(--space-xs); scrollbar-width: none; }
  .city-comparison-tags span { flex: 0 0 auto; }
  .city-comparison-details { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .city-comparison-decision { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
  .city-comparison-status { grid-column: 1; margin: 0; }
  .city-comparison-decision > small { display: none; }
  .city-comparison-decision > strong { grid-column: 1; margin: 0; font-size: clamp(var(--text-base), 2vw, var(--text-md)); white-space: nowrap; }
  .city-comparison-decision button,
  .city-comparison-decision > a {
    grid-row: 1 / 3;
    align-self: stretch;
  }
  .city-comparison-decision button { grid-column: 2; }
  .city-comparison-decision > a { grid-column: 3; }
}

@media (min-width: 75rem) {
  .city-comparison-card { grid-template-columns: clamp(22rem, 36vw, 32rem) minmax(0, 1fr); height: 20.5rem; }
  .city-comparison-media,
  .city-comparison-media img {
    width: clamp(22rem, 36vw, 32rem);
    height: 20.5rem;
  }
  .city-comparison-copy { padding: var(--space-md) 1.5rem; }
  .city-comparison-tags { margin-block: 0.75rem; }
  .city-comparison-details { grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr); }
  .city-comparison-decision { padding: var(--space-sm); }
}

@media (hover: hover) and (pointer: fine) {
  .city-comparison-card:hover,
  .city-comparison-card:focus-within {
    transform: translateX(0.35rem);
    box-shadow:
      inset 0 0 0 var(--rule-hair) var(--color-rule),
      1rem 0.85rem 0 color-mix(in oklab, var(--color-accent) 20%, transparent);
    filter: none;
  }
  .city-comparison-card:hover .city-comparison-media img,
  .city-comparison-card:focus-within .city-comparison-media img {
    transform: scale(1.035);
    filter: saturate(1.32) contrast(1.12) brightness(0.84);
  }
}

@media (max-width: 39.99rem) {
  .city-comparison-card { display: block; height: auto; min-height: 0; }
  .city-comparison-media { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
  .city-comparison-media img { width: 100%; height: 100%; min-height: 0; object-position: center top; }
  .city-comparison-media::after {
    background: linear-gradient(
      180deg,
      transparent 0%,
      oklch(7% 0.018 40 / 0.08) 24%,
      oklch(8% 0.02 40 / 0.48) 43%,
      oklch(9% 0.021 40 / 0.7) 68%,
      oklch(12% 0.022 40 / 0.9) 100%
    );
  }
  .city-comparison-media img { filter: saturate(1.2) contrast(1.08) brightness(0.88); }
  .city-comparison-operator { inset: var(--space-md) var(--space-md) auto auto; }
  .city-comparison-copy { position: relative; z-index: 4; grid-template-rows: auto; padding: 10.75rem var(--space-md) var(--space-md); background: transparent; pointer-events: none; }
  .city-comparison-head { gap: var(--space-sm); }
  .city-comparison-head p { display: none; }
  .city-comparison-head h3 { font-size: var(--text-lg); }
  .city-comparison-score { min-width: 4.75rem; padding: 0 0 var(--space-xs) var(--space-xs); }
  .city-comparison-tags { flex-wrap: nowrap; overflow-x: auto; margin-block: var(--space-xs); pointer-events: auto; scrollbar-width: none; }
  .city-comparison-tags span { min-height: 2.1rem; flex: 0 0 auto; padding-block: 0.3rem; }
  .city-comparison-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .city-comparison-facts div { display: grid; gap: 0.1rem; align-content: start; padding: 0.45rem 0.4rem; }
  .city-comparison-facts dd { margin: 0; text-align: start; font-size: var(--text-sm); }
  .city-comparison-decision { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 0.4rem; padding: var(--space-sm); }
  .city-comparison-status { grid-column: 1; align-self: center; margin: 0; }
  .city-comparison-decision > small { display: none; }
  .city-comparison-decision > strong { grid-column: 2; align-self: center; justify-self: end; margin: 0; font-size: var(--text-base); white-space: nowrap; }
  .city-comparison-decision button,
  .city-comparison-decision > a {
    min-height: 2.4rem;
    padding-inline: var(--space-xs);
    pointer-events: auto;
    font-size: var(--text-sm);
  }
}

/* City landing page · discovery, community and search content */
.operator-filter-panel {
  display: grid;
  gap: var(--space-lg);
  margin-block-end: var(--space-2xl);
  padding: clamp(var(--space-lg), 4vw, var(--space-xl));
  border-inline-start: 0.45rem solid var(--color-accent);
  background:
    linear-gradient(
      115deg,
      color-mix(in oklab, var(--color-accent) 12%, transparent),
      transparent 52%
    ),
    var(--color-paper-2);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule);
  clip-path: polygon(
    0 0.85rem,
    0.85rem 0,
    100% 0,
    100% calc(100% - 0.85rem),
    calc(100% - 0.85rem) 100%,
    0 100%
  );
}
.operator-filter-panel header { display: grid; align-content: center; gap: var(--space-xs); }
.operator-filter-panel header h2 { font-family: var(--font-display); font-size: clamp(var(--text-lg), 3vw, var(--text-xl)); font-weight: 400; line-height: 1.1; }
.operator-filter-panel header > p:last-child { max-width: 44ch; color: var(--color-muted); font-size: var(--text-sm); }
.operator-jump-panel > header {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}
.operator-jump-panel > header > div { display: grid; gap: var(--space-xs); }
.operator-jump-panel > header > div > p:last-child { max-width: 44ch; color: var(--color-muted); font-size: var(--text-sm); }
.city-section-number {
  display: grid;
  place-items: center;
  min-width: 3.35rem;
  min-height: 3.35rem;
  padding: 0.3rem;
  border: var(--rule-hair) solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1;
  transform: rotate(-3deg);
  box-shadow: 0.3rem 0.3rem 0
    color-mix(in oklab, var(--color-accent) 24%, transparent);
}
.venue-operator-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  overflow: visible;
  margin: 0;
  padding: 0;
}
.venue-operator-filters button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-sm);
  min-height: 6rem;
  border: var(--rule-hair) solid var(--color-rule);
  border-block-end: 0.25rem solid var(--color-rule);
  background: color-mix(in oklab, var(--color-paper) 72%, transparent);
  padding: var(--space-md);
  color: var(--color-ink);
  text-align: start;
  clip-path: polygon(0.55rem 0, 100% 0, calc(100% - 0.55rem) 100%, 0 100%);
  transition: border-color var(--dur-short),
    background var(--dur-short),
    transform var(--dur-short);
}
.venue-operator-filters button > span:last-child { display: grid; gap: var(--space-2xs); }
.venue-operator-filters button strong { font-size: var(--text-md); }
.venue-operator-filters button small { color: var(--color-muted); font-size: var(--text-xs); }
.operator-filter-mark {
  display: grid;
  place-items: center;
  width: 2.8rem;
  aspect-ratio: 1;
  border: var(--rule-hair) solid var(--color-accent);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  transform: rotate(-4deg);
}
.venue-operator-filters button.is-active {
  border-color: var(--color-accent);
  border-block-end-color: var(--color-accent);
  background: var(--color-accent);
  padding: var(--space-md);
  color: var(--color-accent-ink);
}
.venue-operator-filters button.is-active::before {
  content: "선택";
  inset: var(--space-xs) var(--space-xs) auto auto;
  color: currentColor;
  font-size: var(--text-xs);
}
.venue-operator-filters button.is-active small { color: color-mix(in oklab, currentColor 72%, transparent); }
.venue-operator-filters button.is-active .operator-filter-mark { border-color: currentColor; color: currentColor; }
.venue-filter-status { margin: 0; color: var(--color-accent); font-weight: 700; }

.operator-jump-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  overflow: visible;
  margin: 0;
  padding: 0;
}
.operator-jump-links a {
  --operator-card-accent: var(--color-accent);
  position: relative;
  display: grid;
  gap: var(--space-md);
  min-height: 9.25rem;
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  border-block-end: 0.3rem solid color-mix(in oklab, var(--operator-card-accent) 45%, var(--color-rule));
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--operator-card-accent) 9%, transparent), transparent 48%),
    color-mix(in oklab, var(--color-paper) 82%, transparent);
  color: var(--color-ink);
  clip-path: polygon(0.55rem 0, 100% 0, calc(100% - 0.55rem) 100%, 0 100%);
  transition: border-color var(--dur-short),
    box-shadow var(--dur-short),
    background var(--dur-short),
    transform var(--dur-short);
}
.operator-jump-card--local { --operator-card-accent: #ff8f3d; }
.operator-jump-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-sm);
  align-items: center;
}
.operator-jump-card-head > span:nth-child(2) { display: grid; gap: var(--space-2xs); }
.operator-jump-card-head strong { font-size: var(--text-lg); line-height: 1.12; }
.operator-jump-links small { color: var(--color-muted); font-size: var(--text-xs); }
.operator-jump-card-head i {
  align-self: center;
  color: var(--operator-card-accent);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}
.operator-jump-card-facts {
  display: grid;
  grid-template-columns: minmax(6.5rem, 0.55fr) minmax(0, 1.45fr);
  border-block-start: var(--rule-hair) dashed color-mix(in oklab, var(--operator-card-accent) 38%, var(--color-rule));
}
.operator-jump-card-facts > span {
  display: grid;
  align-content: end;
  gap: 0.2rem;
  min-width: 0;
  padding-block-start: var(--space-sm);
}
.operator-jump-card-facts > span + span {
  padding-inline-start: var(--space-md);
  border-inline-start: var(--rule-hair) solid var(--color-rule);
}
.operator-jump-card-facts strong {
  color: var(--operator-card-accent);
  font-family: var(--font-display);
  font-size: clamp(var(--text-md), 2vw, var(--text-lg));
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.1;
  white-space: nowrap;
}

.city-operator-groups { display: grid; gap: clamp(var(--space-2xl), 7vw, var(--space-3xl)); }
.city-operator-group { scroll-margin-block-start: 7rem; }
.city-operator-group + .city-operator-group { position: relative; padding-block-start: var(--space-2xl); }
.city-operator-group + .city-operator-group::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--rule-hair);
  background: repeating-linear-gradient(
    90deg,
    var(--color-rule),
    var(--color-rule) 0.7rem,
    transparent 0.7rem,
    transparent 1.1rem
  );
}
.city-operator-heading {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-lg);
  align-items: center;
  margin-block-end: var(--space-lg);
  padding: clamp(var(--space-md), 3vw, var(--space-xl));
  border: var(--rule-hair) solid var(--color-rule);
  border-block-start: 0.32rem solid var(--color-accent);
  background: linear-gradient(
    112deg,
    color-mix(in oklab, var(--color-accent) 10%, var(--color-paper-2)),
    var(--color-paper) 62%
  );
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.8rem), calc(100% - 0.8rem) 100%, 0 100%);
}
.city-operator-heading::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -1rem var(--space-sm) auto;
  width: clamp(4rem, 12vw, 8rem);
  height: 0.32rem;
  background: var(--color-accent);
  transform: skewX(-32deg);
}
.city-operator-heading .city-operator-title { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
.city-operator-title > p { color: var(--color-accent); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; }
.city-operator-heading h3 {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 4vw, var(--text-2xl));
  font-weight: 400;
  line-height: 1.08;
}
.city-operator-count {
  display: grid;
  justify-items: end;
  gap: var(--space-2xs);
  min-width: 6.5rem;
  padding-inline-start: var(--space-lg);
  border-inline-start: var(--rule-hair) solid var(--color-rule);
}
.city-operator-count > span { color: var(--color-muted); font-size: var(--text-xs); font-weight: 800; }
.city-operator-count strong {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  line-height: 0.9;
}
.city-operator-count small { margin-inline-start: var(--space-2xs); color: var(--color-ink-2); font-family: var(--font-body); font-size: var(--text-xs); }
.city-operator-tier { display: grid; }
.city-assistant-section {
  overflow: hidden;
  background:
    radial-gradient(
      circle at 8% 12%,
      color-mix(in oklab, var(--color-accent) 18%, transparent),
      transparent 25%
    ),
    var(--color-paper-2);
}
.city-assistant-layout { display: grid; gap: var(--space-xl); align-items: start; }
.city-assistant-layout > header { display: grid; gap: var(--space-md); align-content: start; }
.city-assistant-layout > header h2 { max-width: 14ch; font-family: var(--font-display); font-size: clamp(var(--text-xl), 5vw, var(--text-3xl)); font-weight: 400; line-height: 1.05; }
.city-assistant-layout > header > p:not(.route-kicker) { max-width: 48ch; color: var(--color-ink-2); font-size: var(--text-md); }
.city-assistant-layout ul { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.city-assistant-layout li { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-muted); }
.city-assistant-layout li::before { content: ""; width: 0.45rem; aspect-ratio: 1; background: var(--color-accent); transform: rotate(45deg); }
.city-assistant-mount {
  min-width: 0;
  background: var(--color-paper);
  box-shadow: 0.85rem 0.85rem 0 color-mix(in oklab, var(--color-accent) 22%, transparent),
    inset 0 0 0 var(--rule-hair) var(--color-rule);
  clip-path: polygon(
    0 1rem,
    1rem 0,
    100% 0,
    100% calc(100% - 1rem),
    calc(100% - 1rem) 100%,
    0 100%
  );
}
.city-assistant-mount .assistant-quick:not(.is-engaged) .assistant-transcript {
  max-height: none;
  padding-block: var(--space-lg) var(--space-sm);
}
.city-assistant-mount .assistant-quick:not(.is-engaged) .assistant-bubble { display: none; }
.city-assistant-mount
  .assistant-quick:not(.is-engaged)
  .assistant-bubble:last-child {
  display: block;
  max-width: 100%;
  border: 0;
  border-inline-start: 0.3rem solid var(--color-accent);
  background: transparent;
  padding-block: var(--space-xs);
  clip-path: none;
  font-size: var(--text-md);
  font-weight: 700;
}
.city-assistant-mount .assistant-quick:not(.is-engaged) .assistant-controls { display: none; }

.city-section-heading { display: grid; gap: var(--space-md); margin-block-end: var(--space-xl); }
.city-section-heading .section-head { margin: 0; }
.section-all-link {
  align-self: end;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 2.8rem;
  border-block-end: var(--rule-bold) solid var(--color-accent);
  color: var(--color-accent);
  font-weight: 700;
}
.city-guide-grid { display: grid; gap: var(--space-md); }
.city-guide-card {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: var(--space-md);
  min-height: 15rem;
  padding: var(--space-xl);
  background: var(--color-paper-2);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule);
  clip-path: polygon(
    0 0.75rem,
    0.75rem 0,
    100% 0,
    100% calc(100% - 0.75rem),
    calc(100% - 0.75rem) 100%,
    0 100%
  );
}
.city-guide-card.has-cover { min-height: 0; overflow: hidden; padding: 0; align-content: stretch; }
.city-guide-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-block-end: 0.3rem solid var(--color-accent); }
.city-guide-cover img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) contrast(1.02) brightness(1.1); transition: transform var(--dur-medium),
    filter var(--dur-medium); }
.city-guide-card-copy { display: grid; align-content: space-between; gap: var(--space-sm); min-height: 11.5rem; }
.city-guide-card.has-cover .city-guide-card-copy { padding: var(--space-lg); }
.city-guide-card.is-featured { background: linear-gradient(
    145deg,
    color-mix(in oklab, var(--color-accent) 15%, var(--color-paper-2)),
    var(--color-paper-2)
  ); box-shadow: inset 0.35rem 0 var(--color-accent),
    inset 0 0 0 var(--rule-hair) var(--color-rule); }
.city-card-meta { display: flex; justify-content: space-between; gap: var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); }
.city-card-meta span:first-child { color: var(--color-accent); font-weight: 700; }
.city-guide-card h3 { font-family: var(--font-display); font-size: var(--text-md); font-weight: 400; line-height: 1.16; }
.city-guide-card p { color: var(--color-muted); }
.city-card-link { width: fit-content; color: var(--color-accent); font-weight: 700; }

.guide-cover-hero {
  display: grid;
  align-items: end;
  min-height: clamp(31rem, 66vw, 46rem);
  padding-block: clamp(var(--space-2xl), 10vw, var(--space-3xl));
  background: var(--color-paper);
}
.guide-cover-hero::before { display: none; }
.guide-cover-hero > img { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) contrast(1.02) brightness(1.08); }
.guide-cover-shade { position: absolute; z-index: 0; inset: 0; background: linear-gradient(
      90deg,
      oklch(6% 0.02 40 / 0.84) 0%,
      oklch(7% 0.022 40 / 0.58) 48%,
      oklch(7% 0.022 40 / 0.08) 100%
    ),
    linear-gradient(0deg, oklch(6% 0.02 40 / 0.58), transparent 52%); }
.guide-cover-content { position: relative; z-index: 1; align-items: end; }
.guide-cover-content > div:first-child { max-width: 50rem; }
.guide-cover-hero h1 { max-width: 17ch; }
.guide-cover-hero .route-lede { color: color-mix(in oklab, var(--color-ink) 86%, transparent); }
.guide-cover-hero .route-summary { background: color-mix(in oklab, var(--color-paper-2) 88%, transparent); backdrop-filter: blur(0.55rem); }
.city-guide-expand,
.city-forum-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  margin-block-start: var(--space-lg);
  border: var(--rule-hair) solid var(--color-accent);
  background: transparent;
  padding-inline: var(--space-lg);
  color: var(--color-accent);
  cursor: pointer;
  font-weight: 800;
}

.city-forum-section { background: color-mix(in oklab, var(--color-accent) 4%, var(--color-paper)); }
.city-forum-layout { display: grid; gap: var(--space-xl); }
.city-forum-group { display: grid; align-content: start; gap: var(--space-md); }
.city-forum-group > header { display: grid; gap: var(--space-2xs); padding-block-end: var(--space-sm); border-block-end: var(--rule-hair) solid var(--color-rule); }
.city-forum-group > header span { color: var(--color-accent); font-size: var(--text-xs); font-weight: 800; }
.city-forum-group > header h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; }
.city-forum-list { display: grid; gap: var(--space-sm); }
.city-forum-collection.has-more:not(.is-expanded) .city-forum-card.is-extra { display: none; }
.city-forum-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg);
  border-inline-start: 0.3rem solid var(--color-accent);
  background: var(--color-paper-2);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule);
}
.city-forum-number { color: color-mix(in oklab, var(--color-accent) 40%, var(--color-paper-2)); font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; }
.city-forum-card > div { display: grid; gap: var(--space-xs); }
.city-forum-card p { color: var(--color-muted); font-size: var(--text-xs); }
.city-forum-card h3 { font-size: var(--text-md); }

.city-seo-content { display: grid; gap: var(--space-2xl); }
.city-seo-head { display: grid; gap: var(--space-md); max-width: 64rem; }
.city-seo-head h2 { max-width: 20ch; font-family: var(--font-display); font-size: clamp(var(--text-xl), 5vw, var(--text-3xl)); font-weight: 400; line-height: 1.08; }
.city-seo-answer { max-width: 68ch; color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.75; }
.city-seo-head > span { color: var(--color-muted); font-size: var(--text-xs); }
.operator-inventory-note {
  margin-block-start: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-inline-start: 0.25rem solid var(--color-accent);
  background: color-mix(in oklab, var(--color-accent) 6%, var(--color-paper-2));
  color: var(--color-ink-2);
  line-height: 1.65;
}
.city-seo-richtext .payload-richtext {
  display: grid;
  gap: var(--space-md);
  max-width: 76ch;
}
.city-seo-richtext h2 {
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-lg);
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
  font-family: var(--font-display);
  font-size: clamp(var(--text-lg), 3.6vw, var(--text-xl));
  font-weight: 400;
  line-height: 1.25;
}
.city-seo-richtext h3 {
  margin-block-start: var(--space-xl);
  color: var(--color-accent);
  font-size: var(--text-md);
}
.city-seo-richtext p {
  color: var(--color-ink-2);
  font-size: var(--text-base);
  line-height: 1.85;
}
.city-seo-richtext a {
  color: var(--color-accent);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.22em;
}
.city-seo-richtext .payload-richtext > :first-child {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
}
.city-seo-topics { display: grid; gap: var(--space-md); }
.city-seo-topics section { position: relative; padding: var(--space-xl); border-block-start: 0.25rem solid var(--color-accent); background: var(--color-paper-2); }
.city-seo-topics section > span { position: absolute; inset: var(--space-md) var(--space-md) auto auto; color: color-mix(in oklab, var(--color-accent) 24%, transparent); font-family: var(--font-display); font-size: var(--text-2xl); }
.city-seo-topics h3 { max-width: 18ch; padding-inline-end: 2.5rem; font-size: var(--text-md); }
.city-seo-topics p { margin-block-start: var(--space-md); color: var(--color-ink-2); line-height: 1.75; }
.city-seo-faq { display: grid; gap: var(--space-xl); padding: clamp(var(--space-lg), 4vw, var(--space-xl)); background: var(--color-paper-2); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); }
.city-seo-faq h3 { margin-block-start: var(--space-xs); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; }
.city-seo-faq dl { display: grid; }
.city-seo-faq dl > div { display: grid; gap: var(--space-xs); padding-block: var(--space-md); border-block-end: var(--rule-hair) solid var(--color-rule-2); }
.city-seo-faq dt { font-weight: 700; }
.city-seo-faq dd { margin: 0; color: var(--color-muted); line-height: 1.65; }

@media (hover: hover) and (pointer: fine) {
  .venue-operator-filters button:hover,
  .operator-jump-links a:hover {
    border-color: var(--color-accent);
    transform: translateY(-0.15rem);
  }
  .city-guide-card:hover,
  .city-forum-card:hover {
    filter: drop-shadow(
      0.45rem 0.45rem 0
        color-mix(in oklab, var(--color-accent) 18%, transparent)
    );
  }
  .city-guide-card:hover .city-guide-cover img,
  .city-guide-card:focus-within .city-guide-cover img,
  .guide-card:hover .guide-card-cover img,
  .guide-card:focus-within .guide-card-cover img {
    transform: scale(1.04);
    filter: saturate(1.16) contrast(1.04) brightness(1.16);
  }
}

@media (min-width: 40rem) {
  .guide-cover-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
}

@media (min-width: 48rem) {
  .operator-filter-panel { grid-template-columns: minmax(17rem, 0.78fr) minmax(0, 1.22fr); align-items: center; }
  .operator-filter-panel .venue-filter-status { grid-column: 2; }
  .city-section-heading { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .city-guide-grid,
  .city-seo-topics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .city-guide-grid.has-more:not(.is-expanded) .city-guide-card.is-extra { display: none; }
  .city-forum-layout { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .city-seo-faq { grid-template-columns: minmax(14rem, 0.65fr) minmax(0, 1.35fr); align-items: start; }
  .city-assistant-mount .assistant-quick:not(.is-engaged) .assistant-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
  .city-assistant-layout { grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.28fr); }
  .city-assistant-layout > header { position: sticky; inset-block-start: 6rem; }
  .guide-cover-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 39.99rem) {
  .venue-decision-head { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .venue-decision-head .route-kicker { align-self: center; }
  .venue-decision-head h1 { grid-column: 1 / -1; grid-row: 2; }
  .venue-decision-rating { grid-column: 2; grid-row: 1; align-self: center; min-width: 5.5rem; padding: 0.55rem 0.65rem; transform: rotate(1deg); }
  .venue-operator-filters { grid-template-columns: 1fr; }
  .venue-operator-filters button { min-height: 5.2rem; }
  .operator-jump-links { grid-template-columns: 1fr; }
  .operator-jump-links a { min-height: 0; padding: var(--space-md); }
  .operator-jump-card-head { grid-template-columns: auto minmax(0, 1fr); }
  .operator-jump-card-head i { grid-column: 2; justify-self: start; }
  .operator-jump-card-facts { grid-template-columns: 0.65fr 1.35fr; }
  .operator-jump-card-facts > span + span { padding-inline-start: var(--space-sm); }
  .operator-jump-card-facts strong { font-size: clamp(1.08rem, 5.4vw, var(--text-md)); }
  .operator-jump-panel > header { grid-template-columns: minmax(0, 1fr); }
  .operator-jump-panel > header > .city-section-number { justify-self: start; }
  .city-operator-heading { grid-template-columns: minmax(0, 1fr); padding: var(--space-lg); }
  .city-operator-heading h3 { font-size: var(--text-lg); }
  .city-operator-count {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    padding: var(--space-sm) 0 0;
    border-block-start: var(--rule-hair) solid var(--color-rule);
    border-inline-start: 0;
  }
  .city-guides-section .route-wrap { overflow: hidden; }
  .city-guide-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-xs);
    padding: var(--space-xs) var(--space-xl) var(--space-md) var(--space-xs);
    scrollbar-width: none;
  }
  .city-guide-grid::-webkit-scrollbar { display: none; }
  .city-guide-card { flex: 0 0 min(78vw, 18rem); scroll-snap-align: start; }
  .guide-cover-hero { min-height: 38rem; }
  .guide-cover-shade { background: linear-gradient(
      180deg,
      oklch(6% 0.02 40 / 0.02) 0%,
      oklch(6% 0.02 40 / 0.42) 42%,
      oklch(6% 0.02 40 / 0.9) 100%
    ); }
  .city-guide-grid .city-guide-card.is-extra { display: grid; }
  .city-guide-expand { display: none; }
  .city-forum-card { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); }
  .city-forum-card .city-card-link { grid-column: 2; }
  .city-assistant-layout > header h2,
  .city-seo-head h2 {
    max-width: none;
  }
}

/* Guide editorial system */
.guide-library-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--space-2xl), 8vw, var(--space-3xl));
  border-block-end: var(--rule-hair) solid var(--color-rule);
  background:
    radial-gradient(
      circle at 84% 22%,
      color-mix(in oklab, var(--color-accent) 22%, transparent) 0 0.22rem,
      transparent 0.26rem
    ),
    radial-gradient(
      circle at 84% 22%,
      transparent 0 8rem,
      color-mix(in oklab, var(--color-accent) 16%, transparent) 8.05rem 8.15rem,
      transparent 8.2rem
    ),
    linear-gradient(
      118deg,
      var(--color-paper) 0 57%,
      color-mix(in oklab, var(--color-accent) 9%, var(--color-paper)) 57% 100%
    );
}
.guide-library-layout { display: grid; gap: clamp(var(--space-xl), 5vw, var(--space-3xl)); align-items: center; }
.guide-library-copy { display: grid; align-content: center; gap: var(--space-lg); }
.guide-library-copy h1,
.guide-city-hero h1 {
  max-width: 12ch;
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 7vw, 5.8rem);
  font-weight: 400;
  line-height: 0.98;
}
.guide-library-copy h1 em,
.guide-city-hero h1 em {
  color: var(--color-accent);
  font-style: normal;
}
.guide-library-copy > p:not(.route-kicker),
.guide-city-hero-copy > p:not(.route-kicker) {
  max-width: 58ch;
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.7;
}
.guide-topic-strip { display: flex; gap: var(--space-xs); overflow-x: auto; padding-block: var(--space-xs); scrollbar-width: none; }
.guide-topic-strip::-webkit-scrollbar { display: none; }
.guide-topic-strip a { flex: 0 0 auto; padding: 0.58rem 0.85rem; border: var(--rule-hair) solid var(--color-accent); color: var(--color-accent); font-size: var(--text-sm); font-weight: 800; transform: skewX(-4deg); }
.guide-library-copy dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-block: var(--rule-hair) solid var(--color-rule); }
.guide-library-copy dl > div { display: grid; gap: 0.2rem; padding: var(--space-sm); border-inline-end: var(--rule-hair) solid var(--color-rule); }
.guide-library-copy dl > div:last-child { border-inline-end: 0; }
.guide-library-copy dt { color: var(--color-muted); font-size: var(--text-xs); }
.guide-library-copy dd { margin: 0; color: var(--color-ink); font-weight: 850; }
.guide-library-feature {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(27rem, 48vw, 38rem);
  overflow: hidden;
  background: var(--color-paper-2);
  box-shadow: 0.7rem 0.75rem 0
    color-mix(in oklab, var(--color-accent) 28%, transparent);
  clip-path: polygon(
    1rem 0,
    100% 0,
    100% calc(100% - 1rem),
    calc(100% - 1rem) 100%,
    0 100%,
    0 1rem
  );
  transform: rotate(0.7deg);
}
.guide-library-feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.12) contrast(1.08) brightness(0.88); transition: transform var(--dur-long); }
.guide-library-feature > span { position: absolute; inset: 0; background: linear-gradient(
    180deg,
    transparent 18%,
    oklch(5% 0.02 35 / 0.18) 48%,
    oklch(5% 0.02 35 / 0.96) 100%
  ); }
.guide-library-feature > div { position: relative; display: grid; gap: var(--space-sm); padding: clamp(var(--space-lg), 5vw, var(--space-xl)); }
.guide-library-feature small { width: fit-content; padding: 0.3rem 0.65rem; background: var(--color-accent); color: var(--color-accent-ink); font-weight: 850; transform: rotate(-2deg); }
.guide-library-feature strong { max-width: 16ch; font-family: var(--font-display); font-size: clamp(var(--text-xl), 4vw, var(--text-2xl)); font-weight: 400; line-height: 1.08; }
.guide-library-feature p { max-width: 48ch; color: var(--color-ink-2); }
.guide-library-feature b { color: var(--color-accent); }
.guide-city-index { overflow: hidden; }
.guide-city-board-grid { display: grid; gap: var(--space-md); }
.guide-city-board {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 31rem;
  overflow: hidden;
  border-block-end: 0.35rem solid var(--color-accent);
  background: var(--color-paper-2);
  clip-path: polygon(
    0.8rem 0,
    100% 0,
    100% calc(100% - 0.8rem),
    calc(100% - 0.8rem) 100%,
    0 100%,
    0 0.8rem
  );
}
.guide-city-board > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) contrast(1.08) brightness(0.76); transition: transform var(--dur-long),
    filter var(--dur-long); }
.guide-city-board-shade { position: absolute; inset: 0; background: linear-gradient(
    180deg,
    oklch(4% 0.01 35 / 0.08),
    oklch(4% 0.01 35 / 0.94) 78%
  ); }
.guide-city-board-number { position: absolute; inset: var(--space-md) auto auto var(--space-md); color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; }
.guide-city-board-copy { position: relative; display: grid; gap: var(--space-sm); padding: var(--space-xl); }
.guide-city-board-copy small { color: var(--color-accent); font-weight: 800; }
.guide-city-board-copy > strong { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 400; line-height: 1; }
.guide-city-board-copy > em { max-width: 22ch; color: var(--color-ink-2); font-style: normal; font-weight: 750; }
.guide-city-board-copy > span { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.guide-city-board-copy i { padding: 0.25rem 0.5rem; border: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-xs); font-style: normal; }
.guide-city-board-copy b { margin-block-start: var(--space-sm); color: var(--color-accent); }

.guide-city-hero { position: relative; overflow: hidden; padding-block: clamp(var(--space-xl), 7vw, var(--space-3xl)) var(--space-xl); border-block-end: var(--rule-hair) solid var(--color-rule); background: linear-gradient(
    125deg,
    var(--color-paper),
    color-mix(in oklab, var(--color-accent) 8%, var(--color-paper))
  ); }
.guide-city-hero-layout { display: grid; gap: clamp(var(--space-xl), 6vw, var(--space-3xl)); align-items: center; }
.guide-city-hero-copy { position: relative; display: grid; gap: var(--space-lg); }
.guide-city-count { display: flex; align-items: center; gap: var(--space-md); width: fit-content; padding-block-start: var(--space-md); border-block-start: 0.3rem solid var(--color-accent); }
.guide-city-count strong { color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 400; line-height: 0.8; }
.guide-city-count span { color: var(--color-muted); font-size: var(--text-xs); font-weight: 750; line-height: 1.45; }
.guide-city-collage { position: relative; display: grid; grid-template-columns: 1.35fr 0.65fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); min-height: clamp(21rem, 40vw, 31rem); transform: rotate(0.5deg); }
.guide-city-collage img { width: 100%; height: 100%; min-height: 0; object-fit: cover; filter: saturate(1.1) contrast(1.06) brightness(0.84); }
.guide-city-collage img:first-child { grid-row: 1 / 3; }
.guide-city-collage::after { content: ""; position: absolute; inset: 0; border: var(--rule-hair) solid var(--color-accent); box-shadow: 0.55rem 0.6rem 0
    color-mix(in oklab, var(--color-accent) 22%, transparent); pointer-events: none; }
.guide-city-collage > span { position: absolute; inset: auto var(--space-lg) var(--space-lg) auto; padding: 0.55rem 0.85rem; background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-display); font-size: var(--text-lg); line-height: 0.95; text-align: end; transform: rotate(-3deg); }
.guide-city-topic-nav { display: flex; gap: var(--space-xs); overflow-x: auto; margin-block-start: clamp(var(--space-xl), 5vw, var(--space-2xl)); padding-block: var(--space-xs); scrollbar-width: none; }
.guide-city-topic-nav::-webkit-scrollbar { display: none; }
.guide-city-topic-nav a { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--space-xs); min-height: 2.8rem; padding-inline: var(--space-md); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); font-size: var(--text-sm); font-weight: 800; }
.guide-city-topic-nav span { color: var(--color-accent); font-family: var(--font-display); }
.guide-magazine-grid { display: grid; gap: var(--space-lg); }
.guide-mag-card { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); align-content: start; min-width: 0; overflow: hidden; background: var(--color-paper-2); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); clip-path: polygon(
    0 0.7rem,
    0.7rem 0,
    100% 0,
    100% calc(100% - 0.7rem),
    calc(100% - 0.7rem) 100%,
    0 100%
  ); scroll-margin-top: 6rem; }
.guide-mag-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-block-end: 0.3rem solid var(--color-accent); }
.guide-mag-cover img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) contrast(1.04) brightness(0.92); transition: transform var(--dur-long),
    filter var(--dur-long); }
.guide-mag-copy { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; align-content: stretch; gap: var(--space-sm); min-height: 14rem; padding: var(--space-lg); }
.guide-mag-meta { display: flex; justify-content: space-between; gap: var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); }
.guide-mag-meta span:first-child { color: var(--color-accent); font-weight: 800; }
.guide-mag-card h2 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; line-height: 1.12; }
.guide-mag-card p { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.65; }
.guide-mag-action { width: fit-content; margin-block-start: auto; color: var(--color-accent); font-weight: 850; }
.guide-mag-sticker { position: absolute; z-index: 2; inset: var(--space-md) auto auto -0.35rem; padding: 0.48rem 1.1rem; background: var(--color-accent); box-shadow: 0.25rem 0.3rem 0 var(--color-overlay); color: var(--color-accent-ink); font-weight: 900; transform: rotate(-4deg); }

.guide-reading-progress { position: fixed; z-index: 90; inset: 0 0 auto; height: 0.22rem; background: transparent; pointer-events: none; }
.guide-reading-progress i { display: block; width: 0; height: 100%; background: var(--color-accent); box-shadow: 0 0 0.7rem
    color-mix(in oklab, var(--color-accent) 64%, transparent); }
.guide-post-byline { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); margin-block-start: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 750; }
.guide-post-byline > span::before { content: ""; display: inline-block; width: 0.38rem; aspect-ratio: 1; margin-inline-end: var(--space-xs); border-radius: 50%; background: var(--color-accent); vertical-align: 0.12em; }
.guide-article-section { background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--color-accent) 3%, var(--color-paper)),
    var(--color-paper) 44%
  ); }
.guide-article-toc::before { display: none; }
.guide-article-toc { display: grid; gap: var(--space-sm); border-block-start: 0.35rem solid var(--color-accent); }
.guide-article-toc > span { width: fit-content; padding: 0.28rem 0.6rem; background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 850; transform: rotate(-2deg); }
.guide-article-toc nav a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-sm); min-height: 2.5rem; border-block-end: var(--rule-hair) dashed var(--color-rule-2); color: var(--color-ink-2); font-weight: 750; }
.guide-article-toc nav i { color: var(--color-accent); font-family: var(--font-display); font-style: normal; }
.guide-toc-back { margin-block-start: var(--space-md); color: var(--color-accent); font-size: var(--text-sm); font-weight: 850; }
.guide-article-body { max-width: 55rem; }

.guide-rich-table {
  min-width: 0;
  margin-block: var(--space-xl) var(--space-2xl);
  font-variant-numeric: tabular-nums;
}
.guide-rich-table:focus-visible {
  outline: 0.18rem solid var(--color-focus);
  outline-offset: var(--space-2xs);
}
.guide-rich-table table,
.guide-rich-table thead,
.guide-rich-table tbody,
.guide-rich-table tr,
.guide-rich-table th,
.guide-rich-table td {
  display: block;
}
.guide-rich-table table {
  width: 100%;
  border-collapse: collapse;
}
.guide-rich-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.guide-rich-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.guide-rich-table tbody {
  display: grid;
  gap: var(--space-md);
}
.guide-rich-table tbody tr {
  display: grid;
  min-width: 0;
  border-block-start: var(--rule-bold) solid var(--color-accent);
  background: var(--color-paper-2);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 0.65rem),
    calc(100% - 0.65rem) 100%,
    0 100%
  );
}
.guide-rich-table th,
.guide-rich-table td {
  min-width: 0;
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  text-align: start;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.guide-rich-table th p,
.guide-rich-table td p {
  margin: 0;
}
.guide-rich-table tbody th {
  color: var(--color-ink);
  font-size: var(--text-md);
  font-weight: 850;
}
.guide-rich-table tbody td {
  display: grid;
  grid-template-columns: minmax(5.5rem, 0.36fr) minmax(0, 1fr);
  gap: var(--space-sm);
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
  color: var(--color-ink-2);
  line-height: 1.65;
}
.guide-rich-table tbody td::before {
  content: attr(data-label);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 800;
}
.guide-rich-table tbody td:nth-child(3) {
  color: var(--color-accent);
  font-weight: 850;
}

@media (min-width: 40rem) {
  .guide-rich-table {
    overflow-x: auto;
    border-block-start: var(--rule-bold) solid var(--color-accent);
    background: var(--color-paper-2);
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  .guide-rich-table table {
    display: table;
    min-width: 42rem;
    table-layout: fixed;
  }
  .guide-rich-table thead {
    position: static;
    display: table-header-group;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
  .guide-rich-table tbody {
    display: table-row-group;
  }
  .guide-rich-table tr {
    display: table-row;
  }
  .guide-rich-table th,
  .guide-rich-table td {
    display: table-cell;
    padding: var(--space-md);
    border-block-end: var(--rule-hair) solid var(--color-rule-2);
  }
  .guide-rich-table thead th {
    background: var(--color-paper);
    color: var(--color-accent);
    font-size: var(--text-sm);
    font-weight: 900;
  }
  .guide-rich-table tbody tr {
    display: table-row;
    border: 0;
    background: transparent;
    clip-path: none;
  }
  .guide-rich-table tbody th {
    font-size: var(--text-sm);
  }
  .guide-rich-table tbody td {
    display: table-cell;
    color: var(--color-ink-2);
    line-height: 1.65;
  }
  .guide-rich-table tbody td::before {
    display: none;
  }
  .guide-rich-table th:nth-child(1),
  .guide-rich-table td:nth-child(1) {
    width: 18%;
  }
  .guide-rich-table th:nth-child(2),
  .guide-rich-table td:nth-child(2) {
    width: 17%;
  }
  .guide-rich-table th:nth-child(3),
  .guide-rich-table td:nth-child(3) {
    width: 18%;
    color: var(--color-accent);
    font-weight: 850;
  }
}

.guide-article-body .payload-richtext img {
  display: block;
  width: 100%;
  height: clamp(15rem, 56vw, 34rem);
  object-fit: cover;
  margin-block: var(--space-xl);
  border-block-end: 0.3rem solid var(--color-accent);
  background: var(--color-paper-2);
  box-shadow: 0.45rem 0.5rem 0
    color-mix(in oklab, var(--color-accent) 17%, transparent);
  clip-path: polygon(
    1rem 0,
    100% 0,
    100% calc(100% - 1rem),
    calc(100% - 1rem) 100%,
    0 100%,
    0 1rem
  );
}
.guide-answer-card { display: grid; gap: var(--space-md); padding: clamp(var(--space-lg), 4vw, var(--space-xl)); border-inline-start: 0.45rem solid var(--color-accent); background: color-mix(in oklab, var(--color-accent) 7%, var(--color-paper-2)); box-shadow: 0.45rem 0.5rem 0
    color-mix(in oklab, var(--color-accent) 17%, transparent); clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 0.7rem),
    calc(100% - 0.7rem) 100%,
    0 100%
  ); scroll-margin-top: 6rem; }
.guide-answer-card > span { width: fit-content; padding: 0.26rem 0.58rem; background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 900; transform: rotate(-1deg); }
.guide-answer-card > p { font-size: var(--text-md); font-weight: 750; line-height: 1.7; }
.guide-answer-card > div { display: flex; align-items: center; gap: var(--space-sm); overflow-x: auto; padding-block-start: var(--space-sm); border-block-start: var(--rule-hair) solid var(--color-rule); scrollbar-width: none; }
.guide-answer-card i { flex: 0 0 auto; color: var(--color-ink-2); font-size: var(--text-sm); font-style: normal; font-weight: 800; }
.guide-answer-card b { color: var(--color-accent); }
.guide-article-body > .updated { margin-block: var(--space-lg) var(--space-2xl); }
.guide-article-step { display: grid; gap: var(--space-lg); scroll-margin-top: 6rem; }
.guide-article-step + .guide-article-step { margin-block-start: var(--space-3xl); padding-block-start: var(--space-xl); border-block-start: var(--rule-hair) solid var(--color-rule); }
.guide-article-step > header { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.guide-article-step > header > span { display: grid; width: 3.2rem; aspect-ratio: 1; place-items: center; border: var(--rule-hair) solid var(--color-accent); color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-lg); transform: rotate(-4deg); }
.guide-article-step > header div { display: grid; gap: 0.25rem; }
.guide-article-step > header small { color: var(--color-accent); font-size: var(--text-xs); font-weight: 850; }
.guide-article-step > header h2 { margin: 0; padding: 0; font-size: clamp(var(--text-xl), 4vw, var(--text-2xl)); }
.guide-article-step > header h2::before { display: none; }
.guide-article-step > p { color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.85; }
.guide-inline-media {
  display: grid;
  gap: 0;
  margin: var(--space-md) 0 var(--space-lg);
}
.guide-inline-media > div {
  position: relative;
  padding: 2px;
  overflow: hidden;
  background: linear-gradient(
    125deg,
    var(--color-accent),
    color-mix(in oklab, var(--color-accent) 28%, var(--color-rule)) 48%,
    var(--color-accent)
  );
  clip-path: polygon(
    1.15rem 0,
    100% 0,
    100% calc(100% - 1.15rem),
    calc(100% - 1.15rem) 100%,
    0 100%,
    0 1.15rem
  );
}
.guide-inline-media > div::after {
  content: "";
  position: absolute;
  inset: auto 1rem 0 auto;
  width: clamp(3.5rem, 12vw, 7rem);
  height: 0.25rem;
  background: var(--color-accent);
  transform: skewX(-24deg);
  box-shadow: 0 0 1rem color-mix(in oklab, var(--color-accent) 58%, transparent);
}
.guide-inline-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  clip-path: polygon(
    1.05rem 0,
    100% 0,
    100% calc(100% - 1.05rem),
    calc(100% - 1.05rem) 100%,
    0 100%,
    0 1.05rem
  );
}
.guide-inline-media figcaption {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border-inline-start: 0.18rem solid var(--color-accent);
  background: color-mix(in oklab, var(--color-paper-2) 90%, transparent);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.65;
}
.guide-compare-board { position: relative; margin-block-start: var(--space-md); padding: var(--space-xl) var(--space-md) var(--space-md); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.guide-compare-board > span { position: absolute; inset: -0.7rem auto auto var(--space-md); padding: 0.35rem 0.72rem; background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 900; transform: rotate(-2deg); }
.guide-operator-comparison { display: grid; gap: var(--space-sm); padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-inline-start: 0.32rem solid var(--color-accent); background: color-mix(in oklab, var(--color-accent) 5%, var(--color-paper-2)); }
.guide-operator-comparison > span { width: fit-content; padding: 0.3rem 0.65rem; background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 900; transform: rotate(-1deg); }
.guide-operator-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.guide-operator-table-wrap table { width: 100%; min-width: 42rem; border-collapse: collapse; table-layout: fixed; }
.guide-operator-table-wrap th,
.guide-operator-table-wrap td { padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule); text-align: start; vertical-align: top; line-height: 1.65; }
.guide-operator-table-wrap thead th { background: var(--color-paper); color: var(--color-accent); font-size: var(--text-sm); font-weight: 900; }
.guide-operator-table-wrap tbody th { width: 8rem; color: var(--color-ink); font-size: var(--text-sm); }
.guide-operator-table-wrap td { color: var(--color-ink-2); }
.guide-operator-comparison > small { color: var(--color-muted); font-size: var(--text-xs); line-height: 1.6; }
.guide-venue-recommendations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.guide-venue-recommendations > a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; min-height: 7.25rem; padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); transition: border-color var(--dur-fast), transform var(--dur-fast), background var(--dur-fast); }
.guide-venue-recommendations i { display: grid; width: 2.6rem; aspect-ratio: 1; place-items: center; border: var(--rule-hair) solid var(--color-accent); color: var(--color-accent); font-family: var(--font-display); font-style: normal; }
.guide-venue-recommendations span { display: grid; gap: 0.2rem; min-width: 0; }
.guide-venue-recommendations small { color: var(--color-accent); font-size: var(--text-xs); font-weight: 850; }
.guide-venue-recommendations strong { color: var(--color-ink); font-size: var(--text-md); line-height: 1.25; }
.guide-venue-recommendations b { color: var(--color-muted); font-size: var(--text-xs); font-weight: 650; line-height: 1.5; }
.guide-venue-recommendations em { color: var(--color-accent); font-size: var(--text-lg); font-style: normal; }
.guide-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.guide-checklist li { position: relative; min-height: 4rem; padding: var(--space-md) var(--space-md) var(--space-md) 3.1rem; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); font-weight: 750; }
.guide-checklist li::before { content: "✓"; position: absolute; inset: var(--space-md) auto auto var(--space-md); display: grid; width: 1.4rem; aspect-ratio: 1; place-items: center; border: var(--rule-hair) solid var(--color-accent); color: var(--color-accent); font-size: var(--text-xs); }
.guide-article-actions { display: grid; gap: var(--space-md); margin-block-start: var(--space-3xl); }
.guide-article-actions > a { display: grid; gap: var(--space-sm); min-width: 0; padding: var(--space-lg); border-block-start: 0.3rem solid var(--color-accent); background: var(--color-paper-2); }
.guide-article-actions small { color: var(--color-accent); font-weight: 800; }
.guide-article-actions strong { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; line-height: 1.15; }
.guide-article-actions span { color: var(--color-muted); font-size: var(--text-sm); font-weight: 750; }
.guide-next-section { overflow: hidden; background: color-mix(in oklab, var(--color-accent) 4%, var(--color-paper)); }
.guide-next-grid { display: grid; gap: var(--space-md); }
.guide-next-card { overflow: hidden; background: var(--color-paper-2); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); }
.guide-next-card > a { display: grid; height: 100%; }
.guide-next-card img { width: 100%; height: 13rem; object-fit: cover; border-block-end: 0.3rem solid var(--color-accent); filter: saturate(1.08) contrast(1.04) brightness(0.88); }
.guide-next-card span,
.guide-next-card strong,
.guide-next-card b {
  margin-inline: var(--space-lg);
}
.guide-next-card span { margin-block-start: var(--space-lg); color: var(--color-accent); font-size: var(--text-xs); font-weight: 800; }
.guide-next-card strong { margin-block-start: var(--space-sm); font-family: var(--font-display); font-size: var(--text-md); font-weight: 400; line-height: 1.18; }
.guide-next-card b { margin-block: var(--space-lg); color: var(--color-accent); font-size: var(--text-sm); }
.guide-next-all { display: inline-flex; min-height: 3rem; align-items: center; margin-block-start: var(--space-xl); border-block-end: var(--rule-hair) solid var(--color-accent); color: var(--color-accent); font-weight: 850; }
.guide-mentioned-venues { display: grid; gap: var(--space-sm); padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.guide-mentioned-venues > strong { color: var(--color-accent); font-size: var(--text-xs); }
.guide-mentioned-venues > div { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.guide-mentioned-venues a { border-block-end: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); font-size: var(--text-sm); font-weight: 750; }

@media (hover: hover) and (pointer: fine) {
  .guide-library-feature:hover > img,
  .guide-city-board:hover > img,
  .guide-mag-card:hover .guide-mag-cover img,
  .guide-next-card:hover img {
    transform: scale(1.035);
    filter: saturate(1.18) contrast(1.06) brightness(0.98);
  }
  .guide-city-board:hover { filter: drop-shadow(
      0.55rem 0.6rem 0 color-mix(in oklab, var(--color-accent) 24%, transparent)
    ); }
  .guide-venue-recommendations > a:hover { border-color: var(--color-accent); background: color-mix(in oklab, var(--color-accent) 8%, var(--color-paper-2)); transform: translateY(-0.16rem); }
}

@media (min-width: 48rem) {
  .guide-library-layout,
  .guide-city-hero-layout {
    grid-template-columns: minmax(0, 0.92fr) minmax(24rem, 1.08fr);
  }
  .guide-city-board-grid,
  .guide-next-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .guide-magazine-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; }
  .guide-mag-card { grid-column: span 4; }
  .guide-mag-card.is-featured { grid-column: span 8; }
  .guide-mag-card.is-featured .guide-mag-cover { aspect-ratio: 2.05 / 1; }
  .guide-mag-card.is-featured .guide-mag-copy { min-height: 13rem; }
  .guide-article-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
  .guide-article-toc { position: sticky; inset-block-start: 6rem; }
}

@media (max-width: 47.99rem) {
  .guide-library-feature { min-height: 25rem; }
  .guide-city-board-grid { display: flex; gap: var(--space-sm); overflow-x: auto; padding: var(--space-xs) 2rem var(--space-lg) var(--space-xs); scroll-snap-type: x mandatory; scrollbar-width: none; }
  .guide-city-board-grid::-webkit-scrollbar { display: none; }
  .guide-city-board { flex: 0 0 min(82vw, 21rem); min-height: 27rem; scroll-snap-align: start; }
  .guide-city-collage { min-height: 20rem; }
  .guide-magazine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-mag-card.is-featured { grid-column: 1 / -1; }
}

@media (max-width: 39.99rem) {
  .guide-library-hero { padding-block-start: var(--space-xl); }
  .guide-library-copy h1,
  .guide-city-hero h1 {
    font-size: clamp(2.7rem, 14vw, 4rem);
  }
  .guide-library-copy dl { grid-template-columns: 1fr; }
  .guide-library-copy dl > div { grid-template-columns: 1fr auto; border-inline-end: 0; border-block-end: var(--rule-hair) solid var(--color-rule); }
  .guide-library-copy dl > div:last-child { border-block-end: 0; }
  .guide-library-feature { min-height: 23rem; box-shadow: 0.42rem 0.46rem 0
      color-mix(in oklab, var(--color-accent) 28%, transparent); }
  .guide-library-feature > div { padding: var(--space-lg); }
  .guide-city-board-copy { padding: var(--space-lg); }
  .guide-city-hero { padding-block-start: var(--space-xl); }
  .guide-city-collage { min-height: 16rem; }
  .guide-city-collage > span { inset: auto var(--space-sm) var(--space-sm) auto; font-size: var(--text-md); }
  .guide-city-topic-nav { margin-inline-end: -1rem; }
  .guide-magazine-grid { grid-template-columns: minmax(0, 1fr); }
  .guide-mag-card.is-featured { grid-column: auto; }
  .guide-mag-copy { min-height: 0; }
  .guide-post-hero { min-height: 34rem; }
  .guide-post-hero .route-summary { margin-block-start: var(--space-md); }
  .guide-article-toc { gap: var(--space-xs); padding: var(--space-md); }
  .guide-article-toc > span { display: none; }
  .guide-article-toc nav { display: flex; gap: var(--space-xs); overflow-x: auto; margin-block-start: var(--space-xs); padding-block-end: var(--space-xs); scrollbar-width: none; }
  .guide-article-toc nav a { flex: 0 0 auto; min-height: 2.4rem; border: var(--rule-hair) solid var(--color-rule); padding-inline: var(--space-sm); }
  .guide-toc-back { display: none; }
  .guide-answer-card > div { gap: var(--space-xs); }
  .guide-answer-card i { font-size: var(--text-xs); }
  .guide-article-step > header { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); }
  .guide-article-step > header > span { width: 2.55rem; font-size: var(--text-md); }
  .guide-article-step > header h2 { font-size: var(--text-xl); }
  .guide-venue-recommendations { grid-template-columns: minmax(0, 1fr); }
  .guide-venue-recommendations > a { min-height: 6.4rem; }
  .guide-operator-comparison { padding: var(--space-md); }
  .guide-operator-table-wrap { overflow: visible; }
  .guide-operator-table-wrap table { min-width: 0; }
  .guide-operator-table-wrap th,
  .guide-operator-table-wrap td { padding: 0.65rem 0.45rem; font-size: var(--text-xs); word-break: keep-all; overflow-wrap: anywhere; }
  .guide-operator-table-wrap tbody th { width: 4.8rem; }
  .guide-checklist { grid-template-columns: minmax(0, 1fr); }
  .guide-next-grid { display: flex; gap: var(--space-sm); overflow-x: auto; padding-block-end: var(--space-lg); scroll-snap-type: x mandatory; scrollbar-width: none; }
  .guide-next-card { flex: 0 0 min(82vw, 20rem); scroll-snap-align: start; }
}

/* Forum conversation system */
.forum-plaza-hero,
.forum-city-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--space-2xl), 8vw, var(--space-3xl));
  border-block-end: var(--rule-hair) solid var(--color-rule);
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 3.9rem,
      color-mix(in oklab, var(--color-rule) 45%, transparent) 3.95rem 4rem
    ),
    linear-gradient(
      120deg,
      var(--color-paper) 0 62%,
      color-mix(in oklab, var(--color-accent) 8%, var(--color-paper)) 62% 100%
    );
}
.forum-plaza-hero::after,
.forum-city-hero::after {
  content: "대화";
  position: absolute;
  inset: auto -0.08em -0.25em auto;
  color: color-mix(in oklab, var(--color-accent) 7%, transparent);
  font-family: var(--font-display);
  font-size: clamp(8rem, 22vw, 20rem);
  line-height: 1;
  transform: rotate(-5deg);
  pointer-events: none;
}
.forum-plaza-layout,
.forum-city-hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(var(--space-xl), 6vw, var(--space-3xl));
  align-items: center;
}
.forum-plaza-layout > div,
.forum-city-hero-layout > div {
  display: grid;
  align-content: center;
  gap: var(--space-lg);
}
.forum-plaza-layout h1,
.forum-city-hero h1 {
  max-width: 13ch;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7vw, 5.8rem);
  font-weight: 400;
  line-height: 0.98;
}
.forum-plaza-layout h1 em,
.forum-city-hero h1 em {
  color: var(--color-accent);
  font-style: normal;
}
.forum-plaza-layout > div > p:not(.route-kicker),
.forum-city-hero-layout > div > p:not(.route-kicker) {
  max-width: 57ch;
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.7;
}
.forum-plaza-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.forum-plaza-actions a,
.forum-city-hero-layout > div > a {
  display: inline-flex;
  width: fit-content;
  min-height: 3rem;
  align-items: center;
  padding-inline: var(--space-lg);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 900;
  clip-path: polygon(0.42rem 0, 100% 0, calc(100% - 0.42rem) 100%, 0 100%);
}
.forum-plaza-actions span { color: var(--color-muted); font-size: var(--text-sm); }
.forum-city-hero-layout dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-block: var(--rule-hair) solid var(--color-rule); }
.forum-city-hero-layout dl > div { display: grid; gap: 0.2rem; padding: var(--space-sm); border-inline-end: var(--rule-hair) solid var(--color-rule); }
.forum-city-hero-layout dl > div:last-child { border-inline-end: 0; }
.forum-city-hero-layout dt { color: var(--color-muted); font-size: var(--text-xs); }
.forum-city-hero-layout dd { margin: 0; font-weight: 850; }
.forum-hot-board { position: relative; display: grid; padding: var(--space-lg); border-block-start: 0.35rem solid var(--color-accent); background: color-mix(in oklab, var(--color-paper-2) 94%, transparent); box-shadow: 0.65rem 0.7rem 0
    color-mix(in oklab, var(--color-accent) 20%, transparent); clip-path: polygon(
    0.8rem 0,
    100% 0,
    100% calc(100% - 0.8rem),
    calc(100% - 0.8rem) 100%,
    0 100%,
    0 0.8rem
  ); }
.forum-hot-board header { display: flex; justify-content: space-between; gap: var(--space-md); padding-block-end: var(--space-md); border-block-end: var(--rule-hair) dashed var(--color-rule); }
.forum-hot-board header span { color: var(--color-accent); font-weight: 900; }
.forum-hot-board header b { color: var(--color-muted); font-size: var(--text-xs); }
.forum-hot-board > a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-items: center; min-width: 0; padding-block: var(--space-md); border-block-end: var(--rule-hair) solid var(--color-rule-2); }
.forum-hot-board > a:last-child { border-block-end: 0; }
.forum-hot-board > a > span { color: color-mix(in oklab, var(--color-accent) 45%, var(--color-paper-2)); font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; }
.forum-hot-board > a > div { display: grid; min-width: 0; gap: 0.2rem; }
.forum-hot-board small { color: var(--color-accent); font-size: var(--text-xs); font-weight: 800; }
.forum-hot-board strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forum-hot-board p { color: var(--color-muted); font-size: var(--text-xs); }

.forum-rooms-section { overflow: hidden; }
.forum-city-room-grid { display: grid; gap: var(--space-md); }
.forum-city-room { position: relative; display: grid; align-content: start; gap: var(--space-sm); min-height: 23rem; overflow: hidden; padding: var(--space-xl); border-block-start: 0.35rem solid var(--color-accent); background: linear-gradient(
    145deg,
    color-mix(in oklab, var(--color-accent) 8%, var(--color-paper-2)),
    var(--color-paper-2) 52%
  ); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); clip-path: polygon(
    0 0.8rem,
    0.8rem 0,
    100% 0,
    100% calc(100% - 0.8rem),
    calc(100% - 0.8rem) 100%,
    0 100%
  ); }
.forum-city-room::after { content: ""; position: absolute; inset: auto -3rem -3.4rem auto; width: 9rem; aspect-ratio: 1; border: var(--rule-hair) solid
    color-mix(in oklab, var(--color-accent) 24%, transparent); border-radius: 50%; }
.forum-city-room-number { color: color-mix(in oklab, var(--color-accent) 44%, var(--color-paper-2)); font-family: var(--font-display); font-size: var(--text-3xl); line-height: 0.8; }
.forum-city-room small { color: var(--color-accent); font-weight: 800; }
.forum-city-room > strong { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 400; }
.forum-city-room > p { max-width: 25ch; color: var(--color-ink-2); font-weight: 750; line-height: 1.5; }
.forum-city-room-topics { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-start: var(--space-sm); }
.forum-city-room-topics i { padding: 0.28rem 0.5rem; border: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-xs); font-style: normal; }
.forum-city-room > b { position: relative; z-index: 1; margin-block-start: auto; color: var(--color-accent); }

.forum-feed-section { background: color-mix(in oklab, var(--color-accent) 2.5%, var(--color-paper)); }
.forum-browser-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); margin-block-end: var(--space-2xl); padding: var(--space-lg); border-block: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.forum-browser-tools > nav,
.forum-topic-filters {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  scrollbar-width: none;
}
.forum-browser-tools > nav::-webkit-scrollbar,
.forum-topic-filters::-webkit-scrollbar {
  display: none;
}
.forum-browser-tools > nav a,
.forum-topic-filters button {
  flex: 0 0 auto;
  display: inline-flex;
  min-height: 2.65rem;
  align-items: center;
  border: var(--rule-hair) solid var(--color-rule);
  background: transparent;
  padding-inline: var(--space-md);
  color: var(--color-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 800;
  cursor: pointer;
}
.forum-browser-tools > nav a.is-active,
.forum-topic-filters button.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
.forum-browser-tools > label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); font-weight: 750; }
.forum-browser-tools input,
.forum-browser-tools select {
  width: 100%;
  min-height: 2.8rem;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: 0;
  background: var(--color-paper);
  padding-inline: var(--space-sm);
  color: var(--color-ink);
  font: inherit;
}
.forum-sort { justify-self: stretch; }
.forum-feed-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-lg); margin-block-end: var(--space-xl); }
.forum-feed-heading > div { display: grid; gap: var(--space-sm); }
.forum-feed-heading h2 { font-family: var(--font-display); font-size: clamp(var(--text-xl), 5vw, var(--text-3xl)); font-weight: 400; line-height: 1.08; }
.forum-feed-heading > div > p:last-child { color: var(--color-muted); }
.forum-feed-heading > strong { color: var(--color-accent); font-size: var(--text-sm); }
.forum-feed-grid { display: grid; gap: var(--space-md); }
.forum-feed-card { position: relative; display: grid; gap: var(--space-lg); min-width: 0; padding: var(--space-lg); border-inline-start: 0.35rem solid var(--color-accent); background: var(--color-paper-2); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); clip-path: polygon(0 0, 100% 0, calc(100% - 0.65rem) 100%, 0 100%); }
.forum-feed-card[hidden] { display: none; }
.forum-feed-card.is-featured::after { content: "지금 답변 중"; position: absolute; inset: -0.25rem var(--space-lg) auto auto; padding: 0.3rem 0.65rem; background: var(--color-focus); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 900; transform: rotate(2deg); }
.forum-feed-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); padding-inline-end: 6rem; }
.forum-feed-top a,
.forum-feed-top span {
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 850;
}
.forum-feed-top a::after { content: "·"; margin-inline-start: var(--space-xs); color: var(--color-rule); }
.forum-feed-top b { margin-inline-start: auto; padding: 0.22rem 0.48rem; border: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-xs); }
.forum-feed-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.forum-feed-avatar,
.forum-answer-avatar {
  display: grid;
  width: 2.7rem;
  aspect-ratio: 1;
  place-items: center;
  border: var(--rule-hair) solid var(--color-accent);
  background: color-mix(in oklab, var(--color-accent) 8%, var(--color-paper));
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  transform: rotate(-4deg);
}
.forum-feed-main > div { display: grid; gap: var(--space-sm); }
.forum-feed-main h2 { font-size: var(--text-md); line-height: 1.35; }
.forum-feed-main p { display: -webkit-box; overflow: hidden; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.forum-feed-card footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); padding-block-start: var(--space-md); border-block-start: var(--rule-hair) dashed var(--color-rule-2); color: var(--color-muted); font-size: var(--text-xs); }
.forum-feed-card footer a { margin-inline-start: auto; color: var(--color-accent); font-weight: 850; }
.forum-feed-empty { padding: var(--space-xl); border: var(--rule-hair) dashed var(--color-rule); text-align: center; }
.forum-feed-empty p { margin-block-start: var(--space-xs); color: var(--color-muted); }

.forum-post-hero { padding-block: clamp(var(--space-xl), 7vw, var(--space-3xl)); border-block-end: var(--rule-hair) solid var(--color-rule); background: linear-gradient(
    115deg,
    color-mix(in oklab, var(--color-accent) 9%, var(--color-paper)),
    var(--color-paper) 56%
  ); }
.forum-post-head { display: grid; gap: var(--space-lg); max-width: 72rem; }
.forum-post-labels { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.forum-post-labels a,
.forum-post-labels span {
  padding: 0.35rem 0.65rem;
  border: var(--rule-hair) solid var(--color-accent);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 850;
  transform: skewX(-4deg);
}
.forum-post-labels span:last-child { background: var(--color-accent); color: var(--color-accent-ink); }
.forum-post-head h1 { max-width: 23ch; font-family: var(--font-display); font-size: clamp(2.35rem, 6vw, 4.8rem); font-weight: 400; line-height: 1.04; }
.forum-post-author { display: flex; align-items: center; gap: var(--space-sm); }
.forum-post-author > div { display: grid; gap: 0.15rem; }
.forum-post-author small { color: var(--color-muted); font-size: var(--text-xs); }
.forum-post-head dl { display: flex; flex-wrap: wrap; gap: 0; margin: 0; border-block: var(--rule-hair) solid var(--color-rule); }
.forum-post-head dl > div { display: flex; align-items: center; gap: var(--space-sm); min-width: 8rem; padding: var(--space-sm) var(--space-md); border-inline-end: var(--rule-hair) solid var(--color-rule); }
.forum-post-head dt { color: var(--color-muted); font-size: var(--text-xs); }
.forum-post-head dd { margin: 0; color: var(--color-accent); font-weight: 900; }
.forum-post-layout { display: grid; gap: var(--space-xl); align-items: start; }
.forum-post-layout > main { display: grid; gap: var(--space-3xl); min-width: 0; }
.forum-question-card { position: relative; overflow: hidden; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); box-shadow: 0.55rem 0.6rem 0
    color-mix(in oklab, var(--color-accent) 17%, transparent); clip-path: polygon(
    0 0.8rem,
    0.8rem 0,
    100% 0,
    100% calc(100% - 0.8rem),
    calc(100% - 0.8rem) 100%,
    0 100%
  ); }
.forum-question-card::after { content: "Q"; position: absolute; inset: auto -0.08em -0.25em auto; color: color-mix(in oklab, var(--color-accent) 7%, transparent); font-family: var(--font-display); font-size: 11rem; line-height: 1; pointer-events: none; }
.forum-question-card header,
.forum-question-card footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: color-mix(in oklab, var(--color-accent) 7%, var(--color-paper-2));
}
.forum-question-card header span { color: var(--color-accent); font-weight: 900; }
.forum-question-card header small { color: var(--color-muted); }
.forum-question-card > div { position: relative; z-index: 1; display: grid; gap: var(--space-lg); padding: clamp(var(--space-lg), 5vw, var(--space-xl)); font-size: var(--text-md); line-height: 1.85; }
.forum-editorial-section {
  display: grid;
  gap: var(--space-md);
  scroll-margin-top: 6rem;
}
.forum-editorial-section + .forum-editorial-section {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-xl);
  border-block-start: var(--rule-hair) dashed var(--color-rule);
}
.forum-editorial-section > small {
  width: fit-content;
  padding: 0.2rem 0.5rem;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 850;
  transform: rotate(-1deg);
}
.forum-editorial-section > h2 {
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 4vw, var(--text-2xl));
  font-weight: 400;
  line-height: 1.15;
}
.forum-editorial-section > h2::before {
  display: none;
}
.forum-editorial-section > p {
  color: var(--color-ink-2);
}
.forum-editorial-section > ul {
  display: grid;
  gap: var(--space-sm);
  padding-inline-start: 1.2rem;
  color: var(--color-ink-2);
}
.forum-question-card footer { justify-content: flex-start; background: transparent; border-block-start: var(--rule-hair) dashed var(--color-rule); }
.forum-question-card footer a { color: var(--color-accent); font-size: var(--text-sm); font-weight: 850; }
.forum-question-card footer button { margin-inline-start: auto; border: 0; background: transparent; color: var(--color-muted); cursor: pointer; }
.forum-answers { display: grid; gap: var(--space-xl); }
.forum-answers-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); }
.forum-answers-heading > div { display: grid; gap: var(--space-xs); }
.forum-answers-heading h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 400; }
.forum-answers-heading > div > p:last-child { color: var(--color-muted); }
.forum-answers-heading > a { flex: 0 0 auto; min-height: 2.8rem; display: inline-flex; align-items: center; border-block-end: var(--rule-bold) solid var(--color-accent); color: var(--color-accent); font-weight: 850; }
.forum-answer-list { display: grid; gap: var(--space-md); }
.forum-answer-card { display: grid; gap: var(--space-lg); padding: var(--space-lg); border-inline-start: 0.35rem solid var(--color-rule); background: var(--color-paper-2); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); clip-path: polygon(0 0, 100% 0, calc(100% - 0.65rem) 100%, 0 100%); }
.forum-answer-card[hidden] { display: none; }
.forum-answer-card.is-helpful { border-inline-start-color: var(--color-accent); background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--color-accent) 8%, var(--color-paper-2)),
    var(--color-paper-2) 45%
  ); }
.forum-answer-card header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); }
.forum-answer-card header > div { display: grid; gap: 0.1rem; }
.forum-answer-card header small { color: var(--color-muted); font-size: var(--text-xs); }
.forum-answer-card header b { padding: 0.3rem 0.58rem; background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-xs); transform: rotate(2deg); }
.forum-answer-card > p { color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.8; }
.forum-answer-card footer { display: flex; flex-wrap: wrap; gap: var(--space-lg); padding-block-start: var(--space-sm); border-block-start: var(--rule-hair) dashed var(--color-rule); }
.forum-answer-card footer button,
.forum-answer-card footer a {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--color-muted);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
.forum-answer-card footer button:first-child { color: var(--color-accent); font-weight: 800; }
.forum-answer-card footer button:last-child { margin-inline-start: auto; }
.forum-answer-more { min-height: 3rem; border: var(--rule-hair) solid var(--color-accent); background: transparent; color: var(--color-accent); font: inherit; font-weight: 850; cursor: pointer; }
.forum-reply-gate { display: grid; gap: var(--space-xs); padding: var(--space-xl); border-block-start: 0.35rem solid var(--color-accent); background: var(--color-overlay); clip-path: polygon(
    0.7rem 0,
    100% 0,
    100% calc(100% - 0.7rem),
    calc(100% - 0.7rem) 100%,
    0 100%,
    0 0.7rem
  ); }
.forum-reply-gate span { color: var(--color-accent); font-size: var(--text-xs); font-weight: 850; }
.forum-reply-gate strong { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; }
.forum-reply-gate b { margin-block-start: var(--space-sm); color: var(--color-accent); }
.forum-post-side { display: grid; gap: var(--space-md); }
.forum-post-side > section { display: grid; gap: var(--space-sm); padding: var(--space-lg); border-block-start: 0.3rem solid var(--color-accent); background: var(--color-paper-2); }
.forum-post-side > section > span { color: var(--color-accent); font-size: var(--text-xs); font-weight: 850; }
.forum-post-side h2 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; line-height: 1.15; }
.forum-post-side p { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.65; }
.forum-post-side a { color: var(--color-accent); font-weight: 850; }
.forum-post-side > p { padding: var(--space-md); border: var(--rule-hair) dashed var(--color-rule); color: var(--color-muted); font-size: var(--text-xs); line-height: 1.65; }
.forum-related-section { overflow: hidden; background: color-mix(in oklab, var(--color-accent) 4%, var(--color-paper)); }
.forum-related-rail { display: flex; gap: var(--space-md); overflow-x: auto; padding-block-end: var(--space-lg); scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--color-accent) var(--color-rule); }
.forum-related-rail article { display: grid; align-content: start; gap: var(--space-sm); flex: 0 0 clamp(18rem, 28vw, 23rem); min-height: 15rem; padding: var(--space-lg); background: var(--color-paper-2); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); scroll-snap-align: start; }
.forum-related-rail article > span { color: color-mix(in oklab, var(--color-accent) 42%, var(--color-paper-2)); font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; }
.forum-related-rail small { color: var(--color-accent); font-size: var(--text-xs); font-weight: 800; }
.forum-related-rail h3 { font-size: var(--text-md); line-height: 1.35; }
.forum-related-rail article > a { margin-block-start: auto; color: var(--color-accent); font-weight: 850; }
.forum-related-all { display: inline-flex; min-height: 3rem; align-items: center; margin-block-start: var(--space-md); border-block-end: var(--rule-hair) solid var(--color-accent); color: var(--color-accent); font-weight: 850; }
.forum-post-guide-links { display: grid; gap: var(--space-sm); margin-block-start: var(--space-lg); padding: 0; list-style: none; }
.forum-post-guide-links li { padding-block-start: var(--space-sm); border-block-start: var(--rule-hair) solid var(--color-rule); }
.forum-post-guide-links a { color: var(--color-text); font-size: var(--text-sm); font-weight: 750; line-height: 1.45; }

@media (hover: hover) and (pointer: fine) {
  .forum-city-room:hover,
  .forum-feed-card:hover,
  .forum-related-rail article:hover {
    filter: drop-shadow(
      0.5rem 0.55rem 0 color-mix(in oklab, var(--color-accent) 20%, transparent)
    );
  }
  .forum-hot-board > a:hover strong,
  .forum-feed-card:hover h2 {
    color: var(--color-accent);
  }
}

@media (min-width: 48rem) {
  .forum-plaza-layout,
  .forum-city-hero-layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(24rem, 1.05fr);
  }
  .forum-city-room-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .forum-browser-tools { grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.72fr) auto; align-items: center; }
  .forum-browser-tools > nav { grid-column: 1 / -1; }
  .forum-topic-filters { min-width: 0; }
  .forum-sort { min-width: 12rem; }
  .forum-feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .forum-feed-card.is-featured { grid-column: 1 / -1; }
  .forum-post-layout { grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.34fr); }
  .forum-post-side { position: sticky; inset-block-start: 6rem; }
}

@media (min-width: 60rem) {
  .forum-feed-card.is-featured { grid-template-columns: minmax(0, 1fr); padding: var(--space-xl); }
  .forum-feed-card.is-featured .forum-feed-main h2 { font-size: var(--text-xl); }
}

@media (max-width: 47.99rem) {
  .forum-city-room-grid { display: flex; gap: var(--space-sm); overflow-x: auto; padding: var(--space-xs) 2rem var(--space-lg) var(--space-xs); scroll-snap-type: x mandatory; scrollbar-width: none; }
  .forum-city-room { flex: 0 0 min(82vw, 20rem); min-height: 21rem; scroll-snap-align: start; }
  .forum-browser-tools { margin-inline: -0.5rem; padding: var(--space-md); }
  .forum-post-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .forum-post-side > p { grid-column: 1 / -1; }
}

@media (max-width: 39.99rem) {
  .forum-plaza-hero,
  .forum-city-hero {
    padding-block-start: var(--space-xl);
  }
  .forum-plaza-layout h1,
  .forum-city-hero h1 {
    font-size: clamp(2.7rem, 14vw, 4rem);
  }
  .forum-hot-board { padding: var(--space-md); box-shadow: 0.4rem 0.45rem 0
      color-mix(in oklab, var(--color-accent) 20%, transparent); }
  .forum-city-hero-layout dl { grid-template-columns: 1fr; }
  .forum-city-hero-layout dl > div { grid-template-columns: 1fr auto; border-inline-end: 0; border-block-end: var(--rule-hair) solid var(--color-rule); }
  .forum-city-hero-layout dl > div:last-child { border-block-end: 0; }
  .forum-feed-top { padding-inline-end: 0; }
  .forum-feed-card.is-featured::after { display: none; }
  .forum-feed-main { grid-template-columns: minmax(0, 1fr); }
  .forum-feed-avatar { width: 2.25rem; }
  .forum-feed-card footer a { width: 100%; margin-inline-start: 0; }
  .forum-post-head h1 { font-size: clamp(2.25rem, 12vw, 3.5rem); }
  .forum-post-head dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .forum-post-head dl > div { display: grid; min-width: 0; padding-inline: var(--space-sm); }
  .forum-answers-heading { align-items: start; }
  .forum-answer-card header { grid-template-columns: auto minmax(0, 1fr); }
  .forum-answer-card header b { grid-column: 1 / -1; justify-self: start; }
  .forum-post-side { grid-template-columns: minmax(0, 1fr); }
  .forum-post-side > p { grid-column: auto; }
  .forum-related-rail article { flex-basis: min(82vw, 20rem); }
}

/* Venue neon orbit: all homepage cards, ranked city cards only. */
@property --venue-neon-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes venue-neon-orbit {
  to { --venue-neon-angle: 360deg; }
}

.city-venue-section .venue-card,
.city-comparison-card.is-ranked {
  --venue-neon-secondary: #ff2f92;
}

.city-comparison-card.is-ranked[data-venue-operator="한인 운영"] { --venue-neon-secondary: #ffd34e; }
.city-comparison-card.is-ranked[data-venue-operator="로컬 운영"] { --venue-neon-secondary: #ff3b9d; }

.city-venue-section .venue-card::before,
.city-comparison-card.is-ranked::before {
  content: "";
  position: absolute;
  z-index: 6;
  inset: -0.2rem;
  padding: 0.2rem;
  pointer-events: none;
  background: conic-gradient(
    from var(--venue-neon-angle),
    transparent 0deg 116deg,
    var(--color-accent) 132deg,
    var(--venue-neon-secondary) 148deg,
    #fff9df 158deg,
    var(--venue-neon-secondary) 168deg,
    var(--color-accent) 182deg,
    transparent 200deg 292deg,
    var(--color-accent) 308deg,
    var(--venue-neon-secondary) 322deg,
    #fff9df 330deg,
    var(--venue-neon-secondary) 338deg,
    var(--color-accent) 348deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: venue-neon-orbit 3.2s linear infinite;
}

html[data-venue-scroll-active] .city-venue-section .venue-card::before,
html[data-venue-scroll-active] .city-comparison-card.is-ranked::before {
  animation-play-state: paused;
}

.city-venue-section .venue-card::after,
.city-comparison-card.is-ranked::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: -0.08rem;
  border: 2px solid color-mix(in oklab, var(--color-accent) 62%, transparent);
  box-shadow:
    inset 0 0 0.45rem color-mix(in oklab, var(--color-accent) 28%, transparent),
    0 0 0.55rem color-mix(in oklab, var(--color-accent) 32%, transparent),
    0 0 1.1rem color-mix(in oklab, var(--venue-neon-secondary) 18%, transparent);
  pointer-events: none;
}

.city-comparison-card.is-ranked .city-comparison-index { z-index: 7; }

@media (prefers-reduced-motion: reduce) {
  .city-venue-section .venue-card::before,
  .city-comparison-card.is-ranked::before {
    animation: none;
    --venue-neon-angle: 158deg;
  }
}

/* Nội dung dài, phân trang và tương tác cẩm nang */
.content-pagination {
  display: grid;
  grid-template-columns: minmax(5.5rem, 1fr) auto minmax(5.5rem, 1fr);
  gap: var(--space-md);
  align-items: center;
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-lg);
  border-block-start: 0.2rem solid var(--color-accent);
}
.content-pagination > a,
.content-pagination > span {
  color: var(--color-accent);
  font-weight: 850;
}
.content-pagination > :last-child {
  text-align: end;
}
.content-pagination > span[aria-disabled="true"] {
  color: var(--color-muted);
  opacity: 0.55;
}
.content-pagination ol {
  display: flex;
  gap: var(--space-xs);
  padding: 0;
  list-style: none;
}
.content-pagination li a {
  display: grid;
  min-width: 2.7rem;
  min-height: 2.7rem;
  place-items: center;
  border: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink);
  font-family: var(--font-display);
}
.content-pagination li a[aria-current="page"] {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  transform: rotate(-2deg);
}
.forum-page-pagination {
  margin-block: calc(var(--space-xl) * -1) var(--space-2xl);
}
.longform-disclosure {
  position: relative;
  margin-block-start: var(--space-xl);
  overflow: clip;
  border: var(--rule-hair) solid var(--color-rule);
  border-block-start: 0.32rem solid var(--color-accent);
  background:
    linear-gradient(
      112deg,
      color-mix(in oklab, var(--color-accent) 8%, transparent),
      transparent 42%
    ),
    var(--color-paper-2);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 1rem),
    calc(100% - 1rem) 100%,
    0 100%
  );
}
.longform-disclosure summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xl);
  min-height: 8.5rem;
  padding: clamp(var(--space-lg), 4vw, var(--space-xl));
  cursor: pointer;
  list-style: none;
}
.longform-disclosure summary::before {
  content: "";
  position: absolute;
  inset: auto var(--space-xl) 0;
  height: var(--rule-hair);
  background: linear-gradient(90deg, var(--color-accent), transparent 74%);
}
.longform-disclosure summary::-webkit-details-marker {
  display: none;
}
.longform-summary-copy {
  display: grid;
  gap: 0.35rem;
  max-width: 68rem;
}
.longform-summary-copy > small {
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 850;
  letter-spacing: 0.08em;
}
.longform-summary-copy > strong {
  font-family: var(--font-display);
  font-size: clamp(var(--text-lg), 3vw, var(--text-xl));
  font-weight: 400;
  line-height: 1.15;
}
.longform-summary-copy > span:not(.longform-topics) {
  max-width: 64ch;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.longform-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-block-start: 0.25rem;
}
.longform-topics b {
  padding: 0.28rem 0.52rem;
  border: var(--rule-hair) solid
    color-mix(in oklab, var(--color-accent) 48%, var(--color-rule));
  color: var(--color-ink-2);
  font-size: var(--text-2xs);
  line-height: 1;
}
.longform-toggle {
  display: grid;
  grid-template-columns: auto 2.6rem;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 850;
  white-space: nowrap;
}
.longform-toggle i {
  position: relative;
  display: grid;
  width: 2.6rem;
  aspect-ratio: 1;
  place-items: center;
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: 50%;
  transition:
    background var(--dur-short),
    transform var(--dur-med);
}
.longform-toggle i::before,
.longform-toggle i::after {
  content: "";
  position: absolute;
  width: 0.9rem;
  height: 2px;
  background: currentColor;
}
.longform-toggle i::after {
  transform: rotate(90deg);
}
.longform-disclosure[open] .longform-toggle i {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  transform: rotate(45deg);
}
.longform-close-label {
  display: none;
}
.longform-disclosure[open] .longform-open-label {
  display: none;
}
.longform-disclosure[open] .longform-close-label {
  display: inline;
}
.longform-disclosure-body {
  position: relative;
  display: grid;
  gap: var(--space-xl);
  padding: clamp(var(--space-lg), 5vw, var(--space-2xl));
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
  background: color-mix(in oklab, var(--color-paper) 74%, var(--color-paper-2));
}
.longform-disclosure-body > :first-child {
  margin-block-start: 0;
}
.longform-disclosure-body.venue-seo-body {
  margin-block-start: 0;
  border: 0;
  border-inline-start: 0.38rem solid var(--color-accent);
  background: color-mix(in oklab, var(--color-paper) 74%, var(--color-paper-2));
}
.longform-close-button {
  width: fit-content;
  min-height: 2.9rem;
  margin-inline-start: auto;
  padding: 0.7rem 1rem;
  border: var(--rule-hair) solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  font-weight: 850;
  cursor: pointer;
}
.longform-close-button:hover,
.longform-close-button:focus-visible {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.seo-faq {
  display: grid;
  gap: var(--space-xl);
  margin-block-start: var(--space-2xl);
  padding: clamp(var(--space-lg), 4vw, var(--space-xl));
  border: var(--rule-hair) solid var(--color-rule);
  border-inline-start: 0.38rem solid var(--color-accent);
  background: var(--color-paper-2);
}
.seo-faq-head {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
}
.seo-faq-head > p {
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 850;
  letter-spacing: 0.08em;
}
.seo-faq-head h2 {
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 4vw, var(--text-2xl));
  font-weight: 400;
  line-height: 1.1;
}
.seo-faq-head > span {
  max-width: 35ch;
  color: var(--color-muted);
  line-height: 1.65;
}
.seo-faq-list {
  display: grid;
  gap: var(--space-xs);
}
.seo-faq-list details {
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper);
}
.seo-faq-list summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 1.2rem;
  align-items: center;
  gap: var(--space-md);
  min-height: 4.5rem;
  padding: var(--space-md);
  cursor: pointer;
  list-style: none;
}
.seo-faq-list summary::-webkit-details-marker {
  display: none;
}
.seo-faq-list summary > span {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-md);
}
.seo-faq-list summary > strong {
  line-height: 1.45;
}
.seo-faq-list summary > i {
  position: relative;
  width: 1rem;
  aspect-ratio: 1;
}
.seo-faq-list summary > i::before,
.seo-faq-list summary > i::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  background: var(--color-accent);
  transform: translateY(-50%);
}
.seo-faq-list summary > i::after {
  transform: translateY(-50%) rotate(90deg);
  transition: transform var(--dur-short);
}
.seo-faq-list details[open] summary > i::after {
  transform: translateY(-50%);
}
.seo-faq-list details > p {
  padding: 0 var(--space-lg) var(--space-lg) calc(2.5rem + var(--space-xl));
  color: var(--color-muted);
  line-height: 1.75;
}
.guide-faq-section {
  background: color-mix(in oklab, var(--color-accent) 2%, var(--color-paper));
}
.guide-faq-section .seo-faq,
.venue-faq-section .seo-faq {
  margin-block-start: 0;
}
@media (min-width: 56rem) {
  .seo-faq {
    grid-template-columns: minmax(15rem, 0.65fr) minmax(0, 1.35fr);
  }
}
@media (max-width: 42rem) {
  .longform-disclosure summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-md);
    min-height: 0;
    padding: var(--space-lg) var(--space-md);
  }
  .longform-summary-copy > span:not(.longform-topics) {
    display: none;
  }
  .longform-topics {
    gap: 0.25rem;
  }
  .longform-topics b:nth-child(n + 4) {
    display: none;
  }
  .longform-toggle {
    grid-template-columns: 2.6rem;
  }
  .longform-toggle > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .longform-disclosure-body {
    padding: var(--space-lg) var(--space-md);
  }
  .seo-faq {
    margin-block-start: var(--space-xl);
    padding: var(--space-md);
  }
  .seo-faq-list summary {
    gap: var(--space-sm);
    padding: var(--space-sm);
  }
  .seo-faq-list details > p {
    padding: 0 var(--space-md) var(--space-md);
  }
}
.guide-engagement-section {
  background: color-mix(in oklab, var(--color-accent) 3%, var(--color-paper));
}
.guide-engagement {
  display: grid;
  gap: var(--space-xl);
}
.guide-helpful-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md) var(--space-xl);
  align-items: center;
  padding: var(--space-xl);
  border-inline-start: 0.4rem solid var(--color-accent);
  background: var(--color-paper-2);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule);
}
.guide-helpful-panel > div {
  display: grid;
  gap: var(--space-xs);
}
.guide-helpful-panel h2,
.guide-comment-heading h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 4vw, var(--text-2xl));
  font-weight: 400;
  line-height: 1.12;
}
.guide-helpful-panel > div > p:last-child,
.guide-comment-heading > div > p:last-child {
  color: var(--color-muted);
}
.guide-helpful-panel > button {
  min-height: 3.5rem;
  padding-inline: var(--space-lg);
  border: var(--rule-hair) solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 900;
  transform: rotate(-1deg);
}
.guide-helpful-panel > button[aria-pressed="true"] {
  background: var(--color-focus);
}
.guide-helpful-panel > p {
  grid-column: 1 / -1;
  min-height: 1.4em;
  color: var(--color-focus);
  font-size: var(--text-sm);
}
.guide-comment-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-lg);
  padding-block-end: var(--space-md);
  border-block-end: 0.2rem solid var(--color-accent);
}
.guide-comment-heading > div {
  display: grid;
  gap: var(--space-xs);
}
.guide-comment-heading > a {
  color: var(--color-accent);
  font-weight: 900;
}
.guide-comment-list {
  display: grid;
  gap: var(--space-sm);
}
.guide-comment-list article,
.guide-comment-empty {
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
}
.guide-comment-list article header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  margin-block-end: var(--space-sm);
}
.guide-comment-list time {
  color: var(--color-muted);
  font-size: var(--text-xs);
}
.guide-comment-list article p,
.guide-comment-empty p {
  color: var(--color-ink-2);
  line-height: 1.75;
}
.guide-comment-list > button {
  width: fit-content;
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  color: var(--color-accent);
  font-weight: 850;
}
.guide-comment-empty {
  display: grid;
  gap: var(--space-xs);
  text-align: center;
}
.guide-comment-form {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: color-mix(in oklab, var(--color-accent) 5%, var(--color-paper-2));
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule);
}
.guide-comment-form label {
  display: grid;
  gap: var(--space-sm);
  font-weight: 850;
}
.guide-comment-form textarea {
  width: 100%;
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper);
  color: var(--color-ink);
  line-height: 1.65;
  resize: vertical;
}
.guide-comment-form > button {
  width: fit-content;
  min-height: 3rem;
  padding-inline: var(--space-lg);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 900;
}
.guide-comment-form > p {
  min-height: 1.4em;
  color: var(--color-focus);
}
@media (max-width: 47.99rem) {
  .content-pagination {
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-xs);
  }
  .content-pagination ol {
    gap: 0.2rem;
  }
  .content-pagination li a {
    min-width: 2.35rem;
    min-height: 2.35rem;
  }
  .guide-helpful-panel {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-lg);
  }
  .guide-helpful-panel > button {
    width: 100%;
  }
  .longform-disclosure summary,
  .longform-disclosure-body {
    padding-inline: var(--space-md);
  }
}

@media (max-width: 39.99rem) {
  .venue-identity-panel {
    gap: var(--space-md);
    margin: 0;
    padding: 0;
  }
  .venue-identity-tag-group {
    margin-inline: calc(var(--space-lg) * -1);
    padding: var(--space-sm) var(--space-lg) calc(var(--space-md) + 0.1rem);
  }
  .venue-identity-tags {
    gap: 0.42rem 0.58rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .venue-identity-tags span:is(.is-boomboom, .is-premium, .is-choice),
  .venue-identity-tags span:is(.is-boomboom, .is-premium, .is-choice)::after {
    animation: none !important;
  }
}

/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */
/* Hallmark · component: venue-tag-tone · genre: atmospheric · theme: BoomMoa locked
 * states: metallic edge · on-letter double glint · reduced motion
 * contrast: pass (40–41) · mobile: pass (34, 49, 50–57)
 */
:is(.tags, .city-comparison-tags, .route-tags)
  span:is(
    .is-boomboom,
    .is-ipssa,
    .is-hand,
    .is-hand-mouth,
    .is-choice,
    .is-value,
    .is-premium
  ) {
  color: var(--tag-color);
}
:is(.tags, .city-comparison-tags, .route-tags)
  span:is(
    .is-boomboom,
    .is-ipssa,
    .is-hand,
    .is-hand-mouth,
    .is-choice,
    .is-value,
    .is-premium
  )::before {
  background: var(--tag-color);
}
.is-boomboom { --tag-color: var(--color-tag-boomboom); }
.is-ipssa { --tag-color: var(--color-tag-ipssa); }
.is-hand { --tag-color: var(--color-tag-hand); }
.is-hand-mouth { --tag-color: var(--color-tag-hand-mouth); }
.is-choice { --tag-color: var(--color-tag-choice); }
.is-value { --tag-color: var(--color-tag-value); }
.is-premium { --tag-color: var(--color-tag-premium); }

/* Card tags use a bare metallic wordmark treatment so photography stays visible. */
:is(.tags, .city-comparison-tags)
  span:is(
    .is-boomboom,
    .is-ipssa,
    .is-hand,
    .is-hand-mouth,
    .is-choice,
    .is-value,
    .is-premium
  ) {
  position: relative;
  isolation: isolate;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-text-stroke: 0.02em
    color-mix(in oklab, var(--color-ink) 42%, var(--tag-color));
  paint-order: stroke fill;
  text-shadow:
    0 -0.025em 0 color-mix(in oklab, var(--color-ink) 32%, var(--tag-color)),
    0 0.04em 0 color-mix(in oklab, var(--color-paper) 58%, var(--tag-color));
}
:is(.tags, .city-comparison-tags)
  span:is(
    .is-boomboom,
    .is-ipssa,
    .is-hand,
    .is-hand-mouth,
    .is-choice,
    .is-value,
    .is-premium
  )::before {
  transform: rotate(45deg);
  transform-origin: center;
}
:is(.tags, .city-comparison-tags) > span > .venue-tag-label {
  position: relative;
  isolation: isolate;
  display: inline-block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-shadow: inherit;
  white-space: nowrap;
}
.city-comparison-tags > span > .venue-tag-label::before,
.tags > span > .venue-tag-label::before { content: none; }
.venue-tag-metal-flash {
  position: absolute;
  inset-block-start: 38%;
  inset-inline-start: 34%;
  z-index: 2;
  display: block;
  width: 0.64em;
  height: 0.64em;
  background: color-mix(in oklab, var(--color-ink) 78%, var(--tag-color));
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-12deg) scale(0.3);
  transform-origin: center;
  animation: venue-card-tag-metal-flash var(--dur-tag-glint) var(--ease-in-out) infinite;
  animation-delay: var(--tag-glint-delay, 0s);
}
:is(.tags, .city-comparison-tags) > span:nth-child(2) { --tag-glint-delay: var(--delay-tag-glint-step); }
:is(.tags, .city-comparison-tags) > span:nth-child(3) { --tag-glint-delay: calc(var(--delay-tag-glint-step) + var(--delay-tag-glint-step)); }
:is(.tags, .city-comparison-tags) > span:nth-child(4) { --tag-glint-delay: calc(var(--delay-tag-glint-step) + var(--delay-tag-glint-step) + var(--delay-tag-glint-step)); }
:is(.tags, .city-comparison-tags) > span:nth-child(5) { --tag-glint-delay: calc(var(--delay-tag-glint-step) + var(--delay-tag-glint-step) + var(--delay-tag-glint-step) + var(--delay-tag-glint-step)); }
.tags
  span:is(
    .is-boomboom,
    .is-ipssa,
    .is-hand,
    .is-hand-mouth,
    .is-choice,
    .is-value,
    .is-premium
  ) {
  gap: 0.38rem;
  padding: 0;
}
.tags
  span:is(
    .is-boomboom,
    .is-ipssa,
    .is-hand,
    .is-hand-mouth,
    .is-choice,
    .is-value,
    .is-premium
  )::before {
  width: 0.32rem;
  height: 0.32rem;
  box-shadow: 0 0 0.2rem color-mix(in oklab, var(--tag-color) 32%, transparent);
  transform: rotate(45deg);
}
.city-comparison-tags
  span:is(
    .is-boomboom,
    .is-ipssa,
    .is-hand,
    .is-hand-mouth,
    .is-choice,
    .is-value,
    .is-premium
  ) {
  margin: 0;
  padding: 0.45rem 0.85rem 0.45rem 1.15rem;
}
@keyframes venue-card-tag-metal-flash {
  0%,
  28%,
  44%,
  58%,
  72%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-12deg) scale(0.3);
  }
  36% {
    opacity: 0.92;
    transform: translate(-50%, -50%) rotate(0) scale(1);
  }
  64% {
    opacity: 0.72;
    transform: translate(-50%, -50%) rotate(0) scale(0.78);
  }
  42%,
  70% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(12deg) scale(1.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.tags, .city-comparison-tags)
    span:is(
      .is-boomboom,
      .is-ipssa,
      .is-hand,
      .is-hand-mouth,
      .is-choice,
      .is-value,
      .is-premium
    )::before {
    animation: none;
    opacity: 1;
    transform: rotate(45deg);
  }
  .venue-tag-metal-flash { display: none; }
}