/* ============================================================
    Caboojoy — calculator_Business / style.css
    Pastel Sky Blue Theme · 2025
    ============================================================ */

    :root {
        --bg-from:        #c9e8ff;
        --bg-to:          #f0faff;
        --primary:        #1a4a8a;
        --primary-mid:    #2d6bbf;
        --accent:         #5ba3e0;
        --card-bg:        rgba(255, 255, 255, 0.72);
        --card-border:    rgba(255, 255, 255, 0.88);
        --input-bg:       rgba(255, 255, 255, 0.80);
        --input-border:   rgba(91, 163, 224, 0.35);
        --input-focus:    #5ba3e0;
        --text-primary:   #1a3a5c;
        --text-secondary: #4a6a8a;
        --text-muted:     #7a9ab8;
        --res-base:       rgba(240, 250, 255, 0.85);
        --res-accent:     rgba(91, 163, 224, 0.14);
        --res-primary:    rgba(26, 74, 138, 0.11);
        --res-danger:     rgba(200, 50, 50, 0.10);
        --danger:         #b83232;
        --success:        #1a6a4a;
        --r:              12px;
        --r-sm:           8px;
        --shadow:         0 8px 32px rgba(91, 163, 224, 0.18);
        --shadow-sm:      0 2px 10px rgba(91, 163, 224, 0.12);
    }
    
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    
    body {
        font-family: 'Noto Sans KR', sans-serif;
        background: linear-gradient(145deg, var(--bg-from) 0%, var(--bg-to) 100%);
        min-height: 100vh;
        color: var(--text-primary);
        -webkit-font-smoothing: antialiased;
    }
    
    /* ── App Shell ──────────────────────────────── */
    .app-container {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 16px 56px;
    }
    
    .app-header {
        text-align: center;
        padding: 36px 0 22px;
    }
    
    .app-title {
        font-size: clamp(1.4rem, 3vw, 1.9rem);
        font-weight: 700;
        color: var(--primary);
        letter-spacing: -0.02em;
    }
    
    .app-subtitle {
        margin-top: 6px;
        font-size: 0.85rem;
        color: var(--text-muted);
    }
    
    /* ── Tab Nav ────────────────────────────────── */
    .tab-nav {
    position: relative;
        background: var(--card-bg);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid var(--card-border);
        border-radius: var(--r);
        padding: 5px;
        margin-bottom: 20px;
        box-shadow: var(--shadow-sm);
        overflow-x: auto;
        scrollbar-width: none;
    }
    .tab-nav::-webkit-scrollbar { display: none; }

.tab-nav::before,
.tab-nav::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-muted);
    line-height: 1;
}

.tab-nav::before {
    content: "\2039";
    left: 8px;
}

.tab-nav::after {
    content: "\203A";
    right: 8px;
}
    
    .tab-nav-inner {
        display: flex;
        gap: 3px;
        min-width: max-content;
    padding: 0 18px;
    }
    
    .tab-btn {
        padding: 9px 20px;
        border: none;
        border-radius: var(--r-sm);
        background: transparent;
        color: var(--text-secondary);
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.18s, color 0.18s;
        white-space: nowrap;
        font-family: inherit;
    }
    .tab-btn:hover   { background: var(--res-accent); color: var(--primary); }
    .tab-btn.active  { background: var(--primary);    color: #fff; }
    
    /* ── Tab Panels ─────────────────────────────── */
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }
    
    /* ── Card ───────────────────────────────────── */
    .card {
        background: var(--card-bg);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid var(--card-border);
        border-radius: var(--r);
        padding: 26px;
        box-shadow: var(--shadow);
        margin-bottom: 16px;
    }
    
    .card-header { margin-bottom: 20px; }
    .card-header h2 {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--primary);
        margin-bottom: 4px;
    }
    .card-header p { font-size: 0.82rem; color: var(--text-muted); }
    
    /* ── Mode Toggle ─────────────────────────────── */
    .mode-toggle {
        display: flex;
        gap: 6px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: var(--r-sm);
        padding: 4px;
        margin-bottom: 20px;
    }
    .mode-btn {
        flex: 1;
        padding: 8px 10px;
        border: none;
        border-radius: 6px;
        background: transparent;
        color: var(--text-secondary);
        font-size: 0.8rem;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.18s, color 0.18s;
        font-family: inherit;
    }
    .mode-btn.active { background: var(--primary); color: #fff; }
    
    /* ── Form Elements ──────────────────────────── */
    .input-group { margin-bottom: 13px; }
    
    .input-label {
        display: block;
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--text-secondary);
        margin-bottom: 5px;
    }
    
    .input-field {
        width: 100%;
        padding: 10px 12px;
        background: var(--input-bg);
        border: 1.5px solid var(--input-border);
        border-radius: var(--r-sm);
        font-size: 0.93rem;
        color: var(--text-primary);
        font-family: inherit;
        transition: border-color 0.18s, background 0.18s;
        appearance: none;
        -webkit-appearance: none;
    }
    .input-field:focus {
        outline: none;
        border-color: var(--input-focus);
        background: #fff;
    }
    .input-field::placeholder { color: var(--text-muted); }
    
    /* Grid layouts */
    .two-col   { display: grid; grid-template-columns: 1fr 1fr;      gap: 12px; }
    .three-col { display: grid; grid-template-columns: 1fr 1fr 1fr;  gap: 12px; }
    
    @media (max-width: 580px) {
        .two-col, .three-col { grid-template-columns: 1fr; }
    }
    
    /* ── Result Cards ───────────────────────────── */
    .result-grid {
        display: grid;
        gap: 10px;
        margin-top: 20px;
    }
    .result-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .result-grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
    
    .result-card {
        background: var(--res-base);
        border: 1px solid rgba(91, 163, 224, 0.18);
        border-radius: var(--r-sm);
        padding: 12px 14px;
    }
    .result-card.accent  { background: var(--res-accent);  border-color: rgba(91,163,224,0.28); }
    .result-card.primary { background: var(--res-primary); border-color: rgba(26,74,138,0.2); }
    .result-card.danger  { background: var(--res-danger);  border-color: rgba(200,50,50,0.2); }
    
    .result-label { font-size: 0.73rem; color: var(--text-muted); margin-bottom: 4px; }
    .result-value { font-size: 1rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
    .result-card.accent  .result-value { color: var(--primary-mid); }
    .result-card.primary .result-value { color: var(--primary); }
    .result-card.danger  .result-value { color: var(--danger); }
    
    /* ── Info Box ───────────────────────────────── */
    .info-box {
        margin-top: 16px;
        padding: 10px 14px;
        background: rgba(201, 232, 255, 0.38);
        border-left: 3px solid var(--accent);
        border-radius: 0 var(--r-sm) var(--r-sm) 0;
    }
    .info-box p {
        font-size: 0.77rem;
        color: var(--text-secondary);
        line-height: 1.75;
    }
    
    /* ── Data Table ─────────────────────────────── */
    .table-section { margin-top: 24px; }
    .table-title {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-secondary);
        margin-bottom: 10px;
    }
    .table-wrap {
        overflow-x: auto;
        border: 1px solid rgba(91, 163, 224, 0.2);
        border-radius: var(--r-sm);
    }
    .data-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.84rem;
        min-width: 480px;
    }
    .data-table th {
        background: rgba(26, 74, 138, 0.07);
        padding: 10px 14px;
        text-align: right;
        font-weight: 600;
        color: var(--text-secondary);
        white-space: nowrap;
        border-bottom: 1.5px solid rgba(91, 163, 224, 0.2);
    }
    .data-table th.left { text-align: left; }
    .data-table td {
        padding: 8px 14px;
        text-align: right;
        border-bottom: 1px solid rgba(91, 163, 224, 0.1);
        color: var(--text-primary);
        font-variant-numeric: tabular-nums;
    }
    .data-table td:first-child {
        text-align: left;
        color: var(--text-secondary);
        font-weight: 500;
    }
    .data-table tr:last-child td { border-bottom: none; font-weight: 700; }
    .data-table tbody tr:hover td { background: rgba(240, 250, 255, 0.65); }
    .data-table td.empty {
        text-align: center !important;
        color: var(--text-muted) !important;
        font-weight: 400 !important;
        padding: 22px !important;
    }
    
    /* ── Calc Button ────────────────────────────── */
    .calc-btn {
        width: 100%;
        padding: 13px;
        background: var(--primary);
        color: #fff;
        border: none;
        border-radius: var(--r-sm);
        font-size: 0.95rem;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
        margin-top: 10px;
        transition: background 0.2s, transform 0.1s;
        letter-spacing: 0.02em;
    }
    .calc-btn:hover  { background: #153d75; }
    .calc-btn:active { transform: scale(0.99); }
    
    /* ── Ratio Layout ───────────────────────────── */
    .ratio-layout {
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 16px;
        align-items: start;
    }
    @media (max-width: 860px) {
        .ratio-layout { grid-template-columns: 1fr; }
    }
    
    .ratio-input-panel .card {
        position: sticky;
        top: 16px;
        max-height: 90vh;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(91,163,224,0.4) transparent;
    }
    
    /* Input sections inside ratio panel */
    .input-section {
        margin-bottom: 18px;
        padding-bottom: 18px;
        border-bottom: 1px solid rgba(91, 163, 224, 0.15);
    }
    .input-section:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
    
    .section-title {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--primary);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 10px;
        padding: 4px 8px;
        background: var(--res-primary);
        border-radius: 4px;
    }
    
    /* Ratio result cards */
    .ratio-results { display: flex; flex-direction: column; gap: 12px; }
    .ratio-card { margin-bottom: 0 !important; }
    
    .ratio-cat-title {
        font-size: 0.87rem;
        font-weight: 700;
        padding: 6px 10px;
        border-radius: var(--r-sm);
        margin-bottom: 14px;
    }
    .ratio-cat-title.profitability { background: rgba(91,163,224,0.15); color: #1a4a8a; }
    .ratio-cat-title.stability     { background: rgba(26,138,100,0.12); color: #0f5a44; }
    .ratio-cat-title.activity      { background: rgba(180,130,30,0.12); color: #7a5500; }
    .ratio-cat-title.growth        { background: rgba(130,60,180,0.10); color: #5a1f8a; }
    .ratio-cat-title.market        { background: rgba(200,60,60,0.10);  color: #8a1f1f; }
    
    .ratio-grid { display: flex; flex-direction: column; gap: 4px; }
    
    .ratio-row {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        align-items: center;
        gap: 8px;
        padding: 7px 10px;
        border-radius: 6px;
        background: rgba(240, 250, 255, 0.55);
    }
    .ratio-row:hover { background: rgba(240, 250, 255, 0.85); }
    
    .ri-name    { font-size: 0.83rem; font-weight: 500; color: var(--text-primary); }
    .ri-formula { font-size: 0.72rem; color: var(--text-muted); }
    .ri-val     { font-size: 0.88rem; font-weight: 700; color: var(--primary); text-align: right; white-space: nowrap; min-width: 70px; }
    .ri-val.na  { color: var(--text-muted); font-weight: 400; }
    
    @media (max-width: 500px) {
        .ratio-row { grid-template-columns: 1fr auto; }
        .ri-formula { display: none; }
    }