:root {
  --kv-navy: #102a4c;
  --kv-blue: #1265e9;
  --kv-blue-pressed: #0d55c7;
  --kv-green: #4be23b;
  --kv-yellow: #ffe500;
  --kv-yellow-pressed: #f0d800;
  --kv-red: #ff4938;
  --kv-sky: #92d7ff;
  --kv-green-soft: #efffe8;
  --kv-yellow-soft: #fffbea;
  --kv-red-soft: #fff1ef;
  --kv-sky-soft: #eef8ff;
  --tds-grey-50: #f9fafb;
  --tds-grey-100: #f2f4f6;
  --tds-grey-200: #e5e8eb;
  --tds-grey-300: #d1d6db;
  --tds-grey-400: #b0b8c1;
  --tds-grey-500: #8b95a1;
  --tds-grey-600: #6b7684;
  --tds-grey-700: #4e5968;
  --tds-grey-800: #333d4b;
  --tds-grey-900: #191f28;
  --tds-blue-50: var(--kv-sky-soft);
  --tds-blue-500: var(--kv-blue);
  --tds-blue-600: var(--kv-blue-pressed);
  --tds-red-50: var(--kv-red-soft);
  --tds-red-500: var(--kv-red);
  --tds-red-600: #e63b2d;
  --color-text: var(--tds-grey-900);
  --color-text-secondary: var(--tds-grey-700);
  --color-text-tertiary: var(--tds-grey-500);
  --color-background: #ffffff;
  --color-surface: #ffffff;
  --color-surface-weak: var(--tds-grey-100);
  --color-border: var(--tds-grey-200);
  --color-accent: var(--tds-blue-500);
  --color-accent-pressed: var(--tds-blue-600);
  --color-danger: var(--tds-red-500);
  --color-danger-weak: var(--tds-red-50);
  --page-gutter: 24px;
  --nav-height: 76px;
  color: var(--tds-grey-900);
  background: #eef1f6;
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
}

body.boarding-pass-variant {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  color: var(--tds-grey-900);
  background: #eef1f6;
}

body.boarding-pass-variant .app-shell {
  display: grid;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: #ffffff;
}

body.boarding-pass-variant button,
body.boarding-pass-variant input {
  font-family: inherit;
}

body.boarding-pass-variant :where(h1, h2, h3, strong, button) {
  font-weight: 700;
}

/* 포커스는 유지하되 둥근 컴포넌트 밖으로 튀어나오지 않게 안쪽에 표시합니다. */
body.boarding-pass-variant button:focus-visible,
body.boarding-pass-variant .time-slot:has(input:focus-visible) {
  outline: 2px solid var(--kv-blue);
  outline-offset: -2px;
}

body.boarding-pass-variant .app-bar button:focus-visible {
  outline-color: rgba(255, 255, 255, 0.92);
}

body.boarding-pass-variant .screen:focus {
  outline: 0;
}

/* 앱바: 검은 배경과 48px 터치 영역을 함께 유지합니다. */
body.boarding-pass-variant .app-bar {
  position: relative;
  z-index: 20;
  display: grid;
  min-height: calc(64px + env(safe-area-inset-top));
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: end;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 8px;
  border-bottom: 0;
  color: #ffffff;
  background: #000000;
  backdrop-filter: none;
}

body.boarding-pass-variant .app-bar__title {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  overflow: hidden;
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  line-height: 25.5px;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.boarding-pass-variant[data-active-view="home"] .app-bar,
body.boarding-pass-variant[data-active-view="home"] .app-bar__title {
  color: #ffffff;
  background: #000000;
}

body.boarding-pass-variant[data-active-view="home"] .app-bar__title {
  justify-self: start;
  padding-left: 12px;
}

body.boarding-pass-variant .app-bar__back,
body.boarding-pass-variant .app-bar__notifications {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 48px;
  height: 48px;
  grid-row: 1;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 14px;
  color: #ffffff;
  background: transparent;
  cursor: pointer;
}

body.boarding-pass-variant .app-bar__back {
  grid-column: 1;
  margin-left: -4px;
}

body.boarding-pass-variant .app-bar__notifications {
  grid-column: 3;
  margin-right: -4px;
}

body.boarding-pass-variant[data-active-view="home"] .app-bar__notifications {
  color: #ffffff;
}

body.boarding-pass-variant .app-bar__back[hidden],
body.boarding-pass-variant .app-bar__notifications[hidden] {
  display: none;
}

body.boarding-pass-variant .app-bar__back:active,
body.boarding-pass-variant .app-bar__notifications:active {
  background: rgba(255, 255, 255, 0.16);
}

body.boarding-pass-variant .app-bar__back-icon,
body.boarding-pass-variant .app-bar__notifications-icon {
  width: 24px;
  height: 24px;
  background-color: currentColor;
}

body.boarding-pass-variant .app-bar__back-icon {
  mask: url("./assets/arrow-left.svg") center / contain no-repeat;
  -webkit-mask: url("./assets/arrow-left.svg") center / contain no-repeat;
}

body.boarding-pass-variant .app-bar__notifications-icon {
  mask: url("./assets/bell.svg") center / contain no-repeat;
  -webkit-mask: url("./assets/bell.svg") center / contain no-repeat;
}

body.boarding-pass-variant .app-bar__notifications-badge,
body.boarding-pass-variant .nav-item__badge {
  position: absolute;
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  color: #ffffff;
  background: var(--tds-red-500);
  font-size: 12px;
  font-weight: 700;
  line-height: 14px;
}

body.boarding-pass-variant .app-bar__notifications-badge {
  top: 1px;
  right: 0;
}

body.boarding-pass-variant .app-bar__notifications-badge {
  border-color: #000000;
}

body.boarding-pass-variant .app-bar__notifications-badge[hidden],
body.boarding-pass-variant .nav-item__badge[hidden] {
  display: none;
}

body.boarding-pass-variant .app-bar__spacer {
  grid-column: 3;
  grid-row: 1;
}

/* 본문 영역만 세로로 스크롤해 브라우저 화면은 안정적으로 유지합니다. */
body.boarding-pass-variant .app-content {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 var(--page-gutter) 32px;
  scroll-padding: 24px 0 32px;
  scrollbar-width: none;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

body.boarding-pass-variant .app-content::-webkit-scrollbar {
  display: none;
}

body.boarding-pass-variant .app-content:not(:has(#panel-home:not([hidden]))) {
  padding-top: 24px;
}

/* 하단 내비게이션은 4개 탭의 플로팅 모바일 패턴을 따릅니다. */
body.boarding-pass-variant .bottom-nav {
  position: relative;
  z-index: 30;
  right: auto;
  bottom: auto;
  left: auto;
  display: grid;
  width: auto;
  max-width: none;
  min-height: var(--nav-height);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0 12px calc(12px + env(safe-area-inset-bottom));
  padding: 6px 8px;
  border: 1px solid rgba(229, 232, 235, 0.92);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 28px rgba(25, 31, 40, 0.12);
  backdrop-filter: saturate(180%) blur(18px);
}

body.boarding-pass-variant .bottom-nav[hidden] {
  display: none;
}

body.boarding-pass-variant .nav-item {
  display: flex;
  min-width: 0;
  min-height: 58px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px 4px;
  border: 0;
  border-radius: 14px;
  color: var(--tds-grey-500);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  line-height: 19.5px;
  cursor: pointer;
}

body.boarding-pass-variant .nav-item.is-selected {
  border: 0;
  color: var(--kv-navy);
  background: var(--kv-yellow);
  font-weight: 700;
}

body.boarding-pass-variant .nav-item:active {
  background: var(--kv-yellow-soft);
}

body.boarding-pass-variant .nav-item__icon,
body.boarding-pass-variant .nav-item__icon-wrap {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

body.boarding-pass-variant .nav-item__icon-wrap {
  position: relative;
}

body.boarding-pass-variant .nav-item__icon {
  display: block;
  background-color: currentColor;
}

body.boarding-pass-variant .nav-item__icon--home {
  mask: url("./assets/house.svg") center / contain no-repeat;
  -webkit-mask: url("./assets/house.svg") center / contain no-repeat;
}

body.boarding-pass-variant .nav-item__icon--experience {
  mask: url("./assets/shapes.svg") center / contain no-repeat;
  -webkit-mask: url("./assets/shapes.svg") center / contain no-repeat;
}

body.boarding-pass-variant .nav-item__icon--reservation {
  mask: url("./assets/calendar-check.svg") center / contain no-repeat;
  -webkit-mask: url("./assets/calendar-check.svg") center / contain no-repeat;
}

body.boarding-pass-variant .nav-item__icon--guide {
  mask: url("./assets/building-2.svg") center / contain no-repeat;
  -webkit-mask: url("./assets/building-2.svg") center / contain no-repeat;
}

body.boarding-pass-variant .nav-item__badge {
  top: -5px;
  right: -8px;
  background: var(--kv-blue);
}

/* TDS 버튼 위계에 키비주얼 옐로를 주요 행동색으로 적용합니다. */
body.boarding-pass-variant .primary-button,
body.boarding-pass-variant .weak-button,
body.boarding-pass-variant .plain-button,
body.boarding-pass-variant .danger-button {
  min-height: 52px;
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  cursor: pointer;
  transform: none;
}

body.boarding-pass-variant .primary-button,
body.boarding-pass-variant .primary-button--yellow {
  padding: 14px 18px;
  color: var(--kv-navy);
  background: var(--kv-yellow);
}

body.boarding-pass-variant .primary-button:active,
body.boarding-pass-variant .primary-button--yellow:active {
  color: var(--kv-navy);
  background: var(--kv-yellow-pressed);
  box-shadow: none;
  transform: none;
}

body.boarding-pass-variant .primary-button:disabled {
  color: var(--tds-grey-500);
  background: var(--tds-grey-100);
  cursor: not-allowed;
}

body.boarding-pass-variant .weak-button {
  padding: 14px 18px;
  color: var(--tds-grey-900);
  background: var(--tds-grey-100);
}

body.boarding-pass-variant .weak-button:active {
  background: var(--tds-grey-200);
}

body.boarding-pass-variant .plain-button {
  color: var(--tds-grey-600);
  background: transparent;
}

body.boarding-pass-variant .danger-button {
  color: #ffffff;
  background: var(--tds-red-500);
}

body.boarding-pass-variant .danger-button:active {
  background: var(--tds-red-600);
}

body.boarding-pass-variant .status-badge,
body.boarding-pass-variant .availability-badge {
  display: inline-flex;
  width: max-content;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border: 0;
  border-radius: 999px;
  color: var(--kv-navy);
  background: var(--kv-yellow);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
}

body.boarding-pass-variant .availability-badge--reserved,
body.boarding-pass-variant .status-badge--reserved {
  color: #176b28;
  background: var(--kv-green-soft);
}

/* 홈: 캠페인 키비주얼과 평면적인 기능 영역을 함께 구성합니다. */
body.boarding-pass-variant .kv-home-hero {
  margin: 0 calc(var(--page-gutter) * -1);
  background: var(--kv-yellow);
}

body.boarding-pass-variant .kv-ribbon {
  position: relative;
  height: 40px;
  overflow: hidden;
  background: var(--kv-green);
}

body.boarding-pass-variant .kv-ribbon__track {
  position: absolute;
  top: 2px;
  left: 0;
  display: flex;
  width: max-content;
  animation: boarding-ribbon-marquee 14s linear infinite;
  will-change: transform;
}

body.boarding-pass-variant .kv-ribbon__track img {
  position: static;
  width: 470px;
  max-width: none;
  flex: 0 0 470px;
  transform: none;
  animation: none;
}

body.boarding-pass-variant .kv-hero-copy {
  padding: 28px var(--page-gutter) 26px;
}

body.boarding-pass-variant .kv-hero-copy h1 {
  margin: 0;
  color: var(--kv-blue);
  font-size: 34px;
  font-weight: 700;
  line-height: 41px;
  letter-spacing: -0.04em;
}

body.boarding-pass-variant .kv-greeting {
  display: block;
  margin-bottom: 6px;
  color: #10345b;
  font-size: 17px;
  font-weight: 700;
  line-height: 25.5px;
  letter-spacing: -0.02em;
}

body.boarding-pass-variant .kv-hero-copy p {
  max-width: 350px;
  margin: 14px 0 0;
  color: #133052;
  font-size: 15px;
  font-weight: 600;
  line-height: 22.5px;
  letter-spacing: -0.015em;
  word-break: keep-all;
}

body.boarding-pass-variant .kv-action-card {
  margin-top: 24px;
  padding: 24px 20px 20px;
  border: 1px solid rgba(18, 101, 233, 0.18);
  border-radius: 20px;
  background: var(--kv-sky-soft);
  box-shadow: none;
}

body.boarding-pass-variant .kv-action-card h2 {
  margin: 0;
  color: var(--kv-navy);
  font-size: 22px;
  font-weight: 700;
  line-height: 31px;
  letter-spacing: -0.025em;
  word-break: keep-all;
}

body.boarding-pass-variant .kv-action-card p {
  margin: 8px 0 0;
  color: var(--tds-grey-600);
  font-size: 15px;
  line-height: 22.5px;
  word-break: keep-all;
}

body.boarding-pass-variant .kv-action-card .primary-button {
  width: 100%;
  margin-top: 20px;
}

body.boarding-pass-variant .content-section {
  margin-top: 32px;
}

body.boarding-pass-variant .section-heading {
  min-height: 40px;
  margin-bottom: 8px;
}

body.boarding-pass-variant .section-heading:has(.section-heading__reservation-link) {
  min-height: 44px;
}

body.boarding-pass-variant .section-heading h2 {
  color: var(--tds-grey-900);
  font-size: 20px;
  font-weight: 700;
  line-height: 29px;
  letter-spacing: -0.025em;
}

body.boarding-pass-variant .section-heading > span,
body.boarding-pass-variant .reservation-section__heading > span {
  color: var(--tds-grey-500);
  font-size: 13px;
  font-weight: 600;
  line-height: 19.5px;
}

body.boarding-pass-variant .section-heading__reservation-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 2px;
  margin: 0 -8px 0 0;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  color: var(--kv-blue);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  cursor: pointer;
}

body.boarding-pass-variant .section-heading__reservation-link-icon,
body.boarding-pass-variant .boarding-pass-card__arrow,
body.boarding-pass-variant .notification-item__arrow,
body.boarding-pass-variant .reservation-manage-button__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background-color: currentColor;
  mask: url("./assets/chevron-right.svg") center / contain no-repeat;
  -webkit-mask: url("./assets/chevron-right.svg") center / contain no-repeat;
}

body.boarding-pass-variant .schedule-list {
  border-top: 1px solid var(--tds-grey-200);
}

body.boarding-pass-variant .schedule-row,
body.boarding-pass-variant .empty-action,
body.boarding-pass-variant .help-row {
  min-height: 80px;
  padding: 16px 2px;
  border: 0;
  border-bottom: 1px solid var(--tds-grey-200);
  border-radius: 0;
  color: var(--tds-grey-900);
  background: transparent;
  box-shadow: none;
}

body.boarding-pass-variant .schedule-row:active,
body.boarding-pass-variant .help-row:active {
  background: var(--tds-grey-50);
}

body.boarding-pass-variant .schedule-row__slot {
  color: var(--tds-grey-700);
  font-size: 15px;
  font-weight: 600;
  line-height: 22.5px;
}

body.boarding-pass-variant .schedule-row__copy strong,
body.boarding-pass-variant .empty-action strong,
body.boarding-pass-variant .help-row strong {
  color: var(--tds-grey-900);
  font-size: 15px;
  font-weight: 600;
  line-height: 22.5px;
}

body.boarding-pass-variant .schedule-row__copy span,
body.boarding-pass-variant .empty-action span span,
body.boarding-pass-variant .help-row span span {
  color: var(--tds-grey-500);
  font-size: 13px;
  line-height: 19.5px;
}

body.boarding-pass-variant .schedule-row__floor,
body.boarding-pass-variant .row-action {
  color: var(--tds-grey-600);
  font-size: 13px;
  font-weight: 600;
  line-height: 19.5px;
}

body.boarding-pass-variant .reservation-rule-copy {
  color: var(--tds-grey-600);
  font-size: 13px;
  line-height: 19.5px;
}

body.boarding-pass-variant .help-section {
  margin-top: 20px;
}

/* 화면별 공통 제목 체계입니다. */
body.boarding-pass-variant .page-header {
  margin-bottom: 24px;
}

body.boarding-pass-variant .page-header h1,
body.boarding-pass-variant .page-header--experience-list h1 {
  max-width: none;
  margin: 0;
  color: var(--kv-navy);
  font-size: 28px;
  font-weight: 700;
  line-height: 38px;
  letter-spacing: -0.035em;
}

body.boarding-pass-variant .page-header p,
body.boarding-pass-variant .page-header--experience-list p {
  margin: 8px 0 0;
  color: var(--tds-grey-600);
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  word-break: keep-all;
}

body.boarding-pass-variant[data-active-view="guide"] .app-content:not(:has(#panel-home:not([hidden]))) {
  padding-top: 0;
}

body.boarding-pass-variant #panel-guide .page-header {
  margin-bottom: 20px;
}

body.boarding-pass-variant #panel-guide .page-header p {
  margin-top: 0;
}

/* 체험 목록: ListHeader와 이동 가능한 평면 ListRow 구조입니다. */
body.boarding-pass-variant .page-header--experience-list {
  margin-bottom: 20px;
}

body.boarding-pass-variant .page-header--experience-list + .booking-guide,
body.boarding-pass-variant .booking-guide {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 0;
  border-radius: 16px;
  color: #ffffff;
  background: var(--kv-blue);
}

body.boarding-pass-variant .booking-guide > div {
  gap: 2px;
}

body.boarding-pass-variant .booking-guide strong {
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 22.5px;
}

body.boarding-pass-variant .booking-guide > div > span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 19.5px;
}

body.boarding-pass-variant .experience-list {
  display: grid;
  gap: 0;
  margin-top: 28px;
}

body.boarding-pass-variant .section-heading--attraction {
  min-height: 40px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--tds-grey-200);
}

body.boarding-pass-variant .section-heading--attraction > span {
  color: var(--kv-blue);
}

body.boarding-pass-variant .boarding-pass-card,
body.boarding-pass-variant .attraction-card {
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--tds-grey-200);
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

body.boarding-pass-variant .boarding-pass-card::before,
body.boarding-pass-variant .attraction-card::before {
  display: none;
}

body.boarding-pass-variant .boarding-pass-card__button,
body.boarding-pass-variant .attraction-card__button {
  display: grid;
  width: 100%;
  min-height: 116px;
  grid-template-columns: minmax(0, 1fr) 84px;
  gap: 10px;
  align-items: stretch;
  padding: 0;
  border: 0;
  color: var(--tds-grey-900);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

body.boarding-pass-variant .boarding-pass-card__button:active,
body.boarding-pass-variant .attraction-card__button:active {
  background: var(--tds-grey-50);
  transform: none;
}

body.boarding-pass-variant .boarding-pass-card:has(.boarding-pass-card__button:focus-visible) {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--kv-blue);
}

body.boarding-pass-variant .boarding-pass-card__button:focus-visible {
  outline: 0;
}

body.boarding-pass-variant .boarding-pass-card__main {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 6px;
  padding: 16px 0;
}

body.boarding-pass-variant .boarding-pass-card__main:has(.availability-badge) {
  gap: 4px;
  padding: 8px 0;
}

body.boarding-pass-variant .boarding-pass-card__eyeline .availability-badge {
  min-height: 22px;
  padding: 1px 8px;
  line-height: 20px;
}

body.boarding-pass-variant .boarding-pass-card__eyeline {
  display: flex;
  min-width: 0;
  align-items: center;
}

body.boarding-pass-variant .boarding-pass-card__eyeline:empty {
  display: none;
}

body.boarding-pass-variant .boarding-pass-card .attraction-card__copy {
  gap: 2px;
}

body.boarding-pass-variant .boarding-pass-card .attraction-card__copy strong {
  overflow: hidden;
  color: var(--tds-grey-900);
  font-size: 17px;
  font-weight: 700;
  line-height: 25.5px;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.boarding-pass-variant .boarding-pass-card .attraction-card__copy > span {
  overflow: hidden;
  color: var(--tds-grey-600);
  font-size: 13px;
  line-height: 19.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.boarding-pass-variant .boarding-pass-card .attraction-card__facts {
  display: flex;
  padding: 0;
}

body.boarding-pass-variant .boarding-pass-card .attraction-card__facts > span {
  display: inline-flex;
  gap: 4px;
  padding: 0;
  border: 0;
}

body.boarding-pass-variant .boarding-pass-card .attraction-card__facts small,
body.boarding-pass-variant .boarding-pass-card .attraction-card__facts strong {
  color: var(--tds-grey-500);
  font-size: 13px;
  font-weight: 400;
  line-height: 19.5px;
}

body.boarding-pass-variant .boarding-pass-card__stub {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 18px;
  grid-template-rows: auto auto;
  align-self: center;
  align-content: center;
  align-items: center;
  justify-items: start;
  gap: 0 2px;
  min-height: 72px;
  margin: 12px 0;
  padding: 10px 9px 10px 11px;
  border: 0;
  border-radius: 14px;
  background: var(--kv-sky-soft);
  text-align: left;
}

body.boarding-pass-variant .attraction-card:nth-of-type(4n + 2) .boarding-pass-card__stub {
  background: var(--kv-yellow-soft);
}

body.boarding-pass-variant .attraction-card:nth-of-type(4n + 3) .boarding-pass-card__stub {
  background: var(--kv-red-soft);
}

body.boarding-pass-variant .attraction-card:nth-of-type(4n + 4) .boarding-pass-card__stub {
  background: var(--kv-green-soft);
}

body.boarding-pass-variant .boarding-pass-card__stub::before,
body.boarding-pass-variant .boarding-pass-card__stub::after {
  display: none;
}

body.boarding-pass-variant .boarding-pass-card__stub-label {
  grid-column: 1 / -1;
  color: var(--kv-blue);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

body.boarding-pass-variant .boarding-pass-card__floor {
  grid-column: 1;
  grid-row: 2;
  margin-top: 1px;
  color: var(--kv-navy);
  font-size: 20px;
  font-weight: 700;
  line-height: 29px;
  letter-spacing: -0.025em;
}

body.boarding-pass-variant .boarding-pass-card__arrow {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  margin-top: 1px;
  color: var(--kv-blue);
}

body.boarding-pass-variant .boarding-pass-card .attraction-card__action {
  display: none;
}

/* 체험 상세: Top, 정보 그룹, 하단 CTA 구조입니다. */
body.boarding-pass-variant .attraction-detail {
  display: grid;
  align-content: start;
  gap: 0;
}

body.boarding-pass-variant .attraction-detail__hero,
body.boarding-pass-variant .experience-detail-section,
body.boarding-pass-variant .time-picker {
  margin: 0;
  padding: 0 0 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.boarding-pass-variant .attraction-detail__hero {
  padding-bottom: 28px;
}

body.boarding-pass-variant .attraction-detail__hero h1 {
  margin: 10px 0 0;
  color: var(--kv-navy);
  font-size: 28px;
  font-weight: 700;
  line-height: 38px;
  letter-spacing: -0.035em;
}

body.boarding-pass-variant .attraction-detail__hero > p {
  margin: 8px 0 0;
  color: var(--tds-grey-600);
  font-size: 15px;
  line-height: 22.5px;
}

body.boarding-pass-variant .attraction-detail__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 22px 0 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: var(--kv-sky-soft);
}

body.boarding-pass-variant .attraction-detail__facts > div {
  min-width: 0;
  padding: 16px 12px;
}

body.boarding-pass-variant .attraction-detail__facts > div + div {
  padding-left: 12px;
  border-left: 1px solid var(--tds-grey-200);
}

body.boarding-pass-variant .attraction-detail__facts dt {
  color: var(--tds-grey-500);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

body.boarding-pass-variant .attraction-detail__facts dd {
  margin: 4px 0 0;
  overflow: visible;
  color: var(--tds-grey-900);
  font-size: 15px;
  font-weight: 700;
  line-height: 22.5px;
  text-overflow: clip;
  white-space: normal;
  word-break: keep-all;
}

body.boarding-pass-variant .experience-detail-section,
body.boarding-pass-variant .time-picker {
  padding-top: 24px;
  border-top: 1px solid var(--tds-grey-200);
}

body.boarding-pass-variant .experience-detail-section h2,
body.boarding-pass-variant .time-picker h2 {
  margin: 0;
  color: var(--tds-grey-900);
  font-size: 20px;
  font-weight: 700;
  line-height: 29px;
  letter-spacing: -0.025em;
}

body.boarding-pass-variant .experience-detail-section p,
body.boarding-pass-variant .time-picker > p {
  margin: 8px 0 0;
  color: var(--tds-grey-600);
  font-size: 15px;
  line-height: 22.5px;
}

body.boarding-pass-variant .usage-list {
  gap: 8px;
  margin-top: 12px;
}

body.boarding-pass-variant .usage-list li {
  color: var(--tds-grey-600);
  font-size: 14px;
  line-height: 21px;
}

body.boarding-pass-variant .time-slots {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

body.boarding-pass-variant .time-slot {
  min-height: 72px;
  padding: 10px 6px;
  border: 1px solid var(--tds-grey-200);
  border-radius: 14px;
  color: var(--tds-grey-900);
  background: #ffffff;
}

body.boarding-pass-variant .time-slot:has(input:checked) {
  border-color: var(--kv-blue);
  background: var(--kv-green-soft);
  box-shadow: inset 0 0 0 1px var(--kv-blue);
}

body.boarding-pass-variant .time-slot strong {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

body.boarding-pass-variant .time-slot span {
  color: var(--tds-grey-600);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

body.boarding-pass-variant .time-slot.is-disabled {
  color: var(--tds-grey-500);
  background: var(--tds-grey-100);
}

body.boarding-pass-variant .time-slot[data-slot-status="open"] .time-slot__status {
  color: var(--kv-blue);
  font-weight: 700;
}

body.boarding-pass-variant .time-slot[data-slot-status="upcoming"] {
  border-style: dashed;
  background: #f9fafb;
}

body.boarding-pass-variant .time-picker .time-picker__availability {
  font-size: 13px;
  line-height: 20px;
}

body.boarding-pass-variant .time-picker .selection-note {
  color: var(--tds-grey-500);
  font-size: 13px;
  line-height: 19.5px;
}

body.boarding-pass-variant.is-experience-detail .app-content {
  padding-bottom: 0;
}

body.boarding-pass-variant.is-experience-detail #panel-experience {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

body.boarding-pass-variant.is-experience-detail .attraction-detail {
  flex: 0 0 auto;
}

body.boarding-pass-variant .reservation-cta--sticky {
  position: sticky;
  z-index: 10;
  bottom: 0;
  margin: auto calc(var(--page-gutter) * -1) 0;
  padding: 18px var(--page-gutter) calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 18px);
}

body.boarding-pass-variant .reservation-cta .primary-button {
  width: 100%;
}

body.boarding-pass-variant .reservation-cta__help {
  margin: 0 0 10px;
  color: var(--tds-grey-600);
  font-size: 13px;
  line-height: 19.5px;
  text-align: center;
}

/* 예약: 상태, 관리 행동, 대기 안내를 간결하게 보여줍니다. */
body.boarding-pass-variant .reservation-section,
body.boarding-pass-variant .reservation-history {
  display: grid;
  gap: 12px;
}

body.boarding-pass-variant .reservation-card-list {
  display: grid;
  gap: 12px;
}

body.boarding-pass-variant .reservation-card {
  overflow: hidden;
  border: 1px solid rgba(18, 101, 233, 0.14);
  border-radius: 20px;
  background: var(--kv-sky-soft);
  box-shadow: none;
}

body.boarding-pass-variant .reservation-card__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 16px;
}

body.boarding-pass-variant .reservation-card__title-wrap {
  display: grid;
  min-width: 0;
  gap: 5px;
}

body.boarding-pass-variant .reservation-card h2 {
  margin: 0;
  overflow: hidden;
  color: var(--tds-grey-900);
  font-size: 17px;
  font-weight: 700;
  line-height: 25.5px;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.boarding-pass-variant .reservation-card__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  margin: 0;
  color: var(--tds-grey-600);
  font-size: 14px;
  line-height: 21px;
  word-break: keep-all;
}

body.boarding-pass-variant .reservation-card__summary-duration {
  white-space: nowrap;
}

body.boarding-pass-variant .reservation-manage-button {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  gap: 1px;
  margin: -9px -9px 0 0;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  color: var(--kv-blue);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  cursor: pointer;
}

body.boarding-pass-variant .reservation-manage-button:active {
  background: var(--tds-grey-100);
}

body.boarding-pass-variant .reservation-card__arrival {
  display: grid;
  gap: 3px;
  margin: 0 12px 12px;
  padding: 14px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
}

body.boarding-pass-variant .reservation-card__arrival span {
  color: var(--tds-grey-500);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

body.boarding-pass-variant .reservation-card__arrival strong {
  color: var(--tds-grey-700);
  font-size: 13px;
  font-weight: 500;
  line-height: 19.5px;
  word-break: keep-all;
}

body.boarding-pass-variant .reservation-capacity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--kv-green-soft);
}

body.boarding-pass-variant .reservation-capacity-row p {
  margin: 0;
  color: var(--tds-grey-600);
  font-size: 14px;
  line-height: 21px;
}

body.boarding-pass-variant .reservation-add-button {
  width: 100%;
  margin-top: 0;
}

body.boarding-pass-variant .reservation-capacity-note {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #e4b92f;
  border-radius: 16px;
  color: #786039;
  background: #fff8d6;
  font-size: 14px;
  line-height: 21px;
  text-align: left;
}

body.boarding-pass-variant .reservation-capacity-note h3 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 8px;
  color: #6b4600;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

body.boarding-pass-variant .reservation-capacity-note p {
  margin: 0;
}

body.boarding-pass-variant .reservation-capacity-note__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 2px;
  background: currentColor;
  -webkit-mask: url("./assets/info.svg") center / contain no-repeat;
  mask: url("./assets/info.svg") center / contain no-repeat;
}

body.boarding-pass-variant .reservation-history {
  margin-top: 32px;
  padding-bottom: 12px;
}

body.boarding-pass-variant .reservation-history__list {
  border-top: 1px solid var(--tds-grey-200);
}

body.boarding-pass-variant .reservation-history__item {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--tds-grey-200);
}

body.boarding-pass-variant .reservation-history__copy {
  min-width: 0;
}

body.boarding-pass-variant .reservation-history__status {
  color: var(--tds-grey-500);
  font-size: 13px;
  font-weight: 600;
  line-height: 19.5px;
}

body.boarding-pass-variant .reservation-history__item h3 {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--tds-grey-900);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.boarding-pass-variant .reservation-history__item p,
body.boarding-pass-variant .reservation-history__item time {
  color: var(--tds-grey-500);
  font-size: 13px;
  line-height: 19.5px;
}

body.boarding-pass-variant .reservation-history__item p {
  margin: 3px 0 0;
}

body.boarding-pass-variant .reservation-history__item time {
  flex: 0 0 auto;
}

body.boarding-pass-variant .reservation-empty {
  padding: 30px 20px 24px;
  border: 0;
  border-radius: 20px;
  background: var(--kv-sky-soft);
  box-shadow: none;
  text-align: center;
}

body.boarding-pass-variant .reservation-empty > strong {
  color: var(--tds-grey-900);
  font-size: 20px;
  font-weight: 700;
  line-height: 29px;
}

body.boarding-pass-variant .reservation-empty > p {
  margin: 8px 0 0;
  color: var(--tds-grey-600);
  font-size: 15px;
  line-height: 22.5px;
}

body.boarding-pass-variant .reservation-empty .primary-button {
  width: 100%;
  margin-top: 20px;
}

/* 층별안내: 검색과 독립적으로 여러 층을 동시에 펼칠 수 있는 디렉터리입니다. */
body.boarding-pass-variant .guide-intro {
  margin-bottom: 20px;
  padding-top: 24px;
}

body.boarding-pass-variant .guide-intro h1 {
  margin: 0 0 6px;
  color: var(--kv-navy);
  font-size: 24px;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: -0.025em;
}

body.boarding-pass-variant .guide-intro p {
  margin: 0;
  color: var(--tds-grey-600);
  font-size: 14px;
  line-height: 21px;
}

body.boarding-pass-variant .guide-search-area {
  position: sticky;
  z-index: 10;
  top: 0;
  margin: 0 calc(var(--page-gutter) * -1) 14px;
  padding: 0 var(--page-gutter) 10px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
}

body.boarding-pass-variant .guide-search-field {
  display: grid;
  min-height: 52px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-radius: 16px;
  background: var(--tds-grey-100);
}

body.boarding-pass-variant .guide-search-field:focus-within {
  box-shadow: inset 0 0 0 2px var(--kv-blue);
}

body.boarding-pass-variant .guide-search-field input {
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  border: 0;
  outline: 0;
  color: var(--tds-grey-900);
  background: transparent;
  font-size: 16px;
  font-weight: 500;
}

body.boarding-pass-variant .guide-search-field input::placeholder {
  color: var(--tds-grey-500);
}

body.boarding-pass-variant .guide-search-field input::-webkit-search-cancel-button {
  display: none;
}

body.boarding-pass-variant .guide-search-field button {
  min-width: 48px;
  height: 44px;
  margin-right: 4px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  color: var(--kv-blue);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
}

body.boarding-pass-variant .guide-search-field button[hidden] {
  display: none;
}

body.boarding-pass-variant .guide-directory__toolbar {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

body.boarding-pass-variant .guide-directory__status {
  min-width: 0;
  margin: 0 0 0 2px;
  color: var(--tds-grey-600);
  font-size: 13px;
  line-height: 20px;
}

body.boarding-pass-variant .guide-directory__expand-all {
  min-width: 76px;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  color: var(--kv-blue);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
}

body.boarding-pass-variant .guide-directory__expand-all:active {
  background: var(--tds-grey-100);
}

body.boarding-pass-variant .guide-floor-directory {
  border-top: 1px solid var(--tds-grey-200);
}

body.boarding-pass-variant .guide-floor {
  border-bottom: 1px solid var(--tds-grey-200);
}

body.boarding-pass-variant .guide-floor__summary {
  display: grid;
  width: 100%;
  min-height: 68px;
  grid-template-columns: 68px minmax(0, 1fr) auto 18px;
  gap: 10px;
  align-items: center;
  padding: 8px 2px;
  border: 0;
  color: inherit;
  background: #ffffff;
  text-align: left;
}

body.boarding-pass-variant button.guide-floor__summary:active {
  background: var(--tds-grey-50);
}

body.boarding-pass-variant .guide-floor__number {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  color: var(--kv-navy);
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

body.boarding-pass-variant .guide-floor__number svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin-left: auto;
}

body.boarding-pass-variant .guide-floor__copy {
  min-width: 0;
}

body.boarding-pass-variant .guide-floor__copy strong,
body.boarding-pass-variant .guide-floor__copy > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.boarding-pass-variant .guide-floor__copy strong {
  color: var(--tds-grey-900);
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
}

body.boarding-pass-variant .guide-floor__copy > span {
  margin-top: 1px;
  color: var(--tds-grey-500);
  font-size: 12px;
  line-height: 18px;
}

body.boarding-pass-variant .guide-floor__count {
  color: var(--tds-grey-500);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
}

body.boarding-pass-variant .guide-floor__chevron {
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: url("./assets/chevron-right.svg") center / contain no-repeat;
  -webkit-mask: url("./assets/chevron-right.svg") center / contain no-repeat;
  transition: transform 180ms ease;
}

body.boarding-pass-variant .guide-floor__summary[aria-expanded="true"] .guide-floor__chevron {
  transform: rotate(90deg);
}

body.boarding-pass-variant .guide-floor__panel {
  padding: 0 0 18px 78px;
}

body.boarding-pass-variant .guide-floor__panel[hidden] {
  display: none;
}

body.boarding-pass-variant .guide-place-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.boarding-pass-variant .guide-place {
  display: flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  border-bottom: 1px solid var(--tds-grey-100);
  color: var(--tds-grey-700);
  font-size: 14px;
  line-height: 20px;
}

body.boarding-pass-variant .guide-place--wide {
  grid-column: 1 / -1;
}

body.boarding-pass-variant #panel-guide mark {
  padding: 1px 2px;
  border-radius: 4px;
  color: var(--kv-navy);
  background: #fff4a3;
}

body.boarding-pass-variant .guide-facilities {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--tds-grey-50);
}

body.boarding-pass-variant .guide-facilities strong {
  display: block;
  margin-bottom: 4px;
  color: var(--tds-grey-500);
  font-size: 12px;
  line-height: 18px;
}

body.boarding-pass-variant .guide-facilities span {
  color: var(--tds-grey-700);
  font-size: 13px;
  line-height: 20px;
}

body.boarding-pass-variant .guide-empty-result {
  padding: 48px 20px;
  text-align: center;
}

body.boarding-pass-variant .guide-empty-result strong {
  display: block;
  margin-bottom: 6px;
  font-size: 17px;
  line-height: 26px;
}

body.boarding-pass-variant .guide-empty-result p {
  margin: 0;
  color: var(--tds-grey-500);
  font-size: 14px;
  line-height: 21px;
}

/* 알림: 화면 문구가 그대로 읽히는 ListHeader와 ListRow 구조입니다. */
body.boarding-pass-variant .notification-list > h2 {
  margin: 0 0 10px;
  color: var(--tds-grey-900);
  font-size: 22px;
  font-weight: 700;
  line-height: 31px;
  letter-spacing: -0.03em;
}

body.boarding-pass-variant .notification-list > div {
  border-top: 1px solid var(--tds-grey-200);
}

body.boarding-pass-variant .notification-item {
  display: grid;
  width: 100%;
  min-height: 108px;
  grid-template-columns: 8px minmax(0, 1fr) 20px;
  gap: 10px;
  align-items: start;
  padding: 18px 2px;
  border: 0;
  border-bottom: 1px solid var(--tds-grey-200);
  color: var(--tds-grey-900);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

body.boarding-pass-variant .notification-item:active {
  background: var(--tds-grey-50);
}

body.boarding-pass-variant .notification-item__status {
  width: 6px;
  height: 6px;
  margin-top: 9px;
  border-radius: 50%;
  background: transparent;
}

body.boarding-pass-variant .notification-item.is-unread .notification-item__status {
  background: var(--kv-red);
}

body.boarding-pass-variant .notification-item.is-unread {
  background: var(--kv-sky-soft);
}

body.boarding-pass-variant .notification-item__copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

body.boarding-pass-variant .notification-item__copy strong {
  color: var(--tds-grey-900);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

body.boarding-pass-variant .notification-item.is-unread .notification-item__copy strong {
  font-weight: 700;
}

body.boarding-pass-variant .notification-item__copy > span {
  color: var(--tds-grey-600);
  font-size: 14px;
  line-height: 21px;
}

body.boarding-pass-variant .notification-item__copy time {
  color: var(--tds-grey-500);
  font-size: 13px;
  line-height: 19.5px;
}

body.boarding-pass-variant .notification-item__arrow {
  margin-top: 3px;
  color: var(--tds-grey-400);
}

body.boarding-pass-variant .notification-empty {
  padding: 56px 20px;
  border-radius: 20px;
  background: var(--tds-grey-50);
  text-align: center;
}

body.boarding-pass-variant .notification-empty h2 {
  margin: 0;
  color: var(--tds-grey-900);
  font-size: 20px;
  font-weight: 700;
  line-height: 29px;
}

body.boarding-pass-variant .notification-empty p {
  margin: 8px 0 0;
  color: var(--tds-grey-600);
  font-size: 15px;
  line-height: 22.5px;
}

/* BottomSheet, 확인 대화상자 행동, Toast의 공통 표현입니다. */
body.boarding-pass-variant .modal-layer {
  background: rgba(25, 31, 40, 0.5);
}

body.boarding-pass-variant .bottom-sheet {
  width: 100%;
  max-width: 430px;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 10px 24px calc(24px + env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  color: var(--tds-grey-900);
  background: #ffffff;
  box-shadow: 0 -18px 48px rgba(25, 31, 40, 0.16);
}

body.boarding-pass-variant .sheet-handle {
  width: 36px;
  height: 4px;
  margin: 0 auto 18px;
  background: var(--tds-grey-300);
}

body.boarding-pass-variant .bottom-sheet h2 {
  margin: 0;
  color: var(--tds-grey-900);
  font-size: 22px;
  font-weight: 700;
  line-height: 31px;
  letter-spacing: -0.03em;
}

body.boarding-pass-variant .sheet-description {
  margin: 8px 0 0;
  color: var(--tds-grey-600);
  font-size: 15px;
  line-height: 22.5px;
}

body.boarding-pass-variant .change-summary {
  margin-top: 20px;
  border-color: var(--tds-grey-200);
}

body.boarding-pass-variant .change-summary div {
  min-height: 52px;
}

body.boarding-pass-variant .change-summary dt,
body.boarding-pass-variant .change-summary dd {
  font-size: 14px;
  line-height: 21px;
}

body.boarding-pass-variant .change-summary dt {
  color: var(--tds-grey-500);
}

body.boarding-pass-variant .change-summary dd {
  color: var(--tds-grey-900);
  font-weight: 600;
}

body.boarding-pass-variant .sheet-actions {
  gap: 8px;
  margin-top: 24px;
}

body.boarding-pass-variant .sheet-actions--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

body.boarding-pass-variant .reservation-management-list {
  margin-top: 16px;
  border-top: 1px solid var(--tds-grey-200);
}

body.boarding-pass-variant .reservation-management-action {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  width: 100%;
  min-height: 68px;
  align-content: center;
  gap: 2px;
  margin: 0;
  padding: 12px 2px;
  border: 0;
  border-bottom: 1px solid var(--tds-grey-200);
  border-radius: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

body.boarding-pass-variant .reservation-management-action:active {
  background: var(--tds-grey-50);
}

body.boarding-pass-variant .reservation-management-action strong {
  color: var(--tds-grey-900);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

body.boarding-pass-variant .reservation-management-action--danger strong {
  color: var(--tds-red-600);
}

body.boarding-pass-variant .reservation-management-action span {
  color: var(--tds-grey-500);
  font-size: 13px;
  line-height: 19.5px;
}

body.boarding-pass-variant .reservation-management-list + .sheet-actions {
  margin-top: 16px;
}

body.boarding-pass-variant .toast {
  right: 20px;
  bottom: calc(var(--nav-height) + 34px + env(safe-area-inset-bottom));
  left: 20px;
  width: calc(100% - 40px);
  max-width: 390px;
  padding: 14px 17px;
  border-radius: 14px;
  color: #ffffff;
  background: rgba(16, 42, 76, 0.96);
  box-shadow: 0 8px 24px rgba(25, 31, 40, 0.18);
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
}

@keyframes boarding-ribbon-marquee {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (hover: hover) and (pointer: fine) {
  body.boarding-pass-variant .primary-button:hover {
    background: #f5dc00;
  }

  body.boarding-pass-variant .weak-button:hover {
    background: var(--tds-grey-200);
  }

  body.boarding-pass-variant .nav-item:not(.is-selected):hover,
  body.boarding-pass-variant .section-heading__reservation-link:hover,
  body.boarding-pass-variant .reservation-manage-button:hover {
    background: var(--tds-grey-100);
  }

  body.boarding-pass-variant .app-bar__back:hover,
  body.boarding-pass-variant .app-bar__notifications:hover {
    background: rgba(255, 255, 255, 0.16);
  }

  body.boarding-pass-variant .nav-item.is-selected:hover {
    background: var(--kv-yellow);
  }
}

@media (max-width: 350px) {
  :root {
    --page-gutter: 20px;
  }

  body.boarding-pass-variant .kv-hero-copy h1 {
    font-size: 31px;
    line-height: 38px;
  }

  body.boarding-pass-variant .boarding-pass-card__button {
    grid-template-columns: minmax(0, 1fr) 78px;
    gap: 8px;
  }

  body.boarding-pass-variant .boarding-pass-card__stub {
    padding-right: 7px;
    padding-left: 9px;
  }

  body.boarding-pass-variant .attraction-detail__facts > div {
    padding-right: 8px;
    padding-left: 8px;
  }

  body.boarding-pass-variant .attraction-detail__facts dd {
    font-size: 14px;
  }

  body.boarding-pass-variant .reservation-card__heading {
    gap: 8px;
    padding: 16px 16px 12px;
  }

  body.boarding-pass-variant .reservation-card h2 {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    word-break: keep-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.boarding-pass-variant .reservation-card__summary {
    gap: 0 5px;
    font-size: 13px;
    line-height: 19.5px;
  }

  body.boarding-pass-variant .reservation-card__arrival {
    padding: 12px;
  }

  body.boarding-pass-variant[data-active-view="reservation"] .app-content {
    padding-top: 20px;
  }

  body.boarding-pass-variant .reservation-section {
    gap: 8px;
  }

  body.boarding-pass-variant .reservation-section__heading {
    margin-bottom: 0;
  }

  body.boarding-pass-variant .reservation-capacity-row {
    padding: 12px 14px;
  }

  body.boarding-pass-variant[data-active-view="guide"] {
    --page-gutter: 16px;
  }

  body.boarding-pass-variant .guide-floor__summary {
    grid-template-columns: 64px minmax(0, 1fr) auto 18px;
    gap: 6px;
  }

  body.boarding-pass-variant .guide-floor__panel {
    padding-left: 70px;
  }

  body.boarding-pass-variant .guide-place-list {
    grid-template-columns: 1fr;
  }

  body.boarding-pass-variant .guide-place--wide {
    grid-column: auto;
  }

  body.boarding-pass-variant .sheet-actions--split {
    grid-template-columns: 1fr;
  }

  body.boarding-pass-variant .bottom-sheet {
    padding-right: 20px;
    padding-left: 20px;
  }
}

/* 펼친 폴드 화면을 수용하는 CSS 뷰포트 기준입니다. 기기의 물리 해상도와는 다릅니다. */
@media (max-width: 1024px) {
  body.boarding-pass-variant {
    padding: 0;
  }

  body.boarding-pass-variant .app-shell {
    max-width: none;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body.boarding-pass-variant .app-bar {
    border-radius: 0;
  }

  body.boarding-pass-variant .modal-layer {
    align-items: flex-end;
    padding: 48px 0 0;
  }

  body.boarding-pass-variant .bottom-sheet {
    max-width: none;
  }
}

@media (min-width: 1025px) {
  body.boarding-pass-variant {
    padding: 24px 0;
  }

  body.boarding-pass-variant .app-shell {
    height: calc(100vh - 48px);
    height: calc(100dvh - 48px);
    border-radius: 28px;
    box-shadow: 0 22px 70px rgba(25, 31, 40, 0.16);
  }

  body.boarding-pass-variant .app-bar {
    border-radius: 28px 28px 0 0;
  }

  body.boarding-pass-variant .bottom-nav {
    margin-bottom: 12px;
  }

  body.boarding-pass-variant .bottom-sheet {
    border-radius: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.boarding-pass-variant *,
  body.boarding-pass-variant *::before,
  body.boarding-pass-variant *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  body.boarding-pass-variant .kv-ribbon__track {
    transform: translateX(-20px);
    animation: none !important;
  }
}