/* ========================================
   q-platform — Step Indicator
   .q-stepbar (default = lg, PC), .q-stepbar--sm (mobile compact)
   .q-step--done | .q-step--current | (default = future)
   .q-stepline | .q-stepline--done
   ======================================== */

.q-stepbar {
    --qsb-line: #eaf0f2;
    --qsb-line-done: #22c55e;
    --qsb-text: #0e2a2f;
    --qsb-text-muted: #587078;
    --qsb-text-dim: #94a8b0;
    --qsb-pending-bg: #e9eff1;
    --qsb-pending-border: #dde6e9;
    --qsb-done-bg: #22c55e;
    --qsb-done-border: #22c55e;
    --qsb-current-bg: #3b82f6;
    --qsb-current-border: #3b82f6;
    --qsb-current-glow: rgba(59,130,246,0.18);
    display: flex;
    align-items: flex-start;
    gap: 0;
}
[data-theme="dark"] .q-stepbar {
    --qsb-line: #16252f;
    --qsb-text: #e3eef3;
    --qsb-text-muted: #8aa2ad;
    --qsb-text-dim: #5d7682;
    --qsb-pending-bg: #0a1318;
    --qsb-pending-border: #1f3645;
}

.q-step {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    min-width: 80px;
    flex-shrink: 0;
}

.q-step__circle {
    width: 24px; height: 24px;
    border-radius: 999px;
    background: var(--qsb-pending-bg);
    border: 1px solid var(--qsb-pending-border);
    color: var(--qsb-text-dim);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.q-step__k {
    font-size: 11px; font-weight: 700;
    color: var(--qsb-text-muted);
}

.q-step__time {
    font-size: 10px; color: var(--qsb-text-dim);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.q-step--done .q-step__circle {
    background: var(--qsb-done-bg);
    border-color: var(--qsb-done-border);
    color: #fff;
}
.q-step--done .q-step__k { color: var(--qsb-text); }

.q-step--current .q-step__circle {
    background: var(--qsb-current-bg);
    border-color: var(--qsb-current-border);
    color: #fff;
    box-shadow: 0 0 0 4px var(--qsb-current-glow);
    animation: qsb-pulse 1.6s ease-out infinite;
}
.q-step--current .q-step__k {
    color: var(--qsb-text);
    font-weight: 800;
}

.q-stepline {
    flex: 1;
    height: 3px;
    background: var(--qsb-line);
    margin: 12px -2px 0;
    border-radius: 2px;
    transition: background 0.18s ease;
}
.q-stepline--done { background: var(--qsb-line-done); }

/* Compact (mobile) */
.q-stepbar--sm .q-step { min-width: 0; }
.q-stepbar--sm .q-step__circle { width: 18px; height: 18px; font-size: 9px; }
.q-stepbar--sm .q-step__k { font-size: 9px; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.q-stepbar--sm .q-step__time { font-size: 9px; }
.q-stepbar--sm .q-stepline { height: 2px; margin: 8px 4px 0; }
.q-stepbar--sm .q-step--current .q-step__circle { box-shadow: 0 0 0 3px var(--qsb-current-glow); }

@keyframes qsb-pulse {
    0% { box-shadow: 0 0 0 0 var(--qsb-current-glow); }
    70% { box-shadow: 0 0 0 10px rgba(0,0,0,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

/* ─── Chevron variant (public apply 같은 wizard 페이지) ─── */
.q-stepbar--chevron {
    --qsb-chevron-bg: #e9eff1;
    --qsb-chevron-bg-current: #1a6172;
    --qsb-chevron-bg-done: #1a6172;
    --qsb-chevron-text: #587078;
    --qsb-chevron-text-current: #ffffff;
    --qsb-chevron-text-done: #ffffff;
    --qsb-chevron-gap: 4px;
    display: flex;
    align-items: stretch;
    gap: var(--qsb-chevron-gap);
    width: 100%;
}
[data-theme="dark"] .q-stepbar--chevron {
    --qsb-chevron-bg: #142531;
    --qsb-chevron-bg-current: #7dd9d9;
    --qsb-chevron-bg-done: #1a5260;
    --qsb-chevron-text: #8aa2ad;
    --qsb-chevron-text-current: #0a1f24;
}
.q-stepbar--chevron .q-step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 24px 18px 36px;
    background: var(--qsb-chevron-bg);
    color: var(--qsb-chevron-text);
    font-weight: 700;
    font-size: 15px;
    position: relative;
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
    transition: background 0.18s ease, color 0.18s ease;
}
.q-stepbar--chevron .q-step:first-child {
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
    padding-left: 24px;
}
.q-stepbar--chevron .q-step:last-child {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 18px 50%);
    padding-right: 24px;
}
.q-stepbar--chevron .q-step:first-child:last-child {
    clip-path: none;
}
.q-stepbar--chevron .q-step--current {
    background: var(--qsb-chevron-bg-current);
    color: var(--qsb-chevron-text-current);
}
.q-stepbar--chevron .q-step--done {
    background: var(--qsb-chevron-bg-done);
    color: var(--qsb-chevron-text-done);
}
.q-stepbar--chevron .q-step__circle {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.7);
    color: var(--qsb-chevron-text);
}
.q-stepbar--chevron .q-step--current .q-step__circle,
.q-stepbar--chevron .q-step--done .q-step__circle {
    background: rgba(255, 255, 255, 0.95);
    color: var(--qsb-chevron-bg-current);
}
.q-stepbar--chevron .q-step__label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

@media (max-width: 720px) {
    .q-stepbar--chevron .q-step {
        padding: 12px 18px 12px 28px;
        font-size: 12px;
        gap: 6px;
    }
    .q-stepbar--chevron .q-step__label { font-size: 12px; }
    .q-stepbar--chevron .q-step__circle { width: 18px; height: 18px; min-width: 18px; font-size: 10px; }
}