/* YuKo: white surfaces and rose-copper accents, shared by all public pages. */
:root {
    color-scheme: light;
    --m4-bg-primary: #ffffff;
    --m4-bg-secondary: #fcfafb;
    --m4-bg-tertiary: #f5eff1;
    --m4-bg-header: #fffffff5;
    --m4-text-primary: #2c2930;
    --m4-text-secondary: #625b62;
    --m4-text-muted: #746a71;
    --m4-accent: #a95146;
    --m4-accent-hover: #8b3f36;
    --m4-accent-text: #934337;
    --m4-accent-secondary: #916626;
    --m4-warning: #916626;
    --m4-border: #e6dfe2;
    --m4-border-hover: #b99189;
    --m4-card-bg: #ffffff;
    --m4-surface: #fcfafb;
    --yuko-control-border: #957c86;
    --yuko-success: #33684f;
    --yuko-success-bg: #edf5ef;
    --yuko-danger: #a33f4f;
    --yuko-danger-bg: #fbeff1;
    --background: var(--m4-bg-primary);
    --foreground: var(--m4-text-primary);
    --card: var(--m4-card-bg);
    --card-foreground: var(--m4-text-primary);
    --popover: #ffffff;
    --popover-foreground: var(--m4-text-primary);
    --primary: var(--m4-accent);
    --primary-foreground: #ffffff;
    --secondary: var(--m4-bg-tertiary);
    --secondary-foreground: var(--m4-text-primary);
    --muted: var(--m4-bg-tertiary);
    --muted-foreground: var(--m4-text-secondary);
    --accent: var(--m4-accent);
    --accent-foreground: #ffffff;
    --destructive: var(--yuko-danger);
    --border: var(--m4-border);
    --input: var(--m4-bg-tertiary);
    --ring: var(--m4-accent);
    --sidebar: var(--m4-bg-secondary);
    --sidebar-foreground: var(--m4-text-primary);
    --sidebar-primary: var(--m4-accent);
    --sidebar-primary-foreground: #ffffff;
    --sidebar-accent: var(--m4-bg-tertiary);
    --sidebar-accent-foreground: var(--m4-text-primary);
    --sidebar-border: var(--m4-border);
    --sidebar-ring: var(--m4-accent);
}

html, body {
    background: var(--m4-bg-primary);
    color: var(--m4-text-primary);
}
body { accent-color: var(--m4-accent); }
::selection { background: #ead2cd; color: #462d2a; }
:focus-visible { outline: 2px solid var(--m4-accent); outline-offset: 3px; }
input::placeholder, textarea::placeholder { color: var(--m4-text-muted); opacity: 1; }
input, select, textarea { color-scheme: light; }

/* Navigation, controls and overlays use the same surface palette. */
.header-nav-pill { background: #ffffff; }
.header-service-panel { box-shadow: 0 12px 32px rgb(71 42 51 / 10%); }
.header-menu-overlay, .xbb-dialog::backdrop, .info-dialog::backdrop,
.catalog-filter-dialog::backdrop { background: rgb(53 37 46 / 28%); }
.xbb-filter-header { box-shadow: none; }
.xbb-filter-location select, .xbb-mobile-sort select,
.xbb-filter-choice > span, .xbb-mobile-filter,
.xbb-filter-footer button, .filter-reset {
    border-color: var(--yuko-control-border);
}
.xbb-filter-range-row .xbb-range-input::-webkit-slider-thumb {
    box-shadow: 0 2px 6px rgb(71 42 51 / 12%);
}
.xbb-filter-range-row .xbb-range-input::-moz-range-thumb {
    box-shadow: 0 2px 6px rgb(71 42 51 / 12%);
}
.xbb-region-row a { color: var(--m4-text-secondary); }
.xbb-region-row a:hover { color: var(--m4-accent-text); }
.breadcrumbs { color: var(--m4-text-secondary); }
.breadcrumbs a:hover { color: var(--m4-accent-text); }
.listing-count, .directory-total, .catalog-end, .catalog-infinite,
.empty-state, .empty-state p { color: var(--m4-text-muted); }
.catalog-end span { background: var(--m4-border); }
.catalog-infinite-spinner { border-color: var(--m4-border); border-top-color: var(--m4-accent); }

/* Portrait and article cards stay distinct against the white canvas. */
.xbb-card { border: 1px solid var(--m4-border); }
.xbb-card:hover {
    border-color: var(--m4-border-hover);
    box-shadow: 0 8px 24px rgb(71 42 51 / 10%);
}
.home-city-grid, .review-page-list { background: #ffffff; }
[data-slot="card-overlay"] [data-slot="card-title"] { color: #ffffff; }
.profile-card { background: #ffffff; border-color: var(--m4-border); }
.profile-photo-wrap, .profile-image .image-skeleton { background: var(--m4-bg-tertiary); }
.image-fallback { background: var(--m4-bg-tertiary); color: var(--m4-text-secondary); }
.skeleton-shimmer {
    background: linear-gradient(100deg, #f5eff1 30%, #e9dfe3 50%, #f5eff1 70%);
    background-size: 200% 100%;
}
.home-guide-card, .guide-card { background: #ffffff; border-color: var(--m4-border); }
.home-guide-image, .guide-card-image { background: var(--m4-bg-tertiary); color: var(--m4-text-secondary); }
.home-guide-body > p:not(.guide-category), .guide-card-body > p:not(.guide-category),
.info-dialog p { color: var(--m4-text-secondary); }
.text-button { color: var(--m4-accent-text); }

/* Recommendation ranks keep their order within the YuKo palette. */
.sidebar-rank { background: var(--m4-bg-tertiary); color: var(--m4-text-secondary); box-shadow: none; }
.sidebar-rank-first { background: var(--m4-accent); color: #ffffff; }
.sidebar-rank-2 { background: #ead2cd; color: var(--m4-accent-text); }
.sidebar-rank-3 { background: #f5e4df; color: var(--m4-accent-text); }

/* Detail views, status labels and image controls. */
.xbb-detail-price { color: var(--m4-accent-text); text-shadow: none; }
.xbb-detail-panel { border: 1px solid var(--m4-border); }
.xbb-detail-tag-link:hover {
    background: var(--m4-bg-tertiary);
    color: var(--m4-accent-text);
    box-shadow: 0 3px 10px rgb(71 42 51 / 8%);
}
.xbb-tags span, .xbb-detail-tag-green {
    background: var(--yuko-success-bg);
    color: var(--yuko-success);
    border-color: #bad4c3;
}
.xbb-detail-tag-red {
    background: var(--yuko-danger-bg);
    color: var(--yuko-danger);
    border-color: #e5bdc6;
}
.xbb-detail-blur { filter: blur(20px) opacity(.18); }
.xbb-detail-photo-arrow, .xbb-detail-photo-count, .xbb-photo-lightbox-close {
    background: rgb(255 255 255 / 95%);
    color: var(--m4-text-primary);
    border: 1px solid var(--m4-border);
    box-shadow: 0 2px 10px rgb(71 42 51 / 10%);
}
.xbb-detail-photo-arrow:hover { background: #ffffff; color: var(--m4-accent-text); }
.xbb-photo-lightbox { background: #ffffff; color: var(--m4-text-primary); }
.xbb-photo-lightbox::backdrop { background: rgb(255 255 255 / 94%); }