/* ProteomeFit - Bootstrap 5.3 위 테마 · 구성 요소 스타일 */
:root, [data-bs-theme="light"] {
  --eg-page: #f6f7f9;
  --eg-surface: #ffffff;
  --eg-primary: #256abf;          /* 버튼 · 강조 (흰 글자 대비 5:1 이상) */
  --eg-primary-hover: #1c5cab;
  --eg-primary-soft: #e8f0fb;
  --eg-series-1: #2a78d6;         /* 그래프 계열 1 (파랑) = 비필수 */
  --eg-series-2: #eb6834;         /* 계열 2 (주황) = 필수 */
  --eg-meter-track: #cde2fb;
  --eg-grid: #e1e0d9;
  --eg-axis: #898781;
  --eg-ring: rgba(11, 11, 11, 0.08);
  --bs-body-bg: var(--eg-page);
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --bs-primary: var(--eg-primary);
  --bs-primary-rgb: 37, 106, 191;
  --bs-link-color: var(--eg-primary);
  --bs-link-color-rgb: 37, 106, 191;
  --bs-link-hover-color: var(--eg-primary-hover);
  --bs-border-radius: .5rem;
  --bs-border-radius-lg: .75rem;
}
[data-bs-theme="dark"] {
  --eg-page: #0f1012;
  --eg-surface: #1a1b1e;
  --eg-primary: #3987e5;
  --eg-primary-hover: #5598e7;
  --eg-primary-soft: #16243a;
  --eg-series-1: #3987e5;
  --eg-series-2: #d95926;
  --eg-meter-track: #184f95;
  --eg-grid: #2c2c2a;
  --eg-axis: #898781;
  --eg-ring: rgba(255, 255, 255, 0.08);
  --bs-body-bg: var(--eg-page);
  --bs-primary: var(--eg-primary);
  --bs-primary-rgb: 57, 135, 229;
  --bs-link-color: var(--eg-primary-hover);
  --bs-link-color-rgb: 85, 152, 231;
  --bs-link-hover-color: #86b6ef;
  --bs-secondary-bg: #1a1b1e;
}

body { background: var(--eg-page); -webkit-font-smoothing: antialiased; }
code { color: var(--bs-body-color); background: color-mix(in srgb, var(--bs-body-color) 7%, transparent); padding: .1em .35em; border-radius: .3rem; font-size: .85em; }
.card { --bs-card-bg: var(--eg-surface); --bs-card-border-color: var(--eg-ring); }
.shadow-sm { box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06) !important; }
.navbar { --bs-navbar-padding-y: .65rem; backdrop-filter: saturate(1.4) blur(8px); background: color-mix(in srgb, var(--eg-surface) 85%, transparent) !important; }
.btn-primary { --bs-btn-bg: var(--eg-primary); --bs-btn-border-color: var(--eg-primary);
               --bs-btn-hover-bg: var(--eg-primary-hover); --bs-btn-hover-border-color: var(--eg-primary-hover);
               --bs-btn-active-bg: var(--eg-primary-hover); --bs-btn-disabled-bg: var(--eg-primary); --bs-btn-disabled-border-color: var(--eg-primary);
               --bs-btn-color: #fff; --bs-btn-hover-color: #fff; font-weight: 600; }
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #0b1220; --bs-btn-hover-color: #0b1220; --bs-btn-active-color: #0b1220; }
section { scroll-margin-top: 72px; }

/* 첫 화면 */
.hero { background:
          radial-gradient(1000px 400px at 85% -10%, color-mix(in srgb, var(--eg-primary) 14%, transparent), transparent 70%),
          linear-gradient(180deg, var(--eg-surface), var(--eg-page)); border-bottom: 1px solid var(--eg-ring); }
.hero h1 { letter-spacing: -.02em; }
.hero .badge { font-weight: 500; }
[data-bs-theme="dark"] .hero .badge { background: var(--eg-surface) !important; color: var(--bs-body-color) !important; }
.steps li { display: flex; gap: .9rem; align-items: flex-start; padding: .55rem 0; }
.steps li + li { border-top: 1px dashed var(--eg-ring); }
.step-n { flex: 0 0 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center;
          background: var(--eg-primary-soft); color: var(--eg-primary); font-weight: 700; font-size: .9rem; }

/* 입력 형식 선택 */
.format-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.format-opt { display: flex; gap: .75rem; align-items: flex-start; padding: .85rem 1rem; border: 1px solid var(--bs-border-color);
              border-radius: var(--bs-border-radius-lg); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; height: 100%; }
.format-opt i { font-size: 1.35rem; color: var(--bs-secondary-color); line-height: 1; margin-top: .1rem; }
.format-opt span { display: flex; flex-direction: column; }
.format-opt small { color: var(--bs-secondary-color); }
.format-opt:hover { border-color: var(--eg-primary); }
.btn-check:checked + .format-opt { border-color: var(--eg-primary); background: var(--eg-primary-soft); box-shadow: 0 0 0 1px var(--eg-primary) inset; }
.btn-check:checked + .format-opt i { color: var(--eg-primary); }
.btn-check:focus-visible + .format-opt { outline: 2px solid var(--eg-primary); outline-offset: 2px; }
@media (max-width: 767.98px) { .format-grid { grid-template-columns: 1fr; } }

/* 파일 놓기 영역 */
.dropzone { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; padding: 2rem 1rem;
            border: 1.5px dashed var(--bs-border-color); border-radius: var(--bs-border-radius-lg); cursor: pointer;
            color: var(--bs-secondary-color); transition: border-color .15s, background .15s; width: 100%; }
.dropzone #dropText { color: var(--bs-body-color); overflow-wrap: anywhere; }
.dropzone:hover, .dropzone.over { border-color: var(--eg-primary); background: var(--eg-primary-soft); }
.dropzone.has-file { border-style: solid; border-color: var(--eg-primary); }
.dropzone.has-file i { color: var(--eg-primary); }
.facts li { display: flex; gap: .75rem; padding: .5rem 0; }
.facts i { color: var(--eg-primary); font-size: 1.1rem; }

/* 작업 진행 단계 */
.stepper { display: flex; gap: 0; margin: 0 0 1rem; }
.stepper li { flex: 1; display: flex; align-items: center; gap: .5rem; font-weight: 500; color: var(--bs-secondary-color); position: relative; }
.stepper li:not(:last-child)::after { content: ""; flex: 1; height: 2px; background: var(--bs-border-color); margin: 0 .75rem; border-radius: 2px; }
.stepper .dot { width: .85rem; height: .85rem; border-radius: 50%; border: 2px solid var(--bs-border-color); flex: 0 0 auto; }
.stepper li.done { color: var(--bs-body-color); }
.stepper li.done .dot { background: var(--eg-primary); border-color: var(--eg-primary); }
.stepper li.done:not(:last-child)::after { background: var(--eg-primary); }
.stepper li.active { color: var(--bs-body-color); }
.stepper li.active .dot { border-color: var(--eg-primary); box-shadow: 0 0 0 4px var(--eg-primary-soft); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) { .stepper li.active .dot { animation: none; } }

/* 숫자 타일 */
.tile .tile-label { font-size: .85rem; color: var(--bs-secondary-color); display: flex; align-items: center; gap: .4rem; }
.tile .tile-value { font-size: 2rem; font-weight: 600; line-height: 1.2; margin-top: .25rem; letter-spacing: -.01em; }
.tile .tile-sub { font-size: .8rem; color: var(--bs-secondary-color); }
.tile .tile-split { display: flex; gap: 1rem; }                       /* 높은 · 낮은 적합도 두 값 */
.tile .tile-split i { font-size: 1.1rem; color: var(--bs-secondary-color); margin-right: .1rem; -webkit-text-stroke: .5px; }
.seq { font-family: var(--bs-font-monospace); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.key { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .1rem; vertical-align: -.05rem; }
.key-ess { background: var(--eg-series-2); }
.key-non { background: var(--eg-series-1); }

.chart-box { position: relative; height: 260px; }
.search { max-width: 260px; }
.cols-table th { width: 9.5rem; white-space: nowrap; font-weight: 500; }
.cols-table tr + tr { border-top: 1px solid var(--eg-ring); }
.cols-table th, .cols-table td { padding: .75rem 1.25rem; }

/* 결과 표 (Tabulator bootstrap5 테마 위) */
#table.tabulator { font-size: .875rem; border: 1px solid var(--eg-ring); border-radius: var(--bs-border-radius); background: var(--eg-surface); }
#table .tabulator-header, #table .tabulator-header .tabulator-col { background: var(--eg-surface); color: var(--bs-body-color); border-color: var(--eg-ring); }
#table .tabulator-tableholder .tabulator-table { background: var(--eg-surface); color: var(--bs-body-color); }
#table .tabulator-row { background: var(--eg-surface); border-color: var(--eg-ring); }
#table .tabulator-row.tabulator-row-even { background: color-mix(in srgb, var(--bs-body-color) 2.5%, var(--eg-surface)); }
#table .tabulator-row:hover { background: var(--eg-primary-soft) !important; }
#table .tabulator-cell { border-color: transparent; font-variant-numeric: tabular-nums; }
#table .tabulator-footer { background: var(--eg-surface); color: var(--bs-body-color); border-color: var(--eg-ring); }
#table .tabulator-footer .tabulator-page { background: transparent; color: var(--bs-body-color); border-color: var(--bs-border-color); }
#table .tabulator-footer .tabulator-page.active { background: var(--eg-primary); border-color: var(--eg-primary); color: #fff; }
#table .tabulator-placeholder-contents { color: var(--bs-secondary-color); }
#table .tabulator-footer .tabulator-footer-contents { flex-wrap: wrap; gap: .5rem 1rem; }
@media (max-width: 575.98px) { .cols-table th { width: auto; } .cols-table th, .cols-table td { padding: .6rem .75rem; } }
.call-pill { display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; }
.meter { display: inline-flex; align-items: center; gap: .5rem; width: 100%; }
.meter-track { flex: 1; height: 6px; border-radius: 3px; background: var(--eg-meter-track); overflow: hidden; min-width: 40px; }
.meter-fill { display: block; height: 100%; border-radius: 3px; background: var(--eg-series-1); }
.meter-fill.ess { background: var(--eg-series-2); }
.meter-track.ess { background: color-mix(in srgb, var(--eg-series-2) 25%, var(--eg-surface)); }
.meter span { width: 2.6rem; text-align: right; }
.tabulator-tooltip { max-width: min(560px, 90vw); overflow-wrap: anywhere; }   /* 긴 DNA 서열 툴팁 줄바꿈 */