/* ══════════════════════════════════════
   HaccpSelo HACCP 시스템 — 전역 변수/리셋
══════════════════════════════════════ */
:root {
  --mono-text:    #6E6E75;
  --mono-text-2:  #7A7A82;
  --mono-text-3:  #8A8A92;
  --mono-accent:  #8A8A92;
  --mono-accent-2:#A4A4AA;
  --white:   #ffffff;
  --gray1:   #f5f5f3;
  --gray2:   #e8e8e4;
  --gray3:   #666666;
  --gray4:   #444444;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger:  #ef4444;
  --card-bg: #fafaf8;
  --primary: #2563eb;
  --shadow:  0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.08), 0 12px 40px rgba(0,0,0,0.14);
  --radius:  16px;
  --radius-sm: 10px;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; font-family:'Noto Sans KR',sans-serif; background:var(--gray1); color:var(--mono-text); }
button { cursor:pointer; border:none; outline:none; font-family:inherit; }
input,select,textarea { font-family:inherit; outline:none; border:none; }
a { text-decoration:none; color:inherit; }/* 커스텀 스크롤바 — 전역 */

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(150,150,150,0.3) transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(150,150,150,0.3);
  border-radius: 10px;
  border: 1px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(150,150,150,0.5); }
::-webkit-scrollbar-corner { background: transparent; }/* ══════════════════════════════════════
   PAGE 시스템
══════════════════════════════════════ */

.page { display:none; }
.page.active { display:block; }/* ══════════════════════════════════════
   GOOGLE FONTS
══════════════════════════════════════ *//* ══════════════════════════════════════
   ① PIN 로그인 화면
══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&display=swap');

.login-wrap {
  min-height: 100vh;
  background: #f7f8fa;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}/* 배경 패턴 */

.login-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 80%, rgba(52,103,255,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(42,206,235,0.04) 0%, transparent 60%);
  pointer-events: none;
}/* 도트 패턴 */

.login-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.login-box {
  background: #ffffff;
  border: 1px solid #eef0f4;
  border-radius: 24px;
  padding: 48px 44px 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.06);
  position: relative;
  z-index: 1;
  text-align: center;
}/* 로고 등장 애니메이션 (넷플릭스 스타일) */

@keyframes logoZoomIn {
  0% { transform: scale(1.8); opacity: 0; filter: brightness(2); }
  40% { transform: scale(1.05); opacity: 1; filter: brightness(1.3); }
  60% { transform: scale(0.98); filter: brightness(1); }
  100% { transform: scale(1); opacity: 1; filter: brightness(1); }
}
@keyframes logoGlow {
  0% { text-shadow: 0 0 30px rgba(110,110,117,0.8), 0 0 60px rgba(110,110,117,0.4); }
  100% { text-shadow: none; }
}
@keyframes formFadeUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.login-logo-img {
  animation: logoZoomIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.login-logo-sub {
  animation: logoGlow 1.5s ease-out forwards, formFadeUp 0.8s ease-out 0.4s both;
}
#userLoginSection, #approverLoginSection, #pinLoginSection {
  animation: formFadeUp 0.6s ease-out 0.8s both;
}
.admin-link {
  animation: formFadeUp 0.5s ease-out 1s both;
}/* 로고 영역 */

.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}
.login-logo-icon {
  width: 72px; height: 72px;
  background: #444444;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}
.login-logo-icon svg { width: 40px; height: 40px; color: #fff; }
.login-logo-title {
  font-size: 22px; font-weight: 900; color: #444444;
  letter-spacing: -0.5px;
}
.login-logo-sub {
  font-size: 12px; color: #9aa0ac; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
}/* PIN 타이틀 */

.pin-title {
  font-size: 22px; font-weight: 900; color: #444444;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}/* PIN 입력 박스 */

.pin-inputs {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 12px;
}
.pin-input {
  width: 52px; height: 60px;
  border: 1px solid #dde0e6;
  border-radius: 12px;
  font-size: 26px; font-weight: 900;
  text-align: center;
  color: #444444;
  background: #f7f8fa;
  transition: all 0.2s;
  -webkit-text-security: disc;
  -moz-appearance: textfield;
  appearance: textfield;
}
.pin-input::-webkit-outer-spin-button,
.pin-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pin-input:focus {
  border-color: #444444;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
  outline: none;
}
.pin-input.filled {
  border-color: #444444;
  background: #ffffff;
}
.pin-input.error {
  border-color: var(--danger);
  background: rgba(239,68,68,0.05);
  animation: pinShake 0.4s ease;
}
@keyframes pinShake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
.pin-forgot {
  font-size: 12.5px; color: #9aa0ac;
  margin-bottom: 24px;
  cursor: pointer;
  transition: color 0.2s;
  display: inline-block;
}
.pin-forgot:hover { color: #444444; }/* 로그인 버튼 */

.btn-login {
  width: 100%;
  padding: 15px;
  background: #6E6E75;
  color: #ffffff;
  font-size: 14px; font-weight: 700;
  border: 1px solid #6E6E75;
  border-radius: 2px;
  letter-spacing: 0.5px;
  box-shadow: none;
  transition: background 0.2s ease;
  margin-bottom: 20px;
  cursor: pointer;
  font-family: inherit;
}
.btn-login:hover {
  background: #8A8A92;
  border-color: #8A8A92;
}
.btn-login:active { transform: translateY(0); }
.btn-login:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }/* 관리자 로그인 링크 */

.admin-link {
  font-size: 12.5px; color: #9aa0ac;
  cursor: pointer;
  transition: color 0.2s;
}
.admin-link:hover { color: #444444; }
.login-switch-link {
  text-align: center; font-size: 13px; color: #444444;
  cursor: pointer; margin-top: 14px; font-weight: 700;
  transition: color 0.2s;
}
.login-switch-link:hover { color: #091320; }/* 카피라이트 */

.login-copy {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #eef0f4;
  font-size: 11.5px; color: #9aa0ac; line-height: 1.8;
}
.login-copy strong { color: #444444; font-weight: 800; }/* ══════════════════════════════════════
   ② 관리자 로그인 화면
══════════════════════════════════════ */

.admin-login-box {
  background: rgba(255,255,255,0.97);
  border-radius: 24px;
  padding: 48px 44px 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(110,110,117,0.12);
  position: relative;
  z-index: 1;
  text-align: center;
}
.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.05);
  color: var(--mono-text);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.1em;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 20px;
}
.admin-title {
  font-size: 20px; font-weight: 900; color: var(--mono-text);
  margin-bottom: 28px;
}
.form-group {
  margin-bottom: 14px;
  text-align: left;
}
.form-label {
  font-size: 12px; font-weight: 700; color: var(--gray4);
  margin-bottom: 6px; display: block;
}
.form-input {
  width: 100%;
  padding: 13px 16px;
  border: 2px solid var(--gray2);
  border-radius: 10px;
  font-size: 15px; color: var(--mono-text);
  background: var(--gray1);
  transition: all 0.2s;
}
.form-input:focus {
  border-color: var(--mono-accent);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(110,110,117,0.10);
}
.form-input::placeholder { color: var(--gray3); }
.save-id-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 20px; text-align: left;
}
.save-id-row input[type="checkbox"] { accent-color: var(--mono-accent); width:15px; height:15px; }
.save-id-row label { font-size: 13px; color: var(--gray4); cursor: pointer; }
.back-link {
  font-size: 12.5px; color: var(--gray3);
  cursor: pointer;
  transition: color 0.2s;
  margin-top: 4px;
  display: inline-block;
}
.back-link:hover { color: var(--mono-accent); }/* ══════════════════════════════════════
   TOAST 알림
══════════════════════════════════════ */

.toast {
  position: fixed;
  bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: rgba(0,0,0,0.92);
  color: var(--white);
  padding: 13px 24px;
  border-radius: 40px;
  font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow-lg);
  z-index: 99999;
  transition: opacity 0.2s ease;
  opacity: 0;
  white-space: nowrap;
  border-left: 4px solid var(--mono-accent);
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.toast.toast-error {
  background: #dc2626;
  border-left-color: #fca5a5;
}/* 텔레그램 알림 토글 스위치 */

.tg-toggle {
  position: relative; display: inline-block; width: 36px; height: 20px; cursor: pointer; vertical-align: middle;
}
.tg-toggle input { opacity: 0; width: 0; height: 0; }
.tg-toggle .tg-slider {
  position: absolute; inset: 0; background: #d1d5db; border-radius: 20px; transition: background 0.2s;
}
.tg-toggle .tg-slider::before {
  content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px;
  background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.tg-toggle input:checked + .tg-slider { background: #3b82f6; }
.tg-toggle input:checked + .tg-slider::before { transform: translateX(16px); }/* ══════════════════════════════════════
   ③ 앱 레이아웃 (사이드바 + 콘텐츠)
══════════════════════════════════════ */

.app-wrap {
  display: flex;
  min-height: 100vh;
  background: var(--gray1);
}/* 사이드바 */

.sidebar {
  width: 260px;
  background: #FAFAF8;
  border-right: 1px solid rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 200;
  overflow-y: auto;
  transition: transform 0.3s ease;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }/* 사이드바 로고 */

.sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  cursor: pointer;
}
.sidebar-logo-icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sidebar-logo-icon img { width: 52px; height: 52px; object-fit: cover; object-position: center top; }
.sidebar-logo-text { line-height: 1.3; }
.sidebar-logo-name { font-size: 14px; font-weight: 900; color: #444444; letter-spacing: -0.3px; }
.sidebar-logo-sub  { font-size: 9.5px; color: rgba(0,0,0,0.5); font-weight: 500; }/* 사이드바 메뉴 */

.sidebar-nav { padding: 8px 0 20px; flex: 1; }
.sidebar-menu-group { margin-bottom: 4px; }
.sidebar-group-label {
  font-size: 11px;
  font-weight: 800;
  color: rgba(0,0,0,0.5);
  letter-spacing: 0.12em;
  padding: 14px 18px 4px;
  text-transform: uppercase;
  border-top: 1px solid rgba(0,0,0,0.08);
  margin-top: 4px;
}
.sidebar-accordion-header.active {
  color: #444444;
  background: rgba(0,0,0,0.06);
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(0,0,0,0.75);
  cursor: pointer;
  transition: all 0.15s;
  border-left: 3px solid transparent;
  position: relative;
}
.sidebar-item:hover {
  color: #444444;
  background: rgba(0,0,0,0.04);
}
.sidebar-item.active {
  color: #444444;
  background: rgba(183,207,226,0.28); /* 살짝 밀크블루 */
  border-left-color: #444444;
  font-weight: 800;
}
.sidebar-item-icon {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  opacity: 0.7;
}
.sidebar-item.active .sidebar-item-icon { opacity: 1; }/* 아코디언 헤더 */

.sidebar-accordion-header {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px;
  font-size: 15px; font-weight: 700;
  color: rgba(0,0,0,0.72);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  border-radius: 4px;
  margin: 1px 6px;
}
.sidebar-accordion-header:hover {
  color: #444444;
  background: rgba(0,0,0,0.05);
}
.sidebar-accordion-header.open { color: #444444; }
.accordion-arrow {
  transition: transform 0.2s;
  flex-shrink: 0;
}
.sidebar-accordion-header.open .accordion-arrow {
  transform: rotate(90deg);
}
.sidebar-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.sidebar-accordion-header.open + .sidebar-accordion-body {
  max-height: 2000px;
}/* 아코디언 하위 항목 */

.sidebar-sub-item {
  display: flex;
  align-items: center;
  padding: 9px 16px 9px 38px;
  font-size: 14px;
  color: rgba(0,0,0,0.72);
  cursor: pointer;
  transition: all 0.12s;
  word-break: keep-all;
  border-left: 2px solid transparent;
  margin: 1px 6px;
  border-radius: 0 4px 4px 0;
}
.sidebar-sub-item:hover {
  color: #444444;
  background: rgba(0,0,0,0.04);
  border-left-color: rgba(0,0,0,0.2);
}
.sidebar-sub-item.active {
  color: #444444;
  background: rgba(183,207,226,0.25); /* 살짝 밀크블루 */
  border-left-color: #444444;
  font-weight: 800;
}/* 일지 상태 표시 */

.sidebar-sub-item.done::before,
.sidebar-sub-item.partial::before,
.sidebar-sub-item.undone::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
}
.sidebar-sub-item.done::before { background: #22c55e; }
.sidebar-sub-item.partial::before { background: #eab308; }
.sidebar-sub-item.undone::before { background: #ef4444; }
.sidebar-sub-item.partial { color: rgba(0,0,0,0.85); }/* 주기별 서브카테고리 라벨 */

.sidebar-period-label {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 8px 18px 2px;
  margin-top: 2px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.sidebar-period-label:first-child { border-top: none; margin-top: 0; }/* 아코디언 헤더 진행률 */

.accordion-progress {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.3);
}
.accordion-progress.all-done { color: #22c55e; }/* 문서 뷰어 */

.doc-viewer-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.doc-upload-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: rgba(0,0,0,0.05); color: var(--mono-text);
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 2px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.15s;
}
.doc-upload-btn:hover { background: rgba(0,0,0,0.10); }
.doc-empty {
  text-align: center; padding: 60px 20px;
  color: #9ca3af; font-size: 14px; line-height: 1.8;
}
.doc-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.doc-card {
  background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px;
  overflow: hidden; position: relative; transition: box-shadow 0.15s;
}
.doc-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.doc-card-preview {
  height: 160px; display: flex; align-items: center; justify-content: center;
  background: #fff; border-bottom: 1px solid #e5e7eb; overflow: hidden;
}
.doc-card-preview img {
  width: 100%; height: 100%; object-fit: cover;
}
.doc-card-pdf-icon {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: #e74c3c; font-size: 11px; font-weight: 700;
}
.doc-card-info { padding: 10px 12px; }
.doc-card-name {
  font-size: 12px; font-weight: 600; color: #374151;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-card-date { font-size: 10px; color: #9ca3af; margin-top: 2px; }
.doc-card-del {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0,0,0,0.5); color: #fff;
  border: none; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s;
}
.doc-card:hover .doc-card-del { opacity: 1; }/* 문서 라이트박스 뷰어 */

.doc-lightbox {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(0,0,0,0.85); display: none;
  align-items: center; justify-content: center;
  flex-direction: column;
}
.doc-lightbox.open { display: flex; }
.doc-lightbox-close {
  position: absolute; top: 16px; right: 20px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.15); border: none;
  color: #fff; font-size: 24px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.doc-lightbox-close:hover { background: rgba(255,255,255,0.3); }
.doc-lightbox-content {
  max-width: 90vw; max-height: 80vh; overflow: auto;
  display: flex; align-items: center; justify-content: center;
}
.doc-lightbox-content img {
  max-width: none; max-height: none; object-fit: contain;
  border-radius: 8px; box-shadow: 0 4px 30px rgba(0,0,0,0.5);
  transition: transform 0.15s ease;
}
.doc-lightbox-content iframe {
  border: none; border-radius: 8px;
  background: #fff; transition: all 0.15s ease;
}
.doc-lightbox-zoom {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 10;
  display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.6); border-radius: 10px; padding: 6px 12px;
  backdrop-filter: blur(8px);
}
.doc-lightbox-zoom button {
  width: 32px; height: 32px; border-radius: 8px; border: none;
  background: rgba(255,255,255,0.15); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.doc-lightbox-zoom button:hover { background: rgba(255,255,255,0.3); }
.doc-lightbox-zoom span { color: #fff; font-size: 12px; font-weight: 700; min-width: 40px; text-align: center; }
.doc-lightbox-counter {
  position: absolute; bottom: 20px;
  color: rgba(255,255,255,0.7); font-size: 13px; font-weight: 600;
}
.doc-lightbox-name {
  position: absolute; bottom: 44px;
  color: rgba(255,255,255,0.9); font-size: 14px; font-weight: 700;
  max-width: 80vw; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-badge {
  margin-left: auto;
  background: var(--mono-accent);
  color: var(--mono-text);
  font-size: 9px; font-weight: 900;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}/* 메인 콘텐츠 영역 */

.main-area {
  margin-left: 260px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}/* 오프라인 배너 */

#offlineBanner {
  display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 99999;
  background: #dc2626; color: #fff; text-align: center;
  padding: 8px 16px; font-size: 13px; font-weight: 600;
  animation: slideDown 0.3s ease;
}
#offlineBanner.show { display: flex; align-items: center; justify-content: center; gap: 8px; }
#onlineBanner {
  display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 99999;
  background: #16a34a; color: #fff; text-align: center;
  padding: 8px 16px; font-size: 13px; font-weight: 600;
}
#onlineBanner.show { display: flex; align-items: center; justify-content: center; gap: 8px; }
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }/* 상단 바 */

.topbar {
  height: 58px;
  background: var(--white);
  border-bottom: 1px solid var(--gray2);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}
.topbar-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}
.topbar-hamburger span {
  display: block; width: 20px; height: 2px;
  background: var(--mono-text); border-radius: 2px;
}
.topbar-title {
  font-size: 16px; font-weight: 800; color: var(--mono-text);
  flex: 1;
}
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.topbar-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--gray1);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.18s;
  color: var(--gray4);
}
.topbar-btn:hover { background: var(--gray2); color: var(--mono-text); }
.topbar-workday-toggle {
  height: 34px;
  min-width: 116px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1.5px solid var(--gray2);
  background: var(--gray1);
  color: var(--gray4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s, transform 0.18s;
  white-space: nowrap;
}
.topbar-workday-toggle:hover {
  border-color: var(--gray3);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}
.topbar-workday-toggle.is-work {
  background: var(--gray4);
  border-color: var(--gray4);
  color: #fff;
}
.topbar-workday-toggle.is-off {
  background: #fff;
  border-color: var(--gray2);
  color: var(--gray4);
}
.topbar-workday-toggle.is-unset {
  background: var(--gray1);
  border-color: var(--gray2);
  color: var(--gray4);
}
.topbar-workday-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gray3);
  flex: 0 0 auto;
}
.topbar-workday-toggle.is-work .topbar-workday-dot { background: #fff; }
.topbar-workday-toggle.is-off .topbar-workday-dot { background: var(--gray4); }
.topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s;
  background: var(--gray1);
  position: relative;
}
.topbar-user:hover { background: var(--gray2); }
.topbar-avatar {
  width: 30px; height: 30px;
  background: linear-gradient(135deg, var(--mono-accent), var(--mono-accent-2));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; color: var(--mono-text);
}
.topbar-username { font-size: 13px; font-weight: 700; color: var(--mono-text); }
.topbar-dropdown {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray2);
  width: 160px;
  overflow: hidden;
  display: none;
  z-index: 300;
}
.topbar-dropdown.open { display: block; }
.topbar-dd-item {
  padding: 11px 16px;
  font-size: 13px; color: var(--gray4);
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; gap: 8px;
}
.topbar-dd-item:hover { background: var(--gray1); color: var(--mono-text); }
.topbar-dd-item.danger { color: var(--danger); }
.topbar-dd-item.danger:hover { background: rgba(239,68,68,0.05); }/* 설정 페이지 */

.settings-section {
  padding: 16px 0; border-bottom: 1px solid var(--gray2);
}
.settings-section:last-child { border-bottom: none; }
.settings-label {
  font-size: 14px; font-weight: 800; color: var(--mono-text); margin-bottom: 10px;
}
.settings-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.settings-desc { font-size: 12px; color: var(--gray3); }/* 설정 사이드바 네비게이션 */

.set-nav-item {
  padding: 10px 20px; font-size: 13px; font-weight: 600; color: var(--gray3);
  cursor: pointer; transition: all 0.15s; border-left: 3px solid transparent;
}
.set-nav-item:hover { background: var(--gray1); color: var(--mono-text); }
.set-nav-item.active {
  color: var(--primary); font-weight: 800; border-left-color: var(--primary);
  background: linear-gradient(90deg, rgba(59,130,246,0.06), transparent);
}
.set-field-label { font-size: 12px; font-weight: 600; color: var(--gray3); }
.set-input {
  border: 1.5px solid var(--gray2); border-radius: 8px; padding: 9px 12px;
  font-size: 13px; background: var(--white); color: var(--mono-text); box-sizing: border-box;
  font-family: inherit; width: 100%;
}
.set-input:focus { border-color: var(--primary); outline: none; }
.set-btn {
  background: rgba(0,0,0,0.05); color: var(--mono-text); border: none; border-radius: 8px;
  padding: 9px 22px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.set-btn:hover { opacity: 0.9; }
.set-btn-outline {
  background: var(--white); color: var(--primary); border: 1.5px solid var(--primary);
  border-radius: 8px; padding: 6px 14px; font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.set-theme-btn {
  padding: 10px 24px; border-radius: 10px; font-size: 13px; font-weight: 700;
  border: 1.5px solid var(--gray2); background: var(--white); color: var(--gray3);
  cursor: pointer; transition: all 0.15s;
}
.set-theme-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }/* 토글 스위치 */

.set-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.set-toggle input { opacity: 0; width: 0; height: 0; }
.set-toggle-slider {
  position: absolute; inset: 0; background: #cbd5e1; border-radius: 24px;
  cursor: pointer; transition: 0.2s;
}
.set-toggle-slider::before {
  content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: 0.2s;
}
.set-toggle input:checked + .set-toggle-slider { background: var(--primary); }
.set-toggle input:checked + .set-toggle-slider::before { transform: translateX(20px); }/* 서명 카드 */

.set-sign-card {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  background: var(--gray1); border: 1.5px solid var(--gray2); border-radius: 10px;
}
.set-sign-card img { max-width: 120px; max-height: 50px; border-radius: 4px; background: #fff; border: 1px solid var(--gray2); }

.theme-toggle-wrap { display: flex; gap: 6px; }
.theme-btn {
  padding: 8px 18px; border-radius: 8px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--gray2); background: var(--white); color: var(--gray3);
  cursor: pointer; transition: all 0.15s;
}
.theme-btn.active {
  background: rgba(0,0,0,0.05); color: var(--mono-text); border-color: var(--mono-text);
}/* ══════════════════════════════════════
   다크 테마 (전체)
══════════════════════════════════════ *//* 기본 배경/텍스트 — 메인영역은 사이드바보다 밝게 *//* 사이드바 — 메인영역보다 확실히 어둡게 *//* 상단바 — 사이드바보다 밝게, 메인영역과 동일 *//* 카드/페이지카드 *//* 입력 필드 *//* 버튼 기본 *//* 설정 페이지 *//* 알림 패널 *//* 문서 뷰어 *//* 결재함 *//* 일지(저널) 오버레이 - 서식 본문은 항상 밝게 (인쇄 서식) *//* 일지 서식 내부는 다크모드 무관 - 항상 밝은 모드 유지 (인쇄 서식) *//* CCP 모니터링 *//* 체크리스트 *//* 일지 작성 탭 *//* 공지사항 *//* HACCP 팀 관리 인포 박스 + 팀원 추가 버튼 *//* 공통 인라인 밝은 배경 오버라이드 *//* 홈 대시보드 *//* 다크모드 캘린더 *//* 원료수불 *//* 원료수불 — 재고 카드 *//* 원료수불 — 입출고 버튼 *//* 원료수불 — 원료 관리 모달 *//* 원료수불 — 폼 카드/기록 카드 *//* 원료수불 — 폼 입력 필드 *//* 생산일지 — 원료 행 *//* 생산일지 — CCP 버튼 *//* CCP 판정 버튼 다크모드 *//* CCP 로그 테이블 다크모드 *//* 토스트 *//* 업체 카드 & 티어 *//* 컨설턴트 그룹 헤더 (일지 현황 중첩 아코디언 상위) */

.acc-consultant-head { background: linear-gradient(135deg,#f8fafc,#eef2ff) !important; border-radius: 10px; padding: 12px 16px; }/* 날짜 이동 버튼 */

.ap-date-btn { padding:6px 10px; border:1px solid var(--gray2); border-radius:6px; background:var(--white); color:var(--mono-text); cursor:pointer; font-size:12px; }/* 데이터 관리 그리드 */

.dm-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.dm-card { background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:2px; padding:20px 24px; }
.dm-card-danger { border-color:rgba(127,29,29,0.2) !important; }
.dm-sec-title { font-size:10px; font-weight:700; color:#6E6E75; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:14px; }
.dm-sec-title.danger { color:#7f1d1d; }
.dm-btn { border:1px solid rgba(0,0,0,0.15); border-radius:2px; padding:9px 16px; font-size:11px; font-weight:700; letter-spacing:0.3px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:all 0.15s; }
.dm-btn-primary { background:#6E6E75; color:#fff; border-color:#6E6E75; }
.dm-btn-primary:hover { background:#8A8A92; border-color:#8A8A92; }
.dm-btn-outline { background:transparent; color:#444444; }
.dm-btn-outline:hover { background:#FAFAF8; border-color:rgba(0,0,0,0.3); }
.dm-btn-mono { background:transparent; color:#444444; }
.dm-btn-mono:hover { background:#FAFAF8; border-color:rgba(0,0,0,0.3); }
.dm-btn-mono-outline { background:transparent; color:#444444; }
.dm-btn-mono-outline:hover { background:#FAFAF8; border-color:rgba(0,0,0,0.3); }
.dm-btn-danger-outline { background:transparent; color:#7f1d1d; border-color:rgba(127,29,29,0.3); }
.dm-btn-danger-outline:hover { background:rgba(127,29,29,0.04); border-color:rgba(127,29,29,0.5); }
.dm-btn-danger { background:#7f1d1d; color:#fff; border-color:#7f1d1d; }
.dm-btn-danger:hover { background:#991b1b; border-color:#991b1b; }
.timefix-preset { padding:6px 14px; border:1px solid rgba(0,0,0,0.15); border-radius:2px; background:#fff; color:#444444; font-size:11px; font-weight:700; letter-spacing:0.3px; cursor:pointer; transition:all 0.15s; }
.timefix-preset:hover:not(.active) { background:#FAFAF8; border-color:rgba(0,0,0,0.3); }
.timefix-preset.active { background:#6E6E75; color:#fff; border-color:#6E6E75; }
.timefix-card { background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:2px; padding:14px 18px; margin-bottom:8px; }
.timefix-card-title { font-size:13px; font-weight:700; color:#444444; margin-bottom:4px; }
.timefix-card-meta { font-size:11px; color:#6E6E75; }
.timefix-btn { margin-top:10px; padding:6px 14px; background:#6E6E75; color:#fff; border:1px solid #6E6E75; border-radius:2px; font-size:11px; font-weight:700; letter-spacing:0.3px; cursor:pointer; }
.timefix-btn:hover { background:#8A8A92; border-color:#8A8A92; }/* tier-badge.프리미엄 다크모드 제거 — tier는 소규모/일반만 *//* HWPX/PDF 버튼 *//* CCP 테이블 다크모드 *//* 테이블 hover 다크모드 - 글자 가독성 보장 *//* 모달 *//* 로그인 화면 다크모드 */
.login-logo-dark-wrap { display: none; }/* 다크모드 관리자 topbar - 모노 테마 *//* 관리자 대시보드 다크모드 *//* ★ 다크모드: 컨설턴트 그룹 헤더 *//* ★ 다크모드: 컨설턴트 현황 카드 *//* ★ 다크모드: 업체카드 *//* ★ 다크모드: 전체 펼치기/접기 버튼 *//* ★ 다크모드: 통계 카드 아이콘 배경 *//* ★ 다크모드: acc-company 내부 요소 *//* ★ 다크모드: 모달 *//* ── 접속 로그 다크모드 ── */

.acc-log-group-wrap { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 2px; margin-bottom: 20px; overflow: hidden; }
.acc-log-group-hd { background: #fff; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.08); }
.acc-log-group-hd-name { font-size: 13px; font-weight: 800; color: #444444; letter-spacing: -0.01em; }
.acc-log-group-hd-count { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #6E6E75; }
.acc-log-active-badge { display: inline-block; padding: 1px 7px; border-radius: 2px; font-size: 9px; font-weight: 700; letter-spacing: 0.5px; background: transparent; color: #166534; border: 1px solid rgba(22,101,52,0.3); margin-left: 6px; vertical-align: middle; }
.acc-log-edit-btn { padding: 4px 10px; font-size: 11px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.15); background: transparent; color: #444444; cursor: pointer; font-weight: 700; }
.acc-log-edit-btn:hover { background: #FAFAF8; }/* 관리자 복귀 버튼 (사용자 화면) */

.admin-return-btn {
  display: none;
  position: fixed; bottom: 20px; right: 20px; z-index: 99997;
  padding: 10px 18px; border-radius: 10px; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--mono-accent), var(--mono-accent-2));
  color: #fff; font-size: 12px; font-weight: 700;
  box-shadow: 0 4px 16px rgba(110,110,117,0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}
.admin-return-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(110,110,117,0.4); }/* 플로팅 테마 토글 버튼 */

.floating-theme-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 99998;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  transition: background 0.2s, box-shadow 0.2s;
}
.floating-theme-btn:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.floating-theme-btn .ft-icon-sun { display: none; color: #f59e0b; }
.floating-theme-btn .ft-icon-moon { display: block; color: #1e3550; }/* 알림 벨 */

.noti-bell-wrap { position: relative; }
.noti-badge {
  position: absolute; top: 2px; right: 2px;
  background: #ef4444; color: #fff;
  font-size: 9px; font-weight: 800;
  min-width: 16px; height: 16px;
  border-radius: 8px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.noti-panel {
  position: absolute; top: calc(100% + 8px); right: 40px;
  width: 340px; max-height: 440px;
  background: var(--white); border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  border: 1px solid var(--gray2);
  display: none; z-index: 400;
  overflow: hidden;
}
.noti-panel.open { display: block; }
.noti-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--gray2);
}
.noti-panel-title { font-size: 14px; font-weight: 800; color: var(--mono-text); }
.noti-clear-btn {
  background: none; border: none; font-size: 11px;
  color: var(--primary); cursor: pointer; font-weight: 600;
}
.noti-clear-btn:hover { text-decoration: underline; }
.noti-panel-body {
  max-height: 370px; overflow-y: auto; padding: 6px 0;
}
.noti-empty {
  text-align: center; padding: 40px 20px;
  color: #6E6E75; font-size: 12px; letter-spacing: 0.3px;
}
.noti-item {
  display: flex; gap: 10px; padding: 11px 14px;
  cursor: pointer; transition: background 0.12s;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.noti-item:hover { background: #FAFAF8; }
.noti-item.unread { background: #fff; border-left: 2px solid #444444; padding-left: 12px; }
.noti-item.unread:hover { background: #FAFAF8; }
.noti-item-icon {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; flex-shrink: 0; margin-top: 6px;
  font-size: 0;
}
.noti-item-icon.save { background: #444444; }
.noti-item-icon.approve { background: #166534; }
.noti-item-icon.reject { background: #7f1d1d; }
.noti-item-icon.warn { background: #92400E; }
.noti-item-body { flex: 1; min-width: 0; }
.noti-item-msg {
  font-size: 12px; color: var(--gray4); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.noti-item-msg strong { color: var(--mono-text); font-weight: 700; }
.noti-item-time {
  font-size: 10px; color: #9ca3af; margin-top: 3px;
}/* 콘텐츠 */

.content {
  padding: 24px;
  flex: 1;
}
.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}
/* 이전/다음 달 칸은 비워둠 (그리드만 차지 — 보더는 유지해서 1주차 첫 빈칸들도 행 라인 끊기지 않게) */
.cal-cell-empty {
  background: transparent !important;
  cursor: default !important;
  pointer-events: none;
  /* border 는 일반 .cal-cell 의 우/하단 보더 그대로 사용 (visual grid 유지) */
}
.cal-cell-empty * { display: none !important; }
/* 홈 캘린더 카드: 일지보드보다 더 크게 — 메인 시각 요소 */
#mainCalCard { padding: 24px 28px; }
#mainCalCard .cal-grid { min-height: 600px; }
#mainCalCard .cal-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}
#mainCalCard .cal-body > * {
  min-height: 110px;
  padding: 10px 12px;
}
#mainCalCard .cal-month {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
#mainCalCard .cal-day-label {
  font-size: 10px;
  font-weight: 700;
  padding: 8px 0 6px;
  letter-spacing: 0.04em;
}
#mainCalCard .cal-date {
  font-size: 11px;
  font-weight: 600;
  width: 20px; height: 20px;
}
#mainCalCard .cal-date.today-num {
  background: rgba(0,0,0,0.78);
  color: var(--white);
  font-weight: 700;
}
/* 카드 공통 */

.page-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  box-sizing: border-box;
}
.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--gray2);
}
.card-title {
  font-size: 14px; font-weight: 800; color: var(--mono-text);
  display: flex; align-items: center; gap: 8px;
}
.card-title-icon {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--mono-accent), var(--mono-accent-2));
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.card-title-icon svg { width: 15px; height: 15px; color: var(--mono-text); }
.card-body { padding: 16px 20px; }/* ══════════════════════════════════════
   ④ HACCP 캘린더
══════════════════════════════════════ */

.cal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--gray2);
}
.cal-month { font-size: 18px; font-weight: 900; color: var(--mono-text); flex: 1; }
.cal-nav-btn {
  width: 30px; height: 30px;
  background: var(--gray1);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--mono-text);
}
.cal-nav-btn:hover { background: var(--mono-accent); color: var(--white); }
.cal-view-tabs {
  display: flex;
  gap: 4px;
  background: var(--gray1);
  border-radius: 8px;
  padding: 3px;
}
.cal-view-tab {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px; font-weight: 700;
  color: var(--gray3);
  cursor: pointer;
  transition: all 0.15s;
}
.cal-view-tab.active {
  background: var(--white);
  color: var(--mono-text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.cal-view-tabs { display: none !important; }
.cal-today-btn {
  padding: 5px 14px;
  background: var(--gray1);
  color: rgba(0,0,0,0.72);
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 2px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s;
}
.cal-today-btn:hover { background: var(--ink-soft); border-color: var(--ink-soft); }/* 캘린더 그리드 */

.cal-grid { padding: 0; }
.cal-days-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--gray2);
}
.cal-day-label {
  text-align: center;
  padding: 10px 0 8px;
  font-size: 11px; font-weight: 800;
  color: var(--gray3);
  letter-spacing: 0.05em;
}
.cal-day-label.sun { color: #ef4444; }
.cal-day-label.sat { color: #3b82f6; }

.cal-body { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell {
  min-height: 120px;
  border-right: 1px solid var(--gray2);
  border-bottom: 1px solid var(--gray2);
  padding: 6px 5px;
  position: relative;
  cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s;
}
.cal-cell:hover {
  background: rgba(110,110,117,0.07);
  box-shadow: inset 0 0 0 1px rgba(110,110,117,0.2);
  z-index: 1;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell.today {
  background: rgba(110,110,117,0.08);
  box-shadow: inset 0 0 0 1.5px rgba(110,110,117,0.35);
}
.cal-date {
  font-size: 12px; font-weight: 700;
  color: var(--mono-text);
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  margin-bottom: 3px;
}
.cal-date.today-num {
  background: linear-gradient(135deg, var(--mono-accent), var(--mono-accent-2));
  color: var(--mono-text);
  font-weight: 900;
}
.cal-date.other-month { color: var(--gray2); }
.cal-date.sun-num { color: #ef4444; }
.cal-date.sat-num { color: #3b82f6; }
.cal-event {
  font-size: 10px; font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 3px;
}
.cal-event.type-ccp {
  background: rgba(59,130,246,0.12);
  color: #1d4ed8;
}
.cal-event.type-haccp {
  background: rgba(110,110,117,0.12);
  color: #92650a;
}
.cal-event.type-check {
  background: rgba(34,197,94,0.12);
  color: #15803d;
}
.cal-event.type-warn {
  background: rgba(239,68,68,0.12);
  color: #b91c1c;
}/* ══════════════════════════════════════
   ⑤ 오른쪽 패널 위젯
══════════════════════════════════════ */

.right-panel { display: flex; flex-direction: column; gap: 16px; }/* 프로필 카드 */

.profile-card { text-align: center; }
.profile-avatar-wrap {
  position: relative;
  width: 72px; height: 72px;
  margin: 0 auto 12px;
}
.profile-avatar {
  width: 72px; height: 72px;
  background: rgba(0,0,0,0.08);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--gray2);
}
.profile-avatar-inner {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(110,110,117,0.15), rgba(244,166,29,0.1));
  display: flex; align-items: center; justify-content: center;
}
.profile-ring {
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px dashed rgba(110,110,117,0.4);
}

.profile-name { font-size: 16px; font-weight: 900; color: var(--mono-text); margin-bottom: 2px; }
.profile-role {
  display: inline-block;
  font-size: 10.5px; font-weight: 700;
  background: linear-gradient(135deg, var(--mono-accent), var(--mono-accent-2));
  color: var(--mono-text);
  padding: 3px 10px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.profile-company {
  font-size: 11px; color: var(--gray3);
  margin-top: 4px; margin-bottom: 2px;
}
.profile-edit-btn {
  font-size: 11.5px; color: var(--mono-accent);
  cursor: pointer;
  font-weight: 600;
  transition: color 0.15s;
  display: block; margin-bottom: 12px;
}
.profile-edit-btn:hover { color: var(--mono-accent-2); }
.profile-meta-row {
  display: flex;
  gap: 0;
  margin-top: 2px;
  border-top: 1px solid var(--gray2);
}
.profile-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  gap: 3px;
}
.profile-meta + .profile-meta {
  border-left: 1px solid var(--gray2);
}
.profile-meta-label {
  font-size: 10px;
  color: var(--gray3);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.profile-meta-val {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--mono-text);
}
.profile-meta-val--green { color: #10b981; }/* 결재함 버튼 */

.btn-approval {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #e07b35, #f09040);
  color: var(--white);
  border-radius: 12px;
  font-size: 15px; font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 16px rgba(224,123,53,0.35);
  transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-approval:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(224,123,53,0.45); }
.approval-count {
  background: rgba(255,255,255,0.25);
  border-radius: 10px;
  font-size: 11px; font-weight: 900;
  padding: 1px 7px;
}/* 공지사항 */

.notice-list { display: flex; flex-direction: column; }
.notice-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--gray2);
  cursor: pointer;
  transition: all 0.15s;
}
.notice-item:last-child { border-bottom: none; padding-bottom: 0; }
.notice-item:hover .notice-title { color: var(--mono-accent); }
.notice-avatar {
  width: 30px; height: 30px;
  background: linear-gradient(135deg, var(--mono-accent), var(--mono-accent-2));
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 11px; font-weight: 900; color: var(--mono-text);
}
.notice-content { flex: 1; min-width: 0; }
.notice-title {
  font-size: 12.5px; font-weight: 700; color: var(--mono-text);
  margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.15s;
}
.notice-date { font-size: 11px; color: var(--gray3); }
.notice-more {
  text-align: center;
  padding: 10px 0 2px;
  font-size: 12px; color: var(--mono-accent);
  font-weight: 700;
  cursor: pointer;
}
.notice-more:hover { color: var(--mono-accent-2); }/* 시계 위젯 */

.clock-widget {
  background: linear-gradient(135deg, #444444 0%, #112640 100%);
  border-radius: var(--radius);
  padding: 16px 20px;
  text-align: right;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  border: 1px solid rgba(110,110,117,0.15);
}
.clock-date { font-size: 12px; color: #444444; font-weight: 600; margin-bottom: 4px; letter-spacing: 0.02em; }
.clock-time {
  font-size: 28px; font-weight: 900; color: #ffffff;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: 0.04em;
}/* 다크모드에서도 시계는 항상 동일한 다크 그레이 배경 유지 *//* ══════════════════════════════════════
   모바일 사이드바 오버레이
══════════════════════════════════════ */

.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 199;
}
.sidebar-overlay.show { display: block; }/* ══════════════════════════════════════
   반응형 (앱 레이아웃)
══════════════════════════════════════ */

@media (max-width: 1024px) {
  .content-grid { grid-template-columns: 1fr 260px; }
}
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-area { margin-left: 0; }
  .topbar-hamburger { display: flex; }
  .content-grid { grid-template-columns: 1fr; }
  .right-panel { order: -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .content { padding: 16px; }
}
@media (max-width: 480px) {
  .right-panel { grid-template-columns: 1fr; }
  .cal-cell { min-height: 64px; }
  .cal-event { display: none; }
  .cal-cell.has-event::after {
    content: ''; display: block; width: 5px; height: 5px;
    background: var(--mono-accent); border-radius: 50%; margin: 1px auto 0;
  }
}/* ══════════════════════════════════════
   반응형 (로그인)
══════════════════════════════════════ */

@media (max-width: 480px) {
  .login-box, .admin-login-box { margin: 16px; padding: 36px 24px 32px; }
  .pin-input { width: 44px; height: 54px; font-size: 22px; }
  .pin-inputs { gap: 7px; }
  .login-logo-icon { width: 60px; height: 60px; }
  .login-logo-title { font-size: 19px; }
}/* ══════════════════════════════════════
   콘텐츠 섹션 전환
══════════════════════════════════════ */

.content-section { display: none; padding: 0 16px; box-sizing: border-box; }
.content-section.active { display: block; }/* ══════════════════════════════════════
   CCP 공통 페이지 레이아웃
══════════════════════════════════════ */

.ccp-page {
  padding: 28px 32px;
  max-width: 1200px;
  margin: 0 auto;
}
.ccp-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.ccp-page-title {
  font-size: 20px;
  font-weight: 900;
  color: var(--mono-text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ccp-page-title-icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--mono-accent), var(--mono-accent-2));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.btn-ccp-add {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--mono-accent), var(--mono-accent-2));
  color: var(--mono-text);
  border-radius: 10px;
  font-size: 13px; font-weight: 700;
  transition: opacity 0.2s;
}
.btn-ccp-add:hover { opacity: 0.85; }/* ── CCP 정보 테이블 ── */

.ccp-table-wrap {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.ccp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ccp-table thead tr { background: rgba(0,0,0,0.05); color: var(--mono-text); }
.ccp-table thead th {
  padding: 13px 14px;
  text-align: left;
  font-weight: 700; font-size: 12px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.ccp-table tbody tr {
  border-bottom: 1px solid var(--gray2);
  transition: background 0.15s;
}
.ccp-table tbody tr:last-child { border-bottom: none; }
.ccp-table tbody tr:hover { background: #f7f6f2; }
.ccp-table td { padding: 13px 14px; color: var(--gray4); vertical-align: middle; }
.ccp-table td:first-child { color: var(--mono-text); font-weight: 700; }
.ccp-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px; font-weight: 700;
}
.ccp-badge.bio   { background: #fef3c7; color: #92400e; }
.ccp-badge.phys  { background: #dbeafe; color: #1e40af; }
.ccp-badge.chem  { background: #f0fdf4; color: #166534; }
.ccp-badge.micro { background: #fce7f3; color: #9d174d; }
.ccp-act-btns { display: flex; gap: 6px; }
.ccp-act-btn {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.ccp-act-btn.edit  { background: #eff6ff; color: #2563eb; }
.ccp-act-btn.edit:hover  { background: #dbeafe; }
.ccp-act-btn.del   { background: #fff5f5; color: var(--danger); }
.ccp-act-btn.del:hover   { background: #fee2e2; }
.ccp-empty {
  text-align: center; padding: 48px;
  color: var(--gray3); font-size: 14px;
}
.ccp-empty svg { opacity: 0.3; margin-bottom: 10px; }/* ── CCP 모달 ── */

.ccp-modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9900;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ccp-modal-overlay.open { display: flex; }
.ccp-modal {
  background: var(--white);
  border-radius: 20px;
  width: 100%; max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.ccp-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--gray2);
}
.ccp-modal-title {
  font-size: 16px; font-weight: 900; color: var(--mono-text);
  display: flex; align-items: center; gap: 8px;
}
.ccp-modal-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray3); cursor: pointer;
  transition: background 0.15s;
}
.ccp-modal-close:hover { background: var(--gray2); color: var(--mono-text); }
.ccp-modal-body { padding: 22px 24px; }
.ccp-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.ccp-form-row.full { grid-template-columns: 1fr; }
.ccp-form-group { display: flex; flex-direction: column; gap: 5px; }
.ccp-form-group label {
  font-size: 12px; font-weight: 700; color: var(--mono-text);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.ccp-form-group input,
.ccp-form-group select,
.ccp-form-group textarea {
  padding: 10px 13px;
  border: 1.5px solid var(--gray2);
  border-radius: 10px;
  font-size: 13px; color: var(--mono-text);
  background: var(--gray1);
  transition: border-color 0.2s;
  resize: vertical;
}
.ccp-form-group input:focus,
.ccp-form-group select:focus,
.ccp-form-group textarea:focus { border-color: var(--mono-accent); background: var(--white); }
.ccp-modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--gray2);
}
.btn-ccp-cancel {
  padding: 10px 20px;
  background: var(--gray2); color: var(--mono-text);
  border-radius: 10px; font-size: 13px; font-weight: 700;
  transition: background 0.15s;
}
.btn-ccp-cancel:hover { background: var(--gray3); color: var(--white); }
.btn-ccp-save {
  padding: 10px 24px;
  background: linear-gradient(135deg, var(--mono-accent), var(--mono-accent-2));
  color: var(--mono-text);
  border-radius: 10px; font-size: 13px; font-weight: 700;
  transition: opacity 0.2s;
}
.btn-ccp-save:hover { opacity: 0.85; }/* ── CCP 일지 ── */

.ccp-log-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  align-items: start;
}
.ccp-log-form-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid var(--gray2);
  overflow: hidden;
}
.ccp-log-form-head {
  background: rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.12);
  padding: 16px 20px;
  color: var(--white);
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.ccp-log-form-body { padding: 18px 20px; }
.ccp-log-form-body .ccp-form-group { margin-bottom: 12px; }
.ccp-judge-btns { display: flex; gap: 8px; }
.ccp-judge-btn {
  flex: 1; padding: 9px 0;
  border-radius: 10px;
  font-size: 13px; font-weight: 700;
  border: 2px solid var(--gray2);
  color: var(--gray3);
  background: var(--gray1);
  transition: all 0.15s; cursor: pointer;
}
.ccp-judge-btn.pass.active { background: #dcfce7; border-color: var(--success); color: #166534; }
.ccp-judge-btn.fail.active { background: #fee2e2; border-color: var(--danger);  color: #991b1b; }
.ccp-log-submit {
  width: 100%; padding: 12px;
  background: linear-gradient(135deg, var(--mono-accent), var(--mono-accent-2));
  color: var(--mono-text); border-radius: 10px;
  font-size: 14px; font-weight: 700;
  margin-top: 16px; cursor: pointer;
  transition: opacity 0.2s;
}
.ccp-log-submit:hover { opacity: 0.85; }
.ccp-log-records-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid var(--gray2);
  overflow: hidden;
}
.ccp-log-records-head {
  padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--gray2);
  flex-wrap: wrap; gap: 10px;
}
.ccp-log-records-title { font-size: 15px; font-weight: 900; color: var(--mono-text); }
.ccp-log-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ccp-log-filter input,
.ccp-log-filter select {
  padding: 7px 10px;
  border: 1.5px solid var(--gray2);
  border-radius: 8px;
  font-size: 12px; color: var(--mono-text);
  background: var(--gray1);
}
.ccp-log-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ccp-log-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 560px; }
.ccp-log-table thead tr { background: rgba(0,0,0,0.05); color: var(--mono-text); }
.ccp-log-table thead th {
  padding: 11px 13px;
  text-align: left; font-weight: 700;
  white-space: nowrap;
}
.ccp-log-table tbody tr {
  border-bottom: 1px solid var(--gray2);
  transition: background 0.15s;
}
.ccp-log-table tbody tr:last-child { border-bottom: none; }
.ccp-log-table tbody tr:hover { background: #f7f6f2; }
.ccp-log-table td { padding: 11px 13px; color: var(--gray4); vertical-align: middle; }
.judge-pass { display: inline-flex; align-items: center; gap: 4px; color: #166534; font-weight: 700; }
.judge-fail { display: inline-flex; align-items: center; gap: 4px; color: #991b1b; font-weight: 700; }
.ccp-log-del {
  width: 26px; height: 26px;
  border-radius: 6px; background: #fff5f5; color: var(--danger);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s;
}
.ccp-log-del:hover { background: #fee2e2; }
.ccp-log-pagination {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 14px;
  border-top: 1px solid var(--gray2);
}
.ccp-pg-btn {
  width: 30px; height: 30px;
  border-radius: 8px; cursor: pointer;
  font-size: 12px; font-weight: 700;
  background: var(--gray1); color: var(--mono-text);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.ccp-pg-btn.active { background: var(--mono-accent); color: var(--mono-text); }
.ccp-pg-btn:hover:not(.active) { background: var(--gray2); }

@media (max-width: 900px) {
  .ccp-page { padding: 20px 16px; }
  .ccp-log-layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ccp-form-row { grid-template-columns: 1fr; }
  .ccp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ccp-table { font-size: 12px; min-width: 560px; }
}/* ══════════════════════════════════════
   HACCP 점검표 스타일
══════════════════════════════════════ */

.chk-page { padding: 28px 32px; max-width: 1100px; margin: 0 auto; }/* 탭 */

.chk-tabs {
  display: flex; gap: 4px;
  background: var(--white);
  border-radius: 12px;
  padding: 5px;
  box-shadow: var(--shadow);
  margin-bottom: 22px;
  width: fit-content;
}
.chk-tab {
  padding: 9px 22px;
  border-radius: 9px;
  font-size: 13px; font-weight: 700;
  color: var(--gray3);
  cursor: pointer;
  transition: all 0.2s;
  display: flex; align-items: center; gap: 7px;
}
.chk-tab.active { background: rgba(0,0,0,0.05); color: var(--mono-text); }
.chk-tab:hover:not(.active) { background: var(--gray2); color: var(--mono-text); }/* 새 점검 탭 */

.chk-new-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 20px;
  align-items: start;
}
.chk-form-area { display: flex; flex-direction: column; gap: 16px; }/* 점검 기본 정보 카드 */

.chk-info-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
.chk-info-field { display: flex; flex-direction: column; gap: 5px; }
.chk-info-field label {
  font-size: 11px; font-weight: 700;
  color: var(--mono-text); text-transform: uppercase; letter-spacing: 0.4px;
}
.chk-info-field input,
.chk-info-field select {
  padding: 9px 12px;
  border: 1.5px solid var(--gray2);
  border-radius: 9px;
  font-size: 13px; color: var(--mono-text);
  background: var(--gray1);
  transition: border-color 0.2s;
}
.chk-info-field input:focus,
.chk-info-field select:focus { border-color: var(--mono-accent); background: var(--white); }/* 아코디언 */

.chk-accord {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.chk-accord-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  cursor: pointer;
  border-bottom: 1px solid var(--gray2);
  transition: background 0.15s;
  user-select: none;
}
.chk-accord-head:hover { background: #f7f6f2; }
.chk-accord-head.open { background: #f0f4ff; }
.chk-accord-left {
  display: flex; align-items: center; gap: 10px;
}
.chk-accord-cat-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.chk-accord-cat-name { font-size: 14px; font-weight: 700; color: var(--mono-text); }
.chk-accord-stat {
  display: flex; align-items: center; gap: 8px;
}
.chk-stat-chip {
  font-size: 11px; font-weight: 700;
  padding: 2px 9px; border-radius: 10px;
}
.chk-stat-chip.pass  { background: #dcfce7; color: #166534; }
.chk-stat-chip.fail  { background: #fee2e2; color: #991b1b; }
.chk-stat-chip.na    { background: #f3f4f6; color: #6b7280; }
.chk-accord-arrow {
  transition: transform 0.2s;
  color: var(--gray3);
}
.chk-accord-head.open .chk-accord-arrow { transform: rotate(180deg); }
.chk-accord-body { display: none; }
.chk-accord-head.open + .chk-accord-body { display: block; }

.chk-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--gray2);
}
.chk-item:last-child { border-bottom: none; }
.chk-item-num {
  min-width: 22px; height: 22px;
  background: var(--gray2);
  border-radius: 50%;
  font-size: 11px; font-weight: 700; color: var(--mono-text);
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.chk-item-content { flex: 1; }
.chk-item-text { font-size: 13px; color: var(--mono-text); margin-bottom: 8px; }
.chk-opt-btns { display: flex; gap: 6px; }
.chk-opt-btn {
  padding: 5px 14px;
  border-radius: 8px;
  font-size: 12px; font-weight: 700;
  border: 2px solid var(--gray2);
  color: var(--gray3);
  background: var(--gray1);
  cursor: pointer;
  transition: all 0.15s;
}
.chk-opt-btn.pass.sel { background: #dcfce7; border-color: var(--success); color: #166534; }
.chk-opt-btn.fail.sel { background: #fee2e2; border-color: var(--danger);  color: #991b1b; }
.chk-opt-btn.na.sel   { background: #f3f4f6; border-color: #9ca3af;       color: #374151; }
.chk-remark {
  margin-top: 7px;
  width: 100%;
  padding: 8px 11px;
  border: 1.5px solid #fca5a5;
  border-radius: 8px;
  font-size: 12px; color: var(--mono-text);
  background: #fff5f5;
  resize: none;
  display: none;
}
.chk-remark.show { display: block; }/* 오른쪽 점수 요약 카드 */

.chk-score-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: sticky; top: 16px;
}
.chk-score-head {
  background: rgba(0,0,0,0.05); color: var(--mono-text);
  padding: 14px 18px;
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.chk-score-body { padding: 18px; }
.chk-score-ring-wrap {
  display: flex; justify-content: center;
  margin-bottom: 16px;
}
.chk-score-ring {
  position: relative;
  width: 100px; height: 100px;
}
.chk-score-ring svg { transform: rotate(-90deg); }
.chk-ring-bg    { fill: none; stroke: var(--gray2); stroke-width: 10; }
.chk-ring-fill  { fill: none; stroke: var(--mono-accent);  stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 0.5s; }
.chk-ring-fail  { fill: none; stroke: var(--danger); stroke-width: 10; stroke-linecap: round; }
.chk-score-pct {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.chk-score-pct-num { font-size: 22px; font-weight: 900; color: var(--mono-text); }
.chk-score-pct-label { font-size: 10px; color: var(--gray3); }
.chk-score-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.chk-score-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px;
}
.chk-score-row-label { color: var(--gray4); display: flex; align-items: center; gap: 6px; }
.chk-score-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.chk-score-val { font-weight: 700; color: var(--mono-text); }
.chk-save-btn {
  width: 100%; padding: 12px;
  background: linear-gradient(135deg, var(--mono-accent), var(--mono-accent-2));
  color: var(--mono-text); border-radius: 10px;
  font-size: 14px; font-weight: 700;
  cursor: pointer; transition: opacity 0.2s;
}
.chk-save-btn:hover { opacity: 0.85; }/* 점검 이력 탭 */

.chk-hist-wrap {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.chk-hist-head {
  padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--gray2);
}
.chk-hist-title { font-size: 15px; font-weight: 900; color: var(--mono-text); }
.chk-hist-filter { display: flex; gap: 8px; }
.chk-hist-filter select,
.chk-hist-filter input {
  padding: 7px 10px;
  border: 1.5px solid var(--gray2);
  border-radius: 8px;
  font-size: 12px; color: var(--mono-text);
  background: var(--gray1);
}
.chk-hist-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.chk-hist-table thead tr { background: rgba(0,0,0,0.05); color: var(--mono-text); }
.chk-hist-table thead th {
  padding: 12px 16px; text-align: left;
  font-weight: 700; white-space: nowrap;
}
.chk-hist-table tbody tr {
  border-bottom: 1px solid var(--gray2);
  transition: background 0.15s; cursor: pointer;
}
.chk-hist-table tbody tr:hover { background: #f7f6f2; }
.chk-hist-table td { padding: 12px 16px; color: var(--gray4); vertical-align: middle; }
.chk-rate-bar {
  display: flex; align-items: center; gap: 8px;
}
.chk-rate-track {
  flex: 1; height: 6px; background: var(--gray2); border-radius: 10px; overflow: hidden;
}
.chk-rate-fill { height: 100%; border-radius: 10px; transition: width 0.4s; }
.chk-type-chip {
  display: inline-block; padding: 3px 10px;
  border-radius: 10px; font-size: 11px; font-weight: 700;
}
.chk-type-chip.daily  { background: #dbeafe; color: #1e40af; }
.chk-type-chip.weekly { background: #fef3c7; color: #92400e; }
.chk-type-chip.monthly{ background: #f0fdf4; color: #166534; }/* 상세보기 모달 */

.chk-detail-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9900;
  align-items: center; justify-content: center;
  padding: 20px;
}
.chk-detail-modal.open { display: flex; }
.chk-detail-box {
  background: var(--white);
  border-radius: 20px;
  width: 100%; max-width: 680px;
  max-height: 88vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.chk-detail-head {
  background: #fff; color: #444444;
  padding: 18px 24px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  border-radius: 2px 2px 0 0;
}
.chk-detail-title { font-size: 15px; font-weight: 900; letter-spacing: -0.01em; color: #444444; }
.chk-detail-close {
  width: 30px; height: 30px; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #6E6E75;
  transition: all 0.15s;
}
.chk-detail-close:hover { background: rgba(0,0,0,0.05); color: #444444; }
.chk-detail-body { padding: 22px 24px; }
.chk-detail-meta {
  display: flex; gap: 20px; flex-wrap: wrap;
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--gray2);
}
.chk-detail-meta-item { display: flex; flex-direction: column; gap: 3px; }
.chk-detail-meta-label { font-size: 11px; color: var(--gray3); text-transform: uppercase; }
.chk-detail-meta-val { font-size: 14px; font-weight: 700; color: var(--mono-text); }
.chk-detail-cat { margin-bottom: 16px; }
.chk-detail-cat-name {
  font-size: 13px; font-weight: 900; color: var(--mono-text);
  margin-bottom: 8px; padding: 8px 12px;
  background: var(--gray1); border-radius: 8px;
  display: flex; align-items: center; gap: 6px;
}
.chk-detail-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--gray2);
  font-size: 12px;
}
.chk-detail-row:last-child { border-bottom: none; }
.chk-detail-row-text { flex: 1; color: var(--gray4); padding-top: 1px; }
.chk-detail-result {
  min-width: 52px;
  font-weight: 700; font-size: 12px;
  text-align: center;
}
.chk-detail-remark {
  font-size: 11px; color: #991b1b;
  margin-top: 3px;
}
@media (max-width: 900px) {
  .chk-page { padding: 20px 16px; }
  .chk-new-layout { grid-template-columns: 1fr; }
  .chk-score-card { position: static; }
  .chk-info-card { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .chk-info-card { grid-template-columns: 1fr; }
  .chk-tabs { width: 100%; }
  .chk-tab { flex: 1; justify-content: center; }
}/* ══════════════════════════════════════
   원료수불/생산일지 스타일
══════════════════════════════════════ */

.raw-stock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.raw-stock-card {
  background: var(--white); border-radius: 14px;
  padding: 14px 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid var(--gray2); border-left: 4px solid var(--mono-accent); transition: transform 0.15s;
}
.raw-stock-card:hover { transform: translateY(-2px); }
.raw-stock-card.low   { border-left-color: var(--danger); }
.raw-stock-card.empty { border-left-color: #9ca3af; }
.raw-stock-name { font-size: 12px; font-weight: 700; color: var(--mono-text); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.raw-stock-qty  { font-size: 24px; font-weight: 900; color: var(--mono-text); line-height: 1; }
.raw-stock-unit { font-size: 11px; color: var(--gray3); margin-top: 2px; }
.raw-stock-badge { font-size: 10px; margin-top: 6px; font-weight: 700; }
.raw-stock-badge.ok  { color: var(--success); }
.raw-stock-badge.low { color: var(--danger); }
.raw-header-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; flex-wrap: wrap; gap: 10px;
}
.raw-header-title { font-size: 15px; font-weight: 900; color: var(--mono-text); }
.btn-raw-manage {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; background: rgba(0,0,0,0.05); color: var(--mono-text); border: 1px solid rgba(0,0,0,0.18);
  border-radius: 9px; font-size: 12px; font-weight: 700;
  transition: opacity 0.2s; cursor: pointer;
}
.btn-raw-manage:hover { opacity: 0.8; }
.raw-type-toggle { display: flex; gap: 6px; }
.raw-type-btn {
  flex: 1; padding: 9px 0; border-radius: 9px;
  font-size: 13px; font-weight: 700;
  border: 2px solid var(--gray2); color: var(--gray3);
  background: var(--gray1); cursor: pointer; transition: all 0.15s;
}
.raw-type-btn.in.sel  { background: #dbeafe; border-color: #2563eb; color: #1e40af; }
.raw-type-btn.out.sel { background: #fef3c7; border-color: var(--mono-accent); color: #92400e; }
.raw-in-badge  { color: #1e40af; font-weight: 700; font-size: 12px; }
.raw-out-badge { color: #92400e; font-weight: 700; font-size: 12px; }
.prod-mat-row {
  display: grid; grid-template-columns: 1fr 130px 32px;
  gap: 8px; align-items: center; margin-bottom: 8px;
}
.prod-mat-row select,
.prod-mat-row input {
  padding: 10px 12px; border: 1.5px solid var(--gray2);
  border-radius: 9px; font-size: 14px; color: var(--mono-text);
  background: var(--white);
}
.prod-mat-row .raw-input-wrap {
  min-width: 0;
}
.prod-mat-row .raw-input-wrap input {
  width: 70px; text-align: center; font-weight: 700;
}
.prod-mat-del {
  width: 32px; height: 32px; border-radius: 8px;
  background: #fff5f5; color: var(--danger);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s;
}
.prod-mat-del:hover { background: #fee2e2; }
.btn-add-mat {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: var(--mono-accent);
  background: none; cursor: pointer; margin-top: 4px; padding: 4px 0;
}
.prod-ccp-row { display: flex; gap: 10px; }
.prod-ccp-btn {
  flex: 1; padding: 8px 0; border-radius: 9px;
  font-size: 12px; font-weight: 700;
  border: 2px solid var(--gray2); color: var(--gray3);
  background: var(--gray1); cursor: pointer; transition: all 0.15s;
}
.prod-ccp-btn.ok.sel   { background: #dcfce7; border-color: var(--success); color: #166534; }
.prod-ccp-btn.fail.sel { background: #fee2e2; border-color: var(--danger);  color: #991b1b; }
.raw-mgmt-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; max-height: 280px; overflow-y: auto; }
.raw-mgmt-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--gray1); border-radius: 10px; font-size: 13px;
}
.raw-mgmt-item-name { font-weight: 700; color: var(--mono-text); }
.raw-mgmt-item-sub  { font-size: 11px; color: var(--gray3); }
.raw-mgmt-add {
  display: grid; grid-template-columns: 1fr 70px 70px 36px;
  gap: 6px; align-items: end; margin-top: 10px;
}
.raw-mgmt-add input,
.raw-mgmt-add select {
  padding: 9px 10px; border: 1.5px solid var(--gray2);
  border-radius: 9px; font-size: 12px; color: var(--mono-text); background: var(--white);
}
.btn-raw-add-confirm {
  width: 36px; height: 36px; background: var(--mono-accent);
  border-radius: 9px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: opacity 0.2s;
}
.btn-raw-add-confirm:hover { opacity: 0.85; }
.prod-detail-meta {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 12px; margin-bottom: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--gray2);
}
.prod-mat-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; background: #eff6ff; border-radius: 8px;
  font-size: 12px; color: #1e40af; margin: 2px;
}
@media (max-width: 900px) {
  .raw-stock-grid  { grid-template-columns: repeat(3, 1fr); }
  .prod-detail-meta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .raw-stock-grid  { grid-template-columns: repeat(2, 1fr); }
  .raw-mgmt-add    { grid-template-columns: 1fr 1fr; }
  .prod-mat-row    { grid-template-columns: 1fr 80px 32px; }
}/* ── 일별 수불 테이블 ── */

.raw-date-nav {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.raw-date-nav input[type="date"] {
  padding: 12px 14px; border: 2px solid var(--gray2);
  border-radius: 12px; font-size: 16px; font-weight: 700;
  color: var(--mono-text); background: var(--white);
}
.raw-date-btn {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--gray1); border: 2px solid var(--gray2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--mono-text); transition: all 0.15s;
}
.raw-date-btn:hover { background: var(--gray2); }
.raw-date-btn.today {
  width: auto; padding: 0 20px; height: 44px;
  font-size: 15px; font-weight: 700;
  background: rgba(0,0,0,0.05); color: var(--mono-text); border-color: rgba(0,0,0,0.18);
}
.raw-date-btn.today:hover { background: rgba(0,0,0,0.10); }
.raw-date-btn.copy {
  width: auto; padding: 0 18px; height: 44px;
  font-size: 14px; font-weight: 700;
  background: #eff6ff; color: #1e40af; border-color: #93c5fd;
}
.raw-date-btn.copy:hover { background: #dbeafe; }
.raw-date-label {
  font-size: 18px; font-weight: 800; color: var(--gray3); margin-left: 4px;
}
.raw-daily-wrap {
  background: var(--white); border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border: 1px solid var(--gray2); overflow: hidden; margin-bottom: 24px;
}
.raw-daily-table {
  width: 100%; border-collapse: collapse;
}
.raw-daily-table thead {
  background: rgba(0,0,0,0.05); color: var(--mono-text);
}
.raw-daily-table th {
  padding: 10px 4px; font-size: 12px; font-weight: 700;
  text-align: center; letter-spacing: 0; white-space: nowrap;
}
.raw-th-name { text-align: left; padding-left: 12px !important; min-width: 70px; }
.raw-th-num { min-width: 60px; white-space: nowrap; }
.raw-th-input { min-width: 65px; }
.raw-th-remark { min-width: 60px; }
.raw-daily-table td {
  padding: 10px 6px; border-bottom: 1px solid var(--gray2);
  text-align: center; vertical-align: middle;
}
.raw-daily-table tbody tr:nth-child(even) { background: #f8fafc; }
.raw-daily-table tbody tr:hover { background: #f0f6ff; }
.raw-daily-table thead tr:hover { background: rgba(0,0,0,0.05); }
.raw-td-name {
  text-align: left; padding-left: 16px !important;
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.raw-item-name { font-weight: 800; color: var(--mono-text); font-size: 13px; white-space: nowrap; }
.raw-item-unit { font-size: 12px; color: var(--gray3); background: var(--gray1); padding: 2px 8px; border-radius: 6px; font-weight: 600; white-space: nowrap; }
.raw-td-num {
  font-weight: 800; color: var(--mono-text); font-size: 13px; white-space: nowrap;
}
.raw-td-balance { font-weight: 900; font-size: 15px; white-space: nowrap; }
.raw-stock-zero { color: var(--danger) !important; background: #fef2f2 !important; }
.raw-stock-low { color: #d97706 !important; background: #fffbeb !important; }
.raw-td-input { padding: 6px 4px !important; }
.raw-input {
  width: 100%; padding: 7px 4px; border: 1.5px solid var(--gray2);
  border-radius: 8px; font-size: 14px; text-align: center;
  background: var(--white); color: var(--mono-text); font-weight: 700;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.raw-input:focus {
  outline: none; border-color: var(--mono-accent);
  background: #fffbeb; box-shadow: 0 0 0 3px rgba(234,179,8,0.15);
}
.raw-input.in:focus { border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.raw-input.out:focus { border-color: #d97706; background: #fffbeb; box-shadow: 0 0 0 3px rgba(217,119,6,0.15); }
.raw-input.defect:focus { border-color: var(--danger); background: #fef2f2; box-shadow: 0 0 0 3px rgba(239,68,68,0.15); }
.raw-input.remark {
  text-align: left; font-weight: 500; font-size: 14px;
}
.raw-unit {
  font-size: 12px; font-weight: 600; color: var(--gray3);
}
.raw-input-wrap {
  display: flex; align-items: center; gap: 4px;
}
.raw-input-wrap .raw-input {
  flex: 1; min-width: 0;
}
.raw-input-unit {
  font-size: 12px; font-weight: 700; color: var(--gray3); white-space: nowrap;
}
.raw-daily-note {
  padding: 16px 18px; border-top: 2px solid var(--gray2);
}
.raw-daily-note label {
  font-size: 14px; font-weight: 800; color: var(--mono-text); margin-bottom: 8px; display: block;
}
.raw-daily-note textarea {
  width: 100%; padding: 12px 14px; border: 2px solid var(--gray2);
  border-radius: 12px; font-size: 14px; resize: none;
  background: var(--white); color: var(--mono-text);
}
.raw-daily-note textarea:focus {
  outline: none; border-color: var(--mono-accent); background: #fffbeb;
  box-shadow: 0 0 0 3px rgba(234,179,8,0.15);
}
.raw-daily-actions {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-top: 2px solid var(--gray2);
  background: var(--gray1);
}
.raw-daily-worker {
  display: flex; align-items: center; gap: 10px; flex: 1;
}
.raw-daily-worker label {
  font-size: 14px; font-weight: 800; color: var(--mono-text); white-space: nowrap;
}
.raw-daily-worker input {
  padding: 12px 14px; border: 2px solid var(--gray2);
  border-radius: 12px; font-size: 15px; color: var(--mono-text);
  background: var(--white); width: 140px;
}
.raw-daily-save {
  padding: 14px 36px; background: var(--mono-accent); color: var(--mono-text);
  border-radius: 12px; font-size: 16px; font-weight: 900;
  cursor: pointer; transition: opacity 0.15s; border: none;
  letter-spacing: 1px;
}
.raw-daily-save:hover { opacity: 0.85; }
.raw-stock-section { margin-top: 12px; }
.raw-mgmt-add-v2 {
  display: flex; flex-direction: column; gap: 10px;
}
.raw-mgmt-add-v2 input {
  padding: 12px 14px; border: 2px solid var(--gray2);
  border-radius: 12px; font-size: 15px; color: var(--mono-text); background: var(--white);
}
.raw-mgmt-add-row2 {
  display: grid; grid-template-columns: 1fr 1fr 80px; gap: 8px;
}
.raw-mgmt-add-row2 select {
  padding: 12px 10px; border: 2px solid var(--gray2);
  border-radius: 12px; font-size: 15px; color: var(--mono-text); background: var(--white);
}
.raw-add-btn {
  padding: 12px 0; background: var(--mono-accent); color: var(--mono-text);
  border-radius: 12px; font-size: 15px; font-weight: 900;
  cursor: pointer; border: none; transition: opacity 0.15s;
}
.raw-add-btn:hover { opacity: 0.85; }
.prod-import-item {
  padding: 14px 16px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--gray2); margin-bottom: 8px;
  transition: all 0.15s;
}
.prod-import-item:hover {
  border-color: var(--mono-accent); background: #fffbeb;
}
.prod-form-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px;
}
.prod-form-field label {
  display: block; font-size: 13px; font-weight: 800; color: var(--mono-text); margin-bottom: 6px;
}
.prod-form-field input,
.prod-form-field select {
  width: 100%; padding: 11px 12px; border: 2px solid var(--gray2);
  border-radius: 10px; font-size: 15px; color: var(--mono-text); background: var(--white);
}
.prod-form-field input:focus,
.prod-form-field select:focus {
  outline: none; border-color: var(--mono-accent); box-shadow: 0 0 0 3px rgba(234,179,8,0.15);
}
.prod-3col { grid-template-columns: 1fr 1fr 1fr; }
.prod-4col { grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 900px) {
  .prod-3col, .prod-4col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .prod-3col, .prod-4col { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .raw-date-nav { gap: 4px; }
  .raw-daily-table { font-size: 11px; }
  .raw-input { padding: 5px 4px; font-size: 11px; }
  .raw-daily-actions { flex-direction: column; align-items: stretch; }
  .raw-daily-save { width: 100%; text-align: center; }
}/* ══════════════════════════════════════
   선행요건/위생관리 공통 (chk-* 재사용 + 추가)
══════════════════════════════════════ */

.sec-chk-layout {
  display: grid;
  grid-template-columns: 1fr 250px;
  gap: 20px;
  align-items: start;
}
.sec-chk-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.sec-chk-header-title {
  font-size: 20px; font-weight: 900; color: var(--mono-text);
  display: flex; align-items: center; gap: 10px;
}/* 색상 테마 변형 */

.prereq-theme .chk-accord-head.open   { background: #f0fdf4; }
.prereq-theme .chk-accord-head:hover  { background: #f7fef9; }
.hygiene-theme .chk-accord-head.open  { background: #fdf4ff; }
.hygiene-theme .chk-accord-head:hover { background: #fdf9ff; }/* 점수 링 색상은 JS에서 동적으로 */

@media (max-width: 900px) {
  .sec-chk-layout { grid-template-columns: 1fr; }
  .sec-chk-layout .chk-score-card { position: static; }
}/* ══════════════════════════════════════
   결재함 스타일
══════════════════════════════════════ */

.apv-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
}
.apv-status.pending  { background:#fef3c7; color:#92400e; }
.apv-status.reviewed { background:#dbeafe; color:#1e40af; }
.apv-status.approved { background:#dcfce7; color:#166534; }
.apv-status.rejected { background:#fee2e2; color:#991b1b; }
.apv-card {
  background: var(--white); border-radius: 14px;
  padding: 16px 18px; box-shadow: var(--shadow);
  border-left: 4px solid var(--gray2);
  margin-bottom: 10px; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.apv-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.apv-card.pending  { border-left-color: var(--warning); }
.apv-card.approved { border-left-color: var(--success); }
.apv-card.rejected { border-left-color: var(--danger); }
.apv-card-row1 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.apv-card-title { font-size: 14px; font-weight: 700; color: var(--mono-text); }
.apv-card-meta  { font-size: 11px; color: var(--gray3); margin-top: 4px; }
.apv-card-preview { font-size: 12px; color: var(--gray4); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apv-empty { text-align:center; padding:40px; color:var(--gray3); font-size:14px; }
.apv-type-chip {
  display: inline-block; padding: 3px 9px;
  border-radius: 8px; font-size: 11px; font-weight: 700;
  background: #eff6ff; color: #1e40af;
}/* 결재 상세 모달 내 액션 버튼 */

.apv-action-btns { display: flex; gap: 10px; margin-top: 16px; }
.apv-approve-btn {
  flex: 1; padding: 11px;
  background: linear-gradient(135deg, var(--success), #4ade80);
  color: var(--white); border-radius: 10px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: opacity 0.2s;
}
.apv-reject-btn {
  flex: 1; padding: 11px;
  background: linear-gradient(135deg, var(--danger), #f87171);
  color: var(--white); border-radius: 10px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: opacity 0.2s;
}
.apv-approve-btn:hover, .apv-reject-btn:hover { opacity: 0.85; }
.apv-comment-inp {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid var(--gray2); border-radius: 9px;
  font-size: 13px; color: var(--mono-text); background: var(--gray1);
  margin-bottom: 10px; resize: none;
}
.apv-comment-inp:focus { border-color: var(--mono-accent); background: var(--white); }/* ── 승인자(role-approver) 사이드바 분기 ── */

body.role-approver .sidebar-menu-group:not(.approver-visible) { display: none !important; }
body.role-approver #menu-approval {
  font-weight: 800 !important;
  color: var(--mono-text) !important;
  background: transparent !important;
  border-radius: 0;
}
body.role-approver #menu-approval .sidebar-item-icon svg { stroke: var(--mono-text) !important; }/* ── 결재 카드 상태별 배경색 ── */

.apv-card.approved  { background: #f0fdf4 !important; border-left: 4px solid #16a34a; }
.apv-card.pending   { background: #fffbeb !important; border-left: 4px solid #d97706; }
.apv-card.rejected  { background: #fef2f2 !important; border-left: 4px solid #dc2626; }
.apv-card.reviewed  { background: #eff6ff !important; border-left: 4px solid #3b82f6; }/* CCP 카드는 배경 대신 배지로만 구분 (상태색 유지) */

.apv-ccp-badge {
  display: inline-block;
  background: #ef4444; color: #fff;
  font-size: 9px; font-weight: 800;
  padding: 1px 6px; border-radius: 4px;
  letter-spacing: 0.5px; vertical-align: middle;
  margin-left: 4px;
}/* ── 결재 요약 카드 ── */

.apv-summary-wrap { display: flex; gap: 12px; margin-bottom: 20px; }
.apv-summary-card {
  flex: 1; background: var(--gray1);
  border-radius: 12px; padding: 14px 16px;
  text-align: center; border: 1.5px solid var(--gray2);
}
.apv-summary-card .apv-sc-num { font-size: 28px; font-weight: 900; line-height: 1; margin-bottom: 4px; }
.apv-summary-card .apv-sc-label { font-size: 11px; color: var(--gray3); font-weight: 600; }
.apv-summary-card.sc-pending  .apv-sc-num { color: var(--warning); }
.apv-summary-card.sc-approved .apv-sc-num { color: var(--success); }
.apv-summary-card.sc-rejected .apv-sc-num { color: var(--danger); }/* ══════════════════════════════════════
   공지사항 스타일
══════════════════════════════════════ */

.notice-page-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}
.notice-full-list { display: flex; flex-direction: column; gap: 10px; }
.notice-full-card {
  background: var(--white); border-radius: 14px;
  padding: 18px 20px; box-shadow: var(--shadow);
  cursor: pointer; transition: transform 0.15s;
  border-left: 4px solid var(--gray2);
}
.notice-full-card:hover { transform: translateY(-2px); }
.notice-full-card.important { border-left-color: var(--mono-accent); }
.notice-full-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.notice-full-card-title { font-size: 15px; font-weight: 700; color: var(--mono-text); }
.notice-full-card-meta  { font-size: 11px; color: var(--gray3); margin-top: 5px; }
.notice-full-card-preview { font-size: 13px; color: var(--gray4); margin-top: 8px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notice-imp-badge { display:inline-block; padding:2px 8px; background:rgba(0,0,0,0.06); color:var(--mono-text); border-radius:2px; font-size:10px; font-weight:700; white-space:nowrap; border:1px solid rgba(0,0,0,0.18); }
.notice-write-card {
  background: var(--white); border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: none; overflow: hidden; position: sticky; top: 16px;
}
.notice-write-head {
  background: transparent; padding: 14px 18px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  color: var(--mono-text); font-size: 13px; font-weight: 700;
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 8px;
}
.notice-write-body { padding: 18px; }
.notice-write-body .ccp-form-group { margin-bottom: 12px; }
.notice-imp-toggle {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--mono-text); cursor: pointer;
}
.notice-imp-toggle input[type=checkbox] {
  width: 16px; height: 16px; accent-color: var(--mono-text); cursor: pointer;
}
.notice-submit-btn {
  width: 100%; padding: 12px;
  background: rgba(0,0,0,0.05);
  color: var(--mono-text); border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.18);
  font-size: 13px; font-weight: 700; cursor: pointer;
  letter-spacing: 0.02em;
  margin-top: 4px; transition: background 0.18s;
}
.notice-submit-btn:hover { background: rgba(0,0,0,0.10); }/* 공지 상세 모달 */

.notice-detail-content {
  font-size: 14px; color: var(--mono-text); line-height: 1.75;
  white-space: pre-wrap; padding: 16px 0;
}
.notice-detail-content.md-content { white-space: normal; }
.notice-detail-content.md-content h1,.notice-detail-content.md-content h2,.notice-detail-content.md-content h3 { margin:16px 0 8px; color:var(--mono-text); }
.notice-detail-content.md-content h1 { font-size:20px; } .notice-detail-content.md-content h2 { font-size:17px; } .notice-detail-content.md-content h3 { font-size:15px; }
.notice-detail-content.md-content p { margin:0 0 10px; }
.notice-detail-content.md-content ul,.notice-detail-content.md-content ol { margin:0 0 10px; padding-left:20px; }
.notice-detail-content.md-content li { margin-bottom:4px; }
.notice-detail-content.md-content strong { font-weight:700; }
.notice-detail-content.md-content hr { border:none; border-top:1px solid var(--gray2); margin:14px 0; }
.notice-detail-content.md-content table { width:100%; border-collapse:collapse; margin:10px 0; font-size:13px; }
.notice-detail-content.md-content th,.notice-detail-content.md-content td { border:1px solid var(--gray2); padding:8px 10px; text-align:left; }
.notice-detail-content.md-content th { background:var(--gray1); font-weight:700; }/* ══════════════════════════════════════
   관리자 대시보드 스타일
══════════════════════════════════════ */

.admin-dash {
  min-height: 100vh;
  background: var(--gray1);
  display: flex; flex-direction: column;
}
.admin-topbar {
  background: #FAFAF8; color: #444444;
  padding: 0 28px;
  height: 72px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.admin-topbar-left { display: flex; align-items: center; gap: 12px; }
.admin-topbar-logo {
  width: 34px; height: 34px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.admin-topbar-title { font-size: 16px; font-weight: 900; letter-spacing: -0.01em; color: #444444; }
.admin-topbar-badge {
  padding: 3px 10px; background: transparent;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 2px; font-size: 10px; font-weight: 700; color: #444444;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.admin-topbar-right { display: flex; align-items: center; gap: 10px; }
.admin-logout-btn {
  padding: 8px 16px;
  background: transparent; color: #444444;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 2px; font-size: 12px; font-weight: 700; cursor: pointer;
  letter-spacing: 0.5px;
  transition: all 0.15s;
}
.admin-logout-btn:hover { background: #6E6E75; color: #FAFAF8; border-color:#6E6E75; }
.admin-content { padding: 28px 32px; flex: 1; max-width: 1200px; margin: 0 auto; width: 100%; }
.admin-welcome { margin-bottom: 24px; }
.admin-welcome-title { font-size: 22px; font-weight: 900; color: var(--mono-text); }
.admin-welcome-sub   { font-size: 13px; color: var(--gray3); margin-top: 4px; }/* 통계 카드 그리드 */

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-bottom: 24px;
}
.admin-stat-card {
  background: #fff; border:1px solid rgba(0,0,0,0.08); border-radius: 2px;
  padding: 26px 28px; box-shadow: none;
  display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
}
.admin-stat-card::after { display: none; }
.admin-stat-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.admin-stat-label { font-size: 12px; color: var(--gray3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.admin-stat-value { font-size: 40px; font-weight: 900; color: var(--mono-text); line-height: 1; }
.admin-stat-sub   { font-size: 12px; color: var(--gray3); }/* 하단 2열 */

.admin-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.admin-panel {
  background: #fff; border:1px solid rgba(0,0,0,0.08); border-radius: 2px;
  box-shadow: none; overflow: hidden;
}
.admin-panel-head {
  padding: 15px 18px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--gray2);
}
.admin-panel-title { font-size: 14px; font-weight: 900; color: var(--mono-text); display: flex; align-items: center; gap: 7px; }
.admin-panel-body  { padding: 14px 18px; }/* 접기/펼치기 */

.admin-panel.collapsed > *:not(.admin-panel-head) { display: none !important; }
.admin-panel.collapsed { overflow: hidden; }
.admin-panel.collapsed > .admin-panel-head { border-bottom: none; }
.admin-panel .panel-toggle-chevron { transition: transform 0.2s; display: inline-block; }
.admin-panel.collapsed .panel-toggle-chevron { transform: rotate(-90deg); }
.admin-apv-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--gray2);
}
.admin-apv-row:last-child { border-bottom: none; }
.admin-apv-title { font-size: 13px; font-weight: 700; color: var(--mono-text); }
.admin-apv-sub   { font-size: 11px; color: var(--gray3); }
.admin-act-approve {
  padding: 5px 12px; background: #6E6E75; color: #FAFAF8;
  border: 1px solid #6E6E75; border-radius: 2px;
  font-size: 11px; font-weight: 700; cursor: pointer; letter-spacing: 0.3px;
  transition: all 0.15s;
}
.admin-act-approve:hover { background: #000; border-color: #000; }
.admin-act-reject {
  padding: 5px 12px; background: transparent; color: #444444;
  border: 1px solid rgba(0,0,0,0.2); border-radius: 2px;
  font-size: 11px; font-weight: 700; cursor: pointer; letter-spacing: 0.3px;
  transition: all 0.15s;
}
.admin-act-reject:hover { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.4); }
.admin-notice-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--gray2);
}
.admin-notice-row:last-child { border-bottom: none; }
.admin-notice-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #6E6E75; margin-top: 6px; flex-shrink: 0;
}
.admin-notice-title { font-size: 13px; font-weight: 700; color: var(--mono-text); }
.admin-notice-meta  { font-size: 11px; color: var(--gray3); }
.admin-quick-btns {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; border-top: 1px solid var(--gray2);
}
.admin-quick-btn {
  padding: 8px 16px;
  background: transparent; color: #444444;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 2px; font-size: 12px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 6px; letter-spacing: 0.3px;
  transition: all 0.15s;
}
.admin-quick-btn:hover { background: #6E6E75; color: #FAFAF8; border-color:#6E6E75; }/* tier tabs & company cards */

.tier-tab { padding:12px 24px; background:none; border:none; border-bottom:3px solid transparent; font-size:15px; font-weight:700; color:var(--gray3); cursor:pointer; transition:all 0.15s; }
.tier-tab.active { color:#444444; border-bottom-color:#444444; }
.tier-tab:hover { color:#444444; }
.company-card { background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:2px; padding:20px; transition:all 0.15s; }
.company-card:hover { border-color:rgba(0,0,0,0.25); }
.company-card-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; gap:8px; }
.company-card-name { font-size:18px; font-weight:800; color:var(--mono-text); flex:1; min-width:0; }
.tier-badge { padding:3px 10px; border:1px solid rgba(0,0,0,0.2); border-radius:2px; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; background:transparent; color:#444444; }
.tier-badge.소규모 { }
.tier-badge.일반 { background:#6E6E75; color:#FAFAF8; border-color:#6E6E75; }/* tier-badge.프리미엄 제거 — tier는 소규모/일반만 사용, 구독은 PRO 배지로 표시 */

.company-card-stats { display:flex; gap:16px; font-size:13px; color:var(--gray3); margin-bottom:12px; flex-wrap:wrap; }
.company-card-stat { display:flex; align-items:center; gap:4px; }
.company-card-actions { display:flex; gap:8px; }
.company-card-actions button { padding:7px 16px; border:1px solid rgba(0,0,0,0.15); border-radius:2px; background:transparent; font-size:12px; font-weight:600; cursor:pointer; color:#444444; letter-spacing:0.3px; transition:all 0.15s; white-space:nowrap; }
.company-card-actions button:hover { background:#6E6E75; color:#FAFAF8; border-color:#6E6E75; }
.company-card-actions button.danger:hover { background:#7f1d1d; border-color:#7f1d1d; color:#FAFAF8; }/* ── 업체 상세 페이지 (CDP) ── */

.company-card { cursor:pointer; }
.company-card:hover { border-color:rgba(0,0,0,0.3); background:#fcfcfa; transition:all 0.15s; }
.cdp-tab { padding:10px 18px; border:none; background:none; font-size:12px; font-weight:600; color:var(--gray3); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; transition:all 0.15s; white-space:nowrap; }
.cdp-tab.active { color:#444444; border-bottom-color:#444444; font-weight:700; }
.cdp-tab:hover:not(.active) { color:#444444; background:rgba(0,0,0,0.04); border-radius:2px 2px 0 0; }
.super-tab { padding:9px 16px; border:none; background:none; font-size:12px; font-weight:600; color:#6E6E75; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap; transition:all 0.15s; }
.super-tab.active { color:#444444; border-bottom-color:#444444; font-weight:700; }
.super-tab:hover:not(.active) { color:#444444; background:rgba(0,0,0,0.04); border-radius:2px 2px 0 0; }/* ── 관리자 콘텐츠 래퍼 (사이드바 + 메인) ── */

.admin-content-wrap { display:flex; flex:1; overflow:hidden; }
.admin-sidebar {
  width:200px; min-width:200px; background:#FAFAF8; padding:16px 0;
  overflow-y:auto; flex-shrink:0; border-right:1px solid rgba(0,0,0,0.08);
}
.admin-sidebar-group { margin-bottom:8px; }
.admin-sidebar-group-label {
  font-size:10px; font-weight:700; color:#6E6E75;
  padding:12px 20px 4px; text-transform:uppercase; letter-spacing:1.5px;
  border-top:1px solid rgba(0,0,0,0.06);
}
.admin-sidebar-group:first-child .admin-sidebar-group-label { border-top:none; }
.admin-nav-item {
  display:block; width:100%; padding:10px 20px; color:#6E6E75;
  font-size:13px; font-weight:600; cursor:pointer; border:none; background:none;
  text-align:left; white-space:nowrap; letter-spacing:0.3px;
  border-left:3px solid transparent; transition:all 0.15s;
}
.admin-nav-item:hover { color:#444444; background:rgba(0,0,0,0.04); }
.admin-nav-item.active { color:#444444; border-left-color:#444444; font-weight:700; background:rgba(0,0,0,0.06); }/* ── 관리자 서브 페이지 ── */

.admin-main-body { padding:32px 48px; flex:1; overflow-y:auto; }
@media (max-width:768px) {
  .admin-content-wrap { flex-direction:column; }
  .admin-sidebar { width:100%; min-width:100%; display:flex; overflow-x:auto; padding:0; border-right:none; border-bottom:1px solid rgba(0,0,0,0.1); }
  .admin-sidebar-group { display:flex; margin:0; }
  .admin-sidebar-group-label { display:none; }
  .admin-nav-item { padding:12px 16px; border-left:none; border-bottom:3px solid transparent; }
  .admin-nav-item.active { border-left-color:transparent; border-bottom-color:#444444; }
  .admin-main-body { padding:16px; }
}
.admin-sub-page { display:none; }
/* ── 어드민 내부 input/select/filter 톤 통일 ── */
.admin-main-body select,
.admin-main-body input[type="text"],
.admin-main-body input[type="date"],
.admin-main-body input[type="search"],
.admin-main-body input[type="number"],
.admin-main-body input[type="email"] {
  border:1px solid rgba(0,0,0,0.15) !important;
  border-radius:2px !important;
  background:#fff !important;
  color:#444444 !important;
  font-size:12px;
}
.admin-main-body select:focus,
.admin-main-body input:focus {
  outline:none;
  border-color:#6E6E75 !important;
}
.ob-filter-btn.active {
  background:#6E6E75 !important;
  color:#FAFAF8 !important;
  border-color:#6E6E75 !important;
}
.ob-filter-btn:hover:not(.active) {
  border-color:rgba(0,0,0,0.4) !important;
  background:rgba(0,0,0,0.03) !important;
}
.admin-page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.admin-page-title { font-size:22px; font-weight:900; color:var(--mono-text); }
.admin-page-btn { padding:10px 20px; background:#6E6E75; color:#FAFAF8; border:1px solid #6E6E75; border-radius:2px; font-size:12px; font-weight:700; letter-spacing:0.5px; cursor:pointer; transition:all 0.15s; }
.admin-page-btn:hover { background:#8A8A92;border-color:#8A8A92; }/* 홈 그리드 */

.admin-home-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; }/* 빠른이동 버튼 */

.ap-shortcut-btn { padding:18px 12px; background:var(--white); border:1.5px solid var(--gray2); border-radius:10px; font-size:14px; font-weight:700; color:var(--mono-text); cursor:pointer; width:100%; }
.ap-shortcut-btn:hover { background:var(--gray1); }
.cdp-summary-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin-bottom:16px; }
.cdp-stat-card { background:var(--white); border:1px solid var(--gray2); border-radius:12px; padding:16px; text-align:center; }
.cdp-stat-val { font-size:28px; font-weight:800; color:var(--mono-text); line-height:1; }
.cdp-stat-label { font-size:11px; color:var(--gray3); margin-top:5px; }
.cdp-section { background:var(--white); border:1px solid var(--gray2); border-radius:12px; padding:16px 18px; margin-bottom:14px; }
.cdp-section-title { font-size:13px; font-weight:700; color:var(--mono-text); margin-bottom:12px; }
.cdp-activity-row { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--gray1); font-size:12px; }
.cdp-activity-row:last-child { border-bottom:none; }
.cdp-user-card { background:var(--white); border:1px solid var(--gray2); border-radius:10px; padding:11px 14px; display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.cdp-avatar { width:34px; height:34px; border-radius:50%; background:var(--primary); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:14px; flex-shrink:0; }/* 계정 관리 업체별 아코디언 */

.acc-company-group { border-bottom: 1px solid var(--gray2); }
.acc-company-group:last-child { border-bottom: none; }
.acc-company-head {
  padding: 10px 14px; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  transition: background 0.15s;
}
.acc-company-head:hover { background: var(--gray1); }
.acc-chevron { transition: transform 0.2s; color: var(--gray3); flex-shrink: 0; }
.acc-company-group.open .acc-chevron { transform: rotate(90deg); }
.acc-company-body { display: none; padding: 0 8px 8px; }
.acc-company-group.open > .acc-company-body { display: block; }/* 패널 하단 검색바 공통 */

.admin-panel-search {
  padding: 8px 14px; border-top: 1px solid var(--gray2); text-align: center;
}
.admin-panel-search input {
  padding: 7px 14px; border: 1px solid var(--gray2); border-radius: 8px;
  font-size: 12px; width: 200px; text-align: center; background: var(--white); color: var(--mono-text);
}
.admin-panel-search input::placeholder { color: var(--gray3); }
@media (max-width: 900px) {
  .admin-stat-grid    { grid-template-columns: repeat(2, 1fr); }
  .admin-bottom-grid  { grid-template-columns: 1fr; }
  .admin-content      { padding: 20px 16px; }
  .notice-page-grid   { grid-template-columns: 1fr; }
  .notice-write-card  { position: static; }
}
@media (max-width: 600px) {
  .admin-stat-grid    { grid-template-columns: repeat(2, 1fr); }
}/* ══════════════════════════════════════
   반응형 종합 보강 (태블릿 + 모바일)
══════════════════════════════════════ *//* --- 태블릿 (768px~1024px) --- */

@media (max-width: 1024px) {
  .admin-content { padding: 20px 18px; }
  .admin-welcome-title { font-size: 18px; }
  .company-card-name { font-size: 15px; }
  .tier-tab { padding: 10px 16px; font-size: 13px; }
}/* --- 태블릿 세로 (600px~768px) --- */

@media (max-width: 768px) {
  .admin-topbar { height: 56px; padding: 0 16px; }
  .admin-topbar img { height: 36px !important; }
  .admin-topbar-badge { font-size: 10px; padding: 2px 8px; }
  .admin-content { padding: 16px 12px; }
  .admin-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .admin-stat-value { font-size: 24px; }
  .admin-stat-card { padding: 14px 16px; }
  .admin-bottom-grid { grid-template-columns: 1fr; gap: 14px; }
  .admin-panel-body { padding: 10px 12px; }
  .admin-welcome-title { font-size: 16px; }
  .admin-welcome-sub { font-size: 12px; }
  /* 업체 카드 1열 */
  .company-card { padding: 14px; }
  .company-card-name { font-size: 15px; }
  .tier-tab { padding: 8px 12px; font-size: 12px; }
  /* 업체 등록 폼 */
  #addCompanyFormWrap { padding: 10px; }
  #addCompanyFormWrap > div:first-child { grid-template-columns: 1fr !important; }
  /* 일지 모달 */
  .journal-overlay.open { padding: 8px; }
  .journal-header { padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
  .journal-header h2 { font-size: 14px; }
  .journal-header-btns { flex-wrap: nowrap; gap: 4px; }
  .journal-header-btns button { padding: 5px 9px; font-size: 11px; white-space: nowrap; flex-shrink: 0; }
  .journal-toolbar { padding: 8px 12px; gap: 8px; }
  .journal-toolbar label { font-size: 11px; }
  .journal-toolbar input { font-size: 11px; }
  .journal-body { padding: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .jform-table { font-size: 11px; min-width: 450px; }
  /* 계정 관리 폼 */
  #adminAccountForm { flex-direction: column !important; }
  #adminAccountForm > * { width: 100% !important; }
  /* 프로필 카드 */
  .profile-card { padding: 16px; }
  .profile-name { font-size: 15px; }
  /* 결재함 */
  .apv-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .apv-actions { align-self: flex-end; }
  /* 알림/공지 모달 */
  .noti-panel { width: 90vw !important; right: 5vw !important; }
  /* 관리자 리턴 버튼 */
  .admin-return-btn { font-size: 11px !important; padding: 8px 14px !important; }
  /* 사용자 대시보드 */
  .content { padding: 12px !important; }
  .content-grid { gap: 12px; }
}/* --- 모바일 (480px 이하) --- */

@media (max-width: 480px) {
  .admin-topbar { height: 50px; padding: 0 12px; gap: 6px; }
  .admin-topbar img { height: 28px !important; }
  .admin-topbar-badge { font-size: 9px; padding: 2px 6px; }
  .admin-logout-btn { padding: 5px 10px; font-size: 10px; }
  .admin-content { padding: 12px 8px; }
  .admin-stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .admin-stat-value { font-size: 20px; }
  .admin-stat-label { font-size: 10px; }
  .admin-stat-card { padding: 12px; gap: 4px; }
  .admin-stat-icon { width: 30px; height: 30px; font-size: 14px; }
  .admin-welcome { margin-bottom: 14px; }
  .admin-welcome-title { font-size: 15px; }
  .admin-panel-head { padding: 10px 12px; }
  .admin-panel-title { font-size: 12px; }
  .admin-panel-body { padding: 8px 10px; }
  .admin-panel-body table { font-size: 11px; }
  .admin-panel-search input { width: 160px; font-size: 11px; }
  /* 업체카드 */
  .company-card { padding: 12px; }
  .company-card-name { font-size: 14px; }
  .company-card-stats { font-size: 11px; gap: 8px; }
  .company-card-actions { flex-direction: column; }
  .company-card-actions button { width: 100%; justify-content: center; }
  .tier-tab { padding: 7px 10px; font-size: 11px; }
  /* 아코디언 */
  .acc-company-head { padding: 8px 10px; }
  .acc-company-head span { font-size: 11px !important; }
  .acc-company-body { padding: 0 4px 6px; }
  .acc-company-body table { font-size: 10px; }
  /* 일지 모달 풀스크린 */
  .journal-overlay.open { padding: 0; }
  .journal-box { border-radius: 0; min-height: 100vh; }
  .journal-header { border-radius: 0; padding: 8px 10px; }
  .journal-header h2 { font-size: 13px; }
  .journal-header-btns button { padding: 4px 7px; font-size: 10px; white-space: nowrap; flex-shrink: 0; }
  .journal-toolbar { padding: 6px 10px; gap: 6px; flex-wrap: wrap; }
  .journal-body { padding: 6px; }
  .jform-table { font-size: 10px; min-width: 320px; }
  .jform-table td, .jform-table th { padding: 3px 4px; }
  /* 로그인 */
  .login-box, .admin-login-box { margin: 10px; padding: 28px 18px 24px; }
  /* 유저 topbar */
  .topbar { height: 50px; padding: 0 12px; }
  .topbar-title { font-size: 13px; }
  .topbar-btn { width: 30px; height: 30px; }
  .topbar-actions { gap: 6px; }
  .topbar-workday-toggle { min-width: 92px; height: 30px; padding: 0 8px; font-size: 11px; }
  .topbar-avatar { width: 26px; height: 26px; font-size: 10px; }
  .topbar-username { font-size: 11px; }
  .topbar-user { padding: 4px 8px; gap: 6px; }
  /* 프로필 */
  .profile-card { padding: 14px 10px; }
  .profile-ring-outer { width: 70px; height: 70px; }
  .profile-name { font-size: 14px; }
  .profile-role { font-size: 10px; padding: 2px 8px; }
  .profile-meta { padding: 6px 8px; font-size: 10px; }
  #profileLicense span, #profileLicense strong { font-size: 10px !important; }
  /* 설정 페이지 — 모바일에서 사이드바 → 상단 탭 */
  .settings-section { padding: 12px; }
  #setNav { width: 100% !important; border-right: none !important; border-bottom: 1.5px solid var(--gray2) !important; border-radius: 14px 14px 0 0 !important; padding: 10px 0 0 !important; display: flex !important; flex-wrap: wrap; gap: 0; overflow-x: auto; }
  #setNav > div:first-child { display: none !important; } /* 설정 제목 숨김 */
  .set-nav-item { padding: 8px 14px !important; font-size: 12px !important; border-left: none !important; border-bottom: 2px solid transparent !important; white-space: nowrap; }
  .set-nav-item.active { border-left-color: transparent !important; border-bottom-color: var(--primary) !important; background: none !important; }
  #content-settings > div { flex-direction: column !important; }
  #content-settings > div > div:last-child { border-radius: 0 0 14px 14px !important; padding: 16px 14px !important; }
  .settings-section [style*="grid-template-columns:100px"] {
    grid-template-columns: 1fr !important;
  }
  .settings-section label { margin-bottom: -4px; }
  .settings-label { font-size: 13px; }
  /* 결재 카드 */
  .apv-card { padding: 12px 14px; }
  .apv-card-title { font-size: 12px; }
  .apv-action-btns { flex-direction: column; }
  /* 사이드바 오버레이 개선 */
  .sidebar.open { width: 260px; box-shadow: 4px 0 20px rgba(0,0,0,0.3); }
  /* 빠른 액션 버튼 */
  .admin-quick-btns { padding: 10px 12px; gap: 6px; }
  .admin-quick-btn { padding: 6px 10px; font-size: 11px; }
}/* --- 초소형 모바일 (360px 이하) --- */

@media (max-width: 360px) {
  .admin-stat-grid { grid-template-columns: 1fr; }
  .admin-stat-card { flex-direction: row; align-items: center; gap: 12px; }
  .admin-stat-value { font-size: 22px; }
  .pin-input { width: 38px; height: 48px; font-size: 20px; }
  .pin-inputs { gap: 5px; }
}/* ── HWPX 다운로드 버튼 ── */

.hwpx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 700;
  border: 2px solid #2563eb; color: #2563eb; background: #eff6ff;
  cursor: pointer; transition: all .2s; white-space: nowrap; width: 100%;
}
.hwpx-btn:hover { background: #2563eb; color: #fff; }
.hwpx-btn.loading { opacity: .6; pointer-events: none; }
.hwpx-server-notice { font-size: 11px; color: var(--gray3); margin-top: 5px; text-align: center; }
.hwpx-server-notice a { color: var(--mono-accent-2); text-decoration: none; }
.chk-save-row { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }/* 서버 안내 모달 */

.hwpx-guide-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6);
  z-index: 9900; align-items: center; justify-content: center;
}
.hwpx-guide-overlay.open { display: flex; }
.hwpx-guide-box {
  background: #fff; border-radius: 16px; padding: 28px 24px; max-width: 440px; width: 92%;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.hwpx-guide-icon { font-size: 36px; text-align: center; margin-bottom: 8px; }
.hwpx-guide-title { font-size: 17px; font-weight: 800; color: var(--mono-text); margin-bottom: 4px; text-align: center; }
.hwpx-guide-sub { font-size: 12px; color: var(--danger); font-weight: 600; margin-bottom: 18px; text-align: center; }
.hwpx-guide-steps { list-style: none; padding: 0; margin: 0 0 18px; }
.hwpx-guide-steps li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f1f5f9; font-size: 13px; line-height: 1.55; }
.hwpx-guide-steps li:last-child { border: none; }
.hwpx-step-num { min-width: 22px; height: 22px; background: rgba(0,0,0,0.05); color: var(--mono-text); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; margin-top: 2px; flex-shrink: 0; }
.hwpx-guide-code { background: #1e293b; color: #86efac; border-radius: 6px; padding: 7px 10px; font-size: 12px; font-family: monospace; margin: 5px 0 0; user-select: all; display: block; }
.hwpx-guide-close { width: 100%; padding: 11px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.18); background: rgba(0,0,0,0.05); color: var(--mono-text); font-size: 14px; font-weight: 700; cursor: pointer; }
.hwpx-guide-close:hover { background: rgba(0,0,0,0.10); }/* ===== 일지 팝업 모달 ===== */

.journal-overlay {
  display:none; position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.6); z-index:9999; overflow-y:auto;
}
.journal-overlay.open { display:flex; align-items:flex-start; justify-content:center; padding:20px; }
.journal-box {
  background:#fff; border-radius:8px; width:100%; max-width:1100px;
  box-shadow:0 4px 24px rgba(0,0,0,0.3); display:flex; flex-direction:column;
  min-height:200px;
}
.journal-header {
  background:rgba(0,0,0,0.05); color:var(--mono-text); border-bottom:1px solid rgba(0,0,0,0.12); padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between;
  border-radius:8px 8px 0 0;
}
.journal-header h2 { margin:0; font-size:17px; font-weight:700; }
.journal-header-btns { display:flex; gap:8px; }
.journal-header-btns button {
  border:none; border-radius:5px; padding:6px 14px; font-size:13px;
  cursor:pointer; font-weight:600;
}
.btn-jedit      { background:#1e3550; color:#fff; }
.btn-jedit-save { background:#D4A843; color:#fff; }
.btn-jload      { background:#1e3550; color:#fff; }
.btn-jdraft     { background:#2563eb; color:#fff; }
.btn-jsave      { background:#D4A843; color:#fff; }
.btn-jpdf       { background:#1e3550; color:#fff; }
.btn-jprint     { background:#1e3550; color:#fff; }
.btn-jclose     { background:#4b5563; color:#fff; }/* 더보기 드롭다운 */

.j-more-wrap { position:relative; }
.btn-jmore { background:#374151; color:#fff; font-size:18px; line-height:1; padding:6px 12px; }
.j-more-dropdown {
  display:none; position:absolute; right:0; top:calc(100% + 6px);
  background:#1e3550; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.3);
  z-index:100; min-width:160px; overflow:hidden;
}
.j-more-dropdown.open { display:flex; flex-direction:column; }
.j-more-dropdown button {
  text-align:left; padding:12px 16px; font-size:14px; border:none;
  background:transparent; color:#fff; cursor:pointer; font-weight:600; white-space:nowrap;
}
.j-more-dropdown button:hover { background:rgba(255,255,255,0.1); }
.j-more-dropdown button + button { border-top:1px solid rgba(255,255,255,0.1); }/* 다크모드 */

.dark .j-more-dropdown { background:#1f2937; box-shadow:0 8px 24px rgba(0,0,0,0.5); }
.dark .btn-jmore { background:#4b5563; }
.btn-jedit:hover, .btn-jload:hover, .btn-jpdf:hover, .btn-jprint:hover { background:#6E6E75; }
.btn-jdraft:hover { background:#1d4ed8; }
.btn-jsave:hover, .btn-jedit-save:hover { background:#b8912e; }
.btn-jclose:hover { background:#6b7280; }
.btn-jguide { background:#10b981; color:#fff; }
.btn-jguide:hover { background:#059669; }/* === 일지 가이드 팝업 === */

.jguide-popup {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.4); z-index:10010;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.jguide-popup-box {
  background:#fff; border-radius:14px; padding:28px 32px;
  box-shadow:0 12px 40px rgba(0,0,0,0.25);
  max-width:400px; width:100%;
}
.jguide-popup-title {
  font-size:18px; font-weight:700; color:#444444;
  margin-bottom:18px; text-align:center;
}
.jguide-popup-steps {
  margin-bottom:22px;
}
.jguide-step {
  font-size:14px; color:#333; line-height:1.7;
  padding:4px 0;
}
.jguide-popup-btn {
  display:block; width:100%; padding:12px;
  background:rgba(0,0,0,0.05); color:var(--mono-text); border-bottom:1px solid rgba(0,0,0,0.12); border:none; border-radius:8px;
  font-size:15px; font-weight:600; cursor:pointer;
}
.jguide-popup-btn:hover { background:#6E6E75; }/* 다크모드 */

.dark .jguide-popup-box { background:#1f2937; }
.dark .jguide-popup-title { color:#D4A843; }
.dark .jguide-step { color:#e2e8f0; }
.dark .jguide-popup-btn { background:#D4A843; color:#1a1a1a; }/* 모바일 */

@media (max-width:600px) {
  .jguide-popup-box { padding:22px 20px; }
  .jguide-popup-title { font-size:16px; }
  .jguide-step { font-size:13px; }
}

.journal-toolbar {
  background:#f0f4f8; padding:10px 20px; border-bottom:1px solid #dde;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.journal-toolbar label { font-size:13px; font-weight:600; color:#333; }
.journal-toolbar input[type=date], .journal-toolbar input[type=text] {
  border:1px solid #bbb; border-radius:4px; padding:5px 8px;
  font-size:13px;
}
.journal-body { padding:20px; overflow-x:auto; }/* 일지 테이블 */

.jform-table {
  width:100%; border-collapse:collapse; font-size:13px; color:#1a1a2e;
}
.jform-table td, .jform-table th {
  border:1px solid #c0c8d0; padding:6px 7px;
  vertical-align:middle; word-break:keep-all; line-height:1.4; font-weight:500;
}
.jform-table .jtitle {
  background:rgba(0,0,0,0.05); color:var(--mono-text); text-align:center;
  font-size:16px; font-weight:800; padding:12px; letter-spacing:-0.01em;
  border-bottom:1px solid rgba(0,0,0,0.18);
}
.jform-table .jsubtitle {
  background:#e8eef4; color:#2c3e50; text-align:center;
  font-size:12px; padding:6px;
}
.jform-table .jhdr {
  background:#e8eef4; color:#2c3e50; text-align:center;
  font-weight:700; padding:9px 6px;
}
.jform-table .jperiod {
  background:#e8eef4; text-align:center; font-weight:700;
  font-size:12px; white-space:pre-wrap;
}
.jform-table .jcat {
  background:#fff; text-align:center; font-weight:600;
  font-size:11px; word-break:keep-all; overflow-wrap:break-word; line-height:1.35;
}
.jform-table .jitem { background:#fff; font-size:11px; line-height:1.35; word-break:keep-all; overflow-wrap:break-word; }
.jform-table .jitem-nw { background:#fff; white-space:nowrap; font-size:12px; }
.jform-table .jcheck { background:#fff; text-align:center; }
/* j108(CCP 정기검증대장 삶음)만 예/아니오 칸 60px 고정 — 다른 일지에 영향 안 가게 */
.jform-table.jf-j108 .jcheck,
.jform-table.jf-j108_v1 .jcheck { width:60px; min-width:56px; max-width:64px; }
.jform-table .jvalue { background:#fff; text-align:center; }
.jform-table input[type=checkbox] {
  width:20px; height:20px; cursor:pointer; accent-color:#1e3a5f;
}
.jform-table input[type=text], .jform-table input[type=number] {
  border:1px solid #d0d5dd; border-radius:4px; padding:5px 8px;
  font-size:13px; font-weight:600; color:#1a1a2e; width:90%; background:#fafbfc;
  transition:border-color .15s, box-shadow .15s;
}
.jform-table input[type=text]:focus, .jform-table input[type=number]:focus {
  border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,0.15); outline:none;
}
.jform-table textarea {
  border:1px solid #d0d5dd; border-radius:4px; padding:5px 8px;
  font-size:13px; font-weight:600; color:#1a1a2e; width:100%; min-height:50px; background:#fafbfc;
  resize:vertical; transition:border-color .15s, box-shadow .15s;
}
.jform-table textarea:focus {
  border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,0.15); outline:none;
}
.jform-table .jspecial { background:#fafbfc; }
.jform-table select {
  border:1px solid #d0d5dd; border-radius:4px; padding:5px 8px;
  font-size:13px; font-weight:700; color:#1a1a2e; background:#fafbfc;
  transition:border-color .15s;
}
.jform-table select:focus {
  border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,0.15); outline:none;
}
.jform-note { margin-top:15px; }
.jform-note label { font-weight:600; }
.jform-note textarea { width:100%; min-height:60px; border:1px solid #bbb; border-radius:4px; padding:8px; font-size:13px; }/* j239: HWP 원본에 더 가깝게 보이도록 전용 미세 보정 */

.jform-table.jf-j239,
.jform-table.jf-profile-ccp_periodic_verification {
  table-layout: fixed;
  max-width: 940px;
  margin: 0 auto;
  font-size: 10.5px;
  color: #111;
  background: #fff;
}
.jform-table.jf-j239 td,
.jform-table.jf-j239 th,
.jform-table.jf-profile-ccp_periodic_verification td,
.jform-table.jf-profile-ccp_periodic_verification th {
  border-color: #7f8a96;
  border-width: 1px;
  padding: 2px 4px;
  line-height: 1.18;
  font-weight: 400;
  vertical-align: middle;
}
.jform-table.jf-j239 .jtitle,
.jform-table.jf-profile-ccp_periodic_verification .jtitle {
  background: #fff;
  color: #111;
  font-size: 17px;
  font-weight: 700;
  padding: 12px 8px 3px;
  letter-spacing: 0;
  border-bottom: none;
}
.jform-table.jf-j239 .jsubtitle,
.jform-table.jf-profile-ccp_periodic_verification .jsubtitle {
  background: #fff;
  color: #444;
  font-size: 10px;
  padding: 0 8px 7px;
  border-top: none;
}
.jform-table.jf-j239 .jhdr,
.jform-table.jf-profile-ccp_periodic_verification .jhdr {
  background: #d5e2f1;
  color: #111;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  padding: 4px 3px;
}
.jform-table.jf-j239 .jperiod,
.jform-table.jf-profile-ccp_periodic_verification .jperiod {
  background: #d5e2f1;
  color: #111;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.14;
  text-align: center;
  padding: 4px 3px;
}
.jform-table.jf-j239 .jitem,
.jform-table.jf-profile-ccp_periodic_verification .jitem {
  font-size: 9.5px;
  line-height: 1.14;
  padding: 3px 5px;
  word-break: keep-all;
}
.jform-table.jf-j239 td.jc-process,
.jform-table.jf-profile-ccp_periodic_verification td.jc-process {
  text-align: center;
  word-break: keep-all;
  padding-left: 2px;
  padding-right: 2px;
}
.jform-table.jf-j239 td.jc-body,
.jform-table.jf-profile-ccp_periodic_verification td.jc-body {
  text-align: left;
  padding-left: 6px;
  padding-right: 6px;
}
.jform-table.jf-j239 td.jc-record,
.jform-table.jf-profile-ccp_periodic_verification td.jc-record {
  text-align: center;
}
.jform-table.jf-j239 .jcheck,
.jform-table.jf-profile-ccp_periodic_verification .jcheck {
  width: 30px;
  min-width: 30px;
  padding: 0;
  text-align: center;
}
.jform-table.jf-j239 .jcheck label,
.jform-table.jf-profile-ccp_periodic_verification .jcheck label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
}
.jform-table.jf-j239 input[type=checkbox],
.jform-table.jf-profile-ccp_periodic_verification input[type=checkbox] {
  width: 12px;
  height: 12px;
  accent-color: #fff;
}
.jform-table.jf-j239 .jspecial,
.jform-table.jf-profile-ccp_periodic_verification .jspecial {
  background: #fff;
  padding: 0 3px;
}
.jform-table.jf-j239 .jspecial input[type=text],
.jform-table.jf-j239 .jspecial input[type=number],
.jform-table.jf-profile-ccp_periodic_verification .jspecial input[type=text],
.jform-table.jf-profile-ccp_periodic_verification .jspecial input[type=number] {
  width: 100%;
  border: 1px solid #c2cad3;
  border-radius: 0;
  background: transparent;
  color: #333;
  font-size: 10px;
  font-weight: 500;
  min-height: 20px;
  padding: 1px 5px;
  box-sizing: border-box;
  text-align: center;
  box-shadow: none;
}
.jform-table.jf-j239 .jspecial input[type=text][disabled],
.jform-table.jf-j239 .jspecial input[type=number][disabled],
.jform-table.jf-profile-ccp_periodic_verification .jspecial input[type=text][disabled],
.jform-table.jf-profile-ccp_periodic_verification .jspecial input[type=number][disabled] {
  background: transparent;
  color: #4b5563;
  opacity: 1;
  border: none;
  border-bottom: 1px solid #aeb8c2;
  border-radius: 0;
  min-height: 18px;
  padding: 0 2px 1px;
}
.jform-table.jf-j239 .jspecial input::placeholder,
.jform-table.jf-profile-ccp_periodic_verification .jspecial input::placeholder {
  color: #576270;
  opacity: 1;
}
.jform-table.jf-j239 td.jh-xs,
.jform-table.jf-profile-ccp_periodic_verification td.jh-xs {
  min-height: 22px;
  padding-top: 2px;
  padding-bottom: 2px;
}
.jform-table.jf-j239 td.jh-sm,
.jform-table.jf-profile-ccp_periodic_verification td.jh-sm {
  min-height: 28px;
  padding-top: 3px;
  padding-bottom: 3px;
}
.jform-table.jf-j239 td.jh-md,
.jform-table.jf-profile-ccp_periodic_verification td.jh-md {
  min-height: 34px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.jform-table.jf-j239 td.jh-lg,
.jform-table.jf-profile-ccp_periodic_verification td.jh-lg {
  min-height: 42px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.jform-table.jf-j239 td.jh-xl,
.jform-table.jf-profile-ccp_periodic_verification td.jh-xl {
  min-height: 52px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.jform-table.jf-j239 td.jt-timeline,
.jform-table.jf-profile-ccp_periodic_verification td.jt-timeline {
  background: #fff;
  padding: 1px 2px;
}
.jform-table.jf-j239 td.jt-footer,
.jform-table.jf-profile-ccp_periodic_verification td.jt-footer {
  border-top-width: 1.2px;
}
.jform-table.jf-j239 td.jt-timeline input[type=text],
.jform-table.jf-j239 td.jt-timeline input[type=number],
.jform-table.jf-profile-ccp_periodic_verification td.jt-timeline input[type=text],
.jform-table.jf-profile-ccp_periodic_verification td.jt-timeline input[type=number] {
  width: 100%;
  min-height: 22px;
  border: 1px solid #9eabb8;
  background: #fff;
  color: #1f2937;
  box-shadow: none;
  border-radius: 0;
  padding: 1px 6px;
  box-sizing: border-box;
}
.jform-table.jf-j239 td.jt-timeline.jc-body input[type=text],
.jform-table.jf-j239 td.jt-timeline.jc-body input[type=number],
.jform-table.jf-profile-ccp_periodic_verification td.jt-timeline.jc-body input[type=text],
.jform-table.jf-profile-ccp_periodic_verification td.jt-timeline.jc-body input[type=number] {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: -0.1px;
}
.jform-table.jf-j239 td.jt-timeline.jc-body input::placeholder,
.jform-table.jf-profile-ccp_periodic_verification td.jt-timeline.jc-body input::placeholder {
  color: #1f2937;
  opacity: 1;
}
.jform-table.jf-j239 td.jt-timeline.jc-record input[type=text],
.jform-table.jf-j239 td.jt-timeline.jc-record input[type=number],
.jform-table.jf-profile-ccp_periodic_verification td.jt-timeline.jc-record input[type=text],
.jform-table.jf-profile-ccp_periodic_verification td.jt-timeline.jc-record input[type=number] {
  text-align: center;
  font-size: 9.5px;
  font-weight: 500;
}
.jform-table.jf-j239 td.jh-xs input[type=text],
.jform-table.jf-j239 td.jh-xs input[type=number],
.jform-table.jf-profile-ccp_periodic_verification td.jh-xs input[type=text],
.jform-table.jf-profile-ccp_periodic_verification td.jh-xs input[type=number] {
  min-height: 18px;
  font-size: 9px;
}
.jform-table.jf-j239 td.jh-sm input[type=text],
.jform-table.jf-j239 td.jh-sm input[type=number],
.jform-table.jf-profile-ccp_periodic_verification td.jh-sm input[type=text],
.jform-table.jf-profile-ccp_periodic_verification td.jh-sm input[type=number] {
  min-height: 20px;
}
.jform-table.jf-j239 td.jh-lg input[type=text],
.jform-table.jf-j239 td.jh-lg input[type=number],
.jform-table.jf-profile-ccp_periodic_verification td.jh-lg input[type=text],
.jform-table.jf-profile-ccp_periodic_verification td.jh-lg input[type=number] {
  min-height: 26px;
}
.jform-table.jf-j239 td.jh-lg textarea,
.jform-table.jf-profile-ccp_periodic_verification td.jh-lg textarea {
  min-height: 54px;
}
.journal-box[data-form-id="j239"],
#journalOverlay[data-form-id="j239"] .journal-box,
.journal-box[data-render-profile="ccp_periodic_verification"],
#journalOverlay[data-render-profile="ccp_periodic_verification"] .journal-box {
  max-width: 1160px;
  border-radius: 6px;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.22);
}
.journal-box[data-form-id="j239"] .journal-header,
#journalOverlay[data-form-id="j239"] .journal-header,
.journal-box[data-render-profile="ccp_periodic_verification"] .journal-header,
#journalOverlay[data-render-profile="ccp_periodic_verification"] .journal-header {
  background: #2a4a72;
  padding: 12px 18px;
}
.journal-box[data-form-id="j239"] .journal-header h2,
#journalOverlay[data-form-id="j239"] .journal-header h2,
.journal-box[data-render-profile="ccp_periodic_verification"] .journal-header h2,
#journalOverlay[data-render-profile="ccp_periodic_verification"] .journal-header h2 {
  font-size: 15px;
  letter-spacing: -0.01em;
}
.journal-box[data-form-id="j239"] .journal-toolbar,
#journalOverlay[data-form-id="j239"] .journal-toolbar,
.journal-box[data-render-profile="ccp_periodic_verification"] .journal-toolbar,
#journalOverlay[data-render-profile="ccp_periodic_verification"] .journal-toolbar {
  background: #f7f7f5;
  border-bottom: 1px solid #d8dee5;
  padding: 9px 14px;
  gap: 10px;
}
.journal-box[data-form-id="j239"] .journal-toolbar label,
#journalOverlay[data-form-id="j239"] .journal-toolbar label,
.journal-box[data-render-profile="ccp_periodic_verification"] .journal-toolbar label,
#journalOverlay[data-render-profile="ccp_periodic_verification"] .journal-toolbar label {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
}
.journal-box[data-form-id="j239"] .journal-toolbar input[type=date],
.journal-box[data-form-id="j239"] .journal-toolbar input[type=text],
#journalOverlay[data-form-id="j239"] .journal-toolbar input[type=date],
#journalOverlay[data-form-id="j239"] .journal-toolbar input[type=text],
.journal-box[data-render-profile="ccp_periodic_verification"] .journal-toolbar input[type=date],
.journal-box[data-render-profile="ccp_periodic_verification"] .journal-toolbar input[type=text],
#journalOverlay[data-render-profile="ccp_periodic_verification"] .journal-toolbar input[type=date],
#journalOverlay[data-render-profile="ccp_periodic_verification"] .journal-toolbar input[type=text] {
  height: 28px;
  border: 1px solid #cad1d8;
  border-radius: 2px;
  background: #fff;
  font-size: 12px;
  padding: 3px 7px;
}
.journal-box[data-form-id="j239"] .journal-body,
#journalOverlay[data-form-id="j239"] .journal-body,
.journal-box[data-render-profile="ccp_periodic_verification"] .journal-body,
#journalOverlay[data-render-profile="ccp_periodic_verification"] .journal-body {
  padding: 14px 16px 18px;
  background: #f5f7fa;
}
.journal-box[data-form-id="j239"] .jform-note,
#journalOverlay[data-form-id="j239"] .jform-note,
.journal-box[data-render-profile="ccp_periodic_verification"] .jform-note,
#journalOverlay[data-render-profile="ccp_periodic_verification"] .jform-note {
  max-width: 920px;
  margin: 10px auto 0;
}
.journal-box[data-form-id="j239"] .jform-note label,
#journalOverlay[data-form-id="j239"] .jform-note label,
.journal-box[data-render-profile="ccp_periodic_verification"] .jform-note label,
#journalOverlay[data-render-profile="ccp_periodic_verification"] .jform-note label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #374151;
}
.journal-box[data-form-id="j239"] .jform-note textarea,
#journalOverlay[data-form-id="j239"] .jform-note textarea,
.journal-box[data-render-profile="ccp_periodic_verification"] .jform-note textarea,
#journalOverlay[data-render-profile="ccp_periodic_verification"] .jform-note textarea {
  min-height: 52px;
  border: 1px solid #aeb8c2;
  border-radius: 0;
  padding: 6px 8px;
  font-size: 11px;
  background: #fff;
  resize: none;
}/* 멀티페이지 일지 탭 */

.j-page-tabs { display:flex; gap:6px; border-bottom:3px solid var(--gray2); margin-bottom:14px; flex-wrap:wrap; padding:0 4px; }
.j-page-tab { padding:10px 20px; border:2px solid var(--gray2); border-bottom:none; background:#f8fafc; color:#64748b; font-size:13px; font-weight:700; cursor:pointer; margin-bottom:-3px; transition:all .15s; border-radius:8px 8px 0 0; }
.j-page-tab:hover { color:var(--mono-text); background:#e2e8f0; }
.j-page-tab.active { color:#fff; background:#1e40af; border-color:#1e40af; }
.j-page-sec { display:none; }
.j-page-sec.active { display:block; }/* 다크모드에서도 일지 모달 탭은 밝은 스타일 유지 *//* ── 사진 첨부 셀 ── */

.j-photo-wrap { display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px; position:relative; }
.j-photo-drop { cursor:pointer; border:2px dashed #cbd5e1; border-radius:12px; background:#f8fafc; min-height:350px; transition:all 0.2s; }
.j-photo-drop:hover { border-color:#93c5fd; background:#eff6ff; }
.j-photo-drop.drag-over { border-color:#2563eb; background:#dbeafe; box-shadow:0 0 0 4px rgba(37,99,235,0.15); }
.j-photo-drop:focus { outline:none; border-color:#2563eb; }
.j-photo-placeholder { display:flex; flex-direction:column; align-items:center; gap:8px; padding:30px 20px; color:var(--gray3); font-size:13px; font-weight:600; }
.j-photo-preview { width:100%; display:flex; align-items:center; justify-content:center; padding:8px; }
.j-photo-preview img { border-radius:8px; max-width:100%; object-fit:contain; }
.j-photo-btn { display:none; }
.j-photo-remove { position:absolute; top:8px; right:8px; padding:6px 14px; background:#ef4444; color:#fff; border:none; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; z-index:2; }
.j-photo-remove:hover { background:#dc2626; }/* ── 셀 드래그 선택 & 병합 ── */

.j-cell-selected { outline:2.5px solid #3b82f6 !important; background:rgba(59,130,246,0.13) !important; position:relative; }
.j-cell-sel-mode td { cursor:crosshair !important; user-select:none; }
.j-cell-sel-mode td input,
.j-cell-sel-mode td select,
.j-cell-sel-mode td textarea { pointer-events:none; }
.j-merge-bar {
  display:flex; align-items:center; gap:5px; padding:6px 10px; background:#f0f4ff; border:1px solid var(--gray2);
  border-radius:8px; margin-bottom:8px; flex-wrap:wrap;
}
.j-merge-bar button {
  padding:4px 12px; border:1px solid #ccc; border-radius:6px; font-size:12px; font-weight:600;
  cursor:pointer; background:#fff; color:#333; transition: all 0.15s;
}
.j-merge-bar button:hover { background:#e8eef5; border-color:#3b82f6; }
.j-merge-bar .jmb-active { background:#3b82f6; color:#fff; border-color:#3b82f6; }
.j-merge-bar .jmb-label { font-size:11px; color:#666; font-weight:600; }
.j-merge-bar .jmb-sep { width:1px; height:22px; background:#ccc; margin:0 4px; }/* ── 행 드래그 이동 ── */

.j-row-handle {
  display:inline-block; width:18px; height:22px; line-height:22px; text-align:center;
  border-radius:4px; background:transparent; color:#999; font-size:13px; cursor:grab;
  vertical-align:middle; margin-right:2px; user-select:none; transition:all 0.15s;
}
.j-row-handle:hover { background:#e0e7ff; color:#3b82f6; }
.j-row-handle:active { cursor:grabbing; }
.j-row-dragging { opacity:0.4; background:#fef3c7 !important; }
.j-row-ghost {
  position:fixed; z-index:99999; pointer-events:none; opacity:0.85;
  background:#fffbeb; border:2px solid #f59e0b; border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,0.2); padding:4px 8px; font-size:12px;
  max-width:80vw; overflow:hidden; white-space:nowrap;
}
.j-row-drop-line {
  position:absolute; left:0; right:0; height:3px; background:#3b82f6;
  z-index:99998; pointer-events:none; border-radius:2px;
  box-shadow:0 0 6px rgba(59,130,246,0.5);
}/* ── 행 높이 드래그 조절 ── */

.j-row-grip {
  position:absolute; left:0; right:8px; bottom:0; height:8px; cursor:row-resize;
  z-index:11; background:transparent;
}
.j-row-grip:hover { background:rgba(59,130,246,0.35); }/* ── 편집 도구 셀 (행 +/- / 드래그) 개선 ── */

.j-edit-del {
  width:36px !important; background:#f8f9fa !important; border:1px solid #ddd !important;
  text-align:center; padding:1px !important; white-space:nowrap; vertical-align:middle;
}
.j-edit-tools {
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.j-edit-tools .j-tool-btn {
  display:flex; align-items:center; justify-content:center;
  width:24px; height:18px; border-radius:4px; border:none;
  font-size:14px; font-weight:700; cursor:pointer; transition:all 0.12s;
  line-height:1; padding:0;
}
.j-tool-btn.j-btn-add { background:#e8f4fd; color:#2563eb; }
.j-tool-btn.j-btn-add:hover { background:#2563eb; color:#fff; }
.j-tool-btn.j-btn-del { background:#fef2f2; color:#dc2626; }
.j-tool-btn.j-btn-del:hover { background:#dc2626; color:#fff; }
.j-tool-btn.j-btn-drag {
  cursor:grab; background:transparent; color:#aaa; font-size:11px; height:14px;
  letter-spacing:-1px;
}
.j-tool-btn.j-btn-drag:hover { color:#2563eb; }
.j-tool-btn.j-btn-drag:active { cursor:grabbing; }/* ── 하단 가로 도구 바 ── */

.j-bottom-bar {
  display:flex; justify-content:center; align-items:center; gap:8px;
  padding:7px 0; background:#f0f6ff; border:2px dashed #90b8f8;
  transition:all 0.15s; flex-wrap:wrap;
}
.j-bottom-bar:hover { background:#dbeafe; border-color:#2563eb; }
.j-bottom-bar .j-btm-btn {
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 14px; border-radius:6px; border:none;
  font-size:12px; font-weight:600; cursor:pointer; transition:all 0.12s;
}
.j-btm-btn.j-btm-add { background:#e8f4fd; color:#2563eb; }
.j-btm-btn.j-btm-add:hover { background:#2563eb; color:#fff; }
.j-btm-btn.j-btm-del { background:#fef2f2; color:#dc2626; }
.j-btm-btn.j-btm-del:hover { background:#dc2626; color:#fff; }
.j-btm-btn .j-btm-icon { font-size:16px; font-weight:700; }/* 인쇄 스타일 */

@media print {
  /* 인쇄 시 전체 UI 숨기기 */
  body > * { display:none !important; }
  
  /* 일지 팝업이 열려있으면 일지만 표시 */
  .journal-overlay.open { 
    display:block !important; 
    position:static !important; 
    background:none !important; 
    padding:0 !important;
    overflow:visible !important;
  }
  .journal-overlay.open .journal-box { 
    box-shadow:none !important; 
    border-radius:0 !important;
    max-width:100% !important;
    width:100% !important;
  }
  .journal-overlay.open .journal-header-btns { display:none !important; }
  /* 헤더는 인쇄 시 숨김 — 표 안에 이미 일지 제목이 있어 중복 */
  .journal-overlay.open .journal-header { display:none !important; }
  .journal-overlay.open .journal-toolbar {
    padding:8px 16px !important;
    border-bottom:1px solid #ddd !important;
  }
  .journal-overlay.open .journal-toolbar input,
  .journal-overlay.open .journal-toolbar label { font-size:11px !important; }
  .journal-overlay.open .journal-body { 
    padding:10px !important;
    overflow:visible !important;
  }
  
  /* 일지 팝업 안열려있으면 content-section만 표시 */
  body:not(:has(.journal-overlay.open)) .content-section.active {
    display:block !important;
  }
  
  /* 테이블 색상 인쇄 */
  .jform-table .jtitle {
    -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;
    background:#D6D6D6 !important; color:#353C4E !important;
  }
  .jform-table .jsubtitle {
    -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;
    background:#E5E5E5 !important; color:#353C4E !important;
  }
  .jform-table .jhdr {
    -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;
    background:#CEDEEF !important; color:#353C4E !important;
  }
  .jform-table .jperiod { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; background:#CEDEEF !important; }
  .jform-table .jcat { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; background:#fff !important; }
  .jform-table .jspecial { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; background:#fffef0 !important; }
  .jform-table { font-size:10px !important; }
  .jform-table td { padding:3px 5px !important; }
  .jform-table input, .jform-table textarea, .jform-table select {
    border:none !important; background:transparent !important;
    font-size:10px !important; font-family:inherit !important;
    -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;
  }
  .jform-table .jspecial { background:#fffef0 !important; }

  /* ─── 인쇄 컴팩트 (모든 일지) — A4 가로 한 장에 들어가게 ─── */
  .journal-overlay.open .jform-table { font-size:8.5px !important; line-height:1.2 !important; }
  .journal-overlay.open .jform-table td { padding:1px 3px !important; line-height:1.2 !important; }
  .journal-overlay.open .jform-table input,
  .journal-overlay.open .jform-table textarea,
  .journal-overlay.open .jform-table select { font-size:8.5px !important; padding:0 2px !important; line-height:1.2 !important; }
  .journal-overlay.open .journal-toolbar { padding:3px 10px !important; font-size:9.5px !important; }
  .journal-overlay.open .journal-toolbar input { padding:1px 5px !important; font-size:9.5px !important; }
  /* 표 외 일반 .field/.input/.textarea 도 압축 */
  .journal-overlay.open .journal-body input,
  .journal-overlay.open .journal-body textarea,
  .journal-overlay.open .journal-body select { font-size:9.5px !important; padding:1px 5px !important; }
  .journal-overlay.open .journal-body textarea { min-height:18px !important; }
  /* 본문 패딩 최소화 */
  .journal-overlay.open .journal-body { padding:6px 10px !important; }
  
  /* 일지 외 UI 요소 숨김 */
  .sidebar, .topbar, .hwpx-guide-overlay, .toast-container, 
  .jwrite-card, .journal-list-section, .ccp-page-header,
  .chk-tabs, .chk-score-card, .ccp-log-form-card, 
  .ccp-log-records-card, .sec-chk-layout { display:none !important; }
  
  /* 멀티페이지: 인쇄 시 모든 페이지 표시, 페이지별 별도 장 */
  .j-page-tabs { display:none !important; }
  .j-page-sec { display:block !important; margin-bottom:0; }
  .j-page-sec + .j-page-sec { page-break-before:always; }

  /* 사진 첨부: 인쇄 시 버튼/플레이스홀더 숨기고 사진만 표시 */
  .j-photo-btn, .j-photo-remove, .j-photo-placeholder { display:none !important; }
  .j-photo-drop { border:1px solid #ccc !important; background:#fff !important; min-height:auto !important; cursor:default !important; }
  .j-photo-preview { border:1px solid #ccc !important; min-height:150px !important; }
  .j-photo-preview img { max-width:100% !important; max-height:250px !important; }

  /* 페이지 설정 */
  @page { size:A4 landscape; margin:12mm 10mm; }

  /* ─── 인쇄 시 데스크톱 폭 강제 (모바일/태블릿 폭에서 인쇄해도 PC 화면처럼 출력) ─── */
  html, body { min-width:1100px !important; }
  .journal-overlay.open .journal-box,
  .journal-overlay.open .journal-body,
  .journal-overlay.open .jform-table { min-width:1080px !important; }
  /* 반응형으로 column으로 바뀐 layout 강제 row */
  .journal-overlay.open .journal-toolbar { flex-direction:row !important; gap:8px !important; }
  /* 일지 내 모든 grid/flex 자동 단계 축소 막기 */
  .journal-overlay.open [style*="grid-template-columns"] { grid-template-columns:unset !important; }

  /* ─── 페이지 잘림 방지 (2026-04-27) ─── */
  /* tr 단위로 페이지 넘어갈 때 셀 절반만 잘리는 현상 방지 */
  .jform-table tr { page-break-inside: avoid !important; break-inside: avoid !important; }
  .jform-table thead { display: table-header-group; }
  .jform-table tfoot { display: table-footer-group; }
  /* 제목/소제목 행 다음에 바로 페이지 끊기지 않게 */
  .jform-table .jtitle,
  .jform-table .jsubtitle,
  .jform-table .jhdr { page-break-after: avoid !important; break-after: avoid !important; }
  /* 사진/서명 블록만 잘리지 않게 (전체 표 강제 X — 빈 페이지 발생 원인) */
  .j-photo-drop, .j-photo-preview, .j-sign-pad { page-break-inside: avoid !important; break-inside: avoid !important; }
  /* Webkit 흰 띠 방지 */
  .jform-table, .jform-table * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  /* 일지 본문 전체를 한 흐름으로 — 표 + 외부 필드(이탈내역/특이사항 등)가 같은 페이지에 채워지도록 */
  .journal-overlay.open .journal-body { orphans: 99; widows: 99; }
  /* 폼 외 .field/.row 같은 후속 블록도 작게 + 윗 표와 붙어서 흐름 */
  .journal-overlay.open .journal-body > *:not(.jform-table) { font-size:10px !important; margin-top:4px !important; margin-bottom:4px !important; page-break-before: avoid !important; break-before: avoid !important; }
  .journal-overlay.open .journal-body label { font-size:10px !important; }
  /* 표 마지막 다음에 후속 블록(이탈내역/특이사항)이 페이지 넘어가지 않게 */
  .journal-overlay.open .jform-table { page-break-after: avoid !important; break-after: avoid !important; }
  /* 마지막 테이블 행도 break-inside avoid — 행이 너무 커서 새 페이지로 밀리는 경우 방지하려면 행 자체 압축 */
  .journal-overlay.open .jform-table textarea { min-height:18px !important; height:18px !important; }
  .journal-overlay.open .jform-table tr { break-inside: auto !important; page-break-inside: auto !important; }

  /* ─── 인쇄 시 숨길 UI (보기전용 배너 / 작성완료 워터마크) ─── */
  #jViewOnlyBanner,
  #journalLockedOverlay { display: none !important; }
}/* ====== 일지 작성 카드 ====== */

.jwrite-card {
  background: linear-gradient(135deg, #444444 0%, #6E6E75 100%);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(26,58,92,0.25);
}
.jwrite-card-title {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.jwrite-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.jwrite-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f3f4f6;
  color: #444444;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
  white-space: nowrap;
}
.jwrite-btn:hover {
  background: #e5e7eb;
  border-color: #8A8A92;
  transform: translateY(-1px);
}/* ── 주기별 탭 네비게이션 (SmartHACCPMAN 스타일) ── */

.jtab-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #CEDEEF;
  margin-bottom: 20px;
  overflow-x: auto;
}
.jtab-nav button {
  background: none;
  border: none;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #888;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.jtab-nav button:hover { color: #444444; }
.jtab-nav button.active {
  color: #444444;
  border-bottom-color: #8A8A92;
}
.jtab-panel { display: none; }
.jtab-panel.active { display: block; }
.jtab-sub-label {
  font-size: 12px;
  font-weight: 700;
  color: #8A8A92;
  margin: 16px 0 8px;
  letter-spacing: 0.5px;
}
.jtab-sub-label:first-child { margin-top: 0; }
.jtab-cat-label {
  font-size: 14px;
  font-weight: 700;
  color: #353C4E;
  border-bottom: 2px solid #CEDEEF;
  padding-bottom: 6px;
  margin: 20px 0 12px;
}
.jtab-cat-label:first-child { margin-top: 0; }/* 팝업 헤더 개선 */

.journal-header {
  background: linear-gradient(135deg, #444444, #6E6E75) !important;
}
.journal-header h2 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fff !important;
}
.btn-jedit, .btn-jedit-save, .btn-jdraft, .btn-jsave, .btn-jload, .btn-jprint, .btn-jpdf, .btn-jclose {
  border: none !important;
  border-radius: 6px !important;
  padding: 7px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  color: #fff !important;
}/* 일지 목록 버튼 */

.journal-list-section { margin:16px 0; }
.journal-open-btn {
  display:flex; align-items:center; gap:8px; width:100%;
  background:rgba(0,0,0,0.05); color:var(--mono-text); border-bottom:1px solid rgba(0,0,0,0.12); border:none; border-radius:6px;
  padding:9px 14px; font-size:13px; font-weight:600; cursor:pointer;
  margin-bottom:5px; box-sizing:border-box; transition:background .15s;
}
.journal-open-btn:hover { background:#6E6E75; }
.journal-open-btn .jbtn-icon { font-size:15px; flex-shrink:0; }/* ── 매뉴얼 페이지 ── */

@keyframes mnlFadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes mnlFadeIn { from { opacity:0; } to { opacity:1; } }/* ── 매뉴얼 페이지 ── */

.mnl-wrap { max-width:980px; margin:0 auto; padding:24px 20px 60px; }
.mnl-hero { background:#444444; border-radius:8px; padding:34px 28px; margin-bottom:24px; color:#fff; text-align:center; position:relative; overflow:hidden; }
.mnl-hero::before { content:none; }
.mnl-hero-title { font-size:24px; font-weight:900; letter-spacing:0; margin-bottom:6px; position:relative; }
.mnl-hero-sub { font-size:14px; opacity:.72; margin-bottom:18px; position:relative; }
.mnl-hero-btns { display:flex; gap:10px; justify-content:center; position:relative; }
.mnl-hero-btn { padding:10px 22px; border-radius:8px; font-size:14px; font-weight:800; cursor:pointer; border:none; display:inline-flex; align-items:center; gap:6px; transition:transform .15s; }
.mnl-hero-btn:hover { transform:translateY(-1px); }
.mnl-hero-btn.primary { background:var(--mono-accent); color:#000; }
.mnl-hero-btn.outline { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.3); }/* 카드 그리드 TOC */

.mnl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }
.mnl-grid-card { background:var(--white); border:1px solid var(--border); border-radius:8px; padding:22px 18px; cursor:pointer; transition:transform .2s,box-shadow .2s,border-color .2s; position:relative; overflow:hidden; }
.mnl-grid-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.08); border-color:var(--mono-accent); }
.mnl-grid-card-num { position:absolute; top:12px; right:14px; width:26px; height:26px; border-radius:8px; background:#444444; color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.mnl-grid-card-icon { width:42px; height:42px; border-radius:8px; background:#444444; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.mnl-grid-card-icon svg { color:#fff; }
.mnl-grid-card-title { font-size:16px; font-weight:800; color:var(--mono-text); margin-bottom:5px; }
.mnl-grid-card-desc { font-size:13px; color:var(--gray4); line-height:1.5; }
.mnl-grid-card-arrow { position:absolute; bottom:14px; right:14px; color:var(--gray4); font-size:16px; transition:transform .2s; }
.mnl-grid-card:hover .mnl-grid-card-arrow { transform:translateX(3px); color:var(--mono-accent); }/* 상세 모달 오버레이 */

.mnl-detail-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); z-index:9999; opacity:0; pointer-events:none; transition:opacity .25s; display:flex; align-items:center; justify-content:center; }
.mnl-detail-overlay.open { opacity:1; pointer-events:auto; }
.mnl-detail-panel { background:var(--white); border-radius:8px; width:92%; max-width:860px; max-height:88vh; overflow-y:auto; transform:translateY(30px); transition:transform .3s ease; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.mnl-detail-overlay.open .mnl-detail-panel { transform:translateY(0); }
.mnl-detail-header { position:sticky; top:0; background:var(--white); border-bottom:1px solid var(--border); padding:14px 20px; display:flex; align-items:center; gap:12px; z-index:2; border-radius:8px 8px 0 0; }
.mnl-detail-back { width:36px; height:36px; border-radius:8px; border:1px solid var(--border); background:var(--bg2); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; flex-shrink:0; }
.mnl-detail-back:hover { background:var(--border); }
.mnl-detail-htitle { font-size:18px; font-weight:900; color:var(--mono-text); }
.mnl-detail-hnum { font-size:13px; color:var(--gray4); margin-left:auto; background:var(--bg2); padding:4px 10px; border-radius:6px; font-weight:800; }
.mnl-detail-body { padding:24px; }/* 스크린샷 */

.mnl-screenshot { position:relative; border-radius:8px; overflow:hidden; border:1px solid var(--border); margin-bottom:20px; background:#f5f5f6; min-height:90px; }
.mnl-screenshot img { width:100%; display:block; }
.mnl-screenshot-missing:before { content:'화면 이미지를 불러오지 못했습니다'; display:flex; align-items:center; justify-content:center; min-height:120px; color:var(--gray4); font-size:12px; font-weight:700; }
.mnl-screenshot-label { padding:9px 14px; font-size:13px; color:var(--gray4); background:var(--bg2); display:flex; align-items:center; gap:6px; }/* 스텝 + 팁 (재사용) */
.mnl-shot-pins { position:absolute; inset:0; pointer-events:none; }
.mnl-shot-pin { position:absolute; width:28px; height:28px; border-radius:50%; background:#444444; color:#fff; border:3px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,.22); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; transform:translate(-50%,-50%); }
.mnl-shot-pin.pin-1 { left:4%; top:8%; }
.mnl-shot-pin.pin-2 { left:46%; top:16%; }
.mnl-shot-pin.pin-3 { right:8%; top:26%; }
.mnl-shot-pin.pin-4 { right:12%; bottom:18%; }
.mnl-callouts { display:flex; flex-wrap:wrap; gap:6px; padding:10px 12px; background:#fff; border-top:1px solid var(--border); }
.mnl-callout { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#f5f5f6; color:#444444; border:1px solid #dedee2; font-size:12px; font-weight:800; }
.mnl-callout b { width:17px; height:17px; border-radius:50%; background:#444444; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:10px; line-height:1; }

.mnl-step { display:flex; gap:14px; margin-bottom:14px; position:relative; }
.mnl-step:last-child { margin-bottom:0; }
.mnl-step-num { width:30px; height:30px; border-radius:50%; background:#6E6E75; color:#fff; font-size:13px; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; z-index:1; }
.mnl-step:not(:last-child) .mnl-step-num::after { content:''; position:absolute; top:28px; left:50%; width:2px; height:calc(100% + 14px); background:var(--border); transform:translateX(-50%); z-index:0; }
.mnl-step-content { flex:1; padding-top:3px; }
.mnl-step-title { font-size:15px; font-weight:900; color:var(--mono-text); margin-bottom:4px; }
.mnl-step-desc { font-size:14px; color:var(--text); line-height:1.7; }
.mnl-tip { display:flex; gap:10px; padding:12px 16px; border-radius:8px; font-size:14px; line-height:1.7; margin-top:12px; }
.mnl-tip.info { background:#f7f7f8; border:1px solid #dedee2; color:#444444; }
.mnl-tip.warn { background:#f7f7f8; border:1px solid #cfcfd4; color:#333333; }
.mnl-tip.important { background:#f2f2f3; border:1px solid #c8c8ce; color:#222222; }
.mnl-tip-icon { font-size:14px; flex-shrink:0; margin-top:1px; }
.mnl-section-title { font-size:18px; font-weight:900; color:var(--mono-text); margin:20px 0 14px; padding-bottom:8px; border-bottom:2px solid #8A8A92; display:flex; align-items:center; gap:8px; }/* FAQ */

.mnl-faq-item { border-bottom:1px solid var(--border); padding:14px 0; }
.mnl-faq-item:last-child { border-bottom:none; }
.mnl-faq-q { font-size:15px; font-weight:900; color:var(--mono-text); margin-bottom:5px; }
.mnl-faq-a { font-size:14px; color:var(--text); line-height:1.7; padding-left:16px; }/* 다크모드 */
.ms-ops-board { margin-bottom:18px; padding:16px; background:#fff; border:1px solid #dbe3ef; border-radius:8px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.ms-ops-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.ms-ops-title { font-size:15px; font-weight:900; color:#111827; }
.ms-ops-desc { font-size:12px; color:#6b7280; margin-top:4px; }
.ms-ops-head-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.ms-ops-badge { font-size:11px; font-weight:800; border-radius:999px; padding:5px 10px; white-space:nowrap; }
.ms-ops-badge.warn { color:#b45309; background:#fffbeb; border:1px solid #fde68a; }
.ms-ops-badge.ok { color:#15803d; background:#ecfdf5; border:1px solid #bbf7d0; }
.ms-ops-workday-note { font-size:11px; color:#64748b; white-space:nowrap; }
.ms-ops-workday-toggle { border:1px solid #cbd5e1; background:#fff; color:#334155; border-radius:6px; padding:5px 9px; font-size:11px; font-weight:800; cursor:pointer; white-space:nowrap; }
.ms-ops-workday-toggle:hover { background:#f8fafc; border-color:#94a3b8; }
.ms-ops-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.ms-ops-card { min-height:78px; text-align:left; background:#f9fafb; border:1px solid #e5e7eb; border-radius:8px; padding:12px 14px; cursor:pointer; font-family:inherit; display:flex; flex-direction:column; justify-content:center; }
.ms-ops-card.is-alert { background:#fff7ed; border-color:#fed7aa; }
.ms-ops-num { font-size:24px; font-weight:900; color:#111827; line-height:1; }
.ms-ops-card.is-alert .ms-ops-num { color:#c2410c; }
.ms-ops-label { font-size:12px; font-weight:800; color:#374151; margin-top:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ms-ops-action { font-size:11px; color:#6b7280; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:1100px) {
  .ms-ops-head { flex-direction:column; }
  .ms-ops-head-actions { width:100%; justify-content:space-between; }
  .ms-ops-row { display:flex; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
  .ms-ops-card { flex:0 0 170px; }
}
@media (max-width:768px) {
  .mnl-hero { padding:28px 20px; }
  .mnl-hero-title { font-size:18px; }
  .mnl-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .mnl-hero-btns { flex-direction:column; align-items:center; }
  .mnl-detail-panel { width:96%; max-height:92vh; border-radius:14px; }
}
@media (max-width:480px) {
  .mnl-grid { grid-template-columns:1fr; }
}/* ══════════════════════════════════════
   오늘 미작성 일지 목록
══════════════════════════════════════ */

.undone-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--gray2);
}
.undone-item:last-child { border-bottom: none; }
.undone-name {
  font-size: 12.5px;
  color: var(--gray3);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.undone-btn {
  font-size: 11px;
  font-weight: 700;
  color: #dc2626;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 5px;
  transition: all 0.12s;
  white-space: nowrap;
  flex-shrink: 0;
}
.undone-btn:hover {
  background: rgba(220,38,38,0.08);
  color: #b91c1c;
}/* ── 온도기록 시트 테이블 ── */

.temp-sheet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.temp-sheet-table td {
  border: 1.5px solid var(--border);
  padding: 5px 8px;
  white-space: nowrap;
  color: var(--text-primary);
}
.temp-sheet-table tr:first-child td {
  background: var(--bg-secondary, #f8fafc);
  font-weight: 600;
  font-size: 11px;
  color: var(--text-secondary, #475569);
}/* ── 재상표시 버튼 ── */

.temp-defrost-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  border: 2px solid #f59e0b;
  border-radius: 8px;
  background: #fef3c7;
  color: #92400e;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.temp-defrost-btn:hover { background: #fde68a; border-color: #d97706; }
.temp-defrost-btn.active { background: #fef08a !important; color: #92400e !important; border-color: #fbbf24 !important; box-shadow: 0 0 0 2px rgba(251,191,36,0.3); }/* ── 재상 마킹 셀 ── */

.temp-defrost-marked { background: #fef08a !important; color: #92400e !important; }

.btn-del-sm {
  background: none;
  border: none;
  color: var(--gray3);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}
.btn-del-sm:hover { background: #fee2e2; color: #dc2626; }/* ── 온도기록 요약 카드 ── */

.temp-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 16px 0 8px;
}
@media (max-width: 768px) {
  .temp-stats-grid { grid-template-columns: repeat(2, 1fr); }
}/* 원료수불 좌우분할 → 모바일에서 세로 */

@media (max-width: 900px) {
  #rawSplitView { flex-direction: column !important; }
  #rawSplitView #rawPanel-prod { flex: none !important; min-width: 0 !important; width: 100% !important; }
}
.temp-stat-card {
  background: var(--white);
  border: 1px solid var(--gray2);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.temp-stat-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.temp-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray3);
  letter-spacing: 0.3px;
}
.temp-stat-value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  margin-top: 2px;
}
.temp-stat-value small {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.7;
}/* ── 온도기록 탭 ── */

.temp-tabs {
  display: flex;
  gap: 0;
  margin: 16px 0 12px;
  border-bottom: 2px solid var(--gray2);
}
.temp-tab {
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.temp-tab:hover { color: var(--mono-text); }
.temp-tab.active {
  color: var(--mono-text);
  border-bottom-color: var(--mono-text);
}

.temp-view-panel { margin-top: 4px; }
#tempViewChart { min-height: 300px; }/* 온보딩 필터 버튼 */

.ob-filter-btn.active { background: rgba(0,0,0,0.08) !important; color: var(--mono-text) !important; border-color: rgba(0,0,0,0.25) !important; }
.ob-filter-btn:hover:not(.active) { background: var(--gray1) !important; }/* 업체 편집 모드 배너 */

.company-edit-banner {
  background: #8b5cf6; color: #fff; padding: 10px 20px;
  font-weight: 600; display: flex; align-items: center;
  justify-content: space-between; font-size: 14px;
  z-index: 50;
}
.company-edit-banner button:hover { background: rgba(0,0,0,0.35) !important; }/* ── 온도기록 사이드바 파란색 ── */

#menu-temperature { color: #2563eb !important; }
#menu-temperature:hover { color: #3b82f6 !important; }
#menu-temperature.active { color: #5ac8fa !important; }/* 관리자 사이드바 아이콘 */

.admin-nav-icon { display:inline-flex; align-items:center; margin-right:8px; opacity:0.5; }
.admin-nav-item.active .admin-nav-icon { opacity:1; }/* ═══ 업체 워크스페이스 ═══ */

.cw-container { display:flex; gap:0; min-height:calc(100vh - 120px); border:1px solid var(--gray2); border-radius:12px; overflow:hidden; background:var(--white); }
.cw-container.cw-mobile { flex-direction:column; }
.cw-list-panel { width:280px; min-width:280px; border-right:1px solid var(--gray2); display:flex; flex-direction:column; background:var(--gray0, #fafafa); }
.cw-list-header { padding:12px; border-bottom:1px solid var(--gray2); display:flex; flex-direction:column; gap:8px; }
.cw-search { width:100%; height:44px; padding:0 12px; font-size:15px; border:1px solid var(--gray2); border-radius:8px; box-sizing:border-box; }
.cw-consultant-select { height:32px; padding:0 8px; font-size:13px; border:1px solid var(--gray2); border-radius:6px; background:var(--white); color:var(--mono-text); min-width:0; max-width:140px; }
.cw-filter-label { font-size:13px; color:var(--gray4); display:flex; align-items:center; gap:4px; white-space:nowrap; }
.cw-list { flex:1; overflow-y:auto; }
.cw-list-item { padding:14px 16px; border-bottom:1px solid var(--gray1); cursor:pointer; transition:background .15s; }
.cw-list-item:hover { background:var(--gray1); }
.cw-list-item.cw-selected { background:var(--primary-light, #fff8e1); border-left:3px solid var(--primary); }
.cw-list-name { font-size:15px; font-weight:700; color:var(--mono-text); margin-bottom:2px; }
.cw-list-meta { font-size:12px; color:var(--gray4); }
.cw-list-empty { padding:20px; text-align:center; color:var(--gray4); font-size:14px; }
.cw-badge-inactive { font-size:10px; color:#ef4444; background:#fef2f2; padding:1px 6px; border-radius:4px; margin-left:6px; }
.cw-add-btn { margin:12px; padding:12px; font-size:15px; font-weight:700; background:rgba(0,0,0,0.05); color:var(--mono-text); border:1px solid rgba(0,0,0,0.18); border:none; border-radius:8px; cursor:pointer; min-height:44px; }
.cw-detail-panel { flex:1; padding:24px; overflow-y:auto; }
.cw-empty { display:flex; align-items:center; justify-content:center; height:300px; color:var(--gray4); font-size:16px; }
.cw-back-btn { background:none; border:none; color:var(--primary); font-size:15px; font-weight:700; cursor:pointer; padding:8px 0; margin-bottom:12px; }
.cw-detail-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.cw-detail-name { font-size:20px; font-weight:700; color:var(--mono-text); margin:0; }
.cw-detail-tier { font-size:12px; padding:3px 10px; border-radius:6px; background:var(--gray1); color:var(--gray5); font-weight:600; }
.cw-wizard-steps { display:flex; gap:4px; margin-bottom:20px; }
.cw-step { flex:1; text-align:center; padding:10px 8px; font-size:14px; font-weight:600; border-radius:8px; background:var(--gray1); color:var(--gray4); }
.cw-step.active { background:rgba(0,0,0,0.05); color:var(--mono-text); border:1px solid rgba(0,0,0,0.18); }
.cw-step.done { background:#d1fae5; color:#065f46; }
.cw-tabs { display:flex; gap:0; border-bottom:2px solid var(--gray2); margin-bottom:20px; }
.cw-tab { padding:12px 20px; font-size:15px; font-weight:600; border:none; background:none; color:var(--gray4); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; min-height:44px; }
.cw-tab:hover { color:var(--mono-text); }
.cw-tab.cw-tab-active { color:var(--primary); border-bottom-color:var(--primary); }/* ── 업체 메모 탭 (노트북 페이지 스타일) ── */

.cw-memo-tab {
  width: 100%;
  min-height: calc(100vh - 260px);
  display: flex;
  flex-direction: column;
}
.company-memo-paper {
  position: relative;
  background:
    /* 가로 줄 (파란 잉크) */
    linear-gradient(transparent 0px, transparent 35px, rgba(60, 110, 170, 0.28) 36px, transparent 37px),
    /* 종이 질감 노이즈 (옅은 고주파) */
    radial-gradient(ellipse at top left, rgba(255, 248, 220, 0.6), transparent 70%),
    radial-gradient(ellipse at bottom right, rgba(245, 230, 200, 0.5), transparent 70%),
    /* 기본 크림색 */
    #faf4e2;
  background-size: 100% 36px, auto, auto, auto;
  border-radius: 0 10px 10px 0;
  box-shadow:
    /* 메인 그림자 */
    0 16px 40px rgba(60, 40, 20, 0.14),
    0 4px 12px rgba(60, 40, 20, 0.08),
    /* 종이 왼쪽 안쪽 그림자 (스프링 쪽) */
    inset 2px 0 4px rgba(0, 0, 0, 0.06),
    /* 종이 오른쪽 아래 curl 느낌 */
    inset -1px -1px 0 rgba(0, 0, 0, 0.04);
  padding: 44px 40px 40px 92px;
  overflow: hidden;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}/* 종이 오른쪽 마진 세로선 (파란 잉크, 얇게) */

.company-memo-paper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 32px;
  width: 1px;
  background: rgba(60, 110, 170, 0.12);
  pointer-events: none;
}/* 종이 왼쪽 빨간 마진선 (제본 옆) */

.company-memo-paper::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 74px;
  width: 1.5px;
  background: rgba(200, 60, 70, 0.45);
  pointer-events: none;
  box-shadow: 0 0 1px rgba(200, 60, 70, 0.2);
}
.company-memo-spring {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 46px;
  background:
    linear-gradient(90deg,
      rgba(210, 180, 140, 0.25) 0%,
      rgba(210, 180, 140, 0.12) 60%,
      rgba(210, 180, 140, 0.02) 100%
    );
  border-right: 1.5px solid rgba(200, 60, 60, 0.55);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.4);
}/* 스프링 링 — 원형 구멍 + 메탈 그라디언트 */

.company-memo-spring::before {
  content: '';
  position: absolute;
  top: 28px;
  bottom: 20px;
  left: 14px;
  width: 18px;
  background-image:
    radial-gradient(
      ellipse 9px 8px at center,
      rgba(30, 30, 30, 0.55) 0%,
      rgba(60, 60, 60, 0.4) 30%,
      rgba(140, 140, 140, 0.15) 55%,
      transparent 70%
    );
  background-size: 20px 48px;
  background-repeat: repeat-y;
  background-position: center 0;
}/* 스프링 링 하이라이트 (메탈 반사) */

.company-memo-spring::after {
  content: '';
  position: absolute;
  top: 28px;
  bottom: 20px;
  left: 14px;
  width: 18px;
  background-image:
    radial-gradient(
      ellipse 4px 2px at 50% 35%,
      rgba(255, 255, 255, 0.7) 0%,
      transparent 80%
    );
  background-size: 20px 48px;
  background-repeat: repeat-y;
  background-position: center 0;
  pointer-events: none;
}
.company-memo-label {
  font-family: 'Gaegu', 'Noto Sans KR', cursive;
  font-size: 26px;
  font-weight: 700;
  color: rgba(80, 40, 20, 0.75);
  margin-bottom: 18px;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: rotate(-0.5deg);
  display: inline-block;
}
.company-memo-text {
  width: 100%;
  flex: 1;
  min-height: 500px;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-family: 'Gaegu', 'Noto Sans KR', cursive;
  font-size: 19px;
  line-height: 36px;
  color: #2a3a4a;
  padding: 0;
  letter-spacing: 0.3px;
}
.company-memo-text::placeholder {
  color: rgba(80, 80, 100, 0.35);
  font-style: italic;
  font-family: 'Gaegu', cursive;
}
@media (max-width: 768px) {
  .cw-memo-tab { min-height: calc(100vh - 220px); }
  .company-memo-paper {
    padding: 28px 20px 24px 60px;
    margin-bottom: 18px;
    background-size: 100% 32px, auto, auto, auto;
  }
  .company-memo-paper::before { left: 50px; }
  .company-memo-paper::after { right: 16px; }
  .company-memo-text { min-height: 350px; font-size: 17px; line-height: 32px; }
  .company-memo-label { font-size: 22px; }
  .company-memo-spring { width: 36px; }
  .company-memo-spring::before,
  .company-memo-spring::after { left: 10px; width: 16px; background-size: 18px 44px; }
}

.cw-form { max-width:600px; }
.cw-field { margin-bottom:16px; }
.cw-label { display:block; font-size:14px; font-weight:700; color:var(--mono-text); margin-bottom:6px; }
.cw-input { width:100%; height:44px; padding:0 12px; font-size:15px; border:1px solid var(--gray2); border-radius:8px; box-sizing:border-box; }
.cw-ccp-checks { display:flex; flex-wrap:wrap; gap:8px; }
.cw-check-label { font-size:14px; display:flex; align-items:center; gap:4px; padding:6px 10px; background:var(--gray1); border-radius:6px; cursor:pointer; }
.cw-room-row { display:flex; gap:6px; align-items:center; margin-bottom:6px; }
.cw-room-row .cw-input { width:200px; }
.cw-room-del { background:none; border:none; color:#ef4444; font-size:18px; cursor:pointer; padding:4px 8px; }
.cw-room-add { font-size:13px; color:var(--primary); background:none; border:none; cursor:pointer; font-weight:600; padding:4px 0; }
.cw-actions { margin-top:24px; display:flex; gap:10px; }
.cw-btn-primary { padding:12px 24px; font-size:14px; font-weight:700; background:rgba(0,0,0,0.05); color:var(--mono-text); border:1px solid rgba(0,0,0,0.18); border-radius:2px; cursor:pointer; min-height:44px; letter-spacing:0.02em; }
.cw-btn-primary:hover { background:rgba(0,0,0,0.10); }
.cw-btn-secondary { padding:12px 24px; font-size:15px; font-weight:600; background:var(--gray1); color:var(--mono-text); border:1px solid var(--gray2); border-radius:8px; cursor:pointer; min-height:44px; }
.cw-journal-group { margin-bottom:16px; }
.cw-journal-group-name { font-size:14px; font-weight:700; color:var(--mono-text); margin-bottom:8px; padding-bottom:4px; border-bottom:1px solid var(--gray2); }
.cw-journal-item { display:block; font-size:14px; padding:6px 0; cursor:pointer; }
.cw-team-tab #cjRolesContent { margin:0; }

/* ═══ 구독 플랜 탭 (모노톤) ═══ */
.cw-sub-form { max-width: 760px; }
.cw-sub-section { margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.cw-sub-section:last-of-type { border-bottom: none; }
.cw-sub-h { font-size: 13px; font-weight: 700; color: var(--mono-text); margin: 0 0 14px 0; letter-spacing: -0.01em; text-transform: uppercase; opacity: 0.85; }

.cw-sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.cw-sub-cell { padding: 14px 16px; border: 1px solid rgba(0,0,0,0.10); border-radius: 2px; background: var(--white); }
.cw-sub-cell-label { font-size: 11px; color: var(--ink-soft); margin-bottom: 6px; letter-spacing: 0.02em; }
.cw-sub-cell-value { font-size: 16px; font-weight: 700; color: var(--mono-text); }
.cw-sub-cell-sub { font-size: 11px; color: var(--ink-soft); margin-top: 4px; }

.cw-sub-chips { margin-bottom: 16px; }
.cw-sub-chip-label { font-size: 11px; color: var(--ink-soft); margin-bottom: 8px; letter-spacing: 0.02em; }
.cw-sub-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cw-sub-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 12px; font-weight: 600; border-radius: 2px; }
.cw-sub-chip.on { background: rgba(0,0,0,0.06); color: var(--mono-text); border: 1px solid rgba(0,0,0,0.15); }
.cw-sub-chip.off { background: transparent; color: rgba(0,0,0,0.40); border: 1px dashed rgba(0,0,0,0.18); }
.cw-sub-chip-pending { font-style: normal; font-size: 10px; padding: 2px 6px; background: #b91c1c; color: #fff; border-radius: 2px; margin-left: 4px; }

.cw-sub-card-section { margin-top: 16px; }
.cw-card-visual { margin-top: 4px; }
.cw-card-visual-bg {
  position: relative; width: 100%; max-width: 340px;
  aspect-ratio: 1.586 / 1;
  padding: 20px 22px 18px;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.08);
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  overflow: hidden;
}
.cw-card-visual-bg::after {
  content: ''; position: absolute; right: -40px; bottom: -50px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.cw-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.cw-card-co { font-size: 13px; font-weight: 800; letter-spacing: -0.01em; opacity: 0.95; }
.cw-card-short { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.65; }
.cw-card-chip {
  width: 36px; height: 26px; border-radius: 4px;
  background: linear-gradient(135deg, #d4af37 0%, #a8861f 100%);
  position: relative;
  box-shadow: inset 0 -1px 1px rgba(0,0,0,0.18);
}
.cw-card-chip::before {
  content: ''; position: absolute; inset: 4px;
  border: 1px solid rgba(0,0,0,0.20);
  border-radius: 2px;
}
.cw-card-num { display: flex; gap: 14px; align-items: baseline; font-variant-numeric: tabular-nums; }
.cw-card-num-block { font-size: 16px; font-weight: 600; letter-spacing: 0.04em; opacity: 0.92; }
.cw-card-num-block.last { font-size: 17px; font-weight: 700; letter-spacing: 0.10em; opacity: 1; }
.cw-card-bottom { display: flex; justify-content: space-between; align-items: flex-end; }
.cw-card-holder { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; opacity: 0.85; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-card-network { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; }
.cw-card-warn { padding: 14px 16px; border: 1px solid rgba(185,28,28,0.30); background: rgba(185,28,28,0.04); color: #b91c1c; font-size: 12px; line-height: 1.6; border-radius: 2px; }
.cw-card-warn strong { display: block; margin-bottom: 2px; font-size: 13px; }

.cw-bill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cw-bill-cell { padding: 16px 18px; border: 1px solid rgba(0,0,0,0.10); border-radius: 2px; background: var(--white); }
.cw-bill-cell.next { border-color: rgba(0,0,0,0.18); background: #FAFAF8; }
.cw-bill-label { font-size: 11px; color: var(--ink-soft); margin-bottom: 8px; letter-spacing: 0.02em; }
.cw-bill-value { font-size: 22px; font-weight: 800; color: var(--mono-text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cw-bill-sub { font-size: 11px; color: var(--ink-soft); margin-top: 6px; }
.cw-bill-delta { display: inline-block; margin-top: 8px; padding: 3px 8px; font-size: 11px; font-weight: 700; border-radius: 2px; font-variant-numeric: tabular-nums; }
.cw-bill-delta.up { background: rgba(185,28,28,0.10); color: #b91c1c; }
.cw-bill-delta.down { background: rgba(22,101,52,0.10); color: #166534; }

.cw-pending-list { margin-top: 16px; padding: 14px 16px; border-left: 2px solid var(--mono-text); background: rgba(0,0,0,0.03); }
.cw-pending-h { font-size: 11px; font-weight: 700; color: var(--mono-text); margin-bottom: 6px; letter-spacing: 0.02em; }
.cw-pending-item { font-size: 12px; color: var(--ink-soft); margin-bottom: 3px; }
.cw-pending-cancel { margin-top: 10px; padding: 6px 12px; font-size: 11px; font-weight: 600; background: transparent; color: #b91c1c; border: 1px solid rgba(185,28,28,0.35); border-radius: 2px; cursor: pointer; }

.cw-sub-row { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: start; padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.cw-sub-row:last-of-type { border-bottom: none; }
.cw-sub-row-label { font-size: 12px; font-weight: 700; color: var(--mono-text); padding-top: 10px; }
.cw-sub-row-control { display: flex; flex-direction: column; gap: 10px; }
.cw-sub-select { height: 40px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.18); font-size: 13px; max-width: 320px; }
.cw-sub-when { display: flex; gap: 18px; font-size: 12px; color: var(--ink-soft); }
.cw-sub-when label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cw-sub-when input { accent-color: var(--mono-text); }
.cw-sub-opt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mono-text); cursor: pointer; }
.cw-sub-opt input { width: 16px; height: 16px; accent-color: var(--mono-text); }
.cw-sub-mode { flex: 1; font-size: 12px; color: var(--ink-soft); }
.cw-sub-mode strong { color: var(--mono-text); font-weight: 700; }
.cw-sub-mode-pending { display: block; margin-top: 4px; font-size: 11px; color: #b91c1c; }
.cw-mode-btn { padding: 7px 14px; font-size: 11px; font-weight: 600; border: 1px solid rgba(0,0,0,0.18); background: transparent; border-radius: 2px; cursor: pointer; align-self: flex-start; }

.cw-sub-form .cw-btn-primary { background: rgba(0,0,0,0.05); color: var(--mono-text); border: 1px solid rgba(0,0,0,0.18); border-radius: 2px; font-size: 13px; letter-spacing: 0.02em; }
.cw-sub-form .cw-btn-primary:hover { background: rgba(0,0,0,0.10); }

.cw-support-section { border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; padding: 18px; background: #fff; }
.cw-support-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.cw-support-desc { font-size:12px; color:var(--gray4); line-height:1.5; }
.cw-support-badge { flex-shrink:0; padding:6px 10px; border:1px solid var(--gray2); border-radius:999px; color:var(--gray4); background:var(--gray1); font-size:11px; font-weight:800; }
.cw-support-badge.active { color:#166534; background:#f0fdf4; border-color:#bbf7d0; }
.cw-support-badge.error { color:#7f1d1d; background:#fef2f2; border-color:#fecaca; }
.cw-support-form { display:grid; gap:12px; margin-bottom:14px; }
.cw-support-grid { display:grid; grid-template-columns:260px 1fr; gap:10px; }
.cw-support-grid.secondary { grid-template-columns:1fr 150px; align-items:end; }
.cw-support-grid label,
.cw-support-memo { display:grid; gap:6px; font-size:12px; font-weight:800; color:var(--mono-text); }
.cw-support-grid span,
.cw-support-memo span { color:var(--gray4); font-size:11px; font-weight:800; }
.cw-support-memo textarea.cw-input { height:auto; min-height:62px; padding:10px 12px; resize:vertical; font-family:inherit; line-height:1.45; }
.cw-support-actions { display:flex; gap:8px; flex-wrap:wrap; }
.cw-support-list { display:grid; gap:8px; }
.cw-support-empty,
.cw-support-error { padding:12px; border:1px dashed var(--gray2); border-radius:8px; color:var(--gray4); font-size:12px; line-height:1.5; background:var(--gray1); }
.cw-support-error { color:#7f1d1d; background:#fef2f2; border-color:#fecaca; }
.cw-support-table { display:grid; gap:8px; }
.cw-support-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--gray2); border-radius:8px; background:#fff; }
.cw-support-row.active { border-color:#bbf7d0; background:#f8fffb; }
.cw-support-title { display:flex; align-items:center; gap:8px; color:var(--mono-text); font-size:15px; font-weight:900; }
.cw-support-title span { padding:3px 7px; border:1px solid var(--gray2); border-radius:999px; color:var(--gray4); font-size:10px; font-weight:800; background:#fff; }
.cw-support-meta { margin-top:5px; color:var(--gray4); font-size:11px; line-height:1.45; }
.cw-support-memo-text { margin-top:5px; color:var(--mono-text); font-size:12px; line-height:1.45; }
.cw-support-ended { flex-shrink:0; padding:6px 10px; border:1px solid var(--gray2); border-radius:999px; color:var(--gray4); background:var(--gray1); font-size:11px; font-weight:800; }

@media (max-width: 767px) {
  .cw-sub-grid, .cw-bill-grid { grid-template-columns: 1fr; }
  .cw-sub-row { grid-template-columns: 1fr; gap: 6px; }
  .cw-sub-row-label { padding-top: 0; }
  .cw-support-head { flex-direction:column; }
  .cw-support-grid,
  .cw-support-grid.secondary { grid-template-columns:1fr; }
  .cw-support-row { align-items:flex-start; flex-direction:column; }
}

/* ═══ 사용자 결제 페이지 카드 비주얼 ═══ */
.pay-card-visual { width: 320px; max-width: 100%; }
.pay-card-visual-bg {
  position: relative; width: 100%;
  aspect-ratio: 1.586 / 1;
  padding: 20px 22px 18px;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.08);
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  overflow: hidden;
}
.pay-card-visual-bg::after {
  content: ''; position: absolute; right: -40px; bottom: -50px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.pay-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.pay-card-co { font-size: 13px; font-weight: 800; letter-spacing: -0.01em; opacity: 0.95; }
.pay-card-short { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.65; }
.pay-card-chip {
  width: 36px; height: 26px; border-radius: 4px;
  position: relative;
  box-shadow: inset 0 -1px 1px rgba(0,0,0,0.18);
}
.pay-card-chip::before {
  content: ''; position: absolute; inset: 4px;
  border: 1px solid rgba(0,0,0,0.20);
  border-radius: 2px;
}
.pay-card-num { display: flex; gap: 14px; align-items: baseline; font-variant-numeric: tabular-nums; }
.pay-card-num-block { font-size: 16px; font-weight: 600; letter-spacing: 0.04em; opacity: 0.92; }
.pay-card-num-block.last { font-size: 17px; font-weight: 700; letter-spacing: 0.10em; opacity: 1; }
.pay-card-bottom { display: flex; justify-content: space-between; align-items: flex-end; }
.pay-card-holder { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; opacity: 0.85; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-card-network { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; }

/* 다음달 예상 청구 박스 */
.pay-next-bill {
  margin-top: 10px; padding: 12px 16px;
  border-left: 2px solid var(--mono-text);
  background: rgba(0,0,0,0.03);
}
.pay-next-label { font-size: 11px; color: var(--ink-soft); letter-spacing: 0.02em; }
.pay-next-value { font-size: 18px; font-weight: 800; color: var(--mono-text); margin-top: 4px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pay-next-delta { display: inline-block; margin-left: 6px; padding: 2px 7px; font-size: 11px; font-weight: 700; border-radius: 2px; vertical-align: middle; font-variant-numeric: tabular-nums; }
.pay-next-delta.up { background: rgba(185,28,28,0.10); color: #b91c1c; }
.pay-next-delta.down { background: rgba(22,101,52,0.10); color: #166534; }
.pay-next-sub { font-size: 11px; color: var(--ink-soft); margin-top: 4px; }
@media (max-width:767px) {
  .cw-list-panel { width:100%; min-width:auto; border-right:none; border-bottom:1px solid var(--gray2); }
  .cw-detail-panel { padding:16px; }
  .cw-detail-name { font-size:18px; }
  .cw-tab { padding:10px 14px; font-size:14px; }
}/* ═══ 일지 조회 그룹 ═══ */

.rj-group { border:1px solid var(--gray2); border-radius:10px; margin-bottom:8px; overflow:hidden; }
.rj-group-head { display:flex; align-items:center; gap:10px; padding:14px 16px; cursor:pointer; background:var(--white); transition:background .15s; }
.rj-group-head:hover { background:var(--gray0, #fafafa); }
.rj-chevron { transition:transform .2s; flex-shrink:0; }
.rj-group.open .rj-chevron { transform:rotate(90deg); }
.rj-group-name { font-size:15px; font-weight:700; color:var(--mono-text); }
.rj-rate { font-size:13px; font-weight:700; margin-left:auto; padding:2px 10px; border-radius:6px; }
.rj-rate-good { color:var(--mono-text); background:var(--gray1); }
.rj-rate-mid { color:var(--primary); background:#fffbeb; }
.rj-rate-low { color:var(--mono-text); background:var(--gray1); font-weight:800; text-decoration:underline; }
.rj-group-body { display:none; border-top:1px solid var(--gray2); }
.rj-group.open .rj-group-body { display:block; }
.rj-item { display:flex; align-items:center; gap:12px; padding:10px 16px 10px 38px; font-size:14px; border-bottom:1px solid var(--gray1); }
.rj-item:last-child { border-bottom:none; }
.rj-item.rj-undone { background:var(--gray0, #fafafa); }
.rj-item-name { flex:1; font-weight:600; color:var(--mono-text); }
.rj-item-date { min-width:70px; color:var(--gray4); font-size:13px; white-space:nowrap; }
.rj-item-status { min-width:80px; text-align:right; font-size:13px; font-weight:600; white-space:nowrap; }
.rj-undone .rj-item-status { color:var(--gray3); }
.rj-item-author { width:70px; text-align:right; color:var(--gray4); font-size:13px; }/* ═══ 기록 관리 ═══ */

.records-filter-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:20px; }
.records-select { height:44px; padding:0 12px; font-size:14px; border:1px solid var(--gray2); border-radius:8px; min-width:140px; }
.records-date-filter { display:flex; align-items:center; gap:4px; }
.records-date-input { height:44px; padding:0 10px; font-size:14px; border:1px solid var(--gray2); border-radius:8px; }
.records-preset { height:36px; padding:0 14px; font-size:13px; font-weight:600; border:1px solid var(--gray2); border-radius:18px; background:#fff; cursor:pointer; }
.records-preset.active { background:rgba(0,0,0,0.05); color:var(--mono-text); border:1px solid rgba(0,0,0,0.18); border-color:var(--primary); }
.records-table { width:100%; border-collapse:collapse; font-size:14px; }
.records-table th { text-align:left; padding:12px 16px; background:var(--gray1); font-weight:700; border-bottom:2px solid var(--gray2); }
.records-table td { padding:12px 16px; border-bottom:1px solid var(--gray1); }
.records-table tbody tr:nth-child(even) { background:#fafafa; }
.records-table tbody tr:hover { background:rgba(59,130,246,0.04); }
.status-done { color:#16a34a; font-weight:600; }
.status-undone { color:#9ca3af; }
.records-pagination { display:flex; gap:4px; justify-content:center; margin-top:16px; }
.records-page-btn { width:36px; height:36px; border:1px solid var(--gray2); border-radius:8px; background:#fff; cursor:pointer; font-size:14px; font-weight:600; }
.records-page-btn.active { background:rgba(0,0,0,0.05); color:var(--mono-text); border:1px solid rgba(0,0,0,0.18); border-color:var(--primary); }
.timefix-card { padding:16px; border:1px solid var(--gray2); border-radius:10px; margin-bottom:10px; }
.timefix-card-title { font-size:16px; font-weight:700; }
.timefix-card-meta { font-size:13px; color:var(--gray4); margin:4px 0 10px; }
.timefix-btn { padding:8px 16px; background:rgba(0,0,0,0.05); color:var(--mono-text); border:1px solid rgba(0,0,0,0.18); border-radius:2px; font-size:13px; cursor:pointer; font-weight:600; }

/* ═══ 결재 처리 이력 툴바 (모노톤) ═══ */
.apv-hist-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px 16px; background: rgba(0,0,0,0.025);
  border: 1px solid rgba(0,0,0,0.08); border-radius: 2px;
  margin-bottom: 14px;
}
.apv-hist-search {
  position: relative; display: inline-flex; align-items: center;
  flex: 1; min-width: 240px; max-width: 420px;
  background: var(--white); border: 1px solid rgba(0,0,0,0.18); border-radius: 999px;
  padding: 8px 14px 8px 12px; gap: 8px;
}
.apv-hist-search svg:first-child { color: var(--ink-soft); flex-shrink: 0; }
.apv-hist-search input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 13px; color: var(--mono-text);
  letter-spacing: -0.01em;
}
.apv-hist-search input::placeholder { color: rgba(0,0,0,0.40); }
.apv-hist-search input::-webkit-search-cancel-button { display: none; }
.apv-hist-search-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0;
  background: rgba(0,0,0,0.08); border: none; border-radius: 50%;
  color: var(--mono-text); cursor: pointer; flex-shrink: 0;
}
.apv-hist-search-clear:hover { background: rgba(0,0,0,0.18); }

.apv-hist-range { display: inline-flex; align-items: center; gap: 8px; }
.apv-hist-range-label { font-size: 11px; font-weight: 700; color: var(--mono-text); letter-spacing: 0.04em; }
.apv-hist-date {
  height: 32px; padding: 0 10px;
  border: 1px solid rgba(0,0,0,0.18); border-radius: 2px;
  background: var(--white); color: var(--mono-text);
  font-family: inherit; font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.apv-hist-range-sep { color: var(--ink-soft); font-size: 13px; }

.apv-hist-quick { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.apv-hist-quick button {
  padding: 6px 12px;
  background: var(--white); color: var(--ink-soft);
  border: 1px solid rgba(0,0,0,0.12); border-radius: 999px;
  font-family: inherit; font-size: 11px; font-weight: 600;
  cursor: pointer; letter-spacing: 0.01em;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.apv-hist-quick button:hover {
  background: rgba(0,0,0,0.05); color: var(--mono-text); border-color: rgba(0,0,0,0.25);
}
.apv-hist-quick button.active {
  background: rgba(0,0,0,0.08); color: var(--mono-text); border-color: rgba(0,0,0,0.30); font-weight: 700;
}

.apv-hist-count {
  margin-left: auto;
  font-size: 11px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .apv-hist-toolbar { gap: 8px; padding: 10px 12px; }
  .apv-hist-search { max-width: none; min-width: 100%; }
  .apv-hist-count { margin-left: 0; }
}
.timefix-compare { flex:1; padding:12px; border:1px solid var(--gray2); border-radius:8px; text-align:center; }
.timefix-label { font-size:12px; color:var(--gray4); margin-bottom:4px; }
.timefix-value { font-size:16px; font-weight:700; }
.timefix-time-input { font-size:16px; font-weight:700; padding:8px; border:1px solid var(--primary); border-radius:6px; text-align:center; }
.timefix-reason { width:100%; padding:10px; font-size:14px; border:1px solid var(--gray2); border-radius:8px; margin-top:6px; resize:vertical; }
.timefix-summary { margin-top:12px; padding:12px; background:var(--gray1); border-radius:8px; font-size:14px; }
@media (max-width:768px) {
  .records-filter-bar { flex-direction:column; }
  .records-select, .records-date-input { width:100%; }
  .records-table { font-size:13px; }
  .records-table th, .records-table td { padding:10px 8px; }
}/* 워크스페이스 플랜 배지 */

.cw-detail-plan { font-size:11px; padding:2px 10px; border-radius:20px; font-weight:600; margin-left:6px; }
.cw-badge-premium { background:linear-gradient(135deg,#f59e0b22,#f59e0b11); color:#b45309; }
.cw-badge-smart { background:linear-gradient(135deg,#3b82f622,#3b82f611); color:#1d4ed8; }/* 워크스페이스 6탭 반응형 */

.cw-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; white-space:nowrap; }
.cw-tabs::-webkit-scrollbar { display:none; }
.cw-tab { flex-shrink:0; }
/* ══════════════════════════════════════
   홈 대시보드: 오늘/이번주/이번달 일지 보드 (3컬럼)
   2026-04-24 복구: #10/11 반영 — 화이트 달력톤, 모노그레이
══════════════════════════════════════ */
.home-jboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 8px 0 14px;
}
.home-jboard-col {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 4px;
  padding: 10px 12px;
  max-height: 230px;
  overflow-y: auto;
}
.home-jboard-col::-webkit-scrollbar { width: 4px; }
.home-jboard-col::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }
.home-jboard-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  margin-bottom: 6px;
}
.home-jboard-eyebrow {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(0,0,0,0.58);
}
.home-jboard-count {
  font-size: 12px; font-weight: 700;
  color: rgba(0,0,0,0.72);
  padding: 2px 8px;
  background: rgba(0,0,0,0.05);
  border-radius: 2px;
}
.home-jboard-count.all-done {
  color: rgba(0,0,0,0.78);
  background: rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.14);
}
.home-jboard-list { display: flex; flex-direction: column; gap: 1px; }
.home-jboard-list .jboard-item,
.jboard-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  border-radius: 2px;
  transition: background 0.12s;
}
/* 신호등 점 제거 */
.jboard-dot { display: none !important; }
.home-jboard-list .jboard-item:hover { background: rgba(0,0,0,0.04); }
.jboard-name {
  flex: 1;
  font-size: 11px;
  color: var(--mono-text);
  letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 완료 항목: 살짝 흐리게 (취소선 제거 — 가독성 살리고 모노 톤만으로 구분) */
.jboard-item.is-done .jboard-name {
  color: rgba(0,0,0,0.45);
}
/* 통일된 컴팩트 pill: 작성하기 / 완료 둘 다 같은 크기·모양 */
.jboard-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--mono-text);
  padding: 3px 9px;
  height: 22px;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 2px;
  cursor: pointer;
  background: transparent;
  transition: background 0.12s, border-color 0.12s;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.jboard-btn:hover { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.30); }
/* 완료 pill: 라이트 모노 fill 로 작성하기와 시각적으로 구분 */
.jboard-btn.done {
  color: rgba(0,0,0,0.65);
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.12);
}
.jboard-btn.done:hover {
  background: rgba(0,0,0,0.10);
  border-color: rgba(0,0,0,0.20);
}
.jboard-done-date { font-size: 10px; font-weight: 600; }
.jboard-done-label { font-size: 10px; font-weight: 700; }
.jboard-empty {
  text-align: center; padding: 28px 8px;
  color: rgba(0,0,0,0.40);
  font-size: 11px;
}
/* 헤더 카운트 뱃지도 살짝 축소 — 모노 강제 (오늘/이번주/이번달 모두 동일 톤) */
.home-jboard-eyebrow { font-size: 10px; letter-spacing: 0.10em; }
.home-jboard-count,
.home-jboard-count.all-done {
  font-size: 10px !important;
  padding: 2px 7px !important;
  background: rgba(0,0,0,0.05) !important;
  color: rgba(0,0,0,0.72) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  border-radius: 2px !important;
  font-weight: 700 !important;
}

/* ═══ 일정 관리 모달 (caldm) — 모노톤 ═══ */
.caldm-modal { background: var(--white); }
.caldm-date { margin-bottom: 14px; font-size: 13px; font-weight: 800; color: var(--mono-text); letter-spacing: -0.01em; }
.caldm-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.caldm-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: rgba(0,0,0,0.025);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 2px;
}
.caldm-icon { display: inline-flex; align-items: center; color: rgba(0,0,0,0.55); flex-shrink: 0; }
.caldm-label { flex: 1; font-size: 12px; font-weight: 600; color: var(--mono-text); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caldm-time { font-size: 10px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.caldm-cat { font-size: 10px; color: rgba(0,0,0,0.50); padding: 1px 6px; background: rgba(0,0,0,0.04); border-radius: 2px; }
.caldm-row.done .caldm-label { color: rgba(0,0,0,0.40); text-decoration: line-through; }
.caldm-row.done .caldm-icon { color: rgba(0,0,0,0.30); }

.caldm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 2px;
  background: var(--white);
  color: var(--mono-text);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  flex-shrink: 0;
}
.caldm-btn:hover { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.28); }
.caldm-btn.done { color: rgba(0,0,0,0.62); }
.caldm-btn.done:hover { color: var(--mono-text); }
.caldm-btn.del { color: rgba(185,28,28,0.78); border-color: rgba(185,28,28,0.22); }
.caldm-btn.del:hover { background: rgba(185,28,28,0.06); border-color: rgba(185,28,28,0.40); }

.caldm-empty { text-align: center; color: rgba(0,0,0,0.40); font-size: 12px; padding: 18px 0; margin-bottom: 12px; }

.caldm-add { padding-top: 4px; }
.caldm-add-h { font-size: 12px; font-weight: 700; color: var(--mono-text); margin-bottom: 10px; letter-spacing: -0.01em; }
.caldm-types { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 12px; }
.caldm-type {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; font-size: 11px; color: var(--mono-text); font-weight: 600;
}
.caldm-type input[type=radio] { width: 14px; height: 14px; accent-color: var(--mono-text); }
.caldm-type-icon { display: inline-flex; align-items: center; color: rgba(0,0,0,0.55); }

.caldm-input {
  width: 100%; padding: 9px 12px;
  border: 1px solid rgba(0,0,0,0.18); border-radius: 2px;
  font-size: 12px; color: var(--mono-text); box-sizing: border-box;
  font-family: inherit;
  background: var(--white);
  margin-bottom: 8px;
}
.caldm-input:focus { outline: none; border-color: rgba(0,0,0,0.40); }
.caldm-time-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.caldm-time-row label { font-size: 11px; font-weight: 700; color: var(--mono-text); white-space: nowrap; }
.caldm-time-row .caldm-input { flex: 1; margin-bottom: 0; }
.caldm-hint { font-size: 10px; color: var(--ink-soft); }
.caldm-save {
  width: 100%; padding: 11px;
  background: rgba(0,0,0,0.05); color: var(--mono-text);
  border: 1px solid rgba(0,0,0,0.18); border-radius: 2px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  cursor: pointer; transition: background 0.12s;
}
.caldm-save:hover { background: rgba(0,0,0,0.10); }

/* 캘린더 셀 내부 이벤트 라벨 (점 → SVG 아이콘 + 모노) */
.cal-event {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; color: var(--mono-text);
  padding: 1px 4px; margin-top: 1px;
  background: rgba(0,0,0,0.04);
  border-radius: 2px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-event-icon { display: inline-flex; align-items: center; color: rgba(0,0,0,0.55); flex-shrink: 0; }
.cal-event.done { color: rgba(0,0,0,0.45); text-decoration: line-through; }
.cal-event.done .cal-event-icon { opacity: 0.5; }
@media (max-width: 900px) {
  .home-jboard { grid-template-columns: 1fr; gap: 12px; }
}

/* ════════════════════════════════════════
   사이드바 접기/펼치기 (≥769px 전용)
   - .collapsed 클래스: 미니 모드 (64px, 아이콘만)
   - .open(모바일 드로어)과 완전 독립
   - 전체 블록을 @media (min-width:769px)로 감싸서 모바일에서는 아예 적용 안 됨
     → 모바일 cascade(theme-overrides.css의 드로어 규칙)와 충돌 없음
   - !important: theme-overrides.css의 !important 규칙(.sidebar/.main-area)을
     same specificity로 이기기 위해 사용 (specificity 0,2,0 > 0,1,0이지만 !important 동률 필요)
   ════════════════════════════════════════ */
.sidebar { transition: width 0.3s ease, transform 0.3s ease; }
.main-area { transition: margin-left 0.3s ease; }

@media (min-width: 769px) {
  .sidebar.collapsed { width: 64px !important; }
  .sidebar.collapsed ~ .main-area { margin-left: 64px !important; }

  .sidebar.collapsed .sidebar-logo { display: none !important; }
  .sidebar.collapsed .sidebar-group-label,
  .sidebar.collapsed .sidebar-accordion-header,
  .sidebar.collapsed .sidebar-accordion-body,
  .sidebar.collapsed .sidebar-badge { display: none !important; }

  .sidebar.collapsed .sidebar-item {
    font-size: 0 !important;
    padding: 12px 0 !important;
    justify-content: center !important;
    gap: 0 !important;
  }
  .sidebar.collapsed .sidebar-item-icon { width: 20px; height: 20px; }
  .sidebar.collapsed .sidebar-item.active {
    border-left-color: #444444;
    padding-left: 0 !important;
  }

  .sidebar-collapse-toggle {
    position: absolute;
    top: 14px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 6px;
    color: rgba(0,0,0,0.55);
    cursor: pointer;
    z-index: 1;
    padding: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .sidebar-collapse-toggle:hover {
    background: rgba(0,0,0,0.12);
    border-color: rgba(0,0,0,0.16);
    color: #444444;
  }
  .sidebar-collapse-toggle:focus-visible {
    outline: 2px solid #444444;
    outline-offset: 1px;
  }
  .sidebar-collapse-toggle svg { transition: transform 0.3s ease; }
  .sidebar.collapsed .sidebar-collapse-toggle {
    position: static;
    margin: 14px auto 8px;
    width: 40px;
    height: 36px;
    border-radius: 8px;
  }
  .sidebar.collapsed .sidebar-collapse-toggle svg { transform: rotate(180deg); }
}

/* 모바일 (<769px): 토글 버튼은 항상 숨김 (768px 이하 어디서든) */
@media (max-width: 768px) {
  .sidebar-collapse-toggle { display: none !important; }
}