/* ============================================================
   GLOBAL
============================================================ */

:root {
    --color-yellow: #F5D064;
    --color-teal: #62C4BF;
    --color-navy: #50647F;
    --color-gray: #D9DDE2;

    --color-background: #FFFFFF;
    --color-surface: #FFFFFF;

    --color-text: #263238;
    --color-text-secondary: #6B7280;
    --color-border: #E2E5E9;

    --color-yellow-soft: #FFF8DF;
    --color-teal-soft: #EAF8F7;
    --color-gray-soft: #F5F6F7;
    --color-danger: #C65D52;
    --color-navy-dark: #42536A;
    --color-teal-dark: #397F7B;
    --color-teal-soft-border: #B9E1DE;
    --color-danger-soft: #FCEDEA;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--color-background);
}

body {
    margin: 0;
    padding: 36px 40px;

    font-family: "Segoe UI", Arial, sans-serif;

    background: var(--color-background);
    color: var(--color-text);

    line-height: 1.5;
}


/* ============================================================
   APP CONTAINER
============================================================ */

.app-container {
    width: 100%;
    max-width: 1650px;

    margin: 0 auto;
}


/* ============================================================
   HEADER
============================================================ */

.app-header {
    position: relative;

    margin-bottom: 30px;
    padding: 10px 4px 20px;

    border-bottom: 1px solid var(--color-border);
}

.app-header h1 {
    margin: 0;

    color: var(--color-text);

    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.subtitle {
    margin: 5px 0 0;

    color: var(--color-text-secondary);

    font-size: 15px;
    font-weight: 400;
}


/* ============================================================
   SECTION
============================================================ */

.section {
    width: 100%;

    margin: 0;

    padding: 24px 26px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: 14px;

    box-sizing: border-box;

    box-shadow:
        0 3px 12px rgba(80, 100, 127, 0.08);
}


/* ============================================================
   SECTION TITLE / HEADER
============================================================ */

.section-title {
    display: flex;

    align-items: center;
    gap: 8px;

    background: transparent;

    border-bottom: 1px solid var(--color-border);

    border-radius: 13px 13px 0 0;

    color: var(--color-text);

    font-size: 17px;
    font-weight: 700;

    letter-spacing: -0.01em;
}

.section > .section-title {
    width: calc(100% + 52px);

    margin: -24px -26px 22px;

    padding: 12px 26px;
}


/* ============================================================
   SECTION NUMBER
============================================================ */

.section-number {
    display: inline;

    min-width: auto;
    height: auto;

    padding: 0;

    background: transparent;

    border-radius: 0;

    color: inherit;

    font-size: inherit;
    font-weight: inherit;
}

/* ============================================================
   SUB TITLE
============================================================ */

.sub-title {
    margin-top: 24px;
    margin-bottom: 10px;

    color: var(--color-navy);

    font-size: 15px;
    font-weight: 700;
}


/* ============================================================
   FORM GROUP
============================================================ */

.form-group {
    margin-bottom: 18px;
}


/* ============================================================
   BASIC INPUTS
============================================================ */

select,
input {
    width: 100%;
    max-width: 400px;

    padding: 10px 13px;

    margin-top: 5px;

    border: 1px solid var(--color-border);
    border-radius: 7px;

    background: var(--color-surface);

    color: var(--color-text);

    font-family: inherit;
    font-size: 17px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

select:hover,
input:hover {
    border-color: var(--color-teal);
}

select:focus,
input:focus {
    border-color: var(--color-navy);

    box-shadow:
        0 0 0 2px rgba(80, 100, 127, 0.16);
}

input::placeholder {
    color: var(--color-text-secondary);
}


/* ============================================================
   LABEL
============================================================ */

label {
    display: block;

    margin-top: 15px;
    margin-bottom: 4px;

    color: var(--color-navy);

    font-size: 15px;
    font-weight: 600;
}


/* ============================================================
   INPUT DESCRIPTION
============================================================ */

.input-description {
    margin-top: 7px;

    color: var(--color-text-secondary);

    font-size: 13px;
}


/* ============================================================
   Z SOURCE LABEL
============================================================ */

.z-source-label {
    display: inline-block;

    margin-top: 7px;

    padding: 2px 8px;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 600;

    background: var(--color-surface-alt, #eef1f6);

    color: var(--color-text-secondary);
}

.z-source-label:empty {
    display: none;
}


/* ============================================================
   UNIT
============================================================ */

.unit {
    color: var(--color-text-secondary);
}


/* ============================================================
   BUTTON ROW
============================================================ */

.button-row {
    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;
}


/* ============================================================
   BASIC BUTTON
============================================================ */

button {
    border: none;

    padding: 10px 20px;

    margin-top: 18px;

    border-radius: 7px;

    background: var(--color-navy);
    color: var(--color-surface);

    font-family: inherit;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.1s ease;
}

button:hover {
    background: var(--color-navy-dark);

    box-shadow:
        0 4px 10px rgba(80, 100, 127, 0.18);
}

button:active {
    transform: translateY(1px);
}


/* ============================================================
   SECONDARY BUTTON
============================================================ */

button.secondary {
    background: var(--color-teal-soft);

    color: var(--color-teal);

    border: 1px solid var(--color-teal-soft-border);
}

button.secondary:hover {
    background: var(--color-teal-soft);

    color: var(--color-teal-dark);

    box-shadow: none;
}

#calculatorTab #calculateButton {
    background: var(--color-teal);
}

#calculatorTab #calculateButton:hover {
    background: var(--color-teal-dark);
}

#calculatorTab #savePhaseButton {
    background: var(--color-navy);

    border-color: var(--color-navy);

    color: var(--color-surface);
}

#calculatorTab #savePhaseButton:hover {
    background: var(--color-navy-dark);

    color: var(--color-surface);
}


/* ============================================================
   STATUS MESSAGE
============================================================ */

.status-message {
    margin-top: 12px;

    color: var(--color-danger);

    font-size: 14px;
    font-weight: 500;
}


/* ============================================================
   FOOTER
============================================================ */

.app-footer {
    margin-top: 30px;
    padding: 18px 4px;

    border-top: 1px solid var(--color-border);

    color: var(--color-text-secondary);

    font-size: 13px;

    text-align: center;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 900px) {

    body {
        padding: 24px;
    }

    .app-header h1 {
        font-size: 26px;
    }
}


@media (max-width: 600px) {

    body {
        padding: 16px;
    }

    .section {
        padding: 20px 18px;
    }

    .section > .section-title {
        width: calc(100% + 36px);

        margin: -20px -18px 22px;

        padding: 12px 18px;
    }

    .app-header h1 {
        font-size: 23px;
    }

    .section-title {
        font-size: 19px;
    }

    select,
    input {
        font-size: 16px;
    }
}

/* Mass Fraction 테이블의 Bs 근사치 배지/경고 아이콘/제외 안내
   (matchFactSagePhases의 matchType/isCalculable/warnings 표시용) */

.bs-estimate-badge {

    display: inline-block;

    margin-left: 6px;

    padding: 1px 6px;

    border-radius: 4px;

    font-size: 11px;

    background-color: var(--color-gray-soft);

    color: var(--color-text-secondary);

    border: 1px solid var(--color-border);

    cursor: help;

}

.factsage-density-edit-button,
.factsage-density-apply-button,
.factsage-density-cancel-button,
.factsage-density-reset-button {

    margin-left: 4px;

    padding: 1px 6px;

    border: 1px solid var(--color-gray-soft);

    border-radius: 4px;

    font-size: 11px;

    background-color: transparent;

    cursor: pointer;

}

.factsage-density-input {

    width: 90px;

    padding: 2px 4px;

    font-size: 12px;

}

.bs-warning-icon {

    display: inline-block;

    margin-left: 4px;

    color: var(--color-danger);

    cursor: help;

}

.bs-total-excluded-warning {

    display: block;

    margin-top: 6px;

    font-size: 12px;

    color: var(--color-danger);

}

/* Element/Mole Fraction/Mass Fraction 표의 "Phase DB" 컬럼
   (원소별 phase_database 매칭 있음/없음 배지 + element_phase_db_mapping
   매핑 드롭다운) */

.element-db-status-badge {

    display: inline-block;

    padding: 1px 6px;

    border-radius: 4px;

    font-size: 11px;

    white-space: nowrap;

}

.element-db-status-found {

    background-color: var(--color-teal-soft);

    color: var(--color-teal-dark);

    border: 1px solid var(--color-teal-soft-border);

    cursor: help;

}

.element-db-status-found-global {

    border-style: dashed;

}

.element-db-status-missing {

    background-color: var(--color-danger-soft);

    color: var(--color-danger);

    border: 1px solid var(--color-danger);

}

.element-phase-db-select {

    display: block;

    margin-top: 4px;

    font-size: 11px;

}

.element-mapping-global-note {

    margin-top: 2px;

    font-size: 11px;

    color: var(--color-danger);

}

/* FactSage Result raw 테이블 행 확장(조성 상세) */

.factsage-row-expand-toggle {

    display: inline-block;

    width: 14px;

    margin-right: 4px;

    color: var(--color-text-secondary);

    cursor: pointer;

    user-select: none;

}

.factsage-phase-composition-row td {

    background-color: var(--color-gray-soft);

    padding: 8px 12px;

}

.factsage-composition-table {

    width: 100%;

    table-layout: fixed;

    border-collapse: collapse;

    font-size: 12px;

}

.factsage-composition-table th,
.factsage-composition-table td {

    padding: 3px 10px;

    text-align: center;

    border-bottom: 1px solid var(--color-border);

}

.factsage-composition-table th {

    color: var(--color-text-secondary);

    font-weight: 600;

    text-align: center;

}

.factsage-interstitial-tag {

    color: var(--color-text-secondary);

    font-size: 11px;

}

/* 조건 블록별 "이 결과 저장" 버튼 (더 이상 자동 저장하지 않음) */

.factsage-save-result-container {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 4px 0 14px 0;

}

.factsage-save-result-button {

    padding: 6px 14px;

    border-radius: 6px;

    border: 1px solid var(--color-teal-soft-border);

    background-color: var(--color-teal-soft);

    color: var(--color-teal-dark);

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

}

.factsage-save-result-button:hover {

    background-color: var(--color-teal);

    color: white;

}

.factsage-save-result-button:disabled {

    opacity: 0.6;

    cursor: default;

}

.factsage-save-result-status {

    font-size: 12px;

    color: var(--color-text-secondary);

}

.factsage-save-result-status.success {

    color: var(--color-teal-dark);

}

.factsage-save-result-status.error {

    color: var(--color-danger);

}

/* Mass Fraction 표 행 확장(계산 상세 패널) - Phase Mass Fraction
   테이블의 확장 행도 factsage-phase-composition-row/
   factsage-row-expand-toggle 클래스를 raw 테이블과 공유한다. */

.factsage-phase-detail-panel {

    display: flex;

    flex-direction: column;

    gap: 4px;

}

.factsage-detail-section-title {

    margin-top: 8px;

    font-size: 12px;

    font-weight: 700;

    color: var(--color-navy);

}

.factsage-detail-list {

    margin: 0;

    padding-left: 18px;

    font-size: 12px;

}

.factsage-detail-list li {

    margin: 2px 0;

}

.factsage-detail-warnings li {

    color: var(--color-danger);

}

.factsage-detail-reason {

    margin: 2px 0;

    font-size: 12px;

    color: var(--color-danger);

}

#factsageResultTable,
#factsageMassFractionTable {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
}

#factsageResultTable {
    table-layout: fixed;
}

#factsageResultTable th:nth-child(1),
#factsageResultTable td:nth-child(1) {
    width: 60px;
}

#factsageResultTable th:nth-child(2),
#factsageResultTable td:nth-child(2) {
    width: 150px;
}

#factsageResultTable th:nth-child(3),
#factsageResultTable td:nth-child(3) {
    width: 130px;
}

#factsageResultTable th:nth-child(4),
#factsageResultTable td:nth-child(4),
#factsageResultTable th:nth-child(5),
#factsageResultTable td:nth-child(5) {
    width: 220px;
}

#factsageResultTable th,
#factsageMassFractionTable th {
    padding: 13px 15px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-gray-soft);
    color: var(--color-navy);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

#factsageResultTable td,
#factsageMassFractionTable td {
    padding: 13px 15px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 14px;
    text-align: center;
    vertical-align: middle;
}

#factsageResultTable tbody tr:hover, 
#factsageMassFractionTable tbody tr:hover {
    background: var(--color-teal-soft);
}

/* ============================================================
   FACTSAGE RESULT TABLE LAYOUT
============================================================ */

.factsage-result-table-layout {

    display: block;

    width: 100%;
    min-width: 0;

}

.factsage-result-raw,
.factsage-result-mass-fraction {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
    margin-bottom: 28px;
}


/* ============================================================
   SECTION TITLE
============================================================ */

.factsage-result-raw h4,
.factsage-result-mass-fraction h4 {

    margin: 0 0 12px 0;

    color: var(--color-navy);

    font-size: 15px;

    font-weight: 700;

}