/* =============================================================
   직원용 화면 전용 스타일
   색과 글꼴은 ../style.css 의 것을 그대로 씁니다.
   여기에는 표·비밀번호 화면처럼 직원용에만 있는 것만 적습니다.
   ============================================================= */

body { font-size: 15px; line-height: 1.6; padding-bottom: 60px; }
.wrap { max-width: 1200px; }
h1 { font-size: 25px; margin: 0 0 4px; }
.sub { margin: 0 0 18px; color: var(--ink-soft); font-size: 15px; }


/* ---------- 직원용 안쪽 탭 ---------- */

.subtabs { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.subtabs a {
  font-size: 15px; color: var(--brand); text-decoration: none;
  background: var(--card); border: 2px solid var(--line); border-radius: 999px;
  padding: 8px 16px; min-height: 40px; display: inline-flex; align-items: center;
}
.subtabs a:hover { border-color: var(--accent); }
.subtabs a.on { color: #fff; background: var(--brand); border-color: var(--brand); font-weight: 700; }


/* ---------- 숫자 상자 ---------- */

.counts { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.box {
  background: var(--card); border: 2px solid var(--line); border-radius: 16px;
  box-shadow: 0 3px 12px rgba(74,53,41,.07);
  padding: 12px 18px; min-width: 130px;
}
.box .label { font-size: 14px; color: var(--ink-soft); }
.box .num { font-size: 32px; font-weight: 800; display: block; line-height: 1.15; color: var(--brand); }
.box.warn { border-color: var(--accent); }
.box.warn .num { color: var(--accent); }


/* ---------- 표 ---------- */

.scroll { overflow-x: auto; background: var(--card);
          border: 2px solid var(--line); border-radius: 18px; }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid var(--line); padding: 7px 10px; text-align: left; white-space: nowrap; }
th { background: var(--brand-pale); font-size: 13px; font-weight: 700; color: var(--brand); }
td { font-size: 14px; vertical-align: top; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; }
tr.total td { font-weight: 800; background: var(--brand-pale); }
tr.check td { background: var(--accent-pale); }

.tag { display: inline-block; background: var(--accent); color: #fff;
       border-radius: 999px; padding: 2px 12px; font-size: 14px; font-weight: 700; }
.muted { color: var(--ink-soft); font-size: 14px; }
.blank { color: var(--gray); }
.empty { border: 2px dashed var(--line); border-radius: 18px; padding: 30px;
         text-align: center; font-size: 19px; color: var(--ink-soft); }


/* ---------- 찾기 줄 ---------- */

.bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 18px 0; }
.bar input[type=text], .bar select {
  font-family: inherit; font-size: 15px; padding: 9px 12px; min-height: 44px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--card); width: auto;
}
.bar button, .doc-foot button, #lock button, .counts + button {
  font-family: inherit; font-size: 15px; font-weight: 700;
  padding: 10px 18px; min-height: 44px; border-radius: 999px;
  color: #fff; background: var(--brand); border: 2px solid var(--brand); cursor: pointer;
}
.bar button.ghost, .doc-foot button.ghost {
  color: var(--brand); background: var(--card);
}
button:disabled { background: var(--gray); border-color: var(--gray); }
label.chk { font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
label.chk input { width: 22px; height: 22px; accent-color: var(--accent); }

#msg, #list-info, #page-info { font-size: 15px; font-weight: 600; color: var(--ink-soft); }


/* ---------- 문서 고치기 ---------- */

.doc { background: var(--card); border: 2px solid var(--line); border-radius: 16px;
       padding: 14px 16px; margin-bottom: 10px; box-shadow: 0 3px 12px rgba(74,53,41,.06); }
.doc.off { opacity: .55; }
.doc-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.doc-head .no { font-size: 14px; color: var(--ink-soft); }
.doc-head .when { margin-left: auto; font-size: 14px; color: var(--ink-soft); }
.doc input[type=text] { font-size: 16px; font-weight: 700; margin-bottom: 8px; padding: 10px 12px; min-height: 44px; }
.doc textarea { min-height: 96px; font-size: 15px; padding: 10px 12px; line-height: 1.6; }
.doc-foot { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.doc-foot .state { margin-left: auto; font-size: 15px; font-weight: 700; }
.doc-foot .state.saved { color: #1F7A3D; }
.doc-foot .state.dirty { color: var(--accent); }


/* ---------- 비밀번호 화면 ---------- */

#lock { max-width: 440px; margin: 70px auto; background: var(--card);
        border: 2px solid var(--line); border-radius: 22px; padding: 32px;
        box-shadow: 0 6px 24px rgba(74,53,41,.12); }
#lock h1 { font-size: 25px; }
#lock p { color: var(--ink-soft); }
#lock input { width: 100%; font-size: 24px; letter-spacing: 8px; text-align: center;
              padding: 15px; min-height: 62px; }
#lock button { width: 100%; margin-top: 16px; min-height: 60px; font-size: 19px; }
#lock .err { background: var(--accent-pale); border-left: 8px solid var(--accent);
             border-radius: 12px; padding: 14px 18px; margin-top: 16px; font-weight: 700; }
#lock a { font-size: 16px; color: var(--ink-soft); }


/* ---------- 작은 표 세 개를 나란히 ---------- */
.mini-tables {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; align-items: start;
}
.mini-tables .scroll { margin: 0; }

/* ---------- 비밀번호 칸 ---------- */
/* 초점 색을 갈색으로. 주황은 "여기를 채우십시오" 표시에만 씁니다. */
#lock input:focus { border-color: var(--brand); background: var(--card); }
#lock input:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }


/* 직원용 화면은 정보를 많이 보여 주는 곳이라 글자를 작게 씁니다.
   신청자용 화면(20px)과 달리, 직원은 표를 한눈에 훑어야 합니다. */
.hint { font-size: 15px; padding: 12px 16px; }
.mini-tables td, .mini-tables th { font-size: 14px; }


/* 통합 내역은 칸이 14개라, 옆으로 밀지 않아도 보이도록 글자를 더 줄입니다.
   직원이 표를 훑어보는 화면이라 신청자용(20px)과 기준이 다릅니다. */
#list table th { font-size: 12px; padding: 6px 6px; }
#list table td { font-size: 12.5px; padding: 5px 6px; }
#list table td .orig { font-size: 11px; }
#list .muted, #list .blank { font-size: 11px; }


/* ---------- 담당자가 채우는 칸 ---------- */

.need, .filled {
  font-family: inherit; font-size: 12.5px; cursor: pointer;
  border-radius: 999px; padding: 3px 10px; min-height: 0; line-height: 1.5;
}
/* 아직 안 채운 칸 — 누르면 채웁니다 */
.need {
  background: var(--accent-pale); color: var(--accent);
  border: 1px solid #EBC9B2; font-weight: 700;
}
.need:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* 담당자가 채운 칸 — 누르면 고칩니다 */
.filled {
  background: transparent; color: var(--ink); border: 1px dashed var(--line); font-weight: 600;
}
.filled:hover { border-color: var(--accent); border-style: solid; }

.cell-edit {
  font-family: inherit; font-size: 12.5px; padding: 3px 6px; min-height: 0;
  border: 2px solid var(--accent); border-radius: 8px; background: #fff; width: auto; max-width: 150px;
}




/* ---------- 표머리 거르기 화살표 ---------- */
.th-in { display: inline-flex; align-items: center; gap: 4px; }
.fbtn {
  font-family: inherit; font-size: 11px; line-height: 1;
  width: 18px; height: 18px; min-height: 0; padding: 0; border-radius: 5px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
  cursor: pointer;
}
.fbtn:hover { border-color: var(--accent); color: var(--accent); }
.fbtn.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.fpop {
  position: absolute; z-index: 300; width: 230px;
  background: var(--card); border: 2px solid var(--line); border-radius: 14px;
  box-shadow: 0 8px 26px rgba(74,53,41,.22); padding: 10px; font-size: 13px;
}
.fpop-head { font-weight: 700; color: var(--brand); margin-bottom: 8px; font-size: 13px; }
.fpop-q {
  width: 100%; font-family: inherit; font-size: 13px; padding: 6px 9px; min-height: 0;
  border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; background: var(--bg-2);
}
.fpop-all {
  width: 100%; font-family: inherit; font-size: 12px; font-weight: 700;
  padding: 6px; min-height: 0; border-radius: 8px; margin-bottom: 6px;
  color: var(--brand); background: var(--brand-pale); border: 1px solid var(--line); cursor: pointer;
}
.fpop-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.fpop-v {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: inherit; font-size: 13px; text-align: left;
  padding: 6px 9px; min-height: 0; border-radius: 8px;
  background: transparent; border: none; color: var(--ink); cursor: pointer; width: 100%;
}
.fpop-v:hover { background: var(--brand-pale); }
.fpop-v.on { background: var(--accent); color: #fff; }
.fpop-v b { font-size: 11px; color: var(--ink-soft); font-weight: 700; }
.fpop-v.on b { color: #fff; }
.fpop-v[hidden] { display: none; }


/* ---------- 값이 길 때 ---------- */
/* 한 칸이 길어지면 표 전체가 밀려서, 잘라 두고 눌러서 봅니다. */
#list td { max-width: 190px; }
.long {
  font-family: inherit; font-size: 12.5px; text-align: left;
  background: transparent; border: none; border-bottom: 1px dotted var(--gray);
  color: var(--ink); padding: 0; min-height: 0; cursor: pointer; line-height: 1.5;
}
.long:hover { color: var(--accent); border-bottom-color: var(--accent); }
.long-full {
  display: inline-block; white-space: normal; word-break: break-all;
  background: var(--accent-pale); border-radius: 6px; padding: 3px 7px; line-height: 1.5;
}
.long-full[hidden] { display: none; }