/* Design tokens. Every color and type size below refers to these; dark mode swaps values only. */
:root {
  color-scheme: light;
  --paper: #f5f5f2;
  --paper-glass: rgb(245 245 242 / 0.94);
  --surface: #fff;
  --surface-glass: rgb(255 255 255 / 0.94);
  --surface-muted: #f0f0ec;
  --soft: #edeff0;
  --line: #e2e2dd;
  --line-soft: #ebebe6;
  --line-strong: #b8b2a5;
  --ink: #1b2a3a;
  --text-soft: #3b4856;
  --muted: #5c6772;
  --text-faint: #a7adb3;
  --green: #1b2a3a;
  --green-strong: #111d29;
  --link: #1b2a3a;
  --on-accent: #fff;
  --accent: #a8834f;
  --accent-soft: #d8c4a0;
  --accent-text: #7a5a2b;
  --accent-strong: #8c6a39;
  --peach: #e6eef1;
  --peach-line: #cddbe1;
  --orange: #3e6577;
  --orange-text: #355a6b;
  --sale: #b5352a;
  --live-bg: #f1edf6;
  --live-line: #ddd3ea;
  --live-text: #5d4880;
  --gold-bg: #f8f3ea;
  --gold-line: #eadfca;
  --gold-text: #7a5a2b;
  --dot-open: #3e6577;
  --dot-close: #a8834f;
  --dot-live: #7b62a3;
  --ended-bg: #ecebe6;
  --ended-text: #55524a;
  --ended-strong: #4a4740;
  --ribbon-bg: rgb(27 42 58 / 0.82);
  --on-ribbon: #fff;
  --sunday: #b5533f;
  --saturday: #3e6577;
  --focus: #a8834f;
  --focus-ring: rgb(27 42 58 / 0.12);
  --heart: #d58079;
  --heart-stroke: #bd625d;
  --photo-bg: #0f1822;
  --backdrop: rgb(15 24 34 / 0.88);
  --shadow-soft: rgb(0 0 0 / 0.06);
  --shadow-mid: rgb(0 0 0 / 0.13);
  --shadow-strong: rgb(0 0 0 / 0.33);
  --pf-nol-bg: #fff4c4;
  --pf-nol: #805c00;
  --pf-mrt-bg: #e9f4ff;
  --pf-mrt: #246591;
  --pf-prizm-bg: #f0eafa;
  --pf-prizm: #5e4389;
  --pf-trip-bg: #ffe8f0;
  --pf-trip: #a3385d;
  --pf-tripcom-bg: #e8eefe;
  --pf-tripcom: #2a4fb8;
  --pf-allmy-bg: #fff0d8;
  --pf-allmy: #8a550f;
  --pf-kakao-bg: #fff5b7;
  --pf-kakao: #675b08;
  --pf-naver-bg: #e7f9ea;
  --pf-naver: #27733a;
  --pf-eleven-bg: #ffeded;
  --pf-eleven: #a33b3b;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-base: 15px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 20px;
  --fs-3xl: 22px;
  --fs-4xl: 24px;
  --fs-5xl: 28px;
  --fs-6xl: 32px;
  --radius: 10px;
  --serif: "Noto Serif KR", "Noto Sans KR", serif;
  --tap: 44px;
  font-family: "Noto Sans KR", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --on-accent: #10161d;
    --paper: #10161d;
    --paper-glass: rgb(16 22 29 / 0.94);
    --surface: #161e27;
    --surface-glass: rgb(22 30 39 / 0.92);
    --surface-muted: #1b2430;
    --soft: #1d2733;
    --line: #29343f;
    --line-soft: #222c37;
    --line-strong: #4a5563;
    --ink: #ece8e0;
    --text-soft: #c9cdd2;
    --muted: #9ba5ae;
    --text-faint: #5d6874;
    --green: #cfae74;
    --green-strong: #e0c391;
    --link: #d9bd8a;
    --accent: #c9a46a;
    --accent-soft: #8d7550;
    --accent-text: #d9bd8a;
    --accent-strong: #b08c55;
    --peach: #1a2a33;
    --peach-line: #2a3f4a;
    --orange: #8fb5c7;
    --orange-text: #9cc0d0;
    --sale: #ff8f7a;
    --live-bg: #2a2236;
    --live-line: #403352;
    --live-text: #cdb0ec;
    --gold-bg: #29231a;
    --gold-line: #43392a;
    --gold-text: #e2c690;
    --dot-open: #8fb5c7;
    --dot-close: #d9b47a;
    --dot-live: #b691dd;
    --ended-bg: #2b2b28;
    --ended-text: #c9c6bd;
    --ended-strong: #5f5b52;
    --sunday: #e79a78;
    --saturday: #8fb2d4;
    --focus-ring: rgb(201 164 106 / 0.25);
    --photo-bg: #0a0f14;
    --shadow-soft: rgb(0 0 0 / 0.25);
    --shadow-mid: rgb(0 0 0 / 0.4);
  }

}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.65;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  background: none;
  border: 0;
}
button:disabled {
  cursor: default;
  opacity: 0.45;
}
button,
a,
input,
select,
summary {
  -webkit-tap-highlight-color: transparent;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
img {
  display: block;
  max-width: 100%;
}
svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
h1,
h2,
h3,
h4 {
  line-height: 1.45;
  word-break: keep-all;
}
button,
select {
  touch-action: manipulation;
}
[hidden] {
  display: none !important;
}
.container {
  max-width: 1220px;
  margin: auto;
  padding: 0 28px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 100;
  background: var(--green);
  color: var(--on-accent);
  padding: 12px;
}
.skip-link:focus {
  top: 10px;
}
.site-header {
  height: 76px;
  background: var(--paper-glass);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  height: 100%;
  max-width: 1276px;
  margin: auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 54px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: -0.4px;
  white-space: nowrap;
}
.brand img {
  width: 34px;
  height: 34px;
}
.site-header nav {
  height: 100%;
  display: flex;
  align-items: stretch;
  gap: 30px;
}
.site-header nav > a {
  display: flex;
  align-items: center;
  gap: 5px;
  border-bottom: 3px solid transparent;
  padding: 4px 0 0;
  font-size: var(--fs-md);
  color: var(--muted);
  white-space: nowrap;
  font-weight: 500;
}
.site-header nav > a.active {
  border-color: var(--green);
  color: var(--ink);
  font-weight: 700;
}


.site-footer {
  max-width: 1220px;
  margin: auto;
  border-top: 1px solid var(--line);
  padding: 28px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
}
.footer-brand {
  font-size: var(--fs-lg);
}
.footer-brand img {
  width: 28px;
  height: 28px;
}
.site-footer p,
.footer-meta {
  font-size: var(--fs-xs);
  color: var(--muted);
}
.site-footer p {
  margin-top: 8px;
}
.footer-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  max-width: 660px;
  text-align: right;
}
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.button.dark {
  background: var(--green);
  color: var(--on-accent);
  border-color: var(--green);
}
.button.dark:hover {
  background: var(--green-strong);
}
.button.outline {
  background: var(--surface);
}
.button.full {
  width: 100%;
}
.text-link {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
}

.loading,
.empty-state {
  text-align: center;
  padding: 80px 20px;
}
.loading > img,
.empty-state > img {
  margin: auto auto 18px;
}
.empty-state {
  grid-column: 1/-1;
}
.empty-state h2,
.empty-state h1 {
  font-size: var(--fs-4xl);
}
.empty-state p {
  margin: 12px 0 20px;
  font-size: var(--fs-md);
  color: var(--muted);
}
/* Discovery: the inventory is the primary content. */



.search-box {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0 12px;
  flex: 1;
  min-height: 44px;
}
.search-box svg {
  color: var(--accent);
  width: 17px;
  height: 17px;
}
.search-box input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: none;
  font-size: var(--fs-sm);
  padding: 10px 0;
}
.search-box:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.filter-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}
.filter-toggle svg {
  width: 16px;
  height: 16px;
}
.filter-toggle[aria-expanded="true"] {
  color: var(--surface);
  background: var(--ink);
  border-color: var(--ink);
}
.platform-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  min-height: 44px;
  align-items: center;
  margin-top: 7px;
}
.platform-tabs::-webkit-scrollbar {
  display: none;
}
.platform-tabs > button {
  flex-shrink: 0;
  min-height: var(--tap);
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: 30px;
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: nowrap;
}
.platform-tabs > button.selected {
  background: var(--green);
  color: var(--on-accent);
  font-weight: 600;
}
.platform-tabs > button:not(.selected):hover {
  background: var(--soft);
}
.extra-filters {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 15px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.select-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.select-wrap > span:not(.sr-only) {
  font-size: var(--fs-xs);
  color: var(--muted);
}
select {
  max-width: 100%;
  min-height: var(--tap);
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  padding: 7px 25px 7px 10px;
  font-size: var(--fs-sm);
}
.live-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  font-size: var(--fs-sm);
}
.live-toggle input {
  width: 17px;
  height: 17px;
  accent-color: var(--green);
}
.reset-link {
  min-height: var(--tap);
  padding: 6px 12px;
  color: var(--muted);
  font-size: var(--fs-sm);
  text-decoration: underline;
}
.result-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap);
  font-size: var(--fs-xs);
  color: var(--muted);
  gap: 8px;
}
.result-toolbar b {
  color: var(--ink);
}
.result-toolbar select {
  font-size: var(--fs-xs);
  border: 0;
  background: none;
  min-height: var(--tap);
  padding-top: 0;
  padding-bottom: 0;
}
.result-toolbar p {
  min-width: 0;
}
.result-toolbar p > span {
  font-size: var(--fs-xs);
}
.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 0;
  transition: border-color 0.18s;
}
.card-image {
  aspect-ratio: 3 / 2;
  position: relative;
  overflow: hidden;
  background: var(--soft);
}
.card-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.platform-badge {
  font-size: var(--fs-2xs);
  line-height: 1.4;
  display: inline-block;
  padding: 4px 7px;
  background: var(--surface-muted);
  border-radius: 5px;
  color: var(--text-soft);
  font-weight: 700;
  white-space: nowrap;
}
.platform-badge.nol {
  background: var(--pf-nol-bg);
  color: var(--pf-nol);
}
.platform-badge.mrt {
  background: var(--pf-mrt-bg);
  color: var(--pf-mrt);
}
.platform-badge.prizm {
  background: var(--pf-prizm-bg);
  color: var(--pf-prizm);
}
.platform-badge.trip {
  background: var(--pf-trip-bg);
  color: var(--pf-trip);
}
.platform-badge.tripcom {
  background: var(--pf-tripcom-bg);
  color: var(--pf-tripcom);
}
.platform-badge.allmy {
  background: var(--pf-allmy-bg);
  color: var(--pf-allmy);
}
.platform-badge.kakao {
  background: var(--pf-kakao-bg);
  color: var(--pf-kakao);
}
.platform-badge.naver {
  background: var(--pf-naver-bg);
  color: var(--pf-naver);
}
.platform-badge.eleven {
  background: var(--pf-eleven-bg);
  color: var(--pf-eleven);
}
.card-image > .platform-badge {
  position: absolute;
  left: 10px;
  top: 10px;
  max-width: calc(100% - 58px);
}




.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  background: var(--soft);
  color: var(--accent-text);
  font-size: var(--fs-2xs);
  line-height: 1.4;
  border-radius: 5px;
  font-weight: 500;
  white-space: nowrap;
}
.status-badge i {
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
}
.status-badge.upcoming {
  background: var(--peach);
  color: var(--orange-text);
}
.status-badge.unknown {
  background: var(--surface-muted);
  color: var(--muted);
}
.status-badge.ended,
.status-badge.soldout {
  background: var(--ended-strong);
  color: var(--on-ribbon);
  font-weight: 700;
}
.status-badge.closing {
  background: var(--peach);
  color: var(--orange-text);
}
.card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 11px 14px 12px;
}
.card-body .card-price {
  margin-top: auto;
}
.card-location {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-body h3 {
  font-family: var(--serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: 3px 0 5px;
  letter-spacing: -0.2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 24px;
}
.card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 22px;
}
.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card-link:focus-visible {
  outline: none;
}
.offer-card:has(.card-link:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.card-image > .platform-badge {
  z-index: 2;
}
.card-price {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
.card-price strong {
  font-size: var(--fs-3xl);
  letter-spacing: -0.6px;
}
.card-dates {
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-dates b {
  font-weight: 500;
  color: var(--text-soft);
}
.price-unit {
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: nowrap;
  align-self: flex-end;
  padding-bottom: 3px;
}
/* Price: seller's discount rate and crossed-out list price above the sale price. */
.price-tag {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.price-now {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.price-was {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--fs-sm);
  line-height: 1.35;
}
.price-was del {
  color: var(--muted);
  text-decoration-thickness: 1px;
}
.price-off {
  color: var(--sale);
  font-weight: 800;
}
.booking-price .price-was {
  font-size: var(--fs-md);
}
.is-ended .price-off {
  color: var(--muted);
}
.card-price {
  gap: 6px;
}
.mobile-booking-bar small {
  font-size: var(--fs-xs);
}
.show-more {
  text-align: center;
  margin: 24px 0;
}
.show-more span {
  color: var(--muted);
  font-weight: 400;
  font-size: var(--fs-xs);
}
.catalog-note {
  margin: 24px 0 34px;
  color: var(--muted);
  font-size: var(--fs-xs);
}
.image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(135deg, var(--soft), var(--surface-muted));
  padding: 15px;
  gap: 5px;
  text-align: center;
}
.image-placeholder > img {
  height: 38px !important;
  width: 38px !important;
  object-fit: contain;
}
.image-placeholder > span {
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.image-placeholder > small {
  font-size: var(--fs-xs);
  color: var(--muted);
}
/* Calendar: a compact month overview followed by readable, complete daily details. */
.calendar-page {
  padding-top: 16px;
  padding-bottom: 20px;
}



.calendar-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: start;
}
.calendar-box {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
}
.calendar-toolbar {
  display: flex;
  align-items: center;
  padding: 13px 16px 10px;
  gap: 9px;
}
.month-switch {
  display: flex;
  align-items: center;
  gap: 7px;
}
.month-switch > button {
  width: 40px;
  height: 44px;
  font-size: var(--fs-5xl);
  border-radius: 8px;
  line-height: 1;
}
.month-switch > button:hover {
  background: var(--soft);
}
.month-switch h2 {
  font-size: var(--fs-3xl);
  min-width: 134px;
  text-align: center;
  letter-spacing: -0.7px;
}
.today-button {
  min-width: 48px;
  min-height: var(--tap);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: var(--fs-xs);
  background: var(--surface);
}
.calendar-toolbar > .select-wrap {
  margin-left: auto;
}
.calendar-toolbar select {
  font-size: var(--fs-xs);
  max-width: 160px;
}
.calendar-mode-bar {
  padding: 0 15px 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
}
.segmented {
  display: flex;
  padding: 3px;
  background: var(--soft);
  border-radius: 9px;
}
.segmented button {
  font-size: var(--fs-xs);
  min-height: var(--tap);
  padding: 8px 12px;
  border-radius: 6px;
  white-space: nowrap;
}
.segmented button.selected {
  background: var(--surface);
  box-shadow: 0 1px 4px var(--shadow-soft);
  font-weight: 700;
}
.event-legend {
  display: flex;
  align-items: center;
  gap: 2px;
}
.event-legend button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: var(--tap);
  min-width: 45px;
  padding: 5px 7px;
  font-size: var(--fs-xs);
  color: var(--muted);
  border-radius: 7px;
}
.event-legend button.selected {
  background: var(--surface-muted);
  color: var(--ink);
  font-weight: 700;
}
.event-legend i,
.mobile-dots i {
  width: 5px;
  height: 5px;
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
}
.event-open {
  color: var(--accent-text);
  background: var(--soft);
}
.event-close {
  color: var(--orange-text);
  background: var(--peach);
}
.event-live {
  color: var(--live-text);
  background: var(--live-bg);
}
.event-legend i.event-open,
.mobile-dots i.event-open {
  background: var(--dot-open);
}
.event-legend i.event-close,
.mobile-dots i.event-close {
  background: var(--dot-close);
}
.event-legend i.event-live,
.mobile-dots i.event-live {
  background: var(--dot-live);
}
.calendar-month-summary {
  display: flex;
  gap: 15px;
  padding: 1px 18px 9px;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.calendar-month-summary b {
  font-weight: 600;
  color: var(--ink);
}
.kst-label {
  margin-left: auto;
}
.weekday-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--surface-muted);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.weekday-row > span {
  text-align: center;
  font-size: var(--fs-xs);
  padding: 8px;
}
.weekday-row > span:first-child {
  color: var(--sunday);
}
.weekday-row > span:last-child {
  color: var(--saturday);
}
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.day-cell {
  min-width: 0;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  min-height: 112px;
  padding: 3px;
}
.day-cell:nth-child(7n) {
  border-right: 0;
}
.day-cell.outside {
  background: var(--surface-muted);
  color: var(--text-faint);
}
.day-cell.selected-day {
  background: var(--soft);
  box-shadow: inset 0 0 0 2px var(--line-strong);
}
.day-select {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 28px;
  padding: 1px;
  gap: 3px;
  justify-content: flex-start;
  border-radius: 6px;
  font-size: var(--fs-xs);
}
.day-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
.today .day-number {
  background: var(--accent-strong);
  color: var(--on-accent);
  font-weight: 700;
}
.mobile-event-count,
.mobile-dots {
  display: none;
}
.cell-events {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 1px 3px;
}
.calendar-event {
  border-radius: 4px;
  font-size: var(--fs-2xs);
  min-height: 22px;
  padding: 3px 4px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 3px;
  line-height: 1.5;
  min-width: 0;
}
.calendar-event b {
  font-size: var(--fs-2xs);
  font-weight: 600;
  flex-shrink: 0;
}
.calendar-event > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.period-event {
  background: var(--soft);
  color: var(--accent-text);
}
.more-events {
  font-size: var(--fs-2xs);
  text-align: left;
  color: var(--muted);
  padding: 3px 4px;
  min-height: 24px;
}
.calendar-help {
  padding: 10px 16px;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.day-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  position: sticky;
  top: 18px;
}
.day-panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line);
  gap: 8px;
}
.day-panel-heading h3 {
  font-size: var(--fs-3xl);
  letter-spacing: -0.7px;
}
.day-panel-heading p {
  color: var(--muted);
  font-size: var(--fs-xs);
  margin-top: 4px;
}
.day-panel-mark {
  font-size: var(--fs-2xs);
  letter-spacing: 1px;
  color: var(--accent-text);
  writing-mode: vertical-rl;
}
.day-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 690px;
  overflow: auto;
  overscroll-behavior: contain;
}
.day-event-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
}
.day-event-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.event-time {
  font-size: var(--fs-2xs);
  line-height: 1.5;
  padding: 3px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.day-event-card h4 {
  font-size: var(--fs-lg);
  margin: 10px 0 4px;
}
.day-event-card p {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.7;
}
.day-event-card .day-offer-price {
  font-size: var(--fs-xl);
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 4px;
}
.day-offer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 8px;
}
.day-offer-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--tap);
  font-size: var(--fs-sm);
  color: var(--link);
  width: 100%;
}
.day-offer-links svg {
  width: 16px;
  height: 16px;
}
.day-active-switch {
  min-height: 48px;
  width: 100%;
  padding: 12px 18px;
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  background: var(--soft);
  font-size: var(--fs-xs);
  border-top: 1px solid var(--line);
}
.day-active-switch svg {
  width: 16px;
  height: 16px;
  margin-left: 5px;
}
.day-empty {
  text-align: center;
  padding: 24px 7px 30px;
  color: var(--muted);
}
.day-empty > span {
  font-size: 36px;
  color: var(--accent-soft);
}
.day-empty h4 {
  font-size: var(--fs-md);
  margin: 6px 0;
}
.day-empty p {
  font-size: var(--fs-xs);
}
.calendar-bottom {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin: 18px 0 25px;
}
/* Detail: schedule, benefits, and option-specific prices in a predictable reading order. */
.detail-page {
  padding-top: 14px;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: var(--fs-xs);
  overflow: hidden;
  white-space: nowrap;
}
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.breadcrumb > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 16px;
  gap: 18px;
}
.detail-heading h1 {
  font-family: var(--serif);
  font-size: var(--fs-6xl);
  font-weight: 600;
  letter-spacing: -0.8px;
  margin: 7px 0 4px;
}
.detail-heading p {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.detail-heading p svg {
  width: 15px;
  height: 15px;
}
.detail-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.kind-tag {
  font-size: var(--fs-2xs);
  color: var(--muted);
}


.gallery {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 8px;
  height: 420px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: var(--soft);
}
.gallery button {
  padding: 0;
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.gallery button > img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.gallery-hero {
  height: 100%;
}
.gallery-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  min-width: 0;
  min-height: 0;
}
.gallery-secondary button {
  height: 100%;
}
.gallery-label,
.gallery-secondary > button > span {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: var(--surface-glass);
  padding: 4px 8px;
  border-radius: 5px;
  font-size: var(--fs-xs);
  color: var(--text-soft);
}
.gallery-secondary > button > span {
  font-size: var(--fs-xs);
  max-width: calc(100% - 16px);
  top: 8px;
  bottom: auto;
  left: 8px;
}
.gallery > .gallery-all {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 8px 12px;
  background: var(--surface-glass);
  font-size: var(--fs-xs);
  border: 1px solid var(--surface-glass);
  border-radius: 7px;
  min-height: 40px;
  box-shadow: 0 3px 15px var(--shadow-soft);
}
.gallery-strip {
  display: none;
}
.room-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--muted);
  padding: 20px;
  grid-column: 1/-1;
}
.image-context {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin: 9px 0 14px;
  line-height: 1.8;
}
.detail-jump-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.detail-jump-nav > a {
  min-height: 48px;
  display: flex;
  align-items: center;
  font-size: var(--fs-md);
  font-weight: 600;
  padding: 0 4px;
  white-space: nowrap;
}
.detail-jump-nav > a:hover {
  color: var(--accent-text);
}
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 305px;
  gap: 40px;
  align-items: start;
}
.detail-content {
  min-width: 0;
}
.detail-section {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 62px;
}
.detail-section h2,
.related-section h2 {
  font-family: var(--serif);
  font-size: var(--fs-4xl);
  font-weight: 600;
  letter-spacing: -0.4px;
  margin-bottom: 18px;
}
.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.section-title-row h2 {
  margin-bottom: 16px;
}
.inline-note {
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--soft);
  font-size: var(--fs-sm);
  margin-top: 12px;
}
.exclusive-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  border: 1px solid var(--gold-line);
  background: var(--gold-bg);
  padding: 12px 16px;
  margin-bottom: 20px;
  border-radius: 8px;
}
.exclusive-note > span {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--gold-text);
}
.exclusive-note p {
  font-size: var(--fs-base);
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.benefit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.benefit-list li {
  font-size: var(--fs-lg);
  line-height: 1.65;
  overflow-wrap: anywhere;
}
/* One bullet everywhere: a small brass diamond hung in the left margin. */
.benefit-list > li {
  position: relative;
  padding-left: 20px;
}
.benefit-list > li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.68em;
  width: 6px;
  height: 6px;
  background: var(--accent);
  transform: rotate(45deg);
}
.benefit-list b {
  color: var(--ink);
  font-weight: 700;
}
.price-benefits .benefit-list b {
  color: var(--sale);
}
.benefit-list li > p {
  white-space: pre-line;
}
.preserve-lines {
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.section-description {
  font-size: var(--fs-md);
  color: var(--muted);
  line-height: 1.6;
  margin: -7px 0 16px;
}
.option-count {
  font-size: var(--fs-xs);
  white-space: nowrap;
  color: var(--muted);
  padding-bottom: 16px;
}
.room-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.room-option {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  min-width: 0;
}
.room-option h3 {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -0.2px;
  margin-bottom: 4px;
}
.room-package {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--muted);
}
.room-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.room-price strong {
  font-size: var(--fs-3xl);
  letter-spacing: -0.5px;
}
.room-price > span {
  font-size: var(--fs-xs);
  color: var(--muted);
}
.room-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--line-strong);
}
.room-link svg {
  width: 16px;
  height: 16px;
}
.booking-panel {
  position: sticky;
  top: 22px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 23px;
  border-radius: 12px;
  margin-top: 28px;
}
.booking-caption {
  font-size: var(--fs-sm);
  color: var(--muted);
}
.booking-price {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  gap: 4px;
}
.booking-price small {
  font-size: var(--fs-xs);
  color: var(--muted);
}
.booking-price strong {
  font-size: var(--fs-5xl);
  letter-spacing: -1px;
}
.booking-period {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.8;
  padding: 15px 0;
}
.booking-panel > .button {
  margin-top: 8px;
  font-size: var(--fs-xs);
  padding-left: 10px;
  padding-right: 10px;
}
.booking-disclaimer {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 13px;
  line-height: 1.8;
  text-align: center;
}
.related-section {
  padding: 35px 0 45px;
}
.related-section .offer-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mobile-booking-bar {
  display: none;
}
#photo-dialog {
  max-width: 1080px;
  width: 94vw;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 20px 80px var(--shadow-strong);
  overflow: visible;
}
#photo-dialog::backdrop {
  background: var(--backdrop);
  backdrop-filter: blur(5px);
}
.dialog-close {
  position: absolute;
  right: 0;
  top: -47px;
  width: 44px;
  height: 44px;
  color: var(--on-ribbon);
  font-size: var(--fs-6xl);
  line-height: 1;
}
.photo-category-tabs {
  display: flex;
  gap: 5px;
  padding: 9px 12px;
  background: var(--paper);
  border-radius: 12px 12px 0 0;
}
.photo-category-tabs > button {
  min-height: 38px;
  padding: 7px 15px;
  border-radius: 7px;
  font-size: var(--fs-sm);
}
.photo-category-tabs > button.selected {
  background: var(--green);
  color: var(--on-accent);
}
#photo-content > img {
  width: 100%;
  height: 62vh;
  object-fit: contain;
  background: var(--photo-bg);
}
.photo-caption-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  text-align: center;
}
.photo-caption-bar > button {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  font-size: var(--fs-5xl);
}
.photo-caption-bar strong {
  font-size: var(--fs-md);
}
.photo-caption-bar p,
.photo-caption-bar a {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 3px;
}
.photo-caption-bar a {
  text-decoration: underline;
  text-underline-offset: 3px;
}


.room-stay {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--orange-text);
  margin-top: 6px;
}
.day-panel-heading + .day-active-switch {
  border-top: 0;
  border-bottom: 1px solid var(--line);
}
.benefit-conditions {
  list-style: none;
  padding: 4px 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.benefit-list .benefit-conditions > li {
  font-size: var(--fs-md);
  color: var(--muted);
  line-height: 1.6;
}
.benefit-list > li p {
  white-space: pre-line;
}
/* Detail calendar: sale is a navy rule under the date, stay a mist band, live a brass ring. */
.schedule-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
}
.schedule-legend > li {
  display: flex;
  gap: 12px;
  min-width: 0;
}
.schedule-legend i {
  flex-shrink: 0;
  width: 18px;
  height: 14px;
  margin-top: 4px;
  border-radius: 3px;
}
.legend-sale i {
  height: 3px;
  margin-top: 10px;
  background: var(--ink);
}
.legend-stay i {
  background: var(--peach);
  border: 1px solid var(--peach-line);
}
.legend-live i {
  width: 14px;
  border-radius: 50%;
  border: 2px solid var(--accent);
}
.legend-benefit i {
  background: var(--gold-bg);
  border: 1px solid var(--gold-line);
}
.schedule-legend span {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
}
.schedule-legend strong {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.5;
  word-break: keep-all;
}
.schedule-legend small {
  display: block;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
}
.stay-calendar {
  position: relative;
  margin-top: 22px;
  padding: 18px 20px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.cal-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 32px) / 2);
  gap: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.cal-track::-webkit-scrollbar {
  display: none;
}
.cal-month {
  scroll-snap-align: start;
  min-width: 0;
}
.cal-month h3 {
  font-family: var(--serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  margin-bottom: 8px;
}
.cal-week,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cal-week span {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-align: center;
  padding-bottom: 4px;
}
.cal-day {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  color: var(--text-soft);
}
.cal-day b {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-weight: 400;
}
.cal-day.is-stay::before {
  content: "";
  position: absolute;
  inset: 5px 0;
  background: var(--peach);
}
.cal-day.stay-start::before {
  left: 4px;
  border-radius: 15px 0 0 15px;
}
.cal-day.stay-end::before {
  right: 4px;
  border-radius: 0 15px 15px 0;
}
.cal-day.is-sale::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 3px;
  background: var(--ink);
}
.cal-day.sale-start::after {
  left: 8px;
  border-radius: 2px 0 0 2px;
}
.cal-day.sale-end::after {
  right: 8px;
  border-radius: 0 2px 2px 0;
}
.cal-day.is-sale b {
  color: var(--ink);
  font-weight: 600;
}
.cal-day.is-live b {
  box-shadow: inset 0 0 0 2px var(--accent);
  font-weight: 700;
}
.cal-day.is-today b {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cal-nav {
  position: absolute;
  top: 6px;
  right: 8px;
  display: flex;
}
.cal-nav button {
  width: 44px;
  height: 44px;
  font-size: var(--fs-3xl);
  color: var(--muted);
}
.cal-nav button:hover {
  color: var(--ink);
}
/* Benefits: what lowers the price beside what is included, the same bullets in both. */
.benefit-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 36px;
  align-items: start;
}
.benefit-columns > :only-child {
  grid-column: 1 / -1;
}
.benefit-block > h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.benefit-block > h4 {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--accent-text);
  margin: 18px 0 8px;
}
.benefit-block > h3 + h4 {
  margin-top: 0;
}
.benefit-footnote {
  margin-top: 18px;
  font-size: var(--fs-md);
  color: var(--muted);
}
.room-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px 24px;
}
.room-head > .room-price {
  flex-shrink: 0;
  justify-content: flex-end;
  text-align: right;
}
.room-notes {
  margin-top: 12px;
}
.price-sum {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 9px;
  background: var(--soft);
  font-variant-numeric: tabular-nums;
}
.price-sum > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 0;
}
.price-sum dt {
  min-width: 0;
  color: var(--muted);
  font-size: var(--fs-md);
}
.price-sum dt > span {
  display: inline-block;
  width: 1.1em;
}
.price-sum dd {
  margin: 0;
  flex: none;
  font-size: var(--fs-base);
}
.price-sum > .price-sum-total {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--ink);
}
.price-sum-total dd {
  font-weight: 700;
  color: var(--ink);
}
.room-extras {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.room-extras > h4 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
}
.room-extras .benefit-list li {
  font-size: var(--fs-base);
}
/* Main keeps its height while data loads so the footer does not jump (layout shift). */
#main {
  min-height: 100vh;
  outline: none;
}
.gallery.skeleton {
  animation: skeleton-pulse 1.1s ease-in-out infinite alternate;
}
@keyframes skeleton-pulse {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}
/* Platform chips: fade the edge that has more chips to scroll to. */
.platform-tabs.fade-end {
  -webkit-mask-image: linear-gradient(90deg, black calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, black calc(100% - 48px), transparent);
}
.platform-tabs.fade-start {
  -webkit-mask-image: linear-gradient(90deg, transparent, black 48px);
  mask-image: linear-gradient(90deg, transparent, black 48px);
}
.platform-tabs.fade-start.fade-end {
  -webkit-mask-image: linear-gradient(90deg, transparent, black 48px, black calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, transparent, black 48px, black calc(100% - 48px), transparent);
}
.sort-wrap {
  display: flex;
}
/* Ended or sold-out offers stay readable, but nothing links to the seller. */
.offer-card.is-ended .card-image img {
  filter: grayscale(1);
  opacity: 0.55;
}
.ended-ribbon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 5px 10px;
  background: var(--ribbon-bg);
  color: var(--on-ribbon);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.02em;
}
.offer-card.is-ended .card-link {
  color: var(--muted);
}
.offer-card.is-ended .card-price strong,
.detail-page.is-ended .booking-price strong,
.mobile-booking-bar.is-ended strong {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.offer-card.is-ended .card-dates b {
  color: var(--ended-text);
  font-weight: 700;
}
.ended-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--ended-bg);
  border-left: 5px solid var(--ended-strong);
  color: var(--ended-text);
}
.ended-banner strong {
  display: block;
  font-size: var(--fs-xl);
  color: var(--ink);
}
.ended-banner p {
  font-size: var(--fs-md);
  margin-top: 2px;
}
.ended-banner .button {
  flex-shrink: 0;
}
.detail-page.is-ended .gallery img {
  filter: grayscale(0.85);
}
.booking-ended {
  margin-top: 8px;
  padding: 12px;
  border-radius: 9px;
  background: var(--ended-bg);
  color: var(--ended-text);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: center;
}
.mobile-booking-bar.is-ended small {
  color: var(--ended-text);
  font-weight: 700;
}
.day-event-card.is-ended {
  background: var(--surface-muted);
}
.day-event-card.is-ended h4,
.day-event-card.is-ended .day-offer-price {
  color: var(--muted);
}
.day-event-meta > .status-badge {
  margin-right: auto;
}
@media (min-width: 1600px) {
  .container {
    max-width: 1360px;
  }
  .offer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1050px) {
  .header-inner {
    gap: 30px;
  }
  .calendar-workspace {
    grid-template-columns: minmax(0, 1fr) 275px;
    gap: 16px;
  }
  .calendar-toolbar {
    padding: 10px;
  }
  .calendar-mode-bar {
    padding: 0 10px 8px;
  }
  .event-legend button {
    font-size: var(--fs-xs);
    min-width: 39px;
  }
  .month-switch h2 {
    font-size: var(--fs-2xl);
    min-width: 114px;
  }
  .month-switch > button {
    width: 30px;
  }
  .calendar-toolbar select {
    max-width: 115px;
  }
  .day-cell {
    min-height: 105px;
  }
  .calendar-event {
    font-size: var(--fs-2xs);
  }
  .detail-layout {
    grid-template-columns: minmax(0, 1fr) 265px;
    gap: 26px;
  }
  .booking-panel {
    padding: 18px;
  }
  .gallery {
    height: 360px;
  }
  .card-price strong {
    font-size: var(--fs-3xl);
  }
}
@media (max-width: 760px) {
  .container {
    padding: 0 18px;
  }
  .site-header {
    height: 76px;
  }
  .header-inner {
    padding: 0 18px;
    gap: 20px;
  }
  .brand {
    font-size: var(--fs-xl);
  }
  .brand img {
    width: 30px;
    height: 30px;
  }
  .site-header nav {
    gap: 16px;
  }
  .site-header nav > a {
    font-size: var(--fs-xs);
  }
  
  
  
  .offer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .card-body h3 {
    font-size: var(--fs-base);
  }
  .calendar-workspace {
    grid-template-columns: 1fr;
  }

  .calendar-toolbar {
    padding: 9px 10px;
  }
  .month-switch h2 {
    font-size: var(--fs-2xl);
    min-width: 120px;
  }
  .month-switch > button {
    width: 40px;
    height: 44px;
  }
  .today-button {
    min-height: 44px;
    min-width: 44px;
  }
  .calendar-toolbar select {
    max-width: 135px;
    min-height: 44px;
  }
  .calendar-mode-bar {
    padding: 0 10px 5px;
    display: block;
  }
  .segmented {
    width: 100%;
    margin-bottom: 4px;
  }
  .segmented button {
    min-height: 40px;
    flex: 1;
    font-size: var(--fs-xs);
  }
  .event-legend {
    display: flex;
    justify-content: flex-start;
    gap: 5px;
  }
  .event-legend button {
    min-height: 40px;
    min-width: 55px;
    font-size: var(--fs-xs);
  }
  .calendar-month-summary {
    padding: 0 13px 8px;
    font-size: var(--fs-xs);
    gap: 10px;
  }
  .weekday-row > span {
    padding: 5px;
    font-size: var(--fs-xs);
  }
  .day-cell {
    padding: 0;
    min-height: 53px;
  }
  .day-select {
    min-height: 53px;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding: 3px 1px 2px;
    border-radius: 0;
    font-size: var(--fs-xs);
  }
  .day-number {
    width: 23px;
    height: 23px;
    line-height: 1.3;
  }
  .mobile-event-count {
    display: block;
    font-size: var(--fs-2xs);
    line-height: 13px;
    color: var(--muted);
  }
  .mobile-dots {
    display: flex;
    gap: 3px;
    min-height: 6px;
    align-items: center;
  }
  .mobile-dots i {
    width: 4px;
    height: 4px;
  }
  .cell-events {
    display: none;
  }
  .calendar-help {
    font-size: var(--fs-xs);
    padding: 8px 12px;
  }
  .day-panel {
    position: static;
  }
  .day-panel-heading {
    padding: 14px 16px;
  }
  .day-panel-heading h3 {
    font-size: var(--fs-2xl);
  }
  .day-panel-mark {
    writing-mode: horizontal-tb;
    font-size: var(--fs-2xs);
  }
  .day-list {
    max-height: none;
    overflow: visible;
    padding: 12px;
  }
  .day-event-card {
    padding: 14px;
  }
  .day-event-card h4 {
    font-size: var(--fs-lg);
  }
  .day-event-card p {
    font-size: var(--fs-sm);
  }
  .day-offer-links a {
    min-height: 44px;
    font-size: var(--fs-sm);
  }
  .day-active-switch {
    font-size: var(--fs-sm);
    min-height: 48px;
  }
  .calendar-bottom {
    font-size: var(--fs-xs);
  }
  .detail-heading h1 {
    font-size: var(--fs-5xl);
  }
  .detail-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .booking-panel {
    display: none;
  }
  .detail-jump-nav {
    gap: 23px;
  }
  .detail-jump-nav > a {
    font-size: var(--fs-md);
  }
  .detail-section h2,
  .related-section h2 {
    font-size: var(--fs-3xl);
  }
  .gallery {
    height: 320px;
  }
  .image-context {
    font-size: var(--fs-xs);
  }
  .mobile-booking-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 18px max(10px, env(safe-area-inset-bottom));
    z-index: 20;
    background: var(--surface-glass);
    border-top: 1px solid var(--line);
    box-shadow: 0 -3px 15px var(--shadow-soft);
    backdrop-filter: blur(12px);
  }
  .mobile-booking-bar > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .mobile-booking-bar small {
    font-size: var(--fs-xs);
    color: var(--muted);
  }
  .mobile-booking-bar strong {
    font-size: var(--fs-2xl);
    white-space: nowrap;
    letter-spacing: -0.5px;
  }
  .mobile-booking-bar > .button {
    font-size: var(--fs-sm);
    padding: 10px 14px;
    white-space: nowrap;
  }
  .detail-page {
    padding-bottom: 70px;
  }
  .related-section .offer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .related-section .offer-card:nth-child(3) {
    display: none;
  }
  .site-footer {
    padding: 25px 18px;
    flex-direction: column;
    gap: 18px;
  }
  .footer-meta {
    align-items: flex-start;
    text-align: left;
  }
  .photo-category-tabs > button {
    min-height: 44px;
    font-size: var(--fs-sm);
  }
  .photo-caption-bar strong {
    font-size: var(--fs-sm);
  }
  .photo-caption-bar p,
  .photo-caption-bar a {
    font-size: var(--fs-xs);
  }

}
@media (max-width: 540px) {
  .container {
    padding: 0 14px;
  }
  .site-header {
    height: 96px;
  }
  .header-inner {
    padding: 6px 14px 0;
    gap: 0;
    flex-wrap: wrap;
    align-content: space-between;
  }
  .brand {
    height: 31px;
    font-size: var(--fs-lg);
    gap: 7px;
  }
  .brand img {
    width: 29px;
    height: 29px;
  }
  .site-header nav {
    height: var(--tap);
    width: 100%;
    margin: 0;
    gap: 22px;
  }
  .site-header nav > a {
    font-size: var(--fs-xs);
    padding-top: 0;
  }
  
  
  
  
  
  
  
  .search-box {
    min-height: 40px;
    padding: 0 10px;
    gap: 6px;
  }
  .search-box input {
    font-size: var(--fs-xs);
    padding: 9px 0;
  }
  .platform-tabs {
    margin-top: 4px;
    gap: 3px;
    min-height: 40px;
  }
  .platform-tabs > button {
    font-size: var(--fs-xs);
    min-height: var(--tap);
    padding: 6px 11px;
  }
  .result-toolbar {
    min-height: 30px;
    font-size: var(--fs-xs);
  }
  .result-toolbar select {
    font-size: var(--fs-xs);
    min-height: var(--tap);
    padding-right: 17px;
  }
  .result-toolbar p > span {
    font-size: var(--fs-xs);
  }
  .offer-grid {
    gap: 10px;
  }
  .offer-card {
    border-radius: 9px;
  }
  .card-image {
    aspect-ratio: 3 / 2;
  }
  .card-image > .platform-badge {
    left: 6px;
    top: 6px;
    font-size: var(--fs-2xs);
    max-width: calc(100% - 46px);
    padding: 3px 5px;
  }
  
  
  .status-badge i {
    width: 3px;
    height: 3px;
  }
  .card-body {
    padding: 6px 9px 7px;
  }
  .card-location {
    font-size: var(--fs-xs);
    line-height: 14px;
  }
  .card-body h3 {
    font-size: var(--fs-md);
    line-height: 19px;
    margin: 2px 0 1px;
    font-weight: 600;
    letter-spacing: -0.4px;
  }
  .card-price strong {
    font-size: var(--fs-xl);
    line-height: 23px;
    letter-spacing: -0.5px;
  }
  .card-dates {
    font-size: var(--fs-xs);
    margin-top: 2px;
    line-height: 15px;
  }
  .card-dates b {
    font-size: var(--fs-xs);
  }
  .extra-filters {
    gap: 9px;
    padding: 12px;
  }
  .extra-filters > .select-wrap {
    flex-basis: 100%;
    justify-content: space-between;
  }
  .extra-filters select {
    min-height: 44px;
    flex: 1;
    max-width: 230px;
    font-size: var(--fs-sm);
  }
  .extra-filters > .live-toggle {
    min-height: 44px;
    flex: 1;
  }
  .extra-filters > .reset-link {
    min-height: 44px;
  }
  .catalog-note {
    font-size: var(--fs-xs);
    line-height: 1.9;
    margin: 20px 0 28px;
  }
  .show-more {
    margin: 20px 0;
  }
  .show-more > .button {
    min-width: 210px;
    font-size: var(--fs-xs);
  }
  .image-placeholder {
    gap: 3px;
    padding: 9px;
  }
  .image-placeholder > img {
    width: 25px !important;
    height: 25px !important;
  }
  .image-placeholder > span {
    font-size: var(--fs-xs);
  }
  .image-placeholder > small {
    display: none;
  }




  .calendar-workspace {
    gap: 13px;
  }
  .calendar-box {
    border-radius: 11px;
  }
  .calendar-toolbar {
    padding: 6px 7px 3px;
    gap: 4px;
  }
  .month-switch {
    gap: 0;
  }
  .month-switch h2 {
    font-size: var(--fs-xl);
    min-width: 111px;
  }
  .month-switch > button {
    width: 36px;
    min-width: 36px;
    height: 44px;
    font-size: var(--fs-4xl);
  }
  .today-button {
    font-size: var(--fs-xs);
    min-width: 40px;
    padding: 0 6px;
    border: 0;
  }
  .calendar-toolbar select {
    font-size: var(--fs-xs);
    min-height: 40px;
    max-width: 103px;
    padding: 6px 17px 6px 7px;
  }
  .calendar-mode-bar {
    padding: 0 8px 3px;
  }
  .segmented {
    padding: 2px;
    margin: 0 0 1px;
  }
  .segmented button {
    font-size: var(--fs-xs);
    min-height: var(--tap);
    padding: 7px;
  }
  .event-legend {
    gap: 2px;
  }
  .event-legend button {
    min-width: 54px;
    min-height: var(--tap);
    font-size: var(--fs-xs);
    padding: 6px;
  }
  .calendar-month-summary {
    font-size: var(--fs-xs);
    padding: 0 12px 6px;
    gap: 10px;
  }
  .kst-label {
    font-size: var(--fs-2xs);
  }
  .weekday-row > span {
    font-size: var(--fs-xs);
    padding: 4px;
  }
  .day-cell {
    min-height: 49px;
  }
  .day-select {
    min-height: 49px;
    padding: 1px 0 2px;
    font-size: var(--fs-xs);
  }
  .day-number {
    width: 22px;
    height: 22px;
  }
  .mobile-event-count {
    font-size: var(--fs-2xs);
    line-height: 12px;
  }
  .calendar-help {
    font-size: var(--fs-xs);
    padding: 6px 10px;
  }
  .day-panel-heading {
    padding: 12px 14px;
  }
  .day-panel-heading h3 {
    font-size: var(--fs-2xl);
  }
  .day-panel-heading p {
    font-size: var(--fs-xs);
    margin-top: 2px;
  }
  .day-panel-mark {
    font-size: var(--fs-2xs);
    letter-spacing: 0.5px;
  }
  .day-list {
    padding: 10px;
    gap: 9px;
  }
  .day-event-card {
    padding: 12px;
  }
  .day-event-meta > .platform-badge {
    font-size: var(--fs-2xs);
  }
  .day-event-card h4 {
    font-size: var(--fs-base);
    margin-top: 8px;
  }
  .day-event-card p {
    font-size: var(--fs-xs);
  }
  .day-event-card .day-offer-price {
    font-size: var(--fs-xl);
  }
  .event-time {
    font-size: var(--fs-2xs);
  }
  .day-active-switch {
    font-size: var(--fs-xs);
    padding: 10px 8px;
    gap: 3px;
  }
  .day-empty {
    padding: 15px 7px 22px;
  }
  .day-empty h4 {
    font-size: var(--fs-md);
  }
  .day-empty p {
    font-size: var(--fs-xs);
  }
  .detail-page {
    padding-top: 10px;
  }
  .breadcrumb {
    font-size: var(--fs-xs);
  }
  .detail-heading {
    padding: 12px 0 13px;
    align-items: flex-start;
    gap: 8px;
  }
  .detail-heading h1 {
    font-size: var(--fs-4xl);
    margin: 6px 0 3px;
    line-height: 1.5;
  }
  .detail-heading p {
    font-size: var(--fs-xs);
  }
  .detail-tags {
    gap: 5px;
  }
  .detail-tags > .platform-badge {
    font-size: var(--fs-2xs);
  }
  .detail-tags > .status-badge {
    font-size: var(--fs-2xs);
  }
  .kind-tag {
    font-size: var(--fs-2xs);
  }
  
  
  .gallery {
    display: none;
  }
  .gallery-strip {
    display: block;
    position: relative;
    margin: 0 -14px;
  }
  .gallery-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    background: var(--soft);
  }
  .gallery-track::-webkit-scrollbar {
    display: none;
  }
  .gallery-track > button {
    flex: 0 0 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
    scroll-snap-align: start;
  }
  .gallery-track img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .gallery-count {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ribbon-bg);
    color: var(--on-ribbon);
    font-size: var(--fs-sm);
    pointer-events: none;
  }
  .gallery-secondary {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 6px;
  }
  .gallery-label {
    font-size: var(--fs-xs);
    bottom: 9px;
    left: 9px;
    padding: 3px 6px;
  }
  .gallery-secondary > button > span {
    font-size: var(--fs-xs);
    top: 5px;
    bottom: auto;
    left: 5px;
    padding: 2px 5px;
  }
  .gallery > .gallery-all {
    right: 8px;
    bottom: 74px;
    padding: 5px 8px;
    min-height: 34px;
    font-size: var(--fs-xs);
  }
  .image-context {
    font-size: var(--fs-xs);
    margin: 8px 0 8px;
    line-height: 1.8;
  }
  .detail-jump-nav {
    gap: 0;
    justify-content: space-between;
  }
  .detail-jump-nav > a {
    font-size: var(--fs-sm);
    min-height: 44px;
    padding: 0 5px;
  }
  .detail-section {
    padding: 22px 0;
  }
  .detail-section h2,
  .related-section h2 {
    font-size: var(--fs-2xl);
    margin-bottom: 14px;
    letter-spacing: -0.7px;
  }
  .benefit-list {
    gap: 12px;
  }
  .benefit-list li {
    font-size: var(--fs-lg);
    line-height: 1.65;
    gap: 8px;
  }
  .exclusive-note {
    padding: 12px 13px;
  }
  .exclusive-note p {
    font-size: var(--fs-base);
    line-height: 1.6;
  }
  .exclusive-note small {
    font-size: var(--fs-xs);
  }
  .section-description {
    font-size: var(--fs-sm);
    margin: -4px 0 14px;
  }
  .option-count {
    font-size: var(--fs-xs);
    padding-bottom: 14px;
  }
  .room-option {
    padding: 14px 12px;
    gap: 10px;
  }
  .room-option h3 {
    font-size: var(--fs-base);
  }
  .room-package {
    font-size: var(--fs-base);
    line-height: 1.6;
  }
  .room-price {
    gap: 6px;
    margin-top: 9px;
  }
  .room-price strong {
    font-size: var(--fs-3xl);
  }
  .room-price > span {
    font-size: var(--fs-xs);
  }
  .room-link {
    font-size: var(--fs-sm);
    min-height: 44px;
  }
  .related-section {
    padding: 26px 0 32px;
  }
  .related-section .text-link {
    font-size: var(--fs-xs);
    white-space: nowrap;
    padding-bottom: 14px;
  }
  .related-section .text-link svg {
    width: 13px;
    height: 13px;
  }
  .mobile-booking-bar {
    padding-left: 14px;
    padding-right: 14px;
  }
  .mobile-booking-bar strong {
    font-size: var(--fs-2xl);
  }
  .mobile-booking-bar .button {
    font-size: var(--fs-xs);
    padding-left: 12px;
    padding-right: 12px;
  }
  .photo-category-tabs {
    padding: 6px 8px;
    gap: 3px;
  }
  .photo-category-tabs > button {
    font-size: var(--fs-xs);
    padding: 6px 12px;
    min-height: 40px;
  }
  #photo-content > img {
    height: 52vh;
  }
  .photo-caption-bar {
    padding: 10px 5px;
    gap: 4px;
  }
  .photo-caption-bar strong {
    font-size: var(--fs-xs);
  }
  .photo-caption-bar p,
  .photo-caption-bar a {
    font-size: var(--fs-xs);
  }
  .photo-caption-bar > button {
    width: 40px;
    min-width: 40px;
  }
  .site-footer p,
  .footer-meta {
    font-size: var(--fs-xs);
  }
  .site-footer {
    padding: 22px 14px;
  }
  .empty-state h2 {
    font-size: var(--fs-2xl);
  }
  .empty-state p {
    font-size: var(--fs-sm);
  }
  .search-box,
  .filter-toggle {
    min-height: 44px;
  }
  .platform-tabs {
    min-height: 44px;
  }
  .platform-tabs > button {
    min-height: var(--tap);
  }
  
  .calendar-toolbar .month-switch > button {
    width: 44px;
    min-width: 44px;
  }
  .calendar-toolbar .month-switch h2 {
    font-size: var(--fs-lg);
    min-width: 88px;
    white-space: nowrap;
  }
  .calendar-toolbar > .today-button {
    min-width: 44px;
    min-height: 44px;
  }
  .calendar-toolbar select {
    min-height: 44px;
    max-width: 100px;
  }
  .segmented button,
  .event-legend button {
    min-height: 44px;
  }
  
  .gallery > .gallery-all {
    min-height: 44px;
  }
  .photo-category-tabs > button {
    min-height: 44px;
  }
  .benefit-list .benefit-conditions > li {
    font-size: var(--fs-md);
  }
  .card-price strong {
    font-size: var(--fs-xl);
  }
  .card-price .price-unit {
    font-size: var(--fs-xs);
    padding-bottom: 2px;
  }
  .card-price {
    gap: 4px;
  }
  .ended-banner {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
  }
  .ended-banner strong {
    font-size: var(--fs-lg);
  }
  .ended-banner p {
    font-size: var(--fs-sm);
  }
}
/* Detail on narrow screens: one month, one column, price under the option name. */
@media (max-width: 760px) {
  .schedule-legend,
  .benefit-columns {
    grid-template-columns: 1fr;
  }
  .cal-track {
    grid-auto-columns: 100%;
  }
  .room-head {
    flex-direction: column;
  }
  .room-head > .room-price {
    justify-content: flex-start;
    text-align: left;
  }
}
@media (max-width: 540px) {
  .detail-heading h1 {
    font-size: var(--fs-4xl);
  }
  .stay-calendar {
    padding: 14px 12px 10px;
  }
  .room-option {
    padding: 16px;
  }
  .room-option h3 {
    font-size: var(--fs-lg);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.footer-meta a {
  color: inherit;
  text-decoration: underline;
}
.legal-page {
  max-width: 720px;
  padding-block: 40px 64px;
  line-height: 1.7;
}
.legal-page h1 {
  margin: 12px 0 24px;
}
.legal-page h2 {
  margin: 28px 0 6px;
  font-size: 1.05rem;
}
.legal-page a {
  text-decoration: underline;
}

/* Header: wordmark, menu, then search and filter on the right. */
@font-face {
  font-family: "Stay Wordmark";
  src: url("/assets/fonts/wordmark-gowun-batang-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
/* Same width as .container, so the header lines up with the page content. */
.header-inner {
  max-width: 1220px;
}
@media (min-width: 1600px) {
  .header-inner {
    max-width: 1360px;
  }
}
.site-header .brand {
  font-family: "Stay Wordmark", var(--serif);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.header-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.search-toggle {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}
.search-toggle svg {
  width: 18px;
  height: 18px;
}
/* The bar opens from the icon, so it takes no room until someone asks for it. */
.header-search {
  flex: none;
  width: 0;
  min-height: 40px;
  margin-left: -8px; /* cancels the row gap while the bar takes no room */
  padding: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  border-width: 0;
  transition: width 0.18s, opacity 0.18s;
}
.search-open > .search-toggle {
  display: none;
}
.search-open > .header-search {
  width: 200px;
  margin-left: 0;
  padding: 0 12px;
  visibility: visible;
  opacity: 1;
  border-width: 1px;
}
.filter-toggle[hidden] {
  display: none;
}
/* Hover effects only where a pointer can hover: on touch they stick after a tap. */
@media (hover: hover) {
  .offer-card:hover {
    border-color: var(--line-strong);
  }
  .offer-card:hover .card-image img {
    transform: scale(1.035);
  }
  .filter-toggle:not([aria-expanded="true"]):hover,
  .search-toggle:hover,
  .button.outline:hover {
    border-color: var(--line-strong);
  }
}
.catalog-section > .platform-tabs {
  margin-top: 12px;
}
@media (max-width: 760px) {
  .site-header .brand {
    font-size: 24px;
  }
  /* The fixed booking bar must not cover the footer links at the end of a detail page. */
  body:has(.mobile-booking-bar) .site-footer {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 540px) {
  .site-header .brand {
    height: 44px;
    font-size: 23px;
  }
  .header-tools {
    order: 1;
    margin-left: auto;
  }
  .header-tools.search-open {
    flex: 1;
    min-width: 0;
    margin-left: 12px;
  }
  .search-toggle {
    width: 44px;
    height: 44px;
  }
  .header-search {
    min-height: 44px;
  }
  .search-open > .header-search {
    flex: 1;
    width: auto;
    min-width: 0;
  }
  .filter-toggle {
    width: 44px;
    min-height: 44px;
    padding: 0;
  }
  .filter-toggle > span {
    display: none;
  }
  .site-header nav {
    order: 2;
  }
}