/**
 * Caffeine Half-Life Calculator Styles
 * 카페인 반감기 계산기 전용 스타일
 *
 * @package Zipper
 */

#chlcTool {
    color: #2d2a26;
}

#chlcTool .chlc-intro {
    display: grid;
    gap: 8px;
}

#chlcTool .chlc-lead {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #5f5a56;
}

#chlcTool .tool-layout-split {
    grid-template-columns: minmax(0, 350px) minmax(0, 1fr);
    gap: 18px;
}

#chlcTool .tool-layout-input {
    max-width: 350px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#chlcTool .tool-layout-result {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

#chlcTool .chlc-section,
#chlcTool .chlc-result-hero,
#chlcTool .chlc-kpi-card,
#chlcTool .chlc-cutoff-card,
#chlcTool .chlc-timeline-card,
#chlcTool .chlc-disclaimer {
    border: 1px solid #e8e4dc;
    border-radius: 16px;
    background: #fffdf8;
    box-shadow: 0 10px 24px rgba(45, 42, 38, 0.06);
}

#chlcTool .chlc-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

#chlcTool .chlc-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

#chlcTool .chlc-section-title,
#chlcTool .chlc-subtitle {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #1a1816;
}

#chlcTool .chlc-section-title i,
#chlcTool .chlc-subtitle i,
#chlcTool .chlc-live-pill i,
#chlcTool .chlc-section-pill i {
    color: #d4af37;
}

#chlcTool .chlc-live-pill,
#chlcTool .chlc-section-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.12);
    color: #8a6500;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#chlcTool .chlc-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

#chlcTool .chlc-number-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#chlcTool .chlc-input-group-span {
    grid-column: 1 / -1;
}

#chlcTool .chlc-label,
#chlcTool .chlc-help,
#chlcTool .chlc-validation-message,
#chlcTool .chlc-note-list,
#chlcTool .chlc-hero-summary,
#chlcTool .chlc-formula-box,
#chlcTool .chlc-cutoff-note,
#chlcTool .chlc-timeline-note,
#chlcTool .chlc-insight-list,
#chlcTool .chlc-disclaimer,
#chlcTool .chlc-kpi-label,
#chlcTool .chlc-cutoff-label,
#chlcTool .chlc-timeline-label,
#chlcTool .chlc-hero-unit {
    font-size: 13px;
}

#chlcTool .chlc-label {
    color: #2d2a26;
    font-weight: 600;
}

#chlcTool .chlc-help,
#chlcTool .chlc-note-list,
#chlcTool .chlc-hero-summary,
#chlcTool .chlc-formula-box,
#chlcTool .chlc-cutoff-note,
#chlcTool .chlc-timeline-note,
#chlcTool .chlc-insight-list,
#chlcTool .chlc-disclaimer,
#chlcTool .chlc-kpi-label,
#chlcTool .chlc-cutoff-label,
#chlcTool .chlc-timeline-label,
#chlcTool .chlc-hero-unit {
    color: #5f5a56;
    line-height: 1.6;
}

#chlcTool .chlc-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

#chlcTool .chlc-time-wrap {
    display: block;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #ddd7cb;
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#chlcTool .chlc-time-wrap:hover {
    border-color: #d4c67a;
}

#chlcTool .chlc-time-wrap:focus-within {
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}

#chlcTool .chlc-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 44px;
    padding: 11px 12px;
    border: 1px solid #ddd7cb;
    border-radius: 10px;
    background: #fff;
    color: #2d2a26;
    font-size: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

#chlcTool .chlc-time-wrap .chlc-input {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

#chlcTool .chlc-input::placeholder {
    color: #ada59a;
}

#chlcTool .chlc-input:hover {
    border-color: #d4c67a;
}

#chlcTool .chlc-input:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
    background: #fffdf8;
}

#chlcTool .chlc-time-wrap .chlc-input:focus {
    box-shadow: none;
    border-color: transparent;
}

#chlcTool .chlc-time-wrap .chlc-time-input[type="time"]::-webkit-datetime-edit,
#chlcTool .chlc-time-wrap .chlc-time-input[type="time"]::-webkit-date-and-time-value,
#chlcTool .chlc-time-wrap .chlc-time-input[type="time"]::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

#chlcTool .chlc-unit-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid #e1d6bf;
    border-radius: 10px;
    background: #f8f1e1;
    color: #6a5c3a;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

#chlcTool .chlc-preset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#chlcTool .chlc-half-life-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

#chlcTool .chlc-preset-btn {
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #e5dcc8;
    border-radius: 10px;
    background: #fff;
    color: #5f5a56;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

#chlcTool .chlc-preset-btn:hover,
#chlcTool .chlc-preset-btn:focus-visible {
    outline: none;
    border-color: #d4af37;
    color: #8a6500;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}

#chlcTool .chlc-preset-btn.is-active {
    border-color: #d4af37;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.16) 0%, rgba(212, 175, 55, 0.08) 100%);
    color: #8a6500;
}

#chlcTool .chlc-action-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

#chlcTool .chlc-action-row .tool-btn {
    width: 100%;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
}

#chlcTool .chlc-validation-message {
    min-height: 20px;
    margin: 0;
    color: #c05621;
    font-weight: 600;
}

#chlcTool .chlc-note-list,
#chlcTool .chlc-insight-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
}

#chlcTool .chlc-result-hero {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
}

#chlcTool .chlc-result-hero.is-pending {
    background: linear-gradient(135deg, #fffdf8 0%, #f6f0e2 100%);
    border-color: #e2dccf;
}

#chlcTool .chlc-result-hero.is-low {
    background: linear-gradient(135deg, #fff8e9 0%, #f4eddb 100%);
    border-color: #e3d39e;
}

#chlcTool .chlc-result-hero.is-mid {
    background: linear-gradient(135deg, #fff6e6 0%, #f7e8cf 100%);
    border-color: #e4c98b;
}

#chlcTool .chlc-result-hero.is-high {
    background: linear-gradient(135deg, #fff3ec 0%, #f9e1d3 100%);
    border-color: #e2b89d;
}

#chlcTool .chlc-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

#chlcTool .chlc-status-badge,
#chlcTool .chlc-risk-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#chlcTool .chlc-status-badge {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(212, 175, 55, 0.28);
    color: #6a5c3a;
}

#chlcTool .chlc-status-badge.pending,
#chlcTool .chlc-risk-badge.pending {
    background: #f5efe3;
    border: 1px solid #e2dccf;
    color: #7a7268;
}

#chlcTool .chlc-risk-badge.is-low {
    background: rgba(212, 175, 55, 0.14);
    border: 1px solid rgba(212, 175, 55, 0.28);
    color: #7b5c05;
}

#chlcTool .chlc-risk-badge.is-mid {
    background: rgba(222, 155, 64, 0.14);
    border: 1px solid rgba(222, 155, 64, 0.28);
    color: #9b5f00;
}

#chlcTool .chlc-risk-badge.is-high {
    background: rgba(192, 86, 33, 0.12);
    border: 1px solid rgba(192, 86, 33, 0.24);
    color: #a04416;
}

#chlcTool .chlc-hero-value-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#chlcTool .chlc-hero-value {
    font-size: 38px;
    line-height: 1;
    font-weight: 800;
    color: #1a1816;
}

#chlcTool .chlc-formula-box {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(212, 175, 55, 0.18);
}

#chlcTool .chlc-kpi-grid,
#chlcTool .chlc-cutoff-grid,
#chlcTool .chlc-timeline-grid {
    display: grid;
    gap: 10px;
}

#chlcTool .chlc-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#chlcTool .chlc-cutoff-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#chlcTool .chlc-timeline-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#chlcTool .chlc-kpi-card,
#chlcTool .chlc-cutoff-card,
#chlcTool .chlc-timeline-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
}

#chlcTool .chlc-cutoff-card-highlight,
#chlcTool .chlc-timeline-card-highlight {
    background: linear-gradient(135deg, #fff8e9 0%, #f7efdc 100%);
    border-color: #e2d2a7;
}

#chlcTool .chlc-cutoff-card-span {
    grid-column: 1 / -1;
}

#chlcTool .chlc-kpi-value,
#chlcTool .chlc-cutoff-value,
#chlcTool .chlc-timeline-time {
    font-size: 21px;
    font-weight: 800;
    color: #1a1816;
}

#chlcTool .chlc-timeline-value {
    font-size: 13px;
    font-weight: 700;
    color: #8a6500;
}

#chlcTool .chlc-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    margin-top: 16px;
}

#chlcTool .chlc-disclaimer i {
    color: #d4af37;
    font-size: 18px;
    line-height: 1;
    margin-top: 2px;
}

@media (max-width: 1100px) {
    #chlcTool .tool-layout-split {
        grid-template-columns: 1fr;
    }

    #chlcTool .tool-layout-input {
        max-width: none;
    }

    #chlcTool .chlc-timeline-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    #chlcTool .chlc-number-grid,
    #chlcTool .chlc-cutoff-grid,
    #chlcTool .chlc-kpi-grid {
        grid-template-columns: 1fr;
    }

    #chlcTool .chlc-preset-grid,
    #chlcTool .chlc-half-life-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #chlcTool .chlc-cutoff-card-span {
        grid-column: auto;
    }

    #chlcTool .chlc-hero-value {
        font-size: 34px;
    }
}

@media (max-width: 560px) {
    #chlcTool .chlc-input-row {
        grid-template-columns: 1fr;
    }

    #chlcTool .chlc-unit-chip {
        width: 100%;
    }

    #chlcTool .chlc-preset-grid,
    #chlcTool .chlc-half-life-grid,
    #chlcTool .chlc-timeline-grid {
        grid-template-columns: 1fr;
    }

    #chlcTool .chlc-hero-top {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    #chlcTool .chlc-section,
    #chlcTool .chlc-result-hero,
    #chlcTool .chlc-kpi-card,
    #chlcTool .chlc-cutoff-card,
    #chlcTool .chlc-timeline-card,
    #chlcTool .chlc-disclaimer {
        border-radius: 14px;
    }

    #chlcTool .chlc-section,
    #chlcTool .chlc-result-hero,
    #chlcTool .chlc-disclaimer {
        padding: 14px;
    }

    #chlcTool .chlc-hero-value {
        font-size: 30px;
    }
}