:root{
    --ink:#0D2B29;
    --paper:#E3F3F0;
    --panel:#D3ECE6;
    --panel-2:#C6E4DC;
    --line:#AFD9CE;
    --teal:#0F7A68;
    --teal-soft:#BFE8DD;
    --amber:#B8802E;
    --amber-soft:#F6EBDA;
    --muted:#4C6D66;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:'IBM Plex Sans KR', sans-serif;
    background:var(--paper);
    color:var(--ink);
    line-height:1.5;
  }
  .mono{font-family:'IBM Plex Mono', monospace;}

  /* ---------- Header : 배치기록 헤더 톤 ---------- */
  header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    padding:28px 40px 18px;
    border-bottom:2px solid var(--ink);
  }
  .brand{
    display:flex;
    align-items:baseline;
    gap:14px;
  }
  .brand h1{
    font-size:26px;
    font-weight:700;
    letter-spacing:-0.01em;
  }
  .brand span{
    font-size:14px;
    color:var(--muted);
    font-weight:500;
  }
  .header-meta{
    text-align:right;
    font-size:12px;
    color:var(--muted);
  }
  .header-meta .doc-no{
    font-size:12px;
    color:var(--teal);
  }

  /* ---------- Layout ---------- */
  .layout{
    display:grid;
    grid-template-columns:220px 1fr;
    min-height:calc(100vh - 100px);
  }
  nav{
    border-right:1px solid var(--line);
    padding:24px 0;
  }
  nav .group-label{
    font-size:12px;
    color:var(--muted);
    padding:6px 24px;
    margin-top:18px;
  }
  nav .group-label:first-child{margin-top:0;}
  nav a{
    display:block;
    padding:9px 24px;
    color:var(--ink);
    text-decoration:none;
    font-size:14px;
    border-left:3px solid transparent;
  }
  nav a:hover{
    background:var(--panel);
    border-left-color:var(--teal);
  }
  nav a.active{
    background:var(--teal-soft);
    border-left-color:var(--teal);
    font-weight:600;
  }

  main{
    padding:32px 40px 60px;
    max-width:920px;
  }
  section{margin-bottom:40px;}
  .section-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    padding-bottom:8px;
    margin-bottom:16px;
  }
  .section-head h2{
    font-size:15px;
    font-weight:600;
  }
  .section-head .field-tag{
    font-size:11px;
    color:var(--muted);
  }

  /* ---------- 공지사항 (게시판) ---------- */
  .notice-list{list-style:none;}
  .notice-list li{
    display:grid;
    grid-template-columns:64px 1fr 90px 90px auto;
    gap:14px;
    padding:10px 8px;
    border-bottom:1px solid var(--line);
    font-size:14px;
    align-items:baseline;
    cursor:pointer;
  }
  .notice-list li:hover{background:var(--panel);}
  .notice-list li.selected{background:var(--teal-soft);}
  .notice-list li:last-child{border-bottom:none;}
  .notice-list .tag{
    font-size:11px;
    color:var(--teal);
    font-weight:600;
  }
  .notice-list .tag.reg{color:var(--amber);}
  .notice-list .notice-author{
    font-size:12px;
    color:var(--muted);
  }
  .notice-list .date{
    text-align:right;
    font-size:12px;
    color:var(--muted);
  }
  .notice-del{
    font-size:12px;
    color:var(--muted);
    background:none;
    border:1px solid var(--line);
    padding:3px 10px;
    cursor:pointer;
  }
  .notice-del:hover{color:var(--amber); border-color:var(--amber);}
  .notice-actions{
    display:flex;
    gap:10px;
    margin-top:14px;
  }
  .btn-outline{
    font-size:13px;
    padding:8px 18px;
    border:1px solid var(--ink);
    background:var(--paper);
    color:var(--ink);
    cursor:pointer;
    font-family:'IBM Plex Sans KR', sans-serif;
  }
  .btn-outline:hover{background:var(--teal-soft); border-color:var(--teal); color:var(--teal);}
  .btn-solid{
    font-size:13px;
    padding:8px 18px;
    border:1px solid var(--teal);
    background:var(--teal);
    color:#fff;
    cursor:pointer;
    font-family:'IBM Plex Sans KR', sans-serif;
  }
  .btn-solid:hover{background:#186156;}

  /* ---------- 공지사항 작성/수정 모달 ---------- */
  .modal-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(16,34,31,0.45);
    z-index:100;
    align-items:center;
    justify-content:center;
  }
  .modal-overlay.open{display:flex;}
  .modal-box{
    background:var(--paper);
    width:520px;
    max-width:92vw;
    border:1px solid var(--ink);
    padding:0;
  }
  .modal-head{
    padding:16px 20px;
    border-bottom:2px solid var(--ink);
    display:flex;
    justify-content:space-between;
    align-items:baseline;
  }
  .modal-head h3{font-size:15px; font-weight:600;}
  .modal-close{
    background:none; border:none; cursor:pointer;
    font-size:16px; color:var(--muted);
  }
  .modal-body{padding:20px;}
  .modal-field{margin-bottom:14px;}
  .modal-field label{
    display:block;
    font-size:12px;
    color:var(--muted);
    margin-bottom:6px;
  }
  .modal-field input[type=text],
  .modal-field select,
  .modal-field textarea{
    width:100%;
    padding:8px 10px;
    border:1px solid var(--line);
    background:#fff;
    font-family:'IBM Plex Sans KR', sans-serif;
    font-size:14px;
  }
  .modal-field textarea{resize:vertical; min-height:90px;}
  .modal-foot{
    padding:14px 20px;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:flex-end;
    gap:10px;
  }

  /* ---------- 바로가기 앱 ---------- */
  .app-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .app-tile{
    background:var(--paper);
    padding:18px 12px;
    text-align:center;
    text-decoration:none;
    color:var(--ink);
  }
  .app-tile:hover{background:var(--teal-soft);}
  .app-tile .glyph{
    font-size:20px;
    display:block;
    margin-bottom:8px;
    color:var(--teal);
  }
  .app-tile .label{font-size:12px; font-weight:500;}

  /* ---------- 문서함 : 일반 vs 품질(GMP) ---------- */
  .doc-columns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  .doc-box{
    padding:18px;
    border:1px solid var(--line);
  }
  .doc-box.regulated{
    border:3px double var(--amber);
    background:var(--amber-soft);
  }
  .doc-box h3{
    font-size:13px;
    font-weight:600;
    margin-bottom:4px;
  }
  .doc-box.regulated h3{color:var(--amber);}
  .doc-box .desc{
    font-size:12px;
    color:var(--muted);
    margin-bottom:12px;
  }
  .doc-box ul{list-style:none;}
  .doc-box li{
    font-size:13px;
    padding:6px 0;
    border-bottom:1px solid var(--line);
  }
  .doc-box.regulated li{border-bottom:1px solid #E3CBA0;}
  .doc-box li:last-child{border-bottom:none;}
  .doc-box a{color:var(--ink); text-decoration:none;}
  .doc-box.regulated a{color:#7A5620;}
  .doc-box a:hover{color:var(--teal);}

  /* ---------- 출입/근태 위젯 ---------- */
  .attendance-panel{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    padding:16px 20px;
    background:var(--panel);
    border:1px solid var(--line);
  }
  .attendance-panel .status{
    font-size:13px;
    color:var(--muted);
  }
  .attendance-panel .status strong{
    color:var(--ink);
    font-weight:600;
  }
  .pill{
    font-size:11px;
    padding:4px 10px;
    border-radius:2px;
    background:var(--teal-soft);
    color:var(--teal);
    font-weight:600;
  }

  footer{
    border-top:1px solid var(--line);
    padding:18px 40px;
    font-size:12px;
    color:var(--muted);
    display:flex;
    justify-content:space-between;
  }

  @media (max-width:720px){
    .layout{grid-template-columns:1fr;}
    nav{display:none;}
    .app-grid{grid-template-columns:repeat(3,1fr);}
    .doc-columns{grid-template-columns:1fr;}
    .notice-list li{grid-template-columns:56px 1fr auto; }
    .notice-list .date, .notice-list .notice-author{display:none;}
    header{flex-direction:column; align-items:flex-start; gap:8px;}
    .header-meta{text-align:left;}
  }

  /* ---------- 문서함 / 출입근태 하위 페이지 공통 ---------- */
  .page-back{
    display:inline-block;
    font-size:13px;
    color:var(--muted);
    text-decoration:none;
    margin-bottom:18px;
  }
  .page-back:hover{color:var(--teal);}
  .upload-box{
    display:flex;
    gap:10px;
    align-items:center;
    margin-bottom:16px;
    flex-wrap:wrap;
  }
  .upload-box input[type=file]{
    font-size:13px;
    font-family:'IBM Plex Sans KR', sans-serif;
  }
  .file-table{width:100%; border-collapse:collapse; font-size:14px;}
  .file-table th{
    text-align:left;
    font-size:12px;
    color:var(--muted);
    border-bottom:1px solid var(--ink);
    padding:6px 8px;
  }
  .file-table td{
    padding:8px 8px;
    border-bottom:1px solid var(--line);
  }
  .file-table a{color:var(--ink); text-decoration:none;}
  .file-table a:hover{color:var(--teal);}
  .empty-note{
    font-size:13px;
    color:var(--muted);
    padding:12px 0;
  }
  .flash-msg{
    font-size:13px;
    padding:8px 12px;
    margin-bottom:14px;
    border:1px solid var(--teal);
    background:var(--teal-soft);
    color:var(--teal);
  }
  .flash-msg.error{
    border-color:var(--amber);
    background:var(--amber-soft);
    color:var(--amber);
  }

  /* ---------- 생산관리 대시보드 ---------- */
  .summary-cards{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    margin-bottom:28px;
  }
  .summary-card{
    background:var(--paper);
    padding:18px 20px;
  }
  .summary-card .num{font-size:24px; font-weight:700; color:var(--teal);}
  .summary-card .label{font-size:12px; color:var(--muted); margin-top:4px;}

  .prod-table{width:100%; border-collapse:collapse; font-size:13px;}
  .prod-table th{
    text-align:left;
    font-size:11px;
    color:var(--muted);
    border-bottom:1px solid var(--ink);
    padding:8px 8px;
  }
  .prod-table td{
    padding:10px 8px;
    border-bottom:1px solid var(--line);
    vertical-align:middle;
  }
  .line-tag{font-size:11px; color:var(--muted);}
  .progress-track{
    width:100%;
    height:8px;
    background:var(--panel);
    border:1px solid var(--line);
  }
  .progress-fill{
    height:100%;
    background:var(--teal);
  }
  .progress-pct{font-size:11px; color:var(--muted); margin-top:3px;}
  .status-badge{
    font-size:11px;
    padding:3px 9px;
    border:1px solid;
    display:inline-block;
    white-space:nowrap;
  }
  .status-run{color:var(--teal); border-color:var(--teal); background:var(--teal-soft);}
  .status-wait{color:var(--muted); border-color:var(--line); background:var(--panel);}
  .status-check{color:var(--amber); border-color:var(--amber); background:var(--amber-soft);}
  .status-done{color:var(--ink); border-color:var(--ink); background:var(--panel-2);}
  .row-edit-btn{
    font-size:11px;
    color:var(--muted);
    background:none;
    border:1px solid var(--line);
    padding:4px 10px;
    cursor:pointer;
  }
  .row-edit-btn:hover{color:var(--teal); border-color:var(--teal);}