/* ─── 공장 생산원가 계산기 — 자체 위젯 (Tabler 위에 얹힘) ─── */
:root{
  --bg:#f6f8fb;--bg2:#fff;--bg3:#f1f3f7;
  --text:#182433;--text2:#5a6477;--text3:#9aa3b3;
  --border:#e6e8ec;--border2:#cdd2da;
  --blue:#066fd1;--blue-bg:#e8f2fc;--blue-t:#0356a4;
  --green:#2fb344;--green-bg:#e9f7ec;--green-t:#1e7e2e;
  --amber:#f76707;--amber-bg:#fdf0e6;
  --red:#d63939;--red-bg:#faeaea;
  --r:6px;--r2:8px;
}
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}
body{
  font-family:'Pretendard','Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif;
  background:var(--bg)!important;color:var(--text);font-size:14px;line-height:1.5;
}

/* 탭 컨텐츠 표시 제어 */
.pane{display:none}
.pane.on{display:block}

/* 우리 자체 카드 (Tabler .card와 별도) — 자체 위젯용 */
.card{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);
  padding:18px 20px;margin-bottom:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.ct{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:12px}

/* 그리드 */
.r2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.r3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.f{display:flex;flex-direction:column;gap:4px}
.f label{font-size:12px;color:var(--text2);font-weight:500}

/* form 보강 (Tabler 위에 추가) */
.f input, .f select, .f textarea {
  border:1px solid var(--border);border-radius:var(--r);padding:0 10px;font-size:13px;
  background:var(--bg2);color:var(--text);outline:none;font-family:inherit;width:100%;
}
.f input[type=number], .f input[type=text], .f select { height:34px; }
.f input:focus, .f select:focus { border-color:var(--blue);box-shadow:0 0 0 3px rgba(6,111,209,.15); }
.f input[type=number] { text-align:right; }

/* table — 우리 자체 디자인 */
.pane table { width:100%;border-collapse:collapse;font-size:13px; }
.pane thead th { text-align:left;padding:7px 8px;font-size:11px;font-weight:700;color:var(--text3);border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap; }
.pane thead th.r { text-align:right; }
.pane tbody td { padding:8px;border-bottom:1px solid var(--border);vertical-align:middle;overflow:hidden;text-overflow:ellipsis; }
.pane tbody td.r { text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap; }
.pane tbody tr:last-child td { border-bottom:none; }
.pane tbody tr:hover { background:var(--bg3); }

/* 통계 위젯 */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.stat{background:var(--bg3);border-radius:var(--r);padding:12px 14px;border:1px solid transparent}
.stat.hi{background:var(--blue-bg);border-color:var(--blue-bg)}
.stat .l{font-size:11px;color:var(--text2);font-weight:500;margin-bottom:3px}
.stat .v{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
.stat.hi .l{color:var(--blue-t)}
.stat.hi .v{color:var(--blue)}

/* 쌀불림율 표시 */
.bulge{display:flex;align-items:center;gap:12px;padding:14px;background:var(--bg3);border-radius:var(--r2);margin-top:12px}
.bulge .rate{font-size:32px;font-weight:700;font-variant-numeric:tabular-nums;min-width:90px}
.bulge .badge{font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px}
.bulge.ok .rate{color:var(--green)}
.bulge.ok .badge{background:var(--green-bg);color:var(--green-t)}
.bulge.warn .rate{color:var(--amber)}
.bulge.warn .badge{background:var(--amber-bg);color:var(--amber)}
.bulge.bad .rate{color:var(--red)}
.bulge.bad .badge{background:var(--red-bg);color:var(--red)}

/* 규격별 가격 카드 그리드 */
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:12px}
.pc{background:#fff;border:1px solid var(--border);border-radius:var(--r2);padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,.06);transition:.15s}
.pc:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.pc .sz{font-size:11px;font-weight:700;color:var(--text3);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.pc .main{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
.pc .ship{font-size:13px;color:var(--blue);font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums}
.pc .ship::before{content:'택배 ';font-size:11px;font-weight:400;color:var(--text3)}
.pc .pack-detail{font-size:11px;color:var(--text3);margin-top:6px;border-top:1px solid var(--border);padding-top:6px;line-height:1.6}

/* 1kg 원물가격 표시 */
.raw-row{display:flex;justify-content:space-between;align-items:center;background:var(--blue-bg);border-radius:var(--r);padding:12px 16px;margin-top:10px}
.raw-row span{font-size:13px;color:var(--blue-t);font-weight:600}
.raw-row .v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--blue-t)}

/* 우리 자체 .btn 시스템 — Tabler .btn 위에 색상 추가 */
.btn-p{background:var(--blue)!important;color:#fff!important;border:1px solid var(--blue)!important}
.btn-p:hover{background:var(--blue-t)!important;border-color:var(--blue-t)!important;color:#fff!important}
.btn-o{background:transparent!important;border:1px solid var(--border2)!important;color:var(--text)!important}
.btn-o:hover{background:var(--bg3)!important;color:var(--text)!important}
.btn-d{background:transparent!important;border:1px solid var(--red)!important;color:var(--red)!important}
.btn-d:hover{background:var(--red-bg)!important;color:var(--red)!important}

/* 액션 영역 */
.act{display:flex;align-items:center;gap:10px;padding:8px 0}
.ok{font-size:12px;color:var(--green);font-weight:600;margin-left:4px}
.empty{text-align:center;padding:32px;color:var(--text3);font-size:13px}

/* 입력 그리드 (원가 계산 탭) */
.in-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 16px;margin-top:12px}
.ir{display:grid;grid-template-columns:120px 1fr 100px;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--bg3)}
.ir.full{grid-column:1/-1;grid-template-columns:120px 1fr 100px}
.ir label{font-size:13px;font-weight:500;color:var(--text)}
.ir input{height:34px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg2);font-size:13px;text-align:right;font-variant-numeric:tabular-nums;width:100%}
.ir input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(6,111,209,.15)}
.ir .u{font-size:11px;color:var(--text3)}

/* 토글 카드 (관리 탭) */
.toggle{border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;margin-bottom:10px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.th{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;cursor:pointer;background:#fff;user-select:none}
.th:hover{background:var(--bg3)}
.th-title{font-size:13px;font-weight:600;color:var(--text)}
.tb{padding:18px;border-top:1px solid var(--border);display:none;background:#fff}
.tb.on{display:block}

/* 알림 노트 */
.note{font-size:12px;color:var(--amber);background:var(--amber-bg);border-left:3px solid var(--amber);padding:10px 14px;border-radius:0 var(--r) var(--r) 0;margin-bottom:12px;line-height:1.6}
.tag-w{font-size:11px;color:var(--amber);font-weight:600;margin-left:4px}

/* nav-tabs 한국어 폰트 보정 */
.nav-tabs .nav-link{font-size:13px;font-weight:500;padding:10px 18px;color:var(--text2);border-bottom:2px solid transparent;border-radius:0}
.nav-tabs .nav-link.active,.nav-tabs .nav-link.on{color:var(--blue);background:transparent;border-color:transparent transparent var(--blue) transparent;font-weight:600}
.nav-tabs .nav-link:hover{color:var(--text);border-color:transparent}

/* navbar 한국어 보정 */
.navbar-brand{padding-top:0;padding-bottom:0}

/* ─── 모바일 (≤768px) ─── */
@media(max-width:768px){
  /* 그리드 → 1열 */
  .r2,.r3,.stats,.in-grid{grid-template-columns:1fr}
  .ir{grid-template-columns:90px 1fr 70px}
  .pgrid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}

  /* 네비게이션 / 헤더 */
  .navbar-brand{font-size:14px!important}
  .navbar .container-xl{padding-left:10px!important;padding-right:10px!important}
  .container-xl{padding-left:10px!important;padding-right:10px!important}

  /* 카드 */
  .card{padding:12px 14px}

  /* 폼 */
  .f label{font-size:11px}
  input,select,textarea{font-size:13px}

  /* 탭바 가로 스크롤 보장 */
  .nav-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .nav-tabs .nav-link{padding:8px 12px;font-size:12px;white-space:nowrap}

  /* 통계 위젯 */
  .stat .v{font-size:16px}

  /* 사이즈별 카드 */
  .pc{padding:10px 12px}
  .pc .main{font-size:18px}

  /* 테이블 폰트 살짝 작게 */
  .pane table{font-size:12px}
  .pane thead th, .pane tbody td{padding:6px 5px}
}

/* 헤더 날짜 컨트롤 모바일 최적화 */
@media(max-width:768px){
  #cal-toggle{min-width:120px!important;font-size:12px!important;padding:0 10px!important}
  #cal-toggle-text{font-size:12px!important}
}

/* ─── 작은 모바일 (≤480px) ─── */
@media(max-width:480px){
  /* 차트 높이 줄임 */
  canvas{max-height:180px!important}

  /* 헤더 navbar 더 컴팩트 */
  .navbar-brand{font-size:13px!important}
  .navbar-brand span:first-child{font-size:18px!important}
  #role-badge{display:none}  /* 역할 배지 숨김 (공간 절약) */

  /* 헤더 동기화 버튼 더 작게 */
  .navbar .btn{padding:4px 8px!important;font-size:11px!important}

  /* 화살표 버튼 모바일 */
  div[style*="display:flex"] > button[onclick*="shiftDate(-1)"],
  div[style*="display:flex"] > button[onclick*="shiftDate(1)"] {
    width:36px!important;height:34px!important;font-size:16px!important;
  }
  /* 큰 날짜 박스 */
  #cal-toggle{min-width:110px!important;height:34px!important;font-size:12px!important;padding:0 8px!important}
  /* 오늘 버튼 */
  button[onclick="shiftDate(0)"]{height:34px!important;padding:0 10px!important;font-size:11px!important}

  /* AI 브리핑 카드 */
  #briefing-card{padding:10px 12px!important;margin-left:10px;margin-right:10px}

  /* 탭 텍스트 더 작게 */
  .nav-tabs .nav-link{padding:8px 10px;font-size:11px}

  /* 사이즈별 카드 */
  .pgrid{grid-template-columns:repeat(2,1fr)}

  /* HR 서브탭 가로 스크롤 */
  .pane > div[onclick*="hrTab"]{font-size:11px!important;padding:8px 10px!important}

  /* 카드 좌우 마진 줄여서 화면 풀로 */
  .card{margin-left:0;margin-right:0;padding:10px 12px}

  /* 표 가로 스크롤 명확히 */
  .pane table{min-width:auto}

  /* 입력 그리드 (원가계산 탭) */
  .ir{grid-template-columns:80px 1fr 60px;gap:6px}
  .ir input{font-size:12px;padding:0 6px}

  /* 통계 카드 1열 */
  .stats{grid-template-columns:1fr!important}
}