/* ===== 전역 폰트 스케일 ===== */
html{ font-size:17px; } /* ← 전역 글씨 크기 조절: 16~18px로 취향대로 변경 */

/* ===== 전역 문단/리스트 간격 ===== */
p {
  margin-bottom: 12px;     /* 문단 사이 간격 */
  line-height: 1.6;        /* 줄 간격 넉넉하게 */
}

ul, ol {
  margin-bottom: 12px;     /* 리스트 끝 간격 */
}

ul li, ol li {
  margin-bottom: 6px;      /* 리스트 항목 간 간격 */
  line-height: 1.6;        /* 줄 간격 넉넉하게 */
}

/* ===== 공통 색 변수 ===== */
:root{ --primary:#0052CC; }

/* ===== 레이아웃 / 공통 ===== */
*{box-sizing:border-box}
body{
  margin:0;
  background:#f8fafc;
  color:#0f172a; /* 기본 텍스트: 진한 검정 톤 */
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Apple SD Gothic Neo,Malgun Gothic,"맑은 고딕",sans-serif
}

/* 링크 기본 밑줄 제거 (전역) */
a{ text-decoration:none; color:inherit; }
a:hover{ text-decoration:none; }

/* 버튼처럼 보이는 링크에 색상 유지 */
.btn-next, .btn-prev, .btn-primary, .btn-upload, .btn-outline { color:#fff; }
.btn-outline{ color:#0b3b71; }

/* 앱 레이아웃 */
.app-wrap{display:flex;min-height:100vh}
.sidebar{
  width:240px;background:#0b3b71;color:#fff;
  display:flex;flex-direction:column
}
.brand{padding:16px 18px;font-weight:800;letter-spacing:.2px}
.nav-steps{list-style:none;margin:8px 0 0;padding:0}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:10px 16px;
  opacity:.9;cursor:pointer;transition:.15s
}
.nav-item .num{
  display:inline-grid;place-items:center;width:22px;height:22px;
  border-radius:50%;background:#1e58a6;font-weight:700
}
.nav-item .label{font-size:1rem} /* 루트 글꼴과 함께 스케일 */
.nav-item:hover{background:rgba(255,255,255,.08)}
.nav-item.disabled{opacity:.45;cursor:not-allowed}
.nav-item.active{background:rgba(255,255,255,.16)}
.nav-item.done{opacity:1}
.sidebar-footer{margin-top:auto;padding:12px 16px;color:#cbd5e1;font-size:.95rem}

.content{flex:1;padding:24px}

/* ▶ 사이드바 단계 번호 자동 생성 */
.nav-steps{ counter-reset: step; } /* 1부터 카운트 시작 */
.nav-steps .nav-item .num::before{
  counter-increment: step;
  content: counter(step);
}
/* 만약 .num 요소가 없을 때의 폴백: "1. "을 라벨 앞에 붙임(중복 방지용 :has 사용) */
.nav-steps .nav-item:not(:has(.num)) .label::before{
  counter-increment: step;
  content: counter(step) ". ";
  margin-right:6px;
  font-weight:800;
  color:#cfe0ff;
}

/* ===== 상단 좌측 미니 단계표시 & 진행바 ===== */
.topbar{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.step-badge{
  display:inline-block;background:#eff6ff;color:#1d4ed8;
  border-radius:9999px;padding:4px 10px;font-weight:700
}
.progress{flex:1;height:6px;background:#e2e8f0;border-radius:9999px;overflow:hidden}
.progress-fill{height:100%;background:#0052CC}

/* ===== 카드/폼 ===== */
.section.step-box{max-width:1200px}
.section.step-box.wide{max-width:none;width:100%}
.card{
  background:#fff;border:1px solid #e5e7eb;border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.04)
}
.input{border:1px solid #cbd5e1;border-radius:8px;padding:8px 10px}

/* ===== 공통 버튼(기본형) ===== */
.btn-next,.btn-primary,.btn-upload{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#0052CC;color:#fff;border:none;border-radius:10px;
  padding:10px 16px;font-weight:700;cursor:pointer;transition:.15s;
  font-size:1rem; /* 루트 폰트와 함께 스케일 */
}
.btn-next:hover,.btn-primary:hover,.btn-upload:hover{filter:brightness(1.05)}
.btn-next:disabled{opacity:.55;cursor:not-allowed}

/* ===== 이전 단계 버튼 (기본형) ===== */
.btn-prev{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#6b7280;color:#fff;border:none;border-radius:10px;
  padding:10px 16px;font-weight:700;cursor:pointer;transition:.15s;
  font-size:1rem;
}
.btn-prev:hover{filter:brightness(1.05)}

/* 상단 ‘업로드하고 다음 단계’ 스피너 스타일(재사용) */
#next-btn .btn-spinner::after{
  content:'';display:inline-block;width:14px;height:14px;
  border:2px solid rgba(255,255,255,.6);border-top-color:#fff;
  border-radius:50%;animation:spin 1s linear infinite;vertical-align:-2px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== 업로드 드롭존(1단계) ===== */
.upload-grid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(260px,1fr);gap:18px; margin-top:24px;} /* ← 카드 아래 여백 */
@media (max-width:900px){.upload-grid{grid-template-columns:1fr}}

.drop-zone{
  border:2px dashed #c8d3e6;background:#fbfdff;border-radius:12px;
  padding:16px;transition:.15s;border-color:#c8d3e6
}
.drop-zone .dz-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.drop-zone .dz-title strong{font-weight:700}
.drop-zone .dz-status{margin-left:auto;font-size:.95rem}
.drop-zone .btn-upload{background:#0b3b71;border-radius:8px;padding:6px 12px;margin-top:12px;}
.drop-zone.dz-hover{border-color:#5b8def;background:#f5f9ff}
.drop-zone.dz-filled{border-color:#4caf50}
.drop-zone.dz-success{box-shadow:0 0 0 2px rgba(76,175,80,.15) inset}
.drop-zone.dz-error{border-color:#e74c3c;background:#fff7f7}
.drop-zone.dz-uploading{opacity:.9}
.dz-filepill{
  display:flex;align-items:center;gap:10px;background:#f6f9ff;
  border:1px solid #d9e4ff;border-radius:8px;padding:6px 10px;margin:6px 0 2px
}
.dz-filepill .dz-filename{font-weight:600}
.dz-filepill .dz-filesize{font-size:.95rem;color:#667}
.dz-filepill .dz-reset{
  margin-left:auto;border:none;background:#e8eefc;border-radius:6px;
  width:24px;height:24px;cursor:pointer
}
.dz-progress{width:100%;height:6px;margin-top:6px;appearance:none}
.dz-progress::-webkit-progress-bar{background:#eef2ff;border-radius:6px}
.dz-progress::-webkit-progress-value{background:#0052CC;border-radius:6px}

/* ===== 상태 하이라이트(Handsontable와 매칭) ===== */
.htExpired{background:#ffff00 !important}
.htSoon{background:#ccffcc !important}
.htPlaceholder{background:#ffcc99 !important}

/* 숫자 빨강(강제) → td까지 명시 */
.htRedText,
.handsontable td.htRedText {
  color:red !important;
  font-weight:800 !important; /* 필요시 굵게 */
}

/* ===== Handsontable 공통(3·4단계 통일) ===== */
.hot-frame{
  width:100%;
  min-height:560px;
  overflow:hidden;
  padding-bottom:8px;
}

/* 기본 박스 (폰트 확대: 16px) */
#hot .handsontable,
#hot-review .handsontable,
#hot-existing .handsontable,
#hot-new .handsontable,
#hot-review-existing .handsontable,
#hot-review-new .handsontable{
  border:1px solid #dbe6ff; border-radius:12px; overflow:clip;
  box-shadow:0 4px 12px rgba(11,59,113,.04);
  font-size:16px; line-height:1.5; color:#0f172a;
}

/* 열 헤더: 기본 파랑. 중요 헤더는 JS가 붙인 클래스가 최우선으로 덮어씀 */
#hot .handsontable th,
#hot-review .handsontable th,
#hot-existing .handsontable th,
#hot-new .handsontable th,
#hot-review-existing .handsontable th,
#hot-review-new .handsontable th{
  background: var(--primary, #0052CC);
  color:#fff;
  font-weight:700;
  border-right:1px solid #cfe0ff !important;
  border-bottom:1px solid #cfe0ff !important;
}

/* ✅ 중요 헤더(필요 주문량/이번 발주 가능약/대체약) 강조 클래스 */
.ht-header-important{
  background:#dc2626 !important; /* 빨강 */
  color:#fff !important;
}

/* ✅ 값(셀) 강조: 굵게 + 진한 글자색 (배경색과 무관하게 항상 적용) */
.ht-bold-important{
  font-weight:800 !important;
  color:#111 !important;
}

/* 셀 경계 */
#hot .handsontable td,
#hot-review .handsontable td,
#hot-existing .handsontable td,
#hot-new .handsontable td,
#hot-review-existing .handsontable td,
#hot-review-new .handsontable td{
  border-right:1px solid #eef2ff !important;
  border-bottom:1px solid #eef2ff !important;
}

/* 줄무늬/호버 */
#hot .handsontable tbody tr:nth-child(even) td,
#hot-review .handsontable tbody tr:nth-child(even) td,
#hot-existing .handsontable tbody tr:nth-child(even) td,
#hot-new .handsontable tbody tr:nth-child(even) td,
#hot-review-existing .handsontable tbody tr:nth-child(even) td,
#hot-review-new .handsontable tbody tr:nth-child(even) td{ background:#fbfdff; }

#hot .handsontable tbody tr:hover td,
#hot-review .handsontable tbody tr:hover td,
#hot-existing .handsontable tbody tr:hover td,
#hot-new .handsontable tbody tr:hover td,
#hot-review-existing .handsontable tbody tr:hover td,
#hot-review-new .handsontable tbody tr:hover td{ background:#f6fbff; }

/* 선택/포커스 색상 */
#hot .handsontable .wtBorder,
#hot-review .handsontable .wtBorder,
#hot-existing .handsontable .wtBorder,
#hot-new .handsontable .wtBorder,
#hot-review-existing .handsontable .wtBorder,
#hot-review-new .handsontable .wtBorder{ background:var(--primary, #0052CC) !important; }

#hot .handsontable .area,
#hot-review .handsontable .area,
#hot-existing .handsontable .area,
#hot-new .handsontable .area,
#hot-review-existing .handsontable .area,
#hot-review-new .handsontable .area{ background: color-mix(in srgb, var(--primary, #0052CC) 16%, transparent); }

#hot .handsontable .corner,
#hot-review .handsontable .corner,
#hot-existing .handsontable .corner,
#hot-new .handsontable .corner,
#hot-review-existing .handsontable .corner,
#hot-review-new .handsontable .corner{ background:var(--primary, #0052CC) !important; }

/* 두 표 섹션 제목 */
.grid-title{
  margin:0 0 10px 2px;
  font-weight:800;
  color:#0b3b71;
}

/* (선택) 작은 화면 최적화 */
@media (max-width:1024px){
  .section.step-box{max-width:none}
}

/* ====== 랜딩 페이지 전용(추가) ====== */
.landing-wrap{max-width:1040px;margin:0 auto;padding:28px}
.landing-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.brand-mark{font-weight:800;font-size:20px;color:#0b3b71}
.btn-outline{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;border:1px solid #0b3b71;border-radius:10px;
  color:#0b3b71;text-decoration:none;font-weight:700
}
.btn-outline:hover{background:#eef4ff}
.landing-hero{padding:40px 4px 28px}
.hero-title{font-size:42px;line-height:1.15;margin:0 0 10px 0;color:#0b3b71}
.hero-sub{color:#475569;margin-bottom:22px}
.btn-primary.hero-cta{
  text-decoration:none;display:inline-block;margin:6px 0 14px 0
}
.hero-note{font-size:1rem;color:#475569}
.landing-footer{margin-top:40px;color:#94a3b8}

/* ===================== */
/* ==== STEP 2 전용 ==== */
/* ===================== */

.coef-display{
  display:flex;
  align-items:flex-end;
  gap:14px;
}
.value-bubble{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 140px;
  height: 80px;
  padding: 8px 18px;
  border-radius: 18px;
  background:#0b3b71;         /* 진한 네이비 */
  color:#fff;
  font-weight:900;
  font-size: 44px;            /* 숫자 크게 */
  line-height:1;
  letter-spacing: -0.5px;
  box-shadow: 0 8px 16px rgba(11,59,113,.18);
}
/* Step2 가이드 목록 스타일 */
.card ul.guide-list li {
  margin-bottom: 14px;      /* 항목 간 간격 */
  line-height: 1.6;         /* 줄 간격 */
  font-size: 1rem;          /* 글씨 조금 키우기 */
}

.card ul.guide-list li div {
  margin-top: 4px;          /* 설명문 위쪽 간격 */
  font-size: 0.95rem;       /* 설명문도 살짝 키움 */
  line-height: 1.5;
  color: #475569;           /* 더 잘 보이게 진한 회색 */
}
.value-bubble::after{
  content:'배';
  margin-left:8px;
  font-size: 20px;
  font-weight:700;
  opacity:.9;
}
.value-caption{
  color:#475569;
  font-size:14px;
  margin-bottom:8px;
}

/* 슬라이더 컨테이너 */
.slider-wrapper{
  position:relative;
  width: 100%;
  max-width: 560px;
  margin-top: 22px;
}

/* 두툼한 슬라이더 트랙/썸 */
#coef-slider{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height: 14px;
  background:#e6eeff;
  border-radius: 9999px;
  outline:none;
}
#coef-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width: 28px; height: 28px;
  border-radius:50%;
  background:#0052CC;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  cursor:pointer;
  transition: transform .06s ease;
}
#coef-slider:active::-webkit-slider-thumb{ transform: scale(1.06); }
#coef-slider::-moz-range-thumb{
  width: 28px; height: 28px; border-radius:50%;
  background:#0052CC; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18); cursor:pointer;
}

/* 눈금 라벨 */
.slider-scale{
  display:flex; justify-content:space-between;
  margin-top:8px; color:#64748b; font-size:.95rem; font-weight:600;
}

/* 숫자 튀는 애니메이션 */
@keyframes pulse-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.value-bubble.pulse{ animation: pulse-pop .18s ease-out; }

/* 작은 화면 보정 */
@media (max-width: 520px){
  .value-bubble{
    min-width:120px; height:72px; font-size: 38px;
  }
}

/* ===================================================== */
/* === 방향성 버튼: 한쪽만 뾰족한 “눕힌 연필” 모양 (전역) === */
/* ===================================================== */

/* 공통: 가시성 및 위치 제어 */
.btn-prev, .btn-next{
  position: relative;               /* pseudo-element 배치 기준 */
  overflow: visible;                /* 삼각형이 밖으로 나와도 보이게 */
}

/* 이전 버튼: 왼쪽으로 뾰족 */
.btn-prev{
  --prev-bg:#6b7280;
  background: var(--prev-bg);
  border-radius: 10px;              /* 기본은 둥근 네모 */
  padding: 10px 18px 10px 22px;     /* 왼쪽 여백 약간 넉넉히 */
  margin-left:14px;                 /* ← 좌측 경계와 붙지 않게 */
}
.btn-prev::before{
  content:'';
  position:absolute;
  left:-14px;                       /* 본체 밖으로 14px 돌출 */
  top:50%;
  transform:translateY(-50%);
  width:0; height:0;
  border-top:14px solid transparent;
  border-bottom:14px solid transparent;
  border-right:14px solid var(--prev-bg); /* ▶ 방향 삼각형(왼쪽) */
}
.btn-prev:hover{
  filter:none;                      /* hover 색을 변수로 제어 */
  background:#5d636e;
}
.btn-prev:hover::before{ border-right-color:#5d636e; }
.btn-prev:disabled{ opacity:.6; cursor:not-allowed; }
.btn-prev:disabled::before{ border-right-color:#6b7280; }

/* 다음 버튼: 오른쪽으로 뾰족 */
.btn-next{
  --next-bg:#0052CC;
  background: var(--next-bg);
  border-radius: 10px;
  padding: 10px 22px 10px 18px;     /* 오른쪽 여백 약간 넉넉히 */
}
.btn-next::after{
  content:'';
  position:absolute;
  right:-14px;                      /* 본체 밖으로 14px 돌출 */
  top:50%;
  transform:translateY(-50%);
  width:0; height:0;
  border-top:14px solid transparent;
  border-bottom:14px solid transparent;
  border-left:14px solid var(--next-bg);  /* ▶ 방향 삼각형(오른쪽) */
}
.btn-next:hover{
  filter:none;
  background:#0047b3;
}
.btn-next:hover::after{ border-left-color:#0047b3; }
.btn-next:disabled{ opacity:.6; cursor:not-allowed; }
.btn-next:disabled::after{ border-left-color:#0052CC; }

/* 상단 버튼 묶음 여백 (삼각형 포함) */
.top-btns{
  display:flex;
  align-items:center;
  column-gap:28px;  /* 버튼 사이 넉넉한 간격 */
}

/* ===================== */
/* ==== STEP 5 전용 ==== */
/* ===================== */

/* 카드 제목/설명 (step5_category.html과 매칭) */
.card-title{
  margin:0 0 8px 0;
  font-size:1.15rem;
  font-weight:800;
  color:#0b3b71;
}
.card-desc{
  margin:0 0 12px 0;
  color:#475569;
  font-size:.98rem;
}

/* 보조 버튼(회색 계열) */
.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#e5e7eb;color:#111;border:1px solid #d1d5db;border-radius:10px;
  padding:10px 16px;font-weight:700;cursor:pointer;transition:.15s;
  font-size:1rem;
}
.btn-secondary:hover{ background:#dfe3ea; }
.btn-secondary:disabled{ opacity:.55; cursor:not-allowed; }

/* 테이블 프리뷰 (table-simple) */
.table-simple{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:.98rem;
}
.table-simple thead th{
  position:sticky; top:0; z-index:1;
  background:#0b3b71; color:#fff; text-align:left;
  padding:10px 12px; font-weight:800;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
}
.table-simple thead th+th{
  border-top-left-radius:0;
  border-top-right-radius:8px;
}
.table-simple tbody td{
  background:#fff;
  border-bottom:1px solid #eef2ff;
  border-right:1px solid #eef2ff;
  padding:10px 12px;
}
.table-simple tbody tr:nth-child(even) td{ background:#fbfdff; }
.table-simple tbody tr:hover td{ background:#f6fbff; }
.table-simple tbody tr td:first-child{ border-left:1px solid #eef2ff; }
.table-simple tbody tr:first-child td:first-child{ border-top-left-radius:8px; }
.table-simple tbody tr:first-child td:last-child{  border-top-right-radius:8px; }
.table-simple tbody tr:last-child td:first-child{  border-bottom-left-radius:8px; }
.table-simple tbody tr:last-child td:last-child{   border-bottom-right-radius:8px; }

/* Step 5 상태 텍스트 */
#step5-status{
  font-size:.95rem;
  color:#334155;
}

/* ==== Handsontable (Step 5 전용 그리드) ==== */
#step5-grid .handsontable{
  border:1px solid #dbe6ff; border-radius:12px; overflow:clip;
  box-shadow:0 4px 12px rgba(11,59,113,.04);
  font-size:16px; line-height:1.5; color:#0f172a;
}
#step5-grid .handsontable th{
  background: var(--primary, #0052CC);
  color:#fff;
  font-weight:700;
  border-right:1px solid #cfe0ff !important;
  border-bottom:1px solid #cfe0ff !important;
}
/* 중요 헤더 공통 클래스 재사용 (JS에서 Category에 붙이면 강조됨) */
#step5-grid .handsontable th.ht-header-important{
  background:#dc2626 !important;
  color:#fff !important;
}
#step5-grid .handsontable td{
  border-right:1px solid #eef2ff !important;
  border-bottom:1px solid #eef2ff !important;
}
#step5-grid .handsontable tbody tr:nth-child(even) td{ background:#fbfdff; }
#step5-grid .handsontable tbody tr:hover td{ background:#f6fbff; }
#step5-grid .handsontable .wtBorder{ background:var(--primary, #0052CC) !important; }
#step5-grid .handsontable .area{ background: color-mix(in srgb, var(--primary, #0052CC) 16%, transparent); }
#step5-grid .handsontable .corner{ background:var(--primary, #0052CC) !important; }

/* Filters & DropdownMenu 가독성 개선 */
.handsontable .htMenu{
  border:1px solid #dbe6ff;
  box-shadow:0 8px 18px rgba(11,59,113,.12);
  border-radius:10px;
  overflow:hidden;
}
.handsontable .htMenu .ht_master .wtHolder{ background:#fff; }
.handsontable .htMenu .htCore td,
.handsontable .htMenu .htCore th{
  font-size:14px; line-height:1.4;
}
.handsontable .htFiltersMenuCondition{
  padding:8px 10px;
}
.handsontable .htUISelectCaption,
.handsontable .htUICheckbox,
.handsontable .htUIButton{
  font-size:14px;
}
.handsontable .htUIButton{
  border-radius:8px;
  border:1px solid #d1d5db;
  background:#f8fafc;
}
.handsontable .htUIButton:hover{
  background:#eef4ff;
}

/* 정렬 아이콘 색상 살짝 강조 */
.handsontable th .sortAction{
  filter: brightness(1.1);
}

/* =============================== */
/* == 데스크톱 강제 모드 보강 ==  */
/* =============================== */
body.force-desktop .sidebar{
  width:240px !important;
  position:fixed !important;
  top:0; left:0; height:100vh;
}
body.force-desktop .content{ padding:32px !important; margin-left:240px !important; }
body.force-desktop #main{ padding:32px !important; margin-left:240px !important; }

/* ============================= */
/* == 모바일 전환(보호 포함) == */
/* ============================= */
@media (max-width: 980px){
  /* 데스크톱 강제 모드가 아닐 때에만 모바일 전환 */
  body:not(.force-desktop) .app-wrap{ flex-direction: column; }
  body:not(.force-desktop) .sidebar{ width:100%; position: sticky; top:0; z-index: 20; }
  body:not(.force-desktop) .content{ padding:16px; }
}

/* ============================== */
/* == 사이드바 하단 법률 링크  == */
/* ============================== */
.sidebar .legal-links{
  margin-top:8px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.25);
}
.sidebar .legal-link{
  display:block;
  padding:6px 2px 4px;
  font-size:.92rem;
  color:#fff;
  opacity:.9;
}
.sidebar .legal-link + .legal-link{ margin-top:4px; }
.sidebar .legal-link:hover{ opacity:1; text-decoration:underline; }
.sidebar .legal-link:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
  border-radius:6px;
}
@media (max-width: 980px){
  body:not(.force-desktop) .sidebar .legal-links{ padding-bottom:6px; }
}