/* 시안 A 서식: 화면 전체가 한 장의 민원 서식이다. 바탕체, 칸과 선, 회색 머리칸, 마지막에 직인. */
body[data-v="a"] {
  --red: #d40000;
  --line: #111;
  --soft: #9a9a95;
  background: #c9c9c4;
  color: #111;
  font: 13.5px/1.55 Batang, "바탕", "Noto Serif KR", AppleMyungjo, serif;
}
body[data-v="a"] #app {
  display: grid;
  grid-template-columns: minmax(560px, 43%) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}
body[data-v="a"] :is(#steps, #hero, #fkeys, #threads, #scan-log, #m-clock) { display: none; }

/* 서식 머리 */
body[data-v="a"] #mast {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  padding: 10px 18px 12px;
  background: #fff;
  border-right: 1px solid var(--line);
  border-bottom: 3px double var(--line);
}
body[data-v="a"] #m-form { font-size: 11px; color: #444; }
body[data-v="a"] #m-title { margin-top: 8px; padding-right: 130px; text-align: center; font-size: 24px; letter-spacing: 0.3em; text-indent: 0.3em; line-height: 1.25; }
body[data-v="a"] #m-sub { padding-right: 130px; text-align: center; font-size: 12.5px; letter-spacing: 0.12em; color: #333; }
body[data-v="a"] #m-meta { position: absolute; right: 18px; top: 10px; border: 1px solid var(--line); font-size: 11px; line-height: 1.5; }
body[data-v="a"] #m-meta > div { display: grid; grid-template-columns: 52px 112px; }
body[data-v="a"] #m-meta > #m-clock { display: none; }
body[data-v="a"] #m-meta > div + div { border-top: 1px solid var(--line); }
body[data-v="a"] #m-meta dt { background: #ecece8; border-right: 1px solid var(--line); text-align: center; }
body[data-v="a"] #m-meta dd { padding: 0 6px; text-align: center; }

/* 서식 칸 */
body[data-v="a"] #form {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  background: #fff;
  border-right: 1px solid var(--line);
}
body[data-v="a"] #form::after {
  content: "210mm×297mm(백상지 80g/㎡)";
  flex: none;
  padding: 3px 10px;
  text-align: right;
  font-size: 10.5px;
  color: #555;
}
body[data-v="a"] .block {
  flex: none;
  display: grid;
  grid-template-columns: 28px 74px minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
}
body[data-v="a"] .block::before {
  content: attr(data-n);
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--line);
}
body[data-v="a"] .block[data-status="now"]::before { background: #111; color: #fff; }
body[data-v="a"] .label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: #ecece8;
  border-right: 1px solid var(--line);
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 0.04em;
}
body[data-v="a"] .body { min-width: 0; padding: 7px 10px; min-height: 34px; }
body[data-v="a"] .block[data-status="todo"] .body { visibility: hidden; }

body[data-v="a"] #s-word { flex: 1 1 auto; min-height: 150px; }
body[data-v="a"] #s-word .body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
body[data-v="a"][data-phase="done"] #s-word { flex: none; min-height: 0; }
body[data-v="a"][data-phase="done"] #s-word .body { display: none; }

/* 1 접수 */
body[data-v="a"] #drop { display: block; padding: 22px 10px; border: 1px solid var(--soft); text-align: center; }
body[data-v="a"] #drop:hover, body[data-v="a"].drag #drop { background: #111; color: #fff; }
body[data-v="a"] .drop-sub { margin-top: 2px; font-size: 12px; color: #555; }
body[data-v="a"] #drop:hover .drop-sub, body[data-v="a"].drag .drop-sub { color: #ccc; }
body[data-v="a"] .drop-sub.is-error { color: var(--red); }
body[data-v="a"]:not([data-phase="idle"]) #drop { display: none; }
body[data-v="a"] #info { display: flex; flex-wrap: wrap; gap: 0 14px; font-size: 12.5px; }
body[data-v="a"] #info > div { display: flex; gap: 6px; }
body[data-v="a"] #info > div:first-child, body[data-v="a"] #info > .warn { flex-basis: 100%; }
body[data-v="a"] #info dt { color: #555; white-space: nowrap; }
body[data-v="a"] #info .warn { color: var(--red); }

/* 2 조회 */
body[data-v="a"] #scan-line { font-size: 12.5px; }
body[data-v="a"] #register {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21px, 1fr));
  margin-top: 6px;
  border-top: 1px solid #bbb;
  border-left: 1px solid #bbb;
}
body[data-v="a"] .r { border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; text-align: center; font-size: 12px; line-height: 20px; }
body[data-v="a"] .r.on { background: #111; color: #fff; }
body[data-v="a"][data-phase="pick"] #register { max-height: 106px; overflow: auto; }

/* 3 지정 */
body[data-v="a"] #ask { display: flex; align-items: center; gap: 6px; }
body[data-v="a"] #ask label { white-space: nowrap; font-size: 12.5px; }
body[data-v="a"] #ask-input {
  flex: 1;
  min-width: 80px;
  padding: 2px 6px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  outline: 0;
}
body[data-v="a"] #ask-input::placeholder { color: #999; }
body[data-v="a"] #ask-result { min-height: 1.5em; margin-top: 3px; font-size: 12.5px; }
body[data-v="a"] #ask-result .none { color: var(--red); }
body[data-v="a"] #list-head { font-size: 12px; color: #555; margin-bottom: 3px; }
body[data-v="a"] #wordlist { flex: 1; min-height: 0; overflow: auto; border-top: 1px solid #777; border-left: 1px solid #bbb; }
body[data-v="a"] .w-group { display: grid; grid-template-columns: 46px minmax(0, 1fr); border-bottom: 1px solid #777; }
body[data-v="a"] .w-group h3 { display: flex; align-items: center; justify-content: center; background: #ecece8; border-right: 1px solid #bbb; font-size: 12px; }
body[data-v="a"] .w-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
body[data-v="a"] .w {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 5px;
  border: 0;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background: #fff;
  text-align: left;
  white-space: nowrap;
}
body[data-v="a"] .w::before { content: ""; flex: none; width: 10px; height: 10px; border: 1px solid #111; }
body[data-v="a"] .w:hover { background: #ecece8; }
body[data-v="a"] .w[aria-pressed="true"] { font-weight: bold; }
body[data-v="a"] .w[aria-pressed="true"]::before { background: #111; box-shadow: inset 0 0 0 1.5px #fff; }

/* 4 가림 */
body[data-v="a"] #letters { display: flex; flex-wrap: wrap; gap: 6px 18px; }
body[data-v="a"] .empty { font-size: 12.5px; color: #777; }
body[data-v="a"] .l-name { font-size: 12.5px; }
body[data-v="a"] .l-drop { margin-left: 4px; font-size: 11.5px; color: #555; }
body[data-v="a"] .l-cells { display: flex; gap: 4px; margin-top: 2px; }
body[data-v="a"] .cell { display: block; width: 44px; padding: 0; border: 1px solid #111; background: #fff; text-align: center; }
body[data-v="a"] .cell canvas { width: 42px; height: 42px; }
body[data-v="a"] .cell small { display: block; border-top: 1px solid #111; font-size: 10.5px; line-height: 15px; }
body[data-v="a"] .cell.none span { display: flex; align-items: center; justify-content: center; height: 42px; font-size: 20px; color: #bbb; }
body[data-v="a"] .cell.none small { color: var(--red); }
body[data-v="a"] button.cell:hover { outline: 1px solid #111; }
body[data-v="a"] #missing { font-size: 12px; color: var(--red); }
body[data-v="a"] #missing:empty { display: none; }
body[data-v="a"] #modes { display: flex; flex-wrap: wrap; gap: 0 12px; margin-top: 6px; font-size: 12.5px; }
body[data-v="a"] #modes input { accent-color: #111; margin: 0 2px 0 0; vertical-align: -1px; }
body[data-v="a"] .actions { display: flex; gap: 6px; margin-top: 6px; }
body[data-v="a"] #s-mask .actions { justify-content: flex-end; }
body[data-v="a"][data-picked="no"] #s-mask :is(#modes, .actions) { display: none; }
body[data-v="a"][data-phase="done"] #s-mask .actions { display: none; }

.btn { border-radius: 0; }
body[data-v="a"] .btn { padding: 2px 13px; background: #fff; border: 1px solid #111; white-space: nowrap; }
body[data-v="a"] .btn:hover:not(:disabled) { background: #111; color: #fff; }
body[data-v="a"] .btn:disabled { border-color: #bbb; color: #aaa; }
body[data-v="a"] .btn.primary { background: #111; color: #fff; }
body[data-v="a"] .btn.primary:disabled { background: #ddd; border-color: #ddd; color: #888; }

/* 5 교부 */
body[data-v="a"] #s-done .body { position: relative; }
body[data-v="a"]:not([data-phase="done"]) #s-done .body > * { display: none; }
body[data-v="a"] #done-line { display: block; text-align: center; }
body[data-v="a"] #done-line span { display: block; }
body[data-v="a"] .d-main { font-size: 14.5px; }
body[data-v="a"] .d-sub { font-size: 12px; color: #555; }
body[data-v="a"] .d-date { margin-top: 5px; letter-spacing: 0.06em; }
body[data-v="a"] .d-office { letter-spacing: 0.3em; text-indent: 0.3em; font-size: 15px; }
body[data-v="a"] #stamp {
  position: absolute;
  right: 26%;
  top: 44px;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: column;
  direction: rtl;
  width: 46px;
  height: 46px;
  border: 2px solid var(--red);
  color: var(--red);
  font: bold 11.5px/1 Gungsuh, "궁서", Batang, serif;
  text-align: center;
  transform: rotate(-4deg);
  opacity: 0.86;
  animation: a-stamp 0.22s ease-out;
}
body[data-v="a"] #stamp span { display: flex; align-items: center; justify-content: center; }
@keyframes a-stamp { from { transform: rotate(-4deg) scale(1.5); opacity: 0; } }
body[data-v="a"] #s-done .actions { justify-content: center; margin-top: 8px; }
body[data-v="a"] #print-note { margin-top: 4px; text-align: center; font-size: 12px; color: #555; }

/* 문서 */
body[data-v="a"] #docview {
  grid-column: 2;
  grid-row: 1 / 3;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-content: start;
  padding: 20px;
}
body[data-v="a"] #docview:empty { place-items: center; grid-template-columns: 1fr; align-content: center; }
body[data-v="a"] #docview:empty::before { content: ""; height: 74vh; aspect-ratio: 210 / 297; background: #d6d6d1; outline: 1px solid #a9a9a3; }
body[data-v="a"] .paper { outline: 1px solid #77776f; }
body[data-v="a"] figcaption { margin-top: 3px; text-align: center; font-size: 11.5px; color: #333; }