/**
 * XeroTrip mobile — 디자인 토큰(--xt-*) + 색 유틸(.xt-text-*, .xt-bg-*, .xt-border-*)
 * 레이아웃·간격·타이포 크기는 Tailwind CDN, 색은 여기 팔레트/시맨틱 유틸을 조합한다.
 */

body.font-sans {
    font-family: var(--xt-font-sans);
}

html.xt-mobile-html,
body.xt-mobile-body {
    height: 100%;
}

/* -------------------------------------------------------------------------- */
/* 토큰 (팔레트 + 시맨틱 별칭 + 타이포/스페이스 — 유틸·컴포넌트에서 참조)              */
/* -------------------------------------------------------------------------- */

:root {
    --xt-blue-50: #e8f3ff;
    --xt-blue-500: #3182f6;
    --xt-blue-600: #2272eb;
    --xt-blue-800: #154aa1;

    --xt-brand-blue: #0064ff;
    --xt-brand-gray: #202632;

    --xt-red-500: #f04452;
    --xt-green-500: #03b26c;
    --xt-orange-500: #fe9800;
    --xt-yellow-500: #ffc342;
    --xt-teal-500: #18a5a5;
    --xt-purple-500: #a234c7;

    --xt-grey-50: #f9fafb;
    --xt-grey-100: #f2f4f6;
    --xt-grey-200: #e5e8eb;
    --xt-grey-300: #d1d6db;
    --xt-grey-400: #b0b8c1;
    --xt-grey-500: #8b95a1;
    --xt-grey-600: #6b7684;
    --xt-grey-700: #4e5968;
    --xt-grey-800: #333d4b;
    --xt-grey-900: #191f28;

    --xt-white: #ffffff;
    --xt-black: #000000;

    --xt-scrim-50: rgba(2, 9, 19, 0.5);
    --xt-scrim-90: rgba(2, 9, 19, 0.91);

    --xt-bg-page: var(--xt-grey-50);
    --xt-bg-surface: var(--xt-white);
    --xt-bg-muted: var(--xt-grey-100);
    --xt-bg-info: var(--xt-blue-50);

    --xt-text-heading: var(--xt-grey-900);
    --xt-text-body: var(--xt-grey-600);
    --xt-text-caption: var(--xt-grey-500);
    --xt-text-placeholder: var(--xt-grey-400);
    --xt-text-inverse: var(--xt-white);

    --xt-border-default: var(--xt-grey-200);
    --xt-border-strong: var(--xt-grey-300);

    --xt-primary: var(--xt-blue-500);
    --xt-primary-hover: var(--xt-blue-600);
    --xt-on-primary: var(--xt-white);

    --xt-danger: var(--xt-red-500);
    --xt-success: var(--xt-green-500);
    --xt-warning: var(--xt-orange-500);
    --xt-success-border-muted: rgba(3, 178, 108, 0.3);

    --xt-font-sans: "Pretendard", "Toss Product Sans", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --xt-font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

    --xt-size-display-hero: 1.875rem;
    --xt-size-display-lg: 1.625rem;
    --xt-size-heading-lg: 1.375rem;
    --xt-size-heading: 1.25rem;
    --xt-size-subtitle: 1rem;
    --xt-size-body-lg: 1rem;
    --xt-size-body: 0.875rem;
    --xt-size-body-sm: 0.8125rem;
    --xt-size-caption: 0.75rem;

    --xt-leading-tight: 1.33;
    --xt-leading-snug: 1.38;
    --xt-leading-normal: 1.5;
    --xt-leading-relaxed: 1.57;

    --xt-weight-regular: 400;
    --xt-weight-semibold: 600;
    --xt-weight-bold: 700;

    --xt-space-1: 0.25rem;
    --xt-space-2: 0.5rem;
    --xt-space-3: 0.75rem;
    --xt-space-4: 1rem;
    --xt-space-5: 1.25rem;
    --xt-space-6: 1.5rem;
    --xt-space-8: 2rem;
    --xt-space-10: 2.5rem;
    --xt-space-12: 3rem;

    --xt-radius-xs: 0.25rem;
    --xt-radius-sm: 0.5rem;
    --xt-radius-md: 0.75rem;
    --xt-radius-lg: 1rem;
    --xt-radius-pill: 9999px;

    --xt-shadow-0: none;
    --xt-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.06);
    --xt-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.08);
    --xt-shadow-3: 0 4px 12px rgba(0, 0, 0, 0.12);
    --xt-shadow-4: 0 8px 24px rgba(0, 0, 0, 0.16);
    --xt-shadow-footer: 0 -4px 16px rgba(0, 0, 0, 0.06);

    --xt-motion-instant: 0ms;
    --xt-motion-fast: 150ms;
    --xt-motion-standard: 250ms;
    --xt-motion-slow: 400ms;
    --xt-motion-page: 350ms;

    --xt-ease-enter: cubic-bezier(0, 0, 0.2, 1);
    --xt-ease-exit: cubic-bezier(0.4, 0, 1, 1);
    --xt-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --xt-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --xt-touch-min: 2.75rem;
    --xt-touch-comfort: 3rem;
    --xt-touch-financial: 3.25rem;

    --xt-focus-ring: 0 0 0 2px var(--xt-white), 0 0 0 4px var(--xt-blue-500);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --xt-motion-fast: var(--xt-motion-instant);
        --xt-motion-standard: var(--xt-motion-instant);
        --xt-motion-slow: var(--xt-motion-instant);
        --xt-motion-page: var(--xt-motion-instant);
    }
}

/* -------------------------------------------------------------------------- */
/* 색 유틸 — 시맨틱(테마 연동)                                                */
/* -------------------------------------------------------------------------- */

.xt-text-heading {
    color: var(--xt-text-heading);
}
.xt-text-body {
    color: var(--xt-text-body);
}
.xt-text-caption {
    color: var(--xt-text-caption);
}
.xt-text-placeholder {
    color: var(--xt-text-placeholder);
}
.xt-text-inverse {
    color: var(--xt-text-inverse);
}
.xt-text-primary {
    color: var(--xt-primary);
}
.xt-text-danger {
    color: var(--xt-danger);
}
.xt-text-success {
    color: var(--xt-success);
}
.xt-text-warning {
    color: var(--xt-warning);
}
.xt-text-on-primary {
    color: var(--xt-on-primary);
}

.xt-bg-page {
    background-color: var(--xt-bg-page);
}
.xt-bg-surface {
    background-color: var(--xt-bg-surface);
}
.xt-bg-muted {
    background-color: var(--xt-bg-muted);
}
.xt-bg-info {
    background-color: var(--xt-bg-info);
}
.xt-bg-primary {
    background-color: var(--xt-primary);
}
.xt-bg-danger {
    background-color: var(--xt-danger);
}
.xt-bg-success-soft {
    background-color: rgba(3, 178, 108, 0.08);
}

.xt-border-default {
    border-color: var(--xt-border-default);
}
.xt-border-strong {
    border-color: var(--xt-border-strong);
}
.xt-border-primary {
    border-color: var(--xt-primary);
}
.xt-border-success {
    border-color: var(--xt-success);
}

.xt-border-success-muted {
    border-color: var(--xt-success-border-muted);
}

/* -------------------------------------------------------------------------- */
/* 색 유틸 — 팔레트 (Tailwind 스타일 네이밍)                                   */
/* -------------------------------------------------------------------------- */

.xt-text-grey-50 {
    color: var(--xt-grey-50);
}
.xt-text-grey-100 {
    color: var(--xt-grey-100);
}
.xt-text-grey-200 {
    color: var(--xt-grey-200);
}
.xt-text-grey-300 {
    color: var(--xt-grey-300);
}
.xt-text-grey-400 {
    color: var(--xt-grey-400);
}
.xt-text-grey-500 {
    color: var(--xt-grey-500);
}
.xt-text-grey-600 {
    color: var(--xt-grey-600);
}
.xt-text-grey-700 {
    color: var(--xt-grey-700);
}
.xt-text-grey-800 {
    color: var(--xt-grey-800);
}
.xt-text-grey-900 {
    color: var(--xt-grey-900);
}

.xt-bg-grey-50 {
    background-color: var(--xt-grey-50);
}
.xt-bg-grey-100 {
    background-color: var(--xt-grey-100);
}
.xt-bg-grey-200 {
    background-color: var(--xt-grey-200);
}
.xt-bg-grey-300 {
    background-color: var(--xt-grey-300);
}
.xt-bg-grey-400 {
    background-color: var(--xt-grey-400);
}
.xt-bg-grey-500 {
    background-color: var(--xt-grey-500);
}
.xt-bg-grey-600 {
    background-color: var(--xt-grey-600);
}
.xt-bg-grey-700 {
    background-color: var(--xt-grey-700);
}
.xt-bg-grey-800 {
    background-color: var(--xt-grey-800);
}
.xt-bg-grey-900 {
    background-color: var(--xt-grey-900);
}

.xt-border-grey-50 {
    border-color: var(--xt-grey-50);
}
.xt-border-grey-100 {
    border-color: var(--xt-grey-100);
}
.xt-border-grey-200 {
    border-color: var(--xt-grey-200);
}
.xt-border-grey-300 {
    border-color: var(--xt-grey-300);
}
.xt-border-grey-400 {
    border-color: var(--xt-grey-400);
}
.xt-border-grey-500 {
    border-color: var(--xt-grey-500);
}
.xt-border-grey-600 {
    border-color: var(--xt-grey-600);
}
.xt-border-grey-700 {
    border-color: var(--xt-grey-700);
}
.xt-border-grey-800 {
    border-color: var(--xt-grey-800);
}
.xt-border-grey-900 {
    border-color: var(--xt-grey-900);
}

.xt-text-blue-50 {
    color: var(--xt-blue-50);
}
.xt-text-blue-500 {
    color: var(--xt-blue-500);
}
.xt-text-blue-600 {
    color: var(--xt-blue-600);
}
.xt-text-blue-800 {
    color: var(--xt-blue-800);
}

.xt-bg-blue-50 {
    background-color: var(--xt-blue-50);
}
.xt-bg-blue-500 {
    background-color: var(--xt-blue-500);
}
.xt-bg-blue-600 {
    background-color: var(--xt-blue-600);
}
.xt-bg-blue-800 {
    background-color: var(--xt-blue-800);
}

.xt-border-blue-50 {
    border-color: var(--xt-blue-50);
}
.xt-border-blue-500 {
    border-color: var(--xt-blue-500);
}
.xt-border-blue-600 {
    border-color: var(--xt-blue-600);
}
.xt-border-blue-800 {
    border-color: var(--xt-blue-800);
}

.xt-text-red-500 {
    color: var(--xt-red-500);
}
.xt-bg-red-500 {
    background-color: var(--xt-red-500);
}
.xt-border-red-500 {
    border-color: var(--xt-red-500);
}

.xt-text-green-500 {
    color: var(--xt-green-500);
}
.xt-bg-green-500 {
    background-color: var(--xt-green-500);
}
.xt-border-green-500 {
    border-color: var(--xt-green-500);
}

.xt-text-orange-500 {
    color: var(--xt-orange-500);
}
.xt-bg-orange-500 {
    background-color: var(--xt-orange-500);
}
.xt-border-orange-500 {
    border-color: var(--xt-orange-500);
}

.xt-text-yellow-500 {
    color: var(--xt-yellow-500);
}
.xt-bg-yellow-500 {
    background-color: var(--xt-yellow-500);
}
.xt-border-yellow-500 {
    border-color: var(--xt-yellow-500);
}

.xt-text-teal-500 {
    color: var(--xt-teal-500);
}
.xt-bg-teal-500 {
    background-color: var(--xt-teal-500);
}
.xt-border-teal-500 {
    border-color: var(--xt-teal-500);
}

.xt-text-purple-500 {
    color: var(--xt-purple-500);
}
.xt-bg-purple-500 {
    background-color: var(--xt-purple-500);
}
.xt-border-purple-500 {
    border-color: var(--xt-purple-500);
}

.xt-text-white {
    color: var(--xt-white);
}
.xt-bg-white {
    background-color: var(--xt-white);
}
.xt-border-white {
    border-color: var(--xt-white);
}

.xt-text-black {
    color: var(--xt-black);
}
.xt-bg-black {
    background-color: var(--xt-black);
}
.xt-border-black {
    border-color: var(--xt-black);
}

/* 그림자 토큰만 (카드 등) */
.xt-shadow-1 {
    box-shadow: var(--xt-shadow-1);
}
.xt-shadow-2 {
    box-shadow: var(--xt-shadow-2);
}

.xt-shadow-footer {
    box-shadow: var(--xt-shadow-footer);
}

/* -------------------------------------------------------------------------- */
/* 앱 셸 · 헤더/푸터/탭 — 레이아웃만 (색은 템플릿에서 xt-* 유틸 조합)              */
/* -------------------------------------------------------------------------- */

.xt-app-shell {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}
#xt-app, .xt-app-footer, #xt-mobile-shop-iframe {
    /* 웹에서 보기 편하기 하기용 */
    max-width: 600px;
}

/* i18n 부트 — 번역 적용 전 한글 깜빡임 방지 */
html.xt-i18n-pending #xt-app,
html.xt-i18n-pending .xt-hotel-msg-fab-wrap {
    visibility: hidden;
}

.xt-i18n-boot-skeleton {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 12000;
    align-items: flex-start;
    justify-content: center;
    padding: calc(3.25rem + env(safe-area-inset-top, 0px)) 1rem 1rem;
    background-color: var(--xt-bg-page);
    pointer-events: none;
}

html.xt-i18n-pending .xt-i18n-boot-skeleton {
    display: flex;
}

.xt-i18n-boot-skeleton__panel {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.xt-i18n-boot-skeleton__bar {
    height: 1rem;
    border-radius: 0.5rem;
    background: linear-gradient(
        90deg,
        var(--xt-grey-100) 0%,
        var(--xt-grey-200) 45%,
        var(--xt-grey-100) 90%
    );
    background-size: 200% 100%;
    animation: xt-i18n-skeleton-shimmer 1.2s ease-in-out infinite;
}

.xt-i18n-boot-skeleton__bar--hero {
    height: 1.75rem;
    width: 55%;
}

.xt-i18n-boot-skeleton__bar--lg {
    width: 88%;
}

.xt-i18n-boot-skeleton__bar--sm {
    width: 42%;
}

html.xt-theme-dark .xt-i18n-boot-skeleton__bar {
    background: linear-gradient(
        90deg,
        var(--xt-grey-800) 0%,
        var(--xt-grey-700) 45%,
        var(--xt-grey-800) 90%
    );
    background-size: 200% 100%;
}

@keyframes xt-i18n-skeleton-shimmer {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

.xt-app-main {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

.xt-app-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--xt-space-4);
    padding: max(0.5rem, env(safe-area-inset-top, 0px)) var(--xt-space-5) var(--xt-space-3);
}

.xt-ios-header-padding {
    padding: max(0.5rem, env(safe-area-inset-top, 0px)) var(--xt-space-5) var(--xt-space-3);
}

.xt-app-footer {
    flex-shrink: 0;
    z-index: 9999;
}

.xt-tab-bar--dock {
    border-top: none;
}

/* safe-area는 한 곳만 적용 (탭 + nav 모두에 넣으면 Android에서 간격이 거의 2배로 보임) */
.xt-tab-bar--dock .xt-tab-bar__item {
    padding-top: var(--xt-space-2);
    padding-bottom: calc(var(--xt-space-2) + env(safe-area-inset-bottom, 0px));
}

.xt-tab-bar {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    min-height: 3.5rem;
    padding-bottom: 0;
}

.xt-tab-bar__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--xt-space-1);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--xt-text-caption);
    text-decoration: none;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.xt-tab-bar__item--active {
    color: var(--xt-text-heading);
}

.xt-tab-bar__item--active > span:last-child {
    color: var(--xt-primary);
}

.xt-tab-bar__item--active .xt-tab-bar__icon {
    color: var(--xt-primary);
}

.xt-tab-bar__icon {
    color: var(--xt-grey-400);
    font-size: 1.25rem;
}

a.xt-tab-bar__item {
    text-decoration: none;
}

/* 호텔 체크인 전체화면 오버레이 — iOS Status Bar (lang 모달과 동일) */
.xt-hotel-checkin-overlay {
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
}

/* 전체 화면 고정 레이어가 도킹 탭바와 겹치지 않도록 (FAB와 동일 기준) */
.xt-modal--dock-clear-bottom {
    bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
}

/* 스크롤 영역 하단 — 도킹 탭바(.xt-app-footer z-9999)와 겹치지 않게 */
.xt-pb-dock-tab {
    padding-bottom: max(1rem, calc(4.75rem + env(safe-area-inset-bottom, 0px)));
    -webkit-overflow-scrolling: touch;
}

#xt-passport-fullscreen .xt-pb-dock-tab {
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

#xt-passport-fullscreen .xt-passport-flow-step {
    flex: 0 0 auto;
    min-height: 0;
}

/* 플로팅 호텔 메시지 — 하단 탭바 위 (safe-area 포함) */
.xt-hotel-msg-fab-wrap {
    position: fixed;
    right: max(0.75rem, env(safe-area-inset-right, 0px));
    bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}

.xt-hotel-msg-fab-wrap .xt-hotel-msg-fab {
    pointer-events: auto;
}

.xt-hotel-msg-fab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--xt-radius-pill);
    cursor: pointer;
    background: linear-gradient(135deg, var(--xt-primary), #3d5bbf);
    color: var(--xt-on-primary);
    box-shadow: var(--xt-shadow-2);
}

.xt-hotel-msg-fab:active {
    transform: scale(0.96);
}

.xt-hotel-msg-fab--open {
    filter: brightness(0.92);
}

.xt-hotel-msg-fab__icons {
    position: relative;
    display: inline-flex;
    width: 1.35rem;
    height: 1.35rem;
    align-items: center;
    justify-content: center;
}

.xt-hotel-msg-fab__icon-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.xt-hotel-msg-fab__icon-layer--chat {
    opacity: 1;
}

.xt-hotel-msg-fab__icon-layer--close {
    opacity: 0;
}

.xt-hotel-msg-fab--open .xt-hotel-msg-fab__icon-layer--chat {
    opacity: 0;
}

.xt-hotel-msg-fab--open .xt-hotel-msg-fab__icon-layer--close {
    opacity: 1;
}

/* 미확인 호텔 답장 — FAB 빨간 느낌표 (알림 벨과 동일하게 숫자 없음) */
.xt-hotel-msg-fab__badge {
    position: absolute;
    top: 0.06rem;
    right: 0.06rem;
    z-index: 2;
    box-sizing: border-box;
    display: flex;
    min-width: 1.1rem;
    min-height: 1.1rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.2rem;
    border-radius: 9999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 0 0 2px #fff;
}

.xt-theme-dark .xt-hotel-msg-fab__badge {
    box-shadow: 0 0 0 2px #18181b;
}

.xt-hotel-msg-fab__badge--hidden {
    display: none !important;
}

/* 호텔 메시지 — 바텀 네비까지 덮되, 하단 제스처 safe-area 위에 UI 배치 */
.xt-hotel-msg-drawer {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 10100;
    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex;
    flex-direction: column;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s ease;
    /* background: linear-gradient(168deg, var(--xt-blue-50) 0%, #eef2fb 42%, #e2eaf6 100%); */
    background: linear-gradient(180deg, #d8e6f8 0%, #cddff5 100%);
}

.xt-hotel-msg-drawer.xt-hotel-msg-drawer--open {
    pointer-events: auto;
    opacity: 1;
    border-radius: 0;
}

/* 채팅 UI — xt-hotel-msg-chat-header가 앱 헤더 자리까지 대체 */
#xt-app:has(.broom-wrap) .xt-app-header,
body.xt-hotel-msg-drawer-open .xt-app-header,
body:has(#xt-hotel-msg-drawer.xt-hotel-msg-drawer--open) .xt-app-header {
    display: none !important;
}

.xt-hotel-msg-drawer-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* 채팅 헤더 — 화면 최상단(safe-area 포함), 앱 헤더 대체 */
.xt-hotel-msg-chat-header {
    position: sticky;
    top: 0;
    z-index: 3;
    flex-shrink: 0;
    padding-top: max(var(--xt-space-3), env(safe-area-inset-top, 0px));
    background: linear-gradient(180deg, #d8e6f8 0%, #cddff5 100%);
}

.xt-hotel-msg-chat-header__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--xt-radius-pill);
    background: rgba(255, 255, 255, 0.55);
    color: var(--xt-text-heading);
    cursor: pointer;
    box-shadow: var(--xt-shadow-1);
}

.xt-hotel-msg-chat-header__btn:active {
    transform: scale(0.96);
}

.xt-hotel-msg-chat-header__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--xt-radius-pill);
    background: linear-gradient(135deg, var(--xt-primary), #5b7fde);
    color: var(--xt-on-primary);
    font-size: var(--xt-size-subtitle);
    font-weight: var(--xt-weight-semibold);
    line-height: 1;
    box-shadow: var(--xt-shadow-1);
}

.xt-hotel-msg-chat-header__staff-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.65rem;
    border: 0;
    border-radius: var(--xt-radius-pill);
    background: rgba(255, 255, 255, 0.75);
    color: var(--xt-primary);
    font-size: 0.7rem;
    font-weight: var(--xt-weight-semibold);
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--xt-shadow-1);
    white-space: nowrap;
}

.xt-hotel-msg-chat-header__staff-btn:active:not(:disabled) {
    transform: scale(0.96);
}

.xt-hotel-msg-chat-header__staff-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

/* 메시지 영역 — 상단 라운드 카드 */
.xt-hotel-msg-chat-body {
    flex: 1 1 auto;
    min-height: 0;
    background: var(--xt-white);
    border-radius: 1.75rem 1.75rem 0 0;
    box-shadow: 0 -4px 20px rgba(21, 74, 161, 0.06);
}

#xt-hotel-msg-panel .xt-hotel-msg-chat-body,
#xt-hotel-msg-list {
    background: transparent;
}

#xt-hotel-msg-panel .xt-hotel-msg-chat-body {
    border-radius: 0;
    box-shadow: none;
}

/* 하단 입력 — drawer padding-bottom(safe-area) 위에 배치 */
.xt-hotel-msg-composer {
    padding-top: var(--xt-space-3);
    padding-bottom: var(--xt-space-3);
    padding-left: var(--xt-space-4);
    padding-right: max(var(--xt-space-4), env(safe-area-inset-right, 0px));
    background: transparent;
}

.xt-hotel-msg-composer__pill {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.25rem 0.3rem 0.25rem 1rem;
    border-radius: var(--xt-radius-pill);
    background: var(--xt-white);
    border: 1px solid var(--xt-border-default);
    box-shadow: var(--xt-shadow-2);
}

.xt-hotel-msg-composer__pill:focus-within {
    border-color: var(--xt-primary);
    box-shadow: var(--xt-shadow-2), 0 0 0 2px rgba(49, 130, 246, 0.2);
}

.xt-hotel-msg-composer__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0.5rem 2.85rem 0.5rem 0;
    outline: none;
    color: var(--xt-text-body);
}

.xt-hotel-msg-composer__input::placeholder {
    color: var(--xt-text-placeholder);
}

.xt-hotel-msg-composer__pill--with-mic .xt-hotel-msg-composer__input {
    padding-right: 5.35rem;
}

.xt-hotel-msg-composer__mic {
    position: absolute;
    right: 2.85rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--xt-primary);
    touch-action: none;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

.xt-hotel-msg-composer__mic:active:not(:disabled) {
    opacity: 0.85;
}

.xt-composer-mic--recording {
    background: var(--xt-primary) !important;
    color: var(--xt-white) !important;
    animation: xt-mic-pulse 1s ease-in-out infinite;
}

.xt-composer-mic--processing {
    opacity: 0.55;
    pointer-events: none;
    cursor: wait;
}

@keyframes xt-mic-pulse {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.08); }
}

.xt-hotel-msg-composer__send {
    position: absolute;
    right: 0.3rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--xt-radius-pill);
    cursor: pointer;
    background: linear-gradient(135deg, var(--xt-primary), #3d5bbf);
    color: var(--xt-on-primary);
    box-shadow: var(--xt-shadow-1);
}

.xt-hotel-msg-composer__send:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.xt-hotel-msg-composer__send--loading:disabled {
    opacity: 1;
    cursor: wait;
}

.xt-hotel-msg-composer__send--loading:active:not(:disabled) {
    transform: translateY(-50%);
}

.xt-composer-send-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.18rem;
    min-height: 1rem;
}

.xt-composer-send-dot {
    display: inline-block;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background-color: currentColor;
    animation: xt-composer-send-bounce 1.2s infinite ease-in-out;
}

.xt-composer-send-dot:nth-child(1) { animation-delay: 0s; }
.xt-composer-send-dot:nth-child(2) { animation-delay: 0.15s; }
.xt-composer-send-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes xt-composer-send-bounce {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-0.22rem); }
}

.xt-hotel-msg-composer__send:active:not(:disabled) {
    transform: translateY(-50%) scale(0.96);
}

/* 말풍선 (수신 좌 / 발신 우, 화이트 카드) */
.xt-hotel-msg-bubble {
    max-width: 85%;
    padding: 0.625rem 0.875rem;
    background-color: var(--xt-white);
    color: var(--xt-text-heading);
    box-shadow: var(--xt-shadow-1);
    border: 1px solid var(--xt-border-default);
    border-radius: 1rem 1rem 1rem 0.35rem;
    word-break: break-word;
}

.xt-hotel-msg-bubble--out {
    border-radius: 1rem 1rem 0.35rem 1rem;
    background-color: var(--xt-blue-50);
}

.xt-hotel-msg-bubble__meta {
    margin-top: 0.125rem;
    padding: 0 2px;
    opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
    .xt-hotel-msg-drawer,
    .xt-hotel-msg-fab__icon-layer {
        transition-duration: 0.01ms !important;
    }
}

/* ── 호텔 AI 안내 탭 버튼 ─────────────────────────────────────────────────── */

.xt-hchat-tab {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: var(--xt-radius-sm);
    background: transparent;
    font-size: var(--xt-text-caption-size, 0.75rem);
    font-weight: 600;
    color: var(--xt-text-caption);
    cursor: pointer;
    transition: background-color var(--xt-motion-fast) var(--xt-ease-standard),
                color var(--xt-motion-fast) var(--xt-ease-standard);
}

.xt-hchat-tab--active {
    background-color: var(--xt-blue-50);
    color: var(--xt-blue-500);
}

.xt-hchat-tab:hover:not(.xt-hchat-tab--active) {
    background-color: var(--xt-bg-muted);
    color: var(--xt-text-body);
}

.xt-ai-mode-bar {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    min-height: 0;
}

.xt-ai-mode-bar__hint {
    font-size: 0.65rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xt-ai-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
    padding: 0.18rem 0.45rem;
    border: 1px solid var(--xt-blue-200, #bfdbfe);
    border-radius: 999px;
    background: #fff;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--xt-blue-500, #3182f6);
    cursor: pointer;
    white-space: nowrap;
}

.xt-ai-mode-toggle--active {
    background: var(--xt-blue-500, #3182f6);
    border-color: var(--xt-blue-500, #3182f6);
    color: #fff;
}

.xt-tour-system-bubble {
    align-self: center;
    max-width: 90%;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: var(--xt-bg-muted, #f3f4f6);
    text-align: center;
    font-size: 0.75rem;
    color: var(--xt-text-caption);
}

.xt-staff-connect-row {
    display: flex;
    justify-content: center;
    padding: 0.25rem 0;
}

.xt-staff-connect-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--xt-grey-200, #e5e8eb);
    border-radius: 0.375rem;
    background: var(--xt-grey-50);;
    color: var(--xt-grey-500, #8b95a1);
    font-size: 0.72rem;
    font-weight: 400;
    cursor: pointer;
    transform: translateY(-20px);

}

.xt-staff-connect-btn i {
    font-size: 0.65rem;
    opacity: 0.8;
}

.xt-staff-connect-btn:active:not(:disabled) {
    background: var(--xt-grey-50, #f9fafb);
}

.xt-staff-connect-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.xt-staff-wait-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.xt-staff-connect-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.85rem;
    border: none;
    border-radius: 999px;
    background: var(--xt-red-500, #3182f6);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.xt-staff-connect-cancel-btn:active {
    opacity: 0.9;
}

.xt-ai-mode-toggle__icon {
    font-size: 0.58rem;
    flex-shrink: 0;
}

/* ── 카테고리 칩 영역 ────────────────────────────────────────────────────── */

.xt-ai-chips-wrap {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.xt-ai-chips-wrap::-webkit-scrollbar {
    display: none;
}

.xt-ai-chip {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.3rem 0.75rem;
    border: 1.5px solid var(--xt-grey-200);
    border-radius: 9999px;
    background: var(--xt-white);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--xt-text-body);
    cursor: pointer;
    transition: background-color var(--xt-motion-fast) var(--xt-ease-standard),
                border-color var(--xt-motion-fast) var(--xt-ease-standard),
                color var(--xt-motion-fast) var(--xt-ease-standard);
    white-space: nowrap;
}

.xt-ai-chip:hover {
    background-color: var(--xt-blue-50);
    border-color: var(--xt-blue-500);
    color: var(--xt-blue-500);
}

.xt-ai-chip--active {
    background-color: var(--xt-blue-50);
    border-color: var(--xt-blue-500);
    color: var(--xt-blue-500);
}

.xt-ai-chip--back {
    background-color: var(--xt-grey-100);
    border-color: var(--xt-grey-200);
    color: var(--xt-text-caption);
}

/* ── AI 이미지 카드 슬라이더 ─────────────────────────────────────────────── */

.xt-ai-img-scroll {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
    width: 100%;
    padding-bottom: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
}

.xt-ai-img-scroll::-webkit-scrollbar {
    display: none;
}

.xt-ai-img-card {
    width: 8.5rem;
    min-width: 8.5rem;
    flex-shrink: 0;
    background: var(--xt-white);
    border: 1px solid var(--xt-grey-200);
    border-radius: var(--xt-radius-md, 0.75rem);
    padding: 0.5rem;
    box-shadow: var(--xt-shadow-1);
}

.xt-ai-img-thumb {
    width: 100%;
    height: 6rem;
    object-fit: cover;
    border-radius: 0.5rem;
    display: block;
    margin-bottom: 0.375rem;
}

.xt-ai-img-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── AI 로딩 점프 점 애니메이션 ───────────────────────────────────────────── */

.xt-ai-loading-bubble {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.75rem 1rem;
}

.xt-ai-dot {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background-color: var(--xt-grey-400);
    animation: xt-ai-bounce 1.2s infinite ease-in-out;
}

.xt-ai-dot:nth-child(1) { animation-delay: 0s; }
.xt-ai-dot:nth-child(2) { animation-delay: 0.2s; }
.xt-ai-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes xt-ai-bounce {
    0%, 80%, 100% { transform: translateY(0); }
    40%           { transform: translateY(-0.4rem); }
}

.xt-app-header__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--xt-radius-sm);
    background-color: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--xt-motion-fast) var(--xt-ease-standard);
}

.xt-app-header__icon-btn:hover {
    background-color: var(--xt-bg-muted);
}

/* -------------------------------------------------------------------------- */
/* 타이포 스케일만 (색은 xt-text-* 유틸로 조합)                                 */
/* -------------------------------------------------------------------------- */

.xt-type-heading-lg {
    font-size: var(--xt-size-heading-lg);
    font-weight: var(--xt-weight-bold);
    line-height: var(--xt-leading-snug);
}

.xt-type-heading {
    font-size: var(--xt-size-heading);
    font-weight: var(--xt-weight-semibold);
    line-height: 1.4;
}

.xt-type-subtitle {
    font-size: var(--xt-size-subtitle);
    font-weight: var(--xt-weight-semibold);
    line-height: var(--xt-leading-normal);
}

.xt-type-body {
    font-size: var(--xt-size-body);
    font-weight: var(--xt-weight-regular);
    line-height: var(--xt-leading-relaxed);
}

.xt-type-body-lg {
    font-size: var(--xt-size-body-lg);
    font-weight: var(--xt-weight-regular);
    line-height: var(--xt-leading-normal);
}

.xt-type-caption {
    font-size: var(--xt-size-caption);
    font-weight: var(--xt-weight-regular);
    line-height: 1.5;
}

.xt-tabular {
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------- */
/* 버튼 (상호작용·크기; 채움색은 토큰 참조)                                      */
/* -------------------------------------------------------------------------- */

.xt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--xt-space-2);
    min-height: var(--xt-touch-comfort);
    padding: 0 var(--xt-space-5);
    border-radius: var(--xt-radius-md);
    font-family: var(--xt-font-sans);
    font-size: var(--xt-size-subtitle);
    font-weight: var(--xt-weight-semibold);
    line-height: 1.25;
    border: 1px solid transparent;
    cursor: pointer;
    transition:
        background-color var(--xt-motion-fast) var(--xt-ease-standard),
        color var(--xt-motion-fast) var(--xt-ease-standard),
        box-shadow var(--xt-motion-fast) var(--xt-ease-standard),
        opacity var(--xt-motion-fast) var(--xt-ease-standard),
        transform var(--xt-motion-fast) var(--xt-ease-standard);
}

.xt-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.xt-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.xt-btn--block {
    display: flex;
    width: 100%;
}

.xt-btn--primary {
    background-color: var(--xt-primary);
    color: var(--xt-on-primary);
    box-shadow: var(--xt-shadow-1);
}

.xt-btn--primary:hover:not(:disabled) {
    background-color: var(--xt-primary-hover);
}

.xt-btn--secondary {
    background-color: var(--xt-blue-50);
    color: var(--xt-primary);
    border-color: transparent;
}

.xt-btn--secondary:hover:not(:disabled) {
    background-color: var(--xt-grey-100);
}

.xt-btn--weak {
    background-color: var(--xt-grey-100);
    color: var(--xt-text-heading);
}

.xt-btn--weak:hover:not(:disabled) {
    background-color: var(--xt-grey-200);
}

.xt-btn--dark {
    background-color: var(--xt-grey-900);
    color: var(--xt-text-inverse);
}

.xt-btn--dark:hover:not(:disabled) {
    background-color: var(--xt-grey-800);
}

.xt-btn--danger {
    background-color: var(--xt-danger);
    color: var(--xt-text-inverse);
}

.xt-btn--danger:hover:not(:disabled) {
    filter: brightness(0.95);
}

.xt-btn--ghost {
    background-color: transparent;
    color: var(--xt-primary);
    border-color: var(--xt-border-default);
}

.xt-btn--ghost:hover:not(:disabled) {
    background-color: var(--xt-bg-info);
}

.xt-btn--lg {
    min-height: 3.5rem;
    border-radius: var(--xt-radius-md);
    font-size: var(--xt-size-subtitle);
}

.xt-btn--sm {
    min-height: var(--xt-touch-min);
    padding: 0 var(--xt-space-4);
    font-size: var(--xt-size-body);
    border-radius: var(--xt-radius-sm);
}

/* 호텔 탭 — 체크인·도어락 카드 (mobile/main/hotel/index.html), 라이트·다크 토큰 */
.xt-hotel-stay-card {
    overflow: hidden;
}

.xt-hotel-doorlock-circle {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--xt-space-2);
    box-sizing: border-box;
    width: 8rem;
    height: 8rem;
    min-height: unset;
    padding: var(--xt-space-3);
    border-radius: var(--xt-radius-pill);
    border: none;
    line-height: var(--xt-leading-snug);
    box-shadow:
        var(--xt-shadow-2),
        0 0 0 1px rgba(49, 130, 246, 0.12);
}

.xt-hotel-doorlock-circle:active:not(:disabled) {
    transform: scale(0.97);
}

.xt-hotel-doorlock-circle.xt-btn--weak {
    background-color: var(--xt-bg-muted);
    color: var(--xt-text-caption);
    border: 1px solid var(--xt-border-default);
    box-shadow: var(--xt-shadow-1);
}

.xt-hotel-doorlock-circle.xt-btn--primary {
    border: none;
}

.xt-hotel-doorlock-circle__icon {
    font-size: 1.875rem;
    line-height: 1;
}

.xt-hotel-doorlock-circle__label {
    display: block;
    max-width: 6.25rem;
    font-size: var(--xt-size-caption);
    font-weight: var(--xt-weight-semibold);
    line-height: var(--xt-leading-snug);
}

.xt-hotel-checkin-pill {
    gap: var(--xt-space-3);
    justify-content: center;
    padding-left: var(--xt-space-5);
    padding-right: var(--xt-space-5);
    border-radius: var(--xt-radius-pill);
}

.xt-hotel-checkin-pill__icon {
    font-size: 1.15rem;
    opacity: 0.95;
}

.xt-passport-consent__input {
    accent-color: var(--xt-primary);
}

#xt-passport-consent-detail-body section:last-child {
    margin-bottom: 0;
}

/* 폼·모달 보조 (호텔 체크인 등) */
.xt-input-field {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: var(--xt-touch-comfort);
    padding: var(--xt-space-3) var(--xt-space-4);
    border: 1px solid var(--xt-border-default);
    border-radius: var(--xt-radius-md);
    font-family: var(--xt-font-sans);
    font-size: var(--xt-size-subtitle);
    font-weight: var(--xt-weight-regular);
    line-height: 1.35;
    color: var(--xt-text-heading);
    background-color: var(--xt-bg-muted);
    transition:
        border-color var(--xt-motion-fast) var(--xt-ease-standard),
        box-shadow var(--xt-motion-fast) var(--xt-ease-standard);
}

.xt-input-field::placeholder {
    color: var(--xt-text-placeholder);
}

.xt-input-field:focus {
    outline: none;
    border-color: var(--xt-primary);
    box-shadow: 0 0 0 2px var(--xt-blue-50);
}

.xt-modal-scrim {
    background-color: var(--xt-scrim-50);
}

/* -------------------------------------------------------------------------- */
/* 홈 그리드 · 히어로 · 바로가기 · CTA — 레이아웃/비색 위주                      */
/* -------------------------------------------------------------------------- */

.xt-home-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--xt-space-6) var(--xt-space-2);
}

.xt-home-grid__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--xt-space-2);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: inherit;
    text-align: center;
    font-family: var(--xt-font-sans);
}

.xt-home-grid__btn:focus-visible {
    outline: none;
    box-shadow: var(--xt-focus-ring);
    border-radius: var(--xt-radius-sm);
}

.xt-home-grid__icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--xt-radius-md);
    background: linear-gradient(160deg, var(--xt-blue-50) 0%, var(--xt-grey-100) 100%);
    color: var(--xt-primary);
    font-size: 1.35rem;
}

.xt-home-grid__label {
    font-size: var(--xt-size-caption);
    font-weight: var(--xt-weight-semibold);
    line-height: 1.35;
    max-width: 4.5rem;
}

.xt-home-badge-new {
    position: absolute;
    top: -0.25rem;
    right: -0.35rem;
    padding: 0.1rem 0.35rem;
    font-size: 0.5625rem;
    font-weight: var(--xt-weight-bold);
    color: var(--xt-text-inverse);
    background-color: var(--xt-danger);
    border-radius: var(--xt-radius-pill);
    line-height: 1.2;
}

.xt-hero-slide {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--xt-space-4);
    min-height: 7.5rem;
    padding: var(--xt-space-5);
    overflow: hidden;
    border-radius: var(--xt-radius-lg);
    border: 1px solid var(--xt-border-default);
    background: linear-gradient(120deg, #e8f0ff 0%, var(--xt-blue-50) 45%, #f0ecff 100%);
}

.xt-hero-slide__counter {
    position: absolute;
    bottom: var(--xt-space-3);
    right: var(--xt-space-3);
    padding: var(--xt-space-1) var(--xt-space-2);
    font-size: 0.625rem;
    font-weight: var(--xt-weight-semibold);
    color: var(--xt-text-inverse);
    background: rgba(0, 0, 0, 0.45);
    border-radius: var(--xt-radius-sm);
}

.xt-quick-row {
    display: flex;
    overflow: hidden;
    border-radius: var(--xt-radius-md);
    border: 1px solid var(--xt-border-default);
}

.xt-quick-row__cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--xt-space-2);
    padding: var(--xt-space-4) var(--xt-space-2);
    font-size: var(--xt-size-caption);
    font-weight: var(--xt-weight-semibold);
    text-decoration: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--xt-font-sans);
}

.xt-quick-row__cell + .xt-quick-row__cell {
    border-left: 1px solid var(--xt-border-default);
}

.xt-login-cta {
    padding: var(--xt-space-5);
    border: 1px solid var(--xt-border-default);
    border-radius: var(--xt-radius-lg);
    background: linear-gradient(180deg, var(--xt-blue-50) 0%, var(--xt-bg-surface) 100%);
}

.xt-login-cta__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--xt-space-2);
    margin-bottom: var(--xt-space-5);
}

.xt-pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    font-size: var(--xt-size-caption);
    font-weight: var(--xt-weight-semibold);
    border-radius: var(--xt-radius-pill);
    border: 1px solid var(--xt-border-default);
    background-color: var(--xt-bg-surface);
    color: var(--xt-grey-800);
}

.xt-focusable:focus-visible {
    outline: none;
    box-shadow: var(--xt-focus-ring);
    border-radius: var(--xt-radius-sm);
}

/* MY 테마 토글 */
.theme-toggle {
    position: relative;
    flex-shrink: 0;
    width: 52px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    background-color: var(--xt-grey-200);
    transition: background 0.3s ease;
    outline: none;
}

.theme-toggle:focus-visible {
    outline: none;
    box-shadow: var(--xt-focus-ring);
}

html.xt-theme-dark .theme-toggle {
    background-color: #3d3a5c;
}

html.xt-theme-dark .theme-toggle .knob {
    transform: translateX(24px);
}

.theme-toggle .knob {
    position: absolute;
    top: 3px;
    left: 3px;
    display: flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    font-size: 12px;
    line-height: 1;
    transition: transform 0.3s ease;
}

/* -------------------------------------------------------------------------- */
/* 다크 모드 — 시맨틱 별칭만 덮어씀 (팔레트 숫자 토큰은 그대로)                    */
/* -------------------------------------------------------------------------- */

html.xt-theme-dark {
    color-scheme: dark;
    --xt-bg-page: #0f1318;
    --xt-bg-surface: #1a222c;
    --xt-bg-muted: #252d3a;
    --xt-bg-info: rgba(49, 130, 246, 0.18);
    --xt-text-heading: #f2f4f6;
    --xt-text-body: #b0b8c1;
    --xt-text-caption: #8b95a1;
    --xt-text-placeholder: #6b7684;
    --xt-text-inverse: #191f28;
    --xt-border-default: #2f3846;
    --xt-border-strong: #4e5968;
    --xt-focus-ring: 0 0 0 2px var(--xt-bg-surface), 0 0 0 4px var(--xt-blue-500);
}

html.xt-theme-dark .xt-pill-tag {
    color: var(--xt-text-heading);
    background-color: var(--xt-bg-muted);
    border-color: var(--xt-border-default);
}


/* 모달 */
.modal-content {
    min-width: 300px;
}

/* MY — 언어 선택 모달 (바텀 탭바 위만 사용, 블루 테마) */
.xt-lang-modal {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 2900;
    box-sizing: border-box;
    display: none;
    flex-direction: column;
    padding-top: env(safe-area-inset-top, 0px);
    background-color: var(--xt-bg-page);
}

.xt-lang-modal__globe-wrap {
    margin-bottom: var(--xt-space-4);
}

.xt-lang-modal__globe {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--xt-radius-pill);
    background: linear-gradient(135deg, var(--xt-primary), #3d5bbf);
    color: var(--xt-on-primary);
    box-shadow: var(--xt-shadow-2);
}

.xt-lang-modal__row {
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--xt-space-3);
    padding: var(--xt-space-3) var(--xt-space-4);
    border: 1px solid var(--xt-border-default);
    border-radius: var(--xt-radius-lg);
    background-color: var(--xt-bg-surface);
    cursor: pointer;
    text-align: left;
    box-shadow: var(--xt-shadow-1);
    box-sizing: border-box;
}

.xt-lang-modal__row:active {
    opacity: 0.94;
}

.xt-lang-modal__flag {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--xt-radius-sm);
    object-fit: cover;
}

.xt-lang-modal__label {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--xt-text-heading);
    font-weight: var(--xt-weight-semibold);
}

.xt-lang-modal__check {
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
    color: var(--xt-primary);
    opacity: 0;
}

.xt-lang-modal__row--selected {
    border-color: var(--xt-primary);
    box-shadow: var(--xt-shadow-1), 0 0 0 1px rgba(49, 130, 246, 0.25);
}

.xt-lang-modal__row--selected .xt-lang-modal__label {
    color: var(--xt-primary);
}

.xt-lang-modal__row--selected .xt-lang-modal__check {
    opacity: 1;
}

.xt-lang-modal__footer {
    padding-bottom: max(var(--xt-space-3), env(safe-area-inset-bottom, 0px));
    background-color: var(--xt-bg-surface);
}

.xt-lang-modal__continue {
    display: block;
    width: 100%;
    padding: var(--xt-space-3) var(--xt-space-4);
    border: 0;
    border-radius: var(--xt-radius-pill);
    font-size: var(--xt-size-body-lg);
    font-weight: var(--xt-weight-semibold);
    line-height: var(--xt-leading-normal);
    color: var(--xt-on-primary);
    cursor: pointer;
    background: linear-gradient(135deg, var(--xt-primary), #3d5bbf);
    box-shadow: var(--xt-shadow-2);
}

.xt-lang-modal__continue:active {
    filter: brightness(0.95);
}

/* 채팅 드로어(z-index:10100) 위에 공통 모달 표시 */
#selectOneModal,
#selectTwoModal {
    z-index: 10200 !important;
}

/* 2지선다 공통 모달 — 여러 줄 안내(호텔 직접인증 전화번호 등) */
#selectTwoModal .common-modal-text {
    white-space: pre-line;
}

/* ── 예약 카테고리 페이지 (_reservation_cats.html) ────────────────────────── */
.reservation-cats-root {
    background: #fff;
    min-height: 100%;
}

.reservation-cats-body {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.reservation-cats-guide {
    padding: 1.25rem 1.25rem 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.reservation-cats-guide-text {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

.reservation-cats-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: var(--xt-space-3) var(--xt-space-4) var(--xt-space-4);
}

/* 카드 — 아이콘 + 제목/부제 + chevron (_reservation_cats.html) */
.reservation-cat-card {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    text-align: left;
    transition: box-shadow 0.15s, transform 0.12s;
}

.reservation-cat-card:hover {
    box-shadow: 0 4px 16px rgba(49, 130, 246, 0.14);
}

.reservation-cat-card:active {
    transform: scale(0.99);
}

.reservation-cat-card-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 1rem 1rem 1.125rem;
    box-sizing: border-box;
}

.reservation-cat-card-media {
    flex: 0 0 3.125rem;
    width: 3.125rem;
    height: 3.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background: var(--xt-blue-50, #f0f4ff);
    overflow: hidden;
}

.reservation-cat-card-img {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
    object-position: center;
}

.reservation-cat-card-copy {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.125rem;
    padding: 0;
}

.reservation-cat-card-title {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--xt-text-heading, #111);
}

.reservation-cat-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
    color: #757575;
}

.reservation-cat-card-chevron {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0.25rem;
    color: #ccc;
    font-size: 0.875rem;
    line-height: 1;
}

/* ── 예약 챗봇 퀵 리플라이 — 채팅 목록 내 질문 바로 아래·우측(발신 말풍선 폭) ─ */
.xt-booking-quick-replies-inner {
    max-width: 85%;
}

.xt-booking-qr-btn {
    padding: 0.4rem 0.875rem;
    border: 1.5px solid var(--xt-primary, #3182f6);
    border-radius: 999px;
    background: #fff;
    color: var(--xt-primary, #3182f6);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.xt-booking-qr-btn:hover {
    background: #eff6ff;
}

.xt-booking-qr-btn:active {
    background: #dbeafe;
}

.xt-booking-qr-btn--active {
    background: var(--xt-primary, #3182f6);
    color: #fff;
}

.xt-booking-qr-btn--done {
    background: var(--xt-primary, #3182f6);
    color: #fff;
    font-weight: 700;
}

.xt-booking-qr-btn--done:hover {
    opacity: 0.9;
    background: var(--xt-primary, #3182f6);
    color: #fff;
}

.xt-booking-qr-btn--skip {
    border-color: #9ca3af;
    color: #6b7280;
}

/* 예약 챗 — 우측 인라인 텍스트 입력(출발지 등) */
.xt-booking-inline-input-row {
    justify-content: flex-end;
}

.xt-booking-inline-input-wrap {
    max-width: 85%;
    flex-shrink: 0;
    margin-left: auto;
}

.xt-booking-inline-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

/* 일반 채팅 말풍선과 구분 — primary 테두리 */
.xt-booking-inline-bubble {
    max-width: 100%;
    border: 1.5px solid var(--xt-primary, #3182f6);
    border-radius: 1rem 1rem 0.35rem 1rem;
    background-color: var(--xt-blue-50);
    color: var(--xt-text-heading, #111);
    box-shadow: var(--xt-shadow-1);
}

.xt-booking-inline-trigger {
    display: block;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-weight: 500;
    line-height: 1.45;
}

/* 「여기를 눌러~」 CTA — 네온 퍼짐 테두리 */
.xt-booking-inline-bubble.xt-booking-inline-trigger--neon,
.broom-inline-trigger.xt-booking-inline-trigger--neon {
    position: relative;
    z-index: 0;
    overflow: visible;
    border-color: rgba(49, 130, 246, 0.65);
    box-shadow:
        0 0 6px rgba(49, 130, 246, 0.35),
        inset 0 0 12px rgba(49, 130, 246, 0.06);
}

.xt-booking-inline-trigger--neon::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(
        120deg,
        rgba(49, 130, 246, 0.15),
        rgba(49, 130, 246, 1),
        rgba(96, 165, 250, 0.95),
        rgba(49, 130, 246, 1),
        rgba(49, 130, 246, 0.15)
    );
    background-size: 220% 100%;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: xt-booking-inline-neon-flow 2.4s linear infinite;
}

.xt-booking-inline-trigger--neon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    animation: xt-booking-inline-neon-spread 2.2s ease-out infinite;
}

@keyframes xt-booking-inline-neon-flow {
    0% {
        background-position: 0% 50%;
        filter: drop-shadow(0 0 2px rgba(49, 130, 246, 0.45));
    }
    50% {
        filter: drop-shadow(0 0 6px rgba(49, 130, 246, 0.75));
    }
    100% {
        background-position: 220% 50%;
        filter: drop-shadow(0 0 2px rgba(49, 130, 246, 0.45));
    }
}

@keyframes xt-booking-inline-neon-spread {
    0% {
        box-shadow:
            0 0 0 0 rgba(49, 130, 246, 0.55),
            0 0 10px rgba(49, 130, 246, 0.4);
    }
    70%,
    100% {
        box-shadow:
            0 0 0 10px rgba(49, 130, 246, 0),
            0 0 22px rgba(49, 130, 246, 0);
    }
}

.xt-booking-inline-trigger--neon:active {
    transform: scale(0.99);
}

@media (prefers-reduced-motion: reduce) {
    .xt-booking-inline-trigger--neon::before,
    .xt-booking-inline-trigger--neon::after {
        animation: none;
    }

    .xt-booking-inline-bubble.xt-booking-inline-trigger--neon,
    .broom-inline-trigger.xt-booking-inline-trigger--neon {
        box-shadow: 0 0 10px rgba(49, 130, 246, 0.4);
    }
}

.xt-booking-inline-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.xt-booking-inline-input {
    width: 100%;
    border: 1px solid rgba(49, 130, 246, 0.35);
    border-radius: 0.5rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.875rem;
    background: #fff;
    color: var(--xt-text-heading, #111);
    outline: none;
}

.xt-booking-inline-input:focus {
    border-color: var(--xt-primary, #3182f6);
}

.xt-booking-inline-input[type="date"],
.xt-booking-inline-input[type="time"] {
    min-height: 2.5rem;
    box-sizing: border-box;
}

.xt-booking-inline-confirm {
    align-self: flex-end;
    padding: 0.35rem 0.875rem;
    border: none;
    border-radius: 999px;
    background: var(--xt-primary, #3182f6);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.xt-booking-inline-confirm:active {
    opacity: 0.9;
}

.xt-booking-counter-label {
    padding: 0 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #111;
    min-width: 36px;
    text-align: center;
    display: flex;
    align-items: center;
}

.xt-booking-bot-bubble {
    max-width: 85%;
}

.xt-booking-answer-row {
    max-width: 100%;
}

.xt-booking-answer-bubble {
    max-width: 85%;
}

.xt-booking-answer-body {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
}

.xt-booking-answer-text {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

.xt-booking-answer-edit {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--xt-text-caption);
    opacity: 0.65;
    cursor: pointer;
    font-size: 0.65rem;
}

.xt-booking-answer-edit:active {
    opacity: 1;
    color: var(--xt-blue-500);
}

.xt-booking-answer--editing {
    min-width: 10rem;
}

.xt-booking-answer-edit-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.xt-booking-answer-edit-form--counter {
    gap: 0.375rem;
}

.xt-booking-answer-input {
    width: 100%;
    min-width: 0;
}

.xt-booking-answer-save {
    align-self: flex-end;
}

.xt-booking-answer-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.xt-booking-answer-cancel {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--xt-border-default);
    border-radius: 0.5rem;
    background: var(--xt-white);
    color: var(--xt-text-body);
    font-size: var(--xt-size-caption);
    font-weight: 600;
    cursor: pointer;
}

.xt-booking-answer-skip {
    align-self: flex-end;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--xt-text-caption);
    font-size: var(--xt-size-caption);
    text-decoration: underline;
    cursor: pointer;
}

.xt-booking-answer-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.xt-booking-answer-counter-btn {
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--xt-border-default);
    border-radius: 9999px;
    background: var(--xt-white);
    color: var(--xt-text-heading);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.xt-booking-answer-counter-val {
    min-width: 2.5rem;
    text-align: center;
    font-weight: 600;
}

/* ── 예약 채팅 전용 페이지 (room.html) — broom-* JS 호환, FAB 채팅 UI 동일 ── */
.broom-list {
    flex: 1 1 auto;
    min-height: 0;
}

.broom-row {
    display: flex;
    width: 100%;
}

.broom-row--out {
    justify-content: flex-end;
}

.broom-row--in {
    justify-content: flex-start;
}

.broom-row > div {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    max-width: 85%;
}

.broom-row--out > div {
    align-items: flex-end;
}

.broom-row--in > div {
    align-items: flex-start;
}

.broom-bubble {
    max-width: 100%;
    padding: 0.625rem 0.875rem;
    background-color: var(--xt-white);
    color: var(--xt-text-heading);
    box-shadow: var(--xt-shadow-1);
    border: 1px solid var(--xt-border-default);
    border-radius: 1rem 1rem 1rem 0.35rem;
    font-size: var(--xt-size-body);
    line-height: 1.45;
    white-space: pre-line;
    word-break: break-word;
}

.broom-bubble--out {
    border-radius: 1rem 1rem 0.35rem 1rem;
    background-color: var(--xt-blue-50);
}

.broom-answer-wrap {
    max-width: 85%;
}

.broom-answer-body {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
}

.broom-answer-text {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

.broom-answer-edit {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--xt-text-caption);
    opacity: 0.65;
    cursor: pointer;
    font-size: 0.65rem;
}

.broom-answer-edit:active {
    opacity: 1;
    color: var(--xt-blue-500);
}

.broom-bubble--editing {
    min-width: 10rem;
}

.broom-answer-edit-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.broom-answer-edit-form--counter {
    gap: 0.375rem;
}

.broom-answer-input {
    width: 100%;
    min-width: 0;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--xt-border-default);
    border-radius: 0.5rem;
    background: var(--xt-white);
}

.broom-answer-save {
    align-self: flex-end;
    padding: 0.25rem 0.625rem;
    border: none;
    border-radius: 0.5rem;
    background: var(--xt-blue-500);
    color: #fff;
    font-size: var(--xt-size-caption);
    font-weight: 600;
    cursor: pointer;
}

.broom-answer-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.broom-answer-cancel {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--xt-border-default);
    border-radius: 0.5rem;
    background: var(--xt-white);
    color: var(--xt-text-body);
    font-size: var(--xt-size-caption);
    font-weight: 600;
    cursor: pointer;
}

.broom-answer-skip {
    align-self: flex-end;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--xt-text-caption);
    font-size: var(--xt-size-caption);
    text-decoration: underline;
    cursor: pointer;
}

.broom-answer-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.broom-answer-counter-btn {
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--xt-border-default);
    border-radius: 9999px;
    background: var(--xt-white);
    color: var(--xt-text-heading);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.broom-answer-counter-val {
    min-width: 2.5rem;
    text-align: center;
    font-weight: 600;
}

.broom-meta {
    margin-top: 0.125rem;
    padding: 0 2px;
    font-size: var(--xt-size-caption);
    color: var(--xt-text-caption);
    opacity: 0.9;
}

/* 예약 채팅 — 초기결제 완료 상단 안내 */
.xt-booking-initial-paid-banner {
    padding: 0.65rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--xt-primary, #3182f6);
    background: #eff6ff;
    border-bottom: 1px solid rgba(49, 130, 246, 0.2);
}
.xt-booking-initial-paid-banner.hidden {
    display: none !important;
}
.xt-booking-initial-paid-banner i {
    margin-right: 0.35rem;
}

/* 예약 채팅 드로어 — 보증/최종 결제 */
.xt-booking-payment-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.75rem 1rem 0.5rem;
    background: rgba(255, 255, 255, 0.92);
    border-top: 1px solid rgba(49, 130, 246, 0.12);
}
.xt-booking-payment-bar.hidden {
    display: none !important;
}
.xt-booking-payment-label {
    width: 100%;
    margin: 0 0 0.5rem;
    text-align: center;
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.4;
    color: var(--xt-text-heading, #111827);
    letter-spacing: -0.02em;
}
.xt-booking-pay-btn {
    display: block;
    width: 100%;
    max-width: 20rem;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 999px;
    background: var(--xt-primary, #3182f6);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(49, 130, 246, 0.25);
}

.broom-qr-row {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.broom-qr-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
    max-width: 85%;
}

.broom-qr-btn {
    padding: 0.4rem 0.875rem;
    border: 1.5px solid var(--xt-primary, #3182f6);
    border-radius: 999px;
    background: #fff;
    color: var(--xt-primary, #3182f6);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.broom-qr-btn--active,
.broom-qr-btn--done {
    background: var(--xt-primary, #3182f6);
    color: #fff;
}

.broom-qr-btn--done {
    font-weight: 700;
}

.broom-qr-btn--skip {
    border-color: #9ca3af;
    color: #6b7280;
}

.broom-counter-label {
    padding: 0 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--xt-text-heading, #111);
    min-width: 36px;
    text-align: center;
    display: flex;
    align-items: center;
}

.broom-inline-row {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.broom-inline-wrap {
    max-width: 85%;
    flex-shrink: 0;
    margin-left: auto;
}

.broom-inline-form {
    max-width: 100%;
    border: 1.5px solid var(--xt-primary, #3182f6);
    border-radius: 1rem 1rem 0.35rem 1rem;
    background-color: var(--xt-blue-50);
    color: var(--xt-text-heading, #111);
    box-shadow: var(--xt-shadow-1);
    padding: 0.625rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.broom-inline-form input {
    width: 100%;
    border: 1px solid var(--xt-border-default);
    border-radius: 0.5rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.875rem;
    color: var(--xt-text-heading, #111);
    background: var(--xt-white);
}

.broom-inline-confirm {
    align-self: flex-end;
    padding: 0.35rem 0.875rem;
    border: none;
    border-radius: 999px;
    background: var(--xt-primary, #3182f6);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.broom-inline-trigger {
    display: block;
    width: 100%;
    max-width: 85%;
    margin-left: auto;
    text-align: left;
    cursor: pointer;
    font-weight: 500;
    line-height: 1.45;
    border: 1.5px solid var(--xt-primary, #3182f6);
    border-radius: 1rem 1rem 0.35rem 1rem;
    background-color: var(--xt-blue-50);
    color: var(--xt-text-heading, #111);
    box-shadow: var(--xt-shadow-1);
    padding: 0.625rem 0.875rem;
    font-size: var(--xt-size-body);
}

.broom-composer--idle .xt-hotel-msg-composer__pill {
    /* opacity: 0.7; */
    display: none;
}

.broom-composer--idle .xt-hotel-msg-composer__input {
    pointer-events: none;
}

.broom-composer--idle .xt-hotel-msg-composer__send {
    pointer-events: none;
    opacity: 0.45;
}

/* ── 예약 채팅방 목록 — 카드 리스트 ─────────────────────────────────────── */
#xt-hotel-booking-panel.xt-booking-panel--rooms-only #xt-booking-flow-bar,
#xt-hotel-booking-panel.xt-booking-panel--rooms-only #xt-booking-chat-list,
#xt-hotel-booking-panel.xt-booking-panel--rooms-only #xt-booking-composer {
    display: none !important;
}

#xt-booking-rooms:not(.hidden) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.xt-booking-rooms-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 0.5rem 0.75rem 0.25rem;
}

.xt-booking-rooms-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #9ca3af;
    margin: 0;
    letter-spacing: 0.02em;
}

.xt-booking-new-btn {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--xt-primary, #3182f6);
    background: none;
    border: 1.5px solid var(--xt-primary, #3182f6);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    cursor: pointer;
    white-space: nowrap;
}

.xt-booking-rooms-scroll {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.xt-booking-rooms-scroll::-webkit-scrollbar {
    display: none;
}

.xt-booking-room-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    /* background: #ffffff2a; */
    /* border-bottom: 1px solid #f3f4f6; */
    text-decoration: none;
    transition: background 0.1s;
    cursor: pointer;
    position: relative;
    border-radius: 0.75rem;
}

/* .xt-booking-room-card:last-child { border-bottom: none; } */
.xt-booking-room-card:hover { background: #f0f5ff; }

.xt-booking-room-card-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #dbeafe;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.xt-booking-room-card-avatar img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    /* filter: invert(40%) sepia(80%) saturate(500%) hue-rotate(195deg); */
}

.xt-booking-room-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.xt-booking-room-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.xt-booking-room-card-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xt-booking-room-card--unread .xt-booking-room-card-title {
    color: var(--xt-primary, #3182f6);
}

.xt-booking-room-card-time {
    font-size: 0.68rem;
    color: #9ca3af;
    white-space: nowrap;
    flex-shrink: 0;
}

.xt-booking-room-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.xt-booking-room-card-preview {
    font-size: 0.77rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.xt-booking-room-card--unread .xt-booking-room-card-preview {
    color: #374151;
    font-weight: 600;
}

.xt-booking-room-card-status {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.xt-booking-room-card-status--pending   { background: #fff7ed; color: #ea580c; }
.xt-booking-room-card-status--confirmed { background: #f0fdf4; color: #16a34a; }
.xt-booking-room-card-status--done      { background: #f3f4f6; color: #6b7280; }

.xt-booking-room-card-dot {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
}

/* 예약 신청 draft: 생성된 채팅방과 동일 레이아웃(칩·목록 숨김, 하단 입력창 유지) */
#xt-hotel-booking-panel.xt-booking-panel--room #xt-booking-rooms {
    display: none !important;
}

.xt-booking-composer--draft-idle .xt-hotel-msg-composer__pill {
    opacity: 0.7;
}

.xt-booking-composer--draft-idle .xt-hotel-msg-composer__input {
    pointer-events: none;
}

.xt-booking-composer--draft-idle .xt-hotel-msg-composer__send {
    pointer-events: none;
    opacity: 0.45;
}

/* 예약 탭 뱃지 */
.xt-booking-tab-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    border: 1.5px solid #fff;
    box-shadow: 0 0 0 1px #ef4444;
}

/* ── 홈 화면 — 배달·이동 서비스 스와이프 (화이트·블루톤) ── */
.xt-home-accent {
    width: 3px;
    height: 1.125rem;
    border-radius: var(--xt-radius-pill);
    background: var(--xt-primary);
    flex-shrink: 0;
}

.xt-home-swipe {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 -1rem;
    padding: 0.25rem 1rem 0.5rem;
}

.xt-home-swipe::-webkit-scrollbar {
    display: none;
}

.xt-home-swipe > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.xt-home-tag {
    position: absolute;
    top: 0.625rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--xt-radius-pill);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.xt-home-tag--best {
    left: 0.625rem;
    background: var(--xt-danger);
    color: var(--xt-white);
}

.xt-home-tag--time {
    right: 0.625rem;
    background: var(--xt-scrim-50);
    color: var(--xt-white);
    backdrop-filter: blur(2px);
}

/* 배달 음식 카드 */
.xt-home-food-card {
    width: min(78vw, 17.5rem);
    border-radius: var(--xt-radius-lg);
    overflow: hidden;
    background: var(--xt-bg-surface);
    border: 1px solid var(--xt-border-default);
    cursor: pointer;
    text-align: left;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.xt-home-food-card:active {
    transform: scale(0.985);
}

.xt-home-food-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.xt-home-food-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xt-home-food-card__body {
    padding: 0.875rem 1rem 1rem;
}

.xt-home-food-card__name {
    margin: 0 0 0.25rem;
    font-size: var(--xt-size-subtitle);
    font-weight: var(--xt-weight-bold);
    letter-spacing: -0.02em;
}

.xt-home-food-card__desc {
    margin: 0;
    font-size: var(--xt-size-body-sm);
    line-height: var(--xt-leading-snug);
}

/* 이동 서비스 카드 */
.xt-home-move-card {
    display: flex;
    width: min(88vw, 20rem);
    min-height: 9.25rem;
    border-radius: var(--xt-radius-lg);
    overflow: hidden;
    background: var(--xt-bg-surface);
    border: 1px solid var(--xt-border-default);
    cursor: pointer;
    text-align: left;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.xt-home-move-card:active {
    transform: scale(0.985);
}

.xt-home-move-card__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    padding: 1rem 0.75rem 1rem 1.125rem;
}

.xt-home-move-card__name {
    margin: 0 0 0.125rem;
    font-size: var(--xt-size-heading);
    font-weight: var(--xt-weight-bold);
    letter-spacing: -0.03em;
}

.xt-home-move-card__sub {
    margin: 0 0 0.5rem;
    font-size: var(--xt-size-body-sm);
    font-weight: var(--xt-weight-semibold);
}

.xt-home-move-card__meta {
    margin: 0 0 0.75rem;
    font-size: var(--xt-size-caption);
    line-height: var(--xt-leading-snug);
}

.xt-home-move-card__meta i {
    margin-right: 0.25rem;
    color: var(--xt-primary);
    font-size: 0.6875rem;
}

.xt-home-move-card__btn {
    align-self: flex-start;
    padding: 0.4375rem 0.875rem;
    border: 1px solid var(--xt-border-strong);
    border-radius: var(--xt-radius-pill);
    background: var(--xt-bg-surface);
    color: var(--xt-text-heading);
    font-size: var(--xt-size-caption);
    font-weight: var(--xt-weight-semibold);
    line-height: 1.2;
    pointer-events: none;
    user-select: none;
}

.xt-home-move-card:active .xt-home-move-card__btn {
    background: var(--xt-blue-50);
    border-color: var(--xt-primary);
    color: var(--xt-primary);
}

.xt-home-move-card__media {
    position: relative;
    flex: 0 0 44%;
    min-width: 7rem;
    overflow: hidden;
}

.xt-home-move-card__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, var(--xt-bg-surface) 0%, rgba(255, 255, 255, 0.55) 26%, transparent 60%);
    pointer-events: none;
}

.xt-home-move-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}