:root { --fg: #1d1d1f; --muted: #6b6b70; --line: #e3e3e6; --bg: #f6f6f7; --accent: #1f6feb;
        --warn-bg: #fff8db; --warn: #d4a72c; --err: #c0392b; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
       color: var(--fg); background: var(--bg); }
.top { background: #fff; border-bottom: 1px solid var(--line); padding: 12px 16px; font-weight: 600; }
.top a { color: inherit; text-decoration: none; }
main { max-width: 760px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.35rem; margin: 0 0 12px; } h2 { font-size: 1.1rem; margin: 24px 0 8px; }
.card, .row, .line { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.row { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: space-between; align-items: center;
       color: inherit; text-decoration: none; }
.field { display: block; margin-bottom: 12px; font-weight: 600; }
.field input { display: block; width: 100%; margin-top: 6px; font: inherit; padding: 8px; }
button, .button { display: inline-block; background: var(--accent); color: #fff; border: 0; border-radius: 8px;
                  padding: 12px 18px; font: inherit; font-weight: 600; text-decoration: none; }
.button.small { padding: 6px 12px; font-size: .9rem; }
.hint { color: var(--muted); font-size: .9rem; }
.error { color: var(--err); font-weight: 600; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .85rem; background: var(--line); }
.s-failed, .o-failed { background: #fde2df; color: var(--err); }
.s-done, .o-review { background: #e6f0ff; color: var(--accent); }
.originals { display: flex; gap: 8px; overflow-x: auto; margin: 12px 0; }
.originals img { height: 220px; border: 1px solid var(--line); border-radius: 6px; }
.header { display: grid; grid-template-columns: 6em 1fr; gap: 4px 8px; margin: 0 0 12px; }
.header dt { color: var(--muted); }
.feedback-box { margin-bottom: 12px; }
.line.needs-review { border: 2px solid var(--warn); background: var(--warn-bg); }
.line .name { font-weight: 600; }
.fb { margin: 6px 0 0; font-size: .92rem; color: var(--muted); }
.fb-review { color: #7a5b00; font-weight: 600; }

/* 업로드 */
.file-button { position: relative; display: block; text-align: center; padding: 22px 16px; border: 2px dashed var(--accent);
               border-radius: 12px; background: #f2f7ff; color: var(--accent); cursor: pointer; }
.file-button span { display: block; font-size: 1.15rem; font-weight: 700; }
.file-button small { color: var(--muted); }
.file-button input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-count { margin: 8px 0 12px; font-weight: 600; color: var(--accent); min-height: 1.5em; }
.file-count:empty { min-height: 0; margin: 0 0 12px; }
.memo, .paste { display: block; width: 100%; font: inherit; padding: 10px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 8px; }
.memo::placeholder, .paste::placeholder { color: #a5a5ab; }
.paste { resize: vertical; min-height: 96px; }
button.submit { width: 100%; }
/* 발주 카드 (업로드 화면) */
.order-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.oc-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.oc-row + .oc-row { margin-top: 10px; }
.oc-title { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; color: var(--fg); text-decoration: none; }
.oc-title:hover .oc-name { text-decoration: underline; }
.oc-no { flex-shrink: 0; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 14px; display: inline-flex; align-items: center;
         justify-content: center; background: #eaf1fe; color: var(--accent); font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.oc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-name.unknown { color: var(--muted); font-weight: 500; }
.oc-row .hint { flex-shrink: 0; }
.oc-row .button { flex-shrink: 0; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge.warn { background: var(--warn-bg); color: #7a5b00; border: 1px solid var(--warn); }
.badge.ok { background: #e7f6ec; color: #1e7b3c; }
.badge.dup { background: #f1ecfb; color: #5b3fa8; cursor: help; }
/* 발주 화면: 넓은 품목 표 (PC는 한눈에, 폰은 좌우 스크롤) */
main.page-wide { max-width: 1400px; }
.order-summary { max-width: 760px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
table.lines { border-collapse: separate; border-spacing: 0; min-width: 1100px; width: 100%; font-size: .92rem; }
table.lines th, table.lines td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; background: #fff; }
table.lines thead th { position: sticky; top: 0; z-index: 2; background: #fafafb; color: var(--muted); font-size: .8rem; font-weight: 600; white-space: nowrap; }
table.lines td.n, table.lines thead th:nth-child(n+5):nth-child(-n+9) { text-align: right; }
table.lines td.n { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.lines td.code { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); }
table.lines td.name { min-width: 220px; font-weight: 600; }
table.lines td.fb-cell { min-width: 260px; color: var(--muted); }
table.lines td.fb-cell .fb { margin: 0 0 4px; }
/* 번호·원문 열은 좌우 스크롤 때 왼쪽에 고정 */
table.lines .sticky { position: sticky; z-index: 1; }
table.lines .c-no { left: 0; width: 5.2em; min-width: 5.2em; text-align: center; }
table.lines .c-src { left: 5.2em; min-width: 150px; max-width: 220px; border-right: 1px solid var(--line); }
table.lines thead .sticky { z-index: 3; }
table.lines tr.needs-review td { background: var(--warn-bg); }
/* 상단: 엑셀 저장 폴더 */
.top { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; align-items: center; }
.export-dir { font-weight: 400; font-size: .85rem; color: var(--muted); }
.link-button { background: none; border: 0; padding: 0 0 0 6px; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--fg); color: #fff;
         padding: 10px 16px; border-radius: 10px; font-size: .9rem; z-index: 10; max-width: calc(100% - 32px); }
/* 기능 보완 피드백 */
.suggestions { margin-top: 24px; }
.suggestions h2 { margin-top: 0; }
.suggestions textarea { display: block; width: 100%; font: inherit; padding: 10px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; }
.suggestions textarea::placeholder { color: #a5a5ab; }
.small-submit { margin: 8px 0 14px; padding: 8px 16px; }
.sg { border-top: 1px solid var(--line); padding: 10px 0; }
.sg-meta { font-size: .8rem; color: var(--muted); }
.sg-body { margin: 4px 0 0; white-space: pre-wrap; word-break: break-word; }
/* 발주 화면 편집 */
.notice { border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; }
.notice p { margin: 2px 0; }
.notice.error { background: #fde2df; color: var(--err); font-weight: 600; }
.notice.ok { background: #e7f6ec; color: #1e7b3c; }
.notice.warn { background: var(--warn-bg); color: #7a5b00; border: 1px solid var(--warn); font-weight: 600; }
.header-grid { display: grid; grid-template-columns: 6em 1fr; gap: 8px 10px; align-items: start; margin-bottom: 12px; }
.header-grid .label { color: var(--muted); padding-top: 6px; }
.header-grid input, .header-grid textarea { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; width: 100%; }
.header-grid .pre { white-space: pre-wrap; }
.customer-pick .hint { margin: 4px 0 0; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions form.inline { display: inline; margin: 0; }
button.secondary, .button.secondary { background: #fff; color: var(--accent); border: 1px solid var(--accent); }
.dirty { color: #7a5b00; font-size: .9rem; font-weight: 600; }
.check { display: inline-flex; gap: 4px; align-items: center; font-size: .85rem; color: var(--fg); margin-top: 4px; }
.tag { display: inline-block; font-size: .75rem; padding: 0 6px; border-radius: 4px; background: #e6f0ff; color: var(--accent); }
table.lines input.num { width: 4.6em; font: inherit; padding: 3px 5px; border: 1px solid var(--line); border-radius: 6px; text-align: right; }
table.lines input.num[readonly] { background: #f3f3f5; color: var(--muted); }
table.lines td.row-actions { white-space: nowrap; }
.link-button.danger { color: var(--err); }
.picker { margin-top: 6px; }
.picker input[type=search] { width: 100%; min-width: 200px; font: inherit; padding: 6px 8px; border: 1px solid var(--accent); border-radius: 6px; }
.pick-results { max-height: 260px; overflow-y: auto; }
button.pick { display: block; width: 100%; text-align: left; background: #fff; color: var(--fg); border: 1px solid var(--line);
              border-radius: 6px; padding: 6px 8px; margin-top: 4px; font-weight: 400; }
button.pick:hover { border-color: var(--accent); }
button.pick small { display: block; color: var(--muted); }
.quick-customer { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 8px; display: grid; gap: 6px; }
.quick-customer input { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }
/* 상단 메뉴, 관리 화면 */
.menu { display: flex; flex-wrap: wrap; gap: 4px 14px; font-weight: 500; font-size: .92rem; }
.menu a { color: var(--muted); }
.menu a:hover { color: var(--accent); }
.search-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.search-row input { font: inherit; padding: 8px; border: 1px solid var(--line); border-radius: 8px; min-width: 220px; flex: 1; }
.search-row .small-submit { margin: 0; }
.field textarea { display: block; width: 100%; margin-top: 6px; font: inherit; padding: 8px; }
td.pre, .pre { white-space: pre-wrap; }
/* 첫 화면 탭, 이력 필터 */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tabs a { padding: 8px 14px; color: var(--muted); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; }
.tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--fg); text-decoration: none; font-size: .9rem; }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
table.lines td.row-actions .link-button { display: block; padding: 0 0 6px; }
/* 공통 정보, 피드백 번호, 행 번호 색 */
.order-summary h2 { margin: 0 0 2px; }
.order-summary > .hint { margin: 0 0 12px; }
.feedback-box h3 { font-size: 1rem; margin: 0 0 4px; }
ol.fb-list { margin: 0; padding-left: 1.4em; }
ol.fb-list li { margin: 0 0 4px; }
.action-help { flex-basis: 100%; margin: 4px 0 0; }
.no { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9em; height: 1.9em; padding: 0 4px;
      border-radius: 999px; font-weight: 700; font-size: .85rem; }
.no-ok { background: #1f9d55; color: #fff; }
.no-review { background: #f2b600; color: #1d1d1f; }
.no-error { background: #d93025; color: #fff; }
.legend { color: var(--muted); font-size: .85rem; margin: -4px 0 8px; }
.legend .dot { display: inline-block; width: .8em; height: .8em; border-radius: 999px; margin: 0 4px 0 2px; vertical-align: -1px; border: 0; }
/* 떠 있는 원본 창 */
.viewer { position: fixed; top: 64px; right: 16px; width: var(--viewer-w, 300px); height: min(420px, calc(100vh - 96px)); z-index: 20;
          display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 10px;
          box-shadow: 0 8px 28px rgba(0, 0, 0, .14); }
.viewer[hidden], .viewer-open[hidden] { display: none; }
.viewer-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.viewer-bar strong { margin-right: auto; font-size: .9rem; }
.viewer-bar button, .viewer-bar a { background: #fff; color: var(--fg); border: 1px solid var(--line); border-radius: 6px;
                                    padding: 2px 9px; font-weight: 700; font-size: .9rem; text-decoration: none; line-height: 1.6; }
.viewer-body { flex: 1; overflow: auto; background: #f3f3f5; }
.viewer-body img { display: block; width: 100%; }
.viewer-body iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.viewer-body [hidden], .viewer-bar [hidden] { display: none; }
.viewer-open { position: fixed; right: 16px; bottom: 16px; z-index: 20; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
@media (min-width: 1100px) {
  body.with-viewer main.page-wide { margin-right: calc(var(--viewer-w, 300px) + 32px); margin-left: 16px; }
}
@media (max-width: 760px) {
  .viewer { top: 0; right: 0; bottom: 0; left: 0; width: auto !important; height: auto !important; border-radius: 0; }
  .viewer-resize { display: none; }
}
/* 확인하기, 발주서 추출, 임시 보관, 원본 창 크기 조절 */
.check-btn { display: block; margin: 6px auto 0; padding: 2px 6px; font-size: .75rem; font-weight: 600; border-radius: 6px;
             background: #fff; color: #7a5b00; border: 1px solid #f2b600; white-space: nowrap; }
.check-btn[aria-pressed="true"] { color: var(--muted); border-color: var(--line); }
.order-warnings { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-start; justify-content: space-between; font-weight: 400; }
.order-warnings .check-btn { margin: 0; }
.extract-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
               background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-top: 12px;
               box-shadow: 0 -4px 14px rgba(0, 0, 0, .06); }
.extract-bar .hint { flex-basis: 100%; margin: 0; }
button.extract { font-size: 1.05rem; padding: 12px 28px; }
.restore { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.restore button { padding: 6px 12px; }
.viewer-resize { position: absolute; left: -6px; bottom: -6px; width: 18px; height: 18px; cursor: nesw-resize;
                 border-left: 3px solid #a5a5ab; border-bottom: 3px solid #a5a5ab; border-radius: 0 0 0 4px; background: transparent; }
/* 박스·수량·단가 열은 숫자 칸만큼만 (6~8번째 열) */
table.lines td:nth-child(6), table.lines td:nth-child(7), table.lines td:nth-child(8),
table.lines th:nth-child(6), table.lines th:nth-child(7), table.lines th:nth-child(8) { width: 1%; padding-left: 4px; padding-right: 4px; }
/* 로그인·가입, 상단 사용자 */
.auth { max-width: 420px; margin: 40px auto; }
.auth .field input { border: 1px solid var(--line); border-radius: 8px; }
.me { font-weight: 400; font-size: .9rem; display: inline-flex; gap: 8px; align-items: center; }
.me form.inline { display: inline; margin: 0; }
form.inline { display: inline; }
.user-actions form { margin-right: 10px; }
input.mini { width: 9em; font: inherit; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; }
/* 마스터 편집 */
.master-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.master-tools .hint { flex-basis: 100%; margin: 0; }
.inline-form { display: inline-flex; gap: 6px; align-items: center; }
.inline-form .small-submit { margin: 0; }
.changelog { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; }
.cl-row { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.cl-row:last-child { border-bottom: 0; }
/* 개발자 메모 (관리자) */
/* 왼쪽 가장자리 가운데의 작은 탭: 아래쪽 '발주서 추출' 바·오른쪽 원본 창과 겹치지 않게 */
.devnote-toggle { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 30; background: #f2b600; color: #1d1d1f;
                  padding: 10px 6px; border-radius: 0 8px 8px 0; writing-mode: vertical-rl; font-size: .85rem; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
body.devnote-picking, body.devnote-picking * { cursor: crosshair !important; }
.devnote-hover { outline: 2px dashed #f2b600 !important; outline-offset: 2px; }
.devnote-pin { position: absolute; z-index: 25; padding: 0 6px; font-size: .75rem; line-height: 1.6; border-radius: 999px; background: #f2b600; color: #1d1d1f; }
.devnote-pop { position: absolute; z-index: 40; width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.devnote-pop textarea { width: 100%; font: inherit; padding: 6px; border: 1px solid var(--line); border-radius: 6px; }
.devnote-pop button { padding: 6px 12px; font-size: .9rem; }
.devnote-body { white-space: pre-wrap; margin: 0 0 6px; }
.cost-summary { display: flex; flex-wrap: wrap; gap: 12px 40px; }
.cost-summary div { display: flex; flex-direction: column; }
.cost-summary strong { font-size: 1.4rem; }
.cost-summary p { flex-basis: 100%; margin: 0; }
/* 상단 메뉴: 발주함 · 과거 이력 · 마스터(거래처, 품목) · 개발자 메뉴(사용자, 비용, 메모) — 묶음은 마우스를 올리거나 누르면 펼침 */
.menu { gap: 4px 28px; align-items: center; }
.menu-top { background: none; border: 0; padding: 6px 2px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; text-decoration: none; }
.menu-top:hover, .menu-group:hover > .menu-top, .menu-group:focus-within > .menu-top { color: var(--accent); }
.menu-group { position: relative; }
.menu-sub { display: none; position: absolute; top: 100%; left: -10px; z-index: 50; min-width: 120px; padding: 6px;
            background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.menu-group:hover > .menu-sub, .menu-group:focus-within > .menu-sub { display: flex; flex-direction: column; }
.menu-sub a { padding: 8px 10px; border-radius: 6px; color: var(--fg); font-weight: 500; white-space: nowrap; }
.menu-sub a:hover { background: var(--bg); color: var(--accent); }
/* 발주 화면: 돌아가기 버튼, 마우스용 가로 스크롤바 */
.back-link { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px;
             background: #fff; color: var(--muted); font-size: .9rem; text-decoration: none; }
.back-link:hover { color: var(--accent); border-color: var(--accent); }
.table-scroll-top { overflow-x: auto; overflow-y: hidden; height: 14px; margin-bottom: 2px; }
.table-scroll-top > div { height: 1px; }
.table-scroll-top::-webkit-scrollbar, .table-wrap::-webkit-scrollbar { height: 10px; }
.table-scroll-top::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb { background: #c4c4cc; border-radius: 999px; }
.table-scroll-top::-webkit-scrollbar-track, .table-wrap::-webkit-scrollbar-track { background: #f0f0f2; }
.table-wrap.more-right { box-shadow: inset -18px 0 14px -14px rgba(0,0,0,.25); }
/* 마스터 표의 행 버튼 (개발자 메모 #5) */
.row-action { display: inline-block; padding: 3px 10px; border: 1px solid var(--line); border-radius: 6px;
              font-size: 13px; color: var(--fg); text-decoration: none; background: #fff; white-space: nowrap; }
.row-action:hover { background: #f3f3f5; }
.master-tools .tools-end { margin-left: auto; }
.master-tools .inline-form .small-submit { padding: 6px 12px; font-size: .9rem; }  /* 단건 추가 버튼과 같은 크기 */
/* 개발자 메모 목록 열 너비 (메모 #8) */
table.lines th.col-loc, table.lines td.col-loc { width: 180px; max-width: 180px; font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
.col-memo { min-width: 420px; }
/* 마스터 화면의 단건 추가 칸 (메모 #9) */
.add-panel h2 { margin-top: 0; }
.add-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 14px; }
.add-grid .field.wide { grid-column: span 2; }
.add-grid .add-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
@media (max-width: 760px) { .add-grid .field.wide { grid-column: auto; } }
/* 폰에서 품목 표: 글씨·여백·번호·원문 칸을 줄여 한 화면에 박스·수량까지 보이게 (메모 #11, #13) */
@media (max-width: 760px) {
  table.lines { min-width: 0; font-size: .78rem; }
  table.lines th, table.lines td { padding: 5px 5px; }
  table.lines thead th { font-size: .7rem; }
  table.lines .c-no { width: 3.2em; min-width: 3.2em; }
  table.lines .c-src { left: 3.2em; min-width: 72px; max-width: 96px; }
  table.lines .src-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  table.lines td.name { min-width: 104px; }
  /* 품목코드(바코드) 열은 폰에서 숨긴다: 그 자리만큼 박스·수량이 첫 화면에 들어온다 */
  table.lines td.code[data-col="code"], table.lines th.col-code { display: none; }
  table.lines td.fb-cell { min-width: 170px; }
  table.lines input.num { width: 3.4em; padding: 2px 3px; }
  .no { min-width: 1.5em; height: 1.5em; font-size: .72rem; padding: 0 3px; }
  .check-btn { font-size: .62rem; padding: 1px 3px; margin-top: 4px; }
  /* 폰 원본 창: 버튼 줄을 아래쪽('원본 보기' 버튼 자리)에 크게 (메모 #12) */
  .viewer { flex-direction: column-reverse; }
  .viewer-bar { border-bottom: 0; border-top: 1px solid var(--line); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
  .viewer-bar strong { font-size: 1rem; }
  .viewer-bar button, .viewer-bar a { min-width: 44px; min-height: 44px; padding: 8px 12px; font-size: 1.05rem; border-radius: 8px;
                                      display: inline-flex; align-items: center; justify-content: center; }
  .viewer-bar [data-viewer-close] { background: var(--accent); color: #fff; border-color: var(--accent); }
}
/* '추출하기'를 누른 뒤: 눌렸다는 게 보이게 (연한 색 + 도는 표시) */
button.busy, button.busy:disabled { background: #8db4f3; cursor: progress; }
button.busy::after { content: ""; display: inline-block; width: .9em; height: .9em; margin-left: 8px; vertical-align: -2px;
                     border: 2px solid rgba(255, 255, 255, .6); border-top-color: #fff; border-radius: 50%;
                     animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }