/* ═══ used/design.css — 푸리재팬 디자인 규격 · 2026-10-12 · 10-13 B1(또렷 민트 · Pretendard) 값으로 ═══
   푸리재팬 화면(used/)만 읽는다. 오쓰 design.css 와는 별개 — 값·클래스 이름이 비슷해도 서로 안 부른다.
   값(크기·여백·둥글기·색·글꼴)은 전부 여기. 글은 used/design.md. 사장님 입력판 색 4개가 있으면 app.js 가 --accent 계열만 덮는다.

   값
     글자   --fs-1 12 · --fs-2 13 · --fs-3 14 · --fs-4 15(기본) · --fs-5 17 · --fs-6 20 · --fs-7 24 · 제목 --fs-h 30 · 첫 화면 --fs-hero 폰 32 → PC 44
     여백   --sp-1 4 · --sp-2 8 · --sp-3 12 · --sp-4 16 · --sp-5 24 · --sp-6 32  (묶음 사이는 --sp-section 폰 40 → PC 64)
     둥글기 --r-1 6(칩·배지·작은 칸) · --r-2 10(단추·입력) · --r-3 16(카드) · --r-4 22(큰 카드·사진)  ※ 알약(999) 없음. 동그라미는 점·얼굴 사진만 50%
     단추   큰 단추 48(폰 44) · 작은 36 · 줄 안 28
   색 B1: 흰 바탕 · 짙은 청회색 글 · 민트 단추(위 글자 진한 초록, 흰 글자 금지) */
:root {
  --fs-1: 12px; --fs-2: 13px; --fs-3: 14px; --fs-4: 15px; --fs-5: 17px; --fs-6: 20px; --fs-7: 24px; --fs-h: 30px;
  --fs-hero: clamp(32px, 8vw, 44px);
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --sp-section: clamp(40px, 6vw, 64px);
  --r-1: 0; --r-2: 0; --r-3: 0; --r-4: 0;   /* 사장님 10-26 "테두리는 전부 직사각형 깔끔하게" — 둥글기 전부 0 (단계 이름은 그대로 둬 되돌리기 쉽게) */

  --paper: #FFFFFF; --paper2: #F2F7F6; --card: #FFFFFF; --ph: #EEF5F4;
  --ink: #1F2A2E; --ink2: #4F5F64; --ink3: #7A8A8F;       /* ink2 = 보조 글 · ink3 = 장식·비활성만(작은 글자엔 안 씀) */
  --line: #DCE7E5; --line-strong: #1F2A2E;
  --ui-ink: #1F2A2E; --ui-accent: #3CC4B0;   /* 화면부(ui.js) 알림 띠·창 색 (10-27) */
  --accent: #3CC4B0; --on-accent: #10302B;                /* 민트 단추 위 글자는 진한 초록(흰 글자 금지) — 사장님 입력판 색 4개가 있으면 그 값으로 덮음 */
  --accent-text: #0B6E62; --accent-wash: #E1F6F2;         /* 민트 글자·링크 · 연한 민트 바탕 */
  --mint: #E1F6F2; --mint-text: #1E7F6A;                  /* 환율 칸 · 들어옴·완료 */
  --lemon: #F3F7E8; --lemon-hot: #FFD166;                 /* 수수료 칸 · 강조 배지(진행 중·낙찰) */
  --pink: #EEF2FB;                                        /* 검수비 칸 */
  --green: #1F7A4F; --red: #C62828; --red-wash: #FDECEA;
  --shadow-card: none;
  --shadow-float: 0 12px 32px -12px rgba(31, 42, 46, .22);

  --f-disp: "Pretendard", -apple-system, "Malgun Gothic", sans-serif;   /* 제목·로고 — B1 Pretendard 800 */
  --f-body: "Pretendard", -apple-system, "Malgun Gothic", sans-serif;
  --ctl-h: 48px; --ctl-sm-h: 36px; --ctl-row-h: 28px; --row-h: 48px;
  --page-w: 1200px;   /* 10-26 사장님 "옆으로 좀 넓게" 1120 → 1200 */
  --ease-out: cubic-bezier(.23, 1, .32, 1); --t-fast: 160ms; --t-open: 260ms;
}
@media (max-width: 640px) { :root { --ctl-h: 44px; } }

/* ── 바탕 ── */
.u-body { font: 400 var(--fs-4)/1.55 var(--f-body); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased;
  word-break: keep-all; overflow-wrap: break-word; text-wrap: pretty; }   /* 사장님 10-12: 단어 중간 안 끊김 · 줄 끝 한 글자 안 남김 · 넘침 없음 (design.md 규칙 8~10) */
.u-body h1, .u-body h2 { text-wrap: balance; }
.u-body * { box-sizing: border-box; }
.u-body h1, .u-body h2, .u-body h3 { font-family: var(--f-disp); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin: 0; }
.u-body h1 { font-size: var(--fs-hero); } .u-body h2 { font-size: var(--fs-h); } .u-body h3 { font-size: var(--fs-6); }
.u-num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.u-wrap { max-width: var(--page-w); margin: 0 auto; padding: 0 var(--sp-4); }
.u-section { padding: var(--sp-section) 0; }

/* ── 로고(글자) — Pretendard · 강조 글자색. 그림 로고는 입력판 로고 사진 ── */
.u-logo { font-family: var(--f-disp); font-size: 26px; color: var(--accent-text); letter-spacing: -.02em; text-decoration: none; }

/* ── 단추 — 둥글기 --r-2(10). 알약 아님. 주 단추 강조색 바탕+진한 글자, 보조는 선 ── */
.u-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--ctl-h); padding: 0 var(--sp-5); border: 1px solid var(--accent); border-radius: var(--r-2); background: var(--accent); color: var(--on-accent); font: inherit; font-size: var(--fs-4); font-weight: 700; cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-card); transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); }
.u-btn:hover { filter: brightness(.94); }   /* 입력판 강조색이 바뀌어도 같이 따라감 */
.u-btn:active { transform: scale(.97); }
.u-btn.o { background: var(--card); border-color: var(--line); color: var(--ink); box-shadow: none; }
.u-btn.o:hover { border-color: var(--ink); background: var(--card); }
.u-btn.sm { height: var(--ctl-sm-h); padding: 0 var(--sp-3); font-size: var(--fs-2); font-weight: 500; box-shadow: none; }
.u-btn.row { height: var(--ctl-row-h); padding: 0 10px; font-size: var(--fs-1); font-weight: 700; box-shadow: none; border-radius: var(--r-1); }
.u-btn.danger { background: var(--card); border-color: var(--line); color: var(--red); box-shadow: none; }
.u-btn:disabled { background: var(--paper2); border-color: var(--line); color: var(--ink2); box-shadow: none; cursor: not-allowed; transform: none; }
.u-btn:focus-visible, .u-input:focus-visible, .u-select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── 입력칸 — 둥글기 --r-2(10). 붙여넣기 칸(.u-paste)은 단추를 안에 품는다 ── */
.u-input, .u-select { width: 100%; height: var(--ctl-h); padding: 0 var(--sp-4); border: 1.5px solid var(--line); border-radius: var(--r-2); background: var(--card); font: inherit; font-size: var(--fs-4); color: var(--ink); outline: none; }
.u-input::placeholder { color: var(--ink2); }
.u-input:focus, .u-select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }
.u-input.bad { border-color: var(--red); }
.u-input[readonly] { background: var(--paper2); color: var(--ink2); }
.u-paste { display: flex; align-items: center; gap: var(--sp-2); min-height: calc(var(--ctl-h) + 12px); padding: 6px 6px 6px var(--sp-4); border: 1.5px solid var(--line); border-radius: var(--r-3); background: var(--card); }
.u-paste input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: var(--fs-3); color: var(--ink); outline: none; }
.u-paste:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }

/* ── 카드 — 둥글기 --r-3(16) · 흰 바탕 · 그림자 없음(B1) ── */
.u-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-4); box-shadow: var(--shadow-card); }
.u-card.flat { box-shadow: none; }
.u-card.big { border-radius: var(--r-4); padding: var(--sp-5); }
.u-float { box-shadow: var(--shadow-float); }

/* ── 세 칸(환율·수수료·검수비) — 첫 화면 맨 위. 색 칸 셋, 둥글기 --r-3 ── */
.u-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.u-stat { border-radius: var(--r-3); padding: var(--sp-3) var(--sp-4); background: var(--card); }
.u-stat:nth-child(1) { background: var(--mint); } .u-stat:nth-child(2) { background: var(--lemon); } .u-stat:nth-child(3) { background: var(--pink); }
.u-stat b { display: block; font-size: var(--fs-7); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.u-stat b small { font-size: var(--fs-2); font-weight: 500; }
.u-stat span { font-size: var(--fs-1); color: var(--ink2); }
@media (max-width: 420px) { .u-stats { gap: var(--sp-2); } .u-stat { padding: var(--sp-2) var(--sp-3); } .u-stat b { font-size: var(--fs-6); } }

/* ── 칩(4곳 이름)·배지(상태) — 둥글기 --r-1(6). 알약 아님 ── */
.u-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-1); background: var(--card); font-size: var(--fs-1); color: var(--ink); }
.u-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.u-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--sp-2); border-radius: var(--r-1); font-size: var(--fs-1); font-weight: 700; background: var(--paper2); color: var(--ink2); }
.u-badge.hot { background: var(--lemon-hot); color: var(--ink); }      /* 진행 중·낙찰·입찰 중 */
.u-badge.ok { background: var(--mint); color: var(--mint-text); }      /* 도착·완료 */
.u-badge.bad { background: var(--red-wash); color: var(--red); }        /* 품절·취소 */
.u-badge.pink { background: var(--accent-wash); color: var(--accent-text); }

/* ── 표·줄 — 한 줄은 한 줄(48). 돈은 오른쪽·숫자만 ── */
.u-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--fs-3); }
.u-table th, .u-table td { height: var(--row-h); padding: 0 var(--sp-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-table th { font-size: var(--fs-1); font-weight: 700; color: var(--ink2); border-bottom-color: var(--ink); }
.u-table td.n, .u-table th.n { text-align: right; font-variant-numeric: tabular-nums; }
.u-table tr.sum td { font-weight: 800; border-top: 2px solid var(--ink); border-bottom: 0; }
.u-table tbody tr:hover td { background: var(--paper2); }

/* ── 금액 계산 줄(신청서 옆 요약) — 합계 위 진갈색 두 줄 ── */
.u-calc .row { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-3); }
.u-calc .row small { display: block; color: var(--ink2); font-size: var(--fs-1); font-weight: 400; }
.u-calc .row.total { border-bottom: 0; border-top: 2px solid var(--ink); margin-top: var(--sp-1); padding-top: var(--sp-3); font-weight: 700; font-size: var(--fs-5); }
.u-calc .row.total .u-num { font-size: var(--fs-7); }

/* ── 탭 — 밑줄 2px 강조색 ── */
.u-tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line); }
.u-tabs > button { border: 0; background: none; padding: var(--sp-2) var(--sp-3); font: inherit; font-size: var(--fs-3); color: var(--ink2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.u-tabs > button.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); }

/* ── 안내 줄 · 빈 화면 · 사진 자리 ── */
.u-note { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--row-h); padding: var(--sp-2) var(--sp-3); background: var(--accent-wash); border-radius: var(--r-2); font-size: var(--fs-2); }
.u-note.bad { background: var(--red-wash); color: var(--red); }
.u-note.ok { background: var(--mint); color: var(--mint-text); }
.u-empty { display: flex; align-items: center; justify-content: center; min-height: calc(var(--row-h) * 2); color: var(--ink2); font-size: var(--fs-2); }
.u-ph { background: var(--ph); border: 1px dashed var(--line); border-radius: var(--r-3); aspect-ratio: 1; }

/* ── 도우미 ── */
.fs-1 { font-size: var(--fs-1); } .fs-2 { font-size: var(--fs-2); } .fs-3 { font-size: var(--fs-3); } .fs-4 { font-size: var(--fs-4); } .fs-5 { font-size: var(--fs-5); } .fs-6 { font-size: var(--fs-6); } .fs-7 { font-size: var(--fs-7); } .fs-h { font-size: var(--fs-h); }
.ink2 { color: var(--ink2); } .accent { color: var(--accent-text); } .red { color: var(--red); } .green { color: var(--green); } .b { font-weight: 700; }
.mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); }

/* ── 움직임 (emil 규칙) — transform·opacity 만 · ease-out 만 · 눌림 .97 160ms · 열림 ≤260ms · 튕김 없음 ── */
@keyframes u-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.u-in { animation: u-in 360ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .u-in { animation: none; } .u-btn, .u-btn:active { transition: none; transform: none; } }