/* eat-app-css-ok 1783557511 */
:root {
    /* Brand palette (forest green) */
    --ct-brand: #2e7d5a;
    --ct-brand-hover: #246347;
    --ct-brand-soft: #eef5f0;
    --ct-brand-muted: #cfe0d6;
    --ct-orange: var(--ct-brand);
    --ct-orange-hover: var(--ct-brand-hover);
    --ct-orange-soft: var(--ct-brand-soft);
    --ct-orange-muted: var(--ct-brand-muted);
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-gray: #f7f7f7;
    --text: #191919;
    --text-secondary: #666666;
    --text-muted: #999999;
    --border: #eeeeee;
    --border-strong: #dddddd;
    --accent: var(--ct-brand);
    --accent-soft: var(--ct-brand-soft);
    --accent-dark: var(--ct-brand-hover);
    --accent-glow: rgba(46, 125, 90, 0.18);
    --success: var(--ct-brand);
    --success-hover: var(--ct-brand-hover);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.08);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
    --app-bottom-nav-height: 56px;
    --admin-bottom-nav-height: 56px;
    --eat-user-drawer-handle-height: 28px;
    --eat-user-drawer-content-gap: 20px;
    --eat-user-drawer-overlap: calc(var(--eat-user-drawer-handle-height) + var(--eat-user-drawer-content-gap));
    --eat-user-drawer-close-bar-height: 20px;
    --eat-user-drawer-nav-height: calc(var(--app-bottom-nav-height) + 12px);
    --eat-user-drawer-height: calc(var(--eat-user-drawer-overlap) + var(--eat-user-drawer-close-bar-height) + var(--eat-user-drawer-nav-height));
    --eat-user-drawer-lift: calc(var(--eat-user-drawer-height) + var(--safe-bottom));
    /*
     * 홈: 유저 드로어 열릴 때 .home-accordion 제출폼만 위로 (셸 전체 lift 와 별개).
     * transform 은 fixed 제출바 containing block 을 깨뜨리므로 margin + footer bottom 사용.
     */
    --eat-user-drawer-accordion-extra-lift: 32px;
    --page-padding: 20px;
    --content-max: 100%;
    --app-header-padding-y: 12px;
    --app-header-inner-size: 32px;
    --app-header-control-size: 28px;
    --app-header-avatar-size: 24px;
    --app-header-height-fallback: 56px;
    --launch-city-blocked-header: calc(var(--app-header-height-fallback) + var(--safe-top));
    --launch-city-blocked-bottom: calc(24px + var(--safe-bottom));
    --home-meal-submit-bar-height: 56px;
    --home-meal-sticky-top: calc(var(--app-header-height-fallback) + var(--safe-top));
    /*
     * 하단 네비 실제 높이 ≈ item(56) + padding 상하(6+6=12) + safe
     * 그 위에 폼–네비 간격(--home-meal-submit-nav-gap)
     */
    --home-meal-submit-nav-gap: 20px;
    --home-meal-submit-bottom: calc(
        var(--app-bottom-nav-height) + 12px + var(--home-meal-submit-nav-gap) + var(--safe-bottom)
    );
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    touch-action: manipulation;
}

body {
    font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
    background: #fff;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.02em;
    touch-action: manipulation;
}

@media (hover: none) and (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]),
    textarea,
    select {
        font-size: max(16px, 1em);
    }
}

.app-shell {
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    margin: 0;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
    z-index: 1;
    transition:
        transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Header (CatchTable-style) ── */
.app-header {
    padding: calc(var(--app-header-padding-y) + var(--safe-top)) var(--page-padding) var(--app-header-padding-y);
    flex-shrink: 0;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.app-header--back {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-logo,
.ct-brand {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text);
}

.app-logo span,
.ct-brand-accent,
.text-accent {
    color: var(--ct-orange);
}

.back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--app-header-inner-size);
    min-height: var(--app-header-inner-size);
    margin: 0;
    padding: 8px;
    color: var(--text);
    text-decoration: none;
    font-size: 1.125rem;
    border-radius: var(--radius-xs);
}

.back-link:active {
    background: var(--surface-gray);
}

.back-link--icon {
    font-size: 0;
}

.back-link--context {
    gap: 4px;
    justify-content: flex-start;
    min-width: 0;
    padding: 8px 10px 8px 4px;
}

.back-link--context .back-link-label {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #777;
    line-height: 1;
}

.back-link-icon {
    display: block;
}

.header-title {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.app-header-bar {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    width: 100%;
    min-height: var(--app-header-inner-size);
}

.app-header-bar-spacer {
    grid-column: 1;
}

.app-header--with-user .context-inline {
    grid-column: 2;
    justify-content: center;
    width: auto;
    padding: 0;
}

.app-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    grid-column: 3;
    justify-self: end;
    min-width: var(--app-header-control-size);
    min-height: var(--app-header-control-size);
}

.app-header--with-user .app-header-actions {
    position: fixed;
    right: 14px;
    top: calc(var(--app-header-padding-y) + var(--safe-top));
    z-index: 25;
    pointer-events: auto;
}

.page-home .app-header--with-user .app-header-actions {
    top: var(--safe-top);
}

.eat-user-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: var(--app-header-control-size);
    height: var(--app-header-control-size);
    flex-shrink: 0;
}

.eat-user-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--app-header-control-size);
    height: var(--app-header-control-size);
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.eat-user-menu-trigger:active,
.eat-user-menu.is-open .eat-user-menu-trigger {
    background: var(--surface-gray);
}

.eat-user-menu-trigger.is-trigger-hidden {
    visibility: hidden;
    pointer-events: none;
}

.eat-user-menu-avatar {
    display: block;
    width: var(--app-header-avatar-size);
    height: var(--app-header-avatar-size);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(46, 125, 90, 0.12);
}

.eat-user-menu-feedback {
    padding: 2px 6px 6px;
}

/* ── User drawer (bottom sheet) ── */
body.is-user-sidebar-open {
    overflow: hidden;
}

body.is-user-sidebar-open .app-shell {
    max-height: 100dvh;
    transform: translateY(calc(-1 * var(--eat-user-drawer-lift) + var(--eat-user-drawer-overlap)));
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    z-index: 225;
    cursor: pointer;
}

body.is-user-sidebar-open.has-app-bottom-nav .app-bottom-nav {
    display: none;
}

.eat-user-drawer {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 220;
    display: flex;
    flex-direction: column;
    width: min(100%, var(--content-max));
    height: auto;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #ececec;
    transform: translateX(-50%) translateY(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

body.is-user-sidebar-open .eat-user-drawer {
    transform: translateX(-50%) translateY(0);
}

.eat-user-drawer-overlap-spacer {
    flex-shrink: 0;
    height: var(--eat-user-drawer-overlap);
    pointer-events: none;
}

.eat-user-drawer-handle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--eat-user-drawer-close-bar-height);
    margin: 0;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

.eat-user-drawer-handle::before {
    content: '';
    display: block;
    width: 40px;
    height: 5px;
    border-radius: 999px;
    background: #b8b8b8;
}

.eat-user-drawer-handle:active::before {
    background: #9ca3af;
}

.eat-user-drawer-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    flex-shrink: 0;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 6px var(--page-padding) calc(6px + var(--safe-bottom));
    box-sizing: border-box;
}

.eat-user-drawer-item {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: var(--app-bottom-nav-height);
    padding: 0 4px;
    border: none;
    border-right: 1px solid #d8d8d8;
    background: transparent;
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #374151;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.eat-user-drawer-item:last-child {
    border-right: none;
}

.eat-user-drawer-item:active {
    background: rgba(0, 0, 0, 0.04);
}

.eat-user-drawer-item--feedback {
    position: relative;
}

.eat-user-drawer-item.eat-feedback-btn {
    min-width: 0;
    min-height: var(--app-bottom-nav-height);
    height: auto;
    margin: 0;
    padding: 0 4px;
    border: none;
    border-right: 1px solid #d8d8d8;
    border-radius: 0;
    background: transparent;
    color: #374151;
}

.eat-user-drawer-item.eat-feedback-btn:active {
    background: rgba(0, 0, 0, 0.04);
    color: #374151;
}

.eat-user-drawer-item--feedback .eat-feedback-label {
    font-size: inherit;
    font-weight: 700;
    letter-spacing: inherit;
    line-height: inherit;
}

.eat-user-drawer-item.is-logout,
.eat-user-drawer-item.is-logout .eat-user-drawer-icon {
    color: #dc2626;
}

.eat-user-drawer-item--profile .eat-user-drawer-label {
    font-weight: 800;
    color: var(--text);
}

.eat-user-drawer-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #6b7280;
}

.eat-user-drawer-icon svg {
    display: block;
    width: 24px;
    height: 24px;
}

.eat-user-drawer-icon--avatar {
    width: 32px;
    height: 32px;
}

.eat-user-drawer-avatar {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.eat-user-drawer-label {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.eat-logout-dialog {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 20px var(--page-padding) calc(20px + var(--safe-bottom));
    background: rgba(15, 23, 42, 0.36);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.eat-logout-dialog.is-open {
    opacity: 1;
    pointer-events: auto;
}

.eat-logout-dialog[hidden] {
    display: none !important;
    pointer-events: none !important;
}

.eat-logout-dialog__panel {
    width: min(100%, 390px);
    padding: 22px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
    transform: translateY(16px);
    transition: transform 0.18s ease;
}

.eat-logout-dialog.is-open .eat-logout-dialog__panel {
    transform: translateY(0);
}

.eat-logout-dialog__title {
    color: var(--text);
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

.eat-logout-dialog__text {
    margin: 8px 0 16px;
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

.eat-logout-dialog__option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 12px;
    border-radius: 14px;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
}

.eat-logout-dialog__option input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primary);
}

.eat-logout-dialog__actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.eat-logout-dialog__cancel,
.eat-logout-dialog__confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 48px;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 800;
    cursor: pointer;
}

.eat-logout-dialog__cancel {
    background: #f3f4f6;
    color: #374151;
}

.eat-logout-dialog__confirm {
    background: #dc2626;
    color: #fff;
}

.eat-user-drawer .eat-user-menu-feedback {
    display: flex;
    padding: 0;
}

.eat-user-drawer .eat-feedback-unread-dot {
    position: absolute;
    top: 6px;
    right: calc(50% - 20px);
    margin-left: 0;
}

.eat-user-sidebar-shield {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.32);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s ease;
}

body.is-user-sidebar-open .eat-user-sidebar-shield {
    opacity: 1;
    pointer-events: auto;
}

.eat-user-sidebar-shield[hidden] {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── Main ── */
#eat-app-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
}

.app-main {
    flex: 1;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 0 28px;
    animation: fadeUp 0.3s ease-out;
}

body.has-bottom-bar .app-main {
    padding-bottom: calc(88px + var(--safe-bottom));
}

.app-main--center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px var(--page-padding);
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Auth ── */
.page-login .app-shell,
.page-register .app-shell,
.page-forgot-password .app-shell,
.page-invite .app-shell,
.page-terms .app-shell,
.page-privacy .app-shell,
.page-legal .app-shell {
    background: var(--bg);
}

.auth-intro {
    text-align: center;
    margin-bottom: 32px;
}

.auth-intro--compact {
    margin-bottom: 24px;
    text-align: left;
    padding: 0 var(--page-padding);
    padding-top: 8px;
}

.auth-intro--compact h1 {
    font-size: 1.375rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.auth-emoji {
    display: none;
}

.auth-intro h1 {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    margin-bottom: 10px;
}

.auth-intro .ct-brand {
    font-size: 1.75rem;
}

.auth-intro p,
.auth-subtitle {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 400;
}

.auth-subtitle {
    margin-top: 20px;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.55;
}

.page-register .auth-intro .auth-subtitle:first-of-type {
    margin-top: 8px;
}

.page-register .auth-intro .auth-subtitle + .auth-subtitle:not(.auth-subtitle--register-note) {
    margin-top: 10px;
    font-size: 0.875rem;
    font-weight: 400;
}

.page-register .auth-intro .auth-subtitle.auth-subtitle--register-note {
    margin-top: 10px;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-trust-notice {
    margin: 0 var(--page-padding) 20px;
    padding: 14px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.auth-trust-title {
    margin: 0 0 10px;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}

.auth-trust-list {
    margin: 0 0 10px;
    padding-left: 18px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.55;
}

.auth-trust-list li + li {
    margin-top: 2px;
}

.auth-trust-note,
.auth-trust-rule {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.55;
    letter-spacing: -0.02em;
}

.auth-trust-note + .auth-trust-rule {
    margin-top: 10px;
}

.auth-trust-note strong {
    color: var(--text);
    font-weight: 700;
}

.auth-trust-warn {
    color: #000;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-consent {
    margin: 16px 0 4px;
    display: flex;
    justify-content: center;
}

.auth-consent-item {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.auth-consent-item input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--accent);
    cursor: pointer;
}

.auth-consent-text {
    line-height: 1.5;
}

.auth-consent-badge {
    display: inline-block;
    margin-right: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #d64545;
    background: #fdecea;
}

.auth-consent-badge--optional {
    color: var(--text-muted);
    background: var(--surface-gray);
}

.auth-consent-link {
    color: var(--text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-consent.is-invalid {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: #fdecea;
    border: 1px solid #f5c6c2;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.auth-consent.is-invalid .auth-consent-item--required {
    color: #d64545;
}

.auth-consent.is-invalid .auth-consent-link {
    color: #d64545;
}

.auth-consent--inline-error.is-invalid {
    padding: 0;
    border: 0;
    background: transparent;
    width: auto;
}

.page-legal .app-main--legal {
    padding-bottom: 24px;
}

.legal-doc {
    margin: 0 var(--page-padding);
    max-height: calc(100dvh - 220px);
    overflow-y: auto;
    padding: 4px 2px 12px;
}

.legal-doc-section + .legal-doc-section {
    margin-top: 18px;
}

.legal-doc-section h2 {
    margin: 0 0 8px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}

.legal-doc-section p,
.legal-doc-section li {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.65;
}

.legal-doc-section ul {
    margin: 0;
    padding-left: 18px;
}

.legal-doc-section li + li {
    margin-top: 4px;
}

.legal-doc-meta {
    margin: 20px 0 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
}

.auth-form {
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
}

.page-login .auth-form,
.page-register .auth-form {
    text-align: center;
}

.page-register .form-field--username:focus-within label,
.page-register .form-field--username.is-filled label,
.page-register .form-field--username.is-label-error label,
.page-register .form-field--password:focus-within label,
.page-register .form-field--password.is-filled label,
.page-register .form-field--password.is-label-error label {
    font-size: 0.625rem;
    line-height: 1.25;
    white-space: normal;
    max-width: calc(100% - 28px);
}

.page-register .form-field--username .form-field-label-name,
.page-register .form-field--password .form-field-label-name {
    margin-right: 0.75em;
}

.page-invite .auth-intro--compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
}

.page-invite .auth-intro--compact.is-invite-sent-subtitle {
    gap: 4px;
}

.page-invite .auth-intro--compact h1 {
    margin-bottom: 0;
}

.page-invite .auth-intro--compact .auth-subtitle {
    margin-top: 0;
}

.page-invite .invite-empty-message {
    margin: 0;
    padding: 0 var(--page-padding);
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.55;
    color: var(--text-secondary);
}

.page-invite .invite-sent {
    margin: 16px 0 0;
    padding: 0 var(--page-padding);
    text-align: center;
}

.page-invite .invite-sent__message {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.page-invite .invite-sent__email,
.page-invite .invite-sent__action {
    display: block;
    max-width: 100%;
}

.page-invite .invite-sent__email {
    word-break: break-all;
}

.page-invite .invite-sent__note {
    margin: 12px 0 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-muted);
}

.page-invite .invite-sent__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 20px;
}

.page-invite .invite-sent__actions[hidden] {
    display: none !important;
}

.page-invite .invite-sent__error {
    margin-top: 14px;
    margin-bottom: 0;
}

.page-invite .auth-form.is-invite-sent [data-eat-invite-fields] {
    display: none;
}

.page-register--invite-required .app-main--center {
    text-align: center;
    align-items: center;
}

.page-register--invite-required .invite-empty-message {
    margin: 16px 0 0;
    padding: 0 var(--page-padding);
    text-align: center;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--text-secondary);
}

.page-register--invite-required .invite-empty-message--expired {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4em;
    white-space: normal;
    line-height: 1.55;
}

.page-register--invite-required .invite-empty-message--expired .invite-empty-message__line {
    margin: 0;
    white-space: nowrap;
}

.page-register--invite-pending .auth-subtitle--register-invite {
    margin-top: 0.75rem;
    color: var(--text-secondary);
}

.page-register .form-field--register-email .form-input {
    padding-right: 6.5rem;
}

.page-register .form-field--register-email:focus-within .form-input,
.page-register .form-field--register-email.is-filled .form-input {
    padding-right: 6.5rem;
}

.page-register .form-field--register-email.is-code-request-sent .form-input,
.page-register .form-field--register-email.is-code-request-sent:focus-within .form-input,
.page-register .form-field--register-email.is-code-request-sent.is-filled .form-input {
    padding-right: 10.75rem;
}

.page-register .form-field--register-email.is-code-request-resend .form-input,
.page-register .form-field--register-email.is-code-request-resend:focus-within .form-input,
.page-register .form-field--register-email.is-code-request-resend.is-filled .form-input {
    padding-right: 8.5rem;
}

.page-register .form-field--required-badge .form-field-placeholder {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 28px);
    pointer-events: none;
    line-height: 1.2;
}

.page-register .form-field--required-badge .form-field-placeholder-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-muted);
}

.page-register .form-field--required-badge .form-field-required-badge {
    flex-shrink: 0;
    margin-right: 0;
}

.page-register .form-field--required-badge .form-input::placeholder {
    color: transparent;
}

.page-register .form-field--required-badge:focus-within .form-field-placeholder,
.page-register .form-field--required-badge.is-filled .form-field-placeholder {
    opacity: 0;
    visibility: hidden;
}

.page-register .form-field--required-badge.form-field--secret .form-field-placeholder {
    max-width: calc(100% - 52px);
}

.page-register .form-field--required-badge.form-field--register-email .form-field-placeholder {
    max-width: calc(100% - 120px);
}

.page-register .register-invite-code-toggle {
    display: block;
    width: 100%;
    margin: 0.35rem 0 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ct-orange);
    text-align: left;
    cursor: pointer;
}

.page-register .register-invite-code-wrap {
    margin-top: 0.35rem;
}

.page-register .register-invite-code-error {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--danger, #d64545);
}

.page-register .register-token-notice {
    margin: 12px 0 0;
    padding: 0 var(--page-padding);
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-secondary);
}

.page-register .register-token-notice__line {
    margin: 0;
}

.page-register .register-token-notice--used {
    white-space: normal;
}

.page-register .register-token-notice__desktop {
    display: none;
}

.page-register .register-token-notice__mobile {
    display: inline;
}

@media (min-width: 600px) {
    .page-register .register-token-notice--google-verified {
        white-space: nowrap;
    }

    .page-register .register-token-notice__desktop {
        display: inline;
    }

    .page-register .register-token-notice__mobile {
        display: none;
    }
}

.page-register .register-complete {
    margin: 16px 0 0;
    padding: 0 var(--page-padding);
    text-align: center;
}

.page-register .register-complete__message {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-secondary);
}

.page-register .register-complete__login {
    display: inline-block;
    margin-top: 1em;
}

.page-register .auth-form.is-register-complete [data-eat-register-fields],
.page-register .auth-form.is-register-complete [data-eat-register-consent],
.page-register .auth-form.is-register-complete .auth-actions {
    display: none;
}

.page-forgot-password .auth-intro--compact {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}

.page-forgot-password .auth-intro--compact .auth-subtitle {
    margin-top: 6px;
}

.page-forgot-password .auth-form {
    padding: 0 var(--page-padding);
    text-align: center;
}

.page-forgot-password .auth-actions {
    align-items: center;
}

.page-forgot-password .forgot-continue-link {
    text-align: center;
}

.auth-actions {
    padding: 8px var(--page-padding) 0;
}

.auth-form .auth-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-left: 0;
    padding-right: 0;
}

.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-bottom: 12px;
}

.auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.auth-remember input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

.auth-remember-days {
    display: none;
}

.auth-remember:has(input:checked) .auth-remember-days {
    display: inline;
}

.auth-otp-link {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.auth-otp-link:active {
    color: var(--ct-orange);
}

.auth-actions .btn {
    width: 100%;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 16px 0;
}

.auth-divider-line {
    flex: 1;
    height: 0;
    border: none;
    border-top: 1px dotted var(--border);
}

.auth-divider-text {
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
}

.btn-google {
    gap: 10px;
    background: #fff;
    color: var(--text);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.btn-google:active {
    background: var(--surface-gray);
}

.btn-google-icon {
    flex-shrink: 0;
}

.auth-error {
    margin-bottom: 14px;
    padding: 12px 14px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #d32f2f;
    background: #fdecea;
    border-radius: var(--radius-sm);
    border: 1px solid #f5c6c2;
}

.auth-success {
    margin-bottom: 14px;
    padding: 12px 14px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ct-brand);
    background: var(--ct-brand-soft);
    border-radius: var(--radius-sm);
    border: 1px solid var(--ct-brand-muted);
}

/* ── Forms ── */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

/* Floating label inside input */
.form-field-group {
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-field-group:focus-within {
    border-color: var(--ct-orange);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-field-group .form-field {
    margin-bottom: 0;
}

.form-field-group .form-field + .form-field {
    border-top: 1px solid var(--border);
}

.form-field-group .form-field:has(.form-field-hint:not([hidden])) + .form-field {
    border-top-color: transparent;
}

.form-field-group > .form-field + .register-main-fields {
    border-top: 1px solid var(--border);
}

.form-field-group .form-input {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.form-field {
    position: relative;
    margin-bottom: 12px;
}

.form-field .form-input {
    min-height: 56px;
    padding: 12px 14px;
}

.form-field:focus-within .form-input,
.form-field.is-filled .form-input {
    padding-top: 24px;
    padding-bottom: 8px;
}

.form-field:focus-within .form-input::placeholder {
    opacity: 0;
}

.form-field label {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-muted);
    pointer-events: none;
    opacity: 0;
    transition: top 0.15s ease, transform 0.15s ease, font-size 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.form-field-action {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ct-orange);
    cursor: pointer;
    white-space: nowrap;
}

.form-field-action:active {
    opacity: 0.72;
}

.form-field--secret .form-input {
    padding-right: 44px;
}

.form-field--verified .form-input {
    padding-right: 44px;
}

.form-field--verified:focus-within .form-input,
.form-field--verified.is-filled .form-input {
    padding-right: 44px;
}

.form-field-verified-icon {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.form-field--secret:focus-within .form-input,
.form-field--secret.is-filled .form-input {
    padding-right: 44px;
}

.form-field-toggle {
    position: absolute;
    right: 10px;
    top: 14px;
    z-index: 1;
    display: block;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

.form-field-toggle:active {
    opacity: 0.72;
}

.form-field-toggle-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
}

.form-field-toggle-icon--hide {
    display: none;
}

.form-field-toggle[aria-pressed="true"] .form-field-toggle-icon--show {
    display: none;
}

.form-field-toggle[aria-pressed="true"] .form-field-toggle-icon--hide {
    display: block;
}

.form-field-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 0;
    margin: 0;
    pointer-events: none;
}

.form-field-hint[hidden] {
    display: none;
}

.form-field-hint__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    transform: translateY(50%);
    background: var(--border);
    overflow: hidden;
}

.form-field-hint__fill {
    display: block;
    height: 100%;
    width: 0;
    transition: width 0.15s ease, background-color 0.15s ease;
}

.form-field-hint--strength .form-field-hint__fill {
    background: #d64545;
}

.form-field-hint--match .form-field-hint__fill {
    width: 100%;
}

.form-field-hint--match .form-field-hint__fill.is-match {
    background: #2ea86a;
}

.form-field-hint--match .form-field-hint__fill.is-mismatch {
    background: #d64545;
}

.form-field-hint--status .form-field-hint__fill {
    width: 100%;
}

.form-field-hint--status .form-field-hint__fill.is-available {
    background: #2ea86a;
}

.form-field-hint--status .form-field-hint__fill.is-taken {
    background: #d64545;
}

.form-field-hint--status .form-field-hint__fill.is-checking {
    background: var(--border-strong);
    animation: form-field-hint-pulse 1s ease-in-out infinite;
}

.form-field-hint__text {
    position: absolute;
    right: 14px;
    bottom: 6px;
    margin: 0;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-muted);
}

.form-field-hint__text.is-available {
    color: #2ea86a;
}

.form-field-hint__text.is-taken {
    color: #d64545;
}

.form-field-hint__text.is-checking {
    color: var(--text-muted);
}

@keyframes form-field-hint-pulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

.auth-form.is-otp-mode .form-field--login-id .form-input {
    padding-right: 76px;
}

.auth-form.is-otp-mode .form-field--login-id:focus-within .form-input,
.auth-form.is-otp-mode .form-field--login-id.is-filled .form-input {
    padding-right: 76px;
}

.auth-form.is-otp-mode .form-field--login-id.is-code-request-sent .form-input,
.auth-form.is-otp-mode .form-field--login-id.is-code-request-sent:focus-within .form-input,
.auth-form.is-otp-mode .form-field--login-id.is-code-request-sent.is-filled .form-input {
    padding-right: 10.75rem;
}

.auth-form.is-otp-mode .form-field--login-id.is-code-request-resend .form-input,
.auth-form.is-otp-mode .form-field--login-id.is-code-request-resend:focus-within .form-input,
.auth-form.is-otp-mode .form-field--login-id.is-code-request-resend.is-filled .form-input {
    padding-right: 5.75rem;
}

.form-field-action.is-sent {
    max-width: 9.75rem;
    font-size: 0.6875rem;
    line-height: 1.25;
    white-space: normal;
    text-align: right;
    color: var(--ct-brand);
}

.form-field:focus-within label,
.form-field.is-filled label {
    top: 10px;
    transform: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--ct-orange);
    opacity: 1;
}

.form-field.is-label-error label {
    top: 10px;
    transform: none;
    font-size: 11px;
    font-weight: 600;
    color: #d64545;
    opacity: 1;
}

.form-input,
.form-select {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    font-size: 16px;
    font-family: inherit;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-input::placeholder {
    color: var(--text-muted);
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--ct-orange);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-field-group .form-input:focus {
    border: none;
    box-shadow: none;
}

.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23999' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

.form-link {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    min-height: 44px;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.form-link:active {
    color: var(--ct-orange);
}

.form-link--bottom {
    margin-top: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-secondary);
}

.form-link--bottom:active {
    color: var(--ct-orange);
}

.form-link--muted {
    color: var(--text-muted);
    cursor: default;
    pointer-events: none;
}

.form-link--back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.forgot-resend-link {
    align-self: center;
    margin-top: 16px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.forgot-primary-action {
    position: relative;
    width: 100%;
}

.forgot-continue-link {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 16px);
    margin-top: 0;
    align-self: auto;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
    color: var(--text-secondary);
}

.forgot-continue-link[hidden],
.forgot-resend-link[hidden],
#eat-forgot-form[data-eat-forgot-step="1"] [data-eat-forgot-resend],
#eat-forgot-form[data-eat-forgot-step="2"] [data-eat-forgot-continue] {
    display: none !important;
}

.page-forgot-password [data-eat-forgot-step-panel="2"] .form-field + .form-field {
    margin-top: 0;
}

.form-link-back-icon {
    flex-shrink: 0;
    width: 10px;
    height: 17px;
}

/* ── Buttons ── */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: -0.02em;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
}

.btn:active {
    transform: scale(0.99);
}

.btn-primary {
    background: var(--ct-orange);
    color: #fff;
}

@media (hover: hover) {
    .btn-primary:not(.is-disabled):not(:disabled):not(.is-error):not(.is-success):hover {
        background: var(--ct-orange-hover);
    }
}

.btn-primary:active {
    background: var(--ct-orange-hover);
}

.btn-primary.is-error {
    background: #dc2626;
    font-size: 0.8125rem;
    letter-spacing: -0.02em;
}

.btn-primary.is-error:active {
    background: #b91c1c;
}

.btn-primary.is-success {
    background: var(--ct-brand);
    font-size: 0.8125rem;
    letter-spacing: -0.02em;
}

@media (hover: hover) {
    .btn-primary.is-success:not(.is-disabled):not(:disabled):hover {
        background: var(--ct-brand-hover);
    }
}

.btn-primary.is-success:active {
    background: var(--ct-brand-hover);
}

.btn-primary.is-disabled {
    background: var(--ct-brand-soft);
    color: rgba(46, 125, 90, 0.45);
    pointer-events: none;
    cursor: default;
    opacity: 1;
}

.btn-primary.is-disabled:active {
    transform: none;
    background: var(--ct-brand-soft);
}

.btn-primary:disabled {
    background: var(--ct-brand-soft);
    color: rgba(46, 125, 90, 0.45);
    pointer-events: none;
    cursor: default;
    opacity: 1;
}

.btn-primary:disabled:active {
    transform: none;
    background: var(--ct-brand-soft);
}

/*
 * 로그인 처리 중: :disabled 연한 스타일 때문에 버튼이 사라진 것처럼 보이던 문제.
 * page-login / page-landing 공통 — 끝까지 진한 브랜드색 + 흰 글자로 유지.
 */
[data-eat-login-submit].btn-primary.is-processing,
[data-eat-login-submit].btn-primary.is-processing:disabled,
.page-login [data-eat-login-submit].btn-primary.is-processing,
.page-login [data-eat-login-submit].btn-primary.is-processing:disabled,
.page-landing [data-eat-login-submit].btn-primary.is-processing,
.page-landing [data-eat-login-submit].btn-primary.is-processing:disabled {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: linear-gradient(
        90deg,
        #d4eddc 0%,
        #a8d4b8 38%,
        var(--ct-brand) 72%,
        var(--ct-brand) 100%
    ) !important;
    background-size: 280% 100% !important;
    background-position: 0% 50%;
    animation: eat-login-submit-progress 1.35s ease-in-out forwards;
    color: #fff !important;
    pointer-events: none;
    transform: none;
    min-height: 48px;
}

/* 이동 중… : 버튼은 남기되 dimmed (완전 숨김/연한 소멸 아님) */
[data-eat-login-submit].btn-primary.is-processing.is-processing-hold,
[data-eat-login-submit].btn-primary.is-processing.is-processing-hold:disabled,
.page-login [data-eat-login-submit].btn-primary.is-processing.is-processing-hold,
.page-login [data-eat-login-submit].btn-primary.is-processing.is-processing-hold:disabled,
.page-landing [data-eat-login-submit].btn-primary.is-processing.is-processing-hold,
.page-landing [data-eat-login-submit].btn-primary.is-processing.is-processing-hold:disabled {
    animation: none !important;
    background: var(--ct-brand) !important;
    background-size: auto !important;
    color: #fff !important;
    opacity: 0.55 !important;
    filter: saturate(0.85);
}

[data-eat-login-submit].btn-primary.is-processing:active,
[data-eat-login-submit].btn-primary.is-processing:disabled:active {
    transform: none;
}

@keyframes eat-login-submit-progress {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

.btn--compact {
    min-height: 40px;
    padding: 10px 18px;
    font-size: 0.875rem;
}

.btn-danger {
    background: #e5484d;
    color: #fff;
}

.btn-danger:active {
    background: #d43d42;
}

.btn.btn-google {
    border: 1px solid var(--border-strong);
}

.eat-feedback-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    min-width: auto;
    min-height: 44px;
    height: 28px;
    margin: 0;
    padding: 5px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
}

.eat-feedback-btn:active {
    background: var(--surface-gray);
    color: var(--text);
}

.eat-feedback-label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
}

.eat-feedback-icon {
    display: block;
    width: 24px;
    height: 24px;
}

.eat-feedback-icon[hidden] {
    display: none !important;
}

body.eat-feedback-open {
    overflow: hidden;
}

/* 모달 계층: 유저 드로어 shield 200 · 풍선 250/260 · 홈 헤더 300 — 피드백은 그 위 */
.eat-feedback-overlay {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    visibility: hidden;
    pointer-events: none;
}

.eat-feedback-overlay.is-open {
    visibility: visible;
    pointer-events: auto;
}

.eat-feedback-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.eat-feedback-overlay.is-open .eat-feedback-backdrop {
    opacity: 1;
}

.eat-feedback-sheet {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    height: 55vh;
    max-height: 55vh;
    background: var(--bg);
    border-radius: 16px 16px 0 0;
    box-shadow: var(--shadow-lg);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.eat-feedback-overlay.is-open .eat-feedback-sheet {
    transform: translateY(0);
}

.eat-feedback-sheet-header {
    position: relative;
    flex-shrink: 0;
    padding: 18px var(--page-padding) 0;
    border-bottom: 1px solid var(--border);
}

.eat-feedback-sheet-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 11px;
}

.eat-feedback-sheet-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.eat-feedback-sheet-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.eat-feedback-sheet-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.03em;
    line-height: 1.4;
}

.eat-feedback-sheet-title[hidden] {
    display: none !important;
}

.eat-feedback-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    margin: -4px -4px 0 0;
}

.eat-feedback-close-icon {
    display: block;
}

.eat-feedback-tabs {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 4px;
}

.eat-feedback-tab-back[hidden] {
    display: none !important;
}

.eat-feedback-tab-back {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.eat-feedback-tab {
    position: relative;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0 2px;
    line-height: 1.4;
    cursor: pointer;
}

.eat-feedback-tab[data-eat-feedback-tab="new"] {
    display: none !important;
}

.eat-feedback-tab[hidden] {
    display: none !important;
}

.eat-feedback-tabs[hidden] {
    display: none !important;
}

.eat-feedback-tab.is-active {
    color: var(--text);
    font-weight: 700;
}

.eat-feedback-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: 0;
    font-weight: 600;
    line-height: 1.4;
}

.eat-feedback-tab-icon-svg {
    display: block;
}

.eat-feedback-tab.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 2px;
    background: var(--ct-brand);
    border-radius: 2px 2px 0 0;
    z-index: 2;
}

.eat-feedback-tab-mine {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
}

.eat-feedback-tab-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    flex-shrink: 0;
}

.eat-feedback-tab-nav[hidden] {
    display: none !important;
}

.eat-feedback-tab-mine .eat-feedback-tab-badge {
    position: absolute;
    right: -2px;
    top: -4px;
    left: auto;
    transform: none;
}

.eat-feedback-tab-badge {
    display: block;
    width: 6px;
    height: 6px;
    min-width: 6px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background: #22c55e;
    font-size: 0;
    line-height: 0;
    color: transparent;
    flex-shrink: 0;
}

.eat-feedback-tab-badge[hidden] {
    display: none !important;
}

.eat-feedback-sheet-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px var(--page-padding);
}

.eat-feedback-panel[hidden] {
    display: none !important;
}

.eat-feedback-panel[data-eat-feedback-panel="mine"] {
    display: block;
}

.eat-feedback-sheet-footer {
    flex-shrink: 0;
    padding: 12px var(--page-padding) calc(16px + var(--safe-bottom));
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.eat-feedback-panel[data-eat-feedback-panel="new"] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.eat-feedback-sheet-desc {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 14px;
}

.eat-feedback-input-sheet {
    width: 100%;
    flex: 1;
    min-height: 80px;
    padding: 14px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    font: inherit;
    font-size: 0.9375rem;
    color: var(--text);
    resize: vertical;
    margin: 0;
    box-sizing: border-box;
}

.eat-feedback-input-sheet:focus {
    outline: none;
    border-color: var(--accent);
}

.eat-feedback-reply-input {
    min-height: 120px;
    margin-top: 12px;
}

.eat-feedback-send-btn {
    display: block;
    width: 100%;
    min-height: 48px;
    border: none;
    border-radius: 12px;
    background: var(--ct-brand);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

@media (hover: hover) {
    .eat-feedback-send-btn:not(:disabled):hover {
        background: var(--ct-brand-hover);
    }
}

.eat-feedback-send-btn:active {
    background: var(--ct-brand-hover);
}

.eat-feedback-send-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.eat-user-menu-avatar-wrap {
    position: relative;
    display: inline-flex;
}

.eat-feedback-unread-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid var(--bg);
    pointer-events: none;
}

.eat-feedback-btn .eat-feedback-unread-dot {
    top: 2px;
    right: 2px;
}

.eat-feedback-new-replies {
    border: none;
    background: transparent;
    color: #16a34a;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 8px 4px;
    min-height: 44px;
    cursor: pointer;
    white-space: nowrap;
}

.eat-feedback-timeline {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    margin-bottom: 12px;
    padding-right: 2px;
}

.eat-feedback-message-row {
    display: flex;
    width: 100%;
}

.eat-feedback-message-row.is-user {
    justify-content: flex-end;
}

.eat-feedback-message-row.is-admin {
    justify-content: flex-start;
}

.eat-feedback-message {
    max-width: 88%;
    padding: 10px 12px;
    border-radius: 14px;
    border: none;
    background: var(--surface-gray);
}

.eat-feedback-message-row.is-user .eat-feedback-message {
    border-bottom-right-radius: 4px;
    background: rgba(34, 197, 94, 0.12);
}

.eat-feedback-message-row.is-admin .eat-feedback-message {
    border-bottom-left-radius: 4px;
}

.eat-feedback-message.is-admin {
    background: var(--surface-gray);
}

.eat-feedback-message.is-admin.is-unread {
    box-shadow: inset 3px 0 0 #22c55e;
}

.eat-feedback-mine-empty {
    margin: 0 0 12px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.eat-feedback-message.is-deleted .eat-feedback-message-body {
    color: var(--text-secondary);
    font-style: italic;
}

.eat-feedback-message-body {
    margin: 0 0 6px;
    font-size: 0.9375rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.eat-feedback-message-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.eat-feedback-inquiry-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.eat-feedback-inquiry-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.eat-feedback-inquiry-item + .eat-feedback-inquiry-item {
    border-top: 1px solid var(--border);
}

.eat-feedback-inquiry-toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.eat-feedback-inquiry-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.eat-feedback-inquiry-title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--text);
    word-break: break-word;
}

.eat-feedback-inquiry-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.eat-feedback-inquiry-list:has(.eat-feedback-inquiry-item.is-expanded) .eat-feedback-inquiry-item:not(.is-expanded) {
    display: none;
}

.eat-feedback-overlay.is-inquiry-expanded .eat-feedback-sheet-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: calc(8px + var(--safe-bottom));
}

.eat-feedback-overlay.is-inquiry-expanded.is-inquiry-timeline-compact .eat-feedback-inquiry-item.is-expanded {
    flex: 1 1 auto;
    min-height: 0;
}

.eat-feedback-overlay.is-inquiry-expanded.is-inquiry-timeline-compact .eat-feedback-inquiry-body {
    flex: 1 1 auto;
    min-height: 0;
    flex-shrink: 1;
    padding-bottom: 0;
}

.eat-feedback-overlay.is-inquiry-expanded .eat-feedback-panel[data-eat-feedback-panel="mine"] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.eat-feedback-overlay.is-inquiry-expanded .eat-feedback-inquiry-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: none;
    background: transparent;
}

.eat-feedback-overlay.is-inquiry-expanded .eat-feedback-inquiry-list {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.eat-feedback-overlay.is-inquiry-expanded .eat-feedback-inquiry-item.is-expanded {
    flex: 1 1 auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    border-top: none;
}

.eat-feedback-overlay.is-inquiry-expanded .eat-feedback-inquiry-item.is-expanded .eat-feedback-inquiry-toggle {
    flex-shrink: 0;
    padding: 14px 16px;
    box-sizing: border-box;
}

.eat-feedback-overlay.is-inquiry-expanded .eat-feedback-inquiry-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 0 8px;
}

.eat-feedback-overlay.is-inquiry-expanded .eat-feedback-inquiry-thread {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.eat-feedback-overlay.is-inquiry-expanded .eat-feedback-timeline-shell {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.eat-feedback-overlay.is-inquiry-expanded.is-inquiry-timeline-compact .eat-feedback-timeline-shell {
    flex: 1 1 0;
    max-height: 200px;
    min-height: 0;
}

.eat-feedback-overlay.is-inquiry-expanded.is-inquiry-timeline-compact [data-eat-feedback-inquiry-timeline] {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

.eat-feedback-overlay.is-inquiry-expanded [data-eat-feedback-inquiry-timeline] {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

.eat-feedback-sheet-footer[data-eat-feedback-footer-reply] {
    flex-shrink: 0;
}

.eat-feedback-overlay.is-inquiry-expanded [data-eat-feedback-inquiry-reply] {
    flex: 0 0 auto;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    background: var(--bg);
    padding: 4px 0 0;
}

.eat-feedback-overlay.is-inquiry-input-compact [data-eat-feedback-inquiry-reply] .eat-feedback-chat-input-wrap {
    align-items: center;
}

.eat-feedback-overlay.is-inquiry-input-compact [data-eat-feedback-inquiry-reply] .eat-feedback-chat-input {
    max-height: 40px;
    overflow: hidden;
    height: 40px;
}

.eat-feedback-inquiry-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
}

.eat-feedback-inquiry-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.eat-feedback-inquiry-status {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

.eat-feedback-inquiry-status.is-pending {
    background: #f3f4f6;
    color: #6b7280;
}

.eat-feedback-inquiry-status.is-done {
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
}

.eat-feedback-inquiry-status.is-muted {
    background: #f3f4f6;
    color: #9ca3af;
}

.eat-feedback-inquiry-chevron {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s ease;
}

.eat-feedback-inquiry-item.is-expanded .eat-feedback-inquiry-chevron {
    transform: rotate(180deg);
}

.eat-feedback-inquiry-body {
    padding: 0 16px 14px;
}

.eat-feedback-inquiry-thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.eat-feedback-inquiry-thread.is-timeline-compact {
    gap: 0;
}

.eat-feedback-timeline-shell {
    display: flex;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
    position: relative;
}

.eat-feedback-timeline-expand {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    align-self: center;
}

.eat-feedback-inquiry-thread.is-timeline-compact .eat-feedback-timeline-shell {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.eat-feedback-inquiry-thread.is-timeline-compact .eat-feedback-timeline-expand {
    display: inline-flex;
    position: absolute;
    right: 12px;
    bottom: 0;
    z-index: 1;
}

.eat-feedback-inquiry-thread.is-timeline-compact [data-eat-feedback-inquiry-timeline] {
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding-right: 44px;
    box-sizing: border-box;
}

.eat-feedback-inquiry-thread.is-timeline-compact .eat-feedback-message-row:not(:last-child) {
    display: none;
}

.eat-feedback-timeline-expand:active {
    background: rgba(15, 23, 42, 0.06);
}

.eat-feedback-inquiry-thread.is-input-compact .eat-feedback-chat-input-wrap {
    align-items: center;
}

.eat-feedback-inquiry-body [data-eat-feedback-inquiry-timeline] {
    max-height: 240px;
    margin-bottom: 0;
}

.eat-feedback-reply-form[hidden] {
    display: none !important;
}

.eat-feedback-reply-form {
    padding-top: 2px;
}

.eat-feedback-chat-compose {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.eat-feedback-chat-input-wrap {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 6px 6px 6px 10px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: #fff;
}

.eat-feedback-chat-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.eat-feedback-chat-compose-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
}

.eat-feedback-chat-compose-expand:active {
    background: transparent;
    opacity: 0.65;
}

.eat-feedback-chat-compose-expand svg {
    width: 22px;
    height: 22px;
}

.eat-feedback-chat-compose-expand.is-expanded {
    margin-bottom: 2px;
}

.eat-feedback-chat-compose-expand[hidden] {
    display: none !important;
}

.eat-feedback-compose-expand-icon {
    display: block;
}

.eat-feedback-compose-collapse-icon {
    display: none;
}

.eat-feedback-chat-compose-expand.is-expanded .eat-feedback-compose-expand-icon {
    display: none;
}

.eat-feedback-chat-compose-expand.is-expanded .eat-feedback-compose-collapse-icon {
    display: block;
}

.eat-feedback-overlay.is-reply-compose-expanded.is-inquiry-expanded .eat-feedback-sheet-scroll {
    padding-bottom: calc(4px + var(--safe-bottom));
}

.eat-feedback-overlay.is-reply-compose-expanded.is-inquiry-expanded .eat-feedback-inquiry-body {
    padding-bottom: 0;
}

.eat-feedback-overlay.is-reply-compose-expanded.is-inquiry-expanded .eat-feedback-inquiry-thread {
    gap: 0;
}

.eat-feedback-overlay.is-reply-compose-expanded.is-inquiry-expanded .eat-feedback-inquiry-thread .eat-feedback-timeline-shell {
    display: none !important;
}

.eat-feedback-overlay.is-reply-compose-expanded.is-inquiry-expanded .eat-feedback-inquiry-reply {
    flex: 1 1 0;
    min-height: 0;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    padding: 0 0 calc(4px + var(--safe-bottom));
}

.eat-feedback-overlay.is-reply-compose-expanded .eat-feedback-inquiry-reply .eat-feedback-reply-form {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: 0;
}

.eat-feedback-overlay.is-reply-compose-expanded .eat-feedback-inquiry-reply .eat-feedback-chat-compose {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.eat-feedback-overlay.is-reply-compose-expanded .eat-feedback-inquiry-reply .eat-feedback-chat-input-wrap {
    flex: 1;
    min-height: 0;
    align-items: stretch;
    padding: 4px 6px 4px 10px;
    border-radius: 12px;
}

.eat-feedback-overlay.is-reply-compose-expanded .eat-feedback-inquiry-reply .eat-feedback-chat-actions {
    align-self: flex-end;
}

.eat-feedback-overlay.is-reply-compose-expanded .eat-feedback-inquiry-reply .eat-feedback-chat-input {
    flex: 1;
    min-height: 0;
    max-height: none;
    height: 100%;
    padding: 4px 0;
    overflow-y: auto;
}

.eat-feedback-overlay.is-reply-compose-expanded.is-inquiry-input-compact .eat-feedback-inquiry-reply .eat-feedback-chat-input {
    max-height: none;
    height: 100%;
}

.eat-feedback-chat-input {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    max-height: 120px;
    padding: 8px 0;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--text);
    resize: none;
}

.eat-feedback-chat-input:focus {
    outline: none;
}

.eat-feedback-chat-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--ct-brand);
    color: #fff;
    cursor: pointer;
}

@media (hover: hover) {
    .eat-feedback-chat-send:hover {
        background: var(--ct-brand-hover);
    }
}

.eat-feedback-chat-send:active {
    background: var(--ct-brand-hover);
}

.eat-feedback-chat-send:disabled {
    opacity: 0.45;
    cursor: default;
}

.eat-feedback-inquiry-empty {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-align: center;
    padding: 24px 0;
}

.eat-feedback-inquiry-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
}

.eat-feedback-inquiry-loading--header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    flex-shrink: 0;
}

.eat-feedback-inquiry-loading--header[hidden] {
    display: flex !important;
    visibility: hidden;
}

.eat-feedback-inquiry-loading--header .eat-feedback-inquiry-spinner {
    width: 16px;
    height: 16px;
}

.eat-feedback-inquiry-loading[hidden] {
    display: none !important;
}

.eat-feedback-inquiry-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-top-color: var(--ct-brand);
    border-radius: 50%;
    animation: eat-feedback-inquiry-spin 0.7s linear infinite;
}

@keyframes eat-feedback-inquiry-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Region picker drawer ── */
body.eat-region-open {
    overflow: hidden;
}

.eat-region-overlay {
    position: fixed;
    inset: 0;
    z-index: 210;
    visibility: hidden;
    pointer-events: none;
}

.eat-region-overlay.is-open,
.eat-region-overlay.is-closing {
    visibility: visible;
}

.eat-region-overlay.is-open {
    pointer-events: auto;
}

.eat-region-overlay.is-closing {
    pointer-events: none;
}

.eat-region-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.eat-region-overlay.is-open .eat-region-backdrop {
    opacity: 1;
}

.eat-region-drawer {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    height: 50dvh;
    background: #fff;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    transform: translateX(-50%) translateY(-100%);
    transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.eat-region-overlay.is-closing .eat-region-backdrop {
    opacity: 0;
}

.eat-region-overlay.is-open .eat-region-drawer {
    transform: translateX(-50%) translateY(0);
}

.eat-region-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 14px var(--page-padding) 10px;
    border-bottom: 0.5px solid var(--border);
}

.eat-region-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
}

.eat-region-back-icon {
    display: block;
}

.eat-region-back:active {
    background: var(--surface-gray);
}

.eat-region-back[hidden] {
    display: none;
}

.eat-region-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.3;
}

.eat-region-crumb {
    border: none;
    background: transparent;
    padding: 2px 0;
    color: var(--text-muted);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.eat-region-crumb.is-current {
    color: var(--text);
    font-weight: 700;
    cursor: default;
}

.eat-region-crumb-sep {
    color: var(--text-muted);
    font-weight: 400;
    user-select: none;
}

.eat-region-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.eat-region-panel {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.eat-region-panel.is-animating-forward .eat-region-list,
.eat-region-panel.is-animating-back .eat-region-list {
    animation-duration: 0.22s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

.eat-region-panel.is-animating-forward .eat-region-list {
    animation-name: eatRegionSlideForward;
}

.eat-region-panel.is-animating-back .eat-region-list {
    animation-name: eatRegionSlideBack;
}

@keyframes eatRegionSlideForward {
    from {
        opacity: 0;
        transform: translateX(18px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes eatRegionSlideBack {
    from {
        opacity: 0;
        transform: translateX(-18px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.eat-region-list {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.eat-region-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 14px var(--page-padding);
    border: none;
    border-bottom: 0.5px solid var(--border);
    background: #fff;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.eat-region-item:active {
    background: var(--surface-gray);
}

.eat-region-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: var(--surface-gray);
    border-radius: 10px;
    font-size: 1.25rem;
    line-height: 1;
}

.eat-region-item-main {
    flex: 1;
    min-width: 0;
}

.eat-region-item-label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
}

.eat-region-item-sub {
    display: block;
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-weight: 400;
}

.eat-region-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
}

.eat-region-item-count {
    min-width: 1ch;
}

.eat-region-item-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: var(--text-muted);
    opacity: 0.45;
}

.eat-region-item-chevron-icon {
    display: block;
}

.eat-region-item.is-leaf .eat-region-item-meta {
    display: none;
}

.eat-region-handle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 14px;
    touch-action: none;
    cursor: pointer;
}

.eat-region-handle::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: #d1d1d6;
}

.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 12px var(--page-padding) calc(12px + var(--safe-bottom));
    background: var(--bg);
    border-top: 1px solid var(--border);
    z-index: 100;
}

.bottom-bar--auth-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.bottom-bar[hidden] {
    display: none !important;
}

.bottom-bar-divider {
    flex-shrink: 0;
    width: 1px;
    height: 14px;
    background: var(--border-strong);
}

.bottom-bar--auth-links .form-link--bottom {
    margin-top: 0;
    min-height: 44px;
}

.bottom-bar--auth-links .auth-forgot-link {
    border: none;
    background: none;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
}

.bottom-bar .btn {
    width: 100%;
}

.page-home .bottom-bar {
    display: flex;
    justify-content: center;
}

.page-home .bottom-bar .btn {
    max-width: 360px;
}

/* ── App bottom nav (logged-in) ── */
.app-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 130;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    width: min(100%, var(--content-max));
    transform: translateX(-50%);
    margin: 0;
    padding: 6px var(--page-padding) calc(6px + var(--safe-bottom));
    border-top: 1px solid var(--border);
    background: var(--bg);
    box-sizing: border-box;
}

body:not(.page-test-food) .test-food-bottom {
    display: none !important;
}

.app-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: var(--app-bottom-nav-height);
    padding: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    text-decoration: none;
    color: var(--text-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.app-bottom-nav-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #b0b0b0;
}

.app-bottom-nav-icon svg {
    display: block;
}

.app-bottom-nav-icon--avatar {
    width: 26px;
    height: 26px;
}

.app-bottom-nav-avatar {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.app-bottom-nav-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 999px;
    background: #ef4444;
    border: 1.5px solid var(--bg);
    font-size: 0.5625rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    pointer-events: none;
}

.app-bottom-nav-badge[hidden] {
    display: none !important;
}

.app-bottom-nav-label {
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--text-muted);
}

.app-bottom-nav-label--user {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-bottom-nav-item.is-active .app-bottom-nav-icon {
    color: #8f8f8f;
}

.app-bottom-nav-item.is-active .app-bottom-nav-label {
    font-weight: 800;
    color: var(--text);
}

.app-bottom-nav-item.is-disabled {
    opacity: 0.38;
    cursor: default;
    pointer-events: none;
}

.app-bottom-nav-item.is-disabled .app-bottom-nav-icon,
.app-bottom-nav-item.is-disabled .app-bottom-nav-label {
    color: #b0b0b0;
}

/* 통계: 하단 네비 상단 보더 — 헤더 하단(1em)과 대칭 */
.page-stats .app-bottom-nav {
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    overflow: hidden;
}

body.has-app-bottom-nav {
    --launch-city-blocked-bottom: calc(var(--app-bottom-nav-height) + 12px + var(--safe-bottom));
    background: #fff;
}

body.has-app-bottom-nav .app-main {
    padding-bottom: calc(28px + var(--app-bottom-nav-height) + 12px + var(--safe-bottom));
}

body.has-app-bottom-nav .app-main--home {
    min-height: calc(100dvh - var(--app-header-height-fallback) - var(--safe-top) - var(--app-bottom-nav-height) - 12px - var(--safe-bottom));
    padding-bottom: calc(24px + var(--app-bottom-nav-height) + 12px + var(--safe-bottom));
}

body.has-app-bottom-nav.has-bottom-bar .app-main--home {
    padding-bottom: calc(72px + var(--app-bottom-nav-height) + 12px + var(--safe-bottom));
}

body.has-app-bottom-nav.is-app-bottom-nav-keyboard-hidden .app-main,
body.has-app-bottom-nav.is-app-bottom-nav-keyboard-hidden .app-main--home,
body.has-app-bottom-nav.is-app-bottom-nav-keyboard-hidden.has-bottom-bar .app-main--home {
    padding-bottom: calc(12px + var(--safe-bottom));
    min-height: auto;
}

/* ── Context / location bar (CatchTable chip row) ── */
.context-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px var(--page-padding);
    background: var(--surface-gray);
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
}

.context-banner .icon {
    display: none;
}

.context-banner .info strong {
    display: block;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 2px;
}

.context-banner .info span {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.ct-meal-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--ct-orange);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    letter-spacing: -0.02em;
}

/* ── Sections ── */
.section {
    margin-bottom: 0;
    padding: 20px var(--page-padding);
    border-bottom: 8px solid var(--surface-gray);
}

.section:last-child {
    border-bottom: none;
}

.section-card {
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
}

.section-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 14px;
    letter-spacing: -0.03em;
}

/* ── Tags / chips ── */
.tag-input-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0;
    min-height: auto;
    background: transparent;
    border: none;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    background: var(--ct-orange-soft);
    color: var(--ct-orange);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    border: 1px solid var(--ct-orange-muted);
}

.tag-chip--placeholder {
    background: var(--surface);
    color: var(--text-muted);
    font-weight: 500;
    border: 1px dashed var(--border-strong);
}

.tag-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 10px;
}

/* ── Toggle (외식/집밥) ── */
.toggle-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.toggle-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.toggle-btn .icon {
    font-size: 1.125rem;
}

.toggle-btn.is-active {
    border-color: var(--ct-orange);
    background: var(--ct-orange-soft);
    color: var(--ct-orange);
    font-weight: 700;
}

/* ── Counter ── */
.counter-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 8px 0;
}

.counter-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    font-size: 1.25rem;
    line-height: 1;
    color: var(--text);
    cursor: pointer;
}

.counter-btn:active {
    background: var(--surface-gray);
}

.counter-value {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text);
}

.counter-unit {
    display: block;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: -2px;
}

/* ── Stats ── */
.page-stats {
    --stats-header-bar-pad-y: 10px;
    --stats-header-bar-height: calc(var(--app-header-inner-size, 32px) + (var(--stats-header-bar-pad-y) * 2));
    --stats-slot-bar-pad-y: 8px;
    --stats-slot-bar-height: calc(var(--app-header-inner-size, 32px) + (var(--stats-slot-bar-pad-y) * 2));
    /* 실측 meta-wrap ≈ 60px — JS 로드 전 깜빡임 최소화 */
    --stats-meta-bar-height: 60px;
    --stats-meta-wrap-gap: 6px;
    --stats-swipe-content-gap: 16px;
    /* 1행 + 2행(날짜·끼니) + meta 간격 + 3행 (safe-top·meta margin 포함 — JS 실측과 동일 기준) */
    --stats-header-stack-height: calc(
        var(--safe-top)
        + var(--stats-header-bar-height)
        + var(--stats-slot-bar-height)
        + var(--stats-meta-wrap-gap)
        + var(--stats-meta-bar-height)
    );
}

.page-stats .app-header--stats {
    display: block;
    height: auto;
    /* 콘텐츠 높이에 맞춤 — min-height 로 meta 아래 빈 영역 생기지 않게 */
    min-height: 0;
    padding: 0;
    background: var(--bg);
    border-bottom: none;
    border-radius: 0 0 1em 1em;
    z-index: 20;
}

.page-stats .app-header--stats .stats-header-stack {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: var(--safe-top);
    background: var(--bg);
    box-sizing: border-box;
    border-radius: 0 0 1em 1em;
    overflow: hidden;
}

.page-stats .app-header--stats .stats-header-bar {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: var(--stats-header-bar-height);
    width: 100%;
    /* 상단바 안 위·아래 여백 */
    padding: var(--stats-header-bar-pad-y) var(--page-padding, 16px);
    box-sizing: border-box;
    flex-shrink: 0;
}

.page-stats .stats-slot-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--stats-slot-bar-height);
    padding: var(--stats-slot-bar-pad-y) var(--page-padding, 16px);
    box-sizing: border-box;
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.page-stats .stats-header-start {
    grid-column: 1;
    justify-self: start;
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.page-stats .stats-header-center {
    grid-column: 2;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: min(56vw, 220px);
}

.page-stats .app-header--stats .stats-header-center .header-title,
.page-stats .app-header--stats .stats-header-start .header-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
}

.page-stats .stats-feedback-pill,
.page-stats .stats-beta-feedback-pill,
.app-feedback-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    height: 22px;
    margin: 0;
    padding: 0 8px;
    border: 1px solid #f0a04a;
    border-radius: var(--radius-pill);
    background: #f59e0b;
    font-family: inherit;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

.page-stats .stats-feedback-pill:active,
.page-stats .stats-beta-feedback-pill:active,
.app-feedback-pill:active {
    background: #d97706;
    color: #fff;
}

/* 2번째 상단바: 날짜 · 끼니 선택 — 가운데 정렬 */
.page-stats .stats-slot-bar .stats-slot-nav {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--text-muted);
    white-space: nowrap;
    pointer-events: auto;
    box-sizing: border-box;
}

.page-stats .stats-slot-bar .stats-slot-nav > * {
    pointer-events: auto;
}

/* 제출 정보(끼니별) 뷰: 7월 11일 토요일 + 아침 묶음 */
.page-stats .stats-slot-nav--submission-view {
    gap: 10px;
}

.page-stats .stats-slot-heading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.page-stats .stats-slot-current {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ct-brand);
    white-space: nowrap;
}

.page-stats .stats-slot-choices {
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
}

.page-stats .stats-slot-date--long {
    margin-right: 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text);
}

.page-stats .stats-header-end {
    grid-column: 3;
    justify-self: end;
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
}

.stats-display-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 1px;
    border-radius: var(--radius-pill);
    background: var(--surface-2, rgba(0, 0, 0, 0.05));
    border: 1px solid var(--border);
}

.stats-display-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 4px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.stats-display-toggle-btn:hover {
    color: var(--text);
}

.stats-display-toggle-btn.is-active {
    background: var(--ct-brand);
    color: #fff;
    font-weight: 700;
}

.stats-display-toggle-label {
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.stats-display-toggle-btn[data-eat-stats-display="pct"] .stats-display-toggle-label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0;
}

/* 숫자 모드 기본 — % 모드는 body.stats-display-pct 일 때만 */
.stats-metric-num {
    display: inline;
}

.stats-metric-pct {
    display: none !important;
}

body.stats-display-pct .stats-metric-num {
    display: none !important;
}

body.stats-display-pct .stats-metric-pct {
    display: inline !important;
}

body.stats-display-num .stats-metric-num {
    display: inline !important;
}

body.stats-display-num .stats-metric-pct {
    display: none !important;
}

.stats-metric {
    font: inherit;
    font-weight: inherit;
    color: inherit;
}

.rank-count .stats-metric {
    display: inline;
    font-weight: inherit;
}

.rank-count .stats-metric-num,
.rank-count .stats-metric-pct {
    font-weight: inherit;
}

.page-stats .app-header--back,
.page-profile .app-header--back,
.page-settings .app-header--back {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 0;
}

.page-profile .app-header--back {
    grid-template-columns: auto 1fr auto;
}

.page-stats .app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    width: 100%;
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
    background: var(--bg);
}

.page-stats .app-header--back {
    grid-template-columns: auto 1fr auto;
}

.page-stats .app-header--back .stats-header-start {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.page-stats .stats-header-start .eat-region-globe-btn {
    margin: 0;
    flex-shrink: 0;
}

.page-stats .app-header--back .back-link,
.page-profile .app-header--back .back-link,
.page-settings .app-header--back .back-link {
    grid-column: 1;
    justify-self: start;
    margin: 0;
}

.page-stats .app-header--back .back-link--context,
.page-profile .app-header--back .back-link--context,
.page-settings .app-header--back .back-link--context {
    min-width: var(--app-header-inner-size);
    min-height: var(--app-header-inner-size);
    padding: 6px 8px 6px 4px;
}

.page-stats .app-header--back .back-link--pill {
    margin: 0;
    min-width: 0;
    min-height: 0;
    height: 28px;
    padding: 5px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-secondary);
}

.page-stats .app-header--back .back-link--pill:active {
    background: var(--surface-gray);
    color: var(--text);
}

.page-settings .app-header--back {
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

.page-settings .settings-header-center {
    position: static;
    grid-column: 2;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    max-width: calc(100vw - 160px);
}

.page-settings .settings-header-center .header-title {
    text-align: center;
    min-width: 0;
    line-height: 1;
    font-size: 0.9375rem;
}

.page-profile .app-header--back .header-title {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    grid-column: 2;
    justify-self: center;
    width: auto;
    max-width: calc(100vw - 160px);
    text-align: center;
    pointer-events: none;
    z-index: auto;
}

.page-stats .stats-header-center {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    grid-column: 2;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    max-width: calc(100vw - 160px);
    z-index: auto;
}

.page-stats .stats-header-center .header-title {
    text-align: center;
    min-width: 0;
}

.page-stats .app-header--back .app-header-actions,
.page-profile .app-header--back .app-header-actions,
.page-settings .app-header--back .app-header-actions {
    grid-column: 3;
    justify-self: end;
}

.page-stats .app-header--with-user .app-header-actions,
.page-profile .app-header--with-user .app-header-actions,
.page-settings .app-header--with-user .app-header-actions {
    position: static;
    top: auto;
    right: auto;
}

.page-stats .app-shell {
    background: #fff;
    box-shadow: none;
}

.page-stats .app-main {
    /* 1행 헤더 + 2행 meta 고정바 (stack 실측에 safe-top 포함) */
    padding-top: var(--stats-header-stack-height);
    background: #fff;
    border: none;
    box-shadow: none;
}

.page-stats .app-main.app-main--stats-swipe {
    padding-top: var(--stats-header-stack-height);
    padding-left: 0;
    padding-right: 0;
    /* 모바일: 하단 네비 위까지 (eat_stats_swipe.css 에서 height 고정)
       데스크탑: 문서 스크롤용 여유 */
    padding-bottom: calc(
        var(--app-bottom-nav-height, 56px)
        + 12px
        + var(--safe-bottom, 0px)
        + 56px
    );
    background: #fff;
    height: auto;
    overflow: visible;
    max-width: none;
    width: 100%;
}

@media (max-width: 1023px) {
    .page-stats .app-main.app-main--stats-swipe {
        /* 닷 페이저는 fixed 오버레이 — 네비 높이만 확보 */
        padding-bottom: calc(
            var(--app-bottom-nav-height, 56px)
            + 12px
            + var(--safe-bottom, 0px)
        );
    }
}

@media (min-width: 1024px) {
    .page-stats .admin-sidebar-wrap,
    .page-stats .app-shell {
        max-width: none;
        width: 100%;
    }
    .page-stats .app-header--stats {
        max-width: none;
        width: 100%;
    }
    .page-stats .app-main.app-main--stats-swipe {
        height: auto;
        max-height: none;
        overflow: visible;
        padding-bottom: calc(
            var(--app-bottom-nav-height, 56px)
            + 12px
            + var(--safe-bottom, 0px)
            + 56px
        );
    }
}

/* 3번째 상단바: 제출/인원/장소/분류 — 헤더에 붙어 스와이프해도 고정 */
.page-stats .app-header--stats .stats-meta-wrap,
.page-stats .app-header--stats .stats-meta-wrap--fixed {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    width: 100%;
    margin-top: var(--stats-meta-wrap-gap, 6px);
    background: #fff;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.page-stats .app-header--stats .stats-meta-item {
    padding: 12px 6px;
}

.page-stats .app-header--stats .stats-meta-item strong,
.page-stats .app-header--stats .stats-meta-item .stats-metric {
    font-size: 1.125rem;
}

/* 끼니 탭:
   - 데이터 있음 → 초록 글씨 (언더바 없음)
   - 데이터 없음 → 회색
   - 선택(active) → 진한 초록 필 + 흰 글씨
   - 지금 시간대(is-current, 미선택) → 연한 초록 필 */
.stats-slot-date,
.stats-slot-link {
    color: var(--text-muted);
    font-weight: 500;
}

.stats-slot-date {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 0;
    margin-right: 6px;
    border: none;
    background: transparent;
    font: inherit;
    line-height: 1.2;
    white-space: nowrap;
}

.stats-slot-date--link {
    text-decoration: none;
    cursor: pointer;
    color: var(--text-muted);
}

.stats-slot-date--link:hover {
    color: var(--text-secondary, #666);
}

.stats-slot-date--link.has-data:hover {
    color: var(--ct-brand-hover, var(--ct-brand));
}

.stats-slot-date.has-data {
    color: var(--ct-brand);
}

.stats-slot-date.is-active {
    color: var(--ct-brand);
    font-weight: 700;
    cursor: default;
}

.stats-slot-date.is-active:not(.has-data) {
    color: var(--text-secondary, #666);
}

.stats-slot-date.is-disabled {
    color: var(--text-muted);
    opacity: 1;
    cursor: default;
    pointer-events: none;
}

/* 그린 언더바 제거 */
.stats-slot-date::after,
.stats-slot-date.has-data:not(.is-active)::after,
.stats-slot-date.is-active::after,
.stats-slot-link::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.stats-slot-link {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 4px 5px;
    border-radius: var(--radius-pill);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.2;
}

/* 데이터 있는 비선택 끼니: 초록 글씨만 */
.stats-slot-link.has-data:not(.is-active):not(.is-current) {
    color: var(--ct-brand);
    font-weight: 600;
    background: transparent;
}

.stats-slot-link.has-data:not(.is-active):not(.is-current):hover {
    color: var(--ct-brand-hover, var(--ct-brand));
}

/* 선택 중인 끼니 — 진한 초록 필 (원래 active) */
.page-stats .stats-slot-nav .stats-slot-link.is-active,
.stats-slot-link.is-active {
    background: var(--ct-brand) !important;
    color: #fff !important;
    font-weight: 700;
    border-radius: var(--radius-pill);
    padding: 4px 7px;
    cursor: default;
}

/* 지금 시간대 끼니(다른 끼니 보는 중) — 연한 초록 필 */
.page-stats .stats-slot-nav .stats-slot-link.is-current:not(.is-active),
.stats-slot-link.is-current:not(.is-active) {
    background: var(--ct-brand-soft) !important;
    color: var(--ct-brand) !important;
    font-weight: 700;
    border-radius: var(--radius-pill);
    padding: 4px 7px;
}

/* 데이터 없는 끼니: 회색 */
.stats-slot-link.is-disabled,
.stats-slot-link:not(.has-data):not(.is-active) {
    color: var(--text-muted);
    background: transparent;
    opacity: 1;
    cursor: default;
    pointer-events: none;
}

.stats-slot-link.is-disabled {
    pointer-events: none;
}

/* 선택됐지만 데이터 없음: 회색 필 대신 회색 굵은 글씨 */
.stats-slot-link.is-active:not(.has-data) {
    background: var(--surface-2, rgba(0, 0, 0, 0.06)) !important;
    color: var(--text-secondary, #666) !important;
}

.stats-meta-wrap {
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
}

.stats-meta {
    display: flex;
    gap: 0;
    margin-bottom: 0;
}

.stats-meta.is-hidden {
    display: none;
}

.stats-meta-item {
    flex: 1;
    padding: 18px 8px;
    background: var(--surface);
    text-align: center;
    border: none;
    border-right: 1px solid var(--border);
    box-shadow: none;
    border-radius: 0;
}

.stats-meta-item:last-child {
    border-right: none;
}

.stats-meta-item strong,
.stats-meta-item .stats-metric {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.03em;
    margin-bottom: 0;
    line-height: 1.05;
}

.stats-meta-item .stats-metric-num,
.stats-meta-item .stats-metric-pct {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

.stats-meta-item > span:not(.stats-meta-chevron):not(.stats-meta-plus):not(.stats-metric):not(.stats-metric-num):not(.stats-metric-pct) {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.1;
    margin-top: 3px;
}

.stats-meta-item--has-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
}

.stats-meta-inner {
    position: relative;
    display: inline-block;
    text-align: center;
}

.stats-meta-inner > .stats-meta-chevron {
    position: absolute;
    left: 100%;
    top: 50%;
    margin: 0 0 0 16px;
    padding: 0;
    font-size: 0;
    line-height: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c8c8c8;
    pointer-events: none;
}

.stats-meta-item--has-plus {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stats-meta-item--expandable {
    cursor: pointer;
}

.stats-meta-item--has-plus .stats-meta-inner {
    position: static;
    display: inline-block;
    text-align: center;
}

.stats-meta-item--has-plus .stats-meta-plus {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 0;
    font-size: 0;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c8c8c8;
    pointer-events: none;
}

.stats-meta-item--has-plus .stats-meta-plus--btn {
    border: none;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
}

.stats-meta--detail .stats-meta-item {
    padding: 18px 4px;
}

.stats-meta-close {
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-right: 1px solid var(--border);
    background: var(--surface);
    color: #c8c8c8;
    cursor: pointer;
}

.page-stats .section {
    border-bottom: none;
}

.page-stats .section-title {
    padding-top: 0;
    margin-bottom: 0;
}

.rank-section-title {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.rank-section-slot {
    font-weight: 700;
    color: var(--ct-brand);
    letter-spacing: -0.02em;
}

.rank-section-title-text {
    font-weight: inherit;
    color: inherit;
}

.rank-section-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rank-section-date {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #999;
    line-height: 1.2;
}

.rank-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.rank-section-menu-wrap {
    position: relative;
    flex-shrink: 0;
}

.rank-section-popover {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 20;
    min-width: 132px;
    padding: 6px;
    border: 1px solid var(--border-soft, #ececec);
    border-radius: var(--radius-sm, 10px);
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.rank-section-popover.is-hidden {
    display: none;
}

.rank-section-popover-item {
    display: block;
    padding: 10px 12px;
    border-radius: var(--radius-xs, 8px);
    color: var(--text);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
}

.rank-section-popover-item:active {
    background: var(--surface-gray, #f5f5f5);
}

.rank-section-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: -6px -8px -6px 0;
    padding: 0;
    border: none;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.rank-section-menu:active {
    background: var(--surface-gray);
}

.rank-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.rank-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 0;
    background: transparent;
    border-bottom: 1px solid var(--border);
}

.rank-item:last-child {
    border-bottom: none;
}

.rank-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 800;
    border-radius: 6px;
    background: #f3f3f3;
    color: #999;
}

.rank-item--first .rank-num {
    background: #e6f4ee;
    color: #108558;
}

.rank-item--second .rank-num {
    background: #f0f0f0;
    color: #555;
}

.rank-item--third .rank-num {
    background: #fef3e2;
    color: #96641e;
}

.rank-main {
    flex: 1;
    min-width: 0;
}

.rank-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.rank-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.rank-name {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: -0.02em;
    color: var(--text);
}

.rank-item--first .rank-name {
    color: #108558;
}

.rank-item--second .rank-name {
    color: var(--text);
}

.rank-item--third .rank-name {
    color: #96641e;
}

.rank-item--rest .rank-name {
    color: #666;
}

.rank-avatars,
.rank-photos {
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex-shrink: 1;
    min-width: 0;
}

.rank-photos {
    gap: 2px;
}

.rank-avatars + .rank-photos,
button.rank-avatars + .rank-photos,
button.rank-avatars + button.rank-photos,
.rank-avatars + button.rank-photos {
    margin-left: 10px;
}

.rank-avatars .rank-avatar--img {
    margin-left: -5px;
}

.rank-avatars .rank-avatar--img:first-child {
    margin-left: 0;
}

.rank-avatar--img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: hidden;
    background: #f0f0f0;
    box-shadow: 0 0 0 1.5px #fff;
    position: relative;
    z-index: 1;
}

.rank-avatars .rank-avatar--img:nth-child(2) { z-index: 2; }
.rank-avatars .rank-avatar--img:nth-child(3) { z-index: 3; }
.rank-avatars .rank-avatar--img:nth-child(4) { z-index: 4; }
.rank-avatars .rank-avatar--img:nth-child(5) { z-index: 5; }

.rank-avatar--img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rank-item--rest .rank-avatar--img {
    box-shadow: 0 0 0 1.5px #fff;
}

.rank-avatar-extra {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #3aa89a;
    margin-left: 4px;
    flex-shrink: 0;
}

button.rank-avatars {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

button.rank-avatars:active {
    opacity: 0.72;
}

button.rank-photos {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

button.rank-photos:active {
    opacity: 0.72;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.is-stats-members-open,
body.is-stats-variations-open,
body.is-stats-photos-open,
body.is-stats-photos-viewer-open {
    overflow: hidden;
}

body.is-stats-members-open .page-stats .admin-sidebar-wrap .app-header,
body.is-stats-variations-open .page-stats .admin-sidebar-wrap .app-header,
body.is-stats-photos-open .page-stats .admin-sidebar-wrap .app-header,
body.is-stats-photos-viewer-open .page-stats .admin-sidebar-wrap .app-header,
body.is-stats-members-open .page-stats .admin-sidebar-wrap [data-eat-stats-slot-bar],
body.is-stats-variations-open .page-stats .admin-sidebar-wrap [data-eat-stats-slot-bar],
body.is-stats-photos-open .page-stats .admin-sidebar-wrap [data-eat-stats-slot-bar],
body.is-stats-photos-viewer-open .page-stats .admin-sidebar-wrap [data-eat-stats-slot-bar] {
    visibility: hidden;
    pointer-events: none;
}

.stats-members-screen {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
    z-index: 210;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.stats-members-screen[hidden] {
    display: none !important;
}

.stats-members-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(12px + var(--safe-top)) 14px 14px;
    background: #fff;
    border-bottom: 1px solid #ececec;
}

.stats-members-toolbar-main {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}

.stats-members-meal {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.03em;
    line-height: 1.1;
    white-space: nowrap;
}

.stats-members-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
}

.stats-members-close svg {
    width: 18px;
    height: 18px;
}

.stats-members-count {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
    line-height: 1.1;
}

.stats-members-search {
    display: block;
    min-width: 0;
}

.stats-members-search-input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    background: #fafafa;
    font-family: inherit;
    font-size: 0.8125rem;
    color: var(--text);
    outline: none;
}

.stats-members-search-input:focus {
    border-color: var(--ct-brand-muted);
    background: #fff;
}

.stats-members-view-toggle {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border-radius: 10px;
    background: #efefef;
    gap: 2px;
}

.stats-members-view-btn {
    min-width: 44px;
    height: 30px;
    padding: 0 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
}

.stats-members-view-btn.is-active {
    background: #fff;
    color: var(--text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.stats-members-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px;
}

.stats-members-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 3px;
}

.stats-members-grid.is-grid-view {
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
}

.stats-members-grid.is-list-view {
    grid-template-columns: 1fr;
}

.stats-member-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 10px 14px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.stats-members-grid.is-list-view .stats-member-card {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
}

.stats-member-avatar {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: visible;
    background: linear-gradient(145deg, #dbeafe, #bfdbfe);
    flex-shrink: 0;
}

.stats-member-rank {
    position: absolute;
    top: -2px;
    left: -2px;
    z-index: 1;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.88);
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    letter-spacing: -0.02em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

.stats-members-grid.is-list-view .stats-member-avatar {
    width: 40px;
    height: 40px;
}

.stats-member-avatar img,
.stats-member-avatar-fallback {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

.stats-member-avatar img {
    object-fit: cover;
}

.stats-member-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 800;
    color: #fff;
}

.stats-member-name {
    font-size: 0.6875rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
    text-align: center;
    word-break: break-all;
    line-height: 1.2;
    max-width: 100%;
}

.stats-members-grid.is-list-view .stats-member-name {
    text-align: left;
}

.stats-members-grid.is-list-view .stats-member-card > :not(.stats-member-avatar) {
    margin-right: auto;
}

.stats-members-empty {
    margin: 24px 0 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.rank-name--expandable {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}

.rank-item--has-variations {
    align-items: flex-start;
}

.rank-name--expandable:hover,
.rank-name--expandable:focus-visible {
    opacity: 0.82;
}

.rank-item--expanded {
    border-bottom: 2px solid #108558;
    padding-bottom: 16px;
}

.rank-item--expanded .rank-count,
.rank-item--expanded .rank-count strong,
.rank-item--expanded .rank-count .stats-metric {
    color: #108558;
}

.rank-variations-inline[hidden] {
    display: none !important;
}

.rank-variations-inline {
    margin-top: 12px;
}

.rank-variations-grid.meal-tag-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    --meal-tag-gap: 8px;
}

.rank-variations-grid.meal-tag-grid .tag-row {
    display: flex;
    width: 100%;
    gap: var(--meal-tag-gap, 8px);
    flex-wrap: nowrap;
    align-items: stretch;
}

.rank-variations-grid.meal-tag-grid .tag-row > .rank-variation-tag {
    flex: 0 0 var(--meal-tag-unit-px, var(--meal-row-unit, calc((100% - (var(--row-cols, 3) - 1) * var(--meal-tag-gap, 8px)) / var(--row-cols, 3))));
    min-width: 0;
    width: var(--meal-tag-unit-px, var(--meal-row-unit, calc((100% - (var(--row-cols, 3) - 1) * var(--meal-tag-gap, 8px)) / var(--row-cols, 3))));
    max-width: var(--meal-tag-unit-px, var(--meal-row-unit, calc((100% - (var(--row-cols, 3) - 1) * var(--meal-tag-gap, 8px)) / var(--row-cols, 3))));
    box-sizing: border-box;
    justify-content: space-between;
    gap: 6px;
    padding: 12px 10px;
    font-size: 0.9375rem;
    min-height: 46px;
    cursor: default;
    pointer-events: none;
}

.rank-variations-grid.meal-tag-grid .rank-variation-tag .tag-text {
    flex: 1;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rank-variations-grid.meal-tag-grid .rank-variation-count {
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.2;
    opacity: 0.72;
}

.stats-variations-screen {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
    z-index: 210;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.stats-variations-screen[hidden] {
    display: none !important;
}

.stats-variations-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(12px + var(--safe-top)) 14px 14px;
    background: #fff;
    border-bottom: 1px solid #ececec;
}

.stats-variations-toolbar-main {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}

.stats-variations-meal {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.03em;
    line-height: 1.1;
    white-space: nowrap;
}

.stats-variations-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
}

.stats-variations-close svg {
    width: 18px;
    height: 18px;
}

.stats-variations-count {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
    line-height: 1.1;
}

.stats-variations-body {
    flex: 1;
    overflow: auto;
    padding: 8px 14px calc(16px + var(--safe-bottom));
}

.stats-variations-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.stats-variation-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.stats-variation-item:last-child {
    border-bottom: none;
}

.stats-variation-num {
    flex-shrink: 0;
    width: 20px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-muted);
    line-height: 1.4;
    padding-top: 2px;
}

.stats-variation-main {
    flex: 1;
    min-width: 0;
}

.stats-variation-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.stats-variation-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.stats-variation-count {
    flex-shrink: 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.stats-variation-count strong {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--text);
}

.stats-variation-bar-wrap {
    margin-top: 8px;
    height: 6px;
    border-radius: 999px;
    background: #f0f0f0;
    overflow: hidden;
}

.stats-variation-bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffb347 0%, #ff7a45 100%);
}

.stats-photos-screen {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
    z-index: 210;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.stats-photos-screen[hidden] {
    display: none !important;
}

.stats-photos-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(12px + var(--safe-top)) 14px 14px;
    background: #fff;
    border-bottom: 1px solid #ececec;
}

.stats-photos-toolbar-main {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}

.stats-photos-meal {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.03em;
    line-height: 1.1;
    white-space: nowrap;
}

.stats-photos-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
}

.stats-photos-close svg {
    width: 18px;
    height: 18px;
}

.stats-photos-count {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
    line-height: 1.1;
}

.stats-photos-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
}

.stats-photos-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}

.stats-photo-card {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 0;
    background: #e8e8e8;
}

.stats-photo-card-btn {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.stats-photo-card-btn:active {
    opacity: 0.88;
}

.stats-photo-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.is-stats-photos-viewer-open {
    overflow: hidden;
}

.stats-photos-viewer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
    z-index: 220;
    display: flex;
    flex-direction: column;
    background: #000;
    color: #fff;
}

.stats-photos-viewer[hidden] {
    display: none !important;
}

.stats-photos-viewer-nav {
    position: absolute;
    top: calc(10px + var(--safe-top));
    left: 12px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.stats-photos-viewer-back-icon {
    display: block;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.stats-photos-viewer-stats-link {
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-height: 40px;
    padding: 0 8px 0 0;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.stats-photos-viewer-stats-link:active {
    opacity: 0.78;
}

.stats-photos-viewer-close {
    position: absolute;
    top: calc(10px + var(--safe-top));
    right: 12px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.stats-photos-viewer-close svg {
    width: 18px;
    height: 18px;
}

.stats-photos-viewer-stage {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    touch-action: none;
    user-select: none;
}

.stats-photos-viewer-peek {
    position: relative;
    display: block;
    width: 100%;
    height: 13vh;
    min-height: 72px;
    max-height: 110px;
    margin: 0;
    padding: 0;
    border: none;
    overflow: hidden;
    flex-shrink: 0;
    align-self: stretch;
    background: #111;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.stats-photos-viewer-peek[hidden] {
    display: none !important;
}

.stats-photos-viewer-peek img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.45);
    pointer-events: none;
}

.stats-photos-viewer-peek--prev img {
    object-position: center bottom;
}

.stats-photos-viewer-peek--next img {
    object-position: center top;
}

.stats-photos-viewer-chevron {
    position: absolute;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.92);
    pointer-events: none;
}

.stats-photos-viewer-peek--prev .stats-photos-viewer-chevron {
    top: calc(30px + var(--safe-top));
    transform: translate(-50%, -50%);
}

.stats-photos-viewer-peek--next .stats-photos-viewer-chevron {
    top: auto;
    bottom: 14px;
    transform: translateX(-50%);
}

.stats-photos-viewer-current {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    background: #000;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/*
 * 폴백(JS 전): 스테이지를 꽉 채움 — letterbox 없음
 * 실제 크기는 layoutViewerCurrentImage() 가 픽셀로 덮어씀
 */
.stats-photos-viewer-current img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    object-fit: cover !important;
    object-position: center center;
    pointer-events: none;
    box-sizing: border-box;
}

.stats-photos-viewer-current img.is-portrait,
.stats-photos-viewer-current img.is-landscape {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.stats-photos-viewer-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28px;
    padding: 0 20px;
    text-align: center;
    pointer-events: none;
}

.stats-photos-viewer-meal {
    margin: 0 0 6px;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.stats-photos-viewer-index {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.stats-photos-viewer-toast {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 6;
    margin: 0;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72);
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.stats-photos-viewer-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.stats-photos-viewer-toast[hidden] {
    display: none !important;
}

.rank-photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: #f5ebe0;
    color: #c4a574;
    flex-shrink: 0;
    overflow: hidden;
}

.rank-photo--img {
    background: #f0f0f0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.rank-photo--img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rank-bar-wrap {
    height: 6px;
    background: #f0f0f0;
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.rank-bar {
    height: 100%;
    border-radius: var(--radius-pill);
    background: #ccc;
}

.rank-item--first .rank-bar {
    background: #108558;
}

.rank-item--second .rank-bar {
    background: #888;
}

.rank-item--third .rank-bar {
    background: #c9924a;
}

.rank-item--rest .rank-bar {
    background: #ddd;
}

/* ── Personal stats (profile inline) ── */
.page-profile .profile-stats-view {
    padding: 0 var(--page-padding) 28px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.page-profile .profile-stats-view[hidden] {
    display: none !important;
}

.page-profile .profile-stats-view .personal-stats-summary {
    margin-top: 0;
}

.personal-stats-period-head {
    position: relative;
    display: block;
    margin: 0 calc(-1 * var(--page-padding));
    padding: 0;
}

.personal-stats-month-strip {
    width: 100%;
    margin: 0;
    padding: 0 0 4px;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.personal-stats-month-strip.is-content-centered {
    text-align: center;
}

.personal-stats-month-strip.is-content-centered .personal-stats-month-strip-track {
    padding-left: 0;
    padding-right: 0;
}

.personal-stats-month-strip::-webkit-scrollbar {
    display: none;
}

.personal-stats-month-strip-track {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-width: min-content;
    padding: 0 var(--page-padding);
}

.personal-stats-month-sentinel {
    flex: 0 0 20px;
    width: 20px;
    min-width: 20px;
    height: 1px;
    pointer-events: none;
}

.personal-stats-section-tabs {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px var(--page-padding) 12px;
    box-sizing: border-box;
}

.page-profile .personal-stats-section-tabs .stats-display-toggle {
    position: absolute;
    right: var(--page-padding);
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;
    pointer-events: auto;
}

.page-profile .personal-stats-section-tabs .stats-display-toggle[hidden] {
    display: none !important;
}

.personal-stats-section-tabs-inner {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border-radius: var(--radius-pill);
    background: var(--surface-gray);
}

.personal-stats-section-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: -0.02em;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.personal-stats-section-tab.is-active {
    background: #fff;
    color: var(--ct-brand);
    box-shadow: var(--shadow-sm);
}

.personal-stats-section-tab:active {
    opacity: 0.82;
}

.personal-stats-section-panels {
    display: block;
}

.personal-stats-section-panel[hidden] {
    display: none !important;
}

.personal-stats-year-edge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 5px;
    height: 36px;
    padding: 0 8px;
    border: none;
    border-radius: 999px;
    background: transparent;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: -0.02em;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.personal-stats-year-edge--prev {
    padding-left: 4px;
}

.personal-stats-year-edge--next {
    padding-right: 4px;
}

.personal-stats-year-edge-year {
    line-height: 1;
}

.personal-stats-year-edge-icon {
    flex: 0 0 auto;
    display: block;
    color: var(--text-muted);
}

.personal-stats-year-edge:active {
    opacity: 0.72;
}

.personal-stats-month-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 44px;
    height: 36px;
    padding: 0 12px;
    border: none;
    border-radius: 999px;
    background: transparent;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: -0.02em;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.personal-stats-month-btn.is-active {
    font-weight: 800;
    color: var(--text);
    background: #fff;
}

.personal-stats-month-btn.is-no-data,
.personal-stats-month-btn:disabled {
    opacity: 0.34;
    color: var(--text-muted);
    cursor: default;
    pointer-events: none;
}

.personal-stats-month-btn.is-no-data.is-active,
.personal-stats-month-btn:disabled.is-active {
    font-weight: 500;
    background: transparent;
}

.personal-stats-month-btn:active {
    opacity: 0.78;
}

.personal-stats-panels {
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: relative;
    min-height: 120px;
}

.personal-stats-panels.is-loading-month::after {
    content: "통계 불러오는 중…";
    position: absolute;
    left: 50%;
    top: 12px;
    transform: translateX(-50%);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted, #6b7568);
    pointer-events: none;
    z-index: 2;
}

.personal-stats-panel[hidden] {
    display: none !important;
}

.personal-stats-panel:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.personal-stats-summary-headline {
    margin: 0 0 14px;
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
}

.personal-stats-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (min-width: 640px) {
    .page-profile .personal-stats-summary-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.personal-stats-summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    padding: 20px 16px 18px;
    background: #f4f4f5;
    border: none;
    border-radius: 16px;
    text-align: center;
}

.personal-stats-summary-card.is-primary {
    background: #108558;
}

.personal-stats-summary-value {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.05;
    color: var(--text);
    letter-spacing: -0.03em;
}

.personal-stats-summary-card.is-primary .personal-stats-summary-value {
    color: #fff;
}

.personal-stats-summary-label {
    display: block;
    margin-top: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #888;
}

.personal-stats-summary-card.is-primary .personal-stats-summary-label {
    color: rgba(255, 255, 255, 0.88);
}

.personal-stats-summary-note {
    margin: 12px 0 0;
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-align: center;
}

.personal-stats-summary-desc {
    margin: 26px auto 0;
    max-width: 760px;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.55;
    color: var(--text-secondary);
    text-align: center;
    word-break: keep-all;
    overflow-wrap: break-word;
    line-break: strict;
}

.personal-stats-summary-quote {
    font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
    display: inline-block;
    font-size: 2.8em;
    font-weight: 700;
    line-height: 0;
    vertical-align: -0.22em;
}

.personal-stats-summary-quote--open {
    transform: translateX(-0.06em);
}

.personal-stats-summary-quote--close {
    transform: translateX(0.08em);
    vertical-align: -0.62em;
}

@media (max-width: 599px) {
    .page-profile .personal-stats-summary-desc {
        max-width: 100%;
        font-size: 1rem;
        line-height: 1.5;
        margin-left: auto;
        margin-right: auto;
    }
}

.personal-stats-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.personal-stats-title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}

.personal-stats-chart {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.personal-stats-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.personal-stats-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
}

.personal-stats-count {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

.personal-stats-count strong {
    font-weight: 800;
    color: var(--text);
}

.personal-stats-row-desc {
    margin: 6px 0 0;
    font-size: 0.71875rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text-muted);
    word-break: keep-all;
    overflow-wrap: break-word;
}

.personal-stats-chart--insight {
    gap: 16px;
}

.personal-stats-vertical-chart {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.personal-stats-vertical-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px 10px;
    border-radius: 8px;
    background: #f7f7f8;
    text-align: center;
}

.personal-stats-vertical-value {
    min-height: 42px;
}

.personal-stats-vertical-value strong,
.personal-stats-vertical-value span,
.personal-stats-vertical-label,
.personal-stats-vertical-desc {
    display: block;
}

.personal-stats-vertical-value strong {
    font-size: 1.25rem;
    font-weight: 850;
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.personal-stats-vertical-value span {
    margin-top: 5px;
    font-size: 0.6875rem;
    font-weight: 800;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.personal-stats-vertical-plot {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 96px;
    margin: 10px 0 9px;
    border-radius: 8px;
    background: transparent;
    overflow: hidden;
}

.personal-stats-vertical-bar {
    width: min(38px, 46%);
    min-height: 4px;
    border-radius: 8px 8px 0 0;
    background: #ddd;
    transition: height 0.35s ease;
}

.personal-stats-vertical-bar--first {
    background: #108558;
}

.personal-stats-vertical-bar--second {
    background: #888;
}

.personal-stats-vertical-bar--third {
    background: #c9924a;
}

.personal-stats-vertical-bar--fourth {
    background: #6a57a8;
}

.personal-stats-vertical-bar--fifth {
    background: #2c7873;
}

.personal-stats-vertical-bar--sixth {
    background: #b65f3a;
}

.personal-stats-vertical-label {
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text);
    word-break: keep-all;
    overflow-wrap: break-word;
}

.personal-stats-vertical-desc {
    margin: 5px 0 0;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-muted);
    word-break: keep-all;
    overflow-wrap: break-word;
}

.personal-stats-donut-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    min-width: 0;
}

/* 문구(라벨) — 도넛 위 */
.personal-stats-donut-labels {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.personal-stats-donut-labels-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.personal-stats-donut-stage {
    position: relative;
    width: min(100%, 292px);
    height: auto;
    aspect-ratio: 1;
    max-width: 292px;
    justify-self: center;
    flex-shrink: 0;
}

.personal-stats-donut {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.personal-stats-donut-hole {
    position: absolute;
    inset: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    border-radius: 50%;
    background: #fff;
    text-align: center;
}

.personal-stats-donut-hole strong,
.personal-stats-donut-hole span {
    display: block;
    max-width: 100%;
}

.personal-stats-donut-hole strong {
    font-size: 0.9375rem;
    font-weight: 850;
    line-height: 1.2;
    color: var(--text);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.personal-stats-donut-hole span {
    margin-top: 6px;
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.personal-stats-donut-callouts {
    position: absolute;
    inset: 0;
    z-index: 3;
    list-style: none;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.personal-stats-donut-callout {
    position: absolute;
    max-width: 112px;
    padding: 6px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    border: 2px solid transparent;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    color: var(--text);
    font-size: 0.625rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    word-break: keep-all;
    overflow-wrap: anywhere;
    transform: translate(-50%, -50%);
}

.personal-stats-donut-callout span,
.personal-stats-donut-callout strong {
    display: block;
}

.personal-stats-donut-callout strong {
    margin-top: 2px;
    color: #108558;
    font-size: 0.6875rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 600px) {
    .distribution-block--pattern .personal-stats-donut-wrap {
        gap: 0;
    }

    .distribution-block--pattern .personal-stats-donut-labels {
        display: none;
    }

    .distribution-block--pattern .personal-stats-donut-stage {
        width: min(100%, 340px);
        max-width: 340px;
    }

    .distribution-block--pattern .personal-stats-donut-hole {
        z-index: 1;
        inset: 22%;
    }

    .distribution-block--pattern .personal-stats-donut-hole strong {
        display: block;
        font-size: 0.9375rem;
        line-height: 1.2;
        white-space: nowrap;
    }

    .distribution-block--pattern .personal-stats-donut-callout {
        max-width: 88px;
        padding: 0;
        border: none !important;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: #fff;
        font-size: 0.75rem;
        font-weight: 900;
        line-height: 1.12;
        text-shadow:
            0 1px 3px rgba(102, 102, 102, 0.85),
            0 -1px 2px rgba(102, 102, 102, 0.7),
            1px 0 2px rgba(102, 102, 102, 0.7),
            -1px 0 2px rgba(102, 102, 102, 0.7);
    }

    .distribution-block--pattern .personal-stats-donut-callout strong {
        margin-top: 3px;
        color: inherit;
        font-size: 0.8125rem;
        font-weight: 950;
    }
}

.personal-stats-donut-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.personal-stats-donut-legend-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.personal-stats-donut-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    transform: translateY(-1px);
}

.personal-stats-donut-label {
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text);
    overflow-wrap: anywhere;
}

.personal-stats-donut-count {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.personal-stats-donut-count strong {
    color: var(--text);
    font-weight: 800;
}

/* 도넛 위 라벨 목록 안 수치 */
.personal-stats-donut-labels .personal-stats-donut-count strong {
    font-size: 0.8125rem;
    color: #108558;
}

.personal-stats-bar-wrap {
    height: 8px;
    background: #f0f0f0;
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.personal-stats-bar {
    height: 100%;
    min-width: 4px;
    border-radius: var(--radius-pill);
    background: #ddd;
    transition: width 0.35s ease;
}

.personal-stats-bar--first {
    background: #108558;
}

.personal-stats-bar--second {
    background: #888;
}

.personal-stats-bar--third {
    background: #c9924a;
}

.personal-stats-empty {
    margin: 0;
    padding: 12px 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.personal-stats-section--experimental {
    gap: 12px;
}

.personal-stats-insight-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 24px 0 16px;
    text-align: center;
}

.personal-stats-insight-head .personal-stats-title {
    font-size: 1.125rem;
    font-weight: 800;
}

.personal-stats-insight-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef7f2;
    color: #108558;
    font-size: 0.6875rem;
    font-weight: 800;
}

.personal-stats-insight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.personal-stats-insight-card,
.personal-stats-unlock-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.personal-stats-insight-card > .distribution-block:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.personal-stats-insight-card .meal-slots-card--embedded {
    margin: 0;
    border-radius: 14px;
}

.personal-stats-insight-card--wide {
    grid-column: 1 / -1;
}

.personal-stats-insight-card-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.personal-stats-insight-kicker {
    display: block;
    font-size: 0.6875rem;
    font-weight: 800;
    color: #108558;
}

.personal-stats-insight-main {
    display: block;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text);
    overflow-wrap: anywhere;
}

.personal-stats-insight-value {
    display: block;
    margin-top: 6px;
    font-size: 1.875rem;
    font-weight: 850;
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.personal-stats-insight-desc {
    margin: 8px 0 0;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-secondary);
    word-break: keep-all;
    overflow-wrap: break-word;
}

.personal-stats-top-menu-list,
.personal-stats-pattern-list,
.personal-stats-unlock-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.personal-stats-top-menu-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.personal-stats-top-menu-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.personal-stats-top-menu-name {
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text);
    overflow-wrap: anywhere;
}

.personal-stats-top-menu-count {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.personal-stats-pattern-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.personal-stats-pattern-item {
    min-width: 0;
    padding: 10px;
    border-radius: 8px;
    background: #f7f7f8;
}

.personal-stats-pattern-item strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--text);
    overflow-wrap: anywhere;
}

.personal-stats-pattern-item span {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text-secondary);
    word-break: keep-all;
    overflow-wrap: break-word;
}

.personal-stats-unlock-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    background: #fcfcfd;
}

.personal-stats-unlock-copy strong {
    display: block;
    margin-top: 6px;
    font-size: 1.125rem;
    font-weight: 850;
    line-height: 1.35;
    color: var(--text);
    word-break: keep-all;
    overflow-wrap: break-word;
}

.personal-stats-unlock-copy p {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.55;
    color: var(--text-secondary);
    word-break: keep-all;
    overflow-wrap: break-word;
}

.personal-stats-unlock-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.personal-stats-unlock-steps li {
    min-width: 0;
    padding: 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #ededed;
}

.personal-stats-unlock-steps strong,
.personal-stats-unlock-steps span {
    display: block;
}

.personal-stats-unlock-steps strong {
    font-size: 0.9375rem;
    font-weight: 850;
    color: #108558;
}

.personal-stats-unlock-steps span {
    margin-top: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    overflow-wrap: break-word;
}

@media (max-width: 599px) {
    .personal-stats-insight-grid,
    .personal-stats-pattern-list {
        grid-template-columns: 1fr;
    }

    .personal-stats-vertical-chart {
        gap: 8px;
    }

    .personal-stats-vertical-item {
        padding-left: 6px;
        padding-right: 6px;
    }

    .personal-stats-vertical-plot {
        height: 84px;
    }

    .personal-stats-vertical-value strong {
        font-size: 1.0625rem;
    }

    .personal-stats-donut-stage {
        width: min(100%, 240px);
        max-width: 240px;
        height: auto;
        aspect-ratio: 1;
    }

    .personal-stats-donut {
        width: 100%;
        height: 100%;
        margin: 0 auto;
    }

    .personal-stats-donut-hole {
        inset: 20%;
    }

    .distribution-block--pattern .personal-stats-donut-callouts {
        display: none;
    }

}

/* ── Meal slots card (끼니별) ── */
.personal-stats-section--slots {
    gap: 0;
}

.meal-slots-card {
    padding: 20px 18px 22px;
    background: #1c1c1e;
    border-radius: 22px;
}

.meal-slots-card-title {
    margin: 0 0 18px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.02em;
}

.meal-slots-chart {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.meal-slots-row {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.5rem;
    align-items: center;
    gap: 12px;
}

.meal-slots-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.01em;
}

.meal-slots-bar-wrap {
    height: 9px;
    background: #2c2c2e;
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.meal-slots-bar {
    height: 100%;
    min-width: 4px;
    border-radius: var(--radius-pill);
    background: #6b6b6b;
    transition: width 0.35s ease;
}

.meal-slots-bar--first {
    background: #34c759;
}

.meal-slots-bar--second {
    background: #8e8e93;
}

.meal-slots-bar--third {
    background: #d4a017;
}

.meal-slots-pct {
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Profile personal stats: 123 / % toggle (body.stats-display-*) */
.page-profile .personal-stats-count,
.page-profile .meal-slots-pct,
.page-profile .distribution-legend-label,
.page-profile .personal-stats-vertical-value {
    font-variant-numeric: tabular-nums;
}

.page-profile .personal-stats-vertical-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 2.4em;
}

.page-profile .personal-stats-vertical-value strong {
    font-size: inherit;
    font-weight: 800;
    line-height: 1.15;
}

.page-profile .personal-stats-vertical-sub {
    font-size: 0.72em;
    font-weight: 600;
    opacity: 0.72;
    line-height: 1.1;
}

/* ── Distribution card (장소별 · 인원별) ── */
.personal-stats-section--distribution {
    gap: 0;
}

.distribution-card {
    padding: 18px 16px 20px;
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.distribution-block + .distribution-block {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid #f0f0f0;
}

/* 장소별 · 인원별 · 종류별 — 모바일: 세로 스택 (기존) */
.personal-stats-breakdown-row {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.personal-stats-breakdown-row + .distribution-block,
.distribution-block + .personal-stats-breakdown-row {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid #f0f0f0;
}

/* 데스크톱: 식사 시간대 + 요일 패턴 1행 / 장소·인원·종류 1행 */
@media (min-width: 900px) {
    .page-profile .personal-stats-insight-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 20px;
        row-gap: 0;
        align-items: start;
    }

    /* 1행: 식사 시간대 | 요일 패턴 (모바일 DOM 순서는 유지, grid로만 재배치) */
    .page-profile .personal-stats-insight-card > .distribution-block--slots {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
        padding: 0;
        border: none;
        min-width: 0;
        display: flex;
        justify-content: center; /* 수평 가운데 */
        align-items: center; /* 행 안 수직 가운데 (요일 패턴 높이에 맞춤) */
        align-self: stretch;
    }

    .page-profile .personal-stats-insight-card > .distribution-block--pattern {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        padding: 0;
        border: none;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        align-self: stretch;
    }

    .page-profile .personal-stats-insight-card > .distribution-block--pattern > .distribution-block-title {
        width: 100%;
        margin-bottom: 12px;
        text-align: center;
    }

    /* 식사 시간대: 원래 다크 카드 UI 유지 + 영역 가운데 정렬 */
    .page-profile .personal-stats-insight-card .meal-slots-card--embedded {
        margin: 0 auto;
        width: 100%;
        max-width: 100%;
        border-radius: 22px;
        padding: 20px 18px 22px;
        background: #1c1c1e;
        box-shadow: none;
        box-sizing: border-box;
    }

    /* 2행: 장소별 / 인원별 / 종류별 */
    .page-profile .personal-stats-breakdown-row {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0 20px;
        align-items: start;
        margin-top: 22px;
        padding-top: 22px;
        border-top: 1px solid #f0f0f0;
    }

    /* 3행 이후: TOP 메뉴, 이번 달 특징 등 */
    .page-profile .personal-stats-insight-card > .distribution-block:not(.distribution-block--slots):not(.distribution-block--pattern) {
        grid-column: 1 / -1;
        margin-top: 22px;
        padding-top: 22px;
        border-top: 1px solid #f0f0f0;
    }

    .page-profile .personal-stats-breakdown-row > .distribution-block {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        min-width: 0;
    }

    .page-profile .personal-stats-breakdown-row > .distribution-block + .distribution-block {
        margin-top: 0;
        padding-top: 0;
        padding-left: 20px;
        border-top: none;
        border-left: 1px solid #f0f0f0;
    }

    .page-profile .personal-stats-breakdown-row .personal-stats-chart,
    .page-profile .personal-stats-breakdown-row .distribution-chart {
        min-width: 0;
    }

    .page-profile .personal-stats-breakdown-row .distribution-legend {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

.distribution-block-title {
    margin: 0 0 14px;
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
}

.distribution-chart {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.distribution-bar {
    display: flex;
    gap: 3px;
    height: 14px;
    align-items: stretch;
}

.distribution-bar-segment {
    flex: 1 1 0;
    min-width: 6px;
    border-radius: var(--radius-pill);
    background: #ddd;
}

.distribution-segment--first {
    background: #2d7d52;
}

.distribution-segment--second {
    background: #bdbdbd;
}

.distribution-segment--third {
    background: #c8a150;
}

.distribution-segment--default {
    background: #d4d4d4;
}

.distribution-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.distribution-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.distribution-legend-swatch {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.distribution-legend-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.rank-count {
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: #999;
    white-space: nowrap;
}

.rank-count strong,
.rank-count .stats-metric {
    display: inline;
    font-size: inherit;
    font-weight: 800;
    color: inherit;
}

.rank-item--first .rank-count {
    color: #108558;
}

.rank-item--second .rank-count {
    color: var(--text);
}

.rank-item--third .rank-count {
    color: #96641e;
}

body.page-home {
    --content-max: 800px;
    background: #fff;
}

.page-home .app-main {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.page-home #eat-app-content {
    flex: 0 0 auto;
    position: relative;
    overflow: visible;
    width: 100%;
}

.page-home .admin-portal,
.page-home .admin-sidebar-wrap {
    min-height: auto;
}

.page-home .admin-portal {
    overflow-x: hidden;
}

.page-home .admin-sidebar-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.page-home .app-header {
    border-bottom: none;
    padding-bottom: var(--app-header-padding-y);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
    z-index: 300;
    background: var(--bg);
    pointer-events: none;
}

.page-home .app-main {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.page-home .app-main--home {
    max-width: 800px;
    border: none;
    box-shadow: none;
    padding-top: calc(var(--app-header-height-fallback) + var(--safe-top));
}

.page-home .app-header-bar {
    position: relative;
    pointer-events: auto;
    grid-template-columns: auto 1fr auto;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

.page-home .home-header-start {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    pointer-events: auto;
    z-index: 3;
}

.page-home .home-header-region {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.page-home .home-header-region .context-inline-region {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.page-home .home-header-region .context-inline-text {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.page-home .home-header-region .eat-region-globe-btn {
    display: none;
}

.page-home .app-header--with-user .context-inline {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    grid-column: 1 / -1;
    justify-content: center;
    align-items: center;
    width: max-content;
    max-width: calc(100% - 180px);
    padding: 0;
    gap: 8px;
    pointer-events: none;
    z-index: 0;
}

.page-home .app-header--with-user .context-inline > * {
    pointer-events: auto;
}

.page-home .home-header-end {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 1;
    pointer-events: auto;
    margin-left: auto;
}

.page-home .home-header-guide {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.home-tag-style-select,
.admin-meal-tag-style-select {
    appearance: none;
    -webkit-appearance: none;
    max-width: 7.5rem;
    padding: 5px 22px 5px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238A8A85' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.home-tag-style-select:focus {
    outline: none;
    border-color: var(--ct-brand);
    box-shadow: 0 0 0 2px rgba(46, 125, 90, 0.15);
}

.page-home .home-header-guide[hidden] {
    display: none !important;
}

body.page-home:has(.home-accordion-wrap.is-submission-restore-pending:not(.is-restored)) .home-header-guide {
    display: none !important;
}

.page-admin .admin-meal-tag-style-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
    box-sizing: border-box;
}

.page-admin .admin-meal-tag-style-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.page-home .home-info-guide-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 0 0 6px;
    padding: 0 8px;
}

.page-home .home-info-guide-bar .home-info-guide-text {
    display: none;
}

.page-home .home-info-recall-hints {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin-top: 0;
    margin-bottom: 2px;
    width: 100%;
    min-height: 0;
}

.page-home .home-info-recall-slot {
    --home-recall-slot-height: 2.5rem;
    position: relative;
    display: block;
    width: 100%;
    height: var(--home-recall-slot-height);
    min-height: var(--home-recall-slot-height);
    max-height: var(--home-recall-slot-height);
    overflow: hidden;
}

.page-home .home-info-recall-slot [data-eat-home-recall-item] {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 12px;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.45;
    overflow: hidden;
    word-break: keep-all;
    line-break: strict;
    overflow-wrap: break-word;
    text-wrap: pretty;
}

.page-home .home-info-recall-slot [data-eat-home-recall-item]:not([hidden]) {
    display: flex;
}

.page-home .home-info-recall-slot .rec-plain-loose {
    padding-top: 0;
}

.page-home .home-info-recall-slot .rec-a,
.page-home .home-info-recall-slot .rec-b,
.page-home .home-info-recall-slot .rec-d,
.page-home .home-info-recall-slot .rec-plain {
    max-width: 100%;
    word-break: keep-all;
    line-break: strict;
    overflow-wrap: break-word;
    white-space: normal;
    text-wrap: pretty;
}

@media (max-width: 599px) {
    .page-home .home-info-recall-slot {
        --home-recall-slot-height: 4rem;
    }

    .page-home .home-info-recall-slot .rec-a,
    .page-home .home-info-recall-slot .rec-b,
    .page-home .home-info-recall-slot .rec-d,
    .page-home .home-info-recall-slot .rec-plain {
        display: block;
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.45;
    }
}

.page-home .home-info-recall-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 0;
    flex-shrink: 0;
}

.page-home .home-info-recall-slot .rec-style-1,
.page-home .home-info-recall-slot .rec-style-2,
.page-home .home-info-recall-slot .rec-style-3,
.page-home .home-info-recall-slot .rec-style-4,
.page-home .home-info-recall-slot .rec-style-5,
.page-home .home-info-recall-slot .rec-style-6,
.page-home .home-info-recall-slot .rec-style-7,
.page-home .home-info-recall-slot .rec-style-8,
.page-home .home-info-recall-slot .rec-style-9,
.page-home .home-info-recall-slot .rec-style-10,
.page-home .home-info-recall-slot .rec-style-11,
.page-home .home-info-recall-slot .rec-style-12,
.page-home .home-info-recall-slot .rec-style-13,
.page-home .home-info-recall-slot .rec-style-14,
.page-home .home-info-recall-slot .rec-style-15,
.page-home .home-info-recall-slot .rec-style-16,
.page-home .home-info-recall-slot .rec-style-17,
.page-home .home-info-recall-slot .rec-style-18,
.page-home .home-info-recall-slot .rec-style-19,
.page-home .home-info-recall-slot .rec-style-20,
.page-home .home-info-recall-slot .rec-style-21,
.page-home .home-info-recall-slot .rec-style-22,
.page-home .home-info-recall-slot .rec-style-23,
.page-home .home-info-recall-slot .rec-style-24,
.page-home .home-info-recall-slot .rec-style-25,
.page-home .home-info-recall-slot .rec-style-26 {
    max-width: 100%;
    word-break: keep-all;
    line-break: strict;
    overflow-wrap: break-word;
    white-space: normal;
    text-wrap: pretty;
}

.page-home .home-info-recall-slot .rec-style-4 { color: #5f5e5a; letter-spacing: -0.01em; }
.page-home .home-info-recall-slot .rec-style-5 { color: #3b6d11; font-weight: 600; }
.page-home .home-info-recall-slot .rec-style-6 { color: #eaf3de; background: #173404; padding: 4px 10px; border-radius: 6px; }
.page-home .home-info-recall-slot .rec-style-7 { color: #4a6741; }
.page-home .home-info-recall-slot .rec-style-8 { color: #5f5e5a; font-weight: 500; }
.page-home .home-info-recall-slot .rec-style-9 { color: #712b13; font-weight: 500; }
.page-home .home-info-recall-slot .rec-style-10 { color: #412402; font-weight: 600; transform: rotate(-1deg); }
.page-home .home-info-recall-slot .rec-style-11 { color: #3b6d11; font-size: 1.0625rem; font-weight: 700; }
.page-home .home-info-recall-slot .rec-style-12 { color: #3b6d11; font-style: italic; font-weight: 600; }
.page-home .home-info-recall-slot .rec-style-13 { color: #3b6d11; font-weight: 600; }
.page-home .home-info-recall-slot .rec-style-14,
.page-home .home-info-recall-slot .rec-style-15 { color: #173404; font-weight: 600; }
.page-home .home-info-recall-slot .rec-style-16 { color: #5f5e5a; font-weight: 500; }
.page-home .home-info-recall-slot .rec-style-17 { color: #4a6741; font-style: italic; }
.page-home .home-info-recall-slot .rec-style-18 { color: #3b6d11; font-weight: 600; }
.page-home .home-info-recall-slot .rec-style-19 { color: #639922; font-weight: 600; }
.page-home .home-info-recall-slot .rec-style-20 {
    color: #5f5e5a;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: 0.02em;
}
.page-home .home-info-recall-slot .rec-style-21 {
    background: linear-gradient(90deg, #3b6d11, #639922, #97c459);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
}
.page-home .home-info-recall-slot .rec-style-22 {
    color: #3b6d11;
    text-shadow: 0 0 10px rgba(99, 153, 34, 0.45);
    font-weight: 700;
}
.page-home .home-info-recall-slot .rec-style-23 { color: #3b6d11; font-weight: 700; }
.page-home .home-info-recall-slot .rec-style-24 { color: #173404; font-weight: 600; perspective: 300px; }
.page-home .home-info-recall-slot .rec-style-25 { color: #639922; font-weight: 700; }
.page-home .home-info-recall-slot .rec-style-26 { color: #3b6d11; font-weight: 600; letter-spacing: 0.03em; }

.page-home .home-info-recall-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #d3d1c7;
    cursor: pointer;
}

.page-home .home-info-recall-dot.is-active {
    background: #3b6d11;
}

.page-home .app-header--with-user .home-header-end .app-header-actions {
    position: static;
    top: auto;
    right: auto;
    min-width: 0;
}

.page-home .app-header-actions {
    position: relative;
    z-index: 1;
}

.home-guide-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
}

.home-guide-toggle__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: -0.02em;
}

.home-guide-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.home-guide-toggle-track {
    position: relative;
    display: block;
    width: 26px;
    height: 14px;
    border-radius: 999px;
    background: var(--border-strong);
    transition: background 0.2s ease;
}

.home-guide-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
}

.home-guide-toggle input:checked + .home-guide-toggle-track {
    background: var(--ct-brand);
}

.home-guide-toggle input:checked + .home-guide-toggle-track::after {
    transform: translateX(12px);
}

html[data-eat-home-guide="1"] .home-guide-toggle-track {
    background: var(--ct-brand);
}

html[data-eat-home-guide="1"] .home-guide-toggle-track::after {
    transform: translateX(12px);
}

.home-info-tabs-wrap {
    position: relative;
    z-index: 100;
    overflow: visible;
}

.page-home .home-info-tabs-wrap {
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
    background: var(--surface);
}

.page-home .home-info-tabs-body {
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
}

.home-info-tabs-body {
    overflow: visible;
}

.home-info-tab-balloon[hidden] {
    display: none !important;
}

body:not(.page-home) .home-info-tab-balloon {
    display: none !important;
}

body.page-home:has(.home-accordion-wrap.is-submission-restore-pending:not(.is-restored)) .home-info-tab-balloon {
    display: none !important;
}

/* body 직속 fixed — app-shell transform(유저 드로어)과 무관하게 viewport 기준.
   헤더 영역은 JS가 --home-guide-balloon-clip-top 으로 잘라 상단바 밑으로 사라지게 함. */
body.page-home .home-info-tab-balloon {
    position: fixed;
    top: 0;
    left: 0;
    bottom: auto;
    z-index: 250;
    margin-bottom: 0;
    max-width: calc(100vw - 16px);
    transform: translate(-50%, calc(-100% - 18px));
    pointer-events: none;
    clip-path: inset(var(--home-guide-balloon-clip-top, 0px) -24px -24px -24px);
    transition:
        left 0.14s cubic-bezier(0.2, 0, 0.2, 1),
        top 0.14s cubic-bezier(0.2, 0, 0.2, 1),
        transform 0.14s cubic-bezier(0.2, 0, 0.2, 1),
        opacity 0.12s ease-out,
        clip-path 0.12s ease-out;
    will-change: left, top, transform, opacity, clip-path;
}

body.is-user-sidebar-open.page-home .home-info-tab-balloon {
    z-index: 260;
}

body.eat-feedback-open .home-info-tab-balloon {
    display: none !important;
}

body.page-home .home-info-tab-balloon::after {
    left: var(--home-guide-balloon-tail-x, 50%);
    z-index: 1;
}

.home-info-tab-balloon {
    position: absolute;
    left: 0;
    bottom: 100%;
    z-index: 10;
    width: max-content;
    max-width: calc(100vw - 16px);
    margin-bottom: 6px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #f5d76e;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transform: translateX(-50%);
    pointer-events: none;
    box-sizing: border-box;
}

.home-info-tab-balloon::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #f5d76e;
    transform: translateX(-50%);
}

.home-info-tab-balloon__text {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #3a320f;
    line-height: 1.45;
    letter-spacing: -0.02em;
    text-align: center;
    white-space: nowrap;
    word-break: keep-all;
}

body.page-home .home-info-tab-balloon__text {
    white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
    body.page-home .home-info-tab-balloon {
        transition: none;
    }
}

.page-home .app-header .context-inline {
    gap: 10px;
}

.app-header--compact {
    padding-top: calc(var(--app-header-padding-y) + var(--safe-top));
    padding-bottom: var(--app-header-padding-y);
}

.context-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 var(--page-padding);
}

.context-inline-region {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.context-inline-text {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.eat-region-globe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--app-header-inner-size);
    height: var(--app-header-inner-size);
    margin: 0 0 0 4px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
}

.eat-region-globe-btn:active {
    background: var(--surface-gray);
    color: var(--text);
}

.eat-region-globe-icon {
    display: block;
    width: 24px;
    height: 24px;
}

.app-main--home {
    flex: 1 1 auto;
    width: 100%;
    min-height: calc(100dvh - var(--app-header-height-fallback) - var(--safe-top) - 24px - var(--safe-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: calc(var(--app-header-height-fallback) + var(--safe-top)) var(--page-padding) calc(24px + var(--safe-bottom));
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
}

.page-home .app-main--home::before,
.page-home .app-main--home::after {
    content: '';
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    pointer-events: none;
}

.page-home .app-main--home::before {
    flex-shrink: 2;
}

.page-home .app-main--home::after {
    flex-shrink: 1;
}

.page-home .app-main--home:has(.home-accordion-wrap.is-restored)::before,
.page-home .app-main--home:has(.home-accordion-wrap.is-restored)::after,
body.has-app-bottom-nav.is-app-bottom-nav-keyboard-hidden .page-home .app-main--home::before,
body.has-app-bottom-nav.is-app-bottom-nav-keyboard-hidden .page-home .app-main--home::after {
    display: none;
}

body.has-bottom-bar .app-main--home {
    min-height: calc(100dvh - var(--app-header-height-fallback) - var(--safe-top) - 72px - var(--safe-bottom));
    padding-bottom: calc(72px + var(--safe-bottom));
}

.home-accordion-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding-top: 0;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.home-info-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.home-info-card > .home-accordion {
    position: relative;
    z-index: 1;
}

.page-home .home-info-card > .home-accordion {
    margin-top: 0;
}

.home-info-step-dots[hidden],
.home-info-progress[hidden] {
    display: none !important;
}

.home-info-progress {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 5;
    margin: 0;
}

.page-home .home-info-progress {
    margin-top: 0;
}

.page-home .home-tagline {
    margin: 0 0 8px;
    line-height: 1.35;
}

.page-home .home-info-card {
    gap: 0;
}

.page-home .home-info-step-dots {
    margin: 74px 0 -4px;
}

.home-tagline {
    margin: 0 0 12px;
    padding: 0 8px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--text);
    text-align: center;
    letter-spacing: -0.03em;
}

.home-info-guide-text {
    margin: 0 auto 12px;
    padding: 0 8px;
    max-width: 320px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.5;
    letter-spacing: -0.02em;
    word-break: keep-all;
    line-break: strict;
    overflow-wrap: normal;
}

.home-info-guide-warn {
    color: #000;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: keep-all;
}

.home-launch-city-notice {
    margin: 0 auto;
    max-width: 480px;
    width: 100%;
    padding: 24px 26px;
    text-align: center;
    background: #fff;
    border: 2px solid #2F6B45;
    border-radius: 12px;
    color: #1E2620;
}

.home-launch-city-notice__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.home-launch-city-notice__badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #2F6B45;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.home-launch-city-notice__badge svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-launch-city-notice__title {
    margin: 0 0 3px;
    font-size: 18px;
    font-weight: 700;
    color: #1E2620;
}

.home-launch-city-notice__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #5C665F;
    font-weight: 400;
}

.home-launch-city-notice__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 2px solid #2F6B45;
}

.home-launch-city-notice__tag {
    font-size: 13px;
    font-weight: 700;
    color: #2F6B45;
}

.app-main--launch-city-blocked {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 800px;
    margin-inline: auto;
    min-height: calc(100dvh - var(--launch-city-blocked-header) - var(--launch-city-blocked-bottom));
    padding:
        calc(var(--launch-city-blocked-header) + 16px)
        var(--page-padding)
        calc(16px + var(--launch-city-blocked-bottom));
    box-sizing: border-box;
}

.launch-city-blocked-view {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
}

.page-home .app-main--home.app-main--launch-city-blocked,
.page-profile .app-main--profile.app-main--launch-city-blocked,
.page-stats .app-main--stats-swipe.app-main--launch-city-blocked {
    min-height: calc(100dvh - var(--launch-city-blocked-header) - var(--launch-city-blocked-bottom));
    padding:
        calc(var(--launch-city-blocked-header) + 16px)
        var(--page-padding)
        calc(16px + var(--launch-city-blocked-bottom));
}

.page-home .app-main--home.app-main--launch-city-blocked::before,
.page-home .app-main--home.app-main--launch-city-blocked::after {
    display: none;
    content: none;
}

body.has-app-bottom-nav .app-main--home.app-main--launch-city-blocked,
body.has-app-bottom-nav .app-main--profile.app-main--launch-city-blocked,
body.has-app-bottom-nav .app-main--stats-swipe.app-main--launch-city-blocked {
    min-height: calc(100dvh - var(--launch-city-blocked-header) - var(--launch-city-blocked-bottom));
    padding-bottom: calc(16px + var(--launch-city-blocked-bottom));
}

.home-accordion-wrap.is-launch-city-blocked .home-accordion-footer .btn,
.home-accordion-wrap.is-launch-city-blocked .home-info-meal-footer .btn {
    pointer-events: none;
}

.home-accordion-wrap.is-submission-restore-pending:not(.is-restored) .home-info-progress,
.home-accordion-wrap.is-submission-restore-pending:not(.is-restored) [data-eat-info-tabs]:not(.is-restored-tabs) {
    visibility: hidden;
}

.home-accordion-wrap.is-restored {
    padding-top: 0;
}

.page-home .app-main--home:has(.home-accordion-wrap.is-restored) {
    justify-content: center;
}

.home-info-meal-body.is-readonly [data-home-info-meal-tag-presets],
.home-info-meal-body.is-readonly .home-info-meal-footer .meal-photo-link,
.home-info-meal-body.is-readonly .home-info-meal-footer .meal-photo-remove,
.home-info-meal-body.is-readonly .home-info-meal-footer .meal-photo-rotate,
.is-restored-tabs .home-info-meal-footer .meal-photo-rotate,
.is-restored-tabs .home-info-meal-footer .meal-photo-remove {
    display: none !important;
}

/* 제출 보기: 사진은 이미 크게 표시 — 클릭 확대/토글 없음 */
.is-restored-tabs .meal-photo-thumb,
.is-restored-tabs .home-meal-photo-expand,
.is-restored-tabs .home-meal-photo-expand-btn {
    pointer-events: none;
    cursor: default;
}

.is-restored-tabs .home-meal-photo-expand {
    display: none !important;
}

.home-info-meal-tags-display {
    display: block;
    pointer-events: none;
    user-select: none;
}

.home-info-tabs.is-readonly .home-info-tab {
    pointer-events: none;
    cursor: default;
    border-bottom: none;
}

.home-info-tabs.is-readonly,
.is-restored-tabs .home-info-tabs {
    border-bottom: 1px solid var(--border);
}

.is-restored-tabs [data-home-info-tab="meal"] {
    display: none !important;
}

.is-restored-tabs .home-info-tabs::after {
    left: 33.33%;
}

.is-restored-tabs .home-info-tabs::before {
    left: 66.67%;
}

.is-restored-tabs .home-info-tab[data-home-info-tab="meal"] {
    box-shadow: none;
}

.is-restored-tabs .home-info-tab {
    border-bottom: none;
}

.is-restored-tabs .cuisine-picker-content {
    border-top: none;
}

.home-submitted-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 16px;
    padding: 0 8px;
    text-align: center;
}

.home-submitted-label-title {
    order: 1;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.home-submitted-label-date {
    order: 2;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.35;
}

.home-submitted-meal-summary {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    align-items: baseline;
    margin: 0;
    padding: 16px 14px 14px;
    border-bottom: 1px solid var(--border);
}

.home-submitted-meal-slot {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    z-index: 1;
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.home-submitted-meal-tags {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.4;
    text-align: center;
}

.home-submitted-meal-tag {
    white-space: nowrap;
}

.home-submitted-meal-tag-comma {
    white-space: pre;
    margin-right: 0.25em;
}

/* ── Submission result: recipe promo card ── */
.home-recipe-promo-block {
    margin: 16px 0 0;
    width: 100%;
}

.home-recipe-promo-block > .home-submitted-label {
    margin: 0 0 12px;
    padding: 0;
}

.home-info-card:has([data-eat-submission-recipe-card]) > .home-info-progress,
.home-info-card:has([data-eat-submission-recipe-card]) > .home-submitted-label,
.home-info-card:has([data-eat-submission-recipe-card]) > .home-accordion {
    display: none !important;
}

.home-recipe-promo-wrap {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
    background: #fff;
}

.home-recipe-promo {
    width: 100%;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    overflow: hidden;
}

.home-recipe-promo__inner {
    display: flex;
    width: 100%;
    align-items: stretch;
}

.home-recipe-promo__title {
    margin: 12px 0;
    width: 100%;
    max-width: 100%;
    font-size: 1.625rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.03em;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: keep-all;
}

.home-recipe-promo__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.home-recipe-promo__meta-chip {
    display: block;
    padding: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--text);
    background: transparent;
}

.home-recipe-promo-block > .home-recipe-promo__foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 20px;
    padding: 0;
    box-sizing: border-box;
}

.home-recipe-promo-block > .home-recipe-promo__foot .home-recipe-promo__cta {
    width: 100%;
    box-sizing: border-box;
}

.home-recipe-promo__admin-actions {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.home-recipe-promo__admin-actions .home-admin-submission-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    border-radius: 10px;
}

.home-recipe-promo__cta {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 72px;
    min-height: 48px;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    background: var(--ct-brand);
    color: #fff;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

@media (hover: hover) {
    .home-recipe-promo__cta:hover {
        background: var(--ct-brand-hover);
    }
}

.home-recipe-promo__cta:active {
    background: var(--ct-brand-hover);
}

.home-recipe-promo__cta svg {
    flex-shrink: 0;
}

.home-recipe-promo__media {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0;
    background: #fff;
    box-sizing: border-box;
}

.home-recipe-promo__media-detail {
    flex: 0 0 50%;
    width: 50%;
    min-width: 0;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 10px;
    box-sizing: border-box;
    text-align: center;
    background: #fff;
}

.home-recipe-promo__slot {
    margin: 0;
    width: 100%;
    align-self: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
    line-height: 1.35;
    text-align: center;
}

.home-recipe-promo__media-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
}

.home-recipe-promo__media-meta .home-recipe-promo__meta-chip {
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: none;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
}

.home-recipe-promo__media-meta .home-recipe-promo__meta-chip + .home-recipe-promo__meta-chip::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 8px;
    border-radius: 50%;
    background: var(--text-secondary);
    opacity: 0.45;
    flex-shrink: 0;
}

.home-recipe-promo__media-frame {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    min-width: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 0 12px 12px 0;
    position: relative;
    background-color: #dfece4;
    background-image: linear-gradient(160deg, #dfece4 0%, #c5dcc8 100%);
    box-sizing: border-box;
}

.home-recipe-promo-wrap.is-no-photo .home-recipe-promo__media-frame,
.home-recipe-promo__media-frame:empty {
    display: none;
}

.home-recipe-promo-wrap.is-no-photo .home-recipe-promo__media-detail,
.home-recipe-promo__media:has(.home-recipe-promo__media-frame:empty) .home-recipe-promo__media-detail {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
}

.home-recipe-promo__media-frame img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.home-recipe-promo__media-frame.is-photo-expandable {
    cursor: pointer;
}

.home-recipe-promo-wrap.is-photo-expanded {
    position: relative;
    overflow: hidden;
}

.home-recipe-promo-wrap.is-photo-expanded.is-landscape-expanded {
    position: relative;
    overflow: hidden;
}

.home-recipe-promo-wrap.is-photo-expanded.is-landscape-expanded .home-recipe-promo,
.home-recipe-promo-wrap.is-photo-expanded.is-landscape-expanded .home-recipe-promo__inner {
    position: relative;
    height: 100%;
    min-height: 100%;
}

.home-recipe-promo-wrap.is-photo-expanded.is-landscape-expanded .home-recipe-promo__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.home-recipe-promo-wrap.is-photo-expanded.is-landscape-expanded .home-recipe-promo__media-frame {
    position: absolute;
    inset: 0;
    flex: none;
    width: 100%;
    max-width: none;
    aspect-ratio: auto !important;
    height: 100%;
    border-radius: 12px;
    z-index: 1;
}

.home-recipe-promo-wrap.is-photo-expanded.is-landscape-expanded .home-recipe-promo__media-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-recipe-promo-wrap.is-photo-expanded.is-portrait-expanded .home-recipe-promo__inner {
    align-items: stretch;
    min-height: 100%;
}

.home-recipe-promo-wrap.is-photo-expanded.is-portrait-expanded .home-recipe-promo__media {
    position: relative;
    align-items: stretch;
    align-self: stretch;
    min-height: 100%;
}

.home-recipe-promo-wrap.is-photo-expanded.is-portrait-expanded .home-recipe-promo__media-detail {
    align-self: stretch;
}

.home-recipe-promo-wrap.is-photo-expanded.is-portrait-expanded .home-recipe-promo__media-frame {
    position: relative;
    flex: 0 0 auto;
    width: 50%;
    max-width: 50%;
    height: auto;
    align-self: flex-start;
    aspect-ratio: auto !important;
    min-height: 0;
    border-radius: 0 12px 12px 0;
    z-index: 1;
}

.home-recipe-promo-wrap.is-photo-expanded.is-portrait-expanded .home-recipe-promo__media-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.home-recipe-promo__photo-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
    color: #000;
    cursor: pointer;
    box-sizing: border-box;
}

.home-recipe-promo__photo-close.is-visible {
    display: inline-flex;
}

.home-recipe-promo-wrap.is-photo-expanded .home-recipe-promo__photo-close.is-visible {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 121;
}

.home-recipe-promo__photo-close svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.home-recipe-promo__media-detail.is-photo-fixed {
    position: absolute;
    top: 10px;
    left: 10px;
    right: auto;
    width: auto;
    height: auto;
    max-width: calc(100% - 56px);
    z-index: 120;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
    box-sizing: border-box;
    text-align: left;
    overflow: hidden;
}

.home-recipe-promo__media-detail.is-photo-fixed .home-recipe-promo__title,
.home-recipe-promo__media-detail.is-photo-fixed .home-recipe-promo__slot,
.home-recipe-promo__media-detail.is-photo-fixed .home-recipe-promo__meta-chip {
    margin: 0;
    width: auto;
    max-width: none;
    display: inline;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    text-shadow: none;
    white-space: nowrap;
}

.home-recipe-promo__media-detail.is-photo-fixed .home-recipe-promo__slot {
    color: var(--text-secondary);
}

.home-recipe-promo__media-detail.is-photo-fixed .home-recipe-promo__slot:not([hidden]) + .home-recipe-promo__title::before,
.home-recipe-promo__media-detail.is-photo-fixed .home-recipe-promo__title + .home-recipe-promo__media-meta::before {
    content: '·';
    display: inline-block;
    margin: 0 6px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
}

.home-recipe-promo__media-detail.is-photo-fixed .home-recipe-promo__media-meta {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    width: auto;
}

.home-recipe-promo__media-detail.is-photo-fixed .home-recipe-promo__meta-chip + .home-recipe-promo__meta-chip::before {
    content: '·';
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0 6px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
}

@media (max-width: 360px) {
    .home-recipe-promo__title {
        font-size: 1.4375rem;
    }

    .home-recipe-promo__tags {
        font-size: 1rem;
    }

    .home-recipe-promo__cta {
        min-width: 64px;
        min-height: 44px;
        font-size: 0.8125rem;
    }
}

.home-previous-meals {
    width: 100%;
}

.home-previous-meals-group {
    margin: 0;
}

.home-previous-meals .profile-date-header {
    margin-bottom: 10px;
}

.home-previous-meals-count {
    padding-right: 0;
}

.home-previous-meals .profile-meal-list {
    margin: 0;
}

.home-previous-meals .profile-meal-summary-text {
    flex-wrap: nowrap;
    align-items: baseline;
}

.is-restored-tabs .meal-tags-input-wrap {
    display: none !important;
}

.is-restored-tabs .home-info-panels {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
}

.is-restored-tabs .home-info-meal-body .meal-picker-row {
    padding-bottom: 0;
}

.is-restored-tabs .home-info-meal-photo-preview-wrap:not(:has(.meal-photo-preview.has-photo)) {
    display: none;
}

.is-restored-tabs .home-info-meal-body.is-restored-no-photo .home-info-meal-picker-row,
.is-restored-tabs .home-info-meal-body.is-restored-no-photo .home-info-meal-photo-preview-wrap,
.is-restored-tabs .home-info-meal-body.is-restored-no-photo .home-meal-photo-expand {
    display: none !important;
}

.is-restored-tabs .home-info-meal-body.is-restored-no-photo .home-info-meal-footer {
    padding: 8px 14px 16px;
}

.page-home .is-restored-tabs .home-info-meal-body.is-restored-no-photo .home-info-meal-footer {
    padding: 8px 14px 16px;
}

.is-restored-tabs .home-info-meal-body.is-restored-no-photo .home-info-meal-footer .home-info-meal-photo-preview-wrap {
    margin-bottom: 0;
}

.is-restored-tabs .home-info-meal-body .meal-photo-preview.is-portrait:not(.has-home-thumb) img,
.is-restored-tabs .home-info-meal-body .meal-photo-preview.is-landscape:not(.has-home-thumb) img {
    max-height: none;
    min-height: 0;
}

.is-restored-tabs .home-info-meal-footer .meal-photo-preview.has-home-thumb .meal-photo-thumb img,
.is-restored-tabs .home-info-meal-body:not(.is-restored-no-photo) .meal-photo-thumb img {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-width: 100%;
    min-height: 0;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center;
    border: 0;
    border-radius: 12px;
    display: block;
}

.home-info-step-dots {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    justify-items: center;
    margin: 36px 0 -4px;
    padding: 0;
    pointer-events: none;
}

.home-info-step-lines {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.home-info-step-line {
    position: absolute;
    top: 50%;
    width: 25%;
    height: 1px;
    background: var(--border-strong);
    transform: translateY(-50%);
}

.home-info-step-line[data-home-info-step-line="people"] {
    left: 12.5%;
}

.home-info-step-line[data-home-info-step-line="place"] {
    left: 37.5%;
}

.home-info-step-line[data-home-info-step-line="cuisine"] {
    left: 62.5%;
}

.home-info-step-line.is-filled {
    background: var(--ct-orange);
}

.home-info-step-dot {
    position: relative;
    z-index: 2;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-strong);
    box-shadow: 0 0 0 2px var(--bg);
}

.home-info-step-dot.is-filled {
    background: var(--ct-orange);
}

.home-info-step-dot.is-active {
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ct-orange);
}

@media (max-width: 599px) {
    .page-home .app-main--home {
        padding-left: var(--page-padding);
        padding-right: var(--page-padding);
    }

    .page-home .home-accordion-wrap {
        width: 100%;
        max-width: 100%;
    }

    .page-home .app-header-bar {
        width: 100%;
    }

    .page-admin {
        --page-padding: 10px;
    }

    .page-admin .app-main--admin {
        padding-left: max(10px, env(safe-area-inset-left, 0px));
        padding-right: max(10px, env(safe-area-inset-right, 0px));
    }
}

.profile-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.profile-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.03em;
}

.page-profile .app-header--profile-centered {
    display: block;
}

.page-profile .profile-header-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    min-height: var(--app-header-inner-size);
    padding: 0;
    box-sizing: border-box;
}

.page-profile .profile-header-start {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    z-index: 3;
    pointer-events: auto;
}

.page-profile .profile-header-end {
    grid-column: 3;
    justify-self: end;
    min-width: 0;
    pointer-events: none;
}

.page-profile .app-header--profile-centered .header-title {
    grid-column: 2;
    justify-self: center;
    position: static;
    transform: none;
    width: auto;
    max-width: min(56vw, 220px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
}

.page-profile .app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    width: 100%;
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
    background: var(--bg);
}

.page-profile .app-shell {
    background: #fff;
    box-shadow: none;
}

.page-profile .app-main--profile {
    padding-top: calc(var(--app-header-height, calc(var(--app-header-height-fallback) + var(--safe-top))) + var(--profile-toolbar-height, 62px));
    padding-bottom: 28px;
}

.page-settings .app-main--settings {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: calc(var(--app-header-height, calc(var(--app-header-height-fallback) + var(--safe-top))) + 24px);
    padding-bottom: 28px;
}

.page-settings .app-header--settings-centered {
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-settings .app-header--settings-centered .header-title {
    position: static;
    transform: none;
    width: auto;
    max-width: calc(100vw - 40px);
    text-align: center;
    pointer-events: none;
}

.page-settings .app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    width: 100%;
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
    background: var(--bg);
}

.page-settings .app-shell {
    background: #fff;
    box-shadow: none;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.settings-section-head {
    padding: 12px 14px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
}

.settings-section-head + .settings-list .settings-item:first-child {
    border-top: none;
}

.settings-section-divider {
    height: 1px;
    background: var(--border);
}

.settings-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.settings-item + .settings-item {
    border-top: 1px solid var(--border);
}

.settings-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 14px;
    border: none;
    background: transparent;
    font-family: inherit;
    text-align: left;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.settings-row--info {
    cursor: default;
}

.settings-row--toggle {
    cursor: default;
}

.settings-row--profile-view {
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.settings-panel--profile-settings .settings-panel-body {
    padding: 0;
}

.settings-panel--profile-settings .settings-row--profile-view {
    border-top: none;
}

.settings-panel--profile-settings .settings-row-main {
    padding-left: 8px;
}

.settings-panel--profile-settings .settings-row-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.settings-panel--profile-settings .settings-row-label::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: 0.72;
    flex-shrink: 0;
}

.settings-panel--profile-settings .settings-row + .settings-row {
    border-top: 1px solid var(--border);
}

.settings-panel--profile-settings .settings-profile-url-wrap {
    margin: 0;
    padding: 0 14px 14px;
}

.settings-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.settings-toggle-status {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.settings-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.settings-row-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
}

.settings-row-desc {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.35;
}

.settings-row-value {
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.page-settings .settings-groups {
    padding-top: 0;
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
}

.page-settings .settings-group {
    margin-top: 0;
}

.settings-row-chevron {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.settings-row--trigger.is-open .settings-row-chevron--down {
    transform: rotate(180deg);
}

.settings-row--trigger:active {
    background: var(--surface-gray);
}

.settings-item.is-open > .settings-row--trigger {
    background: var(--surface-gray);
}

.settings-panel {
    border-top: 1px solid var(--border);
    background: #fff;
}

.settings-panel-body {
    padding: 14px;
}

.settings-panel-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.settings-form-field-group {
    margin: 0;
}

.page-settings .settings-panel-form--account-current-compact {
    gap: 4px;
}

.page-settings .settings-panel-form--account-current-compact .settings-panel-note {
    margin-bottom: 0;
}

.page-settings .settings-panel-form--account-current-compact .settings-panel-hint--muted {
    margin-top: 0;
}

.page-settings .form-field--password:focus-within label,
.page-settings .form-field--password.is-filled label,
.page-settings .form-field--password.is-label-error label {
    font-size: 0.625rem;
    line-height: 1.25;
    white-space: normal;
    max-width: calc(100% - 28px);
}

.page-settings .form-field--password .form-field-label-name {
    margin-right: 0.75em;
}

.page-settings .form-field--username:focus-within label,
.page-settings .form-field--username.is-filled label,
.page-settings .form-field--username.is-label-error label {
    font-size: 0.625rem;
    line-height: 1.25;
    white-space: normal;
    max-width: calc(100% - 28px);
}

.page-settings .form-field--username .form-field-label-name {
    margin-right: 0.75em;
}

.page-settings .form-field--account-current--single {
    margin: 0;
}

.page-settings .settings-account-current {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 0;
    padding: 0;
    background: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
}

.page-settings .settings-account-current__label {
    margin-right: 0.75em;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ct-orange);
}

.page-settings .settings-account-current__value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text);
}

.page-settings .form-field--settings-current-password .form-input,
.page-settings .form-field--settings-current-password:focus-within .form-input,
.page-settings .form-field--settings-current-password.is-filled .form-input {
    padding-right: 8.75rem;
}

.page-settings .form-field--settings-current-password.is-code-request-sent .form-input,
.page-settings .form-field--settings-current-password.is-code-request-sent:focus-within .form-input,
.page-settings .form-field--settings-current-password.is-code-request-sent.is-filled .form-input {
    padding-right: 11.5rem;
}

.page-settings .form-field--settings-current-password.is-code-request-resend .form-input,
.page-settings .form-field--settings-current-password.is-code-request-resend:focus-within .form-input,
.page-settings .form-field--settings-current-password.is-code-request-resend.is-filled .form-input {
    padding-right: 10.25rem;
}

.page-settings .form-field--settings-current-password.is-otp-mode:not(.is-code-request-sent):not(.is-code-request-resend) .form-input,
.page-settings .form-field--settings-current-password.is-otp-mode:not(.is-code-request-sent):not(.is-code-request-resend):focus-within .form-input,
.page-settings .form-field--settings-current-password.is-otp-mode:not(.is-code-request-sent):not(.is-code-request-resend).is-filled .form-input {
    padding-right: 8.75rem;
}

.page-settings .form-field--settings-current-password .form-field-action {
    right: 46px;
    font-size: 0.8125rem;
}

.page-settings .form-field--settings-current-password .form-field-toggle {
    top: 50%;
    transform: translateY(-50%);
}

.settings-panel-desc {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.45;
}

.settings-panel-desc--danger {
    color: #e5484d;
}

.settings-row--panel-toggle {
    padding: 0;
    cursor: default;
}

.settings-panel-actions {
    display: flex;
    justify-content: flex-end;
}

.settings-panel-note {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.settings-profile-url-wrap {
    margin-top: 12px;
}

.settings-profile-url-note {
    margin-bottom: 8px;
}

.settings-profile-url-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-profile-url-link {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.settings-panel-secret-result {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f4f7f5;
    font-size: 0.75rem;
    line-height: 1.5;
    word-break: break-all;
    color: var(--text-primary);
}

.settings-avatar-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.settings-avatar-item {
    display: block;
}

.settings-avatar-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 2px solid transparent;
    border-radius: 50%;
    background: var(--surface-gray);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.settings-avatar-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-avatar-select {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
}

.settings-avatar-select img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.settings-avatar-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    z-index: 2;
}

.settings-avatar-item--custom .settings-avatar-action--delete {
    position: absolute;
    left: 50%;
    bottom: 4%;
    transform: translateX(-50%);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
}

.settings-avatar-action-icon {
    display: block;
    width: 16px;
    height: 16px;
}

.settings-avatar-action--delete:active {
    color: #e5484d;
}

.settings-avatar-item.is-selected .settings-avatar-thumb {
    border-color: #2ea86a;
    box-shadow: 0 0 0 2px rgba(46, 168, 106, 0.22);
}

.settings-avatar-add {
    display: block;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.settings-avatar-add-thumb {
    border-color: var(--border-strong);
    background: var(--surface-gray);
}

.settings-avatar-add:active .settings-avatar-add-thumb {
    background: var(--ct-orange-soft);
}

.settings-avatar-add.is-dragover .settings-avatar-add-thumb {
    border-color: #2ea86a;
    background: rgba(46, 168, 106, 0.12);
}

.settings-avatar-add:disabled {
    opacity: 0.6;
    cursor: wait;
}

.settings-avatar-add-icon {
    display: block;
    width: 64%;
    height: 64%;
    color: var(--text-muted);
}

.settings-avatar-hint {
    margin: 10px 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.settings-avatar-hint.is-error {
    color: #e5484d;
}

.settings-panel-hint {
    margin: 10px 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.settings-panel-hint.is-error {
    color: #e5484d;
}

.settings-panel-hint--muted {
    margin: 0;
}

.settings-row--link:active,
.settings-row--action:active {
    background: var(--surface-gray);
}

.settings-row--danger .settings-row-label {
    color: #e5484d;
}

.settings-row--danger:active {
    background: rgba(229, 72, 77, 0.08);
}

.settings-switch {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.settings-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-switch-track {
    position: relative;
    display: block;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: var(--border-strong);
    transition: background 0.2s ease;
}

.settings-switch-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
}

.settings-switch input:checked + .settings-switch-track {
    background: var(--ct-brand);
}

.settings-switch input:checked + .settings-switch-track::after {
    transform: translateX(18px);
}

.settings-profile-view-slider {
    position: relative;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(58px, 1fr));
    min-width: 148px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-gray);
    overflow: hidden;
}

.settings-profile-view-slider-thumb {
    position: absolute;
    z-index: 0;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    border-radius: 999px;
    background: var(--ct-brand);
    box-shadow: 0 1px 4px rgba(46, 125, 90, 0.24);
    pointer-events: none;
    transition: transform 0.2s ease;
}

.settings-profile-view-slider.is-detail .settings-profile-view-slider-thumb {
    transform: translateX(100%);
}

.settings-profile-view-option {
    position: relative;
    z-index: 2;
    min-height: 30px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    cursor: pointer;
    transition: color 0.2s ease;
}

.settings-profile-view-option.is-active {
    color: #fff;
}

.settings-devices-section {
    border-top: 1px solid var(--border);
}

.settings-devices-toggle-bar {
    width: 100%;
    cursor: pointer;
}

.settings-devices-delete-all {
    display: none;
    margin: 0 0 0 auto;
    padding: 0;
    border: none;
    background: transparent;
    color: #dc2626;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.settings-devices-section.is-open .settings-devices-delete-all {
    display: inline-flex;
}

.settings-devices-delete-all:active:not(:disabled) {
    opacity: 0.72;
}

.settings-devices-delete-all:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.settings-devices-section.is-open .settings-devices-toggle-bar {
    background: var(--surface-gray);
}

.settings-devices-toggle-bar.is-open .settings-row-chevron--down,
.settings-devices-section.is-open .settings-row-chevron--down {
    transform: rotate(180deg);
}

.settings-devices-panel {
    border-top: 1px solid var(--border);
}

.settings-device-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.settings-device-item + .settings-device-item {
    border-top: 1px solid var(--border);
}

.settings-device-row {
    align-items: flex-start;
}

.settings-device-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-top: 1px;
}

.settings-device-delete {
    margin: 0;
    padding: 6px 10px;
    border: 1px solid rgba(220, 38, 38, 0.22);
    border-radius: 999px;
    background: transparent;
    color: #dc2626;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.settings-device-delete:active:not(:disabled) {
    background: rgba(220, 38, 38, 0.08);
}

.settings-device-delete:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.settings-device-badge {
    flex-shrink: 0;
    margin-top: 2px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(75, 122, 90, 0.12);
    color: #4b7a5a;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.settings-device-empty {
    margin: 0;
    padding: 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.45;
}

/* ── Admin ── */
.page-admin {
    --content-max: 800px;
    --bg: #fff;
    --admin-subheader-bg: #0d3d2c;
    --admin-subheader-chip-bg: #234d3f;
    --admin-subheader-chip-active-bg: #2c5848;
    --admin-subheader-badge-bg: rgba(255, 255, 255, 0.14);
    --admin-tab-subheader-active-bg: #e8efeb;
    --admin-page-bg: #fff;
    background: var(--admin-page-bg);
}

@media (max-width: 599px) {
    .page-admin .admin-subheader {
        padding: 0 12px;
    }

    .page-admin .admin-subheader-brand {
        gap: 6px;
    }

    .page-admin .admin-subheader-title {
        font-size: 0.8125rem;
    }

    .page-admin .admin-subheader-badge {
        padding: 2px 8px;
        font-size: 0.625rem;
    }

    .page-admin .admin-subheader-tab {
        padding: 0 8px;
        font-size: 0.75rem;
    }

    .page-admin .admin-subheader-tab.is-chip {
        padding: 0 10px;
    }

    .page-admin .admin-tab-subheader {
        padding: 6px 12px;
    }
}

.admin-bottom-nav {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: 0;
    z-index: 130;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: min(800px, 100%);
    max-width: 800px;
    min-height: var(--admin-bottom-nav-height);
    transform: translateX(-50%);
    margin: 0;
    padding: 6px var(--page-padding) calc(6px + var(--safe-bottom));
    border-top: 1px solid var(--border);
    background: var(--bg);
    box-sizing: border-box;
}

.admin-bottom-nav[hidden],
.app-bottom-nav[hidden] {
    display: none !important;
}

.admin-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 64px;
    min-height: var(--admin-bottom-nav-height);
    padding: 0;
    border: none;
    background: transparent;
    color: #8f8f8f;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.admin-bottom-nav-item:first-of-type {
    justify-self: start;
}

.admin-bottom-nav-item:last-of-type {
    justify-self: end;
}

.admin-bottom-nav-item:active {
    opacity: 0.72;
}

.admin-bottom-nav-item.is-active,
.admin-bottom-nav-item.is-active .admin-bottom-nav-icon,
.admin-bottom-nav-item.is-active .admin-bottom-nav-label {
    color: var(--ct-brand);
}

body.is-admin-sidebar-open.page-admin .admin-bottom-nav {
    display: none !important;
}

.admin-bottom-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: #8f8f8f;
}

.admin-bottom-nav-icon svg {
    display: block;
}

.admin-bottom-nav-label {
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.2;
    color: #8f8f8f;
}

.admin-bottom-nav-brand {
    grid-column: 2;
    justify-self: center;
    font-size: 1rem;
    font-weight: 800;
    color: var(--ct-brand);
    letter-spacing: -0.02em;
    white-space: nowrap;
}

body.has-admin-bottom-nav.page-admin .app-main--admin {
    padding-bottom: calc(28px + var(--admin-bottom-nav-height) + 12px + var(--safe-bottom));
}

.page-admin .app-header {
    position: fixed;
    top: 0;
    left: 50%;
    right: auto;
    z-index: 20;
    width: min(800px, 100%);
    max-width: 800px;
    margin-left: 0;
    margin-right: 0;
    transform: translateX(-50%);
    background: var(--bg);
}

.page-admin .app-header--admin {
    display: grid;
    grid-template-columns: var(--app-header-inner-size) 1fr var(--app-header-inner-size);
    align-items: center;
    gap: 0;
}

.page-admin .admin-header-start {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--app-header-inner-size);
    min-height: var(--app-header-inner-size);
}

.page-admin .admin-header-start .eat-region-globe-btn {
    margin: 0;
}

.admin-portal.is-sidebar-open [data-eat-admin-sidebar-open] {
    visibility: hidden;
    pointer-events: none;
}

.page-admin .admin-header-title-stack {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    max-width: calc(100% - 96px);
    text-align: center;
    pointer-events: none;
}

.page-admin .admin-header-region {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.page-admin .admin-header-role {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #888;
    white-space: nowrap;
}

.page-admin .admin-header-close {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--app-header-inner-size);
    height: var(--app-header-inner-size);
    margin: 0;
    padding: 0;
    color: var(--text);
    text-decoration: none;
    border-radius: var(--radius-xs);
}

.page-admin .admin-header-close:active {
    background: var(--surface-gray);
}

.page-admin .admin-header-close-icon {
    display: block;
    width: 18px;
    height: 18px;
}

.page-admin .admin-portal {
    --admin-subheader-height: 52px;
    --admin-tab-subheader-height: 44px;
    --admin-header-stack-height: var(--admin-subheader-height, 52px);
    background: var(--admin-page-bg, #fff);
}

.page-admin .admin-portal.has-admin-tab-subheader {
    --admin-header-stack-height: calc(var(--admin-subheader-height, 52px) + var(--admin-tab-subheader-height, 44px));
}

.page-admin .admin-header-stack {
    position: fixed;
    top: var(--safe-top);
    left: 50%;
    right: auto;
    z-index: 19;
    width: min(800px, 100%);
    max-width: 800px;
    margin-left: 0;
    margin-right: 0;
    transform: translateX(-50%);
    box-sizing: border-box;
    background: transparent;
}

.page-admin .admin-subheader {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    z-index: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    min-height: var(--admin-subheader-height, 52px);
    padding: 0 20px;
    box-sizing: border-box;
    background: var(--admin-subheader-bg, #0d3d2c);
    border-bottom: none;
    border-radius: 0 0 1em 1em;
    overflow: hidden;
}

.page-admin .admin-subheader-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.page-admin .admin-subheader-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 0;
}

.page-admin .admin-subheader-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.page-admin .admin-subheader-bowl {
    display: block;
    width: 24px;
    height: 24px;
}

.page-admin .admin-subheader-bowl path,
.page-admin .admin-subheader-bowl ellipse {
    stroke: #fff;
}

.page-admin .admin-subheader-bowl .tl-bowl-steam {
    stroke: rgba(255, 255, 255, 0.72);
}

.page-admin .admin-subheader-title {
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
    white-space: nowrap;
}

.page-admin .admin-subheader-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 22px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--admin-subheader-badge-bg, rgba(255, 255, 255, 0.14));
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.page-admin .admin-subheader-region {
    flex: 0 0 auto;
    align-self: center;
    max-width: 88px;
    margin-right: 6px;
    padding-bottom: 2px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ct-brand);
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-admin .admin-subheader-region[hidden] {
    display: none;
}

.page-admin .admin-subheader-tabs {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.page-admin .admin-subheader-tabs::-webkit-scrollbar {
    display: none;
}

.page-admin .admin-subheader-tabs-track {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 4px;
    width: max-content;
    min-width: 100%;
    box-sizing: border-box;
}

.page-admin .admin-subheader-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: -0.02em;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
    box-sizing: border-box;
}

.page-admin .admin-subheader-tab.is-chip {
    padding: 0 12px;
    background: var(--admin-subheader-chip-bg, #234d3f);
    color: rgba(255, 255, 255, 0.92);
}

.page-admin .admin-subheader-tab.is-active {
    color: #fff;
    font-weight: 700;
}

.page-admin .admin-subheader-tab.is-chip.is-active {
    background: var(--admin-subheader-chip-active-bg, #2c5848);
    color: #fff;
}

.page-admin .admin-subheader-tab:active {
    opacity: 0.82;
}

.page-admin .admin-tab-subheader {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    z-index: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: var(--admin-tab-subheader-height, 44px);
    padding: 6px 20px;
    box-sizing: border-box;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

.page-admin .admin-tab-subheader[hidden] {
    display: none;
}

.page-admin .admin-tab-subheader-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
}

.page-admin .admin-tab-subheader-inner--signup {
    width: 100%;
    justify-content: center;
}

.page-admin .admin-tab-subheader-inner--signup .admin-tab-subheader-tabs {
    justify-self: center;
}

/* 두번째 상단바(가입/유저/포스트/통계/언어 등) 탭 모두 가운데 정렬 */
.page-admin .admin-tab-subheader-tabs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.page-admin .admin-tab-subheader-tabs::-webkit-scrollbar {
    display: none;
}

.page-admin .admin-signup-invite-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.page-admin .admin-signup-invite-toggle[hidden] {
    display: none;
}

.page-admin .admin-signup-invite-toggle-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.page-admin .admin-signup-invite-switch {
    margin: 0;
}

.page-admin .admin-tab-subheader-item {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 5px 15px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    white-space: nowrap;
    background: var(--admin-tab-subheader-active-bg, #e8efeb);
}

.page-admin .admin-tab-subheader-tab {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin: 0;
    padding: 5px 15px;
    border: none;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #888;
    letter-spacing: -0.02em;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.page-admin .admin-tab-subheader-tab.is-active {
    font-weight: 700;
    color: var(--text);
    background: var(--admin-tab-subheader-active-bg, #e8efeb);
}

.page-admin .admin-tab-subheader-tab:active {
    opacity: 0.82;
}

.page-admin .admin-post-subpanel[hidden] {
    display: none;
}

.page-admin .admin-food-db-card {
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.page-admin .admin-food-db-new-card {
    padding: 0;
    overflow-x: hidden;
    max-width: 100%;
    min-width: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.page-admin .admin-food-db-new-panel {
    min-height: 320px;
    background: #efede8;
    border-radius: inherit;
    padding: 0;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.page-admin .food-db-embed {
    --bg: #fff;
    --card: #fff;
    --text: #1a1c1e;
    --muted: #7c838b;
    --line: #e2e5e8;
    --green: #2e7d5a;
    --green-soft: #eaf3ee;
    --focus: #d9eadf;
    --danger: #b42318;
}

.page-admin .food-db-embed > main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 4px 0 20px;
}

.page-admin .food-db-embed > main > .search,
.page-admin .food-db-embed > main > .tabs {
    width: min(800px, 100%);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.page-admin .food-db-embed .panel {
    min-height: clamp(420px, calc(100dvh - var(--admin-header-stack-height, 86px) - var(--admin-bottom-nav-height) - 180px), 760px);
}

.page-admin .food-db-embed .add-food-overlay {
    z-index: 120;
}

.page-admin .food-db-embed .detail-head {
    flex-wrap: wrap;
}

.page-admin .food-db-embed .detail-head-main {
    flex: 1 1 12rem;
    min-width: min(100%, 12rem);
}

.page-admin .food-db-embed .detail-title,
.page-admin .food-db-embed .detail-meta {
    word-break: keep-all;
}

@media (max-width: 800px) {
    .page-admin .food-db-embed > main {
        padding-left: 0;
        padding-right: 0;
    }
}


.page-admin .admin-food-rankings-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.page-admin .admin-food-rankings-desc {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--fp-muted, #8a8578);
}

.page-admin .admin-food-rankings-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    align-items: end;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eeebe3;
}

.page-admin .admin-food-rankings-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #6f6a60;
}

.page-admin .admin-food-rankings-input {
    width: 100%;
    border: 1px solid #ddd7cb;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 14px;
    background: #fff;
}

.page-admin .admin-food-rankings-submit {
    border: 0;
    border-radius: 8px;
    padding: 9px 14px;
    background: #2f6b4f;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.page-admin .admin-food-rankings-summary {
    margin-bottom: 14px;
    font-size: 14px;
}

.page-admin .admin-food-rankings-summary p {
    margin: 0 0 4px;
}

.page-admin .admin-food-rankings-summary-meta {
    color: #8a8578;
    font-size: 13px;
}

.page-admin .admin-food-rankings-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page-admin .admin-food-rankings-item {
    border: 1px solid #ebe6dc;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.page-admin .admin-food-rankings-item-main {
    display: flex;
    gap: 10px;
    padding: 12px;
}

.page-admin .admin-food-rankings-rank {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f3f0ea;
    font-size: 13px;
    font-weight: 700;
    color: #4f4a42;
}

.page-admin .admin-food-rankings-item:nth-child(1) .admin-food-rankings-rank {
    background: #fff3d6;
    color: #9a6b12;
}

.page-admin .admin-food-rankings-body {
    flex: 1;
    min-width: 0;
}

.page-admin .admin-food-rankings-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.page-admin .admin-food-rankings-name {
    font-size: 15px;
    font-weight: 600;
    color: #2f2b26;
}

.page-admin .admin-food-rankings-name--toggle {
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

.page-admin .admin-food-rankings-var-count {
    font-size: 12px;
    font-weight: 500;
    color: #2f6b4f;
}

.page-admin .admin-food-rankings-count {
    font-size: 13px;
    font-weight: 600;
    color: #2f6b4f;
    white-space: nowrap;
}

.page-admin .admin-food-rankings-bar {
    height: 6px;
    border-radius: 999px;
    background: #f0ece4;
    overflow: hidden;
    margin-bottom: 6px;
}

.page-admin .admin-food-rankings-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3d8a66, #2f6b4f);
}

.page-admin .admin-food-rankings-meta {
    margin: 0;
    font-size: 12px;
    color: #9a9488;
}

.page-admin .admin-food-rankings-variations {
    list-style: none;
    margin: 0;
    padding: 0 12px 12px 50px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.page-admin .admin-food-rankings-variations li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    font-size: 13px;
    padding-top: 6px;
    border-top: 1px dashed #ebe6dc;
}

.page-admin .admin-food-rankings-var-name {
    color: #4f4a42;
}

.page-admin .admin-food-rankings-var-count-num {
    font-weight: 600;
    color: #2f6b4f;
}

.page-admin .admin-food-rankings-var-tag {
    color: #9a9488;
    font-size: 12px;
}

.page-admin .admin-signup-subpanel[hidden] {
    display: none;
}

.page-admin .admin-invite {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

@media (max-width: 800px) {
    .page-admin .admin-invite {
        width: 95% !important;
        margin: 0 auto !important;
        box-sizing: border-box;
    }
}

.page-admin .admin-invite-add-group {
    flex-shrink: 0;
    min-height: 34px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
}

body.admin-invite-group-open {
    overflow: hidden;
}

body.admin-action-dialog-open {
    overflow: hidden;
}

.admin-action-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px var(--page-padding);
    box-sizing: border-box;
    visibility: hidden;
    pointer-events: none;
}

.admin-action-dialog-overlay[hidden] {
    display: none !important;
}

.admin-action-dialog-overlay.is-open {
    visibility: visible;
    pointer-events: auto;
}

.admin-action-dialog-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: auto;
}

.admin-action-dialog-overlay.is-open .admin-action-dialog-backdrop {
    opacity: 1;
}

.admin-action-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 320px;
    padding: 24px 20px 20px;
    background: var(--bg);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease;
    text-align: center;
}

.admin-action-dialog-overlay.is-open .admin-action-dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.admin-action-dialog-message {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--text);
    letter-spacing: -0.02em;
    white-space: pre-line;
}

.admin-action-dialog-overlay.is-error .admin-action-dialog-message {
    color: #c92a2a;
}

.admin-action-dialog-overlay.is-success .admin-action-dialog-message {
    color: var(--ct-brand);
}

.admin-action-dialog-confirm {
    width: 100%;
    margin-top: 18px;
}

.admin-action-dialog-actions {
    display: none;
    gap: 10px;
    margin-top: 18px;
}

.admin-action-dialog-actions .btn {
    flex: 1;
}

.admin-action-dialog-cancel {
    background: var(--surface-gray);
    color: var(--text);
    border: 1px solid var(--border);
}

.admin-action-dialog-cancel:active {
    background: var(--border);
}

.admin-action-dialog-overlay.is-confirm .admin-action-dialog-actions {
    display: flex;
}

.admin-action-dialog-overlay.is-confirm .admin-action-dialog-confirm {
    display: none;
}

.admin-action-dialog-overlay.is-success .admin-action-dialog-confirm {
    display: none;
}

.admin-invite-group-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px var(--page-padding);
    box-sizing: border-box;
    visibility: hidden;
    pointer-events: none;
}

.admin-invite-group-overlay[hidden] {
    display: none !important;
}

.admin-invite-group-overlay.is-open {
    visibility: visible;
    pointer-events: auto;
}

.admin-invite-group-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: auto;
}

.admin-invite-group-overlay.is-open .admin-invite-group-backdrop {
    opacity: 1;
}

.admin-invite-group-sheet {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--bg);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.admin-invite-group-overlay.is-open .admin-invite-group-sheet {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.page-admin .admin-invite-group-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 12px;
    border-bottom: 1px solid var(--border);
}

.page-admin .admin-invite-group-sheet-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.03em;
}

.page-admin .admin-invite-group-sheet-close {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
}

.page-admin .admin-invite-group-sheet-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px 20px;
}

.page-admin .admin-invite-group-sheet-desc {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.page-admin .admin-invite-group-mode {
    display: grid;
    gap: 8px;
}

.page-admin .admin-invite-group-mode-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}

.page-admin .admin-invite-group-mode-option:has(input:checked) {
    border-color: var(--ct-brand);
    background: rgba(46, 125, 76, 0.08);
}

.page-admin .admin-invite-group-mode-option input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--ct-brand);
}

.page-admin .admin-invite-group-mode-option span {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.page-admin .admin-invite-group-mode-option strong {
    font-size: 0.875rem;
    color: var(--text);
}

.page-admin .admin-invite-group-mode-option em {
    font-style: normal;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

.page-admin .admin-invite-group-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-admin .admin-invite-group-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text);
}

.page-admin .admin-invite-group-input {
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    box-sizing: border-box;
}

.page-admin .admin-invite-group-input:focus {
    outline: none;
    border-color: var(--ct-brand);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.page-admin .admin-invite-group-error {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #dc2626;
}

.page-admin .admin-invite-group-submit {
    width: 100%;
    min-height: 48px;
    margin-top: 4px;
}

.page-admin .admin-invite-channel-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.page-admin .admin-invite-channel-bar-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.page-admin .admin-invite-channel-bar-label {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--text);
}

.page-admin .admin-invite-channel-count {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.page-admin .admin-invite-channel-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.page-admin .admin-invite-channel-search svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.page-admin .admin-invite-channel-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 4px;
    margin: 0 -4px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.page-admin .admin-invite-channel-track::-webkit-scrollbar {
    display: none;
}

.page-admin .admin-invite-channel-card {
    flex: 0 0 148px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-height: 92px;
    margin: 0;
    padding: 14px 12px;
    border: 1.5px solid var(--border-strong);
    border-radius: 14px;
    background: #fff;
    text-align: center;
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.page-admin .admin-invite-channel-card.is-active {
    border-color: var(--ct-brand);
    box-shadow: 0 0 0 1px rgba(46, 125, 90, 0.08);
}

.page-admin .admin-invite-channel-card-label {
    width: 100%;
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--text);
    text-align: center;
}

.page-admin .admin-invite-channel-card-meta {
    width: 100%;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.3;
}

.page-admin .admin-invite-channel-card-progress {
    display: block;
    width: 100%;
    height: 4px;
    margin-top: auto;
    border-radius: var(--radius-pill);
    background: var(--surface-gray);
    overflow: hidden;
}

.page-admin .admin-invite-channel-card-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ct-brand);
}

.page-admin .admin-invite-channel-card:not(.is-active) .admin-invite-channel-card-progress-fill {
    background: #c8c8c8;
}

.page-admin .admin-invite-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface-gray);
}

.page-admin .admin-invite-panel-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.page-admin .admin-invite-panel-head-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
}

.page-admin .admin-invite-panel-head .admin-invite-generate {
    flex: 0 0 auto;
    margin-left: auto;
}

.page-admin .admin-invite-group-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--ct-brand);
    font-size: 0.8125rem;
    font-weight: 800;
    color: #fff;
}

.page-admin .admin-invite-group-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 4px;
    border: none;
    background: transparent;
    color: #dc2626;
    cursor: pointer;
}

.page-admin .admin-invite-group-delete svg {
    display: block;
}

.page-admin .admin-invite-usage {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-admin .admin-invite-usage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.page-admin .admin-invite-usage-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.page-admin .admin-invite-usage-value {
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--text);
}

.page-admin .admin-invite-usage-bar {
    height: 8px;
    border-radius: var(--radius-pill);
    background: #e8e8e8;
    overflow: hidden;
}

.page-admin .admin-invite-usage-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ct-brand);
    transition: width 0.2s ease;
}

.page-admin .admin-invite-usage-bar--stacked {
    display: flex;
    background: transparent;
}

.page-admin .admin-invite-usage-bar--stacked .admin-invite-usage-bar-fill {
    border-radius: 0;
    min-width: 0;
}

.page-admin .admin-invite-usage-bar--stacked .admin-invite-usage-bar-fill.is-send-remaining {
    background: #e8e8e8;
}

.page-admin .admin-invite-usage-bar--stacked .admin-invite-usage-bar-fill.is-sent {
    background: #7c8cff;
}

.page-admin .admin-invite-usage-bar--stacked .admin-invite-usage-bar-fill.is-pending {
    background: #f5a623;
}

.page-admin .admin-invite-usage-bar--stacked .admin-invite-usage-bar-fill.is-registered {
    background: var(--ct-brand);
}

.page-admin .admin-invite-usage-bar--stacked .admin-invite-usage-bar-fill.is-expired {
    background: #b0b0b0;
}

.page-admin .admin-invite-usage-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

.page-admin .admin-invite-usage-legend span::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-radius: 50%;
    vertical-align: middle;
}

.page-admin .admin-invite-usage-legend span:nth-child(1)::before { background: #e8e8e8; }
.page-admin .admin-invite-usage-legend span:nth-child(2)::before { background: #7c8cff; }
.page-admin .admin-invite-usage-legend span:nth-child(3)::before { background: #f5a623; }
.page-admin .admin-invite-usage-legend span:nth-child(4)::before { background: var(--ct-brand); }
.page-admin .admin-invite-usage-legend span:nth-child(5)::before { background: #b0b0b0; }

.page-admin .admin-invite-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.page-admin .admin-invite-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 0;
    padding: 10px 8px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    box-sizing: border-box;
    text-align: center;
}

.page-admin .admin-invite-stat.is-highlight {
    border-color: var(--ct-brand-muted);
    background: var(--ct-brand-soft);
}

.page-admin .admin-invite-stat-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.2;
}

.page-admin .admin-invite-stat-value {
    margin-top: 0;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
}

.page-admin .admin-invite-stat.is-highlight .admin-invite-stat-value {
    color: var(--ct-brand);
}

.page-admin .admin-invite-panel-head .admin-invite-qty-input {
    height: 36px;
    width: 64px;
    padding: 0 10px;
    font-size: 0.9375rem;
}

.page-admin .admin-invite-panel-head .admin-invite-generate-btn {
    min-height: 0;
    padding: 3px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 8px;
}

.page-admin .admin-invite-copy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.page-admin .admin-invite-codearea {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
}

.page-admin .admin-invite-codearea-link {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ct-brand);
    text-decoration: none;
    word-break: break-all;
    line-height: 1.35;
}

.page-admin .admin-invite-codearea-link:hover {
    text-decoration: underline;
}

.page-admin .admin-invite-copy-row .admin-invite-copy-all {
    margin-left: auto;
    flex: 0 0 auto;
}

.page-admin .admin-invite-generate {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
}

.page-admin .admin-invite-qty {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.page-admin .admin-invite-qty-input {
    flex: 0 0 auto;
    width: 72px;
    height: 48px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: #fff;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    box-sizing: border-box;
}

.page-admin .admin-invite-qty-unit {
    flex-shrink: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.page-admin .admin-invite-qty-input:focus {
    outline: none;
    border-color: var(--ct-brand);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.page-admin .admin-invite-generate-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 0 16px;
    border: none;
    border-radius: 12px;
    background: var(--ct-brand);
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}

@media (hover: hover) {
    .page-admin .admin-invite-generate-btn:hover {
        background: var(--ct-brand-hover);
    }
}

.page-admin .admin-invite-generate-btn:active {
    background: var(--ct-brand-hover);
}

.page-admin .admin-invite-copy-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    width: auto;
    min-height: 48px;
    margin: 0 0 0 auto;
    padding: 0 16px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: #fff;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ct-brand);
    cursor: pointer;
    white-space: nowrap;
}

.page-admin .admin-invite-copy-all:active {
    background: var(--ct-brand-soft);
}

.page-admin .admin-invite-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page-admin .admin-invite-filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    padding: 4px;
    border-radius: 12px;
    background: var(--surface-gray);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.page-admin .admin-invite-filters::-webkit-scrollbar {
    display: none;
}

.page-admin .admin-invite-filter {
    flex: 0 0 auto;
    min-height: 38px;
    margin: 0;
    padding: 0 14px;
    border: none;
    border-radius: 10px;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
}

.page-admin .admin-invite-filter.is-active {
    background: var(--ct-brand);
    color: #fff;
    font-weight: 700;
}

.page-admin .admin-invite-search {
    position: relative;
    display: block;
}

.page-admin .admin-invite-search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.page-admin .admin-invite-search-input {
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 14px 0 40px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: #fff;
    font-size: 0.9375rem;
    color: var(--text);
    box-sizing: border-box;
}

.page-admin .admin-invite-search-input:focus {
    outline: none;
    border-color: var(--ct-brand);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.page-admin .admin-invite-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
}

.page-admin .admin-invite-list-sort {
    font-weight: 700;
}

.page-admin .admin-invite-group-lists {
    display: flex;
    flex-direction: column;
}

.page-admin .admin-invite-list[hidden] {
    display: none;
}

.page-admin .admin-invite-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0 14px;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
}

.page-admin .admin-invite-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.page-admin .admin-invite-item:last-child {
    border-bottom: none;
}

.page-admin .admin-invite-item-delete {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 0 0 auto;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.page-admin .admin-invite-item-delete:hover {
    background: var(--surface-gray);
    color: var(--text-secondary);
}

.page-admin .admin-invite-item-delete:active {
    background: #f0f0f0;
}

.page-admin .admin-invite-item-delete:disabled {
    opacity: 0.5;
    cursor: wait;
}

.page-admin .admin-invite-item[hidden] {
    display: none;
}

.page-admin .admin-invite-sent-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

.page-admin .admin-invite-sent-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.page-admin .admin-invite-sent-toggle-box {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--border-strong);
    border-radius: 5px;
    background: #fff;
    box-sizing: border-box;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.page-admin .admin-invite-sent-toggle input:checked + .admin-invite-sent-toggle-box {
    border-color: var(--ct-brand);
    background: var(--ct-brand);
    box-shadow: inset 0 0 0 4px #fff;
}

.page-admin .admin-invite-sent-toggle input:focus-visible + .admin-invite-sent-toggle-box {
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.page-admin .admin-invite-sent-toggle input:checked:focus-visible + .admin-invite-sent-toggle-box {
    box-shadow: inset 0 0 0 4px #fff, 0 0 0 3px var(--accent-glow);
}

.page-admin .admin-invite-sent-toggle:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.55;
}

.page-admin .admin-invite-item-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.page-admin .admin-invite-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.page-admin .admin-invite-code {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--text);
}

.page-admin .admin-invite-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    background: var(--ct-brand-soft);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--ct-brand);
}

.page-admin .admin-invite-badge.is-used {
    background: var(--surface-gray);
    color: var(--text-secondary);
}

.page-admin .admin-invite-badge.is-sendable {
    background: var(--ct-brand-soft);
    color: var(--ct-brand);
}

.page-admin .admin-invite-badge.is-sent {
    background: #eef0ff;
    color: #4f5fd5;
}

.page-admin .admin-invite-open-toggle {
    border: 0;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    transition: opacity 0.15s ease;
}

.page-admin .admin-invite-open-toggle:hover:not(:disabled) {
    opacity: 0.82;
}

.page-admin .admin-invite-open-toggle:disabled {
    cursor: wait;
    opacity: 0.6;
}

.page-admin .admin-invite-badge.is-suspended {
    background: #fde8e8;
    color: #c0392b;
}

.page-admin .admin-invite-date {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.page-admin .admin-invite-copy-btn {
    flex-shrink: 0;
    min-width: 52px;
    height: 34px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
}

.page-admin .admin-invite-copy-btn:active {
    background: var(--surface-gray);
}

.page-admin .admin-invite-feedback {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
}

.page-admin .admin-invite-feedback.is-success {
    color: var(--ct-brand);
}

.page-admin .admin-invite-feedback[hidden] {
    display: none;
}

@media (max-width: 850px) {
    .page-admin .app-main--admin:has(.admin-tab-panel.is-active .admin-invite) {
        padding-left: 0;
        padding-right: 0;
    }

    .page-admin .app-main--admin:has(.admin-tab-panel.is-active .admin-invite) .admin-invite {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
    }

    .page-admin .app-main--admin:has(.admin-tab-panel.is-active .admin-invite) .admin-invite-channel-track {
        margin-inline: 0;
        padding-inline: 0;
    }

    .page-admin .app-main--admin:has(.admin-tab-panel.is-active .admin-invite) .admin-invite-panel {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

/* ── Admin geo sidebar ── */
body.is-admin-sidebar-open {
    overflow: hidden;
}

.admin-portal {
    position: relative;
    min-height: 100dvh;
    overflow-x: hidden;
}

.admin-geo-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 220;
    width: 78%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    background: #fff;
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.28s ease;
    overflow: hidden;
    box-shadow: none;
    box-sizing: border-box;
    -webkit-transform: translateX(-100%);
}

.admin-portal.is-sidebar-open .admin-geo-sidebar {
    transform: translateX(0);
    -webkit-transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.14);
}

.admin-geo-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    padding: 14px 14px 10px;
}

.admin-geo-sidebar-head-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.admin-geo-sidebar-globe {
    display: block;
    flex-shrink: 0;
    color: #1f4d36;
}

.admin-geo-sidebar-head-title {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    letter-spacing: -0.02em;
}

.admin-geo-sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-appearance: none;
    appearance: none;
}

.admin-geo-sidebar-close:active {
    background: #f3f4f6;
}

.admin-geo-sidebar-edge-close {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 72px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    transform: translateY(-50%);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
}

.admin-geo-sidebar-edge-close-bar {
    display: block;
    width: 4px;
    height: 36px;
    border-radius: 999px;
    background: #c8c8c8;
}

.admin-geo-sidebar-edge-close:active .admin-geo-sidebar-edge-close-bar {
    background: #9ca3af;
}

.admin-geo-sidebar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin: 0 14px 10px;
    padding: 7px 10px;
    background: #f3f4f6;
    border-radius: 8px;
}

.admin-geo-sidebar-search-icon {
    display: block;
    flex-shrink: 0;
    color: #9ca3af;
}

.admin-geo-sidebar-search-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: #111;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.admin-geo-sidebar-search-input::-webkit-search-decoration,
.admin-geo-sidebar-search-input::-webkit-search-cancel-button,
.admin-geo-sidebar-search-input::-webkit-search-results-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.admin-geo-sidebar-search-input::placeholder {
    color: #9ca3af;
}

.admin-geo-sidebar-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-appearance: none;
    appearance: none;
}

.admin-geo-sidebar-search-clear[hidden] {
    display: none !important;
}

.admin-geo-sidebar-body {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding: 0 8px 16px;
    overflow-y: auto;
    box-sizing: border-box;
}

.scrollbar-ultra-thin {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.scrollbar-ultra-thin::-webkit-scrollbar {
    width: 3px;
}

.scrollbar-ultra-thin::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 999px;
}

.admin-geo-tree {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    min-width: 0;
}

.admin-geo-data-shortcuts {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 2px 10px;
    padding: 8px;
    border: 1px solid #dce8df;
    border-radius: 10px;
    background: #f2f7f4;
}

.admin-geo-data-shortcuts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 2px 4px;
}

.admin-geo-data-shortcuts-head span {
    color: #1f4d36;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.admin-geo-data-shortcuts-head strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #1f4d36;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.admin-geo-sidebar button.admin-geo-data-shortcut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 36px;
    margin: 0;
    padding: 8px 9px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

.admin-geo-sidebar button.admin-geo-data-shortcut.is-selected {
    background: #e0eee6;
    color: #1f4d36;
}

.admin-geo-data-shortcut-main {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.admin-geo-data-shortcut-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 999px;
    background: #2e7d5a;
}

.admin-geo-data-shortcut-label {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-geo-data-shortcut-count {
    flex-shrink: 0;
    color: #6b7280;
    font-size: 12px;
    font-weight: 800;
}

.admin-geo-continent {
    display: block;
    width: 100%;
    min-width: 0;
}

.admin-geo-continent.is-expanded > .admin-geo-row--continent {
    background: #eaf1ec;
    border-radius: 8px;
}

.admin-geo-row {
    display: flex;
    align-items: center;
    min-height: 40px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.admin-geo-row-main {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-geo-row-main--rail {
    margin-left: 6px;
}

.admin-geo-sidebar button.admin-geo-select,
.admin-geo-sidebar button.admin-geo-expand,
.admin-geo-sidebar button.admin-geo-sidebar-close,
.admin-geo-sidebar button.admin-geo-sidebar-edge-close,
.admin-geo-sidebar button.admin-geo-sidebar-search-clear {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    background-color: transparent;
    background-image: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    border-radius: 0;
}

.admin-geo-select {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 8px 6px;
    text-align: left;
    color: #374151;
    letter-spacing: -0.02em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-geo-select--continent {
    font-size: 15px;
    font-weight: 700;
    color: #111;
}

.admin-geo-select--country {
    font-size: 14.5px;
    font-weight: 500;
}

.admin-geo-select--city {
    font-size: 14px;
    font-weight: 500;
    color: #4b5563;
}

.admin-geo-select.is-selected {
    color: #1f4d36;
    font-weight: 700;
}

.admin-geo-select.is-expanded {
    font-weight: 700;
}

.admin-geo-select:active {
    opacity: 0.78;
}

.admin-geo-expand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: #9ca3af;
    border-radius: 8px;
}

.admin-geo-expand.is-open {
    color: #1f4d36;
}

.admin-geo-expand:active {
    opacity: 0.78;
}

.admin-geo-chevron-icon {
    display: block;
    flex-shrink: 0;
    transition: transform 0.22s ease;
}

.admin-geo-expand.is-open .admin-geo-chevron-icon {
    transform: rotate(180deg);
}

.admin-geo-rail {
    position: relative;
    width: 24px;
    height: 40px;
    flex-shrink: 0;
}

.admin-geo-rail-line {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 1px;
    background: #bfd4c6;
}

.admin-geo-rail-line--full {
    height: 100%;
}

.admin-geo-rail-line--half {
    height: 50%;
}

.admin-geo-rail-stub {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 1px;
    background: #bfd4c6;
}

.admin-geo-country-group,
.admin-geo-city-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

.admin-geo-placeholder {
    margin: 0;
    padding: 8px 6px 8px 30px;
    font-size: 13px;
    color: #9ca3af;
    letter-spacing: -0.01em;
}

.admin-sidebar-wrap {
    position: relative;
    min-height: 100dvh;
}

.admin-portal.is-sidebar-open .admin-sidebar-wrap {
    transform: none;
}

.admin-sidebar-shield {
    position: fixed;
    inset: 0;
    z-index: 210;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.admin-portal.is-sidebar-open .admin-sidebar-shield {
    opacity: 1;
    pointer-events: auto;
}

.admin-sidebar-shield[hidden] {
    opacity: 0 !important;
    pointer-events: none !important;
}

.page-admin .admin-sidebar-wrap .app-header,
.page-admin .admin-sidebar-wrap .admin-header-stack,
.page-stats .admin-sidebar-wrap .app-header {
    z-index: 200;
}

.page-home .admin-sidebar-wrap .app-header {
    z-index: 300;
}

.page-admin .admin-tab-panel.is-active {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.page-admin .app-shell {
    background: var(--admin-page-bg, #fff);
    box-shadow: none;
    max-width: none;
    width: 100%;
    margin: 0;
}

.page-admin .app-main--admin {
    padding: calc(var(--safe-top) + var(--admin-header-stack-height, 46px) + 12px) var(--page-padding) 28px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.page-admin .admin-portal.has-admin-tab-subheader .app-main--admin {
    padding-top: calc(var(--safe-top) + var(--admin-header-stack-height, 86px) + 20px);
}

.page-admin .admin-summary {
    margin-top: 0;
}

.page-admin .personal-stats-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
    gap: 10px;
    width: 100%;
}

.page-admin .personal-stats-summary-card {
    aspect-ratio: 1;
    min-height: 0;
    padding: 10px 8px;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
}

.page-admin .personal-stats-summary-value {
    font-size: 1.75rem;
}

.page-admin .personal-stats-summary-label {
    margin-top: 4px;
    font-size: 0.6875rem;
    line-height: 1.35;
    max-width: 100%;
}

.page-admin .admin-summary-headline {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    min-height: 1.625rem;
    margin-bottom: 14px;
    text-align: left;
}

.page-admin .admin-summary-headline.personal-stats-summary-headline {
    margin-bottom: 14px;
}

.page-admin .admin-summary-headline-text {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
}

.page-admin .admin-summary-region-inline {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    transform: translate(-50%, -50%);
    flex: 0 0 auto;
    font-size: 1.3125rem;
    font-weight: 800;
    color: var(--ct-brand);
    letter-spacing: -0.02em;
    white-space: nowrap;
    pointer-events: none;
}

.page-admin .admin-summary-region-inline[hidden] {
    display: none;
}

.page-admin .personal-stats-summary-value-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.page-admin .personal-stats-summary-value-sub {
    font-size: 0.625rem;
    font-weight: 500;
    line-height: 1;
    color: #999;
    letter-spacing: -0.01em;
}

.page-admin .admin-groups {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.page-admin .profile-groups {
    padding-inline: 0;
}

.page-admin .admin-card {
    overflow: hidden;
}

.page-admin .admin-row {
    align-items: center;
    gap: 10px;
}

.page-admin .admin-row-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.page-admin .admin-row-desc {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.35;
}

.page-admin .admin-badge {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--surface-gray);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
}

.page-admin .admin-badge.is-alert {
    background: rgba(229, 72, 77, 0.12);
    color: #c92a2a;
}

.page-admin .admin-panel {
    padding: 0 14px 14px;
}

.page-admin .admin-detail-list {
    margin: 0 0 12px;
    padding: 0 0 0 18px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.55;
}

.page-admin .admin-detail-list li + li {
    margin-top: 4px;
}

.page-admin .admin-panel-note {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--surface-gray);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.page-admin .admin-panel-status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.page-admin .admin-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: rgba(16, 133, 88, 0.1);
    color: var(--ct-brand);
    font-size: 0.75rem;
    font-weight: 700;
}

.page-admin .admin-status-copy {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.page-admin .admin-item--static .admin-row--static {
    cursor: default;
}

.page-admin .admin-item--static .admin-row--static:active {
    background: transparent;
}

.page-admin .admin-user-list-section {
    width: 100%;
    max-width: none;
}

/*
 * /admin/user — 전체(문서) 스크롤 사용.
 * app-shell / #eat-app-content 가 flex+min-height:0 이고
 * admin-portal 의 overflow-x:hidden 이 overflow-y:auto 로 계산되면
 * 뷰포트 안 중첩 스크롤이 생김. 유저 목록은 페이지 단위 스크롤로 통일.
 */
.page-admin:has([data-eat-admin-tab-panel="user"].is-active),
body.page-admin-user {
    overflow-x: clip;
    overflow-y: auto;
    height: auto;
    min-height: 100dvh;
}

.page-admin:has([data-eat-admin-tab-panel="user"].is-active) .app-shell,
body.page-admin-user .app-shell {
    height: auto;
    min-height: 100dvh;
    max-height: none;
    overflow: visible;
    overflow-x: clip;
}

.page-admin:has([data-eat-admin-tab-panel="user"].is-active) #eat-app-content,
body.page-admin-user #eat-app-content {
    flex: 1 0 auto;
    height: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
}

.page-admin:has([data-eat-admin-tab-panel="user"].is-active) .admin-portal,
body.page-admin-user .admin-portal {
    height: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
    overflow-x: clip;
}

.page-admin:has([data-eat-admin-tab-panel="user"].is-active) .admin-sidebar-wrap,
body.page-admin-user .admin-sidebar-wrap {
    height: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
    display: block;
}

.page-admin:has([data-eat-admin-tab-panel="user"].is-active) .app-main--admin,
body.page-admin-user .app-main--admin {
    flex: 0 0 auto;
    height: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
}

.page-admin:has([data-eat-admin-tab-panel="user"].is-active) .admin-tab-panel.is-active,
body.page-admin-user .admin-tab-panel.is-active {
    height: auto;
    max-height: none;
    overflow: visible;
}

.page-admin .admin-user-list-card,
.page-admin .admin-user-list-empty {
    overflow: visible;
}

.page-admin .admin-user-item {
    position: relative;
}

.page-admin .admin-user-list-empty-text {
    margin: 0;
    padding: 28px 16px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.page-admin .admin-user-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-admin .admin-user-item + .admin-user-item {
    border-top: 1px solid var(--border);
}

.page-admin .admin-user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.page-admin .admin-user-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-gray);
}

.page-admin .admin-user-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-admin .admin-user-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.page-admin .admin-user-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.page-admin .admin-user-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-admin .admin-user-badges {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.page-admin .admin-user-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    background: var(--surface-gray);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.page-admin .admin-user-badge.is-role-admin {
    background: rgba(16, 133, 88, 0.12);
    color: var(--ct-brand);
}

.page-admin .admin-user-badge.is-status-suspended {
    background: rgba(229, 72, 77, 0.12);
    color: #c92a2a;
}

.page-admin .admin-user-badge.is-status-withdrawn {
    background: rgba(107, 114, 128, 0.12);
    color: #6b7280;
}

.page-admin .admin-user-email {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-admin .admin-user-meta {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.4;
    word-break: break-all;
}

.page-admin .admin-user-actions {
    position: relative;
    flex-shrink: 0;
    align-self: center;
}

.page-admin .admin-user-action-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 32px;
    padding: 0 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ct-brand);
    letter-spacing: -0.02em;
    cursor: pointer;
}

.page-admin .admin-user-action-trigger:active,
.page-admin .admin-user-actions.is-open .admin-user-action-trigger {
    background: rgba(16, 133, 88, 0.08);
}

.page-admin .admin-user-action-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 40;
    min-width: 156px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}

.page-admin .admin-user-action-menu[hidden] {
    display: none !important;
}

.page-admin .admin-user-action-menu-item {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    text-align: left;
    letter-spacing: -0.02em;
    cursor: pointer;
}

.page-admin .admin-user-action-menu-item:hover:not(:disabled),
.page-admin .admin-user-action-menu-item:focus-visible:not(:disabled) {
    background: var(--surface-gray);
    outline: none;
}

.page-admin .admin-user-action-menu-item:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.page-admin .admin-user-action-menu-item.is-danger {
    color: #c92a2a;
}

.page-admin .admin-user-badge.is-ban-login {
    background: rgba(229, 72, 77, 0.12);
    color: #c92a2a;
}

.page-admin .admin-user-badge.is-ban-write {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.page-admin .admin-user-action-feedback {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(229, 72, 77, 0.08);
    font-size: 0.8125rem;
    font-weight: 600;
    color: #c92a2a;
    text-align: center;
}

.page-admin .admin-user-action-feedback.is-success {
    background: rgba(16, 133, 88, 0.08);
    color: var(--ct-brand);
}

.page-admin .admin-user-action-feedback[hidden] {
    display: none !important;
}

.page-admin [data-eat-admin-tab-panel="stats"] .admin-groups {
    width: 100%;
    max-width: none;
    gap: 0;
}

.page-admin [data-eat-admin-tab-panel="stats"] .admin-groups.settings-groups.profile-groups {
    padding: 0;
    margin: 0;
    align-items: stretch;
}

.page-admin .app-main--admin:has([data-eat-admin-tab-panel="stats"].is-active) {
    padding-left: 0;
    padding-right: 0;
}

.page-admin [data-eat-admin-tab-panel="stats"].is-active {
    gap: 0;
    width: 100%;
    max-width: none;
    align-self: stretch;
}

.page-admin [data-eat-admin-tab-panel="stats"] .admin-stats-subpanel {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.page-admin [data-eat-admin-tab-panel="stats"] .admin-stats-subpanel.is-active {
    width: 100%;
    max-width: none;
}

.page-admin [data-eat-admin-tab-panel="stats"] .admin-stats-template-panel {
    width: 100%;
    margin: 0;
    padding: 16px 20px 40px;
    background: #fff;
    box-sizing: border-box;
}

.page-admin .admin-stats-summary-visibility {
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid var(--border, #e5e2da);
    border-radius: 12px;
    background: var(--surface-soft, #f7f5f0);
}

.page-admin .admin-stats-summary-visibility-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: var(--text);
}

.page-admin .admin-stats-summary-visibility-label > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.page-admin .admin-stats-summary-visibility-label strong {
    font-size: 0.875rem;
    font-weight: 800;
}

.page-admin .admin-stats-summary-visibility-label small {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.page-admin .admin-stats-summary-preview {
    width: min(100%, 560px);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--border, #e5e2da);
    border-radius: 12px;
    background: #fff;
    transition: opacity 160ms ease;
}

.page-admin .admin-stats-summary-preview .stats-meta-wrap {
    margin-top: 0;
    border-top: 0;
    border-bottom: 0;
}

.page-admin .admin-stats-summary-preview.is-admin-summary-off {
    opacity: 0.45;
    outline: 2px dashed rgba(0, 0, 0, 0.12);
    outline-offset: -4px;
}

.page-admin .admin-stats-template-divider {
    height: 1px;
    margin: 28px 0 20px;
    background: var(--border, #e5e2da);
}

.page-admin .admin-stats-swipe-visibility {
    margin: 0 0 20px;
    padding: 14px 14px 12px;
    border: 1px solid var(--border, #e5e2da);
    border-radius: 12px;
    background: var(--surface-soft, #f7f5f0);
}

.page-admin .admin-stats-swipe-visibility-title {
    margin: 0 0 6px;
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--text);
}

.page-admin .admin-stats-swipe-visibility-help {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.page-admin .admin-stats-swipe-visibility-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 6px;
}

.page-admin .admin-stats-swipe-visibility-item {
    margin: 0;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.page-admin .admin-stats-swipe-visibility-item.is-off {
    opacity: 0.72;
    background: #f3f3f3;
}

.page-admin .admin-stats-swipe-visibility-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
}

.page-admin .admin-stats-swipe-visibility-check {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    accent-color: var(--ct-brand, #2e7d5a);
}

.page-admin .admin-stats-swipe-visibility-num {
    flex: 0 0 auto;
    min-width: 1.5rem;
    font-weight: 800;
    color: var(--ct-brand, #2e7d5a);
}

.page-admin .admin-stats-swipe-visibility-text {
    min-width: 0;
    line-height: 1.3;
}

.page-admin .admin-stats-swipe-visibility-status {
    margin: 10px 0 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ct-brand, #2e7d5a);
}

.page-admin .admin-stats-swipe-visibility-status.is-error {
    color: #8f1d1d;
}

.page-admin .admin-stats-template-preview .page.is-admin-swipe-off {
    opacity: 0.45;
    outline: 2px dashed rgba(0, 0, 0, 0.12);
    outline-offset: -4px;
}

/* Public stats: admin-hidden swipe pages */
.page-stats .stats-swipe-root .page[data-stats-page-hidden="1"]:not([data-stats-preview-visible="1"]),
.page-stats .stats-swipe-root .page[hidden] {
    display: none !important;
}

.page-admin .admin-stats-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.page-admin .admin-stats-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page-admin .admin-stats-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px;
}

.page-admin .admin-stats-section-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}

.page-admin .admin-stats-section-meta {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.page-admin .admin-stats-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.page-admin .admin-stats-rows,
.page-admin .admin-region-top-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-admin .admin-stats-row,
.page-admin .admin-region-top-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
}

.page-admin .admin-stats-row {
    justify-content: space-between;
    gap: 12px;
}

.page-admin .admin-stats-row + .admin-stats-row,
.page-admin .admin-region-top-item + .admin-region-top-item {
    border-top: 1px solid var(--border);
}

.page-admin .admin-stats-row-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
}

.page-admin .admin-stats-row-value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    text-align: right;
}

.page-admin .admin-stats-row-value.is-empty,
.page-admin .admin-stats-row-value.is-zero {
    color: var(--text-muted);
    font-weight: 600;
}

.page-admin .admin-stats-row-meta {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: right;
    white-space: nowrap;
}

.page-admin .admin-language-subpanel[hidden] {
    display: none;
}

.page-admin .admin-language-editor {
    width: 100%;
}

.page-admin .admin-language-editor-status {
    min-height: 18px;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #8f1d1d;
    text-align: right;
}

.page-admin .admin-language-editor-status:empty {
    visibility: hidden;
}

.page-admin .admin-language-page-tabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.page-admin .admin-language-page-tab {
    min-height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.page-admin .admin-language-page-tab.is-active {
    background: var(--ct-brand-soft);
    color: var(--ct-brand);
}

.page-admin [data-eat-language-page-panel][hidden] {
    display: none !important;
}

.page-admin .admin-language-editor-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.page-admin .admin-language-editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.page-admin .admin-language-editor-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.page-admin .admin-language-editor-copy strong {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--text);
}

.page-admin .admin-language-editor-copy span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.page-admin .admin-language-locale-tabs {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-gray);
}

.page-admin .admin-language-locale-tab {
    min-height: 30px;
    padding: 0 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.page-admin .admin-language-locale-tab.is-active {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.page-admin .admin-language-editor-controlbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 0;
}

.page-admin .admin-language-editor-controlbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.page-admin .admin-language-edit-mode-tabs {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-gray);
}

.page-admin .admin-language-edit-mode-tab {
    min-height: 32px;
    padding: 0 14px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.page-admin .admin-language-edit-mode-tab.is-active {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.page-admin [data-eat-language-mode-panel][hidden] {
    display: none !important;
}

.page-admin .admin-language-editor-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.page-admin .admin-language-editor-table-title {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.page-admin .admin-language-editor-table-title > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.page-admin .admin-language-editor-table-title strong {
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--text);
}

.page-admin .admin-language-editor-table-title span {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
}

.page-admin .admin-language-editor-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 18px;
    background: var(--surface);
}

.page-admin .admin-language-editor-row + .admin-language-editor-row {
    border-top: 1px solid var(--border);
}

.page-admin .admin-language-editor-row-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.page-admin .admin-language-editor-label strong {
    font-size: 0.875rem;
    color: var(--text);
}

.page-admin .admin-language-editor-label {
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.page-admin .admin-language-editor-section {
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    opacity: 0.42;
}

.page-admin .admin-language-editor-section::before {
    content: '·';
    margin-right: 8px;
    color: var(--text-muted);
}

.page-admin .admin-language-editor-label span {
    font-size: 0.75rem;
    color: var(--text);
}

.page-admin .admin-language-editor-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 0 14px 0 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
}

.page-admin .admin-language-editor-input-row:focus-within {
    border-color: var(--ct-brand);
    box-shadow: 0 0 0 2px var(--ct-brand-soft);
}

.page-admin .admin-language-editor-key {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    padding: 6px 10px;
    border-radius: 9px;
    background: var(--surface-gray);
    color: var(--text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.78;
}

.page-admin .admin-language-editor-input-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.page-admin .admin-language-editor-input {
    display: block;
    width: 100%;
    min-height: 54px;
    max-height: 86px;
    padding: 13px 0 13px 18px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 1.125rem;
    line-height: 1.35;
    resize: vertical;
    box-sizing: border-box;
}

.page-admin .admin-language-editor-input:focus {
    outline: none;
    box-shadow: none;
}

.page-admin .admin-language-editor-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 10px;
    color: var(--text-muted);
}

.page-admin .admin-language-editor-btn {
    min-height: 34px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.page-admin .admin-language-editor-btn.is-primary {
    color: var(--ct-brand);
}

.page-admin .admin-language-editor-action-divider {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: var(--border);
}

.page-admin .admin-language-editor-btn:active {
    opacity: 0.72;
}

.page-admin .admin-language-preview {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.page-admin .admin-language-preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.page-admin .admin-language-preview-head h3 {
    margin: 0;
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 800;
}

.page-admin .admin-language-preview-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.page-admin .admin-language-preview-head p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.35;
}

.page-admin .admin-language-preview-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--ct-brand-soft);
    color: var(--ct-brand);
    font-size: 0.75rem;
    font-weight: 800;
}

.page-admin .admin-language-preview-device {
    display: flex;
    justify-content: center;
    padding: 18px;
    border-radius: 8px;
    background: var(--surface-gray);
}

.page-admin .admin-language-login-preview {
    width: min(100%, 390px);
    min-height: 560px;
    padding: 54px 22px 18px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
    box-sizing: border-box;
}

.page-admin .admin-language-login-preview-screen {
    display: flex;
    flex-direction: column;
    min-height: 486px;
}

.page-admin .admin-language-login-preview-screen[hidden] {
    display: none !important;
}

.page-admin .admin-language-submit-preview-device {
    align-items: flex-start;
}

.page-admin .admin-language-submit-preview {
    width: min(100%, 430px);
}

.page-admin .admin-language-submit-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    min-height: 560px;
    padding: 24px 18px 20px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
    box-sizing: border-box;
}

.page-admin .admin-language-submit-card .home-info-progress {
    gap: 14px;
    margin: 0;
}

.page-admin .admin-language-submit-card .home-tagline {
    margin: 0 0 12px;
    padding: 0 8px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--text);
    text-align: center;
    letter-spacing: -0.03em;
}

.page-admin .admin-language-submit-guide {
    display: block;
    margin: 0 auto 12px;
    padding: 0 8px;
    max-width: 320px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.5;
    letter-spacing: -0.02em;
    word-break: keep-all;
    line-break: strict;
    overflow-wrap: normal;
}

.page-admin .admin-language-submit-card .home-info-tabs {
    margin-top: 0;
}

.page-admin .admin-language-submit-card .home-info-tab,
.page-admin .admin-language-submit-card .home-info-place-btn,
.page-admin .admin-language-submit-card .home-info-people-btn,
.page-admin .admin-language-submit-card .cuisine-segment-btn {
    cursor: default;
}

.page-admin .admin-language-submit-card .home-info-tab {
    min-width: 0;
    overflow: visible;
}

.page-admin .admin-language-submit-card .home-info-tab > input {
    color: inherit;
    font-weight: inherit;
}

.page-admin .admin-language-submit-panels {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 0;
    margin-top: 0;
    min-height: 48px;
    padding: 12px 0 14px;
}

.page-admin .admin-language-submit-panel-preview {
    display: block;
    padding-top: 0;
}

.page-admin .admin-language-submit-panels .home-info-panel[hidden] {
    display: none !important;
}

.page-admin .admin-language-submit-panels .home-info-panel {
    grid-column: 1 / -1;
    padding: 0 14px;
}

.page-admin .admin-language-submit-panel-preview .cuisine-segment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.page-admin .admin-language-submit-panel-preview .cuisine-custom-row {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.page-admin .admin-language-submit-panel-preview .cuisine-custom-input[readonly],
.page-admin .admin-language-submit-panel-preview .meal-custom-input[readonly] {
    pointer-events: none;
}

.page-admin .admin-language-submit-panel-preview .cuisine-custom-row .admin-language-preview-inline--submit-placeholder {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
}

.page-admin .admin-language-submit-panel-preview .meal-tags-input-shell {
    min-height: 54px;
}

.page-admin .admin-language-submit-panel-preview .meal-tags-scroll {
    position: relative;
    min-width: 0;
}

.page-admin .admin-language-submit-panel-preview .meal-tags-scroll .admin-language-preview-inline--submit-placeholder {
    position: absolute;
    left: 0;
    top: 50%;
    color: var(--text-muted);
    transform: translateY(-50%);
}

.page-admin .admin-language-submit-panel-preview .meal-tags-count {
    margin: 0;
}

.page-admin .admin-language-submit-panel-preview .meal-tag-presets {
    margin-top: 10px;
}

.page-admin .admin-language-submit-footer {
    margin-top: 16px;
}

.page-admin .admin-language-submit-footer .btn {
    width: 100%;
}

.page-admin .admin-language-login-intro {
    margin-bottom: 28px;
}

.page-admin .admin-language-login-form {
    pointer-events: auto;
}

.page-admin .admin-language-login-form .form-input[readonly] {
    pointer-events: none;
}

.page-admin .admin-language-login-form .form-field label {
    z-index: 2;
    pointer-events: auto;
}

.page-admin .admin-language-login-form .form-field-toggle {
    min-width: 38px;
    pointer-events: none;
}

.page-admin .admin-language-login-form .form-field-action {
    pointer-events: auto;
}

.page-admin .admin-language-login-form .auth-options {
    align-items: center;
    justify-content: space-between;
}

.page-admin .admin-language-preview-options-right {
    justify-content: flex-end;
}

.page-admin .admin-language-register-form .form-field-group {
    gap: 0;
}

.page-admin .admin-language-register-form .auth-actions {
    margin-top: 14px;
}

.page-admin .admin-language-preview-consent {
    display: flex;
    align-items: center;
    min-width: 0;
    margin-top: 12px;
    cursor: default;
}

.page-admin .admin-language-preview-consent input[type="checkbox"] {
    flex: 0 0 auto;
    pointer-events: none;
}

.page-admin .admin-language-preview-consent .auth-consent-text {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 3px;
    min-width: 0;
    white-space: nowrap;
}

.page-admin .admin-language-preview-faux-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    text-align: right;
}

.page-admin .admin-language-preview-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    white-space: nowrap;
    cursor: pointer;
}

.page-admin .admin-language-preview-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 0.75em;
    color: currentColor;
    font-size: 0.95em;
    font-weight: 800;
    line-height: 1;
    transform: translateY(-0.02em);
    pointer-events: none;
}

.page-admin .admin-language-preview-footer-link {
    min-width: 0;
}

.page-admin .admin-language-login-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 700;
}

.page-admin .admin-language-register-links {
    justify-content: center;
    margin-top: 18px;
    text-align: center;
}

.page-admin .admin-language-register-links .admin-language-preview-arrow-link,
.page-admin .admin-language-register-links .admin-language-preview-inline--footer {
    justify-content: center;
    text-align: center;
}

.page-admin .admin-language-preview-inline {
    display: inline-block;
    max-width: 100%;
    min-width: 2ch;
    margin: 0;
    padding: 0 2px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
    letter-spacing: 0;
    text-align: inherit;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    cursor: text;
}

.page-admin .admin-language-preview-inline:hover {
    border-color: rgba(15, 23, 42, 0.18);
    background: rgba(255, 255, 255, 0.46);
}

.page-admin .admin-language-preview-inline:focus {
    outline: none;
    border-color: var(--ct-brand);
    background: var(--surface);
    box-shadow: 0 0 0 2px var(--ct-brand-soft);
}

.page-admin .admin-language-preview-inline--brand {
    width: auto;
    font-weight: inherit;
}

.page-admin .admin-language-preview-inline--accent {
    width: auto;
    color: var(--ct-orange);
}

.page-admin .admin-language-preview-inline--subtitle {
    display: block;
    width: 100%;
    min-height: 44px;
    resize: vertical;
    overflow: hidden;
}

.page-admin .admin-language-preview-inline--screen-title {
    display: block;
    width: 100%;
    min-height: 42px;
    color: var(--text);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
}

.page-admin .admin-language-preview-inline--label {
    width: auto;
    max-width: 16em;
    min-height: 20px;
    padding: 1px 3px;
}

.page-admin .admin-language-preview-inline--label-desc {
    display: block;
    width: auto;
    max-width: 22em;
    min-height: 16px;
    padding: 1px 3px;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.15;
}

.page-admin .admin-language-preview-inline--remember {
    width: auto;
    max-width: 24em;
    padding: 0;
}

.page-admin .admin-language-preview-inline--link {
    width: auto;
    max-width: 42em;
    padding: 0;
    text-align: right;
}

.page-admin .admin-language-preview-inline--link-center {
    text-align: center;
}

.page-admin .admin-language-preview-inline--field-action {
    width: auto;
    max-width: 11em;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-align: center;
}

.page-admin .admin-language-preview-inline--badge {
    width: auto;
    max-width: 7em;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-align: center;
}

.page-admin .admin-language-preview-inline--terms {
    width: auto;
    max-width: 16em;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.page-admin .admin-language-preview-faux-link,
.page-admin .admin-language-preview-faux-btn {
    cursor: default;
}

.page-admin .admin-language-preview-faux-btn {
    display: flex;
    justify-content: center;
    overflow: visible;
}

.page-admin .admin-language-preview-inline--button {
    width: auto;
    max-width: 44em;
    color: inherit;
    font-weight: inherit;
    text-align: center;
}

.page-admin .admin-language-preview-inline--divider {
    width: auto;
    max-width: 5em;
    color: inherit;
}

.page-admin .admin-language-preview-inline--footer {
    width: auto;
    max-width: 24em;
    color: inherit;
    font-weight: inherit;
    text-align: right;
}

.page-admin .admin-language-preview-inline--footer-left {
    text-align: left;
}

.page-admin .admin-language-preview-inline--submit-title {
    display: block;
    width: 100%;
    min-height: 70px;
    padding: 0 8px;
    color: var(--text);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.03em;
    resize: vertical;
    overflow: hidden;
    text-align: center;
}

.page-admin .admin-language-preview-inline--submit-guide {
    display: block;
    width: 100%;
    min-height: 39px;
    padding: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    word-break: inherit;
    line-break: inherit;
    overflow-wrap: inherit;
    resize: vertical;
    overflow: hidden;
}

.page-admin .admin-language-preview-inline--submit-warn {
    display: inline-block;
    width: auto;
    max-width: 30em;
    margin: 2px auto;
    padding: 0;
    color: #000;
    font-weight: inherit;
    line-height: inherit;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: keep-all;
}

.page-admin .admin-language-preview-inline--submit-tab,
.page-admin .admin-language-preview-inline--submit-pill,
.page-admin .admin-language-preview-inline--submit-cuisine,
.page-admin .admin-language-preview-inline--submit-label,
.page-admin .admin-language-preview-inline--submit-placeholder,
.page-admin .admin-language-preview-inline--submit-count {
    width: auto;
    color: inherit;
    font-weight: inherit;
    text-align: inherit;
}

.page-admin .admin-language-preview-inline--submit-placeholder {
    max-width: 34em;
}

.page-admin .admin-language-preview-inline--submit-count {
    max-width: 14em;
    font-size: inherit;
}

@media (max-width: 760px) {
    .page-admin .admin-language-editor-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .page-admin .admin-language-locale-tabs {
        align-self: flex-start;
    }

    .page-admin .admin-language-editor-head {
        display: none;
    }

    .page-admin .admin-language-editor-table-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-admin .admin-language-editor-table-title span {
        text-align: left;
    }

    .page-admin .admin-language-editor-row {
        gap: 8px;
        padding: 18px 14px;
    }

    .page-admin .admin-language-editor-key {
        width: fit-content;
        max-width: 100%;
    }

    .page-admin .admin-language-editor-actions {
        justify-content: flex-end;
    }

    .page-admin .admin-language-editor-input-row {
        gap: 8px;
        padding-right: 10px;
    }

    .page-admin .admin-language-editor-input {
        padding-left: 14px;
        font-size: 1rem;
    }

    .page-admin .admin-language-editor-btn {
        font-size: 0.9375rem;
    }

    .page-admin .admin-language-preview-head {
        flex-direction: column;
    }

    .page-admin .admin-language-preview-device {
        padding: 12px;
    }

    .page-admin .admin-language-login-preview {
        min-height: 520px;
        padding: 42px 16px 16px;
    }

    .page-admin .admin-language-submit-card {
        min-height: 520px;
        padding: 20px 14px 16px;
    }

    .page-admin .admin-language-submit-panel-preview .cuisine-segment-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.page-admin .admin-region-top-rank {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--ct-brand-soft);
    color: var(--ct-brand);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.page-admin .admin-region-top-label {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
}

.page-admin .admin-region-top-value {
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}

.page-admin .admin-stats-empty {
    margin: 0;
    padding: 18px 16px;
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-align: center;
}

/* Admin region dashboard */
.page-admin [data-eat-admin-tab-panel="dashboard"].is-active {
    width: 100%;
    max-width: 760px;
    align-self: center;
    /* background: #efede8; */
}

.page-admin .admin-region-dashboard {
    --ard-green: #2e7d5a;
    --ard-green-soft: #d7e8dd;
    --ard-cream: #efede8;
    --ard-line: #e2ded4;
    --ard-text: #2b2a26;
    --ard-muted: #8a8374;
    width: 100%;
    padding: 20px 16px 28px;
    border-radius: 0;
    background: transparent;
    color: var(--ard-text);
    box-sizing: border-box;
}

.page-admin .admin-region-dash-top {
    margin: -20px -16px 14px;
    padding: 20px 16px 14px;
    background: #fff;
    border-bottom: 1px solid var(--ard-line);
    box-sizing: border-box;
}

.page-admin .admin-region-dash-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 0;
    background: transparent;
}

.page-admin .admin-region-dash-eyebrow {
    margin: 0 0 4px;
    color: var(--ard-green);
    font-size: 0.75rem;
    font-weight: 800;
}

.page-admin .admin-region-dash-title {
    margin: 0;
    color: #211f1b;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.15;
}

.page-admin .admin-region-dash-sidebar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid var(--ard-line);
    border-radius: 8px;
    background: #fff;
    color: #4a463d;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
}

.page-admin .admin-region-dash-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-admin .admin-region-dash-crumbs {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 0;
    background: transparent;
}

.page-admin .admin-region-dash-crumb,
.page-admin .admin-region-dash-crumb-sep {
    color: #6b6558;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.page-admin .admin-region-dash-crumb {
    padding: 4px 6px;
    border-radius: 6px;
}

.page-admin .admin-region-dash-crumb.is-active {
    color: var(--ard-green);
    font-weight: 800;
    pointer-events: none;
}

.page-admin .admin-region-dash-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 0;
    background: transparent;
    color: var(--ard-muted);
}

.page-admin .admin-region-dash-current strong,
.page-admin .admin-region-dash-current span {
    display: block;
}

.page-admin .admin-region-dash-current strong {
    color: var(--ard-muted);
    font-size: 0.9375rem;
    font-weight: 800;
}

.page-admin .admin-region-dash-current span {
    margin-top: 2px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.page-admin .admin-region-dash-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.page-admin .admin-region-dash-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 64px;
    padding: 12px 14px;
    border: 1px solid var(--ard-line);
    border-radius: 8px;
    background: var(--ard-cream);
    color: inherit;
    text-decoration: none;
    box-sizing: border-box;
}

.page-admin .admin-region-dash-list-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.page-admin .admin-region-dash-list-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--ard-green-soft);
    color: var(--ard-green);
}

.page-admin .admin-region-dash-list-main strong,
.page-admin .admin-region-dash-list-main small,
.page-admin .admin-region-dash-list-stat strong,
.page-admin .admin-region-dash-list-stat small {
    display: block;
}

.page-admin .admin-region-dash-list-main strong {
    color: var(--ard-text);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
}

.page-admin .admin-region-dash-list-main strong.admin-region-dash-path {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
    min-width: 0;
}

.page-admin .admin-region-dash-path-sep {
    display: inline;
    margin: 0 0.2em;
    color: #b5ad9d;
    font-weight: 600;
}

.page-admin .admin-region-dash-path-link {
    display: inline;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.page-admin .admin-region-dash-path-link:hover {
    color: var(--ard-green, var(--ct-brand));
    border-bottom-color: currentColor;
}

.page-admin .admin-region-dash-list-main small {
    margin-top: 3px;
    color: #9c9587;
    font-size: 0.8125rem;
    font-weight: 600;
}

.page-admin .admin-region-dash-list-stat {
    flex-shrink: 0;
    text-align: right;
    color: inherit;
    text-decoration: none;
}

.page-admin .admin-region-dash-list-stat:hover strong {
    color: var(--ard-green, var(--ct-brand));
}

.page-admin .admin-region-dash-list-stat strong {
    color: var(--ard-text);
    font-size: 0.9375rem;
    font-weight: 800;
}

.page-admin .admin-region-dash-list-stat small {
    margin-top: 2px;
    color: #a79f8e;
    font-size: 0.75rem;
    font-weight: 700;
}

.page-admin .admin-region-dash-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

@media (max-width: 1100px) {
    .page-admin .admin-region-dash-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .page-admin .admin-region-dash-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.page-admin .admin-region-dash-stat,
.page-admin .admin-region-dash-card {
    border: 1px solid var(--ard-line);
    border-radius: 8px;
    background: var(--ard-cream);
    box-sizing: border-box;
}

.page-admin .admin-region-dash-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 14px 10px;
    text-align: center;
}

.page-admin .admin-region-dash-stat-label,
.page-admin .admin-region-dash-card h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--ard-muted);
    font-size: 0.875rem;
    font-weight: 800;
}

.page-admin .admin-region-dash-stat-label {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-bottom: 8px;
}

.page-admin .admin-region-dash-stat-label-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.page-admin .admin-region-dash-stat-label-text {
    display: block;
    line-height: 1.25;
    text-align: center;
}

.page-admin .admin-region-dash-stat strong {
    display: block;
    width: 100%;
    color: var(--ard-text);
    font-size: 1.625rem;
    font-weight: 900;
    line-height: 1.05;
    text-align: center;
}

.page-admin .admin-region-dash-stat-ratio {
    display: block;
    width: 100%;
    white-space: nowrap;
    font-size: 1.625rem;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-align: center;
}

.page-admin .admin-region-dash-stat-ratio-new,
.page-admin .admin-region-dash-stat-ratio-total {
    display: inline;
    margin: 0;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.page-admin .admin-region-dash-stat-ratio-new {
    color: var(--ard-text);
}

.page-admin .admin-region-dash-stat-ratio.has-new .admin-region-dash-stat-ratio-new {
    color: var(--ard-green, var(--ct-brand));
}

.page-admin .admin-region-dash-stat-ratio-total {
    color: #a79f8e;
    font-size: 1.125rem;
    font-weight: 800;
}

.page-admin .admin-region-dash-stat small {
    display: block;
    width: 100%;
    margin-top: 4px;
    color: #a79f8e;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.page-admin .admin-region-dash-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.page-admin .admin-region-dash-card {
    min-width: 0;
    padding: 14px 16px;
}

.page-admin .admin-region-dash-card--wide {
    grid-column: 1 / -1;
}

.page-admin .admin-region-dash-card h3 {
    margin-bottom: 10px;
    color: var(--ard-text);
    font-size: 0.9375rem;
}

.page-admin .admin-region-dash-rank-row + .admin-region-dash-rank-row {
    margin-top: 9px;
}

.page-admin .admin-region-dash-rank-row > div,
.page-admin .admin-region-dash-mix-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.page-admin .admin-region-dash-rank-row span,
.page-admin .admin-region-dash-mix-row span {
    color: #4a463d;
    font-size: 0.875rem;
    font-weight: 800;
}

.page-admin .admin-region-dash-rank-row strong,
.page-admin .admin-region-dash-mix-row strong {
    flex-shrink: 0;
    color: var(--ard-muted);
    font-size: 0.8125rem;
    font-weight: 800;
}

.page-admin .admin-region-dash-bar,
.page-admin .admin-region-dash-split {
    display: block;
    height: 7px;
    margin-top: 5px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--ard-cream);
}

.page-admin .admin-region-dash-bar i,
.page-admin .admin-region-dash-split i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ard-green);
}

.page-admin .admin-region-dash-bar.is-gold i {
    background: #c9a24b;
}

.page-admin .admin-region-dash-mix-row {
    position: relative;
    min-height: 34px;
    padding-bottom: 9px;
}

.page-admin .admin-region-dash-mix-row + .admin-region-dash-mix-row {
    margin-top: 6px;
}

.page-admin .admin-region-dash-mix-row i {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    height: 5px;
    border-radius: 999px;
    background: var(--ard-green);
}

.page-admin .admin-region-dash-mix-row.is-alt i {
    background: #b45c3c;
}

.page-admin .admin-region-dash-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 96px;
}

.page-admin .admin-region-dash-bar-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.page-admin .admin-region-dash-bar-col strong {
    color: #a79f8e;
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 1;
}

.page-admin .admin-region-dash-bar-col i {
    width: 100%;
    max-width: 28px;
    min-height: 4px;
    border-radius: 5px;
    background: var(--ard-green-soft);
}

.page-admin .admin-region-dash-bar-col span {
    color: var(--ard-muted);
    font-size: 0.75rem;
    font-weight: 800;
}

.page-admin .admin-region-dash-bar-col.is-peak strong {
    color: var(--ard-green);
}

.page-admin .admin-region-dash-bar-col.is-peak i {
    background: var(--ard-green);
}

.page-admin .admin-region-dash-split {
    height: 14px;
    margin-top: 0;
    margin-bottom: 10px;
    background: var(--ard-green-soft);
}

.page-admin .admin-region-dash-split-meta,
.page-admin .admin-region-dash-note {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    color: #4a463d;
    font-size: 0.8125rem;
    font-weight: 700;
}

.page-admin .admin-region-dash-funnel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.page-admin .admin-region-dash-funnel div {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--ard-cream);
}

.page-admin .admin-region-dash-funnel span,
.page-admin .admin-region-dash-funnel strong {
    display: block;
}

.page-admin .admin-region-dash-funnel span {
    margin-bottom: 3px;
    color: var(--ard-muted);
    font-size: 0.75rem;
    font-weight: 800;
}

.page-admin .admin-region-dash-funnel strong {
    color: var(--ard-text);
    font-size: 1.25rem;
    font-weight: 900;
}

.page-admin .admin-region-dash-empty {
    margin: 0;
    padding: 14px 0 4px;
    color: #a79f8e;
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 720px) {
    .page-admin [data-eat-admin-tab-panel="dashboard"].is-active {
        max-width: none;
    }

    .page-admin .admin-region-dashboard {
        padding: 16px 14px 24px;
    }

    .page-admin .admin-region-dash-top {
        margin: -16px -14px 14px;
        padding: 16px 14px 14px;
    }

    .page-admin .admin-region-dash-header {
        align-items: flex-start;
    }

    .page-admin .admin-region-dash-stat-grid,
    .page-admin .admin-region-dash-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-admin .admin-region-dash-list-row {
        min-height: 62px;
    }
}

.page-admin .admin-submit-stat-messages {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: #e7e9e6;
    box-sizing: border-box;
}

.page-admin .admin-submit-stat-shell {
    max-width: 850px;
    margin: 0 auto;
    background: var(--surface);
    min-height: calc(100vh - var(--admin-header-stack-height, 86px) - var(--safe-top, 0px));
    box-shadow: 0 0 0 1px var(--border);
    box-sizing: border-box;
}

.page-admin .admin-submit-stat-pageheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 16px 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: calc(var(--safe-top) + var(--admin-header-stack-height, 86px));
    z-index: 6;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.page-admin .admin-submit-stat-pageheader-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}

.page-admin .admin-submit-stat-pageheader-sub {
    margin: 2px 0 0;
    font-size: 0.78125rem;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.45;
}

.page-admin .admin-submit-stat-pageheader-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.page-admin .admin-submit-stat-dirty {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.page-admin .admin-submit-stat-dirty.is-dirty {
    color: #b4762a;
}

.page-admin .admin-submit-stat-pageheader-actions .admin-language-editor-status {
    margin: 0;
    font-size: 0.75rem;
}

.page-admin .admin-submit-stat-pageheader-actions .admin-language-editor-status.is-success {
    color: #166534;
}

.page-admin .admin-submit-stat-pageheader-actions .admin-language-editor-status.is-error {
    color: #8f1d1d;
}

.page-admin .admin-submit-stat-form {
    margin: 0;
    width: 100%;
    max-width: none;
    min-width: 0;
}

.page-admin .admin-submit-stat-save {
    width: auto;
    min-width: 92px;
    flex: 0 0 auto;
}

.page-admin .admin-submit-stat-add {
    width: auto;
    min-width: 92px;
    flex: 0 0 auto;
    border: 1px solid var(--border-strong, #c9cec8);
    background: var(--surface);
    color: var(--text);
}

.page-admin .admin-submit-stat-add:not(:disabled):hover {
    border-color: var(--text-muted);
}

.page-admin .admin-submit-stat-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 16px;
    padding: 16px 20px 40px;
    align-items: start;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
}

.page-admin .admin-submit-stat-side {
    position: sticky;
    top: calc(var(--safe-top) + var(--admin-header-stack-height, 86px) + 72px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.page-admin .admin-submit-stat-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    width: 100%;
}

.page-admin .admin-submit-stat-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.page-admin .admin-submit-stat-panel-head {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 0.78125rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.page-admin .admin-submit-stat-panel-head--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8125rem;
    color: var(--text);
}

.page-admin .admin-submit-stat-panel-head-note {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
}

.page-admin .admin-submit-stat-preview-panel > .admin-submit-stat-panel-head--split {
    border-bottom: none;
}

.page-admin .admin-submit-stat-kw-list {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.page-admin .admin-submit-stat-kw-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 4px;
    border-radius: 6px;
}

.page-admin .admin-submit-stat-kw-row:hover {
    background: var(--bg);
}

.page-admin .admin-submit-stat-kw-tag {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.71875rem;
    font-weight: 700;
    color: var(--ct-brand-hover);
    background: var(--ct-brand-soft);
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.page-admin .admin-submit-stat-kw-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.page-admin .admin-submit-stat-filter-group {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page-admin .admin-submit-stat-filter-group--border {
    border-top: 1px solid var(--border);
}

.page-admin .admin-submit-stat-filter-label {
    font-size: 0.71875rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.page-admin .admin-submit-stat-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.page-admin .admin-submit-stat-chip {
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-strong, #c9cec8);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    background: #fff;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.page-admin .admin-submit-stat-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text);
}

.page-admin .admin-submit-stat-chip.is-blue .admin-submit-stat-chip-dot { background: #3c63c7; }
.page-admin .admin-submit-stat-chip.is-purple .admin-submit-stat-chip-dot { background: #6e4fc9; }
.page-admin .admin-submit-stat-chip.is-orange .admin-submit-stat-chip-dot { background: #c4762e; }
.page-admin .admin-submit-stat-chip.is-teal .admin-submit-stat-chip-dot { background: #2e8577; }

.page-admin .admin-submit-stat-chip.is-active[data-filter-cat="all"],
.page-admin .admin-submit-stat-chip.is-active:not([data-filter-cat]) {
    background: var(--text);
    border-color: transparent;
    color: #fff;
}

.page-admin .admin-submit-stat-chip.is-active[data-filter-cat="time"] {
    background: #3c63c7;
    border-color: transparent;
    color: #fff;
}

.page-admin .admin-submit-stat-chip.is-active[data-filter-cat="ratio"] {
    background: #6e4fc9;
    border-color: transparent;
    color: #fff;
}

.page-admin .admin-submit-stat-chip.is-active[data-filter-cat="streak"] {
    background: #c4762e;
    border-color: transparent;
    color: #fff;
}

.page-admin .admin-submit-stat-chip.is-active[data-filter-cat="cold"] {
    background: #2e8577;
    border-color: transparent;
    color: #fff;
}

.page-admin .admin-submit-stat-chip.is-active[data-filter-seg] {
    background: var(--ct-brand-soft);
    border-color: var(--ct-brand-muted);
    color: var(--ct-brand-hover);
}

.page-admin .admin-submit-stat-stat-mini {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-admin .admin-submit-stat-stat-mini-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.78125rem;
}

.page-admin .admin-submit-stat-stat-mini-row span {
    color: var(--text-muted);
}

.page-admin .admin-submit-stat-stat-mini-row strong {
    font-weight: 700;
    color: var(--text);
}

.page-admin .admin-submit-stat-preview-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 10px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.page-admin .admin-submit-stat-preview-tabs::-webkit-scrollbar {
    display: none;
}

.page-admin .admin-submit-stat-preview-tab {
    padding: 8px 12px;
    border-radius: 8px 8px 0 0;
    font-size: 0.78125rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    white-space: nowrap;
}

.page-admin .admin-submit-stat-preview-tab.is-active {
    color: var(--text);
    background: #fff;
    border-color: var(--border);
    border-bottom-color: #fff;
}

.page-admin .admin-submit-stat-preview-body {
    background: #fff;
    border-top: 1px solid var(--border);
    padding: 16px;
}

.page-admin .admin-submit-stat-preview-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 560px;
}

.page-admin .admin-submit-stat-preview-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ct-brand-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9375rem;
}

.page-admin .admin-submit-stat-style-select-wrap {
    display: inline-flex;
    min-width: 0;
}

.page-admin .admin-submit-stat-style-select {
    max-width: 148px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 6px;
}

.page-admin .admin-submit-stat-preview-text {
    margin: 0;
    font-size: 0.90625rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.55;
}

.page-admin .admin-submit-stat-preview-card.eat-rec-hint .admin-submit-stat-preview-text {
    font-weight: 400;
}

.page-admin .admin-submit-stat-preview-meta {
    margin: 6px 0 0;
    font-size: 0.71875rem;
    color: var(--text-muted);
    font-weight: 600;
}

.page-admin .admin-submit-stat-preview-fallback {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 10px 0 0;
    padding: 10px 12px;
    background: #fbf1e5;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #b4762a;
    font-weight: 600;
    max-width: 560px;
}

.page-admin .admin-submit-stat-preview-fallback:not([hidden]) {
    display: flex;
}

.page-admin .admin-submit-stat-rec-hints {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.page-admin .admin-submit-stat-rec-hints-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.page-admin .admin-submit-stat-rec-hints-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.page-admin .admin-submit-stat-rec-hints-note {
    font-size: 0.71875rem;
    font-weight: 600;
    color: var(--text-muted);
}

.page-admin .admin-submit-stat-rec-static-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.page-admin .admin-submit-stat-rec-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
}

.page-admin .admin-submit-stat-rec-num {
    font-size: 0.6875rem;
    color: #b4b2a9;
    min-width: 20px;
    text-align: right;
    flex-shrink: 0;
}

.eat-rec-hint .rec-a {
    font-size: 0.875rem;
    font-style: italic;
    color: #3b6d11;
    background: #eaf3de;
    display: inline-block;
    padding: 8px 16px;
    border-radius: 999px;
}

.eat-rec-hint .rec-b {
    font-size: 0.9375rem;
    font-style: italic;
    color: #5f5e5a;
    border-left: 2px solid #97c459;
    padding: 4px 0 4px 14px;
    text-align: left;
    display: inline-block;
}

.eat-rec-hint .rec-d {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1a1a18;
    display: inline-block;
    padding: 0 2px;
}

.eat-rec-hint .rec-plain {
    font-size: 0.9375rem;
    color: #5f5e5a;
    display: inline-block;
}

.eat-rec-hint .rec-plain-loose {
    padding-top: 14px;
}

.eat-rec-hint .emph-underline {
    border-bottom: 2px solid #639922;
}

.eat-rec-hint .emph-bg {
    background: #c0dd97;
    color: #173404;
    padding: 0 3px;
    border-radius: 3px;
}

.eat-rec-hint .emph-dotted {
    border-bottom: 2px dotted #639922;
}

.eat-rec-hint .emph-bold {
    color: #3b6d11;
    font-weight: 700;
}

.eat-rec-hint .emph-dark {
    background: #173404;
    color: #eaf3de;
    padding: 0 4px;
    border-radius: 3px;
}

.eat-rec-hint .emph-wave {
    text-decoration: underline wavy #639922;
    text-decoration-thickness: 2px;
}

.eat-rec-hint .emph-marker {
    background-image: linear-gradient(#c0dd97, #c0dd97);
    background-repeat: no-repeat;
    background-size: 100% 40%;
    background-position: 0 85%;
}

.eat-rec-hint .emph-bubble {
    position: relative;
    display: inline-block;
    background: #712b13;
    color: #faece7;
    padding: 3px 10px;
    border-radius: 8px;
    font-weight: 500;
}

.eat-rec-hint .emph-bubble i {
    position: absolute;
    bottom: -5px;
    left: 14px;
    width: 8px;
    height: 8px;
    background: #712b13;
    transform: rotate(45deg);
    font-style: normal;
}

.eat-rec-hint .emph-sticker {
    position: relative;
    display: inline-block;
    background: #fac775;
    color: #412402;
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: 600;
    transform: rotate(-3deg);
}

.eat-rec-hint .emph-big {
    font-size: 1.25rem;
    font-weight: 700;
    color: #3b6d11;
}

.eat-rec-hint .emph-strike {
    color: #b4b2a9;
    text-decoration: line-through;
}

.eat-rec-hint .emph-circle {
    display: inline-block;
    border: 2px solid #639922;
    border-radius: 999px;
    padding: 1px 12px;
    color: #3b6d11;
    font-weight: 600;
}

.eat-rec-hint .emph-dots-mark {
    color: #173404;
    font-weight: 600;
}

.eat-rec-hint .dot-char {
    -webkit-text-emphasis-style: '●';
    text-emphasis-style: '●';
    -webkit-text-emphasis-position: over right;
    text-emphasis-position: over right;
    animation: adminSubmitStatDotTwinkle 1.4s ease-in-out infinite;
}

.eat-rec-hint .star-char {
    -webkit-text-emphasis-style: '★';
    text-emphasis-style: '★';
    -webkit-text-emphasis-position: over right;
    text-emphasis-position: over right;
    display: inline-block;
}

.eat-rec-hint .star-1 { animation: adminSubmitStatStarTwinkle1 1.7s ease-in-out infinite; animation-delay: 0.05s; }
.eat-rec-hint .star-2 { animation: adminSubmitStatStarTwinkle2 2.4s ease-in-out infinite; animation-delay: 0.6s; }
.eat-rec-hint .star-3 { animation: adminSubmitStatStarTwinkle3 1.3s ease-in-out infinite; animation-delay: 0.25s; }
.eat-rec-hint .star-4 { animation: adminSubmitStatStarTwinkle4 2.1s ease-in-out infinite; animation-delay: 0.9s; }
.eat-rec-hint .star-5 { animation: adminSubmitStatStarTwinkle5 1.9s ease-in-out infinite; animation-delay: 0.15s; }
.eat-rec-hint .star-6 { animation: adminSubmitStatStarTwinkle6 2.6s ease-in-out infinite; animation-delay: 0.45s; }

.eat-rec-hint .emph-crayon {
    position: relative;
    display: inline-block;
    color: #4a1b0c;
    font-weight: 700;
    padding: 0 2px;
}

.eat-rec-hint .emph-crayon::before {
    content: "";
    position: absolute;
    left: -3px;
    top: -20%;
    bottom: -20%;
    z-index: -1;
    background:
        repeating-linear-gradient(55deg, #ef9f27 0px, #ef9f27 4px, transparent 4px, transparent 7px),
        repeating-linear-gradient(55deg, #f0997b 1px, #f0997b 3px, transparent 3px, transparent 9px);
    opacity: 0.9;
    width: 0%;
    clip-path: polygon(0% 22%, 9% 4%, 18% 28%, 27% 10%, 36% 30%, 45% 0%, 54% 20%, 63% 8%, 72% 26%, 81% 12%, 90% 24%, 100% 6%, 100% 88%, 91% 100%, 82% 80%, 73% 96%, 64% 78%, 55% 100%, 46% 82%, 37% 100%, 28% 76%, 19% 94%, 10% 82%, 0% 96%);
    animation: adminSubmitStatCrayonFill 3.6s ease-in-out forwards;
}

.eat-rec-hint .emph-draw {
    position: relative;
    display: inline-block;
    color: #173404;
    font-weight: 700;
}

.eat-rec-hint .emph-draw::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    height: 3px;
    background: #3b6d11;
    width: 0%;
    animation: adminSubmitStatDrawLine 2.5s ease-in-out infinite;
}

.eat-rec-hint .wave-char {
    display: inline-block;
    color: #3b6d11;
    font-weight: 700;
    animation: adminSubmitStatWaveBounce 1s ease-in-out infinite;
}

.eat-rec-hint .emph-shimmer {
    background: linear-gradient(90deg, #3b6d11 0%, #97c459 25%, #3b6d11 50%, #97c459 75%, #3b6d11 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    animation: adminSubmitStatShimmerMove 2.5s linear infinite;
}

.eat-rec-hint .emph-typewriter {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
    border-right: 2px solid #3b6d11;
    width: 0;
    font-weight: 700;
    color: #173404;
    animation: adminSubmitStatTyping 3s steps(6) infinite, adminSubmitStatBlinkCaret 0.7s step-end infinite;
}

.eat-rec-hint .emph-rainbow {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    animation: adminSubmitStatRainbowBg 3s linear infinite;
}

.eat-rec-hint .emph-neon {
    color: #97c459;
    font-weight: 700;
    animation: adminSubmitStatNeonFlicker 1.8s infinite;
}

.eat-rec-hint .emph-jelly {
    display: inline-block;
    font-weight: 700;
    color: #3b6d11;
    transform-origin: center bottom;
    animation: adminSubmitStatJellyWobble 1.4s ease-in-out infinite;
}

.eat-rec-hint .flip-char {
    display: inline-block;
    color: #3b6d11;
    font-weight: 700;
    animation: adminSubmitStatFlipChar 1.8s ease-in-out infinite;
}

.eat-rec-hint .emph-sparkle {
    position: relative;
    display: inline-block;
    color: #173404;
    font-weight: 700;
}

.eat-rec-hint .emph-sparkle::before,
.eat-rec-hint .emph-sparkle::after {
    content: "✦";
    position: absolute;
    color: #fac775;
    font-size: 11px;
    animation: adminSubmitStatSparklePop 1.6s ease-in-out infinite;
}

.eat-rec-hint .emph-sparkle::before {
    top: -11px;
    left: -8px;
    animation-delay: 0s;
}

.eat-rec-hint .emph-sparkle::after {
    bottom: -11px;
    right: -8px;
    animation-delay: 0.8s;
}

.eat-rec-hint .emph-marching {
    position: relative;
    display: inline-block;
    color: #1a1a18;
    font-weight: 600;
}

.eat-rec-hint .emph-marching::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 3px;
    background-image: repeating-linear-gradient(90deg, #3b6d11 0 6px, transparent 6px 12px);
    background-size: 24px 3px;
    animation: adminSubmitStatMarchAnts 0.6s linear infinite;
}

@keyframes adminSubmitStatDotTwinkle {
    0%, 100% { text-emphasis-color: #c0dd97; -webkit-text-emphasis-color: #c0dd97; }
    50% { text-emphasis-color: #173404; -webkit-text-emphasis-color: #173404; }
}

@keyframes adminSubmitStatStarTwinkle1 {
    0% { text-emphasis-color: #ef9f27; -webkit-text-emphasis-color: #ef9f27; transform: scale(1); }
    22% { text-emphasis-color: #e24b4a; -webkit-text-emphasis-color: #e24b4a; transform: scale(1.5); }
    31% { text-emphasis-color: #e24b4a; -webkit-text-emphasis-color: #e24b4a; transform: scale(0.85); }
    58% { text-emphasis-color: #fac775; -webkit-text-emphasis-color: #fac775; transform: scale(1.2); }
    77% { text-emphasis-color: #ef9f27; -webkit-text-emphasis-color: #ef9f27; transform: scale(1); }
    100% { text-emphasis-color: #ef9f27; -webkit-text-emphasis-color: #ef9f27; transform: scale(1); }
}

@keyframes adminSubmitStatStarTwinkle2 {
    0% { text-emphasis-color: #fac775; -webkit-text-emphasis-color: #fac775; transform: scale(0.9); }
    14% { text-emphasis-color: #fac775; -webkit-text-emphasis-color: #fac775; transform: scale(1.3); }
    36% { text-emphasis-color: #e24b4a; -webkit-text-emphasis-color: #e24b4a; transform: scale(0.8); }
    52% { text-emphasis-color: #ef9f27; -webkit-text-emphasis-color: #ef9f27; transform: scale(1.4); }
    81% { text-emphasis-color: #e24b4a; -webkit-text-emphasis-color: #e24b4a; transform: scale(1); }
    100% { text-emphasis-color: #fac775; -webkit-text-emphasis-color: #fac775; transform: scale(0.9); }
}

@keyframes adminSubmitStatStarTwinkle3 {
    0% { text-emphasis-color: #e24b4a; -webkit-text-emphasis-color: #e24b4a; transform: scale(1.2); }
    19% { text-emphasis-color: #ef9f27; -webkit-text-emphasis-color: #ef9f27; transform: scale(0.85); }
    47% { text-emphasis-color: #ef9f27; -webkit-text-emphasis-color: #ef9f27; transform: scale(1.5); }
    68% { text-emphasis-color: #fac775; -webkit-text-emphasis-color: #fac775; transform: scale(1); }
    90% { text-emphasis-color: #e24b4a; -webkit-text-emphasis-color: #e24b4a; transform: scale(1.15); }
    100% { text-emphasis-color: #e24b4a; -webkit-text-emphasis-color: #e24b4a; transform: scale(1.2); }
}

@keyframes adminSubmitStatStarTwinkle4 {
    0% { text-emphasis-color: #fac775; -webkit-text-emphasis-color: #fac775; transform: scale(1); }
    28% { text-emphasis-color: #e24b4a; -webkit-text-emphasis-color: #e24b4a; transform: scale(1.4); }
    41% { text-emphasis-color: #e24b4a; -webkit-text-emphasis-color: #e24b4a; transform: scale(0.9); }
    66% { text-emphasis-color: #ef9f27; -webkit-text-emphasis-color: #ef9f27; transform: scale(1.25); }
    84% { text-emphasis-color: #fac775; -webkit-text-emphasis-color: #fac775; transform: scale(0.8); }
    100% { text-emphasis-color: #fac775; -webkit-text-emphasis-color: #fac775; transform: scale(1); }
}

@keyframes adminSubmitStatStarTwinkle5 {
    0% { text-emphasis-color: #ef9f27; -webkit-text-emphasis-color: #ef9f27; transform: scale(0.85); }
    9% { text-emphasis-color: #ef9f27; -webkit-text-emphasis-color: #ef9f27; transform: scale(1.3); }
    33% { text-emphasis-color: #fac775; -webkit-text-emphasis-color: #fac775; transform: scale(1); }
    57% { text-emphasis-color: #e24b4a; -webkit-text-emphasis-color: #e24b4a; transform: scale(1.45); }
    79% { text-emphasis-color: #fac775; -webkit-text-emphasis-color: #fac775; transform: scale(0.9); }
    100% { text-emphasis-color: #ef9f27; -webkit-text-emphasis-color: #ef9f27; transform: scale(0.85); }
}

@keyframes adminSubmitStatStarTwinkle6 {
    0% { text-emphasis-color: #e24b4a; -webkit-text-emphasis-color: #e24b4a; transform: scale(1.3); }
    24% { text-emphasis-color: #fac775; -webkit-text-emphasis-color: #fac775; transform: scale(0.85); }
    39% { text-emphasis-color: #fac775; -webkit-text-emphasis-color: #fac775; transform: scale(1.5); }
    63% { text-emphasis-color: #ef9f27; -webkit-text-emphasis-color: #ef9f27; transform: scale(1); }
    88% { text-emphasis-color: #e24b4a; -webkit-text-emphasis-color: #e24b4a; transform: scale(1.2); }
    100% { text-emphasis-color: #e24b4a; -webkit-text-emphasis-color: #e24b4a; transform: scale(1.3); }
}

@keyframes adminSubmitStatCrayonFill {
    0% { width: 0%; transform: translateX(0px); }
    10% { width: 22%; transform: translateX(-1px); }
    20% { width: 15%; transform: translateX(1px); }
    32% { width: 40%; transform: translateX(-1px); }
    42% { width: 30%; transform: translateX(1px); }
    55% { width: 60%; transform: translateX(-1px); }
    65% { width: 50%; transform: translateX(1px); }
    78% { width: 85%; transform: translateX(-1px); }
    88% { width: 72%; transform: translateX(0px); }
    100% { width: 100%; transform: translateX(0px); }
}

@keyframes adminSubmitStatDrawLine {
    0% { width: 0%; }
    45% { width: 100%; }
    70% { width: 100%; }
    100% { width: 0%; }
}

@keyframes adminSubmitStatWaveBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes adminSubmitStatShimmerMove {
    0% { background-position: 0% 0; }
    100% { background-position: -200% 0; }
}

@keyframes adminSubmitStatTyping {
    0% { width: 0; }
    50% { width: 6.2em; }
    90% { width: 6.2em; }
    100% { width: 0; }
}

@keyframes adminSubmitStatBlinkCaret {
    50% { border-color: transparent; }
}

@keyframes adminSubmitStatRainbowBg {
    0% { background: #e24b4a; }
    25% { background: #ef9f27; }
    50% { background: #639922; }
    75% { background: #378add; }
    100% { background: #e24b4a; }
}

@keyframes adminSubmitStatNeonFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow: 0 0 4px #97c459, 0 0 8px #639922, 0 0 12px #3b6d11;
        opacity: 1;
    }
    20%, 24%, 55% { text-shadow: none; opacity: 0.4; }
}

@keyframes adminSubmitStatJellyWobble {
    0%, 100% { transform: scale(1, 1); }
    20% { transform: scale(1.15, 0.85); }
    40% { transform: scale(0.9, 1.1); }
    60% { transform: scale(1.08, 0.94); }
    80% { transform: scale(0.97, 1.03); }
}

@keyframes adminSubmitStatFlipChar {
    0%, 40% { transform: rotateY(0deg); }
    60% { transform: rotateY(180deg); }
    80%, 100% { transform: rotateY(360deg); }
}

@keyframes adminSubmitStatSparklePop {
    0%, 100% { opacity: 0; transform: scale(0.3); }
    50% { opacity: 1; transform: scale(1); }
}

@keyframes adminSubmitStatMarchAnts {
    from { background-position: 0 0; }
    to { background-position: 24px 0; }
}

.page-admin .admin-submit-stat-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    gap: 12px;
    flex-wrap: wrap;
}

.page-admin .admin-submit-stat-list-toolbar-right {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    flex: 1 1 220px;
    justify-content: flex-end;
    text-align: right;
}

.page-admin .admin-submit-stat-search {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border-strong, #c9cec8);
    border-radius: 6px;
    padding: 6px 10px;
    flex: 1;
    max-width: 320px;
    background: var(--bg);
}

.page-admin .admin-submit-stat-search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.8125rem;
    width: 100%;
    color: var(--text);
}

.page-admin .admin-submit-stat-search input::placeholder {
    color: var(--text-muted);
}

.page-admin .admin-submit-stat-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.page-admin .admin-submit-stat-group-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
}

.page-admin .admin-submit-stat-group-dot.is-blue { background: #3c63c7; }
.page-admin .admin-submit-stat-group-dot.is-purple { background: #6e4fc9; }
.page-admin .admin-submit-stat-group-dot.is-orange { background: #c4762e; }
.page-admin .admin-submit-stat-group-dot.is-teal { background: #2e8577; }
.page-admin .admin-submit-stat-group-dot.is-green { background: #2e7d5a; }

.page-admin .admin-submit-stat-group-name {
    font-size: 0.78125rem;
    font-weight: 800;
    color: var(--text);
}

.page-admin .admin-submit-stat-group-count {
    font-size: 0.71875rem;
    color: var(--text-muted);
    font-weight: 600;
}

.page-admin .admin-submit-stat-tpl-row.is-editing {
    background: #fbfcfb;
    align-items: start;
}

.page-admin .admin-submit-stat-tpl-row.is-off {
    background: #fafafa;
}

.page-admin .admin-submit-stat-tpl-row.is-off .admin-submit-stat-tpl-title,
.page-admin .admin-submit-stat-tpl-row.is-off .admin-submit-stat-tpl-text {
    color: var(--text-muted);
}

.page-admin .admin-submit-stat-drag {
    color: var(--text-muted);
    cursor: grab;
    font-size: 0.875rem;
    text-align: center;
    user-select: none;
}

.page-admin .admin-submit-stat-order-badge {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    text-align: center;
    padding: 3px 0;
    width: 40px;
}

.page-admin .admin-submit-stat-order-badge:focus {
    outline: none;
    border-color: var(--ct-brand);
    box-shadow: 0 0 0 2px rgba(46, 125, 90, 0.15);
}

.page-admin .admin-submit-stat-tpl-title-col {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.page-admin .admin-submit-stat-tpl-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-admin .admin-submit-stat-badges {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.page-admin .admin-submit-stat-badge {
    font-size: 0.65625rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    display: inline-block;
}

.page-admin .admin-submit-stat-badge.is-returning {
    background: var(--ct-brand-soft);
    color: var(--ct-brand-hover);
}

.page-admin .admin-submit-stat-badge.is-new {
    background: #fbf1e5;
    color: #b4762a;
}

.page-admin .admin-submit-stat-tpl-text-wrap {
    min-width: 0;
}

.page-admin .admin-submit-stat-tpl-text {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.page-admin .admin-submit-stat-ph {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    color: var(--ct-brand-hover);
    background: var(--ct-brand-soft);
    border-radius: 4px;
    padding: 0 4px;
    font-size: 0.75rem;
}

.page-admin .admin-submit-stat-tpl-edit {
    width: 100%;
    min-height: 58px;
    resize: vertical;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text);
    font: inherit;
    line-height: 1.45;
}

.page-admin .admin-submit-stat-tpl-edit:focus {
    outline: none;
    border-color: var(--ct-brand);
    box-shadow: 0 0 0 3px rgba(46, 125, 90, 0.12);
}

.page-admin .admin-submit-stat-tpl-row.is-editing .admin-submit-stat-tpl-text {
    display: none;
}

.page-admin .admin-submit-stat-tpl-row.is-editing .admin-submit-stat-tpl-edit {
    display: block !important;
}

.page-admin .admin-submit-stat-edit-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    background: transparent;
    padding: 0;
}

.page-admin .admin-submit-stat-edit-btn:hover {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text);
}

.page-admin .admin-submit-stat-tpl-row.is-editing .admin-submit-stat-edit-btn {
    background: var(--ct-brand-soft);
    border-color: var(--ct-brand-muted);
    color: var(--ct-brand-hover);
}

.page-admin .admin-submit-stat-list-panel {
    min-width: 0;
    width: 100%;
}

.page-admin .admin-submit-stat-list-root {
    min-width: 0;
}

.page-admin .admin-submit-stat-group[hidden],
.page-admin .admin-submit-stat-tpl-row[hidden] {
    display: none;
}

@media (max-width: 640px) {
    .page-admin .admin-submit-stat-pageheader {
        padding: 12px 16px;
    }

    .page-admin .admin-submit-stat-pageheader-main {
        width: 100%;
    }

    .page-admin .admin-submit-stat-pageheader-actions {
        width: 100%;
        justify-content: space-between;
    }

    .page-admin .admin-submit-stat-dirty {
        display: none;
    }

    .page-admin .admin-submit-stat-save {
        width: 100%;
    }

    .page-admin .admin-submit-stat-layout {
        padding: 12px 16px 32px;
    }

    .page-admin [data-eat-admin-tab-panel="stats"] .admin-stats-template-panel {
        padding: 12px 16px 32px;
    }
}

.page-admin .admin-meals-card-link {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ct-brand);
    text-decoration: none;
}

.page-admin .admin-diary-summary {
    display: grid;
    gap: 12px;
}

.page-admin .admin-diary-recent-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-admin .admin-diary-recent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
}

.page-admin .admin-diary-recent-main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.page-admin .admin-diary-recent-name {
    font-size: 0.9375rem;
    color: #202124;
}

.page-admin .admin-diary-recent-meta {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.page-admin .admin-diary-recent-link {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ct-brand);
    text-decoration: none;
}

.page-admin .admin-stats-info-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f4f4f4;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.45;
    letter-spacing: -0.01em;
}

.page-admin .admin-stats-info-note-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: var(--text-muted);
}

.page-admin .admin-signup-channel-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-admin .admin-signup-channel-item {
    padding: 14px 16px 16px;
}

.page-admin .admin-signup-channel-item + .admin-signup-channel-item {
    border-top: 1px solid var(--border);
}

.page-admin .admin-signup-channel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.page-admin .admin-signup-channel-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
}

.page-admin .admin-signup-channel-value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}

.page-admin .admin-signup-channel-value.is-zero {
    color: var(--text-muted);
    font-weight: 600;
}

.page-admin .admin-signup-channel-bar {
    height: 6px;
    border-radius: 999px;
    background: #efefef;
    overflow: hidden;
}

.page-admin .admin-signup-channel-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ct-brand);
}

.page-admin .admin-signup-channel-item.is-leading .admin-signup-channel-bar-fill {
    background: var(--ct-brand-muted);
}

.page-admin .admin-meals-section {
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.page-admin .admin-meals-card,
.page-admin .admin-meals-empty,
.page-admin .admin-alerts-card {
    overflow: visible;
}

.page-admin .admin-meals-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 0;
}

.page-admin .admin-stats-card.is-compact-empty .admin-meals-card-head {
    padding: 12px 16px;
}

.page-admin .admin-meals-card-empty-note {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-muted);
    text-align: right;
}

.page-admin .admin-meals-card-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
}

.page-admin .admin-meals-card-badge {
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(16, 133, 88, 0.08);
    color: var(--ct-brand);
    font-size: 0.75rem;
    font-weight: 600;
}

.page-admin .admin-meals-card-badge.is-alert {
    background: rgba(245, 166, 35, 0.12);
    color: #b87400;
}

.page-admin .admin-alerts-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.page-admin .admin-alerts-bulk-delete {
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(192, 57, 43, 0.18);
    border-radius: 999px;
    background: #fff;
    color: #c0392b;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.page-admin .admin-alerts-bulk-delete:disabled {
    border-color: var(--border);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.55;
}

.page-admin .admin-meals-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 8px 16px 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.page-admin .admin-meals-summary-item + .admin-meals-summary-item::before {
    content: '·';
    margin-right: 12px;
    color: var(--border);
}

.page-admin .admin-alerts-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 16px 0;
}

.page-admin .admin-alerts-tab {
    border: 1px solid var(--border, #e8e8e8);
    border-radius: 999px;
    background: #fff;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}

.page-admin .admin-alerts-tab.is-active {
    border-color: var(--text);
    color: var(--text);
    background: #f7f7f7;
}

.page-admin .admin-alerts-tab.has-count {
    border-color: #d64545;
    color: #d64545;
}

.page-admin .admin-meals-list,
.page-admin .admin-alerts-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-admin .admin-meals-item {
    position: relative;
}

.page-admin .admin-meals-item + .admin-meals-item,
.page-admin .admin-alerts-item + .admin-alerts-item {
    border-top: 1px solid var(--border);
}

.page-admin .admin-meals-item.is-hidden-flag {
    opacity: 0.72;
}

.page-admin .admin-meals-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
}

.page-admin .admin-meals-thumb {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    overflow: hidden;
    background: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-admin .admin-meals-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.page-admin .admin-meals-thumb.is-placeholder {
    color: var(--text-muted);
}

.page-admin .admin-meals-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-admin .admin-meals-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
}

.page-admin .admin-meals-user {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
}

.page-admin .admin-meals-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.page-admin .admin-meals-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    background: #f2f2f2;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
}

.page-admin .admin-meals-badge.is-hidden {
    background: rgba(245, 166, 35, 0.12);
    color: #b87400;
}

.page-admin .admin-meals-meta,
.page-admin .admin-meals-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.page-admin .admin-meals-meta span + span::before,
.page-admin .admin-meals-detail span + span::before {
    content: '·';
    margin-right: 10px;
    color: var(--border);
}

.page-admin .admin-meals-detail {
    color: var(--text);
}

.page-admin .admin-meals-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}

.page-admin .admin-meals-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(16, 133, 88, 0.08);
    color: var(--ct-brand);
    font-size: 0.6875rem;
    font-weight: 600;
}

.page-admin .admin-meals-tags--match {
    align-items: stretch;
}

.page-admin .admin-meals-tag--match {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    max-width: 100%;
    border-radius: 8px;
    background: rgba(16, 133, 88, 0.06);
}

.page-admin .admin-meals-tag-name {
    color: var(--ct-brand);
    font-weight: 800;
    line-height: 1.2;
}

.page-admin .admin-meals-match-meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
}

.page-admin .admin-meals-match-chip {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 2px 5px;
    border-radius: 999px;
    background: #f2f2f2;
    color: var(--text-muted);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.1;
}

.page-admin .admin-meals-match-chip.is-decision-variation {
    background: rgba(46, 125, 90, 0.12);
    color: var(--ct-brand);
}

.page-admin .admin-meals-match-chip.is-decision-unknown {
    background: rgba(185, 28, 28, 0.1);
    color: #9f1d1d;
}

.page-admin .admin-meals-match-chip.is-decision-fuzzy_alias,
.page-admin .admin-meals-match-chip.is-decision-exact_alias,
.page-admin .admin-meals-match-chip.is-decision-admin_alias {
    background: rgba(37, 99, 235, 0.1);
    color: #2557b8;
}

.page-admin .admin-meals-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 2px;
}

.page-admin .admin-meals-action-btn {
    min-width: 52px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.page-admin .admin-meals-action-btn:active {
    background: #f7f7f7;
}

.page-admin .admin-meals-action-btn.is-danger {
    color: #c0392b;
    border-color: rgba(192, 57, 43, 0.18);
}

.page-admin .admin-alerts-list {
    padding: 8px 0 4px;
}

.page-admin .admin-alerts-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    flex-wrap: wrap;
}

.page-admin .admin-alerts-select {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding-top: 1px;
    cursor: pointer;
}

.page-admin .admin-alerts-check {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--ct-brand);
    cursor: pointer;
}

.page-admin .admin-alerts-check:disabled {
    cursor: wait;
}

.page-admin .admin-alerts-item.is-bulk-deleting {
    opacity: 0.62;
}

.page-admin .admin-alerts-body {
    flex: 1 1 12rem;
    min-width: min(100%, 12rem);
}

.page-admin .admin-alerts-detail {
    display: block;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--text-muted);
    word-break: keep-all;
}

.page-admin .admin-alerts-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.page-admin .admin-alerts-quick-link {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    padding: 3px 8px;
    border: 1px solid var(--border-soft, #ececec);
    border-radius: 999px;
    background: #fafafa;
}

.page-admin .admin-alerts-quick-link:hover {
    background: #f3f3f3;
}

.page-admin .admin-meals-item:target {
    outline: 2px solid rgba(0, 0, 0, 0.12);
    outline-offset: -2px;
    background: #fafafa;
}

.page-admin .admin-alerts-link-panel {
    flex-basis: 100%;
    width: 100%;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft, #ececec);
}

.page-admin .admin-alerts-link-search {
    display: block;
    margin-bottom: 8px;
}

.page-admin .admin-alerts-link-search-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-soft, #ececec);
    border-radius: var(--radius-xs, 8px);
    font-size: 0.8125rem;
}

.page-admin .admin-alerts-link-results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}


.page-admin .admin-alerts-link-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.25rem 0;
}
.page-admin .admin-alerts-link-row .admin-alerts-link-pick {
    flex: 1 1 auto;
}
.page-admin .admin-alerts-link-promote {
    flex: 0 0 auto;
    font-size: 0.75rem;
}

.page-admin .admin-alerts-link-pick {
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 1px solid var(--border-soft, #ececec);
    border-radius: var(--radius-xs, 8px);
    background: #fafafa;
    font-size: 0.8125rem;
    cursor: pointer;
}

.page-admin .admin-alerts-link-pick:active {
    background: #f0f0f0;
}

.page-admin .admin-alerts-link-empty {
    font-size: 0.8125rem;
    color: var(--text-muted);
    padding: 4px 2px;
}

.page-admin .admin-alerts-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.page-admin .admin-alerts-actions {
    display: flex;
    gap: 6px;
}

.page-admin .admin-alerts-action-btn {
    padding: 6px 10px;
    border: 1px solid var(--border-soft, #ececec);
    border-radius: var(--radius-xs, 8px);
    background: #fff;
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.page-admin .admin-alerts-action-btn.is-primary {
    color: #fff;
    background: var(--text);
    border-color: var(--text);
}

.page-admin .admin-alerts-action-btn.is-muted {
    color: var(--text-muted);
}

.page-admin .admin-alerts-action-btn:active {
    background: #f7f7f7;
}

.page-admin .admin-alerts-item.is-removed {
    display: none;
}

.page-admin .admin-stats-list,
.page-admin .admin-feedback-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-admin .admin-stats-item,
.page-admin .admin-feedback-item {
    display: block;
    padding: 0;
}

.page-admin .admin-feedback-section {
    width: 100%;
    max-width: none;
}

.page-admin .admin-feedback-layout {
    display: block;
}

.page-admin .admin-feedback-section-head {
    padding: 0 4px 10px;
}

.page-admin .admin-feedback-section-head .admin-meals-card-badge {
    background: transparent;
    color: var(--text-muted);
    padding: 0;
}

.page-admin .admin-feedback-section-head .admin-meals-card-badge.is-alert {
    background: transparent;
    color: var(--text-muted);
}

.page-admin .admin-feedback-list-card .admin-feedback-list {
    padding: 12px 16px 16px;
}

.page-admin .admin-feedback-item {
    margin: 0;
}

.page-admin .admin-feedback-item + .admin-feedback-item {
    margin-top: 10px;
    border-top: none;
}

.page-admin .admin-feedback-card {
    border: none;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.page-admin .admin-feedback-item.is-expanded .admin-feedback-card {
    box-shadow: 0 1px 3px rgba(34, 197, 94, 0.12);
}

.page-admin .admin-feedback-card-toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.page-admin .admin-feedback-card-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.page-admin .admin-feedback-card-title {
    display: block;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--text);
    word-break: break-word;
}

.page-admin .admin-feedback-card-title.is-collapsed-only {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.page-admin .admin-feedback-item.is-expanded .admin-feedback-card-title.is-collapsed-only {
    display: none;
}

.page-admin .admin-feedback-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.page-admin .admin-feedback-card-author {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.page-admin .admin-feedback-card-date {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.page-admin .admin-feedback-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
}

.page-admin .admin-feedback-status.is-pending {
    background: #f3f4f6;
    color: #6b7280;
}

.page-admin .admin-feedback-status.is-done {
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
}

.page-admin .admin-feedback-status.is-muted {
    background: #f3f4f6;
    color: #9ca3af;
}

.page-admin .admin-feedback-chevron {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s ease;
}

.page-admin .admin-feedback-item.is-expanded .admin-feedback-chevron {
    transform: rotate(180deg);
}

.page-admin .admin-feedback-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
}

.page-admin .admin-feedback-card-body {
    border-top: none;
}

.page-admin .admin-feedback-card-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 16px 4px;
}

.page-admin .admin-feedback-timeline {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 360px;
    overflow-y: auto;
    margin: 8px 12px 12px;
    padding: 4px 4px 4px 0;
}

.page-admin .admin-feedback-message-row {
    display: flex;
    width: 100%;
}

.page-admin .admin-feedback-message-row.is-user {
    justify-content: flex-start;
}

.page-admin .admin-feedback-message-row.is-admin {
    justify-content: flex-end;
}

.page-admin .admin-feedback-message {
    position: relative;
    max-width: 85%;
    padding: 10px 12px;
    border-radius: 16px;
    border: none;
    background: #f3f4f6;
}

.page-admin .admin-feedback-message-row.is-user .admin-feedback-message {
    border-bottom-left-radius: 4px;
}

.page-admin .admin-feedback-message-row.is-admin .admin-feedback-message {
    border-bottom-right-radius: 4px;
    background: rgba(34, 197, 94, 0.14);
}

.page-admin .admin-feedback-message.is-user.is-unread {
    box-shadow: inset 3px 0 0 #22c55e;
}

.page-admin .admin-feedback-message.is-admin {
    background: rgba(34, 197, 94, 0.14);
}

.page-admin .admin-feedback-message.is-deleted .admin-feedback-message-body {
    color: var(--text-muted);
    font-style: italic;
}

.page-admin .admin-feedback-message-actions {
    position: absolute;
    top: 8px;
    right: 8px;
}

.page-admin .admin-feedback-message-body {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.page-admin .admin-feedback-message-time {
    display: block;
    margin-top: 6px;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.page-admin .admin-feedback-message-delete {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 4px;
}

.page-admin .admin-feedback-reply-form {
    padding: 0 12px 12px;
}

.page-admin .admin-feedback-chat-compose {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-admin .admin-feedback-chat-input-wrap {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 6px 8px 6px 12px;
    border: 1px solid var(--border-soft, #e5e7eb);
    border-radius: 22px;
    background: #fff;
}

.page-admin .admin-feedback-chat-input {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    max-height: 120px;
    padding: 8px 0;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--text);
    resize: none;
    overflow-y: auto;
}

.page-admin .admin-feedback-chat-input:focus {
    outline: none;
}

.page-admin .admin-feedback-chat-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #15803d;
    color: #fff;
    cursor: pointer;
}

.page-admin .admin-feedback-chat-send:active {
    background: #166534;
}

.page-admin .admin-feedback-chat-send:disabled {
    opacity: 0.45;
    cursor: default;
}

.page-admin .admin-feedback-chat-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0 4px;
}

.page-admin .admin-feedback-allow-reply {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.page-admin .admin-feedback-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.page-admin .admin-feedback-detail-actions .admin-alerts-action-btn {
    font-size: 0.875rem;
    padding: 8px 12px;
}

.page-admin .admin-feedback-new-replies {
    border: none;
    background: transparent;
    color: #16a34a;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 4px;
    cursor: pointer;
}

.page-admin .admin-subheader-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 999px;
    background: #22c55e;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}

.page-admin .admin-stats-item + .admin-stats-item {
    border-top: 1px solid var(--border-soft, #ececec);
}

.page-admin .admin-stats-label,
.page-admin .admin-feedback-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.page-admin .admin-stats-value,
.page-admin .admin-feedback-user {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
}

.page-admin .admin-panel-note,
.page-admin .admin-maintenance-note {
    margin: 8px 16px 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.page-admin .admin-maintenance-note {
    margin-top: 4px;
}

.page-admin .admin-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 0 4px;
}

.page-admin .admin-pagination-summary {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.page-admin .admin-pagination-actions {
    display: flex;
    gap: 8px;
}

.page-admin .admin-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border-soft, #ececec);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    background: #fff;
}

.page-admin .admin-pagination-btn:active {
    background: #f7f7f7;
}

.page-admin .admin-feedback-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.page-admin .admin-feedback-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-admin .admin-feedback-body {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text);
    word-break: break-word;
    white-space: pre-wrap;
}

.page-admin .admin-alerts-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.page-admin .admin-alerts-type {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
}

.page-admin .admin-alerts-summary {
    font-size: 0.75rem;
    color: var(--text-muted);
    word-break: break-word;
}

.page-admin .admin-alerts-meta {
    flex-shrink: 0;
    font-size: 0.6875rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.page-admin .admin-meals-empty {
    text-align: center;
    padding: 32px 16px 36px;
}

.page-admin .admin-meals-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
    border-radius: 16px;
    background: #f4f4f4;
    color: var(--text-muted);
}

.page-admin .admin-meals-empty-text {
    margin: 0 0 6px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
}

.page-admin .admin-meals-empty-desc {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.profile-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px var(--page-padding) 16px;
    box-sizing: border-box;
}

.page-profile .profile-toolbar {
    position: fixed;
    top: var(--app-header-height, calc(var(--app-header-height-fallback) + var(--safe-top)));
    left: 0;
    right: 0;
    z-index: 18;
    width: 100%;
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
    background: var(--bg);
    border-bottom: 1px solid transparent;
    min-height: 62px;
    box-sizing: border-box;
}

.profile-toolbar-month {
    position: absolute;
    left: var(--page-padding);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: calc(100% - (var(--page-padding) * 2) - 120px);
}

.profile-toolbar-label {
    position: absolute;
    left: var(--page-padding);
    right: var(--page-padding);
    top: 50%;
    transform: translateY(-50%);
    min-width: 0;
    min-height: 1.5rem;
}

.profile-toolbar-label[hidden] {
    display: none !important;
}

.profile-toolbar-label-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.03em;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}

.profile-toolbar-label-period-wrap {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 120px);
    pointer-events: auto;
}

.profile-toolbar-label-period {
    position: static;
    transform: none;
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
}

.page-profile .profile-toolbar.is-stats-view .profile-toolbar-label-period-wrap {
    right: 0;
    max-width: calc(100% - 120px);
}

.page-profile .profile-toolbar.is-stats-view .profile-toolbar-label {
    pointer-events: none;
}

.profile-stats-display-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 1px;
    border: 1px solid #e2e2e2;
    border-radius: 999px;
    background: #f6f6f7;
    pointer-events: auto;
}

.profile-stats-display-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 5px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #888;
    font-size: 0.5625rem;
    font-weight: 850;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
}

.profile-stats-display-toggle-btn.is-active {
    background: #108558;
    color: #fff;
}

.profile-toolbar-center {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.page-profile .profile-toolbar.is-compact-calendar-open {
    padding: 8px var(--page-padding) 2px;
    min-height: 0;
}

.page-profile .profile-toolbar.is-compact-calendar-open .profile-toolbar-center {
    align-items: center;
}

.page-profile .profile-toolbar.is-compact-calendar-open .profile-view-switch,
.page-profile .profile-toolbar.is-compact-calendar-open .profile-toolbar-actions,
.page-profile .profile-toolbar.is-compact-calendar-open .profile-calendar-compact-head {
    flex: 0 0 auto;
    width: auto;
}

.page-profile .profile-toolbar.is-compact-calendar-open .profile-calendar-compact-head {
    margin-left: auto;
}

.page-profile .profile-toolbar.is-compact-calendar-open:not(.is-calendar-view) .profile-calendar-nav.profile-toolbar-nav {
    display: none !important;
}

.profile-toolbar:has(.profile-toolbar-label:not([hidden])) .profile-toolbar-center,
.profile-toolbar:has(.profile-toolbar-month:not([hidden])) .profile-toolbar-center {
    padding-left: 72px;
}

.page-profile .profile-toolbar.is-stats-view:has(.profile-toolbar-label:not([hidden])) .profile-toolbar-center {
    padding-left: 0;
}

.profile-toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 3px;
    border-radius: var(--radius-pill);
    background: var(--surface-gray);
}

.profile-toolbar-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.profile-toolbar-action-btn.is-active {
    background: #fff;
    color: var(--ct-brand);
    box-shadow: var(--shadow-sm);
}

.profile-toolbar-action-btn:active {
    transform: scale(0.97);
}

.profile-filters-wrap {
    padding: var(--profile-filter-bar-gap, 10px) var(--page-padding) 8px;
}

.profile-filters-wrap[hidden] {
    display: none !important;
}

.profile-filters-wrap.is-fixed-popup {
    position: fixed;
    top: calc(var(--app-header-height, calc(var(--app-header-height-fallback) + var(--safe-top))) + var(--profile-toolbar-height, 62px));
    left: 0;
    right: 0;
    /*
     * 선택날짜바(.profile-calendar-compact-selection-bar) 는 fixed z-index:25.
     * 이 래퍼가 20이면 자식 드롭다운(z-index:251)도 스택 컨텍스트 20에 갇혀
     * 날짜바 뒤로 가려짐 → 필터 래퍼를 날짜바보다 위에 둔다.
     */
    z-index: 40;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--profile-filter-bar-gap, 10px) var(--page-padding) 8px;
    background: var(--bg);
    border-bottom: none;
    box-shadow: none;
}

.profile-filters-spacer[hidden] {
    display: none !important;
}

.profile-filters-spacer {
    width: 100%;
    pointer-events: none;
}

.profile-filter-card {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
}

.profile-filter-bar {
    display: flex;
    align-items: stretch;
}

.profile-filter-bar-tabs {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: stretch;
}

.profile-filter-trigger {
    position: relative;
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 40px;
    padding: 10px 6px;
    border: none;
    border-right: 1px solid var(--border);
    background: transparent;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease;
}

.profile-filter-trigger:last-child {
    border-right: 1px solid var(--border);
}

.profile-filter-reset {
    flex-shrink: 0;
    width: 44px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-left: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.profile-filter-reset:disabled {
    opacity: 0.35;
    cursor: default;
}

.profile-filter-reset:not(:disabled):hover {
    color: var(--ct-brand);
    background: var(--ct-brand-soft);
}

.profile-filter-reset:not(:disabled):active {
    background: var(--surface-gray);
}

.profile-filter-reset-icon {
    display: block;
    flex-shrink: 0;
}

.profile-filter-trigger.is-open {
    color: var(--ct-brand);
    font-weight: 700;
}

.profile-filter-trigger.is-filtered:not(.is-open) {
    color: var(--text-secondary);
    font-weight: 700;
}

.profile-filter-trigger-label {
    flex: 1;
    min-width: 0;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-filter-chevron {
    flex-shrink: 0;
    display: block;
    transition: transform 0.15s ease;
}

.profile-filter-trigger.is-open .profile-filter-chevron {
    transform: rotate(180deg);
}

.profile-filter-dropdown {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: visible;
    /* 선택날짜바(25) · 필터 고정바(40) 위 */
    z-index: 50;
    pointer-events: none;
}

.profile-filter-dropdown[hidden] {
    display: none !important;
}

.profile-filter-menu {
    position: fixed;
    z-index: 51;
    min-width: 0;
    border: 1px solid var(--border);
    border-top: none;
    background: #fff;
    pointer-events: auto;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

/* 필터 카드가 드롭다운 기준으로 stacking 되도록 */
.profile-filter-card.is-dropdown-open {
    z-index: 52;
    position: relative;
}

.profile-filter-menu[data-eat-profile-filter-col="1"] {
    border-bottom-left-radius: 15px;
}

.profile-filter-menu[data-eat-profile-filter-col="4"] {
    border-bottom-right-radius: 15px;
}

.profile-filter-menu[hidden] {
    display: none !important;
}

.profile-filter-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.profile-filter-menu--scroll .profile-filter-menu-list {
    max-height: 168px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.profile-filter-menu--scroll .profile-filter-menu-list::-webkit-scrollbar {
    width: 4px;
}

.profile-filter-menu--scroll .profile-filter-menu-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--border-strong);
}

.profile-filter-menu-item {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: transparent;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.profile-filter-menu-list li:last-child .profile-filter-menu-item {
    border-bottom: none;
}

.profile-filter-menu-item.is-active {
    color: var(--ct-brand);
    font-weight: 700;
    background: var(--ct-brand-soft);
}

.profile-filter-menu-item:active {
    background: var(--surface-gray);
}

.profile-filter-menu-custom-row {
    display: flex;
    flex-direction: column;
}

.profile-filter-menu-item--custom.is-active {
    color: var(--ct-brand);
}

.profile-filter-cuisine-custom {
    width: 100%;
    min-height: 40px;
    padding: 10px 12px;
    border: none;
    border-top: 1px solid var(--border);
    background: #fff;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

.profile-filter-cuisine-custom:focus {
    outline: none;
    background: var(--ct-brand-soft);
}

.profile-filter-cuisine-custom[hidden] {
    display: none !important;
}

.profile-view-btn.is-filtered,
.profile-view-btn.is-active.is-filtered {
    color: var(--ct-brand);
}

.profile-toolbar .profile-calendar-nav.profile-toolbar-nav {
    display: none;
    position: absolute;
    right: var(--page-padding);
    top: 50%;
    transform: translateY(-50%);
}

.profile-toolbar.is-calendar-view .profile-calendar-nav.profile-toolbar-nav {
    display: inline-flex;
}

.page-profile .profile-toolbar.is-stats-view .profile-calendar-nav.profile-toolbar-nav {
    display: none !important;
}

.profile-toolbar-month[hidden] {
    display: none !important;
}

.profile-toolbar-month .profile-calendar-month-name {
    font-size: 1.375rem;
}

.profile-toolbar-nav {
    gap: 0;
}

.profile-calendar-nav.profile-toolbar-nav {
    gap: 0;
}

.profile-toolbar-nav .profile-calendar-today-btn {
    padding: 0 2px;
}

.profile-toolbar-nav .profile-calendar-nav-btn {
    width: 24px;
    height: 24px;
}

.profile-calendar-today-btn {
    min-height: 28px;
    padding: 0 8px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ct-brand);
    cursor: pointer;
    white-space: nowrap;
}

.profile-calendar-today-btn:active {
    opacity: 0.72;
}

.profile-view-switch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 3px;
    border-radius: var(--radius-pill);
    background: var(--surface-gray);
}

.profile-photos-scope-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    padding: 2px;
    border-radius: var(--radius-pill);
    background: var(--surface-gray);
}

.profile-photos-scope-switch[hidden] {
    display: none !important;
}

.profile-photos-scope-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 10px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.profile-photos-scope-btn.is-active {
    background: #fff;
    color: var(--ct-brand);
    box-shadow: var(--shadow-sm);
}

.profile-photos-scope-btn:active {
    opacity: 0.72;
}

.page-profile .profile-toolbar.is-photos-view .profile-photos-scope-switch {
    margin-left: auto;
}

.profile-view-btn[data-eat-profile-view="calendar"] {
    display: none !important;
}

.page-profile .profile-toolbar.is-stats-view .profile-view-btn[data-eat-profile-calendar-compact-toggle],
.page-profile .profile-toolbar.is-stats-view .profile-view-btn[data-eat-profile-filter-toggle],
.page-profile .profile-toolbar.is-photos-view .profile-view-btn[data-eat-profile-calendar-compact-toggle],
.page-profile .profile-toolbar.is-photos-view .profile-view-btn[data-eat-profile-filter-toggle] {
    display: none !important;
}

.profile-view-btn[hidden] {
    display: none !important;
}

.profile-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.profile-view-btn.is-active {
    background: #fff;
    color: var(--ct-brand);
    box-shadow: var(--shadow-sm);
}

.profile-view-btn:active {
    transform: scale(0.97);
}

.profile-view-btn[data-eat-profile-list-detail-toggle] {
    position: relative;
}

.profile-view-btn .profile-view-icon--list,
.profile-view-btn .profile-view-icon--detail {
    display: none;
}

.profile-view-btn .profile-view-icon--list.is-shown,
.profile-view-btn .profile-view-icon--detail.is-shown {
    display: block;
}

.profile-view-icon {
    display: block;
}

.profile-calendar-view {
    padding: 0 var(--page-padding) 28px;
}

.profile-calendar-view {
    padding: 0 var(--page-padding) 28px;
}

.profile-calendar-compact-view {
    position: relative;
    padding: 0;
    margin-bottom: var(--profile-calendar-compact-list-gap, 36px);
}

.profile-calendar-compact-view:not([hidden]) {
    margin-top: -4px;
}

.profile-calendar-compact-view.is-month-expanded-host {
    height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    pointer-events: none;
}

.profile-calendar-compact-view.is-month-expanded-host .profile-calendar-compact-scroller {
    height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
}

.profile-calendar-compact-view.is-month-expanded-host .profile-calendar-compact-month:not(.is-expanding) {
    visibility: hidden;
    pointer-events: none;
}

/*
 * 선택날짜바는 body 포탈 또는 인라인 모두 not([hidden]) 일 때 보여야 함.
 * expanded-host 에서 무조건 display:none 하면 언마운트 시 바가 사라짐.
 */
.profile-calendar-compact-view.is-month-expanded-host .profile-calendar-compact-selection-bar[hidden],
.profile-calendar-compact-view.is-month-expanded-host .profile-calendar-compact-selection-spacer[hidden] {
    display: none !important;
}

.profile-calendar-compact-view.is-month-expanded-host .profile-calendar-compact-month.is-expanding {
    pointer-events: auto;
}

.profile-calendar-compact-spacer:not([hidden]) {
    margin-bottom: var(--profile-calendar-compact-list-gap, 36px);
}

.profile-calendar-compact-spacer.is-docked-shrunk:not([hidden]) {
    margin-bottom: calc(var(--profile-calendar-compact-list-gap, 36px) + var(--profile-calendar-compact-docked-list-gap, 12px));
}

.profile-calendar-compact-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
    flex-shrink: 0;
    padding: 0;
    text-align: right;
}

.profile-calendar-compact-head[hidden] {
    display: none !important;
}

.profile-calendar-compact-year {
    padding: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.03em;
    line-height: 1.1;
    cursor: pointer;
}

.profile-calendar-compact-year.is-active,
.profile-calendar-compact-year[aria-expanded="true"] {
    color: var(--ct-brand);
}

.profile-calendar-compact-year:active {
    opacity: 0.72;
}

.profile-calendar-compact-date {
    padding: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ct-brand);
    letter-spacing: -0.01em;
    line-height: 1.1;
    cursor: pointer;
}

.profile-calendar-compact-date:active {
    opacity: 0.72;
}

.profile-calendar-compact-view[hidden] {
    display: none !important;
}

.profile-calendar-compact-spacer[hidden] {
    display: none !important;
}

.profile-calendar-compact-spacer {
    width: 100%;
    pointer-events: none;
}

.profile-calendar-compact-view.is-fixed-popup {
    position: fixed;
    top: calc(var(--app-header-height, calc(var(--app-header-height-fallback) + var(--safe-top))) + var(--profile-toolbar-height, 62px) + var(--profile-filter-popup-height, 0px));
    left: var(--compact-calendar-dock-left, 0);
    right: auto;
    z-index: 19;
    width: var(--compact-calendar-dock-width, 100%);
    max-width: none;
    margin: 0;
    background: var(--bg);
}

.profile-calendar-compact-view.is-scroll-docked.is-fixed-popup {
    width: calc(var(--compact-calendar-dock-width, 100%) / var(--compact-calendar-scale, 1));
    transform: scale(var(--compact-calendar-scale, 1));
    transform-origin: top left;
    will-change: transform;
    box-sizing: border-box;
}

.profile-calendar-compact-view.is-scroll-docked-shrunk .profile-calendar-compact-scroller {
    padding-bottom: 4px;
}

.profile-calendar-compact-view.is-scroll-docked-shrunk .profile-calendar-compact-months {
    gap: 6px;
}

@media (min-width: 801px) {
    .profile-calendar-compact-view.is-fixed-popup {
        box-shadow: none;
    }
}

.profile-calendar-compact-view.is-scroll-docked .profile-calendar-compact-month-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 4px;
    padding: 0;
    font-weight: 400;
    transform: scale(calc(1 / var(--compact-calendar-scale, 1)));
    transform-origin: top center;
}

.profile-calendar-compact-view.is-scroll-docked-shrunk .profile-calendar-compact-month-label {
    width: 36px;
    height: 36px;
    border: 0 !important;
    outline: none !important;
    background: #fff;
    border-radius: 50%;
    box-shadow: none !important;
    color: #000;
}

.profile-calendar-compact-month:not(.is-expanding) .profile-calendar-compact-month-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 auto 8px;
    padding: 0;
    background: #fff;
    border-radius: 50%;
}

.profile-calendar-compact-selection-bar {
    display: none;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    padding: 6px 8px;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    pointer-events: auto;
}

.profile-calendar-compact-selection-bar:not([hidden]) {
    display: inline-flex;
    position: fixed;
    /*
     * 필터 바(40) · 드롭다운(50+) 아래, 일반 콘텐츠·미니캘린더 위.
     * 드롭다운이 날짜바를 덮어 보여야 함.
     */
    z-index: 30;
    width: max-content;
    max-width: calc(100vw - 24px);
    left: 50%;
    transform: translateX(-50%);
}

.profile-calendar-compact-selection-bar[hidden] {
    display: none !important;
}

.profile-calendar-compact-selection-bar::-webkit-scrollbar {
    display: none;
}

.profile-calendar-compact-selection-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--ct-brand);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.profile-calendar-compact-selection-icon:hover,
.profile-calendar-compact-selection-icon.is-active {
    background: var(--ct-brand-soft);
}

.profile-calendar-compact-selection-icon:active {
    opacity: 0.72;
}

.profile-calendar-compact-selection-icon-svg {
    display: block;
}

.profile-calendar-compact-selection-kind {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 14px;
    border-radius: 999px;
    background: #3d5a99;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.profile-calendar-compact-selection-kind[hidden] {
    display: none !important;
}

.profile-calendar-compact-selection-dates {
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.profile-calendar-compact-selection-dates::-webkit-scrollbar {
    display: none;
}

.profile-calendar-compact-selection-dates-group {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 14px;
    border-radius: 999px;
    background: #e4e9f3;
    color: #2c4170;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.profile-calendar-compact-selection-dates-group.is-date-list-group {
    gap: 10px;
    padding: 0 12px;
}

.profile-calendar-compact-selection-date-item {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.profile-calendar-compact-selection-spacer {
    width: 100%;
    pointer-events: none;
}

.profile-calendar-compact-selection-spacer[hidden] {
    display: none !important;
}

.profile-calendar-compact-view.is-selection-calendar-hidden {
    margin-bottom: 12px;
}

.profile-calendar-compact-month.is-expanding.is-hidden-for-selection {
    display: none !important;
}

.profile-calendar-compact-view.is-selection-calendar-hidden .profile-calendar-compact-scroller,
.profile-calendar-compact-scroller.is-selection-calendar-hidden {
    display: none;
}

.profile-calendar-compact-scroller.is-selection-solo-view,
.profile-calendar-compact-view.is-selection-solo-view .profile-calendar-compact-scroller {
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding: 18px 20px 28px;
}

.profile-calendar-compact-scroller.is-selection-solo-view .profile-calendar-compact-months,
.profile-calendar-compact-view.is-selection-solo-view .profile-calendar-compact-months {
    justify-content: center;
    width: 100%;
    padding: 0;
}

.profile-calendar-compact-scroller.is-selection-solo-view .profile-calendar-compact-month:not(.is-expanding),
.profile-calendar-compact-view.is-selection-solo-view .profile-calendar-compact-month:not(.is-expanding) {
    display: none !important;
}

.profile-calendar-compact-scroller.is-selection-solo-view .profile-calendar-compact-sentinel,
.profile-calendar-compact-view.is-selection-solo-view .profile-calendar-compact-sentinel {
    display: none;
}

.profile-calendar-compact-scroller {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 0 0 14px;
}

.profile-calendar-compact-scroller.is-locked {
    overflow: hidden;
}

.profile-calendar-compact-scroller::-webkit-scrollbar {
    display: none;
}

.profile-calendar-compact-sentinel {
    flex: 0 0 20px;
    width: 20px;
    min-width: 20px;
    height: 1px;
    pointer-events: none;
}

.profile-calendar-compact-months {
    display: inline-flex;
    align-items: stretch;
    gap: 9px;
    min-width: min-content;
    padding: 0;
}

.profile-calendar-compact-month {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 178px;
    width: 178px;
    scroll-snap-align: center;
    padding: 10px 8px 11px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-sizing: border-box;
    cursor: pointer;
    transition: opacity 0.22s ease, transform 0.22s ease, width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), padding 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.profile-calendar-compact-month:hover {
    border-color: #d2d2d0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.profile-calendar-compact-month:active:not(.is-expanding) {
    transform: scale(0.97);
}

.profile-calendar-compact-month.is-dimmed {
    opacity: 0;
    pointer-events: none;
}

.profile-calendar-compact-month.is-no-data {
    opacity: 0.34;
    pointer-events: none;
    cursor: default;
    border-color: #ececea;
    background: #fafaf9;
    box-shadow: none;
}

.profile-calendar-compact-month.is-no-data:hover,
.profile-calendar-compact-month.is-no-data:active {
    transform: none;
    border-color: #ececea;
    box-shadow: none;
}

.profile-calendar-compact-month.is-no-data .profile-calendar-compact-month-label {
    color: var(--text-muted);
}

.profile-calendar-compact-day.is-no-data {
    opacity: 0.38;
    pointer-events: none;
    cursor: default;
}

.profile-calendar-compact-day.is-no-data .profile-calendar-compact-day-num {
    color: var(--text-muted);
}

.profile-calendar-compact-month.is-expanding .profile-calendar-compact-day.is-no-data .profile-calendar-compact-day-num {
    color: var(--text-muted);
}

.profile-calendar-compact-month.is-expanding {
    position: fixed;
    top: calc(var(--app-header-height, calc(var(--app-header-height-fallback) + var(--safe-top))) + var(--profile-toolbar-height, 62px) + var(--profile-filter-popup-height, 0px) + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 21;
    width: min(340px, calc(100vw - 40px));
    max-height: calc(100vh - var(--app-header-height, calc(var(--app-header-height-fallback) + var(--safe-top))) - var(--profile-toolbar-height, 62px) - 32px);
    overflow-y: auto;
    padding: 18px 16px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
    border-color: #d8d8d6;
    cursor: default;
}

.profile-calendar-compact-month.is-expanding:active {
    transform: translateX(-50%);
}

.profile-calendar-compact-card-close,
.profile-calendar-compact-card-reset {
    display: none;
}

.profile-calendar-compact-month.is-expanding .profile-calendar-compact-card-close,
.profile-calendar-compact-month.is-expanding .profile-calendar-compact-card-reset {
    display: flex;
}

.profile-calendar-compact-card-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f1f1ef;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease 0.1s, background 0.12s ease;
}

.profile-calendar-compact-month.is-expanding .profile-calendar-compact-card-close {
    opacity: 1;
}

.profile-calendar-compact-card-close svg {
    width: 13px;
    height: 13px;
    stroke: var(--text);
    stroke-width: 2.2;
}

.profile-calendar-compact-card-close:hover {
    background: #e7e7e5;
}

.profile-calendar-compact-card-reset {
    position: absolute;
    top: 14px;
    left: 14px;
    height: 26px;
    padding: 0 10px;
    border-radius: 13px;
    background: #f1f1ef;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.15s ease 0.1s, background 0.12s ease, color 0.12s ease;
}

.profile-calendar-compact-month.is-expanding .profile-calendar-compact-card-reset {
    opacity: 1;
}

.profile-calendar-compact-card-reset svg {
    width: 11px;
    height: 11px;
    stroke: currentColor;
    stroke-width: 2.2;
}

.profile-calendar-compact-card-reset:hover {
    background: #e7e7e5;
}

.profile-calendar-compact-selection-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.profile-calendar-compact-selection-pill {
    position: absolute;
    background: #e4e9f3;
    border-radius: 999px;
}

.profile-calendar-compact-month-label {
    margin-bottom: 8px;
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
    text-align: center;
}

.profile-calendar-compact-month.is-expanding .profile-calendar-compact-month-label {
    font-size: 1.125rem;
    width: auto;
    height: auto;
    margin-bottom: 14px;
    background: transparent;
    border-radius: 0;
}

.profile-calendar-compact-body {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
    align-self: stretch;
}

.profile-calendar-compact-month.is-expanding .profile-calendar-compact-body {
    grid-template-columns: 30px repeat(7, minmax(0, 1fr));
}

.profile-calendar-compact-dow-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    margin-bottom: 2px;
}

.profile-calendar-compact-dow {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--text-muted);
    line-height: 1.2;
}

.profile-calendar-compact-dow--spacer {
    display: none;
}

.profile-calendar-compact-month.is-expanding .profile-calendar-compact-dow--spacer {
    display: block;
}

.profile-calendar-compact-dow.is-sunday {
    color: #e0533d;
}

.profile-calendar-compact-dow.is-saturday {
    color: #2f6fe0;
}

.profile-calendar-compact-dow-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    transition: background 0.12s ease, color 0.12s ease;
}

.profile-calendar-compact-month.is-expanding .profile-calendar-compact-dow-badge {
    width: 26px;
    height: 26px;
}

.profile-calendar-compact-month.is-expanding .profile-calendar-compact-dow {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.profile-calendar-compact-month.is-expanding .profile-calendar-compact-dow:hover .profile-calendar-compact-dow-badge {
    background: #f1f1ef;
}

.profile-calendar-compact-dow.is-col-selected .profile-calendar-compact-dow-badge {
    background: #3d5a99 !important;
    color: #fff !important;
}

.profile-calendar-compact-month.is-expanding .profile-calendar-compact-dow {
    font-size: 0.8125rem;
}

.profile-calendar-compact-weeks {
    display: contents;
}

.profile-calendar-compact-week-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    margin-bottom: 1px;
}

@supports not (grid-template-columns: subgrid) {
    .profile-calendar-compact-body {
        display: block;
    }

    .profile-calendar-compact-weeks {
        display: block;
    }

    .profile-calendar-compact-dow-row,
    .profile-calendar-compact-week-row {
        grid-column: auto;
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .profile-calendar-compact-month.is-expanding .profile-calendar-compact-dow-row,
    .profile-calendar-compact-month.is-expanding .profile-calendar-compact-week-row {
        grid-template-columns: 30px repeat(7, minmax(0, 1fr));
    }
}

.profile-calendar-compact-week-label {
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: -0.02em;
}

.profile-calendar-compact-month.is-expanding .profile-calendar-compact-week-label {
    display: flex;
    cursor: pointer;
}

.profile-calendar-compact-week-label-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    transition: background 0.12s ease, color 0.12s ease;
}

.profile-calendar-compact-month.is-expanding .profile-calendar-compact-week-label:hover .profile-calendar-compact-week-label-badge {
    background: #f1f1ef;
}

.profile-calendar-compact-week-label.is-row-selected .profile-calendar-compact-week-label-badge,
.profile-calendar-compact-month.is-expanding .profile-calendar-compact-week-label.is-row-selected:hover .profile-calendar-compact-week-label-badge {
    background: #3d5a99;
    color: #fff;
}

.profile-calendar-compact-day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 25px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.profile-calendar-compact-month.is-expanding .profile-calendar-compact-day {
    height: 44px;
}

.profile-calendar-compact-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1;
    border-radius: 50%;
    position: relative;
    z-index: 2;
}

.profile-calendar-compact-view.is-scroll-docked-shrunk .profile-calendar-compact-month:not(.is-expanding) .profile-calendar-compact-month-label {
    position: relative;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0 !important;
    outline: none !important;
    background: transparent;
    box-shadow: none !important;
    color: #000;
    overflow: visible;
}

.profile-calendar-compact-view.is-scroll-docked-shrunk .profile-calendar-compact-month:not(.is-expanding) .profile-calendar-compact-month-label::before {
    content: '';
    position: absolute;
    inset: -3px;
    z-index: -1;
    border: 0 !important;
    outline: none !important;
    border-radius: 50%;
    background: #fff;
    box-shadow: none !important;
}

.profile-calendar-compact-month.is-expanding .profile-calendar-compact-day-num {
    width: 32px;
    height: 32px;
    font-size: 0.9375rem;
}

.profile-calendar-compact-day.is-sunday:not(.is-outside) .profile-calendar-compact-day-num {
    color: #e0533d;
}

.profile-calendar-compact-day.is-saturday:not(.is-outside) .profile-calendar-compact-day-num {
    color: #2f6fe0;
}

.profile-calendar-compact-day.is-outside .profile-calendar-compact-day-num {
    color: #d8d8d6;
}

.profile-calendar-compact-day-num.is-ghost-num {
    font-style: italic;
    font-weight: 500;
}

.profile-calendar-compact-day.is-today:not(.is-selected) .profile-calendar-compact-day-num {
    background: var(--ct-brand);
    color: #fff;
    font-weight: 800;
}

.profile-calendar-compact-day.is-selected .profile-calendar-compact-day-num {
    background: var(--ct-brand);
    color: #fff;
    font-weight: 700;
}

.profile-calendar-compact-day-num.is-cell-selected {
    color: #2c4170;
    font-weight: 800;
}

.profile-calendar-compact-day.is-today .profile-calendar-compact-day-num.is-cell-selected {
    color: #fff;
}

.profile-calendar-compact-day-num.is-range-endpoint {
    background: #3d5a99 !important;
    color: #fff !important;
}

.profile-calendar-compact-view .profile-calendar-markers {
    position: absolute;
    bottom: -1px;
    min-height: 4px;
    gap: 2px;
    z-index: 2;
}

.profile-calendar-compact-view .profile-calendar-marker.is-dot {
    width: 3px;
    height: 3px;
}

.profile-calendar-compact-month.is-expanding .profile-calendar-compact-view .profile-calendar-marker.is-dot,
.profile-calendar-compact-month.is-expanding .profile-calendar-marker.is-dot {
    width: 4.5px;
    height: 4.5px;
}

.profile-calendar-compact-view .profile-calendar-meal-bar {
    width: 14px;
    height: 3px;
}

@media (max-width: 380px) {
    .profile-calendar-compact-month {
        width: 160px;
        flex-basis: 160px;
    }

    .profile-calendar-compact-month.is-expanding {
        width: min(300px, calc(100vw - 32px));
    }
}

.profile-calendar-month {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.profile-calendar-month-name {
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.profile-calendar-year {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: -0.01em;
}

.profile-calendar-nav {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.profile-calendar-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.profile-calendar-nav-btn:hover {
    color: var(--text-secondary);
}

.profile-calendar-nav-btn:active {
    transform: scale(0.96);
}

.profile-calendar {
    width: 100%;
}

.profile-calendar-weekdays {
    display: grid;
    grid-template-columns: 2.5rem repeat(7, 1fr);
    margin-top: 4px;
    margin-bottom: 8px;
    background: var(--bg);
    padding-bottom: 8px;
}

.profile-toolbar.is-calendar-view ~ .profile-calendar-view .profile-calendar-weekdays {
    position: fixed;
    top: calc(var(--app-header-height, calc(var(--app-header-height-fallback) + var(--safe-top))) + var(--profile-toolbar-height, 62px));
    left: 0;
    right: 0;
    z-index: 17;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 4px var(--page-padding) 8px;
    box-sizing: border-box;
}

.profile-calendar-sentinel {
    width: 100%;
    height: 1px;
    pointer-events: none;
}

.profile-calendar-months {
    width: 100%;
}

.profile-calendar-month-block + .profile-calendar-month-block {
    margin-top: 16px;
}

.profile-calendar-day--empty {
    min-height: 58px;
    pointer-events: none;
}

.profile-calendar-weekday-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
}

.profile-calendar-weekday {
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
}

.profile-calendar-weekday.is-sunday {
    color: #d64545;
}

.profile-calendar-weekday.is-saturday {
    color: #3b6fd4;
}

.profile-calendar-grid {
    display: grid;
    grid-template-columns: 2.5rem repeat(7, minmax(0, 1fr));
    gap: 2px 0;
}

.profile-calendar-week-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: -0.02em;
}

.profile-calendar-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 58px;
    padding: 2px 0 4px;
    border: none;
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.profile-calendar-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.profile-calendar-day.is-sunday:not(.is-outside) .profile-calendar-day-num {
    color: #d64545;
}

.profile-calendar-day.is-saturday:not(.is-outside) .profile-calendar-day-num {
    color: #3b6fd4;
}

.profile-calendar-day.is-outside .profile-calendar-day-num {
    color: #c8c8c8;
    font-weight: 500;
}

.profile-calendar-day.is-today:not(.is-selected) .profile-calendar-day-num {
    box-shadow: inset 0 0 0 2px var(--ct-brand);
}

.profile-calendar-day.is-selected .profile-calendar-day-num {
    background: var(--ct-brand);
    color: #fff;
    font-weight: 700;
}

.profile-calendar-day.is-sunday.is-selected .profile-calendar-day-num,
.profile-calendar-day.is-saturday.is-selected .profile-calendar-day-num {
    color: #fff;
}

.profile-calendar-markers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 6px;
}

.profile-calendar-markers--below {
    margin-top: 2px;
}

.profile-calendar-marker.is-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.profile-calendar-marker.is-dot.is-breakfast {
    background: #ff9f0a;
}

.profile-calendar-marker.is-dot.is-lunch {
    background: #34c759;
}

.profile-calendar-marker.is-dot.is-dinner {
    background: #5e5ce6;
}

.profile-calendar-marker.is-dot.is-late_night {
    background: #bf5af2;
}

.profile-calendar-meal-bar {
    display: flex;
    align-items: stretch;
    width: 22px;
    height: 5px;
    border-radius: 3px;
    overflow: hidden;
}

.profile-calendar-meal-bar-segment {
    flex: 1 1 0;
    min-width: 0;
}

.profile-calendar-meal-bar-segment.is-breakfast {
    background: #ff9f0a;
}

.profile-calendar-meal-bar-segment.is-lunch {
    background: #34c759;
}

.profile-calendar-meal-bar-segment.is-dinner {
    background: #5e5ce6;
}

.profile-calendar-meal-bar-segment.is-late_night {
    background: #bf5af2;
}

.profile-filters::-webkit-scrollbar {
    display: none;
}

.profile-filter {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--surface-gray);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.profile-filter.is-active {
    background: #fff;
    color: var(--ct-brand);
    box-shadow: var(--shadow-sm);
}

.profile-groups[hidden],
.profile-calendar-view[hidden] {
    display: none !important;
}

.profile-groups {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 var(--page-padding);
}

.profile-groups.has-calendar-selection-bar {
    margin-top: 56px;
}

.profile-groups.is-photos-view {
    gap: 8px;
}

.page-profile .profile-groups.is-photos-view.is-profile-photos-pending {
    visibility: hidden;
}

.profile-groups.is-photos-view .profile-date-badge,
.profile-groups.is-photos-view .profile-date-header {
    display: none;
}

.profile-groups.is-photos-view .profile-date-card {
    border: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    padding: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.profile-groups.is-photos-view.is-photos-scope-all {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    align-items: start;
    grid-auto-rows: min-content;
}

.profile-groups.is-photos-view.is-photos-scope-all .profile-meal-item--photo-slot:not([hidden]) {
    align-self: start;
    contain: layout;
}

.profile-groups.is-photos-view.is-photos-scope-all > .profile-date-group:not([hidden]) {
    display: contents;
}

.profile-groups.is-photos-view.is-photos-scope-all .profile-date-card,
.profile-groups.is-photos-view.is-photos-scope-all .profile-meal-list--photo-all {
    display: contents;
}

/* From meal_management-2.html first photo month badge (2026년 7월):
   top-3 left-3 bg-gradient-to-r from-amber-500 via-orange-500 to-rose-500
   text-white font-extrabold shadow-[0_3px_10px_rgba(249,115,22,0.4)]
   border border-white/20 text-[10px] px-2.5 py-1 rounded-lg */
.profile-groups.is-photos-view.is-photos-scope-all .profile-photos-all-month-label {
    position: absolute;
    top: 12px; /* top-3 */
    left: 12px; /* left-3 */
    z-index: 10;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    margin: 0;
    padding: 4px 10px; /* py-1 px-2.5 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* border-white/20 */
    border-radius: 8px; /* rounded-lg */
    background: linear-gradient(to right, #f59e0b, #f97316, #f43f5e); /* amber-500 → orange-500 → rose-500 */
    color: #ffffff;
    font-size: 10px; /* text-[10px] */
    font-weight: 800; /* font-extrabold */
    letter-spacing: -0.025em; /* tracking-tight */
    line-height: 1; /* leading-none */
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 3px 10px rgba(249, 115, 22, 0.4);
    -webkit-text-stroke: 0;
    text-shadow: none;
    paint-order: normal;
    transform: scale(1);
    transform-origin: top left;
}

.profile-groups.is-photos-view.is-photos-scope-all .profile-photos-all-month-label.is-visible {
    opacity: 1;
}

.profile-groups.is-photos-view.is-photos-scope-all .profile-meal-item--photo-slot:hover .profile-photos-all-month-label.is-visible,
.profile-groups.is-photos-view.is-photos-scope-all .profile-meal-item--photo-slot:hover .profile-photos-all-month-label {
    transform: scale(1.05); /* group-hover:scale-105 */
}

.profile-photos-month-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-photos-month-grid {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2px;
    row-gap: 10px;
    align-items: flex-start;
}

.profile-groups.is-photos-view .profile-date-group {
    margin-top: 0;
}

.profile-groups.is-photos-view .profile-date-group:not([hidden]) {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.profile-groups.is-photos-view .profile-meal-list--photo-slots {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

.profile-groups.is-photos-view .profile-meal-item--photo-slot {
    display: block;
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    border-top: none;
}

.profile-groups.is-photos-view .profile-meal-item--photo-slot .profile-meal {
    display: block;
    width: 100%;
    height: 100%;
}

.profile-groups.is-photos-view .profile-meal-item--photo-slot .profile-meal-summary {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    margin: 0;
    border: none;
    background: transparent;
    cursor: default;
    pointer-events: none;
    line-height: 0;
    overflow: visible;
}

.profile-groups.is-photos-view .profile-meal-item--photo-slot:not(.profile-meal-item--photo-empty) .profile-meal-summary {
    cursor: pointer;
    pointer-events: auto;
}

.profile-groups.is-photos-view .profile-meal-item--photo-slot:not(.profile-meal-item--photo-empty) {
    position: relative;
}

.profile-groups.is-photos-view .profile-meal-item--photo-slot.is-photos-bubble-open {
    z-index: 40;
    overflow: visible;
}

.profile-groups.is-photos-view .profile-meal-item--photo-slot.is-photos-bubble-open .profile-meal-summary {
    z-index: 1;
}

.profile-photos-info-bubble {
    --profile-photos-bubble-ink: #ffffff;
    --profile-photos-bubble-ink-soft: rgba(255, 255, 255, 0.76);
    --profile-photos-bubble-cream: rgba(255, 255, 255, 0.16);
    --profile-photos-bubble-green-1: #214d3c;
    --profile-photos-bubble-green-2: #1a3f31;
    --profile-photos-bubble-olive: #e2ebe5;
    --profile-photos-bubble-olive-bg: rgba(255, 255, 255, 0.12);
    --profile-photos-bubble-line: rgba(255, 255, 255, 0.18);
    --profile-photos-bubble-shadow: rgba(15, 35, 28, 0.38);
    position: fixed;
    z-index: 999;
    width: 296px;
    max-width: 296px;
    min-width: 180px;
    box-sizing: border-box;
    padding: 20px 22px;
    border-radius: 6px;
    background: linear-gradient(168deg, var(--profile-photos-bubble-green-1), var(--profile-photos-bubble-green-2));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 18px 30px -12px var(--profile-photos-bubble-shadow);
    overflow: visible;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 150ms ease,
        visibility 150ms ease,
        top 160ms ease,
        left 160ms ease;
    pointer-events: none;
    will-change: opacity, top, left;
}

.profile-photos-info-bubble.is-anchored-slot {
    position: fixed;
    z-index: 999;
}

.profile-photos-info-bubble.is-visible {
    opacity: 1;
    visibility: visible;
}

.profile-photos-info-bubble.is-visible.is-interactive {
    pointer-events: auto;
}

.profile-photos-info-bubble-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
}

.profile-photos-info-bubble-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.78125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.35;
    color: var(--profile-photos-bubble-ink-soft);
    text-align: center;
}

.profile-photos-info-bubble-eyebrow-dot {
    flex-shrink: 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--profile-photos-bubble-ink-soft);
    opacity: 0.6;
}

.profile-photos-info-bubble-divider {
    height: 1px;
    margin: 12px 0;
    background: var(--profile-photos-bubble-line);
}

.profile-photos-info-bubble-divider[hidden] {
    display: none;
}

.profile-photos-info-bubble-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.profile-photos-info-bubble-tags[hidden] {
    display: none;
}

.profile-photos-info-bubble-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 0.78125rem;
    font-weight: 600;
    line-height: 1.35;
    background: var(--profile-photos-bubble-cream);
    color: var(--profile-photos-bubble-ink);
    white-space: nowrap;
}

.profile-photos-info-bubble-tag.is-style {
    background: var(--profile-photos-bubble-olive-bg);
    color: var(--profile-photos-bubble-olive);
    white-space: normal;
    text-align: center;
}

.profile-photos-info-bubble-dishes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: 4px;
    width: 100%;
    max-width: 100%;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--profile-photos-bubble-ink);
}

.profile-photos-info-bubble-dishes[hidden] {
    display: none;
}

.profile-photos-info-bubble-dish {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: keep-all;
}

.profile-photos-info-bubble-dish-sep {
    flex: 0 0 auto;
    margin: 0 6px;
    font-weight: 500;
    color: var(--profile-photos-bubble-ink-soft);
}

.profile-photos-info-bubble-tail {
    position: absolute;
    left: var(--profile-photos-bubble-tail-x, 50%);
    bottom: -18px;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    overflow: hidden;
    pointer-events: none;
}

.profile-photos-info-bubble-tail::before {
    content: '';
    position: absolute;
    top: -17px;
    left: 3px;
    width: 16px;
    height: 28px;
    background: var(--profile-photos-bubble-tail-color, var(--profile-photos-bubble-green-1));
    border-radius: 2px;
    transform: rotate(45deg);
    box-shadow: none;
}

@media (max-width: 599px) {
    .profile-photos-info-bubble,
    .profile-photos-info-bubble.is-anchored-slot {
        width: 248px;
        max-width: min(248px, calc(100vw - 40px));
        min-width: 160px;
        padding: 16px 16px;
        border-radius: 4px;
    }

    .profile-photos-info-bubble-eyebrow {
        font-size: 0.75rem;
    }

    .profile-photos-info-bubble-tag {
        font-size: 0.75rem;
        padding: 3px 9px;
    }

    .profile-photos-info-bubble-dishes {
        font-size: 0.9375rem;
        line-height: 1.45;
    }
}

.profile-photos-info-bubble::after {
    content: none;
}

.profile-photos-info-bubble.is-tail-bottom .profile-photos-info-bubble-tail {
    bottom: -18px;
    top: auto;
    transform: translateX(-50%);
}

.profile-photos-info-bubble.is-tail-bottom {
    --profile-photos-bubble-tail-color: var(--profile-photos-bubble-green-2);
}

.profile-photos-info-bubble.is-tail-top .profile-photos-info-bubble-tail {
    bottom: auto;
    top: -18px;
    transform: translateX(-50%);
}

.profile-photos-info-bubble.is-tail-top .profile-photos-info-bubble-tail::before {
    top: auto;
    bottom: -17px;
}

.profile-photos-info-bubble.is-tail-top {
    --profile-photos-bubble-tail-color: var(--profile-photos-bubble-green-1);
}

.profile-photos-info-bubble.is-tail-left::after,
.profile-photos-info-bubble.is-tail-right::after {
    content: none;
}

.profile-groups.is-photos-view .profile-meal-item--photo-slot .profile-meal-thumb {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: unset;
    flex-shrink: 0;
    border-radius: 0;
    overflow: hidden;
    background: var(--surface-gray);
}

.profile-groups.is-photos-view .profile-meal-item--photo-slot .profile-meal-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.profile-groups.is-photos-view .profile-photos-day-head-item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: block;
    margin: 0;
    padding: 6px 8px 0;
    list-style: none;
    pointer-events: none;
}

.profile-groups.is-photos-view .profile-photos-day-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.profile-groups.is-photos-view .profile-photos-day-head-label {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.profile-groups.is-photos-view .profile-photos-day-head-label.is-visible {
    opacity: 1;
}

.profile-groups.is-photos-view .profile-meal-list--photo-slots:not(.is-photos-day-no-images) .profile-photos-day-head-label {
    font-weight: 800;
    -webkit-text-stroke: 0.6px rgba(0, 0, 0, 0.82);
    paint-order: stroke fill;
    text-shadow:
        -1px -1px 0 rgba(0, 0, 0, 0.78),
        0 -1px 0 rgba(0, 0, 0, 0.78),
        1px -1px 0 rgba(0, 0, 0, 0.78),
        -1px 0 0 rgba(0, 0, 0, 0.78),
        1px 0 0 rgba(0, 0, 0, 0.78),
        -1px 1px 0 rgba(0, 0, 0, 0.78),
        0 1px 0 rgba(0, 0, 0, 0.78),
        1px 1px 0 rgba(0, 0, 0, 0.78),
        0 2px 5px rgba(0, 0, 0, 0.5);
}

.profile-groups.is-photos-view .profile-meal-list--photo-slots.is-photos-day-no-images .profile-photos-day-head-label {
    filter: invert(1);
}

.profile-groups.is-photos-view .profile-meal-item--photo-slot .profile-meal-summary-text {
    display: none !important;
}

.profile-groups.is-photos-view .profile-meal-item--photo-slot .profile-meal-detail {
    display: none !important;
}

.profile-groups.is-photos-view .profile-meal-item--photo-empty .profile-meal-thumb {
    display: none !important;
}

.profile-groups.is-photos-view .profile-meal-item--photo-empty .profile-meal {
    display: block;
    width: 100%;
    height: 100%;
}

.profile-groups.is-photos-view .profile-meal-item--photo-empty .profile-meal-summary {
    display: none !important;
}

.profile-groups.is-photos-view .profile-meal-item--photo-empty > .profile-photo-slot,
.profile-groups.is-photos-view .profile-meal-item--photo-empty .profile-photo-slot,
.profile-groups.is-photos-view .profile-meal-item--photo-empty[data-eat-profile-photo-placeholder] .profile-photo-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    background: var(--surface-gray);
    color: var(--text-muted);
}

.profile-groups.is-photos-view .profile-photo-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    background: var(--surface-gray);
    color: var(--text-muted);
}

.profile-groups.is-photos-view.is-photos-scope-month .profile-meal-item--photo-empty .profile-photo-slot {
    position: relative;
}

.profile-groups.is-photos-view.is-photos-scope-month .profile-meal-item--photo-empty .profile-photo-slot-label {
    position: absolute;
    top: 50%;
    left: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    box-shadow: none;
    border: none;
    white-space: nowrap;
}

.profile-groups.is-photos-view.is-photos-scope-month .profile-meal-item--photo-empty .profile-photo-slot-meal {
    position: absolute;
    top: auto;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    box-sizing: border-box;
    width: calc(100% - 12px);
    max-width: calc(100% - 12px);
    padding: 0 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
    text-align: center;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-groups.is-photos-view.is-photos-scope-month .profile-meal-item--photo-empty .profile-photo-slot-meal.is-truncated {
    cursor: pointer;
}

/* superseded by code_artifact 끼니 badge stack */
.profile-groups.is-photos-view.is-photos-scope-month .profile-meal-item--photo-slot:not(.profile-meal-item--photo-empty) .profile-photo-slot-label--overlay {
    /* see override: bottom-left emerald 끼니 badge */
}

.profile-groups.is-photos-view .profile-photo-slot-label {
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: center;
    white-space: nowrap;
}

.profile-groups.is-photos-view.is-photos-scope-month {
    gap: 18px;
}

.profile-photos-month-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-photos-month-header {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
}

@media (min-width: 600px) {
    .profile-groups.is-photos-view.is-photos-scope-all {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .profile-photos-month-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2px;
        row-gap: 10px;
        align-items: start;
    }

    .profile-groups.is-photos-view.is-photos-scope-month .profile-date-group:not([hidden]) {
        flex: none;
        width: 100%;
    }
}

.profile-date-group:first-child {
    margin-top: 4px;
}

.profile-date-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.profile-date-header-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.profile-date-bar {
    flex-shrink: 0;
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: var(--ct-brand);
}

.profile-date-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
}

.profile-date-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin: 0;
    padding: 6px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ct-brand);
    cursor: pointer;
    white-space: nowrap;
}

.profile-date-chevron {
    transition: transform 0.2s ease;
}

.profile-date-badge.is-collapsed .profile-date-chevron {
    transform: rotate(-90deg);
}

.profile-date-card {
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.profile-meal-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.profile-meal-item + .profile-meal-item {
    border-top: 1px solid var(--border);
}

.profile-meal-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 14px 14px;
    border: none;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.profile-meal-summary:active {
    background: var(--surface-gray);
}

.profile-meal-summary-text {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
}

.profile-meal-slot {
    flex-shrink: 0;
    color: var(--text-secondary);
    font-weight: 600;
}

.profile-meal-title {
    flex: 1;
    min-width: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
}

.profile-meal-summary:not(.is-open) .profile-meal-title-compact {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(0.875rem, 3.8vw, 1.125rem);
}

.profile-meal-summary:not(.is-open) .profile-meal-title-tags {
    display: none;
}

.profile-meal-summary.is-open .profile-meal-title-compact {
    display: none;
}

.profile-meal-summary.is-open .profile-meal-title-tags {
    display: flex;
    flex-wrap: wrap;
}

.profile-meal-title-compact {
    display: none;
}

.profile-meal-title-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
    min-width: 0;
}

.profile-meal-tag {
    white-space: nowrap;
}

.profile-meal-tag-comma {
    margin-right: 0.25em;
}

.profile-meal-thumb {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-gray);
}

.profile-meal-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-meal-detail {
    padding: 0;
}

.profile-meal-detail-card {
    width: 100%;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
}

.profile-meal-detail .profile-submission-card.profile-meal-detail-card {
    border: none;
    border-top: 1px solid var(--border);
    border-left: none;
    border-right: none;
    box-shadow: none;
    border-radius: 0;
}

.profile-meal-detail .profile-submission-photo img {
    border-left: none;
    border-right: none;
}

.profile-feed {
    list-style: none;
    margin: 0;
    padding: 0 var(--page-padding);
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.profile-feed-item {
    margin: 0;
}

.profile-feed-item:first-child {
    margin-top: 20px;
}

.profile-submission-date {
    margin: 0 0 12px;
    padding: 0 2px;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    text-align: left;
}

.profile-submission-card {
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.profile-submission-tabs {
    pointer-events: none;
    border-bottom: 1px solid var(--border);
}

.profile-submission-tabs::after,
.profile-submission-tabs::before {
    display: none;
}

.profile-submission-tabs .home-info-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-bottom: none;
    cursor: default;
    pointer-events: none;
}

.profile-submission-tabs .home-info-tab + .home-info-tab {
    box-shadow: inset 1px 0 0 var(--border);
}

.profile-submission-body {
    padding: 14px;
}

.profile-meal-detail .profile-submission-body {
    padding: 0;
}

.profile-meal-detail .profile-submission-photo {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 0;
}

.profile-meal-detail .profile-submission-photo img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 0;
}

.profile-meal-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px 12px;
}

.profile-meal-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.profile-meal-action:active {
    background: var(--surface-gray);
    color: var(--text);
}

.profile-meal-action-icon {
    display: block;
}

.profile-submission-media {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.profile-submission-meal-name {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0;
    padding: 0;
    background: transparent;
    border: none;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    text-align: center;
    line-height: 1.4;
}

.profile-submission-meal-word {
    display: inline;
    white-space: nowrap;
    line-height: 1.4;
    text-align: center;
}

.profile-submission-photo {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    align-self: stretch;
    aspect-ratio: 4 / 3;
    margin: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-gray);
}

.profile-submission-photo img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--border-strong);
}

.profile-submission-footer {
    margin: 14px -14px -14px;
    padding: 12px 14px 14px;
}

.home-accordion {
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: visible;
}

/*
 * 제출 푸터가 fixed 로 빠지면 아코디언 하단·좌우 보더가
 * 푸터 라운드 코너 틈으로 비침 → 하단 보더/라운드 제거
 */
.home-accordion:has(.home-info-meal-footer.is-fixed),
.home-accordion:has(.home-info-meal-body.has-fixed-meal-footer) {
    border-bottom-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    /* 하단 그림자가 푸터 코너 밖으로 새지 않게 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.home-info-tabs-body {
    padding: 0;
}

.home-info-tabs {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
}

.page-home .home-info-tabs {
    position: sticky;
    top: calc(var(--app-header-height, calc(var(--app-header-height-fallback) + var(--safe-top))));
    z-index: 110;
    background: var(--surface);
    /* 연속 box-shadow 는 선택 탭 아래까지 이어지므로 쓰지 않음 — 탭별 border-bottom 만 */
    box-shadow: none;
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
}

.page-home .home-info-tab:first-child {
    border-top-left-radius: 13px;
}

.page-home .home-info-tab:last-child {
    border-top-right-radius: 13px;
}

.page-home .is-restored-tabs .home-info-tab:last-child {
    border-top-right-radius: 0;
}

.page-home .is-restored-tabs .home-info-tab[data-home-info-tab="cuisine"] {
    border-top-right-radius: 13px;
}

.page-home .home-info-tabs::before,
.page-home .home-info-tabs::after {
    top: 1px;
}

.page-home .home-info-tab[data-home-info-tab="cuisine"].is-active::before,
.page-home .home-info-tab[data-home-info-tab="cuisine"].is-active::after,
.page-home .home-info-tab[data-home-info-tab="meal"].is-active::before {
    top: 1px;
}

.page-home .home-info-tab {
    position: relative;
    z-index: 1;
}

.home-info-tabs::after {
    content: '';
    position: absolute;
    left: 25%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border);
    pointer-events: none;
}

.home-info-tabs::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border);
    pointer-events: none;
}

.home-info-tabs .home-info-tab[data-home-info-tab="meal"] {
    box-shadow: inset 1px 0 0 var(--border);
}

.home-info-tab {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 16px 8px;
    border: none;
    border-bottom: 1px solid #cccccc;
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

/* 선택된 탭만 아래 보더 제거 (패널과 이어지게) */
.home-info-tab.is-active {
    border-bottom-color: transparent;
    background: transparent;
    color: var(--ct-orange);
    font-weight: 700;
}

.home-info-tab.is-filled {
    font-weight: 700;
    color: var(--ct-orange);
}

.home-info-tab.is-locked {
    cursor: not-allowed;
    opacity: 0.45;
}

.home-info-tab.is-locked.is-filled {
    opacity: 1;
}

.home-info-tab[data-home-info-tab="cuisine"].is-active {
    position: relative;
}

.home-info-tab[data-home-info-tab="cuisine"].is-active::before,
.home-info-tab[data-home-info-tab="cuisine"].is-active::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border);
    pointer-events: none;
}

.home-info-tab[data-home-info-tab="cuisine"].is-active::before {
    left: 0;
}

.home-info-tab[data-home-info-tab="cuisine"].is-active::after {
    right: 0;
}

.home-info-tab[data-home-info-tab="meal"].is-active {
    position: relative;
}

.home-info-tab[data-home-info-tab="meal"].is-active::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: var(--border);
    pointer-events: none;
}

.home-info-panels {
    display: grid;
    grid-template-columns: 1fr 3fr;
    margin-top: 0;
    min-height: 48px;
    padding: 12px 0 14px;
}

.home-info-panels:has([data-home-info-panel="meal"].is-active) {
    padding-bottom: 0;
}

.home-info-panel[data-home-info-panel="people"],
.home-info-panel[data-home-info-panel="place"],
.home-info-panel[data-home-info-panel="cuisine"] {
    grid-column: 1 / -1;
    padding: 0 14px;
}

.home-info-panel[data-home-info-panel="meal"] {
    grid-column: 1 / -1;
    padding: 0;
}

.home-info-meal-body .meal-picker-row {
    padding: 0 14px 0;
}

.home-info-meal-picker-row {
    flex-direction: column;
    gap: 0;
}

.home-info-meal-picker-row .meal-picker-field {
    width: 100%;
    gap: 6px;
}

.home-info-meal-body [data-home-info-meal-tag-presets].meal-tag-grid {
    margin-bottom: 12px;
}

.home-info-meal-photo-preview-wrap {
    flex-shrink: 0;
    width: auto;
    justify-content: flex-start;
    padding-top: 0;
}

.home-info-meal-photo-preview-wrap .meal-photo-preview:not(.has-photo) {
    display: flex;
    justify-content: flex-start;
    padding-top: 0;
}

.home-info-meal-photo-preview-wrap .meal-photo-preview {
    width: auto;
    max-width: none;
}

.page-home .is-restored-tabs .home-info-meal-footer,
.is-restored-tabs .home-info-meal-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: static;
    transform: none;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* 제출 완료 시 사진 크게 보이도록 56px 고정 높이 해제 */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0;
    border-top: none;
    border-radius: 0;
    padding: 14px 14px 16px;
    box-sizing: border-box;
    background: var(--surface);
    grid-template-columns: none;
    gap: 12px;
}

.is-restored-tabs .home-info-meal-footer.is-fixed {
    position: fixed;
    z-index: 95;
    /* 보더는 ::after 에 그려 라운드 라인이 마스크에 가리지 않게 함 */
    border: none;
    box-shadow: none;
    border-radius: 0 0 14px 14px;
    background: transparent;
    isolation: isolate;
    overflow: visible;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/*
 * 라운드 유지 + 코너 틈 가림:
 * ::before = 페이지 배경 마스크(아코디언 보더/그림자 비침 차단, 코너 밖으로 확장)
 * ::after  = surface + 하단 라운드 보더
 */
.is-restored-tabs .home-info-meal-footer.is-fixed::before {
    content: '';
    position: absolute;
    /* 라운드 코너·안티앨리어싱 틈 + 좌우 보더 비침까지 덮음 */
    left: -3px;
    right: -3px;
    top: 0;
    bottom: -3px;
    z-index: 0;
    pointer-events: none;
    border-radius: 0;
    background: var(--bg);
    box-shadow:
        0 28px 0 0 var(--bg),
        -8px 0 0 0 var(--bg),
        8px 0 0 0 var(--bg);
}

.is-restored-tabs .home-info-meal-footer.is-fixed::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    box-sizing: border-box;
    border-radius: 0 0 14px 14px;
    border: 1px solid var(--border-strong);
    border-top: 1px solid var(--border);
    background: var(--surface);
    /* 하단·좌우로 번지지 않게 위쪽만 그림자 (코너 배경 오염 방지) */
    box-shadow: 0 -6px 10px -6px rgba(0, 0, 0, 0.08);
}

.is-restored-tabs .home-info-meal-footer.is-fixed > * {
    position: relative;
    z-index: 2;
}

/* 프리뷰 썸네일이 하단 네비(z-index:130) 위에 보이도록 */
.is-restored-tabs .home-info-meal-footer.is-fixed:has(.meal-photo-preview.has-home-thumb),
.home-info-meal-footer:has(.meal-photo-preview.has-home-thumb) {
    z-index: 200;
    overflow: visible;
}

.is-restored-tabs .home-info-meal-body.has-fixed-meal-footer {
    padding-bottom: calc(var(--home-meal-submit-bar-height) + var(--home-meal-submit-bottom));
}

body:not(.has-app-bottom-nav) .is-restored-tabs .home-info-meal-body.has-fixed-meal-footer {
    padding-bottom: calc(var(--home-meal-submit-bar-height) + 12px + var(--safe-bottom));
}

body.has-app-bottom-nav.is-app-bottom-nav-keyboard-hidden .is-restored-tabs .home-info-meal-body.has-fixed-meal-footer {
    padding-bottom: calc(var(--home-meal-submit-bar-height) + 12px + var(--safe-bottom));
}

/*
 * 제출 완료(복원) + 사진:
 * - 푸터/썸네일을 fixed·absolute 로 띄우지 않고 relative 문서 흐름에 배치
 * - 카드 안(탭 아래 → 사진 → 순위보기) 순서로 쌓임
 */
.page-home .is-restored-tabs .home-info-meal-body:not(.is-restored-no-photo) .home-info-meal-footer,
.page-home .is-restored-tabs .home-info-meal-body:not(.is-restored-no-photo) .home-info-meal-footer.is-fixed {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0;
    padding: 12px 14px 16px;
    overflow: visible !important;
    background: var(--surface);
    border-radius: 0;
    isolation: auto;
    box-shadow: none;
}

.page-home .is-restored-tabs .home-info-meal-body:not(.is-restored-no-photo) .home-info-meal-footer.is-fixed::before,
.page-home .is-restored-tabs .home-info-meal-body:not(.is-restored-no-photo) .home-info-meal-footer.is-fixed::after {
    display: none !important;
    content: none !important;
}

.page-home .is-restored-tabs .home-info-meal-body:not(.is-restored-no-photo).has-fixed-meal-footer {
    padding-bottom: 0 !important;
}

.page-home .is-restored-tabs .home-info-meal-footer .home-info-meal-photo-preview-wrap,
.page-home .is-restored-tabs .home-info-meal-body:not(.is-restored-no-photo) .home-info-meal-footer .home-info-meal-photo-preview-wrap,
.page-home .is-restored-tabs .home-info-meal-body:not(.is-restored-no-photo) .home-info-meal-photo-preview-wrap {
    position: relative !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex: none;
    order: 1;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 14px !important;
    overflow: visible !important;
    grid-column: auto;
    z-index: auto !important;
}

.page-home .is-restored-tabs .home-info-meal-body:not(.is-restored-no-photo) .home-info-meal-footer .meal-photo-preview,
.page-home .is-restored-tabs .home-info-meal-body:not(.is-restored-no-photo) .home-info-meal-footer .meal-photo-preview.has-photo,
.page-home .is-restored-tabs .home-info-meal-body:not(.is-restored-no-photo) .home-info-meal-footer .meal-photo-preview.has-photo.has-home-thumb,
.page-home .is-restored-tabs .home-info-meal-body:not(.is-restored-no-photo) .meal-photo-preview.has-home-thumb {
    position: relative !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    flex-shrink: 1;
    z-index: auto !important;
}

/* 등록 이미지 컨테이너: absolute 금지, relative 로 레이아웃 참여 */
.page-home .is-restored-tabs .home-info-meal-body:not(.is-restored-no-photo) .meal-photo-thumb-wrap,
.page-home .is-restored-tabs .home-info-meal-footer .meal-photo-preview.has-home-thumb .meal-photo-thumb-wrap,
.page-home .is-restored-tabs .home-info-meal-footer .meal-photo-thumb-wrap {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: min(92%, 420px) !important;
    max-width: calc(100% - 24px) !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto;
    margin: 0 auto !important;
    overflow: visible;
    border-radius: 12px;
    background: var(--surface-gray);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    z-index: auto !important;
    pointer-events: auto;
}

.page-home .is-restored-tabs .home-info-meal-body:not(.is-restored-no-photo) .meal-photo-thumb,
.page-home .is-restored-tabs .home-info-meal-footer .meal-photo-preview.has-home-thumb .meal-photo-thumb {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    overflow: hidden;
    box-shadow: none;
    line-height: 0;
    cursor: default;
    transform: none !important;
    z-index: 1;
}

.page-home .is-restored-tabs .home-info-meal-body:not(.is-restored-no-photo) .meal-photo-thumb img,
.page-home .is-restored-tabs .home-info-meal-footer .meal-photo-preview.has-home-thumb .meal-photo-thumb img,
.page-home .is-restored-tabs .home-info-meal-body:not(.is-restored-no-photo) .meal-photo-thumb-wrap img {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-width: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    border: 0;
    border-radius: 12px;
    display: block !important;
}

.page-home .is-restored-tabs .home-info-meal-footer .btn,
.is-restored-tabs .home-info-meal-footer .btn {
    position: relative !important;
    grid-column: auto;
    justify-self: center;
    align-self: center;
    order: 2;
    width: 90%;
    max-width: 90%;
    min-height: var(--home-meal-footer-slot, 40px);
    height: var(--home-meal-footer-slot, 40px);
    box-sizing: border-box;
    z-index: auto !important;
}

.meal-tags-sticky {
    position: relative;
    z-index: 1;
    margin: 0 -14px 0;
    padding: 0 14px 6px;
    background: var(--surface);
    border-bottom: 1px solid transparent;
    box-sizing: border-box;
}

.meal-tags-sticky.is-fixed {
    position: fixed;
    left: var(--home-meal-fixed-input-left, 0px);
    top: var(--home-meal-fixed-input-top, 0px);
    z-index: 85;
    width: var(--home-meal-fixed-input-width, auto);
    margin: 0;
    padding: 12px 14px 6px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 16px rgba(255, 255, 255, 0.92);
    pointer-events: auto;
}

.page-home [data-home-info-panel="meal"]:not(.is-active) .meal-tags-sticky.is-fixed {
    visibility: hidden;
    pointer-events: none;
}

.home-info-meal-picker-row .meal-picker-field.has-fixed-meal-input {
    padding-top: var(--home-meal-fixed-input-offset, 0px);
}

.home-info-meal-body {
    padding-bottom: 0;
}

.home-info-meal-body.has-fixed-meal-footer {
    padding-bottom: calc(var(--home-meal-submit-bar-height) + var(--home-meal-submit-bottom));
}

.home-info-meal-footer {
    --home-meal-footer-slot: 40px;
    --home-meal-footer-bar-height: 56px;
    display: grid;
    grid-template-columns: var(--home-meal-footer-slot, 40px) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    position: static;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* 사진 썸네일 유무와 무관하게 바 높이 고정 → 제출 버튼 영역 흔들림 방지 */
    height: var(--home-meal-footer-bar-height, 56px);
    min-height: var(--home-meal-footer-bar-height, 56px);
    max-height: var(--home-meal-footer-bar-height, 56px);
    margin: 0;
    padding: 8px 14px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    box-sizing: border-box;
    border-radius: 0 0 14px 14px;
    overflow: visible;
}

/* 카드 본문 배경 — 제출 푸터 라운드 틈으로 스크롤 보더 비침 완화 */
.home-info-meal-body {
    background: var(--surface);
    isolation: isolate;
}

/*
 * 제출결과(복원): meal-body 하단 라운드로 아코디언 보더와 흰 배경 정합.
 * 푸터만 라운드하면 관리자 삭제 버튼 영역이 사각으로 삐져나옴.
 */
.page-home .is-restored-tabs .home-info-meal-body:not(.has-fixed-meal-footer) {
    border-radius: 0 0 14px 14px;
    overflow: hidden;
    background: var(--surface);
}

.page-home .is-restored-tabs .home-info-meal-body:not(.has-fixed-meal-footer) .home-info-meal-footer {
    border-radius: 0;
}

.page-home .home-accordion:has(.is-restored-tabs .home-info-meal-body:not(.has-fixed-meal-footer)) {
    overflow: hidden;
}

.home-admin-submission-actions {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 8px 14px 14px;
    box-sizing: border-box;
    background: var(--surface);
}

.home-admin-submission-delete {
    appearance: none;
    border: 1px solid rgba(181, 72, 54, 0.32);
    border-radius: var(--radius-sm);
    background: #fff5f2;
    color: #a93f31;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.2;
    min-height: 38px;
    padding: 9px 14px;
    cursor: pointer;
}

.home-admin-submission-delete:disabled {
    cursor: wait;
    opacity: 0.65;
}

.home-info-meal-footer .home-info-meal-photo-preview-wrap {
    grid-column: 1;
    flex: 0 0 auto;
    /* 사진 유무와 관계없이 슬롯 폭 고정 — 삭제 시 아이콘 좌측 밀림 방지 */
    width: var(--home-meal-footer-slot, 40px);
    min-width: var(--home-meal-footer-slot, 40px);
    height: var(--home-meal-footer-slot, 40px);
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
    position: relative;
    z-index: 200;
}

/*
 * 업로드 아이콘: 사진 유무와 관계없이 동일 40px 슬롯
 * (전역 .meal-photo-link 36px / .has-photo absolute center 가
 *  삭제 직후 아이콘을 아주 살짝 왼쪽으로 밀던 원인)
 */
.home-info-meal-footer .meal-photo-preview .meal-photo-link,
.home-info-meal-footer .meal-photo-preview.has-photo .meal-photo-link,
.home-info-meal-footer .meal-photo-preview.has-photo.has-home-thumb .meal-photo-link,
.page-home .home-info-meal-footer .meal-photo-preview.has-photo.has-home-thumb .meal-photo-link {
    position: relative;
    inset: auto;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    transform: none;
    margin: 0;
    margin-top: 0;
    flex: 0 0 var(--home-meal-footer-slot, 40px);
    width: var(--home-meal-footer-slot, 40px);
    height: var(--home-meal-footer-slot, 40px);
    border-radius: 8px;
    background: var(--surface-gray);
    color: var(--text-muted);
    box-shadow: none;
    z-index: auto;
}

.home-info-meal-footer .meal-photo-preview,
.home-info-meal-footer .meal-photo-preview:not(.has-photo),
.home-info-meal-footer .meal-photo-preview.has-photo,
.home-info-meal-footer .meal-photo-preview.has-photo.has-home-thumb,
.page-home .home-info-meal-footer .meal-photo-preview.has-photo.has-home-thumb {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: var(--home-meal-footer-slot, 40px);
    min-width: var(--home-meal-footer-slot, 40px);
    max-width: none;
    height: var(--home-meal-footer-slot, 40px);
    flex-shrink: 0;
    position: relative;
}

.home-info-meal-footer .btn {
    grid-column: 2;
    justify-self: end;
    align-self: center;
    width: auto;
    max-width: 100%;
    min-width: 0;
    min-height: var(--home-meal-footer-slot, 40px);
    height: var(--home-meal-footer-slot, 40px);
    padding: 8px 14px;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.home-info-meal-footer .meal-photo-preview.has-photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--home-meal-footer-slot, 40px);
    height: var(--home-meal-footer-slot, 40px);
    overflow: visible;
    flex-shrink: 0;
}

.home-info-meal-footer .home-info-meal-photo-preview-wrap:has(.meal-photo-preview.has-home-thumb) {
    margin-left: 0;
    overflow: visible;
}

.home-info-meal-footer .meal-photo-preview.has-photo.has-home-thumb {
    --meal-photo-thumb-size: clamp(52px, 8vw, 72px);
    /* 업로드 아이콘 옆 프리뷰를 오른쪽으로 */
    --meal-photo-thumb-gap: 28px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: var(--home-meal-footer-slot, 40px);
    min-width: var(--home-meal-footer-slot, 40px);
    height: var(--home-meal-footer-slot, 40px);
    overflow: visible;
    flex-shrink: 0;
    z-index: 200;
}

.home-info-meal-footer .meal-photo-preview.has-home-thumb .meal-photo-link {
    position: relative;
    inset: auto;
    left: auto;
    top: auto;
    transform: none;
    margin: 0;
    flex: 0 0 var(--home-meal-footer-slot, 40px);
    width: var(--home-meal-footer-slot, 40px);
    height: var(--home-meal-footer-slot, 40px);
    border-radius: 8px;
    background: var(--surface-gray);
    color: var(--text-muted);
    box-shadow: none;
}

.home-info-meal-footer .meal-photo-preview.has-home-thumb .meal-photo-link:active {
    background: var(--ct-orange-soft);
    color: var(--ct-orange);
}

.home-info-meal-footer .meal-photo-preview.has-home-thumb .meal-photo-icon {
    width: 22px;
    height: 22px;
}

.home-info-meal-footer .meal-photo-thumb-wrap {
    position: absolute;
    left: calc(var(--home-meal-footer-slot, 40px) + var(--meal-photo-thumb-gap, 10px));
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;
    width: var(--meal-photo-thumb-size, clamp(52px, 8vw, 72px));
    height: var(--meal-photo-thumb-size, clamp(52px, 8vw, 72px));
    overflow: visible;
    border-radius: 8px;
    background: transparent;
    /* app-bottom-nav(130) 보다 위 */
    z-index: 210;
    pointer-events: auto;
}

.home-info-meal-footer .meal-photo-thumb {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: var(--surface-gray);
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    line-height: 0;
}

.home-info-meal-footer .meal-photo-thumb.is-active {
    box-shadow: inset 0 0 0 2px var(--ct-orange);
}

.home-info-meal-footer .meal-photo-preview.has-home-thumb .meal-photo-thumb img,
.home-info-meal-footer .meal-photo-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
    border: 0;
    border-radius: 0;
    display: block;
}

.home-info-meal-footer .meal-photo-thumb-wrap .meal-photo-rotate,
.home-info-meal-footer .meal-photo-thumb-wrap .meal-photo-remove {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 20px;
    height: 20px;
}

.home-info-meal-footer .meal-photo-thumb-wrap .meal-photo-rotate {
    left: auto;
    right: calc(100% + 6px);
}

.home-info-meal-footer .meal-photo-thumb-wrap .meal-photo-remove {
    right: auto;
    left: calc(100% + 6px);
}

.home-meal-photo-expand {
    width: 100%;
    margin-top: 12px;
    box-sizing: border-box;
}

.home-meal-photo-expand:not([hidden]) {
    display: block;
}

.home-meal-photo-expand-btn {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
}

/*
 * 제출폼 사진 아이콘 클릭 확대 프리뷰:
 * 이미지 고유 비율 유지. 세로 사진도 찌그러지지 않게 cover 금지.
 */
.home-meal-photo-expand-btn img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center center;
    border-radius: 12px;
    border: 1px solid var(--border-strong);
    background: var(--surface-gray);
    box-sizing: border-box;
    vertical-align: top;
}

/* 세로 사진: 가로 우선 명시 */
.home-meal-photo-expand-btn img.is-portrait {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
}

/* 가로 사진: 가로 100%, 비율 유지 (상하 자연 높이) */
.home-meal-photo-expand-btn img.is-landscape {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
}

.home-info-meal-footer .meal-photo-preview.has-photo:not(.has-home-thumb) img {
    width: 48px;
    height: 48px;
    max-height: 48px;
    min-height: 0;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
}

.home-info-meal-footer .meal-photo-preview.has-photo:not(.has-home-thumb).is-landscape img,
.home-info-meal-footer .meal-photo-preview.has-photo:not(.has-home-thumb).is-portrait img {
    max-height: 48px;
    border-radius: 8px;
    border-left: 1px solid var(--border-strong);
    border-right: 1px solid var(--border-strong);
}

.home-info-meal-footer .meal-photo-preview.has-photo:not(.has-home-thumb) .meal-photo-link {
    position: absolute;
    inset: 0;
    left: 0;
    top: 0;
    transform: none;
    margin-top: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
}

.home-info-meal-footer .meal-photo-preview.has-photo:not(.has-home-thumb) .meal-photo-icon {
    width: 20px;
    height: 20px;
}

.home-info-meal-footer .meal-photo-remove,
.home-info-meal-footer .meal-photo-rotate {
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
}

.home-info-meal-footer .meal-photo-thumb-wrap .meal-photo-remove,
.home-info-meal-footer .meal-photo-thumb-wrap .meal-photo-rotate,
.home-info-meal-footer .meal-photo-preview.has-home-thumb .meal-photo-remove,
.home-info-meal-footer .meal-photo-preview.has-home-thumb .meal-photo-rotate {
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
}

.home-info-meal-footer .meal-photo-preview:not(.has-home-thumb) .meal-photo-rotate,
.home-info-meal-footer .meal-photo-thumb-wrap .meal-photo-rotate,
.home-info-meal-footer .meal-photo-preview.has-home-thumb .meal-photo-rotate {
    left: auto;
    right: calc(100% + 6px);
}

.home-info-meal-footer .meal-photo-preview:not(.has-home-thumb) .meal-photo-remove,
.home-info-meal-footer .meal-photo-thumb-wrap .meal-photo-remove,
.home-info-meal-footer .meal-photo-preview.has-home-thumb .meal-photo-remove {
    right: auto;
    left: calc(100% + 6px);
}

.home-info-meal-footer.is-fixed {
    position: fixed;
    bottom: var(--home-meal-submit-bottom);
    left: var(--home-meal-footer-left, 0px);
    right: auto;
    width: var(--home-meal-footer-width, auto);
    z-index: 95;
    max-width: none;
    margin: 0;
    transform: none;
    /* 보더/면은 ::after — 라운드 보더 라인이 마스크에 가리지 않음 */
    border: none;
    border-radius: 0 0 14px 14px;
    box-shadow: none;
    overflow: visible;
    background: transparent;
    isolation: isolate;
    /* 사진 유무와 무관하게 fixed 바 높이 고정 */
    height: var(--home-meal-footer-bar-height, 56px);
    min-height: var(--home-meal-footer-bar-height, 56px);
    max-height: var(--home-meal-footer-bar-height, 56px);
}

/*
 * 사각 마스크: 하단 라운드 밖(좌·우 코너)으로
 * 아코디언 사이드 보더/그림자/다른 배경이 비치지 않게 페이지 --bg 로 덮음
 */
.home-info-meal-footer.is-fixed::before {
    content: '';
    position: absolute;
    left: -3px;
    right: -3px;
    top: 0;
    bottom: -3px;
    z-index: 0;
    pointer-events: none;
    border-radius: 0;
    background: var(--bg);
    box-shadow:
        0 28px 0 0 var(--bg),
        -8px 0 0 0 var(--bg),
        8px 0 0 0 var(--bg);
}

/* 라운드 패널 + 보더 라인 (마스크 위) */
.home-info-meal-footer.is-fixed::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    box-sizing: border-box;
    border-radius: 0 0 14px 14px;
    border: 1px solid var(--border-strong);
    border-top: 1px solid var(--border);
    background: var(--surface);
    /* 코너 밖으로 그림자 번짐 최소화 → 라운드 밖 배경 오염 방지 */
    box-shadow: 0 -6px 10px -6px rgba(0, 0, 0, 0.08);
}

.home-info-meal-footer.is-fixed > * {
    position: relative;
    z-index: 2;
}

body:not(.has-app-bottom-nav) .home-info-meal-footer.is-fixed {
    bottom: calc(12px + var(--safe-bottom));
}

body:not(.has-app-bottom-nav) .home-info-meal-body.has-fixed-meal-footer {
    padding-bottom: calc(var(--home-meal-submit-bar-height) + 12px + var(--safe-bottom));
}

body.has-app-bottom-nav.is-app-bottom-nav-keyboard-hidden .home-info-meal-footer.is-fixed {
    bottom: calc(12px + var(--safe-bottom));
}

body.has-app-bottom-nav.is-app-bottom-nav-keyboard-hidden .home-info-meal-body.has-fixed-meal-footer {
    padding-bottom: calc(var(--home-meal-submit-bar-height) + 12px + var(--safe-bottom));
}

/*
 * 유저 드로어 열림: app-shell transform → fixed 기준이 셸.
 * left/width 는 JS 가 아코디언 기준으로 셸 상대 좌표 세팅.
 * 추가 상승은 제출폼 카드 전체(진행바 탭 포함)에 적용.
 * sticky 탭은 뷰포트에 남아 본문만 올라가는 문제 → 드로어 중 relative.
 */
body.is-user-sidebar-open.page-home .home-info-card {
    margin-top: calc(-1 * var(--eat-user-drawer-accordion-extra-lift));
    margin-bottom: var(--eat-user-drawer-accordion-extra-lift);
}

body.is-user-sidebar-open.page-home .home-info-tabs,
body.is-user-sidebar-open.page-home .home-info-tabs-wrap {
    position: relative !important;
    top: auto !important;
}

body.is-user-sidebar-open.page-home .home-info-meal-footer.is-fixed {
    bottom: var(--eat-user-drawer-accordion-extra-lift) !important;
    visibility: visible;
    pointer-events: auto;
    z-index: 230;
    border-radius: 0 0 14px 14px;
    overflow: visible;
}

/*
 * 제출바 아래 틈에 태그 칩이 비치던 문제:
 * ::before 를 셸 하단 아래로 길게 내려 불투명 가림 (overflow 로 자르지 않음).
 */
body.is-user-sidebar-open.page-home .home-info-meal-footer.is-fixed::before {
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    height: calc(100% + var(--eat-user-drawer-accordion-extra-lift) + 120px);
    border-radius: 0;
    background: var(--bg);
    box-shadow:
        0 40px 0 0 var(--bg),
        0 100px 0 0 var(--bg);
    z-index: 0;
}

body.is-user-sidebar-open.page-home .home-info-meal-footer.is-fixed::after {
    border-radius: 0 0 14px 14px;
}

.is-restored-tabs .home-info-meal-body {
    padding-bottom: 0;
}

.home-info-meal-body .meal-tags-input-wrap--chip {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.meal-tags-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 18px;
    padding: 0 4px;
}

.meal-tags-label {
    flex: 0 0 auto;
    color: var(--text);
    font-size: 0.8125rem;
    font-weight: 800;
    line-height: 1.2;
}

.meal-tags-input-shell {
    position: relative;
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 6px 10px;
    border: 1px solid var(--ct-orange);
    border-radius: 12px;
    background: var(--ct-brand-soft);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.meal-tags-input-shell:focus-within {
    border-color: var(--ct-orange-hover);
    box-shadow: var(--shadow-sm);
}

.meal-tags-scroll {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    min-height: 34px;
    /* Right gutter so the caret stays visible when tags/text fill a narrow field. */
    padding-right: 8px;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
}

.meal-tags-scroll::-webkit-scrollbar {
    display: none;
}

.meal-tags-selected {
    display: contents;
}

.meal-tags-input-inline {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
    overflow: visible;
}

.home-info-meal-body .meal-tags-input-shell.has-query .meal-tags-input-inline {
    flex: 0 0 auto;
    width: fit-content;
    min-width: 0;
    /* Tight gap after the ✓; shell padding provides outer breathing room. */
    padding-right: 2px;
}

.meal-tags-input-measure {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    white-space: pre;
    pointer-events: none;
}

.meal-tags-commit-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin: 0 0 0 2px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--ct-brand);
    cursor: pointer;
    flex-shrink: 0;
}

.meal-tags-commit-btn:hover {
    color: var(--ct-brand-hover);
}

.meal-tags-commit-btn:active {
    color: var(--ct-brand-hover);
}

.meal-tags-commit-btn[hidden] {
    display: none !important;
}

.meal-selected-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 0;
    max-width: none;
    padding: 6px 8px 6px 12px;
    border: none;
    border-radius: 999px;
    background: var(--ct-brand);
    color: #fff;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    touch-action: pan-x;
}

.meal-selected-chip-label,
.meal-selected-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
    min-height: 0;
}

.meal-selected-chip-label {
    max-width: none;
    overflow: hidden;
    white-space: nowrap;
    cursor: text;
    border-radius: 999px;
}

.meal-selected-chip-label:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

.meal-selected-chip-remove {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    font-size: 11px;
    line-height: 1;
}

.meal-selected-chip-remove:active {
    background: rgba(255, 255, 255, 0.4);
}

.home-info-meal-body .meal-tags-input-shell .meal-tags-input-inline {
    flex: 0 0 auto;
    width: fit-content;
    min-width: 0;
}

.home-info-meal-body .meal-tags-input-shell .meal-custom-input {
    display: inline-block;
    vertical-align: middle;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    min-height: 32px;
    padding: 5px 4px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
}

.home-info-meal-body .meal-tags-input-shell .meal-custom-input:focus {
    border: none;
    background: transparent;
    box-shadow: none;
}

.home-info-meal-body .meal-tags-input-shell.is-at-limit:not(.has-query):not(.is-editing-meal-tag):not(:focus-within) .meal-tags-scroll {
    justify-content: flex-start;
}

.home-info-meal-body .meal-tags-input-shell.is-at-limit:not(.has-query):not(.is-editing-meal-tag):not(:focus-within):not(.is-awaiting-tag) .meal-tags-input-inline {
    display: none;
}

.home-info-meal-body .meal-tags-input-shell:not(.has-tags):not(.has-query) .meal-tags-input-inline {
    flex: 1 0 16rem;
    width: auto;
    min-width: 16rem;
}

.home-info-meal-body .meal-tags-input-shell:not(.has-tags):not(.has-query) .meal-custom-input {
    width: 100%;
    min-width: 16rem;
}

.home-info-meal-body .meal-tags-input-shell .meal-custom-input::placeholder {
    text-align: left;
}

.home-info-meal-body .meal-tags-input-shell.has-query .meal-custom-input::placeholder,
.home-info-meal-body .meal-tags-input-shell.has-tags .meal-custom-input::placeholder {
    opacity: 0;
}

.home-info-meal-body .meal-tags-input-shell.has-tags:not(.has-query) .meal-tags-input-inline {
    flex: 0 0 1px;
    min-width: 1px;
    width: 1px;
}

.home-info-meal-body .meal-tags-input-shell.has-tags:not(.has-query) .meal-custom-input {
    flex: 0 0 1px;
    min-width: 1px;
    width: 1px;
    padding-left: 0;
    padding-right: 0;
}

.home-info-meal-body .meal-tags-input-shell.has-tags.is-awaiting-tag:not(.has-query) .meal-tags-input-inline,
.home-info-meal-body .meal-tags-input-shell.has-tags:not(.has-query):focus-within .meal-tags-input-inline {
    flex: 1 0 8rem;
    width: auto;
    min-width: 8rem;
    padding-right: 2px;
}

.home-info-meal-body .meal-tags-input-shell.has-tags.is-awaiting-tag:not(.has-query) .meal-custom-input,
.home-info-meal-body .meal-tags-input-shell.has-tags:not(.has-query):focus-within .meal-custom-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding: 5px 4px;
}

.home-info-meal-body .meal-tags-input-shell.is-editing-meal-tag .meal-tags-input-inline {
    flex: 0 0 auto;
    width: fit-content;
    min-width: 0;
    max-width: none;
    padding-right: 2px;
}

.home-info-meal-body .meal-tags-input-shell.is-editing-meal-tag .meal-custom-input {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
}

.meal-tags-count {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.meal-tags-count.is-limit-hint {
    max-width: min(240px, 58vw);
    color: #8f1d1d;
    line-height: 1.2;
    white-space: normal;
    text-align: right;
}

.meal-tags-status {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 1.2em;
    margin: 0;
    color: #8f1d1d;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meal-tags-autocomplete {
    position: absolute;
    z-index: 12;
    top: var(--meal-tags-dropdown-top, 86px);
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    max-height: 180px;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.meal-tags-autocomplete[hidden] {
    display: none !important;
}

.meal-tags-autocomplete button {
    display: block;
    width: 100%;
    min-height: 34px;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.meal-tags-autocomplete button:hover,
.meal-tags-autocomplete button.is-active {
    background: var(--ct-brand-soft);
    color: var(--ct-orange-hover);
}

.meal-tag-btn.is-query-match {
    position: relative;
    color: var(--text-muted);
    opacity: 0.62;
    text-decoration-line: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
    pointer-events: none;
}

.meal-tag-btn.is-query-match::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    top: 50%;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    pointer-events: none;
    transform: translateY(-50%);
}

.meal-tags-autocomplete button.is-query-match {
    color: var(--text-muted);
    opacity: 0.58;
    text-decoration: none;
}

.meal-tags-autocomplete button.is-query-match mark {
    color: inherit;
}

.meal-tags-autocomplete mark {
    background: transparent;
    color: var(--ct-orange);
    font-weight: 800;
}

.meal-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Meal tag grid styles ── */
.meal-tag-grid {
    gap: 8px;
    transition: padding-bottom 0.2s ease;
}

.page-home [data-home-info-meal-tag-presets].meal-tag-grid.searching {
    padding-bottom: min(16vh, 120px);
}

.meal-tag-grid .tag,
.cuisine-tag-grid.meal-tag-grid .tag-row .tag.cuisine-country-btn,
.cuisine-picker-v2-quick-pick.meal-tag-grid .tag-row .tag.cuisine-country-btn {
    flex-shrink: 0;
    flex-grow: 0;
    padding: 10px 6px;
    text-align: center;
    font-size: 0.8125rem;
    letter-spacing: -0.02em;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    overflow: hidden;
    border: none;
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.1s ease, opacity 0.25s ease;
}

.meal-tag-grid .tag {
    width: calc((100% - 16px) / 3);
}

.meal-tag-presets.meal-tag-grid,
[data-eat-meal-tag-presets].meal-tag-grid,
[data-home-info-meal-tag-presets].meal-tag-grid,
.meal-tag-presets [data-eat-meal-tag-section].meal-tag-grid,
[data-eat-meal-tag-presets] [data-eat-meal-tag-section].meal-tag-grid,
[data-home-info-meal-tag-presets] [data-eat-meal-tag-section].meal-tag-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    --meal-tag-gap: 8px;
}

.meal-tag-presets [data-eat-meal-tag-section] + [data-eat-meal-tag-section],
[data-eat-meal-tag-presets] [data-eat-meal-tag-section] + [data-eat-meal-tag-section],
[data-home-info-meal-tag-presets] [data-eat-meal-tag-section] + [data-eat-meal-tag-section] {
    margin-top: 12px;
}

.meal-tag-list.meal-tag-presets.meal-tag-grid,
.meal-tag-list[data-home-info-meal-tag-presets].meal-tag-grid {
    flex-wrap: nowrap;
}

.meal-tag-presets.meal-tag-grid .tag-row,
[data-eat-meal-tag-presets].meal-tag-grid .tag-row,
[data-home-info-meal-tag-presets].meal-tag-grid .tag-row,
.meal-tag-presets [data-eat-meal-tag-section].meal-tag-grid .tag-row,
[data-eat-meal-tag-presets] [data-eat-meal-tag-section].meal-tag-grid .tag-row,
[data-home-info-meal-tag-presets] [data-eat-meal-tag-section].meal-tag-grid .tag-row {
    display: flex;
    width: 100%;
    gap: var(--meal-tag-gap, 8px);
    flex-wrap: nowrap;
    align-items: flex-start;
}

.meal-tag-presets.meal-tag-grid .tag-row > .meal-tag-btn,
[data-eat-meal-tag-presets].meal-tag-grid .tag-row > .meal-tag-btn,
[data-home-info-meal-tag-presets].meal-tag-grid .tag-row > .meal-tag-btn,
.meal-tag-presets [data-eat-meal-tag-section].meal-tag-grid .tag-row > .meal-tag-btn,
[data-eat-meal-tag-presets] [data-eat-meal-tag-section].meal-tag-grid .tag-row > .meal-tag-btn,
[data-home-info-meal-tag-presets] [data-eat-meal-tag-section].meal-tag-grid .tag-row > .meal-tag-btn,
.meal-tag-presets [data-eat-meal-tag-section].meal-tag-grid .tag-row > .cuisine-picker-v2-tag-wrap,
[data-eat-meal-tag-presets] [data-eat-meal-tag-section].meal-tag-grid .tag-row > .cuisine-picker-v2-tag-wrap,
[data-home-info-meal-tag-presets] [data-eat-meal-tag-section].meal-tag-grid .tag-row > .cuisine-picker-v2-tag-wrap {
    flex: 0 0 var(--meal-tag-unit-px, var(--meal-row-unit, calc((100% - (var(--row-cols, 3) - 1) * var(--meal-tag-gap, 8px)) / var(--row-cols, 3))));
    min-width: 0;
    width: var(--meal-tag-unit-px, var(--meal-row-unit, calc((100% - (var(--row-cols, 3) - 1) * var(--meal-tag-gap, 8px)) / var(--row-cols, 3))));
    max-width: var(--meal-tag-unit-px, var(--meal-row-unit, calc((100% - (var(--row-cols, 3) - 1) * var(--meal-tag-gap, 8px)) / var(--row-cols, 3))));
    box-sizing: border-box;
    transition: width 0.34s cubic-bezier(0.25, 0.8, 0.25, 1),
        max-width 0.34s cubic-bezier(0.25, 0.8, 0.25, 1),
        box-shadow 0.28s ease,
        background 0.12s ease,
        color 0.12s ease,
        border-color 0.12s ease,
        transform 0.1s ease,
        opacity 0.28s ease;
}

.meal-tag-presets.meal-tag-grid .tag-row.cuisine-tag-row-resizing > .meal-tag-btn,
[data-eat-meal-tag-presets].meal-tag-grid .tag-row.cuisine-tag-row-resizing > .meal-tag-btn,
[data-home-info-meal-tag-presets].meal-tag-grid .tag-row.cuisine-tag-row-resizing > .meal-tag-btn {
    transition: none !important;
}

.meal-tag-presets.meal-tag-grid .tag-row > .meal-tag-btn.expanded,
[data-eat-meal-tag-presets].meal-tag-grid .tag-row > .meal-tag-btn.expanded,
[data-home-info-meal-tag-presets].meal-tag-grid .tag-row > .meal-tag-btn.expanded {
    max-width: none;
    z-index: 2;
    position: relative;
    overflow: visible;
}

.meal-tag-presets.meal-tag-grid .tag-row > .meal-tag-btn.shrunk,
[data-eat-meal-tag-presets].meal-tag-grid .tag-row > .meal-tag-btn.shrunk,
[data-home-info-meal-tag-presets].meal-tag-grid .tag-row > .meal-tag-btn.shrunk {
    min-width: 0;
}

.meal-tag-presets.meal-tag-grid .tag-row > .meal-tag-btn.expanded .tag-text,
[data-eat-meal-tag-presets].meal-tag-grid .tag-row > .meal-tag-btn.expanded .tag-text,
[data-home-info-meal-tag-presets].meal-tag-grid .tag-row > .meal-tag-btn.expanded .tag-text {
    text-overflow: clip;
    overflow: visible;
}

.meal-tag-presets.meal-tag-grid .tag-row > .meal-tag-btn.shrunk .tag-text,
[data-eat-meal-tag-presets].meal-tag-grid .tag-row > .meal-tag-btn.shrunk .tag-text,
[data-home-info-meal-tag-presets].meal-tag-grid .tag-row > .meal-tag-btn.shrunk .tag-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cuisine-tag-grid.meal-tag-grid .tag-row .tag.cuisine-country-btn,
.cuisine-picker-v2-quick-pick.meal-tag-grid .tag-row .tag.cuisine-country-btn {
    min-width: 0;
    box-sizing: border-box;
}

.cuisine-tag-grid.meal-tag-grid .tag-row > .tag.cuisine-country-btn,
.cuisine-tag-grid.meal-tag-grid .tag-row > .cuisine-picker-v2-tag-wrap {
    flex: 0 0 var(--cuisine-tag-unit-px, var(--cuisine-row-unit, calc((100% - (var(--row-cols, 3) - 1) * var(--cuisine-tag-gap, 8px)) / var(--row-cols, 3))));
    min-width: 0;
    width: var(--cuisine-tag-unit-px, var(--cuisine-row-unit, calc((100% - (var(--row-cols, 3) - 1) * var(--cuisine-tag-gap, 8px)) / var(--row-cols, 3))));
    max-width: var(--cuisine-tag-unit-px, var(--cuisine-row-unit, calc((100% - (var(--row-cols, 3) - 1) * var(--cuisine-tag-gap, 8px)) / var(--row-cols, 3))));
    box-sizing: border-box;
}

.cuisine-picker-v2-recent-icon[hidden],
.meal-tag-recent-icon[hidden],
.cuisine-picker-v2.is-cuisine-search-active .cuisine-picker-v2-tag-wrap.is-recent .cuisine-picker-v2-badges,
.meal-tag-grid.searching .cuisine-picker-v2-tag-wrap.is-recent .cuisine-picker-v2-badges {
    display: none !important;
}

.cuisine-tag-grid.meal-tag-grid .tag-row.cuisine-tag-row-resizing > .tag.cuisine-country-btn,
.cuisine-tag-grid.meal-tag-grid .tag-row.cuisine-tag-row-resizing > .cuisine-picker-v2-tag-wrap {
    transition: none !important;
}

/* 펼친 상태에서도 같은 행의 다른 나라 태그를 바로 선택/닫기 가능하게 유지 */
.cuisine-tag-grid.meal-tag-grid .tag-row.cuisine-tag-row-expanded > .tag.cuisine-country-btn:not(.expanded),
.cuisine-tag-grid.meal-tag-grid .tag-row.cuisine-tag-row-expanded > .cuisine-picker-v2-tag-wrap:not(.expanded) {
    pointer-events: auto;
}
.cuisine-tag-grid.meal-tag-grid .tag-row.cuisine-tag-row-expanded > .tag.cuisine-country-btn.expanded,
.cuisine-tag-grid.meal-tag-grid .tag-row.cuisine-tag-row-expanded > .cuisine-picker-v2-tag-wrap.expanded,
.cuisine-tag-grid.meal-tag-grid .tag-row.cuisine-tag-row-expanded > .cuisine-picker-v2-tag-wrap.expanded > .tag.cuisine-country-btn {
    pointer-events: auto;
}

.cuisine-tag-grid.meal-tag-grid .tag-row > .tag.cuisine-country-btn.expanded,
.cuisine-tag-grid.meal-tag-grid .tag-row > .cuisine-picker-v2-tag-wrap.expanded {
    max-width: none;
}

.cuisine-tag-grid.meal-tag-grid .tag-row > .tag.cuisine-country-btn.shrunk,
.cuisine-tag-grid.meal-tag-grid .tag-row > .cuisine-picker-v2-tag-wrap.shrunk {
    min-width: 0;
}

.cuisine-tag-grid.meal-tag-grid .tag-row > .tag.cuisine-country-btn,
.cuisine-tag-grid.meal-tag-grid .tag-row > .cuisine-picker-v2-tag-wrap {
    transition: width 0.34s cubic-bezier(0.25, 0.8, 0.25, 1),
        max-width 0.34s cubic-bezier(0.25, 0.8, 0.25, 1),
        box-shadow 0.28s ease,
        background 0.12s ease,
        color 0.12s ease,
        border-color 0.12s ease,
        transform 0.1s ease,
        opacity 0.28s ease;
}

.meal-tag-grid .tag:active,
.cuisine-tag-grid.meal-tag-grid .tag-row .tag.cuisine-country-btn:active,
.cuisine-picker-v2-quick-pick.meal-tag-grid .tag-row .tag.cuisine-country-btn:active {
    transform: scale(0.96);
}

.meal-tag-grid .tag.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.meal-tag-grid .tag-text {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    pointer-events: none;
    transition: text-overflow 0.2s ease;
}

.meal-tag-grid .char-highlight {
    background-color: #fff3b0;
    color: var(--text);
    font-weight: 800;
    border-radius: 2px;
    padding: 0 1px;
}

.meal-tag-grid .tag.match-focus {
    border-color: var(--ct-brand) !important;
    box-shadow: 0 0 0 2.5px rgba(46, 125, 90, 0.45) !important;
    transform: scale(1.04) !important;
    z-index: 5;
}

.meal-tag-empty-message {
    display: none;
    margin: 2px 0 0;
    text-align: left;
    color: var(--text-muted);
    padding: 0 4px;
    font-size: 0.84375rem;
    font-weight: 600;
    line-height: 1.35;
}

.meal-tag-empty-message:not([hidden]) {
    display: block;
}

.meal-tag-empty-message span {
    font-size: 0.71875rem;
    color: var(--text-muted);
    font-weight: 500;
    display: block;
    margin-top: 4px;
    opacity: 0.75;
}

.meal-tag-grid.style-soft .tag,
.cuisine-tag-grid.meal-tag-grid.style-soft .tag-row .tag.cuisine-country-btn,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-soft .tag.cuisine-country-btn {
    border: 1px solid rgba(46, 125, 90, 0.14);
    border-radius: 999px;
    color: #3e4a44;
    background: rgba(46, 125, 90, 0.055);
    font-weight: 700;
}

.meal-tag-grid.style-soft .tag.selected,
.cuisine-tag-grid.meal-tag-grid.style-soft .tag-row .tag.cuisine-country-btn.selected,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-soft .tag.cuisine-country-btn.selected {
    border-color: var(--ct-brand);
    background: var(--ct-brand);
    color: #fff;
}

.meal-tag-grid.style-outline .tag,
.cuisine-tag-grid.meal-tag-grid.style-outline .tag-row .tag.cuisine-country-btn,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-outline .tag.cuisine-country-btn {
    border: 1.5px solid var(--ct-brand);
    border-radius: 999px;
    color: var(--ct-brand-hover);
    background: #fff;
    font-weight: 700;
}

.meal-tag-grid.style-outline .tag.selected,
.cuisine-tag-grid.meal-tag-grid.style-outline .tag-row .tag.cuisine-country-btn.selected,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-outline .tag.cuisine-country-btn.selected {
    background: var(--ct-brand);
    color: #fff;
}

.meal-tag-grid.style-flat .tag,
.cuisine-tag-grid.meal-tag-grid.style-flat .tag-row .tag.cuisine-country-btn,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-flat .tag.cuisine-country-btn {
    border: none;
    border-radius: 10px;
    color: #55554f;
    background: #f1f1ee;
    font-weight: 600;
}

.meal-tag-grid.style-flat .tag.selected,
.cuisine-tag-grid.meal-tag-grid.style-flat .tag-row .tag.cuisine-country-btn.selected,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-flat .tag.cuisine-country-btn.selected {
    background: var(--ct-brand);
    color: #fff;
    font-weight: 700;
}

.meal-tag-grid.style-card .tag,
.cuisine-tag-grid.meal-tag-grid.style-card .tag-row .tag.cuisine-country-btn,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-card .tag.cuisine-country-btn {
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    color: var(--text);
    background: #fff;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.meal-tag-grid.style-card .tag.selected,
.cuisine-tag-grid.meal-tag-grid.style-card .tag-row .tag.cuisine-country-btn.selected,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-card .tag.cuisine-country-btn.selected {
    border-color: var(--ct-brand);
    background: var(--ct-brand);
    color: #fff;
    box-shadow: none;
}

.meal-tag-grid.style-mono .tag,
.cuisine-tag-grid.meal-tag-grid.style-mono .tag-row .tag.cuisine-country-btn,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-mono .tag.cuisine-country-btn {
    border: 1.5px solid var(--text);
    border-radius: 4px;
    color: var(--text);
    background: #fff;
    font-weight: 700;
}

.meal-tag-grid.style-mono .tag.selected,
.cuisine-tag-grid.meal-tag-grid.style-mono .tag-row .tag.cuisine-country-btn.selected,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-mono .tag.cuisine-country-btn.selected {
    background: var(--text);
    color: #fff;
    border-color: var(--text);
}

.meal-tag-grid.style-underline .tag,
.cuisine-tag-grid.meal-tag-grid.style-underline .tag-row .tag.cuisine-country-btn,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-underline .tag.cuisine-country-btn {
    border: none;
    border-bottom: 2px solid #deded8;
    border-radius: 0;
    color: #6b6b65;
    background: transparent;
    font-weight: 600;
    padding: 10px 4px;
}

.meal-tag-grid.style-underline .tag.selected,
.cuisine-tag-grid.meal-tag-grid.style-underline .tag-row .tag.cuisine-country-btn.selected,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-underline .tag.cuisine-country-btn.selected {
    border-bottom-color: var(--ct-brand);
    color: var(--ct-brand-hover);
    font-weight: 800;
}

.meal-tag-grid.style-glass,
.cuisine-tag-grid.meal-tag-grid.style-glass,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-glass {
    background: linear-gradient(135deg, rgba(46, 125, 90, 0.1), rgba(46, 125, 90, 0.02));
    padding: 10px;
    border-radius: 16px;
    margin: 0 -10px;
}

.meal-tag-grid.style-glass .tag,
.cuisine-tag-grid.meal-tag-grid.style-glass .tag-row .tag.cuisine-country-btn,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-glass .tag.cuisine-country-btn {
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    color: var(--ct-brand-hover);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px);
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(46, 125, 90, 0.08);
}

.meal-tag-grid.style-glass .tag.selected,
.cuisine-tag-grid.meal-tag-grid.style-glass .tag-row .tag.cuisine-country-btn.selected,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-glass .tag.cuisine-country-btn.selected {
    background: rgba(46, 125, 90, 0.85);
    color: #fff;
    border-color: var(--ct-brand);
}

.meal-tag-grid.style-table,
.cuisine-tag-grid.meal-tag-grid.style-table,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-table {
    gap: 0;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    overflow: hidden;
}

.meal-tag-grid.style-table .tag,
.cuisine-tag-grid.meal-tag-grid.style-table .tag-row .tag.cuisine-country-btn,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-table .tag.cuisine-country-btn {
    border: none;
    border-right: 1px solid var(--border-strong);
    border-bottom: 1px solid var(--border-strong);
    border-radius: 0;
    color: #4a4a45;
    background: #fff;
    font-weight: 600;
}

.meal-tag-grid.style-table .tag {
    width: 33.333%;
}

.cuisine-tag-grid.meal-tag-grid.style-table .tag-row .tag.cuisine-country-btn,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-table .tag.cuisine-country-btn {
    width: 100%;
}

.meal-tag-grid.style-table .tag:nth-child(3n),
.cuisine-tag-grid.meal-tag-grid.style-table .tag-row .tag.cuisine-country-btn:nth-child(3n),
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-table .tag.cuisine-country-btn:nth-child(3n) {
    border-right: none;
}

.meal-tag-grid.style-table .tag.selected,
.cuisine-tag-grid.meal-tag-grid.style-table .tag-row .tag.cuisine-country-btn.selected,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-table .tag.cuisine-country-btn.selected {
    background: var(--ct-brand);
    color: #fff;
    font-weight: 700;
}

.meal-tag-grid.style-table .tag.expanded {
    width: 63.8% !important;
}

.meal-tag-grid.style-table .tag.shrunk {
    width: 18% !important;
}

.cuisine-tag-grid.meal-tag-grid.style-table .tag-row > .tag.cuisine-country-btn.expanded,
.cuisine-tag-grid.meal-tag-grid.style-table .tag-row > .cuisine-picker-v2-tag-wrap.expanded > .tag.cuisine-country-btn,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-table .tag.cuisine-country-btn.expanded {
    overflow: visible;
}

.meal-tag-grid.style-brutal .tag,
.cuisine-tag-grid.meal-tag-grid.style-brutal .tag-row .tag.cuisine-country-btn,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-brutal .tag.cuisine-country-btn {
    border: 2px solid var(--text);
    border-radius: 6px;
    color: var(--text);
    background: #fff;
    font-weight: 800;
    box-shadow: 3px 3px 0 var(--text);
}

.meal-tag-grid.style-brutal .tag.selected,
.cuisine-tag-grid.meal-tag-grid.style-brutal .tag-row .tag.cuisine-country-btn.selected,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-brutal .tag.cuisine-country-btn.selected {
    background: var(--text);
    color: #fff;
    box-shadow: 3px 3px 0 var(--ct-brand);
}

.meal-tag-grid.style-postit,
.cuisine-tag-grid.meal-tag-grid.style-postit,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-postit {
    gap: 14px 10px;
    padding: 4px;
}

.meal-tag-grid.style-postit .tag,
.cuisine-tag-grid.meal-tag-grid.style-postit .tag-row .tag.cuisine-country-btn,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-postit .tag.cuisine-country-btn {
    border: none;
    border-radius: 2px;
    font-weight: 700;
    box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.14);
}

.meal-tag-grid.style-postit .tag:nth-child(5n+1),
.cuisine-tag-grid.meal-tag-grid.style-postit .tag-row .tag.cuisine-country-btn:nth-child(5n+1) { background: #fff3b0; color: #5b4a12; transform: rotate(1.5deg); }
.meal-tag-grid.style-postit .tag:nth-child(5n+2),
.cuisine-tag-grid.meal-tag-grid.style-postit .tag-row .tag.cuisine-country-btn:nth-child(5n+2) { background: #ffd6e3; color: #7a2a4b; transform: rotate(-2deg); }
.meal-tag-grid.style-postit .tag:nth-child(5n+3),
.cuisine-tag-grid.meal-tag-grid.style-postit .tag-row .tag.cuisine-country-btn:nth-child(5n+3) { background: #c9e8fa; color: #1c4a66; transform: rotate(1deg); }
.meal-tag-grid.style-postit .tag:nth-child(5n+4),
.cuisine-tag-grid.meal-tag-grid.style-postit .tag-row .tag.cuisine-country-btn:nth-child(5n+4) { background: #d9f2ce; color: #2c5a2a; transform: rotate(-1.5deg); }
.meal-tag-grid.style-postit .tag:nth-child(5n+5),
.cuisine-tag-grid.meal-tag-grid.style-postit .tag-row .tag.cuisine-country-btn:nth-child(5n+5) { background: #ffe0ba; color: #7a4712; transform: rotate(2deg); }

.meal-tag-grid.style-postit .tag.selected,
.cuisine-tag-grid.meal-tag-grid.style-postit .tag-row .tag.cuisine-country-btn.selected,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-postit .tag.cuisine-country-btn.selected {
    box-shadow: 0 0 0 2px var(--ct-brand), 2px 3px 6px rgba(0, 0, 0, 0.14);
    transform: rotate(0deg) scale(1.05);
    filter: brightness(0.95) saturate(1.15);
}

.meal-tag-grid.style-tab .tag,
.cuisine-tag-grid.meal-tag-grid.style-tab .tag-row .tag.cuisine-country-btn,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-tab .tag.cuisine-country-btn {
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 10px 10px 0 0;
    color: var(--text-muted);
    background: #f1f1ee;
    font-weight: 700;
}

.meal-tag-grid.style-tab .tag.selected,
.cuisine-tag-grid.meal-tag-grid.style-tab .tag-row .tag.cuisine-country-btn.selected,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-tab .tag.cuisine-country-btn.selected {
    background: #fff;
    border-bottom-color: var(--ct-brand);
    color: var(--ct-brand-hover);
    font-weight: 800;
}

.meal-tag-grid.style-bubble .tag,
.cuisine-tag-grid.meal-tag-grid.style-bubble .tag-row .tag.cuisine-country-btn,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-bubble .tag.cuisine-country-btn {
    position: relative;
    border: none;
    border-radius: 14px 14px 14px 4px;
    color: var(--ct-brand-hover);
    background: var(--ct-brand-soft);
    font-weight: 700;
}

.meal-tag-grid.style-bubble .tag.selected,
.cuisine-tag-grid.meal-tag-grid.style-bubble .tag-row .tag.cuisine-country-btn.selected,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-bubble .tag.cuisine-country-btn.selected {
    background: var(--ct-brand);
    color: #fff;
}

.meal-tag-grid.style-swatch .tag,
.cuisine-tag-grid.meal-tag-grid.style-swatch .tag-row .tag.cuisine-country-btn,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-swatch .tag.cuisine-country-btn {
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text);
    background: #fff;
    font-weight: 600;
    justify-content: flex-start;
    padding-left: 12px;
}

.meal-tag-grid.style-swatch .tag.selected,
.cuisine-tag-grid.meal-tag-grid.style-swatch .tag-row .tag.cuisine-country-btn.selected,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-swatch .tag.cuisine-country-btn.selected {
    border-color: var(--ct-brand);
    background: var(--ct-brand-soft);
    color: var(--ct-brand-hover);
    font-weight: 800;
}

.meal-tag-grid.style-swatch .tag-text,
.meal-tag-grid.style-leftbar .tag-text,
.cuisine-tag-grid.meal-tag-grid.style-swatch .tag-row .tag.cuisine-country-btn .name,
.cuisine-tag-grid.meal-tag-grid.style-leftbar .tag-row .tag.cuisine-country-btn .name,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-swatch .cuisine-picker-v2-chip-label,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-swatch .cuisine-picker-v2-primary-label,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-leftbar .cuisine-picker-v2-chip-label,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-leftbar .cuisine-picker-v2-primary-label {
    text-align: left;
}

.meal-tag-grid.style-inline,
.cuisine-tag-grid.meal-tag-grid.style-inline,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-inline {
    display: block;
    line-height: 2.4;
}

.meal-tag-grid.style-inline .tag,
.cuisine-tag-grid.meal-tag-grid.style-inline .tag-row .tag.cuisine-country-btn,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-inline .tag.cuisine-country-btn {
    display: inline-flex;
    border: none;
    background: none;
    padding: 0;
    margin: 0 2px;
    color: #6b6b65;
    font-weight: 600;
    border-radius: 0;
    min-height: 0;
    width: auto;
}

.meal-tag-grid.style-inline .tag:not(:last-child)::after,
.cuisine-tag-grid.meal-tag-grid.style-inline .tag-row .tag.cuisine-country-btn:not(:last-child)::after,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-inline .tag.cuisine-country-btn:not(:last-child)::after {
    content: '/';
    color: #d3d3cc;
    font-weight: 400;
    margin-left: 8px;
}

.meal-tag-grid.style-inline .tag.selected,
.cuisine-tag-grid.meal-tag-grid.style-inline .tag-row .tag.cuisine-country-btn.selected,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-inline .tag.cuisine-country-btn.selected {
    color: var(--ct-brand);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.meal-tag-grid.style-leftbar .tag,
.cuisine-tag-grid.meal-tag-grid.style-leftbar .tag-row .tag.cuisine-country-btn,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-leftbar .tag.cuisine-country-btn {
    border: none;
    border-left: 4px solid #c7dcd1;
    border-radius: 4px;
    background: #f7f7f5;
    color: var(--text);
    font-weight: 700;
    justify-content: flex-start;
    padding-left: 10px;
}

.meal-tag-grid.style-leftbar .tag.selected,
.cuisine-tag-grid.meal-tag-grid.style-leftbar .tag-row .tag.cuisine-country-btn.selected,
.cuisine-picker-v2-quick-pick.meal-tag-grid.style-leftbar .tag.cuisine-country-btn.selected {
    background: var(--ct-brand);
    color: #fff;
    border-left-color: #1c3a2c;
}

.home-info-people-segment,
.home-info-place-segment {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    gap: 2px;
    padding: 3px;
    background: var(--surface-gray);
    border-radius: var(--radius-pill);
}

.home-info-people-btn,
.home-info-place-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 40px;
    padding: 8px 4px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    font-family: inherit;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.home-info-people-btn {
    font-size: 1.25rem;
}

.home-info-place-btn {
    font-size: 1.0625rem;
}

.home-info-people-btn.is-active,
.home-info-place-btn.is-active {
    background: var(--ct-orange);
    color: #fff;
    font-weight: 700;
}

.home-info-panel[hidden] {
    display: none !important;
}

.people-segment-btn.is-active,
.toggle-group--inline .toggle-btn.is-active {
    background: var(--ct-orange);
    color: #fff;
    box-shadow: none;
    font-weight: 700;
}

.toggle-group--inline .toggle-btn.is-active {
    border-color: transparent;
}

.home-accordion-body {
    border-radius: 14px 14px 0 0;
}

.home-accordion-footer {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 10;
    padding: 12px 14px calc(14px + var(--safe-bottom));
    border-top: 1px solid var(--border);
    border-radius: 0 0 14px 14px;
    background: var(--surface);
    box-sizing: border-box;
}

.page-home .app-shell {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    border: none;
    box-shadow: none;
    overflow: visible;
}

body.is-user-sidebar-open.page-home .app-shell,
body.is-user-sidebar-open.page-stats .app-shell,
body.is-user-sidebar-open.page-profile .app-shell,
body.is-user-sidebar-open.page-settings .app-shell,
body.is-user-sidebar-open.page-admin .app-shell {
    transform: translateY(calc(-1 * var(--eat-user-drawer-lift) + var(--eat-user-drawer-overlap)));
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    z-index: 225;
}

.home-accordion-footer .btn {
    width: 100%;
    min-height: 48px;
    font-size: 0.9375rem;
    border-radius: var(--radius-sm);
}

.people-picker-row,
.place-picker-row,
.cuisine-picker-row,
.meal-picker-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 14px;
}

.people-picker-header,
.place-picker-header,
.cuisine-picker-header,
.meal-picker-header {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
}

.people-picker-label,
.place-picker-label,
.cuisine-picker-label,
.meal-picker-label {
    flex-shrink: 0;
    margin: 0;
    min-width: 0;
    width: 100%;
    text-align: center;
}

.people-picker-label,
.place-picker-label,
.cuisine-picker-label,
.meal-picker-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.picker-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    max-width: min(100%, 160px);
    padding: 4px 10px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--ct-orange);
    color: #fff;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker-value:hover {
    background: var(--ct-orange-hover);
}

.picker-value:active {
    transform: scale(0.97);
}

.picker-value[hidden] {
    display: none !important;
}

.people-picker-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
}

.people-picker-row .people-picker-header {
    flex: 0 0 auto;
    justify-content: flex-start;
    min-height: 0;
    min-width: 0;
}

.people-picker-row .people-picker-label {
    width: auto;
    min-width: 0;
    text-align: left;
    justify-content: flex-start;
}

.people-picker-row .picker-value {
    min-height: 32px;
    padding: 6px 14px;
}

.people-picker-row .people-segment {
    width: auto;
    min-width: 0;
    justify-self: center;
}

.people-picker-row.is-people-collapsed .people-segment {
    display: none;
}

.people-picker-row.is-people-collapsed .people-picker-header,
.people-picker-row.is-people-collapsed .people-picker-label {
    display: contents;
}

.people-picker-row.is-people-collapsed .people-picker-label-text {
    grid-column: 1;
    align-self: center;
}

.people-picker-row.is-people-collapsed .picker-value {
    grid-column: 2;
    justify-self: center;
    text-align: center;
}

.place-picker-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
}

.place-picker-row .place-picker-header {
    flex: 0 0 auto;
    justify-content: flex-start;
    min-height: 0;
    min-width: 0;
}

.place-picker-row .place-picker-label {
    width: auto;
    min-width: 0;
    text-align: left;
    justify-content: flex-start;
}

.place-picker-row .picker-value {
    min-height: 32px;
    padding: 6px 10px;
}

.place-picker-row [data-eat-place-segment] {
    width: auto;
    min-width: 0;
    justify-self: center;
}

.place-picker-row.is-place-collapsed [data-eat-place-segment] {
    display: none;
}

.place-picker-row.is-place-collapsed .place-picker-header,
.place-picker-row.is-place-collapsed .place-picker-label {
    display: contents;
}

.place-picker-row.is-place-collapsed .place-picker-label-text {
    grid-column: 1;
    align-self: center;
}

.place-picker-row.is-place-collapsed .picker-value {
    grid-column: 2;
    justify-self: center;
    text-align: center;
}

.cuisine-picker-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 10px;
}

.cuisine-picker-row .cuisine-picker-header {
    flex: 0 0 auto;
    justify-content: flex-start;
    min-height: 0;
    min-width: 0;
    padding-top: 10px;
}

.cuisine-picker-row .cuisine-picker-label {
    width: auto;
    min-width: 0;
    text-align: left;
    justify-content: flex-start;
}

.cuisine-picker-row .picker-value {
    min-height: 32px;
    padding: 6px 14px;
}

.cuisine-picker-row [data-eat-cuisine-segment] {
    width: 95%;
    height: auto;
    min-width: 0;
    max-width: 95%;
    max-height: none;
    justify-self: center;
}

.cuisine-picker-row.is-cuisine-collapsed {
    align-items: center;
}

.cuisine-picker-row.is-cuisine-collapsed .cuisine-picker-header,
.cuisine-picker-row.is-cuisine-collapsed .cuisine-picker-label {
    display: contents;
}

.cuisine-picker-row.is-cuisine-collapsed .cuisine-picker-label-text {
    grid-column: 1;
    align-self: center;
}

.cuisine-picker-row.is-cuisine-collapsed .picker-value {
    grid-column: 2;
    justify-self: center;
    text-align: center;
}

.cuisine-picker-row.is-cuisine-collapsed .cuisine-picker-header {
    padding-top: 0;
}

.cuisine-picker-row.is-cuisine-collapsed [data-eat-cuisine-segment] {
    display: none;
}

.meal-picker-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}

.meal-picker-row .meal-picker-header,
.meal-photo-row .meal-picker-header {
    flex: 0 0 auto;
    justify-content: flex-start;
    min-height: 0;
    min-width: 0;
}

.meal-picker-row .meal-picker-header {
    padding-top: 10px;
}

.meal-picker-row .meal-picker-label {
    width: auto;
    min-width: 0;
    text-align: left;
    justify-content: flex-start;
}

.people-picker-row .home-form-label,
.place-picker-row .home-form-label,
.cuisine-picker-row .home-form-label,
.meal-picker-row .home-form-label {
    min-width: 0;
}

.meal-picker-row .meal-picker-field {
    flex: 1;
    width: auto;
}

.people-segment {
    flex: 0 0 auto;
    width: auto;
    display: flex;
    padding: 3px;
    background: var(--surface-gray);
    border-radius: var(--radius-pill);
    gap: 2px;
}

.people-segment-btn {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 32px;
    padding: 6px 14px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.place-picker-body {
    border-top: 1px solid var(--border);
}

.toggle-group--inline {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 3px;
    background: var(--surface-gray);
    border-radius: var(--radius-pill);
}

.toggle-group--place {
    width: auto;
    grid-template-columns: auto auto;
}

.toggle-group--inline .toggle-btn {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 0.8125rem;
    border-radius: var(--radius-pill);
    border-color: transparent;
    background: transparent;
}

.cuisine-picker-body {
    border-top: 1px solid var(--border);
}

.cuisine-picker-content {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cuisine-segment {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(36px, auto);
    justify-items: stretch;
    width: 100%;
    height: auto;
    max-height: none;
    column-gap: 2px;
    row-gap: 6px;
    padding: 6px 2px;
    background: var(--surface-gray);
    border-radius: 10px;
}

.cuisine-chevron-plain {
    grid-column: 1 / -1;
    justify-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: transform 0.2s ease, color 0.15s;
}

.cuisine-chevron-plain.is-open {
    transform: rotate(180deg);
    color: var(--ct-orange);
}

.cuisine-expand-wrap {
    display: contents;
}

.cuisine-expand-wrap[hidden] {
    display: none !important;
}

.cuisine-more-segment {
    display: contents;
}

.cuisine-custom-input {
    grid-column: 1 / -1;
    justify-self: center;
    width: auto;
    min-width: 120px;
    max-width: 140px;
    min-height: 32px;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    outline: none;
    text-align: center;
}

.cuisine-custom-input::placeholder {
    color: var(--text-muted);
    font-weight: 600;
}

.cuisine-custom-input:focus,
.cuisine-custom-input.is-active {
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.cuisine-segment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: auto;
    min-width: 0;
    min-height: 36px;
    padding: 6px 10px;
    white-space: nowrap;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.cuisine-segment-btn.is-active {
    background: var(--ct-orange);
    color: #fff;
    box-shadow: none;
    font-weight: 700;
}

.meal-picker-body {
    border-top: 1px solid var(--border);
}

.meal-picker-field {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.meal-tags-input-wrap {
    position: relative;
    width: 100%;
}

.meal-tag-presets {
    gap: 8px;
}


.meal-tag-btn {
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
}

.meal-tag-btn.is-active {
    border-style: solid;
}

.meal-tag-btn.is-filter-hidden {
    display: none !important;
}

.meal-photo-row {
    padding: 4px 14px 12px;
}

.meal-photo-row:has(.meal-photo-preview.has-photo.is-landscape) {
    padding-left: 0;
    padding-right: 0;
}

.meal-photo-preview-wrap {
    min-width: 0;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.meal-photo-link {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--surface-gray);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.meal-photo-link:active {
    background: var(--ct-orange-soft);
    color: var(--ct-orange);
}

.meal-photo-icon {
    display: block;
}

.meal-photo-preview {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.meal-photo-preview:not(.has-photo) {
    display: inline-flex;
}

.meal-photo-preview.has-photo {
    display: block;
    overflow: visible;
}

.meal-photo-preview.has-photo .meal-photo-link {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: calc((24px - 40px) / 2);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    box-shadow: none;
}

.meal-photo-preview.has-photo .meal-photo-link:active {
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
}

/* 홈 제출 푸터: 전역 has-photo absolute 규칙 덮어쓰기 — 삭제 전후 아이콘 위치 고정 */
.home-info-meal-footer .meal-photo-preview .meal-photo-link,
.home-info-meal-footer .meal-photo-preview.has-photo .meal-photo-link,
.home-info-meal-footer .meal-photo-preview.has-photo.has-home-thumb .meal-photo-link {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    margin-top: 0 !important;
    width: var(--home-meal-footer-slot, 40px) !important;
    height: var(--home-meal-footer-slot, 40px) !important;
    border-radius: 8px !important;
    background: var(--surface-gray);
    color: var(--text-muted);
    box-shadow: none;
    z-index: auto;
}

.page-home .home-info-meal-footer .meal-photo-preview.has-photo.has-home-thumb {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: var(--home-meal-footer-slot, 40px);
    min-width: var(--home-meal-footer-slot, 40px);
}

.page-home .home-info-meal-footer .meal-photo-preview.has-photo.has-home-thumb .meal-photo-link {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: 0;
    flex: 0 0 var(--home-meal-footer-slot, 40px);
    width: var(--home-meal-footer-slot, 40px);
    height: var(--home-meal-footer-slot, 40px);
    border-radius: 8px;
    background: var(--surface-gray);
    color: var(--text-muted);
    box-shadow: none;
}

.page-home .home-info-meal-footer .meal-photo-preview.has-photo.has-home-thumb .meal-photo-link:active {
    background: var(--ct-orange-soft);
    color: var(--ct-orange);
}

.page-home .home-info-meal-footer .meal-photo-preview.has-photo.has-home-thumb .meal-photo-thumb-wrap {
    position: absolute;
    left: calc(var(--home-meal-footer-slot, 40px) + var(--meal-photo-thumb-gap, 10px));
    top: 50%;
    transform: translateY(-50%);
    z-index: 210;
}

.page-home .home-info-meal-footer:has(.meal-photo-preview.has-home-thumb),
.page-home .is-restored-tabs .home-info-meal-footer.is-fixed:has(.meal-photo-preview.has-home-thumb) {
    z-index: 200;
    overflow: visible;
}

.meal-photo-preview.has-photo .meal-photo-icon {
    width: 22px;
    height: 22px;
}

.meal-photo-preview:not(.has-photo) img {
    display: none !important;
}

.meal-photo-preview img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    border-radius: 10px;
    border: 1px solid var(--border-strong);
    background: var(--surface-gray);
    object-fit: contain;
    object-position: center;
}

.meal-photo-preview.has-photo.is-landscape:not(.has-home-thumb) img {
    height: auto;
    max-height: none;
    object-fit: contain;
    border-radius: 0;
    border-left: none;
    border-right: none;
}

.meal-photo-preview.has-photo.is-portrait:not(.has-home-thumb) img {
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center;
}

.meal-photo-remove,
.meal-photo-rotate {
    position: absolute;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #333;
    cursor: pointer;
    transition: color 0.15s, opacity 0.15s;
    transform: translateY(-50%);
}

.meal-photo-remove[hidden],
.meal-photo-rotate[hidden] {
    display: none !important;
}

.meal-photo-rotate {
    left: auto;
    right: calc(100% + 6px);
}

.meal-photo-remove {
    right: auto;
    left: calc(100% + 6px);
}

.meal-photo-remove svg {
    display: block;
    width: 18px;
    height: 18px;
}

.meal-photo-remove:active,
.meal-photo-rotate:active {
    color: #111;
    opacity: 0.72;
    transform: translateY(-50%);
}

.meal-custom-input {
    flex: 1;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 12px 14px;
    border: 1px solid var(--ct-orange);
    border-radius: var(--radius-pill);
    background: var(--ct-brand-soft);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    outline: none;
}

.meal-custom-input::placeholder {
    color: var(--text-muted);
    font-weight: 600;
}

.meal-custom-input:focus {
    border-color: var(--ct-orange-hover);
    background: var(--ct-brand-soft);
    box-shadow: var(--shadow-sm);
}

.home-accordion .home-form-card {
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.home-form-card {
    margin: 0 var(--page-padding);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
}

.home-form-row {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

.home-form-row--last {
    border-bottom: none;
}

.home-form-row--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
}

.home-form-label {
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
    min-width: 52px;
}

.home-form-row:not(.home-form-row--split) .home-form-label {
    margin-bottom: 8px;
}

.page-home .tag-input-wrap {
    gap: 6px;
}

.page-home .tag-chip {
    padding: 6px 11px;
    font-size: 0.8125rem;
}

.page-home .tag-chip--placeholder {
    padding: 6px 10px;
    font-size: 0.75rem;
}

.page-home .home-accordion .people-segment-btn,
.page-home .home-accordion .toggle-group--inline .toggle-btn,
.page-home .home-accordion .cuisine-custom-input,
.page-home .home-accordion .home-form-label,
.page-home .home-accordion .tag-chip {
    font-size: 0.9375rem;
}

.page-home .home-accordion .meal-custom-input {
    font-size: 1rem;
}

.page-home .home-accordion .cuisine-segment-btn,
.page-home .home-accordion .tag-chip--placeholder {
    font-size: 0.875rem;
}

.toggle-group--compact {
    flex: 1;
    max-width: 180px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.toggle-group--compact .toggle-btn {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 0.8125rem;
    border-radius: 8px;
}

.counter-row--compact {
    gap: 10px;
    padding: 0;
    justify-content: flex-end;
}

.counter-row--compact .counter-btn {
    width: 32px;
    height: 32px;
    font-size: 1rem;
    border-radius: 8px;
}

.counter-row--compact .counter-value {
    font-size: 1.125rem;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
}

.form-select--compact {
    flex: 1;
    max-width: 180px;
    min-height: 36px;
    padding: 8px 32px 8px 12px;
    font-size: 0.875rem;
    background-position: right 10px center;
}

.page-home .ct-meal-badge {
    padding: 5px 12px;
    font-size: 0.8125rem;
}

.page-home .context-inline-text {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
}

.page-login .app-main--center,
.page-register .app-main--center,
.page-forgot-password .app-main--center,
.page-invite .app-main--center {
    padding-top: 48px;
}

/* SPA 전환: 반투명(0.55)이면 스타일 전 깨진 텍스트가 비침 → 완전 숨김 후 페이드인 */
#eat-app-content.is-loading {
    opacity: 0;
    pointer-events: none;
    transition: none;
    /* 레이아웃 점프 완화 */
    min-height: 50vh;
}

html.is-spa-navigating #eat-app-content.is-loading {
    /* 이전 페이지가 비친 채로 남지 않도록 전환 중 완전 비움 */
    visibility: hidden;
}

html.is-spa-navigating,
html.is-spa-navigating body {
    /* 전환 중 스크롤/클릭 잡음 방지 */
    cursor: progress;
}

html.is-spa-navigating body {
    overflow: hidden;
}

#eat-app-content:not(.is-loading) {
    transition: opacity 0.18s ease;
}

/* ── Global app loader ── */
.eat-app-loader {
    background: var(--bg);
}

.page-landing .eat-app-loader {
    background: #efede8;
}

.eat-app-loader__bowl {
    display: block;
    width: clamp(120px, 32vw, 168px);
    height: clamp(120px, 32vw, 168px);
    flex-shrink: 0;
}

.eat-app-loader .tl-bowl-steam {
    stroke: #C7963B;
    stroke-width: 2.4;
    fill: none;
    stroke-linecap: round;
    transform-origin: center;
    animation: tl-bowl-steam-rise 3.6s ease-in-out infinite;
}

.eat-app-loader .tl-bowl-steam-2 {
    animation-delay: 0.5s;
}

.eat-app-loader .tl-bowl-steam-3 {
    animation-delay: 1s;
}

@keyframes tl-bowl-steam-rise {
    0% { opacity: 0; transform: translateY(3px); }
    30% { opacity: 1; }
    75% { opacity: 0; transform: translateY(-5px); }
    100% { opacity: 0; transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
    .eat-app-loader .tl-bowl-steam {
        animation: none;
        opacity: 0.65;
    }
}

/* ── Desktop ── */
@media (min-width: 600px) {
    :root {
        --page-padding: 24px;
        --content-max: 800px;
    }

    .app-shell {
        max-width: 800px;
        margin: 0 auto;
        /* box-shadow: var(--shadow-lg); */
    }

    body.page-home {
        --content-max: 800px;
        --home-form-max: 600px;
        background: #fff;
    }

    .page-home .app-shell {
        width: 100%;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        border: none;
        box-shadow: none;
    }

    .page-home .app-header,
    .page-home .app-main,
    .page-home .app-main--home,
    .page-home #eat-app-content {
        max-width: var(--content-max);
    }

    .page-home .app-header {
        left: 50%;
        right: auto;
        width: min(800px, 100%);
        transform: translateX(-50%);
    }

    .page-home .home-accordion-wrap {
        width: min(100%, var(--home-form-max));
        max-width: var(--home-form-max);
    }

    .page-home .home-info-card {
        width: 100%;
        max-width: var(--home-form-max);
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .page-home .home-info-progress,
    .page-home .home-info-card > .home-accordion {
        width: 100%;
        max-width: var(--home-form-max);
        box-sizing: border-box;
    }

    .page-home .home-info-meal-footer:not(.is-fixed) {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .page-home .is-restored-tabs .home-info-meal-footer {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 14px 14px 16px;
    }

    .page-home .is-restored-tabs .home-info-meal-body.is-restored-no-photo .home-info-meal-footer {
        padding: 8px 14px 16px;
    }

    .page-home .home-info-meal-footer.is-fixed {
        left: var(--home-meal-footer-left, 0px);
        right: auto;
        width: var(--home-meal-footer-width, auto);
        max-width: none;
        margin: 0;
    }

    .page-stats .app-shell {
        box-shadow: none;
    }

    .page-stats .app-header {
        left: 50%;
        right: auto;
        width: min(800px, 100%);
        transform: translateX(-50%);
    }

    .page-stats .stats-members-screen,
    .page-stats .stats-variations-screen,
    .page-stats .stats-photos-screen,
    .page-stats .stats-photos-viewer {
        left: 50%;
        right: auto;
        width: min(800px, 100%);
        margin-left: 0;
        margin-right: 0;
        transform: translateX(-50%);
    }

    .page-admin {
        --content-max: 800px;
    }

    .page-admin .app-shell {
        max-width: 800px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-shadow: none;
    }

    .page-admin .app-header {
        left: 50%;
        right: auto;
        width: min(800px, 100%);
        max-width: 800px;
        transform: translateX(-50%);
    }

    .page-admin .admin-header-stack {
        left: 50%;
        right: auto;
        width: min(800px, 100%);
        max-width: 800px;
        transform: translateX(-50%);
        margin: 0;
    }

    .page-admin .admin-subheader {
        border-radius: 0 0 1em 1em;
    }

    .page-admin .admin-bottom-nav {
        left: 50%;
        right: auto;
        width: min(800px, 100%);
        max-width: 800px;
        transform: translateX(-50%);
    }

    .app-bottom-nav {
        left: 50%;
        right: auto;
        width: min(800px, 100%);
        max-width: 800px;
        transform: translateX(-50%);
    }

    body {
        background: #fff;
    }

    .bottom-bar {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        max-width: 800px;
    }

    .bottom-bar .btn {
        max-width: 800px;
        margin: 0 auto;
    }

    .page-home .bottom-bar .btn {
        max-width: 360px;
    }

    .page-login .app-main--center,
    .page-register .app-main--center,
    .page-forgot-password .app-main--center,
    .page-invite .app-main--center {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .page-home .app-main:not(.app-main--home) {
        display: block;
    }

    .section {
        border-bottom: 1px solid var(--border);
        margin: 0 var(--page-padding);
        padding: 24px 0;
    }

    .section:last-child {
        border-bottom: none;
    }

    .context-banner {
        margin: 0;
        border-radius: 0;
    }

    /* 지구본 사이드바: 헤더 z-index만 모바일에서 낮춤 */
    body.is-admin-sidebar-open.page-home .admin-sidebar-wrap .app-header,
    body.is-admin-sidebar-open.page-stats .admin-sidebar-wrap .app-header,
    body.is-admin-sidebar-open.page-admin .admin-sidebar-wrap .app-header {
        z-index: 1;
    }
}

@media (min-width: 900px) {
    .auth-intro h1 {
        font-size: 1.625rem;
    }

    .auth-intro .ct-brand {
        font-size: 2rem;
    }

    .auth-subtitle {
        font-size: 1.375rem;
    }
}

.page-admin .admin-list-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.page-admin .admin-list-search {
    flex: 1;
    min-width: 0;
}

.page-admin .admin-list-search-input,
.page-admin .admin-list-filter-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 12px;
    background: var(--surface, #fff);
    font: inherit;
    color: inherit;
}

.page-admin .admin-list-filter-select {
    width: auto;
    min-width: 120px;
}

.stats-members-search-input,
.page-admin .admin-invite-search-input,
.page-admin .admin-alerts-link-search-input,
.page-admin .admin-list-search-input {
    border: none;
}

.stats-members-search-input:focus,
.page-admin .admin-invite-search-input:focus,
.page-admin .admin-alerts-link-search-input:focus,
.page-admin .admin-list-search-input:focus {
    border-color: transparent;
    box-shadow: none;
}

.page-user-public .user-public-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 0 18px;
}

.page-user-public .user-public-avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-gray);
}

.page-user-public .user-public-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-user-public .user-public-name {
    margin: 0;
    font-size: 1.125rem;
}

.page-user-public .user-public-desc {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.page-user-public .user-public-empty {
    padding: 24px 16px;
    text-align: center;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cuisine-picker-v2 {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.cuisine-picker-v2-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text-muted);
}

.cuisine-picker-v2-search svg {
    flex-shrink: 0;
}

.cuisine-picker-v2-search-input {
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    outline: none;
}

.cuisine-picker-v2-search-input::placeholder {
    color: var(--text-muted);
}

.cuisine-picker-v2-primary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow: visible;
}

.cuisine-picker-v2-quick-pick {
    margin-top: 0;
    padding-top: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    /* 태그 행이 폼 밖으로 삐져나가지 않도록 */
    overflow-x: hidden;
    overflow-y: visible;
}

.cuisine-tag-grid .tag-row .cuisine-picker-v2-recent-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.cuisine-picker-v2-recent-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.cuisine-picker-v2-recent-icon .cuisine-picker-v2-history {
    width: 42px;
    height: 42px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.cuisine-picker-v2-recent-icon .cuisine-picker-v2-history svg {
    width: 30px;
    height: 30px;
}

.page-home .cuisine-picker-v2-quick-pick .cuisine-picker-v2-quick-chip,
.page-home .cuisine-picker-v2-quick-pick .cuisine-picker-v2-primary-btn,
.page-home .cuisine-picker-v2-quick-pick .cuisine-picker-v2-tag-wrap {
    min-width: 0;
    /* max-width 는 그리드 unit 규칙을 따름 — none 이면 … 가 안 생기고 1탭 선택됨 */
    box-sizing: border-box;
}

.page-home .cuisine-picker-v2-quick-pick:not(.meal-tag-grid) .cuisine-picker-v2-quick-chip,
.page-home .cuisine-picker-v2-quick-pick:not(.meal-tag-grid) .cuisine-picker-v2-primary-btn {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.8125rem;
    margin-top: 0;
    max-width: none;
}

.page-home .cuisine-picker-v2-quick-pick.meal-tag-grid .tag-row .tag.cuisine-country-btn {
    min-width: 0;
    margin-top: 0;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

/* 최근·핫 영역도 대륙 그리드와 동일: unit 칸 + 펼침 시 max-width 해제 */
.page-home .cuisine-picker-v2-quick-pick.meal-tag-grid .tag-row > .tag.cuisine-country-btn,
.page-home .cuisine-picker-v2-quick-pick.meal-tag-grid .tag-row > .cuisine-picker-v2-tag-wrap {
    flex: 0 0 var(--cuisine-tag-unit-px, var(--cuisine-row-unit, calc((100% - (var(--row-cols, 3) - 1) * var(--cuisine-tag-gap, 8px)) / var(--row-cols, 3))));
    width: var(--cuisine-tag-unit-px, var(--cuisine-row-unit, calc((100% - (var(--row-cols, 3) - 1) * var(--cuisine-tag-gap, 8px)) / var(--row-cols, 3))));
    max-width: var(--cuisine-tag-unit-px, var(--cuisine-row-unit, calc((100% - (var(--row-cols, 3) - 1) * var(--cuisine-tag-gap, 8px)) / var(--row-cols, 3))));
    box-sizing: border-box;
}

.page-home .cuisine-picker-v2-quick-pick.meal-tag-grid .tag-row > .tag.cuisine-country-btn.expanded,
.page-home .cuisine-picker-v2-quick-pick.meal-tag-grid .tag-row > .cuisine-picker-v2-tag-wrap.expanded {
    flex: 0 0 var(--meal-tag-unit-px, var(--cuisine-tag-unit-px, var(--cuisine-row-unit, calc((100% - (var(--row-cols, 3) - 1) * var(--cuisine-tag-gap, 8px)) / var(--row-cols, 3)))));
    width: var(--meal-tag-unit-px, var(--cuisine-tag-unit-px, var(--cuisine-row-unit, calc((100% - (var(--row-cols, 3) - 1) * var(--cuisine-tag-gap, 8px)) / var(--row-cols, 3)))));
    max-width: var(--meal-tag-unit-px, var(--cuisine-tag-unit-px, var(--cuisine-row-unit, calc((100% - (var(--row-cols, 3) - 1) * var(--cuisine-tag-gap, 8px)) / var(--row-cols, 3)))));
    z-index: auto;
    overflow: hidden;
}

.page-home .cuisine-picker-v2-quick-pick.meal-tag-grid .tag-row > .tag.cuisine-country-btn.expanded .cuisine-picker-v2-chip-label,
.page-home .cuisine-picker-v2-quick-pick.meal-tag-grid .tag-row > .tag.cuisine-country-btn.expanded .cuisine-picker-v2-primary-label,
.page-home .cuisine-picker-v2-quick-pick.meal-tag-grid .tag-row > .cuisine-picker-v2-tag-wrap.expanded .cuisine-picker-v2-chip-label {
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
}

.page-home .cuisine-picker-v2-quick-pick.meal-tag-grid .cuisine-picker-v2-chip-label,
.page-home .cuisine-picker-v2-quick-pick.meal-tag-grid .cuisine-picker-v2-primary-label {
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 1.2;
    pointer-events: none;
}

.page-home .cuisine-picker-v2-quick-pick.meal-tag-grid .cuisine-picker-v2-flag {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1;
}

.page-home .cuisine-picker-v2-quick-pick .tag-row .cuisine-picker-v2-tag-wrap.is-hot,
.page-home .cuisine-picker-v2-quick-pick .tag-row .cuisine-picker-v2-tag-wrap.is-recent {
    margin-top: 0;
}

.page-home .cuisine-picker-v2-quick-pick:not(.meal-tag-grid) .cuisine-picker-v2-chip-label,
.page-home .cuisine-picker-v2-quick-pick:not(.meal-tag-grid) .cuisine-picker-v2-primary-label {
    display: inline-flex;
    width: auto;
    white-space: nowrap;
    text-align: left;
    line-height: 1.2;
}

.page-home .cuisine-picker-v2-quick-pick:not(.meal-tag-grid) .cuisine-picker-v2-flag {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1;
}

.page-home .cuisine-picker-v2-quick-pick .cuisine-picker-v2-badges {
    z-index: 3;
}

.cuisine-picker-v2-recent {
    margin-top: 8px;
}

.cuisine-picker-v2-hot-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    overflow: visible;
}

.cuisine-picker-v2-hot-grid .cuisine-picker-v2-chip {
    overflow: visible;
}

.cuisine-picker-v2-hot-grid .cuisine-picker-v2-badges {
    z-index: 3;
}

.page-home .cuisine-picker-v2-primary {
    margin-top: 10px;
}

.page-home .cuisine-picker-v2-recent-tags .cuisine-picker-v2-chip,
.page-home .cuisine-picker-v2-hot-grid .cuisine-picker-v2-chip,
.page-home .cuisine-picker-v2-primary .cuisine-picker-v2-primary-btn {
    width: auto;
    max-width: 100%;
    flex: 0 1 auto;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.8125rem;
}

.page-home .cuisine-picker-v2-recent-tags .cuisine-picker-v2-chip-label,
.page-home .cuisine-picker-v2-hot-grid .cuisine-picker-v2-chip-label,
.page-home .cuisine-picker-v2-primary .cuisine-picker-v2-primary-label {
    display: inline-flex;
    width: auto;
    white-space: nowrap;
    text-align: left;
    line-height: 1.2;
}

.page-home .cuisine-picker-v2-hot-grid .cuisine-picker-v2-chip:has(.cuisine-picker-v2-badges) {
    margin-top: 7px;
}

.page-home .cuisine-picker-v2-recent-tags .cuisine-picker-v2-chip {
    margin-top: 0;
}

.cuisine-picker-v2-recent-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cuisine-picker-v2-recent-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.cuisine-picker-v2-recent-tags .cuisine-picker-v2-chip {
    margin-top: 0;
}

.cuisine-picker-v2-primary-btn:not(.tag) {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    overflow: visible;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.cuisine-picker-v2-primary-label {
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.2;
}

.cuisine-picker-v2-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow: visible;
}

.cuisine-picker-v2-chip:not(.tag),
.cuisine-picker-v2-primary-btn.cuisine-country-btn:not(.tag) {
    -webkit-tap-highlight-color: transparent;
}

.cuisine-picker-v2-chip:not(.tag) {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    overflow: visible;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.cuisine-picker-v2-tag-wrap {
    position: relative;
    display: block;
    min-width: 0;
    overflow: visible;
}

.cuisine-picker-v2-tag-wrap.is-hot {
    z-index: 2;
}

.cuisine-picker-v2-tag-wrap.is-recent {
    z-index: 2;
}

.cuisine-picker-v2-tag-wrap.is-hot > .cuisine-country-btn,
.cuisine-picker-v2-tag-wrap.is-hot > .cuisine-picker-v2-chip,
.cuisine-picker-v2-tag-wrap.is-hot > .cuisine-picker-v2-primary-btn,
.cuisine-picker-v2-tag-wrap.is-hot > .tag,
.cuisine-picker-v2-tag-wrap.is-recent > .cuisine-country-btn,
.cuisine-picker-v2-tag-wrap.is-recent > .cuisine-picker-v2-chip,
.cuisine-picker-v2-tag-wrap.is-recent > .cuisine-picker-v2-primary-btn,
.cuisine-picker-v2-tag-wrap.is-recent > .tag,
.cuisine-picker-v2-tag-wrap.is-recent > .meal-tag-btn {
    width: 100%;
    margin-top: 0;
    overflow: visible;
}

.cuisine-picker-v2-tag-wrap.is-hot:has(.cuisine-country-btn[hidden]),
.cuisine-picker-v2-tag-wrap.is-recent:has(.cuisine-country-btn[hidden]),
.cuisine-picker-v2-tag-wrap.is-recent:has(.meal-tag-btn.is-filter-hidden) {
    display: none !important;
}

.cuisine-picker-v2-tag-wrap .cuisine-picker-v2-badges {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.cuisine-picker-v2-badges {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.cuisine-picker-v2-chip-label,
.cuisine-picker-v2-primary-label {
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.cuisine-picker-v2-history {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
}

.cuisine-picker-v2-hot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--border);
    color: #e8734a;
}

.cuisine-country-btn.is-active .cuisine-picker-v2-hot,
.cuisine-tag-grid .tag-row .tag.selected .cuisine-picker-v2-hot {
    color: #fff;
    background: var(--ct-brand, #2e7d5a);
    box-shadow: 0 0 0 1px var(--ct-brand, #2e7d5a);
}

.cuisine-country-btn.is-active .cuisine-picker-v2-history {
    color: var(--ct-green, #2e7d5a);
}

.cuisine-picker-v2-badges .cuisine-picker-v2-history {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--border);
    color: var(--text-muted);
}

.cuisine-picker-v2-tag-wrap.is-recent:has(.meal-tag-btn.selected) .cuisine-picker-v2-history,
.cuisine-picker-v2-tag-wrap.is-recent:has(.tag.selected) .cuisine-picker-v2-history,
.cuisine-picker-v2-tag-wrap.is-recent:has(.cuisine-country-btn.is-active) .cuisine-picker-v2-history {
    color: #fff;
    background: var(--ct-brand, #2e7d5a);
    box-shadow: 0 0 0 1px var(--ct-brand, #2e7d5a);
}

.cuisine-picker-v2-history svg,
.cuisine-picker-v2-hot svg {
    display: block;
    width: 11px;
    height: 11px;
}

.cuisine-picker-v2-flag {
    font-size: 1rem;
    line-height: 1;
}

.cuisine-picker-v2-group-title {
    margin: 0 0 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
}

.cuisine-picker-v2-group + .cuisine-picker-v2-group {
    margin-top: 4px;
}

.cuisine-picker-v2-group .cuisine-picker-v2-chip-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    padding-top: 7px;
}

@media (min-width: 420px) {
    .cuisine-picker-v2-group .cuisine-picker-v2-chip-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 560px) {
    .cuisine-picker-v2-group .cuisine-picker-v2-chip-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.cuisine-picker-v2-group .cuisine-picker-v2-chip {
    width: 100%;
    min-width: 0;
    justify-content: center;
    box-sizing: border-box;
}

.cuisine-picker-v2-group .cuisine-picker-v2-chip-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cuisine-picker-v2-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 14px 8px 8px;
    text-align: center;
}

.cuisine-picker-v2.is-cuisine-search-active .cuisine-picker-v2-empty:not([hidden]) {
    display: flex;
}

.cuisine-picker-v2-empty[hidden] {
    display: none !important;
}

.cuisine-picker-v2-empty-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-muted);
}

.cuisine-picker-v2-empty-query {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--text);
}

.cuisine-picker-v2-empty-add {
    margin-top: 2px;
}

.cuisine-picker-v2-empty-hint {
    margin: 0;
    max-width: 18rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-muted);
}

.cuisine-picker-v2-empty-status {
    margin: 0;
    max-width: 18rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ct-green, #2e7d5a);
}

.cuisine-picker-v2-empty-status.is-error {
    color: #8f1d1d;
}

.cuisine-picker-v2-quick-pick:not(.meal-tag-grid) .cuisine-country-btn.is-active,
.cuisine-picker-v2-primary-btn.cuisine-country-btn.is-active:not(.tag) {
    border-color: var(--ct-green, #2e7d5a);
    background: rgba(46, 125, 90, 0.08);
    color: var(--ct-green, #2e7d5a);
    box-shadow: inset 0 0 0 1px rgba(46, 125, 90, 0.12);
}

.cuisine-country-btn[hidden] {
    display: none !important;
}

.cuisine-picker-sticky {
    position: relative;
    z-index: 50;
    margin: 0 -14px 0;
    padding: 0 14px 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: var(--surface);
    border-bottom: 1px solid transparent;
}

.cuisine-picker-sticky.is-fixed {
    position: fixed;
    left: var(--home-cuisine-fixed-search-left, 0px);
    right: var(--home-cuisine-fixed-search-right, 0px);
    top: var(--home-cuisine-fixed-search-top, 0px);
    z-index: 90;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0 14px 8px;
    box-sizing: border-box;
    border: 1px solid var(--border-strong);
    border-top: none;
    border-bottom-color: var(--border);
    box-shadow: 0 8px 16px rgba(255, 255, 255, 0.92);
    pointer-events: auto;
}

.cuisine-picker-v2.has-fixed-cuisine-search {
    padding-top: var(--home-cuisine-fixed-search-offset, 0px);
}

.cuisine-continent-section {
    margin-bottom: 28px;
}

.cuisine-continent-section:last-child {
    margin-bottom: 0;
}

.cuisine-continent-title {
    margin: 0 0 12px 4px;
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--ct-brand, #2e7d5a);
    display: flex;
    align-items: center;
    gap: 10px;
}

.cuisine-continent-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.cuisine-tag-grid.meal-tag-grid {
    --cuisine-tag-gap: 8px;
    display: flex;
    flex-direction: column;
    gap: var(--cuisine-tag-gap);
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: visible;
}

.cuisine-tag-grid.meal-tag-grid .tag-row {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: var(--cuisine-tag-gap);
    flex-wrap: nowrap;
    align-items: flex-start;
    box-sizing: border-box;
}

.cuisine-tag-grid.meal-tag-grid .tag-row .tag.cuisine-country-btn,
.cuisine-picker-v2-quick-pick.meal-tag-grid .tag-row .tag.cuisine-country-btn {
    appearance: none;
    -webkit-appearance: none;
    gap: 6px;
}

.cuisine-tag-grid.meal-tag-grid .tag-row .cuisine-picker-v2-tag-wrap,
.cuisine-tag-grid.meal-tag-grid .tag-row .cuisine-picker-v2-recent-icon {
    min-width: 0;
    box-sizing: border-box;
}

.cuisine-tag-grid .tag-row .cuisine-picker-v2-tag-wrap.is-hot,
.cuisine-tag-grid .tag-row .cuisine-picker-v2-tag-wrap.is-recent {
    margin-top: 0;
    z-index: 2;
}

.cuisine-tag-grid .tag-row .cuisine-picker-v2-tag-wrap .tag {
    width: 100%;
    overflow: visible;
}

.cuisine-tag-grid .tag-row .tag:has(.cuisine-picker-v2-badges) {
    position: relative;
    overflow: visible;
    margin-top: 0;
    z-index: 2;
}

.cuisine-tag-grid .tag-row .tag:has(.cuisine-picker-v2-badges) .cuisine-picker-v2-badges {
    z-index: 5;
}

.cuisine-tag-grid .tag .flag {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1;
}

.cuisine-tag-grid .tag .name {
    display: inline-block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    pointer-events: none;
    transition: max-width 0.34s cubic-bezier(0.25, 0.8, 0.25, 1), text-overflow 0.2s ease;
}

.cuisine-tag-grid .tag .cuisine-picker-v2-chip-label,
.cuisine-tag-grid .tag .cuisine-picker-v2-primary-label {
    transition: max-width 0.34s cubic-bezier(0.25, 0.8, 0.25, 1), text-overflow 0.2s ease;
}

.cuisine-tag-grid .tag-row > .tag.cuisine-country-btn.expanded,
.cuisine-tag-grid .tag-row > .cuisine-picker-v2-tag-wrap.expanded {
    z-index: 5;
    position: relative;
    overflow: visible;
}

.cuisine-tag-grid .tag-row > .tag.cuisine-country-btn.expanded,
.cuisine-tag-grid .tag-row > .cuisine-picker-v2-tag-wrap.expanded > .tag.cuisine-country-btn {
    overflow: visible;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.cuisine-tag-grid .tag-row > .cuisine-picker-v2-tag-wrap.expanded,
.cuisine-tag-grid .tag-row > .cuisine-picker-v2-tag-wrap.shrunk {
    min-width: 0;
}

.cuisine-tag-grid .tag-row > .cuisine-picker-v2-tag-wrap.expanded > .tag.cuisine-country-btn,
.cuisine-tag-grid .tag-row > .cuisine-picker-v2-tag-wrap.shrunk > .tag.cuisine-country-btn {
    width: 100% !important;
    max-width: 100% !important;
}

.cuisine-tag-grid .tag-row > .tag.cuisine-country-btn.expanded .name,
.cuisine-tag-grid .tag-row > .tag.cuisine-country-btn.expanded .cuisine-picker-v2-chip-label,
.cuisine-tag-grid .tag-row > .cuisine-picker-v2-tag-wrap.expanded .cuisine-picker-v2-chip-label {
    text-overflow: clip;
    overflow: visible;
    max-width: none;
}

.cuisine-tag-grid .tag-row > .tag.cuisine-country-btn.shrunk .name,
.cuisine-tag-grid .tag-row > .tag.cuisine-country-btn.shrunk .cuisine-picker-v2-chip-label,
.cuisine-tag-grid .tag-row > .cuisine-picker-v2-tag-wrap.shrunk .cuisine-picker-v2-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cuisine-tag-grid.style-swatch .tag-row > .tag.cuisine-country-btn.expanded,
.cuisine-tag-grid.style-swatch .tag-row > .cuisine-picker-v2-tag-wrap.expanded > .tag.cuisine-country-btn {
    overflow: visible;
}

.cuisine-tag-grid.style-dot .tag-row,
.cuisine-tag-grid.style-numbered .tag-row,
.cuisine-tag-grid.style-inline .tag-row {
    display: contents;
}

.cuisine-tag-grid.style-dot .tag-row .tag,
.cuisine-tag-grid.style-numbered .tag-row .tag {
    width: 100%;
}

.cuisine-tag-grid.style-table .tag-row {
    gap: 0;
}

.cuisine-tag-grid.style-table .tag-row .tag {
    width: 100%;
}

.cuisine-tag-grid.style-postit .tag-row {
    gap: 10px;
}

.cuisine-tag-grid.style-postit .tag-row .tag {
    width: 100%;
}

.cuisine-picker-v2-group[hidden],
.cuisine-picker-v2-quick-pick[hidden] {
    display: none !important;
}

.page-home .cuisine-picker-content {
    background: transparent;
    padding: 0;
}

@media (min-width: 600px) {
    .page-home .home-info-panel[data-home-info-panel="cuisine"] .cuisine-picker-content {
        overflow: visible;
    }

    .page-home .home-info-panel[data-home-info-panel="cuisine"] .cuisine-picker-v2 {
        overflow: visible;
        max-height: none;
        padding-top: 4px;
        padding-right: 2px;
    }

    .page-home .home-info-panel[data-home-info-panel="cuisine"] .cuisine-picker-scroll-rail {
        display: none !important;
    }
}

@media (max-width: 599px) {
    .page-home .home-info-panel[data-home-info-panel="cuisine"] {
        position: relative;
        padding: 0;
    }

    .page-home .home-info-panel[data-home-info-panel="cuisine"] .cuisine-picker-content {
        position: relative;
        box-sizing: border-box;
        max-height: none;
        padding: 0 14px;
        overflow: visible;
    }

    .page-home .home-info-panel[data-home-info-panel="cuisine"] .cuisine-picker-v2 {
        width: 100%;
        max-height: none;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        overflow: visible;
    }

    .page-home .home-info-panel[data-home-info-panel="cuisine"] .cuisine-picker-scroll-rail {
        display: none !important;
    }

    .page-home .cuisine-picker-v2-quick-pick {
        gap: 8px 6px;
        margin-top: 0;
        padding-top: 10px;
        width: 100%;
    }

    .page-home .home-info-panel[data-home-info-panel="cuisine"] .cuisine-picker-sticky {
        margin: 0;
        padding: 0;
    }

    .page-home .home-info-panel[data-home-info-panel="cuisine"] .cuisine-picker-sticky.is-fixed {
        padding: 0 14px 8px;
        border-left: 1px solid var(--border-strong);
        border-right: 1px solid var(--border-strong);
    }
}

.page-admin .admin-site-profile {
    margin: 0;
}

.page-admin .admin-site-profile-card {
    padding: 16px;
}

.page-admin .admin-site-profile-lead {
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--text-secondary);
    font-weight: 500;
    word-break: keep-all;
}

.page-admin .admin-site-profile-body {
    display: grid;
    gap: 18px;
}

.page-admin .admin-site-profile-section {
    min-width: 0;
}

.page-admin .admin-site-profile-section-title {
    margin: 0 0 10px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.page-admin .admin-site-profile-options {
    display: grid;
    gap: 10px;
}

.page-admin .admin-site-profile-option {
    display: block;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-gray);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.page-admin .admin-site-profile-option:hover {
    border-color: #d0d0d0;
    background: #fff;
}

.page-admin .admin-site-profile-option.is-active {
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 1px rgba(16, 133, 88, 0.12);
}

.page-admin .admin-site-profile-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.page-admin .admin-site-profile-option-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
}

.page-admin .admin-site-profile-option-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text);
    word-break: keep-all;
}

.page-admin .admin-site-profile-option-origin {
    font-size: 0.75rem;
    color: var(--text-muted);
    word-break: break-all;
}

.page-admin .admin-site-profile-preview-list {
    margin: 0;
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-gray);
}

.page-admin .admin-site-profile-preview-list > div {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.page-admin .admin-site-profile-preview-list dt {
    margin: 0;
    padding-top: 1px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
}

.page-admin .admin-site-profile-preview-list dd {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--text);
    word-break: break-all;
}

.page-admin .admin-site-profile-preview-list a {
    color: var(--accent);
    text-decoration: none;
}

.page-admin .admin-site-profile-preview-list a:hover {
    text-decoration: underline;
}

.page-admin .admin-db-profile-form {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
}

.page-admin .admin-db-profile-form > .form-field {
    margin: 0;
    border-top: 1px solid var(--border);
}

.page-admin .admin-db-profile-form > .form-field:first-of-type {
    border-top: 0;
}

.page-admin .admin-db-profile-form .form-input {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
}

.page-admin .admin-db-profile-form .form-input:focus {
    border: 0;
    box-shadow: none;
}

.page-admin .admin-db-schema-compare {
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.page-admin .admin-db-schema-compare-grid {
    display: grid;
    gap: 10px;
}

.page-admin .admin-db-schema-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
}

.page-admin .admin-db-schema-compare-button {
    width: auto;
    min-height: 42px;
    flex: 0 0 auto;
}

.page-admin .admin-db-schema-result {
    display: grid;
    gap: 14px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
}

.page-admin .admin-db-schema-result-header h4,
.page-admin .admin-db-schema-result-group h4,
.page-admin .admin-db-schema-sql h4 {
    margin: 0 0 8px;
    font-size: 0.8125rem;
    color: var(--text);
}

.page-admin .admin-db-schema-result-header p {
    margin: 0 0 10px;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--text-muted);
    word-break: break-all;
}

.page-admin .admin-db-schema-result-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.page-admin .admin-db-schema-result-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--surface-gray);
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
}

.page-admin .admin-db-schema-result-chip.is-warn {
    background: rgba(199, 150, 59, 0.14);
    color: #8a5b10;
}

.page-admin .admin-db-schema-result-detail {
    display: grid;
    gap: 12px;
}

.page-admin .admin-db-schema-result-list {
    display: grid;
    gap: 5px;
    margin: 0;
    padding-left: 18px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.45;
    word-break: break-all;
}

.page-admin .admin-db-schema-sql pre {
    max-height: 320px;
    margin: 0;
    overflow: auto;
    padding: 12px;
    border-radius: 12px;
    background: #1f2933;
    color: #f7f7f7;
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.page-admin .admin-site-profile-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.page-admin .admin-site-profile-status {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.page-admin .admin-site-profile-status.is-error {
    color: var(--danger, #c0392b);
}

.page-admin .admin-db-schema-compare > .admin-site-profile-status {
    margin-top: 10px;
}

.page-admin .admin-db-profile-actions .admin-site-profile-status {
    width: 100%;
    order: 2;
}

.page-admin .admin-db-profile-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

.page-admin .admin-db-profile-select-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.page-admin .admin-db-profile-actions > .btn {
    order: 1;
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
}

.page-admin .admin-db-profile-select-actions > .btn {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
}

.page-admin .admin-site-profile-save {
    width: 100%;
    min-height: 44px;
    padding: 10px 18px;
    font-size: 0.9375rem;
}

.page-admin .admin-db-profile-select-actions > .admin-site-profile-save,
.page-admin .admin-db-profile-actions > .admin-site-profile-save {
    width: auto;
    min-width: 0;
}

@media (min-width: 720px) {
    .page-admin .admin-site-profile-body {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 16px;
        align-items: start;
    }

    .page-admin .admin-site-profile-footer {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
    }

    .page-admin .admin-site-profile-status {
        margin-right: auto;
    }

    .page-admin .admin-db-profile-actions .admin-site-profile-status {
        margin: 0;
        text-align: right;
    }

    .page-admin .admin-site-profile-save {
        width: auto;
        min-width: 96px;
    }

    .page-admin .admin-db-schema-compare {
        grid-column: 1 / -1;
    }

    .page-admin .admin-db-schema-compare-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-admin .admin-db-schema-compare-button {
        width: auto;
        min-width: 120px;
    }
}

/* —— Admin food dictionary —— */
.page-admin .admin-food-dict-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.page-admin .admin-food-dict-lead {
    margin: 0 0 12px;
    font-size: 0.875rem;
    color: var(--text-muted, #666);
    line-height: 1.45;
}
.page-admin .admin-food-dict-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
@media (min-width: 720px) {
    .page-admin .admin-food-dict-stats {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}
.page-admin .admin-food-dict-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 8px;
    border-radius: 10px;
    background: #f7f7f8;
    border: 1px solid var(--border-soft, #ececec);
    text-align: center;
}
.page-admin .admin-food-dict-stat strong {
    font-size: 1.15rem;
    font-weight: 700;
}
.page-admin .admin-food-dict-stat span {
    font-size: 0.7rem;
    color: var(--text-muted, #666);
}
.page-admin .admin-food-dict-stat.is-warn {
    background: #fff8e8;
    border-color: #f0d48a;
}
.page-admin .admin-food-dict-search-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-soft, #ececec);
    border-radius: 10px;
    font-size: 0.9375rem;
    margin-bottom: 10px;
}
.page-admin .admin-food-dict-results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.page-admin .admin-food-dict-result-btn {
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--border-soft, #ececec);
    border-radius: 10px;
    background: #fafafa;
    font-size: 0.875rem;
    cursor: pointer;
}
.page-admin .admin-food-dict-result-btn:active {
    background: #f0f0f0;
}
.page-admin .admin-food-dict-hint {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    color: var(--text-muted, #666);
}
.page-admin .admin-food-dict-badge {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eee;
}
.page-admin .admin-food-dict-badge.is-official,
.page-admin .admin-food-dict-badge.is-kind-general {
    background: #e5f6ea;
    color: #1a7a3a;
}
.page-admin .admin-food-dict-badge.is-unofficial {
    background: #fff0e6;
    color: #a65b00;
}
.page-admin .admin-food-dict-badge.is-kind-variation {
    background: #e8eefc;
    color: #2a4d9b;
}
.page-admin .admin-food-dict-badge.is-kind-review {
    background: #fde8e8;
    color: #9b2a2a;
}
.page-admin .admin-food-dict-kind {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 999px;
    background: #eee;
    color: #555;
}
.page-admin .admin-food-dict-kind.is-kind-general {
    background: #e5f6ea;
    color: #1a7a3a;
}
.page-admin .admin-food-dict-kind.is-kind-variation {
    background: #e8eefc;
    color: #2a4d9b;
}
.page-admin .admin-food-dict-kind.is-kind-review {
    background: #fde8e8;
    color: #9b2a2a;
}
.page-admin .admin-food-dict-reclassify {
    margin: 12px 0;
    padding: 10px 12px;
    border: 1px solid rgba(155, 42, 42, 0.2);
    border-radius: 10px;
    background: #fff8f8;
}
.page-admin .admin-food-dict-reclassify-hint {
    margin: 0 0 8px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-muted, #666);
}
.page-admin .admin-food-dict-reclassify-field {
    display: block;
    margin-bottom: 6px;
}
.page-admin .admin-food-dict-reclassify-target {
    margin: 0 0 6px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1a7a3a;
}
.page-admin .admin-food-dict-reclassify-hits {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    background: #fff;
}
.page-admin .admin-food-dict-reclassify-hits li {
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.page-admin .admin-food-dict-reclassify-hits li:last-child {
    border-bottom: none;
}
.page-admin .admin-food-dict-reclassify-hits .admin-food-dict-col-item {
    width: 100%;
    text-align: left;
}
.page-admin .admin-food-dict-reclassify-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.page-admin .admin-food-dict-detail-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    margin: 0 0 12px;
    font-size: 0.875rem;
}
.page-admin .admin-food-dict-detail-meta dt {
    color: var(--text-muted, #666);
}
.page-admin .admin-food-dict-detail-meta dd {
    margin: 0;
}
.page-admin .admin-food-dict-subhead {
    margin: 12px 0 6px;
    font-size: 0.875rem;
    font-weight: 600;
}
.page-admin .admin-food-dict-alias-list,
.page-admin .admin-food-dict-tr-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    max-height: 160px;
    overflow: auto;
    font-size: 0.8125rem;
}
.page-admin .admin-food-dict-alias-list li,
.page-admin .admin-food-dict-tr-list li {
    padding: 4px 0;
    border-bottom: 1px solid #f0f0f0;
}
.page-admin .admin-food-dict-alias-list li.is-muted,
.page-admin .admin-food-dict-tr-list li.is-muted {
    color: var(--text-muted, #666);
}
.page-admin .admin-food-dict-alias-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.page-admin .admin-food-dict-detail-actions {
    margin-bottom: 8px;
}
.page-admin .admin-food-dict-empty-note {
    margin: 10px 0 0;
    font-size: 0.8125rem;
    color: #8a5a00;
}
.page-admin .admin-food-dict-empty-note code {
    font-size: 0.75rem;
}


/* —— Admin food dict browse tabs —— */
.page-admin .admin-food-dict-browse {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft, #ececec);
}
.page-admin .admin-food-dict-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.page-admin .admin-food-dict-tab {
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-soft, #ececec);
    background: #fff;
    font-size: 0.8125rem;
    cursor: pointer;
}
.page-admin .admin-food-dict-tab.is-active {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}
.page-admin .admin-food-dict-browse-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.875rem;
}
.page-admin .admin-food-dict-browse-title {
    font-weight: 600;
}
.page-admin .admin-food-dict-browse-count {
    color: var(--text-muted, #666);
    font-size: 0.8125rem;
}
.page-admin .admin-food-dict-browse-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 360px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.page-admin .admin-food-dict-browse-btn {
    width: 100%;
    text-align: left;
    padding: 9px 11px;
    border: 1px solid var(--border-soft, #ececec);
    border-radius: 8px;
    background: #fafafa;
    font-size: 0.8125rem;
    cursor: pointer;
}
.page-admin .admin-food-dict-browse-btn:active {
    background: #f0f0f0;
}
.page-admin .admin-food-dict-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    font-size: 0.8125rem;
}


/* —— Admin food dict column browser —— */
.page-admin .admin-food-dict-browse {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft, #ececec);
}
.page-admin .admin-food-dict-columns {
    display: grid;
    grid-template-columns: minmax(120px, 0.9fr) minmax(140px, 1.1fr) minmax(160px, 1.2fr);
    gap: 0;
    /* neutralized min-height 320 */
    /* neutralized max-height 420 */
    border: 1px solid var(--border-soft, #e0e0e0);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
@media (max-width: 720px) {
    .page-admin .admin-food-dict-columns {
        grid-template-columns: 1fr;
        max-height: none;
    }
}
.page-admin .admin-food-dict-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid var(--border-soft, #e8e8e8);
    background: #fafafa;
}
.page-admin .admin-food-dict-col:last-child {
    border-right: none;
    background: #fff;
}
.page-admin .admin-food-dict-col-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted, #666);
    background: #f3f3f4;
    border-bottom: 1px solid var(--border-soft, #e8e8e8);
    flex-shrink: 0;
}
.page-admin .admin-food-dict-col-count {
    margin-left: auto;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.page-admin .admin-food-dict-col-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}
.page-admin .admin-food-dict-col-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}
.page-admin .admin-food-dict-col-item {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    font-size: 0.8125rem;
    cursor: pointer;
    line-height: 1.3;
}
.page-admin .admin-food-dict-col-item:hover {
    background: #f0f0f2;
}
.page-admin .admin-food-dict-col-item.is-active {
    background: #e8eefc;
    color: #1a3a8a;
}
.page-admin .admin-food-dict-col-item-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-admin .admin-food-dict-col-item-meta {
    flex-shrink: 0;
    font-size: 0.6875rem;
    color: var(--text-muted, #888);
}
.page-admin .admin-food-dict-col-item-chevron {
    flex-shrink: 0;
    color: #bbb;
    font-size: 0.875rem;
}
.page-admin .admin-food-dict-col-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px;
    border-top: 1px solid var(--border-soft, #e8e8e8);
    font-size: 0.75rem;
    flex-shrink: 0;
    background: #f7f7f8;
}
.page-admin .admin-food-dict-page-btn {
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    line-height: 1;
}
.page-admin .admin-food-dict-page-btn:disabled {
    opacity: 0.4;
    cursor: default;
}
.page-admin .admin-food-dict-col-empty {
    margin: 0;
    padding: 16px 12px;
    font-size: 0.8125rem;
    color: var(--text-muted, #999);
    text-align: center;
}
/* first column category buttons already use col-item */
.page-admin .admin-food-dict-col[data-eat-admin-food-dict-col="cat"] .admin-food-dict-col-body {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
}


/* —— Admin food dict column scroll + col search fix —— */
.page-admin .admin-food-dict-columns {
    display: grid;
    grid-template-columns: minmax(140px, 0.95fr) minmax(160px, 1.15fr) minmax(180px, 1.25fr);
    /* neutralized height 420 */
    /* neutralized max-height 420 */
    /* neutralized min-height 280 */
    gap: 0;
    border: 1px solid var(--border-soft, #e0e0e0);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    align-items: stretch;
}
@media (max-width: 720px) {
    .page-admin .admin-food-dict-columns {
        grid-template-columns: 1fr;
        max-height: none;
    }
}
.page-admin .admin-food-dict-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0 !important;
    height: 100%;
    max-height: 100%;
    overflow: hidden !important;
    border-right: 1px solid var(--border-soft, #e8e8e8);
    background: #fafafa;
}
.page-admin .admin-food-dict-col:last-child {
    border-right: none;
    background: #fff;
}
.page-admin .admin-food-dict-col-head {
    flex: 0 0 auto;
}
.page-admin .admin-food-dict-col-search-wrap {
    flex: 0 0 auto;
    padding: 8px 8px 6px;
    border-bottom: 1px solid var(--border-soft, #e8e8e8);
    background: #f7f7f8;
}
.page-admin .admin-food-dict-col-search {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--border-soft, #ddd);
    border-radius: 8px;
    font-size: 0.8125rem;
    background: #fff;
}
.page-admin .admin-food-dict-col-search:focus {
    outline: none;
    border-color: #8aa4e0;
    box-shadow: 0 0 0 2px rgba(80, 120, 220, 0.15);
}
.page-admin .admin-food-dict-col-body,
.page-admin ul.admin-food-dict-col-body,
.page-admin .admin-food-dict-col-list.admin-food-dict-col-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}
.page-admin .admin-food-dict-col-foot {
    flex: 0 0 auto;
}
.page-admin .admin-food-dict-col-empty {
    flex: 0 0 auto;
}
.page-admin .admin-food-dict-col[data-eat-admin-food-dict-col="cat"] {
    display: flex;
    flex-direction: column;
}
.page-admin .admin-food-dict-col[data-eat-admin-food-dict-col="cat"] .admin-food-dict-col-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    display: flex;
    flex-direction: column;
}


/* —— Col3 detail pane —— */
.page-admin .admin-food-dict-col--detail {
    background: #fff;
}
.page-admin .admin-food-dict-col--detail .admin-food-dict-col-head {
    gap: 8px;
}
.page-admin .admin-food-dict-col--detail .admin-food-dict-col-head [data-eat-admin-food-dict-detail-title] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 700;
    color: #222;
}
.page-admin .admin-food-dict-detail-body {
    padding: 0;
    position: relative;
}
.page-admin .admin-food-dict-detail-panel {
    padding: 10px 12px 16px;
}
.page-admin .admin-food-dict-col--detail .admin-food-dict-detail-meta {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 6px 10px;
    margin: 0 0 12px;
    font-size: 0.8125rem;
}
.page-admin .admin-food-dict-col--detail .admin-food-dict-detail-meta dt {
    color: var(--text-muted, #888);
    font-weight: 500;
}
.page-admin .admin-food-dict-col--detail .admin-food-dict-detail-meta dd {
    margin: 0;
    word-break: break-all;
}
.page-admin .admin-food-dict-col--detail .admin-food-dict-detail-actions {
    margin-bottom: 12px;
}
.page-admin .admin-food-dict-col--detail .admin-food-dict-subhead {
    margin: 10px 0 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted, #666);
}
.page-admin .admin-food-dict-col--detail .admin-food-dict-alias-list,
.page-admin .admin-food-dict-col--detail .admin-food-dict-tr-list {
    max-height: 100px;
    overflow: auto;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
}
.page-admin .admin-food-dict-col--detail .admin-food-dict-var-list {
    overflow: visible;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
}
.page-admin .admin-food-dict-var-list li + li {
    margin-top: 4px;
}
.page-admin .admin-food-dict-parent-btn {
    display: inline-flex;
    max-width: 100%;
    border: 0;
    background: transparent;
    color: var(--accent, #2563eb);
    font: inherit;
    font-weight: 700;
    text-align: left;
    padding: 0;
    cursor: pointer;
}
.page-admin .admin-food-dict-parent-btn:hover {
    text-decoration: underline;
}
.page-admin .admin-food-dict-var-btn {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    background: #fff;
    padding: 7px 8px;
    text-align: left;
    cursor: pointer;
}
.page-admin .admin-food-dict-var-btn:hover {
    background: rgba(0, 0, 0, 0.035);
}
.page-admin .admin-food-dict-var-name {
    font-weight: 700;
    color: var(--text-main, #222);
}
.page-admin .admin-food-dict-var-meta {
    color: var(--text-muted, #666);
    font-size: 0.7rem;
}
.page-admin .admin-food-dict-col--detail .admin-food-dict-alias-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.page-admin .admin-food-dict-col-back {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    margin-right: 2px;
}
.page-admin .admin-food-dict-col--detail .admin-food-dict-col-empty {
    padding: 24px 14px;
}


/* tab count badge */
.page-admin .admin-food-dict-tab-count {
    flex-shrink: 0;
    margin-left: auto;
    min-width: 1.5em;
    padding: 1px 6px;
    border-radius: 999px;
    background: #e8e8ea;
    color: #444;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
    line-height: 1.4;
}
.page-admin .admin-food-dict-col-item.is-active .admin-food-dict-tab-count {
    background: rgba(255, 255, 255, 0.25);
    color: inherit;
}
.page-admin .admin-food-dict-col[data-eat-admin-food-dict-col="cat"] .admin-food-dict-col-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.page-admin .admin-food-dict-col[data-eat-admin-food-dict-col="cat"] .admin-food-dict-col-item-label {
    flex: 1;
    text-align: left;
}


/* lang select next to 분류 */
.page-admin .admin-food-dict-col-head--cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.page-admin .admin-food-dict-lang-select {
    flex: 0 0 auto;
    max-width: 7.5rem;
    padding: 3px 6px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    font-size: 0.6875rem;
    color: #333;
    cursor: pointer;
}


/*
 * Admin food-dict desktop:
 * - 상단바·하단 네비: max-width 800px 가운데
 * - 본문(셸): 95% 유지
 */
@media (min-width: 600px) {
    .page-admin:has(.admin-post-subpanel.is-active .admin-food-dict-panel) {
        --content-max: 800px;
    }

    .page-admin:has(.admin-post-subpanel.is-active .admin-food-dict-panel) .app-shell {
        max-width: 95% !important;
        width: 95% !important;
        margin-left: auto;
        margin-right: auto;
    }

    .page-admin:has(.admin-post-subpanel.is-active .admin-food-dict-panel) .app-header,
    .page-admin:has(.admin-post-subpanel.is-active .admin-food-dict-panel) .admin-header-stack,
    .page-admin:has(.admin-post-subpanel.is-active .admin-food-dict-panel) .admin-bottom-nav {
        left: 50%;
        right: auto;
        width: min(800px, 100%) !important;
        max-width: 800px !important;
        transform: translateX(-50%);
        margin-left: 0;
        margin-right: 0;
    }

    .page-admin:has(.admin-post-subpanel.is-active .admin-food-dict-panel) .app-main--admin {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}


/* multi-link chips in col3 */
.page-admin .admin-food-dict-chip-box {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
    max-height: 120px;
    overflow-y: auto;
}
.page-admin .admin-food-dict-chip {
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.6875rem;
    cursor: pointer;
    line-height: 1.3;
}
.page-admin .admin-food-dict-chip.is-on {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
}
.page-admin .admin-food-dict-links-save {
    width: 100%;
    margin-top: 4px;
}









/* ============================================================
   food-dict columns height FINAL v2
   CSS floor + JS sets exact px (data-eat-admin-food-dict-columns)
   ============================================================ */

/* Don't clip children when measuring */
.page-admin .admin-food-dict-panel .admin-food-dict-card.admin-card,
.page-admin .admin-food-dict-panel > .profile-date-card {
    overflow: visible !important;
}

.page-admin .admin-food-dict-columns {
    display: grid !important;
    grid-template-columns: minmax(140px, 0.95fr) minmax(160px, 1.15fr) minmax(180px, 1.25fr) !important;
    gap: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* NEVER use dvh here — some mobile WebViews report tiny dvh (~170 → 70vh≈94px) */
    height: auto;
    min-height: 420px !important;
    max-height: none !important;
    align-items: stretch !important;
    overflow: hidden !important;
    border: 1px solid var(--border-soft, #e0e0e0);
    border-radius: 12px;
    background: #fff;
}
@media (min-width: 1025px) {
    .page-admin .admin-food-dict-columns {
        height: 55vh; /* classic vh only on desktop */
        min-height: 420px !important;
    }
}

.page-admin .admin-food-dict-col {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 200px !important;
    max-height: none !important;
    overflow: hidden !important;
    border-right: 1px solid var(--border-soft, #e8e8e8);
    background: #fafafa;
    box-sizing: border-box;
}

.page-admin .admin-food-dict-col:last-child {
    border-right: none !important;
    background: #fff !important;
}

.page-admin .admin-food-dict-col-head,
.page-admin .admin-food-dict-col-search-wrap,
.page-admin .admin-food-dict-col-foot {
    flex: 0 0 auto !important;
}

.page-admin .admin-food-dict-col-body,
.page-admin ul.admin-food-dict-col-body,
.page-admin .admin-food-dict-col-list.admin-food-dict-col-body,
.page-admin .admin-food-dict-detail-body {
    flex: 1 1 auto !important;
    min-height: 100px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

@media (max-width: 720px) {
    /* height controlled by drill-down rules + JS */
    .page-admin .admin-food-dict-columns {
        grid-template-columns: 1fr !important;
    }
}


/* chips must stay visible in col3 scroll area */
.page-admin .admin-food-dict-chip-box {
    min-height: 32px;
}
.page-admin .admin-food-dict-chip-empty {
    font-size: 0.75rem;
    color: #999;
    padding: 4px 2px;
}
.page-admin .admin-food-dict-links {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eee;
}


/* —— multi-select: 1열 라벨 · 2열 드롭다운 —— */
.page-admin .admin-food-dict-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.page-admin .admin-food-dict-ms {
    display: grid;
    grid-template-columns: minmax(6.5rem, 0.95fr) minmax(0, 1.35fr);
    gap: 8px 10px;
    align-items: start;
    position: relative;
    margin-bottom: 0;
}
.page-admin .admin-food-dict-ms-label,
.page-admin .admin-food-dict-ms > .admin-food-dict-subhead {
    display: block;
    margin: 0;
    padding: 9px 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-muted, #555);
    word-break: keep-all;
}
.page-admin .admin-food-dict-ms-control {
    position: relative;
    min-width: 0;
}
.page-admin .admin-food-dict-ms-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
}
.page-admin .admin-food-dict-ms-toggle.is-open {
    border-color: #8aa4e0;
    box-shadow: 0 0 0 2px rgba(80, 120, 220, 0.12);
}
.page-admin .admin-food-dict-ms-toggle [data-ms-summary] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-admin .admin-food-dict-ms-toggle [data-ms-summary].is-placeholder {
    color: #999;
}
.page-admin .admin-food-dict-ms-caret {
    color: #888;
    font-size: 0.75rem;
    flex-shrink: 0;
}
.page-admin .admin-food-dict-ms-panel {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    z-index: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: none;
    min-width: 0;
    margin-top: 6px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fafbfd;
    box-shadow: none;
    box-sizing: border-box;
}
.page-admin .admin-food-dict-ms-panel.is-inline-open {
    display: flex;
}
.page-admin .admin-food-dict-ms-panel[hidden] {
    display: none !important;
}
.page-admin .admin-food-dict-ms.is-open .admin-food-dict-ms-control {
    /* panel expands in-flow; column body scrolls */
}
.page-admin .admin-food-dict-ms-filter,
.page-admin .admin-food-dict-ms-add-input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 9px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.75rem;
    margin-bottom: 6px;
}
/* 드롭다운 안 체크 항목: 2열 */
.page-admin .admin-food-dict-ms-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 4px;
    flex: 1 1 auto;
    min-height: 88px;
    max-height: none;
    overflow: visible;
    margin-bottom: 6px;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 4px;
    align-content: start;
    background: #fff;
}
.page-admin .admin-food-dict-ms-item {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 5px 6px;
    font-size: 0.72rem;
    line-height: 1.25;
    cursor: pointer;
    border-radius: 6px;
}
.page-admin .admin-food-dict-ms-item:hover {
    background: #f5f5f7;
}
.page-admin .admin-food-dict-ms-item.is-selected {
    background: #f0f4fc;
}
.page-admin .admin-food-dict-ms-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    accent-color: #1a1a1a;
    cursor: pointer;
}
.page-admin .admin-food-dict-ms-item > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-admin .admin-food-dict-ms-item.is-pending {
    background: #fff8e8;
    grid-column: 1 / -1;
}
.page-admin .admin-food-dict-ms-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #888;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
}
.page-admin .admin-food-dict-ms-remove:hover {
    color: #c0392b;
    background: rgba(192, 57, 43, 0.1);
}
.page-admin .admin-food-dict-ms-empty {
    grid-column: 1 / -1;
    padding: 12px 8px;
    font-size: 0.75rem;
    color: #999;
    text-align: center;
}
.page-admin .admin-food-dict-ms-add {
    display: flex;
    gap: 6px;
    align-items: center;
}
.page-admin .admin-food-dict-ms-add .admin-food-dict-ms-add-input {
    flex: 1;
    margin-bottom: 0;
}
.page-admin .admin-food-dict-ms-add .admin-alerts-action-btn {
    flex-shrink: 0;
    white-space: nowrap;
}
.page-admin .admin-food-dict-links-save {
    width: 100%;
    margin-top: 4px;
    grid-column: 1 / -1;
}
@media (max-width: 420px) {
    .page-admin .admin-food-dict-ms {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .page-admin .admin-food-dict-ms-label,
    .page-admin .admin-food-dict-ms > .admin-food-dict-subhead {
        padding-top: 0;
    }
}
/* panel needs overflow visible so dropdown can paint outside col */
.page-admin .admin-food-dict-col--detail .admin-food-dict-detail-body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
.page-admin .admin-food-dict-detail-panel {
    overflow: visible;
}

/* —— food-dict mobile drill-down (1 → 2 → 3) —— */
.page-admin .admin-food-dict-col-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 26px;
    width: auto;
    height: 28px;
    padding: 0 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    line-height: 1;
    font-size: 0.75rem;
    color: #333;
    flex: 0 0 auto;
}
.page-admin .admin-food-dict-col-back-icon { font-size: 1rem; line-height: 1; }
.page-admin .admin-food-dict-col-back-text { font-size: 0.72rem; font-weight: 600; }
.page-admin .admin-food-dict-col-back-text:empty { display: none; }
.page-admin .admin-food-dict-mobile-back { display: none !important; }

/* attribute-only rules beat partial cache / missing .page-admin */
@media (max-width: 720px) {
    [data-eat-admin-food-dict-columns],
    .page-admin .admin-food-dict-columns {
        display: block !important;
        grid-template-columns: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
        /* plain vh — avoid min()/dvh parse failures on older WebKit */
        height: 68vh !important;
        min-height: 360px !important;
        max-height: none !important;
        overflow: hidden !important;
        border-radius: 12px;
        border: 1px solid var(--border-soft, #e0e0e0);
        background: #fff;
    }
    [data-eat-admin-food-dict-columns] > .admin-food-dict-col,
    .page-admin .admin-food-dict-columns > .admin-food-dict-col {
        display: none !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 360px !important;
        max-height: none !important;
        border-right: none !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        background: #fafafa;
    }
    .page-admin .admin-food-dict-columns > .admin-food-dict-col--detail {
        background: #fff !important;
    }
    [data-eat-admin-food-dict-columns][data-mobile-pane="1"] > [data-eat-admin-food-dict-col="cat"],
    [data-eat-admin-food-dict-columns][data-mobile-pane="2"] > [data-eat-admin-food-dict-col="mid"],
    [data-eat-admin-food-dict-columns][data-mobile-pane="3"] > [data-eat-admin-food-dict-col="right"],
    [data-eat-admin-food-dict-columns]:not([data-mobile-pane]) > [data-eat-admin-food-dict-col="cat"],
    .page-admin .admin-food-dict-columns[data-mobile-pane="1"] > [data-eat-admin-food-dict-col="cat"],
    .page-admin .admin-food-dict-columns[data-mobile-pane="2"] > [data-eat-admin-food-dict-col="mid"],
    .page-admin .admin-food-dict-columns[data-mobile-pane="3"] > [data-eat-admin-food-dict-col="right"] {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 360px !important;
    }
    .page-admin .admin-food-dict-mobile-back { display: inline-flex !important; }
    .page-admin .admin-food-dict-col-back { display: inline-flex !important; }
    .page-admin .admin-food-dict-col-head,
    .page-admin .admin-food-dict-col-search-wrap,
    .page-admin .admin-food-dict-col-foot {
        flex: 0 0 auto !important;
    }
    .page-admin .admin-food-dict-col-head {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #f3f3f4;
    }
    [data-eat-admin-food-dict-columns] .admin-food-dict-col-body,
    [data-eat-admin-food-dict-columns] ul.admin-food-dict-col-body,
    [data-eat-admin-food-dict-columns] .admin-food-dict-detail-body,
    .page-admin .admin-food-dict-col-body,
    .page-admin ul.admin-food-dict-col-body,
    .page-admin .admin-food-dict-col-list.admin-food-dict-col-body,
    .page-admin .admin-food-dict-detail-body {
        flex: 1 1 auto !important;
        min-height: 180px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

@media (min-width: 721px) {
    .page-admin .admin-food-dict-columns > .admin-food-dict-col {
        display: flex !important;
    }
    .page-admin .admin-food-dict-mobile-back {
        display: none !important;
    }
}

/* ===== food-dict auto height (JS fills viewport) v20260708e ===== */
[data-eat-admin-food-dict-columns] {
  box-sizing: border-box !important;
  max-height: none !important;
}
@media (max-width: 1024px) {
  [data-eat-admin-food-dict-columns],
  .page-admin .admin-food-dict-columns {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    overflow: hidden !important;
    /* height set by JS to (viewport − top − bottom-nav) */
    min-height: 240px;
    max-height: none !important;
  }
  [data-eat-admin-food-dict-columns][data-mobile-pane="1"] > [data-eat-admin-food-dict-col="cat"],
  [data-eat-admin-food-dict-columns][data-mobile-pane="2"] > [data-eat-admin-food-dict-col="mid"],
  [data-eat-admin-food-dict-columns][data-mobile-pane="3"] > [data-eat-admin-food-dict-col="right"] {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
  }
}
@media (min-width: 1025px) {
  .page-admin .admin-food-dict-columns {
    /* height from JS; floor only */
    min-height: 320px !important;
  }
}


/*
 * Admin food-processor-2 desktop (this page only):
 * - 상단바·하단 네비: max-width 800px 가운데
 * - 본문(셸): 95% 유지
 */
@media (min-width: 721px) {
    .page-admin:has(.admin-post-subpanel.is-active .fp2-panel) {
        --content-max: 800px;
    }
    .page-admin:has(.admin-post-subpanel.is-active .fp2-panel) .app-shell {
        max-width: 95% !important;
        width: 95% !important;
        margin-left: auto;
        margin-right: auto;
    }
    .page-admin:has(.admin-post-subpanel.is-active .fp2-panel) .app-header,
    .page-admin:has(.admin-post-subpanel.is-active .fp2-panel) .admin-header-stack,
    .page-admin:has(.admin-post-subpanel.is-active .fp2-panel) .admin-bottom-nav {
        left: 50%;
        right: auto;
        width: min(800px, 100%) !important;
        max-width: 800px !important;
        transform: translateX(-50%);
        margin-left: 0;
        margin-right: 0;
    }
    .page-admin:has(.admin-post-subpanel.is-active .fp2-panel) .app-main--admin {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Admin · cuisine i18n editor */
.admin-cuisine-propose {
    margin: 0 0 18px;
    padding: 12px 12px 10px;
    border: 1px solid var(--border, #e5e2da);
    border-radius: 12px;
    background: var(--surface-soft, #f7f5f0);
}

.admin-cuisine-propose-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.admin-cuisine-propose-help {
    margin: 0 0 10px;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.admin-cuisine-propose-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-cuisine-propose-empty {
    margin: 0;
    padding: 10px 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
}

.admin-cuisine-propose-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.admin-cuisine-propose-item-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-cuisine-propose-name {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--text);
}

.admin-cuisine-propose-meta {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

.admin-cuisine-propose-actions {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.admin-cuisine-propose-status {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ct-green, #2e7d5a);
}

.admin-cuisine-propose-status.is-error {
    color: #8f1d1d;
}

.admin-cuisine-i18n-help {
    margin: 0 0 14px;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.admin-cuisine-i18n-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
}

.admin-cuisine-i18n-search {
    flex: 1 1 200px;
    min-width: 0;
}

.admin-cuisine-i18n-search input {
    width: 100%;
    box-sizing: border-box;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font: inherit;
}

.admin-cuisine-i18n-layout {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    min-height: 420px;
}

.page-admin .admin-cuisine-i18n-list-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 420px;
    height: 100%;
}

.admin-cuisine-i18n-subhead {
    margin: 0 0 8px;
    font-size: 0.875rem;
    font-weight: 800;
    flex-shrink: 0;
}

.page-admin .admin-cuisine-i18n-list,
.admin-cuisine-i18n-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-height: 360px;
    height: min(60vh, 560px);
    max-height: min(60vh, 560px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
}

.admin-cuisine-i18n-list-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.admin-cuisine-i18n-list-item:last-child {
    border-bottom: none;
}

.admin-cuisine-i18n-list-item:hover,
.admin-cuisine-i18n-list-item.is-active {
    background: rgba(46, 125, 90, 0.08);
}

.admin-cuisine-i18n-list-item strong {
    font-size: 0.9375rem;
}

.admin-cuisine-i18n-list-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.page-admin .admin-cuisine-i18n-side {
    min-width: 0;
    min-height: 420px;
    display: flex;
    flex-direction: column;
}

.admin-cuisine-i18n-detail {
    min-width: 0;
    flex: 1 1 auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: #fff;
    box-sizing: border-box;
}

.admin-cuisine-i18n-placeholder {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 24px;
    background: rgba(0, 0, 0, 0.02);
    box-sizing: border-box;
    text-align: center;
}

.admin-cuisine-i18n-placeholder[hidden],
.admin-cuisine-i18n-detail[hidden] {
    display: none !important;
}

.admin-cuisine-i18n-detail-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}

.admin-cuisine-i18n-key {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-family: ui-monospace, monospace;
}

.admin-cuisine-i18n-add {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.admin-cuisine-i18n-add select,
.admin-cuisine-i18n-add input[type="text"] {
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
}

.admin-cuisine-i18n-add input[type="text"] {
    flex: 1 1 140px;
    min-width: 0;
}

.admin-cuisine-i18n-add-hint {
    margin: 0 0 12px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.admin-cuisine-i18n-lang-block {
    margin-bottom: 14px;
}

.admin-cuisine-i18n-lang-title {
    margin: 0 0 6px;
    font-size: 0.8125rem;
    font-weight: 800;
}

.admin-cuisine-i18n-lang-title code {
    font-weight: 600;
    color: var(--text-muted);
}

.admin-cuisine-i18n-row-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-cuisine-i18n-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.admin-cuisine-i18n-row-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-cuisine-i18n-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    vertical-align: middle;
}

.admin-cuisine-i18n-badge.is-primary {
    background: rgba(46, 125, 90, 0.14);
    color: var(--ct-brand, #2e7d5a);
}

.admin-cuisine-i18n-badge.is-alias {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-muted);
}

.admin-cuisine-i18n-status {
    margin: 10px 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ct-brand, #2e7d5a);
}

.admin-cuisine-i18n-status.is-error {
    color: #b42318;
}

.admin-cuisine-i18n-empty {
    margin: 8px 0 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.page-admin .admin-cuisine-i18n-list-empty-inline {
    margin: 0;
    padding: 24px 14px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-muted);
}

@media (max-width: 800px) {
    .admin-cuisine-i18n-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .page-admin .admin-cuisine-i18n-list-wrap {
        min-height: 280px;
    }

    .page-admin .admin-cuisine-i18n-list,
    .admin-cuisine-i18n-list {
        min-height: 240px;
        height: 280px;
        max-height: 280px;
    }

    .admin-cuisine-i18n-placeholder {
        min-height: 180px;
    }
}

/* ── Error pages ── */
.page-error .app-shell {
    background: var(--bg);
}

.page-error__main {
    gap: 8px;
    animation: fadeUp 0.35s ease both;
}

.page-error__hero {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 8px;
    padding-top: 4px;
}

.page-error__hero .page-error__bowl {
    display: block;
    width: clamp(120px, 32vw, 168px);
    height: clamp(120px, 32vw, 168px);
    flex-shrink: 0;
}

.page-error__hero .tl-bowl-steam {
    stroke: #C7963B;
    stroke-width: 2.4;
    fill: none;
    stroke-linecap: round;
    transform-origin: center;
    animation: tl-bowl-steam-rise 3.6s ease-in-out infinite;
}

.page-error__hero .tl-bowl-steam-2 {
    animation-delay: 0.5s;
}

.page-error__hero .tl-bowl-steam-3 {
    animation-delay: 1s;
}

@media (prefers-reduced-motion: reduce) {
    .page-error__hero .tl-bowl-steam {
        animation: none;
        opacity: 0.6;
    }
}

.page-error__card {
    text-align: center;
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
}

.page-error__card h1 {
    text-align: center;
}

.page-error__card .auth-subtitle {
    text-align: center;
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
}

.page-error__code {
    margin: 0 0 10px;
    font-size: 2.75rem;
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1;
    color: var(--ct-brand, #2e7d5a);
    opacity: 0.85;
}

.page-error--403 .page-error__code {
    color: #a93f31;
}

.page-error--500 .page-error__code,
.page-error--503 .page-error__code {
    color: #8a6a2f;
}

.page-error__preview-note {
    margin: 14px 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
}

.page-error__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 var(--page-padding);
}

.page-error__actions .btn {
    width: 100%;
    max-width: 400px;
}

.page-error__secondary {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
}

.page-error__secondary:active {
    background: var(--surface-gray);
}

/* Admin diary-template cards */
.admin-diary-template-panel {
    --diary-admin-bg: #f6f4ee;
    --diary-admin-surface: #fff;
    --diary-admin-ink: #26241f;
    --diary-admin-ink-soft: #726f65;
    --diary-admin-ink-faint: #a7a399;
    --diary-admin-border: #e4e0d3;
    --diary-admin-border-strong: #d2ccbb;
    --diary-admin-green: #3f6b4a;
    --diary-admin-green-soft: #e6eee4;
    --diary-admin-amber: #b67a1e;
    --diary-admin-amber-soft: #fbf0da;
    --diary-admin-plum: #6a57a8;
    --diary-admin-plum-soft: #eeeaf8;
    --diary-admin-teal: #2c7873;
    --diary-admin-teal-soft: #e1f0ee;
    width: 90%;
    max-width: 90%;
    margin: 0 auto;
    padding: 0 0 40px;
    border-radius: 0;
    background: transparent;
    color: var(--diary-admin-ink);
    box-sizing: border-box;
}

.admin-diary-page-head h2 {
    margin: 0 0 4px;
    color: var(--diary-admin-ink);
    font-size: 1.1875rem;
    font-weight: 500;
    line-height: 1.35;
}

.admin-diary-page-head p {
    margin: 0 0 22px;
    color: var(--diary-admin-ink-soft);
    font-size: 0.8125rem;
    line-height: 1.6;
}

.admin-diary-page-head code {
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--diary-admin-green-soft);
    color: var(--diary-admin-green);
    font-size: 0.75rem;
}

.admin-diary-card-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.admin-diary-mobiletabs {
    display: none;
    gap: 8px;
    margin-bottom: 16px;
}

.admin-diary-subtab {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    padding: 10px;
    border: 1px solid var(--diary-admin-border);
    border-radius: 10px;
    background: var(--diary-admin-surface);
    color: var(--diary-admin-ink-soft);
    font-family: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.admin-diary-subtab .count,
.admin-diary-col-head .count {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--diary-admin-green-soft);
    color: var(--diary-admin-green);
    font-size: 0.71875rem;
    font-weight: 500;
    line-height: 1.5;
}

.admin-diary-subtab.is-active {
    border-color: var(--diary-admin-green);
    background: var(--diary-admin-green-soft);
    color: var(--diary-admin-green);
    font-weight: 500;
}

.admin-diary-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.admin-diary-col {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 220px);
    min-height: 420px;
    max-height: 720px;
    overflow: hidden;
    border: 1px solid var(--diary-admin-border);
    border-radius: 14px;
    background: var(--diary-admin-surface);
}

.admin-diary-col-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--diary-admin-border);
    background: var(--diary-admin-surface);
    color: var(--diary-admin-ink);
    font-size: 0.90625rem;
    font-weight: 500;
}

.admin-diary-col-scroll {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    padding: 14px 18px 18px;
}

.admin-diary-card-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--diary-admin-border);
    border-radius: 12px;
}

.admin-diary-col[data-eat-admin-diary-panel="0"] .admin-diary-col-scroll {
    padding-left: 0;
    padding-right: 0;
}

.admin-diary-col[data-eat-admin-diary-panel="0"] .admin-diary-card-group {
    border: none;
    border-radius: 0;
}

.admin-diary-col[data-eat-admin-diary-panel="1"] .admin-diary-col-scroll {
    padding-left: 0;
    padding-right: 0;
}

.admin-diary-col[data-eat-admin-diary-panel="1"] .admin-diary-card-group {
    border: none;
    border-radius: 0;
}

.admin-diary-card-row,
.admin-diary-phrase-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--diary-admin-border);
    background: var(--diary-admin-surface);
    cursor: pointer;
}

.admin-diary-phrase-row {
    padding-top: 13px;
    padding-bottom: 13px;
}

.admin-diary-card-row:last-child,
.admin-diary-phrase-row:last-child {
    border-bottom: none;
}

.admin-diary-card-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.admin-diary-tag {
    align-self: flex-start;
    margin-bottom: 7px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.65625rem;
    font-weight: 500;
    line-height: 1.45;
}

.admin-diary-tag.t-basic {
    background: #efede6;
    color: #6b6759;
}

.admin-diary-tag.t-insight {
    background: var(--diary-admin-amber-soft);
    color: var(--diary-admin-amber);
}

.admin-diary-tag.t-card {
    background: var(--diary-admin-plum-soft);
    color: var(--diary-admin-plum);
}

.admin-diary-tag.t-invite {
    background: var(--diary-admin-teal-soft);
    color: var(--diary-admin-teal);
}

.admin-diary-card-title {
    margin: 0 0 4px;
    color: var(--diary-admin-ink);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
}

.admin-diary-card-desc,
.admin-diary-phrase-text {
    margin: 0;
    color: var(--diary-admin-ink-soft);
    font-size: 0.78125rem;
    font-weight: 400;
    line-height: 1.55;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.admin-diary-phrase-num {
    margin: 0 0 5px;
    color: var(--diary-admin-ink-faint);
    font-size: 0.6875rem;
    line-height: 1.4;
}

.admin-diary-phrase-text {
    color: var(--diary-admin-ink);
    font-size: 0.8125rem;
    line-height: 1.7;
}

.admin-diary-token {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--diary-admin-teal-soft);
    color: var(--diary-admin-teal);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.55;
    white-space: nowrap;
}

.admin-diary-switch {
    position: relative;
    flex: 0 0 auto;
    width: 38px;
    height: 22px;
    cursor: pointer;
}

.admin-diary-switch input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.admin-diary-switch .track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--diary-admin-border-strong);
    transition: background 0.15s ease;
}

.admin-diary-switch .thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--diary-admin-surface);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
    transition: transform 0.15s ease;
}

.admin-diary-switch input:checked + .track {
    background: var(--diary-admin-green);
}

.admin-diary-switch input:checked + .track + .thumb {
    transform: translateX(16px);
}

.admin-diary-footerbar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
    padding: 14px 18px;
    border: 1px solid var(--diary-admin-border);
    border-radius: 14px;
    background: var(--diary-admin-surface);
}

.admin-diary-footlinks {
    display: flex;
    gap: 18px;
    font-size: 0.8125rem;
}

.admin-diary-footlinks a {
    color: var(--diary-admin-green);
    text-decoration: none;
}

.admin-diary-footlinks a:hover {
    text-decoration: underline;
}

.admin-diary-save-btn {
    min-height: 40px;
    padding: 10px 22px;
    border: none;
    border-radius: 10px;
    background: var(--diary-admin-green);
    color: #fff;
    font-family: inherit;
    font-size: 0.84375rem;
    font-weight: 500;
    cursor: pointer;
}

.admin-diary-save-btn:hover {
    opacity: 0.92;
}

.admin-diary-save-btn:active {
    transform: scale(0.98);
}

.admin-diary-save-note {
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px solid rgba(63, 107, 74, 0.18);
    border-radius: 10px;
    background: var(--diary-admin-green-soft);
    color: var(--diary-admin-green);
    font-size: 0.8125rem;
    font-weight: 600;
}

@media (max-width: 767px) {
    .admin-diary-template-panel {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 0 16px 40px;
    }

    .admin-diary-page-head {
        position: static;
        transform: none;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        min-height: 0;
        padding: 0 0 14px;
    }

    .admin-diary-page-head h2 {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: none;
        white-space: nowrap;
        word-break: normal;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .admin-diary-page-head .admin-diary-save-btn {
        flex: 0 0 auto;
        width: auto;
        align-self: center;
        min-height: 48px;
    }

    .admin-diary-mobiletabs {
        display: flex;
    }

    .admin-diary-columns {
        display: block;
    }

    .admin-diary-col {
        display: none;
        height: calc(100dvh - 210px);
        min-height: 0;
        max-height: none;
    }

    .admin-diary-col.is-mobile-active {
        display: flex;
    }

    .admin-diary-footerbar {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-diary-save-btn {
        width: auto;
    }
}

/* === code_artifact photo UI override (profile/photos) === */
/* From code_artifact (1).html — photo cards + bubble */

.profile-groups.is-photos-view.is-photos-scope-month {
    gap: 0;
}

.profile-groups.is-photos-view.is-photos-scope-month .profile-photos-month-block + .profile-photos-month-block {
    gap: 0;
    margin-top: 18px;
}

.profile-groups.is-photos-view.is-photos-scope-month .profile-photos-month-block + .profile-photos-month-block .profile-photos-month-header {
    margin-bottom: 0;
    padding-bottom: 0;
}

.profile-groups.is-photos-view.is-photos-scope-month .profile-date-group:not([hidden]) {
    flex: 0 0 100%;
}

.profile-groups.is-photos-view .profile-meal-list--photo-slots {
    gap: 0;
    border-top: 0.5px solid rgba(226, 232, 240, 0.55);
}

.profile-groups.is-photos-view .profile-meal-item--photo-slot {
    border: 0.5px solid rgba(226, 232, 240, 0.45);
    background: #f8fafc;
    overflow: hidden;
}

.profile-groups.is-photos-view .profile-meal-item--photo-slot:not(.profile-meal-item--photo-empty) {
    cursor: pointer;
}

.profile-groups.is-photos-view .profile-meal-item--photo-slot .profile-meal-thumb img {
    transition: transform 0.3s ease;
}

.profile-groups.is-photos-view .profile-meal-item--photo-slot:not(.profile-meal-item--photo-empty):hover .profile-meal-thumb img {
    transform: scale(1.05);
}

/* Strong bottom gradient (artifact) */

/* all-scope: same gradient treatment as month */
.profile-groups.is-photos-view.is-photos-scope-all .profile-meal-item--photo-slot:not(.profile-meal-item--photo-empty) .profile-photo-card-gradient,
.profile-groups.is-photos-view .profile-meal-item--photo-slot:not(.profile-meal-item--photo-empty) .profile-photo-card-gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    display: block;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.25) 42%, transparent 70%);
}

.profile-groups.is-photos-view .profile-meal-item--photo-slot .profile-photo-card-gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.25) 42%, transparent 70%);
    transition: background 0.2s ease;
}

.profile-groups.is-photos-view .profile-meal-item--photo-slot:not(.profile-meal-item--photo-empty):hover .profile-photo-card-gradient {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3) 45%, transparent 72%);
}

/* Bottom-left meta stack: 끼니 badge + menu name (code_artifact) */
.profile-groups.is-photos-view .profile-meal-item--photo-slot:not(.profile-meal-item--photo-empty) .profile-meal-summary {
    position: relative;
}

.profile-groups.is-photos-view .profile-meal-item--photo-slot:not(.profile-meal-item--photo-empty) .profile-meal-summary-text,
.profile-groups.is-photos-view .profile-meal-item--photo-slot:not(.profile-meal-item--photo-empty) .profile-meal-summary-text.is-photos-meta-stack {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    top: auto !important;
    z-index: 3;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none;
    min-width: 0;
    width: auto;
    max-width: calc(100% - 20px);
}

.profile-groups.is-photos-view .profile-meal-item--photo-slot:not(.profile-meal-item--photo-empty) .profile-meal-slot {
    display: none !important;
}

.profile-groups.is-photos-view .profile-meal-item--photo-slot:not(.profile-meal-item--photo-empty) .profile-meal-title {
    display: block;
    max-width: 100%;
    min-width: 0;
    width: 100%;
    order: 2;
}

.profile-groups.is-photos-view .profile-meal-item--photo-slot:not(.profile-meal-item--photo-empty) .profile-meal-title-tags {
    display: none !important;
}

/* 끼니 문구 배지 */
.profile-groups.is-photos-view .profile-meal-item--photo-slot:not(.profile-meal-item--photo-empty) .profile-photo-slot-label--overlay {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 3;
    order: 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    max-width: 100%;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    background: rgba(16, 185, 129, 0.92) !important;
    border: none !important;
    color: #fff !important;
    font-size: 0.5625rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: none; /* keep 아침/점심 Korean as-is */
    line-height: 1.15 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    pointer-events: none;
}

/* Menu name under 끼니 badge */
.profile-groups.is-photos-view .profile-meal-item--photo-slot:not(.profile-meal-item--photo-empty) .profile-meal-title-compact {
    display: block !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #fff !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    line-height: 1.25;
    text-align: left !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    box-shadow: none !important;
    border: none !important;
}

@media (min-width: 600px) {
    .profile-groups.is-photos-view .profile-meal-item--photo-slot:not(.profile-meal-item--photo-empty) .profile-meal-title-compact {
        font-size: 0.8125rem !important;
    }
}

/* Empty-slot 끼니 label (month placeholders) */
.profile-groups.is-photos-view .profile-meal-item--photo-empty .profile-photo-slot-label {
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
}

/* Empty slots */
.profile-groups.is-photos-view .profile-meal-item--photo-empty .profile-photo-slot,
.profile-groups.is-photos-view .profile-meal-item--photo-empty > .profile-photo-slot {
    background: #f8fafc;
    transition: background 0.15s ease;
}

.profile-groups.is-photos-view .profile-meal-item--photo-empty[data-eat-profile-photo-placeholder] .profile-photo-slot:hover,
.profile-groups.is-photos-view .profile-meal-item--photo-empty[data-eat-profile-photo-placeholder]:hover .profile-photo-slot {
    background: rgba(241, 245, 249, 0.9);
    cursor: pointer;
}

.profile-groups.is-photos-view.is-photos-scope-month .profile-meal-item--photo-empty .profile-photo-slot-label {
    bottom: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #94a3b8;
    font-size: 0.6875rem;
    font-weight: 700;
    box-shadow: none;
    border: none;
}

.profile-groups.is-photos-view .profile-meal-item--photo-empty[data-eat-profile-photo-placeholder]:hover .profile-photo-slot-label {
    background: transparent;
    color: #64748b;
}

.profile-groups.is-photos-view.is-photos-scope-month .profile-meal-item--photo-empty .profile-photo-slot--has-meal .profile-photo-slot-label {
    top: 50%;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #64748b;
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
}

.profile-groups.is-photos-view.is-photos-scope-month .profile-meal-item--photo-empty .profile-photo-slot-meal {
    top: auto;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    font-weight: 700;
    color: #0f172a;
    max-width: 90%;
    padding: 0;
    border-radius: 0;
    background: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Date badge — top-left */
.profile-groups.is-photos-view .profile-photos-day-head-item {
    display: none !important;
}

.profile-groups.is-photos-view .profile-photos-date-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    transform: none;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(226, 232, 240, 0.85);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    color: #1e293b !important;
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.profile-groups.is-photos-view .profile-photos-date-badge.is-visible {
    opacity: 1;
}

.profile-groups.is-photos-view .profile-meal-item--photo-empty .profile-photos-date-badge {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.profile-groups.is-photos-view .profile-photos-date-badge-md {
    font: inherit;
    color: inherit !important;
}

.profile-groups.is-photos-view .profile-photos-date-badge-wd {
    font: inherit;
    color: inherit !important;
}

.profile-groups.is-photos-view .profile-photos-date-badge.is-sunday {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(226, 232, 240, 0.85);
}
.profile-groups.is-photos-view .profile-meal-item--photo-empty .profile-photos-date-badge.is-sunday {
    background: transparent !important;
    border-color: transparent !important;
}
.profile-groups.is-photos-view .profile-photos-date-badge.is-sunday .profile-photos-date-badge-wd {
    color: inherit !important;
}
.profile-groups.is-photos-view .profile-photos-date-badge.is-saturday {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(226, 232, 240, 0.85);
}
.profile-groups.is-photos-view .profile-meal-item--photo-empty .profile-photos-date-badge.is-saturday {
    background: transparent !important;
    border-color: transparent !important;
}
.profile-groups.is-photos-view .profile-photos-date-badge.is-saturday .profile-photos-date-badge-wd {
    color: inherit !important;
}

/* Bubble: code_artifact (1) slate-dark theme */
.profile-photos-info-bubble {
    --profile-photos-bubble-ink: #ffffff;
    --profile-photos-bubble-ink-soft: rgba(255, 255, 255, 0.72);
    --profile-photos-bubble-cream: rgba(255, 255, 255, 0.1);
    --profile-photos-bubble-green-1: #1e293b;
    --profile-photos-bubble-green-2: #1e293b;
    --profile-photos-bubble-olive: #ffffff;
    --profile-photos-bubble-olive-bg: rgba(255, 255, 255, 0.1);
    --profile-photos-bubble-line: rgba(255, 255, 255, 0.08);
    --profile-photos-bubble-shadow: rgba(15, 23, 42, 0.4);
    width: 270px;
    max-width: 270px;
    min-width: 200px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #1e293b;
    box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.45);
    overflow: visible !important;
}

.profile-photos-info-bubble-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

.profile-photos-info-bubble-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--profile-photos-bubble-line);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.35;
    color: var(--profile-photos-bubble-ink);
    text-align: center;
    white-space: nowrap;
}

.profile-photos-info-bubble-eyebrow-dot {
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0 6px;
    border-radius: 0;
    background: transparent;
    opacity: 0.35;
    color: var(--profile-photos-bubble-ink);
    font-size: inherit;
    line-height: inherit;
}

.profile-photos-info-bubble-eyebrow-dot::before {
    content: '•';
}

.profile-photos-info-bubble-divider {
    display: none !important; /* eyebrow already has bottom border like artifact */
}

.profile-photos-info-bubble-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
}

.profile-photos-info-bubble-tag,
.profile-photos-info-bubble-tag.is-style {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.35;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    white-space: nowrap;
}

.profile-photos-info-bubble-dishes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: 4px;
    width: 100%;
    margin: 14px 0 0;
    text-align: center;
    font-size: 1.125rem; /* ~18px */
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.profile-photos-info-bubble-dish-sep {
    margin: 0 6px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
}

/* Tail: 12px rotated square, 1px white tip (artifact) */
.profile-photos-info-bubble-tail {
    position: absolute;
    left: var(--profile-photos-bubble-tail-x, 50%);
    width: 12px;
    height: 12px;
    overflow: visible;
    pointer-events: none;
    transform: translateX(-50%);
    z-index: 20;
}

.profile-photos-info-bubble-tail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    background: #1e293b;
    border-radius: 0;
    transform: rotate(45deg);
    box-shadow: none;
    border: none;
}

.profile-photos-info-bubble.is-tail-bottom .profile-photos-info-bubble-tail {
    bottom: -7px;
    top: auto;
}

.profile-photos-info-bubble.is-tail-bottom .profile-photos-info-bubble-tail::before {
    top: -1px;
    border-bottom: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    border-top: none;
    border-left: none;
    background: #1e293b;
}

.profile-photos-info-bubble.is-tail-top .profile-photos-info-bubble-tail {
    top: -7px;
    bottom: auto;
}

.profile-photos-info-bubble.is-tail-top .profile-photos-info-bubble-tail::before {
    top: 1px;
    border-top: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-bottom: none;
    border-right: none;
    background: #1e293b;
}

.profile-photos-info-bubble.is-tail-bottom,
.profile-photos-info-bubble.is-tail-top {
    --profile-photos-bubble-tail-color: #1e293b;
    --profile-photos-bubble-green-1: #1e293b;
    --profile-photos-bubble-green-2: #1e293b;
}

.profile-photos-info-bubble.is-visible.is-tail-bottom .profile-photos-info-bubble-tail::before {
    top: -0.5px !important;
    border: none !important;
    border-bottom: 1px solid #ffffff !important;
    border-right: 1px solid #ffffff !important;
    background: #1e293b !important;
    width: 12px !important;
    height: 12px !important;
    transform: translate(0.5px, 0.5px) rotate(45deg) !important;
}

.profile-photos-info-bubble.is-visible.is-tail-top .profile-photos-info-bubble-tail::before {
    top: 0.5px !important;
    border: none !important;
    border-top: 1px solid #ffffff !important;
    border-left: 1px solid #ffffff !important;
    background: #1e293b !important;
    width: 12px !important;
    height: 12px !important;
    transform: translate(-0.5px, -0.5px) rotate(45deg) !important;
}

.profile-photos-info-bubble.is-visible.is-tail-bottom .profile-photos-info-bubble-tail,
.profile-photos-info-bubble.is-visible.is-tail-top .profile-photos-info-bubble-tail {
    width: 12px !important;
    height: 12px !important;
    overflow: visible !important;
}

/* Partial white contact line = photo width only */
.profile-photos-info-bubble .profile-photos-bubble-contact-line {
    position: absolute;
    left: 0;
    height: 1px;
    background: #ffffff;
    pointer-events: none;
    z-index: 10;
    display: none;
    transform: translateX(-1px);
}

.profile-photos-info-bubble.is-visible .profile-photos-bubble-contact-line {
    display: block;
}

.profile-photos-info-bubble.is-tail-bottom .profile-photos-bubble-contact-line {
    bottom: -2px;
    top: auto;
}

.profile-photos-info-bubble.is-tail-top .profile-photos-bubble-contact-line {
    top: -2px;
    bottom: auto;
}

@media (max-width: 599px) {
    .profile-photos-info-bubble,
    .profile-photos-info-bubble.is-anchored-slot {
        width: 248px;
        max-width: min(248px, calc(100vw - 40px));
        min-width: 160px;
        padding: 14px;
        border-radius: 8px;
    }

    .profile-photos-info-bubble-eyebrow {
        font-size: 0.6875rem;
    }

    .profile-photos-info-bubble-tag,
    .profile-photos-info-bubble-tag.is-style {
        font-size: 0.6875rem;
        padding: 3px 12px;
    }

    .profile-photos-info-bubble-dishes {
        font-size: 1rem;
    }
}

/* Containment */
.profile-groups.is-photos-view,
.profile-groups.is-photos-view.is-photos-bubble-host {
    position: relative !important;
    overflow: hidden !important;
    contain: paint;
}

.profile-photos-info-bubble.is-contained-in-photos {
    position: absolute !important;
    z-index: 80 !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: none !important;
    box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.45) !important;
    margin: 0 !important;
    overflow: visible;
    transition:
        opacity 150ms ease,
        visibility 150ms ease,
        top 160ms ease,
        left 160ms ease;
}

.profile-photos-info-bubble.is-contained-in-photos .profile-photos-info-bubble-tail {
    overflow: visible;
}

.profile-groups.is-photos-view .profile-meal-item--photo-slot.is-photos-bubble-open {
    z-index: 40;
}


/* all-scope photo chrome force (display:contents parents) */
.profile-groups.is-photos-view.is-photos-scope-all .profile-meal-item--photo-slot:not(.profile-meal-item--photo-empty) {
    position: relative;
    overflow: hidden;
}
.profile-groups.is-photos-view.is-photos-scope-all .profile-meal-item--photo-slot:not(.profile-meal-item--photo-empty) .profile-meal,
.profile-groups.is-photos-view.is-photos-scope-all .profile-meal-item--photo-slot:not(.profile-meal-item--photo-empty) .profile-meal-summary {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
.profile-groups.is-photos-view.is-photos-scope-all .profile-meal-item--photo-slot:not(.profile-meal-item--photo-empty) .profile-photo-card-gradient {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    pointer-events: none !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.25) 42%, transparent 70%) !important;
}
.profile-groups.is-photos-view.is-photos-scope-all .profile-meal-item--photo-slot:not(.profile-meal-item--photo-empty) .profile-meal-thumb {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
}


/* hide day date badge (7/10 금) on all scope — keep on month */
.profile-groups.is-photos-view.is-photos-scope-all .profile-photos-date-badge,
.profile-groups.is-photos-view.is-photos-scope-all .has-photos-date-badge .profile-photos-date-badge {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}


/* meal_management-2 month badge reinforce (all scope) */
.profile-groups.is-photos-view.is-photos-scope-all .profile-meal-item--photo-slot .profile-photos-all-month-label,
.profile-groups.is-photos-view.is-photos-scope-all .profile-photos-all-month-label.is-visible {
    top: 12px !important;
    left: 12px !important;
    z-index: 10 !important;
    padding: 4px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    background: linear-gradient(to right, #f59e0b, #f97316, #f43f5e) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    line-height: 1 !important;
    box-shadow: 0 3px 10px rgba(249, 115, 22, 0.4) !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
}
.profile-groups.is-photos-view.is-photos-scope-all .profile-meal-item--photo-slot:hover .profile-photos-all-month-label {
    transform: scale(1.05) !important;
}