/**
 * style.css
 * Coil Spring Designer Professional 스타일시트
 * 
 * 최적화: 1920x1080 해상도
 * 
 * 주요 섹션:
 * 1. 기본 스타일 및 리셋
 * 2. 헤더
 * 3. 컨테이너 및 레이아웃
 * 4. 입력 패널
 * 5. 버튼
 * 6. 뷰포트 및 캔버스
 * 7. Excel 테이블
 * 8. 모달 (초기 설정 팝업)
 * 9. 반응형 디자인
 * 
 * 수정 가능한 주요 값:
 * - 색상 팔레트
 * - 폰트 크기
 * - 여백 및 패딩
 * - 레이아웃 비율
 */

/* ========================================
   NEW LAYOUT v3.0 — 1행3열 뷰 + 2행 구조
   ======================================== */

/* 전체 레이아웃 컨테이너 */
.main-layout {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 70px);   /* 헤더 실측 89px에 맞춤 (구 85px → 수정) */
    overflow: hidden;
    background: #e0e0e0;
}

/* ─ 상단 컨트롤 바 ─ */
.top-bar {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background: white;
    border-bottom: 2px solid #dde3ea;
    box-shadow: 0 2px 5px rgba(0,0,0,0.07);
    flex-shrink: 0;
    overflow-x: auto;
    min-height: 54px;
    gap: 0;
}

.top-bar-divider {
    width: 1px;
    height: 30px;
    background: #ddd;
    margin: 0 8px;
    flex-shrink: 0;
}

.top-bar-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.top-bar-label {
    font-size: 11px;
    font-weight: 700;
    color: #1a73e8;
    white-space: nowrap;
    margin-right: 3px;
}

.top-bar-axis {
    font-size: 11px;
    font-weight: 600;
    color: #666;
}

.top-input-text {
    width: 100px;
    padding: 4px 7px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
}

.top-input-num {
    width: 62px;
    padding: 4px 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    text-align: center;
}

.top-bar-actions {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.top-bar-actions button {
    padding: 5px 8px;
    font-size: 11px;
    white-space: nowrap;
}

/* 압축 컨트롤 영역 */
.top-bar-compression {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
}

.top-compression-slider {
    width: 110px;
    accent-color: #e53935;
    cursor: pointer;
    flex-shrink: 0;
}

.top-compression-pct {
    font-size: 13px;
    font-weight: bold;
    color: #e53935;
    min-width: 32px;
    text-align: right;
    flex-shrink: 0;
}

.top-compression-info {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #555;
    background: #f8f9fa;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    white-space: nowrap;
    flex-shrink: 0;
}

.top-compression-info b { color: #1a73e8; }

.top-stress-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    flex-shrink: 0;
}

.top-stress-modulus {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.top-stress-modulus input[type="number"] {
    width: 68px;
    padding: 3px 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 11px;
    text-align: center;
}

/* ─ 1행: 3D 뷰 3개 + 리사이저 (VP1|RS|VP2|RS|VP3) ─ */
.views-row {
    display: grid;
    grid-template-columns: 1fr 5px 1fr 5px 1fr;
    flex: 1;           /* 1920×1080 최적: 하단행과 1:1 균등 분할 → VP 정방형화 */
    min-height: 0;
    gap: 0;
    padding: 2px;
    background: #e0e0e0;
}

/* ─ 2행: 테이블+그래프 + 리사이저 (VP4|RS|VP5) ─ */
.bottom-row {
    display: grid;
    grid-template-columns: 1fr 5px 1fr;
    flex: 1;           /* 1920×1080 최적: 상단행과 1:1 균등 분할 */
    min-height: 0;
    gap: 0;
    padding: 2px;
    background: #e0e0e0;
}

/* ── 드래그 리사이저 ───────────────────────────────────────────── */
.resizer-col {
    flex-shrink: 0;
    width: 5px;
    cursor: col-resize;
    background: #c8c8c8;
    transition: background 0.15s;
    z-index: 50;
    position: relative;
}
.resizer-row {
    flex-shrink: 0;
    height: 5px;
    width: 100%;
    cursor: row-resize;
    background: #c8c8c8;
    transition: background 0.15s;
    z-index: 50;
    position: relative;
}
.resizer-col::after {
    content: '';
    position: absolute;
    width: 1px; height: 40%; top: 30%; left: 2px;
    background: rgba(0,0,0,0.20);
    border-radius: 2px;
}
.resizer-row::after {
    content: '';
    position: absolute;
    height: 1px; width: 40%; left: 30%; top: 2px;
    background: rgba(0,0,0,0.20);
    border-radius: 2px;
}
.resizer-col:hover, .resizer-col.active {
    background: #3498db;
}
.resizer-row:hover, .resizer-row.active {
    background: #3498db;
}

/* ─ 2행 1열: 테이블 섹션 ─ */
.table-section {
    background: white;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 8px;
    gap: 5px;
    min-height: 0;
}

/* 형상 데이터 타이틀 */
.table-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a73e8;
    border-bottom: 2px solid #e8f0fe;
    padding-bottom: 4px;
    flex-shrink: 0;
}

/* 테이블 컨테이너: flex로 남은 공간 채우기 */
.table-section #tableContainer {
    flex: 1;
    min-height: 0;
    max-height: none;   /* 기존 350px 고정값 해제 */
    overflow: auto;
    border: 2px solid #c0c0c0;
    background: white;
}

/* 4개 테이블 버튼 — 1행 4열로 배치 */
.table-section .table-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-top: 0;
    flex-shrink: 0;
}

/* 메인 액션 행 (계산 + undo/redo) — 3버튼 동일 크기 */
.table-main-actions {
    display: flex;
    gap: 5px;
    align-items: stretch;
    flex-shrink: 0;
}

.table-main-actions button {
    flex: 1;               /* 3버튼 균등 너비 */
    font-size: 12px;
    padding: 7px 6px;
    justify-content: center;
}

/* statistics 박스 */
.table-section .statistics {
    font-size: 11px;
    line-height: 1.4;
    color: #666;
    flex-shrink: 0;
}

/* ========================================
   1. 기본 스타일 및 리셋
   ======================================== */

/* ── CSS 변수 (Light / Dark 공통 토큰) ── */
:root {
    --bg-body:        #f5f5f5;
    --bg-panel:       #ffffff;
    --bg-panel2:      #f8f9fa;
    --bg-input:       #ffffff;
    --bg-button:      #f0f0f0;
    --bg-button-hov:  #e0e0e0;
    --bg-viewport:    #fafafa;
    --bg-table-head:  linear-gradient(to bottom, #f9f9f9, #e8e8e8);
    --bg-table-cell:  #ffffff;
    --bg-section-a:   #e8f5e9;
    --bg-section-b:   #fce4ec;
    --bg-selected:    #e8f0fe;
    --bg-modal:       #ffffff;
    --bg-modal-col:   #f8f9fa;
    --bg-topbar:      #ffffff;
    --bg-gap:         #e0e0e0;

    --text-primary:   #333333;
    --text-secondary: #666666;
    --text-label:     #555555;
    --text-accent:    #1a73e8;
    --text-input:     #333333;

    --border-main:    #dddddd;
    --border-table:   #d0d0d0;
    --border-section: #cccccc;
    --border-topbar:  #dde3ea;

    --shadow-panel:   rgba(0,0,0,0.10);
    --shadow-modal:   rgba(0,0,0,0.30);

    --vplabel-bg:     rgba(255,255,255,0.95);
    --vplabel-text:   #1a73e8;
    --centerline-bg:  rgba(255,255,255,0.95);
    --centerline-txt: #333333;
    --navbtn-bg:      rgba(255,255,255,0.88);
    --navbtn-border:  #bbbbbb;

    --compress-info-bg: #f8f9fa;
    --compress-border:  #e0e0e0;
    --compress-text:    #555555;

    --scrollbar-track: #f1f1f1;
    --scrollbar-thumb: #bbb;
    --scrollbar-hov:   #999;

    transition: background 0.25s, color 0.25s;
}

/* ── Dark Theme 변수 오버라이드 ── */
body.dark-theme {
    --bg-body:        #12121e;
    --bg-panel:       #1e1e2e;
    --bg-panel2:      #252540;
    --bg-input:       #2a2a40;
    --bg-button:      #2d2d45;
    --bg-button-hov:  #3a3a55;
    --bg-viewport:    #1a1a2c;
    --bg-table-head:  linear-gradient(to bottom, #2d2d45, #252540);
    --bg-table-cell:  #1e1e2e;
    --bg-section-a:   #162a1e;
    --bg-section-b:   #2a1520;
    --bg-selected:    #1a2a45;
    --bg-modal:       #1e1e2e;
    --bg-modal-col:   #252540;
    --bg-topbar:      #1e1e2e;
    --bg-gap:         #12121e;

    --text-primary:   #e2e8f0;
    --text-secondary: #94a3b8;
    --text-label:     #94a3b8;
    --text-accent:    #60a5fa;
    --text-input:     #e2e8f0;

    --border-main:    #3d3d5c;
    --border-table:   #3d3d5c;
    --border-section: #3d3d5c;
    --border-topbar:  #3d3d5c;

    --shadow-panel:   rgba(0,0,0,0.40);
    --shadow-modal:   rgba(0,0,0,0.60);

    --vplabel-bg:     rgba(30,30,50,0.92);
    --vplabel-text:   #60a5fa;
    --centerline-bg:  rgba(30,30,50,0.92);
    --centerline-txt: #e2e8f0;
    --navbtn-bg:      rgba(45,45,70,0.90);
    --navbtn-border:  #4d4d70;

    --compress-info-bg: #252540;
    --compress-border:  #3d3d5c;
    --compress-text:    #94a3b8;

    --scrollbar-track: #1e1e2e;
    --scrollbar-thumb: #4d4d70;
    --scrollbar-hov:   #6060a0;
}

/* ── 모든 요소 기본 여백/패딩 제거 ── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* html / body: 1920×1080 풀스크린 앱 — 페이지 스크롤 차단 */
html {
    height: 100%;
    overflow: hidden;   /* 수직 스크롤바 제거 → 전체 1920px 너비 활용 */
}

/* body 기본 스타일 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg-body);
    color: var(--text-primary);
    transition: background 0.25s, color 0.25s;
    height: 100%;
    overflow: hidden;   /* 4px 오버플로 안전망 */
}

/* ========================================
   2. 헤더 스타일
   ======================================== */

/* 헤더 컨테이너 - 1920x1080 최적화 */
header {
    background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);  /* 파란색 그라데이션 */
    color: white;
    padding: 10px 20px;  /* 상하 10px (15px→10px: 뷰 공간 확보), 좌우 20px */
    position: relative;  /* 버전 뱃지 절대 위치 기준 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);  /* 그림자 효과 */
}

/* 헤더 내용 정렬 */
.header-content {
    display: flex;
    justify-content: space-between;  /* 양쪽 끝 정렬 */
    align-items: center;             /* 수직 중앙 정렬 */
    width: 100%;                     /* 전체 너비 사용 */
}

/* 앱 버전 뱃지 — 헤더 좌측 상단 */
.app-version {
    position: absolute;
    top: 8px;
    left: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 4px;
    padding: 2px 8px;
    line-height: 1.5;
    user-select: none;
    pointer-events: none;
}

/* 헤더 텍스트 영역 */
.header-text {
    flex: 1;           /* 남은 공간 차지 */
    text-align: center;  /* 텍스트 중앙 정렬 */
}

/* 헤더 제목 */
header h1 {
    font-size: 22px;      /* 1920x1080 최적화: 26px→22px (헤더 슬림화) */
    margin-bottom: 3px;
}

/* 헤더 부제목 */
header p {
    font-size: 12px;
    opacity: 0.9;  /* 약간 투명하게 */
}

/* 회사 로고 */
.company-logo {
    height: 44px;           /* 로고 높이: 50px→44px (헤더 슬림화에 맞춤) */
    width: auto;            /* 비율 유지 */
    background: white;
    padding: 5px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* ========================================
   3. 컨테이너 및 레이아웃 - 1920x1080 최적화
   ======================================== */

/* 메인 컨테이너 */
.container {
    display: flex;                      /* Flexbox 레이아웃 */
    height: calc(100vh - 70px);         /* 헤더 실측 89px 에 맞춤 (구 85px → 수정) */
    gap: 0;                             /* 요소 간 간격 없음 */
    padding: 0;
    position: relative;
    width: 100%;                        /* 화면 전체 너비 사용 */
}

/* ========================================
   4. 입력 패널 (좌측)
   ======================================== */

/* 입력 패널 컨테이너 */
.input-panel {
    width: 460px;           /* 1920×1080 최적: 525px → 460px (뷰포트 공간 확보) */
    min-width: 400px;       /* 최소 너비 (480px → 400px) */
    max-width: 700px;       /* 최대 너비 (750px → 700px) */
    background: white;
    box-shadow: 2px 0 8px rgba(0,0,0,0.1);  /* 우측 그림자 */
    overflow-y: auto;       /* 세로 스크롤 */
    padding: 15px;
    position: relative;
}

/* 입력 섹션 */
.input-section {
    margin-bottom: 15px;    /* 섹션 간 간격 */
}

/* 섹션 제목 */
.input-section h3 {
    font-size: 15px;        /* 1920x1080 최적화 */
    margin-bottom: 8px;
    color: #1a73e8;         /* 파란색 */
    border-bottom: 2px solid #e8f0fe;  /* 하단 테두리 */
    padding-bottom: 4px;
}

/* 라벨 */
.input-section label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;        /* 1920x1080 최적화 */
}

/* 입력 필드 (텍스트, 숫자) */
.input-section input[type="text"],
.input-section input[type="number"] {
    width: 100%;
    padding: 5px 8px;       /* 1920x1080 최적화 */
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
}

/* 좌표 입력 그리드 (X, Y, Z) */
.coord-inputs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3열 균등 분할 */
    gap: 8px;
}

/* 좌표 입력 라벨 */
.coord-inputs label {
    display: flex;
    flex-direction: column;  /* 세로 배치 */
    gap: 4px;
}

/* 좌표 입력 필드 */
.coord-inputs input {
    width: 100%;
}

/* 버튼 - 1920x1080 최적화 */
button {
    padding: 7px 10px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    background: #f0f0f0;
    color: #333;
    transition: all 0.2s;
}

button:hover {
    background: #e0e0e0;
}

.btn-primary {
    background: #1a73e8;
    color: white;
    font-weight: bold;
}

.btn-primary:hover {
    background: #1557b0;
}

.action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* 초기 설정 버튼만 전체 너비 (계산 버튼은 하단 테이블 영역으로 이동) */
.action-buttons button:first-child {
    grid-column: 1 / -1;
}

/* 내보내기 버튼들은 약간 작게 */
.action-buttons button:nth-child(n+4) {
    font-size: 11px;
}

.table-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-top: 10px;
}

/* 상태 메시지 - 1920x1080 최적화 */
.status-message {
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    display: none;
}

.status-message.success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.status-message.error {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

.status-message.info {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
}

.statistics {
    font-size: 11px;
    line-height: 1.5;
    color: #666;
}

/* 뷰 패널 — flex column으로 views-row / bottom-row 수직 배치 */
.view-panel {
    flex: 1;
    background: #e0e0e0;
    display: flex;
    flex-direction: column;
    min-width: 900px;
    position: relative;
    overflow: hidden;
}

.viewport {
    position: relative;
    background: #fafafa;
    border: 1px solid #ccc;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
}

/* ── VP2/VP3 End-Profile 전용 뷰포트 ─────────────────────────────── */
/* 캔버스 영역 + 사이드 테이블을 가로로 나란히 배치                    */
.ep-viewport {
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

/* 캔버스 래퍼: flex:1 로 남은 공간 차지, 컨트롤 기준점(position:relative) */
.canvas-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-width: 0;
    height: 100%;       /* ep-viewport 전체 높이를 명시적으로 채움 */
    min-height: 0;
}

/* ── End-Profile 사이드 테이블 패널 ─────────────────────────────── */
.ep-side {
    width: 215px;   /* Turn(44) + 중심반경(84) + Z높이(84) + 여백 */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-left: 2px solid #b0b0b0;
    background: #f0f2f5;
    overflow: hidden;
    font-size: 11px;
    font-family: 'Calibri', 'Arial', sans-serif;
}

.ep-side-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px;
    background: #3a5a8c;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
}

.ep-reset-btn {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.5);
    color: #fff;
    border-radius: 3px;
    width: 20px;
    height: 20px;
    padding: 0;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ep-reset-btn:hover { background: rgba(255,255,255,0.35); }

.ep-table-wrap {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.ep-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.ep-table thead th {
    position: sticky;
    top: 0;
    background: #dce3ed;
    color: #2a4870;
    font-weight: 700;
    font-size: 10px;
    padding: 3px 2px;
    text-align: center;
    border-bottom: 1px solid #b0b8c8;
    z-index: 1;
}

.ep-table thead th:first-child  { width: 44px; }   /* 권수 */
.ep-table thead th:nth-child(2) { width: 84px; }   /* 중심반경 */
.ep-table thead th:last-child   { width: 84px; }   /* Z높이 */

.ep-table tbody tr {
    cursor: pointer;
    transition: background 0.1s;
}
.ep-table tbody tr:nth-child(even) { background: #e8ecf2; }
.ep-table tbody tr:hover           { background: #d0daf0; }
.ep-table tbody tr.ep-selected     { background: #aec6ef; }

.ep-table td {
    padding: 1px 2px;
    border-bottom: 1px solid #d0d5de;
    text-align: center;
}

.ep-input {
    width: 100%;
    border: none;
    background: transparent;
    text-align: right;
    font-size: 11px;
    font-family: 'Calibri', 'Arial', sans-serif;
    padding: 1px 2px;
    color: #1a2a40;
    outline: none;
    -moz-appearance: textfield;
}
.ep-input::-webkit-outer-spin-button,
.ep-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ep-input:focus {
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 0 1px #3a8abf inset;
}

.ep-btn-bar {
    display: flex;
    gap: 3px;
    padding: 4px 5px;
    flex-shrink: 0;
    background: #e2e6ed;
    border-top: 1px solid #b0b8c8;
}

.ep-btn-bar button {
    flex: 1;
    padding: 3px 0;
    font-size: 11px;
    border: 1px solid #aab;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    color: #2a4870;
    font-weight: 600;
    transition: background 0.15s;
}
.ep-btn-bar button:hover { background: #d0e0f5; }

/* ── Dark Theme 대응 ─────────────────────────────────────────────── */
body.dark-theme .ep-side          { background: #1e2233; border-left-color: #3a3f55; }
body.dark-theme .ep-side-header   { background: #2a3a5c; }
body.dark-theme .ep-table thead th{ background: #25304a; color: #8ab4e8; border-bottom-color: #3a4a6a;}
body.dark-theme .ep-table tbody tr:nth-child(even) { background: #232840; }
body.dark-theme .ep-table tbody tr:hover           { background: #2e3d60; }
body.dark-theme .ep-table tbody tr.ep-selected     { background: #2a4a80; }
body.dark-theme .ep-table td      { border-bottom-color: #2d3448; }
body.dark-theme .ep-input         { color: #c8d8f0; }
body.dark-theme .ep-input:focus   { background: #1a2240; }
body.dark-theme .ep-btn-bar       { background: #1a2030; border-top-color: #3a4055; }
body.dark-theme .ep-btn-bar button{ background: #252a3a; border-color: #4a5070; color: #8ab4e8; }
body.dark-theme .ep-btn-bar button:hover { background: #2e3d60; }

/* ── EP 사이드 테이블: 좌권 정보 헤더 / 점변부 없음 ────────────────── */
.ep-seated-info {
    padding: 4px 8px;
    font-size: 10px;
    color: #7a8aaa;
    background: #e8ecf5;
    border-bottom: 1px solid #ccd4e8;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.dark-theme .ep-seated-info {
    background: #1a2035;
    color: #5a7090;
    border-bottom-color: #2a3048;
}

.ep-no-trans {
    padding: 8px 4px;
    font-size: 10px;
    color: #8a9aaa;
    text-align: center;
    font-style: italic;
}

/* ── 점변부 범위 정보 배너 ────────────────────────────────────────── */
.ep-trans-range-info {
    padding: 3px 8px;
    font-size: 10px;
    color: #3a6ea8;
    background: #e8f0fc;
    border-bottom: 1px solid #c0d4f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── VP4 앵커 행 (읽기전용) ──────────────────────────────────────── */
.ep-anchor-row {
    background: #f0f0f0 !important;
    cursor: default !important;
}
.ep-anchor-row:hover {
    background: #e8e8e8 !important;
}
.ep-anchor-cell {
    padding: 2px 4px;
    font-size: 11px;
    color: #6a7a8a;
    font-style: italic;
    text-align: right;
    border-bottom: 1px dashed #c0c8d0;
    user-select: none;
}

/* ── EP 범위 오류 행 ─────────────────────────────────────────────── */
.ep-error-row { background: #fff0f0 !important; }
.ep-error-row:hover { background: #ffe0e0 !important; }
.ep-input-error {
    border: 1px solid #e05050 !important;
    background: #fff0f0 !important;
    color: #c03030 !important;
}

/* ── 다크 테마 대응 ──────────────────────────────────────────────── */
body.dark-theme .ep-trans-range-info {
    background: #1a2540;
    color: #6090c0;
    border-bottom-color: #2a3a60;
}
body.dark-theme .ep-anchor-row       { background: #252535 !important; }
body.dark-theme .ep-anchor-row:hover { background: #2a2a40 !important; }
body.dark-theme .ep-anchor-cell      { color: #5a6a7a; border-bottom-color: #3a3a50; }
body.dark-theme .ep-error-row        { background: #2a1515 !important; }
body.dark-theme .ep-error-row:hover  { background: #331a1a !important; }
body.dark-theme .ep-input-error {
    border-color: #a03030 !important;
    background: #2a1515 !important;
    color: #e07070 !important;
}

/* ── EP 프로파일 마커 드래그 힌트 배너 ────────────────────────────── */
.ep-drag-hint {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 20;
    background: rgba(0,188,212,0.18);
    color: #00838f;
    border: 1px solid rgba(0,188,212,0.4);
}
body.dark-theme .ep-drag-hint {
    background: rgba(0,188,212,0.22);
    color: #80deea;
    border-color: rgba(0,188,212,0.45);
}

/* Resize handle - 패널 크기 조절만 지원 */
.resize-handle-panel {
    width: 5px;
    height: 100%;
    position: absolute;
    right: -2.5px;
    top: 0;
    cursor: ew-resize;
    background: #bbb;
    z-index: 100;
    transition: background 0.2s;
}

.resize-handle-panel:hover {
    background: #3498db;
}

.resize-handle-panel.active {
    background: #2980b9;
}

.view-reset-btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 28px;
    height: 28px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    z-index: 10;
    transition: all 0.2s;
}

.view-reset-btn:hover {
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transform: scale(1.1);
}

/* 5방향 뷰포인트 버튼 (십자 배열) */
.view-nav-buttons {
    position: absolute;
    bottom: 5px;
    right: 5px;
    display: grid;
    grid-template-columns: repeat(3, 22px);
    grid-template-rows: repeat(3, 22px);
    gap: 2px;
    z-index: 10;
}

.view-nav-btn {
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 12px;
    line-height: 1;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid #bbb;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, box-shadow 0.15s;
}

.view-nav-btn:hover {
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.22);
    border-color: #888;
}

.view-nav-btn:active {
    background: #e8eef8;
}

.view-centerline-check {
    position: absolute;
    bottom: 5px;
    left: 5px;
    background: rgba(255, 255, 255, 0.95);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    user-select: none;
}

.view-centerline-check label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    margin: 0;
}

.view-centerline-check input[type="checkbox"] {
    cursor: pointer;
    margin: 0;
    width: 14px;
    height: 14px;
}

.view-centerline-check span {
    color: #333;
    font-weight: 500;
}

/* Pitch/Height 그래프 드래그 방향 체크박스 */
.pitch-drag-controls {
    position: absolute;
    top: 6px;
    right: 8px;
    display: flex;
    gap: 10px;
    align-items: center;
    background: rgba(30, 30, 30, 0.75);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    color: #ddd;
    z-index: 10;
    user-select: none;
}

.pitch-drag-controls label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.pitch-drag-controls input[type="checkbox"] {
    cursor: pointer;
    accent-color: #FF8C00;
    margin: 0;
}

.view-row-count {
    position: absolute;
    bottom: 30px;
    left: 5px;
    font-size: 11px;
    background: rgba(255,255,255,0.82);
    border-radius: 4px;
    padding: 2px 5px;
    z-index: 10;
}

.view-row-count label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: default;
    color: #333;
    font-weight: 500;
    margin: 0;
    font-size: 11px;
}

.view-row-count input[type="number"] {
    width: 42px;
    font-size: 11px;
    padding: 1px 3px;
    border: 1px solid #aaa;
    border-radius: 3px;
    text-align: center;
}

.viewport-label {
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(255,255,255,0.95);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    color: #1a73e8;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Excel 스타일 테이블 - 1920x1080 최적화 */
#tableContainer {
    overflow: auto;
    max-height: 350px;
    border: 2px solid #c0c0c0;
    background: white;
}

.excel-table {
    border-collapse: collapse;
    font-family: Calibri, Arial, sans-serif;
    font-size: 11px;
    width: 100%;
}

.excel-table th,
.excel-table td {
    border: 1px solid #d0d0d0;
    padding: 3px 6px;
    text-align: center;
    min-width: 55px;
}

.excel-table th {
    background: linear-gradient(to bottom, #f9f9f9, #e8e8e8);
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 2;
}

.excel-table th.row-header {
    background: linear-gradient(to right, #f9f9f9, #e8e8e8);
    width: 36px;
    min-width: 36px;
    position: sticky;
    left: 0;
    z-index: 3;
}

.excel-table th.corner {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 4;
}

.excel-table td.row-header {
    background: linear-gradient(to right, #f9f9f9, #e8e8e8);
    font-weight: bold;
    position: sticky;
    left: 0;
    z-index: 1;
    cursor: pointer;
}

.excel-table td.row-header:hover {
    background: linear-gradient(to right, #e8e8e8, #d8d8d8);
}

/* ── 행 번호 옆 A측/B측 레이블 ────────────────────────────────────── */
.row-side-label {
    display: block;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: -0.3px;
    line-height: 1.1;
    margin-top: 1px;
}
.row-side-a { color: #2a7a3a; }
.row-side-b { color: #a03050; }

.excel-table td.data-cell {
    cursor: cell;
    background: white;
}

.excel-table td.data-cell.selected {
    outline: 2px solid #1a73e8;
    background: #e8f0fe;
}

.excel-table td.data-cell.section-A {
    background: #e8f5e9;
}

.excel-table td.data-cell.section-body {
    background: white;
}

.excel-table td.data-cell.section-B {
    background: #fce4ec;
}

.excel-table td.data-cell.section-A.selected {
    background: #c8e6c9;
}

.excel-table td.data-cell.section-B.selected {
    background: #f8bbd0;
}

.excel-table tr.newly-added td.data-cell {
    background: rgba(255, 255, 0, 0.3) !important;
    animation: highlightFade 0.5s ease-in;
}

.excel-table tr.newly-added td.data-cell.selected {
    background: rgba(255, 255, 0, 0.4) !important;
}

@keyframes highlightFade {
    0% {
        background: rgba(255, 255, 0, 0.6);
    }
    100% {
        background: rgba(255, 255, 0, 0.3);
    }
}

.excel-table input,
.excel-table select {
    width: 100%;
    border: none;
    padding: 2px 4px;
    font-family: Calibri, Arial, sans-serif;
    font-size: 12px;
    background: white;
}

.excel-table .col-header-sub {
    font-size: 10px;
    color: #666;
    font-weight: normal;
}

/* 반응형 — 2560px(QHD) 이하: 입력패널 460px 고정 */
@media (max-width: 2560px) {
    .input-panel {
        width: 460px;
    }
}

/* 좁은 화면(태블릿 이하)에서만 column 레이아웃으로 전환
   1920×1080 기준 데스크톱 앱이므로 breakpoint를 1024px 이하로 제한 */
@media (max-width: 1024px) {
    .container {
        flex-direction: column;
    }

    .input-panel {
        width: 100%;
        max-height: 320px;
        min-width: unset;
        max-width: unset;
        overflow-y: auto;
    }

    .view-panel {
        flex: 1;
        min-height: 0;
        min-width: 100%;
    }
}

@media (min-width: 2880px) {
    .input-panel {
        width: 600px;       /* 400px × 1.5 */
    }
}

/* ========================================
   Undo / Redo 바
   ======================================== */

.undo-redo-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.btn-undo,
.btn-redo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 600;
    border: 1.5px solid #d0d0d0;
    border-radius: 5px;
    background: #f8f9fa;
    color: #444;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.btn-undo:hover:not(:disabled) {
    background: #e8f0fe;
    border-color: #1a73e8;
    color: #1a73e8;
}

.btn-redo:hover:not(:disabled) {
    background: #e8f5e9;
    border-color: #34a853;
    color: #2e7d32;
}

.btn-undo:disabled,
.btn-redo:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

/* 단계 수 뱃지 */
.history-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
    background: #1a73e8;
    color: white;
    line-height: 1;
}

.btn-redo .history-badge {
    background: #34a853;
}

.btn-undo:disabled .history-badge,
.btn-redo:disabled .history-badge {
    display: none;   /* 비활성화 시 뱃지 숨김 */
}

/* 초기 설정 모달 */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s;
}

.modal.show {
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content {
    background-color: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 1160px;
    width: 96%;
    max-height: 92vh;
    overflow-y: auto;
    overflow-x: hidden;
    animation: slideIn 0.3s;
}

/* 3컬럼 모달 레이아웃 */
.modal-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

.modal-col {
    background: #f8f9fa;
    border-radius: 8px;
    border-top: 4px solid #1a73e8;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-col-header {
    font-size: 15px;
    font-weight: 700;
    color: #1a73e8;
    margin-bottom: 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid #dde3ea;
}

.modal-col .modal-input-group {
    gap: 3px;
}

.modal-col .modal-input-group label {
    font-size: 12px;
}

.modal-col .modal-input-group input,
.modal-col .modal-select {
    padding: 6px 10px;
    font-size: 13px;
}

.modal-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.modal-check-row label {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
}

.modal-check-row input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.modal-sub-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-content h2 {
    color: #1a73e8;
    margin-bottom: 10px;
    font-size: 24px;
}

.modal-description {
    color: #666;
    margin-bottom: 25px;
    font-size: 14px;
}

.modal-section {
    margin-bottom: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #1a73e8;
}

.modal-section h3 {
    color: #1a73e8;
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: bold;
}

.modal-input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 10px;
}

.modal-input-row:last-child {
    margin-bottom: 0;
}

.modal-input-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.modal-input-group label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.modal-input-group input {
    padding: 8px 12px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.modal-input-group input:focus {
    outline: none;
    border-color: #1a73e8;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
}

.modal-select {
    padding: 8px 12px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
    width: 100%;
    background: white;
    cursor: pointer;
}

.modal-select:focus {
    outline: none;
    border-color: #1a73e8;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
}

.modal-buttons {
    display: flex;
    gap: 10px;
    margin-top: 25px;
    justify-content: flex-end;
}

.modal-buttons button {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
}

.modal-buttons .btn-primary {
    min-width: 120px;
}

/* ========================================
   10. 압축 시뮬레이션 컨트롤
   ======================================== */

.compression-control {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.compression-slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.compression-label {
    font-size: 11px;
    color: #555;
    white-space: nowrap;
}

.compression-slider-row input[type="range"] {
    flex: 1;
    height: 4px;
    accent-color: #e53935;
    cursor: pointer;
}

#compressionPct {
    font-size: 13px;
    font-weight: bold;
    color: #e53935;
    min-width: 34px;
    text-align: right;
}

.compression-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #555;
    background: #f8f9fa;
    padding: 5px 8px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.compression-info b {
    color: #1a73e8;
}

.compression-arrow {
    color: #e53935;
    font-weight: bold;
}

.compression-margin-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.compression-margin-row input[type="number"] {
    width: 52px;
    padding: 3px 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    text-align: center;
}

.compression-solid-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #555;
    background: #fff3e0;
    padding: 5px 8px;
    border-radius: 4px;
    border: 1px solid #ffcc80;
}

.compression-solid-info b {
    color: #e65100;
}

/* 응력 시뮬레이션 행 */
.stress-mode-row {
    display: flex;
    align-items: center;
    padding-top: 4px;
    border-top: 1px dashed #ddd;
    margin-top: 2px;
}

.stress-check-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    user-select: none;
}

.stress-check-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: #e53935;
}

.stress-modulus-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0 2px 0;
}

.stress-modulus-row input[type="number"] {
    width: 72px;
    padding: 3px 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    text-align: center;
}

/* ========================================
   다크 테마 체크박스
   ======================================== */
.theme-toggle-row {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--border-main);
}

.theme-toggle-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    user-select: none;
    margin-bottom: 0 !important;
}

.theme-toggle-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: #60a5fa;
}

.theme-toggle-icon {
    font-size: 14px;
}

/* ========================================
   다크 테마 전체 오버라이드
   ======================================== */

/* ── 공통 배경/텍스트 ── */
body.dark-theme { background: var(--bg-body); color: var(--text-primary); }

/* ── 헤더 ── */
body.dark-theme header {
    background: linear-gradient(135deg, #1a4080 0%, #0a2560 100%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* ── 레이아웃 배경 ── */
body.dark-theme .container,
body.dark-theme .view-panel,
body.dark-theme .views-row,
body.dark-theme .bottom-row,
body.dark-theme .main-layout { background: var(--bg-gap); }

/* ── 좌측 입력 패널 ── */
body.dark-theme .input-panel {
    background: var(--bg-panel);
    box-shadow: 2px 0 8px var(--shadow-panel);
    color: var(--text-primary);
}

body.dark-theme .input-section h3 {
    color: var(--text-accent);
    border-bottom-color: #2d3a5a;
}

body.dark-theme .input-section label { color: var(--text-secondary); }

body.dark-theme .input-section input[type="text"],
body.dark-theme .input-section input[type="number"] {
    background: var(--bg-input);
    border-color: var(--border-main);
    color: var(--text-input);
}

body.dark-theme .coord-inputs label { color: var(--text-secondary); }

/* ── 버튼 ── */
body.dark-theme button {
    background: var(--bg-button);
    color: var(--text-primary);
    border: 1px solid var(--border-main);
}
body.dark-theme button:hover { background: var(--bg-button-hov); }

body.dark-theme .btn-primary {
    background: #1a5fb4;
    color: #ffffff;
    border-color: #1a5fb4;
}
body.dark-theme .btn-primary:hover { background: #1e6fd0; border-color: #1e6fd0; }

body.dark-theme .btn-undo,
body.dark-theme .btn-redo {
    background: var(--bg-button);
    color: var(--text-secondary);
    border-color: var(--border-main);
}
body.dark-theme .btn-undo:hover:not(:disabled) {
    background: #1a2a45;
    border-color: #60a5fa;
    color: #60a5fa;
}
body.dark-theme .btn-redo:hover:not(:disabled) {
    background: #1a2e20;
    border-color: #4ade80;
    color: #4ade80;
}

/* ── 상태 메시지 ── */
body.dark-theme .status-message.success {
    background: #162a1e; color: #4ade80; border-color: #2d5a3a;
}
body.dark-theme .status-message.error {
    background: #2a1215; color: #f87171; border-color: #5a2d2d;
}
body.dark-theme .status-message.info {
    background: #1a2a45; color: #60a5fa; border-color: #2d4a70;
}

/* ── 통계 ── */
body.dark-theme .statistics { color: var(--text-secondary); }
body.dark-theme .statistics table td { color: var(--text-secondary); }

/* ── 뷰포트 ── */
body.dark-theme .viewport {
    background: var(--bg-viewport);
    border-color: #2d2d45;
}

body.dark-theme .viewport-label {
    background: var(--vplabel-bg);
    color: var(--vplabel-text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ── 뷰 네비게이션 버튼 ── */
body.dark-theme .view-nav-btn {
    background: var(--navbtn-bg);
    border-color: var(--navbtn-border);
    color: var(--text-primary);
}
body.dark-theme .view-nav-btn:hover {
    background: #3a3a60;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    border-color: #6060a0;
}

/* ── 센터라인 체크박스 ── */
body.dark-theme .view-centerline-check {
    background: var(--centerline-bg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
body.dark-theme .view-centerline-check span { color: var(--centerline-txt); }

/* ── 피치 드래그 컨트롤 ── */
body.dark-theme .pitch-drag-controls { background: rgba(10,10,20,0.90); }

/* ── 테이블 섹션 ── */
body.dark-theme .table-section {
    background: var(--bg-panel);
    border-color: var(--border-section);
}
body.dark-theme .table-section-title {
    color: var(--text-accent);
    border-bottom-color: #2d3a5a;
}
body.dark-theme #tableContainer,
body.dark-theme .table-section #tableContainer {
    background: var(--bg-table-cell);
    border-color: var(--border-table);
}

/* ── Excel 테이블 ── */
body.dark-theme .excel-table th,
body.dark-theme .excel-table td {
    border-color: var(--border-table);
    color: var(--text-primary);
}
body.dark-theme .excel-table th {
    background: var(--bg-table-head);
    color: var(--text-primary);
}
body.dark-theme .excel-table th.row-header,
body.dark-theme .excel-table td.row-header {
    background: linear-gradient(to right, #2d2d45, #252540);
    color: var(--text-secondary);
}
body.dark-theme .excel-table td.row-header:hover {
    background: linear-gradient(to right, #353555, #2d2d50);
}
body.dark-theme .row-side-a { color: #5aaa6a; }
body.dark-theme .row-side-b { color: #c06080; }
body.dark-theme .excel-table td.data-cell { background: var(--bg-table-cell); }
body.dark-theme .excel-table td.data-cell.section-A { background: var(--bg-section-a); }
body.dark-theme .excel-table td.data-cell.section-body { background: var(--bg-table-cell); }
body.dark-theme .excel-table td.data-cell.section-B { background: var(--bg-section-b); }
body.dark-theme .excel-table td.data-cell.selected { background: var(--bg-selected); outline-color: #60a5fa; }
body.dark-theme .excel-table td.data-cell.section-A.selected { background: #1e3a28; }
body.dark-theme .excel-table td.data-cell.section-B.selected { background: #3a1e2a; }

body.dark-theme .excel-table input,
body.dark-theme .excel-table select {
    background: transparent;
    color: var(--text-primary);
}
body.dark-theme .excel-table .col-header-sub { color: var(--text-secondary); }

/* ── 모달 ── */
body.dark-theme .modal { background-color: rgba(0,0,0,0.7); }
body.dark-theme .modal-content {
    background: var(--bg-modal);
    color: var(--text-primary);
    box-shadow: 0 4px 20px var(--shadow-modal);
}
body.dark-theme .modal-content h2 { color: var(--text-accent); }
body.dark-theme .modal-description { color: var(--text-secondary); }
body.dark-theme .modal-col {
    background: var(--bg-modal-col);
    border-top-color: #60a5fa;
}
body.dark-theme .modal-col-header { color: var(--text-accent); border-bottom-color: #3d3d5c; }
body.dark-theme .modal-col .modal-input-group label { color: var(--text-secondary); }
body.dark-theme .modal-input-group input,
body.dark-theme .modal-select {
    background: var(--bg-input);
    border-color: var(--border-main);
    color: var(--text-input);
}
body.dark-theme .modal-input-group input:focus,
body.dark-theme .modal-select:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96,165,250,0.15);
}
body.dark-theme .modal-check-row label { color: var(--text-primary); }
body.dark-theme .modal-section {
    background: var(--bg-modal-col);
    border-left-color: #60a5fa;
}

/* ── 압축 시뮬레이션 ── */
body.dark-theme .compression-label { color: var(--text-label); }
body.dark-theme .compression-info {
    background: var(--compress-info-bg);
    border-color: var(--compress-border);
    color: var(--compress-text);
}
body.dark-theme .compression-info b { color: #60a5fa; }
body.dark-theme .compression-solid-info {
    background: #2a1e10;
    border-color: #5a3d10;
    color: #fbbf24;
}
body.dark-theme .compression-solid-info b { color: #fb923c; }
body.dark-theme .stress-mode-row { border-top-color: #3d3d5c; }
body.dark-theme .stress-check-label { color: var(--text-primary); }
body.dark-theme .stress-modulus-row input[type="number"],
body.dark-theme .compression-margin-row input[type="number"] {
    background: var(--bg-input);
    border-color: var(--border-main);
    color: var(--text-input);
}

/* ── 탑바 ── */
body.dark-theme .top-bar {
    background: var(--bg-topbar);
    border-bottom-color: var(--border-topbar);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
body.dark-theme .top-bar-divider { background: var(--border-main); }
body.dark-theme .top-bar-label { color: #60a5fa; }
body.dark-theme .top-bar-axis { color: var(--text-secondary); }
body.dark-theme .top-input-text,
body.dark-theme .top-input-num {
    background: var(--bg-input);
    border-color: var(--border-main);
    color: var(--text-input);
}
body.dark-theme .top-compression-info {
    background: var(--compress-info-bg);
    border-color: var(--compress-border);
    color: var(--compress-text);
}
body.dark-theme .top-compression-info b { color: #60a5fa; }
body.dark-theme .top-stress-label { color: var(--text-secondary) !important; }
body.dark-theme .top-stress-modulus input[type="number"] {
    background: var(--bg-input);
    border-color: var(--border-main);
    color: var(--text-input);
}

/* ── 리사이즈 핸들 ── */
body.dark-theme .resize-handle-panel { background: #3d3d5c; }
body.dark-theme .resize-handle-panel:hover { background: #60a5fa; }

/* ── 버전 뱃지 (다크 테마: 헤더 색이 같으므로 그대로 유지) ── */
body.dark-theme .app-version {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}
body.dark-theme .resizer-col,
body.dark-theme .resizer-row { background: #3d3d5c; }
body.dark-theme .resizer-col:hover, body.dark-theme .resizer-col.active,
body.dark-theme .resizer-row:hover, body.dark-theme .resizer-row.active { background: #60a5fa; }

/* ── 스크롤바 ── */
body.dark-theme ::-webkit-scrollbar { width: 8px; height: 8px; }
body.dark-theme ::-webkit-scrollbar-track { background: var(--scrollbar-track); }
body.dark-theme ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}
body.dark-theme ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hov); }

/* ── 뷰 행 수 입력 ── */
body.dark-theme .view-row-count {
    background: rgba(30,30,50,0.88);
}
body.dark-theme .view-row-count label { color: var(--text-primary); }
body.dark-theme .view-row-count input[type="number"] {
    background: var(--bg-input);
    border-color: var(--border-main);
    color: var(--text-input);
}

/* ── 히스토리 뱃지 ── */
body.dark-theme .history-badge { background: #1a5fb4; }
body.dark-theme .btn-redo .history-badge { background: #16703a; }

/* ========================================
   도움말 모달 (Help Modal)
   ======================================== */

.help-modal-content {
    max-width: 900px;
}

.help-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 16px;
}

.help-col {
    background: #f8f9fa;
    border-radius: 8px;
    border-top: 4px solid #1a73e8;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.help-col-header {
    font-size: 13px;
    font-weight: 700;
    color: #1a73e8;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 6px;
    margin-bottom: 2px;
}

.help-desc {
    font-size: 12px;
    color: #444;
    line-height: 1.6;
    margin: 0;
}

/* σ 입력 박스 */
.help-param-box {
    background: #eaf1fb;
    border: 1px solid #c5d8f5;
    border-radius: 6px;
    padding: 10px 12px;
}

.help-param-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.help-param-name {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    min-width: 80px;
}

.help-sigma-input {
    width: 70px;
    padding: 3px 6px;
    font-size: 13px;
    border: 1px solid #aac4e8;
    border-radius: 4px;
    text-align: center;
}

.help-param-unit {
    font-size: 11px;
    color: #666;
}

.help-param-hint {
    font-size: 11px;
    color: #666;
    margin-top: 6px;
}

/* 파라미터 테이블 */
.help-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}

.help-table thead tr {
    background: #e8f0fe;
}

.help-table th {
    padding: 5px 8px;
    text-align: left;
    font-weight: 600;
    color: #1a73e8;
    border-bottom: 2px solid #c5d8f5;
}

.help-table td {
    padding: 5px 8px;
    border-bottom: 1px solid #e0e0e0;
    color: #333;
    vertical-align: top;
}

.help-table tr:last-child td { border-bottom: none; }
.help-table tr:hover td { background: #f0f4ff; }

.help-table code {
    background: #e8f0fe;
    color: #1a45a0;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 11px;
    font-family: monospace;
}

/* 수식 박스 */
.help-formula-box {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    padding: 10px 12px;
}

.help-formula-title {
    font-size: 11px;
    font-weight: 700;
    color: #7a5c00;
    margin-bottom: 5px;
}

.help-formula {
    font-size: 12px;
    font-family: 'Cambria Math', Georgia, serif;
    color: #333;
    line-height: 1.8;
}

.help-formula sub { font-size: 9px; }

.help-formula-hint {
    font-size: 11px;
    color: #7a5c00;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #ffe082;
}

/* 코드 블록 */
.help-code-block {
    background: #1e1e2e;
    color: #cdd6f4;
    border-radius: 6px;
    padding: 10px 12px;
    font-family: monospace;
    font-size: 11px;
    line-height: 1.7;
    white-space: pre;
}

/* ── 다크 테마 ── */
body.dark-theme .help-col {
    background: #1e2033;
    border-top-color: #60a5fa;
}

body.dark-theme .help-col-header { color: #60a5fa; border-bottom-color: #3d3d5c; }
body.dark-theme .help-desc { color: #94a3b8; }

body.dark-theme .help-param-box {
    background: #252842;
    border-color: #3d4d7a;
}

body.dark-theme .help-param-name { color: #e2e8f0; }
body.dark-theme .help-param-hint { color: #64748b; }

body.dark-theme .help-sigma-input {
    background: #1a1b2e;
    border-color: #3d4d7a;
    color: #e2e8f0;
}

body.dark-theme .help-table thead tr { background: #1e2d4a; }
body.dark-theme .help-table th { color: #60a5fa; border-bottom-color: #3d4d7a; }
body.dark-theme .help-table td { color: #cbd5e1; border-bottom-color: #2d3148; }
body.dark-theme .help-table tr:hover td { background: #252842; }
body.dark-theme .help-table code { background: #1e2d4a; color: #93c5fd; }

body.dark-theme .help-formula-box {
    background: #2a2415;
    border-color: #5c4a00;
}

body.dark-theme .help-formula-title { color: #fbbf24; }
body.dark-theme .help-formula { color: #e2e8f0; }
body.dark-theme .help-formula-hint { color: #d97706; border-top-color: #5c4a00; }

/* ========================================
   메인 화면 폰트 1.3배 확대 (주요 파라미터/도움말 모달 제외)
   ======================================== */

/* ─ 헤더 ─ */
.app-version                       { font-size: 14px; }   /* 11→14 */
header h1                          { font-size: 29px; }   /* 22→29 */
header p                           { font-size: 16px; }   /* 12→16 */

/* ─ 탑바 ─ */
.top-bar-label                     { font-size: 14px; }   /* 11→14 */
.top-bar-axis                      { font-size: 14px; }   /* 11→14 */
.top-input-text                    { font-size: 16px; }   /* 12→16 */
.top-input-num                     { font-size: 16px; }   /* 12→16 */
.top-bar-actions button            { font-size: 14px; }   /* 11→14 */
.top-compression-pct,
#compressionPct                    { font-size: 17px; }   /* 13→17 */
.top-compression-info              { font-size: 14px; }   /* 11→14 */
.top-stress-label                  { font-size: 14px !important; }   /* 11→14 */
.top-stress-modulus input[type="number"] { font-size: 14px; }   /* 11→14 */

/* ─ 버튼 (전역) ─ */
button                             { font-size: 16px; }   /* 12→16 */
.action-buttons button:nth-child(n+4) { font-size: 14px; }   /* 11→14 */
.table-main-actions button         { font-size: 16px; }   /* 12→16 */
.ep-btn-bar button                 { font-size: 14px; }   /* 11→14 */

/* ─ 모달 버튼은 원래 크기 유지 ─ */
.modal button                      { font-size: 14px; }
.modal-buttons button              { font-size: 14px; }

/* ─ 상태 메시지 ─ */
.status-message                    { font-size: 16px; }   /* 12→16 */

/* ─ 통계 ─ */
.statistics,
.table-section .statistics         { font-size: 14px; }   /* 11→14 */

/* ─ 입력 패널 ─ */
.input-section h3                  { font-size: 20px; }   /* 15→20 */
.input-section label               { font-size: 16px; }   /* 12→16 */
.input-section input[type="text"],
.input-section input[type="number"] { font-size: 16px; }   /* 12→16 */

/* ─ 테이블 섹션 ─ */
.table-section-title               { font-size: 18px; }   /* 14→18 */

/* ─ 뷰포트 컨트롤 ─ */
.viewport-label                    { font-size: 14px; }   /* 11→14 */
.view-nav-btn                      { font-size: 16px; }   /* 12→16 */
.view-reset-btn                    { font-size: 18px; }   /* 14→18 */
.view-centerline-check             { font-size: 14px; }   /* 11→14 */
.pitch-drag-controls               { font-size: 16px; }   /* 12→16 */
.view-row-count                    { font-size: 14px; }   /* 11→14 */
.view-row-count label              { font-size: 14px; }   /* 11→14 */
.view-row-count input[type="number"] { font-size: 14px; }   /* 11→14 */

/* ─ Excel 테이블 ─ */
.excel-table                       { font-size: 14px; }   /* 11→14 */
.excel-table input,
.excel-table select                 { font-size: 16px; }   /* 12→16 */
.excel-table .col-header-sub       { font-size: 13px; }   /* 10→13 */
.row-side-label                    { font-size: 10px; }   /* 8→10 */

/* ─ EP 사이드 패널 ─ */
.ep-side                           { font-size: 14px; }   /* 11→14 */
.ep-side-header                    { font-size: 14px; }   /* 11→14 */
.ep-reset-btn                      { font-size: 17px; }   /* 13→17 */
.ep-table thead th                 { font-size: 13px; }   /* 10→13 */
.ep-input                          { font-size: 14px; }   /* 11→14 */
.ep-seated-info                    { font-size: 13px; }   /* 10→13 */
.ep-no-trans                       { font-size: 13px; }   /* 10→13 */
.ep-trans-range-info               { font-size: 13px; }   /* 10→13 */
.ep-anchor-cell                    { font-size: 14px; }   /* 11→14 */
.ep-drag-hint                      { font-size: 13px; }   /* 10→13 */

/* ─ Undo / Redo ─ */
.btn-undo, .btn-redo               { font-size: 16px; }   /* 12→16 */
.history-badge                     { font-size: 13px; }   /* 10→13 */

/* ─ 압축 / 응력 ─ */
.compression-label                 { font-size: 14px; }   /* 11→14 */
.compression-info                  { font-size: 14px; }   /* 11→14 */
.compression-margin-row input[type="number"] { font-size: 16px; }   /* 12→16 */
.compression-solid-info            { font-size: 14px; }   /* 11→14 */
.stress-check-label                { font-size: 16px; }   /* 12→16 */
.stress-modulus-row input[type="number"] { font-size: 16px; }   /* 12→16 */

/* ─ 테마 토글 ─ */
.theme-toggle-label                { font-size: 16px; }   /* 12→16 */
.theme-toggle-icon                 { font-size: 18px; }   /* 14→18 */