/* AI 사무실 — 초록 책상 매트 위에 놓인 서류, 인주 도장, 파란 볼펜 */

@font-face {
  font-family: 'Galmuri11';
  src: url('/static/fonts/Galmuri11.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Galmuri11';
  src: url('/static/fonts/Galmuri11-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --mat: #2f5a4c;
  --mat-line: #376656;
  --mat-dark: #224237;
  --mat-text: #d9e8df;
  --paper: #fbfaf4;
  --paper-2: #f0eee2;
  --rule: #d6d2bf;
  --ink: #2b2440;
  --ink-2: #5d5672;
  --ink-3: #8a849b;
  --stamp: #c8372d;
  --pen: #2f5fb3;
  --gold: #e2b84d;
  --kraft: #dcc39a;
  --memo: #f6ecc9;
  --pixel: 'Galmuri11', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  --body: 'Pretendard', 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.6;
  background-color: var(--mat);
  background-image:
    linear-gradient(var(--mat-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--mat-line) 1px, transparent 1px);
  background-size: 24px 24px;
}

button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- 공통 부품 ---------- */
.btn {
  font-family: var(--pixel);
  font-size: 12px;
  line-height: 1;
  padding: 9px 12px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: #fff; }
.btn:active { transform: translate(2px, 2px); box-shadow: none; }
.btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: 2px 2px 0 var(--ink); }
.btn.primary { background: var(--stamp); color: #fff; }
.btn.primary:hover { background: #d8463b; }
.btn.danger { color: var(--stamp); }
.btn.small { padding: 6px 8px; box-shadow: 1px 1px 0 var(--ink); }
.btn.small:active { transform: translate(1px, 1px); }
.btn.on { background: var(--ink); color: var(--paper); }

.plate {
  margin: 0;
  font-family: var(--pixel);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  background: #2b3a5c;
  border: 2px solid var(--ink);
  outline: 2px solid #b98d2e;
  outline-offset: -5px;
  padding: 12px 18px;
  white-space: nowrap;
}

.hint { font-size: 13px; color: var(--ink-3); margin: 0; }
.form-err { margin: 0; color: var(--stamp); font-size: 14px; }

input:not([type=checkbox]):not([type=color]):not([type=file]), select, textarea {
  width: 100%;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 7px 9px;
}
textarea { resize: vertical; line-height: 1.5; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--stamp); margin: 0; }

.st {
  font-family: var(--pixel);
  font-size: 12px;
  line-height: 1;
  padding: 4px 5px;
  border: 2px solid currentColor;
  white-space: nowrap;
}
.st-working { color: var(--pen); }
.st-queued, .st-stopped { color: var(--ink-3); }
.st-report { color: #fff; background: var(--stamp); border-color: var(--stamp); }
.st-done { color: var(--ink-2); }
.st-error { color: var(--stamp); }

.portrait { image-rendering: pixelated; image-rendering: crisp-edges; flex: none; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  font-family: var(--pixel); font-size: 12px; padding: 10px 14px; z-index: 50;
  box-shadow: 3px 3px 0 var(--mat-dark); max-width: 90vw;
}
.toast.err { background: var(--stamp); }

/* ---------- 로그인 ---------- */
.login { min-height: 100%; display: grid; place-items: center; padding: 24px; }
.login-card {
  width: min(340px, 100%);
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--mat-dark);
  padding: 24px;
  display: grid;
  gap: 14px;
}
.login-card .plate { justify-self: start; margin-bottom: 6px; }
.login-card label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }

/* ---------- 틀 ---------- */
.app { display: grid; grid-template-rows: auto auto minmax(0, 1fr); height: 100dvh; }
.app > .top { grid-row: 1; }
.app > .banner { grid-row: 2; }
.app > .main { grid-row: 3; }

.top { display: flex; align-items: center; gap: 16px; padding: 12px 16px; flex-wrap: wrap; }
.clock { font-family: var(--pixel); font-size: 12px; color: var(--mat-text); }
.counts { display: flex; gap: 8px; margin-left: auto; }
.count {
  font-family: var(--pixel); font-size: 12px; line-height: 1;
  background: var(--mat-dark); color: var(--mat-text);
  border: 2px solid var(--mat-dark); padding: 8px 10px; cursor: pointer;
}
.count b { color: #fff; font-weight: 700; margin-left: 4px; }
.count:hover { border-color: var(--mat-text); }
.count-report.has { background: var(--stamp); border-color: var(--stamp); color: #fff; }
.nav { display: flex; gap: 8px; }

.banner {
  margin: 0 16px 12px; padding: 8px 12px;
  background: var(--memo); border: 2px solid var(--ink);
  font-size: 14px;
}
.banner p { margin: 0; }
.banner code { font-size: 13px; background: #fff; padding: 0 4px; border: 1px solid var(--rule); }

.main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 16px;
  padding: 0 16px 16px;
  min-height: 0;
}

/* ---------- 사무실 ---------- */
.stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; min-height: 0; }
.office-wrap {
  position: relative; flex: none; box-sizing: content-box;
  border: 4px solid var(--ink);
  box-shadow: 6px 6px 0 var(--mat-dark);
  background: #cfa06a;
}
.office-wrap canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.overlay { position: absolute; inset: 0; pointer-events: none; font-family: var(--pixel); font-size: 12px; line-height: 1; }

.o-tag {
  position: absolute; padding: 0; border: 0; background: none; pointer-events: auto; cursor: pointer;
  font-family: var(--pixel); font-size: 12px; line-height: 1; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap; overflow: hidden;
}
.o-tag.vacant { color: #66757b; }
.o-tag.on { font-weight: 700; }
.o-tag:focus-visible { outline-offset: 0; }
.o-ceo { color: #4a3413; }
.o-plaque {
  position: absolute; display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-weight: 700; white-space: nowrap; overflow: hidden;
}
.o-bubble {
  position: absolute; transform: translate(-50%, -100%);
  background: #fff; color: var(--ink);
  border: 2px solid var(--ink); padding: 3px 6px; white-space: nowrap;
}
.o-bubble .b-ico:not(:empty) { margin-right: 4px; font-weight: 700; }
.o-bubble.working { color: var(--pen); }
.o-bubble.working .b-txt::after { content: '…'; animation: dots 1.2s steps(4, end) infinite; display: inline-block; overflow: hidden; vertical-align: bottom; width: 0; }
.o-bubble.report { background: var(--stamp); color: #fff; }
.o-bubble.queued { color: var(--ink-3); }
@keyframes dots { to { width: 1em; } }

.office-wrap.tiny .o-tag, .office-wrap.tiny .o-plaque { font-size: 0; }
.office-wrap.tiny .o-bubble { padding: 1px 3px; border-width: 1px; font-size: 10px; }
.office-wrap.tiny .o-bubble .b-txt { display: none; }
.office-wrap.tiny .o-bubble .b-ico:empty::before { content: '…'; }
.office-wrap.tiny .o-bubble .b-ico:not(:empty) { margin-right: 0; }
.office-wrap.big .o-tag { font-size: 24px; }
.office-wrap.big .o-bubble { font-size: 24px; padding: 5px 10px; }

.roster { display: none; }

/* ---------- 지시 입력 ---------- */
.composer {
  width: 100%; max-width: 1000px;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--mat-dark);
  padding: 12px;
  display: grid; gap: 8px;
}
.composer-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.to { display: flex; align-items: center; gap: 8px; font-family: var(--pixel); font-size: 12px; white-space: nowrap; }
.to select { width: auto; min-width: 180px; font-family: var(--body); font-size: 14px; padding: 5px 8px; }
.presets { display: flex; gap: 6px; flex-wrap: wrap; }
.preset {
  font-family: var(--pixel); font-size: 12px; line-height: 1;
  background: var(--kraft); border: 2px solid var(--ink); padding: 6px 8px; cursor: pointer;
}
.preset:hover { background: #e8d3ae; }
.composer-main { display: flex; gap: 10px; align-items: stretch; }
.composer-main textarea { flex: 1; min-height: 58px; }
.composer-btns { display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; }
.composer-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 20px; }
.composer-foot .hint { margin-left: auto; font-family: var(--pixel); font-size: 12px; }
.mask { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }

.files { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.files li {
  display: flex; align-items: center; gap: 6px;
  background: var(--paper-2); border: 1px solid var(--ink-3); padding: 1px 4px 1px 8px; font-size: 13px;
}
.files button { border: 0; background: none; cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; color: var(--ink-2); }
.files button:hover { color: var(--stamp); }

/* ---------- 서류 패널 ---------- */
.panel {
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--mat-dark);
  min-height: 0;
  display: flex; flex-direction: column;
}
.pane { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.pane-body { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px 18px; }

.tabs { display: flex; gap: 4px; padding: 10px 14px 0; border-bottom: 2px solid var(--ink); background: var(--paper-2); }
.tab {
  font-family: var(--pixel); font-size: 12px; line-height: 1;
  padding: 9px 14px 8px; cursor: pointer;
  background: var(--kraft); border: 2px solid var(--ink); border-bottom: 0;
  position: relative; top: 2px;
}
.tab.on { background: var(--paper); font-weight: 700; }
.tab b { color: var(--stamp); margin-left: 2px; }

.who {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin-bottom: 12px;
  background: var(--paper-2); border: 2px solid var(--ink);
}
.who-text { flex: 1; min-width: 0; }
.who-name { font-weight: 700; font-size: 16px; line-height: 1.3; }
.who-sub { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.filters { display: grid; gap: 8px; margin-bottom: 6px; }
.seg { display: flex; }
.seg button {
  flex: 1; font-family: var(--pixel); font-size: 12px; line-height: 1; padding: 8px 4px; cursor: pointer;
  background: var(--paper); border: 2px solid var(--ink); margin-left: -2px;
}
.seg button:first-child { margin-left: 0; }
.seg button.on { background: var(--ink); color: var(--paper); }

.tasklist, .todolist { list-style: none; margin: 0; padding: 0; }
.task {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; align-items: center;
  width: 100%; text-align: left; cursor: pointer;
  padding: 10px 4px; border: 0; border-bottom: 1px dashed var(--rule); background: none;
}
.task:hover { background: var(--paper-2); }
.task .t-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task.unread .t-title { font-weight: 700; }
.task .t-who { grid-column: 2; font-size: 13px; color: var(--ink-2); }
.task time { grid-column: 3; grid-row: 1 / span 2; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.task .st { grid-row: 1 / span 2; }
.empty { padding: 28px 8px; text-align: center; color: var(--ink-2); font-size: 14px; }

/* 할 일 */
.todo-add { display: grid; grid-template-columns: minmax(0, 1fr) 140px auto; gap: 8px; margin-bottom: 8px; }
.todolist li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
  padding: 9px 4px; border-bottom: 1px dashed var(--rule);
}
.todolist li.empty { display: block; border-bottom: 0; }
.todolist .due { font-family: var(--pixel); font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.todolist .due.late { color: var(--stamp); }
.todolist .del { border: 0; background: none; cursor: pointer; color: var(--ink-3); font-size: 18px; line-height: 1; padding: 0 4px; }
.todolist .del:hover { color: var(--stamp); }
.todolist.done span { color: var(--ink-3); text-decoration: line-through; }
.done-box { margin-top: 14px; }
.done-box summary { cursor: pointer; font-family: var(--pixel); font-size: 12px; color: var(--ink-2); padding: 6px 0; }

/* 업무 한 건 */
.thread-head {
  display: flex; align-items: center; gap: 8px; justify-content: space-between; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 2px solid var(--ink); background: var(--paper-2);
}
.thread-tools { display: flex; gap: 6px; flex-wrap: wrap; }
#threadTitle { margin: 0 0 6px; font-size: 19px; line-height: 1.35; }
.thread-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14px; color: var(--ink-2); }
.thread-meta strong { color: var(--ink); }

.msgs { display: grid; gap: 14px; }
.msg-label { display: flex; align-items: center; gap: 8px; font-family: var(--pixel); font-size: 12px; line-height: 1; margin-bottom: 8px; color: var(--ink-2); }
.msg-label time { margin-left: auto; color: var(--ink-3); }

.msg.user { background: var(--memo); border-left: 4px solid var(--gold); padding: 10px 12px; }
.msg.user .text { white-space: pre-wrap; overflow-wrap: anywhere; }
.atts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.atts li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.atts b { font-weight: 600; }
.atts small { color: var(--ink-2); }

.msg.report { position: relative; background: #fff; border: 2px solid var(--ink); padding: 12px 14px 14px; }
.msg.report.live { border-style: dashed; }
.caret { display: inline-block; width: 8px; height: 16px; background: var(--pen); vertical-align: text-bottom; animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* 확인 도장 — 대표가 보고를 읽으면 찍힌다 */
.seal {
  position: absolute; top: 6px; right: 10px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--stamp); color: var(--stamp);
  display: grid; place-items: center;
  font-family: var(--pixel); font-size: 12px; font-weight: 700; line-height: 1;
  transform: rotate(-10deg); opacity: .85; pointer-events: none;
  background: rgba(255, 255, 255, .6);
}
.seal.fresh { animation: stamp .35s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes stamp { from { transform: rotate(-10deg) scale(2.2); opacity: 0; } to { transform: rotate(-10deg) scale(1); opacity: .85; } }

.msg.error { border: 2px solid var(--stamp); padding: 10px 12px; color: #8d241c; background: #fdf1ef; }
.msg.error .btn { margin-top: 8px; }
.msg.note { text-align: center; font-size: 13px; color: var(--ink-3); }
.msg.wait { text-align: center; font-family: var(--pixel); font-size: 12px; color: var(--ink-2); padding: 14px; border: 2px dashed var(--ink-3); }
.msg.wait .btn { margin-left: 10px; }

/* 보고서 본문 */
.md { overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md h3, .md h4, .md h5, .md h6 { margin: 1.1em 0 .4em; line-height: 1.35; }
.md h3 { font-size: 18px; }
.md h4 { font-size: 16px; padding-bottom: 3px; border-bottom: 2px solid var(--ink); }
.md h5, .md h6 { font-size: 15px; }
.md p { margin: .5em 0; }
.md ul, .md ol { margin: .4em 0; padding-left: 1.4em; }
.md li { margin: .15em 0; }
.md code { font-family: Consolas, 'D2Coding', monospace; font-size: 13px; background: var(--paper-2); padding: 1px 4px; border: 1px solid var(--rule); }
.md pre { background: var(--ink); color: #f1eff7; padding: 10px 12px; overflow: auto; font-size: 13px; line-height: 1.5; }
.md pre code { background: none; border: 0; padding: 0; color: inherit; }
.md blockquote { margin: .6em 0; padding: 6px 12px; border-left: 4px solid var(--pen); background: #eef3fb; }
.md hr { border: 0; border-top: 1px dashed var(--ink-3); margin: 1em 0; }
.md a { color: var(--pen); }
.md .tbl { overflow-x: auto; margin: .6em 0; }
.md table { border-collapse: collapse; font-size: 14px; min-width: 60%; }
.md th, .md td { border: 1px solid var(--ink); padding: 4px 8px; text-align: left; vertical-align: top; }
.md th { background: var(--paper-2); white-space: nowrap; }

.reply { border-top: 2px solid var(--ink); padding: 10px 14px 12px; display: grid; gap: 8px; background: var(--paper-2); }
.reply-row { display: flex; align-items: center; gap: 8px; }
.reply-row .files { flex: 1; }

/* ---------- 대화상자 ---------- */
.dlg {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  padding: 0; color: var(--ink);
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 8px 8px 0 rgba(0, 0, 0, .35);
}
.dlg.wide { width: min(900px, calc(100vw - 24px)); }
.dlg::backdrop { background: rgba(20, 38, 32, .6); }
.dlg-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 2px solid var(--ink); background: var(--paper-2);
  position: sticky; top: 0; z-index: 1;
}
.dlg-head h2 { margin: 0; font-family: var(--pixel); font-size: 12px; font-weight: 700; }
.dlg label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.dlg label small { color: var(--ink-3); font-size: 12px; }
.dlg label input, .dlg label select, .dlg label textarea { color: var(--ink); font-size: 14px; }
.dlg-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.settings { padding: 16px; display: grid; gap: 14px; }
.settings fieldset { border: 2px solid var(--ink); padding: 12px; margin: 0; display: grid; gap: 10px; }
.settings legend { font-family: var(--pixel); font-size: 12px; padding: 0 6px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 14px; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.row { display: flex; gap: 8px; align-items: center; }
.row input { flex: 1; }

.staff { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 0; }
.staff-list { border-right: 2px solid var(--ink); padding: 12px; display: grid; gap: 12px; align-content: start; background: var(--paper-2); }
.staff-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.staff-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
  background: var(--paper); border: 2px solid var(--ink); padding: 4px 8px;
}
.staff-item.on { background: var(--memo); box-shadow: 2px 2px 0 var(--ink); }
.staff-item span { display: grid; line-height: 1.3; min-width: 0; }
.staff-item small { color: var(--ink-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-form { padding: 16px; display: grid; gap: 12px; align-content: start; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.look-row { display: flex; gap: 16px; align-items: center; }
.look-preview {
  flex: none; width: 96px; height: 124px; display: grid; place-items: center;
  background: #cfa06a; border: 2px solid var(--ink);
}
.look-fields { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.dlg label.color { grid-template-columns: auto 44px; align-items: center; justify-content: start; gap: 8px; }
.dlg label.color input { width: 44px; height: 28px; padding: 0; border: 2px solid var(--ink); background: none; }
.dlg label.check { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.dlg label.check.tall { align-self: end; padding-bottom: 8px; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 980px) {
  .app { height: auto; min-height: 100dvh; grid-template-rows: auto auto auto; align-content: start; }
  .main { grid-template-columns: minmax(0, 1fr); }
  .panel { min-height: 420px; }
  .pane-body { max-height: none; overflow: visible; }
  .counts { margin-left: 0; }
  .nav { margin-left: auto; }
  .roster {
    display: flex; gap: 6px; flex-wrap: wrap; width: 100%; justify-content: center;
  }
  .roster button {
    font-family: var(--pixel); font-size: 12px; line-height: 1; cursor: pointer;
    background: var(--paper); border: 2px solid var(--ink); padding: 6px 8px;
  }
  .roster button.on { background: var(--ink); color: var(--paper); }
  .roster button.report { border-color: var(--stamp); color: var(--stamp); }
  .roster button.working { color: var(--pen); }
  .roster button.on.report, .roster button.on.working { color: var(--paper); }
  .composer-main { flex-direction: column; }
  .composer-btns { flex-direction: row; justify-content: flex-end; }
  .composer-foot .hint { display: none; }
  .staff { grid-template-columns: minmax(0, 1fr); }
  .staff-list { border-right: 0; border-bottom: 2px solid var(--ink); }
  .todo-add { grid-template-columns: minmax(0, 1fr) auto; }
  .todo-add input[type=date] { grid-column: 1; }
}
@media (max-width: 520px) {
  .plate { font-size: 12px; padding: 10px 12px; }
  .top { gap: 10px; }
  .two, .look-fields { grid-template-columns: 1fr; }
  .look-row { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .seal.fresh, .caret, .o-bubble.working .b-txt::after { animation: none; }
  .o-bubble.working .b-txt::after { width: 1em; }
}