/* ═══════════════════════════════════════════════════
   MANAGER APP — SIDEBAR & NAVIGATION
   ═══════════════════════════════════════════════════ */

/* --- Scrollbar utilities --- */
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }

/* --- Sidebar scrollbar --- */
.mgr-sidebar nav::-webkit-scrollbar { width: 4px; }
.mgr-sidebar nav::-webkit-scrollbar-track { background: transparent; }
.mgr-sidebar nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* --- Gym selector pill --- */
.mgr-gym-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* --- Gym pill switchable --- */
.mgr-gym-pill--switchable {
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.mgr-gym-pill--switchable:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

/* --- Gym switcher dropdown --- */
.mgr-gym-switcher {
    position: absolute;
    top: calc(100% + 4px);
    left: 1rem;
    right: 1rem;
    background: #0c1154;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    padding: 0.25rem;
    z-index: 60;
    box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.5);
}
.mgr-gym-switcher-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.mgr-gym-switcher-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

/* --- Plan badges --- */
.mgr-plan-badge {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
}
.mgr-plan-badge--partner {
    background: rgba(230, 177, 5, 0.15);
    color: var(--bjj-accent);
}
.mgr-plan-badge--free {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.35);
}
.mgr-plan-badge--beta {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

/* --- Nav section label --- */
.mgr-nav-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.25);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.5rem 0.75rem 0.375rem;
}

/* --- Nav item --- */
.mgr-nav-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.mgr-nav-item i:first-child {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}
.mgr-nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
}

/* Active state */
.mgr-nav-item--active {
    background: rgba(230, 177, 5, 0.1);
    color: var(--bjj-accent);
}
.mgr-nav-item--active i:first-child {
    color: var(--bjj-accent);
}

/* Locked (PARTNER gating) */
.mgr-nav-item--locked {
    opacity: 0.4;
    cursor: default;
}
.mgr-nav-item--locked:hover {
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
}

/* --- Nav item parent (with sub-menu toggle) --- */
.mgr-nav-item--parent {
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
}

/* --- Chevron rotation --- */
.mgr-nav-chevron {
    transition: transform 0.2s ease;
    color: rgba(255, 255, 255, 0.25);
}
.mgr-nav-group--open > button .mgr-nav-chevron,
.mgr-nav-group--open > .mgr-nav-item--parent .mgr-nav-chevron {
    transform: rotate(180deg);
}

/* --- Sub-menu container --- */
.mgr-nav-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    padding-left: 1rem;
}
.mgr-nav-group--open > .mgr-nav-sub {
    max-height: 12rem;
}

/* --- Sub-menu child item --- */
.mgr-nav-item--child {
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
    border-left: 2px solid rgba(255, 255, 255, 0.06);
    border-radius: 0 0.5rem 0.5rem 0;
    margin-left: 0.375rem;
}
.mgr-nav-item--child:hover {
    border-left-color: rgba(230, 177, 5, 0.4);
}
.mgr-nav-item--child.mgr-nav-item--active {
    border-left-color: var(--bjj-accent);
}

/* --- Premium preview tooltip (free plan) --- */
.mgr-nav-preview {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.25s ease;
    opacity: 0;
    padding-left: 1rem;
}
.mgr-nav-group:hover > .mgr-nav-preview {
    max-height: 6rem;
    opacity: 1;
}

.mgr-nav-preview p {
    font-size: 0.6875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.35);
    padding: 0.375rem 0.75rem;
    border-left: 2px solid rgba(230, 177, 5, 0.2);
    margin-left: 0.375rem;
}

/* --- Nav section divider --- */
.mgr-nav-section + .mgr-nav-section {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 0.25rem;
}


/* ═══════════════════════════════════════════════════
   MANAGER LANDING PAGE
   ═══════════════════════════════════════════════════ */

/* ===== Manager Landing Page ===== */

/* --- Navigation --- */
.manager-nav {
    background: rgba(2, 5, 32, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- Hero Background --- */
.hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(230, 177, 5, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
        linear-gradient(180deg, var(--bjj-primary) 0%, var(--bjj-primary) 100%);
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, black 30%, transparent 70%);
}

/* --- Floating Orbs --- */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    animation: float 20s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.hero-orb--1 {
    width: 400px; height: 400px;
    background: var(--bjj-accent);
    top: 10%; left: 10%;
    animation-delay: 0s;
}
.hero-orb--2 {
    width: 300px; height: 300px;
    background: #3b82f6;
    top: 60%; right: 10%;
    animation-delay: -7s;
}
.hero-orb--3 {
    width: 250px; height: 250px;
    background: #7c3aed;
    bottom: 10%; left: 40%;
    animation-delay: -14s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -20px) scale(1.05); }
    50% { transform: translate(-20px, 20px) scale(0.95); }
    75% { transform: translate(10px, 10px) scale(1.02); }
}

/* --- Hero Gradient Text --- */
.hero-gradient-text {
    background: linear-gradient(135deg, var(--bjj-accent) 0%, #f0c940 40%, var(--bjj-accent) 60%, #d4a005 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Hero Dashboard Mockup Container --- */
.hero-mockup-wrap {
    flex: 0 0 370px;
    max-width: 370px;
    perspective: 1000px;
}

/* --- Hero Dashboard Mockup Tilt (md+ only) --- */
.md\:mockup-tilt {
    transform: rotateY(-3deg) rotateX(1.5deg);
}

/* --- Hero Cursor --- */
.hero-cursor.landing-cursor {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    pointer-events: none;
    z-index: 10;
    will-change: transform;
    animation: hero-cursor-move 10s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    top: 0;
    left: 0;
}

/* --- Hero Cursor Keyframes (10s loop, 4 stops, curved paths) --- */
@keyframes hero-cursor-move {
    0%, 5%    { transform: translate(230px, 40px);  }   /* KPI "활성 회원" */
    15%       { transform: translate(180px, 80px);  }   /* curve midpoint */
    25%, 30%  { transform: translate(60px, 150px);  }   /* donut chart */
    40%       { transform: translate(160px, 130px); }   /* curve midpoint */
    50%, 55%  { transform: translate(270px, 150px); }   /* line graph */
    65%       { transform: translate(220px, 200px); }   /* curve midpoint */
    70%, 80%  { transform: translate(180px, 240px); }   /* alert members */
    90%       { transform: translate(260px, 140px); }   /* return curve */
    95%, 100% { transform: translate(230px, 40px);  }   /* back to start */
}

/* --- Hero KPI Glow (synced with cursor 10s loop) --- */
.hero-kpi-glow {
    will-change: box-shadow;
    animation: hero-kpi-glow 10s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes hero-kpi-glow {
    0%, 3%    { box-shadow: 0 0 0 0 rgba(230, 177, 5, 0); }
    5%, 22%   { box-shadow: 0 0 12px 2px rgba(230, 177, 5, 0.12); }
    25%, 100% { box-shadow: 0 0 0 0 rgba(230, 177, 5, 0); }
}

/* --- Hero Mockup Responsive --- */
@media (max-width: 767px) {
    .hero-mockup-wrap {
        flex: none;
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }
    .md\:mockup-tilt {
        transform: none;
    }
}

/* --- Animations --- */
.animate-fade-in {
    animation: fadeIn 0.8s ease forwards;
}
.animate-fade-in-up {
    opacity: 0;
    transform: translateY(1.5rem);
    animation: fadeInUp 0.8s ease forwards;
}
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-400 { animation-delay: 0.4s; }
.animation-delay-600 { animation-delay: 0.6s; }

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(1.5rem); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Scroll Reveal --- */
.scroll-reveal {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children */
.scroll-reveal:nth-child(1) { transition-delay: 0s; }
.scroll-reveal:nth-child(2) { transition-delay: 0.06s; }
.scroll-reveal:nth-child(3) { transition-delay: 0.12s; }
.scroll-reveal:nth-child(4) { transition-delay: 0.18s; }
.scroll-reveal:nth-child(5) { transition-delay: 0.24s; }
.scroll-reveal:nth-child(6) { transition-delay: 0.30s; }

/* ═══════════════════════════════════════════════════
   FEATURE SHOWCASE (Landing — Core Features)
   ═══════════════════════════════════════════════════ */

/* Row layout: text + visual, alternating */
.feat-row {
    display: flex;
    align-items: center;
    gap: 3rem;
    padding: 2.5rem 0;
}
.feat-row--reverse {
    flex-direction: row-reverse;
}
.feat-row--reverse .feat-row__content {
    text-align: right;
}
.feat-row--reverse .feat-row__content .flex {
    justify-content: flex-end;
}

.feat-row__content {
    flex: 1;
    min-width: 0;
}
.feat-row__visual {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Number tag */
.feat-num-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
}
.feat-num-tag--blue    { background: rgba(59, 130, 246, 0.12); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.2); }
.feat-num-tag--emerald { background: rgba(16, 185, 129, 0.12); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.2); }
.feat-num-tag--amber   { background: rgba(230, 177, 5, 0.12);  color: var(--bjj-accent); border: 1px solid rgba(230, 177, 5, 0.2); }
.feat-num-tag--violet  { background: rgba(124, 58, 237, 0.12);  color: #a78bfa; border: 1px solid rgba(124, 58, 237, 0.2); }

/* Icon box with glow */
.feat-icon-box {
    width: 140px;
    height: 140px;
    border-radius: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.feat-row:hover .feat-icon-box {
    transform: scale(1.05);
}
.feat-icon-box::after {
    content: '';
    position: absolute;
    inset: -24px;
    border-radius: 2.5rem;
    filter: blur(50px);
    opacity: 0.12;
    z-index: -1;
    transition: opacity 0.4s;
}
.feat-row:hover .feat-icon-box::after {
    opacity: 0.22;
}
.feat-icon-box--blue    { background: rgba(59, 130, 246, 0.08); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.15); }
.feat-icon-box--blue::after    { background: #3b82f6; }
.feat-icon-box--emerald { background: rgba(16, 185, 129, 0.08); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.15); }
.feat-icon-box--emerald::after { background: #10b981; }
.feat-icon-box--amber   { background: rgba(230, 177, 5, 0.08);  color: var(--bjj-accent); border: 1px solid rgba(230, 177, 5, 0.15); }
.feat-icon-box--amber::after   { background: var(--bjj-accent); }
.feat-icon-box--violet  { background: rgba(124, 58, 237, 0.08); color: #a78bfa; border: 1px solid rgba(124, 58, 237, 0.15); }
.feat-icon-box--violet::after  { background: #7c3aed; }

/* Feature chips */
.feat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: background 0.2s;
}
.feat-chip--blue    { background: rgba(59, 130, 246, 0.08); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.15); }
.feat-chip--emerald { background: rgba(16, 185, 129, 0.08); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.15); }
.feat-chip--amber   { background: rgba(230, 177, 5, 0.08);  color: #fcd34d; border: 1px solid rgba(230, 177, 5, 0.15); }
.feat-chip--violet  { background: rgba(124, 58, 237, 0.08); color: #c4b5fd; border: 1px solid rgba(124, 58, 237, 0.15); }

.feat-chip--blue:hover    { background: rgba(59, 130, 246, 0.14); }
.feat-chip--emerald:hover { background: rgba(16, 185, 129, 0.14); }
.feat-chip--amber:hover   { background: rgba(230, 177, 5, 0.14); }
.feat-chip--violet:hover  { background: rgba(124, 58, 237, 0.14); }

/* Connector line between features */
.feat-connector {
    width: 1px;
    height: 3rem;
    margin: 0 auto;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}

/* Mobile: stack vertically */
@media (max-width: 767px) {
    .feat-row,
    .feat-row--reverse {
        flex-direction: column !important;
        gap: 1.5rem;
        padding: 2rem 0;
    }
    .feat-row--reverse .feat-row__content,
    .feat-row__content {
        text-align: center !important;
    }
    .feat-row--reverse .feat-row__content .flex,
    .feat-row__content .flex {
        justify-content: center !important;
    }
    .feat-icon-box {
        width: 100px;
        height: 100px;
        font-size: 2.25rem;
        border-radius: 1.5rem;
    }
    .feat-connector {
        height: 2rem;
    }
}

/* ═══════════════════════════════════════════════════
   CATEGORY TAGS
   ═══════════════════════════════════════════════════ */
.cat-tag {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.3rem 0.875rem;
    border-radius: 9999px;
    color: #fff;
}
.cat-tag--retention  { background: #6c63ff; }
.cat-tag--billing    { background: #10b981; }
.cat-tag--operation  { background: #0ea5a0; }
.cat-tag--growth     { background: #f07530; }
.cat-tag--insight    { background: #3b82f6; }

/* ═══════════════════════════════════════════════════
   FEATURE CARDS (mgr-card)
   ═══════════════════════════════════════════════════ */
.mgr-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1.25rem;
    padding: 1.75rem;
    position: relative;
    overflow: hidden;
    transition: background 0.3s, border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

/* Top accent line */
.mgr-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 1.25rem 1.25rem 0 0;
    opacity: 0;
    transition: opacity 0.3s;
}
.mgr-card:hover::before { opacity: 1; }

.mgr-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.35);
}

/* Category color variants — accent line */
.mgr-card--retention::before { background: linear-gradient(90deg, #6c63ff, #9b8fff); }
.mgr-card--billing::before   { background: linear-gradient(90deg, #10b981, #34d399); }
.mgr-card--operation::before { background: linear-gradient(90deg, #0ea5a0, #48c6c1); }
.mgr-card--growth::before    { background: linear-gradient(90deg, #f07530, #ffaa60); }
.mgr-card--insight::before   { background: linear-gradient(90deg, #3b82f6, #60a5fa); }

/* Card icon */
.mgr-card-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    margin-bottom: 1rem;
}
.mgr-card-icon--retention { background: rgba(108, 99, 255, 0.1);  color: #9b8fff; }
.mgr-card-icon--billing   { background: rgba(16, 185, 129, 0.1);  color: #34d399; }
.mgr-card-icon--operation { background: rgba(14, 165, 160, 0.1);  color: #48c6c1; }
.mgr-card-icon--growth    { background: rgba(240, 117, 48, 0.1);  color: #ffaa60; }
.mgr-card-icon--insight   { background: rgba(59, 130, 246, 0.1);  color: #60a5fa; }

/* Card benefit text */
.mgr-card-benefit {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.6;
}
.mgr-card-benefit--retention { color: #9b8fff; }
.mgr-card-benefit--billing   { color: #34d399; }
.mgr-card-benefit--operation { color: #48c6c1; }
.mgr-card-benefit--growth    { color: #ffaa60; }
.mgr-card-benefit--insight   { color: #60a5fa; }

/* ═══════════════════════════════════════════════════
   TMI CHIPS (inside Insight card)
   ═══════════════════════════════════════════════════ */
.tmi-chip {
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.12);
    border-radius: 0.75rem;
    padding: 0.75rem 0.875rem;
}
.tmi-chip-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #60a5fa;
}
.tmi-chip-desc {
    display: block;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 0.2rem;
}

/* ═══════════════════════════════════════════════════
   DATA FLOW DIAGRAM
   ═══════════════════════════════════════════════════ */
.flow-diagram {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
    padding: 2.5rem 1.5rem;
    background: rgba(255, 255, 255, 0.025);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.flow-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    min-width: 140px;
    flex: 1;
}

.flow-node {
    padding: 0.875rem 1.25rem;
    border-radius: 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    min-width: 130px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flow-node--collect  { background: rgba(14, 165, 160, 0.15); border: 1px solid rgba(14, 165, 160, 0.3); }
.flow-node--billing  { background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); }
.flow-node--analyze  { background: rgba(108, 99, 255, 0.15); border: 1px solid rgba(108, 99, 255, 0.3); }
.flow-node--output   { background: rgba(240, 117, 48, 0.15); border: 1px solid rgba(240, 117, 48, 0.3); }
.flow-node--insight  { background: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.3); }

.flow-arrow {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    color: rgba(255, 255, 255, 0.15);
    font-size: 1.25rem;
    align-self: center;
}

.flow-label {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.25);
    text-align: center;
    margin-top: 0.25rem;
    font-weight: 400;
}

/* Tablet & Mobile: stack flow vertically */
@media (max-width: 1023px) {
    .flow-diagram {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding: 2rem 1rem;
    }
    .flow-col {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
    .flow-node { min-width: auto; flex: 1; }
    .flow-arrow {
        transform: rotate(90deg);
        padding: 0.5rem 0;
    }
    .flow-label {
        width: 100%;
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════
   CONTACT CARDS
   ═══════════════════════════════════════════════════ */
.contact-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1.25rem;
    padding: 1.25rem 1.5rem;
    text-decoration: none;
    color: #fff;
    transition: all 0.3s;
}
.contact-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(230, 177, 5, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.3);
}

.contact-card-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-card-icon--email {
    background: rgba(230, 177, 5, 0.12);
    color: var(--bjj-accent);
}
.contact-card-icon--kakao {
    background: rgba(254, 229, 0, 0.15);
    color: #3c1e1e;
}

/* ═══════════════════════════════════════════════════
   IMAGE UPLOAD (S3 Presigned URL)
   ═══════════════════════════════════════════════════ */
.img-upload-area {
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.img-upload-area:hover { box-shadow: 0 0 0 3px rgba(230,177,5,0.18); }

/* ═══════════════════════════════════════════════════
   DASHBOARD — Belt Distribution Bar Colors
   ═══════════════════════════════════════════════════ */
.mgr-belt-bar.화이트 { background: #e5e7eb; }
.mgr-belt-bar.블루 { background: #3b82f6; }
.mgr-belt-bar.퍼플 { background: #7c3aed; }
.mgr-belt-bar.브라운 { background: #92400e; }
.mgr-belt-bar.블랙 { background: #1f2937; }
.mgr-belt-bar.미설정 { background: #d1d5db; }

/* ── 유소년 변형 벨트 바 ── */
.mgr-belt-bar.그레이\/화이트 { background: linear-gradient(to right, #6B7280 35%, #fff 35%, #fff 65%, #6B7280 65%); }
.mgr-belt-bar.그레이 { background: #6B7280; }
.mgr-belt-bar.그레이\/블랙 { background: linear-gradient(to right, #6B7280 35%, #1f2937 35%, #1f2937 65%, #6B7280 65%); }
.mgr-belt-bar.옐로우\/화이트 { background: linear-gradient(to right, #EAB308 35%, #fff 35%, #fff 65%, #EAB308 65%); }
.mgr-belt-bar.옐로우 { background: #EAB308; }
.mgr-belt-bar.옐로우\/블랙 { background: linear-gradient(to right, #EAB308 35%, #1f2937 35%, #1f2937 65%, #EAB308 65%); }
.mgr-belt-bar.오렌지\/화이트 { background: linear-gradient(to right, #F97316 35%, #fff 35%, #fff 65%, #F97316 65%); }
.mgr-belt-bar.오렌지 { background: #F97316; }
.mgr-belt-bar.오렌지\/블랙 { background: linear-gradient(to right, #F97316 35%, #1f2937 35%, #1f2937 65%, #F97316 65%); }
.mgr-belt-bar.그린\/화이트 { background: linear-gradient(to right, #16A34A 35%, #fff 35%, #fff 65%, #16A34A 65%); }
.mgr-belt-bar.그린 { background: #16A34A; }
.mgr-belt-bar.그린\/블랙 { background: linear-gradient(to right, #16A34A 35%, #1f2937 35%, #1f2937 65%, #16A34A 65%); }

/* ─── Dashboard Section Label ─── */
.mgr-section-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--mgr-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 12px;
  margin-bottom: 14px;
  padding-left: 2px;
}

/* ─── Dashboard KPI Cards ─── */
.mgr-kpi-card {
  background: var(--mgr-bg-card);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-radius-card);
  padding: 22px 24px;
  position: relative;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  box-shadow: var(--mgr-shadow-card);
}
.mgr-kpi-card:hover {
  box-shadow: var(--mgr-shadow-card-hover);
  transform: translateY(-2px);
  z-index: 50;
}
.mgr-kpi-card--compact {
  padding: 20px 22px;
  border-radius: var(--mgr-radius-card);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-height: 116px;
}

/* ─── KPI Tooltip ─── */
.mgr-kpi-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #e2e8f0;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.7;
  z-index: 51;
  min-width: 220px;
  max-width: 300px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  pointer-events: none;
}
.mgr-kpi-tooltip::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1e293b;
}
.mgr-kpi-card:hover .mgr-kpi-tooltip {
  display: block;
}
.mgr-tip-title {
  font-weight: 600;
  color: #f1f5f9;
  margin-bottom: 6px;
  font-size: 12px;
}
.mgr-tip-formula {
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.6;
}
.mgr-tip-formula b {
  color: #a5b4fc;
  font-weight: 600;
}
.mgr-kpi-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--mgr-text-muted);
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mgr-kpi-label .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0.8;
}
.mgr-kpi-value {
  font-size: 34px;
  font-weight: 700;
  color: var(--mgr-text);
  margin-top: 10px;
  line-height: 1;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.mgr-kpi-unit {
  display: block;
  font-size: 12px;
  color: var(--mgr-text-muted);
  font-weight: 500;
  margin-top: 6px;
}
.mgr-kpi-icon {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* ─── Dashboard Charts ─── */
.mgr-chart-card {
  background: var(--mgr-bg-card);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-radius-card);
  padding: 26px 28px;
  box-shadow: var(--mgr-shadow-card);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.mgr-chart-card:hover {
  box-shadow: var(--mgr-shadow-card-hover);
}
.mgr-chart-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--mgr-text);
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}
.mgr-chart-desc {
  font-size: 12px;
  color: var(--mgr-text-muted);
  margin-bottom: 18px;
}

/* Donut chart legend */
.mgr-pie-container { display: flex; align-items: center; gap: 32px; }
.mgr-pie-legend { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mgr-legend-item { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 3px 8px; border-radius: 8px; transition: background 0.12s ease; }
.mgr-legend-item:hover { background: var(--mgr-bg-hover); }
.mgr-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.mgr-legend-label { color: var(--mgr-text-secondary); flex: 1; }
.mgr-legend-count { color: var(--mgr-text-sub); font-weight: 600; font-variant-numeric: tabular-nums; }
.mgr-legend-pct { color: var(--mgr-text-muted); font-size: 11px; width: 36px; text-align: right; }
.mgr-donut-num { fill: var(--mgr-text); }
.mgr-donut-sub { fill: var(--mgr-text-muted); }

/* SVG Chart colors */
.mgr-chart-grid { stroke: var(--mgr-border-subtle); stroke-width: 1; }
.mgr-chart-label { fill: var(--mgr-text-muted); font-size: 11px; }
.mgr-chart-value { fill: var(--mgr-text-secondary); font-size: 10px; }

/* Bar chart */
.mgr-bar-group { display: flex; gap: 8px; height: 140px; padding-top: 10px; }
.mgr-bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; flex: 1; height: 100%; }
.mgr-bar { border-radius: 4px 4px 0 0; width: 100%; transition: height 0.3s; }
.mgr-bar-label { font-size: 10px; color: var(--mgr-text-muted); }
.mgr-bar-value { font-size: 10px; color: var(--mgr-text-secondary); font-weight: 600; }

/* ─── Dashboard Alerts ─── */
.mgr-alert-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--mgr-border-subtle);
  transition: background 0.15s ease;
  text-decoration: none;
  color: inherit;
}
.mgr-alert-item:hover {
  background: var(--mgr-bg-hover);
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 10px;
}
.mgr-alert-item:last-child { border-bottom: none; }
.mgr-alert-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  /* default fallback — overridden by JS avatarColor */
  background: var(--mgr-bg-card-alt);
  color: var(--mgr-text-secondary);
}
.mgr-alert-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.mgr-alert-tag--expire { background: #fef3c7; color: #b45309; }
.mgr-alert-tag--low { background: #ffedd5; color: #c2410c; }
.mgr-alert-tag--churn { background: #fee2e2; color: #b91c1c; }

/* ─── Dashboard Quick Stats ─── */
.mgr-quick-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--mgr-border-subtle);
}
.mgr-quick-stat:last-child { border-bottom: none; }
.mgr-quick-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--mgr-text);
}

/* ─── Change indicator ─── */
.mgr-change { font-weight: 600; font-size: 12px; display: inline-flex; align-items: center; gap: 2px; }
.mgr-change--up { color: #10b981; }
.mgr-change--down { color: #ef4444; }

/* KPI delta chip (Toss-style pill) */
.mgr-delta {
  display: inline-flex; align-items: center; gap: 1px;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 8px 3px 6px; border-radius: 9999px;
}
.mgr-delta i { font-size: 13px; margin-right: -2px; }
.mgr-delta--up { background: rgba(16,185,129,0.12); color: #059669; }
.mgr-delta--down { background: rgba(239,68,68,0.12); color: #dc2626; }

/* ─── Dashboard Settings Toggle ─── */
.mgr-settings-card { overflow: visible; }
.mgr-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mgr-toggle-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.mgr-toggle-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--mgr-text-sub);
  white-space: nowrap;
}
.mgr-toggle-tooltip-trigger {
  position: relative;
  display: inline-flex;
}
.mgr-toggle-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #e2e8f0;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
  min-width: 220px;
  max-width: 280px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  z-index: 60;
  pointer-events: none;
  white-space: normal;
}
.mgr-toggle-tooltip::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1e293b;
}
.mgr-toggle-tooltip-trigger:hover .mgr-toggle-tooltip {
  display: block;
}
.mgr-toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.mgr-toggle-switch input { opacity: 0; width: 0; height: 0; }
.mgr-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--mgr-input-border);
  border-radius: 20px;
  transition: background 0.2s;
}
.mgr-toggle-slider::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.mgr-toggle-switch input:checked + .mgr-toggle-slider {
  background: #8b5cf6;
}
.mgr-toggle-switch input:checked + .mgr-toggle-slider::before {
  transform: translateX(16px);
}

/* ─── Settings modal ─── */
.mgr-setting-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--mgr-border-subtle);
}
.mgr-setting-item:last-child { border-bottom: none; }

/* ═══════════════════════════════════════════════════
   DARK MODE — Tailwind utility class overrides
   .mgr-dark가 <html>에 적용되면 활성화.
   템플릿 수정 없이 CSS 레벨에서 색상을 전환한다.
   ═══════════════════════════════════════════════════ */

/* --- Transition (테마 전환 시에만 JS로 .mgr-theme-transition 추가) --- */
html.mgr-theme-transition,
html.mgr-theme-transition *,
html.mgr-theme-transition *::before,
html.mgr-theme-transition *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* --- CSS Variables (light mode defaults + dark overrides) --- */
:root {
    --mgr-bg:             #F8F9FA;
    --mgr-bg-card:        #ffffff;
    --mgr-bg-card-alt:    #f3f4f6;
    --mgr-bg-hover:       #f9fafb;
    --mgr-bg-input:       #f9fafb;
    --mgr-text:           #111827;
    --mgr-text-sub:       #374151;
    --mgr-text-secondary: #6b7280;
    --mgr-text-muted:     #9ca3af;
    --mgr-border:         #e5e7eb;
    --mgr-border-subtle:  #f3f4f6;
    --mgr-input-border:   #d1d5db;
    --mgr-shadow-card:    0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
    --mgr-shadow-card-hover: 0 4px 12px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);

    /* Brand (테마 무관 — 다크에서도 동일 유지) */
    --bjj-accent:        #e6b105;
    --bjj-accent-weak:   rgba(230, 177, 5, 0.12);
    --bjj-accent-strong: #c99a04;
    --bjj-primary:       #020520;
    --bjj-primary-l:     #080e4a;

    /* Radius */
    --mgr-radius-card:   1rem;   /* 16px — 카드 표준 */
}

.mgr-dark {
    --mgr-bg:             #0f172a;
    --mgr-bg-card:        #1e293b;
    --mgr-bg-card-alt:    #283548;
    --mgr-bg-hover:       #334155;
    --mgr-bg-input:       #0f172a;
    --mgr-text:           #f1f5f9;
    --mgr-text-sub:       #e2e8f0;
    --mgr-text-secondary: #94a3b8;
    --mgr-text-muted:     #64748b;
    --mgr-border:         #334155;
    --mgr-border-subtle:  #1e293b;
    --mgr-border-light:   #1e293b;
    --mgr-input-bg:       #1e293b;
    --mgr-input-border:   #475569;
    --mgr-shadow-card:    0 1px 3px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.03);
    --mgr-shadow-card-hover: 0 8px 28px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
    color-scheme: dark;
}

/* --- Text selection --- */
.mgr-dark ::selection {
    background: rgba(230,177,5,0.25);
    color: #fef3c7;
}

/* --- Body / Background (slate 계열: 차가운 톤으로 깊이감) --- */
.mgr-dark body { background-color: #0f172a; color: #e2e8f0; }

/* --- Background overrides --- */
.mgr-dark .bg-white        { background-color: #1e293b; }
.mgr-dark .bg-gray-50      { background-color: #0f172a; }
.mgr-dark .bg-gray-100     { background-color: #283548; }
.mgr-dark .bg-gray-200     { background-color: #334155; }
.mgr-dark .bg-gray-300     { background-color: #475569; }
.mgr-dark .bg-bjj-surface  { background-color: #0f172a; }

/* --- Brand color overrides (bjj-primary/accent 다크 대응) --- */
.mgr-dark .bg-bjj-primary   { background-color: #1e3a8a; }
.mgr-dark .hover\:bg-bjj-primary-l:hover { background-color: #1e40af; }
.mgr-dark .text-bjj-primary { color: var(--bjj-accent); }
.mgr-dark .bg-bjj-accent.text-bjj-primary,
.mgr-dark .bg-bjj-accent .text-bjj-primary { color: var(--bjj-primary); }

/* --- Sidebar: 다크모드에서도 원래 테마 색상 유지 --- */
.mgr-dark .mgr-sidebar.bg-bjj-primary,
.mgr-dark .mgr-sidebar .bg-bjj-primary { background-color: var(--bjj-primary); }
.mgr-dark .mgr-sidebar .text-bjj-primary { color: var(--bjj-primary); }

/* --- Text overrides (slate 계열) --- */
.mgr-dark .text-gray-900   { color: #f1f5f9; }
.mgr-dark .text-gray-800   { color: #e2e8f0; }
.mgr-dark .text-gray-700   { color: #cbd5e1; }
.mgr-dark .text-gray-600   { color: #94a3b8; }
.mgr-dark .text-gray-500   { color: #94a3b8; }
.mgr-dark .text-gray-400   { color: #94a3b8; }
.mgr-dark .text-gray-300   { color: #64748b; }
.mgr-dark .text-black      { color: #f1f5f9; }

/* --- Border overrides --- */
.mgr-dark .border-gray-100 { border-color: #1e293b; }
.mgr-dark .border-gray-200 { border-color: #334155; }
.mgr-dark .border-gray-300 { border-color: #475569; }
.mgr-dark .border-gray-400 { border-color: #475569; }
.mgr-dark .divide-gray-50 > :not(:last-child)  { border-color: rgba(255,255,255,0.04); }
.mgr-dark .divide-gray-100 > :not(:last-child) { border-color: #1e293b; }
.mgr-dark .divide-gray-200 > :not(:last-child) { border-color: #334155; }

/* --- Hover state overrides --- */
.mgr-dark .hover\:bg-gray-50:hover  { background-color: #1e293b; }
.mgr-dark .hover\:bg-gray-100:hover { background-color: #334155; }
.mgr-dark .hover\:bg-gray-200:hover { background-color: #475569; }

/* --- Ring / Focus (accent 색상으로 눈에 띄게) --- */
.mgr-dark .ring-gray-200    { --tw-ring-color: #334155; }
.mgr-dark .ring-gray-300    { --tw-ring-color: #475569; }
.mgr-dark .focus\:ring-gray-300:focus { --tw-ring-color: rgba(230,177,5,0.4); }

/* --- Shadow (글로우 효과로 깊이감) --- */
.mgr-dark .shadow-sm  { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.03); }
.mgr-dark .shadow     { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03); }
.mgr-dark .shadow-md  { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); }
.mgr-dark .shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); }
.mgr-dark .shadow-xl  { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05); }
.mgr-dark .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05); }

/* --- Form elements --- */
.mgr-dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.mgr-dark textarea,
.mgr-dark select {
    background-color: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}
.mgr-dark input::placeholder,
.mgr-dark textarea::placeholder {
    color: #64748b;
}
.mgr-dark input:focus,
.mgr-dark textarea:focus,
.mgr-dark select:focus {
    border-color: rgba(230,177,5,0.5);
    box-shadow: 0 0 0 3px rgba(230,177,5,0.1);
}

/* --- Member table --- */
.mgr-dark #member-sort-header {
    background-color: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
.mgr-dark .mgr-member-row:hover { background-color: rgba(255,255,255,0.02); }

/* --- Completeness bar background --- */
.mgr-dark .bg-gray-100.rounded-full { background-color: #334155; }

/* --- Toast (글로우 테두리) --- */
.mgr-dark #mgrToast .bg-white { background-color: #1e293b; box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05); }

/* --- Scrollbar --- */
.mgr-dark ::-webkit-scrollbar-track { background: #0f172a; }
.mgr-dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
.mgr-dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* --- Semantic color badges (투명도 높여서 다크 배경에서 뚜렷하게) --- */
.mgr-dark .bg-yellow-50     { background-color: rgba(230,177,5,0.10); }
.mgr-dark .bg-green-50      { background-color: rgba(34,197,94,0.10); }
.mgr-dark .bg-red-50        { background-color: rgba(239,68,68,0.10); }
.mgr-dark .bg-blue-50       { background-color: rgba(59,130,246,0.10); }
.mgr-dark .bg-purple-50     { background-color: rgba(139,92,246,0.10); }
.mgr-dark .bg-orange-50     { background-color: rgba(249,115,22,0.10); }
.mgr-dark .bg-indigo-50     { background-color: rgba(99,102,241,0.10); }
.mgr-dark .bg-emerald-50    { background-color: rgba(16,185,129,0.10); }
.mgr-dark .bg-amber-50      { background-color: rgba(245,158,11,0.10); }
.mgr-dark .bg-yellow-100    { background-color: rgba(230,177,5,0.15); }
.mgr-dark .bg-green-100     { background-color: rgba(34,197,94,0.15); }
.mgr-dark .bg-red-100       { background-color: rgba(239,68,68,0.15); }
.mgr-dark .bg-blue-100      { background-color: rgba(59,130,246,0.15); }
.mgr-dark .bg-purple-100    { background-color: rgba(139,92,246,0.15); }
.mgr-dark .bg-orange-100    { background-color: rgba(249,115,22,0.15); }
.mgr-dark .bg-emerald-100   { background-color: rgba(16,185,129,0.15); }
.mgr-dark .bg-amber-100     { background-color: rgba(245,158,11,0.15); }
.mgr-dark .bg-indigo-100    { background-color: rgba(99,102,241,0.15); }
.mgr-dark .bg-cyan-100      { background-color: rgba(6,182,212,0.15); }
.mgr-dark .bg-teal-100      { background-color: rgba(20,184,166,0.15); }
.mgr-dark .bg-rose-100      { background-color: rgba(244,63,94,0.15); }
.mgr-dark .bg-violet-100    { background-color: rgba(139,92,246,0.15); }
.mgr-dark .text-yellow-800  { color: #fbbf24; }
.mgr-dark .text-green-800   { color: #4ade80; }
.mgr-dark .text-red-800     { color: #f87171; }
.mgr-dark .text-blue-800    { color: #60a5fa; }
.mgr-dark .text-yellow-600  { color: #fbbf24; }
.mgr-dark .text-green-600   { color: #4ade80; }
.mgr-dark .text-red-600     { color: #f87171; }
.mgr-dark .text-blue-600    { color: #60a5fa; }
.mgr-dark .text-purple-600  { color: #a78bfa; }
.mgr-dark .text-orange-600  { color: #fb923c; }
.mgr-dark .text-emerald-600 { color: #34d399; }
.mgr-dark .text-yellow-700  { color: #fbbf24; }
.mgr-dark .text-green-700   { color: #4ade80; }
.mgr-dark .text-red-700     { color: #f87171; }
.mgr-dark .text-blue-700    { color: #60a5fa; }
.mgr-dark .text-purple-700  { color: #a78bfa; }
.mgr-dark .text-orange-700  { color: #fb923c; }
.mgr-dark .text-emerald-700 { color: #34d399; }
.mgr-dark .text-cyan-700    { color: #22d3ee; }
.mgr-dark .text-teal-700    { color: #2dd4bf; }
.mgr-dark .text-rose-700    { color: #fb7185; }
.mgr-dark .text-indigo-700  { color: #818cf8; }
.mgr-dark .text-violet-700  { color: #a78bfa; }
.mgr-dark .border-yellow-200 { border-color: rgba(230,177,5,0.2); }
.mgr-dark .border-green-200  { border-color: rgba(34,197,94,0.2); }
.mgr-dark .border-red-200    { border-color: rgba(239,68,68,0.2); }
.mgr-dark .border-blue-200   { border-color: rgba(59,130,246,0.2); }
.mgr-dark .border-purple-200 { border-color: rgba(139,92,246,0.2); }
.mgr-dark .border-orange-200 { border-color: rgba(249,115,22,0.2); }
.mgr-dark .border-amber-200  { border-color: rgba(245,158,11,0.2); }
.mgr-dark .border-blue-100   { border-color: rgba(59,130,246,0.12); }

/* --- Gradient stops → dark solid tint (회원권 카드, 배지 등) --- */
.mgr-dark .from-blue-50,
.mgr-dark .from-amber-50,
.mgr-dark .from-red-50,
.mgr-dark .from-gray-50,
.mgr-dark .from-pink-50 {
    --tw-gradient-from: transparent;
    --tw-gradient-stops: transparent;
    background-image: none !important;
}
.mgr-dark .from-blue-50.to-indigo-50  { background-color: rgba(59,130,246,0.08); }
.mgr-dark .from-amber-50.to-orange-50 { background-color: rgba(245,158,11,0.08); }
.mgr-dark .from-red-50.to-gray-50     { background-color: rgba(239,68,68,0.08); }
.mgr-dark .from-gray-50.to-blue-50    { background-color: rgba(59,130,246,0.05); }
.mgr-dark .from-gray-50.to-amber-50\/40 { background-color: rgba(245,158,11,0.06); }
.mgr-dark .from-pink-50.to-purple-50  { background-color: rgba(139,92,246,0.08); }

/* --- Tailwind opacity variant bg overrides (CDN JIT에서 bg-gray-50/50 등 별도 클래스 생성) --- */
.mgr-dark .bg-gray-50\/50,
.mgr-dark .bg-gray-50\/80 {
    background-color: rgba(15, 23, 42, 0.8) !important;
}
.mgr-dark .hover\:bg-gray-50\/50:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}
.mgr-dark .bg-emerald-50\/50 {
    background-color: rgba(16, 185, 129, 0.08) !important;
}

/* --- Contract editor section cards (JS rendered) --- */
.mgr-dark #sectionCards > div {
    border-color: rgba(255, 255, 255, 0.06);
}
.mgr-dark #sectionCards .drag-handle {
    color: #475569;
}
.mgr-dark .section-edit-area label {
    color: #94a3b8;
}
.mgr-dark .section-edit-area input[type="text"],
.mgr-dark .section-edit-area textarea,
.mgr-dark .section-edit-area input[type="number"] {
    background-color: #0f172a;
    border-color: #475569;
    color: #f1f5f9;
}

/* ─── Dashboard Responsive ─── */
@media (max-width: 767px) {
  .mgr-pie-container { flex-direction: column; gap: 16px; }
  .mgr-kpi-value { font-size: 28px; }
}

/* ═══════════════════════════════════════════════════
   MEMBERS TABLE — Row hover accent
   ═══════════════════════════════════════════════════ */
.mgr-member-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--bjj-accent);
    opacity: 0;
    transition: opacity 0.15s;
}
.mgr-member-row:hover::before {
    opacity: 1;
}

/* Accordion animation */
.accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.accordion-body.open { max-height: 600px; }
.acc-chev.open { transform: rotate(180deg); }

/* === Section Drag & Drop === */
.mgr-drag-handle {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: var(--mgr-input-border);
    background: transparent;
    font-size: 14px;
    transition: color 0.2s, background 0.2s;
    z-index: 2;
}
.mgr-drag-handle:hover {
    color: var(--mgr-text-secondary);
    background: var(--mgr-bg-card-alt);
}
.mgr-drag-handle:active {
    cursor: grabbing;
    color: var(--bjj-accent);
    background: rgba(230, 177, 5, 0.08);
}

.mgr-draggable-section {
    position: relative;
}
.mgr-draggable-section .mgr-section-header {
    padding-right: 48px;
}
.mgr-draggable-section.dragging {
    opacity: 0.35;
    transform: scale(0.98);
    transition: opacity 0.2s, transform 0.2s;
}

.mgr-drop-indicator {
    height: 3px;
    background: var(--bjj-accent);
    border-radius: 2px;
    margin: 6px 0;
}

/* === Profile Card (Gym Info) === */
.mgr-profile-card {
    border: none;
}

/* === Completeness Bar Gradients === */
.mgr-bar-start {
    background: linear-gradient(90deg, #f97316, #fb923c);
}
.mgr-bar-good {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}
.mgr-bar-complete {
    background: linear-gradient(90deg, #10b981, #34d399);
}

/* === Facility Chips === */
.mgr-facility-chip.active {
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.mgr-facility-chip.active i {
    color: inherit;
}

/* ═══════════════════════════════════════════════════
   PRODUCT SHOWCASE (Landing — tabbed browser frame)
   ═══════════════════════════════════════════════════ */

/* Tab buttons */
.showcase-tabs {
    display: flex;
    gap: 0.375rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.showcase-tab {
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: all 0.25s;
    white-space: nowrap;
}
.showcase-tab:hover {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
}
.showcase-tab--active {
    color: var(--bjj-primary);
    background: var(--bjj-accent);
    border-color: var(--bjj-accent);
}
.showcase-tab--active:hover {
    color: var(--bjj-primary);
    background: #f0c940;
}

/* Browser frame */
.showcase-browser {
    background: #0c1154;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    box-shadow:
        0 24px 80px -16px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    max-width: 960px;
    margin: 0 auto;
}
.showcase-browser-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.showcase-browser-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.showcase-browser-url {
    margin-left: 12px;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.25);
    font-family: 'SF Mono', 'Fira Code', monospace;
    background: rgba(255, 255, 255, 0.04);
    padding: 3px 12px;
    border-radius: 6px;
    flex: 1;
    max-width: 320px;
}

/* Screenshot area */
.showcase-screens {
    position: relative;
    min-height: 420px;
    overflow: hidden;
}
.showcase-screen {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.showcase-screen--active {
    opacity: 1;
    pointer-events: auto;
    position: relative;
}

/* Placeholder gradient (before real screenshots) */
.showcase-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    padding: 2.5rem;
    background:
        radial-gradient(ellipse 60% 60% at 50% 30%, rgba(230, 177, 5, 0.06) 0%, transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 40%);
}
.showcase-placeholder-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 1rem;
}
.showcase-placeholder-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.5rem;
}
.showcase-placeholder-desc {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
    max-width: 360px;
    line-height: 1.6;
}
/* Real screenshot image */
.showcase-screen img {
    width: 100%;
    height: auto;
    display: block;
}

/* Showcase caption */
.showcase-caption {
    padding: 1.5rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 1rem;
}
.showcase-caption-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: rgba(230, 177, 5, 0.1);
    color: var(--bjj-accent);
    flex-shrink: 0;
}
.showcase-caption-text {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
}

/* Auto-rotate indicator */
.showcase-progress {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 1.5rem;
}
.showcase-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}
.showcase-dot--active {
    width: 24px;
    border-radius: 3px;
    background: var(--bjj-accent);
}

@media (max-width: 767px) {
    .showcase-screens { min-height: 280px; }
    .showcase-placeholder { min-height: 280px; padding: 1.5rem; }
    .showcase-caption { padding: 1rem 1.25rem; }
    .showcase-browser { border-radius: 0.75rem; }
    .showcase-tab { padding: 0.375rem 0.875rem; font-size: 0.75rem; }
}

/* ═══════════════════════════════════════════════════
   SHOWCASE — Cursor & UI Reaction Animations
   ═══════════════════════════════════════════════════ */

/* --- Showcase Cursor Common --- */
.showcase-cursor.landing-cursor {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    pointer-events: none;
    z-index: 50;
    will-change: transform;
}

/* --- Showcase UI Element Transitions --- */
.sc-toast {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sc-toast--visible {
    opacity: 1;
    transform: translateY(0);
}

.sc-kakao-popup {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sc-kakao-popup--visible {
    opacity: 1;
    transform: translateX(0);
}

.sc2-side-panel {
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sc2-side-panel--visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* ─── Tab 0: Dashboard (sc1-) ─── */

/* Cursor: 8s loop, 4 stops within 960×420 area */
.showcase-screen--active .sc1-cursor {
    animation: sc1-cursor-move 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.showcase-screen:not(.showcase-screen--active) .sc1-cursor {
    animation: none;
}

@keyframes sc1-cursor-move {
    0%, 5%    { transform: translate(600px, 30px);  }   /* KPI row */
    12%       { transform: translate(400px, 60px);  }   /* curve midpoint */
    25%, 30%  { transform: translate(150px, 200px); }   /* donut chart */
    38%       { transform: translate(400px, 180px); }   /* curve midpoint */
    50%, 55%  { transform: translate(650px, 200px); }   /* line graph */
    63%       { transform: translate(500px, 290px); }   /* curve midpoint */
    75%, 80%  { transform: translate(400px, 360px); }   /* alerts list */
    90%       { transform: translate(550px, 200px); }   /* return curve */
    95%, 100% { transform: translate(600px, 30px);  }   /* back to start */
}

/* KPI card highlight synced with cursor */
.showcase-screen--active .sc1-kpi {
    will-change: box-shadow;
    animation: sc1-kpi-highlight 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes sc1-kpi-highlight {
    0%, 3%    { box-shadow: 0 0 0 0 rgba(230, 177, 5, 0); }
    5%, 22%   { box-shadow: 0 0 10px 1px rgba(230, 177, 5, 0.1); }
    25%, 100% { box-shadow: 0 0 0 0 rgba(230, 177, 5, 0); }
}

/* Donut card glow when cursor is nearby */
.showcase-screen--active .sc1-donut {
    will-change: box-shadow;
    animation: sc1-donut-glow 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes sc1-donut-glow {
    0%, 23%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
    25%, 48%  { box-shadow: 0 0 10px 1px rgba(59, 130, 246, 0.1); }
    50%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

/* Line chart glow when cursor is nearby */
.showcase-screen--active .sc1-line {
    will-change: box-shadow;
    animation: sc1-line-glow 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes sc1-line-glow {
    0%, 48%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
    50%, 72%  { box-shadow: 0 0 10px 1px rgba(59, 130, 246, 0.1); }
    75%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

/* Alerts card glow when cursor is nearby */
.showcase-screen--active .sc1-alerts {
    will-change: box-shadow;
    animation: sc1-alerts-glow 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes sc1-alerts-glow {
    0%, 72%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    75%, 92%  { box-shadow: 0 0 10px 1px rgba(239, 68, 68, 0.1); }
    95%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ─── Tab 1: Members (sc2-) ─── */

/* Cursor: 8s loop */
.showcase-screen--active .sc2-cursor {
    animation: sc2-cursor-move 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.showcase-screen:not(.showcase-screen--active) .sc2-cursor {
    animation: none;
}

@keyframes sc2-cursor-move {
    0%, 5%    { transform: translate(180px, 25px);  }   /* filter buttons */
    12%       { transform: translate(220px, 50px);  }   /* curve midpoint */
    20%       { transform: translate(200px, 28px);  }   /* click on "블루" */
    25%, 30%  { transform: translate(300px, 140px); }   /* first member row */
    38%       { transform: translate(500px, 180px); }   /* curve midpoint */
    50%, 55%  { transform: translate(700px, 200px); }   /* side panel area */
    63%       { transform: translate(500px, 120px); }   /* curve midpoint */
    75%, 80%  { transform: translate(300px, 60px);  }   /* back near filter */
    90%       { transform: translate(200px, 40px);  }   /* return curve */
    95%, 100% { transform: translate(180px, 25px);  }   /* back to start */
}

/* Filter button highlight: becomes active at ~20% */
.showcase-screen--active .sc2-filter-blue {
    will-change: background-color, color;
    animation: sc2-filter-activate 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes sc2-filter-activate {
    0%, 18%   { background-color: #f3f4f6; color: #6b7280; }
    22%, 72%  { background-color: #3b82f6; color: #fff; }
    78%, 100% { background-color: #f3f4f6; color: #6b7280; }
}

/* Side panel slides in at ~50% */
.showcase-screen--active .sc2-side-panel {
    will-change: transform, opacity;
    animation: sc2-panel-slide 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes sc2-panel-slide {
    0%, 45%   { opacity: 0; transform: translateX(20px); }
    50%, 80%  { opacity: 1; transform: translateX(0); }
    85%, 100% { opacity: 0; transform: translateX(20px); }
}

/* First member row highlight when cursor hovers */
.showcase-screen--active .sc2-row:first-of-type {
    will-change: background-color;
    animation: sc2-row-highlight 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes sc2-row-highlight {
    0%, 23%   { background-color: transparent; }
    27%, 45%  { background-color: #f0f9ff; }
    50%, 100% { background-color: transparent; }
}

/* ─── Tab 2: Contracts (sc3-) ─── */

/* Cursor: 8s loop */
.showcase-screen--active .sc3-cursor {
    animation: sc3-cursor-move 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.showcase-screen:not(.showcase-screen--active) .sc3-cursor {
    animation: none;
}

@keyframes sc3-cursor-move {
    0%, 5%    { transform: translate(200px, 100px); }   /* contract list scan */
    12%       { transform: translate(300px, 150px); }   /* scan down */
    20%       { transform: translate(400px, 200px); }   /* continue scan */
    25%, 30%  { transform: translate(650px, 260px); }   /* "알림톡 발송" button */
    38%       { transform: translate(550px, 280px); }   /* click motion */
    42%       { transform: translate(660px, 260px); }   /* return to btn */
    50%, 55%  { transform: translate(450px, 330px); }   /* toast area */
    63%       { transform: translate(600px, 340px); }   /* curve midpoint */
    75%, 80%  { transform: translate(780px, 350px); }   /* kakao popup */
    90%       { transform: translate(500px, 200px); }   /* return curve */
    95%, 100% { transform: translate(200px, 100px); }   /* back to start */
}

/* Send button hover/click effect at ~25% */
.showcase-screen--active .sc3-send-btn {
    will-change: transform, box-shadow;
    animation: sc3-btn-click 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes sc3-btn-click {
    0%, 25%   { transform: scale(1); box-shadow: none; }
    30%       { transform: scale(0.92); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); }
    35%, 45%  { transform: scale(1); box-shadow: 0 0 8px 2px rgba(59, 130, 246, 0.15); }
    50%, 100% { transform: scale(1); box-shadow: none; }
}

/* Toast appears at ~50% */
.showcase-screen--active .sc3-toast {
    display: block !important;
    will-change: transform, opacity;
    animation: sc3-toast-appear 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes sc3-toast-appear {
    0%, 45%   { opacity: 0; transform: translateX(-50%) translateY(20px); }
    50%, 72%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    78%, 100% { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

/* Kakao popup appears at ~75% */
.showcase-screen--active .sc3-kakao-popup {
    display: block !important;
    will-change: transform, opacity;
    animation: sc3-kakao-appear 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes sc3-kakao-appear {
    0%, 70%   { opacity: 0; transform: translateX(30px); }
    75%, 92%  { opacity: 1; transform: translateX(0); }
    96%, 100% { opacity: 0; transform: translateX(30px); }
}

/* ─── Tab 3: Attendance (sc4-) ─── */

/* Cursor: 8s loop */
.showcase-screen--active .sc4-cursor {
    animation: sc4-cursor-move 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.showcase-screen:not(.showcase-screen--active) .sc4-cursor {
    animation: none;
}

@keyframes sc4-cursor-move {
    0%, 5%    { transform: translate(250px, 30px);  }   /* schedule tabs */
    15%       { transform: translate(350px, 50px);  }   /* curve midpoint */
    25%, 30%  { transform: translate(450px, 180px); }   /* QR scan center */
    40%       { transform: translate(380px, 220px); }   /* linger near QR */
    50%, 55%  { transform: translate(350px, 280px); }   /* list area */
    63%       { transform: translate(400px, 340px); }   /* further down */
    75%, 80%  { transform: translate(300px, 360px); }   /* bottom list */
    90%       { transform: translate(300px, 180px); }   /* return curve */
    95%, 100% { transform: translate(250px, 30px);  }   /* back to start */
}

/* QR pulse rings: 3 concentric circles scale+fade at 30-60% */
.showcase-screen--active .sc4-qr-pulse {
    display: block !important;
    will-change: opacity;
    animation: sc4-qr-show 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes sc4-qr-show {
    0%, 28%   { opacity: 0; }
    30%, 60%  { opacity: 1; }
    65%, 100% { opacity: 0; }
}

/* Pulse rings: target the 3 concentric circle divs inside the wrapper */
.showcase-screen--active .sc4-qr-pulse > div > div {
    will-change: transform, opacity;
    animation: sc4-pulse 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.showcase-screen--active .sc4-qr-pulse > div > div:nth-child(2) {
    animation-delay: 0.4s;
}
.showcase-screen--active .sc4-qr-pulse > div > div:nth-child(3) {
    animation-delay: 0.8s;
}
@keyframes sc4-pulse {
    0%   { transform: scale(0); opacity: 0.6; }
    100% { transform: scale(2); opacity: 0; }
}

/* Attendance toast appears at 50% */
.showcase-screen--active .sc4-toast {
    display: block !important;
    will-change: transform, opacity;
    animation: sc4-toast-appear 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes sc4-toast-appear {
    0%, 45%   { opacity: 0; transform: translateY(-10px); }
    50%, 72%  { opacity: 1; transform: translateY(0); }
    78%, 100% { opacity: 0; transform: translateY(-10px); }
}

/* Counter card glow during QR scan */
.showcase-screen--active .sc4-counter {
    will-change: box-shadow;
    animation: sc4-counter-glow 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes sc4-counter-glow {
    0%, 28%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
    30%, 58%  { box-shadow: 0 0 12px 2px rgba(16, 185, 129, 0.1); }
    62%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ─── Tab 4: Notifications (sc5-) ─── */

/* Cursor: 8s loop */
.showcase-screen--active .sc5-cursor {
    animation: sc5-cursor-move 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.showcase-screen:not(.showcase-screen--active) .sc5-cursor {
    animation: none;
}

@keyframes sc5-cursor-move {
    0%, 5%    { transform: translate(180px, 100px); }   /* template cards */
    12%       { transform: translate(200px, 150px); }   /* scan templates */
    20%       { transform: translate(160px, 120px); }   /* first template */
    25%, 30%  { transform: translate(600px, 140px); }   /* kakao preview */
    38%       { transform: translate(500px, 200px); }   /* curve midpoint */
    50%, 55%  { transform: translate(350px, 340px); }   /* recipients area */
    63%       { transform: translate(450px, 350px); }   /* scan recipients */
    70%       { transform: translate(600px, 360px); }   /* curve midpoint */
    75%, 80%  { transform: translate(750px, 350px); }   /* send button */
    90%       { transform: translate(400px, 220px); }   /* return curve */
    95%, 100% { transform: translate(180px, 100px); }   /* back to start */
}

/* Template card: first card gets border highlight when cursor is near */
.showcase-screen--active .sc5-template-card[data-template="promotion"] {
    will-change: box-shadow;
    animation: sc5-template-glow 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes sc5-template-glow {
    0%, 3%    { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
    5%, 22%   { box-shadow: 0 0 10px 2px rgba(59, 130, 246, 0.12); }
    25%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

/* Recipients panel appears at ~50% */
.showcase-screen--active .sc5-recipients {
    display: block !important;
    will-change: transform, opacity;
    animation: sc5-recipients-appear 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes sc5-recipients-appear {
    0%, 45%   { opacity: 0; transform: translateY(16px); }
    50%, 88%  { opacity: 1; transform: translateY(0); }
    92%, 100% { opacity: 0; transform: translateY(16px); }
}

/* Recipient chips sequential check animation (chips are <span> inside flex container) */
.showcase-screen--active .sc5-recipients > div:last-child > span:nth-child(1) {
    will-change: opacity, transform;
    animation: sc5-chip-check 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.showcase-screen--active .sc5-recipients > div:last-child > span:nth-child(2) {
    will-change: opacity, transform;
    animation: sc5-chip-check 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    animation-delay: 0.3s;
}
.showcase-screen--active .sc5-recipients > div:last-child > span:nth-child(3) {
    will-change: opacity, transform;
    animation: sc5-chip-check 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    animation-delay: 0.6s;
}
@keyframes sc5-chip-check {
    0%, 72%   { opacity: 0.4; transform: scale(0.95); }
    76%, 88%  { opacity: 1; transform: scale(1); }
    92%, 100% { opacity: 0.4; transform: scale(0.95); }
}

/* Send button glow at ~75% */
.showcase-screen--active .sc5-send-btn {
    will-change: transform, box-shadow;
    animation: sc5-btn-glow 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes sc5-btn-glow {
    0%, 72%   { transform: scale(1); box-shadow: none; }
    76%       { transform: scale(0.93); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); }
    80%, 88%  { transform: scale(1); box-shadow: 0 0 8px 2px rgba(59, 130, 246, 0.15); }
    92%, 100% { transform: scale(1); box-shadow: none; }
}

/* Kakao preview subtle glow when cursor is nearby */
.showcase-screen--active .sc5-kakao-preview {
    will-change: box-shadow;
    animation: sc5-kakao-glow 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes sc5-kakao-glow {
    0%, 23%   { box-shadow: none; }
    25%, 48%  { box-shadow: 0 0 12px 2px rgba(254, 229, 0, 0.1); }
    52%, 100% { box-shadow: none; }
}

/* ─── Showcase Cursor Mobile Adjustments ─── */
@media (max-width: 767px) {
    /* Hide cursors on small screens — animations would be off-target */
    .showcase-cursor.landing-cursor,
    .hero-cursor.landing-cursor {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════
   FAQ ACCORDION (Landing)
   ═══════════════════════════════════════════════════ */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 720px;
    margin: 0 auto;
}
.faq-item {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1rem;
    overflow: hidden;
    transition: border-color 0.3s, background 0.3s;
}
.faq-item:hover {
    border-color: rgba(255, 255, 255, 0.1);
}
.faq-item--open {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(230, 177, 5, 0.15);
}
.faq-question {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
    transition: color 0.2s;
}
.faq-question:hover {
    color: rgba(255, 255, 255, 0.9);
}
.faq-item--open .faq-question {
    color: var(--bjj-accent);
}
.faq-question-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.5rem;
    background: rgba(230, 177, 5, 0.1);
    color: var(--bjj-accent);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.faq-chevron {
    margin-left: auto;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.25);
    transition: transform 0.3s ease, color 0.3s;
    flex-shrink: 0;
}
.faq-item--open .faq-chevron {
    transform: rotate(180deg);
    color: var(--bjj-accent);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item--open .faq-answer {
    max-height: 500px;
}
.faq-answer-inner {
    padding: 0 1.5rem 1.25rem 3.875rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.8;
}
.faq-answer-inner a {
    color: var(--bjj-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 767px) {
    .faq-question { padding: 1rem 1.25rem; font-size: 0.875rem; gap: 0.625rem; }
    .faq-answer-inner { padding: 0 1.25rem 1rem 3.125rem; font-size: 0.8125rem; }
}

/* ═══════════════════════════════════════════════════
   SOCIAL PROOF / TRUST BADGES (Landing)
   ═══════════════════════════════════════════════════ */
.trust-badges {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}
.trust-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.trust-badge-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
}
.trust-badge-text {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════
   LANDING — Additional Mobile Responsive
   ═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Trust badges — reduce gap for 2×2 wrap */
    .trust-badges {
        gap: 1.5rem;
    }

    /* Showcase side panel — hide on mobile (animated element, too small to read) */
    .sc2-side-panel {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════
   ACCESSIBILITY — prefers-reduced-motion
   ═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    /* Hide all animated cursors */
    .landing-cursor {
        display: none !important;
    }
    .hero-cursor {
        display: none !important;
    }

    /* Disable all entrance animations */
    .animate-fade-in,
    .animate-fade-in-up {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Hero mockup — disable internal animations */
    .hero-mockup-wrap * {
        animation: none !important;
    }

    /* Showcase screens — disable internal animations */
    .showcase-screen * {
        animation: none !important;
    }

    /* Hero background orbs — disable floating animation */
    .hero-orb {
        animation: none !important;
    }

    /* Scroll reveal — show immediately without transition */
    .scroll-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ── 자동 메세지 카드/아코디언 ── */
.mgr-auto-category { margin-bottom: 1.5rem; }
.mgr-auto-category__label {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    color: var(--bjj-accent); margin-bottom: 0.5rem;
    padding-bottom: 0.25rem; border-bottom: 1px solid var(--mgr-border);
    display: flex; align-items: center; gap: 0.5rem;
}
.mgr-auto-card {
    background: var(--mgr-bg-card); border: 1px solid var(--mgr-border);
    border-radius: 0.75rem; margin-bottom: 0.5rem; overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.mgr-auto-card:hover { border-color: var(--mgr-input-border); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.mgr-auto-card__header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.25rem; cursor: pointer; gap: 1rem;
}
.mgr-auto-card__info { flex: 1; min-width: 0; }
.mgr-auto-card__title { font-size: 0.9rem; font-weight: 600; color: var(--mgr-text); margin: 0; }
.mgr-auto-card__desc { font-size: 0.75rem; color: var(--mgr-text-secondary); margin: 0.25rem 0 0; }
.mgr-auto-card__detail {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 1.25rem; border-top: 0 solid transparent;
}
.mgr-auto-card--expanded .mgr-auto-card__detail {
    max-height: 200px; padding: 0.75rem 1.25rem 1rem;
    border-top: 1px solid var(--mgr-border-subtle);
}
.mgr-auto-card__param { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.mgr-auto-card__param label { font-size: 0.8rem; color: var(--mgr-text-secondary); }
.mgr-auto-card__param-input { display: flex; align-items: center; gap: 0.25rem; }
.mgr-auto-card__param-input input {
    width: 4rem; padding: 0.25rem 0.5rem; border-radius: 0.375rem;
    background: var(--mgr-bg-input); border: 1px solid var(--mgr-input-border);
    color: var(--mgr-text); font-size: 0.85rem; text-align: center;
}
.mgr-auto-card__param-input input:focus { outline: none; border-color: var(--bjj-accent); }
.mgr-auto-card__param-input span { font-size: 0.8rem; color: var(--mgr-text-secondary); }
.mgr-auto-card__note { font-size: 0.75rem; color: var(--mgr-text-muted); margin: 0; }

/* Toggle switch */
.mgr-auto-toggle { position: relative; display: inline-block; width: 2.5rem; height: 1.375rem; }
.mgr-auto-toggle input { opacity: 0; width: 0; height: 0; }
.mgr-auto-toggle__slider {
    position: absolute; cursor: pointer; inset: 0;
    background: var(--mgr-input-border); border-radius: 1rem; transition: 0.3s;
}
.mgr-auto-toggle__slider::before {
    content: ""; position: absolute; height: 1rem; width: 1rem;
    left: 0.1875rem; bottom: 0.1875rem; background: #fff;
    border-radius: 50%; transition: 0.3s;
}
.mgr-auto-toggle input:checked + .mgr-auto-toggle__slider { background: #4ade80; }
.mgr-auto-toggle input:checked + .mgr-auto-toggle__slider::before { transform: translateX(1.125rem); }
.mgr-auto-toggle--disabled { opacity: 0.5; pointer-events: none; }

/* ═══════════════════════════════════════════════════
   MgrDatePicker — Toss-style custom calendar
   ═══════════════════════════════════════════════════ */

/* Wrapper */
.mgr-dp-wrap { position: relative; display: inline-block; }
.mgr-dp-wrap--block { display: block; }

/* Input */
.mgr-dp-input {
    width: 100%; padding: 10px 12px 10px 36px;
    border: 1.5px solid var(--mgr-border); border-radius: 10px;
    font-size: 14px; color: var(--mgr-text); background: var(--mgr-bg-card);
    cursor: pointer; outline: none; transition: border-color 0.2s;
    caret-color: transparent;
}
.mgr-dp-input:focus, .mgr-dp-input.mgr-dp-active { border-color: var(--mgr-text); }
.mgr-dp-input::placeholder { color: var(--mgr-text-muted); }
.mgr-dp-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--mgr-text-muted); font-size: 14px; pointer-events: none;
}

/* Small variant (for inline edit / settlement filter) */
.mgr-dp-input--sm { padding: 6px 8px 6px 30px; font-size: 12px; border-radius: 8px; }
.mgr-dp-input--sm + .mgr-dp-icon,
.mgr-dp-wrap--sm .mgr-dp-icon { left: 9px; font-size: 12px; }

/* Calendar popup */
.mgr-dp-cal {
    position: absolute; top: calc(100% + 6px); left: 0;
    width: 300px; background: var(--mgr-bg-card);
    border-radius: 14px; border: 1px solid var(--mgr-border);
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    z-index: 9999; display: none;
    animation: mgrDpFadeIn 0.15s ease-out;
}
.mgr-dp-cal.mgr-dp-open { display: block; }
.mgr-dp-cal.mgr-dp-align-right { left: auto; right: 0; }

@keyframes mgrDpFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Header */
.mgr-dp-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 16px 12px;
}
.mgr-dp-nav {
    width: 32px; height: 32px; border-radius: 8px; border: none;
    background: transparent; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    color: var(--mgr-text-secondary); font-size: 14px; transition: all 0.15s;
}
.mgr-dp-nav:hover { background: var(--mgr-bg-card-alt); color: var(--mgr-text); }
.mgr-dp-title {
    font-size: 15px; font-weight: 700; color: var(--mgr-text);
    cursor: pointer; padding: 4px 10px; border-radius: 8px;
    transition: all 0.15s; display: flex; align-items: center; gap: 4px;
    border: none; background: none;
}
.mgr-dp-title:hover { background: var(--mgr-bg-card-alt); }
.mgr-dp-title i { font-size: 10px; color: var(--mgr-text-muted); transition: transform 0.2s; }
.mgr-dp-title.mgr-dp-expanded i { transform: rotate(180deg); }

/* Weekday row */
.mgr-dp-weekdays {
    display: grid; grid-template-columns: repeat(7, 1fr);
    padding: 0 12px; margin-bottom: 4px;
}
.mgr-dp-weekday {
    text-align: center; font-size: 11px; font-weight: 600;
    color: var(--mgr-text-muted); padding: 4px 0;
}

/* Day grid */
.mgr-dp-days {
    display: grid; grid-template-columns: repeat(7, 1fr);
    padding: 0 12px 12px; gap: 2px;
}
.mgr-dp-day {
    text-align: center; font-size: 13px; font-weight: 500;
    padding: 8px 0; border-radius: 8px; cursor: pointer;
    transition: all 0.12s; color: var(--mgr-text-sub);
    border: none; background: none; width: 100%;
}
.mgr-dp-day:hover { background: var(--mgr-bg-card-alt); }
.mgr-dp-day--other { color: var(--mgr-input-border); }
.mgr-dp-day--today { border: 1.5px solid var(--mgr-input-border); }
.mgr-dp-day--selected { background: var(--mgr-text); color: var(--mgr-bg-card); font-weight: 600; }
.mgr-dp-day--selected.mgr-dp-day--today { border-color: var(--mgr-text); }
.mgr-dp-day--disabled { color: var(--mgr-border); pointer-events: none; cursor: default; }

/* Day view / month-year picker toggle */
.mgr-dp-dayview {}
.mgr-dp-dayview.mgr-dp-hidden { display: none; }
.mgr-dp-picker { display: none; padding: 16px; }
.mgr-dp-picker.mgr-dp-picker-open { display: block; }

/* Year nav */
.mgr-dp-year-nav {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.mgr-dp-year-label { font-size: 16px; font-weight: 700; color: var(--mgr-text); }

/* Month grid */
.mgr-dp-months {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.mgr-dp-month {
    padding: 10px 0; text-align: center; font-size: 13px; font-weight: 500;
    color: var(--mgr-text-sub); border-radius: 10px; cursor: pointer;
    transition: all 0.12s; border: 1.5px solid transparent;
    background: none;
}
.mgr-dp-month:hover { background: var(--mgr-bg-card-alt); }
.mgr-dp-month--current { border-color: var(--mgr-input-border); }
.mgr-dp-month--selected { background: var(--mgr-text); color: var(--mgr-bg-card); font-weight: 600; border-color: var(--mgr-text); }

/* Footer */
.mgr-dp-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 16px; border-top: 1px solid var(--mgr-border-subtle);
}
.mgr-dp-footer-btn {
    font-size: 12px; font-weight: 600; background: none; border: none;
    cursor: pointer; padding: 4px 10px; border-radius: 6px; transition: all 0.15s;
}
.mgr-dp-footer-btn:hover { background: var(--mgr-bg-card-alt); }
.mgr-dp-footer-btn--today { color: var(--mgr-text); }
.mgr-dp-footer-btn--clear { color: var(--mgr-text-muted); font-weight: 500; }
.mgr-dp-footer-btn--clear:hover { color: var(--mgr-text-secondary); }

/* ═══════════════════════════════════════════════════
   MEMBER LIST — Expired Member Visual Treatment
   ═══════════════════════════════════════════════════ */
.mgr-member-expired {
    opacity: 0.42;
    transition: opacity 0.2s ease;
}
.mgr-member-expired:hover {
    opacity: 0.78;
}
.mgr-member-expired .mgr-avatar-expired {
    filter: grayscale(1);
    transition: filter 0.2s ease;
}
.mgr-member-expired:hover .mgr-avatar-expired {
    filter: grayscale(0.3);
}

/* ═══════════════════════════════════════════════════
   Quota Banner — 한도 초과 알림
   ═══════════════════════════════════════════════════ */
.quota-banner {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s ease;
}
.quota-banner:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.06);
}

/* -- warn (계약서) */
.quota-banner--warn {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fcd34d;
}
.quota-banner--warn .quota-banner__icon-wrap {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}
.quota-banner--warn .quota-banner__count strong { color: #b45309; }
.quota-banner--warn .quota-banner__bar-track   { background: #fde68a; }
.quota-banner--warn .quota-banner__bar-fill    { background: linear-gradient(90deg, #f59e0b, #d97706); }
.quota-banner--warn .quota-banner__cta {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}
.quota-banner--warn .quota-banner__cta:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
}

/* -- danger (회원) */
.quota-banner--danger {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fca5a5;
}
.quota-banner--danger .quota-banner__icon-wrap {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
}
.quota-banner--danger .quota-banner__count strong { color: #dc2626; }
.quota-banner--danger .quota-banner__bar-track   { background: #fecaca; }
.quota-banner--danger .quota-banner__bar-fill    { background: linear-gradient(90deg, #ef4444, #dc2626); }
.quota-banner--danger .quota-banner__cta {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
}
.quota-banner--danger .quota-banner__cta:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

/* -- inner layout */
.quota-banner__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
}

.quota-banner__icon-wrap {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.quota-banner__content {
    flex: 1;
    min-width: 0;
}

.quota-banner__top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}
.quota-banner__label {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}
.quota-banner__count {
    font-size: 15px;
    font-weight: 600;
    color: #374151;
}
.quota-banner__count strong {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
}
.quota-banner__sep {
    color: #9ca3af;
    font-weight: 400;
    margin: 0 1px;
}

/* progress bar */
.quota-banner__bar-track {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}
.quota-banner__bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.quota-banner__msg {
    font-size: 12.5px;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}

/* CTA button */
.quota-banner__cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.quota-banner__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.quota-banner__cta:active {
    transform: translateY(0);
}

/* ── responsive: 모바일 세로 배치 ── */
@media (max-width: 640px) {
    .quota-banner__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px 16px;
    }
    .quota-banner__icon-wrap {
        width: 36px; height: 36px;
        border-radius: 10px;
        font-size: 17px;
    }
    .quota-banner__cta {
        text-align: center;
        justify-content: center;
        padding: 12px 16px;
        border-radius: 10px;
    }
}

/* ── dark mode ── */
.mgr-dark .quota-banner--warn {
    background: linear-gradient(135deg, rgba(245,158,11,0.1) 0%, rgba(217,119,6,0.08) 100%);
    border-color: rgba(245,158,11,0.25);
}
.mgr-dark .quota-banner--warn .quota-banner__icon-wrap {
    background: linear-gradient(135deg, #b45309, #92400e);
}
.mgr-dark .quota-banner--warn .quota-banner__count strong { color: #fbbf24; }
.mgr-dark .quota-banner--warn .quota-banner__bar-track { background: rgba(245,158,11,0.15); }
.mgr-dark .quota-banner--warn .quota-banner__bar-fill  { background: linear-gradient(90deg, #f59e0b, #b45309); }
.mgr-dark .quota-banner--warn .quota-banner__cta {
    background: linear-gradient(135deg, #b45309, #92400e);
}
.mgr-dark .quota-banner--warn .quota-banner__cta:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
}

.mgr-dark .quota-banner--danger {
    background: linear-gradient(135deg, rgba(239,68,68,0.1) 0%, rgba(220,38,38,0.08) 100%);
    border-color: rgba(239,68,68,0.25);
}
.mgr-dark .quota-banner--danger .quota-banner__icon-wrap {
    background: linear-gradient(135deg, #dc2626, #991b1b);
}
.mgr-dark .quota-banner--danger .quota-banner__count strong { color: #f87171; }
.mgr-dark .quota-banner--danger .quota-banner__bar-track { background: rgba(239,68,68,0.15); }
.mgr-dark .quota-banner--danger .quota-banner__bar-fill  { background: linear-gradient(90deg, #ef4444, #991b1b); }
.mgr-dark .quota-banner--danger .quota-banner__cta {
    background: linear-gradient(135deg, #dc2626, #991b1b);
}
.mgr-dark .quota-banner--danger .quota-banner__cta:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.mgr-dark .quota-banner__label  { color: #94a3b8; }
.mgr-dark .quota-banner__count  { color: #e2e8f0; }
.mgr-dark .quota-banner__sep    { color: #64748b; }
.mgr-dark .quota-banner__msg    { color: #94a3b8; }
.mgr-dark .quota-banner { box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.03); }
.mgr-dark .quota-banner:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06); }

/* ═══════════════════════════════════════════════════
   CTA GLOW ANIMATION
   ═══════════════════════════════════════════════════ */
.cta-glow {
    position: relative;
    overflow: visible;
}
.cta-glow::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: radial-gradient(ellipse at center, rgba(230, 177, 5, 0.35), transparent 70%);
    filter: blur(14px);
    opacity: 0;
    animation: ctaPulse 2.8s ease-in-out infinite;
    z-index: -1;
    pointer-events: none;
}
@keyframes ctaPulse {
    0%, 100% { opacity: 0; transform: scale(0.95); }
    50%      { opacity: 1; transform: scale(1.08); }
}

/* ═══════════════════════════════════════════════════
   HOW IT WORKS — JOURNEY TIMELINE
   ═══════════════════════════════════════════════════ */
.journey-timeline {
    position: relative;
}
.journey-connector {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, rgba(230,177,5,0.4), rgba(230,177,5,0.08));
    transform: translateX(-50%);
    pointer-events: none;
}
@media (max-width: 767px) {
    .journey-connector {
        left: 24px;
    }
}

.journey-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}
@media (min-width: 768px) {
    .journey-step { justify-content: center; }
    .journey-step--left .journey-card { margin-right: calc(50% + 2rem); text-align: right; }
    .journey-step--right .journey-card { margin-left: calc(50% + 2rem); }
}
@media (max-width: 767px) {
    .journey-step {
        padding-left: 56px;
    }
}

.journey-badge {
    position: absolute;
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 800;
    border: 2px solid rgba(230, 177, 5, 0.3);
    background: #060a35;
    color: var(--bjj-accent);
    box-shadow: 0 0 20px rgba(230, 177, 5, 0.1);
    transition: all 0.5s;
}
@media (min-width: 768px) {
    .journey-badge {
        left: 50%;
        transform: translateX(-50%);
    }
}
@media (max-width: 767px) {
    .journey-badge {
        left: 0;
    }
}
.journey-badge--final {
    background: var(--bjj-accent);
    color: var(--bjj-primary);
    border-color: var(--bjj-accent);
    box-shadow: 0 0 24px rgba(230, 177, 5, 0.3);
}

.journey-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1.25rem;
    padding: 1.5rem;
    transition: all 0.4s;
}
.journey-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(230, 177, 5, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px -10px rgba(0, 0, 0, 0.3);
}
.journey-card--highlight {
    border-color: rgba(230, 177, 5, 0.2);
    background: rgba(230, 177, 5, 0.04);
}
.journey-card--highlight:hover {
    border-color: rgba(230, 177, 5, 0.35);
    background: rgba(230, 177, 5, 0.07);
}
.journey-time {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    background: rgba(230, 177, 5, 0.08);
    color: rgba(230, 177, 5, 0.7);
}
.journey-time--emerald {
    background: rgba(16, 185, 129, 0.08);
    color: rgba(52, 211, 153, 0.7);
}
.journey-time--accent {
    background: rgba(230, 177, 5, 0.12);
    color: var(--bjj-accent);
}

.journey-preview {
    display: flex;
    gap: 0.5rem;
}
.journey-preview-btn {
    width: 36px;
    height: 36px;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}
.journey-preview-btn:hover {
    transform: scale(1.08);
}

.journey-form-preview {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    max-width: 220px;
}
@media (min-width: 768px) {
    .journey-step--left .journey-preview,
    .journey-step--left .journey-form-preview {
        justify-content: flex-end;
        margin-left: auto;
    }
}
.journey-form-row {
    height: 2rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
}

/* ═══════════════════════════════════════════════════
   FLOATING MOBILE CTA
   ═══════════════════════════════════════════════════ */
.floating-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(2, 5, 32, 0.98), rgba(2, 5, 32, 0.92));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(230, 177, 5, 0.12);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.floating-cta--visible {
    transform: translateY(0);
    pointer-events: auto;
}
@media (min-width: 768px) {
    .floating-cta { display: none !important; }
}