/* Base: fluid type + responsive layout */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --bg: #ffffff;
    --surface: #ffffff;
    --text: #14181f;
    --muted: #667085;
    --accent: #4b69ff;
    --accent-dark: #2954e6;
    --radius: 12px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --space: clamp(1rem, 3vw, 1.75rem);
    --font: system-ui, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
    --line: rgba(20, 24, 31, 0.12);
    --accent-soft: #e8ecff;
    --accent-deep: #2a3fae;
    --accent-ink: #1e2d7a;
    --accent-mid: #8b9fff;
    --m-dobi-primary: #3b67ff;
    --m-dobi-primary-dark: #2954e6;
    --m-dobi-surface: #f4f6fb;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 10px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 1px 0 rgba(255, 255, 255, 0.88) inset, 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(15, 23, 42, 0.1), 0 20px 48px rgba(15, 23, 42, 0.08);
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.96) inset, 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.06), 0 14px 32px rgba(15, 23, 42, 0.05);
    /* PC 전 페이지 외곽 통일 폭. RENTAL 의 좌(설명) + 우(390px 모바일 위젯) 합산과 비슷한 1280px 로
       ABOUT/GUIDE/REVIEWS/COMMUNITY/PROJECT/MY 모두 같은 폭에 맞춰 시각적 통일감을 준다.
       단일 칼럼 long-form (ABOUT/GUIDE) 본문은 외곽 안에서 좁게 가운데 정렬해 가독성 보존. */
    --pc-page-max: 80rem;
    /* 본문 가독 폭 — 768px(48rem) 였으나 외곽(1280px) 카드 안에서 너무 좁아 보여 880px(55rem)로 조정.
       한 줄 글자 수가 살짝 늘어나지만 매거진형 사이트의 가독 한계(85~95자) 안. */
    --pc-prose-max: 55rem;
    /* --pc-content-max 는 .main.main--pc-site 가 자식 폭을 제약하는 데 사용된다.
       --pc-page-max 와 같은 값으로 묶어 페이지 외곽 통일 정책을 단일 출처로 유지. */
    --pc-content-max: var(--pc-page-max);
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: var(--font);
    line-height: 1.55;
    color: var(--text);
    background: linear-gradient(180deg, #f8fbff 0%, var(--bg) 45%, #edf3fa 100%);
}

body > main {
    flex: 1 0 auto;
}

/* 이동 링크: 기본·호버·포커스에서 브라우저 밑줄 비활성(스타일은 각 컴포넌트에서 지정) */
a[href] {
    text-decoration: none;
}

a[href]:hover,
a[href]:focus,
a[href]:focus-visible,
a[href]:active {
    text-decoration: none;
}

a,
button,
[role="button"],
.card-link,
.app-tab,
.admin-side-link,
.mini-item,
.focus-primary-link,
.focus-inline-form button {
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease, background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

a:not(.skip-link):hover,
button:hover,
[role="button"]:hover,
.card-link:hover,
.app-tab:hover,
.admin-side-link:hover,
.mini-item:hover,
.focus-primary-link:hover,
.focus-inline-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(66, 124, 177, 0.24);
    filter: saturate(1.07);
}

/* 텍스트·컨트롤형 링크: 전역 들림·외곽 그림자 대신 각 블록의 배경/테두리 호버 사용 */
.mh-link:hover,
.site-nav a:hover,
.footer-legal-links a:hover,
.reviews-board-page:hover,
.reviews-board-sortlink:hover,
.customer-community-chip:hover,
.customer-community-lead a:hover,
.customer-community-bc a:hover,
.customer-community-login-hint a:hover,
body.dashboard-body .admin-dash-search-hint a:hover,
body.dashboard-body .admin-main-wrap .admin-section-view-all:hover,
body.dashboard-body .admin-pager .admin-pager-num:hover,
body.dashboard-body .admin-pager .admin-pager-step:hover,
.admin-cal-month-link:hover,
.admin-rail-mini-link a:hover,
.admin-rail-pending-link:hover,
.admin-sidebar-ops-link:hover,
.admin-brand:hover {
    transform: none;
    filter: none;
    box-shadow: none;
}

button:disabled,
button[disabled] {
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: none;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--accent);
    color: #fff;
    z-index: 100;
}

.skip-link:focus {
    left: 0.5rem;
}

.container {
    width: min(100% - 2 * var(--space), 72rem);
    margin-inline: auto;
    padding-inline: var(--space);
}

.dashboard-body .container {
    width: min(100% - 1.25rem, 104rem);
    padding-inline: 0.625rem;
}

body.dashboard-body {
    --admin-space-xs: 0.35rem;
    --admin-space-sm: 0.65rem;
    --admin-space-md: 1rem;
    --admin-space-lg: 1.45rem;
    --admin-radius-xl: 16px;
    --admin-radius-card: var(--radius, 14px);
    --admin-card-elev: 0 2px 4px rgba(15, 37, 71, 0.04), 0 12px 32px rgba(15, 52, 96, 0.055);
    background: #f5f7fb;
}

.app-stage {
    min-height: calc(100vh - 6rem);
    display: grid;
    place-items: center;
    padding-block: 1.2rem 2rem;
}

.app-device {
    width: 390px;
    max-width: 390px;
    border-radius: 2rem;
    border: 6px solid #1a2d44;
    background: #f3f8ff;
    box-shadow: 0 26px 44px rgba(4, 20, 40, 0.35);
    overflow: hidden;
}

/* 모바일 홈(mobile-preview-page) 도 다른 모바일 페이지와 동일한 chassis 높이/콘텐츠
   영역을 사용하도록 통일. 이전에는 홈만 viewport 풀 높이로 늘어나서 다른 메뉴보다 길어
   보였음. site-footer 만 숨기는 처리는 유지(모바일 chassis 안에서 푸터 의미 X). */
body.mobile-preview-page .site-footer {
    display: none;
}

.app-header {
    min-height: 3.1rem;
    padding: 0.55rem 0.8rem;
    background: linear-gradient(180deg, #ffffff, #ecf4ff);
    border-bottom: 1px solid #dbe7f6;
    display: grid;
}

.app-header strong {
    font-size: 0.84rem;
    color: #2a4058;
}

.app-header span {
    font-size: 0.72rem;
    color: #7289a5;
}

/* 모바일 chassis / PC phone shell 의 헤더 — 텍스트 대신 브랜드 로고만 표시.
   콘텐츠 시각 노이즈 줄이고 브랜드 인식 강화. */
.app-header--logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.4rem 0.8rem;
}

.app-header__logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.app-header__logo-link:hover {
    opacity: 0.78;
}

.app-header__logo {
    height: 26px;
    width: auto;
    max-width: 80%;
    object-fit: contain;
    display: block;
}

.app-content {
    height: min(66vh, 42rem);
    overflow: auto;
    padding: 0.55rem;
    background: #f2f7ff;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.app-content::-webkit-scrollbar {
    display: none;
}

.app-tabbar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    border-top: 1px solid #eef2f8;
    padding: 6px 6px calc(8px + env(safe-area-inset-bottom, 0px)) 6px;
    background: #ffffff;
    box-shadow: 0 -2px 14px rgba(20, 40, 80, 0.05);
    position: relative;
    z-index: 2;
    height: 64px;
    box-sizing: border-box;
}

.app-tab {
    display: grid;
    grid-template-rows: 26px 14px;
    row-gap: 4px;
    align-content: center;
    justify-items: center;
    text-align: center;
    text-decoration: none;
    color: #98a4b6;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.005em;
    border-radius: 14px;
    padding: 0;
    position: relative;
    height: 50px;
    box-sizing: border-box;
    transition: color 0.18s ease, background-color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.app-tab__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: transform 0.18s ease;
}

.app-tab__icon svg {
    width: 100%;
    height: 100%;
    display: block;
    stroke-width: 1.7;
    transition: stroke-width 0.16s ease;
}

.app-tab__label {
    line-height: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Override the global hover lift (transform/box-shadow) for app tabs */
.app-tabbar .app-tab:hover,
.app-tabbar .app-tab:focus-visible {
    transform: none;
    box-shadow: none;
    filter: none;
    background: transparent;
    color: var(--accent);
}

.app-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: 8px;
}

.app-tab:active .app-tab__icon {
    transform: scale(0.92);
}

/* Active state: bold icon stroke + soft inner fill + stronger color. No background, no shape. */
.app-tab.is-active {
    color: var(--accent);
    background: transparent;
}

.app-tab.is-active .app-tab__icon svg {
    stroke-width: 2.3;
}

.app-tab.is-active .app-tab__icon svg path,
.app-tab.is-active .app-tab__icon svg circle {
    fill: currentColor;
    fill-opacity: 0.16;
}

/* Label keeps the same font-weight in active/inactive to avoid Korean baseline shift.
   Active emphasis comes from color + bolder icon stroke + filled icon. */

.mobile-home-focus {
    display: grid;
    gap: 0.9rem;
}

.mh-home {
    gap: 0.95rem;
}

/* 결제대기 10분 홀딩: 색 단계(safe→warn→danger→critical) + 진행 바 + 펄스 */
.rental-hold-banner {
    --rhb-bg-from: #ecfdf5;
    --rhb-bg-to: #d1fae5;
    --rhb-border: #34d399;
    --rhb-text: #065f46;
    --rhb-count: #047857;
    --rhb-progress: #10b981;
    --rhb-shadow: rgba(6, 95, 70, 0.12);
    --rhb-progress-pct: 100%;
    /* 단계와 무관하게 항상 "긴급/시간" 액센트로 빨간 톤을 사용 */
    --rhb-accent: #ef4444;
    --rhb-accent-soft: rgba(239, 68, 68, 0.12);
    --rhb-accent-strong: #b91c1c;

    position: sticky;
    top: 0.35rem;
    z-index: 35;
    margin: 0 0 0.55rem;
    padding: 0.48rem 0.65rem 0.55rem 0.85rem;
    border-radius: 12px;
    border: 1px solid var(--rhb-border);
    border-left: 4px solid var(--rhb-accent);
    background: linear-gradient(180deg, var(--rhb-bg-from), var(--rhb-bg-to));
    box-shadow: 0 2px 10px var(--rhb-shadow);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--rhb-text);
    overflow: hidden;
    transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.rental-hold-banner.is-stage-warning {
    --rhb-bg-from: #fffbeb;
    --rhb-bg-to: #fef3c7;
    --rhb-border: #f59e0b;
    --rhb-text: #92400e;
    --rhb-count: #b45309;
    --rhb-progress: #f59e0b;
    --rhb-shadow: rgba(180, 83, 9, 0.14);
}

.rental-hold-banner.is-stage-danger {
    --rhb-bg-from: #fff7ed;
    --rhb-bg-to: #ffedd5;
    --rhb-border: #f97316;
    --rhb-text: #9a3412;
    --rhb-count: #c2410c;
    --rhb-progress: #f97316;
    --rhb-shadow: rgba(154, 52, 18, 0.18);
}

.rental-hold-banner.is-stage-critical {
    --rhb-bg-from: #fef2f2;
    --rhb-bg-to: #fee2e2;
    --rhb-border: #ef4444;
    --rhb-text: #991b1b;
    --rhb-count: #b91c1c;
    --rhb-progress: #ef4444;
    --rhb-shadow: rgba(153, 27, 27, 0.22);
    /* critical 단계엔 카운트 배지를 진한 빨간 배경에 흰 글씨로 반전 */
    --rhb-accent-soft: #b91c1c;
    --rhb-accent-strong: #ffffff;
    animation: rentalHoldPulse 1.2s ease-in-out infinite;
}

.rental-hold-banner.is-stage-critical .rental-hold-banner__count {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

@keyframes rentalHoldPulse {
    0%, 100% {
        box-shadow: 0 2px 10px rgba(239, 68, 68, 0.25);
    }
    50% {
        box-shadow: 0 2px 18px rgba(239, 68, 68, 0.55);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rental-hold-banner.is-stage-critical {
        animation: none;
    }
}

/* "지금 카운트다운 시작됨" 강조 — 활성화 직후 1.1초 동안 글로우+살짝 부풀기 */
.rental-hold-banner.is-just-activated {
    animation: rentalHoldJustActivated 1.1s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, box-shadow;
}

@keyframes rentalHoldJustActivated {
    0% {
        transform: scale(0.985);
        box-shadow:
            0 0 0 0 rgba(239, 68, 68, 0.55),
            0 8px 26px rgba(15, 23, 42, 0.12);
    }
    25% {
        transform: scale(1.012);
        box-shadow:
            0 0 0 8px rgba(239, 68, 68, 0.18),
            0 12px 32px rgba(15, 23, 42, 0.18);
    }
    60% {
        transform: scale(1.004);
        box-shadow:
            0 0 0 14px rgba(239, 68, 68, 0),
            0 8px 22px rgba(15, 23, 42, 0.12);
    }
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 0 rgba(239, 68, 68, 0),
            0 2px 10px var(--rhb-shadow);
    }
}

/* is-just-activated 와 is-stage-critical 가 동시에 걸리는 케이스(짧은 hold)에서는
   activated 쪽을 우선하고, 끝난 뒤 critical 펄스가 자연 재개되도록 둔다. */
.rental-hold-banner.is-just-activated.is-stage-critical {
    animation: rentalHoldJustActivated 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .rental-hold-banner.is-just-activated,
    .rental-hold-banner.is-just-activated.is-stage-critical {
        animation: none;
    }
}

.rental-hold-banner__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
}

.rental-hold-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rhb-accent);
    flex: 0 0 auto;
}

.rental-hold-banner__icon svg {
    display: block;
}

.rental-hold-banner__title {
    font-weight: 800;
    letter-spacing: -0.02em;
}

.rental-hold-banner__no {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: 0.92;
}

.rental-hold-banner__count {
    margin-left: auto;
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--rhb-accent-strong);
    background: var(--rhb-accent-soft);
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.22);
}

.rental-hold-banner__progress {
    margin-top: 0.45rem;
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.07);
    overflow: hidden;
}

.rental-hold-banner__progress-fill {
    display: block;
    height: 100%;
    width: var(--rhb-progress-pct);
    background: var(--rhb-progress);
    border-radius: inherit;
    transition: width 0.9s linear, background-color 0.3s ease;
}

.loginmy-dash-block--alert .rental-hold-banner {
    position: static;
    margin-bottom: 0.65rem;
}

/* 결제 대기 mid-flow 복귀 카드 (/rental 진입 시 결제만 남은 상태) */
.rental-resume-card {
    background: linear-gradient(180deg, #fff8ef 0%, #fffaf3 50%, #ffffff 100%);
    border: 1px solid #f5d8a8;
    box-shadow: 0 6px 22px rgba(180, 83, 9, 0.08);
}

.rental-resume-card__lead {
    margin: 0.2rem 0 0.85rem;
    color: #6b5230;
    font-size: 0.86rem;
    line-height: 1.5;
}

.rental-resume-summary {
    margin: 0 0 0.9rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid #f1e0c4;
    border-radius: 12px;
    background: #ffffffd9;
    display: grid;
    gap: 0.36rem;
}

.rental-resume-summary__row {
    display: grid;
    grid-template-columns: 6.4rem 1fr;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 0.86rem;
}

.rental-resume-summary__row dt {
    margin: 0;
    color: #7a6240;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.rental-resume-summary__row dd {
    margin: 0;
    color: #1f2937;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rental-resume-summary__row dd strong {
    font-weight: 800;
    color: #b45309;
    letter-spacing: 0.02em;
}

.rental-resume-options {
    margin: 0 0 0.9rem;
    padding: 0.7rem 0.85rem 0.75rem;
    border: 1px solid #ecd9b5;
    border-radius: 12px;
    background: #fffaf0;
}

.rental-resume-options__title {
    margin: 0 0 0.45rem;
    font-size: 0.84rem;
    font-weight: 800;
    color: #92400e;
    letter-spacing: -0.01em;
}

.rental-resume-options__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.32rem;
}

.rental-resume-options__list > li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 0.84rem;
    color: #1f2937;
    padding: 0.18rem 0;
    border-bottom: 1px dashed #efe0c2;
}

.rental-resume-options__list > li:last-child {
    border-bottom: none;
}

.rental-resume-options__name {
    font-weight: 600;
}

.rental-resume-options__qty {
    color: #6b5230;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rental-resume-options__price {
    color: #1f2937;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rental-resume-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 0 0 0.9rem;
    padding: 0.65rem 0.9rem;
    border-radius: 12px;
    background: #fff1d6;
    border: 1px solid #f5c97a;
}

.rental-resume-total__label {
    font-weight: 800;
    color: #6b4910;
    font-size: 0.88rem;
    letter-spacing: -0.01em;
}

.rental-resume-total__value {
    font-weight: 900;
    color: #b45309;
    font-size: 1.18rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.rental-resume-pay-form {
    display: grid;
    gap: 0.55rem;
    margin: 0 0 0.6rem;
}

.rental-resume-pay-form__method {
    display: grid;
    gap: 0.28rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #4b5563;
}

.rental-resume-pay-form__method > span {
    color: #6b5230;
}

.rental-resume-pay-form__method select {
    height: 2.4rem;
    padding: 0 0.7rem;
    border-radius: 10px;
    border: 1px solid #d6c4a0;
    background: #ffffff;
    font-size: 0.92rem;
    color: #1f2937;
    cursor: pointer;
}

.rental-resume-pay-form__method select:focus {
    outline: 2px solid #f59e0b;
    outline-offset: 1px;
    border-color: #f59e0b;
}

.rental-resume-actions__primary {
    appearance: none;
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    font-size: 0.98rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(180deg, #f97316, #ea580c);
    box-shadow: 0 4px 14px rgba(234, 88, 12, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
    letter-spacing: -0.01em;
}

.rental-resume-actions__primary:hover {
    filter: brightness(1.04);
    box-shadow: 0 6px 18px rgba(234, 88, 12, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.rental-resume-actions__primary:active {
    transform: translateY(1px);
    box-shadow: 0 3px 10px rgba(234, 88, 12, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.rental-resume-actions__primary:focus-visible {
    outline: 2px solid #fdba74;
    outline-offset: 2px;
}

.rental-resume-actions__primary[data-pay-submit-btn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
}

.rental-resume-actions__primary .pay-submit-btn__spinner {
    display: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    animation: pay-submit-spin 0.7s linear infinite;
}

.rental-resume-actions__primary.is-busy {
    cursor: progress;
    filter: brightness(0.95) saturate(0.85);
    background: linear-gradient(180deg, #fb923c, #f97316);
    box-shadow: 0 3px 10px rgba(234, 88, 12, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.rental-resume-actions__primary.is-busy:hover {
    filter: brightness(0.95) saturate(0.85);
    box-shadow: 0 3px 10px rgba(234, 88, 12, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.rental-resume-actions__primary.is-busy .pay-submit-btn__spinner {
    display: inline-block;
}

@keyframes pay-submit-spin {
    to { transform: rotate(360deg); }
}

.pay-done-card {
    text-align: center;
    background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
    border: 1px solid rgba(234, 88, 12, 0.18);
    box-shadow: 0 8px 28px rgba(234, 88, 12, 0.12);
}

.pay-done-hero {
    display: flex;
    justify-content: center;
    margin: 0.25rem 0 0.5rem;
}

.pay-done-hero__circle {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(22, 163, 74, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: pay-done-pop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

/* 체크마크 원에서 바깥으로 부드럽게 퍼지는 링 펄스 — 3회 반복 후 정지 */
.pay-done-hero__circle::before,
.pay-done-hero__circle::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(34, 197, 94, 0.55);
    opacity: 0;
    pointer-events: none;
    animation: pay-done-ring 1.6s ease-out 0.4s 3;
}
.pay-done-hero__circle::after {
    animation-delay: 1.0s;
    border-color: rgba(34, 197, 94, 0.4);
}

@keyframes pay-done-pop {
    0% { transform: scale(0.4); opacity: 0; }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}

@keyframes pay-done-ring {
    0%   { transform: scale(0.92); opacity: 0.85; }
    80%  { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(1.55); opacity: 0; }
}

/* 완료 헤드라인도 살짝 점멸로 시선 유도 — 3회만 */
.pay-done-head h1 {
    animation: pay-done-headline 1.2s ease-in-out 0.55s 3;
}

@keyframes pay-done-headline {
    0%, 100% { color: #0f172a; }
    50%      { color: #16a34a; }
}

@media (prefers-reduced-motion: reduce) {
    .pay-done-hero__circle,
    .pay-done-hero__circle::before,
    .pay-done-hero__circle::after,
    .pay-done-head h1 {
        animation: none !important;
    }
}

.pay-done-head h1 {
    font-size: 1.18rem;
    margin: 0.25rem 0 0;
    letter-spacing: -0.01em;
}

.pay-done-lead {
    color: #475569;
    margin: 0.55rem 0 0.85rem;
    font-size: 0.95rem;
}

.pay-done-meta {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.7rem 0.9rem;
    margin: 0.25rem 0 0.85rem;
    text-align: left;
}

.pay-done-meta__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.pay-done-meta__label {
    color: #64748b;
    font-size: 0.85rem;
}

.pay-done-meta__value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.95rem;
    color: #0f172a;
}

.pay-done-actions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.25rem;
}

.pay-done-actions__primary,
.pay-done-actions__ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: filter 0.15s ease, transform 0.12s ease, box-shadow 0.2s ease;
}

.pay-done-actions__primary {
    color: #ffffff;
    background: linear-gradient(180deg, #f97316, #ea580c);
    box-shadow: 0 4px 14px rgba(234, 88, 12, 0.3);
}

.pay-done-actions__primary:hover { filter: brightness(1.04); }
.pay-done-actions__primary:active { transform: translateY(1px); }

.pay-done-actions__ghost {
    color: #334155;
    background: #ffffff;
    border: 1px solid #cbd5e1;
}

.pay-done-actions__ghost:hover { background: #f8fafc; }

.rental-resume-actions__cancel-form {
    margin: 0;
}

.rental-resume-actions__cancel-btn {
    appearance: none;
    width: 100%;
    border: 1px solid #e5d3b1;
    border-radius: 12px;
    padding: 0.65rem 1rem;
    font-size: 0.86rem;
    font-weight: 700;
    color: #7c6034;
    background: #ffffff;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.rental-resume-actions__cancel-btn:hover {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fca5a5;
}

.rental-resume-actions__cancel-btn:focus-visible {
    outline: 2px solid #ef4444;
    outline-offset: 2px;
}

/* 30초 임박 모달 (JS가 동적으로 body에 부착) */
.rental-hold-imminent-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    animation: rentalHoldOverlayIn 0.18s ease-out;
}

.rental-hold-imminent-overlay.is-closing {
    animation: rentalHoldOverlayOut 0.18s ease-in forwards;
}

@keyframes rentalHoldOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes rentalHoldOverlayOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.rental-hold-imminent-modal {
    background: #ffffff;
    border-radius: 18px;
    padding: 1.5rem 1.4rem 1.3rem;
    width: min(100%, 360px);
    text-align: center;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.32);
    animation: rentalHoldModalIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes rentalHoldModalIn {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.rental-hold-imminent-modal__icon {
    color: #ef4444;
    display: flex;
    justify-content: center;
    margin-bottom: 0.6rem;
    animation: rentalHoldIconShake 1s ease-in-out infinite;
}

@keyframes rentalHoldIconShake {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-6deg); }
    75% { transform: rotate(6deg); }
}

.rental-hold-imminent-modal__title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #991b1b;
    margin: 0 0 0.7rem;
    letter-spacing: -0.02em;
}

.rental-hold-imminent-modal__count {
    font-size: 2.6rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: #b91c1c;
    margin: 0.2rem 0 0.5rem;
    letter-spacing: 0.04em;
    line-height: 1;
}

.rental-hold-imminent-modal__desc {
    font-size: 0.86rem;
    color: #4b5563;
    margin: 0 0 1.1rem;
    line-height: 1.55;
}

.rental-hold-imminent-modal__btn {
    width: 100%;
    background: linear-gradient(180deg, #ef4444, #dc2626);
    color: #ffffff;
    border: 0;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    font-size: 0.98rem;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
    transition: filter 0.16s ease, transform 0.1s ease;
}

.rental-hold-imminent-modal__btn:hover,
.rental-hold-imminent-modal__btn:focus-visible {
    filter: brightness(1.05);
    outline: none;
}

.rental-hold-imminent-modal__btn:active {
    transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
    .rental-hold-imminent-overlay,
    .rental-hold-imminent-modal,
    .rental-hold-imminent-modal__icon {
        animation: none !important;
    }
}

.rental-hold-summary-hint {
    margin: 0.35rem 0 0.5rem;
    font-size: 0.78rem;
    line-height: 1.45;
}

.mh-scroll-target {
    scroll-margin-top: 9.2rem;
}

/* 날짜 구간 완료 후 스크롤 시 하단 탭·여백과 겹치지 않도록 */
#option-step.mh-scroll-target {
    scroll-margin-bottom: 5.5rem;
}

.mh-card {
    border-radius: 14px;
    border-color: #d4e4f4;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.98) inset, 0 2px 6px rgba(15, 23, 42, 0.09), 0 10px 24px rgba(15, 23, 42, 0.12);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.mh-card-hero {
    padding-top: 0.66rem;
}

.mh-card-active {
    border-color: #3b67ff;
    background: linear-gradient(180deg, #ffffff, #f2f7ff);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.98) inset, 0 8px 18px rgba(59, 103, 255, 0.28), 0 20px 36px rgba(59, 103, 255, 0.3);
}

.mh-card-done {
    border-color: #d4e4f4;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.98) inset, 0 2px 5px rgba(15, 23, 42, 0.07), 0 8px 18px rgba(15, 23, 42, 0.08);
}

.mh-card-next {
    border-color: #b8cdf6;
    background: linear-gradient(180deg, #ffffff, #f7faff);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.98) inset, 0 4px 10px rgba(59, 103, 255, 0.14), 0 12px 24px rgba(59, 103, 255, 0.16);
}

.mh-stay-lead {
    margin: 0.35rem 0 0.75rem;
    font-size: 0.86rem;
    line-height: 1.65;
    color: #3d5c7e;
}

.mh-stay-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0.2rem 0 0.5rem;
}

.mh-stay-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    padding: 0.65rem 0.45rem;
    border-radius: 12px;
    border: 1px solid rgba(59, 103, 255, 0.35);
    background: linear-gradient(180deg, #fff, #f1f6ff);
    color: #27415d;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset;
    min-height: 4.2rem;
}

.mh-stay-choice:hover {
    border-color: #3b67ff;
    filter: brightness(1.02);
}

.mh-stay-choice-title {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 0.2rem;
}

.mh-stay-choice-sub {
    font-size: 0.74rem;
    font-weight: 550;
    color: #4a6688;
    line-height: 1.35;
}

.mh-stay-repick {
    margin-top: 0.45rem;
    margin-bottom: 0;
}

.mh-stay-repick a {
    color: #3b5fcd;
    font-weight: 650;
}

.mh-card-date-active {
    border-color: #e53935;
    background: linear-gradient(180deg, #ffffff, #fff6f6);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.98) inset, 0 10px 22px rgba(229, 57, 53, 0.28), 0 24px 40px rgba(229, 57, 53, 0.3);
}

.mh-head,
.mh-subhead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.45rem;
}

.mh-head h1 {
    margin: 0;
    font-size: 1.12rem;
    letter-spacing: -0.02em;
}

.mh-head h1 span {
    display: block;
    line-height: 1.22;
}

.mh-head h1 .mh-title-accent {
    color: #c62828;
    font-weight: 900;
}

.mh-subhead h2 {
    margin: 0;
    font-size: 0.98rem;
}

.mh-badge {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 999px;
    padding: 0.2rem 0.52rem;
    font-size: 0.66rem;
    font-weight: 800;
    color: #2742b4;
    background: #edf1ff;
    border: 1px solid #bcc8ff;
}

.mh-badge-soft {
    background: #eef4fb;
    border-color: #d4e0ec;
    color: #4d647e;
}

.mh-badge-warn {
    background: #fff4e0;
    border-color: #f7c889;
    color: #92400e;
}

.mh-link {
    font-size: 0.74rem;
    font-weight: 800;
    text-decoration: none;
    color: #486a90;
    border: 1px solid #cfdcf0;
    border-radius: 999px;
    padding: 0.28rem 0.62rem;
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 1px 3px rgba(15, 23, 42, 0.07);
}

.mh-link:hover {
    color: #1e4a7a;
    border-color: #9bb8e6;
    background: #f4f8ff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 2px 6px rgba(15, 23, 42, 0.08);
}

.mh-pill-row {
    margin-top: 0.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.mh-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.17rem 0.52rem;
    font-size: 0.64rem;
    font-weight: 800;
    border: 1px solid transparent;
}

.mh-pill-info {
    background: #e8f2ff;
    border-color: #bdd6ff;
    color: #235a9d;
}

.mh-pill-ok {
    background: #e7f9ef;
    border-color: #addfbf;
    color: #1f7a44;
}

.focus-card {
    background: #ffffff;
    border: 1px solid #d7e5f4;
    border-radius: 12px;
    padding: 0.72rem;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #d7e5f4, 0 2px 6px rgba(15, 23, 42, 0.08), 0 10px 22px rgba(15, 23, 42, 0.1);
}

.focus-card.mh-card-date-active {
    border-color: var(--accent);
    background: linear-gradient(180deg, #ffffff, #f4f8ff);
    box-shadow: inset 0 0 0 1px #d7e5f4, 0 2px 6px rgba(15, 23, 42, 0.08), 0 10px 22px rgba(15, 23, 42, 0.1);
    animation: cardPulseBorder 1.35s ease-in-out infinite;
}

.focus-card.mh-card-active {
    border-color: var(--accent);
    border-width: 2px;
    background: linear-gradient(180deg, #ffffff, #f2f7ff);
    box-shadow: inset 0 0 0 1px #d7e5f4, 0 2px 6px rgba(15, 23, 42, 0.08), 0 10px 22px rgba(15, 23, 42, 0.1);
}

@keyframes cardPulseBorder {
    0%, 100% {
        border-color: var(--accent);
        box-shadow: inset 0 0 0 1px #d7e5f4, 0 2px 6px rgba(15, 23, 42, 0.08), 0 10px 22px rgba(15, 23, 42, 0.1);
    }
    50% {
        border-color: #5b7dff;
        box-shadow: inset 0 0 0 1px #d7e5f4, 0 2px 6px rgba(15, 23, 42, 0.08), 0 10px 22px rgba(15, 23, 42, 0.1);
    }
}

.focus-card h1 {
    margin: 0 0 0.32rem;
    font-size: 1.12rem;
    line-height: 1.35;
    color: #223f5d;
}

.focus-card h2 {
    margin: 0 0 0.34rem;
    font-size: 0.9rem;
    color: #2e4f71;
}

.focus-card p {
    margin: 0 0 0.45rem;
    font-size: 0.84rem;
    color: #5d7690;
}

.focus-inline-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem;
    align-items: end;
}

.focus-date-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(52px, 1fr);
    gap: 0.3rem;
    overflow-x: auto;
    padding-bottom: 0.15rem;
    scrollbar-width: none;
}

.focus-date-strip::-webkit-scrollbar {
    display: none;
}

.focus-date-chip {
    border: 1px solid #cde0f2;
    border-radius: 10px;
    background: #f7fbff;
    text-decoration: none;
    color: #2e5277;
    min-height: 3rem;
    display: grid;
    place-items: center;
    padding: 0.3rem 0.25rem;
}

.focus-date-chip strong {
    font-size: 0.74rem;
    line-height: 1.1;
}

.focus-date-chip span {
    font-size: 0.7rem;
    color: #6c87a2;
}

.focus-date-chip.is-disabled {
    border-color: #dce7f2;
    background: #f3f6fa;
    color: #9daebf;
    pointer-events: none;
}

.focus-calendar {
    border: 1px solid #d8e6f4;
    border-radius: 12px;
    background: #fbfdff;
    padding: 0.45rem;
}

.focus-calendar-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.35rem;
}

.focus-calendar-head strong {
    font-size: 0.82rem;
    color: #294a6d;
}

.focus-calendar-head span {
    font-size: 0.67rem;
    color: #6f88a3;
}

.focus-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-size: 0.67rem;
    color: #708aa5;
    text-align: center;
    margin-bottom: 0.2rem;
}

.focus-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.22rem;
}

.focus-day-cell {
    min-height: 2.6rem;
    border-radius: 8px;
    border: 1px solid #d2e2f2;
    background: #f7fbff;
    text-decoration: none;
    display: grid;
    place-items: center;
    color: #2f567b;
    padding: 0.14rem 0.1rem;
}

.focus-day-cell strong {
    font-size: 0.75rem;
    line-height: 1.1;
}

.focus-day-cell small {
    font-size: 0.62rem;
    color: #6e89a4;
    line-height: 1;
}

.focus-day-cell.is-selected {
    background: #3f7bb1;
    border-color: #3f7bb1;
}

.focus-day-cell.is-selected strong,
.focus-day-cell.is-selected small {
    color: #ffffff;
}

.focus-day-cell.is-empty {
    border: 0;
    background: transparent;
}

.focus-day-cell.is-disabled {
    border-color: #e0e9f3;
    background: #f3f6fa;
    color: #9bafc2;
    pointer-events: none;
}

.focus-day-cell.is-disabled small {
    color: #a7b8c8;
}

.focus-day-cell.is-disabled.is-holiday strong,
.focus-day-cell.is-disabled.is-holiday small {
    color: #d45555;
}

.m-schedule-frame {
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(20, 24, 31, 0.1);
    background: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.88) inset, 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(15, 23, 42, 0.1);
}

.m-schedule-body {
    padding: 10px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.m-schedule-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 2px 6px;
}

.m-schedule-month-nav strong {
    font-size: 0.9rem;
    font-weight: 800;
    color: #14181f;
}

.m-schedule-month-nav button {
    width: 30px;
    height: 30px;
    border: 1px solid #d9e3ef;
    border-radius: 8px;
    background: #fff;
    color: #5f7388;
}

.m-schedule-month-link {
    width: 30px;
    height: 30px;
    border: 1px solid #d9e3ef;
    border-radius: 8px;
    background: #fff;
    color: #5f7388;
    text-decoration: none;
    display: grid;
    place-items: center;
    font-weight: 700;
}

.m-schedule-month-nav button[disabled] {
    opacity: 0.45;
}

.m-schedule-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    text-align: center;
    font-size: 0.62rem;
    font-weight: 700;
    color: #708aa5;
}

.m-schedule-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px 2px;
}

.m-schedule-cell {
    aspect-ratio: 1 / 1;
    min-height: 34px;
    max-height: 36px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    text-decoration: none;
    border: 0;
    background: transparent;
    color: #1f344a;
    font-size: 0.74rem;
    font-weight: 600;
}

.m-schedule-cell.is-available {
    font-weight: 800;
    color: #1b3654;
}

.m-schedule-cell.is-out {
    color: #b4bcc8;
}

.m-schedule-cell.is-weekend {
    color: #a6b3c1;
}

.m-schedule-cell.is-holiday {
    color: #9aa8b8;
    position: relative;
}

.m-schedule-cell.is-holiday::after {
    content: "휴";
    position: absolute;
    right: 2px;
    top: 1px;
    font-size: 0.5rem;
    color: #a7b3c2;
    font-weight: 700;
}

.m-schedule-cell.is-range-mid.is-holiday::after {
    color: rgba(255, 255, 255, 0.75);
}

/* 주말·공휴일도 이용일로 선택 가능: 선택 가능 링크는 회색 덮어씀 */
.m-schedule-cell.is-available.is-weekend,
.m-schedule-cell.is-available.is-weekend span {
    color: #1b3654;
}

.m-schedule-cell.is-available.is-holiday,
.m-schedule-cell.is-available.is-holiday span {
    color: #1b3654;
}

/* 이용 시작일로 고를 수 있는 날: 숫자가 들어 있는 둥근 셀을 녹색 링으로 감쌈 (공휴일·타월 동일) */
.m-schedule-cell.is-available:not(.mh-cal-end-choice):not(.is-sel):not(.is-range-mid):not(.is-range-end) {
    position: relative;
    z-index: 0;
    box-shadow:
        0 0 0 2px #22c55e,
        0 1px 4px rgba(22, 101, 52, 0.2);
}

.m-schedule-cell.is-sel {
    background: #3b67ff;
    color: #fff;
    box-shadow: 0 6px 14px rgba(59, 103, 255, 0.28);
}

/* 이용 구간: 시작·끝은 동일 원형 톤, 가운데는 같은 팔레트의 캡슐(한 덩어리로 읽히게) */
.m-schedule-cell.is-range-mid {
    background: linear-gradient(180deg, rgba(59, 103, 255, 0.38), rgba(59, 103, 255, 0.52));
    color: #fff;
    border-radius: 999px;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.m-schedule-cell.is-range-end {
    background: #3b67ff;
    color: #fff;
    box-shadow: 0 6px 14px rgba(59, 103, 255, 0.28);
    font-weight: 800;
}

/* 시작일은 있는데 1~2박 거리가 아닌 날(두 번째 클릭 불가) */
.m-schedule-cell.is-blocked-range {
    opacity: 0.42;
    cursor: not-allowed;
}

.focus-search .m-schedule-frame {
    border-radius: 16px;
    border: 1px solid rgba(20, 24, 31, 0.1);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.88) inset, 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(15, 23, 42, 0.1);
    min-height: auto;
}

.focus-search .m-schedule-body {
    padding: 10px 10px 12px;
    gap: 8px;
}

.focus-search .m-schedule-month-nav {
    padding: 2px 2px 6px;
}

.focus-search .m-schedule-month-nav button[disabled] {
    opacity: 0.45;
}

.focus-search .m-schedule-weekdays {
    font-size: 0.62rem;
}

.focus-search .m-schedule-grid {
    gap: 3px 2px;
}

.focus-search .m-schedule-cell {
    display: grid;
    place-items: center;
    text-decoration: none;
    color: #14181f;
    min-height: 36px;
    max-height: 36px;
    font-size: 0.8rem;
    font-weight: 600;
}

.focus-search .m-schedule-cell.is-available {
    font-weight: 800;
    color: #1b3654;
    font-size: 0.96rem;
}

.focus-search .m-schedule-cell.is-out {
    color: #b4bcc8;
}

.focus-search .m-schedule-cell.is-weekend {
    color: #a6b3c1;
}

.focus-search .m-schedule-cell.is-holiday {
    color: #9aa8b8;
    position: relative;
}

.focus-search .m-schedule-cell.is-holiday::after {
    content: "휴";
    position: absolute;
    right: 2px;
    top: 1px;
    font-size: 0.5rem;
    color: #a7b3c2;
    font-weight: 700;
}

.focus-search .m-schedule-cell.is-range-mid.is-holiday::after {
    color: rgba(255, 255, 255, 0.78);
}

.focus-search .m-schedule-cell.is-available.is-weekend,
.focus-search .m-schedule-cell.is-available.is-weekend span {
    color: #1b3654;
}

.focus-search .m-schedule-cell.is-available.is-holiday,
.focus-search .m-schedule-cell.is-available.is-holiday span {
    color: #1b3654;
}

.focus-search .m-schedule-cell.is-available:not(.mh-cal-end-choice):not(.is-sel):not(.is-range-mid):not(.is-range-end) {
    position: relative;
    z-index: 0;
    box-shadow:
        0 0 0 2px #22c55e,
        0 1px 4px rgba(22, 101, 52, 0.2);
}

/* 마지막일 고르는 단계: 시작 셀 라벨 + 끝 후보 2칸 강조 */
@keyframes mh-cal-end-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.12);
    }
}

.mh-cal-mode-pick-end .m-schedule-cell.mh-cal-is-start.is-sel {
    position: relative;
    overflow: visible;
}

.mh-cal-mode-pick-end .m-schedule-cell.mh-cal-is-start.is-sel::before {
    content: "시작";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    white-space: nowrap;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
}

.mh-cal-mode-pick-end .m-schedule-cell.mh-cal-end-choice.is-available {
    position: relative;
    z-index: 1;
    outline: 2px solid #16a34a;
    outline-offset: 1px;
    background: rgba(22, 163, 74, 0.16) !important;
    border-radius: 12px;
    color: #064e2b !important;
    font-weight: 900 !important;
    animation: mh-cal-end-pulse 1.35s ease-in-out infinite;
}

.mh-cal-mode-pick-end .m-schedule-cell.mh-cal-end-choice.is-available span {
    color: #064e2b !important;
}

@media (prefers-reduced-motion: reduce) {
    .mh-cal-mode-pick-end .m-schedule-cell.mh-cal-end-choice.is-available {
        animation: none;
        box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
    }
}

.focus-search .m-schedule-cell.is-sel {
    background: #3b67ff;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(59, 103, 255, 0.28);
}

.focus-search .m-schedule-cell.is-range-mid {
    background: linear-gradient(180deg, rgba(59, 103, 255, 0.4), rgba(59, 103, 255, 0.55));
    color: #ffffff;
    border-radius: 999px;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.focus-search .m-schedule-cell.is-range-end {
    background: #3b67ff;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(59, 103, 255, 0.28);
    font-weight: 800;
}

/* 확정 구간: 시작·마지막 라벨로 ‘고르는 단계’와 같은 언어 유지 */
.m-schedule-grid.mh-cal-range-done {
    overflow: visible;
}

.m-schedule-grid.mh-cal-range-done .m-schedule-cell.mh-cal-done-start.is-sel,
.m-schedule-grid.mh-cal-range-done .m-schedule-cell.mh-cal-done-end.is-range-end {
    position: relative;
    overflow: visible;
    z-index: 1;
}

.m-schedule-grid.mh-cal-range-done .m-schedule-cell.mh-cal-done-start.is-sel::before {
    content: "시작";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    white-space: nowrap;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
}

.m-schedule-grid.mh-cal-range-done .m-schedule-cell.mh-cal-done-end.is-range-end::before {
    content: "마지막";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.48rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    white-space: nowrap;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
}

.focus-search .m-schedule-cell.is-blocked-range {
    opacity: 0.42;
    cursor: not-allowed;
}

.focus-inline-form label {
    display: grid;
    gap: 0.18rem;
    font-size: 0.72rem;
    color: #53708d;
}

.focus-inline-form input {
    min-height: 2rem;
    border: 1px solid #c9dbed;
    border-radius: 8px;
    padding: 0.2rem 0.4rem;
    font: inherit;
    color: #27415d;
    background: #fff;
}

.focus-inline-form button,
.focus-primary-link {
    min-height: 2.7rem;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
    border-radius: 12px;
    padding: 0.48rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
    display: inline-grid;
    place-items: center;
    box-shadow: 0 6px 14px rgba(59, 103, 255, 0.28);
}

.focus-primary-link {
    display: grid;
    width: 100%;
    margin-top: 0.55rem;
}

.focus-primary-link.is-disabled {
    background: #dbe5f3;
    border-color: #dbe5f3;
    color: #5f7692;
    box-shadow: none;
    pointer-events: none;
}

.mh-state-msg {
    margin-top: 0.55rem;
    border-radius: 10px;
    padding: 0.5rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.mh-state-info {
    background: #f3f7fc;
    border-color: #d8e4f1;
    color: #506a86;
}

.mh-state-ok {
    background: #eaf4ff;
    border-color: #bfd8fb;
    color: #245f9f;
}

.mh-inline-link {
    display: inline-block;
    margin-top: 0.4rem;
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(59, 103, 255, 0.35);
    padding-bottom: 0.05rem;
}

.focus-search small {
    margin-top: 0.35rem;
    display: block;
    font-size: 0.68rem;
    color: #6a86a3;
}

.focus-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.metric-box {
    border: 1px solid #d7e4f2;
    border-radius: 8px;
    padding: 0.45rem;
    background: #f6faff;
}

.metric-box-info {
    background: linear-gradient(180deg, #f2f8ff, #ecf4ff);
    border-color: #cfe0f3;
}

.metric-box-accent {
    background: linear-gradient(180deg, #eef2ff, #e8edff);
    border-color: #cfd6ff;
}

.metric-box strong {
    display: block;
    font-size: 1rem;
    color: #24486d;
}

.metric-box span {
    font-size: 0.7rem;
    color: #6b86a1;
}

.focus-trust ul {
    margin: 0;
    padding-left: 1rem;
    color: #5f7993;
    font-size: 0.76rem;
    display: grid;
    gap: 0.2rem;
}

.mh-note {
    margin-top: 0.6rem;
    border-radius: 10px;
    padding: 0.42rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.35;
    border: 1px solid transparent;
}

.mh-note-info {
    background: #edf5ff;
    border-color: #cbe0fb;
    color: #38608b;
}

.mh-note-lite {
    border-color: transparent;
    background: #f3f8ff;
    margin-bottom: 0.55rem;
}

.mh-card .mh-note + .mini-list {
    margin-top: 0.45rem;
}

.mh-note-warn {
    background: #fff5e8;
    border-color: #f2cf99;
    color: #946323;
}

.mini-list {
    display: grid;
    gap: 0.34rem;
}

.mini-list-horizontal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
}

.mini-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border: 1px solid #dce8f5;
    border-radius: 8px;
    padding: 0.42rem 0.5rem;
    text-decoration: none;
    background: #f8fbff;
    color: #284967;
}

.option-item {
    width: 100%;
    font: inherit;
    text-align: left;
}

.option-item.option-item--thumb {
    grid-template-columns: 2.65rem 1fr auto;
    align-items: center;
    gap: 0.35rem 0.42rem;
}

.option-item__thumb {
    width: 2.65rem;
    height: 2.65rem;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(40, 73, 103, 0.14);
    background: #f3f7fc;
}

.option-item__name {
    font-size: 0.77rem;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.option-item__price {
    font-size: 0.72rem;
    color: #6f88a3;
    margin-left: 0.3rem;
}

.option-item.is-selected {
    border-color: var(--accent);
    background: #edf2ff;
    box-shadow: inset 0 0 0 1px rgba(59, 103, 255, 0.18);
}

.option-item.is-selected strong {
    color: #204a95;
}

.option-item.is-disabled {
    opacity: 0.55;
}

.mini-item strong {
    font-size: 0.77rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-item span {
    font-size: 0.72rem;
    color: #6f88a3;
    margin-left: 0.3rem;
}

.mh-rental .ops-form {
    margin-top: 0.6rem;
}

.mh-rental .ops-form.inline {
    grid-template-columns: 1fr auto;
}

.mh-rental .admin-btn {
    min-height: 2.1rem;
    border-radius: 10px;
}

.mh-rental .admin-table {
    font-size: 0.76rem;
}

.rental-pc-shell {
    padding: clamp(0.9rem, 1.8vw, 1.2rem);
}

/* PC 렌탈 분할: 하나의 카드가 아니라 레일 + 좌(문서)·우(디바이스)를 시각적으로 분리.
   외곽 폭은 다른 PC 페이지와 통일된 --pc-page-max 로 가운데 정렬. */
.rental-pc-shell.rental-pc-shell--dual {
    padding: 0;
    margin: 0 auto;
    max-width: var(--pc-page-max);
    border: none;
    box-shadow: none;
    background: transparent;
}

.rental-pc-layout.rental-pc-layout--dual {
    /* 우측 fixed 패널 정렬 시 calc(공통) */
    --rental-pc-band-inner: min(90vw, 1820px);
    --dual-pad-x: clamp(1rem, 1.85vw, 1.55rem);
    gap: clamp(1.35rem, 2.6vw, 2.85rem);
    column-gap: clamp(1.6rem, 3vw, 3rem);
    padding: clamp(1.2rem, 2vw, 1.8rem);
    border-radius: 24px;
    /* 다층 그라디언트 — 미세한 색 변화로 부드러운 깊이감.
       좌상단 highlight + 인디고~슬레이트 본 배경 + 우하단 보랏빛 글로우로 모서리까지 균일. */
    background:
        radial-gradient(80% 90% at 12% -5%, rgba(255, 255, 255, 0.85) 0%, transparent 55%),
        radial-gradient(70% 80% at 95% 100%, rgba(196, 181, 253, 0.18) 0%, transparent 60%),
        linear-gradient(165deg, #f0f4fc 0%, #e8edf9 35%, #e4eaf6 65%, #ebe9f5 100%);
    border: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 0 0 1px rgba(99, 102, 241, 0.06),
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 12px 32px rgba(15, 37, 71, 0.08),
        0 30px 60px rgba(15, 37, 71, 0.04);
}

.rental-pc-main.rental-pc-main--panel {
    align-self: start;
    border: 1px solid rgba(15, 23, 42, 0.04);
    border-radius: 18px;
    background: #ffffff;
    /* 다층 그림자 — 얕은 hairline + 중간 깊이 + 깊은 부드러운 외곽 광원 */
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 24px rgba(15, 23, 42, 0.06),
        0 20px 48px rgba(15, 23, 42, 0.04);
    padding: clamp(1rem, 1.6vw, 1.4rem);
}

/* 좌측 패널 안 콘텐츠 스크롤바 미니멀 처리 — 얇고 hover 시에만 또렷하게 */
.rental-pc-main.rental-pc-main--panel,
.rental-pc-main.rental-pc-main--panel * {
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
}

.rental-pc-main.rental-pc-main--panel::-webkit-scrollbar,
.rental-pc-main.rental-pc-main--panel *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.rental-pc-main.rental-pc-main--panel::-webkit-scrollbar-track,
.rental-pc-main.rental-pc-main--panel *::-webkit-scrollbar-track {
    background: transparent;
}

.rental-pc-main.rental-pc-main--panel::-webkit-scrollbar-thumb,
.rental-pc-main.rental-pc-main--panel *::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.12);
    border-radius: 999px;
    transition: background 0.2s ease;
}

.rental-pc-main.rental-pc-main--panel::-webkit-scrollbar-thumb:hover,
.rental-pc-main.rental-pc-main--panel *::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.3);
}

.rental-pc-side.rental-pc-side--column {
    background: transparent;
}

/* 가짜 디바이스: 다크 티타늄 베젤 + 다이내믹 아일랜드 + 하단 브리지(홈 인디케이터) — iPhone 14 전후 느낌 */
.rental-pc-phone-chassis {
    position: relative;
}

.rental-pc-phone-chassis--ios14 {
    /* 베젤(검게 보이는 띠): 기존 대비 패딩 50% 축소 */
    padding: 7.5px 6.5px 10px;
    border-radius: 2.8rem;
    background:
        linear-gradient(125deg, rgba(120, 128, 140, 0.35) 0%, transparent 42%),
        linear-gradient(315deg, rgba(60, 66, 76, 0.55) 0%, transparent 48%),
        linear-gradient(168deg, #3a3f48 0%, #262a31 36%, #14161b 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -9px 18px rgba(0, 0, 0, 0.55),
        0 22px 46px rgba(0, 0, 0, 0.38),
        0 4px 12px rgba(0, 0, 0, 0.22);
}

.rental-pc-preview-caption {
    margin: 0 0 10px;
    padding: 0;
    align-self: center;
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.35;
    text-align: center;
    color: #244a73;
}

/* 다이내믹 아일랜드(베젤 상단, 화면 밖 느낌) */
.rental-pc-phone-chassis--ios14::before {
    content: "";
    position: absolute;
    top: 5.5px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 28px;
    border-radius: 999px;
    background: radial-gradient(120% 90% at 50% 20%, #1c1e24 0%, #050507 68%, #000 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -6px 14px rgba(0, 0, 0, 0.75),
        0 1px 2px rgba(0, 0, 0, 0.45);
    z-index: 4;
    pointer-events: none;
}

/* 다크 브리지 + 홈 인디케이터(베젤과 화면 사이 여백에 겹침 — 화면 뒤가 아니라 위에 표시) */
.rental-pc-phone-chassis--ios14::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5px;
    transform: translateX(-50%);
    width: min(168px, 46%);
    height: 17px;
    border-radius: 14px;
    background-color: #060709;
    background-image: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92));
    background-size: 128px 5px;
    background-position: center 10px;
    background-repeat: no-repeat;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 2px 8px rgba(0, 0, 0, 0.45);
    opacity: 0.97;
    z-index: 5;
    pointer-events: none;
}

.rental-pc-phone-chassis--ios14 .rental-pc-device {
    position: relative;
    z-index: 3;
    border-radius: 2.6rem;
    border: 1px solid rgba(6, 8, 12, 0.92);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 0 10px rgba(0, 0, 0, 0.32);
    background: #0b0d12;
    overflow: hidden;
}

.rental-pc-phone-chassis--ios14 .rental-pc-device .app-header {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

/* iOS-14 섀시의 다이내믹 아일랜드(상단 검은 캡슐, 약 28px)는 디바이스 영역의
   상단 26px 정도를 가린다. 그 밑으로 충분한 여백을 두고 로고가 시작되도록
   헤더 상단 패딩을 키운다. 일반 모바일 셸에는 적용되지 않음. */
.rental-pc-phone-chassis--ios14 .rental-pc-device .app-header--logo {
    padding-top: 2.6rem;
    min-height: 5rem;
    align-items: flex-end;
}

.rental-pc-phone-chassis--ios14 .rental-pc-device .app-tabbar {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

/* RENTAL "wide mode" 도 일반 페이지와 같은 외곽 폭(--pc-page-max)을 사용한다.
   (이전 90vw/1820px 정책은 1366 viewport 에서 1230px 로 줄어 다른 페이지(1280px)와 어긋났음) */
.main--pc-site.main--pc-rental-wide {
    width: min(100%, var(--pc-page-max));
    max-width: var(--pc-page-max);
    margin-inline: auto;
}

.main.main--pc-site.main--pc-rental-wide > *:not(.pc-site-header) {
    width: min(100%, var(--pc-page-max));
    margin-inline: auto;
}

.rental-pc-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(390px, 2fr);
    gap: clamp(1rem, 1.8vw, 1.5rem);
    align-items: start;
}

.rental-pc-main,
.rental-pc-side {
    display: grid;
    gap: 0.9rem;
}

.rental-pc-side {
    width: 100%;
    /* 그리드 align-items: start 때문에 aside가 짧으면 sticky가 붙을 구간이 없음 → 행 전체 높이로 늘림 */
    align-self: stretch;
    min-height: 0;
    /* aside는 높게 유지하고, 자식(모바일 프레임)은 늘리지 않음 — 그리드 기본 stretch가 폰 높이를 왼쪽에 맞춰 늘림 */
    align-items: start;
    justify-items: center;
}

.rental-pc-side-sticky {
    position: sticky;
    top: clamp(0.6rem, 2vh, 1.1rem);
    z-index: 3;
    width: max-content;
    max-width: 100%;
}

.rental-pc-side-sticky .rental-pc-device {
    /* iPhone 14 논리 해상도 390×844에 맞춤 (뷰포트가 더 낮으면 세로만 줄임, 내부 스크롤 유지) */
    width: 390px;
    max-width: 100%;
    height: min(844px, calc(100dvh - 6.75rem));
    max-height: min(844px, calc(100vh - 6.75rem));
    display: flex;
    flex-direction: column;
}

.rental-pc-side-sticky .rental-pc-device .app-content {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
}

/* PC 렌탈 분할 데스크톱: 오른쪽을 뷰포트에 고정 + 좌측 패널·우측 데크 분리 강조 */
@media (min-width: 981px) {
    /*
     * 문서 스크롤 차단 → 헤더·우측 데크 레일이 들썩이지 않음.
     * 긴 설명은 왼쪽 패널(.rental-pc-main--panel) 안에서만 스크롤.
     */
    body.pc-rental-wide-mode {
        height: 100dvh;
        max-height: 100vh;
        overflow: hidden;
    }

    body.pc-rental-wide-mode > .site-footer {
        flex-shrink: 0;
    }

    body.pc-rental-wide-mode > main#main.main.main--pc-site.main--pc-rental-wide {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding-block: 0;
    }

    body.pc-rental-wide-mode .pc-site-header {
        flex-shrink: 0;
    }

    body.pc-rental-wide-mode .rental-pc-shell.rental-pc-shell--dual {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    body.pc-rental-wide-mode .rental-pc-layout.rental-pc-layout--dual {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(390px, 2fr);
        grid-template-rows: minmax(0, 1fr);
        align-items: stretch;
        row-gap: clamp(1.5rem, 2.8vw, 2.25rem);
    }

    body.pc-rental-wide-mode .rental-pc-layout--dual > .rental-pc-main,
    body.pc-rental-wide-mode .rental-pc-layout--dual > .rental-pc-side {
        min-height: 0;
    }

    body.pc-rental-wide-mode .rental-pc-main.rental-pc-main--panel {
        /*
         * .rental-pc-main 기본(display:grid + 암시 행)은 패널 높이가 뷰포트보다 작을 때
         * 자식 행을 균등 압축해 스크롤 대신 카드가 줄어든다 → 스크롤 컨테이너에는 block 레이아웃이 적합.
         */
        display: block;
        align-self: stretch;
        /* Grid/flex 자식 기본 min-height:auto는 콘텐츠 높이로 고정되어 내부 스크롤이 안 생김 */
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        margin-right: 0;
        padding-right: clamp(1rem, 2vw, 1.4rem);
        border-right: 2px solid rgba(59, 103, 255, 0.2);
        box-shadow:
            var(--shadow-card),
            8px 0 22px rgba(15, 37, 71, 0.07);
    }

    body.pc-rental-wide-mode .rental-pc-main.rental-pc-main--panel > * + * {
        margin-top: 0.9rem;
    }

    body.pc-rental-wide-mode .rental-pc-side.rental-pc-side--column {
        /* 그리드 열 높이(=좌측과 동일) 안에서 폰을 세로·가로 가운데 — fixed 뷰포트 기준은 데크와 어긋남 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background:
            radial-gradient(120% 100% at 50% -8%, rgba(255, 255, 255, 0.5) 0%, transparent 54%),
            linear-gradient(196deg, #d8dff3 0%, #d0d9ef 45%, #c7d3eb 100%);
        border-radius: 22px;
        border: 1px solid rgba(20, 24, 31, 0.12);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.88),
            0 2px 8px rgba(15, 37, 71, 0.05);
        padding: 12px 8px;
        align-self: stretch;
        min-height: 12rem;
    }

    /* 문서 스크롤이 막혀 있으므로 열 안 relative 로 충분; 좌측 패널 스크롤과 무관하게 고정됨 */
    body.pc-rental-wide-mode .rental-pc-layout--dual .rental-pc-side-sticky {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        z-index: 40;
        width: max-content;
        max-width: min(calc(100vw - 1.25rem), 460px);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body.pc-rental-wide-mode .rental-pc-preview-caption {
        margin: 0 0 clamp(10px, 1.35vw, 14px);
        padding: 0.35rem min(2.2rem, 5vw);
        border-radius: 999px;
        font-size: 0.8125rem;
        font-weight: 800;
        letter-spacing: 0.02em;
        color: var(--accent, #4265d6);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(244, 248, 255, 0.9) 100%);
        border: 1px solid rgba(59, 103, 255, 0.18);
        box-shadow:
            0 6px 16px rgba(15, 37, 71, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.85);
        text-wrap: balance;
    }

    body.pc-rental-wide-mode .rental-pc-blog-figure--left {
        float: left;
    }

    body.pc-rental-wide-mode .rental-pc-blog-figure--right {
        float: right;
    }
}

.rental-pc-detail-placeholder .rental-pc-detail-figure {
    margin: 0.65rem 0 0;
    padding: 0;
    border: 1px dashed #c9d8ec;
    border-radius: 10px;
    overflow: hidden;
    background: #f7faff;
}

.rental-pc-detail-placeholder .rental-pc-detail-ph {
    display: grid;
    place-items: center;
    min-height: 7.5rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: #8aa4c0;
    background: linear-gradient(135deg, #eef4ff, #f7fbff);
}

.rental-pc-detail-placeholder figcaption {
    margin: 0;
    padding: 0.55rem 0.65rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #4a6682;
}

/* PC 렌탈 좌측: 기본 패키지(플랫레이 + 요약) */
.rental-pc-base-package-card .rental-pc-base-package-lead {
    margin: 0.35rem 0 0.72rem;
    font-size: 0.86rem;
    line-height: 1.68;
    color: #3d5c7e;
}

.rental-pc-base-package-figure {
    margin: 0.35rem 0 0.55rem;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(59, 103, 255, 0.14);
    box-shadow: var(--shadow-card);
    background: #fff;
}

.rental-pc-base-package-figure img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

.rental-pc-base-package-figure figcaption {
    margin: 0;
    padding: 0.48rem 0.62rem 0.55rem;
    font-size: 0.78rem;
    line-height: 1.52;
    color: #3f5a78;
    background: linear-gradient(180deg, rgba(253, 254, 255, 0.98), rgba(236, 244, 255, 0.9));
    border-top: 1px solid rgba(203, 224, 251, 0.85);
}

.rental-pc-base-package-items {
    margin: 0.35rem 0 0.25rem;
    padding-left: 1.05rem;
    font-size: 0.82rem;
    line-height: 1.62;
    color: #3a5574;
}

.rental-pc-base-package-items li + li {
    margin-top: 0.32rem;
}

.rental-pc-base-package-items li strong {
    color: #2a4664;
    font-weight: 700;
}

/* PC 렌탈 좌측: 옵션 소개(일러스트 + 이름·짧은 사용법 리스트) */
.rental-pc-options-card .rental-pc-options-lead {
    margin: 0.35rem 0 0.75rem;
    font-size: 0.86rem;
    line-height: 1.68;
    color: #3d5c7e;
}

.rental-pc-options-visual {
    margin: 0.35rem 0 0.85rem;
}

.rental-pc-options-figure {
    margin: 0 0 0.5rem;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(59, 103, 255, 0.14);
    box-shadow: var(--shadow-card);
    background: #fff;
}

.rental-pc-options-figure img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

/* 플랫레이 아래: 세로 리스트 + 짧은 사용 안내 */
.rental-pc-options-usage-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.rental-pc-options-usage-item {
    margin: 0;
    padding: 0.62rem 0 0.7rem;
    border-bottom: 1px solid rgba(186, 208, 234, 0.45);
    position: relative;
}

.rental-pc-options-usage-item:last-child {
    border-bottom: none;
    padding-bottom: 0.15rem;
}

.rental-pc-options-usage-item:first-child {
    padding-top: 0.42rem;
}

.rental-pc-options-usage-item:first-child::before {
    top: 0.55rem;
}

.rental-pc-options-usage-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72rem;
    bottom: 0.72rem;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(129, 168, 230, 0.55), rgba(180, 210, 255, 0.35));
}

.rental-pc-options-usage-item:last-child::before {
    bottom: 0.2rem;
}

.rental-pc-options-usage-item--thumb {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.55rem;
}

.rental-pc-options-usage-item--thumb::before {
    display: none;
}

.rental-pc-options-usage-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
    border: 1px solid rgba(186, 208, 234, 0.65);
    background: #f6f9fd;
}

.rental-pc-options-usage-item-text {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 0.75rem;
}

.rental-pc-options-usage-item--thumb .rental-pc-options-usage-item-text {
    padding-left: 0;
}

.rental-pc-options-usage-title {
    display: block;
    margin-left: 0;
    font-size: 0.875rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.35;
    color: #2f4f72;
}

.rental-pc-options-usage-title--muted {
    color: rgba(47, 79, 114, 0.35);
    font-weight: 550;
}

.rental-pc-options-usage-desc {
    margin: 0.28rem 0 0;
    padding-left: 0;
    font-size: 0.815rem;
    font-weight: 450;
    line-height: 1.62;
    letter-spacing: -0.015em;
    color: #4c6382;
}

.rental-pc-options-usage-item--empty .rental-pc-options-usage-desc {
    color: rgba(76, 99, 130, 0.45);
}

@media (max-width: 520px) {
    .rental-pc-options-usage-title {
        font-size: 0.82rem;
    }

    .rental-pc-options-usage-desc {
        font-size: 0.78rem;
    }
}

.rental-pc-shipping-lead {
    margin: 0.35rem 0 0.65rem;
    font-size: 0.86rem;
    line-height: 1.68;
    color: #3d5c7e;
}

.rental-pc-shipping-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.84rem;
    line-height: 1.65;
    color: #3a5574;
}

.rental-pc-shipping-list li + li {
    margin-top: 0.4rem;
}

/* PC 렌탈 좌측: 블로그형 가이드(중간 크기 그림 + 본문 감싸기) */
.rental-pc-guide {
    display: grid;
    gap: 0.9rem;
}

.rental-pc-blog-chapter .rental-pc-blog-lead {
    margin: 0.4rem 0 0.88rem;
    font-size: 0.935rem;
    line-height: 1.74;
    color: #4a6582;
    font-weight: 480;
}

.rental-pc-blog-chapter .rental-pc-blog-lead strong {
    color: #314c6f;
    font-weight: 700;
}

.rental-pc-blog-chapter > .mh-subhead h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 820;
    letter-spacing: -0.034em;
    line-height: 1.42;
    color: #17334d;
}

.rental-pc-blog-block {
    margin: 0.15rem 0 0.5rem;
}

.rental-pc-blog-block::after {
    content: "";
    display: table;
    clear: both;
}

.rental-pc-blog-figure {
    margin: 0;
    padding: 0;
    width: 44%;
    max-width: 300px;
    border: 1px solid rgba(59, 103, 255, 0.16);
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(155deg, #f5f9ff 0%, #eef4ff 100%);
    box-shadow: var(--shadow-card);
}

.rental-pc-blog-figure--left {
    margin: 0.2rem 1rem 0.65rem 0;
}

.rental-pc-blog-figure--right {
    margin: 0.2rem 0 0.65rem 1rem;
}

.rental-pc-blog-figure img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

.rental-pc-blog-figure figcaption {
    margin: 0;
    padding: 0.45rem 0.6rem 0.55rem;
    font-size: 0.74rem;
    line-height: 1.45;
    color: #4f6d8f;
    background: rgba(255, 255, 255, 0.93);
    border-top: 1px solid rgba(203, 224, 251, 0.88);
}

.rental-pc-blog-p {
    margin: 0 0 0.65rem;
    font-size: 0.86rem;
    line-height: 1.72;
    color: #3d5c7e;
}

.rental-pc-blog-p:last-child {
    margin-bottom: 0.35rem;
}

.rental-pc-guide-chapter .rental-pc-blog-block .rental-pc-blog-p:first-of-type {
    font-size: 0.9rem;
    line-height: 1.74;
    color: #294868;
}

.rental-pc-guide-chapter .rental-pc-blog-block .rental-pc-blog-p + .rental-pc-blog-p {
    font-size: 0.825rem;
    line-height: 1.74;
    color: #597598;
}

.rental-pc-blog-figure--photo {
    border-radius: 14px;
    border-color: rgba(36, 52, 72, 0.28);
    background: #101820;
}

.rental-pc-blog-figure--photo figcaption {
    padding: 0.52rem 0.65rem 0.62rem;
    font-size: 0.785rem;
    line-height: 1.54;
    color: #394f6e;
    background: linear-gradient(180deg, rgba(253, 254, 255, 0.97), rgba(232, 242, 255, 0.94));
}

.rental-pc-guide-steps--accent li::marker {
    color: #4d6ee8;
    font-weight: 800;
}

/* 가이드 챕터 2: 단계 카드형 리스트 */
ol.rental-pc-guide-steps.rental-pc-guide-steps--cards {
    list-style: none;
    padding-left: 0;
    margin-top: 0.78rem;
    counter-reset: rpc-step;
}

ol.rental-pc-guide-steps.rental-pc-guide-steps--cards li {
    counter-increment: rpc-step;
    position: relative;
    padding: 0.55rem 0.75rem 0.58rem 2.82rem;
    margin: 0;
    border-radius: 12px;
    border: 1px solid rgba(195, 214, 245, 0.78);
    background: linear-gradient(152deg, rgba(254, 255, 255, 0.99), rgba(234, 243, 255, 0.86));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.96) inset,
        0 2px 10px rgba(59, 103, 255, 0.07);
    font-size: 0.82rem;
    line-height: 1.58;
    color: #3a5a7c;
}

ol.rental-pc-guide-steps.rental-pc-guide-steps--cards li + li {
    margin-top: 0.52rem;
}

ol.rental-pc-guide-steps.rental-pc-guide-steps--cards li::before {
    content: counter(rpc-step);
    position: absolute;
    left: 0.62rem;
    top: 0.58rem;
    width: 1.68rem;
    height: 1.68rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.74rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(150deg, #5b82f2, #3d62d9);
    box-shadow: 0 2px 7px rgba(61, 98, 217, 0.34);
}

.rental-pc-guide-step-title {
    display: block;
    font-size: 0.74rem;
    font-weight: 780;
    letter-spacing: -0.022em;
    color: #223d5c;
    margin-bottom: 0.15rem;
}

.rental-pc-guide-2-note {
    font-weight: 550;
    font-size: 0.755rem;
    line-height: 1.52;
    color: #3a5f86;
}

.rental-pc-guide-3-note {
    font-weight: 550;
    font-size: 0.755rem;
    line-height: 1.52;
    color: #6a4a2a;
}

ul.rental-pc-guide-steps {
    list-style-type: disc;
}

.rental-pc-guide-tip-note.mh-note {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.45rem;
    margin-top: 0.72rem;
    padding: 0.55rem 0.68rem;
    font-size: 0.78rem;
    font-weight: 550;
    line-height: 1.54;
    color: #3d5978;
    display: flex;
}

.rental-pc-guide-tip-label {
    font-weight: 600;
    color: #354e6f;
}

.rental-pc-guide-tip-after {
    flex: 1 1 10rem;
    min-width: 7rem;
    color: #516b86;
}

.rental-pc-guide-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.38rem 0.82rem;
    font-size: 0.795rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(145deg, #4e7bf0, #3b5fcd);
    border-radius: 999px;
    border: none;
    box-shadow: 0 3px 10px rgba(59, 95, 205, 0.3);
    flex-shrink: 0;
}

.rental-pc-guide-cta-btn:hover {
    filter: brightness(1.06);
    box-shadow: 0 5px 14px rgba(59, 95, 205, 0.38);
}

.rental-pc-guide-cta-btn:focus-visible {
    outline: 2px solid rgba(74, 116, 232, 0.55);
    outline-offset: 2px;
}

.rental-pc-guide-chapter .rental-pc-guide-steps,
.rental-pc-guide-chapter .mh-note {
    clear: both;
}

.rental-pc-guide-steps {
    margin: 0.65rem 0 0;
    padding-left: 1.15rem;
    font-size: 0.84rem;
    line-height: 1.58;
    color: #38577a;
}

.rental-pc-guide-steps li + li {
    margin-top: 0.42rem;
}

.rental-pc-main .grid-cards {
    margin-top: 0.2rem;
}

@media (max-width: 980px) {
    body.pc-rental-wide-mode {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    body.pc-rental-wide-mode > main#main.main.main--pc-site.main--pc-rental-wide {
        flex: 1 0 auto;
        overflow: visible;
        min-height: 0;
        display: block;
        padding-block: 0 2.25rem;
    }

    body.pc-rental-wide-mode .rental-pc-shell.rental-pc-shell--dual {
        flex: unset;
        min-height: 0;
        overflow: visible;
        display: block;
    }

    body.pc-rental-wide-mode .rental-pc-layout.rental-pc-layout--dual {
        flex: unset;
        min-height: 0;
        overflow: visible;
        grid-template-rows: none;
        align-items: start;
    }

    body.pc-rental-wide-mode .rental-pc-main.rental-pc-main--panel {
        align-self: start;
        display: grid;
        overflow-x: visible;
        overflow-y: visible;
        overscroll-behavior: auto;
        border-right: none;
        box-shadow: var(--shadow-card);
        padding-right: clamp(0.82rem, 1.35vw, 1.1rem);
    }

    body.pc-rental-wide-mode .rental-pc-blog-figure,
    body.pc-rental-wide-mode .rental-pc-blog-figure--left,
    body.pc-rental-wide-mode .rental-pc-blog-figure--right {
        float: none;
        width: 100%;
        max-width: none;
        margin: 0 0 0.85rem;
    }

    body.pc-rental-wide-mode .rental-pc-main.rental-pc-main--panel > * + * {
        margin-top: 0;
    }

    body.pc-rental-wide-mode .rental-pc-side.rental-pc-side--column {
        overflow: visible;
        display: grid;
        justify-items: center;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        min-height: 0;
    }

    .rental-pc-layout {
        grid-template-columns: 1fr;
    }

    .rental-pc-side {
        width: 100%;
    }

    body.pc-rental-wide-mode .rental-pc-layout--dual .rental-pc-side-sticky {
        position: static;
        transform: none;
        left: auto;
        top: auto;
        max-width: none;
        z-index: auto;
    }

    .rental-pc-side-sticky {
        position: static;
        z-index: auto;
    }

    .rental-pc-phone-chassis {
        padding: 0;
        border-radius: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .rental-pc-phone-chassis--ios14::before,
    .rental-pc-phone-chassis--ios14::after {
        content: none;
        display: none;
    }

    .rental-pc-phone-chassis--ios14 .rental-pc-device {
        border-radius: 2rem;
        border-color: #1a2d44;
        box-shadow: 0 26px 44px rgba(4, 20, 40, 0.35);
        background: #f3f8ff;
    }

    .rental-pc-side-sticky .rental-pc-device {
        max-height: none;
        height: auto;
    }

    .rental-pc-side-sticky .rental-pc-device .app-content {
        height: min(66vh, 42rem);
        flex: none;
    }
}

.mini-item-media {
    min-height: 2.4rem;
}

.option-selected-msg {
    margin-top: 0.6rem;
}

.option-complete-btn[disabled] {
    background: #dbe5f3;
    border-color: #dbe5f3;
    color: #5f7692;
    box-shadow: none;
    pointer-events: none;
}

.option-summary {
    margin-top: 0.65rem;
    border: 1px solid #cfe0f3;
    background: #f6fbff;
    border-radius: 12px;
    padding: 0.6rem 0.65rem;
}

.option-summary h3 {
    margin: 0 0 0.4rem;
    font-size: 0.84rem;
    color: #1f4569;
}

.option-summary p {
    margin: 0.15rem 0;
    font-size: 0.76rem;
    color: #4a6682;
}

.option-summary-actions {
    margin-top: 0.55rem;
    display: grid;
    gap: 0.4rem;
}

.option-summary-actions .ops-form {
    margin-top: 0;
}

.pay-progress {
    margin-top: 0.55rem;
    border: 1px solid #cfe0f3;
    background: #ffffff;
    border-radius: 10px;
    padding: 0.55rem 0.6rem;
}

.pay-progress-status {
    margin: 0 0 0.35rem;
    font-size: 0.76rem;
    color: #365978;
    font-weight: 700;
}

.pay-progress-steps {
    margin: 0;
    padding-left: 1rem;
    font-size: 0.74rem;
    color: #6b86a1;
    display: grid;
    gap: 0.18rem;
}

.pay-progress-steps li.is-done {
    color: #1f7a44;
    font-weight: 700;
}

.pay-result-card {
    margin-top: 0.55rem;
    border: 1px solid #bfd8fb;
    background: #ebf4ff;
    border-radius: 10px;
    padding: 0.58rem 0.62rem;
}

.pay-result-card h3 {
    margin: 0 0 0.35rem;
    font-size: 0.86rem;
    color: #204f88;
}

.pay-result-card p {
    margin: 0.12rem 0;
    font-size: 0.74rem;
    color: #3e6286;
}

.option-summary .option-pay-btn {
    min-height: 2.45rem;
}

.option-summary .option-edit-btn {
    justify-self: end;
}

@media (max-width: 360px) {
    .mini-list-horizontal {
        grid-template-columns: 1fr;
    }
}

.admin-shell {
    display: grid;
    grid-template-columns: 15.5rem minmax(0, 1fr);
    gap: 1.35rem;
    align-items: start;
    min-height: calc(100vh - 4rem);
    padding-block: 1rem 2rem;
}

.admin-sidebar {
    position: sticky;
    top: 1rem;
    background: var(--surface);
    border-radius: 16px;
    border: 1px solid #e8eef5;
    box-shadow:
        0 4px 6px rgba(15, 37, 71, 0.04),
        0 18px 40px rgba(15, 52, 100, 0.06);
    padding: 1rem 0.72rem;
    display: flex;
    flex-direction: column;
}

.admin-brand {
    display: block;
    margin: 0 0 0.62rem;
    padding: 0.18rem 0.35rem 0;
    text-decoration: none;
}

.admin-brand:hover {
    opacity: 0.92;
}

.admin-brand-logo {
    display: block;
    width: 100%;
    max-width: 12.2rem;
    height: auto;
}

.admin-nav-label {
    margin: 0.35rem 0 0.4rem;
    padding-left: 0.45rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #94a3b8;
}

.admin-nav-tree {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.95rem;
}

.admin-sidebar-ops {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px dashed #d8e2ee;
    display: grid;
    gap: 0.5rem;
}

.admin-nav-label--ops {
    margin-top: 0;
}

.admin-sidebar-ops-card {
    background: #f8fbff;
    border: 1px solid #e3edf8;
    border-radius: 10px;
    padding: 0.5rem 0.55rem;
    display: grid;
    gap: 0.26rem;
}

.admin-sidebar-ops-title {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    color: #1e3a8a;
}

.admin-sidebar-ops-list {
    margin: 0;
    padding-left: 1rem;
    font-size: 0.71rem;
    color: #475569;
    display: grid;
    gap: 0.17rem;
}

.admin-sidebar-ops-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: #1d4ed8;
    text-decoration: none;
    padding: 0.28rem 0.5rem;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.admin-sidebar-ops-link:hover {
    text-decoration: none;
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.2);
    color: #1e3a8a;
}

.admin-sidebar-ops-link--home {
    justify-content: center;
    width: 100%;
    margin-top: 0.12rem;
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(180deg, #3b6bff 0%, #2954e6 100%);
    border: 1px solid rgba(25, 60, 180, 0.55);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.admin-sidebar-ops-link--home:hover {
    color: #fff;
    background: linear-gradient(180deg, #2954e6 0%, #1e3fbf 100%);
    border-color: rgba(20, 45, 140, 0.75);
    filter: brightness(1.03);
}

.admin-sidebar-ops-link--text {
    margin-top: 0.08rem;
    padding: 0.08rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #64748b;
    font-size: 0.69rem;
    font-weight: 500;
    justify-content: flex-start;
}

.admin-sidebar-ops-link--text:hover,
.admin-sidebar-ops-link--text:focus-visible {
    background: transparent;
    border-color: transparent;
    color: #334155;
    text-decoration: underline;
}

.admin-sidebar-auth {
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 1px dashed #d8e2ee;
}

.admin-sidebar-auth h2 {
    margin: 0 0 0.5rem;
    font-size: 1.02rem;
}

.admin-sidebar-auth .admin-btn {
    min-height: 2.1rem;
    padding: 0.34rem 0.72rem;
    border-radius: 10px;
    border-color: #c8d7eb;
    background: #eef3fb;
    color: #375273;
    box-shadow: none;
    font-size: 0.8rem;
    font-weight: 700;
}

.admin-sidebar-auth .admin-btn:hover,
.admin-sidebar-auth .admin-btn:focus-visible {
    border-color: #b6c9e4;
    background: #e3ecfa;
    color: #2b4360;
    box-shadow: none;
}

.admin-side-link {
    display: flex;
    align-items: center;
    gap: 0.48rem;
    margin: 0;
    padding: 0.48rem 0.62rem;
    border-radius: 10px;
    font-size: 0.842rem;
    font-weight: 500;
    color: #475569;
    text-decoration: none;
    background: transparent;
}

.admin-nav-ico {
    flex-shrink: 0;
    opacity: 0.92;
}

.admin-side-link--ghost .admin-nav-ico {
    opacity: 0.76;
}

.admin-side-link.is-active .admin-nav-ico {
    opacity: 1;
}

.admin-side-link-text {
    min-width: 0;
}

.admin-side-link.admin-side-link--ghost {
    color: #64748b;
    font-weight: 450;
}

.admin-side-link:hover {
    background: #f1f5f9;
    color: #1e40af;
    transform: none;
    box-shadow: none;
    filter: none;
}

.admin-side-link.is-active {
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    border: 1px solid rgba(54, 99, 255, 0.35);
}

.admin-side-link.is-active:hover {
    background: var(--accent-dark);
    color: #fff;
}

.admin-main-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--admin-space-sm, 0.65rem);
}

.admin-body-split {
    display: block;
}

.admin-body-split > .admin-page-content {
    min-width: 0;
}

@media (min-width: 1101px) {
    .admin-body-split--with-rail {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(15.75rem, 18rem);
        gap: var(--admin-space-md, 1rem);
        align-items: start;
    }
}

.admin-right-rail {
    position: sticky;
    top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: var(--admin-space-md, 1rem);
    min-width: 0;
}

.admin-rail-card {
    padding: var(--admin-space-md);
    border-radius: var(--admin-radius-xl);
    border: 1px solid #e8eef4;
    background: var(--surface);
    box-shadow: var(--admin-card-elev);
}

.admin-rail-title {
    margin: 0 0 var(--admin-space-xs);
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.02em;
}

.admin-rail-month-label {
    margin: -0.1rem 0 0.5rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

.admin-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.2rem;
    margin-bottom: 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
    text-align: center;
}

.admin-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.26rem;
    font-size: 0.75rem;
    text-align: center;
}

.admin-cal-cell {
    padding: 0.28rem 0;
    border-radius: 8px;
    color: #334155;
    font-variant-numeric: tabular-nums;
}

.admin-cal-cell--empty {
    visibility: hidden;
}

.admin-cal-cell--today {
    box-shadow: 0 0 0 2px var(--accent);
    font-weight: 800;
    color: var(--accent-dark);
}

.admin-cal-cell--holiday {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

.admin-cal-cell--weekend {
    color: #94a3b8;
}

/* Admin dashboard: 세트별 월 Gantt 타임라인 */
.admin-cal-panel.admin-panel {
    overflow: visible;
}

.admin-cal-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-bottom: 0.95rem;
    padding-bottom: 0.15rem;
}

.admin-cal-head-main {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 960px) {
    .admin-cal-head-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 1.1rem;
        row-gap: 0.5rem;
        align-items: start;
    }

    .admin-cal-head-main .admin-cal-title {
        grid-column: 1 / -1;
    }

    .admin-cal-head-main .admin-cal-lead {
        grid-column: 1;
        grid-row: 2;
    }

    .admin-cal-head-main .admin-cal-bizday-callout {
        grid-column: 2;
        grid-row: 2;
        height: 100%;
    }

    .admin-cal-head-main .admin-cal-legend {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .admin-cal-bizday-card__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1rem;
        row-gap: 0.42rem;
    }

    .admin-cal-bizday-card__list > li:nth-child(3) {
        grid-column: 1 / -1;
    }
}

.admin-cal-title {
    margin: 0;
    font-size: clamp(1.05rem, 1.1rem + 0.2vw, 1.18rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f172a;
    line-height: 1.25;
}

.admin-cal-lead {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    max-width: none;
    width: 100%;
}

.admin-cal-sub,
.admin-cal-sub.muted-note,
.admin-cal-panel .admin-cal-sub {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: #556987;
    font-weight: 500;
}

.admin-cal-sub--meta {
    font-size: 0.76rem;
    color: #64748b;
}

.admin-cal-month-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
    align-items: center;
    flex-shrink: 0;
    padding-top: 0.12rem;
}

.admin-cal-month-link {
    display: inline-block;
    padding: 0.35rem 0.62rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-dark);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.1;
}

.admin-cal-month-link:hover {
    background: #eef6ff;
    border-color: rgba(54, 99, 255, 0.35);
    transform: none;
    filter: none;
    box-shadow: none;
}

.admin-cal-month-link--arrow {
    min-width: 2.35rem;
    text-align: center;
    font-size: 1.32rem;
    font-weight: 800;
    padding-inline: 0.52rem;
}

.admin-cal-month-link--today {
    min-width: 4.2rem;
    text-align: center;
    font-size: 1.48rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.38rem 0.65rem;
}

.admin-cal-legend {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.65rem;
    align-items: center;
}

.admin-cal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
    padding: 0.28rem 0.62rem 0.28rem 0.48rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.admin-cal-legend-swatch {
    width: 0.82rem;
    height: 0.82rem;
    border-radius: 5px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    flex-shrink: 0;
}

.admin-cal-bizday-callout {
    margin: 0;
    max-width: none;
    width: 100%;
}

.admin-cal-bizday-card {
    position: relative;
    height: 100%;
    min-height: 100%;
    padding: 0.75rem 1rem 0.8rem 1.05rem;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.98) inset,
        0 2px 10px rgba(15, 23, 42, 0.05);
}

.admin-cal-bizday-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    bottom: 0.55rem;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, #3b6cff 0%, #2563eb 100%);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
}

.admin-cal-bizday-card__head {
    margin: 0 0 0.55rem 0.2rem;
}

.admin-cal-bizday-card__kicker {
    margin: 0 0 0.12rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #64748b;
}

.admin-cal-bizday-card__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
    line-height: 1.25;
}

.admin-cal-bizday-card__list {
    margin: 0;
    padding: 0 0 0 1.05rem;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
}

.admin-cal-bizday-card__list > li {
    position: relative;
    margin: 0;
    padding-left: 0.55rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #475569;
    font-weight: 500;
}

.admin-cal-bizday-card__list > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #94a3b8;
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.22);
}

.admin-cal-bizday-card__list strong {
    color: #1e293b;
    font-weight: 700;
}

.admin-cal-bizday-card__keys {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.35rem;
    margin: 0 0 0.32rem;
}

.admin-cal-bizday-card__key {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #334155;
}

.admin-cal-bizday-card__keysep {
    color: #cbd5e1;
    font-weight: 600;
    user-select: none;
}

.admin-cal-bizday-card__swatch {
    display: inline-block;
    width: 1.45rem;
    height: 0.62rem;
    border-radius: 5px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    flex-shrink: 0;
    vertical-align: middle;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.admin-cal-bizday-card__swatch--weekend {
    background: repeating-linear-gradient(-58deg, #eff6ff, #eff6ff 2px, #e0e7ff 2px, #e0e7ff 4px);
}

.admin-cal-bizday-card__swatch--holiday {
    background: repeating-linear-gradient(-58deg, #fff5f5, #fff5f5 2px, #fecdd3 2px, #fecdd3 4px);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        inset 0 0 0 1px rgba(251, 113, 133, 0.14);
}

.admin-cal-bizday-card__hol-mini {
    display: inline-block;
    margin-left: 0.06rem;
    font-size: 0.52rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    padding: 0.08rem 0.22rem;
    border-radius: 0.28rem;
    background: #e11d48;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.admin-cal-bizday-card__tip {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #64748b;
    font-weight: 500;
}

.admin-cal-scroll {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    padding-top: 0.4rem;
    padding-bottom: 0.35rem;
    --nd: 31;
}

.admin-cal-axis-row {
    display: grid;
    grid-template-columns: 9.25rem repeat(var(--nd, 31), minmax(1.55rem, 1fr));
    gap: 0;
    align-items: end;
    min-width: calc(9.25rem + var(--nd, 31) * 1.55rem);
    margin-bottom: 0.15rem;
    border-bottom: 1px solid #e8eef4;
    padding-bottom: 0.35rem;
}

.admin-cal-corner {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    padding: 0 0.35rem 0.2rem 0;
}

.admin-cal-dayhead {
    display: block;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748b;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    padding: 0.08rem 0 0;
}

/* 비영업 열: 주말=남색 줄무늬, 공휴일=붉은 줄무늬(더 잘 보이게) */
.admin-cal-dayhead--nonbiz {
    padding: 0.1rem 0.04rem 0.16rem;
    border-radius: 0.28rem;
}

.admin-cal-dayhead--nonbiz.admin-cal-dayhead--weekend:not(.admin-cal-dayhead--holiday) {
    background: repeating-linear-gradient(
        -58deg,
        #eff6ff,
        #eff6ff 4px,
        #e0e7ff 4px,
        #e0e7ff 8px
    );
    border-left: 1px solid #c7d2fe;
    border-right: 1px solid #c7d2fe;
    box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.1);
}

.admin-cal-dayhead--weekend:not(.admin-cal-dayhead--holiday) .admin-cal-dayhead-week {
    color: #4f46e5;
}

.admin-cal-dayhead--weekend:not(.admin-cal-dayhead--holiday) .admin-cal-dayhead-day {
    color: #4338ca;
}

.admin-cal-dayhead--holiday {
    background: repeating-linear-gradient(
        -58deg,
        #fff5f5,
        #fff5f5 4px,
        #ffe4e6 4px,
        #ffe4e6 8px
    );
    border-left: 1px solid #fda4af;
    border-right: 1px solid #fda4af;
    box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.14);
}

.admin-cal-dayhead--holiday .admin-cal-dayhead-week {
    color: #be123c;
}

.admin-cal-dayhead--holiday .admin-cal-dayhead-day {
    color: #9f1239;
    font-weight: 800;
}

.admin-cal-dayhead-holbadge {
    display: inline-block;
    margin-left: 0.14rem;
    font-size: 0.54rem;
    font-weight: 800;
    vertical-align: middle;
    line-height: 1;
    letter-spacing: -0.05em;
    padding: 0.06rem 0.24rem;
    border-radius: 0.28rem;
    background: #e11d48;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.admin-cal-dayhead-week {
    display: block;
    opacity: 0.92;
}

.admin-cal-dayhead-day {
    display: block;
    margin-top: 0.06rem;
    font-size: 0.74rem;
    letter-spacing: -0.01em;
}

.admin-cal-dayhead--today .admin-cal-dayhead-day {
    color: var(--accent-dark);
}

.admin-cal-dayhead--nonbiz.admin-cal-dayhead--today .admin-cal-dayhead-day {
    color: var(--accent-dark);
}

.admin-cal-dateline {
    display: grid;
    grid-template-columns: 9.25rem minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    border-top: 1px solid #eef2f7;
}

.admin-cal-dateline:first-of-type {
    border-top: none;
}

.admin-cal-rowlbl {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1e293b;
    padding: 0.45rem 0.5rem 0.45rem 0;
    align-self: center;
    font-variant-numeric: tabular-nums;
}

.admin-cal-rowlbl-code {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-incidents-panel .admin-panel-head {
    align-items: flex-start;
    padding: 0.1rem 0.1rem 0.35rem;
    border-bottom: 1px solid #edf2f8;
}

.admin-incidents-intro {
    margin: 0.35rem 0 0;
    max-width: 48rem;
    line-height: 1.52;
    color: #5d6f86;
}

.admin-incidents-table-wrap {
    overflow-x: auto;
    margin-top: 0.45rem;
}

.admin-incidents-table th:first-child,
.admin-incidents-table td:first-child {
    width: 6.5rem;
}

.admin-incidents-table {
    border-radius: 12px;
    overflow: hidden;
}

.admin-incidents-table thead th {
    background: #f6f9fd;
    color: #4b617f;
}

.admin-incidents-table tbody tr:nth-child(odd) td {
    background: #ffffff;
}

.admin-incidents-table tbody tr:nth-child(even) td {
    background: #fbfdff;
}

.admin-incidents-code {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #24364f;
}

.admin-incidents-memo-cell {
    vertical-align: top;
}

.admin-incidents-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
    max-width: 36rem;
}

.admin-incidents-memo-label {
    flex: 1 1 14rem;
    margin: 0;
    min-width: 10rem;
}

.admin-incidents-memo-input {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 2.5rem;
    max-height: 6rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.45rem 0.55rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #1e293b;
    background: #fcfdff;
}

.admin-incidents-memo-input:focus {
    outline: none;
    border-color: #a8bddb;
    box-shadow: 0 0 0 2px rgba(168, 189, 219, 0.22);
}

.admin-incidents-save {
    flex-shrink: 0;
    appearance: none;
    border: 1px solid #bfd0e8;
    background: #eef4fd;
    color: #334f71;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 0.36rem 0.72rem;
    border-radius: 9px;
    cursor: pointer;
    box-shadow: none;
}

.admin-incidents-save:hover {
    background: #e3ecfa;
    border-color: #afc3e2;
    color: #243e5d;
}

/* —— 관리자 · 백패킹관리(SET1P 세트) —— */
.card.admin-fleet-panel.admin-panel {
    padding: 0;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 12px 28px -8px rgba(15, 23, 42, 0.08);
}

.admin-fleet-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.admin-fleet-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem 1.5rem;
    padding: 1.25rem 1.35rem 1.1rem;
    background: linear-gradient(135deg, #f0f4ff 0%, #f8fafc 42%, #eef6ff 100%);
    border-bottom: 1px solid #e2e8f0;
}

.admin-fleet-hero-main {
    flex: 1 1 16rem;
    min-width: 0;
}

.admin-fleet-eyebrow {
    margin: 0 0 0.28rem;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6366f1;
}

.admin-fleet-panel h2#admin-fleet-h {
    margin: 0;
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f172a;
    line-height: 1.2;
}

.admin-fleet-intro {
    margin: 0.55rem 0 0;
    max-width: 36rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #475569;
}

.admin-fleet-intro-mono {
    font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.82em;
    font-weight: 700;
    color: #334155;
    padding: 0.08rem 0.28rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid #e2e8f0;
}

.admin-fleet-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-fleet-summary {
    margin: 0;
    padding: 0.7rem 1.35rem 0.9rem;
    border-bottom: 1px solid #e8edf4;
    background: #f9fbff;
}

.admin-fleet-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 7.5rem;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.admin-fleet-meta-k {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.admin-fleet-meta-v {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.25;
}

.admin-fleet-meta-v--num {
    font-variant-numeric: tabular-nums;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #312e81;
}

.admin-fleet-meta-unit {
    margin-left: 0.12rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
}

.admin-fleet-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
}

.admin-fleet-col--main {
    padding: 1rem 1.15rem 1.2rem;
    background: #fff;
}

.admin-fleet-add-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.05rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 22px -10px rgba(79, 70, 229, 0.12);
}

.admin-fleet-add-card--bar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.85rem;
    margin: 0;
    padding: 0.62rem 1.15rem 0.72rem;
    border-radius: 0;
    border: none;
    border-top: 1px solid #e8edf4;
    box-shadow: none;
    background: #f9fbff;
}

.admin-fleet-add-card--bar .admin-fleet-add-title {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
}

.admin-fleet-add-card--bar .admin-fleet-add-icon {
    width: 2rem;
    height: 2rem;
}

.admin-fleet-add-card--bar .admin-fleet-add-btn {
    min-height: 2.35rem;
    padding-left: 0.95rem;
    padding-right: 0.95rem;
}

.admin-fleet-add-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 11px;
    color: #4f46e5;
    background: linear-gradient(145deg, #eef2ff 0%, #e0e7ff 100%);
    border: 1px solid #c7d2fe;
}

.admin-fleet-add-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.admin-fleet-add-label {
    flex: 1 1 9rem;
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    margin: 0;
}

.admin-fleet-add-label--inline {
    flex: 0 1 auto;
    flex-direction: row;
    align-items: center;
    gap: 0.45rem;
}

.admin-fleet-add-label--inline .admin-fleet-add-label-text {
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-fleet-add-card--bar .admin-fleet-add-input {
    width: auto;
    min-width: 6.5rem;
    max-width: 9rem;
    padding: 0.45rem 0.55rem;
}

.admin-fleet-add-label-text {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.admin-fleet-add-input {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 0.52rem 0.65rem;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    color: #0f172a;
    background: #f8fafc;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}

.admin-fleet-add-input:hover {
    border-color: #94a3b8;
    background: #fff;
}

.admin-fleet-add-input:focus {
    outline: none;
    border-color: #6366f1;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22);
}

.admin-fleet-add-btn {
    flex-shrink: 0;
    min-height: 2.55rem;
    padding-left: 1.15rem;
    padding-right: 1.15rem;
    border-radius: 10px;
}

.admin-fleet-alert {
    padding: 0.95rem 1rem;
    border-radius: 12px;
    font-size: 0.84rem;
    line-height: 1.45;
}

.admin-fleet-alert strong {
    display: block;
    margin-bottom: 0.28rem;
    font-size: 0.88rem;
    color: #0f172a;
}

.admin-fleet-alert p {
    margin: 0;
    color: #475569;
}

.admin-fleet-alert--warn {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
}

.admin-fleet-alert--info {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.admin-fleet-alert--block {
    margin-bottom: 0.75rem;
}

.admin-fleet-list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.admin-fleet-list-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.admin-fleet-list-caption {
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
}

.admin-fleet-table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 36%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 1px 2px rgba(15, 23, 42, 0.04);
}

.admin-fleet-table.admin-table {
    margin-top: 0;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.admin-fleet-table.admin-table thead th {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: #64748b;
    padding: 0.72rem 0.9rem;
    background: #eef2f7;
    border-bottom: 1px solid #dce3ed;
}

.admin-fleet-table.admin-table thead th:first-child {
    border-top-left-radius: 11px;
}

.admin-fleet-table.admin-table thead th:last-child {
    border-top-right-radius: 11px;
}

.admin-fleet-table.admin-table tbody td {
    padding: 0.68rem 0.9rem;
    vertical-align: middle;
    border-bottom: 1px solid #eef2f7;
    background: #fff;
}

.admin-fleet-table.admin-table tbody tr:hover td {
    background: #f8faffc9;
}

.admin-fleet-table.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-fleet-table.admin-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 11px;
}

.admin-fleet-table.admin-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 11px;
}

.admin-fleet-code {
    font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0;
    color: #1e3a5f;
}

.admin-fleet-status-cell {
    white-space: nowrap;
}

.admin-fleet-th-actions {
    text-align: center;
    min-width: 11.5rem;
    width: 12rem;
    white-space: nowrap;
}

.admin-fleet-actions-cell {
    text-align: center;
    vertical-align: middle;
    min-width: 11.5rem;
    width: 12rem;
}

.admin-fleet-delete-form {
    margin: 0;
}

.admin-fleet-no-delete {
    color: #cbd5e1;
    font-size: 0.9rem;
    cursor: default;
}

.admin-fleet-delete-blocked {
    display: inline-block;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #9a3412;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    padding: 0.32rem 0.55rem;
    border-radius: 6px;
    cursor: default;
    text-align: center;
}

body.dashboard-body .admin-fleet-panel .admin-btn--danger-sm {
    padding: 0.35rem 0.6rem;
    min-height: 2rem;
    font-size: 0.74rem;
    font-weight: 700;
    border-radius: 8px;
    background: #f7ebe9;
    border-color: #e7c7c0;
    color: #8b3a2f;
    box-shadow: none;
}

body.dashboard-body .admin-fleet-panel .admin-btn--danger-sm:hover {
    background: #f2dfdc;
    border-color: #d9b1aa;
    color: #753126;
    box-shadow: none;
}

body.dashboard-body .admin-fleet-panel .admin-table--fleet tbody td.admin-table-empty {
    padding: 1.35rem 0.9rem;
    text-align: center;
    color: #94a3b8;
    font-size: 0.875rem;
}

.admin-cal-track-wrap {
    position: relative;
    --lane-count: 1;
    min-height: calc(0.62rem + var(--lane-count, 1) * 0.98rem);
    padding-bottom: 0.18rem;
    --nd: 31;
    overflow: visible;
    isolation: isolate;
}

.admin-cal-slotstrip {
    display: grid;
    grid-template-columns: repeat(var(--nd, 31), minmax(0, 1fr));
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* 휴일·주말 슬롯 배경 위에 운영 막대가 반드시 보이도록 별도 레이어(검증: scripts/verify-admin-rental-cal-stacking.mjs) */
.admin-cal-bars-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.admin-cal-bars-layer .admin-cal-bar {
    pointer-events: auto;
}

.admin-cal-slot {
    border-right: 1px solid rgba(226, 232, 240, 0.9);
    background: linear-gradient(180deg, #fafbfc 0%, #f5f7fa 100%);
}

.admin-cal-slot:last-child {
    border-right: none;
}

.admin-cal-slot--nonbiz:not(.admin-cal-slot--holiday) {
    background: repeating-linear-gradient(
        -58deg,
        #eff6ff,
        #eff6ff 3px,
        #e0e7ff 3px,
        #e0e7ff 6px
    );
}

.admin-cal-slot--nonbiz.admin-cal-slot--holiday {
    background: repeating-linear-gradient(
        -58deg,
        #fff5f5,
        #fff5f5 3px,
        #ffe4e6 3px,
        #ffe4e6 6px
    );
    box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.16);
}

.admin-cal-slot--holiday:not(.admin-cal-slot--nonbiz) {
    background: repeating-linear-gradient(
        -58deg,
        #fff5f5,
        #fff5f5 3px,
        #fecdd3 3px,
        #fecdd3 6px
    );
    box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.14);
}

.admin-cal-slot--today {
    box-shadow: inset 0 0 0 1px rgba(54, 99, 255, 0.45);
}

.admin-cal-today-line {
    position: absolute;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 0;
    border-left: 2px solid var(--accent);
    opacity: 0.85;
    z-index: 2;
    pointer-events: none;
}

.admin-cal-bar {
    position: absolute;
    height: 0.86rem;
    min-width: 2px;
    border-radius: 5px;
    font-variant-numeric: tabular-nums;
    overflow: visible;
    box-sizing: border-box;
    border: 1px solid rgba(15, 23, 42, 0.16);
    cursor: default;
    transition: box-shadow 0.16s ease, border-color 0.16s ease, filter 0.16s ease, transform 0.16s ease;
}

.admin-cal-bar:hover {
    border-color: rgba(37, 99, 235, 0.45);
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.18);
    filter: saturate(1.05);
}

.admin-cal-barlbl {
    display: block;
    padding: 0 0.24rem;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 0.84rem;
    border-radius: 4px;
    background: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-cal-bar--warn {
    background: linear-gradient(180deg, #ffefbf 0%, #f8cf65 100%);
    color: #92400e;
}

.admin-cal-bar--ok {
    background: linear-gradient(180deg, #c9f2df 0%, #4fd09b 88%);
    color: #065f46;
}

.admin-cal-bar--accent {
    background: linear-gradient(180deg, #d7e9ff 0%, #76acee 90%);
    color: #1e3a8a;
}

.admin-cal-bar--muted {
    background: #e2e8f0;
    color: #475569;
}

.admin-cal-bar--neutral {
    background: #f1f5f9;
    color: #334155;
}

.admin-cal-bar--phase-prep {
    background: #e9d5ff;
    color: #5b21b6;
}

.admin-cal-bar--phase-shipping {
    background: #bfdbfe;
    color: #1e3a8a;
}

.admin-cal-bar--phase-inuse {
    background: #86efac;
    color: #14532d;
    cursor: pointer;
}

.admin-cal-bar--phase-inuse:hover {
    transform: translateY(-1px);
    border-color: rgba(21, 128, 61, 0.68);
    box-shadow: 0 5px 14px rgba(22, 163, 74, 0.38);
    filter: saturate(1.18) brightness(1.06);
    z-index: 999 !important;
}

.admin-floating-tip {
    position: fixed;
    min-width: 9.8rem;
    max-width: 15.4rem;
    padding: 0.45rem 0.56rem;
    border-radius: 8px;
    background: #0f172a;
    color: #f8fafc;
    font-size: 0.68rem;
    line-height: 1.3;
    white-space: normal;
    box-shadow: 0 8px 22px rgba(2, 6, 23, 0.35);
    pointer-events: none;
    z-index: 99999;
}

.admin-floating-tip::after {
    content: "";
    position: absolute;
    left: 50%;
    border: 6px solid transparent;
}

.admin-floating-tip.is-up::after {
    top: 100%;
    transform: translateX(-50%);
    border-top-color: #0f172a;
}

.admin-floating-tip.is-down::after {
    bottom: 100%;
    transform: translateX(-50%);
    border-bottom-color: #0f172a;
}

.admin-floating-tip-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.admin-floating-tip-row + .admin-floating-tip-row {
    margin-top: 0.14rem;
}

.admin-floating-tip-row strong {
    font-size: 0.62rem;
    color: #93c5fd;
    font-weight: 700;
    white-space: nowrap;
}

.admin-floating-tip-row span {
    color: #f8fafc;
    text-align: right;
    word-break: break-word;
}

.admin-cal-bar--phase-retrieve {
    background: #fde68a;
    color: #854d0e;
}

.admin-cal-bar--phase-maintenance {
    background: #fecdd3;
    color: #9f1239;
}

.admin-cal-empty-msg {
    padding: 0.85rem 0 0.25rem;
    font-size: 0.8rem;
}

.admin-rail-muted {
    margin-bottom: var(--admin-space-xs) !important;
}

.admin-rail-list {
    margin: var(--admin-space-xs) 0 var(--admin-space-sm);
    padding-left: 1rem;
    font-size: 0.812rem;
    color: #475569;
}

.admin-rail-list li + li {
    margin-top: 0.32rem;
}

.admin-rail-mini-link {
    margin: 0;
    font-size: 0.78rem;
}

.admin-rail-mini-link a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.35rem;
    padding: 0.35rem 0.72rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--accent-dark);
    text-decoration: none;
    border: 1px solid rgba(59, 130, 246, 0.42);
    background: #fff;
    transition:
        background 0.14s ease,
        border-color 0.14s ease,
        color 0.14s ease,
        box-shadow 0.14s ease;
}

.admin-rail-mini-link a:hover {
    text-decoration: none;
    background: rgba(59, 130, 246, 0.08);
    border-color: var(--accent-dark);
    color: #1e3a8a;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

.admin-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1.1rem;
    padding: 0.1rem 0.05rem 0.85rem;
    border-bottom: 1px solid #ebeef5;
    margin-bottom: var(--admin-space-xs);
}

.admin-topbar-title {
    flex: 1 1 180px;
    min-width: 0;
}

.admin-topbar-tools {
    flex: 2 1 280px;
    min-width: 0;
}

.admin-topbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
}

.admin-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 12px;
    border: 1px solid #e8eef4;
    background: var(--surface);
    color: #64748b;
    box-shadow: var(--admin-card-elev);
    text-decoration: none;
}

.admin-bell:hover {
    transform: translateY(-1px);
    color: var(--accent);
    filter: none;
}

.admin-bell-ico {
    display: block;
}

.admin-bell-dot {
    position: absolute;
    top: -0.08rem;
    right: -0.08rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.28rem;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1rem;
    text-align: center;
}

.admin-profile-mini {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    border: 1px solid #e8eef4;
    background: var(--surface);
    box-shadow: var(--admin-card-elev);
}

.admin-profile-avatar {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: linear-gradient(145deg, #e8f1ff, #dce9ff);
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--accent-dark);
}

.admin-profile-text {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    min-width: 0;
    max-width: 12rem;
}

.admin-profile-name {
    font-size: 0.86rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-profile-role {
    font-size: 0.68rem;
    color: #94a3b8;
}

.admin-page-title {
    margin: 0;
    font-size: clamp(1.12rem, 2vw, 1.35rem);
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.admin-toolbar-search {
    position: relative;
    display: inline-block;
    border: 1px solid #d2dceb;
    border-radius: 12px;
    background: #fff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9),
        0 4px 12px rgba(15, 37, 71, 0.06);
}

.admin-toolbar-search::before {
    content: "";
    position: absolute;
    left: 0.82rem;
    top: 50%;
    translate: 0 -50%;
    width: 1.05rem;
    height: 1.05rem;
    opacity: 0.38;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23475569' stroke-width='2' stroke-linecap='round' d='M10 17a7 7 0 100-14 7 7 0 000 14zM21 21l-4.2-4.2'/%3E%3C/svg%3E")
        center / contain no-repeat;
    pointer-events: none;
}

.admin-toolbar-search input[type="search"] {
    margin: 0;
    width: min(100%, 21rem);
    min-height: 2.45rem;
    padding: 0.45rem 0.95rem 0.45rem 2.4rem;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #fff;
    font-size: 0.86rem;
    color: #334155;
}

.admin-toolbar-search input[type="search"]:focus {
    border-color: rgba(37, 99, 235, 0.45);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
    outline: none;
}

.admin-toolbar-search input[disabled] {
    opacity: 0.9;
}

.admin-toolbar-search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.45rem;
    max-width: 100%;
    justify-content: flex-start;
}

.admin-toolbar-submit {
    margin: 0;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
    border-radius: 11px;
    padding: 0 0.95rem;
    font-weight: 600;
    font-size: 0.84rem;
    min-height: 2.45rem;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}

.admin-page-content {
    display: flex;
    flex-direction: column;
    gap: var(--admin-space-lg, 1.35rem);
}

.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;
}

/* Admin dashboard: cards, KPI, tables, kanban (light SaaS) */
body.dashboard-body .admin-page-content .card {
    border: 1px solid #e8eef4;
    border-radius: 14px;
    box-shadow:
        0 2px 4px rgba(15, 37, 71, 0.03),
        0 10px 28px rgba(15, 52, 100, 0.05);
    padding: 1rem 1.05rem;
}

body.dashboard-body .admin-page-content .admin-kpi h2 {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body.dashboard-body .admin-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem 1rem;
    margin: 0 0 0.85rem;
}

body.dashboard-body .admin-panel-head h2 {
    margin: 0 !important;
    font-size: 1.02rem;
}

body.dashboard-body .admin-panel-actions {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

body.dashboard-body .admin-review-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    margin: 0 0 1rem;
    font-size: 0.85rem;
}

body.dashboard-body .admin-review-meta dt {
    color: #64748b;
    font-weight: 700;
}

body.dashboard-body .admin-review-meta dd {
    margin: 0;
}

body.dashboard-body .admin-review-subh {
    margin: 0 0 0.45rem;
    font-size: 1rem;
}

body.dashboard-body .admin-review-body {
    line-height: 1.55;
    margin-bottom: 1rem;
    padding: 0.65rem 0.75rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

body.dashboard-body .admin-review-intro-card {
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

body.dashboard-body .admin-review-intro-lead {
    margin-bottom: 0.35rem;
    line-height: 1.55;
}

body.dashboard-body .admin-review-search {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: flex-end;
    margin-top: 0.65rem;
    padding: 0.65rem 0.75rem;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border: 1px solid #e8edf4;
    border-radius: 10px;
}

body.dashboard-body .admin-review-search input[type="search"] {
    min-width: min(100%, 16rem);
}

body.dashboard-body .admin-review-list-panel {
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

body.dashboard-body .admin-review-list-count {
    margin: 0;
    font-size: 0.78rem;
}

body.dashboard-body .admin-review-list-table-wrap {
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
}

body.dashboard-body .admin-table--reviews-list thead th {
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    background: linear-gradient(180deg, #f1f5f9 0%, #e8eef5 100%);
    border-bottom: 1px solid #dce3ed;
    padding: 0.55rem 0.65rem;
}

body.dashboard-body .admin-table--reviews-list tbody td {
    padding: 0.55rem 0.65rem;
    font-size: 0.84rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}

body.dashboard-body .admin-table--reviews-list tbody tr:last-child td {
    border-bottom: none;
}

body.dashboard-body .admin-th-narrow {
    width: 3rem;
    text-align: center;
}

body.dashboard-body .admin-th-date {
    width: 9.5rem;
    white-space: nowrap;
}

body.dashboard-body .admin-th-action {
    width: 4.5rem;
    text-align: center;
}

body.dashboard-body .admin-td-mono {
    font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 0.8rem;
    color: #475569;
}

body.dashboard-body .admin-td-strong {
    font-weight: 700;
    color: #1e293b;
}

body.dashboard-body .admin-td-center {
    text-align: center;
    color: #64748b;
    font-weight: 600;
}

body.dashboard-body .admin-td-date {
    font-size: 0.78rem;
    color: #64748b;
    white-space: nowrap;
}

body.dashboard-body .admin-code-quiet {
    font-size: 0.78rem;
    background: #f1f5f9;
    padding: 0.12rem 0.35rem;
    border-radius: 4px;
}

body.dashboard-body .admin-review-snippet-cell {
    max-width: 14rem;
    min-width: 6rem;
}

body.dashboard-body .admin-review-snippet-line {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.35;
}

body.dashboard-body .admin-review-list-actions {
    text-align: center;
    vertical-align: middle;
}

body.dashboard-body .admin-review-inline-del {
    display: inline-block;
    margin: 0;
}

body.dashboard-body .admin-review-del-btn {
    margin: 0;
    padding: 0.2rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

body.dashboard-body .admin-review-del-btn:hover {
    color: #b45309;
    border-color: #fed7aa;
    background: #fffbeb;
}

body.dashboard-body .admin-review-del-btn--emph {
    padding: 0.38rem 0.75rem;
    font-size: 0.8rem;
    color: #9a3412;
    border: 1px solid #fdba74;
    background: #fff7ed;
}

body.dashboard-body .admin-review-del-btn--emph:hover {
    color: #7c2d12;
    border-color: #fb923c;
    background: #ffedd5;
}

body.dashboard-body .admin-review-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem 0.55rem;
    flex-wrap: wrap;
    margin-top: 0.95rem;
    padding: 0.65rem 0.5rem 0.15rem;
    border-top: 1px solid #e8eef4;
    background: linear-gradient(180deg, #fafbfd 0%, #fff 55%);
    border-radius: 0 0 12px 12px;
}

body.dashboard-body .admin-pager .admin-pager-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.32rem 0.78rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: #334155;
    text-decoration: none;
    border-radius: 9px;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset;
    transition:
        background 0.14s ease,
        border-color 0.14s ease,
        color 0.14s ease;
}

body.dashboard-body .admin-pager .admin-pager-step:hover {
    color: #0f172a;
    border-color: #cbd5e1;
    background: #f8fafc;
}

body.dashboard-body .admin-community-filters select {
    min-width: 7.5rem;
    padding: 0.35rem 0.45rem;
    font-size: 0.82rem;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #fff;
}

body.dashboard-body .admin-community-filters .admin-community-filter-topic select {
    min-width: 8rem;
}

body.dashboard-body .admin-table--community-list .admin-th-topic {
    width: 6.75rem;
    min-width: 6.75rem;
    max-width: 8rem;
    text-align: center;
    white-space: nowrap;
}

body.dashboard-body .admin-table--community-list .admin-community-topic-cell {
    vertical-align: middle;
    text-align: center;
}

body.dashboard-body .admin-community-topic-badge {
    display: inline-block;
    max-width: 7.5rem;
    padding: 0.22rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    border-radius: 999px;
    border: 1px solid transparent;
}

body.dashboard-body .admin-community-topic-badge--0 {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

body.dashboard-body .admin-community-topic-badge--1 {
    color: #047857;
    background: #ecfdf5;
    border-color: #a7f3d0;
}

body.dashboard-body .admin-community-topic-badge--2 {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

body.dashboard-body .admin-community-topic-badge--3 {
    color: #6d28d9;
    background: #f5f3ff;
    border-color: #ddd6fe;
}

/* 커뮤니티 관리 — 글 상세(카드형 레이아웃·타이포 계층) */
body.dashboard-body .admin-community-detail.admin-panel {
    padding: 0;
}

body.dashboard-body .admin-community-detail-comments.admin-panel {
    padding: 0;
}

body.dashboard-body .admin-community-detail {
    border-radius: 16px;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.06);
    border: 1px solid #e8eef4;
    overflow: hidden;
}

body.dashboard-body .admin-community-detail__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 1.1rem 1.25rem 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 55%, #f4f8ff 100%);
    border-bottom: 1px solid #e8eef4;
}

body.dashboard-body .admin-community-detail__head-text {
    min-width: 0;
}

body.dashboard-body .admin-community-detail__eyebrow {
    margin: 0 0 0.2rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #64748b;
}

body.dashboard-body .admin-community-detail__id {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f172a;
    line-height: 1.2;
}

body.dashboard-body .admin-community-detail__head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

body.dashboard-body .admin-community-detail__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.42rem 0.95rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    transition:
        background 0.14s ease,
        border-color 0.14s ease,
        color 0.14s ease,
        box-shadow 0.14s ease;
}

body.dashboard-body .admin-community-detail__btn--ghost {
    color: #475569;
    background: #fff;
    border-color: #d0dbe8;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body.dashboard-body .admin-community-detail__btn--ghost:hover {
    color: #1e293b;
    border-color: #94a3b8;
    background: #f8fafc;
}

body.dashboard-body .admin-community-detail__btn--primary {
    color: #fff;
    background: linear-gradient(180deg, #3d7ad0 0%, #2563eb 100%);
    border-color: #1d4ed8;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28);
}

body.dashboard-body .admin-community-detail__btn--primary:hover {
    filter: brightness(1.04);
    box-shadow: 0 3px 12px rgba(37, 99, 235, 0.32);
}

body.dashboard-body .admin-community-detail__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 0.65rem 1rem;
    padding: 0.85rem 1.25rem;
    background: #fbfcfe;
    border-bottom: 1px solid #eef2f7;
}

body.dashboard-body .admin-community-detail__meta-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    min-width: 0;
}

body.dashboard-body .admin-community-detail__meta-item--stats {
    font-variant-numeric: tabular-nums;
}

body.dashboard-body .admin-community-detail__meta-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

body.dashboard-body .admin-community-detail__meta-value {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
}

body.dashboard-body .admin-community-detail__meta-time {
    font-weight: 600;
    color: #475569;
    font-size: 0.82rem;
}

body.dashboard-body .admin-community-detail__meta-sep {
    color: #cbd5e1;
    font-weight: 700;
    padding: 0 0.15rem;
}

body.dashboard-body .admin-community-detail__stat-num {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
}

body.dashboard-body .admin-community-detail__stat-num--likes {
    color: #be185d;
}

body.dashboard-body .admin-community-detail__article {
    padding: 1.25rem 1.35rem 1.15rem;
    background: #fff;
}

body.dashboard-body .admin-community-detail__title {
    margin: 0 0 0.85rem;
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.45;
    color: #0f172a;
}

body.dashboard-body .admin-community-detail__body {
    margin: 0;
    padding: 1rem 1.1rem;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #334155;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid #e8eef4;
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

body.dashboard-body .admin-community-detail__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    padding: 0.85rem 1.25rem 1.1rem;
    background: #fafbfd;
    border-top: 1px solid #eef2f7;
}

body.dashboard-body .admin-community-detail__mod-actions {
    margin-right: auto;
}

body.dashboard-body .admin-community-detail__mod-form {
    margin: 0;
}

body.dashboard-body .admin-community-detail__del-form {
    margin: 0;
}

body.dashboard-body .admin-community-detail__del-btn {
    margin: 0;
    padding: 0.45rem 1.1rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #b91c1c;
    background: #fff;
    border: 1px solid #fecaca;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(185, 28, 28, 0.06);
    transition:
        background 0.14s ease,
        border-color 0.14s ease,
        color 0.14s ease,
        box-shadow 0.14s ease;
}

body.dashboard-body .admin-community-detail__del-btn:hover {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fca5a5;
    box-shadow: 0 2px 8px rgba(185, 28, 28, 0.1);
}

body.dashboard-body .admin-community-detail-comments {
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
    border: 1px solid #e8eef4;
}

body.dashboard-body .admin-community-detail-comments__head {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.95rem 1.2rem 0.75rem;
    border-bottom: 1px solid #eef2f7;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

body.dashboard-body .admin-community-detail-comments__title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

body.dashboard-body .admin-community-detail-comments__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65rem;
    padding: 0.12rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
}

body.dashboard-body .admin-community-detail-empty {
    padding: 2rem 1.25rem 2.25rem;
    text-align: center;
    background: #fbfcfe;
}

body.dashboard-body .admin-community-detail-empty__title {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: #475569;
}

body.dashboard-body .admin-community-detail-empty__lead {
    margin: 0;
    font-size: 0.82rem;
    color: #94a3b8;
    line-height: 1.5;
}

body.dashboard-body .admin-community-detail-comment-table {
    margin: 0;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

body.dashboard-body .admin-community-detail-comment-table thead th {
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    background: linear-gradient(180deg, #f1f5f9 0%, #e8eef5 100%);
    border-bottom: 1px solid #dce3ed;
    padding: 0.55rem 0.7rem;
}

body.dashboard-body .admin-community-detail-comment-table tbody td {
    padding: 0.6rem 0.7rem;
    font-size: 0.86rem;
    vertical-align: top;
    border-bottom: 1px solid #f1f5f9;
}

body.dashboard-body .admin-community-detail-comment-table tbody tr:last-child td {
    border-bottom: none;
}

body.dashboard-body .admin-table--community-list .admin-community-snippet-cell {
    max-width: 16rem;
    min-width: 8rem;
}

body.dashboard-body .admin-table--community-list .admin-community-snippet-preview {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    line-height: 1.42;
}

body.dashboard-body .admin-review-del-btn--row {
    color: #b91c1c;
    border-color: #fecaca;
    background: #fef2f2;
}

body.dashboard-body .admin-review-del-btn--row:hover {
    color: #991b1b;
    border-color: #fca5a5;
    background: #fee2e2;
}

body.dashboard-body .admin-pager .admin-pager-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.2rem 0.38rem;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #1d4ed8;
    text-decoration: none;
    border-radius: 9px;
    border: 1px solid transparent;
    box-sizing: border-box;
    transition:
        background 0.14s ease,
        border-color 0.14s ease,
        color 0.14s ease;
}

body.dashboard-body .admin-pager .admin-pager-num:hover {
    background: #eff6ff;
    border: 1px solid rgba(37, 99, 235, 0.35);
    transform: none;
    filter: none;
    box-shadow: none;
}

body.dashboard-body .admin-pager .admin-pager-num.is-current {
    color: #fff;
    background: linear-gradient(180deg, #3b6bff 0%, #2563eb 100%);
    border-color: rgba(30, 64, 175, 0.55);
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.35);
    pointer-events: none;
}

body.dashboard-body .admin-pager .admin-pager-gap {
    color: #94a3b8;
    font-size: 0.8rem;
    font-weight: 700;
    user-select: none;
    padding: 0 0.1rem;
}

body.dashboard-body .admin-pager .admin-pager-meta {
    margin-left: 0.35rem;
    margin-right: 0.15rem;
    padding: 0.15rem 0.45rem;
    font-size: 0.74rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
}

body.dashboard-body .admin-review-danger {
    margin-top: 0.5rem;
}

body.dashboard-body .admin-main-wrap .admin-section-view-all {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.38rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent-dark);
    text-decoration: none;
    border: 1px solid rgba(59, 130, 246, 0.45);
    background: #fff;
    box-sizing: border-box;
    transition:
        background 0.14s ease,
        border-color 0.14s ease,
        color 0.14s ease,
        box-shadow 0.14s ease;
}

body.dashboard-body .admin-main-wrap .admin-section-view-all:hover {
    text-decoration: none;
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--accent-dark);
    color: #1e3a8a;
    box-shadow: 0 1px 5px rgba(15, 23, 42, 0.07);
}

body.dashboard-body .admin-main-wrap .admin-section-view-all:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

body.dashboard-body .admin-main-wrap .admin-section-view-all--muted {
    color: #475569;
    font-weight: 650;
    border-color: #e2e8f0;
}

body.dashboard-body .admin-main-wrap .admin-section-view-all--muted:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}

body.dashboard-body .admin-dash-search-hint a {
    color: var(--accent-dark);
    font-weight: 600;
    text-decoration: none;
    padding: 0.1rem 0.35rem;
    margin: 0 -0.12rem;
    border-radius: 6px;
    transition: background 0.14s ease, color 0.14s ease;
}

body.dashboard-body .admin-dash-search-hint a:hover {
    text-decoration: none;
    background: rgba(41, 84, 230, 0.1);
    color: #1e3a8a;
}

body.dashboard-body .admin-grid.admin-grid-charts {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--admin-space-md);
    margin-top: 0;
}

body.dashboard-body .admin-chart-card .admin-chart-title {
    margin-bottom: 0.2rem;
}

body.dashboard-body .admin-chart-sub {
    margin-bottom: 0.75rem;
}

body.dashboard-body .admin-line-wrap {
    margin-top: var(--admin-space-xs);
}

body.dashboard-body .admin-spark-svg {
    display: block;
    max-width: 100%;
}

body.dashboard-body .admin-spark-dot {
    fill: #fff;
    stroke: rgba(59, 103, 255, 0.92);
    stroke-width: 2;
}

body.dashboard-body .admin-donut-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 1.35rem;
}

body.dashboard-body .admin-donut-visual {
    flex-shrink: 0;
    width: 148px;
    height: 148px;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 10px 26px rgba(15, 52, 96, 0.1);
}

body.dashboard-body .admin-donut-visual::after {
    content: "";
    position: absolute;
    inset: 38px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow:
        inset 0 1px 3px rgba(15, 52, 96, 0.08),
        0 0 0 1px rgba(15, 52, 96, 0.04);
}

body.dashboard-body .admin-donut-legend {
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1 1 10rem;
}

body.dashboard-body .admin-donut-legend li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    font-size: 0.84rem;
    color: #475569;
}

body.dashboard-body .admin-donut-legend li + li {
    margin-top: 0.42rem;
}

body.dashboard-body .admin-donut-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

body.dashboard-body .admin-donut-legend-num {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

@media (max-width: 1100px) {
    .admin-body-split {
        display: block;
    }
}

body.dashboard-body .admin-page-content .admin-panel:not(.admin-reservations-full) > h2 {
    margin: 0 0 0.6rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.02em;
    text-transform: none;
}

body.dashboard-body .admin-page-content td.admin-table-empty {
    text-align: center;
    color: #64748b;
    font-size: 0.88rem;
    padding-top: 0.95rem !important;
    padding-bottom: 0.95rem !important;
}

body.dashboard-body .admin-page-content .admin-kpi {
    position: relative;
    padding: 0.5rem 0.5rem 0.5rem 0.55rem;
    min-height: 2.75rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

body.dashboard-body .admin-page-content .admin-kpi::before {
    content: none;
}

body.dashboard-body .admin-page-content .admin-kpi--b::before {
    background: linear-gradient(145deg, #fff7eb 0%, #fdeed4 100%);
}

body.dashboard-body .admin-page-content .admin-kpi--c::before {
    background: linear-gradient(145deg, #e8fbff 0%, #dcf4ff 100%);
}

body.dashboard-body .admin-page-content .admin-kpi--d::before {
    background: linear-gradient(145deg, #f2edff 0%, #e8e6ff 100%);
}

body.dashboard-body .admin-page-content .admin-kpi--g::before {
    background: linear-gradient(145deg, #f3f4f6 0%, #e8edf5 100%);
}

.admin-kpi-emoji {
    display: inline-block;
    margin-right: 0.26rem;
    font-size: 1rem;
    line-height: 1;
    vertical-align: -0.05em;
}

body.dashboard-body .admin-page-content .kpi-value {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    margin-top: 0;
    flex-shrink: 0;
    gap: 0.12rem;
    font-size: 1.08rem;
    font-weight: 700;
    color: #183153;
}

body.dashboard-body .admin-page-content .admin-kpi h2 {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.dashboard-body .admin-page-content .admin-kpi-link {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: inherit;
    text-decoration: none;
}

.kpi-num {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

.kpi-unit {
    font-size: 0.78rem;
    color: #475569;
    font-weight: 700;
}

body.dashboard-body .admin-grid--kpi {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0;
}

body.dashboard-body .admin-grid--kpi-pay-snapshot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.25rem;
}

/* 결제 금액 스냅샷: 제목줄(제목 + 오른쪽 설명) → 금액 */
body.dashboard-body .admin-page-content .admin-kpi--pay-snapshot-card {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.45rem;
    min-height: 0;
    padding: 0.82rem 0.95rem 0.72rem;
    text-align: left;
    border: 1px solid #e2e8f0;
    background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 1px 2px rgba(15, 23, 42, 0.04);
}

body.dashboard-body .admin-kpi--pay-snapshot-card[data-pay-scope="today"] {
    border-color: rgba(59, 130, 246, 0.22);
}

body.dashboard-body .admin-kpi--pay-snapshot-card[data-pay-scope="month"] {
    border-color: rgba(14, 165, 233, 0.22);
}

body.dashboard-body .admin-page-content .admin-kpi--pay-snapshot-card h2.admin-kpi-pay-title {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    letter-spacing: -0.02em;
    line-height: 1.35;
    flex: none;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    text-transform: none;
}

body.dashboard-body .admin-kpi-pay-title-lead {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    flex: 0 1 auto;
    min-width: 0;
}

body.dashboard-body .admin-kpi--pay-snapshot-card h2 .admin-kpi-pay-title-note {
    margin: 0;
    padding: 0;
    border: 0;
    flex: 1 1 8rem;
    min-width: 0;
    text-align: right;
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.45;
    color: #64748b;
}

body.dashboard-body .admin-kpi--pay-snapshot-card .admin-kpi-emoji {
    font-size: 1.02rem;
    line-height: 1;
    flex-shrink: 0;
}

body.dashboard-body .admin-kpi-pay-value {
    margin: 0.1rem 0 0;
    font-size: clamp(1.12rem, 2.1vw, 1.42rem);
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

body.dashboard-body .admin-kpi-pay-number {
    font-weight: inherit;
}

body.dashboard-body .admin-kpi-pay-unit {
    margin-left: 0.12rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0;
}

@media (max-width: 900px) {
    body.dashboard-body .admin-grid--kpi-pay-snapshot {
        grid-template-columns: minmax(0, 1fr);
    }
}

body.dashboard-body .admin-grid:not(.admin-grid--kpi) {
    gap: 0.85rem;
    margin-top: 0;
}

body.dashboard-body .admin-table thead th {
    font-size: 0.73rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}

body.dashboard-body .admin-table th,
body.dashboard-body .admin-table td {
    padding: 0.6rem 0.65rem;
    border-bottom-color: #edf1f8;
}

body.dashboard-body .admin-table thead th:first-child {
    border-top-left-radius: 8px;
}

body.dashboard-body .admin-table thead th:last-child {
    border-top-right-radius: 8px;
}

body.dashboard-body .admin-table thead {
    background: #f8fafc;
}

/* 관리자 표: 행 이동(data-href / data-row-link) — 커서·호버·포커스 */
body.dashboard-body .admin-table tbody tr[data-href],
body.dashboard-body .admin-table tbody tr[data-row-link] {
    cursor: pointer;
    transition: background 0.12s ease;
}

body.dashboard-body .admin-table tbody tr[data-href]:hover td,
body.dashboard-body .admin-table tbody tr[data-row-link]:hover td {
    background: #f0f7ff;
}

body.dashboard-body .admin-table tbody tr[data-href]:active td,
body.dashboard-body .admin-table tbody tr[data-row-link]:active td {
    background: #e8f1fc;
}

body.dashboard-body .admin-table tbody tr[data-href]:focus-visible,
body.dashboard-body .admin-table tbody tr[data-row-link]:focus-visible {
    outline: 2px solid #2f67c7;
    outline-offset: -2px;
}

/* 예약 목록·반납 지연: 테이블 카드 (운영 화면 가독성) */
body.dashboard-body .admin-reservations-table-panel .admin-panel-head h2 {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #0f172a;
}

body.dashboard-body .admin-reservations-table-panel .admin-reservations-cap {
    margin: 0.1rem 0 0.85rem;
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.45;
}

body.dashboard-body .admin-reservations-table-panel .admin-reservations-table-wrap {
    overflow-x: auto;
    margin-top: 0.2rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 38%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 1px 2px rgba(15, 23, 42, 0.04);
}

body.dashboard-body .admin-reservations-list-shell {
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

body.dashboard-body .admin-reservations-list-table-wrap {
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
}

body.dashboard-body .admin-dashboard-recent-section {
    width: 100%;
    min-width: 0;
    margin-top: 0.85rem;
    box-sizing: border-box;
}

body.dashboard-body .admin-dashboard-recent-section .admin-dashboard-recent-panel {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

body.dashboard-body .admin-dashboard-recent-caption {
    margin: 0 0 0.5rem;
    font-size: 0.78rem;
}

body.dashboard-body .admin-dashboard-recent-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
}

.admin-rail-pending-list {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
}

.admin-rail-pending-empty {
    padding: 0.35rem 0;
}

.admin-rail-pending-link {
    display: block;
    padding: 0.42rem 0.5rem;
    border-radius: 8px;
    text-decoration: none;
    color: #1e293b;
    border: 1px solid #e8eef4;
    background: #fafbfc;
    transition:
        background 0.12s ease,
        border-color 0.12s ease;
}

.admin-rail-pending-link:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    transform: none;
    filter: none;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

.admin-rail-pending-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.admin-rail-pending-no {
    font-variant-numeric: tabular-nums;
}

.admin-rail-pending-amt {
    font-variant-numeric: tabular-nums;
    color: #475569;
    font-weight: 600;
    font-size: 0.76rem;
}

.admin-rail-pending-meta {
    display: block;
    margin-top: 0.22rem;
    font-size: 0.7rem;
    color: #64748b;
}

.admin-rail-pending-sep {
    margin: 0 0.2rem;
    color: #cbd5e1;
}

.admin-rail-pending-hold {
    font-variant-numeric: tabular-nums;
}

body.dashboard-body .admin-reservation-detail-card {
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

body.dashboard-body .admin-res-detail-meta {
    margin-bottom: 0;
}

body.dashboard-body .admin-res-cancel-reason {
    margin-top: 0.35rem;
    font-size: 0.84rem;
    color: #334155;
    line-height: 1.45;
}

body.dashboard-body .admin-res-payment-wrap {
    border-radius: 8px;
    border: 1px solid #e8edf4;
}

body.dashboard-body .admin-res-cancel-btn {
    margin: 0;
    padding: 0.32rem 0.55rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: #94a3b8;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition:
        color 0.12s ease,
        border-color 0.12s ease,
        background 0.12s ease;
}

body.dashboard-body .admin-res-cancel-btn:hover {
    color: #b45309;
    border-color: #fdba74;
    background: #fffbeb;
}

body.dashboard-body .admin-res-detail-cancel-lead {
    margin-top: 0;
    margin-bottom: 1rem;
    max-width: 40rem;
}

body.dashboard-body .admin-res-detail-cancel-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    max-width: 36rem;
}

body.dashboard-body .admin-res-detail-cancel-reason-label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 14rem;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
}

body.dashboard-body .admin-res-detail-cancel-reason-input {
    width: 100%;
    padding: 0.5rem 0.65rem;
    font-size: 0.875rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

body.dashboard-body .admin-res-detail-cancel-form .admin-btn--danger {
    flex: 0 0 auto;
    align-self: stretch;
}

body.dashboard-body .admin-res-tracking-lead {
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
}

body.dashboard-body .admin-res-shipping-lead {
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
}

body.dashboard-body .admin-res-shipping-disabled-note {
    margin: 0.5rem 0 0;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #7f1d1d;
}

body.dashboard-body .admin-res-shipping-log-wrap {
    margin-bottom: 0.85rem;
}

body.dashboard-body .admin-res-shipping-log-table {
    font-size: 0.82rem;
}

body.dashboard-body .admin-res-shipping-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.55rem;
    align-items: flex-end;
}

body.dashboard-body .admin-res-shipping-step-form {
    margin: 0;
}

body.dashboard-body .admin-res-shipping-memo-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.55rem;
    align-items: flex-end;
    width: 100%;
    margin-top: 0.35rem;
}

body.dashboard-body .admin-res-shipping-memo-label {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

body.dashboard-body .admin-res-tracking-form {
    display: grid;
    gap: 0.65rem;
    max-width: 36rem;
}

body.dashboard-body .admin-res-tracking-field {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

body.dashboard-body .admin-res-tracking-input {
    width: 100%;
    padding: 0.5rem 0.65rem;
    font-size: 0.875rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

body.dashboard-body .admin-reservations-table-panel .admin-table--reservations {
    margin-top: 0;
    font-size: 0.875rem;
    border-collapse: separate;
    border-spacing: 0;
}

body.dashboard-body .admin-reservations-table-panel .admin-table--reservations thead th {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: #64748b;
    padding: 0.72rem 0.85rem;
    background: #eef2f7;
    border-bottom: 1px solid #dce3ed;
    white-space: nowrap;
}

body.dashboard-body .admin-reservations-table-panel .admin-table--reservations tbody td {
    padding: 0.7rem 0.85rem;
    vertical-align: middle;
    border-bottom: 1px solid #eef2f7;
    background: #fff;
}

body.dashboard-body .admin-reservations-table-panel .admin-table--reservations tbody tr:not([data-href]):not([data-row-link]):hover td {
    background: #f8fafc;
}

body.dashboard-body .admin-reservations-table-panel .admin-table--reservations tbody tr:last-child td {
    border-bottom: none;
}

body.dashboard-body .admin-reservations-table-panel .admin-td-resno {
    font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
}

body.dashboard-body .admin-reservations-table-panel .admin-td-reserved-on {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body.dashboard-body .admin-reservations-table-panel .admin-td-set {
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
    letter-spacing: 0.02em;
}

body.dashboard-body .admin-reservations-table-panel .admin-td-customer {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.84rem;
}

body.dashboard-body .admin-reservations-table-panel .admin-td-phone {
    font-size: 0.8rem;
    color: #475569;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body.dashboard-body .admin-reservations-table-panel .admin-td-pay {
    font-size: 0.78rem;
    color: #64748b;
    white-space: nowrap;
}

body.dashboard-body .admin-reservations-table-panel .admin-res-pay-label {
    display: inline-block;
    padding: 0.18rem 0.42rem;
    border-radius: 6px;
    background: #f1f5f9;
    font-weight: 600;
    color: #334155;
}

body.dashboard-body .admin-reservations-table-panel .admin-td-status {
    white-space: normal;
}

body.dashboard-body .admin-reservations-table-panel .admin-td-dates {
    font-variant-numeric: tabular-nums;
    font-size: 0.84rem;
    color: #475569;
    white-space: nowrap;
}

body.dashboard-body .admin-reservations-table-panel .admin-td-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
}

body.dashboard-body .admin-reservations-table-panel .admin-td-ship-log,
body.dashboard-body .admin-dashboard-recent-section .admin-td-ship-log {
    font-size: 0.72rem;
    max-width: 11rem;
    line-height: 1.35;
    white-space: normal;
    word-break: keep-all;
    color: #64748b;
}

body.dashboard-body .admin-reservations-table-panel .admin-td-actions {
    min-width: 11rem;
}

body.dashboard-body .admin-reservations-table-panel td.admin-table-empty {
    text-align: center;
    color: #64748b;
    font-size: 0.875rem;
    padding: 1.35rem 0.85rem !important;
}

body.dashboard-body .admin-reservations-table-panel .admin-inline-cancel-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    max-width: 19rem;
}

body.dashboard-body .admin-reservations-table-panel .admin-cancel-reason {
    flex: 1 1 7.5rem;
    min-width: 6.5rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.38rem 0.55rem;
    font-size: 0.8rem;
    color: #1e293b;
    background: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

body.dashboard-body .admin-reservations-table-panel .admin-cancel-reason::placeholder {
    color: #94a3b8;
}

body.dashboard-body .admin-reservations-table-panel .admin-cancel-reason:hover {
    border-color: #94a3b8;
}

body.dashboard-body .admin-reservations-table-panel .admin-cancel-reason:focus {
    outline: none;
    border-color: #64748b;
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.2);
}

body.dashboard-body .admin-reservations-table-panel .admin-btn--danger-sm {
    padding: 0.38rem 0.65rem;
    min-height: 2.05rem;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 8px;
    background: #b91c1c;
    border-color: #b91c1c;
    box-shadow: 0 2px 6px rgba(185, 28, 28, 0.22);
}

body.dashboard-body .admin-reservations-table-panel .admin-btn--danger-sm:hover {
    background: #991b1b;
    border-color: #991b1b;
    box-shadow: 0 3px 10px rgba(153, 27, 27, 0.28);
}

body.dashboard-body .notify-item {
    border: 1px solid #e8eef4;
    background: var(--surface);
    color: #475569;
    font-size: 0.8rem;
}

body.dashboard-body .kanban-board {
    gap: 0.62rem;
}

body.dashboard-body .kanban-col {
    border-radius: 12px;
    border: 1px solid #e8eef5;
    background: #fafbfc;
    box-shadow: 0 1px 3px rgba(15, 37, 71, 0.04);
}

body.dashboard-body .kanban-col h3 {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

body.dashboard-body .kanban-card {
    border: 1px solid #e2e9f5;
    background: var(--surface);
    color: #1e293b;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 37, 71, 0.04);
}

body.dashboard-body .flash-message {
    border-color: #c7ddfa;
    background: #f0f7ff;
    color: #1e3a5c;
    border-radius: 12px;
}

body.dashboard-body .site-footer {
    /* 고객 화면 푸터와 동일한 톤(관리자에서도 결과물 미리보기 일치) */
    margin-top: 2rem;
    padding: var(--space);
    border-top: 1px solid #d8e6f4;
    background: #fff;
    color: var(--muted);
    font-size: 0.875rem;
}

body.dashboard-body .design-case {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

body.dashboard-body .design-case header span {
    color: #64748b;
}

body.dashboard-body .design-case-a,
body.dashboard-body .design-case-b {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

body.dashboard-body .design-mini-table div {
    border-color: #e8eef4;
    background: var(--surface);
}

body.dashboard-body .design-mini-table span {
    color: #64748b;
}

body.dashboard-body .design-bars label {
    color: #64748b;
}

body.dashboard-body a:not(.skip-link):hover,
body.dashboard-body button:hover {
    transform: none;
    filter: none;
}

body.dashboard-body .admin-btn:hover {
    transform: translateY(-1px);
    filter: saturate(1.02);
}

body.dashboard-body .admin-toolbar-submit:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.site-header {
    border-bottom: 1px solid #d8e5f3;
    background: rgba(248, 251, 255, 0.94);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 2.2rem;
    z-index: 20;
}

.header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space);
    min-height: 3.5rem;
}

.logo {
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    font-size: clamp(1rem, 2.5vw, 1.15rem);
}

.logo:hover {
    color: var(--accent);
}

.nav-toggle {
    display: none;
    padding: 0.4rem 0.75rem;
    border: 1px solid #c9dbed;
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.site-nav a {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.16s ease, text-shadow 0.16s ease;
}

.site-nav a:hover {
    color: #356693;
    text-shadow: none;
}

.main {
    padding-block: clamp(2rem, 6vw, 4rem);
}

/* (main--pc-home-full에서 처리) */

.pc-placeholder {
    min-height: min(62vh, 36rem);
    display: grid;
    place-items: center;
}

.pc-placeholder h1 {
    margin: 0;
    font-size: clamp(2.6rem, 8vw, 5rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #355f8b;
}

.pc-landing {
    display: grid;
    gap: 1.25rem;
}

/* PC 첫 화면(/): 컨테이너 폭 제한 없이 가로 풀블리드 (BDNS형 풀폭) */
body.pc-landing-front {
    background: #ffffff;
}

.main.main--pc-home-full {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    /* 기본 `.main { padding-block: clamp(...) }` 덮어써 상·하 보라(패딩) 제거 */
    padding-block: 0;
}

/* PC 일반 페이지 통일 레이아웃:
   상단 헤더는 풀폭, 본문은 같은 최대폭으로 고정 */
.main.main--pc-site {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    padding-block: 0 2.25rem;
}

.main.main--pc-site .pc-site-header {
    border-left: none;
    border-right: none;
    margin-bottom: 1.2rem;
}

.main.main--pc-site > *:not(.pc-site-header) {
    width: min(var(--pc-content-max), calc(100% - 2rem));
    margin-inline: auto;
}

.main.main--pc-site > .flash-message {
    margin-bottom: 0.85rem;
}

.main.main--pc-site > .hero {
    margin-top: 0;
    margin-bottom: 1rem;
}

.main.main--pc-site .grid-cards {
    margin-top: 0.7rem;
}

.main.main--pc-site .mobile-home-focus {
    margin-top: 0.1rem;
}

.main.main--pc-site .customer-community--pc {
    max-width: 100%;
    padding: clamp(1rem, 1.8vw, 1.3rem) clamp(0.95rem, 1.8vw, 1.25rem) 1.2rem;
}

.main.main--pc-site .static-info-widget {
    margin-top: 0.15rem;
}

.static-info-grid {
    margin-top: 0.55rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.static-info-grid .card {
    min-height: 9.2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

@media (max-width: 980px) {
    .static-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

body.pc-landing-front .site-footer {
    padding-top: 0;
    padding-bottom: 0;
}

.main.main--pc-home-full .pc-landing {
    gap: 0;
}

.main.main--pc-home-full .pc-landing-menu {
    border-left: none;
    border-right: none;
}

.main.main--pc-home-full .flash-message {
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding-inline: var(--space);
}

.main.main--pc-home-full .pc-hero-rotator {
    border-radius: 0;
}

/* 큰 배너(히어로)와 하단 세로 카드 줄 사이 여백 — BDNS처럼 가로는 거의 풀폭, 카드 간만 좁은 구분 */
.main.main--pc-home-full .pc-main-cards {
    margin-top: clamp(0.85rem, 2.2vw, 2rem);
    gap: clamp(0.25rem, 0.9vw, 0.65rem);
    padding-inline: clamp(0, 0.35vw, 0.35rem);
    padding-bottom: clamp(0.5rem, 1.2vw, 1rem);
}

/* 세로 긴 카드 블록: 열 간 흰 여백(gap). 텍스트는 이미지 위 중앙(많은 쇼핑몰/런페이지 패턴) */
.main.main--pc-home-full .pc-main-card.pc-main-card--visual {
    border-radius: 0;
    border: none;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    align-items: stretch;
}

.main.main--pc-home-full .pc-main-card-photo {
    grid-row: 1;
    grid-column: 1;
    z-index: 0;
    aspect-ratio: 2 / 3;
    min-height: 0;
    max-height: min(94vh, 78rem);
}

.main.main--pc-home-full .pc-main-card-photo img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
}

.main.main--pc-home-full .pc-main-card-caption {
    grid-row: 1;
    grid-column: 1;
    z-index: 1;
    justify-self: stretch;
    align-self: stretch;
    padding: clamp(1rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: clamp(0.35rem, 1.2vw, 0.75rem);
    background: radial-gradient(rgba(8, 16, 24, 0.18) 0%, rgba(8, 16, 24, 0.42) 100%);
}

.main.main--pc-home-full .pc-main-card-caption strong {
    font-size: clamp(1.35rem, 3.8vw, 2.55rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #ffffff;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.75),
        0 12px 40px rgba(0, 0, 0, 0.55);
}

.main.main--pc-home-full .pc-main-card-caption span {
    font-size: clamp(0.82rem, 1.6vw, 1.12rem);
    font-weight: 600;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.93);
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.7),
        0 8px 24px rgba(0, 0, 0, 0.45);
}

.main.main--pc-home-full a.pc-main-card:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.pc-landing-menu {
    position: relative;
    min-height: 5rem;
    background: #ffffff;
    border: 1px solid #e2e9f2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-inline: clamp(1.2rem, 4vw, 3rem);
    gap: 0;
}

.pc-landing-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(1rem, 2.4vw, 2rem);
    max-width: min(52%, calc(50% - 5.5rem));
}

.pc-landing-nav a {
    text-decoration: none;
    color: #304a65;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-size: clamp(0.82rem, 1.08vw, 0.98rem);
}

.pc-nav-login-btn {
    border: 0;
    background: transparent;
    color: #304a65;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-size: clamp(0.82rem, 1.08vw, 0.98rem);
    padding: 0;
    cursor: pointer;
}

a.pc-nav-login-btn {
    text-decoration: none;
    display: inline;
}

.pc-nav-logout-form {
    display: inline-flex;
}

/* RENTAL 등과 동일: `.pc-landing-nav a` + 전역 `a:hover` 들림·그림자만 쓰고 별도 밑줄 없음 */
.pc-landing-nav .pc-nav-admin-shortcut {
    margin-left: 0.5rem;
    white-space: nowrap;
}

.pc-landing-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    padding: 0.15rem 0.25rem;
}

/* 전역 a:hover 변환(translateY)보다 우선순위를 높여 로고 위치를 고정 */
a.pc-landing-logo:hover,
.pc-landing-menu a.pc-landing-logo:hover {
    transform: translate(-50%, -50%);
    box-shadow: none;
    filter: none;
}

.pc-landing-logo img {
    display: block;
    height: clamp(2.2rem, 4.4vw, 3rem);
    width: auto;
    max-width: min(46vw, 15.2rem);
    object-fit: contain;
}

.pc-login-modal[hidden] {
    display: none;
}

.pc-login-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.pc-login-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(14, 24, 42, 0.45);
}

.pc-login-modal__panel {
    position: relative;
    width: min(92vw, 26rem);
    margin: 12vh auto 0;
    background: #fff;
    border: 1px solid #dbe4f0;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(10, 24, 42, 0.28);
    padding: 1rem 1rem 1.1rem;
}

.pc-login-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.45rem;
}

.pc-login-modal__head h2 {
    margin: 0;
    font-size: 1.2rem;
}

.pc-login-modal__close {
    border: 0;
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: #60738a;
}

.pc-login-modal__desc {
    margin-top: 0;
    margin-bottom: 0.8rem;
    color: #667a91;
    font-size: 0.9rem;
}

.customer-login-page {
    max-width: min(92vw, 26rem);
    margin: 0 auto 2rem;
    padding: 1rem 1.1rem 1.2rem;
    background: #fff;
    border: 1px solid #dbe4f0;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(10, 24, 42, 0.08);
}

.customer-login-page--wide {
    max-width: min(96vw, 32rem);
}

.customer-signup-form {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.customer-login-lead {
    margin: 0 0 0.85rem;
    color: #4a5d73;
    font-size: 0.92rem;
    line-height: 1.45;
}

.customer-login-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.customer-login-integration-note {
    margin: -0.35rem 0 0.85rem;
    font-size: 0.82rem;
    line-height: 1.45;
}

.login-tab-strip {
    display: flex;
    gap: 0;
    margin: 0 0 1rem;
    border-bottom: 1px solid #dbe4f0;
}

.login-tab-strip a.login-tab {
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}

.login-tab {
    flex: 1;
    text-align: center;
    padding: 0.55rem 0.4rem;
    font-weight: 700;
    font-size: 0.88rem;
    color: #7a8ca3;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.login-tab--active {
    color: #1e3a52;
    border-bottom-color: #2a6f97;
}

.login-tab--soon {
    cursor: default;
    opacity: 0.55;
}

.customer-login-subhead {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    color: #1e3a52;
}

.login-signup-panel--first {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e8eef5;
}

.login-soon-note {
    margin: 0.5rem 0 0.75rem;
    padding: 0.45rem 0.55rem;
    background: #f4f7fb;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #5a6d82;
}

.customer-login-skip {
    margin: 0;
    font-size: 0.9rem;
}

.customer-login-skip a {
    font-weight: 700;
    color: #2a6f97;
}

.login-form-block {
    margin-top: 0.25rem;
}

.customer-login-after {
    margin: 0.85rem 0 0;
    font-size: 0.88rem;
    color: #4a5d73;
}

.customer-login-after a {
    font-weight: 700;
    color: #2a6f97;
}

.customer-login-form {
    margin-top: 0.25rem;
}

.customer-login-foot {
    margin: 1rem 0 0;
    font-size: 0.85rem;
    color: #667a91;
}

.customer-login-foot a {
    color: #2a6f97;
    font-weight: 600;
}

/* 홈 외 PC 페이지 공통 상단바 보정: "붙어보임" 완화 */
.main.main--pc-home-full .pc-site-header {
    border-left: none;
    border-right: none;
    margin-bottom: clamp(0.8rem, 2vw, 1.4rem);
}

.main.main--pc-home-full .pc-site-header + .hero {
    margin-top: 0;
}

@media (max-width: 900px) {
    .pc-landing-nav {
        gap: 0.55rem 0.75rem;
    }

    .pc-landing-nav a {
        font-size: 0.72rem;
    }

    .pc-landing-logo img {
        height: clamp(1.65rem, 6vw, 2.35rem);
        max-width: min(52vw, 12rem);
    }
}

.pc-hero-rotator {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    background: #eef3f8;
    overflow: hidden;
}

.pc-hero-rotator img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.55s ease;
}

.pc-hero-rotator img.is-active {
    opacity: 1;
}

.pc-main-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding-bottom: 0.5rem;
}

.pc-main-card {
    border: 1px solid #d8e1eb;
    background: #ffffff;
    min-height: 13rem;
    text-decoration: none;
    color: #26394e;
    display: grid;
    align-content: end;
    gap: 0.35rem;
    padding: 1rem;
}

.pc-main-card--visual {
    grid-template-rows: minmax(11rem, 17rem) auto;
    padding: 0;
    overflow: hidden;
    align-content: stretch;
    border-radius: calc(var(--radius) + 2px);
}

.pc-main-card-photo {
    margin: 0;
    min-height: 11rem;
    background: #e8edf4;
}

.pc-main-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 11rem;
}

.pc-main-card-caption {
    padding: 0.9rem 1rem 1rem;
    display: grid;
    gap: 0.35rem;
    align-content: end;
}

.pc-main-card strong {
    font-size: 1.1rem;
}

.pc-main-card span {
    font-size: 0.86rem;
    color: #627a94;
}

.mobile-preview-stage {
    min-height: min(78vh, 56rem);
    display: grid;
    place-items: center;
}

.mobile-preview-device {
    width: 390px;
    max-width: 390px;
    background: linear-gradient(165deg, #111a2a, #0b111b);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 2rem;
    padding: 0.7rem;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45);
}

.mobile-preview-screen {
    border-radius: 1.45rem;
    overflow: auto;
    max-height: min(72vh, 48rem);
    background: radial-gradient(120% 80% at 50% -20%, #1e3a5f 0%, var(--bg) 55%);
}

.mobile-preview-screen .site-header {
    top: 0;
    position: sticky;
    z-index: 12;
}

.mobile-preview-screen .header-inner {
    min-height: 2.8rem;
    gap: 0.45rem;
}

.mobile-preview-screen .logo {
    font-size: 0.92rem;
}

.mobile-preview-screen .site-nav ul {
    gap: 0.28rem 0.7rem;
}

.mobile-preview-screen .site-nav a {
    font-size: 0.8rem;
}

.mobile-preview-screen .main {
    padding-block: 1rem 1.3rem;
}

.mobile-preview-screen .hero h1 {
    font-size: 1.36rem;
    margin-bottom: 0.45rem;
}

.mobile-preview-screen .lead {
    font-size: 0.9rem;
    line-height: 1.46;
}

.mobile-preview-screen .grid-cards {
    margin-top: 1rem;
    gap: 0.62rem;
}

.mobile-preview-screen .card {
    border-radius: 10px;
    padding: 0.72rem 0.75rem;
}

.mobile-preview-screen .card h2 {
    margin-bottom: 0.35rem;
    font-size: 0.96rem;
}

.mobile-preview-screen .card p {
    font-size: 0.82rem;
    line-height: 1.4;
}

.mobile-preview-screen .site-footer {
    padding: 0.75rem;
    font-size: 0.76rem;
}

.mobile-preview-screen .admin-grid {
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.mobile-preview-screen .admin-kpi,
.mobile-preview-screen .admin-panel,
.mobile-preview-screen .admin-filter {
    padding: 0.55rem 0.62rem;
}

.mobile-preview-screen .kpi-value {
    font-size: 1.16rem;
}

.hero h1 {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    line-height: 1.2;
    margin: 0 0 0.75rem;
}

.hero {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-card);
    padding: clamp(0.9rem, 2.2vw, 1.4rem);
}

.lead {
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    color: var(--muted);
    max-width: 42rem;
    margin: 0;
}

.flash-message {
    margin-bottom: 0.8rem;
    border: 1px solid #9fc1e5;
    background: #eaf4ff;
    color: #2f5377;
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.flash-message.is-toast {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 2200;
    margin: 0;
    max-width: min(92vw, 24rem);
    padding-right: 2rem;
    box-shadow: 0 10px 24px rgba(17, 39, 67, 0.18);
    animation: flash-toast-in 0.2s ease;
}

.flash-message.is-toast-hide {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.flash-message-close {
    position: absolute;
    top: 0.2rem;
    right: 0.3rem;
    border: 0;
    background: transparent;
    color: #2f5377;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

@keyframes flash-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.ops-form-wrap {
    margin-top: 0.8rem;
}

.ops-form {
    margin-top: 0.5rem;
    display: grid;
    gap: 0.45rem;
}

.ops-form.inline {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    align-items: end;
}

.ops-form label {
    display: grid;
    gap: 0.2rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.ops-form input,
.ops-form select {
    width: 100%;
    border: 1px solid var(--line);
    background: #ffffff;
    color: #243b54;
    border-radius: var(--radius-sm);
    min-height: 2.1rem;
    padding: 0.3rem 0.45rem;
}

.admin-pc-hero-banner {
    margin-bottom: 1rem;
}

/* PC 메인 배너 관리: 썸네일·슬롯별 업로드·경로 편집 */
.admin-pc-banner-page {
    overflow: hidden;
}

.admin-pc-banner-page {
    border: 1px solid #e7ebf2;
    background: linear-gradient(180deg, #fcfdff 0%, #f7f9fc 100%);
}

.card.admin-pc-banner-page > h2.admin-pc-banner-page__title {
    margin: 0 0 0.85rem;
    font-size: clamp(1.05rem, 0.9vw + 0.95rem, 1.16rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f172a;
}

.admin-pc-banner-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    margin-bottom: 0.85rem;
}

.admin-pc-banner-page .admin-btn {
    border: 1px solid #d5dde8;
    background: #f5f7fb;
    color: #334155;
    box-shadow: none;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.admin-pc-banner-page .admin-btn:hover,
.admin-pc-banner-page .admin-btn:focus-visible {
    background: #edf2f8;
    border-color: #c8d3e3;
    color: #1f2f46;
}

.admin-pc-banner-page .admin-btn.admin-btn--danger {
    border-color: #e6ccd3;
    background: #f9f1f3;
    color: #9f2f4a;
}

.admin-pc-banner-page .admin-btn.admin-btn--danger:hover,
.admin-pc-banner-page .admin-btn.admin-btn--danger:focus-visible {
    background: #f6e7eb;
    border-color: #ddb7c3;
    color: #85243d;
}

.admin-pc-banner-add-wrap {
    margin: 0.85rem 0 0;
}

.admin-pc-banner-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 900px) {
    .admin-pc-banner-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.1rem;
    }
}

.admin-pc-banner-slot {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.45rem;
    border-radius: 12px;
    border: 1px solid #e3e9f2;
    background: #ffffff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 3px 12px rgba(15, 23, 42, 0.04);
    min-width: 0;
}

.admin-pc-banner-slot__preview {
    border-radius: 10px;
    border: 1px solid #e7edf4;
    background: #e9eef6;
    overflow: hidden;
    aspect-ratio: 16 / 6;
}

.admin-pc-banner-slot__thumb-hit {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0;
    text-align: left;
    width: 100%;
    height: 100%;
}

.admin-pc-banner-slot__thumb-hit:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.admin-pc-banner-slot__thumb-hit:disabled {
    cursor: wait;
    opacity: 0.78;
}

.admin-pc-banner-row__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.45rem;
    align-items: center;
}

.admin-pc-banner-row__label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    margin-right: 0.2rem;
}

.admin-pc-banner-row__order-wrap {
    display: inline-flex;
}

.admin-pc-banner-row__order-select {
    min-width: 3rem;
    height: 1.9rem;
    padding: 0 0.45rem;
    border: 1px solid #d5dde8;
    border-radius: 10px;
    background: #f8fafd;
    color: #334155;
    font-size: 0.8rem;
    font-weight: 600;
}

.admin-pc-banner-row__toolbar .admin-btn {
    font-size: 0.76rem;
    padding: 0.22rem 0.5rem;
    min-height: 0;
    border-radius: 999px;
    font-weight: 600;
}

.admin-pc-banner-row__toolbar .admin-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.admin-pc-banner-thumb {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 168px;
    max-height: 230px;
    object-fit: cover;
    background: #dfe8f3;
}

.muted-note {
    margin-top: 0.45rem;
    font-size: 0.82rem;
    color: #5d7692;
    font-weight: 500;
}

.admin-footer-editor {
    margin: 0;
    padding: 0.7rem 0.75rem 0.8rem;
    border: 1px solid #e3e8f1;
    border-radius: 12px;
    background: #fbfcff;
}

.admin-footer-editor + .admin-footer-editor {
    margin-top: 0.7rem;
}

.admin-footer-editor > legend {
    padding: 0 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #334155;
}

.admin-footer-editor > textarea {
    width: 100%;
    margin-top: 0.35rem;
    border-radius: 10px;
    border: 1px solid #d6deea;
    background: #ffffff;
    line-height: 1.55;
    font-size: 0.92rem;
    padding: 0.72rem 0.78rem;
    resize: vertical;
}

.admin-footer-editor > input[type="text"] {
    margin-top: 0.55rem;
    border-radius: 10px;
    border: 1px solid #d6deea;
    background: #ffffff;
}

.admin-footer-topic-form {
    margin-top: 0.65rem;
}

.admin-rich-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.admin-rich-toolbar .admin-btn {
    min-height: 1.9rem;
    padding: 0.25rem 0.55rem;
    font-size: 0.78rem;
}

.admin-rich-toolbar select,
.admin-rich-toolbar input[type="color"] {
    height: 1.9rem;
    border: 1px solid #d5deea;
    border-radius: 8px;
    background: #fff;
}

.admin-rich-toolbar input[type="color"] {
    width: 2.1rem;
    padding: 0.15rem;
}

.admin-rich-editor {
    margin-top: 0.55rem;
    min-height: 170px;
    border: 1px solid #d6deea;
    border-radius: 10px;
    background: #fff;
    padding: 0.75rem 0.8rem;
    line-height: 1.6;
    font-size: 0.95rem;
    color: #0f172a;
}

.admin-rich-editor:focus {
    outline: 2px solid #9fb8e6;
    outline-offset: 1px;
}

.admin-footer-save-btn {
    margin-top: 0.65rem;
    min-height: 2rem;
    width: auto;
    padding: 0.3rem 0.85rem;
    font-size: 0.82rem;
}

code {
    font-size: 0.9em;
    padding: 0.15em 0.4em;
    border-radius: 6px;
    background: #eef4fb;
}

.grid-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space);
    margin-top: clamp(1rem, 3vw, 1.6rem);
}

@media (min-width: 640px) {
    .grid-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--space);
    box-shadow: var(--shadow-card);
}

.card h2 {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: #152f47;
}

.card p {
    margin: 0;
    color: #4b6480;
    font-size: 0.96rem;
    line-height: 1.6;
}

.card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.16s ease, border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.card-link:hover {
    border-color: rgba(75, 105, 255, 0.38);
    background: #f5f8ff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.card-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.loginmy-widget .loginmy-grid {
    margin-top: 0.4rem;
}

/* 밑줄 탭 — 알약 그룹은 "탭"으로 인식되지 않아 매거진형 밑줄 탭으로 교체.
   컨테이너 하단에 트랙 라인, 각 탭은 텍스트만, 활성 탭은 진한 컬러 + 3px 컬러 막대.
   margin-bottom: -1px 로 활성 막대가 트랙 라인을 덮어 시각적으로 콘텐츠와 연결. */
.loginmy-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin: 0 0 1.1rem;
    border-bottom: 1px solid var(--line);
}

.loginmy-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.1rem;
    margin-bottom: -1px;
    border: 0;
    background: transparent;
    color: #6b7d92;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.loginmy-tab:hover {
    text-decoration: none;
    color: #173652;
    border-bottom-color: rgba(41, 98, 184, 0.25);
}

.loginmy-tab.is-active {
    color: var(--accent-dark);
    border-bottom-color: var(--accent);
    font-weight: 800;
}

.loginmy-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* 모바일 chassis 안에서는 4개 탭이 한 줄에 들어가도록 균등 분할 + 패딩/폰트 압축.
   기본 flex-wrap 으로는 "MY 홈" 이 두 번째 줄로 떨어져 underline 만 따로 떠 보였다. */
.app-device .loginmy-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    flex-wrap: nowrap;
    gap: 0;
    margin-bottom: 0.9rem;
}

.app-device .loginmy-tab {
    padding: 0.55rem 0.3rem;
    font-size: 0.78rem;
    text-align: center;
    white-space: nowrap;
}

/* MY 큰 제목은 chassis 안에서 너무 크고 위계 중복(탭이 이미 컨텍스트 제공) → 압축. */
.app-device .loginmy-widget .customer-community-h1 {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.app-device .loginmy-widget .customer-community-intro {
    margin-bottom: 0.7rem;
    padding-bottom: 0.4rem;
}

.loginmy-widget .loginmy-card-link h2 {
    font-size: 1.03rem;
}

.loginmy-widget .loginmy-card-link p {
    margin-top: 0.25rem;
}

.loginmy-widget-card {
    padding: clamp(1rem, 2.4vw, 1.4rem);
}

.loginmy-widget-card h2 {
    margin: 0 0 0.4rem;
}

.loginmy-review-list {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.loginmy-review-list li {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fbfdff;
    padding: 0.55rem 0.65rem;
}

.loginmy-review-list a {
    display: inline-block;
    text-decoration: none;
    color: #173652;
    font-weight: 700;
}

.loginmy-review-list a:hover {
    text-decoration: none;
    color: var(--accent-dark);
}

.loginmy-review-list span {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.79rem;
    color: #58708a;
}

.loginmy-res-banner__title {
    margin-top: 0;
    font-size: 1.02rem;
}

.loginmy-res-banner-list {
    margin: 0.35rem 0 0.55rem;
    padding-left: 1.15rem;
    font-size: 0.82rem;
    line-height: 1.58;
    overflow-wrap: anywhere;
    word-break: keep-all;
}

.loginmy-res-banner-list a {
    color: var(--accent-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.loginmy-res-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
}

.loginmy-rev-tips-list {
    margin: 0.35rem 0 0;
    padding-left: 1.15rem;
    font-size: 0.82rem;
    line-height: 1.58;
    overflow-wrap: anywhere;
    word-break: keep-all;
}

.loginmy-rev-tips-list a {
    color: var(--accent-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.loginmy-profile-notes {
    margin: 0.35rem 0 0.55rem;
    padding-left: 1.1rem;
    font-size: 0.84rem;
    line-height: 1.58;
    overflow-wrap: anywhere;
    word-break: keep-all;
}

.loginmy-profile-notes-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
}

.loginmy-res-footnote {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
}

.loginmy-res-timeline {
    list-style: none;
    margin: 0.45rem 0 0;
    padding: 0.45rem 0.5rem;
    border-radius: 10px;
    border: 1px dashed rgba(41, 98, 184, 0.28);
    background: linear-gradient(165deg, #f7faff 0%, #fff 60%);
    display: grid;
    gap: 0.32rem;
}

.loginmy-res-timeline__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.55rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #3d5670;
}

.loginmy-res-timeline__date {
    font-weight: 800;
    color: #173652;
    min-width: 5.5rem;
}

.loginmy-res-timeline__phase {
    color: #58708a;
}

.loginmy-res-timeline-empty {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
}

.loginmy-res-rental-link {
    margin: 0.28rem 0 0;
    font-size: 0.76rem;
}

.loginmy-res-rental-link a {
    font-weight: 600;
    color: var(--accent-dark);
}

.loginmy-res-admin-log {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0.42rem 0.5rem;
    border-radius: 10px;
    border: 1px solid rgba(100, 116, 139, 0.28);
    background: #f8fafc;
    display: grid;
    gap: 0.28rem;
}

.loginmy-res-admin-log__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
    font-size: 0.76rem;
    line-height: 1.45;
    color: #334155;
}

.loginmy-res-admin-log__time {
    font-weight: 700;
    color: #0f172a;
    min-width: 7.5rem;
}

.loginmy-res-admin-log__step {
    font-weight: 700;
    color: #1e3a5f;
}

.loginmy-res-admin-log__note {
    flex: 1 1 100%;
    font-size: 0.74rem;
}

.loginmy-res-tracking {
    margin: 0.45rem 0 0;
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    border: 1px solid rgba(16, 185, 129, 0.28);
    background: linear-gradient(165deg, #ecfdf5 0%, #fff 62%);
    font-size: 0.78rem;
    line-height: 1.45;
    color: #1b3148;
}

.loginmy-res-tracking__line {
    margin: 0.12rem 0;
}

.loginmy-res-tracking__k {
    font-weight: 800;
    margin-right: 0.35rem;
    color: #0f5132;
}

.loginmy-res-tracking__no {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.loginmy-res-tracking__url {
    font-weight: 700;
    color: var(--accent-dark);
}

.loginmy-reservation-row--focus {
    scroll-margin-top: 5.5rem;
    box-shadow: 0 0 0 2px rgba(41, 98, 184, 0.35);
    border-radius: 10px;
}

.loginmy-dash-block--notif {
    padding-bottom: 0.55rem;
}

.loginmy-notif-list {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.42rem;
}

.loginmy-notif-list__item {
    padding: 0.5rem 0.58rem;
    border-radius: 10px;
    border: 1px solid rgba(20, 24, 31, 0.08);
    background: #fbfdff;
}

.loginmy-notif-list__sub {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 700;
    color: #1b3148;
    line-height: 1.45;
}

.loginmy-notif-list__time {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b8299;
}

.loginmy-notif-list__ch {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a9fb4;
}

.loginmy-notif-list__body {
    margin: 0.28rem 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
}

.loginmy-profile-list {
    list-style: none;
    margin: 0.45rem 0 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}

.loginmy-profile-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.58rem 0.68rem;
    background: #fff;
    border-top: 1px solid #edf2f7;
}

.loginmy-profile-list li:first-child {
    border-top: 0;
}

.loginmy-profile-list strong {
    font-size: 0.82rem;
    color: #1b3148;
}

.loginmy-profile-list span {
    font-size: 0.82rem;
    color: #47617b;
    text-align: right;
    word-break: break-all;
}

/* MY 홈 — 현황 패널(예약·후기·바로가기) */
.loginmy-dash-panel {
    margin-top: 0.55rem;
}

.loginmy-dash-panel__title {
    margin: 0 0 0.35rem;
    font-size: clamp(1.05rem, 2.2vw, 1.22rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.loginmy-dash-panel__lead {
    margin: 0 0 0.85rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #5a7390;
}

.loginmy-dash-block {
    padding: 0.72rem 0;
    border-top: 1px solid rgba(20, 24, 31, 0.08);
}

.loginmy-dash-block:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.loginmy-dash-block--alert {
    margin-bottom: 0.35rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(217, 119, 6, 0.35);
    border-radius: 12px;
    background: linear-gradient(165deg, #fffbeb 0%, #fff 70%);
}

.loginmy-dash-block--alert.loginmy-dash-block {
    border-top: 1px solid rgba(217, 119, 6, 0.35);
}

.loginmy-dash-block--links {
    padding-bottom: 0.15rem;
}

.loginmy-dash-block--guide .loginmy-dash-guide-list {
    margin: 0.15rem 0 0;
    padding-left: 1.15rem;
    font-size: 0.82rem;
    line-height: 1.58;
    color: #5a7390;
    overflow-wrap: anywhere;
    word-break: keep-all;
}

.loginmy-dash-block--guide .loginmy-dash-guide-list li {
    margin-bottom: 0.38rem;
}

.loginmy-dash-block--guide .loginmy-dash-guide-list a {
    color: var(--accent-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.loginmy-dash-block__empty {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
}

.loginmy-dash-actions--wrap {
    margin-top: 0.55rem;
}

.loginmy-dash-block--upcoming {
    margin-bottom: 0.2rem;
    padding: 0.78rem 0.92rem;
    border: 1px solid rgba(37, 99, 235, 0.22);
    border-radius: 12px;
    background: linear-gradient(165deg, #f0f7ff 0%, #fff 72%);
}

.loginmy-dash-block--upcoming.loginmy-dash-block {
    border-top: 1px solid rgba(37, 99, 235, 0.18);
}

.loginmy-dash-upcoming-list {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.loginmy-dash-upcoming-list__item {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    align-items: flex-start;
}

.loginmy-dash-upcoming-list__title {
    font-size: 0.86rem;
    color: #1e3a5f;
}

.loginmy-dash-upcoming-list__detail {
    font-size: 0.78rem;
    line-height: 1.45;
}

.loginmy-dash-upcoming-list__link {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--accent-dark);
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.loginmy-res-upcoming {
    border: 1px solid rgba(37, 99, 235, 0.18);
    background: linear-gradient(165deg, #f7fbff 0%, #fff 80%);
}

.loginmy-res-upcoming-list {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    font-size: 0.82rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: keep-all;
}

.loginmy-res-upcoming-list__item strong {
    color: #1e3a5f;
}

.loginmy-res-upcoming-list__link {
    display: inline-block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent-dark);
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.loginmy-dash-block__label {
    margin: 0 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5d6f82;
}

.loginmy-dash-block__text {
    margin: 0 0 0.35rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #1b3148;
}

.loginmy-dash-block__hint {
    margin: 0 0 0.55rem;
    font-size: 0.8rem;
}

.loginmy-dash-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.55rem;
    margin: 0.35rem 0 0;
}

.loginmy-dash-res-list {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.38rem;
}

.loginmy-dash-res-list__item {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    padding: 0.5rem 0.58rem;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fbfdff;
}

.loginmy-dash-res-list__no {
    font-weight: 800;
    font-size: 0.88rem;
    color: #173652;
}

a.loginmy-dash-res-list__no {
    text-decoration: none;
    color: #173652;
}

a.loginmy-dash-res-list__no:hover {
    color: var(--accent-dark);
    text-decoration: underline;
}

.loginmy-dash-res-list__meta {
    font-size: 0.78rem;
    color: #58708a;
    line-height: 1.45;
}

.loginmy-dash-res-list__ship {
    font-size: 0.72rem;
    line-height: 1.4;
}

.loginmy-dash-log-list {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.38rem;
}

.loginmy-dash-log-list__item {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    padding: 0.5rem 0.58rem;
    border-radius: 10px;
    border: 1px solid rgba(41, 98, 184, 0.18);
    background: linear-gradient(165deg, #f7faff 0%, #fff 55%);
}

.loginmy-dash-log-list__no {
    font-weight: 800;
    font-size: 0.88rem;
    color: #173652;
}

a.loginmy-dash-log-list__no {
    text-decoration: none;
    color: #173652;
}

a.loginmy-dash-log-list__no:hover {
    color: var(--accent-dark);
    text-decoration: underline;
}

.loginmy-dash-log-list__meta {
    font-size: 0.78rem;
    color: #58708a;
    line-height: 1.45;
}

.loginmy-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.55rem;
}

.loginmy-quick-links a {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    border: 1px solid rgba(41, 98, 184, 0.22);
    background: #f7faff;
    color: var(--accent-dark);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.14s ease, background-color 0.14s ease;
}

.loginmy-quick-links a:hover {
    border-color: rgba(41, 98, 184, 0.45);
    background: #edf4ff;
    text-decoration: none;
}

/* ============================================================
 * MY 대시보드 시각 보강 — 외곽 패널 투명 + 각 섹션을 카드로 + KPI 4칸
 * 이중 카드 효과 방지: .loginmy-widget-card.loginmy-dash-panel 의
 * 배경/그림자/테두리/패딩을 무력화하고, 안의 .loginmy-dash-block 들이
 * 각자 흰 카드로 떠서 시각 위계를 만든다.
 * ============================================================ */

.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;
}

.loginmy-widget-card.loginmy-dash-panel {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.loginmy-dash-panel > .loginmy-dash-block:not(.loginmy-dash-block--alert):not(.loginmy-dash-block--upcoming) {
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.loginmy-dash-panel > .loginmy-dash-block + .loginmy-dash-block {
    margin-top: 0.7rem;
}

.loginmy-dash-panel > .loginmy-dash-block:first-of-type {
    margin-top: 0;
}

.loginmy-dash-panel > .loginmy-dash-block--alert,
.loginmy-dash-panel > .loginmy-dash-block--upcoming {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* 라벨: 좌측 컬러 액센트로 또렷하게 (기존 8364 룰을 패널 안에서 덮어씀) */
.loginmy-dash-panel .loginmy-dash-block__label {
    margin: 0 0 0.6rem;
    padding: 0.05rem 0 0.05rem 0.55rem;
    border-left: 3px solid var(--accent-mid);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #2954e6;
}

.loginmy-dash-panel > .loginmy-dash-block--alert .loginmy-dash-block__label {
    border-left-color: #d97706;
    color: #b45309;
}

/* KPI 그리드 (4칸 → 모바일 2칸) */
.loginmy-dash-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.7rem;
    margin-top: 0.4rem;
}

@media (max-width: 720px) {
    .loginmy-dash-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.loginmy-dash-kpi-item {
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(41, 84, 230, 0.14);
    border-radius: 12px;
    background: linear-gradient(160deg, #f0f6ff 0%, #fff 72%);
    text-align: left;
}

.loginmy-dash-kpi-num {
    margin: 0;
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 800;
    line-height: 1.1;
    color: #173652;
    letter-spacing: -0.02em;
}

.loginmy-dash-kpi-unit {
    margin-left: 0.18em;
    font-size: 0.62em;
    font-weight: 700;
    color: #58708a;
}

.loginmy-dash-kpi-cap {
    margin: 0.32rem 0 0;
    font-size: 0.74rem;
    font-weight: 600;
    color: #5d6f82;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 모바일 chassis(.app-device) 안에서는 viewport 미디어쿼리(720px) 가 안 먹어 4열로 떨어진다.
   chassis 컨텍스트 강제 2열 + 카드 패딩/숫자 크기 압축으로 텍스트가 세로로 깨지지 않게. */
.app-device .loginmy-dash-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.app-device .loginmy-dash-kpi-item {
    padding: 0.7rem 0.75rem;
    min-width: 0;
}

.app-device .loginmy-dash-kpi-num {
    font-size: 1.3rem;
}

.app-device .loginmy-dash-kpi-cap {
    font-size: 0.72rem;
}

/* ============================================================
 * 예약 타임라인 카드 — 시간 정보를 progress 막대로 시각화.
 * 상태별 색상(확정·대기·완료·취소) + 오늘 기준 진척률 + 상대 시간.
 * ============================================================ */
.reservation-timeline {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.reservation-timeline__item {
    padding: 0.85rem 1rem 0.95rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.reservation-timeline__item:hover {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.reservation-timeline__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.reservation-timeline__no {
    font-weight: 800;
    font-size: 0.95rem;
    color: #0f172a;
    text-decoration: none;
    letter-spacing: -0.01em;
}

.reservation-timeline__no:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.reservation-timeline__status {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 999px;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.reservation-timeline__status--confirmed {
    background: #dcfce7;
    color: #166534;
}

.reservation-timeline__status--pending {
    background: #fef3c7;
    color: #92400e;
}

.reservation-timeline__status--done {
    background: #dbeafe;
    color: #1e40af;
}

.reservation-timeline__status--cancelled {
    background: #f1f5f9;
    color: #64748b;
}

.reservation-timeline__status--normal {
    background: #f1f5f9;
    color: #475569;
}

.reservation-timeline__bar {
    position: relative;
    height: 8px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
}

.reservation-timeline__fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}

.reservation-timeline__item--confirmed .reservation-timeline__fill {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.reservation-timeline__item--pending .reservation-timeline__fill {
    background: linear-gradient(90deg, #f59e0b, #fb923c);
    animation: reservation-pulse 1.6s ease-in-out infinite;
}

@keyframes reservation-pulse {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

.reservation-timeline__item--done .reservation-timeline__fill {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.reservation-timeline__item--cancelled .reservation-timeline__fill {
    background: repeating-linear-gradient(135deg, #cbd5e1 0 6px, #e2e8f0 6px 12px);
}

.reservation-timeline__item--cancelled {
    opacity: 0.7;
}

.reservation-timeline__dates {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.42rem;
    font-size: 0.8rem;
    color: #475569;
    font-weight: 600;
}

.reservation-timeline__nights {
    padding: 0.08rem 0.5rem;
    background: rgba(99, 102, 241, 0.08);
    color: #4338ca;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.reservation-timeline__rel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.55rem;
    font-size: 0.78rem;
    color: #64748b;
}

.reservation-timeline__rel-text {
    font-weight: 700;
}

.reservation-timeline__item--confirmed .reservation-timeline__rel-text {
    color: #166534;
}

.reservation-timeline__item--pending .reservation-timeline__rel-text {
    color: #92400e;
}

.reservation-timeline__item--cancelled .reservation-timeline__rel-text {
    color: #94a3b8;
}

.reservation-timeline__set {
    padding: 0.12rem 0.45rem;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 4px;
    font-size: 0.72rem;
    font-family: ui-monospace, monospace;
    color: #475569;
}

.reservation-timeline__ship {
    color: #475569;
}

/* chassis 안 컴팩트 */
.app-device .reservation-timeline__item {
    padding: 0.7rem 0.8rem 0.8rem;
}

.app-device .reservation-timeline__no {
    font-size: 0.88rem;
}

.app-device .reservation-timeline__dates {
    font-size: 0.74rem;
}

.app-device .reservation-timeline__rel {
    font-size: 0.72rem;
}

/* ============================================================
 * KPI 카드 — 숫자 + 보조 progress 바 + 부가 텍스트로 정보를 시각화.
 * 카테고리별 좌측 액센트 색으로 빠른 판별.
 * ============================================================ */
.loginmy-dash-kpi-item {
    position: relative;
    overflow: hidden;
    padding-left: 1.2rem;
}

.app-device .loginmy-dash-kpi-item {
    padding-left: 0.95rem;
}

.loginmy-dash-kpi-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: var(--kpi-color, #6366f1);
}

.loginmy-kpi--res::before { background: linear-gradient(180deg, #10b981, #059669); }
.loginmy-kpi--paid::before { background: linear-gradient(180deg, #f59e0b, #d97706); }
.loginmy-kpi--rev::before { background: linear-gradient(180deg, #fbbf24, #f59e0b); }
.loginmy-kpi--comm::before { background: linear-gradient(180deg, #6366f1, #4f46e5); }

.loginmy-kpi__top {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.05rem;
}

.loginmy-kpi__icon {
    font-size: 0.95rem;
    line-height: 1;
}

.loginmy-kpi__bar {
    margin-top: 0.4rem;
    height: 5px;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 999px;
    overflow: hidden;
}

.loginmy-kpi__fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.6s ease;
}

.loginmy-kpi--res .loginmy-kpi__fill { background: linear-gradient(90deg, #10b981, #34d399); }
.loginmy-kpi--rev .loginmy-kpi__fill { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

.loginmy-kpi__sub {
    margin: 0.4rem 0 0;
    font-size: 0.72rem;
    color: #6b7280;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
 * 예약일정 헤더 — "예약일정" 라벨 + 우측에 가장 가까운 예약 정보 + CTA.
 * 별도 "예약일정 카드" 제거하고 캘린더 스트립과 통합.
 * ============================================================ */
.loginmy-dash-schedule-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.45rem;
    flex-wrap: wrap;
}

.loginmy-dash-schedule-head .loginmy-dash-block__label {
    margin: 0;
}

.loginmy-dash-schedule-quick {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.42rem 0.85rem;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    max-width: 100%;
}

.loginmy-dash-schedule-quick:hover {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(99, 102, 241, 0.2);
}

.loginmy-dash-schedule-quick__detail {
    font-size: 0.82rem;
    font-weight: 700;
    color: #312e81;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.loginmy-dash-schedule-quick__cta {
    flex-shrink: 0;
    font-size: 0.76rem;
    font-weight: 700;
    color: #4338ca;
    padding-left: 0.55rem;
    border-left: 1px solid rgba(67, 56, 202, 0.25);
}

/* chassis 안 컴팩트 */
.app-device .loginmy-dash-schedule-quick {
    padding: 0.3rem 0.6rem;
    gap: 0.4rem;
}

.app-device .loginmy-dash-schedule-quick__detail {
    font-size: 0.74rem;
}

.app-device .loginmy-dash-schedule-quick__cta {
    font-size: 0.7rem;
    padding-left: 0.4rem;
}

/* ============================================================
 * 미니 캘린더 스트립 — 향후 30일 가로 스크롤 캘린더.
 * 오늘 마커 + 예약 있는 날 점 표시, 상태별 색상.
 * ============================================================ */
.loginmy-strip {
    display: flex;
    gap: 0.22rem;
    overflow-x: auto;
    padding: 0.5rem 0.2rem 0.7rem;
    margin: 0.4rem -0.2rem 0;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.loginmy-strip::-webkit-scrollbar {
    height: 5px;
}

.loginmy-strip::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.18);
    border-radius: 999px;
}

.loginmy-strip__cell {
    position: relative;
    flex: 0 0 auto;
    min-width: 38px;
    padding: 0.42rem 0.32rem 0.55rem;
    text-align: center;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 8px;
    font-size: 0.78rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.loginmy-strip__cell.is-weekend {
    background: rgba(15, 23, 42, 0.025);
}

.loginmy-strip__cell.is-today {
    background: linear-gradient(160deg, #1e40af 0%, #2563eb 100%);
    color: #fff;
    border-color: #1e40af;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
    transform: scale(1.05);
    z-index: 2;
}

.loginmy-strip__cell.is-today .loginmy-strip__weekday,
.loginmy-strip__cell.is-today .loginmy-strip__day,
.loginmy-strip__cell.is-today .loginmy-strip__month {
    color: #fff;
}

.loginmy-strip__cell.has-reservation:not(.is-today) {
    background: linear-gradient(160deg, #ecfdf5 0%, #fff 70%);
    border-color: rgba(16, 185, 129, 0.3);
}

.loginmy-strip__cell.is-pending:not(.is-today) {
    background: linear-gradient(160deg, #fef3c7 0%, #fff 70%);
    border-color: rgba(245, 158, 11, 0.35);
}

.loginmy-strip__cell.is-done:not(.is-today) {
    background: linear-gradient(160deg, #dbeafe 0%, #fff 70%);
    border-color: rgba(59, 130, 246, 0.3);
}

.loginmy-strip__cell.is-start::after,
.loginmy-strip__cell.is-end::after {
    content: '';
    position: absolute;
    top: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
}

.loginmy-strip__cell.is-pending.is-start::after,
.loginmy-strip__cell.is-pending.is-end::after {
    background: #f59e0b;
}

.loginmy-strip__cell.is-done.is-start::after,
.loginmy-strip__cell.is-done.is-end::after {
    background: #3b82f6;
}

.loginmy-strip__cell.is-start::after { left: 4px; }
.loginmy-strip__cell.is-end::after { right: 4px; }

.loginmy-strip__month {
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    color: #4338ca;
    letter-spacing: -0.02em;
    margin-bottom: 0.1rem;
}

.loginmy-strip__weekday {
    display: block;
    font-size: 0.6rem;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 0.18rem;
}

.loginmy-strip__day {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1;
}

.loginmy-strip__dot {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    margin: 0.32rem auto 0;
    color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
}

.loginmy-strip__cell.is-pending .loginmy-strip__dot {
    color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18);
}

.loginmy-strip__cell.is-done .loginmy-strip__dot {
    color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
}

.loginmy-strip__cell.is-today .loginmy-strip__dot {
    color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.loginmy-strip-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.7rem;
    margin: 0.55rem 0 0;
    font-size: 0.72rem;
    align-items: center;
}

.loginmy-strip-legend__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.7rem;
}

.loginmy-strip-legend__chip::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.loginmy-strip-legend__chip.is-today {
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
}
.loginmy-strip-legend__chip.is-today::before { background: #2563eb; }

.loginmy-strip-legend__chip.is-confirmed {
    background: rgba(16, 185, 129, 0.1);
    color: #047857;
}
.loginmy-strip-legend__chip.is-confirmed::before { background: #10b981; }

.loginmy-strip-legend__chip.is-pending {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}
.loginmy-strip-legend__chip.is-pending::before { background: #f59e0b; }

/* chassis 안 컴팩트 */
.app-device .loginmy-strip__cell {
    min-width: 32px;
    padding: 0.32rem 0.22rem 0.42rem;
}

.app-device .loginmy-strip__day {
    font-size: 0.82rem;
}

.app-device .loginmy-kpi__sub {
    font-size: 0.66rem;
}

.app-device .loginmy-kpi__icon {
    font-size: 0.85rem;
}

/* ============================================================
 * 예약 요약 + 배송·사용 일정 좌우 2열 — PC 폭이 충분하면 병렬, 좁으면 세로 스택.
 * ============================================================ */
.loginmy-dash-twocol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1rem;
    align-items: start;
}

.loginmy-dash-twocol__col {
    min-width: 0;
}

/* chassis 안에서는 항상 1열 */
.app-device .loginmy-dash-twocol {
    grid-template-columns: 1fr;
    gap: 0.7rem;
}

/* ============================================================
 * 배송·사용 일정 카드 (logitem) — 단계 아이콘 + D-day + 메타.
 * ============================================================ */
.loginmy-dash-log-list {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.logitem {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 10px;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.logitem:hover {
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.07);
    transform: translateY(-1px);
}

.logitem__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border-radius: 8px;
    font-size: 1rem;
}

.logitem__body {
    flex: 1 1 auto;
    min-width: 0;
}

.logitem__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    margin-bottom: 0.18rem;
}

.logitem__no {
    font-weight: 800;
    font-size: 0.86rem;
    color: #0f172a;
    text-decoration: none;
    letter-spacing: -0.01em;
}

.logitem__no:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.logitem__dday {
    flex-shrink: 0;
    padding: 0.14rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 800;
    border-radius: 999px;
    letter-spacing: -0.01em;
}

.logitem__dday--today {
    background: linear-gradient(135deg, #dc2626 0%, #f97316 100%);
    color: #fff;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.3);
}

.logitem__dday--upcoming {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

.logitem__dday--past {
    background: rgba(15, 23, 42, 0.06);
    color: #94a3b8;
}

.logitem__meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    color: #64748b;
}

.logitem__phase {
    font-weight: 600;
    color: #475569;
}

.logitem__date {
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.logitem__date::before {
    content: '·';
    margin-right: 0.4rem;
    color: #cbd5e1;
}

/* chassis 안 컴팩트 */
.app-device .logitem {
    padding: 0.55rem 0.7rem;
    gap: 0.5rem;
}

.app-device .logitem__icon {
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
}

.app-device .logitem__no {
    font-size: 0.82rem;
}

.app-device .logitem__meta {
    font-size: 0.72rem;
}

/* ============================================================
 * 후기 관리 / 예약 관리 — Hero CTA + 안내 칩 + 카드 리스트.
 * 마이 홈에서 정립한 디자인 언어(그라디언트·아이콘·상태 색)와 통일.
 * ============================================================ */

/* Hero CTA 카드 — 가장 우선 액션이 있을 때 큰 카드로 강조 */
.loginmy-rev-hero {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    margin: 0 0 1rem;
    padding: 1.3rem 1.4rem;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 20px rgba(15, 23, 42, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.loginmy-rev-hero--ready {
    background: linear-gradient(135deg, #f97316 0%, #dc2626 100%);
    color: #fff;
    border: 1px solid rgba(220, 38, 38, 0.3);
}

.loginmy-rev-hero--idle {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
    color: #1e293b;
    border: 1px solid rgba(99, 102, 241, 0.15);
}

.loginmy-rev-hero__icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    font-size: 1.7rem;
    backdrop-filter: blur(6px);
}

.loginmy-rev-hero--idle .loginmy-rev-hero__icon {
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.loginmy-rev-hero__body {
    flex: 1 1 auto;
    min-width: 0;
}

.loginmy-rev-hero__kicker {
    margin: 0 0 0.18rem;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.85;
}

.loginmy-rev-hero__title {
    margin: 0 0 0.4rem;
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.loginmy-rev-hero__meta {
    margin: 0 0 0.85rem;
    font-size: 0.86rem;
    line-height: 1.45;
    opacity: 0.95;
}

.loginmy-rev-hero--ready .loginmy-rev-hero__meta strong {
    background: rgba(255, 255, 255, 0.25);
    padding: 0.06rem 0.42rem;
    border-radius: 4px;
}

.loginmy-rev-hero__admin-note {
    margin: 0.4rem 0 0.7rem;
    padding: 0.45rem 0.7rem;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    font-size: 0.77rem;
    line-height: 1.4;
}

.loginmy-rev-hero__actions {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
    align-items: center;
}

.loginmy-rev-hero__cta {
    padding: 0.6rem 1.1rem;
    background: #fff;
    color: #dc2626;
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.loginmy-rev-hero__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.loginmy-rev-hero__cta--secondary {
    background: #6366f1;
    color: #fff;
}

.loginmy-rev-hero__sub {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.83rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.loginmy-rev-hero--idle .loginmy-rev-hero__sub {
    color: #475569;
}

/* 안내 칩 카드 — bullet 리스트를 아이콘+짧은 줄로 압축 */
.loginmy-rev-tips-card {
    margin: 0 0 1rem;
    padding: 0.95rem 1.1rem;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 12px;
}

.loginmy-rev-tips-card__label {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    font-weight: 800;
    color: #475569;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.loginmy-rev-tips-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.loginmy-rev-tips-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.5;
}

.loginmy-rev-tips-list__icon {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1.4;
}

.loginmy-rev-tips-list a {
    color: #4338ca;
    font-weight: 700;
}

/* 후기 리스트 카드 — KPI 요약 + 카드 + 빈 상태 */
.loginmy-rev-list-card {
    padding: 1.1rem 1.2rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 14px;
}

.loginmy-rev-list-card__head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.7rem;
}

.loginmy-rev-list-card__label {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.loginmy-rev-list-card__count {
    padding: 0.12rem 0.55rem;
    background: rgba(99, 102, 241, 0.12);
    color: #4338ca;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
}

.loginmy-rev-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-bottom: 0.9rem;
    padding: 0.65rem 0.7rem;
    background: linear-gradient(135deg, #eef2ff 0%, #f0f9ff 100%);
    border-radius: 10px;
}

.loginmy-rev-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.18rem;
    text-align: center;
}

.loginmy-rev-stat__icon {
    font-size: 1rem;
}

.loginmy-rev-stat__num {
    font-size: 1.05rem;
    font-weight: 800;
    color: #312e81;
    letter-spacing: -0.02em;
    line-height: 1;
}

.loginmy-rev-stat__label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
}

.loginmy-rev-empty {
    padding: 2rem 1rem;
    text-align: center;
}

.loginmy-rev-empty__art {
    font-size: 3rem;
    margin-bottom: 0.65rem;
    filter: grayscale(0.2);
    opacity: 0.85;
}

.loginmy-rev-empty__title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 700;
    color: #334155;
}

.loginmy-rev-empty__sub {
    margin: 0;
    font-size: 0.83rem;
    color: #64748b;
    line-height: 1.55;
}

.loginmy-rev-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.loginmy-rev-card {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.loginmy-rev-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.loginmy-rev-card__main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.7rem 0.85rem;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.loginmy-rev-card__site {
    font-size: 0.74rem;
    font-weight: 700;
    color: #0e7490;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loginmy-rev-card__title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.015em;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loginmy-rev-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.18rem;
    font-size: 0.74rem;
    color: #64748b;
    font-weight: 600;
}

.loginmy-rev-card__date {
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.loginmy-rev-card__edit {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    border-left: 1px solid rgba(15, 23, 42, 0.06);
    color: #64748b;
    text-decoration: none;
    font-size: 1.05rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.loginmy-rev-card__edit:hover {
    background: #f1f5f9;
    color: #1d4ed8;
}

/* chassis 컴팩트 */
.app-device .loginmy-rev-hero {
    padding: 1rem 1.05rem;
    gap: 0.8rem;
}

.app-device .loginmy-rev-hero__icon {
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
}

.app-device .loginmy-rev-hero__title {
    font-size: 1rem;
}

.app-device .loginmy-rev-hero__meta {
    font-size: 0.78rem;
}

.app-device .loginmy-rev-hero__cta {
    padding: 0.5rem 0.9rem;
    font-size: 0.84rem;
}

.app-device .loginmy-rev-stats {
    padding: 0.5rem 0.55rem;
    gap: 0.4rem;
}

.app-device .loginmy-rev-stat__num {
    font-size: 0.95rem;
}

.app-device .loginmy-rev-card__title {
    font-size: 0.86rem;
}

/* ============================================================
 * 예약 관리 — Hero CTA + 확장된 reservation-timeline (택배·일정 블록 포함)
 * ============================================================ */
.loginmy-res-hero {
    display: flex;
    gap: 1.1rem;
    margin: 0 0 1rem;
    padding: 1.3rem 1.4rem;
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 60%, #06b6d4 100%);
    color: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.22), 0 1px 3px rgba(15, 23, 42, 0.08);
}

.loginmy-res-hero__icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    font-size: 1.7rem;
    backdrop-filter: blur(6px);
}

.loginmy-res-hero__body { flex: 1 1 auto; min-width: 0; }

.loginmy-res-hero__kicker {
    margin: 0 0 0.18rem;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.85;
}

.loginmy-res-hero__title {
    margin: 0 0 0.4rem;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.loginmy-res-hero__meta {
    margin: 0 0 0.85rem;
    font-size: 0.86rem;
    line-height: 1.45;
    opacity: 0.95;
}

.loginmy-res-hero__actions {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
    align-items: center;
}

.loginmy-res-hero__cta {
    padding: 0.6rem 1.1rem;
    background: #fff;
    color: #1e40af;
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.loginmy-res-hero__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.loginmy-res-hero__sub {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.83rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.loginmy-res-footnote-mini {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    color: #64748b;
}

.loginmy-rev-empty__action {
    margin-top: 0.9rem;
}

/* 예약 관리 카드 — 정보 밀도 ↑.
   padding 압축 + 카드 사이 gap 줄임 + 취소 예약은 mini variant 로 더 작게. */
.reservation-timeline--detailed {
    gap: 0.5rem;
}

.reservation-timeline--detailed .reservation-timeline__item {
    position: relative;
    padding: 0.65rem 0.9rem 0.7rem 1.15rem;
    overflow: hidden;
}

/* 좌측 액센트 막대 — 상태별 색으로 활성 예약 강조. 모든 카드(inline 포함)에 적용. */
.reservation-timeline--detailed .reservation-timeline__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    border-radius: 4px 0 0 4px;
}

/* 취소 카드는 액센트 막대 옅게 — 일관성 유지하되 강조 약화 */
.reservation-timeline--detailed .reservation-timeline__item--cancelled::before {
    background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
    opacity: 0.5;
}

.reservation-timeline--detailed .reservation-timeline__item--confirmed::before {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
}

.reservation-timeline--detailed .reservation-timeline__item--pending::before {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
}

.reservation-timeline--detailed .reservation-timeline__item--done::before {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
}

.reservation-timeline--detailed .reservation-timeline__item--normal::before {
    background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
}

/* hover 시 카드 살짝 떠오르고 상태 색 그림자 */
.reservation-timeline--detailed .reservation-timeline__item--confirmed:hover {
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.18), 0 1px 3px rgba(15, 23, 42, 0.05);
}

.reservation-timeline--detailed .reservation-timeline__item--pending:hover {
    border-color: rgba(245, 158, 11, 0.3);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.18), 0 1px 3px rgba(15, 23, 42, 0.05);
}

.reservation-timeline--detailed .reservation-timeline__item--done:hover {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.18), 0 1px 3px rgba(15, 23, 42, 0.05);
}

/* 결제 대기는 좌측 막대도 펄스 애니로 주의 환기 */
.reservation-timeline--detailed .reservation-timeline__item--pending::before {
    animation: reservation-accent-pulse 1.8s ease-in-out infinite;
}

@keyframes reservation-accent-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.reservation-timeline--detailed .reservation-timeline__head {
    margin-bottom: 0.32rem;
}

.reservation-timeline--detailed .reservation-timeline__bar {
    margin-bottom: 0.3rem;
}

.reservation-timeline--detailed .reservation-timeline__dates {
    margin-top: 0;
    font-size: 0.78rem;
}

.reservation-timeline--detailed .reservation-timeline__rel {
    margin-top: 0.4rem;
    font-size: 0.74rem;
}

/* 모든 예약 카드 — 1줄 inline 압축 형태. 단계별 일정/택배/취소 폼은 details 펼침. */
.reservation-timeline__item--inline .reservation-timeline__inline-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.reservation-timeline__item--inline .reservation-timeline__no {
    font-size: 0.95rem;
    flex-shrink: 0;
}

.reservation-timeline__item--inline .reservation-timeline__status {
    flex-shrink: 0;
}

.reservation-timeline__inline-date {
    font-size: 0.82rem;
    color: #475569;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.reservation-timeline__item--inline .reservation-timeline__nights {
    flex-shrink: 0;
}

.reservation-timeline__item--inline .reservation-timeline__rel-text {
    flex-shrink: 0;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
}

.reservation-timeline__rel-text--confirmed {
    background: rgba(16, 185, 129, 0.1);
    color: #047857;
}

.reservation-timeline__rel-text--pending {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

.reservation-timeline__rel-text--done {
    background: rgba(59, 130, 246, 0.1);
    color: #1e40af;
}

.reservation-timeline__rel-text--normal {
    background: rgba(15, 23, 42, 0.06);
    color: #475569;
}

.reservation-timeline__item--inline .reservation-timeline__set {
    flex-shrink: 0;
}

.reservation-timeline__item--inline .reservation-timeline__price {
    margin-left: auto;
    font-size: 0.92rem;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

/* 취소 카드만 옅게 */
.reservation-timeline__item--inline.reservation-timeline__item--cancelled {
    background: #fafbfc;
    opacity: 0.72;
}

.reservation-timeline__item--inline.reservation-timeline__item--cancelled:hover {
    opacity: 1;
}

.reservation-timeline__item--inline.reservation-timeline__item--cancelled .reservation-timeline__no {
    font-size: 0.86rem;
    color: #64748b;
}

.reservation-timeline__item--inline.reservation-timeline__item--cancelled .reservation-timeline__inline-date,
.reservation-timeline__item--inline.reservation-timeline__item--cancelled .reservation-timeline__nights,
.reservation-timeline__item--inline.reservation-timeline__item--cancelled .reservation-timeline__set,
.reservation-timeline__item--inline.reservation-timeline__item--cancelled .reservation-timeline__price {
    color: #94a3b8;
    font-size: 0.74rem;
    font-weight: 600;
}

.reservation-timeline__item.is-focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18), 0 4px 14px rgba(15, 23, 42, 0.08);
}

.reservation-timeline__price {
    margin-left: auto;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.reservation-timeline__details {
    margin-top: 0.7rem;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(15, 23, 42, 0.1);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.reservation-timeline__detail-block {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}

.reservation-timeline__detail-label {
    font-size: 0.72rem;
    font-weight: 800;
    color: #475569;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.reservation-timeline__tracking {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: #334155;
}

.reservation-timeline__tracking code {
    padding: 0.16rem 0.45rem;
    background: #f1f5f9;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 5px;
    font-family: ui-monospace, monospace;
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f172a;
}

.reservation-timeline__tracking-url {
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.82rem;
}

.reservation-timeline__tracking-url:hover {
    text-decoration: underline;
}

.reservation-timeline__shiplog {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}

.reservation-timeline__shiplog li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.78rem;
    padding-left: 0.6rem;
    border-left: 2px solid #e2e8f0;
    line-height: 1.45;
}

.reservation-timeline__shiplog-time {
    color: #94a3b8;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 4.5rem;
}

.reservation-timeline__shiplog-step {
    font-weight: 700;
    color: #1e293b;
}

.reservation-timeline__shiplog-note {
    color: #64748b;
}

.reservation-timeline__phases {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.4rem;
}

.reservation-timeline__phases li {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.45rem 0.6rem;
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 100%);
    border: 1px solid rgba(16, 185, 129, 0.18);
    border-radius: 8px;
}

.reservation-timeline__phase-date {
    font-size: 0.74rem;
    color: #047857;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.reservation-timeline__phase-label {
    font-size: 0.78rem;
    color: #134e4a;
    font-weight: 600;
}

.reservation-timeline__detail-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.2rem;
}

.reservation-timeline__rental-link {
    font-size: 0.84rem;
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
}

.reservation-timeline__rental-link:hover {
    text-decoration: underline;
}

.reservation-timeline__cancel-form {
    margin: 0;
    padding: 0;
    margin-left: auto;
}

.reservation-timeline__cancel-btn {
    padding: 0.4rem 0.85rem;
    background: #fff;
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 8px;
    color: #dc2626;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.reservation-timeline__cancel-btn:hover {
    background: #fef2f2;
    border-color: #dc2626;
}

/* chassis 컴팩트 */
.app-device .loginmy-res-hero {
    padding: 1rem 1.05rem;
    gap: 0.8rem;
}

.app-device .loginmy-res-hero__icon {
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
}

.app-device .loginmy-res-hero__title {
    font-size: 1rem;
}

.app-device .loginmy-res-hero__cta {
    padding: 0.5rem 0.9rem;
    font-size: 0.84rem;
}

.app-device .reservation-timeline__phases {
    grid-template-columns: 1fr 1fr;
}

.app-device .reservation-timeline__details {
    gap: 0.5rem;
    padding-top: 0.6rem;
}


/* —— PROJECT 고객 위젯 —— */
.project-hero-thumb {
    margin: 0 0 clamp(0.75rem, 2vw, 1.1rem);
}

.project-hero-thumb img {
    display: block;
    width: 100%;
    max-width: min(960px, 100%);
    height: auto;
    border-radius: var(--radius-md, 12px);
}

.project-gallery-grid {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.65rem, 2vw, 1rem);
}

.customer-community--mobile .project-gallery-grid {
    grid-template-columns: 1fr;
}

@media (min-width: 480px) and (max-width: 900px) {
    .customer-community--mobile .project-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.project-gallery-cell {
    margin: 0;
    padding: 0;
}

.project-gallery-card {
    position: relative;
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--line);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    aspect-ratio: 3 / 4;
    min-height: 10.5rem;
}

.project-gallery-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(41, 98, 184, 0.35);
    cursor: pointer;
}

.project-gallery-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.project-gallery-card-media {
    position: absolute;
    inset: 0;
    background: linear-gradient(155deg, #1a3d6e 0%, #2962b8 42%, #6fa8e8 100%);
}

.project-gallery-card-media .project-gallery-card-thumb {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.project-gallery-card--tone-1 .project-gallery-card-media {
    background: linear-gradient(165deg, #243b5c 0%, #3d6fb5 40%, #89b5e8 100%);
}

.project-gallery-card--tone-2 .project-gallery-card-media {
    background: linear-gradient(150deg, #1e3350 0%, #2c5f8a 45%, #5c9fd4 100%);
}

.project-gallery-card--tone-3 .project-gallery-card-media {
    background: linear-gradient(170deg, #2a1f48 0%, #3d4a8f 38%, #5b82c4 100%);
}

.project-gallery-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0.85rem 0.95rem;
    background: linear-gradient(180deg, transparent 0%, rgba(15, 28, 48, 0.05) 35%, rgba(15, 28, 48, 0.72) 100%);
    transition: background 0.2s ease;
}

.project-gallery-card:hover .project-gallery-card-overlay {
    background: linear-gradient(180deg, transparent 0%, rgba(15, 28, 48, 0.12) 30%, rgba(15, 28, 48, 0.82) 100%);
}

.project-gallery-card-title {
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.35;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.project-gallery-card-meta {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.45;
    opacity: 0.92;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.project-widget-detail .hero > p:last-of-type:has(> a[href="/project"]) {
    display: none;
}

.project-widget-detail {
    margin-top: 0.15rem;
}

.project-widget-detail .hero {
    margin-bottom: 0.85rem;
}

.project-widget-detail .project-piece {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(20, 24, 31, 0.08);
    color: rgba(20, 24, 31, 0.88);
    font-size: 0.92rem;
    line-height: 1.65;
}

.project-widget-detail .project-piece h2 {
    margin: 0 0 0.55rem;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.project-widget-detail .project-piece ul {
    margin: 0.4rem 0 0.75rem 1.1rem;
    padding: 0;
}

.project-widget-detail .project-piece li {
    margin-bottom: 0.35rem;
}

.project-widget-detail .project-piece p {
    margin: 0.5rem 0 0;
}

.project-widget-detail-actions {
    margin-top: 1rem;
}

/* PROJECT: PC 사이트 모드 — 풀폭 메인·상단 네비와 맞는 카드형 갤러리 */
.main.main--pc-site .project-widget.customer-community--pc.customer-community--framed {
    width: min(100%, var(--pc-page-max));
    max-width: var(--pc-page-max);
    margin-inline: auto;
    padding: clamp(1.15rem, 2.2vw, 1.75rem) clamp(1.15rem, 3vw, 2.1rem) clamp(1.6rem, 2.6vw, 2.35rem);
    border-radius: var(--radius-lg);
}

.main.main--pc-site .project-widget .customer-community-intro {
    margin-bottom: 1.35rem;
    padding-bottom: 1.05rem;
    border-bottom: 1px solid rgba(20, 24, 31, 0.08);
}

.main.main--pc-site .project-widget .customer-community-h1 {
    font-size: clamp(1.42rem, 2.1vw, 1.88rem);
    letter-spacing: -0.035em;
}

.main.main--pc-site .project-widget .customer-community-lead {
    max-width: 44rem;
    font-size: 0.96rem;
    line-height: 1.62;
}

.main.main--pc-site .project-widget .project-gallery-grid {
    margin-top: 0.2rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.85rem, 1.8vw, 1.25rem) clamp(1rem, 2vw, 1.35rem);
}

.main.main--pc-site .project-widget .project-gallery-card {
    aspect-ratio: 3 / 4;
    min-height: 11.5rem;
    border-radius: var(--radius-md);
}

.main.main--pc-site .project-widget-detail {
    max-width: 50rem;
    margin-inline: auto;
    padding: 0 clamp(0.25rem, 1vw, 0.5rem);
}

.main.main--pc-site .project-widget-detail .hero {
    margin-bottom: 1.1rem;
}

.main.main--pc-site .project-widget-detail-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem 0.85rem;
    margin-top: 1.35rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(20, 24, 31, 0.08);
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.55rem;
}

.admin-grid-wide {
    grid-template-columns: 3fr 2fr;
}

.admin-kpi {
    padding: 0.65rem 0.8rem;
}

.kpi-value {
    margin-top: 0.35rem;
    font-size: 1.4rem;
    color: #274b70;
    font-weight: 700;
    line-height: 1.2;
}

.admin-panel {
    padding: 0.65rem 0.8rem;
}

.admin-panel h2,
.admin-kpi h2 {
    margin: 0;
    font-size: 0.95rem;
}

.admin-filter {
    margin-top: 0.55rem;
    padding: 0.65rem 0.8rem;
}

.admin-filter-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0.45rem;
    align-items: end;
}

.admin-filter label {
    display: grid;
    gap: 0.2rem;
    font-size: 0.75rem;
    color: #5c7590;
}

.admin-filter select {
    width: 100%;
    border: 1px solid #cadced;
    background: #ffffff;
    color: #243b54;
    border-radius: 8px;
    min-height: 2rem;
    padding: 0.25rem 0.45rem;
}

.admin-btn {
    border: 1px solid #5c84ea;
    background: #5c84ea;
    color: #fff;
    border-radius: 10px;
    padding: 0.46rem 0.82rem;
    min-height: 2.45rem;
    font-size: 0.84rem;
    font-weight: 700;
    box-shadow: 0 3px 8px rgba(65, 94, 190, 0.22);
}

.admin-btn:hover,
.focus-inline-form button:hover,
.focus-primary-link:hover {
    background: #4f73cd;
    border-color: #4f73cd;
    box-shadow: 0 4px 10px rgba(55, 79, 152, 0.24);
}

.admin-btn--danger {
    background: #dc2626;
    border-color: #dc2626;
    box-shadow: 0 6px 14px rgba(220, 38, 38, 0.25);
}

.admin-btn--danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    box-shadow: 0 8px 18px rgba(185, 28, 28, 0.3);
}

.admin-btn--soft {
    min-height: 2.1rem;
    padding: 0.33rem 0.72rem;
    border-radius: 10px;
    border-color: #c7d6eb;
    background: #eef4ff;
    color: #355179;
    box-shadow: none;
    font-weight: 700;
}

.admin-btn--soft:hover,
.admin-btn--soft:focus-visible {
    background: #dfeaff;
    border-color: #b4c8e7;
    color: #1f3f67;
    box-shadow: none;
}

.admin-options-form {
    margin-top: 0.75rem;
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(96px, 132px) minmax(140px, 220px) auto;
    gap: 0.42rem;
    align-items: end;
    justify-content: start;
    width: fit-content;
    max-width: 100%;
}

.admin-options-form__field {
    margin: 0;
    display: grid;
    gap: 0.28rem;
    font-size: 0.76rem;
    color: #556b86;
}

.admin-options-form__field input {
    min-height: 1.95rem;
    border: 1px solid #d2ddea;
    border-radius: 8px;
    padding: 0.26rem 0.48rem;
    background: #fff;
}

.admin-options-form__field input:focus {
    border-color: #9bb7e0;
    outline: 2px solid #d8e5fb;
    outline-offset: 1px;
}

.admin-options-form__submit {
    min-height: 1.98rem;
    padding: 0.24rem 0.68rem;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(75, 105, 255, 0.14);
}

.admin-options-table {
    margin-top: 0.95rem;
}

.admin-options-table__name {
    font-weight: 600;
    color: #26384f;
}

.admin-options-table__price {
    color: #3d5677;
    white-space: nowrap;
}

.admin-options-table__img {
    width: 3.25rem;
    vertical-align: middle;
}

.admin-options-table__thumb {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #dce8f5;
    background: #f8fbff;
}

.admin-options-table__noimg {
    display: inline-block;
    color: #94a3b8;
    font-size: 0.85rem;
}

.admin-options-table__actions {
    white-space: nowrap;
}

.admin-options-img-form {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.28rem;
    margin-right: 0.35rem;
    vertical-align: middle;
}

.admin-options-img-form__file {
    max-width: 11rem;
    font-size: 0.72rem;
}

.admin-options-img-form__btn {
    padding: 0.18rem 0.45rem;
    font-size: 0.72rem;
    min-height: 1.75rem;
}

.admin-sep {
    margin: 0.8rem 0 0.7rem;
    border: 0;
    border-top: 1px solid #e9eef5;
}

.admin-mini-title {
    margin: 0 0 0.32rem;
    font-size: 0.9rem;
    color: #1e293b;
}

.admin-badges {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.17rem 0.55rem;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
    border: 1px solid transparent;
}

.status-badge.ok {
    background: #e8f8ef;
    border-color: #8cc9a2;
    color: #2f7b4c;
}

.status-badge.warn {
    background: #fff5e6;
    border-color: #efc27a;
    color: #9a6a20;
}

.status-badge.danger {
    background: #ffecef;
    border-color: #e8a0ad;
    color: #9f3449;
}

.status-badge.info {
    background: #e8f2ff;
    border-color: #b6d4ff;
    color: #1e4db7;
}

.status-badge.neutral {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
}

.status-badge.accent {
    background: #eef4ff;
    border-color: #a5bbf5;
    color: #3949b6;
}

.status-badge.mini {
    font-size: 0.68rem;
    padding: 0.1rem 0.45rem;
}

.status-badge.inuse {
    background: rgba(121, 162, 255, 0.2);
    border-color: rgba(121, 162, 255, 0.5);
    color: #c9dbff;
}

.status-badge.repair {
    background: rgba(188, 137, 255, 0.18);
    border-color: rgba(188, 137, 255, 0.5);
    color: #e6d3ff;
}

.status-badge.shipping {
    background: rgba(102, 208, 255, 0.18);
    border-color: rgba(102, 208, 255, 0.45);
    color: #c5f0ff;
}

.set-timeline {
    margin-top: 0.45rem;
    display: grid;
    gap: 0.4rem;
}

.timeline-row {
    display: grid;
    grid-template-columns: 4.2rem 1fr;
    gap: 0.45rem;
    align-items: center;
}

.set-id {
    font-size: 0.73rem;
    color: #b9c9dc;
    font-weight: 700;
}

.timeline-track {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.block {
    border-radius: 6px;
    padding: 0.12rem 0.42rem;
    font-size: 0.69rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #e9f1fb;
}

.block.prep { background: rgba(86, 133, 189, 0.3); }
.block.shipping { background: rgba(76, 162, 208, 0.3); }
.block.inuse { background: rgba(110, 124, 255, 0.32); }
.block.return { background: rgba(234, 170, 75, 0.26); }
.block.repair { background: rgba(184, 116, 217, 0.28); }
.block.available { background: rgba(68, 199, 130, 0.25); }

.notify-list {
    margin-top: 0.6rem;
    display: grid;
    gap: 0.25rem;
}

.notify-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.3rem 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.78rem;
}

.kanban-board {
    margin-top: 0.55rem;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.45rem;
}

.kanban-col {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    min-height: 13rem;
    padding: 0.4rem;
}

.kanban-col h3 {
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    color: #cbdcf0;
}

.kanban-dropzone {
    min-height: 11rem;
    display: grid;
    gap: 0.28rem;
}

.kanban-card {
    border: 1px solid rgba(134, 195, 255, 0.45);
    border-radius: 8px;
    padding: 0.3rem 0.4rem;
    background: rgba(69, 125, 183, 0.28);
    font-size: 0.76rem;
    font-weight: 700;
}

.kanban-card.dragging {
    opacity: 0.55;
}

.review-list {
    display: grid;
    gap: 0.75rem;
}

.review-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.65rem;
    background: rgba(255, 255, 255, 0.03);
}

.review-item h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
}

.comment-list {
    margin-block: 0.45rem;
    display: grid;
    gap: 0.25rem;
}

.design-showcase-grid {
    margin-top: 0.6rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}

@media (min-width: 980px) {
    .design-showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.design-case {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 0.7rem;
}

.design-case header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.design-case header h3 {
    margin: 0;
    font-size: 0.95rem;
}

.design-case header span {
    font-size: 0.72rem;
    color: #b8cae0;
}

.design-case-a {
    background: linear-gradient(140deg, rgba(48, 96, 145, 0.26), rgba(20, 37, 58, 0.35));
}

.design-case-b {
    background: linear-gradient(140deg, rgba(91, 61, 133, 0.22), rgba(17, 27, 44, 0.34));
}

.design-hero {
    margin-top: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    padding: 0.6rem;
}

.design-hero strong {
    display: block;
    font-size: 0.9rem;
}

.design-hero p {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: #c3d3e6;
}

.design-list {
    margin-top: 0.55rem;
    display: grid;
    gap: 0.28rem;
    font-size: 0.8rem;
}

.design-chips {
    margin-top: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.design-chips span {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 0.16rem 0.5rem;
    font-size: 0.74rem;
    background: rgba(255, 255, 255, 0.08);
}

.design-case.compact .design-mini-table {
    margin-top: 0.55rem;
    display: grid;
    gap: 0.25rem;
}

.design-mini-table div {
    display: flex;
    justify-content: space-between;
    gap: 0.45rem;
    font-size: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.3rem 0.45rem;
}

.design-mini-table span {
    color: #c1d4e8;
}

.design-bars {
    margin-top: 0.6rem;
    display: grid;
    gap: 0.35rem;
}

.design-bars div {
    display: grid;
    grid-template-columns: 8rem 1fr;
    align-items: center;
    gap: 0.45rem;
}

.design-bars label {
    font-size: 0.78rem;
    color: #c4d5ea;
}

.design-bars em {
    display: block;
    height: 0.42rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #85bcff, #6be4d7);
}

.admin-table {
    width: 100%;
    margin-top: 0.5rem;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 0.34rem 0.25rem;
    border-bottom: 1px solid #d9e6f4;
}

.admin-table th {
    color: #4f6b88;
    font-weight: 600;
}

.footer-legal-links {
    margin: 0.5rem 0 0;
    font-size: 0.88rem;
}

.footer-legal-links a {
    color: var(--accent-dark);
    font-weight: 600;
    text-decoration: none;
    padding: 0.12rem 0.28rem;
    margin: 0 -0.12rem;
    border-radius: 6px;
    transition: background 0.14s ease, color 0.14s ease;
}

.footer-legal-links a:hover {
    text-decoration: none;
    background: rgba(41, 84, 230, 0.08);
    color: var(--accent);
}

.footer-business-info {
    margin: 0.65rem 0 0;
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.45;
}

.footer-business-info--always {
    margin-top: 0.8rem;
    padding-top: 0.55rem;
    border-top: 1px dashed #d5deea;
}

.footer-business-info__title {
    display: inline-block;
    margin-bottom: 0.25rem;
    color: #334155;
}

.footer-business-info > summary {
    cursor: pointer;
    font-weight: 700;
    color: #334155;
    user-select: none;
}

.footer-business-info__body {
    margin-top: 0.35rem;
}

.footer-business-info__body .footer-biz-note {
    margin: 0 0 0.4rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #64748b;
}

.footer-business-info__body .footer-biz-line {
    margin: 0 0 0.35rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #475569;
    word-break: keep-all;
}

.footer-business-info__body .footer-biz-line:last-child {
    margin-bottom: 0;
}

.footer-legal-links--inline {
    margin-top: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.footer-legal-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    border: 0;
    background: transparent;
    color: #475569;
    border-radius: 10px;
    padding: 0.2rem 0.28rem;
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.16s ease, background 0.16s ease;
}

a.footer-legal-open-btn {
    color: #475569;
}

.footer-legal-open-btn__title {
    font-weight: 700;
}

.footer-legal-open-btn__hint {
    font-size: 0.72rem;
    color: #64748b;
    opacity: 0;
    transform: translateY(1px);
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.footer-legal-open-btn:hover,
.footer-legal-open-btn:focus-visible {
    background: rgba(41, 84, 230, 0.08);
    color: #1d4ed8;
    outline: none;
}

.legal-page-panel {
    margin-top: 1rem;
}

.legal-page-body {
    color: #1f2937;
    line-height: 1.7;
    font-size: 0.96rem;
}

.legal-page-body h3,
.legal-page-body h4 {
    color: #0f172a;
}

.footer-legal-open-btn:hover .footer-legal-open-btn__hint,
.footer-legal-open-btn:focus-visible .footer-legal-open-btn__hint {
    opacity: 1;
    transform: translateY(0);
}

.site-footer {
    margin-top: auto;
    padding: var(--space);
    border-top: 1px solid #d8e6f4;
    color: var(--muted);
    font-size: 0.875rem;
}

.site-footer p {
    margin: 0;
}

/* Mobile nav */
@media (max-width: 639px) {
    /* Pin tabbar to viewport bottom on mobile so position is rock-solid
       regardless of page (mobile-preview-page vs rental/community/etc.) */
    .app-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
    }

    /* Reserve space at the bottom of scrollable content so the tabbar
       doesn't cover the last items. */
    .app-content,
    body.mobile-preview-page .app-content {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    .app-stage {
        min-height: 100vh;
        padding-inline: 0;
        padding-block: 0;
    }

    .app-stage.container {
        width: 100%;
        margin-inline: 0;
        padding-inline: 0;
    }

    .app-device,
    body.mobile-preview-page .app-device {
        width: 100%;
        max-width: none;
        max-height: 100vh;
        height: 100vh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
    }

    .app-content,
    body.mobile-preview-page .app-content {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        overflow: auto;
    }

    .admin-shell {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .admin-sidebar {
        order: 2;
        position: static;
    }

    .admin-main-wrap {
        order: 1;
    }

    .admin-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-options-form {
        grid-template-columns: 1fr;
    }

    .admin-toolbar-search input[type="search"] {
        width: 100%;
    }

    body {
        overflow-x: hidden;
        scrollbar-width: none;
    }

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

    .site-header {
        top: 0;
    }

    .mobile-preview-stage {
        min-height: auto;
    }

    .mobile-preview-device {
        width: 100%;
        border-radius: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    .mobile-preview-screen {
        max-height: none;
        border-radius: 0;
        overflow: visible;
    }

    .nav-toggle {
        display: inline-block;
    }

    .site-nav {
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }

    .site-nav.is-open {
        max-height: 12rem;
    }

    .site-nav ul {
        flex-direction: column;
        padding-block: 0.75rem;
    }

    .admin-grid,
    .admin-grid-wide {
        grid-template-columns: 1fr;
    }

    .admin-filter-row {
        grid-template-columns: 1fr;
    }

    .ops-form.inline {
        grid-template-columns: 1fr;
    }

    .kanban-board {
        grid-template-columns: 1fr;
    }
}

/* —— 고객 커뮤니티(PC / 모바일 앱 셀 분리) —— */

.customer-community {
    box-sizing: border-box;
}

.customer-community--mobile {
    max-width: 100%;
}

.customer-community--pc {
    padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 4vw, 3rem) 3rem;
    max-width: var(--pc-page-max);
    margin-inline: auto;
}

.customer-community--framed {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    background: #fff;
    padding: clamp(0.9rem, 2vw, 1.2rem);
}

.customer-community-intro--m .customer-community-h1 {
    font-size: 1.12rem;
}

.customer-community-intro,
.customer-community-intro--m {
    margin-bottom: 1rem;
}

.customer-community-h1 {
    margin: 0 0 0.35rem;
    font-size: clamp(1.25rem, 2.8vw, 1.65rem);
    font-weight: 800;
    color: #183149;
}

.customer-community-lead {
    margin: 0;
    font-size: 0.93rem;
    font-weight: 500;
    line-height: 1.65;
    color: #3f5973;
}

.customer-community-intro--m .customer-community-lead {
    font-size: 0.8rem;
}

.customer-community-lead a {
    color: #225fb8;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    padding: 0.06rem 0.12rem;
    margin: 0 -0.06rem;
    transition: background 0.14s ease, color 0.14s ease;
}

.customer-community-lead a:hover {
    text-decoration: none;
    background: rgba(34, 95, 184, 0.1);
    color: #153e88;
}

.customer-community-login-hint a {
    font-weight: 700;
    color: #225fb8;
    text-decoration: none;
    padding: 0.06rem 0.22rem;
    border-radius: 6px;
    transition: background 0.14s ease, color 0.14s ease;
}

.customer-community-login-hint a:hover {
    text-decoration: none;
    background: rgba(34, 95, 184, 0.12);
    color: #153e88;
}

.customer-community-chipbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 1.25rem;
}

/* ============================================================
 * 커뮤니티 필터 영역 — 라벨 + 칩 그룹화 + 게시판 세그먼트 + 정렬 toolbar
 * 같은 모양 17개 칩 나열의 시각 노이즈를 위계 있는 디자인으로 대체.
 * ============================================================ */
.customer-community-filter-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    padding: 0.7rem 0.95rem;
    margin-bottom: 0.55rem;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.05);
    border-radius: 12px;
}

.customer-community-filter-row .customer-community-chipbar {
    margin: 0;
    flex: 1 1 auto;
    gap: 0.35rem;
}

.customer-community-filter-label {
    flex-shrink: 0;
    padding: 0.18rem 0.55rem;
    background: #fff;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 6px;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

/* 게시판 세그먼트 컨트롤 — 붙여진 탭 형태로 일반/갤러리 분기 강조 */
.customer-community-board-segment {
    display: inline-flex;
    margin-bottom: 0.55rem;
    padding: 0.22rem;
    background: #f1f5f9;
    border-radius: 10px;
    gap: 0.15rem;
}

.customer-community-board-segment__item {
    padding: 0.42rem 1rem;
    font-size: 0.84rem;
    font-weight: 700;
    color: #64748b;
    text-decoration: none;
    border-radius: 7px;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    letter-spacing: -0.01em;
}

.customer-community-board-segment__item:hover {
    color: #0f172a;
}

.customer-community-board-segment__item.is-active {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04);
}

/* 정렬 toolbar — 작은 텍스트 링크 + 활성만 강조. 칩보다 가벼운 위계. */
.customer-community-sort-bar {
    display: flex;
    align-items: center;
    gap: 0.15rem 0.55rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 0.4rem 0.6rem 0.4rem 0;
}

.customer-community-sort-bar .customer-community-filter-label {
    margin-right: 0.3rem;
}

.customer-community-sort-link {
    padding: 0.28rem 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #94a3b8;
    text-decoration: none;
    border-radius: 5px;
    transition: color 0.15s ease, background 0.15s ease;
    line-height: 1.3;
}

.customer-community-sort-link:hover {
    color: #475569;
    background: rgba(15, 23, 42, 0.04);
}

.customer-community-sort-link.is-active {
    color: #0f172a;
    background: rgba(15, 23, 42, 0.06);
    font-weight: 800;
}

.customer-community-sort-link__arrow {
    display: inline-block;
    margin-left: 0.1rem;
    color: #2563eb;
    font-weight: 800;
}

/* ============================================================
 * 게시판 관리자 인라인 액션 — 리스트 카드 우측 상단에 hover 시 표시.
 * 카드 클릭(상세 진입) 영역을 침범하지 않도록 absolute, 비활성 시 투명도 0.
 * ============================================================ */
.customer-community-card {
    position: relative;
}

.board-admin-actions {
    position: absolute;
    top: 0.5rem;
    right: 0.55rem;
    z-index: 5;
    display: flex;
    gap: 0.3rem;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    transform: translateY(-2px);
    pointer-events: none;
}

.customer-community-card:hover .board-admin-actions,
.customer-community-card:focus-within .board-admin-actions,
.board-admin-actions:focus-within {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.board-admin-actions__delete-form {
    margin: 0;
    padding: 0;
    display: inline-block;
}

.board-admin-actions__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    padding: 0.32rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    color: #475569;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    line-height: 1.2;
}

.board-admin-actions__btn:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.2);
}

.board-admin-actions__btn:active {
    transform: scale(0.97);
}

.board-admin-actions__btn--delete {
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.22);
}

.board-admin-actions__btn--delete:hover {
    background: #fef2f2;
    color: #991b1b;
    border-color: rgba(220, 38, 38, 0.4);
}

.board-admin-actions__label {
    font-weight: 700;
}

/* 모바일 환경 — hover 가 없으므로 항상 표시하되 좀 더 작게. */
@media (hover: none) {
    .board-admin-actions {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
    .board-admin-actions__btn {
        padding: 0.24rem 0.45rem;
        font-size: 0.7rem;
    }
}

@media (max-width: 640px) {
    .customer-community-filter-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.4rem;
    }
    .customer-community-board-segment {
        align-self: stretch;
        justify-content: stretch;
    }
    .customer-community-board-segment__item {
        flex: 1 1 0;
        text-align: center;
    }
}

.customer-community-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.28rem 0.72rem;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.customer-community-chip--topic {
    background: var(--accent-soft);
    color: var(--accent-ink);
}

.customer-community--mobile .customer-community-chip--topic {
    background: rgba(41, 98, 184, 0.12);
}

.customer-community-chip--filter {
    background: #fff;
    color: #4a6988;
    border: 1px solid var(--line);
}

.customer-community-chip--filter:hover {
    border-color: #8eb4e8;
    background: #f8fafc;
    transform: none;
    filter: none;
    box-shadow: none;
}

.customer-community-chip--filter.is-active {
    background: var(--accent-soft);
    color: var(--accent-ink);
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(75, 105, 255, 0.18);
}

.customer-community-feed {
    display: grid;
    gap: 0.75rem;
}

.customer-community-feed--cols {
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
}

/* 커뮤니티 목록 — 리스트(한 줄·전체 너비) */
.customer-community-feed--list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.customer-community-card--list.customer-community-card--sns {
    border-radius: 12px;
}

.customer-community-card--list.customer-community-card--sns:hover {
    transform: none;
}

.customer-community-list-row {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.75rem 0.9rem;
}

.customer-community--pc .customer-community-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(11rem, auto);
    align-items: center;
    gap: 0.85rem 1.25rem;
    padding: 0.85rem 1rem;
}

.customer-community-card--list .customer-community-list-link.customer-community-card-link {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.55rem 0.75rem;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    height: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    text-decoration: none;
    color: inherit;
}

.customer-community-card--list .customer-community-list-link.customer-community-card-link:hover {
    border: none;
    box-shadow: none;
    transform: none;
}

.customer-community-card--list .customer-community-list-link:hover .customer-community-list-title {
    color: #225fb8;
}

.customer-community-list-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}

.customer-community-list-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.38;
    color: #17304a;
    transition: color 0.14s ease;
}

.customer-community-list-excerpt {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #54708c;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.customer-community-list-link .customer-community-chip--topic {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.customer-community-list-side {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem 0.65rem;
    width: 100%;
    padding-top: 0.15rem;
    border-top: 1px solid rgba(96, 120, 150, 0.12);
}

.customer-community--pc .customer-community-list-side {
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    width: auto;
    padding-top: 0;
    border-top: none;
    gap: 0.35rem;
}

.customer-community-meta--list {
    margin: 0;
    font-size: 0.72rem;
    color: #607a94;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
}

.customer-community--pc .customer-community-meta--list {
    text-align: right;
}

.customer-community-chipbar--board {
    margin: 0.15rem 0 0.5rem;
}

.customer-community-chip--board {
    font-size: 0.62rem;
    font-weight: 800;
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.32);
    color: #5b21b6;
}

.customer-community-list-thumb-wrap {
    display: block;
    flex-shrink: 0;
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(20, 24, 31, 0.08);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.customer-community--pc .customer-community-list-thumb-wrap {
    width: 5.25rem;
    height: 5.25rem;
}

.customer-community-list-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.customer-community-card--with-thumb .customer-community-list-row {
    display: grid;
    grid-template-columns: 4.75rem 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 0.75rem;
}

.customer-community-card--with-thumb .customer-community-list-thumb-wrap {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.customer-community-card--with-thumb .customer-community-list-link {
    grid-column: 2;
    grid-row: 1;
}

.customer-community-card--with-thumb .customer-community-list-side {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
}

.customer-community--pc .customer-community-card--with-thumb .customer-community-list-row {
    grid-template-columns: 5.25rem minmax(0, 1fr) minmax(11rem, auto);
    grid-template-rows: auto;
    align-items: center;
}

.customer-community--pc .customer-community-card--with-thumb .customer-community-list-thumb-wrap {
    grid-row: 1;
    grid-column: 1;
}

.customer-community--pc .customer-community-card--with-thumb .customer-community-list-link {
    grid-column: 2;
    grid-row: 1;
}

.customer-community--pc .customer-community-card--with-thumb .customer-community-list-side {
    grid-column: 3;
    grid-row: 1;
    width: auto;
}

/* 갤러리 게시판 전용 목록(썸네일 그리드) */
.customer-community-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.customer-community--pc .customer-community-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
    gap: 0.85rem;
}

.customer-community-gallery-cell {
    margin: 0;
    padding: 0;
    list-style: none;
}

.customer-community-gallery-card {
    position: relative;
    margin: 0;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(20, 24, 31, 0.1);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    background: #0f172a;
}

.customer-community-gallery-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    min-height: 10.5rem;
}

.customer-community-gallery-card-media {
    display: block;
    aspect-ratio: 1;
    background: linear-gradient(145deg, #1e293b, #334155);
}

.customer-community-gallery-card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.customer-community-gallery-card-ph {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 10rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.35), rgba(14, 165, 233, 0.25));
}

.customer-community-gallery-card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.55rem 0.65rem 0.65rem;
    background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.88));
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.customer-community-gallery-card-kicker {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.88);
}

.customer-community-gallery-card-title {
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.3;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.customer-community-gallery-card-meta {
    font-size: 0.62rem;
    color: rgba(226, 232, 240, 0.82);
    line-height: 1.35;
}

.customer-community-gallery-like {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    margin: 0;
}

.customer-community-gallery-like .cc-react-mini {
    background: rgba(15, 23, 42, 0.45);
    border-radius: 999px;
    padding: 0.2rem 0.35rem;
}

.customer-community-card {
    margin: 0;
}

.customer-community-card-link {
    display: block;
    height: 100%;
    padding: 1rem 1.05rem;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.customer-community-card-link:hover {
    border-color: rgba(75, 105, 255, 0.38);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.customer-community--mobile .customer-community-card-link {
    background: rgba(255, 255, 255, 0.97);
}

.customer-community-card-title {
    margin: 0.45rem 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.42;
    color: #17304a;
}

.customer-community-card-excerpt {
    margin: 0 0 0.55rem;
    font-size: 0.82rem;
    line-height: 1.52;
    color: #54708c;
}

.customer-community-meta {
    margin: 0;
    font-size: 0.72rem;
    color: #607a94;
    font-weight: 500;
}

.customer-community-tailnote {
    margin-top: 1.25rem;
    font-size: 0.78rem;
    color: #6c849c;
}

.muted-note-like {
    opacity: 0.9;
}

.customer-community-bc {
    font-size: 0.82rem;
    margin-bottom: 0.85rem;
    color: #5f7892;
}

.customer-community-bc a {
    color: #245cb3;
    font-weight: 600;
    text-decoration: none;
    padding: 0.06rem 0.22rem;
    margin: 0 -0.06rem;
    border-radius: 6px;
    transition: background 0.14s ease, color 0.14s ease;
}

.customer-community-bc a:hover {
    text-decoration: none;
    background: rgba(36, 92, 179, 0.1);
    color: #153e88;
}

.customer-community-detail {
    border-radius: 16px;
    border: 1px solid rgba(90, 120, 160, 0.16);
    background: #fff;
    padding: clamp(1.1rem, 2.8vw, 1.85rem);
    box-shadow: 0 12px 32px rgba(24, 48, 80, 0.07);
}

.customer-community-detail-head {
    margin-bottom: 1.1rem;
}

.customer-community-detail-title {
    margin: 0.6rem 0 0;
    font-size: clamp(1.15rem, 2.8vw, 1.65rem);
    font-weight: 800;
    line-height: 1.4;
    color: #162a40;
}

.customer-community-meta--detail {
    font-size: 0.8rem;
    color: #6f8599;
}

.customer-community-body.prose-like {
    font-size: 0.93rem;
    line-height: 1.75;
    color: #294056;
}

.customer-community-comments {
    margin-top: 1.65rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(96, 120, 150, 0.15);
}

.customer-community-comments-title {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: #1b3148;
}

.customer-community-comments-title span {
    font-weight: 700;
    color: #4b6fd4;
}

.customer-community-comment-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.75rem;
}

.customer-community-comment {
    padding: 0.75rem 0.82rem;
    border-radius: 10px;
    background: rgba(245, 248, 255, 0.95);
    border: 1px solid rgba(100, 130, 180, 0.12);
}

.customer-community-comment-meta {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    color: #5c7590;
}

.customer-community-comment-body {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: #384e63;
}

/* 커뮤니티 SNS형 — 반응 바·토스트·댓글 카드 */
.customer-community-engagement {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-top: 1.35rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(250, 252, 255, 0.98) 0%, rgba(241, 246, 255, 0.92) 100%);
    border: 1px solid rgba(100, 130, 200, 0.14);
    box-shadow: 0 4px 18px rgba(25, 45, 85, 0.06);
}

.customer-community-engagement-primary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.customer-community-engagement-share {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.cc-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 0.78rem;
    border-radius: 999px;
    border: 1px solid rgba(75, 105, 200, 0.22);
    background: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    color: #2a4a7a;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.cc-share-btn:hover {
    background: #f4f7ff;
    border-color: rgba(63, 97, 255, 0.45);
    box-shadow: 0 2px 10px rgba(63, 97, 255, 0.12);
    transform: translateY(-1px);
}

.cc-share-btn__icon {
    display: flex;
    color: #4b6fd4;
}

.cc-share-btn--line {
    border-color: rgba(20, 24, 31, 0.1);
    color: #384e63;
}

.cc-share-btn--line .cc-share-btn__icon {
    color: #607a94;
}

.cc-like-form {
    margin: 0;
    display: inline;
}

.cc-like-form--inline {
    display: inline-flex;
}

.cc-react-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.48rem 0.95rem 0.48rem 0.72rem;
    border-radius: 999px;
    border: 1px solid rgba(120, 140, 180, 0.2);
    background: #fff;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    color: #4a5f78;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.cc-react-pill:hover {
    border-color: rgba(232, 72, 109, 0.35);
    background: #fff8fa;
}

.cc-react-pill--readonly {
    cursor: default;
    opacity: 0.92;
}

.cc-react-pill--readonly:hover {
    border-color: rgba(120, 140, 180, 0.2);
    background: #fff;
    transform: none;
}

.cc-react-pill--heart.is-active {
    background: linear-gradient(125deg, #ff5c8d 0%, #e8486d 48%, #c43a8e 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 20px rgba(232, 72, 109, 0.35);
}

.cc-react-pill--heart.is-active:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
}

.cc-react-pill__icon,
.cc-react-mini__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-react-pill--heart:not(.is-active) .cc-heart-fill,
.cc-react-mini--heart:not(.is-active) .cc-heart-fill {
    opacity: 0;
}

.cc-react-pill--heart.is-active .cc-heart-stroke,
.cc-react-mini--heart.is-active .cc-heart-stroke {
    opacity: 0;
}

.cc-react-pill--heart.is-active .cc-heart-fill,
.cc-react-mini--heart.is-active .cc-heart-fill {
    opacity: 1;
}

.cc-react-pill__count {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.cc-react-pill__label {
    font-weight: 800;
}

.cc-react-mini {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.22rem 0.45rem 0.22rem 0.35rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.65);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    color: #5c6f86;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.cc-react-mini:hover {
    background: rgba(255, 240, 245, 0.95);
    border-color: rgba(232, 72, 109, 0.2);
}

.cc-react-mini--readonly {
    cursor: default;
    background: transparent;
}

.cc-react-mini--readonly:hover {
    background: transparent;
    border-color: transparent;
}

.cc-react-mini--heart.is-active {
    background: linear-gradient(125deg, rgba(255, 92, 141, 0.15) 0%, rgba(232, 72, 109, 0.18) 100%);
    border-color: rgba(232, 72, 109, 0.28);
    color: #c42d5c;
}

.cc-react-mini__count {
    font-variant-numeric: tabular-nums;
    min-width: 1.1em;
}

.customer-community-comment-list--sns {
    gap: 0.85rem;
}

.customer-community-comment--sns {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem 0.85rem;
    padding: 0.95rem 1rem;
    border-radius: 14px;
    background: linear-gradient(165deg, #fff 0%, #f8faff 100%);
    border: 1px solid rgba(110, 140, 190, 0.14);
    box-shadow: 0 2px 12px rgba(20, 40, 70, 0.04);
}

.customer-community-comment-avatar {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(145deg, #5b7cff 0%, #3f61ff 55%, #2a4acb 100%);
    box-shadow: 0 3px 10px rgba(63, 97, 255, 0.28);
    flex-shrink: 0;
}

.customer-community-comment-main {
    min-width: 0;
}

.customer-community-comment-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.28rem 0.45rem;
    margin-bottom: 0.35rem;
}

.customer-community-comment-name {
    font-size: 0.82rem;
    font-weight: 800;
    color: #1b3148;
}

.customer-community-comment-time {
    font-size: 0.72rem;
    color: #7a8fa6;
    font-weight: 500;
}

.customer-community-comment-like {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 0.05rem;
}

.customer-community-comment-like::before {
    content: '·';
    margin-right: 0.32rem;
    color: #c5d0e0;
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 1;
}

.customer-community-comment--sns .customer-community-comment-body {
    font-size: 0.86rem;
    line-height: 1.62;
}

.cc-react-mini--in-comment-meta {
    padding: 0.1rem 0.32rem 0.1rem 0.22rem;
    font-size: 0.68rem;
    gap: 0.18rem;
}

.cc-react-mini--in-comment-meta .cc-react-mini__icon svg {
    width: 13px;
    height: 13px;
    display: block;
}

.customer-community-compose--sns textarea {
    border-radius: 12px;
    border: 1px solid rgba(100, 130, 180, 0.2);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.customer-community-card--sns {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.customer-community-card--sns:hover {
    border-color: rgba(75, 105, 255, 0.35);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.customer-community-card--sns .customer-community-card-link {
    height: auto;
    flex: 1 1 auto;
    padding: 1rem 1.05rem 0.55rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

.customer-community-card--sns .customer-community-card-link:hover {
    border: none;
    box-shadow: none;
    transform: none;
}

.customer-community-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem 0.65rem;
    padding: 0.55rem 1rem 0.85rem;
    border-top: 1px solid rgba(96, 120, 150, 0.1);
    background: linear-gradient(180deg, rgba(248, 250, 255, 0.5) 0%, #fff 100%);
}

.customer-community-card-footer .customer-community-meta--card {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.customer-community-card-react {
    flex-shrink: 0;
}

.customer-community-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translate3d(-50%, 12px, 0);
    padding: 0.62rem 1.15rem;
    border-radius: 999px;
    background: rgba(24, 36, 54, 0.92);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    z-index: 99990;
    max-width: min(90vw, 22rem);
    text-align: center;
}

.customer-community-toast.is-visible {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
}

.customer-community-toast.customer-community-toast--dismissible {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    max-width: min(92vw, 26rem);
    padding: 0.55rem 0.45rem 0.55rem 0.85rem;
    border-radius: 14px;
    text-align: left;
    pointer-events: auto;
}

.customer-community-toast--dismissible .customer-community-toast-msg {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    line-height: 1.35;
}

.customer-community-toast-dismiss {
    flex-shrink: 0;
    margin: 0;
    padding: 0.15rem 0.45rem;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.customer-community-toast-dismiss:hover {
    background: rgba(255, 255, 255, 0.28);
}

.cc-moderation-notice,
.customer-rich-html-body .cc-moderation-notice {
    margin: 0;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: #fef3c7;
    border: 1px solid rgba(217, 119, 6, 0.35);
    color: #78350f;
    font-weight: 600;
    line-height: 1.45;
}

/* §9.6: 2박3일만 막힌 시작일 — 카드 하단 안내 + 달력 이틀 뒤 셀 */
.mh-two-night-slot-banner {
    margin-top: 0.55rem;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    font-size: 0.78rem;
    line-height: 1.45;
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.96), rgba(253, 230, 138, 0.78));
    border: 1px solid rgba(217, 119, 6, 0.38);
    color: #78350f;
}

.rental-pc-shell--dual .mh-two-night-slot-banner {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-bottom: -0.15rem;
    box-shadow: 0 -8px 18px rgba(255, 255, 255, 0.92);
}

.mh-cal-mode-pick-end .m-schedule-cell.mh-cal-2n-unavailable {
    cursor: pointer;
    opacity: 0.9;
    outline: 1px dashed rgba(217, 119, 6, 0.7);
    outline-offset: -2px;
    border-radius: 10px;
}

.customer-community--mobile .customer-community-engagement {
    flex-direction: column;
    align-items: stretch;
}

.customer-community--mobile .customer-community-engagement-share {
    justify-content: flex-start;
}

.customer-community-detail-foot {
    margin-top: 1.75rem;
}

.customer-community-detail-foot--actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.customer-community-back {
    display: inline-flex;
    align-items: center;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e58b8;
}

.customer-community-back::before {
    content: '← ';
    margin-right: 0.06rem;
}

.customer-community-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    padding: 0.52rem 1.05rem;
    border-radius: 12px;
    border: 1px solid rgba(20, 24, 31, 0.12);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 10px rgba(15, 23, 42, 0.05);
    transition: transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}

.customer-community-action-btn--primary {
    background: #3f61ff;
    border-color: #3f61ff;
    color: #fff;
    box-shadow: 0 8px 16px rgba(63, 97, 255, 0.34);
}

.customer-community-action-btn--ghost {
    background: #f8fafc;
    border-color: rgba(20, 24, 31, 0.12);
    color: #14181f;
}

.customer-community-action-btn:hover {
    transform: translateY(-1px);
    filter: saturate(1.04);
}

.customer-community-action-btn--primary:hover {
    background: #1f4ee2;
    border-color: #1f4ee2;
}

.customer-community-action-btn--ghost:hover {
    background: #ffffff;
    border-color: #cfd6e4;
}

.customer-community-action-btn.is-active,
.customer-community-action-btn:disabled {
    opacity: 0.72;
    cursor: default;
    transform: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.customer-community-empty-msg {
    text-align: center;
    padding: 2rem 1rem;
    color: #6b849e;
    font-size: 0.9rem;
}

.customer-community-compose {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(90, 120, 160, 0.28);
}

.customer-community-compose label {
    display: block;
    font-weight: 800;
    font-size: 0.82rem;
    color: #1b3148;
    margin-bottom: 0.35rem;
}

.customer-community-compose textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    border: 1px solid #c5d6ec;
    font-size: 0.88rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 5.2rem;
    font-family: inherit;
}

.customer-community-compose input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    border: 1px solid #c5d6ec;
    font-size: 0.88rem;
    line-height: 1.3;
    min-height: 2.35rem;
    font-family: inherit;
    margin-bottom: 0.5rem;
}

.customer-community-submit {
    margin-top: 0.6rem;
    padding: 0.52rem 1.05rem;
    border-radius: 12px;
    border: 1px solid var(--accent);
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.2;
    cursor: pointer;
    background: #3f61ff;
    color: #fff;
    box-shadow: 0 8px 16px rgba(63, 97, 255, 0.34);
    transition: transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease, filter 0.14s ease, box-shadow 0.14s ease;
}

.customer-community-submit:hover {
    transform: translateY(-1px);
    background: #1f4ee2;
    border-color: #1f4ee2;
    filter: saturate(1.04);
}

.customer-community-login-hint {
    margin: 1rem 0 0;
    font-size: 0.82rem;
    line-height: 1.6;
    color: #4a6580;
}

.customer-community-login-open {
    display: inline;
    margin: 0 0.15rem;
    padding: 0;
    border: 0;
    background: none;
    color: #1e58b8;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
}

.customer-community-login-open:hover {
    color: var(--accent-dark);
    transform: translateY(-1px);
}

.customer-review-like-row {
    margin-top: 0.8rem;
    display: flex;
    justify-content: flex-end;
}

.customer-review-like-form {
    margin: 0;
}

.customer-review-like-hint {
    margin-top: 0;
}

/* 후기 게시판형 목록 */
.reviews-board-shell {
    background: #fff;
    border: 1px solid rgba(115, 146, 184, 0.22);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(24, 48, 80, 0.08);
    padding: clamp(0.75rem, 1.6vw, 1rem);
}

.reviews-board-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.reviews-board-toolbar-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.55rem;
    flex: 1 1 auto;
    min-width: 0;
}

.reviews-board-toolbar-cluster .reviews-board-btn--write {
    flex-shrink: 0;
    box-shadow: 0 10px 22px rgba(63, 97, 255, 0.42);
}

.reviews-write-panel {
    margin-bottom: 0.75rem;
    border: 1px solid rgba(41, 98, 184, 0.18);
    border-radius: 12px;
    background: #f8fbff;
    padding: 0.75rem 0.8rem;
}

.reviews-write-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.reviews-write-head h2 {
    margin: 0;
    font-size: 0.95rem;
    color: #1b3148;
}

.reviews-board-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    flex: 1 1 auto;
    min-width: 0;
}

.reviews-board-search-main {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.4rem;
    flex: 1 1 10rem;
    min-width: 0;
}

.reviews-board-search-main input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    width: 0;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    border: 1px solid #c5d6ec;
    font-size: 0.86rem;
}

.reviews-board-search-main .reviews-board-btn--primary {
    flex-shrink: 0;
    white-space: nowrap;
}

.reviews-board-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.52rem 0.9rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}

.reviews-board-btn--primary {
    background: #3f61ff;
    color: #fff;
    border-color: #3f61ff;
    box-shadow: 0 8px 16px rgba(63, 97, 255, 0.34);
}

.reviews-board-btn--ghost {
    background: #f8fafc;
    color: #14181f;
    border-color: var(--line);
}

.reviews-board-btn--primary:hover {
    background: #1f4ee2;
    border-color: #1f4ee2;
}

.reviews-board-btn--ghost:hover {
    background: #fff;
    border-color: #cfd6e4;
}

.reviews-board-btn--compact {
    padding: 0.2rem 0.55rem;
    font-size: 0.8rem;
}

.customer-board-owner-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0.5rem 0 0;
}

.customer-board-owner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.customer-board-delete-form {
    margin-top: 0.75rem;
}

.customer-board-delete-form--inline {
    display: inline;
    margin: 0;
}

.project-widget-owner-bar {
    margin-bottom: 0.75rem;
}

.reviews-board-lead-hint {
    margin: 0 0 0.55rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #5a7390;
}

.reviews-board-count {
    margin: 0;
    font-size: 0.8rem;
    color: #5a7390;
}

.reviews-board-scroll {
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid rgba(90, 120, 160, 0.14);
    background: #fff;
    box-shadow: none;
}

.reviews-board-table {
    width: 100%;
    min-width: 36rem;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.reviews-board-table thead {
    background: #fff;
}

.reviews-board-table th,
.reviews-board-table td {
    padding: 0.72rem 0.72rem;
    border-bottom: 1px solid #edf2fa;
    text-align: left;
    vertical-align: middle;
    transition: background-color 0.14s ease, color 0.14s ease;
}

.reviews-board-table th {
    font-size: 0.78rem;
    font-weight: 800;
    color: #5d7086;
    letter-spacing: 0.01em;
    background: #fdfefe;
}

.reviews-board-th-num {
    width: 3.2rem;
    text-align: center;
    white-space: nowrap;
}

.reviews-board-td-num {
    text-align: center;
    color: #5a6f82;
    font-variant-numeric: tabular-nums;
}

.reviews-board-th-title {
    min-width: 12rem;
}

.reviews-board-th-state {
    width: 5.8rem;
    text-align: center;
}

.reviews-board-td-title a {
    color: #1a2d44;
    font-weight: 700;
    text-decoration: none;
}

.reviews-board-td-title a:hover {
    text-decoration: none;
    color: #0f459a;
    font-weight: 800;
}

.reviews-board-sortlink {
    color: #2a4560;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    padding: 0.12rem 0.28rem;
    margin: 0 -0.12rem;
    border-radius: 6px;
    transition: background 0.14s ease, color 0.14s ease;
}

.reviews-board-sortlink:hover {
    color: #1e58b8;
    text-decoration: none;
    background: rgba(30, 88, 184, 0.08);
    border-radius: 6px;
}

.reviews-board-sortlink.is-active {
    color: #0d3d8a;
}

.reviews-board-td-state {
    text-align: center;
}

.reviews-board-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.7rem;
    padding: 0.2rem 0.48rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.1;
}

.reviews-board-state.is-hot {
    background: #dcfbe9;
    color: #11773e;
}

.reviews-board-state.is-new {
    background: #fff5cb;
    color: #9c6a00;
}

.reviews-board-state.is-normal {
    background: #eef3fb;
    color: #4f6885;
}

.reviews-board-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: #6b849e;
}

.reviews-board-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 1.1rem;
}

.reviews-board-page {
    display: inline-flex;
    min-width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.35rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    color: #2a5588;
    border: 1px solid #c5d6ec;
    background: #fff;
}

.reviews-board-page:hover {
    border-color: #7aa6e0;
    background: #f4f8ff;
}

.reviews-board-page.is-current {
    background: #e8eefc;
    border-color: rgba(58, 120, 255, 0.45);
    color: #0d3d8a;
}

.reviews-board-ellipsis {
    padding: 0 0.2rem;
    color: #8a9db0;
}

.customer-reviews .customer-community-tailnote {
    margin-bottom: 0;
}

/* 후기 목록 — 커뮤니티와 동일 리스트 레이아웃 */
.customer-reviews-board .reviews-board-shell {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.customer-reviews-board .reviews-board-toolbar {
    margin-top: 0.25rem;
}

.customer-community-toolbar {
    margin-top: 0.15rem;
    margin-bottom: 0.65rem;
}

.customer-community-toolbar .community-toolbar-hint {
    margin: 0;
    flex: 1 1 10rem;
    min-width: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #5a7390;
}

.customer-community .reviews-board-shell.community-write-shell {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0.5rem;
}

.customer-community-chipbar--reviews-sort {
    margin-bottom: 0.55rem;
}

.customer-community-list-link .reviews-list-state-badge {
    flex-shrink: 0;
    margin-top: 0.08rem;
}

/* 후기 카드 — 백패킹 장소 prefix (제목 앞 같은 줄에 표시, 클릭 X — 후기 읽기 흐름 보존)
   링크는 후기 상세 페이지(읽기 화면)의 reviews-detail-site-link 에서만 활성. */
.reviews-list-site-prefix {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    margin-right: 0.4rem;
    padding: 0.06rem 0.42rem 0.06rem 0.32rem;
    background: rgba(14, 116, 144, 0.07);
    color: #155e75;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: -0.01em;
    vertical-align: 1px;
    white-space: nowrap;
}

.reviews-list-site-prefix__pin {
    font-size: 0.86em;
    line-height: 1;
}

/* 작은 신규/추천 태그 — 제목 뒤에 게시판 관습대로 작게 표시.
   기존 큰 reviews-list-state-badge 는 노이즈가 커서 제거하고 이걸로 대체. */
.reviews-list-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.32rem;
    padding: 0.04rem 0.4rem;
    border-radius: 4px;
    font-size: 0.62em;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.04em;
    vertical-align: 2px;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
}

.reviews-list-tag--new {
    background: #dc2626;
    color: #fff;
    min-width: 1.05rem;
    padding: 0.04rem 0.32rem;
    border-radius: 3px;
}

.reviews-list-tag--hot {
    background: linear-gradient(135deg, #f97316, #dc2626);
    color: #fff;
}

/* 후기 상세 페이지 — 제목 옆/위에 표시되는 클릭 가능한 백패킹 장소 링크. */
.reviews-detail-site-link {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.34rem 0.8rem 0.34rem 0.65rem;
    margin: 0 0 0.7rem;
    background: linear-gradient(135deg, #ecfeff 0%, #eef2ff 100%);
    color: #0e7490;
    border: 1px solid rgba(14, 116, 144, 0.22);
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.3;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.reviews-detail-site-link:hover {
    background: linear-gradient(135deg, #cffafe 0%, #e0e7ff 100%);
    color: #0c4a6e;
    transform: translateY(-1px);
}

.reviews-detail-site-link__arrow {
    margin-left: 0.18rem;
    font-size: 0.78rem;
    color: #64748b;
    transition: transform 0.15s ease;
}

.reviews-detail-site-link:hover .reviews-detail-site-link__arrow {
    transform: translateX(3px);
    color: #0c4a6e;
}

.customer-community-card--review .customer-community-list-link .reviews-list-state-badge {
    min-width: 2.75rem;
}

.customer-community-card--review .reviews-list-thumb-wrap {
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    margin-top: 0.06rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(96, 120, 150, 0.22);
    background: #eef2f7;
    box-shadow: 0 1px 2px rgba(25, 55, 90, 0.06);
}

.customer-community-card--review .reviews-list-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 목록: 방금 등록한 글·후기 하이라이트 */
.customer-community-card--just-posted {
    outline: 2px solid rgba(63, 97, 255, 0.5);
    outline-offset: 2px;
    border-radius: 14px;
    box-shadow:
        0 0 0 1px rgba(63, 97, 255, 0.18),
        0 8px 26px rgba(41, 98, 184, 0.12);
}

.customer-community-feed--reviews {
    margin-top: 0.15rem;
}

/* 후기·커뮤니티 글 상세 세로 가이드 라인 */
.customer-reviews-detail,
.customer-community-post-detail {
    position: relative;
    padding-inline: clamp(0.7rem, 1.8vw, 1.2rem);
    border-top: 1px solid rgba(75, 114, 165, 0.26);
    border-bottom: 1px solid rgba(75, 114, 165, 0.26);
    border-radius: 10px;
}

.customer-reviews-detail::before,
.customer-reviews-detail::after,
.customer-community-post-detail::before,
.customer-community-post-detail::after {
    content: '';
    position: absolute;
    top: 0.3rem;
    bottom: 0.3rem;
    width: 1px;
    background: linear-gradient(180deg, rgba(75, 114, 165, 0.05), rgba(75, 114, 165, 0.28) 18%, rgba(75, 114, 165, 0.28) 82%, rgba(75, 114, 165, 0.05));
    pointer-events: none;
}

.customer-reviews-detail::before,
.customer-community-post-detail::before {
    left: 0;
}

.customer-reviews-detail::after,
.customer-community-post-detail::after {
    right: 0;
}

.customer-reviews a,
.customer-reviews a:hover,
.customer-reviews a:focus-visible {
    text-decoration: none;
}

.customer-reviews .customer-community-bc a,
.customer-reviews .customer-community-detail-foot a,
.customer-reviews .customer-community-lead a {
    display: inline-flex;
    align-items: center;
    transition: color 0.14s ease, transform 0.14s ease, opacity 0.14s ease;
}

.customer-reviews .customer-community-bc a:hover,
.customer-reviews .customer-community-detail-foot a:hover,
.customer-reviews .customer-community-lead a:hover {
    color: #0e4aa3;
    transform: translateY(-1px);
    opacity: 0.95;
}

/* 렌탈 후기 상세 — 게시판형 구획·그리드·도구줄 */
.review-detail-sheet {
    position: relative;
}

.review-detail-top {
    display: grid;
    gap: 0.75rem 1.25rem;
    padding-bottom: 1.05rem;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(90, 120, 160, 0.18);
}

.review-detail-top--toolbar {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
    .review-detail-top--toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }
}

.review-detail-heading .customer-community-detail-title {
    margin-top: 0.45rem;
}

.review-detail-toolbar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
}

@media (min-width: 560px) {
    .review-detail-toolbar {
        justify-content: flex-end;
        padding-top: 0.2rem;
    }
}

.review-detail-block__label {
    margin: 0 0 0.55rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #5d6f82;
    text-transform: uppercase;
}

.review-detail-block--body {
    padding-top: 1.1rem;
}

.review-detail-block__body {
    padding: 1rem 1.05rem;
    border-radius: 12px;
    background: linear-gradient(165deg, rgba(248, 250, 255, 0.95) 0%, #fff 55%);
    border: 1px solid rgba(96, 120, 160, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.review-detail-block--engage {
    padding-top: 1.05rem;
    margin-top: 0.25rem;
    border-top: 1px solid rgba(90, 120, 160, 0.12);
}

.review-detail-block--engage .review-detail-block__label {
    margin-bottom: 0.45rem;
}

.review-detail-block--engage .customer-community-engagement {
    margin-top: 0;
}

.review-detail-comments {
    margin-top: 1.35rem;
    padding: 1.15rem 1.05rem 1.05rem;
    border-radius: 14px;
    background: #f4f7fb;
    border: 1px solid rgba(96, 120, 160, 0.16);
    box-shadow: 0 6px 20px rgba(24, 48, 80, 0.05);
}

.review-detail-comments .customer-community-comments-title {
    margin-top: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(96, 120, 160, 0.12);
}

.review-detail-comments .customer-community-comment-list {
    margin-top: 0.65rem;
}

.customer-reviews-detail .review-detail-comments.customer-community-comments,
.customer-community-post-detail .review-detail-comments.customer-community-comments {
    border-top: none;
    padding-top: 1.15rem;
}

.customer-community-post-detail .customer-community-bc a,
.customer-community-post-detail .customer-community-detail-foot a {
    display: inline-flex;
    align-items: center;
    transition: color 0.14s ease, transform 0.14s ease, opacity 0.14s ease;
    text-decoration: none;
}

.customer-community-post-detail .customer-community-bc a:hover,
.customer-community-post-detail .customer-community-detail-foot a:hover {
    color: #0e4aa3;
    transform: translateY(-1px);
    opacity: 0.95;
}

.review-detail-edit-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding-bottom: 0.85rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(90, 120, 160, 0.16);
}

.review-detail-edit-title {
    margin: 0;
    font-size: clamp(1.05rem, 2.4vw, 1.35rem);
}

.review-detail-form-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(90, 120, 160, 0.12);
}

.reviews-board-btn--danger-outline {
    color: #b42318;
    border-color: rgba(180, 35, 24, 0.38);
    background: rgba(255, 245, 245, 0.95);
}

.reviews-board-btn--danger-outline:hover {
    background: #fee4e2;
    border-color: rgba(180, 35, 24, 0.55);
}

.customer-board-delete-form--inline {
    display: inline-flex;
    margin: 0;
    align-items: center;
    vertical-align: middle;
}

.reviews-board-tr {
    transition: transform 0.16s ease, box-shadow 0.16s ease;
    position: relative;
    cursor: pointer;
}

.reviews-board-tr:hover td {
    background: #edf4ff;
}

.reviews-board-tr:focus-visible td {
    background: #e9f2ff;
}

.reviews-board-tr:hover {
    transform: translateY(-1px);
    box-shadow: inset 4px 0 0 #2f67c7;
}

.reviews-board-tr:hover .reviews-board-td-title a {
    color: #0f459a;
    text-decoration: none;
    font-weight: 800;
}

/* admin: project gallery management */
.admin-project-form .admin-project-form__actions {
    margin-top: 0.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

body.dashboard-body .admin-project-form .admin-btn--narrow {
    width: auto;
    min-width: 5.5rem;
    max-width: 11rem;
    justify-self: start;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
}

.admin-project-gallery {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
    gap: 0.75rem;
}

.admin-project-gallery-empty {
    margin-top: 0.25rem;
}

.admin-project-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #cadced;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 12px rgba(36, 59, 84, 0.08);
}

body.dashboard-body li.admin-project-card[data-href] {
    cursor: pointer;
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        border-color 0.16s ease;
}

body.dashboard-body li.admin-project-card[data-href]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(36, 59, 84, 0.12);
    border-color: #94a8c8;
}

body.dashboard-body li.admin-project-card[data-href]:active {
    transform: translateY(0);
}

body.dashboard-body li.admin-project-card[data-href]:focus-visible {
    outline: 2px solid #2f67c7;
    outline-offset: 2px;
}

.admin-project-card__media {
    aspect-ratio: 4 / 3;
    background: linear-gradient(145deg, #e8f0fb, #f4f7fc);
    position: relative;
}

.admin-project-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.admin-project-card__body {
    padding: 0.55rem 0.65rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}

.admin-project-card__title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.admin-project-card__actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.admin-project-card__action-link {
    flex: 0 1 auto;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--m-dobi-primary, #4b69ff);
    text-decoration: none;
    padding: 0.28rem 0.45rem;
    border: 1px solid #b8c9e8;
    border-radius: 8px;
    background: #fff;
}

.admin-project-card__action-link:hover {
    background: #f0f6ff;
    border-color: #8fabd6;
}

.admin-project-card__del {
    margin: 0;
    flex: 0 0 auto;
}

body.dashboard-body .admin-project-card__del-btn.admin-btn--narrow {
    padding: 0.28rem 0.55rem;
    min-height: 1.95rem;
    font-size: 0.76rem;
    min-width: unset;
    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.2);
}

.admin-project-form .admin-project-editor-scale {
    max-width: 100%;
    width: 100%;
}

.admin-project-form .tox-tinymce {
    border-radius: 10px;
    margin-top: 0.2rem;
}

/* 에디터: 우하단 드래그로 가로·세로 크기 조절(TinyMCE statusbar + resize: both) */
.admin-project-form .tox .tox-statusbar {
    border-top: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #fbfcfe 0%, #f1f5f9 100%);
    padding: 0.15rem 0.35rem;
    min-height: 1.35rem;
    font-size: 0.72rem;
    color: #94a3b8;
}

.admin-project-form .tox .tox-statusbar__resize-handle {
    margin-inline-start: auto;
    cursor: nwse-resize;
    opacity: 0.85;
}

.admin-project-form .tox .tox-statusbar__resize-handle:hover {
    opacity: 1;
}

/* TinyMCE 6 다이얼로그 — 관리자·고객 작성 에디터 공통(이미지 삽입 등 카드형 UI) */
body .tox .tox-dialog-wrap__backdrop {
    background-color: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(4px);
}

body .tox .tox-dialog {
    border-radius: 18px;
    border: 1px solid rgba(148, 168, 198, 0.65);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.55) inset,
        0 28px 64px rgba(15, 23, 42, 0.22),
        0 10px 24px rgba(41, 98, 184, 0.08);
    overflow: hidden;
    font-family:
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        "Malgun Gothic",
        sans-serif;
    max-width: min(34rem, calc(100vw - 1.75rem)) !important;
}

body .tox .tox-dialog__header {
    padding: 1rem 1.25rem 0.95rem;
    background: linear-gradient(135deg, #f8fafc 0%, #eef4fc 48%, #ffffff 100%);
    border-bottom: 1px solid #e2e8f0;
}

body .tox .tox-dialog__title {
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f172a;
}

body .tox .tox-dialog__header .tox-button {
    border-radius: 10px;
}

body .tox .tox-dialog__body {
    padding: 0;
    background: #fbfcfe;
}

body .tox .tox-dialog__body-content {
    padding: 1.15rem 1.35rem 1.25rem;
}

body .tox .tox-dialog__body-nav {
    padding: 1rem 0 1rem 1rem;
    margin: 0;
    gap: 0.35rem;
    align-items: stretch;
    border-right: 1px solid #e8eef4;
    background: linear-gradient(180deg, #f1f5f9 0%, #f8fafc 100%);
    min-width: 7.5rem;
}

body .tox .tox-dialog__body-nav-item {
    margin: 0 0.35rem 0 0;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    border: 1px solid transparent;
    border-bottom: 1px solid transparent;
    font-size: 0.84rem;
    font-weight: 600;
    color: #475569;
    transition:
        background 0.14s ease,
        color 0.14s ease,
        border-color 0.14s ease;
}

body .tox .tox-dialog__body-nav-item:hover {
    background: rgba(255, 255, 255, 0.75);
    color: #1e293b;
}

body .tox .tox-dialog__body-nav-item--active {
    background: #fff;
    color: #1d4ed8;
    font-weight: 800;
    border: 1px solid #c7d7ef;
    border-bottom: 1px solid #c7d7ef;
    box-shadow: 0 2px 8px rgba(41, 98, 184, 0.1);
}

body .tox .tox-dialog__footer {
    padding: 0.85rem 1.25rem 1rem;
    border-top: 1px solid #e8eef4;
    background: linear-gradient(180deg, #fafbfd 0%, #f4f7fb 100%);
}

body .tox .tox-dialog__footer-end {
    gap: 0.55rem;
}

body .tox .tox-dialog__footer-end .tox-button {
    min-width: 5.25rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.86rem;
    padding: 0.45rem 1rem;
    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        filter 0.12s ease;
}

body .tox .tox-dialog__footer-end .tox-button:active:not(:disabled) {
    transform: translateY(1px);
}

body .tox .tox-button--secondary {
    background: #fff;
    border-color: #c5d3e6;
    color: #334155;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body .tox .tox-button--secondary:hover:not(:disabled) {
    background: #f8fafc;
    border-color: #94a3b8;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

body .tox .tox-button--naked.tox-button--icon:hover {
    background: rgba(241, 245, 249, 0.95);
}

body .tox .tox-button--primary {
    background: linear-gradient(180deg, #3d7ad0 0%, #2a5aa0 100%);
    border-color: #1e4677;
    color: #fff;
    box-shadow: 0 2px 8px rgba(41, 98, 184, 0.28);
}

body .tox .tox-button--primary:hover:not(:disabled) {
    background: linear-gradient(180deg, #4a86da 0%, #3164b0 100%);
    filter: brightness(1.02);
}

body .tox .tox-form__group {
    margin-bottom: 0.85rem;
}

body .tox .tox-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.38rem;
}

body .tox .tox-textfield,
body .tox .tox-textarea {
    border-radius: 11px;
    border: 1px solid #c5d3e6;
    background: #fff;
    font-size: 0.92rem;
    padding: 0.55rem 0.75rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) inset;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

body .tox .tox-textfield:focus,
body .tox .tox-textarea:focus {
    border-color: #4b7bc7;
    box-shadow:
        0 0 0 3px rgba(75, 123, 199, 0.2),
        0 1px 2px rgba(15, 23, 42, 0.04) inset;
}

body .tox .tox-form__controls-h-stack {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

body .tox .tox-form__controls-h-stack .tox-textfield {
    flex: 1;
    min-height: 2.85rem;
}

body .tox .tox-form__controls-h-stack .tox-tbtn {
    border-radius: 11px;
    border: 1px solid #b8cbe0;
    background: linear-gradient(180deg, #ffffff 0%, #eef3fb 100%);
    min-width: 2.85rem;
    box-shadow: 0 1px 3px rgba(41, 98, 184, 0.12);
}

body .tox .tox-form__controls-h-stack .tox-tbtn:hover:not(:disabled) {
    border-color: #6b8cc4;
    background: linear-gradient(180deg, #f8fbff 0%, #e4edf9 100%);
}

body .tox .tox-selectfield select,
body .tox .tox-listboxfield .tox-listbox--select {
    border-radius: 10px;
    border-color: #c5d3e6;
}

body .tox .tox-dropzone {
    border-radius: 14px;
    border: 2px dashed #b8c9e0;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    padding: 1.5rem 1rem;
    font-size: 0.88rem;
    color: #475569;
}

body .tox .tox-dropzone:focus,
body .tox .tox-dropzone:hover {
    border-color: #4b7bc7;
    background: linear-gradient(180deg, #fbfdff 0%, #eef4ff 100%);
}

.admin-payments-intro-note {
    margin-top: 0;
    margin-bottom: 0.6rem;
}

/* admin: 결제현황 — 요약 카드 한 행(flex nowrap), 좁으면 가로 스크롤 */
.admin-pay-overview-summary {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.4rem 0.45rem;
    margin-top: 0.35rem;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.admin-pay-stat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.28rem;
    flex: 1 1 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.32rem 0.42rem;
    background: #fbfcfe;
    min-width: 6.35rem;
    min-height: 0;
}

.admin-pay-stat__label {
    margin: 0;
    min-width: 0;
    font-size: 0.66rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.2;
    white-space: nowrap;
}

.admin-pay-stat__value {
    margin: 0;
    justify-self: end;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.12;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.admin-pay-stat__unit {
    margin-left: 0.05rem;
    font-size: 0.58rem;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
}

/* 고객 커뮤니티·후기: 프로젝트 갤러리형 리치 작성 카드 + 본문 HTML */
.customer-rich-write-card {
    margin-bottom: 0.75rem;
    border-radius: 14px;
    box-shadow:
        0 2px 4px rgba(15, 37, 71, 0.04),
        0 10px 28px rgba(15, 52, 100, 0.07);
}

.customer-community .customer-rich-write-card,
.customer-reviews .customer-rich-write-card {
    padding: clamp(0.85rem, 1.8vw, 1.1rem);
}

.customer-community-gallery-write-hint {
    margin: 0.25rem 0 0.65rem;
    max-width: 42rem;
}

.customer-rich-write-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.85rem;
    margin: 0 0 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(100, 130, 180, 0.15);
}

.customer-rich-write-title {
    margin: 0;
    font-size: clamp(0.95rem, 2.2vw, 1.05rem);
    font-weight: 800;
    color: #1b3148;
}

.customer-rich-write-form .customer-rich-write-meta {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
}

.customer-rich-write-form .admin-project-form__actions {
    margin-top: 0.75rem;
}

.customer-rich-write-form .admin-project-form__actions .reviews-board-btn--primary {
    min-width: 5.5rem;
    justify-content: center;
}

/* 커뮤니티 글 작성: 주제 드롭다운 대신 가로 칩(라디오 택일) */
.customer-topic-pick {
    border: 0;
    margin: 0 0 0.35rem;
    padding: 0;
    min-width: 0;
}

.customer-rich-write-form .customer-topic-pick {
    display: grid;
    gap: 0.35rem;
}

.customer-topic-pick__legend {
    padding: 0;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
}

.customer-topic-pick__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    min-width: 0;
}

.customer-topic-pick__chip {
    display: inline-flex;
    cursor: pointer;
    margin: 0;
    user-select: none;
}

.customer-topic-pick__chip input:focus-visible + .customer-topic-pick__face {
    outline: 2px solid #2f67c7;
    outline-offset: 2px;
}

.customer-topic-pick__chip input:checked + .customer-topic-pick__face {
    background: var(--accent-soft);
    color: var(--accent-ink);
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(75, 105, 255, 0.18);
}

.customer-rich-html-body {
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.customer-rich-html-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0.65rem 0;
    border-radius: 10px;
}

.customer-rich-html-body p {
    margin: 0 0 0.65rem;
}

.customer-rich-html-body ul,
.customer-rich-html-body ol {
    margin: 0.35rem 0 0.65rem;
    padding-left: 1.35rem;
}

.customer-rich-html-body blockquote {
    margin: 0.65rem 0;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid rgba(63, 97, 255, 0.45);
    background: rgba(245, 248, 255, 0.85);
    border-radius: 0 8px 8px 0;
}

/* 관리자 · 외부 연동(SNS·PG) 설정 */
.admin-integrations-form {
    margin-top: 0.75rem;
}

.admin-integrations-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem 1.75rem;
    align-items: start;
}

@media (max-width: 960px) {
    .admin-integrations-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

.admin-integrations-col {
    min-width: 0;
    padding: 0.55rem 0.7rem 0.45rem;
    border: 1px solid #e8ecf2;
    border-radius: 12px;
    background: #f8fafc;
}

.admin-integrations-col-title {
    margin: 0 0 0.55rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #e8ecf2;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.admin-integrations-pg-mode-label .admin-label-text {
    font-size: 1.05rem;
    font-weight: 800;
}

.admin-pg-mode-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    pointer-events: none;
}

.admin-pg-mode-segment {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    width: 100%;
    max-width: 100%;
}

.admin-pg-mode-seg-btn {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.45rem 0.55rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    line-height: 1.25;
}

.admin-pg-mode-seg-btn:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

.admin-pg-mode-seg-btn.is-selected {
    border-color: #3b5bdb;
    background: rgba(59, 91, 219, 0.1);
    color: #1e3a8a;
    box-shadow: 0 0 0 1px rgba(59, 91, 219, 0.25);
}

.admin-integrations-col .admin-integrations-input {
    max-width: 100%;
}

.admin-integrations-col .admin-integrations-hint,
.admin-integrations-col .admin-integrations-mode-guide {
    max-width: 100%;
}

.admin-integrations-col .admin-integrations-fieldset {
    overflow: visible;
}

/* 섹션(fieldset): 주제 단위 외곽 — 안쪽 카드보다 진한 테두리로 계층 구분 */
.admin-integrations-fieldset {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
    padding: 0.55rem 0.6rem 0.6rem;
    border: 2px solid #64748b;
    border-radius: 10px;
    background: rgba(248, 250, 252, 0.92);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 8px rgba(15, 23, 42, 0.08);
}

.admin-integrations-legend {
    float: none;
    width: auto;
    margin: 0;
    padding: 0.28rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #1e293b;
    background: #e2e8f0;
    border: 1px solid #94a3b8;
    border-radius: 6px;
    align-self: flex-start;
}

.admin-integrations-section-body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
}

.admin-integrations-card {
    min-width: 0;
    padding: 0.55rem 0.65rem 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
}

.admin-integrations-row {
    margin-bottom: 0.85rem;
    clear: both;
}

.admin-integrations-card .admin-integrations-row-form {
    margin-bottom: 0;
    clear: none;
}

.admin-integrations-row-form {
    margin-bottom: 0.85rem;
    clear: both;
}

.admin-integrations-row-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.65rem;
    align-items: flex-end;
}

.admin-integrations-label--grow {
    flex: 1 1 14rem;
    min-width: 0;
}

.admin-integrations-row-save {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* 연동 설정: 행 저장은 가끔 쓰는 보조 동작 → 채도 낮춰 본문(입력값)이 먼저 보이게 */
.admin-integrations-row-form .admin-integrations-row-save.admin-btn {
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    box-shadow: none;
    min-height: 2.28rem;
    padding: 0.38rem 0.62rem;
    font-size: 0.8rem;
    border-radius: 8px;
}

.admin-integrations-row-form .admin-integrations-row-save.admin-btn:hover,
.admin-integrations-row-form .admin-integrations-row-save.admin-btn:focus-visible {
    background: #e2e8f0;
    border-color: #94a3b8;
    color: #1e293b;
    box-shadow: none;
}

.admin-integrations-actions .admin-btn--primary {
    box-shadow: 0 2px 6px rgba(75, 105, 255, 0.16);
}

.admin-integrations-label {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    align-items: flex-start;
}

.admin-integrations-input {
    width: 100%;
    max-width: 36rem;
    box-sizing: border-box;
    padding: 0.45rem 0.55rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.88rem;
}

.admin-integrations-hint {
    margin: 0.2rem 0 0;
    max-width: 42rem;
    font-size: 0.78rem;
}

.admin-integrations-mode-guide {
    clear: both;
    margin: 0.5rem 0 0.35rem;
    max-width: 42rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}

.admin-integrations-mode-guide-title {
    margin: 0 0 0.45rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f172a;
}

.admin-integrations-mode-dl {
    margin: 0;
    padding: 0;
}

.admin-integrations-mode-item {
    margin: 0 0 0.5rem;
    padding: 0;
}

.admin-integrations-mode-item:last-child {
    margin-bottom: 0;
}

.admin-integrations-mode-item dt {
    margin: 0 0 0.15rem;
    font-size: 0.78rem;
    color: #1e293b;
}

.admin-integrations-mode-item dd {
    margin: 0;
    padding-left: 0.35rem;
    font-size: 0.76rem;
    line-height: 1.45;
    color: #475569;
    border-left: 2px solid #cbd5e1;
}

.admin-integrations-stored-flag {
    font-weight: 600;
    color: #475569;
}

.admin-integrations-clear {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: #64748b;
    cursor: pointer;
}

.admin-integrations-actions {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e2e8f0;
}

/* 관리자 · 휴일 관리 — 연도 달력(PC) */
.admin-holidays-year-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.25rem;
    margin: 0.65rem 0 1rem;
    font-size: 0.95rem;
}

.admin-holidays-year-link {
    color: #3b5bdb;
    font-weight: 700;
    text-decoration: none;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    transition:
        background-color 0.14s ease,
        color 0.14s ease,
        box-shadow 0.14s ease,
        transform 0.14s ease;
}

.admin-holidays-year-link:hover {
    text-decoration: none;
    color: #1e3a8a;
    background: #e0e7ff;
    box-shadow: 0 2px 8px rgba(59, 91, 219, 0.22);
    transform: translateY(-1px);
}

.admin-holidays-year-link:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(59, 91, 219, 0.18);
}

.admin-holidays-year-link--disabled {
    color: #94a3b8;
    cursor: default;
    font-weight: 600;
}

.admin-holidays-year-link--disabled:hover {
    text-decoration: none;
}

.admin-holidays-year-current {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.admin-holidays-calendars {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem 1.1rem;
}

@media (max-width: 1400px) {
    .admin-holidays-calendars {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .admin-holidays-calendars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.admin-holidays-month {
    min-width: 0;
    padding: 0.55rem 0.5rem 0.6rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fafbfc;
}

.admin-holidays-month-title {
    margin: 0 0 0.4rem;
    font-size: 0.88rem;
    font-weight: 800;
    color: #1e293b;
    text-align: center;
}

.admin-holidays-month-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.76rem;
    table-layout: fixed;
}

.admin-holidays-month-grid th {
    padding: 0.2rem 0;
    font-weight: 700;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
}

.admin-holidays-day {
    position: relative;
    padding: 0.12rem;
    vertical-align: middle;
    text-align: center;
}

.admin-holidays-day--pad {
    background: transparent;
}

.admin-holidays-day-form {
    margin: 0;
    padding: 0;
}

.admin-holidays-day-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2rem;
    margin: 0;
    padding: 0.15rem 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #fff;
    font: inherit;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    box-sizing: border-box;
    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        border-color 0.12s ease,
        background-color 0.12s ease,
        color 0.12s ease;
}

.admin-holidays-day-inner:hover {
    position: relative;
    z-index: 2;
    border-color: #3b5bdb;
    background: #eef2ff;
    color: #1e3a8a;
    box-shadow:
        0 3px 10px rgba(59, 91, 219, 0.2),
        0 0 0 2px rgba(59, 91, 219, 0.12);
    transform: translateY(-2px) scale(1.06);
}

.admin-holidays-day-inner:active {
    transform: translateY(0) scale(1.02);
    box-shadow: 0 1px 4px rgba(59, 91, 219, 0.18);
}

.admin-holidays-day-inner:focus-visible {
    outline: 2px solid #3b5bdb;
    outline-offset: 1px;
}

.admin-holidays-day--manual .admin-holidays-day-inner {
    border-color: #f59e0b;
    background: #fffbeb;
    color: #92400e;
}

.admin-holidays-day--manual .admin-holidays-day-inner:hover {
    border-color: #d97706;
    background: #fef3c7;
    color: #78350f;
    box-shadow:
        0 3px 12px rgba(217, 119, 6, 0.28),
        0 0 0 2px rgba(245, 158, 11, 0.35);
    transform: translateY(-2px) scale(1.06);
}

.admin-holidays-day--manual .admin-holidays-day-inner:active {
    transform: translateY(0) scale(1.02);
    box-shadow: 0 1px 5px rgba(217, 119, 6, 0.22);
}

@media (prefers-reduced-motion: reduce) {
    .admin-holidays-year-link,
    .admin-holidays-day-inner {
        transition-duration: 0.01ms;
    }

    .admin-holidays-year-link:hover,
    .admin-holidays-year-link:active,
    .admin-holidays-day-inner:hover,
    .admin-holidays-day-inner:active,
    .admin-holidays-day--manual .admin-holidays-day-inner:hover,
    .admin-holidays-day--manual .admin-holidays-day-inner:active {
        transform: none;
    }
}

.admin-holidays-day-inner--static {
    cursor: default;
    border: 1px solid #c7d2fe;
    background: #eef2ff;
    color: #3730a3;
}

.admin-holidays-day-inner--static:hover {
    border-color: #c7d2fe;
    background: #eef2ff;
}

.admin-holidays-day-num {
    font-variant-numeric: tabular-nums;
}

.admin-holidays-name-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
}

.admin-holidays-name-form input[type="text"] {
    min-width: 10rem;
    max-width: 22rem;
}

body.dashboard-body .admin-holidays-name-form .admin-btn,
body.dashboard-body .admin-panel[aria-labelledby="admin-holidays-list-heading"] .admin-btn {
    border-color: #c8d6ea;
    background: #edf3fd;
    color: #39516f;
    box-shadow: none;
}

body.dashboard-body .admin-holidays-name-form .admin-btn:hover,
body.dashboard-body .admin-panel[aria-labelledby="admin-holidays-list-heading"] .admin-btn:hover,
body.dashboard-body .admin-holidays-name-form .admin-btn:focus-visible,
body.dashboard-body .admin-panel[aria-labelledby="admin-holidays-list-heading"] .admin-btn:focus-visible {
    border-color: #b6c9e5;
    background: #e2ecfb;
    color: #2c4360;
    box-shadow: none;
}

/* ========================================================================
 * 모바일 홈 랜딩 (/mobile) — hero 4:3 + 3 카드 1:1 (렌탈/가이드/프로젝트)
 * PC pc-landing.php 와 동일한 IA. 캘린더/예약 흐름은 /rental 로 분리.
 * ======================================================================== */
.mobile-landing {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.6rem 0.7rem 1rem;
    background: #ffffff;
    min-height: 100%;
}

/* 비로그인 배너 — 모바일 홈 상단에 부드럽게. 클릭 시 /loginmy 로 이동. */
.mobile-landing-login-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0.5rem 0.6rem;
    padding: 0.7rem 0.85rem;
    background: linear-gradient(135deg, #eef2ff 0%, #f0f9ff 100%);
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 12px;
    text-decoration: none;
    color: #1e293b;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mobile-landing-login-banner:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.18);
}

.mobile-landing-login-banner__icon {
    flex-shrink: 0;
    font-size: 1.5rem;
    line-height: 1;
}

.mobile-landing-login-banner__text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.mobile-landing-login-banner__text strong {
    font-size: 0.92rem;
    font-weight: 800;
    color: #312e81;
    letter-spacing: -0.015em;
}

.mobile-landing-login-banner__text span {
    font-size: 0.74rem;
    color: #64748b;
    line-height: 1.35;
}

.mobile-landing-login-banner__arrow {
    flex-shrink: 0;
    font-size: 1.05rem;
    color: #6366f1;
    font-weight: 700;
    transition: transform 0.15s ease;
}

.mobile-landing-login-banner:hover .mobile-landing-login-banner__arrow {
    transform: translateX(3px);
}

/* 로그인 후 인사말 — 더 가볍게 */
.mobile-landing-greet {
    margin: 0 0.5rem 0.55rem;
    padding: 0.45rem 0.85rem;
    font-size: 0.86rem;
    color: #475569;
    background: rgba(99, 102, 241, 0.06);
    border-radius: 10px;
    line-height: 1.4;
}

.mobile-landing-greet__name {
    color: #312e81;
    font-weight: 800;
    margin: 0 0.1rem;
}

.mobile-landing-greet__hi,
.mobile-landing-greet__tail {
    font-weight: 500;
}

.mobile-landing-resume-link {
    display: block;
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff4e0 0%, #fed7aa 100%);
    border: 1px solid #f59e0b;
    color: #92400e;
    font-weight: 800;
    font-size: 0.86rem;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 2px 8px rgba(180, 83, 9, 0.14);
    letter-spacing: -0.01em;
    transition: filter 0.18s ease, transform 0.12s ease;
}

.mobile-landing-resume-link:hover,
.mobile-landing-resume-link:focus-visible {
    filter: brightness(1.04);
    outline: none;
}

.mobile-landing-resume-link:active {
    transform: translateY(1px);
}

.mobile-landing-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 14px;
    background: #e6ecf3;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}

.mobile-landing-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.mobile-landing-hero__img.is-active {
    opacity: 1;
}

.mobile-landing-cards {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.mobile-landing-card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: #f3f5f9;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.08);
    text-decoration: none;
    color: inherit;
    transition: transform 0.16s ease, box-shadow 0.18s ease;
}

.mobile-landing-card:hover,
.mobile-landing-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
    outline: none;
}

.mobile-landing-card:active {
    transform: translateY(0);
}

.mobile-landing-card__photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.mobile-landing-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mobile-landing-card__caption {
    position: relative;
    z-index: 1;
    align-self: end;
    margin: 0.55rem;
    padding: 0.55rem 0.8rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    pointer-events: none;
}

.mobile-landing-card__caption strong {
    font-weight: 900;
    font-size: 1.02rem;
    color: #1f2937;
    letter-spacing: -0.02em;
}

.mobile-landing-card__caption span {
    font-size: 0.78rem;
    color: #4b5563;
    font-weight: 600;
}

/* ========================================================================
 * ABOUT 페이지 (고객) — about-widget.php
 * 관리자가 admin_about 에서 CKEditor 5 로 편집한 본문을 출력. 폴백 카피 포함.
 * ======================================================================== */
.about-page,
.guide-page {
    /* 외곽은 다른 PC 페이지와 통일된 폭(--pc-page-max).
       카드 시각 효과(배경/테두리/그림자)로 RENTAL/REVIEWS 등 다른 페이지와 톤을 맞추고,
       본문(.about-page__body, .guide-page__body)은 그 안에서 가독 폭으로 가운데 정렬. */
    max-width: var(--pc-page-max);
    margin: 1.2rem auto 2rem;
    padding: clamp(2rem, 3vw, 3rem) clamp(1.4rem, 3vw, 2.4rem) clamp(2.4rem, 3.5vw, 3.4rem);
    color: #1f2937;
    line-height: 1.7;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

/* specificity 를 올려 다른 cascade 규칙이 max-width 를 100% 로 덮는 케이스를 차단. */
.about-page > .about-page__head,
.about-page > .about-page__body,
.guide-page > .guide-page__head,
.guide-page > .guide-page__body {
    max-width: var(--pc-prose-max);
    margin-left: auto;
    margin-right: auto;
}

.about-page__head,
.guide-page__head {
    text-align: center;
    margin-bottom: 1.6rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.about-page__title,
.guide-page__title {
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    color: #111827;
    margin: 0;
}

.guide-page__subtitle {
    margin: 0.6rem 0 0;
    font-size: 0.95rem;
    color: #6b7280;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.about-page__body, .guide-page__body {
    font-size: 1rem;
    color: #1f2937;
}

.about-page__body p,
.guide-page__body p {
    margin: 0 0 1rem;
}

.about-page__body h2,
.guide-page__body h2 {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 1.8rem 0 0.7rem;
    color: #111827;
    letter-spacing: -0.01em;
}

.about-page__body h3,
.guide-page__body h3 {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 1.4rem 0 0.55rem;
    color: #1f2937;
}

.about-page__body h4,
.guide-page__body h4 {
    font-size: 1.02rem;
    font-weight: 700;
    margin: 1.2rem 0 0.5rem;
    color: #1f2937;
}

.about-page__body img,
.guide-page__body img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    margin: 0.9rem auto;
    box-shadow: 0 3px 14px rgba(15, 23, 42, 0.10);
}

.about-page__body figure,
.guide-page__body figure {
    margin: 1.2rem 0;
    text-align: center;
}

.about-page__body figure img,
.guide-page__body figure img {
    margin: 0 auto;
}

.about-page__body figcaption,
.guide-page__body figcaption {
    font-size: 0.84rem;
    color: #6b7280;
    margin-top: 0.4rem;
}

.about-page__body a,
.guide-page__body a {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.about-page__body a:hover,
.guide-page__body a:hover {
    color: #1d4ed8;
}

.about-page__body ul,
.about-page__body ol,
.guide-page__body ul,
.guide-page__body ol {
    padding-left: 1.5rem;
    margin: 0.8rem 0;
}

.about-page__body li,
.guide-page__body li {
    margin: 0.3rem 0;
}

.about-page__body blockquote,
.guide-page__body blockquote {
    margin: 1rem 0;
    padding: 0.6rem 1rem;
    border-left: 3px solid #cbd5e1;
    background: #f8fafc;
    color: #4b5563;
    font-style: italic;
}

.about-page__body table,
.guide-page__body table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
    font-size: 0.94rem;
}

.about-page__body th,
.about-page__body td,
.guide-page__body th,
.guide-page__body td {
    border: 1px solid #e5e7eb;
    padding: 0.5rem 0.7rem;
    text-align: left;
}

.about-page__body th,
.guide-page__body th {
    background: #f9fafb;
    font-weight: 700;
}

.about-page__body code,
.guide-page__body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: #f3f4f6;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.92em;
}

.about-page__body pre,
.guide-page__body pre {
    background: #f3f4f6;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1rem 0;
}

.about-page__body hr,
.guide-page__body hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 1.8rem 0;
}

@media (max-width: 640px) {
    .about-page,
    .guide-page {
        padding: 1.1rem 0.9rem 1.8rem;
    }
    .about-page__title,
    .guide-page__title {
        font-size: 1.45rem;
    }
    .about-page__body h2,
    .guide-page__body h2 {
        font-size: 1.18rem;
    }
}

/* RENTAL 좌측 안내(CMS) — rental-pc-main 좌측 컬럼 안에서 작동.
   .about-page__body 와 같은 typography 를 약간 좁은 폭에 맞춰 그대로 적용. */
.rental-info-cms {
    padding: 1.4rem 1.5rem 1.8rem;
    color: #1f2937;
    line-height: 1.7;
}

.rental-info-cms p {
    margin: 0 0 1rem;
    font-size: 0.98rem;
}

.rental-info-cms h2 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 1.6rem 0 0.7rem;
    color: #111827;
    letter-spacing: -0.02em;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #e5e7eb;
}

.rental-info-cms h2:first-child {
    margin-top: 0;
}

.rental-info-cms h3 {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 1.3rem 0 0.5rem;
    color: #1f2937;
}

.rental-info-cms h4 {
    font-size: 1rem;
    font-weight: 700;
    margin: 1.1rem 0 0.45rem;
    color: #1f2937;
}

.rental-info-cms img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    margin: 0.9rem auto;
    box-shadow: 0 3px 14px rgba(15, 23, 42, 0.10);
}

.rental-info-cms figure {
    margin: 1.2rem 0;
    text-align: center;
}

.rental-info-cms figure img {
    margin: 0 auto;
}

.rental-info-cms figcaption {
    font-size: 0.84rem;
    color: #6b7280;
    margin-top: 0.4rem;
}

.rental-info-cms a {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rental-info-cms ul,
.rental-info-cms ol {
    padding-left: 1.5rem;
    margin: 0.8rem 0;
}

.rental-info-cms li {
    margin: 0.3rem 0;
}

.rental-info-cms blockquote {
    margin: 1rem 0;
    padding: 0.7rem 1rem;
    border-left: 3px solid #f59e0b;
    background: #fffaf0;
    color: #6b4910;
    font-style: italic;
    border-radius: 0 8px 8px 0;
}

.rental-info-cms table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
    font-size: 0.93rem;
}

.rental-info-cms th,
.rental-info-cms td {
    border: 1px solid #e5e7eb;
    padding: 0.5rem 0.7rem;
    text-align: left;
}

.rental-info-cms th {
    background: #f9fafb;
    font-weight: 700;
}

.rental-info-cms hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 1.6rem 0;
}

.rental-info-cms code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: #f3f4f6;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.92em;
}

/* ABOUT 관리자 편집 페이지 (admin_about) */
.admin-about-manage {
    max-width: 1100px;
}

.admin-about-form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 1rem;
}

.admin-about-form__label {
    font-weight: 700;
    color: #374151;
    font-size: 0.92rem;
}

/* CKEditor 5 부착 전 raw textarea 시각 임시 — 부착 후엔 ck-editor 로 교체됨 */
.admin-about-editor {
    width: 100%;
    min-height: 360px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #1f2937;
}

.admin-about-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.4rem;
}

/* CKEditor 5 본문 영역에 about 페이지 typography 일부 미리보기 적용 */
.admin-about-manage .ck-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

/* ============================================================
 * SITE — 캠핑/백패킹 지점 카카오 지도 페이지
 * PC : 좌측 사이드 패널(검색/필터/리스트) + 우측 풀사이즈 지도 + 우측 슬라이드 디테일
 * 모바일 : 풀스크린 지도 + 상단 검색 + 하단 시트 (peek/expanded 상태 토글)
 * ============================================================ */

.site-page__notice {
    max-width: 600px;
    margin: 3rem auto;
    padding: 1.6rem 1.8rem;
    background: linear-gradient(165deg, #fffbeb 0%, #fff 70%);
    border: 1px solid rgba(217, 119, 6, 0.3);
    border-radius: 14px;
    text-align: center;
}

.site-page__notice h1, .site-page__notice h2 {
    margin: 0 0 0.6rem;
    font-size: 1.15rem;
    color: #b45309;
}

.site-page__notice p {
    margin: 0.4rem 0;
}

/* === PC === */
.site-page--pc {
    display: grid;
    grid-template-columns: 320px 1fr;
    height: clamp(600px, calc(100vh - 220px), 900px);
    /* inline 디테일과 시각적 정렬을 맞추기 위해 외곽 폭을 통일 (다른 PC 페이지와도 동일). */
    width: min(100% - 2rem, var(--pc-page-max));
    max-width: var(--pc-page-max);
    margin: 1.2rem auto 2rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.site-side-panel {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--line);
    background: #fff;
    overflow: hidden;
    min-width: 0;
}

.site-side-panel__head {
    padding: 1.1rem 1rem 0.7rem;
    border-bottom: 1px solid var(--line);
}

.site-side-panel__head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.site-side-panel__submit-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.8rem;
    background: #0f172a;
    color: #fff;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}

.site-side-panel__submit-btn:hover {
    background: #1e293b;
}

.site-side-panel__submit-btn:active {
    transform: scale(0.96);
}

.site-mobile-search {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.site-mobile-search__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #0f172a;
    color: #fff;
    border-radius: 50%;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    flex-shrink: 0;
}

/* 등록자 배지 — 운영자(짙은 슬레이트) vs 회원 제보(연한 인디고) 구분 */
.site-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 999px;
    letter-spacing: -0.005em;
    line-height: 1.2;
}

.site-badge--official {
    background: #f1f5f9;
    color: #475569;
}

.site-badge--member {
    background: #eef2ff;
    color: #4338ca;
}

/* 등록자 배지 — 카드 우측 상단으로 띄워서 본문 공간을 보존 */
.site-list-item__badge-row {
    position: absolute;
    top: 0.55rem;
    right: 0.6rem;
    margin: 0;
    z-index: 1;
}

.site-list-item__badge-row .site-badge {
    font-size: 0.66rem;
    padding: 0.14rem 0.42rem;
    white-space: nowrap;
    backdrop-filter: blur(2px);
}

.site-pop__badge-row {
    display: block;
    margin-top: 0.3rem;
}

.site-inline-detail .site-badge {
    align-self: flex-start;
    margin: 0.1rem 0;
}

/* ============================================================
 * /site_submit — 회원이 캠핑지를 제보하는 페이지
 * ============================================================ */
.site-submit-page {
    padding: 1.6rem clamp(1rem, 3vw, 2rem) 2.4rem;
}

.site-submit-head {
    margin-bottom: 1.6rem;
}

.site-submit-head h1 {
    margin: 0 0 0.4rem;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #0f172a;
}

.site-submit-notice {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.site-submit-notice--blocked {
    background: linear-gradient(165deg, #fff7f6 0%, #fff 70%);
    border-color: rgba(220, 38, 38, 0.25);
}

.site-submit-notice h2 {
    margin: 0 0 0.6rem;
    font-size: 1.2rem;
}

.site-submit-actions {
    display: flex;
    gap: 0.55rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.1rem;
}

.site-submit-form {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.6rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.site-submit-fs {
    border: 0;
    padding: 0;
    margin: 0;
}

.site-submit-fs > legend {
    padding: 0;
    margin: 0 0 0.7rem;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.015em;
}

.site-submit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.8rem 1rem;
}

.site-submit-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.site-submit-field--wide {
    grid-column: 1 / -1;
}

.site-submit-field--checks {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
    align-items: center;
    grid-column: 1 / -1;
}

.site-submit-field--checks label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.site-submit-field__label {
    font-size: 0.82rem;
    color: #475569;
    font-weight: 600;
}

.site-submit-field__label em {
    color: #dc2626;
    font-style: normal;
    margin-left: 0.15rem;
}

.site-submit-field input[type="text"],
.site-submit-field input[type="number"],
.site-submit-field input[type="date"],
.site-submit-field input[type="search"],
.site-submit-field select,
.site-submit-field textarea {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.site-submit-field input[readonly] {
    background: #f8fafc;
    color: #475569;
}

.site-submit-field input:focus,
.site-submit-field select:focus,
.site-submit-field textarea:focus {
    outline: 0;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.site-submit-field textarea {
    resize: vertical;
    min-height: 60px;
}

.site-submit-map {
    width: 100%;
    height: clamp(280px, 40vh, 460px);
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 0.7rem;
}

.site-submit-fs input[type="file"] {
    margin-bottom: 0.5rem;
}

.site-submit-photo-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.7rem;
}

.site-submit-photo-preview__cell {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
    border: 1px solid var(--line);
}

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

.site-submit-photo-preview__badge {
    position: absolute;
    bottom: 0.3rem;
    left: 0.3rem;
    padding: 0.15rem 0.45rem;
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    border-radius: 4px;
}

.site-submit-disclaimer {
    margin: 0.5rem 0 0;
    padding: 0.7rem 0.9rem;
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    font-size: 0.82rem;
    color: #92400e;
}

/* ============================================================
 * 관리자: 회원 관리 + 캠핑지 제보 차단 토글 카드
 * ============================================================ */
.admin-site-members-card {
    margin-top: 1rem;
}

.admin-site-members-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.6rem;
    font-size: 0.88rem;
}

.admin-site-members-table th,
.admin-site-members-table td {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.admin-site-members-table th {
    background: #f8fafc;
    font-weight: 700;
    color: #475569;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
}

.admin-site-members-table tr.is-blocked {
    background: #fffafa;
}

.admin-site-members-table .admin-site-block-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.85rem;
}

.admin-site-members-count {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    background: #eef2ff;
    color: #4338ca;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
}

.site-side-panel__title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.site-side-panel__sub {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    color: #6b7d92;
}

.site-side-panel__search {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--line);
}

.site-side-panel__search input,
.site-mobile-search input {
    width: 100%;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 0.9rem;
    color: #173652;
    background: #fff;
}

.site-side-panel__search input:focus,
.site-mobile-search input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.site-side-panel__filters,
.site-bottom-sheet__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid var(--line);
}

.site-bottom-sheet__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0.7rem 0.55rem;
    border-bottom: 0;
}

.site-filter-chip {
    flex: 0 0 auto;
    padding: 0.32rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: #5d6f82;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

.site-filter-chip:hover {
    border-color: var(--accent);
    color: var(--accent-dark);
}

.site-filter-chip.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.site-side-panel__list,
.site-bottom-sheet__list {
    list-style: none;
    margin: 0;
    padding: 0.55rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.site-side-panel__list {
    flex: 1;
}

.site-list-item {
    margin-bottom: 0.45rem;
}

.site-list-item__btn {
    position: relative;
    display: flex;
    width: 100%;
    gap: 0.65rem;
    padding: 0.5rem;
    padding-right: 0.7rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.site-list-item__btn:hover {
    border-color: var(--accent);
    background: #f7faff;
}

.site-list-item__thumb {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    border-radius: 8px;
    object-fit: cover;
    background: #e2e8f0;
}

.site-list-item__thumb--empty {
    background: linear-gradient(160deg, #e2e8f0 0%, #f1f5f9 100%);
}

.site-list-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.site-list-item__name {
    font-size: 0.92rem;
    font-weight: 700;
    color: #173652;
    line-height: 1.25;
}

.site-list-item__meta {
    font-size: 0.72rem;
    color: #6b7d92;
}

.site-list-item__desc {
    font-size: 0.78rem;
    color: #44546b;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.site-list__empty {
    padding: 1.2rem 1rem;
    color: #6b7d92;
    text-align: center;
    font-size: 0.85rem;
}

.site-map-wrap {
    position: relative;
    overflow: hidden;
}

.site-map {
    width: 100%;
    height: 100%;
    min-height: 400px;
}

.site-detail-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(380px, 100%);
    height: 100%;
    background: #fff;
    border-left: 1px solid var(--line);
    box-shadow: -4px 0 20px rgba(15, 23, 42, 0.08);
    overflow-y: auto;
    z-index: 5;
    animation: site-detail-slide 0.22s ease-out;
}

@keyframes site-detail-slide {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.site-detail-panel[hidden] {
    display: none;
}

.site-detail-panel__close {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 1;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.6);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.site-detail-panel__cover {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.site-detail-panel__body {
    padding: 1.1rem 1.2rem 1.4rem;
}

.site-detail-panel__name {
    margin: 0 0 0.3rem;
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.site-detail-panel__meta {
    margin: 0 0 0.7rem;
    font-size: 0.85rem;
    color: #6b7d92;
}

.site-detail-panel__desc {
    margin: 0 0 1rem;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #344155;
}

.site-detail-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
}

/* === 모바일 === */
.site-page--mobile {
    display: flex;
    flex-direction: column;
    position: relative;
    height: calc(100vh - 56px);
    margin: 0;
    overflow: hidden;
    background: #f1f5f9;
}

.site-mobile-search {
    flex: 0 0 auto;
    padding: 0.55rem 0.7rem;
    background: #fff;
    border-bottom: 1px solid var(--line);
    z-index: 6;
}

.site-map-wrap--mobile {
    flex: 1;
    min-height: 0;
}

.site-bottom-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: #fff;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.12);
    transform: translateY(calc(100% - 110px));
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
    max-height: 80%;
    display: flex;
    flex-direction: column;
}

.site-bottom-sheet[data-state="expanded"] {
    transform: translateY(0);
}

.site-bottom-sheet__handle {
    flex: 0 0 auto;
    width: 100%;
    padding: 0.55rem 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    justify-content: center;
}

.site-bottom-sheet__handle span {
    display: block;
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: #cbd5e1;
}

.site-bottom-sheet__list {
    flex: 1;
    min-height: 80px;
}

.site-detail-mobile {
    list-style: none;
}

.site-detail-mobile__back {
    margin: 0 0 0.55rem;
    padding: 0.32rem 0.6rem;
    border: 0;
    background: transparent;
    color: var(--accent-dark);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

/* ============================================================
 * SITE 페이지의 inline 상세 — '상세 보기' 클릭 시 같은 페이지 하단에 펼친다
 * 내부 컴포넌트는 site-detail-* 의 클래스들을 재사용
 * ============================================================ */
/* 폭은 부모 .main.main--pc-site > * 규칙(width: min(var(--pc-content-max), 100%-2rem))이
   자동으로 .site-page--pc 와 동일하게 맞춰주므로 여기서 max-width 를 따로 지정하지 않는다.
   .site-inline-detail 에 max-width 를 설정하면 부모 규칙을 더 좁게 덮어써서 정렬이 깨진다. */
.site-inline-detail {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 2rem;
    padding: 1.4rem 1.6rem 1.6rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
    scroll-margin-top: 1rem;
}

/* 모바일에서는 main.main--pc-site 컨테이너가 아니므로 inline-detail 은 자체 폭/마진을 사용. */
@media (max-width: 880px) {
    .site-inline-detail {
        margin: 0.6rem 0.7rem 1.2rem;
        padding: 1rem;
    }
}

.site-inline-detail[hidden] {
    display: none;
}

.site-inline-detail__close {
    position: absolute;
    top: 0.7rem;
    right: 0.85rem;
    z-index: 1;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.12);
    color: #0f172a;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}

.site-inline-detail__close:hover {
    background: rgba(15, 23, 42, 0.22);
}

.site-inline-detail .site-detail-section h3 {
    margin: 0 0 0.55rem;
    font-size: 1rem;
    font-weight: 800;
    color: #173652;
}

/* inline detail 헤더 — 카테고리/제목/설명/액션 4줄을 한 줄로 가로 배치.
   좁은 화면에서는 자연스럽게 줄바꿈된다 (flex-wrap). */
.site-inline-detail .site-detail-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem 1rem;
    padding: 0;
    margin: 0.5rem 0 1.2rem;
}

.site-inline-detail .site-detail-head__cat {
    margin: 0;
    padding: 0.28rem 0.7rem;
    background: #eef2ff;
    color: #3730a3;
    font-size: 0.76rem;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
    letter-spacing: -0.005em;
}

.site-inline-detail .site-detail-head__name {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.site-inline-detail .site-detail-head__lead {
    margin: 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
}

.site-inline-detail .site-detail-head__actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

/* ============================================================
 * inline detail 액션 바 — 갤러리와 정보 사이에 배치되는 CTA 그룹.
 * 액션이 정보 텍스트와 섞여 묻히지 않도록 별도 행 + 옅은 배경으로 분리.
 * ============================================================ */
.site-detail-actionbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1rem 0 1.4rem;
    padding: 0.7rem 0.9rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #fef3f2 100%);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.site-detail-actionbar__primary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.site-detail-actionbar__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.05rem;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    line-height: 1.2;
}

.site-detail-actionbar__cta--primary {
    background: linear-gradient(135deg, #f97316 0%, #dc2626 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.22), 0 1px 2px rgba(220, 38, 38, 0.18);
}

.site-detail-actionbar__cta--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.32), 0 2px 4px rgba(220, 38, 38, 0.22);
}

.site-detail-actionbar__cta--secondary {
    background: #fff;
    color: #0f172a;
    border: 1px solid rgba(15, 23, 42, 0.12);
}

.site-detail-actionbar__cta--secondary:hover {
    background: #f1f5f9;
    border-color: rgba(15, 23, 42, 0.2);
}

.site-detail-actionbar__icon {
    font-size: 1rem;
    line-height: 1;
}

.site-detail-actionbar__owner-link {
    color: #475569;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.3rem 0.55rem;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}

.site-detail-actionbar__owner-link:hover {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
}

@media (max-width: 640px) {
    .site-detail-actionbar {
        flex-direction: column;
        align-items: stretch;
    }
    .site-detail-actionbar__primary {
        justify-content: stretch;
    }
    .site-detail-actionbar__cta {
        flex: 1 1 auto;
        justify-content: center;
    }
    .site-detail-actionbar__owner-link {
        text-align: right;
    }
}

.site-inline-detail .site-detail-gallery__main {
    aspect-ratio: 16 / 9;
    max-height: 480px;
}

/* ============================================================
 * 카카오 CustomOverlay 말풍선 (hover/click 공용)
 * 디자인: 부드러운 화이트 카드 + 약한 그림자. 버튼은 톤다운된 슬레이트 색.
 * ============================================================ */
.site-pop {
    position: relative;
    width: 256px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 24px rgba(15, 23, 42, 0.12),
        0 18px 38px rgba(15, 23, 42, 0.07);
    overflow: hidden;
    animation: site-pop-in 0.16s ease-out;
}

@keyframes site-pop-in {
    from { opacity: 0; transform: translateY(4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.site-pop--hover {
    /* hover 카드도 동일 디자인. 차이는 X 버튼 유무뿐. */
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 6px 18px rgba(15, 23, 42, 0.10),
        0 14px 30px rgba(15, 23, 42, 0.06);
}

.site-pop__close {
    position: absolute;
    top: 0.5rem;
    right: 0.55rem;
    z-index: 2;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}

.site-pop__close:hover {
    background: rgba(15, 23, 42, 0.78);
}

.site-pop__cover {
    width: 100%;
    height: 120px;
    background-size: cover;
    background-position: center;
    background-color: #e2e8f0;
}

.site-pop__body {
    padding: 0.7rem 0.9rem 0.85rem;
}

.site-pop__meta {
    margin: 0 0 0.22rem;
    font-size: 0.72rem;
    color: #6b7280;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.site-pop__name {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.site-pop__desc {
    margin: 0.32rem 0 0;
    font-size: 0.8rem;
    color: #475569;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.site-pop__actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.7rem;
}

/* 톤다운된 액션 버튼 — primary 색을 빼고 슬레이트 톤으로.
   배경은 옅은 슬레이트, 텍스트는 짙은 슬레이트, hover 시 한 단계 진하게. */
.site-pop__btn {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #334155;
    background: #f1f5f9;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.site-pop__btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.site-pop__btn:active {
    transform: scale(0.98);
}

.site-pop__btn span {
    font-weight: 500;
    color: #94a3b8;
    transition: transform 0.15s ease, color 0.15s ease;
}

.site-pop__btn:hover span {
    transform: translateX(2px);
    color: #475569;
}

/* 핀 쪽으로 향하는 삼각형 꼬리 — 카드와 핀 사이 시각 연결 */
.site-pop__tail {
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 12px;
    height: 12px;
    transform: translateX(-50%) rotate(45deg);
    background: #fff;
    border-right: 1px solid rgba(15, 23, 42, 0.06);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 2px 2px 4px rgba(15, 23, 42, 0.04);
}

/* ============================================================
 * 관리자 SITE 페이지 — 카카오 키 설정 + 사이트 목록 + 신규/수정 폼
 * ============================================================ */
.admin-site-manage .admin-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.admin-site-manage h2 {
    margin: 0 0 0.55rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: #173652;
}

.admin-site-key-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1rem;
    align-items: flex-end;
    margin-top: 0.65rem;
}

.admin-site-key-current {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.78rem;
}

.admin-site-key-current code {
    background: #f1f5f9;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

.admin-site-list-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 0.7rem;
}

.admin-site-list-table-wrap {
    overflow-x: auto;
    margin: 0 -1.4rem;
    padding: 0 1.4rem;
}

.admin-site-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.admin-site-list-table th {
    text-align: left;
    padding: 0.5rem 0.55rem;
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    font-size: 0.78rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.admin-site-list-table td {
    padding: 0.55rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.admin-site-list-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    background: #e2e8f0;
    display: inline-block;
}

.admin-site-list-thumb--empty {
    background: linear-gradient(160deg, #e2e8f0 0%, #f1f5f9 100%);
}

.admin-site-list-coord {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    color: #475569;
    white-space: nowrap;
}

.admin-site-list-actions {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    white-space: nowrap;
}

.admin-site-list-link {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent-dark);
    background: none;
    border: 0;
    padding: 0.18rem 0.4rem;
    cursor: pointer;
    text-decoration: underline;
}

.admin-site-list-link--danger {
    color: #b91c1c;
}

.admin-site-form-card {
    padding: 1.4rem 1.6rem 1.6rem;
}

.admin-site-form-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--line);
}

.admin-site-form-head h2 {
    margin: 0;
    font-size: 1.15rem;
}

.admin-site-form-warn {
    margin: 0 0 0.85rem;
    padding: 0.7rem 0.95rem;
    background: #fffbeb;
    border: 1px solid rgba(217, 119, 6, 0.3);
    border-radius: 10px;
    color: #92400e;
    font-size: 0.85rem;
}

.admin-site-fs {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem 1rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fbfdff;
}

.admin-site-fs > legend {
    padding: 0 0.45rem;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--accent-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-site-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.7rem 0.85rem;
}

.admin-site-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.admin-site-field--wide {
    grid-column: 1 / -1;
}

.admin-site-field--checks {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.admin-site-field--checks label {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    font-size: 0.85rem;
    color: #344155;
}

.admin-site-field__label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #44546b;
}

.admin-site-field__label em {
    color: #dc2626;
    font-style: normal;
    margin-left: 0.18em;
}

.admin-site-field__hint {
    font-size: 0.74rem;
    color: #6b7d92;
    margin-top: 0.1rem;
}

.admin-site-field input[type="text"],
.admin-site-field input[type="number"],
.admin-site-field input[type="date"],
.admin-site-field select,
.admin-site-field textarea {
    width: 100%;
    padding: 0.42rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 7px;
    font-size: 0.88rem;
    font-family: inherit;
    color: #173652;
    background: #fff;
}

.admin-site-field textarea {
    resize: vertical;
    min-height: 60px;
}

.admin-site-field input:focus,
.admin-site-field select:focus,
.admin-site-field textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.admin-site-sub {
    margin: 0.85rem 0 0.45rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #475569;
}

.admin-site-map {
    width: 100%;
    height: 360px;
    border-radius: 10px;
    border: 1px solid var(--line);
    margin-bottom: 0.55rem;
    background: #e2e8f0;
}

.admin-site-pick-hint {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin: 0 0 0.7rem;
    font-size: 0.82rem;
}

.admin-site-mini-btn {
    padding: 0.32rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.admin-site-mini-btn:hover {
    border-color: var(--accent);
    color: var(--accent-dark);
}

.admin-site-mini-btn.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.admin-site-cover-uploader {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-top: 0.32rem;
}

.admin-site-cover-preview {
    margin-top: 0.55rem;
    max-width: 280px;
    max-height: 180px;
    border-radius: 8px;
    border: 1px solid var(--line);
    object-fit: cover;
}

.admin-site-form-actions {
    margin: 1.2rem 0 0;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.admin-site-photos {
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
}

.admin-site-photos h3 {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    font-weight: 800;
    color: #173652;
}

.admin-site-photos-uploader {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin: 0.55rem 0 0.85rem;
}

.admin-site-photo-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.55rem;
}

.admin-site-photo-item {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: #e2e8f0;
}

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

.admin-site-photo-remove {
    position: absolute;
    top: 0.32rem;
    right: 0.32rem;
    padding: 0.18rem 0.45rem;
    background: rgba(15, 23, 42, 0.7);
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}

/* ============================================================
 * SITE 단일 사이트 상세 (/site/{slug})
 * 큰 갤러리 + 핵심 스펙 그리드 + 본문 + 미니 지도
 * ============================================================ */
.site-detail-page {
    max-width: 960px;
    margin: 1.2rem auto 2rem;
}

.site-detail-not-found {
    max-width: 600px;
    margin: 4rem auto;
    text-align: center;
}

.site-detail-preview-banner {
    margin: 0 0 0.7rem;
    padding: 0.5rem 0.85rem;
    background: #fffbeb;
    border: 1px solid rgba(217, 119, 6, 0.3);
    border-radius: 8px;
    color: #92400e;
    font-size: 0.85rem;
    font-weight: 700;
}

.site-detail-gallery {
    margin: 0 0 1.2rem;
    border-radius: 14px;
    overflow: hidden;
    background: #0f172a;
}

.site-detail-gallery__main {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0f172a;
}

.site-detail-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.site-detail-gallery__thumbs {
    list-style: none;
    margin: 0;
    padding: 0.55rem;
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #0f172a;
}

.site-detail-gallery__thumb {
    flex: 0 0 auto;
    width: 80px;
    height: 56px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    background: #1e293b;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.site-detail-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.site-detail-gallery__thumb.is-active {
    border-color: var(--accent);
}

.site-detail-head {
    padding: 0 0.4rem;
    margin: 0 0 1.2rem;
}

.site-detail-head__cat {
    margin: 0 0 0.3rem;
    font-size: 0.85rem;
    color: var(--accent-dark);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.site-detail-head__name {
    margin: 0 0 0.4rem;
    font-size: clamp(1.5rem, 3.2vw, 2rem);
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.site-detail-head__lead {
    margin: 0 0 0.85rem;
    font-size: 1rem;
    color: #475569;
    line-height: 1.55;
}

.site-detail-head__actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.site-detail-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.55rem;
    margin: 0 0 1.6rem;
    padding: 1rem 1.1rem;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.site-detail-spec {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.45rem 0.55rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.site-detail-spec__label {
    font-size: 0.72rem;
    color: #6b7d92;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.site-detail-spec__value {
    font-size: 0.95rem;
    color: #0f172a;
    font-weight: 700;
}

.site-detail-spec__hint {
    font-size: 0.74rem;
    color: #6b7d92;
}

.site-detail-body {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.site-detail-section {
    padding: 1rem 1.2rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.site-detail-section h2 {
    margin: 0 0 0.55rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: #173652;
    letter-spacing: -0.01em;
}

.site-detail-section p {
    margin: 0 0 0.55rem;
    line-height: 1.65;
    color: #344155;
}

.site-detail-section--warn {
    background: linear-gradient(165deg, #fffbeb 0%, #fff 70%);
    border-color: rgba(217, 119, 6, 0.3);
}

.site-detail-section--warn h2 {
    color: #b45309;
}

.site-detail-rich img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0.55rem 0;
}

.site-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
    margin: 0;
}

.site-detail-tag {
    display: inline-block;
    padding: 0.22rem 0.6rem;
    background: var(--accent-soft);
    color: var(--accent-dark);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.site-detail-map-section {
    margin-top: 1.1rem;
}

.site-detail-mini-map {
    width: 100%;
    height: 480px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #e2e8f0;
}

.site-detail-coord {
    margin: 0.55rem 0 0;
    font-size: 0.78rem;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}


/* ============================================================
 * /admin_handover — 운영 가이드 페이지 (정돈된 버전)
 * 페이지 헤더 / 요약 카드 / 6단계 카드 / 펼침 / 코드 블록 통합 디자인
 * ============================================================ */
.admin-handover {
    padding: 0.6rem 1.4rem 2.4rem;
}

.admin-handover .admin-section-head {
    position: relative;
    margin-bottom: 1.6rem;
    padding: 1.5rem 1.6rem 1.5rem 2.1rem;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #8b5cf6 100%);
    border-radius: 16px;
    color: #fff;
    box-shadow: 0 12px 28px rgba(99, 102, 241, 0.22), 0 4px 8px rgba(99, 102, 241, 0.1);
    overflow: hidden;
}

.admin-handover .admin-section-head::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(80% 100% at 100% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 60%),
        radial-gradient(60% 80% at 0% 100%, rgba(0, 0, 0, 0.08) 0%, transparent 55%);
    pointer-events: none;
}

.admin-handover .admin-section-head h1 {
    position: relative;
    margin: 0 0 0.35rem;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #fff;
    line-height: 1.2;
}

.admin-handover .admin-section-head .muted-note {
    position: relative;
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* 한눈에 보는 설정 상태 카드 */
.hover-overview {
    margin-bottom: 1.6rem;
    padding: 1.3rem 1.4rem 1.4rem;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 8px 24px rgba(15, 23, 42, 0.04);
}

.hover-overview h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.95rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.hover-overview h2::before {
    content: '✨';
    font-size: 1.05rem;
}

.hover-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.55rem;
    margin: 0;
}

.hover-status-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.85rem;
    background: linear-gradient(135deg, #fafbfc 0%, #f4f6fa 100%);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 10px;
    font-size: 0.85rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hover-status-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
}

.hover-status-item__icon {
    font-size: 1.15rem;
    flex-shrink: 0;
    line-height: 1;
}

.hover-status-item__label {
    flex: 1 1 auto;
    color: #1e293b;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.hover-status {
    flex-shrink: 0;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.4;
    white-space: nowrap;
}

.hover-status--ok {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.hover-status--miss {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #b91c1c;
    border: 1px solid rgba(220, 38, 38, 0.22);
}

.hover-status--warn {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.hover-base-url {
    display: inline-block;
    margin-top: 0.85rem;
    padding: 0.32rem 0.65rem;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 6px;
    font-size: 0.78rem;
    font-family: ui-monospace, "SFMono-Regular", monospace;
    color: #1e293b;
}

.hover-overview > .muted-note {
    margin: 0.95rem 0 0;
    font-size: 0.78rem;
    color: #64748b;
}

/* 단계 카드 — 좌측 색 액센트 막대 + 큰 숫자 배지 */
.hover-step {
    position: relative;
    margin-bottom: 1.05rem;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 6px 18px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.2s ease;
}

.hover-step:hover {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 10px 28px rgba(15, 23, 42, 0.07);
}

.hover-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #6366f1 0%, #4338ca 100%);
}

#hover-step-kakao-map::before { background: linear-gradient(180deg, #fbbf24, #f59e0b); }
#hover-step-payment::before { background: linear-gradient(180deg, #10b981, #059669); }
#hover-step-oauth::before { background: linear-gradient(180deg, #3b82f6, #2563eb); }
#hover-step-notification::before { background: linear-gradient(180deg, #ec4899, #be185d); }
#hover-step-demo-cleanup::before { background: linear-gradient(180deg, #94a3b8, #64748b); }
#hover-step-ops::before { background: linear-gradient(180deg, #a78bfa, #8b5cf6); }
#hover-step-troubleshoot::before { background: linear-gradient(180deg, #f87171, #dc2626); }
#hover-step-access::before { background: linear-gradient(180deg, #06b6d4, #0e7490); }

.hover-step__head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    padding: 1.05rem 1.35rem 1.05rem 1.45rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.85) 0%, #ffffff 100%);
}

.hover-step__head h2 {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    color: #0f172a;
    flex: 1 1 auto;
    min-width: 0;
    letter-spacing: -0.02em;
}

.hover-step__head > .muted-note {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: #64748b;
}

.hover-step__num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
    color: #fff;
    border-radius: 50%;
    font-size: 0.95rem;
    font-weight: 800;
    box-shadow: 0 3px 8px rgba(99, 102, 241, 0.3);
    letter-spacing: -0.02em;
}

#hover-step-kakao-map .hover-step__num { background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 3px 8px rgba(245, 158, 11, 0.3); }
#hover-step-payment .hover-step__num { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 3px 8px rgba(16, 185, 129, 0.3); }
#hover-step-oauth .hover-step__num { background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3); }
#hover-step-demo-cleanup .hover-step__num { background: linear-gradient(135deg, #94a3b8, #64748b); box-shadow: 0 3px 8px rgba(100, 116, 139, 0.3); }
#hover-step-ops .hover-step__num { background: linear-gradient(135deg, #a78bfa, #8b5cf6); box-shadow: 0 3px 8px rgba(139, 92, 246, 0.3); }
#hover-step-troubleshoot .hover-step__num { background: linear-gradient(135deg, #f87171, #dc2626); box-shadow: 0 3px 8px rgba(220, 38, 38, 0.3); }
#hover-step-notification .hover-step__num { background: linear-gradient(135deg, #ec4899, #be185d); box-shadow: 0 3px 8px rgba(236, 72, 153, 0.3); }
#hover-step-access .hover-step__num { background: linear-gradient(135deg, #22d3ee, #0e7490); box-shadow: 0 3px 8px rgba(14, 116, 144, 0.3); }

.hover-step__lead {
    margin: 1rem 1.4rem 0.6rem;
    font-size: 0.92rem;
    color: #475569;
    line-height: 1.62;
}

.hover-step__list {
    margin: 0.85rem 1.4rem 1.15rem;
    padding-left: 1.6rem;
    font-size: 0.92rem;
    line-height: 1.78;
    color: #1e293b;
}

.hover-step__list li {
    margin-bottom: 0.35rem;
}

.hover-step__list li::marker {
    color: #6366f1;
    font-weight: 800;
}

.hover-step__list code {
    padding: 0.12rem 0.5rem;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 4px;
    font-family: ui-monospace, "SFMono-Regular", monospace;
    font-size: 0.84em;
    color: #4338ca;
    word-break: break-all;
    font-weight: 600;
}

.hover-step__list a {
    color: #4338ca;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(67, 56, 202, 0.3);
    transition: border-color 0.15s ease;
}

.hover-step__list a:hover {
    border-bottom-color: #4338ca;
}

.hover-step__list a[target="_blank"]::after {
    content: ' \2197';
    font-size: 0.85em;
    color: #94a3b8;
    margin-left: 0.1rem;
}

.hover-callback-list {
    margin: 0.55rem 0 0.55rem;
    padding-left: 1.4rem;
    list-style: none;
    border-left: 2px solid rgba(99, 102, 241, 0.18);
}

.hover-callback-list li {
    position: relative;
    padding: 0.18rem 0;
    font-size: 0.86rem;
    line-height: 1.55;
}

.hover-callback-list li::before {
    content: '\21B3';
    position: absolute;
    left: -1.05rem;
    color: #94a3b8;
    font-weight: 700;
}

/* 펼침 details 카드 */
.hover-detail {
    margin: 0 1.4rem 0.7rem;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 10px;
    background: #fafbfc;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.hover-detail[open] {
    background: #ffffff;
    border-color: rgba(99, 102, 241, 0.22);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.06), 0 0 0 3px rgba(99, 102, 241, 0.05);
}

.hover-detail summary {
    padding: 0.78rem 1rem;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.92rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    list-style: none;
    transition: color 0.15s ease;
    letter-spacing: -0.01em;
}

.hover-detail summary::-webkit-details-marker {
    display: none;
}

.hover-detail summary::before {
    content: '\25B8';
    color: #94a3b8;
    transition: transform 0.2s ease, color 0.15s ease;
    margin-right: 0.5rem;
    flex-shrink: 0;
    font-size: 0.78rem;
}

.hover-detail[open] summary::before {
    transform: rotate(90deg);
    color: #6366f1;
}

.hover-detail summary:hover {
    color: #4338ca;
}

.hover-detail summary > .hover-status {
    margin-left: auto;
}

.hover-detail .hover-step__list,
.hover-detail ul {
    margin: 0.5rem 1.05rem 0.85rem;
    padding-left: 1.4rem;
}

.hover-detail ul {
    list-style: disc;
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.65;
}

.hover-detail ul li {
    margin-bottom: 0.25rem;
}

.hover-detail ul li strong {
    color: #1e293b;
}

/* 코드 블록 — 다크 톤 + 미세 그라디언트 */
.hover-code {
    margin: 0.85rem 1.4rem 1.15rem;
    padding: 1.05rem 1.2rem;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #f1f5f9;
    border-radius: 10px;
    font-family: ui-monospace, "SFMono-Regular", monospace;
    font-size: 0.88rem;
    line-height: 1.75;
    overflow-x: auto;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hover-code code {
    display: block;
    white-space: pre;
    color: #f1f5f9;
    font-weight: 500;
}

/* 운영 점검 리스트 */
.hover-ops-list {
    margin: 0.95rem 1.4rem 1.15rem;
    padding-left: 1.4rem;
    font-size: 0.92rem;
    line-height: 1.85;
    color: #334155;
    list-style: none;
}

.hover-ops-list li {
    position: relative;
    margin-bottom: 0.45rem;
    padding-left: 0.5rem;
}

.hover-ops-list li::before {
    content: '\25CF';
    position: absolute;
    left: -0.85rem;
    color: #6366f1;
    font-size: 0.72rem;
    top: 0.42rem;
}

.hover-ops-list strong {
    display: inline-block;
    min-width: 5.5rem;
    color: #0f172a;
    font-weight: 800;
}

.hover-ops-list a {
    color: #4338ca;
    font-weight: 700;
}

@media (max-width: 720px) {
    .admin-handover {
        padding: 0.6rem 0.9rem 2rem;
    }
    .admin-handover .admin-section-head {
        padding: 1.2rem 1.2rem 1.2rem 1.55rem;
    }
    .admin-handover .admin-section-head h1 {
        font-size: 1.35rem;
    }
    .hover-status-grid {
        grid-template-columns: 1fr;
    }
    .hover-step__head {
        padding: 0.85rem 1.05rem 0.85rem 1.15rem;
    }
    .hover-step__lead,
    .hover-step__list,
    .hover-detail,
    .hover-code,
    .hover-ops-list {
        margin-left: 1.05rem;
        margin-right: 1.05rem;
    }
}

/* ============================================================
 * /admin_members — 회원 관리
 * ============================================================ */
.admin-members {
    padding: 0.6rem 1.4rem 2.4rem;
}

.admin-members__head {
    margin-bottom: 1.2rem;
}

.admin-members__head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-members__head-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.admin-members__head h1 {
    margin: 0 0 0.3rem;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #0f172a;
}

/* 목록 모드 — 검색 + 정렬 toolbar */
.admin-members-list-card {
    padding: 1.2rem 1.3rem 1.3rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 8px 24px rgba(15, 23, 42, 0.04);
}

.admin-members-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.6rem;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
    border-radius: 10px;
    margin-bottom: 0.7rem;
}

.admin-members-toolbar__search {
    display: flex;
    gap: 0.45rem;
    flex: 1 1 320px;
    align-items: center;
}

.admin-members-toolbar__search input[type="search"] {
    flex: 1 1 auto;
    padding: 0.5rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    font-size: 0.92rem;
    min-width: 180px;
}

.admin-members-toolbar__sort label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.84rem;
    color: #475569;
    font-weight: 600;
}

.admin-members-toolbar__sort select {
    padding: 0.4rem 0.7rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    font-size: 0.88rem;
    cursor: pointer;
}

.admin-members-summary {
    margin: 0 0 0.85rem;
    font-size: 0.85rem;
    color: #475569;
}

.admin-members-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 12px;
    background: #fff;
}

.admin-members-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.88rem;
    background: #fff;
}

.admin-members-table thead th {
    padding: 0.72rem 0.8rem;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    text-align: left;
    font-weight: 800;
    font-size: 0.74rem;
    color: #475569;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    position: sticky;
    top: 0;
    z-index: 1;
}

.admin-members-table thead th.num {
    text-align: right;
}

.admin-members-table tbody tr.admin-members-row {
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
}

.admin-members-table tbody tr.admin-members-row td:first-child {
    border-left: 3px solid #6366f1;
}

.admin-members-table tbody tr.admin-members-row.is-blocked td:first-child {
    border-left-color: #dc2626;
}

.admin-members-table tbody tr.admin-members-row:hover {
    background: linear-gradient(180deg, #fafbff 0%, #f1f5ff 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -10px rgba(99, 102, 241, 0.4);
    z-index: 2;
}

.admin-members-table tbody tr.admin-members-row.is-blocked {
    background: #fffbfb;
}

.admin-members-table tbody tr.admin-members-row.is-blocked:hover {
    background: linear-gradient(180deg, #fff5f5 0%, #ffecec 100%);
    box-shadow: 0 6px 16px -10px rgba(220, 38, 38, 0.4);
}

.admin-members-table td {
    padding: 0.78rem 0.8rem;
    vertical-align: middle;
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
}

.admin-members-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
    font-weight: 700;
}

.admin-members-table td.num.is-zero {
    color: #cbd5e1;
    font-weight: 500;
}

.admin-members-row__name-wrap {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.admin-members-avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
    background: linear-gradient(135deg, #818cf8, #6366f1);
    user-select: none;
}

.admin-members-avatar--naver {
    background: linear-gradient(135deg, #34d399, #16a34a);
}

.admin-members-avatar--kakao {
    background: linear-gradient(135deg, #fde047, #f59e0b);
    color: #422006;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.admin-members-avatar--google {
    background: linear-gradient(135deg, #f87171, #4285f4);
}

.admin-members-row__id {
    min-width: 0;
}

.admin-members-row__name {
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.admin-members-row__sub {
    margin-top: 0.18rem;
    font-size: 0.76rem;
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}

.admin-members-row__oauth {
    padding: 0.08rem 0.5rem;
    background: rgba(99, 102, 241, 0.1);
    color: #4338ca;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-members-row__oauth--naver {
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
}

.admin-members-row__oauth--kakao {
    background: rgba(245, 158, 11, 0.16);
    color: #92400e;
}

.admin-members-row__oauth--google {
    background: rgba(66, 133, 244, 0.14);
    color: #1e40af;
}

.admin-members-row__cell--contact {
    max-width: 230px;
}

.admin-members-row__email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1e293b;
    font-weight: 500;
}

.admin-members-row__phone {
    margin-top: 0.18rem;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.admin-members-row__date {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 0.82rem;
}

.admin-members-status {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    padding: 0.24rem 0.62rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    white-space: nowrap;
}

.admin-members-status--ok {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(16, 185, 129, 0.08));
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.admin-members-status--blocked {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.16), rgba(220, 38, 38, 0.08));
    color: #b91c1c;
    border: 1px solid rgba(220, 38, 38, 0.22);
    animation: admin-members-blocked-pulse 2.4s ease-in-out infinite;
}

@keyframes admin-members-blocked-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.18); }
    50%      { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0); }
}

.admin-members-actions-cell {
    text-align: right;
    white-space: nowrap;
}

.admin-members-row__action {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    padding: 0.4rem 0.82rem;
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 8px;
    color: #4338ca;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.18s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.admin-members-row__action:hover {
    background: linear-gradient(135deg, #6366f1, #4338ca);
    color: #fff;
    border-color: #4338ca;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -3px rgba(67, 56, 202, 0.5);
}

.admin-members-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #94a3b8;
}

.admin-members-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin-top: 1rem;
}

.admin-members-pager__link {
    padding: 0.4rem 0.85rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 7px;
    color: #475569;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
}

.admin-members-pager__link:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.admin-members-pager__cur {
    font-size: 0.86rem;
    color: #1e293b;
    font-weight: 700;
}

/* 수정 모드 — 회원 1명 편집 카드 */
.admin-member-edit-card {
    padding: 1.4rem 1.5rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 8px 24px rgba(15, 23, 42, 0.04);
}

.admin-member-edit-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.admin-member-edit-card__head h2 {
    font-size: 1.18rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.admin-member-login-id {
    font-size: 0.84rem;
    font-weight: 600;
    color: #64748b;
}

.admin-member-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.admin-member-form__grid label {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
}

.admin-member-form__grid input {
    padding: 0.55rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    font-size: 0.92rem;
    font-weight: 500;
    color: #0f172a;
}

.admin-member-form__grid input[readonly] {
    background: #f8fafc;
    color: #64748b;
    font-family: ui-monospace, monospace;
    cursor: not-allowed;
}

.admin-member-form__grid input:focus {
    outline: 0;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.admin-member-form__actions {
    margin: 0 0 1.1rem;
}

.admin-member-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(15, 23, 42, 0.1);
}

.admin-member-actions-row form.inline {
    margin: 0;
    display: inline-block;
}

.admin-member-action-btn {
    padding: 0.5rem 0.95rem;
    border: 1px solid;
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.admin-member-action-btn--warn {
    background: #fff;
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.4);
}

.admin-member-action-btn--warn:hover {
    background: #fef3c7;
    border-color: #f59e0b;
}

.admin-member-action-btn--ghost {
    background: #fff;
    color: #475569;
    border-color: rgba(15, 23, 42, 0.12);
}

.admin-member-action-btn--ghost:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.admin-member-action-btn--danger {
    background: #fff;
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.32);
}

.admin-member-action-btn--danger:hover {
    background: #fef2f2;
    border-color: #dc2626;
}

.admin-member-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.7rem;
    margin-top: 1.2rem;
    padding-top: 1.1rem;
    border-top: 1px dashed rgba(15, 23, 42, 0.08);
}

.admin-member-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.55rem 0.85rem;
    background: #f8fafc;
    border-radius: 8px;
}

.admin-member-meta-item__label {
    font-size: 0.72rem;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.admin-member-meta-item__value {
    font-size: 0.94rem;
    font-weight: 700;
    color: #0f172a;
}

/* ============================================================
 * /admin_stats — 통계 리포트
 * ============================================================ */
.admin-stats {
    padding: 0.6rem 1.4rem 2.4rem;
}

.admin-stats-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.7rem;
    margin: 0.5rem 0 1.4rem;
}

.admin-stats-kpi {
    position: relative;
    padding: 0.95rem 1.1rem 0.95rem 1.4rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.admin-stats-kpi::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #6366f1, #4338ca);
}

.admin-stats-kpi--rev::before { background: linear-gradient(180deg, #f59e0b, #d97706); }
.admin-stats-kpi--res::before { background: linear-gradient(180deg, #10b981, #059669); }
.admin-stats-kpi--mem::before { background: linear-gradient(180deg, #6366f1, #4338ca); }
.admin-stats-kpi--rev2::before { background: linear-gradient(180deg, #ec4899, #be185d); }
.admin-stats-kpi--site::before { background: linear-gradient(180deg, #06b6d4, #0e7490); }

.admin-stats-kpi__icon {
    font-size: 1.05rem;
}

.admin-stats-kpi__num {
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.admin-stats-kpi__unit {
    font-size: 0.7em;
    color: #64748b;
    margin-left: 0.18em;
    font-weight: 700;
}

.admin-stats-kpi__label {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
}

.admin-stats-chart {
    margin-bottom: 1.2rem;
    padding: 1.2rem 1.4rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 6px 18px rgba(15, 23, 42, 0.04);
}

.admin-stats-chart__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.admin-stats-chart__head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.015em;
}

.admin-stats-bars {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.4rem;
    height: 200px;
    align-items: end;
}

.admin-stats-bar {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    height: 100%;
    border-radius: 6px 6px 0 0;
    background: rgba(15, 23, 42, 0.03);
    transition: background 0.15s ease;
    cursor: default;
}

.admin-stats-bar:hover {
    background: rgba(99, 102, 241, 0.08);
}

.admin-stats-bar__fill {
    border-radius: 6px 6px 0 0;
    transition: height 0.5s ease;
}

.admin-stats-bar--rev .admin-stats-bar__fill {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
}

.admin-stats-bar--signup .admin-stats-bar__fill {
    background: linear-gradient(180deg, #6366f1 0%, #4338ca 100%);
}

.admin-stats-bar__amount {
    position: absolute;
    bottom: calc(100% - 18px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.66rem;
    font-weight: 800;
    color: #0f172a;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.85);
    padding: 0 0.18rem;
    border-radius: 3px;
}

.admin-stats-bar__label {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    text-align: center;
    margin-top: 0.32rem;
    font-size: 0.74rem;
    color: #64748b;
    font-weight: 600;
}

.admin-stats-twocol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 1rem;
}

.admin-stats-rank {
    padding: 1.2rem 1.3rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 6px 18px rgba(15, 23, 42, 0.04);
}

.admin-stats-rank h2 {
    margin: 0 0 0.8rem;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.admin-stats-rank__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.admin-stats-rank__list li {
    display: grid;
    grid-template-columns: 30px 1fr;
    grid-template-rows: auto auto;
    gap: 0.18rem 0.5rem;
    padding: 0.55rem 0.7rem;
    background: #fafbfc;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.05);
    transition: background 0.15s ease;
}

.admin-stats-rank__list li:hover {
    background: #f1f5f9;
}

.admin-stats-rank__num {
    grid-row: 1 / span 2;
    align-self: center;
    font-weight: 800;
    font-size: 0.9rem;
    color: #6366f1;
    text-align: center;
}

.admin-stats-rank__name {
    grid-column: 2;
    grid-row: 1;
    font-weight: 700;
    color: #0f172a;
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-stats-rank__metric {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.74rem;
    color: #64748b;
    font-weight: 500;
}

/* ============================================================
 * 공지사항·FAQ — 고객 + 관리자 공통 스타일
 * ============================================================ */
.customer-notice-page {
    max-width: 880px;
    margin: 0 auto;
    padding: 1.4rem 1.4rem 2.4rem;
}

.customer-notice-head {
    margin-bottom: 1.2rem;
}

.customer-notice-head h1 {
    margin: 0 0 0.35rem;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #0f172a;
}

.customer-notice-tabs {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.95rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.customer-notice-tabs a {
    padding: 0.55rem 1rem;
    color: #64748b;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.customer-notice-tabs a:hover { color: #4338ca; }
.customer-notice-tabs a.is-active {
    color: #4338ca;
    border-bottom-color: #6366f1;
}

.customer-notice-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.customer-notice-item {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.customer-notice-item.is-pinned {
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 70%);
    border-color: rgba(245, 158, 11, 0.3);
}

.customer-notice-item[open] {
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.08);
}

.customer-notice-item summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    cursor: pointer;
    list-style: none;
    transition: background 0.15s ease;
}

.customer-notice-item summary::-webkit-details-marker { display: none; }
.customer-notice-item summary::before {
    content: '▸';
    color: #94a3b8;
    transition: transform 0.2s ease, color 0.15s ease;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.customer-notice-item[open] summary::before {
    transform: rotate(90deg);
    color: #6366f1;
}

.customer-notice-item summary:hover {
    background: rgba(99, 102, 241, 0.04);
}

.customer-notice-pin { font-size: 0.95rem; }

.customer-notice-title {
    flex: 1 1 auto;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
    font-size: 0.96rem;
}

.customer-notice-date {
    font-size: 0.78rem;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.customer-notice-body {
    padding: 0.4rem 1.1rem 1.1rem 2rem;
    border-top: 1px dashed rgba(15, 23, 42, 0.06);
    color: #334155;
    font-size: 0.92rem;
    line-height: 1.7;
}

.customer-notice-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    background: #fff;
    border: 1px dashed rgba(15, 23, 42, 0.08);
    border-radius: 10px;
}

/* 관리자 — 공지·FAQ 관리 */
.admin-notice {
    padding: 0.6rem 1.4rem 2.4rem;
}

.admin-notice-list__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.admin-notice-list__head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.admin-notice-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.admin-notice-table thead th {
    padding: 0.55rem 0.7rem;
    background: #f8fafc;
    text-align: left;
    font-weight: 700;
    font-size: 0.76rem;
    color: #475569;
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

.admin-notice-table td {
    padding: 0.65rem 0.7rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

.admin-notice-table tr.is-hidden { opacity: 0.6; }

.admin-notice-type {
    display: inline-flex;
    padding: 0.16rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
}

.admin-notice-type--notice {
    background: rgba(99, 102, 241, 0.12);
    color: #4338ca;
}

.admin-notice-type--faq {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.admin-notice-form-card { padding: 1.3rem 1.4rem; }

.admin-notice-form__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.admin-notice-form__head h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
}

.admin-notice-form__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem 1rem;
}

.admin-notice-form__wide { grid-column: 1 / -1; }

.admin-notice-form__grid label {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
}

.admin-notice-form__grid input,
.admin-notice-form__grid select,
.admin-notice-form__grid textarea {
    padding: 0.55rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    font-size: 0.92rem;
    font-family: inherit;
    color: #0f172a;
}

.admin-notice-form__grid textarea {
    resize: vertical;
    min-height: 180px;
    line-height: 1.65;
}

.admin-notice-form__grid input:focus,
.admin-notice-form__grid select:focus,
.admin-notice-form__grid textarea:focus {
    outline: 0;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.admin-notice-form__checks {
    display: flex;
    gap: 1rem;
    grid-column: 1 / -1;
    align-items: center;
    padding-top: 0.4rem;
}

.admin-notice-form__checks label {
    flex-direction: row;
    gap: 0.4rem;
    align-items: center;
    font-weight: 600;
}

.admin-notice-form__actions {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(15, 23, 42, 0.08);
}

/* ============================================================
 * /admin_audit — 감사 로그
 * ============================================================ */
.admin-audit {
    padding: 0.6rem 1.4rem 2.4rem;
}

.admin-audit-card {
    padding: 1.1rem 1.2rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 12px;
}

.admin-audit-toolbar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.5rem 0.6rem;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
    border-radius: 10px;
    margin-bottom: 0.5rem;
}

.admin-audit-toolbar input[type="search"] {
    padding: 0.45rem 0.7rem;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #fff;
    font-size: 0.88rem;
    min-width: 180px;
}

.admin-audit-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 10px;
    margin-top: 0.5rem;
}

.admin-audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.admin-audit-table thead th {
    padding: 0.55rem 0.7rem;
    background: #f8fafc;
    text-align: left;
    font-weight: 800;
    font-size: 0.74rem;
    color: #475569;
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    white-space: nowrap;
}

.admin-audit-table td {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    vertical-align: top;
}

.admin-audit-table tr:hover { background: #fafbfc; }

.admin-audit-action {
    padding: 0.12rem 0.5rem;
    background: rgba(99, 102, 241, 0.1);
    color: #4338ca;
    border-radius: 4px;
    font-family: ui-monospace, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-audit-target {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    background: rgba(15, 23, 42, 0.05);
    border-radius: 4px;
    font-size: 0.78rem;
    color: #475569;
    font-weight: 600;
}

.admin-audit-summary {
    max-width: 480px;
    color: #334155;
    word-break: break-all;
    line-height: 1.45;
    font-size: 0.82rem;
}

.admin-audit-ip {
    font-family: ui-monospace, monospace;
    font-size: 0.78rem;
}

/* ============================================================
   공통 admin-data-table — 회원 관리와 같은 시각 언어를 공지·감사 로그에 적용.
   기존 .admin-notice-table·.admin-audit-table 스타일은 그대로 두되,
   .admin-data-table 클래스를 함께 부여하여 그루딩된 효과를 우선 적용한다.
   ============================================================ */
.admin-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
}

.admin-data-table thead th {
    padding: 0.72rem 0.8rem;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    text-align: left;
    font-weight: 800;
    font-size: 0.74rem;
    color: #475569;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    white-space: nowrap;
}

.admin-data-table tbody tr.admin-data-row {
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
}

.admin-data-table td {
    padding: 0.72rem 0.8rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
    vertical-align: middle;
}

.admin-data-table tbody tr.admin-data-row td:first-child {
    border-left: 3px solid #94a3b8;
}

.admin-data-table tbody tr.admin-data-row:hover {
    background: linear-gradient(180deg, #fafbff 0%, #f1f5ff 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -10px rgba(99, 102, 241, 0.4);
    z-index: 2;
}

.admin-data-table tbody tr.admin-data-row.is-hidden {
    opacity: 0.55;
}

.admin-data-table tbody tr.admin-data-row.is-hidden:hover {
    opacity: 0.9;
}

.admin-data-row__center {
    text-align: center;
}

/* 좌측 액센트 막대 — 행 종류별 색 */
.admin-data-row--notice td:first-child  { border-left-color: #6366f1 !important; }
.admin-data-row--faq td:first-child     { border-left-color: #10b981 !important; }
.admin-data-row--create td:first-child  { border-left-color: #16a34a !important; }
.admin-data-row--update td:first-child  { border-left-color: #2563eb !important; }
.admin-data-row--delete td:first-child  { border-left-color: #dc2626 !important; }
.admin-data-row--toggle td:first-child  { border-left-color: #9333ea !important; }
.admin-data-row--other td:first-child   { border-left-color: #94a3b8 !important; }

/* 감사 로그 액션 코드 — 종류별 색 */
.admin-audit-action--create {
    background: rgba(22, 163, 74, 0.12) !important;
    color: #15803d !important;
}
.admin-audit-action--update {
    background: rgba(37, 99, 235, 0.12) !important;
    color: #1d4ed8 !important;
}
.admin-audit-action--delete {
    background: rgba(220, 38, 38, 0.12) !important;
    color: #b91c1c !important;
}
.admin-audit-action--toggle {
    background: rgba(147, 51, 234, 0.12) !important;
    color: #7e22ce !important;
}
.admin-audit-action--other {
    background: rgba(15, 23, 42, 0.06) !important;
    color: #475569 !important;
}

/* 공지 핀 표시 약간 강조 */
.admin-notice-pin {
    font-size: 1rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.admin-notice-title {
    color: #0f172a;
    letter-spacing: -0.01em;
}

/* 감사 로그 — 추가 시각 다듬기 */
.admin-audit-table.admin-data-table {
    font-size: 0.84rem;
}

.admin-audit-table.admin-data-table tbody td {
    vertical-align: top;
}

.admin-audit-cell-time {
    font-family: ui-monospace, monospace;
    font-size: 0.78rem;
    white-space: nowrap;
    color: #64748b;
}

/* ============================================================
   /admin_email_templates — 자동 발송 메일 템플릿 편집
   ============================================================ */
.admin-email-templates {
    padding: 0.6rem 1.4rem 2.4rem;
}

.admin-email-templates__flash {
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.05));
    border-left: 3px solid #6366f1;
    border-radius: 6px;
    color: #4338ca;
    font-weight: 600;
}

.admin-email-tpl-card {
    margin-top: 1.1rem;
    padding: 1rem 1.2rem 1.2rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-left: 4px solid #6366f1;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.admin-email-tpl-card[id="tpl-payment_confirmed"]   { border-left-color: #16a34a; }
.admin-email-tpl-card[id="tpl-member_welcome"]      { border-left-color: #6366f1; }
.admin-email-tpl-card[id="tpl-password_reset"]      { border-left-color: #f59e0b; }
.admin-email-tpl-card[id="tpl-password_reset_link"] { border-left-color: #06b6d4; }

.admin-email-tpl-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.8rem;
    margin-bottom: 0.95rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    flex-wrap: wrap;
}

.admin-email-tpl-card__kind {
    display: inline-block;
    padding: 0.28rem 0.72rem;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.admin-email-tpl-card__kind--payment_confirmed {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.16), rgba(22, 163, 74, 0.08));
    color: #15803d;
}
.admin-email-tpl-card__kind--member_welcome {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.16), rgba(99, 102, 241, 0.08));
    color: #4338ca;
}
.admin-email-tpl-card__kind--password_reset {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0.08));
    color: #92400e;
}
.admin-email-tpl-card__kind--password_reset_link {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.16), rgba(6, 182, 212, 0.08));
    color: #0e7490;
}

.admin-email-tpl-card__updated {
    margin-left: 0.5rem;
    font-size: 0.78rem;
}

.admin-email-tpl-card__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.32rem 0.72rem;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    user-select: none;
}

.admin-email-tpl-card__toggle input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: #4338ca;
}

.admin-email-tpl-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: 1.2rem;
}

@media (max-width: 900px) {
    .admin-email-tpl-card__body {
        grid-template-columns: 1fr;
    }
}

.admin-email-tpl-form {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.admin-email-tpl-form__label {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
}

.admin-email-tpl-form__subject,
.admin-email-tpl-form__body {
    width: 100%;
    padding: 0.55rem 0.7rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.13);
    border-radius: 7px;
    font-size: 0.88rem;
    color: #0f172a;
    font-weight: 500;
    transition: border-color 0.15s ease;
}

.admin-email-tpl-form__body {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    line-height: 1.55;
    resize: vertical;
    min-height: 360px;
}

.admin-email-tpl-form__subject:focus,
.admin-email-tpl-form__body:focus {
    border-color: #6366f1;
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.admin-email-tpl-form__actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.2rem;
}

.admin-email-tpl-vars {
    padding: 0.85rem 0.95rem 1rem;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 10px;
    align-self: start;
}

.admin-email-tpl-vars__title {
    margin: 0 0 0.35rem;
    font-size: 0.86rem;
    font-weight: 800;
    color: #0f172a;
}

.admin-email-tpl-vars__hint {
    margin: 0 0 0.65rem;
    font-size: 0.76rem;
}

.admin-email-tpl-vars__list {
    margin: 0 0 0.95rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.admin-email-tpl-vars__list li {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.42rem 0.55rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 7px;
}

.admin-email-tpl-vars__list code {
    font-family: ui-monospace, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    color: #4338ca;
    background: rgba(99, 102, 241, 0.08);
    padding: 0.08rem 0.35rem;
    border-radius: 4px;
    align-self: flex-start;
}

.admin-email-tpl-vars__list span {
    font-size: 0.76rem;
    color: #64748b;
    line-height: 1.4;
}

.admin-email-tpl-test {
    padding: 0.7rem 0.78rem 0.85rem;
    background: rgba(99, 102, 241, 0.06);
    border: 1px dashed rgba(99, 102, 241, 0.3);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-email-tpl-test__label {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #334155;
}

.admin-email-tpl-test__label input {
    padding: 0.46rem 0.6rem;
    border: 1px solid rgba(15, 23, 42, 0.13);
    border-radius: 6px;
    font-size: 0.84rem;
    background: #fff;
}

.admin-email-tpl-test__btn {
    padding: 0.5rem 0.8rem;
    background: linear-gradient(135deg, #6366f1, #4338ca);
    border: 0;
    border-radius: 7px;
    color: #fff;
    font-size: 0.86rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.18s ease;
}

.admin-email-tpl-test__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -3px rgba(67, 56, 202, 0.5);
}

.admin-email-tpl-test__note {
    margin: 0;
    font-size: 0.72rem;
}

/* Gmail 앱 비밀번호 발급 가이드 (외부 연동 → 알림 섹션 상단) */
.admin-gmail-guide {
    margin: 0.6rem 0 1.1rem;
    padding: 1rem 1.15rem 1.05rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0.03));
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-left: 4px solid #6366f1;
    border-radius: 10px;
}

.admin-gmail-guide__title {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: #4338ca;
}

.admin-gmail-guide__lead {
    margin: 0 0 0.7rem;
    font-size: 0.86rem;
    color: #334155;
    line-height: 1.55;
}

.admin-gmail-guide__steps {
    margin: 0 0 0.7rem;
    padding-left: 1.4rem;
    font-size: 0.86rem;
    color: #334155;
    line-height: 1.7;
}

.admin-gmail-guide__steps li + li {
    margin-top: 0.25rem;
}

.admin-gmail-guide__steps a {
    color: #4338ca;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.admin-gmail-guide__steps a:hover {
    color: #6366f1;
}

.admin-gmail-guide__note {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.55;
}

/* 비로그인 접근 정책 표 (운영 가이드 카드) */
.hover-access-table-wrap {
    overflow-x: auto;
    margin: 0.85rem 0 0.4rem;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 10px;
    background: #fff;
}

.hover-access-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.88rem;
}

.hover-access-table thead th {
    padding: 0.65rem 0.85rem;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    text-align: left;
    font-weight: 800;
    font-size: 0.74rem;
    color: #475569;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    white-space: nowrap;
}

.hover-access-table td {
    padding: 0.7rem 0.85rem;
    vertical-align: middle;
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
    color: #1e293b;
    line-height: 1.45;
}

.hover-access-table tbody tr:last-child td {
    border-bottom: 0;
}

.hover-access-table tbody tr:hover {
    background: rgba(34, 211, 238, 0.05);
}

.hover-access-yes,
.hover-access-no {
    display: inline-flex;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
}

.hover-access-yes {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(16, 185, 129, 0.08));
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.22);
}

.hover-access-no {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.14), rgba(220, 38, 38, 0.07));
    color: #b91c1c;
    border: 1px solid rgba(220, 38, 38, 0.22);
}

/* 마이페이지 — 본인 정보 수정·비밀번호 변경·탈퇴 폼 */
.loginmy-profile-flash {
    margin: 0 0 1rem;
    padding: 0.7rem 0.95rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.05));
    border-left: 3px solid #6366f1;
    border-radius: 6px;
    color: #4338ca;
    font-weight: 600;
    font-size: 0.9rem;
}

.loginmy-profile-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 0.6rem;
}

.loginmy-profile-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem 0.85rem;
}

@media (max-width: 720px) {
    .loginmy-profile-form__grid {
        grid-template-columns: 1fr;
    }
}

.loginmy-profile-form__wide {
    grid-column: 1 / -1;
}

.loginmy-profile-form label {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    font-size: 0.84rem;
    font-weight: 700;
    color: #334155;
}

.loginmy-profile-form input {
    padding: 0.52rem 0.7rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.13);
    border-radius: 7px;
    font-size: 0.92rem;
    color: #0f172a;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.loginmy-profile-form input:read-only {
    background: #f8fafc;
    color: #64748b;
}

.loginmy-profile-form input:focus {
    border-color: #6366f1;
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.loginmy-profile-form__actions {
    margin: 0.3rem 0 0;
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.loginmy-profile-danger {
    border-left: 4px solid #dc2626;
    background: linear-gradient(180deg, #fffbfb 0%, #fef2f2 100%);
}

.loginmy-profile-danger h2 {
    color: #b91c1c;
}

.loginmy-profile-danger__btn {
    background: linear-gradient(135deg, #f87171, #dc2626);
    color: #fff;
    border: 0;
    font-weight: 800;
}

.loginmy-profile-danger__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -3px rgba(220, 38, 38, 0.5);
}

/* 회원가입 폼 — 약관 동의 체크박스 */
.customer-signup-agree {
    margin: 0.7rem 0 0.4rem;
    padding: 0.7rem 0.85rem;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
}

.customer-signup-agree__line {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #334155;
    line-height: 1.5;
    cursor: pointer;
    font-weight: 500;
}

.customer-signup-agree__line input[type="checkbox"] {
    margin-top: 0.18rem;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    accent-color: #4338ca;
}

.customer-signup-agree__line strong {
    color: #b91c1c;
    margin-right: 0.18rem;
}

.customer-signup-agree__line a {
    color: #4338ca;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 로그인 화면의 "비밀번호 잊으셨나요" 링크 */
.customer-login-forgot {
    margin: 0.65rem 0 0;
    font-size: 0.85rem;
    text-align: right;
}

.customer-login-forgot a {
    color: #4338ca;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed rgba(67, 56, 202, 0.4);
    padding-bottom: 1px;
}

.customer-login-forgot a:hover {
    color: #6366f1;
    border-bottom-color: #6366f1;
}

/* 비밀번호 찾기·재설정 페이지 — 안내 메시지 */
.customer-login-flash {
    margin: 0.6rem 0 1rem;
    padding: 0.7rem 0.95rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.05));
    border-left: 3px solid #6366f1;
    border-radius: 6px;
    color: #4338ca;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.5;
}

/* PC 헤더 — 사이트 통합 검색 폼 */
.pc-nav-search {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
    padding: 0.18rem 0.4rem 0.18rem 0.55rem;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.pc-nav-search:focus-within {
    background: #fff;
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.pc-nav-search input[type="search"] {
    border: 0;
    background: transparent;
    padding: 0.32rem 0.4rem;
    font-size: 0.9rem;
    color: #0f172a;
    width: 8rem;
    outline: none;
}

.pc-nav-search button {
    border: 0;
    background: transparent;
    padding: 0.2rem 0.42rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: #475569;
}

.pc-nav-search button:hover {
    color: #4338ca;
}

/* 검색 결과 페이지 */
.customer-search-page {
    max-width: 920px;
    margin: 0 auto;
    padding: 1.4rem 1.4rem 3rem;
}

.customer-search-form {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin: 1rem 0 1.2rem;
}

.customer-search-form input[type="search"] {
    flex: 1;
    padding: 0.7rem 1rem;
    font-size: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.13);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.customer-search-form input[type="search"]:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.customer-search-note {
    margin: 0 0 1rem;
    font-size: 0.92rem;
}

.customer-search-group {
    margin-top: 1rem;
    padding: 1rem 1.2rem;
}

.customer-search-group h2 {
    margin: 0 0 0.7rem;
    font-size: 1rem;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.customer-search-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.customer-search-list li {
    padding: 0.55rem 0.7rem;
    background: #f8fafc;
    border-radius: 8px;
}

.customer-search-list a {
    color: #4338ca;
    text-decoration: none;
    font-weight: 700;
}

.customer-search-list a:hover {
    text-decoration: underline;
}

.customer-search-list p {
    margin: 0.25rem 0 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: #64748b;
}

/* ============================================================
   관리자 — 가이드 관리 (admin-guide-manage)
   ============================================================ */

.admin-guide-head {
    align-items: center;
}

.admin-guide-head__actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.admin-guide-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: #eef2ff;
    color: #4338ca;
}

.admin-guide-chip strong { font-weight: 800; }

.admin-guide-preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.85rem;
    height: 34px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.admin-guide-preview-btn:hover {
    background: #f8fafc;
    border-color: #6366f1;
    color: #4338ca;
}

.admin-guide-meta-info {
    margin: 0.55rem 0 0.85rem;
    padding: 0.4rem 0.7rem;
    background: #f8fafc;
    border-left: 3px solid #6366f1;
    border-radius: 0 8px 8px 0;
    font-size: 0.82rem;
    color: #475569;
}

.admin-guide-meta-info strong { color: #0f172a; }

.admin-guide-editor-card {
    margin-top: 0.85rem;
    padding: 1rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.admin-guide-editor-label {
    display: block;
    margin: 0 0 0.55rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
}

.admin-guide-editor-wrap {
    position: relative;
    min-height: 12rem;
}

.admin-guide-editor-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 12rem;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    font-size: 0.88rem;
}

.admin-guide-editor-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e1;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: admin-guide-spin 0.7s linear infinite;
}

@keyframes admin-guide-spin {
    to { transform: rotate(360deg); }
}

/* CKEditor 로딩 전에는 textarea 숨김 (로딩 인디케이터만 노출) */
.admin-guide-editor-wrap:not(.is-ready) .admin-guide-editor-ta {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
}

.admin-guide-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.85rem;
}

.admin-guide-save-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.4rem;
    height: 42px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(180deg, #6366f1, #4f46e5);
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.28);
    transition: filter 0.15s ease, transform 0.12s ease;
}

.admin-guide-save-btn:hover { filter: brightness(1.05); }
.admin-guide-save-btn:active { transform: translateY(1px); }

/* ============================================================
   관리자 — 사고·지연 관리 (admin-incidents)
   ============================================================ */

.admin-incidents-meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.admin-incidents-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.admin-incidents-chip strong { font-weight: 800; }

.admin-incidents-chip--total {
    background: #eef2ff;
    color: #4338ca;
}

.admin-incidents-chip--has {
    background: #fef3c7;
    color: #92400e;
}

.admin-incidents-chip--clean {
    background: #ecfdf5;
    color: #15803d;
}

.admin-incidents-intro {
    margin-top: 0;
}

.admin-incidents-intro strong { color: #0f172a; }

.admin-incidents-empty {
    margin: 1rem 0 0;
    padding: 1.8rem 1rem;
    text-align: center;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
}

.admin-incidents-empty__icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.4rem;
}

.admin-incidents-empty__text {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
}

.admin-incidents-table-wrap {
    margin-top: 0.85rem;
    overflow-x: auto;
}

.admin-incidents-th-code { width: 8rem; }
.admin-incidents-th-status { width: 8rem; }

.admin-incidents-row--has-memo {
    background: #fffbeb;
}

.admin-incidents-row--has-memo:hover {
    background: #fef3c7;
}

.admin-incidents-code-tag {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    color: #0f172a;
    font-weight: 700;
}

.admin-incidents-form { margin: 0; }

.admin-incidents-memo-label {
    display: block;
    margin: 0 0 0.4rem;
}

.admin-incidents-memo-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.65rem;
    font-size: 0.85rem;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    resize: vertical;
    min-height: 3rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-incidents-memo-input:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.admin-incidents-memo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.admin-incidents-memo-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: #64748b;
}

.admin-incidents-memo-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.admin-incidents-memo-dot--has { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }
.admin-incidents-memo-dot--none { background: #cbd5e1; }

.admin-incidents-save {
    appearance: none;
    padding: 0.35rem 0.85rem;
    height: 34px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(180deg, #6366f1, #4f46e5);
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.22);
    transition: filter 0.15s ease, transform 0.12s ease;
}

.admin-incidents-save:hover { filter: brightness(1.05); }
.admin-incidents-save:active { transform: translateY(1px); }

/* ============================================================
   관리자 — 푸터·법적 안내 4종 카드 (admin-footer-settings)
   ============================================================ */

.admin-footer-sections {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.85rem;
}

.admin-footer-section-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.admin-footer-section-card__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    border-bottom: 1px solid #e2e8f0;
}

.admin-footer-section-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.admin-footer-section-card__title-wrap {
    flex: 1;
    min-width: 0;
}

.admin-footer-section-card__title {
    margin: 0 0 0.15rem;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.admin-footer-section-card__sub {
    margin: 0;
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
}

.admin-footer-section-card__badge {
    flex-shrink: 0;
    padding: 0.25rem 0.6rem;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
}

.admin-footer-section-card .admin-footer-topic-form {
    padding: 0.85rem 1rem 1rem;
    margin: 0;
}

.admin-footer-section-hint {
    margin: 0 0 0.6rem;
    padding: 0.55rem 0.75rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    color: #92400e;
    font-size: 0.82rem;
    line-height: 1.5;
}

.admin-footer-section-card__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.7rem;
}

.admin-footer-save-btn {
    appearance: none;
    padding: 0.55rem 1.1rem;
    height: 40px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(180deg, #0ea5e9, #0284c7);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.22);
    transition: filter 0.15s ease, transform 0.12s ease;
}

.admin-footer-save-btn:hover { filter: brightness(1.05); }
.admin-footer-save-btn:active { transform: translateY(1px); }

/* ============================================================
   관리자 사이드바 — 운영 요약 (admin-sidebar-ops)
   ============================================================ */

.admin-sidebar-ops {
    margin-top: 0.85rem;
    padding: 0 0.5rem;
}

.admin-sidebar-ops-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin: 0 0 0.7rem;
}

.admin-sidebar-ops-stat {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.6rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    text-decoration: none;
    color: #0f172a;
    transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.admin-sidebar-ops-stat:hover {
    border-color: #6366f1;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.12);
    transform: translateY(-1px);
}

.admin-sidebar-ops-stat--warn {
    background: linear-gradient(180deg, #fff7ed, #ffffff);
    border-color: #fed7aa;
}

.admin-sidebar-ops-stat--warn:hover {
    border-color: #f59e0b;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.18);
}

.admin-sidebar-ops-stat__icon {
    font-size: 1.05rem;
    line-height: 1;
}

.admin-sidebar-ops-stat__text {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.admin-sidebar-ops-stat__num {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}

.admin-sidebar-ops-stat--warn .admin-sidebar-ops-stat__num {
    color: #b45309;
}

.admin-sidebar-ops-stat__label {
    font-size: 0.7rem;
    color: #64748b;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-sidebar-ops-card {
    margin: 0;
    padding: 0.6rem 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.admin-sidebar-ops-title {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-sidebar-ops-quicklinks {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.admin-sidebar-ops-link {
    display: block;
    padding: 0.4rem 0.55rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.admin-sidebar-ops-link:hover {
    background: #eef2ff;
    color: #4338ca;
    border-color: #c7d2fe;
}

/* ============================================================
   관리자 — 렌탈 소모품 옵션 (admin-rental-options)
   ============================================================ */

.admin-rental-options-head {
    align-items: center;
}

.admin-rental-options-head__meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.admin-rental-options-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.admin-rental-options-chip strong { font-weight: 800; }

.admin-rental-options-chip--total {
    background: #eef2ff;
    color: #4338ca;
}

.admin-rental-options-chip--active {
    background: #ecfdf5;
    color: #15803d;
}

/* 옵션 추가 카드 */
.admin-options-add-card {
    margin: 0.85rem 0 1rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(180deg, #fff7ed, #fffbeb);
    border: 1px dashed #fbbf24;
    border-radius: 12px;
}

.admin-options-add-card__head {
    margin: 0 0 0.6rem;
}

.admin-options-add-card__title {
    font-size: 0.9rem;
    font-weight: 800;
    color: #92400e;
    letter-spacing: -0.01em;
}

.admin-options-add-form { margin: 0; }

.admin-options-add-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr auto;
    gap: 0.7rem;
    align-items: end;
}

@media (max-width: 900px) {
    .admin-options-add-grid {
        grid-template-columns: 1fr 1fr;
    }
    .admin-options-add-actions {
        grid-column: 1 / -1;
    }
}

.admin-options-add-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
}

.admin-options-add-field__label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
}

.admin-options-add-input,
.admin-options-add-file {
    width: 100%;
    padding: 0.55rem 0.7rem;
    font-size: 0.9rem;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-options-add-input:focus,
.admin-options-add-file:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.admin-options-add-file {
    padding: 0.45rem 0.55rem;
    font-size: 0.82rem;
}

.admin-options-add-actions {
    display: flex;
    justify-content: stretch;
}

/* 공용 버튼 */
.admin-options-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.5rem 0.9rem;
    height: 38px;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.15s ease, transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}

.admin-options-btn--primary {
    color: #ffffff;
    background: linear-gradient(180deg, #f59e0b, #d97706);
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25);
    width: 100%;
}

.admin-options-btn--primary:hover { filter: brightness(1.05); }
.admin-options-btn--primary:active { transform: translateY(1px); }

.admin-options-btn--soft {
    color: #334155;
    background: #ffffff;
    border-color: #cbd5e1;
}

.admin-options-btn--soft:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.admin-options-btn--success {
    color: #15803d;
    background: #ffffff;
    border-color: #86efac;
}

.admin-options-btn--success:hover {
    background: #ecfdf5;
    border-color: #22c55e;
}

.admin-options-btn--danger {
    color: #b91c1c;
    background: #ffffff;
    border-color: #fca5a5;
}

.admin-options-btn--danger:hover {
    background: #fef2f2;
    border-color: #ef4444;
}

/* 빈 상태 */
.admin-options-empty {
    margin: 1rem 0 0;
    padding: 1.8rem 1rem;
    text-align: center;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
}

.admin-options-empty__icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.4rem;
}

.admin-options-empty__text {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
}

/* 옵션 목록 테이블 보강 */
.admin-options-table-wrap {
    margin-top: 0.85rem;
    overflow-x: auto;
}

.admin-options-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-options-table__th-img,
.admin-options-table__th-price,
.admin-options-table__th-status,
.admin-options-table__th-actions {
    white-space: nowrap;
}

.admin-options-table__th-img { width: 60px; }
.admin-options-table__th-price { text-align: right; }
.admin-options-table__th-status { width: 80px; text-align: center; }

.admin-options-table tbody tr {
    transition: background 0.15s ease;
}

.admin-options-table tbody tr:hover {
    background: #f8fafc;
}

.admin-options-row--inactive {
    opacity: 0.6;
}

.admin-options-table__thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.admin-options-table__noimg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #f1f5f9;
    color: #94a3b8;
    border-radius: 8px;
    font-size: 1.1rem;
}

.admin-options-table__name {
    font-weight: 700;
    color: #0f172a;
}

.admin-options-table__price {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-align: right;
    color: #0f172a;
}

.admin-options-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.admin-options-status-chip--on {
    background: #ecfdf5;
    color: #15803d;
}

.admin-options-status-chip--off {
    background: #f1f5f9;
    color: #64748b;
}

.admin-options-table__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.admin-options-img-form {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
}

.admin-options-img-form__file {
    max-width: 11rem;
    font-size: 0.75rem;
    padding: 0.3rem 0.4rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
}

.admin-options-toggle-form { margin: 0; }

/* ============================================================
   고객 — 비밀번호 찾기·재설정 카드 (customer-pw-card)
   ============================================================ */

.customer-pw-card {
    max-width: min(94vw, 28rem);
    padding: 1.4rem 1.4rem 1.5rem;
}

.customer-pw-head {
    text-align: center;
    margin: 0 0 1.1rem;
}

.customer-pw-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(79, 70, 229, 0.28);
    margin-bottom: 0.65rem;
}

.customer-pw-title {
    margin: 0 0 0.55rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.customer-pw-lead {
    margin: 0 0 0.25rem;
    color: #475569;
    font-size: 0.93rem;
    line-height: 1.55;
}

.customer-pw-lead strong { color: #0f172a; }

.customer-pw-lead--warn {
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    margin-top: 0.5rem;
}

.customer-pw-lead--warn strong { color: #92400e; }

.customer-pw-flash {
    margin: 0 0 1rem;
    padding: 0.7rem 0.9rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
    border-radius: 10px;
    font-weight: 600;
    text-align: center;
}

.customer-pw-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0;
}

.customer-pw-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
}

.customer-pw-field__label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
}

.customer-pw-input-wrap {
    position: relative;
    display: block;
}

.customer-pw-input-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1.05rem;
    pointer-events: none;
}

.customer-pw-input {
    width: 100%;
    padding: 0.7rem 0.85rem 0.7rem 2.35rem;
    font-size: 0.95rem;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.customer-pw-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.customer-pw-input::placeholder {
    color: #94a3b8;
}

.customer-pw-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 46px;
    padding: 0 1.1rem;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.15s ease, transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
    box-sizing: border-box;
}

.customer-pw-btn--primary {
    color: #ffffff;
    background: linear-gradient(180deg, #6366f1, #4f46e5);
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
    margin-top: 0.25rem;
}

.customer-pw-btn--primary:hover { filter: brightness(1.05); }
.customer-pw-btn--primary:active { transform: translateY(1px); }

.customer-pw-btn--ghost {
    color: #334155;
    background: #ffffff;
    border-color: #cbd5e1;
}

.customer-pw-btn--ghost:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.customer-pw-actions-row {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0.85rem 0 0;
}

.customer-pw-rules {
    margin: 0;
    padding: 0.7rem 0.85rem 0.7rem 1.8rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #475569;
    font-size: 0.82rem;
    line-height: 1.55;
}

.customer-pw-rules li {
    margin: 0;
}

.customer-pw-help {
    margin: 1.2rem 0 0;
    padding: 0.85rem 0.95rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.customer-pw-help__title {
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
}

.customer-pw-help__list {
    margin: 0;
    padding-left: 1.15rem;
    color: #475569;
    font-size: 0.83rem;
    line-height: 1.55;
}

.customer-pw-help__list li + li {
    margin-top: 0.35rem;
}

.customer-pw-help__list strong {
    color: #0f172a;
}

.customer-pw-back {
    margin: 1.1rem 0 0;
    text-align: center;
    font-size: 0.9rem;
}

.customer-pw-back a {
    color: #4f46e5;
    font-weight: 600;
    text-decoration: none;
}

.customer-pw-back a:hover { text-decoration: underline; }

/* ============================================================
   관리자 — 회원 일괄 메일 (admin-bulk-email) 디자인
   ============================================================ */

.admin-bulk-email .bulk-email-head-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.bulk-email-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
}

.bulk-email-chip--ok {
    background: #ecfdf5;
    color: #15803d;
    border-color: #bbf7d0;
}

.bulk-email-chip--warn {
    background: #fff7ed;
    color: #b45309;
    border-color: #fed7aa;
}

.bulk-email-chip--warn:hover {
    background: #fef3c7;
}

.bulk-email-flash {
    margin: 0.45rem 0 0.85rem;
    padding: 0.65rem 0.85rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #1e3a8a;
    font-weight: 600;
}

/* 2단 그리드 — 좌측 작성 / 우측 미리보기 */
.bulk-email-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: 1rem;
    margin-top: 0.85rem;
}

@media (max-width: 1024px) {
    .bulk-email-grid {
        grid-template-columns: 1fr;
    }
}

.bulk-email-compose,
.bulk-email-preview {
    margin: 0;
}

/* 좌측 작성 카드 */
.bulk-email-compose {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.bulk-email-compose-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.bulk-email-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.bulk-email-field--body {
    flex: 1;
    min-height: 0;
}

.bulk-email-field__label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.bulk-email-field__label--small {
    font-size: 0.78rem;
    color: #475569;
    font-weight: 600;
}

.bulk-email-input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-size: 0.92rem;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bulk-email-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.bulk-email-input:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

.bulk-email-textarea {
    min-height: 18rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Apple SD Gothic Neo", monospace;
    font-size: 0.9rem;
    line-height: 1.55;
    resize: vertical;
}

/* 받는 그룹 행 — select + chip */
.bulk-email-audience-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.bulk-email-audience-row select {
    flex: 1;
    min-width: 12rem;
}

.bulk-email-recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.28);
    white-space: nowrap;
}

.bulk-email-recipient-chip strong {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.bulk-email-recipient-chip__icon {
    font-size: 1.05rem;
}

/* 변수 칩 */
.bulk-email-field--vars {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    gap: 0.45rem;
}

.bulk-email-var-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.bulk-email-var-chip {
    appearance: none;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    font-size: 0.82rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.bulk-email-var-chip code {
    background: #eef2ff;
    color: #4f46e5;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 700;
}

.bulk-email-var-chip:hover {
    background: #eef2ff;
    border-color: #6366f1;
}

.bulk-email-var-chip:active {
    transform: translateY(1px);
}

.bulk-email-form-note {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: #64748b;
}

/* 버튼 */
.bulk-email-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin: 0;
}

.bulk-email-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 44px;
    padding: 0 1.1rem;
    font-size: 0.92rem;
    font-weight: 700;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
}

.bulk-email-btn--primary {
    color: #ffffff;
    background: linear-gradient(180deg, #6366f1, #4f46e5);
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.32);
}

.bulk-email-btn--primary:hover { filter: brightness(1.05); }
.bulk-email-btn--primary:active { transform: translateY(1px); }
.bulk-email-btn--primary:disabled {
    background: #cbd5e1;
    box-shadow: none;
    cursor: not-allowed;
}

.bulk-email-btn--ghost {
    color: #334155;
    background: #ffffff;
    border-color: #cbd5e1;
}

.bulk-email-btn--ghost:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.bulk-email-btn--ghost:disabled {
    color: #94a3b8;
    cursor: not-allowed;
}

/* 테스트 발송 폼 (별도 카드) */
.bulk-email-test-form {
    padding: 0.85rem 1rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
}

.bulk-email-test-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.bulk-email-test-input-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bulk-email-test-input-row input[type="email"] {
    flex: 1;
    min-width: 14rem;
}

.bulk-email-test-hint {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: #92400e;
}

/* 우측 미리보기 */
.bulk-email-preview {
    position: sticky;
    top: 1rem;
    align-self: flex-start;
}

.bulk-email-preview-frame {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    min-height: 28rem;
    max-height: 38rem;
}

.bulk-email-preview-frame__head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.85rem;
    background: linear-gradient(180deg, #f1f5f9, #e2e8f0);
    border-bottom: 1px solid #e2e8f0;
}

.bulk-email-preview-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
}

.bulk-email-preview-dot--r { background: #ef4444; }
.bulk-email-preview-dot--y { background: #f59e0b; }
.bulk-email-preview-dot--g { background: #22c55e; }

.bulk-email-preview-frame__title {
    margin-left: 0.55rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
}

.bulk-email-preview-meta {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    background: #fafbfc;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.bulk-email-preview-meta__row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.bulk-email-preview-meta__label {
    flex: 0 0 4.5rem;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
}

.bulk-email-preview-meta__value {
    flex: 1;
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 600;
    word-break: break-word;
}

.bulk-email-preview-body {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    font-family: ui-sans-serif, system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
    font-size: 0.93rem;
    line-height: 1.7;
    color: #1e293b;
    white-space: normal;
}

.bulk-email-preview-empty {
    color: #94a3b8;
    font-style: normal;
}

.bulk-email-preview-empty code {
    background: #eef2ff;
    color: #4f46e5;
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    font-size: 0.85em;
}

.bulk-email-preview-footer {
    padding: 0.6rem 1rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    color: #475569;
    font-size: 0.78rem;
}

.bulk-email-preview-footer strong {
    color: #0f172a;
}