/* 화면 다듬기(2026-10-07 밤): 모양만 통일한다. 기능·버튼 이름·주소·저장 값은 건드리지 않는다.
   DESIGN.md(시안 C · 물결)가 기준이다. 이 파일은 app.css · pc.css · ui.css 뒤에 불러서 공통 부품(색 · 카드 · 버튼 · 입력 칸 ·
   꼬리표 · 표 · 안내 상자)을 한 번에 맞춘다. assign.css 는 본문 안에서 불러와 이 파일보다 뒤이므로, 겹치는 곳은 선택자를 더 길게 썼다.
   물결 띠(위쪽 무늬)는 로그인과 홈(`body.home`)에만 둔다. 인라인 스크립트·외부 글꼴·외부 이미지 없음. */

/* ── 색 토큰: 시안 C 기본색으로 맞춘다(흰 바탕 · 회색 글씨 단계 · 강조는 파랑 하나 · 경고·오류만 빨강·주황) ── */
:root {
  --ink: #1B1F3B; --sub: #565B7A; --label: #3A3F5C; --line: #DDE0EC; --bg: #F4F5FA;
  --accent: #2E5797; --accent-deep: #264A82; --accent-tint: #EEF2FA;
  --tint: #EEF2FA; --error: #C62828; --warn-bg: #FFF4D6; --ok-bg: #DFF5EC;
  --grad: linear-gradient(#2E5797, #2E5797);   /* 기본 버튼 · 로그인 버튼: 단색(그라데이션 아님) */
  --shadow-card: 0 1px 2px rgba(27, 31, 59, 0.04);
}
body { color: var(--ink); }
main a { color: var(--accent); }
main a:hover { color: var(--accent-deep); }
main a.button.primary, main a.button.primary:hover { color: #fff; }
.who a, .who button.link { color: #D9E4FA; }

/* ── 위쪽 띠: 홈·로그인만 물결, 나머지는 단색의 낮은 띠 ── */
body.app:not(.home) .top { padding-bottom: 38px; background: var(--navy); }
body.app:not(.home) .top-art { display: none; }
body.app:not(.home) .top-title { padding-top: 14px; }
body.app:not(.home) .top-title h1 { font-size: 22px; text-shadow: none; }
body.app:not(.home) .top-title h1::after { width: 40px; height: 3px; margin-top: 8px; background: var(--teal-bright); }
body.app:not(.home) main { margin-top: -26px; }
body.app.home .top-title h1 { text-shadow: 0 2px 20px rgba(10, 30, 60, 0.35); }
@media (min-width: 760px) {
  body.app:not(.home) .top { padding-bottom: 44px; }
  body.app:not(.home) .top-title { padding-top: 16px; }
  body.app:not(.home) .top-title h1 { font-size: 26px; }
  body.app:not(.home) main { margin-top: -30px; }
}
@media (min-width: 1100px) {
  body.pc:not(.home) .top { padding-bottom: 42px; }
  body.pc:not(.home) .top-title h1 { font-size: 23px; }
  body.pc:not(.home) main { margin-top: -28px; }
}

/* ── 제목 줄(h2) ── */
h2 { margin: 24px 0 10px; font-size: 16px; color: var(--ink); }
h2::before { width: 4px; height: 16px; border-radius: 2px; background: var(--accent); }

/* ── 카드: 흰 바탕 · 12px 모서리 · 테두리만(그림자는 아주 옅게) ── */
.card { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-card); }
.card.dropzone { border: 2px dashed #B8BFDB; box-shadow: none; }
.entry.opened { border-color: var(--accent); background: #F7F9FD; }
@media (min-width: 760px) { .card { padding: 20px 22px; } }
body.pc .card { padding: 16px 20px; border-radius: 12px; box-shadow: var(--shadow-card); }
body.pc .card.scroll, .card.scroll { padding: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.card.slim, body.pc .card.slim { padding: 0; }
body.pc .card.compact { padding: 8px 12px; }
.card .card, .card.stack > form.card { box-shadow: none; }

/* ── 입력 칸: 옅은 바탕 · 얇은 선 · 포커스는 파랑 ── */
label { color: var(--label); }
input:not([type=checkbox]), select, textarea { border-color: #D5D9EA; border-radius: 10px; background: #F6F7FB; }
input:not([type=checkbox]):hover, select:hover, textarea:hover { border-color: #A9B3D6; }
input:not([type=checkbox]):focus, select:focus, textarea:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(46, 87, 151, 0.16); }
textarea[readonly] { background: #F1F3F9; }
html body.pc input:not([type=checkbox]):not([type=radio]):not([type=file]), html body.pc select, html body.pc textarea,
html body .staff-form input:not([type=checkbox]):not([type=radio]) { border-color: #D5D9EA; border-radius: 10px; background-color: #F6F7FB; }
html body.pc input:not([type=checkbox]):not([type=radio]):not([type=file]):hover, html body.pc select:hover, html body.pc textarea:hover { border-color: #A9B3D6; }
html body.pc input:not([type=checkbox]):not([type=radio]):not([type=file]):focus, html body.pc select:focus, html body.pc textarea:focus,
html body .staff-form input:not([type=checkbox]):not([type=radio]):focus { border-color: var(--accent); background-color: #fff; box-shadow: 0 0 0 3px rgba(46, 87, 151, 0.16); }
input[type=checkbox] { accent-color: var(--accent); }
button:focus-visible, a:focus-visible, summary:focus-visible, input[type=checkbox]:focus-visible { outline-color: var(--accent); }
label.check { border-radius: 10px; }
label.check:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
input:disabled, select:disabled { border-color: var(--line); background: #EEF0F7; }

/* ── 버튼: 기본(주) 버튼은 파랑 단색, 나머지는 흰 바탕 + 파랑 글자 ── */
button, .button { border-color: #C9CEE2; border-radius: 10px; color: var(--accent); }
html body.app button, html body.app .button, html body.pc button, html body.pc .button { border-color: #C9CEE2; border-radius: 10px; }
button.link, .who button.link { color: inherit; }
.button:hover, button:not(.primary):not(.link):hover { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-deep); }
html body.app button:not(.primary):not(.link):hover, html body.pc button:not(.primary):not(.link):hover { border-color: var(--accent); background: var(--accent-tint); }
button.primary, a.button.primary { border: 0; color: #fff; background: var(--accent); box-shadow: none; }
button.primary:hover, a.button.primary:hover { background: var(--accent-deep); box-shadow: none; color: #fff; }
html body.app button.primary, html body.pc button.primary { border: 0; background: var(--accent); box-shadow: none; }
html body.app button.primary:hover, html body.pc button.primary:hover { background: var(--accent-deep); box-shadow: none; }
button:disabled, button.primary:disabled, html body.app button.primary:disabled { background: #E6E8F1; color: var(--sub); box-shadow: none; }
.entry.dirty > .save, .entry .need + .save { background: var(--accent); }
.howto-copy button, .howto-copy button:hover { border: 1px solid #C9CEE2; background: #fff; color: var(--accent); }   /* [빈 양식 복사]는 보조 버튼 — 이 화면의 주 버튼은 [읽기] 하나 */
.howto-copy button:hover { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-deep); }
main button.link { color: var(--accent); }
.del-button, main .del-button { color: var(--error); }

/* ── 안내 상자: 그림자 없이 색 바탕만. 경고·오류만 노랑·빨강 ── */
.notice { padding: 11px 14px; border-radius: 10px; background: var(--accent-tint); box-shadow: none; font-size: 14px; }
.notice.error { background: #FCE4E2; color: var(--error); }
.notice.warn { background: var(--warn-bg); color: #6B4A00; }
.notice.ok { background: var(--ok-bg); color: #0E5A3A; }
.guide { border-radius: 10px; background: var(--accent-tint); color: var(--label); }
.callout { border-radius: 10px; }
.totals dl div { border-radius: 10px; background: var(--accent-tint); }
.totals dt, .totals dd { color: var(--label); }
.totals dd strong { color: #383270; }

/* ── 꼬리표(.tag): 모든 상태 표시를 같은 알약 모양으로. 색은 뜻이 있을 때만 ── */
.tag, html body.pc .tag, html body.app .tag { display: inline-block; padding: 2px 9px; border: 0; border-radius: 999px; background: #E8ECF7; color: #2E4A86; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.tag.ok, html body.app .tag.ok { background: var(--ok-bg); color: #14684B; }
.tag.cancel, .tag.need, html body.app .tag.cancel, html body.app .tag.need { border: 0; background: #FCE4E2; color: var(--error); }
.tag.warn, .tag.other, html body.app .tag.warn, html body.app .tag.other { border: 0; background: #FFEFC2; color: #6B4A00; }
.tag.pin, html body.app .tag.pin { background: var(--accent); color: #fff; }
.tag.new, html body.app .tag.new { background: #DCEEF8; color: #0B5D86; }
.tag.org, html body.app .tag.org { background: #E6ECF8; color: #2E4A86; }
.tag.aff, html body.app .tag.aff { background: #EEF0F6; color: var(--sub); }
.users li.off .tag, .users li.off .tag.org, .users li.off .tag.aff { background: #E6E8F1; color: var(--sub); }

/* ── 고른 것(메뉴·탭·칩): 흰 바탕 = 안 고른 것, 금빛 노랑 = 고른 것. 테두리·그림자는 같은 규칙 ── */
.chip, .person { border: 1px solid #D5D9EA; box-shadow: none; color: var(--accent); }
.chip.on, .person.on { border-color: var(--picked); box-shadow: none; color: var(--navy-deep); }
html body.pc .chip { border-radius: 999px; }
.states .chip span { color: var(--accent); }
.subnav a { box-shadow: none; border: 1px solid #D5D9EA; }
.subnav a.on { box-shadow: none; border-color: var(--picked); }
body.pc main:has(> .subnav) > .subnav { border: 1px solid var(--line); box-shadow: var(--shadow-card); }
body.pc main:has(> .subnav) > .subnav a { border: 0; }
body.pc main:has(> .subnav) > .subnav a:hover { background: var(--accent-tint); }
body.pc main:has(> .subnav) > .subnav a.on { background: var(--picked); }
.person .count, .person.on .count { background: var(--accent); }
.week-strip .day i:not(:empty) { background: var(--accent); }

/* ── 표: 머리줄은 옅은 바탕 · 위에 붙어 따라오고, 줄 높이는 넉넉하게, 숫자는 오른쪽, 상태는 점 + 글자 ── */
th { color: var(--sub); }
table.contracts th, html body.pc table.contracts th { background: #F4F5FA; color: var(--sub); font-size: 12.5px; font-weight: 600; box-shadow: 0 1px 0 var(--line); }
table.contracts th { border-bottom-color: var(--line); }
table.contracts td, html body.pc table.contracts td { border-bottom: 1px solid #E6E8F1; }
html body.pc table.contracts td { padding: 9px 10px; }
html body.pc table.contracts tbody tr:nth-child(even) td { background-color: #fff; }
html body.pc table.contracts tbody tr:hover td, table.contracts tbody tr:hover td { background-color: #F4F6FC; }
html body.pc table.contracts tbody tr:last-child td { border-bottom: 0; }
html body.pc table.assign-table.thin td { padding: 5px 8px; line-height: 1.3; }
html body.pc table.assign-table.thin th { padding: 7px 8px; }
body.pc table.contracts thead th, body.pc .apply-table th { position: sticky; top: 0; z-index: 3; }
html body.pc .apply-table th { background: #F4F5FA; color: var(--sub); box-shadow: 0 1px 0 var(--line); }
table.contracts td.num, table.daily td.num, table.counts td:not(:first-child), table.counts th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
table.contracts td.none { color: var(--error); }
html body.pc table.assign-table.results td:nth-child(7), html body.pc table.assign-table.results th:nth-child(7) { text-align: right; font-variant-numeric: tabular-nums; }
html body.pc table.contracts.records td:nth-child(4), html body.pc table.contracts.records th:nth-child(4),
table.contracts.records td:nth-child(4), table.contracts.records th:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }
/* 상태 칸: 색 바탕·왼쪽 띠를 없애고, 같은 모양의 작은 점 + 글자로 */
table.contracts td.st, html body.pc table.contracts td.st, html body.pc table.contracts td.st.pending, html body.pc table.contracts td.st.done,
html body.pc table.contracts td.st.none, html body.pc table.contracts td.st.unsure, html body.pc table.contracts td.st.failed { box-shadow: none; background-color: transparent; font-weight: 600; }
table.contracts td.st::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 0; }
html body.pc table.contracts td.st, html body.pc table.contracts td.st.pending { color: var(--sub); }
html body.pc table.contracts td.st.done { color: #14684B; }
html body.pc table.contracts td.st.none { color: #3E3D80; }
html body.pc table.contracts td.st.unsure { color: #8A5A00; }
html body.pc table.contracts td.st.failed { color: var(--error); }
table.contracts td.st small, html body.pc table.contracts td.st small { margin-top: 2px; padding-left: 14px; font-weight: 400; color: var(--sub); }
html body.pc table.contracts tbody tr:nth-child(even) td.st, html body.pc table.contracts tbody tr:hover td.st { background-color: transparent; }
html body.pc table.contracts tbody tr:hover td.st { background-color: #F4F6FC; }
.assign-table tr.cancelled td { background: #FDF3F2; }
.assign-table tr.other td { background: #FFF6E0; }
.assign-table tr.clash td { background: #FFF4D6; }
/* 빈 목록 안내(0건) */
table.contracts td[colspan], .users li.none { padding: 26px 14px; text-align: center; color: var(--sub); }
p.hint.empty, .empty { padding: 22px 14px; text-align: center; color: var(--sub); }

/* ── 계정 목록 머리줄 · 신청 표 ── */
html body.pc .users .u-head { background: #F4F5FA; border-bottom: 1px solid var(--line); color: var(--sub); }
.users details[open] > summary, .posts li.pinned a { background: #F4F6FC; }
.users summary:hover, .posts a:hover { background: #F6F7FB; }
.users li.group { background: #EEF0F6; color: var(--sub); }
.user-edit { background: #FAFBFD; }

/* ── 게시판 · 직원 정보 · 기타 ── */
.post-files li, pre, .consent-text { background: #F6F7FB; border-color: var(--line); }
.sample { background: #F1F3F9; }
.howto-list dt { background: var(--accent-tint); color: var(--label); }
.dropzone .drop-title, summary { color: var(--accent); }
.bank-pick .bank-chip span { border-color: #D5D9EA; background: #F6F7FB; }
.bank-pick .bank-chip:hover span { border-color: var(--accent); background: var(--accent-tint); }

/* ── 다듬기 2차: 가장 작은 글자 12px, 안내 상자 폭, 표 안 세로 맞춤 ── */
nav .badge, .week-strip .day i, .person .count { font-size: 12px; }
html body.pc .assign-filter.compact label { font-size: 12px; }
body.pc .notice, body.pc .assign-page .notice { max-width: none; }
html body.pc table.contracts td { vertical-align: middle; }
html body.pc table.contracts.records td:nth-child(4), html body.pc table.contracts.records th:nth-child(4) { padding-right: 22px; }
td.del-cell .del-button, td.del-cell form { margin: 0; }
/* PC: 폼 상자·안내 상자·표 상자의 오른쪽 끝을 같은 선에 맞춘다(예전에는 폼만 1040px에서 끊겼다) */
body.pc main > form.card, body.pc main > .card.stack, body.pc .card.slim, body.pc .notice { max-width: none; }

/* 한 화면에 주 버튼은 하나: 검색·전체 배정·AI 읽기·품목별 저장은 보조 버튼 모양으로 */
html body.app form[action="/admin/assign"] button.primary, html body.app button.primary[value=all],
html body.app form[action="/admin/receipts/ai"] button.primary, html body.app form[action="/admin/applications/catalog"] button.primary {
  border: 1px solid #C9CEE2; background: #fff; color: var(--accent); }
html body.app form[action="/admin/assign"] button.primary:hover, html body.app button.primary[value=all]:hover,
html body.app form[action="/admin/receipts/ai"] button.primary:hover, html body.app form[action="/admin/applications/catalog"] button.primary:hover {
  border-color: var(--accent); background: var(--accent-tint); color: var(--accent-deep); }

/* 신청 관리(PC): 가운데로 몰리던 본문을 왼쪽 메뉴 옆에서 시작해 오른쪽 끝까지 쓴다 */
body.pc .applications { margin: 0; }
/* 설명 글 바로 아래 상자·표가 붙지 않게 */
p.hint + .card, p.hint + div.card, main > p + .card.scroll { margin-top: 10px; }
/* 결과입력 아래 '작성 방법' 상자: 다른 카드와 같은 모서리·테두리·그림자 */
.howto-toggle { border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; background: #fff; }
.howto-copy { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; background: #fff; box-shadow: var(--shadow-card); }
.howto-toggle summary { color: var(--accent); }
/* 안내 상자가 목록(ul)일 때: 바깥 여백과 줄 사이 선 정리 */
ul.plain.notice { margin: 0 0 14px; padding: 8px 16px; }
ul.plain.notice li { padding: 4px 0; border-top: 0; }
/* 폼 상자 아래의 단추: 한 줄 전체로 늘리지 않는다. 폼에 단추가 하나뿐이면 그 화면의 주 버튼이다 */
body.pc main > form.card > button, body.pc main > form.card.stack > button { justify-self: start; width: auto; min-width: 160px; padding: 0 24px; }
html body.app main > form.card > button:only-of-type:not(.primary):not(.link):not(.del-button) { border: 0; background: var(--accent); color: #fff; }
html body.app main > form.card > button:only-of-type:not(.primary):not(.link):not(.del-button):hover { background: var(--accent-deep); color: #fff; }
.editor-tools { margin-bottom: 8px; }
.card.scroll th { background: #F4F5FA; color: var(--sub); font-size: 12.5px; font-weight: 600; }
/* 표 안의 [삭제] 글자 단추가 줄 높이를 키우지 않게, 머리글은 낱글자로 쪼개지지 않게 */
html body.app button.link, html body.pc button.link { min-height: 0; height: auto; padding: 2px 0; border: 0; background: none; }
html body.pc table.contracts th, table.contracts th { overflow-wrap: normal; }
/* 기간 직접 선택 상자: 큰 그림자 대신 테두리 */
details.range form { border: 1px solid var(--line); box-shadow: none; }
/* 신청 품목·배송비(PC): 품목 상자를 두 줄 나란히(세로로 너무 길어지지 않게) */
html body.pc .applications > form.card[action$="/applications/catalog"] { grid-column: auto; }