/* ════════════════════════════════════════════════════════════════════
   v8 디자인 토큰 — ClaudeDesign 시안과 1:1 (수동 동기화)
   원본: ClaudeDesign/tokens.css (※ 시안 변경 시 본 파일 함께 갱신)
   ════════════════════════════════════════════════════════════════════ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root {
  /* Type scale */
  --fs-2xs: 10px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-lg: 15px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;

  --fw-r: 400;
  --fw-m: 500;
  --fw-sb: 600;
  --fw-b: 700;

  /* Spacing — compact density default */
  --sp-1: 4px;  --sp-2: 6px;  --sp-3: 8px;  --sp-4: 12px;
  --sp-5: 16px; --sp-6: 20px; --sp-7: 24px; --sp-8: 32px;

  /* Density-driven row + control heights */
  --row-h: 32px; --ctl-h: 28px; --pad-y: 6px; --pad-x: 10px;

  /* Navy palette (logo-derived) */
  --navy-900: #0F2440; --navy-800: #173155; --navy-700: #1F3F69;
  --navy-600: #2A5380; --navy-500: #3B6BA0; --navy-400: #6890BC;
  --navy-300: #9DB6D2; --navy-200: #C8D6E4; --navy-100: #E4ECF4; --navy-50: #F2F6FA;

  /* Accent — single hue (warm amber) */
  --accent-700: #B45309; --accent-500: #E07514;
  --accent-300: #FBBF77; --accent-100: #FEF1DC;

  /* Status (industrial SaaS) */
  --ok-700:   #1F6F43; --ok-500:   #2C9A5E; --ok-100:   #DCF1E5;
  --warn-700: #8A6100; --warn-500: #C28A0E; --warn-100: #FBEFCC;
  --err-700:  #9B2226; --err-500:  #C43A3F; --err-100:  #F8DDDE;
  --info-700: #1F4D8A; --info-500: #2D6FB8; --info-100: #DCE7F4;

  /* Neutrals — cool gray */
  --ink-900: #14181F; --ink-800: #1F242D; --ink-700: #313841;
  --ink-600: #4A525E; --ink-500: #6B7480; --ink-400: #8E96A1;
  --ink-300: #B5BCC5; --ink-200: #DDE2E8; --ink-150: #E8ECF1;
  --ink-100: #F0F3F7; --ink-50:  #F7F9FB;
  --bg: #FFFFFF; --bg-app: #F4F6F9; --hairline: #E1E5EB;

  /* Radii — small, industrial */
  --r-sm: 3px; --r-md: 5px; --r-lg: 8px;

  /* Shadows — restrained */
  --sh-1: 0 1px 0 rgba(15,36,64,.04);
  --sh-2: 0 1px 2px rgba(15,36,64,.08), 0 0 0 1px rgba(15,36,64,.04);
  --sh-3: 0 4px 16px rgba(15,36,64,.10);

  --font-sans: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', 'Pretendard', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--ink-800);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.mono { font-family: var(--font-mono); font-feature-settings: 'tnum'; }
.tnum { font-variant-numeric: tabular-nums; }

/* ───── Wireframe primitives (시안 동일) ───── */

.wf-app { background: var(--bg-app); color: var(--ink-800); width: 100%; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* Header */
.wf-h { height: 48px; background: var(--bg); border-bottom: 1px solid var(--hairline); display: flex; align-items: center; padding: 0 var(--sp-5); gap: var(--sp-5); flex-shrink: 0; position: relative; }
.wf-h__logo { display: flex; align-items: center; flex-shrink: 0; font-weight: var(--fw-b); color: var(--navy-800); letter-spacing: -0.02em; font-size: var(--fs-lg); }
.wf-h__nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 2px; align-items: center; }
.wf-h__nav a { padding: 6px 10px; border-radius: var(--r-sm); color: var(--ink-700); font-size: var(--fs-md); font-weight: var(--fw-m); display: inline-flex; align-items: center; gap: 6px; }
.wf-h__nav a:hover { background: var(--ink-100); }
.wf-h__nav a.is-active { color: var(--navy-800); background: var(--navy-50); }
.wf-h__nav a .count { font-size: var(--fs-2xs); color: var(--ink-500); }
.wf-h__nav a.is-active .count { color: var(--navy-700); }

.wf-h__icons { display: flex; gap: 4px; align-items: center; margin-left: auto; }
.wf-h__icon-btn { width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--ink-600); position: relative; cursor: pointer; background: transparent; border: 0; padding: 0; }
.wf-h__icon-btn:hover { background: var(--ink-100); color: var(--ink-800); }
.wf-h__icon-btn .dot-new { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 2px var(--bg); }

.wf-h__storage { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; margin-right: 4px; }
.wf-h__storage-num { font-size: 9.5px; color: var(--ink-500); font-variant-numeric: tabular-nums; line-height: 1; }
.wf-h__storage-num strong { color: var(--ink-700); font-weight: var(--fw-sb); }
.wf-h__storage-num span { color: var(--ink-400); }
.wf-h__storage-bar { width: 64px; height: 3px; border-radius: 2px; background: var(--ink-150); overflow: hidden; }
.wf-h__storage-bar > i { display: block; height: 100%; background: var(--navy-700); }

.wf-h__user { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; border-radius: var(--r-md); font-size: var(--fs-sm); }
.wf-h__user:hover { background: var(--ink-100); }
.wf-h__company-thumb { width: 28px; height: 28px; border-radius: 4px; background: white; border: 1px solid var(--ink-150); display: grid; place-items: center; overflow: hidden; }
.wf-h__company-thumb > b { font-size: 9px; font-weight: 800; color: var(--navy-700); letter-spacing: .02em; line-height: 1; text-align: center; }
.wf-h__user-name { line-height: 1.1; font-size: 12px; font-weight: var(--fw-m); color: var(--ink-800); }
.wf-h__user-name b { font-weight: var(--fw-sb); color: var(--ink-900); }
.wf-h__user-name i { color: var(--ink-300); margin: 0 4px; font-style: normal; }

/* Body shell */
.wf-body { flex: 1; display: flex; min-height: 0; overflow: hidden; }

/* Sidebar */
.wf-sb { width: 252px; flex-shrink: 0; background: var(--bg); border-right: 1px solid var(--hairline); display: flex; flex-direction: column; overflow: hidden; }
.wf-sb__cta { padding: 10px 14px 4px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--hairline); flex-shrink: 0; }
.wf-sb__cta button { display: flex; align-items: center; justify-content: center; gap: 4px; flex: 1; height: 30px; padding: 0 10px; border: 1px dashed var(--ink-300); border-radius: 4px; background: transparent; cursor: pointer; font-size: 12px; font-weight: var(--fw-sb); color: var(--navy-700); }
.wf-sb__cta button:hover { background: var(--navy-50); border-color: var(--navy-700); }

.wf-sb__sechd { padding: 10px 14px 4px; display: flex; align-items: center; gap: 6px; position: relative; border-bottom: 1px solid var(--hairline); flex-shrink: 0; }
.wf-sb__sechd .label { font-size: 11px; font-weight: var(--fw-sb); color: var(--ink-500); text-transform: uppercase; letter-spacing: .06em; }
.wf-sb__sechd .count { font-size: 11px; color: var(--ink-400); font-variant-numeric: tabular-nums; }
.wf-sb__sechd .spacer { flex: 1; }

.wf-sb__list { flex: 1; overflow: auto; }
.wf-sb__divider { height: 1px; background: var(--hairline); margin: 4px 0; }

/* Sidebar item card (시안 SidebarItem) */
.sb-item { position: relative; border-left: 2px solid transparent; border-bottom: 1px solid var(--ink-150); }
.sb-item.is-selected { border-left-color: var(--navy-700); background: var(--navy-50); }
.sb-item__a { display: block; padding: 10px 12px; cursor: pointer; }
.sb-item__row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.sb-item__pin { width: 18px; height: 18px; border-radius: 4px; background: transparent; border: none; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; color: var(--ink-300); padding: 0; align-self: center; }
.sb-item__pin.is-on { color: var(--accent-700); }
.sb-item__title { flex: 1; font-size: 13px; font-weight: var(--fw-m); color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-item.is-selected .sb-item__title { font-weight: var(--fw-sb); }
.sb-item__dday { font-size: 11px; color: var(--ink-600); font-variant-numeric: tabular-nums; flex-shrink: 0; font-weight: var(--fw-m); }
.sb-item__dday.is-urgent { color: var(--accent-700); }
.sb-item__sub { font-size: 11px; color: var(--ink-500); margin-top: 6px; display: flex; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sb-item__sub .sep { color: var(--ink-300); flex-shrink: 0; }

/* Mini-stepper (5 dots, 4 lines) */
.mstep { display: flex; align-items: center; gap: 0; height: 8px; }
.mstep span.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-300); flex-shrink: 0; }
.mstep span.dot.is-done { background: var(--navy-500); }
.mstep span.dot.is-current { background: var(--navy-700); outline: 2px solid color-mix(in oklab, var(--navy-700) 18%, transparent); }
.mstep span.line { flex: 1; height: 2px; background: var(--ink-200); margin: 0 2px; }
.mstep span.line.is-done { background: var(--navy-500); }

/* Full-stepper (5 labels) */
.fstep { padding: 2px 0; }
.fstep__row { display: grid; grid-template-columns: repeat(5, minmax(0, 84px)); position: relative; align-items: start; max-width: 100%; }
.fstep__cell { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.fstep__cell .line { position: absolute; top: 4px; left: 10px; width: calc(100% - 4px); height: 2px; background: var(--ink-200); z-index: 0; }
.fstep__cell .line.is-done { background: var(--navy-500); }
.fstep__cell .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-300); margin-bottom: 8px; z-index: 1; position: relative; }
.fstep__cell .dot.is-done { background: var(--navy-500); }
.fstep__cell .dot.is-current { background: var(--navy-700); outline: 3px solid color-mix(in oklab, var(--navy-700) 18%, transparent); }
.fstep__cell .lbl { font-size: 11px; color: var(--ink-300); font-weight: var(--fw-r); letter-spacing: -0.005em; line-height: 1.2; white-space: nowrap; margin-left: -2px; }
.fstep__cell .lbl.is-done { color: var(--ink-500); font-weight: var(--fw-m); }
.fstep__cell .lbl.is-current { color: var(--navy-800); font-weight: var(--fw-b); }

/* Main */
.wf-m { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); position: relative; }

/* Buttons */
.btn { height: var(--ctl-h); padding: 0 12px; border: 1px solid var(--ink-200); background: var(--bg); border-radius: var(--r-sm); font: inherit; font-size: var(--fs-md); font-weight: var(--fw-m); color: var(--ink-800); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { background: var(--ink-50); border-color: var(--ink-300); }
.btn--primary { background: var(--navy-700); border-color: var(--navy-700); color: white; }
.btn--primary:hover { background: var(--navy-800); border-color: var(--navy-800); }
.btn--accent { background: var(--accent-500); border-color: var(--accent-500); color: white; }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-700); }
.btn--ghost:hover { background: var(--ink-100); }
.btn--sm { height: 24px; padding: 0 8px; font-size: var(--fs-sm); }

/* Chips, dot */
.chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 3px; font-size: var(--fs-2xs); font-weight: var(--fw-sb); letter-spacing: .02em; background: var(--ink-100); color: var(--ink-700); border: 1px solid var(--hairline); }
.chip--ok { background: var(--ok-100);   color: var(--ok-700);   border-color: transparent; }
.chip--warn { background: var(--warn-100); color: var(--warn-700); border-color: transparent; }
.chip--err { background: var(--err-100);  color: var(--err-700);  border-color: transparent; }
.chip--info { background: var(--info-100); color: var(--info-700); border-color: transparent; }
.chip--accent { background: var(--accent-100); color: var(--accent-700); border-color: transparent; }
.chip--navy { background: var(--navy-100); color: var(--navy-800); border-color: transparent; }

.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot--ok { background: var(--ok-500); }
.dot--warn { background: var(--warn-500); }
.dot--err { background: var(--err-500); }
.dot--info { background: var(--info-500); }
.dot--idle { background: var(--ink-300); }
.dot--accent { background: var(--accent-500); }
.dot--navy { background: var(--navy-700); }

/* Card */
.card { background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-md); }
.card__hd { padding: 10px 12px; border-bottom: 1px solid var(--hairline); display: flex; align-items: center; gap: 8px; }
.card__hd-title { font-size: var(--fs-sm); font-weight: var(--fw-sb); color: var(--ink-800); letter-spacing: -0.005em; }
.card__hd-meta { margin-left: auto; font-size: var(--fs-xs); color: var(--ink-500); }
.card__body { padding: 12px; }

/* Stat / Table */
.stat { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--bg); }
.stat__lbl { font-size: var(--fs-xs); color: var(--ink-500); font-weight: var(--fw-m); text-transform: uppercase; letter-spacing: .06em; }
.stat__val { font-size: var(--fs-2xl); font-weight: var(--fw-b); color: var(--ink-900); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.tbl thead th { text-align: left; font-weight: var(--fw-sb); color: var(--ink-500); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; padding: 8px 10px; border-bottom: 1px solid var(--hairline); background: var(--ink-50); white-space: nowrap; }
.tbl tbody td { padding: var(--pad-y) 10px; border-bottom: 1px solid var(--ink-150); vertical-align: middle; }
.tbl tbody tr:hover td { background: var(--ink-50); }
.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* PCDetail spec list */
.spec-list { display: grid; grid-template-columns: 88px 1fr; row-gap: 6px; column-gap: 12px; font-size: 12px; }
.spec-list dt { color: var(--ink-500); font-weight: var(--fw-m); padding: 6px 0; }
.spec-list dd { color: var(--ink-900); margin: 0; padding: 6px 0; font-weight: var(--fw-m); }
.spec-list dd.num { font-variant-numeric: tabular-nums; }
.spec-list dd.is-link { cursor: pointer; color: var(--navy-700); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }

/* Doc panel (4 sections — 견적서/인쇄데이터/납품증/세금계산서) */
.doc-sec { margin-bottom: 18px; }
.doc-sec__hd { font-size: 11px; font-weight: var(--fw-sb); color: var(--ink-700); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.doc-sec.is-muted .doc-sec__hd { color: var(--ink-400); }
.doc-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--bg); cursor: pointer; }
.doc-row:hover { border-color: var(--navy-300); }
.doc-row__icon { width: 26px; height: 26px; border-radius: 4px; background: var(--navy-50); color: var(--navy-700); display: grid; place-items: center; flex-shrink: 0; font-size: 11px; font-weight: var(--fw-sb); }
.doc-row__name { font-size: 12px; font-weight: var(--fw-sb); color: var(--ink-900); }
.doc-row__meta { font-size: 11px; color: var(--ink-500); }
.doc-ph { padding: 12px; background: var(--bg-app); border: 1px dashed var(--ink-200); border-radius: var(--r-sm); font-size: 11px; color: var(--ink-500); line-height: 1.5; text-align: center; }

/* Book cover button (ISBN 단위, click-to-replace) */
.cover { all: unset; position: relative; overflow: hidden; background: var(--ink-150); border: 1px solid var(--ink-200); display: block; cursor: pointer; flex-shrink: 0; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); }
.cover__placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--ink-500); font-size: 10px; font-weight: var(--fw-m); }

/* Workroom — 카톡식 채팅 */
.chat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat__scroll { flex: 1; overflow-y: auto; padding: 12px 14px 8px; }
.chat__divider { display: flex; align-items: center; gap: 6px; padding: 12px 0 8px; font-size: 10px; font-weight: var(--fw-b); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-500); }
.chat__divider .line { flex: 1; height: 1px; background: var(--ink-150); }
.chat__row { display: flex; gap: 8px; padding: 6px 0 2px; align-items: flex-end; }
.chat__row.is-mine { flex-direction: row-reverse; }
.chat__row.is-compact { padding: 2px 0; }
.chat__avatar { width: 26px; height: 26px; border-radius: 50%; color: white; display: grid; place-items: center; font-size: 11px; font-weight: var(--fw-sb); flex-shrink: 0; }
.chat__avatar--client { background: var(--navy-600); }
.chat__avatar--sales { background: var(--accent-700); }
.chat__avatar--print { background: var(--navy-700); }
.chat__avatar--shipping { background: var(--info-500); }
.chat__avatar--finance { background: var(--ink-700); }
.chat__avatar--system { background: var(--ink-400); }
.chat__bubblewrap { display: flex; flex-direction: column; max-width: 74%; }
.chat__row.is-mine .chat__bubblewrap { align-items: flex-end; }
.chat__sender { font-size: 11px; font-weight: var(--fw-sb); color: var(--ink-700); margin-bottom: 2px; padding-left: 2px; }
.chat__bubblerow { display: flex; align-items: flex-end; gap: 6px; }
.chat__row.is-mine .chat__bubblerow { flex-direction: row-reverse; }
.chat__bubble { background: var(--ink-100); color: var(--ink-900); padding: 8px 12px; border-radius: 14px; border-top-left-radius: 4px; font-size: 13px; line-height: 1.45; word-break: break-word; }
.chat__row.is-mine .chat__bubble { background: var(--navy-700); color: white; border-radius: 14px; border-top-right-radius: 4px; }
.chat__time { font-size: 10px; color: var(--ink-400); white-space: nowrap; padding-bottom: 2px; font-family: var(--font-mono); }

.chat__composer { padding: 10px 12px 12px; border-top: 1px solid var(--hairline); background: var(--bg); flex-shrink: 0; }
.chat__composer-frame { position: relative; border: 1px solid var(--ink-200); border-radius: 18px; background: var(--bg); display: flex; align-items: flex-end; gap: 4px; }
.chat__composer textarea { flex: 1; resize: none; min-height: 36px; max-height: 120px; padding: 9px 8px 9px 14px; font-size: 13px; font-family: inherit; line-height: 1.4; color: var(--ink-900); background: transparent; border: none; outline: none; }
.chat__send { margin: 4px; width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--ink-150); color: var(--ink-400); cursor: not-allowed; font-size: 14px; font-weight: var(--fw-b); line-height: 1; display: grid; place-items: center; flex-shrink: 0; }
.chat__send.is-active { background: var(--navy-700); color: white; cursor: pointer; }

/* Footer */
.wf-ft { flex-shrink: 0; padding: 10px 20px; border-top: 1px solid var(--hairline); background: var(--bg-app); display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--ink-500); }
.wf-ft a { color: var(--ink-500); margin-left: 12px; }

/* Utility */
.f-row { display: flex; align-items: center; gap: 8px; }
.f-col { display: flex; flex-direction: column; gap: 8px; }
.f-grow { flex: 1; }
.muted { color: var(--ink-500); }
.bold { font-weight: var(--fw-sb); }
.tx-xs { font-size: var(--fs-xs); } .tx-sm { font-size: var(--fs-sm); }
.tx-md { font-size: var(--fs-md); } .tx-lg { font-size: var(--fs-lg); }
.tx-xl { font-size: var(--fs-xl); }
.divider { height: 1px; background: var(--hairline); }

/* ───── Auth / Signup / Profile (시안 외 — v8 자체 도입) ───── */

/* 외부 인증 화면 셸 — 헤더/사이드바 없음, 좌 brand · 우 form */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: var(--bg-app); }
.auth-shell__brand { background: linear-gradient(160deg, var(--navy-900), var(--navy-700)); color: white; padding: 56px 64px; display: flex; flex-direction: column; gap: 32px; position: relative; overflow: hidden; }
.auth-shell__brand h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.auth-shell__brand p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.72); margin: 0; }
.auth-shell__brand .auth-brand-list { display: flex; flex-direction: column; gap: 14px; font-size: 13px; color: rgba(255,255,255,.85); }
.auth-shell__brand .auth-brand-list > div { display: flex; gap: 12px; align-items: flex-start; }
.auth-shell__brand .auth-brand-list .n { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.12); color: white; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.auth-shell__form { padding: 56px 56px 32px; overflow: auto; display: flex; flex-direction: column; }
.auth-shell__form-inner { width: 100%; max-width: 420px; margin: 0 auto; }
.auth-shell__brand-bottom { margin-top: auto; font-size: 11px; color: rgba(255,255,255,.45); }
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-shell__brand { padding: 28px 24px; gap: 16px; }
  .auth-shell__brand h1 { font-size: 20px; }
  .auth-shell__form { padding: 28px 24px; }
}

/* 폼 필드 */
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field__label { font-size: 11px; font-weight: var(--fw-sb); color: var(--ink-700); letter-spacing: .02em; }
.field__label .req { color: var(--err-700); margin-left: 2px; }
.field__hint { font-size: 11px; color: var(--ink-500); margin-top: 2px; line-height: 1.5; }
.field__error { font-size: 11px; color: var(--err-700); margin-top: 2px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="password"], .field input[type="number"], .field textarea, .field select {
  height: 36px; padding: 0 10px;
  border: 1px solid var(--ink-200); border-radius: 4px;
  font-size: 13px; font-family: inherit; color: var(--ink-900);
  background: var(--bg); outline: none;
}
.field textarea { height: auto; min-height: 80px; padding: 8px 10px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--navy-700); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* 파일 업로드 영역 */
.upload { border: 1.5px dashed var(--ink-300); border-radius: var(--r-md); padding: 22px 16px; text-align: center; background: var(--bg-app); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.upload:hover { border-color: var(--navy-300); background: var(--navy-50); }
.upload__icon { width: 36px; height: 36px; border-radius: 50%; background: var(--bg); border: 1px solid var(--ink-200); display: grid; place-items: center; color: var(--navy-700); margin: 0 auto 10px; }
.upload__title { font-size: 13px; font-weight: var(--fw-sb); color: var(--ink-900); margin-bottom: 2px; }
.upload__hint { font-size: 11px; color: var(--ink-500); line-height: 1.5; }
.upload.is-filled { border-style: solid; border-color: var(--ok-500); background: var(--ok-100); }
.upload.is-filled .upload__icon { color: var(--ok-700); background: white; }

/* Step indicator (좌측 세로) */
.steps-v { display: flex; flex-direction: column; gap: 0; }
.steps-v__item { display: flex; gap: 12px; padding: 14px 0; position: relative; }
.steps-v__item:not(:last-child)::after { content: ''; position: absolute; left: 11px; top: 36px; bottom: 0; width: 1px; background: var(--ink-200); }
.steps-v__item.is-done:not(:last-child)::after { background: var(--navy-500); }
.steps-v__dot { width: 24px; height: 24px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--ink-300); color: var(--ink-500); font-size: 11px; font-weight: var(--fw-b); display: grid; place-items: center; flex-shrink: 0; z-index: 1; }
.steps-v__item.is-done .steps-v__dot { background: var(--navy-500); border-color: var(--navy-500); color: white; }
.steps-v__item.is-current .steps-v__dot { background: var(--navy-700); border-color: var(--navy-700); color: white; outline: 3px solid color-mix(in oklab, var(--navy-700) 18%, transparent); }
.steps-v__body { padding-top: 2px; }
.steps-v__title { font-size: 12px; font-weight: var(--fw-sb); color: var(--ink-700); }
.steps-v__item.is-current .steps-v__title { color: var(--navy-800); }
.steps-v__sub { font-size: 11px; color: var(--ink-500); margin-top: 2px; }

/* Status badges */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: var(--fw-b); letter-spacing: .02em; }
.badge--pending { background: var(--warn-100); color: var(--warn-700); }
.badge--approved { background: var(--ok-100); color: var(--ok-700); }
.badge--rejected { background: var(--err-100); color: var(--err-700); }
.badge--master { background: var(--navy-100); color: var(--navy-800); }
.badge--sub { background: var(--ink-100); color: var(--ink-700); }

/* 권한 비교 표 (가입 진입점) */
.perm-table { border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; font-size: 12px; }
.perm-table > div { display: grid; grid-template-columns: 1.4fr 1fr 1fr; }
.perm-table > div + div { border-top: 1px solid var(--hairline); }
.perm-table > div > * { padding: 8px 12px; }
.perm-table > div > * + * { border-left: 1px solid var(--hairline); }
.perm-table__hd { background: var(--bg-app); font-weight: var(--fw-sb); color: var(--ink-700); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.perm-table__row .yes { color: var(--ok-700); font-weight: var(--fw-sb); }
.perm-table__row .no { color: var(--ink-400); }

/* 탭 (프로필) */
.tabs { display: flex; border-bottom: 1px solid var(--hairline); gap: 0; }
.tabs__a { padding: 10px 16px; font-size: 12px; font-weight: var(--fw-m); color: var(--ink-600); border-bottom: 2px solid transparent; cursor: pointer; }
.tabs__a:hover { color: var(--ink-900); }
.tabs__a.is-active { color: var(--navy-800); border-bottom-color: var(--navy-700); font-weight: var(--fw-sb); }

/* 알림 배너 (페이지 상단) */
.banner { padding: 12px 16px; border-radius: var(--r-md); display: flex; gap: 12px; align-items: flex-start; font-size: 12px; line-height: 1.55; }
.banner--info { background: var(--info-100); color: var(--info-700); }
.banner--warn { background: var(--warn-100); color: var(--warn-700); }
.banner--ok { background: var(--ok-100); color: var(--ok-700); }
.banner__title { font-weight: var(--fw-sb); color: inherit; margin-bottom: 2px; }

/* Filter popover (사이드바 필터) */
.popover { position: absolute; top: 26px; right: 0; width: 188px; background: var(--bg); border: 1px solid var(--ink-200); box-shadow: 0 4px 16px rgba(15,23,42,.12); border-radius: 4px; z-index: 10; overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════
   Home/Profile PCDetail wrapper — wrapper 클래스 도입으로
   inline style 안 거치고 모바일 반응형 가능
   ═══════════════════════════════════════════════════════════════════ */
.pc-detail__body { flex: 1; min-height: 0; overflow: hidden; background: var(--bg-app); display: flex; position: relative; }
.pc-detail__col1, .pc-detail__col2 { overflow: auto; }
.pc-detail__col1 { flex: 1; min-width: 0; padding: 20px 24px 24px; border-right: 1px solid var(--hairline); }
.pc-detail__col2 { flex: 0 0 360px; min-width: 0; padding: 20px 24px 24px; border-right: 1px solid var(--hairline); }
.pc-detail__head { padding: 20px 64px 16px 28px; border-bottom: 1px solid var(--hairline); }
.pc-detail__chat-rail { flex: 0 0 64px; min-width: 0; display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--hairline); }
.pc-detail__chat-rail .vlbl { writing-mode: vertical-rl; font-size: 11px; color: var(--ink-600); letter-spacing: .06em; }
.pc-detail__chat-panel { position: absolute; top: 0; right: 64px; bottom: 0; width: 480px; background: var(--bg); border-left: 1px solid var(--hairline); box-shadow: -12px 0 24px -12px rgba(15,23,42,.12); display: flex; flex-direction: column; z-index: 5; }

/* 모바일 햄버거 — 데스크탑에선 숨김 */
.wf-h__burger { display: none; width: 32px; height: 32px; border: none; background: transparent; cursor: pointer; padding: 0; color: var(--ink-700); margin-right: 4px; }
.wf-h__burger:hover { background: var(--ink-100); border-radius: 4px; }

/* 사이드바 backdrop (모바일 off-canvas) */
.wf-sb__backdrop { display: none; position: fixed; inset: 48px 0 0 0; background: rgba(15,23,42,.32); z-index: 99; }
body.is-sb-open .wf-sb__backdrop { display: block; }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE BREAKPOINT — 768px 이하
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 헤더 — nav 숨김, 검색·저장공간 숨김, 사용자명 축약 */
  .wf-h { padding: 0 8px; gap: 8px; }
  .wf-h__burger { display: grid; place-items: center; }
  .wf-h__nav { display: none; }
  .wf-h__storage { display: none; }
  .wf-h__user-name { display: none; }
  .wf-h__logo img { height: 20px; }

  /* 사이드바 — off-canvas: fixed로 띄우고 transform으로 슬라이드 */
  .wf-sb { position: fixed; top: 48px; bottom: 0; left: 0; width: 280px; max-width: 84vw; transform: translateX(-100%); transition: transform .22s ease; z-index: 100; box-shadow: 4px 0 24px -8px rgba(15,23,42,.24); }
  body.is-sb-open .wf-sb { transform: translateX(0); }

  /* 본문 = 풀폭 */
  .wf-body { display: block; }
  .wf-m { width: 100%; }

  /* PCDetail 상단 — 좁은 패딩 */
  .pc-detail__head { padding: 14px 16px; }
  .pc-detail__head .cover { width: 72px !important; height: 100px !important; }
  .pc-detail__head h1, .pc-detail__head [style*="font-size:24px"] { font-size: 18px !important; }

  /* FullStepper — 모바일에서 작게 */
  .fstep__row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fstep__cell .lbl { font-size: 9px; white-space: normal; }

  /* PCDetail 3컬럼 → 세로 스택 (사양 + 문서). 채팅은 별도 레일 → FAB. */
  .pc-detail__body { flex-direction: column; overflow: auto; }
  .pc-detail__col1, .pc-detail__col2 { flex: none; width: 100%; padding: 14px 16px; border-right: none; border-bottom: 1px solid var(--hairline); overflow: visible; }
  .pc-detail__col2 { padding-top: 4px; }

  /* 채팅 레일 → FAB (오른쪽 하단 floating) */
  .pc-detail__chat-rail { position: fixed; right: 16px; bottom: 16px; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--navy-700); border: none; box-shadow: var(--sh-3); z-index: 50; }
  .pc-detail__chat-rail button { padding: 0 !important; gap: 0 !important; }
  .pc-detail__chat-rail .vlbl { display: none; }
  .pc-detail__chat-rail [style*="background:var(--ink-100)"] { background: transparent !important; color: white !important; }

  /* 채팅 패널 — 풀스크린 */
  .pc-detail__chat-panel { position: fixed !important; inset: 48px 0 0 0 !important; width: 100% !important; right: 0 !important; box-shadow: none !important; z-index: 110; }

  /* 페이지 헤더(타이틀+서브) — 좁은 패딩 */
  .wf-m > div[style*="padding:18px 24px"] { padding: 14px 16px !important; }
  .wf-m > div[style*="padding:20px 24px"] { padding: 14px 16px !important; }

  /* 도서·통계·알림 본문 패딩 */
  .wf-m > div[style*="padding:20px 24px;background:var(--bg-app)"],
  .wf-m > div[style*="padding:24px"] { padding: 14px 16px !important; }

  /* 폼 field-row → 1열 */
  .field-row { grid-template-columns: 1fr; gap: 8px; }

  /* 권한 비교표 (signup.php) — 3열 폰트만 작게 */
  .perm-table > div { grid-template-columns: 1.2fr .8fr .8fr; }
  .perm-table > div > * { padding: 6px 8px; font-size: 11px; }

  /* auth-shell — 단일 컬럼 (이미 900px에서 해줬지만 여기서 padding 좁힘) */
  .auth-shell { grid-template-columns: 1fr; }
  .auth-shell__brand { padding: 20px 18px; gap: 12px; }
  .auth-shell__brand h1 { font-size: 18px; }
  .auth-shell__brand p, .auth-shell__brand .auth-brand-list { font-size: 12px; }
  .auth-shell__brand .auth-brand-list { gap: 10px; }
  .auth-shell__form { padding: 22px 18px; }
  .auth-shell__form-inner { max-width: 100%; }
  .steps-v__item { padding: 10px 0; }

  /* signup 진입점 카드들 — 풀폭 */
  .auth-shell__form-inner .card { padding: 14px !important; }

  /* signup-master 4스텝 폼 — 측면 패딩 */
  .auth-shell__form-inner form section { padding: 0; }

  /* 프로필 탭 가로 스크롤 */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabs__a { white-space: nowrap; flex-shrink: 0; }

  /* 거래명세 KPI 그리드 — 2열 */
  .wf-m [style*="grid-template-columns:repeat(auto-fit"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* 도서사양 카드 — 1열 */
  .wf-m [style*="grid-template-columns:repeat(auto-fill,minmax(280px,1fr))"] { grid-template-columns: 1fr !important; }

  /* 테이블 가로 스크롤 */
  .card .tbl, .wf-m .tbl { display: block; overflow-x: auto; white-space: nowrap; }

  /* 사이드바 항목 — 터치 영역 충분히 */
  .sb-item__a { padding: 14px 14px; }

  /* spec-list — 라벨/값 작게 */
  .spec-list { grid-template-columns: 76px 1fr; }
}

/* 매우 좁은 화면 (예: 360px 이하) */
@media (max-width: 380px) {
  .wf-h__icons .wf-h__icon-btn:first-child { display: none; } /* 검색 아이콘 */
  .auth-shell__brand h1 { font-size: 16px; }
  .pc-detail__head .cover { width: 64px !important; height: 90px !important; }
}
.popover__hd { padding: 8px 10px 4px; font-size: 9px; font-weight: var(--fw-b); color: var(--ink-500); text-transform: uppercase; letter-spacing: .06em; }
.popover__opt { display: flex; width: 100%; align-items: center; gap: 6px; padding: 6px 10px; border: none; background: transparent; cursor: pointer; text-align: left; font-family: inherit; font-size: 12px; color: var(--ink-800); }
.popover__opt:hover { background: var(--bg-app); }
.popover__opt .check { width: 12px; color: var(--navy-700); font-weight: var(--fw-b); }
.popover__divider { border-top: 1px solid var(--hairline); margin: 4px 0; }