.tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    background: rgba(var(--rgb-ink), 0.6);
    padding: 6px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--rgb-overlay), 0.06);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tab {
    flex: 1;
    padding: 12px 18px;
    text-align: center;
    font-size: 13.5px;
    font-weight: var(--w-heavy);
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid transparent;
    background: transparent;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.tab:hover {
    color: var(--text-primary);
    background: rgba(var(--rgb-overlay), 0.04);
    border-color: rgba(var(--rgb-overlay), 0.08);
}

.tab:active {
    transform: scale(0.97);
}

.tab.active {
    background: var(--tab-on-bg);
    color: var(--tab-on-fg);
    box-shadow: inset 0 -2px 0 var(--tab-on-line);   /* [0928 밤] 빛 번짐 대신 아래 가는 선 */
    border-color: transparent;
}

.tabs.grouped { flex-wrap: wrap; position: relative; }
.tab-group-wrap { position: relative; flex: 1 1 auto; min-width: 120px; }
.tab-group { width: 100%; flex: none; gap: 4px; }
.tab-group.has-active { background: var(--tab-on-bg); color: var(--tab-on-fg); box-shadow: inset 0 -2px 0 var(--tab-on-line); border-color: transparent; }   /* [0928 밤] '파란색이 너무 강렬해' */
.tab-group-current { font-weight: var(--w-strong); opacity: 0.95; }
.tab-group-caret { font-size: 11px; opacity: 0.7; margin-left: 2px; }
.tab-group-pop {
    display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 60;
    min-width: 220px; padding: 8px; border-radius: var(--radius-md);
    background: var(--c-ink); border: 1px solid rgba(var(--rgb-overlay),0.10);
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    flex-direction: column; gap: 6px;
}
.tab-group-pop.open { display: flex; }
.tab-group-pop .tab { flex: none; width: 100%; justify-content: flex-start; text-align: left; padding: 10px 14px; }
@media (max-width: 768px), (pointer: coarse) and (max-width: 1100px) {
    :root { --is-phone: 1; }   /* [0928] 폰 표시 - JS 는 window.폰인가()(phone_check.js)로 이것만 읽는다. 잣대는 이 @media 한 줄 */
    .tab-group-wrap { min-width: 45%; }
    .tab-group-pop { position: fixed; left: 12px; right: 12px; top: auto; width: auto; }
}

.tab-premium {
    color: var(--c-sky) !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    background: rgba(56, 189, 248, 0.04) !important;
}
.tab-premium:hover {
    background: rgba(56, 189, 248, 0.1) !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
}
.tab-premium.active {
    background: linear-gradient(135deg, var(--c-blue-24), var(--c-teal-1)) !important;
    color: white !important;
    border-color: rgba(var(--rgb-overlay), 0.15) !important;
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.35) !important;
}

.tab-crm {
    color: var(--c-green) !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
    background: rgba(16, 185, 129, 0.04) !important;
}
.tab-crm:hover {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}
.tab-crm.active {
    background: linear-gradient(135deg, var(--c-teal-6), var(--c-green)) !important;
    color: white !important;
    border-color: rgba(var(--rgb-overlay), 0.1) !important;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3) !important;
}

.tab-saas {
    color: var(--c-blue-7) !important;
    border: 1px solid rgba(186, 230, 253, 0.2) !important;
    background: rgba(186, 230, 253, 0.04) !important;
}
.tab-saas:hover {
    background: rgba(186, 230, 253, 0.1) !important;
    border-color: rgba(186, 230, 253, 0.35) !important;
}
.tab-saas.active {
    background: linear-gradient(135deg, var(--c-blue-24), var(--c-sky)) !important;
    color: white !important;
    border-color: rgba(var(--rgb-overlay), 0.1) !important;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.3) !important;
}

.tab-homepage {
    color: var(--c-red-1) !important;
    border: 1px solid rgba(244, 63, 94, 0.2) !important;
    background: rgba(244, 63, 94, 0.04) !important;
}
.tab-homepage:hover {
    background: rgba(244, 63, 94, 0.1) !important;
    border-color: rgba(244, 63, 94, 0.35) !important;
}
.tab-homepage.active {
    background: linear-gradient(135deg, var(--c-red-7), var(--c-red-1)) !important;
    color: white !important;
    border-color: rgba(var(--rgb-overlay), 0.1) !important;
    box-shadow: 0 0 20px rgba(244, 63, 94, 0.3) !important;
}

.copy-btn {
    padding: 8px 16px;
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: var(--radius-sm);
    color: var(--c-blue-3);
    font-size: 12px;
    font-weight: var(--w-strong);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.copy-btn:hover {
    background: rgba(99, 102, 241, 0.22);
    color: var(--c-white);
    border-color: rgba(37, 99, 235, 0.5);
}

.ws-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: var(--w-medium);
    white-space: nowrap;
}

.ws-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-red);
    transition: background 0.3s;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.ws-dot.connected {
    background: var(--accent-green);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

input[type="text"], input[type="password"], input[type="number"], input[type="date"], select, textarea,
select[style], textarea[style], input[type="tel"], input[type="email"], input[type="search"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="file"], input:not([type]) {
    background: rgba(var(--rgb-ink), 0.45) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: var(--radius-sm) !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 14px;
    padding-right: 14px;
    outline: none !important;
    transition: all 0.25s ease !important;
    font-family: inherit !important;
}
#list-multisort-wrap select { flex: 1 0 auto !important; }


.remote-cmd-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 10px;
    font-size: 13px;
    font-weight: var(--w-normal);
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--c-line-mid);
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    line-height: 1.3;
    width: 100%;
    margin: 0;
}

.remote-cmd-btn:hover:not(:disabled) {
    border-color: var(--c-text-dim);
}

.remote-cmd-btn:disabled {
    cursor: default;
    color: var(--c-text-mute);
}





::-webkit-scrollbar-thumb:active {
    background-color: rgba(var(--rgb-overlay), 0.5);
}

.settle-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.font-white { color: var(--c-gray-2); }
.font-sky { color: var(--c-sky); }
.font-emerald { color: var(--c-green); }
.font-amber { color: var(--c-amber); }
.font-rose { color: var(--c-red-1); }
.font-indigo { color: var(--c-blue-3); }
.font-pink { color: var(--c-pink-2); }
.font-purple-dim { color: var(--c-indigo-1); }

.settle-stage-header-row {
    text-align: left !important;
    font-weight: var(--w-heavy) !important;
    background: rgba(var(--rgb-ink-2), 0.9) !important;
    color: var(--c-sky) !important;
    padding: 10px 15px !important;
    font-size: 12px !important;
    border-bottom: 2px solid var(--border-glass) !important;
}

.settle-table-subtotal-row {
    background: rgba(14, 165, 233, 0.08) !important;
    font-weight: var(--w-heavy) !important;
    border-top: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-bottom: 2px double rgba(56, 189, 248, 0.5) !important;
}

.settle-table-subtotal-row td:first-child {
    color: var(--c-sky) !important;
}

.settle-table-subtotal-row td:last-child {
    color: var(--c-sky) !important;
    font-size: 13px !important;
}

.settle-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: var(--w-medium);
}

.settle-badge-gray {
    background: rgba(100, 116, 139, 0.15);
    color: var(--c-text-dim);
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.settle-badge-purple {
    background: rgba(30, 119, 243, 0.15);
    color: var(--c-purple-1);
    border: 1px solid rgba(40, 124, 245, 0.3);
}

.settle-badge-amber {
    background: rgba(245, 158, 11, 0.15);
    color: var(--c-amber-soft);
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.settle-badge-sky {
    background: rgba(14, 165, 233, 0.2);
    color: var(--c-sky);
    border: 1px solid rgba(56, 189, 248, 0.4);
    font-weight: var(--w-heavy);
}

.settle-badge-emerald {
    background: rgba(16, 185, 129, 0.15);
    color: var(--c-green-2);
    border: 1px solid rgba(52, 211, 153, 0.3);
}

@media (pointer: coarse) and (max-width: 1100px) {
    .header { padding: 10px 14px !important; height: 60px !important; }
    .header-title { font-size: 15px !important; letter-spacing: -0.5px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; min-width: 0 !important; }
    .header > div:first-child { min-width: 0 !important; flex-shrink: 1 !important; overflow: hidden !important; }
    .header-status { gap: 6px !important; flex-shrink: 0 !important; }
    .status-badge { padding: 4px 8px !important; font-size: 11px !important; }
    #tunnel-container, .ws-status, #status-badge { display: none !important; }
    #user-info-badge, #user-info-badge span, #user-info-badge button { white-space: nowrap !important; }
}