:root {
  --navy: #14375C;
  --navy-2: #1B4A77;
  --coral: #EE5A36;
  --coral-soft: #FBE3DB;
  --cream: #F2EBD5;
  --bg: #F8F4E9;
  --line: #E6DFCC;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; background: var(--bg); color: #222; }

header { background: #fff; color: var(--navy); padding: 10px 20px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; border-bottom: 3px solid var(--coral); }
header h1 { font-size: 20px; display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.5px; }
header .logo { height: 46px; width: auto; }
.ver { font-size: 10px; background: var(--coral); color: #fff; padding: 2px 7px; border-radius: 9px; vertical-align: middle; letter-spacing: 1px; }
.controls { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.controls select { padding: 5px 8px; border-radius: 5px; border: 1px solid var(--line); background: #fff; color: var(--navy); }
.controls button { padding: 7px 16px; border: none; border-radius: 5px; background: var(--coral); color: #fff; cursor: pointer; font-weight: bold; }
.controls button:hover { background: #d94d2b; }
.controls .nameBtn { background: #fff; color: var(--navy); border: 1px solid var(--line); font-weight: normal; }
.controls .nameBtn:hover { background: var(--cream); }
.meta { color: #8a8470; font-size: 12px; }

nav { display: flex; gap: 4px; padding: 10px 20px 0; background: #fff; border-bottom: 2px solid var(--line); flex-wrap: wrap; }
nav button { padding: 9px 14px; border: none; background: none; cursor: pointer; font-size: 14px; border-bottom: 3px solid transparent; color: #66705e; }
nav button.active { border-bottom-color: var(--coral); color: var(--navy); font-weight: bold; }
.cnt { font-size: 12px; color: #a09a85; }

main { padding: 16px 20px; max-width: 1100px; }
#banner .notice { background: var(--cream); border: 1px solid #e2d6ad; border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; font-size: 13px; line-height: 1.7; color: #4a4434; }
#banner .error { background: var(--coral-soft); border-color: #f0b8a5; }

.card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin-bottom: 8px; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.card:hover { box-shadow: 0 3px 12px rgba(20,55,92,.14); border-color: var(--navy-2); }
.card .title { font-size: 15px; font-weight: bold; margin-bottom: 6px; color: var(--navy); }
.card .sub { font-size: 12.5px; color: #6f6a5a; display: flex; gap: 14px; flex-wrap: wrap; }
.badges { display: inline-flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: bold; }
.b-wl { background: var(--cream); color: #7a5c00; border: 1px solid #e2d39e; }
.b-kw { background: #dcebff; color: var(--navy); }
.b-rg { background: #ddf5dd; color: #1e6b1e; }
.b-re { background: var(--coral-soft); color: #b3300f; }
.b-tier { background: #efece2; color: #5d5848; font-weight: normal; }
.b-st { background: #e8dcff; color: #5a2ca0; }
.b-dday { background: var(--coral); color: #fff; }
.b-ps { background: #d9eef7; color: #0a5a78; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip { padding: 5px 13px; border-radius: 16px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 12.5px; color: var(--navy); font-family: inherit; }
.chip:hover { border-color: var(--coral); }
.chip.active { background: var(--coral); color: #fff; border-color: var(--coral); font-weight: bold; }
.chip-cnt { opacity: .65; font-size: 11px; }

.empty { color: #8a8470; padding: 40px; text-align: center; }
.loading { color: #5d5848; padding: 40px; text-align: center; font-size: 15px; }

#overlay { position: fixed; inset: 0; background: rgba(20,55,92,.4); z-index: 9; }
#detail { position: fixed; top: 0; right: 0; width: min(680px, 95vw); height: 100vh; background: #fff; box-shadow: -4px 0 20px rgba(0,0,0,.2); z-index: 10; overflow-y: auto; padding: 22px; }
.hidden { display: none !important; }
#detail h2 { font-size: 17px; margin-bottom: 12px; padding-right: 30px; color: var(--navy); }
.closeBtn { position: absolute; top: 14px; right: 16px; border: none; background: var(--cream); border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: 15px; color: var(--navy); }
.info-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 16px; }
.info-table th { text-align: left; background: #F6F1E1; padding: 7px 10px; width: 110px; border: 1px solid var(--line); vertical-align: top; white-space: nowrap; color: var(--navy); }
.info-table td { padding: 7px 10px; border: 1px solid var(--line); word-break: break-all; }
.section { margin: 18px 0; }
.section h3 { font-size: 14px; margin-bottom: 8px; color: var(--navy); border-left: 4px solid var(--coral); padding-left: 8px; }
.actionBtn { padding: 8px 16px; border: 1px solid var(--navy); background: #fff; color: var(--navy); border-radius: 6px; cursor: pointer; font-size: 13px; margin-right: 8px; display: inline-block; text-decoration: none; margin-bottom: 6px; }
.actionBtn:hover { background: var(--navy); color: #fff; }
.hist-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 8px; }
.hist-table th, .hist-table td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; }
.hist-table th { background: #F6F1E1; color: var(--navy); }
.verdict { padding: 8px 12px; border-radius: 6px; font-size: 13px; font-weight: bold; margin: 8px 0; }
.v-annual { background: #DCE8F5; color: var(--navy); }
.v-new { background: #ddf5dd; color: #1e6b1e; }
.statusRow { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; flex-wrap: wrap; }
.statusRow select, .statusRow textarea { padding: 6px; border: 1px solid #cfc8b2; border-radius: 5px; font-size: 13px; font-family: inherit; }
.statusRow textarea { flex: 1; min-width: 200px; min-height: 50px; }
.saveBtn { padding: 7px 18px; background: var(--coral); color: #fff; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; }
.saveBtn:hover { background: #d94d2b; }
.muted { color: #8a8470; font-size: 12px; }
a { color: var(--navy-2); }

/* ---------- 모바일 ---------- */
@media (max-width: 640px) {
  header { padding: 8px 12px; gap: 10px; }
  header h1 { font-size: 16px; gap: 6px; }
  header .logo { height: 32px; }
  .controls { gap: 8px; font-size: 12px; flex-wrap: wrap; }
  .controls button { padding: 6px 10px; font-size: 12px; }
  .meta { width: 100%; }
  nav { padding: 6px 8px 0; gap: 0; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  nav button { padding: 9px 10px; font-size: 13px; white-space: nowrap; flex-shrink: 0; }
  main { padding: 10px; }
  .card { padding: 10px 12px; }
  .card .title { font-size: 14px; }
  .card .sub { font-size: 11.5px; gap: 8px; }
  #detail { width: 100vw; padding: 14px; }
  .info-table th { width: 84px; font-size: 12px; }
  .info-table td { font-size: 12px; }
  .hist-table { display: block; overflow-x: auto; white-space: nowrap; }
  #toasts { left: 12px; right: 12px; max-width: none; }
}

/* ---------- 이름 로그인 화면 ---------- */
#loginGate, #pinModal { position: fixed; inset: 0; background: rgba(20,55,92,.28); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
#loginGate { background: var(--bg); }
.loginBox { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 34px 30px; text-align: center; box-shadow: 0 6px 28px rgba(20,55,92,.15); max-width: 380px; width: 100%; }
.loginLogo { width: 100px; margin-bottom: 6px; }
.loginBox h2 { color: var(--navy); font-size: 20px; margin-bottom: 6px; }
.loginDesc { color: #6f6a5a; font-size: 13.5px; margin-bottom: 16px; line-height: 1.6; }
.pin-input { width: 100%; padding: 12px; border: 1px solid #cfc8b2; border-radius: 8px; font-size: 20px; text-align: center; letter-spacing: 8px; margin-bottom: 10px; font-family: inherit; }
#pinSubmit, #changePinBtn { width: 100%; padding: 12px; background: var(--coral); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: bold; cursor: pointer; }
#pinSubmit:hover, #changePinBtn:hover { background: #d94d2b; }
.ghostbtn { width: 100%; margin-top: 8px; padding: 9px; background: none; border: none; color: #8a8470; font-size: 13px; cursor: pointer; }
.ghostbtn:hover { color: var(--navy); }
.loginErr { color: var(--coral); font-size: 13px; margin-top: 10px; min-height: 16px; }
.name-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; max-height: 46vh; overflow-y: auto; }
.name-btn { padding: 13px; border: 1px solid var(--line); background: #fff; border-radius: 8px; font-size: 15px; cursor: pointer; color: var(--navy); font-family: inherit; }
.name-btn:hover { border-color: var(--coral); background: var(--cream); }
.name-btn small { opacity: .65; font-weight: normal; margin-left: 4px; }
.loginNotice { margin-top: 16px; font-size: 12px; color: #8a8470; line-height: 1.8; text-align: left; background: var(--cream); border-radius: 8px; padding: 10px 14px; }
.loginNotice b { color: var(--navy); }
/* 관리자 직원관리 */
.admin-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.admin-add input { padding: 8px 10px; border: 1px solid #cfc8b2; border-radius: 6px; font-size: 13px; font-family: inherit; }
.admin-table td { vertical-align: middle; }
.pin-badge { font-family: monospace; font-size: 15px; font-weight: bold; letter-spacing: 2px; background: var(--cream); padding: 2px 8px; border-radius: 5px; color: var(--navy); }
.miniBtn { padding: 4px 9px; margin: 1px; border: 1px solid var(--line); background: #fff; border-radius: 5px; font-size: 12px; cursor: pointer; color: var(--navy); }
.miniBtn:hover { background: var(--cream); }
.miniBtn.danger { color: #b3300f; border-color: #f0b8a5; }
.miniBtn.danger:hover { background: var(--coral-soft); }

#toasts { position: fixed; bottom: 20px; right: 20px; z-index: 99; display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.toast { background: var(--navy); color: #fff; padding: 12px 16px; border-radius: 8px; font-size: 13px; box-shadow: 0 4px 16px rgba(0,0,0,.25); border-left: 4px solid var(--coral); line-height: 1.5; transition: opacity .5s; }
.toast.fade { opacity: 0; }