/* ========================================================
   iComing 계산기 & 실생활 도구 공통 표준 스타일시트 (calc.css)
   ======================================================== */

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #eff6ff;
    --secondary: #10b981;
    --danger: #ef4444;
    --danger-light: #fef2f2;
    --warning: #f59e0b;
    --warning-light: #fffbeb;
    --bg-main: #f8fafc;
    --card-bg: #ffffff;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border: #cbd5e1;
    --border-light: #e2e8f0;
    --radius-lg: 12px;
    --radius-md: 8px;
    --radius-sm: 6px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 14px rgba(0,0,0,0.04);
}

/* 1. 계산기 상단 헤더 영역 */
.app-header {
    text-align: center;
    margin-bottom: 24px;
    width: 100%;
}

.app-title, .calc-title, .tool-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 0 8px !important;
    letter-spacing: -0.5px !important;
    text-align: center !important;
}

.app-desc, .calc-desc, .tool-desc {
    font-size: 15px !important;
    color: #64748b !important;
    margin: 0 0 20px !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

/* 2. 계산기 메인 카드 컨테이너 공통 */
.calculator-container, .calc-container, .tool-container {
    background-color: #ffffff !important;
    padding: 30px !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin-bottom: 24px !important;
    box-sizing: border-box !important;
}

/* 3. 폼 그리드 및 그룹 라벨 공통 (20px 수직 리듬 완벽 통일) */
.form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
}

.form-grid .input-box, .form-grid .form-group, .form-grid .input-group {
    margin-bottom: 0 !important;
}

.input-box, .input-group, .form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-bottom: 16px !important;
    box-sizing: border-box !important;
}

.input-label, .form-label {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 28px !important;
    margin-bottom: 2px !important;
}

.input-label small, .form-label small {
    font-size: 12px !important;
    font-weight: normal !important;
    color: #64748b !important;
}

.korean-hint {
    font-size: 12.5px !important;
    color: #2563eb !important;
    font-weight: 600 !important;
}

/* 4. 통일된 48px 인풋 컨트롤 래퍼 (줄바꿈 완벽 방지) */
.input-control-wrapper {
    display: flex !important;
    align-items: center !important;
    height: 48px !important;
    background-color: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 0 14px !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    width: 100% !important;
    position: relative !important;
}

.input-control-wrapper:focus-within {
    border-color: #2563eb !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.form-input, input.form-input, select.form-input,
input[type="text"].form-input, input[type="number"].form-input, input[type="date"].form-input, input[type="url"].form-input, input[type="tel"].form-input, input[type="email"].form-input {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    outline: none !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    line-height: 44px !important;
}

/* 멀티라인 텍스트에어리어 (공통 표준 규격) */
.form-textarea, textarea.form-textarea {
    width: 100% !important;
    min-height: 96px !important;
    padding: 12px 14px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background-color: #f8fafc !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    outline: none !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    resize: vertical !important;
    line-height: 1.6 !important;
}

.form-textarea:focus, textarea.form-textarea:focus {
    border-color: #2563eb !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

::placeholder {
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

select.form-input {
    cursor: pointer !important;
}

.form-input.text-right, .form-input[type="number"], .form-input[inputmode="numeric"] {
    text-align: right !important;
}

.input-unit {
    position: static !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    margin-left: 8px !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

.input-text {
    width: 100% !important;
    height: 48px !important;
    padding: 0 14px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    outline: none !important;
    transition: all 0.2s !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}

.input-text:focus {
    border-color: #2563eb !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

/* 5. 퀵 선택 칩 버튼 & 태그 */
.quick-btn-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 6px !important;
}

.btn-chip, .quick-btn {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    font-family: inherit !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
}

.btn-chip:hover, .quick-btn:hover {
    background: #eff6ff !important;
    border-color: #93c5fd !important;
    color: #2563eb !important;
}

.btn-chip.active, .quick-btn.active {
    background: #eff6ff !important;
    color: #2563eb !important;
    border-color: #2563eb !important;
    font-weight: 800 !important;
}

/* 6. 계산기 모드/상환방식/세그먼트 탭 공통 규격 (48px 완벽 통일) */
.mode-nav, .method-tabs, .segment-group, .unit-cat-tabs, .qr-type-tabs, .calc-mode-tabs, .tab-nav {
    display: flex !important;
    background: #f1f5f9 !important;
    padding: 4px !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    align-items: center !important;
}

.mode-btn, .mode-tab, .method-tab-btn, .segment-btn, .unit-cat-btn, .qr-type-btn, .calc-mode-btn, .tab-btn {
    flex: 1 !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 12px !important;
    border: none !important;
    background: transparent !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

.mode-btn:hover, .mode-tab:hover, .method-tab-btn:hover, .segment-btn:hover, .unit-cat-btn:hover, .qr-type-btn:hover, .calc-mode-btn:hover, .tab-btn:hover {
    color: #0f172a !important;
}

.mode-btn.active, .mode-tab.active, .method-tab-btn.active, .segment-btn.active, .unit-cat-btn.active, .qr-type-btn.active, .calc-mode-btn.active, .tab-btn.active {
    background: #ffffff !important;
    color: #2563eb !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
    font-weight: 800 !important;
}

/* 7. 결과 헤더 배너 & 뱃지 표준 시스템 (밑줄 및 네모칸 높이 100% 일치) */
.result-top-banner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 74px !important;
    padding-bottom: 16px !important;
    margin-bottom: 18px !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    gap: 12px !important;
    box-sizing: border-box !important;
}

.result-header-left {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
}

.result-header-badge {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #2563eb !important;
    background: #eff6ff !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    width: fit-content !important;
    line-height: 18px !important;
    height: 20px !important;
    box-sizing: border-box !important;
}

.result-header-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 24px !important;
}

.result-header-sub {
    font-size: 13px !important;
    color: #64748b !important;
    line-height: 18px !important;
    min-height: 18px !important;
}

.result-header-right {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.badge-dday {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    padding: 0 16px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
    letter-spacing: -0.3px !important;
    white-space: nowrap !important;
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
    border: 1.5px solid #fca5a5 !important;
}

.badge-dday.passed {
    background-color: #eff6ff !important;
    color: #2563eb !important;
    border-color: #bfdbfe !important;
}

.badge-dday.today {
    background-color: #f0fdf4 !important;
    color: #16a34a !important;
    border-color: #bbf7d0 !important;
}

/* 8. 결과 데이터 테이블 및 하단 카드 높이 고정 표준화 */
.result-data-table {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    box-sizing: border-box !important;
    min-height: 132px !important;
    justify-content: center !important;
}

.result-data-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 36px !important;
    padding: 4px 0 !important;
    font-size: 14.5px !important;
    border-bottom: 1px dashed #f1f5f9 !important;
    box-sizing: border-box !important;
}

.result-data-row:last-child {
    border-bottom: none !important;
}

.data-label {
    color: #64748b !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

.data-val {
    font-size: 15.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    font-variant-numeric: tabular-nums !important;
    text-align: right !important;
}

.share-btn-group {
    margin-top: 14px !important;
    display: flex !important;
    justify-content: flex-end !important;
    height: 36px !important;
}

.btn-copy-result {
    height: 36px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #475569 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.15s ease !important;
    font-family: inherit !important;
}

.btn-copy-result:hover {
    background: #eff6ff !important;
    color: #2563eb !important;
    border-color: #93c5fd !important;
}

/* 하단 알림 및 타임라인 카드 높이 및 간격 공통 표준 */
.calc-notice-box, .timeline-card {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px 22px !important;
    margin-top: 24px !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}

/* 9. 서브 카드 & 카드 헤더 시스템 (완벽한 단정함) */
.card {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    border: 1px solid #e2e8f0 !important;
    margin-bottom: 24px !important;
    box-sizing: border-box !important;
}

.card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 28px !important;
    margin-bottom: 16px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-sizing: content-box !important;
}

.card-title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 17.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 28px !important;
    height: 28px !important;
    border: none !important;
}

.card-header .quick-btn, .card-header .btn-chip {
    height: 26px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

/* 8. 차수별 카드 & 서브 카드 스타일 */
.round-card {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px 22px !important;
    margin-bottom: 18px !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02) !important;
}

.round-card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
}

.round-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    gap: 12px !important;
}

.round-title-group {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 1 !important;
}

.round-badge {
    background: #2563eb !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.round-name-input {
    height: 38px !important;
    padding: 0 12px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    outline: none !important;
    transition: all 0.2s !important;
    max-width: 220px !important;
    flex: 1 !important;
    box-sizing: border-box !important;
}

.round-name-input:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.round-delete-btn {
    background: #ffffff !important;
    border: 1px solid #fca5a5 !important;
    color: #dc2626 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    transition: all 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

.round-delete-btn:hover {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #b91c1c !important;
}

/* 8-1. 계산기 메인 실행 & 컴팩트 아이콘 초기화 버튼 그룹 (표준) */
.action-btn-group {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
    align-items: stretch !important;
}

.action-btn-group .btn-primary, .action-btn-group .btn-action.primary {
    flex: 1 !important;
    height: 48px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    background: #2563eb !important;
    color: #ffffff !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2) !important;
    font-family: inherit !important;
}

.action-btn-group .btn-primary:hover {
    background: #1d4ed8 !important;
}

.action-btn-group .btn-reset, .action-btn-group .btn-action.reset {
    width: 54px !important;
    min-width: 54px !important;
    height: 48px !important;
    background: #f1f5f9 !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    color: #475569 !important;
    transition: all 0.15s ease !important;
    font-family: inherit !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.action-btn-group .btn-reset:hover, .action-btn-group .btn-action.reset:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
}

.btn-reset-icon {
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
}

.btn-reset-text {
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
}

/* 9. 슬라이더 / 레인지 컨트롤 시스템 (공통) */
.slider-group, .range-group {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    height: 48px !important;
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.slider-group:focus-within, .range-group:focus-within {
    border-color: #2563eb !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

input[type="range"], .length-slider, .range-slider, .temp-slider {
    flex: 1 !important;
    height: 6px !important;
    accent-color: #2563eb !important;
    cursor: pointer !important;
    border: none !important;
    background: #e2e8f0 !important;
    border-radius: 3px !important;
    outline: none !important;
}

.length-number-input, .range-number-input, .slider-value-badge {
    width: 52px !important;
    height: 32px !important;
    padding: 0 4px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-align: center !important;
    border: 1.5px solid #93c5fd !important;
    background: #eff6ff !important;
    border-radius: 6px !important;
    color: #2563eb !important;
    font-variant-numeric: tabular-nums !important;
    outline: none !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}

/* 10. 체크박스 그리드 & 라벨 칩 시스템 (공통) */
.checkbox-grid, .member-select-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-top: 10px !important;
    width: 100% !important;
}

@media (max-width: 540px) {
    .checkbox-grid, .member-select-grid {
        grid-template-columns: 1fr !important;
    }
}

.checkbox-label, .checkbox-chip, .member-checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    transition: all 0.15s ease !important;
    user-select: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.checkbox-label:hover, .checkbox-chip:hover, .member-checkbox-label:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
}

.checkbox-label:has(input:checked), .checkbox-chip:has(input:checked), .member-checkbox-label:has(input:checked) {
    border-color: #2563eb !important;
    background: #eff6ff !important;
    color: #2563eb !important;
    font-weight: 800 !important;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.12) !important;
}

.checkbox-label input[type="checkbox"], .checkbox-chip input[type="checkbox"], .member-checkbox-label input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    accent-color: #2563eb !important;
    cursor: pointer !important;
    margin: 0 !important;
}

/* 10. 결과 요약 대시보드 (iComing 표준 결과 카드) */
.result-summary-card {
    background-color: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-top: 20px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03) !important;
    box-sizing: border-box !important;
}

.result-top-banner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 18px !important;
    margin-bottom: 18px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.result-header-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.result-header-badge {
    display: inline-block !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #2563eb !important;
    background: #eff6ff !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    width: fit-content !important;
}

.result-header-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
}

.result-header-sub {
    font-size: 13px !important;
    color: #64748b !important;
}

.result-header-right {
    font-size: 28px !important;
    font-weight: 900 !important;
    color: #dc2626 !important;
    letter-spacing: -0.5px !important;
    font-variant-numeric: tabular-nums !important;
    display: flex !important;
    align-items: center !important;
}

.result-data-table {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 16px 18px !important;
}

.result-data-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 0 !important;
    font-size: 14.5px !important;
    border-bottom: 1px dashed #f1f5f9 !important;
}

.result-data-row:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.result-data-row:first-child {
    padding-top: 0 !important;
}

.data-label {
    color: #64748b !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

.data-val {
    font-size: 15.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    font-variant-numeric: tabular-nums !important;
    text-align: right !important;
}

.data-val.highlight-blue {
    color: #2563eb !important;
}

.data-val.highlight-main {
    font-size: 17px !important;
    color: #0f172a !important;
}

.badge-dday {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    border: 1px solid #fca5a5 !important;
}

.badge-dday.passed {
    background-color: #eff6ff !important;
    color: #2563eb !important;
    border-color: #bfdbfe !important;
}

.badge-dday.today {
    background-color: #f0fdf4 !important;
    color: #16a34a !important;
    border-color: #bbf7d0 !important;
}

/* 11. 보안 & 안내 박스 */
.intro-box, .notice-badge {
    background-color: #eff6ff !important;
    border-left: 4px solid #3b82f6 !important;
    padding: 14px 18px !important;
    border-radius: 0 8px 8px 0 !important;
    font-size: 14px !important;
    color: #1e40af !important;
    line-height: 1.6 !important;
    box-sizing: border-box !important;
    margin-bottom: 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.calc-notice-box {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px 22px !important;
    margin-top: 24px !important;
    margin-bottom: 0 !important;
    color: #475569 !important;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    box-sizing: border-box !important;
}

.calc-notice-box p {
    margin: 0 !important;
    line-height: 1.65 !important;
}

.notice-title {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 8px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* 12. 인원수 / 수량 카운터 */
.counter-box {
    display: flex !important;
    align-items: center !important;
    background-color: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    height: 48px !important;
    transition: all 0.2s ease !important;
}

.counter-box:focus-within {
    border-color: #2563eb !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.counter-btn {
    width: 48px !important;
    height: 100% !important;
    border: none !important;
    background: #f1f5f9 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #334155 !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.counter-btn:hover {
    background: #e2e8f0 !important;
    color: #1e293b !important;
}

.counter-input {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    text-align: center !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    outline: none !important;
    padding: 8px !important;
}

/* 13. 공유 & 복사 버튼 */
.share-btn-group {
    margin-top: 16px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.btn-copy-result, .btn-sm-tool {
    padding: 9px 18px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #334155 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.btn-copy-result:hover, .btn-sm-tool:hover {
    background: #eff6ff !important;
    color: #2563eb !important;
    border-color: #93c5fd !important;
}

/* 14. 액션 실행 버튼 그룹 */
.action-btn-group {
    display: flex !important;
    gap: 10px !important;
    margin: 20px 0 24px !important;
    width: 100% !important;
}

.btn-action, .btn-calc, .btn-primary, .btn-add {
    height: 48px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-family: inherit !important;
    width: 100% !important;
}

.btn-action.primary, .btn-calc, .btn-primary {
    background: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}

.btn-action.primary:hover, .btn-calc:hover, .btn-primary:hover {
    background: #1d4ed8 !important;
    transform: translateY(-1px) !important;
}

.btn-add {
    background: #ffffff !important;
    color: #2563eb !important;
    border: 1.5px dashed #93c5fd !important;
}

.btn-add:hover {
    background: #eff6ff !important;
    border-color: #2563eb !important;
}

/* 15. 계산기 하단 SEO 콘텐츠 박스 공통 서식 */
.seo-content, .seo-content-section {
    background-color: #ffffff !important;
    padding: 35px 32px !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
    line-height: 1.8 !important;
    color: #334155 !important;
    margin-bottom: 24px !important;
    width: 100% !important;
    max-width: 1200px !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

.seo-content h1, .seo-content-section h1 { font-size: 22px !important; color: #0f172a !important; margin: 0 0 15px !important; font-weight: 800 !important; }
.seo-content h2, .seo-content-section h2 { font-size: 18px !important; color: #0f172a !important; margin: 28px 0 12px !important; font-weight: 700 !important; border-left: 4px solid #2563eb !important; padding-left: 10px !important; }
.seo-content h3, .seo-content-section h3 { font-size: 16px !important; color: #1e293b !important; margin: 20px 0 8px !important; font-weight: 700 !important; }
.seo-content p, .seo-content-section p { font-size: 15px !important; color: #334155 !important; margin: 0 0 14px !important; line-height: 1.75 !important; }
.seo-content ul, .seo-content ol, .seo-content-section ul, .seo-content-section ol { margin: 0 0 18px !important; padding-left: 22px !important; font-size: 14.5px !important; color: #334155 !important; }
.seo-content li, .seo-content-section li { margin-bottom: 6px !important; }

/* 16. 모바일 반응형 2열 ➔ 1열 변환 */
@media (max-width: 640px) {
    .form-grid {
        grid-template-columns: 1fr !important;
    }
    .calculator-container, .calc-container, .tool-container {
        padding: 20px 16px !important;
    }
    .seo-content, .seo-content-section {
        padding: 22px 16px !important;
    }
}

/* 17. 전역 공통 테이블 스타일 */
table, .info-table, .schedule-table, .result-table, .timeline-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 20px 0 !important;
    font-size: 14.5px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
}

table th, .info-table th, .schedule-table th, .result-table th, .timeline-table th {
    background-color: #f8fafc !important;
    color: #1e293b !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 13px 14px !important;
    border: 1px solid #e2e8f0 !important;
    white-space: nowrap !important;
}

table td, .info-table td, .schedule-table td, .result-table td, .timeline-table td {
    padding: 12px 14px !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    line-height: 1.6 !important;
}

table th:first-child, table td:first-child,
.info-table th:first-child, .info-table td:first-child,
.schedule-table th:first-child, .schedule-table td:first-child {
    white-space: nowrap !important;
    min-width: 75px !important;
    text-align: center !important;
    font-weight: 700 !important;
}

table tr:nth-child(even), .info-table tr:nth-child(even), .schedule-table tr:nth-child(even) {
    background-color: #fbfcfe !important;
}

.table-wrapper, .schedule-table-wrapper {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: auto !important;
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 16px !important;
}

/* ========================================================
   iComing 메인 포털 섹션 & 헤더 카드 공통 표준 (24px 완전 일치)
   ======================================================== */
.portal-section, section.portal-section {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: block !important;
    width: 100% !important;
}

.portal-section .tool-grid, .portal-section .guide-grid {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.section-header, div.section-header {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 5px solid #2563eb !important;
    border-radius: 12px !important;
    padding: 16px 22px !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.section-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

.section-title, h2.section-title {
    font-size: 19px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.3px !important;
    border-left: none !important;
    padding-left: 0 !important;
}

.section-desc, span.section-desc, p.section-desc {
    font-size: 13.5px !important;
    color: #64748b !important;
    margin: 0 !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

@media (max-width: 768px) {
    .section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 14px 16px !important;
        gap: 6px !important;
    }
    .section-header-left {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }
}


/* 13. 연관 도구 & 가이드 추천 컨텍스추얼 링크 박스 (구글 SEO 토픽 클러스터) */
.related-tools-box {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #2563eb !important;
    border-radius: 10px !important;
    padding: 18px 20px !important;
    margin: 28px 0 24px !important;
    box-sizing: border-box !important;
}

.related-tools-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.related-tools-desc {
    font-size: 13.5px !important;
    color: #475569 !important;
    line-height: 1.6 !important;
    margin: 0 0 12px 0 !important;
}

.related-tools-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.related-tool-link {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    padding: 7px 14px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #2563eb !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.15s ease !important;
}

.related-tool-link:hover {
    background: #eff6ff !important;
    border-color: #2563eb !important;
    color: #1d4ed8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12) !important;
}