/* TrioOS 공통 스타일 — 고객·운영센터가 **같은 파일**을 쓴다.
   (trioos-common 의 static/ 은 클래스패스에 있어 두 앱이 그대로 서빙한다)

   ⚠ 앱별 사본을 만들지 말 것. 사본을 두면 한쪽만 고쳐지고,
     그 순간 두 화면이 갈린다 — 이관 직후 이미 13% 가 갈려 있었다.
   ⚠ 인라인 style="" 을 쓰지 말 것. 구 프로젝트가 인라인 1,900개로 손을 못 대게 됐다.
   ⚠ 새 컴포넌트는 여기에만 추가한다. 화면마다 <style> 을 열면 같은 문제가 반복된다.

   토큰 먼저, 컴포넌트 나중. 규칙은 DESIGN.md 참조. */
:root {
  --brand: #c8102e;
  --brand-soft: #fdeef0;
  --ink: #1a1f24;
  --ink-soft: #55606a;
  --ink-faint: #8b959e;
  --line: #dfe4e8;
  --line-soft: #eef1f3;
  --bg: #f7f8f9;
  --surface: #fff;
  --radius: 6px;
  --gap: 16px;
  --font: "Noto Sans KR", -apple-system, "Malgun Gothic", sans-serif;
  /* 상태색 — 브랜드색과 분리한다. 섞으면 '중요'와 '위험'이 구분되지 않는다 */
  --ok: #1f7a44;
  --ok-bg: #e8f5ed;
  --warn: #9a6700;
  --warn-bg: #fff6e0;
  --danger: #b42318;
  --danger-bg: #fdeceb;
  --info: #1a5fb4;
  --info-bg: #e8f0fb;
}
* { box-sizing: border-box; }

/* ★★★ hidden 속성을 못박는다.
     hidden 은 브라우저 기본 스타일시트의 display:none 으로만 동작해서,
     우리가 그 요소에 display 를 주는 순간 **조용히 무력해진다** —
     .modal-dim{display:flex} 때문에 우편번호 레이어가 열린 채로 떴고,
     .btn{display:inline-block} 때문에 숨기려던 버튼도 그대로 보였다.
   ⚠ !important 를 쓰는 몇 안 되는 자리다. "숨긴다"에 예외를 두지 않는다. */
[hidden] { display: none !important; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.6; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.35; }

/* ── 상단 ── */
/* ══════════════════════════════════════════════════════════════
   셸 — 원본 그대로 **왼쪽 사이드바 + 얇은 상단바**.

   ⚠ 상단 가로바로 바꾸지 않는다. 메뉴가 20개에 가까워서 가로로 늘어놓으면
     그룹이 사라지고 전부 같은 무게로 보인다 — 원본이 사이드바인 이유다.
     (한 번 상단바로 만들었다가 원본과 다르다는 지적을 받고 되돌렸다)
   ══════════════════════════════════════════════════════════════ */
#layout { display: flex; min-height: 100vh; }

#sidebar {
  width: 210px; background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.logo { padding: 18px 16px; font-size: 17px; border-bottom: 1px solid var(--line); }
.logo b { color: var(--brand); }
.logo span { font-size: 12px; color: var(--ink-soft); font-weight: 700; }

#nav { flex: 1; padding: 10px 0; overflow-y: auto; }
#nav a {
  display: block; padding: 10px 18px; color: #374151; font-weight: 600;
  border-left: 3px solid transparent; text-decoration: none; font-size: 13px;
}
#nav a:hover { background: var(--brand-soft); }
#nav a.is-active { color: var(--brand); border-left-color: var(--brand); background: var(--brand-soft); }
#nav a.nav-parent { font-weight: 800; }

/* 그룹 제목 — 메뉴를 업무 단위로 묶는다 */
.nav-group { padding: 14px 18px 6px; font-size: 11px; color: #6b7280; font-weight: 700; }

/* 접힘 그룹 — 자주 안 쓰는 것을 접어 둔다 */
#nav details.nav-fold summary {
  padding: 11px 18px; font-size: 12.5px; font-weight: 800; color: #374151;
  cursor: pointer; user-select: none; list-style: none;
}
#nav details.nav-fold summary::-webkit-details-marker { display: none; }
#nav details.nav-fold summary::before {
  content: '▸'; display: inline-block; width: 14px; font-size: 10px; color: #6b7280;
}
#nav details.nav-fold[open] summary::before { content: '▾'; }
/*
  ★ 하위 항목은 들여쓰고 작게 — 원본 CSS 그대로다.
    이 한 줄이 빠져 있어서 하위 메뉴가 일반 메뉴와 똑같이 보였다.
    그러면 '판매 도구' 가 접히는 묶음이라는 것이 눈에 안 보이고,
    펼쳤을 때 어디까지가 그 묶음인지 알 수 없다.
*/
#nav details.nav-fold a { padding-left: 34px; font-size: 12px; }

.nav-badge {
  display: inline-block; min-width: 17px; padding: 0 5px; border-radius: 9px;
  background: var(--brand); color: #fff; font-size: 10px; font-weight: 800;
  line-height: 17px; text-align: center;
}

.sidebar-foot { padding: 14px 18px; border-top: 1px solid var(--line); color: var(--ink-soft); }
.sidebar-foot .user { font-size: 13px; }
.sidebar-foot form { margin: 8px 0 0; }
.sidebar-foot .btn { width: 100%; }
.sidebar-foot__link { display: block; margin-top: 8px; font-size: 11px; color: var(--ink-soft); }

#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#topbar {
  height: 48px; background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; position: sticky; top: 0; z-index: 20;
}
#topbar-notice { font-weight: 700; font-size: 13px; }
.notice-txt { font-weight: 400; color: var(--ink-soft); margin-left: 12px; }
#topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; padding-right: 8px; }
#topbar-actions a { text-decoration: none; font-size: 13px; }
#topbar-right { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ink-soft); }
#view { padding: 20px; flex: 1; }

/*
  어두운 사이드바 — 원본 body.shell-console.
  고객 앱이 이 모드다(원본 public/index.html 의 <body class="shell-console">).
*/
body.shell-console #sidebar { background: #16191d; border-right: none; }
body.shell-console .logo { border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; }
body.shell-console .logo b { color: #fff; }
body.shell-console .logo span { color: rgba(255,255,255,.55); font-size: 11px; }
body.shell-console #nav a { color: rgba(255,255,255,.78); padding: 11px 18px; }
body.shell-console #nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
body.shell-console #nav a.is-active {
  background: rgba(255,255,255,.08); color: #fff; border-left-color: var(--brand); font-weight: 800;
}
body.shell-console #nav .nav-group { color: rgba(255,255,255,.42); padding: 16px 18px 6px; letter-spacing: .4px; }
body.shell-console #nav details.nav-fold summary { color: rgba(255,255,255,.62); }
body.shell-console #nav details.nav-fold summary::before { color: rgba(255,255,255,.42); }
body.shell-console .sidebar-foot { border-top: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.85); }
body.shell-console .sidebar-foot .btn { background: rgba(255,255,255,.1); border-color: transparent; color: #fff; }
body.shell-console .sidebar-foot__link { color: rgba(255,255,255,.55); }

/* 본문 바로가기 — 키보드 첫 Tab 에서만 나타나 사이드바 링크 20개를 건너뛴다 */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--ink); color: #fff; padding: 10px 18px;
  border-radius: 0 0 10px 0; font-weight: 700; font-size: 13px; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ── 모바일: 사이드바 → 드로어, 하단 탭바 ── */
#mtabs, #m-dim { display: none; }

@media (max-width: 768px) {
  #sidebar {
    position: fixed; left: 0; top: 0; z-index: 60; height: 100dvh; width: 264px;
    transform: translateX(-102%); transition: transform .22s ease; overflow-y: auto;
    box-shadow: 4px 0 24px rgba(0,0,0,.14);
  }
  body.m-nav-open #sidebar { transform: translateX(0); }
  #m-dim { position: fixed; inset: 0; background: rgba(17,17,17,.42); z-index: 55; }
  body.m-nav-open #m-dim { display: block; }

  #mtabs {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--surface); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  #mtabs a, #mtabs button {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 7px 0 8px; font-size: 10.5px; color: var(--ink-soft);
    background: none; border: 0; text-decoration: none; cursor: pointer; font-family: inherit;
  }
  #mtabs i { font-style: normal; font-size: 19px; line-height: 1; }
  #mtabs .is-active { color: var(--brand); font-weight: 800; }

  #view { padding: 12px 12px calc(80px + env(safe-area-inset-bottom)); }
  #topbar { padding: 0 12px; }
  #topbar-right { display: none; }
  #topbar-notice { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* 데스크톱에서는 햄버거가 필요 없다 */
#m-burger { display: none; }
@media (max-width: 768px) {
  #m-burger {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; font-size: 20px; cursor: pointer;
    padding: 0 10px 0 0; color: inherit; font-family: inherit;
  }
}

/* ── 페이지 ── */
.page { max-width: 1280px; margin: 0 auto; padding: 26px 20px 80px; }
.page__head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.page__title { font-size: 24px; margin: 0; letter-spacing: -.4px; }
.page__desc { color: var(--ink-soft); font-size: 14px; margin: 0; }
.page__actions { margin-left: auto; display: flex; gap: 8px; }
.hero { padding: 40px 0; }
.hero h1 { font-size: 32px; margin: 0 0 8px; color: var(--brand); }
.muted { color: var(--ink-soft); font-size: 14px; }
.faint { color: var(--ink-faint); font-size: 13px; }
.right { text-align: right; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ── 카드 · 패널 ── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; }
.panel__head { padding: 13px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.panel__head h2 { font-size: 15px; margin: 0; }
.panel__head .btn { margin-left: auto; }
.panel__body { padding: 18px; }
.panel__body > :first-child { margin-top: 0; }
.panel__body > :last-child { margin-bottom: 0; }

/*
  ⚠ 아래 여백이 있어야 한다. .panel 은 margin-bottom 을 갖는데 .grid 는 없어서,
    KPI 묶음 바로 뒤에 오는 패널이 달라붙어 "같은 덩어리"로 읽혔다
    (대시보드의 [미결제 청구서]·[충전 승인 대기]가 그랬다).
*/
.grid { display: grid; gap: var(--gap); margin-bottom: var(--gap); }
/* 그리드 안에 든 패널은 스스로 여백을 갖지 않는다 — gap 이 이미 띄운다 */
.grid > .panel { margin-bottom: 0; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* KPI — 숫자가 먼저 읽혀야 한다 */
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.kpi__label { font-size: 13px; color: var(--ink-soft); margin: 0 0 6px; }
.kpi__value { font-size: 26px; font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.kpi__unit { font-size: 14px; font-weight: 500; color: var(--ink-soft); margin-left: 2px; }
.kpi__sub { font-size: 12px; color: var(--ink-faint); margin: 4px 0 0; }
.kpi--accent .kpi__value { color: var(--brand); }

/* ── 버튼 ── */
.btn { padding: 7px 14px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius);
       cursor: pointer; text-decoration: none; display: inline-block; font-size: 14px; font-family: inherit; color: inherit; }
.btn:hover { background: var(--line-soft); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.btn--primary:hover { background: #a70d26; }
.btn--danger { border-color: var(--danger); color: var(--danger); }
.btn--danger:hover { background: var(--danger-bg); }
.btn--sm { padding: 4px 9px; font-size: 13px; }
/*
  ⚠ 세로 여백이 있어야 한다. 없으면 표·패널 바로 아래에 버튼이 달라붙어
    "이 표의 머리글인가" 처럼 읽힌다(배송상품 목록의 [입고신청]에서 발견).
    패널 안쪽(.panel__body)에서는 이미 padding 이 있으므로 위쪽 여백만 준다.
*/
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin: var(--gap) 0; }
.panel__body > .btn-row:last-child { margin-bottom: 0; }
.panel__body > .btn-row:first-child { margin-top: 0; }
/* 패널 바로 아래에 놓인 버튼 줄은 좌우 여백도 필요하다(표는 끝까지 붙어 있다) */
.panel > .btn-row { padding: 0 var(--gap); }
.btn-row--end { justify-content: flex-end; }

/* ── 배지 ── */
.badge { display: inline-block; padding: 2px 8px; border-radius: 11px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--danger { background: var(--danger-bg); color: var(--danger); }
.badge--info { background: var(--info-bg); color: var(--info); }
.badge--idle { background: var(--line-soft); color: var(--ink-soft); }

/* ── 표 ── */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; font-size: 14px; vertical-align: middle; }
.table thead th { background: var(--line-soft); font-weight: 600; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fafbfc; }
.table td.empty, .table td.is-empty { text-align: center; color: var(--ink-faint); padding: 44px 0; }
.table--compact th, .table--compact td { padding: 7px 10px; font-size: 13px; }
.table a { color: var(--info); }

/* ── 폼 ── */
.form { display: grid; gap: 14px; }
/*
  ⚠ align-content: start 가 핵심이다.
    .form__grid 는 한 줄의 칸들을 가장 높은 칸에 맞춰 늘리는데(stretch),
    .form__row 도 grid 라서 그 남는 높이가 **행 사이로 분배된다**.
    그러면 설명줄이 있는 칸과 없는 칸에서 입력상자가 서로 다른 높이에 놓인다
    ("운송 방식" 셀렉트와 "무게" 입력칸이 어긋나 보이던 이유다).
*/
.form__row { display: grid; gap: 6px; align-content: start; }
.form__row label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
/* ══════════════════════════════════════════════════════════════
   입력 컨트롤 기준선 — **어디에 있든 같은 모양**이다.

   ⚠ 예전에는 `.form__row select` 에만 스타일이 있었다. 그래서 패널 머리·검색줄처럼
     폼 밖에 놓인 select 는 브라우저 기본 모양으로 남아 화면마다 컨트롤이 갈렸다.
     (판매채널 문의 화면의 select 가 그랬다)
     기준선은 요소에 걸고, 폼 안에서만 필요한 것(width:100%)은 따로 얹는다.
   ══════════════════════════════════════════════════════════════ */
select, input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius);
  font-family: inherit; font-size: 14px; background: var(--surface); color: inherit;
  /* ⚠ select 와 input 의 기본 높이가 브라우저마다 다르다 — 나란히 두면 눈에 띄게 어긋난다 */
  min-height: 38px; line-height: 1.4; box-sizing: border-box;
}
select:focus, input:focus, textarea:focus { outline: 2px solid var(--info); outline-offset: -1px; }
select:disabled, input:disabled, textarea:disabled { background: var(--bg); color: var(--ink-faint); }

.form__row input, .form__row select, .form__row textarea { width: 100%; }
.form__row textarea { min-height: 78px; resize: vertical; }
.form__row input:focus, .form__row select:focus, .form__row textarea:focus { outline: 2px solid var(--info); outline-offset: -1px; }
.form__hint { font-size: 12px; color: var(--ink-faint); }
/* 칸을 세로로 늘리지 않는다 — 늘리면 위 주석의 어긋남이 생긴다 */
.form__grid {
  display: grid; gap: 14px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.check { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.check input { width: auto; }

.search { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.search input[type=search] { flex: 0 1 260px; }

/* ── 정의 목록 (상세 화면) ── */
.dl { display: grid; grid-template-columns: 150px 1fr; gap: 0; font-size: 14px; }
.dl dt { padding: 9px 0; color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.dl dd { padding: 9px 0; margin: 0; border-bottom: 1px solid var(--line-soft); }

/* ── 알림 ── */
.notice { padding: 11px 14px; border-radius: var(--radius); font-size: 14px; margin-bottom: 14px; border: 1px solid transparent; }
.notice--warn { background: var(--warn-bg); border-color: #f0d9a0; color: var(--warn); }
.notice--danger { background: var(--danger-bg); border-color: #f2c2bd; color: var(--danger); }
.notice--info { background: var(--info-bg); border-color: #c3d6f3; color: var(--info); }
.notice--ok { background: var(--ok-bg); border-color: #b8ddc7; color: var(--ok); }

/* 토스트 — alert() 대신. alert 는 흐름을 끊고 문구를 복사할 수도 없다 */
.toast-host { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 8px; z-index: 100; }
.toast { background: var(--ink); color: #fff; padding: 11px 15px; border-radius: var(--radius);
         font-size: 14px; max-width: 380px; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.toast--err { background: var(--danger); }
.toast--ok { background: var(--ok); }

/* ── 페이지네이션 ── */
/*
  ⚠ 아래 여백이 있어야 한다. margin-top 만 있으면 페이징 바로 뒤에 오는 패널이
    달라붙어 "이 페이징이 아래 표의 것인가"로 읽힌다(정산 화면에서 발견).
*/
.paging { display: flex; gap: 5px; justify-content: center; margin: 20px 0; flex-wrap: wrap; }
.paging__now { padding: 6px 11px; font-size: 14px; font-weight: 700; }
/*
  ⚠ 페이징 요소는 화면에 따라 <a>(목록·주소로 이동) 이기도 하고
    <button>(검색·JS 로 페이지 교체) 이기도 하다. 둘이 같은 모양이어야 한다 —
    한쪽만 .btn 을 쓰면 같은 페이징이 화면마다 다르게 보인다(실제로 그랬다).
*/
button.paging__nav, button.paging__num {
  font-family: inherit; cursor: pointer; min-height: 0; line-height: normal;
}
.paging__nav[aria-disabled="true"],
.paging__nav:disabled { color: var(--ink-faint); pointer-events: none; background: var(--bg); }
.paging__num, .paging__nav { padding: 6px 11px; border: 1px solid var(--line); border-radius: var(--radius);
                             text-decoration: none; font-size: 14px; background: var(--surface); }
.paging__num.is-current { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }

/* ── 오류 화면 ── */
.error { text-align: center; padding: 70px 0; }
.error h1 { font-size: 60px; margin: 0; color: var(--brand); }
.error p { color: var(--ink-soft); }

/* ── 하단 ── */
.foot { border-top: 1px solid var(--line); background: var(--surface); }
.foot__inner { max-width: 1280px; margin: 0 auto; padding: 24px 20px; }
.foot__brand { font-weight: 700; color: var(--brand); margin: 0 0 3px; }
.foot__biz { color: var(--ink-faint); font-size: 13px; margin: 0; }

/* ── 로그인 · 가입 · 초기설정 ──
   ⚠ 이 화면들은 한때 .f-field 라는 **CSS 가 없는** 클래스를 썼다.
     그래서 라벨과 입력칸이 한 줄에 붙고, 위아래 여백도 버튼 정렬도 없었다.
     폼 체계를 둘로 두지 않는다 — 나머지 화면과 같은 .form / .form__row 를 쓴다. */
.login { max-width: 380px; margin: 60px auto; }
.login h1 { text-align: center; color: var(--brand); margin: 0 0 6px; }
.login__sub { text-align: center; color: var(--ink-soft); font-size: 14px; margin: 0 0 24px; }
/* ★ 로그인 버튼은 폭을 꽉 채운다 — 한 가지 할 일뿐인 화면에서
   버튼이 왼쪽에 작게 붙어 있으면 다음 할 일을 찾게 된다. */
.login__submit { width: 100%; padding: 11px 16px; font-size: 14px; margin-top: 2px; }
.login .form { gap: 16px; }

@media (max-width: 720px) {
  .dl { grid-template-columns: 1fr; }
  .dl dt { padding-bottom: 0; border-bottom: 0; }
  .page__actions { margin-left: 0; width: 100%; }
}

/* ── 상담 ──
   말한 사람이 한눈에 구분돼야 한다. AI 답변과 운영자 답변은 무게가 다르고,
   고객이 그 둘을 같은 것으로 읽으면 "AI 가 그렇게 말했잖아요"가 된다. */
.chat { max-height: 480px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.chat__msg { max-width: 78%; padding: 10px 13px; border-radius: var(--radius);
             border: 1px solid var(--line); background: var(--surface); }
.chat__msg--user  { align-self: flex-end; background: var(--brand); border-color: var(--brand); color: #fff; }
.chat__msg--staff { align-self: flex-start; border-color: var(--brand); border-left-width: 3px; }
.chat__who { font-size: 12px; font-weight: 600; opacity: .75; margin-bottom: 3px; }
.chat__body { white-space: pre-wrap; line-height: 1.55; }
.chat__at { font-size: 11px; opacity: .6; margin-top: 4px; text-align: right; }
.row--click { cursor: pointer; }
.row--click:hover { background: var(--surface-alt, rgba(0,0,0,.03)); }


/* ── 가입 환영 ── */
.panel--welcome { border-color: var(--brand); border-left-width: 4px; }
.welcome__code { font-size: 34px; font-weight: 800; letter-spacing: 2px; color: var(--brand);
                 margin: 10px 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.login__alt { text-align: center; margin-top: 18px; font-size: 14px; color: var(--ink-soft); }
/* 로그아웃 직후 도착 지점 — 결과를 말하지 않으면 눌렀는지조차 알 수 없다 */
.login__done { margin: -14px 0 18px; text-align: center; font-size: 13px; color: var(--ok, #2e7d5b); }
.gnb__me { color: inherit; text-decoration: none; }
.gnb__me:hover { text-decoration: underline; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 17px;
        letter-spacing: 1px; }


/* ── 선택 카드 (분류 등) ── */
.pick { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.pick h3 { margin: 0 0 4px; font-size: 15px; }
.pick p { margin: 0 0 12px; font-size: 13px; }


/* ── 이용안내 목차 ── */
.guide-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.guide-nav__item { display: flex; flex-direction: column; gap: 2px; padding: 9px 13px;
                   border: 1px solid var(--line); border-radius: var(--radius);
                   text-decoration: none; color: inherit; font-size: 14px; background: var(--surface); }
.guide-nav__item:hover { border-color: var(--brand); }
.guide-nav__item.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.guide-nav__cat { font-size: 11px; opacity: .7; }
.guide-body { line-height: 1.7; }
.guide-body h3 { margin-top: 0; }

/* ── 손익 표시 ── */
.is-plus  { color: #1a7f37; }
.is-minus { color: #c9252d; }

/* ══════════════════════════════════════════════════════════════
   운영센터에서 먼저 쓰기 시작한 것들.
   ⚠ 앱별 사본을 두지 않는다 — 한쪽만 고쳐지면 두 앱의 화면이 갈린다.
   ══════════════════════════════════════════════════════════════ */
.bar { display: block; width: 140px; }
.bar__rev, .bar__exp { display: block; height: 6px; border-radius: 3px; min-width: 1px; }
.bar__rev { background: var(--brand); margin-bottom: 2px; }
.bar__exp { background: var(--ink-faint, #9aa3ad); }

/* ── 폭 유틸 ──
   ⚠ 인라인 style="width:…" 대신 이걸 쓴다. 인라인을 허용하면
     "이것만 조금"이 쌓여 결국 손을 못 대게 된다(구 프로젝트 1,900개). */
.w-num  { width: 5rem; }      /* 수량 등 짧은 숫자 입력 */
.col-no { width: 90px; }      /* 표: 번호 */
.col-sm { width: 80px; }      /* 표: 짧은 값 (조회수·구분) */
.col-md { width: 120px; }     /* 표: 날짜·작성자 */
.col-act{ width: 110px; }     /* 표: 행동 버튼 */

/* ══════════════════════════════════════════════════════════════
   스마트신청 · 주소록에서 쓰기 시작한 것들.
   ⚠ 스마트신청 전용처럼 보여도 공통 CSS 에 둔다 — 앱별 사본 금지(DESIGN.md §1).
   ══════════════════════════════════════════════════════════════ */

/* 붙여넣기 영역 — 텍스트가 넓고 스크린샷이 좁다. 좁은 화면에서는 세로로 쌓인다 */
.smart__input { display: flex; gap: var(--gap); flex-wrap: wrap; }
.smart__text {
  flex: 2 1 340px; min-height: 11rem; resize: vertical;
  font: inherit; font-size: .875rem; line-height: 1.5;
  padding: .625rem .75rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
}
.smart__shot {
  flex: 1 1 200px; display: flex; align-items: center; justify-content: center;
  position: relative; padding: .5rem;
  border: 1px dashed var(--line); border-radius: var(--radius);
}
.smart__shot img { max-width: 100%; max-height: 11rem; border-radius: var(--radius); }
.smart__shot .btn { position: absolute; top: .375rem; right: .375rem; }

/* 버튼 줄 — 왼쪽 설명 / 오른쪽 실행 */
.btn-row--between { display: flex; justify-content: space-between; align-items: center;
                    gap: var(--gap); flex-wrap: wrap; }

/*
  ★ 값이 비어 있는데 통관에 꼭 필요한 칸 · 매칭이 안 된 선택 상자.
    회색으로 두면 '아직 안 적었다'가 눈에 안 띄고, 출고신청 직전에야 발견된다.
    ⚠ 위험(danger)이 아니라 주의(warn)다 — 지금 틀린 게 아니라 아직 안 채운 것이다.
*/
.form__row--warn > input,
select.is-warn { border-color: var(--warn); background: var(--warn-bg); }

/* 완료 패널 — 되돌릴 수 없는 실행이 끝났음을 색으로도 알린다 */
.panel--ok { border-color: var(--ok); }
.panel--ok .panel__head h2 { color: var(--ok); }

/* ── 표 안의 썸네일 ──
   ⚠ 크기를 지정하지 않으면 원본 크기로 그려져 표가 통째로 무너진다.
     비율이 다른 사진이 섞여도 줄 높이가 흔들리지 않게 정사각형으로 자른다. */
.thumb {
  width: 3rem; height: 3rem; object-fit: cover;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg);
}

/* 폼 안의 소제목 — 칸이 많은 화면에서 무엇의 묶음인지 알려 준다 */
.form__section {
  margin: var(--gap) 0 .25rem;
  font-size: .9375rem; font-weight: 600; color: var(--ink);
  padding-top: var(--gap); border-top: 1px solid var(--line);
}

/* ── 주의를 요구하는 패널 ──
   ⚠ 위험(danger)이 아니라 주의(warn)다 — 잘못된 게 아니라 사람이 눌러야 진행되는 것이다. */
.panel--warn { border-color: var(--warn); }
.panel--warn .panel__head h2 { color: var(--warn); }

/* 눌러서 걸러 보는 KPI 카드 — 숫자가 곧 필터다.
   ★ 숫자만 보여 주면 "그래서 그게 뭔데"로 끝난다. 누를 수 있으면 다음 행동이 생긴다. */
a.kpi--link { text-decoration: none; color: inherit; display: block; }
a.kpi--link:hover { border-color: var(--brand); }
a.kpi--link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── 사유 입력 대화상자 (window.prompt 대체) ──
   ⚠ prompt 는 브라우저가 막을 수 있고, 막히면 조용히 null 이 돌아온다 —
     사유 없이 취소된 것처럼 보인다. 그리고 맥락을 적을 자리가 없다. */
dialog.ask {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  padding: 0; max-width: min(30rem, calc(100vw - 2rem));
}
dialog.ask::backdrop { background: rgba(0, 0, 0, .35); }
.ask__form { display: flex; flex-direction: column; gap: .625rem; padding: var(--gap); }
.ask__title { margin: 0; font-size: 1rem; }
.ask__desc { margin: 0; font-size: .8125rem; color: var(--ink-soft); line-height: 1.6; }
.ask__input {
  font: inherit; font-size: .875rem; padding: .5rem .625rem; resize: vertical;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
}
.ask__error { margin: 0; font-size: .8125rem; color: var(--danger); }

/*
  중국어 병기 — 웨이하이 창고 직원이 이 화면을 쓴다.
  ⚠ 장식이 아니다. 한국어만 있으면 메뉴를 못 읽는다.
*/
.zh { font-size: 10.5px; color: var(--ink-faint); font-weight: 400; margin-left: 3px; }
body.shell-console .zh { color: rgba(255,255,255,.42); }

/* 로그인 — 아이디 저장 */
.login__remember { display: block; margin: -.25rem 0 .75rem; font-size: .8125rem; }

/* ══════════════════════════════════════════════════════════════
   상품검색 — 원본 그대로 **카드 그리드**.

   ⚠ 표로 만들지 않는다. 중국 상품은 제목이 길고 사진이 곧 정보라
     한 줄짜리 표에 넣으면 무엇을 살지 판단할 수가 없다.
     (한 번 표로 만들었다가 원본과 다르다는 지적을 받고 되돌렸다)
   ══════════════════════════════════════════════════════════════ */

/* 검색 도구 한 줄 — 원본 .cmd-deck */
.cmd-deck {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
}
.cmd-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cmd-row input[type="search"], .cmd-row input[type="text"] {
  flex: 1; min-width: 200px; min-height: 44px; padding: 0 14px;
  font: inherit; font-size: 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
}
.cmd-deck .btn { min-height: 44px; }
.cmd-hint { font-size: 11px; color: var(--ink-soft); margin: 8px 0 0; }

.sr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; }

.sr-cardwrap { position: relative; }
.sr-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
  width: 100%; text-align: left; font: inherit; color: inherit; padding: 0;
  transition: box-shadow .15s, transform .15s;
}
.sr-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.09); transform: translateY(-2px); border-color: var(--brand); }
.sr-card:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.sr-imgwrap { aspect-ratio: 1/1; background: #f4f5f7; overflow: hidden; position: relative; }
.sr-imgwrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 사진이 없을 때 — 깨진 아이콘 대신 회색 판을 둔다 */
.sr-imgwrap .sr-noimg {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; color: var(--ink-faint); font-size: 11px;
}
.sr-title {
  font-size: 12px; line-height: 1.45; padding: 8px 10px 2px; height: 44px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; font-weight: 600;
}
.sr-price { padding: 2px 10px; font-size: 14px; font-weight: 800; color: var(--brand); }
.sr-price--unknown { color: var(--ink-soft); font-size: 11.5px; font-weight: 400; }
.sr-krw { font-size: 11px; font-weight: 600; color: var(--ink-soft); margin-left: 2px; }
.sr-meta { display: flex; gap: 8px; align-items: center; padding: 2px 10px 9px; font-size: 10px; color: var(--ink-soft); }

/* 찜 — 카드 위에 겹친다(원본과 같다) */
.sr-fav {
  position: absolute; top: 8px; right: 8px; border: none;
  background: rgba(255,255,255,.92); border-radius: 50%;
  width: 30px; height: 30px; font-size: 15px; cursor: pointer;
  color: #c2c8d0; box-shadow: 0 1px 4px rgba(0,0,0,.15); line-height: 1;
}
.sr-fav.on, .sr-fav:hover { color: var(--brand); }


/* 옵션 선택 — 담기 전에 어떤 옵션인지 정해야 가격 근거가 생긴다 */
.sr-opts { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.sr-opt { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.sr-opt__label { flex: 1; }
.sr-opt__price { font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }

/* ══════════ 게시글(공지) ══════════ */

/*
  ★ 고정 배지 자리를 항상 비워 둔다.
    배지가 있는 줄만 제목이 밀리면 목록이 들쭉날쭉해서 훑기가 어렵다.
*/
.pin-slot { display: inline-block; width: 3.25rem; vertical-align: middle; }
.table tr.is-pinned { background: var(--warn-bg); }

.post__meta {
  margin: 0 0 var(--gap); padding-bottom: .75rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: .8125rem; color: var(--ink-soft);
}
/*
  ⚠ 본문 줄바꿈은 CSS 로 살린다. <br> 을 끼워 넣으면 저장된 글자와 화면이 달라지고,
    그 순간부터 본문을 그대로 믿을 수 없게 된다.
*/
.post__body {
  white-space: pre-wrap; word-break: break-word;
  font-size: .9375rem; line-height: 1.8;
  /* 읽기 좋은 폭 — 화면 끝까지 늘어나면 눈이 줄을 놓친다 */
  max-width: 46rem;
}

/* ══════════ 탭 (내 정보 등) ══════════
   ★ 패널을 DOM 에서 지우지 않고 감춘다(hidden). 입력 중이던 값이 탭을 옮겼다 오면
     사라지는 것을 막기 위해서다 — 원본도 display 로 감췄다. */
.tabs {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 8px 12px; margin-bottom: 12px;
}
.tabs__spacer { margin-left: auto; }

/* 결과 문구의 색 — 확인됨/불일치를 글자만으로 구분하지 않는다 */
.form__hint.is-ok  { color: var(--ok); font-weight: 600; }
.form__hint.is-err { color: var(--danger); font-weight: 600; }

/* 운비 조회 — 버튼과 결과가 한 줄에 붙는다 */
.freight { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.freight .is-warn { color: var(--warn); font-weight: 600; }

/* 운비 조회 — 버튼과 결과가 한 줄에 붙는다 */
.freight { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.freight .is-warn { color: var(--warn); font-weight: 600; }

/* 검색할 곳 고르기 — 지금 어디를 보고 있는지가 한눈에 보여야 한다 */
.pf-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--gap); }
.pf-tab {
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-soft); font-size: 13px; cursor: pointer;
}
.pf-tab:hover { border-color: var(--brand); color: var(--ink); }
.pf-tab.is-on {
  background: var(--brand); border-color: var(--brand);
  color: #fff; font-weight: 600;
}

/* 물류 궤적 — 가장 최근 위치가 눈에 먼저 들어와야 한다 */
tr.is-latest { background: var(--ok-bg); font-weight: 600; }
.nowrap { white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════
   배송상품 관리 — 2단계 마법사 + 2열 작업대 (원본 renderRegisterInfo)

   ★ 왼쪽이 "무엇이 있나"(Manifest), 오른쪽이 "무엇을 채우나"(상세)다.
     한 화면에 둘을 같이 두는 것이 이 화면의 핵심이다 — 통관 정보를
     수십 건 채워야 하는데, 목록↔상세를 오가면 어디까지 했는지 놓친다.

   ⚠ 좁은 화면(<1100px)에서는 2열이 성립하지 않는다. 그때는 한 번에 하나만
     보이고 [상품 목록]/[상품 상세] 스위치로 오간다 — 원본과 같다.
   ══════════════════════════════════════════════════════════════ */

/* ── 상단: 단계 + 요약 + 다음 ── */
.manifest-top {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.manifest-top .steps { flex: 1; min-width: 240px; }

.steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.step-pill {
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-faint);
}
.step-pill.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.step-arrow { color: var(--ink-faint); }
/* 모바일 압축 표기 — 데스크톱에서는 숨는다 */
.steps-m { display: none; flex: 1; min-width: 160px; }
.steps-m-label { font-size: 12px; color: var(--ink-soft); }
.steps-m-bar { height: 4px; background: var(--line-soft); border-radius: 2px; margin-top: 4px; }
.steps-m-bar > i { display: block; height: 100%; background: var(--brand); border-radius: 2px; }
.steps-m-bar > i.is-half { width: 50%; }
.steps-m-bar > i.is-full { width: 100%; }

.manifest-sum {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  font-size: 12px; color: var(--ink-soft);
}
.manifest-sum b { font-variant-numeric: tabular-nums; }
.manifest-sum .is-ok b { color: var(--ok); }
.manifest-sum .is-bad b { color: var(--danger); }
.manifest-sum .is-cur b { color: var(--brand); }

/* ── 모바일 전환 스위치 ── */
.manifest-viewswitch { display: none; gap: 6px; margin-bottom: 10px; }
.manifest-viewswitch > a {
  flex: 1; text-align: center; padding: 8px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-soft); text-decoration: none;
}
.manifest-viewswitch > a[aria-pressed="true"] {
  background: var(--brand); border-color: var(--brand); color: #fff;
}

/* ── 2열 작업대 ── */
.reg-wb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); }
.reg-wb-list { display: flex; flex-direction: column; min-width: 0; }
.reg-wb-detail { min-width: 0; }
.manifest-backbar { display: none; margin-bottom: 8px; }

/* ── 도구줄 ── */
.manifest-toolbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 12px; border-bottom: 1px solid var(--line-soft);
}
.manifest-toolbar .manifest-q { flex: 1; min-width: 170px; font-size: 12px; }
.manifest-tb-lbl { font-size: 11px; color: var(--ink-faint); font-weight: 700; }
.manifest-tb-right { margin-left: auto; }
.manifest-tb-seg { display: inline-flex; gap: 4px; }
/* 켜진 필터 — 색만으로 구분하지 않도록 글자도 굵어진다 */
.btn.is-on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }

/* ── Manifest 행 ── */
.manifest-list { flex: 1; overflow-y: auto; max-height: 62vh; padding: 0; }
.manifest-empty { padding: 40px 16px; text-align: center; }
.manifest-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--line-soft);
}
.manifest-row.is-sel { background: var(--brand-soft); }
/* 미완료 행은 왼쪽에 띠를 준다 — 색만으로 구분하지 않기 위해서다 */
.manifest-row.is-todo { box-shadow: inset 3px 0 0 var(--danger); }
.manifest-thumb {
  flex: none; width: 40px; height: 40px; border-radius: var(--radius);
  background: var(--line-soft); overflow: hidden; display: inline-flex;
  align-items: center; justify-content: center;
}
.manifest-thumb img { width: 100%; height: 100%; object-fit: cover; }
.manifest-main { flex: 1; min-width: 0; display: block; }
.manifest-name {
  font-weight: 700; font-size: 13px; color: var(--ink);
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  text-decoration: none;
}
.manifest-name:hover { color: var(--brand); text-decoration: underline; }
.manifest-opt { font-size: 11px; color: var(--ink-soft); margin-left: 6px; }
.manifest-ids {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  font-size: 11px; color: var(--ink-soft); margin-top: 2px;
}
.manifest-trk { display: inline-flex; align-items: center; gap: 4px; }
.manifest-trk input { font-size: 11px; padding: 2px 6px; width: 190px; }
.manifest-trk-ro em.is-bad { font-style: normal; color: var(--danger); }
.manifest-num {
  flex: none; text-align: right; font-size: 12px;
  font-variant-numeric: tabular-nums; min-width: 120px;
}
.manifest-num .q { display: block; color: var(--ink-soft); font-size: 11px; }
.manifest-num b { font-weight: 700; }
.manifest-st {
  flex: none; font-size: 11px; font-weight: 700; padding: 3px 8px;
  border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.manifest-st.is-ok { background: var(--ok-bg); color: var(--ok); }
/* 미완료는 버튼이다 — 누르면 빈 칸만 채우는 창이 열린다 */
.manifest-st.is-bad {
  background: var(--danger-bg); color: var(--danger);
  border-color: var(--danger); cursor: pointer;
}
.manifest-st.is-bad:hover { background: var(--danger); color: #fff; }

/* ── 묶음 헤더 ── */
.po-group-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; background: var(--bg);
  border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700;
}
.po-group-head.is-muted { color: var(--ink-faint); }
.pg-name { color: var(--ink); text-decoration: none; }
.pg-name:hover { color: var(--brand); text-decoration: underline; }
.pg-n { margin-left: auto; font-weight: 400; color: var(--ink-soft); }

/* ── 상품 추가 ── */
.manifest-add { border-top: 1px solid var(--line); }
.manifest-add > summary { padding: 10px 12px; cursor: pointer; font-size: 13px; font-weight: 600; }
.manifest-add-body { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 12px 12px; }
.manifest-add-n { display: inline-flex; gap: 4px; align-items: center; }
.manifest-add-n label { display: inline-flex; gap: 4px; align-items: center; font-size: 11px; color: var(--ink-soft); }
.manifest-add-n input { width: 52px; text-align: center; }

/* ── 오른쪽 상세 ── */
.detail-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px;
}
.detail-title {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14px; margin-bottom: 12px;
}
.detail-title--group { flex-wrap: wrap; justify-content: flex-start; }
.detail-title-acts { margin-left: auto; display: flex; gap: 6px; }
.detail-hero { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.detail-thumb {
  flex: none; width: 110px; height: 110px; border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; background: var(--line-soft);
  display: flex; align-items: center; justify-content: center;
}
.detail-thumb img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero-txt { font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; }
.detail-hero-name { font-size: 14px; font-weight: 800; color: var(--ink); }
.detail-acts .detail-del { margin-right: auto; }

.src-radio { display: flex; gap: 6px; flex-wrap: wrap; }
.src-radio label {
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; cursor: pointer; background: var(--surface);
}
.src-radio label.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.src-radio input { margin-right: 4px; }

/* 부가옵션 — 그룹을 열로 늘어놓는다. 원산지(필수)가 눈에 먼저 들어와야 한다 */
.addon-box { border: 1px solid var(--line); border-radius: var(--radius); margin-top: 14px; }
.addon-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--line-soft); background: var(--bg);
}
.addon-preset { display: flex; gap: 6px; }
.addon-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; padding: 12px;
}
.addon-col h5 { margin: 0 0 6px; font-size: 12px; }
.addon-col .opt {
  display: block; font-size: 12px; padding: 3px 0; cursor: pointer; color: var(--ink-soft);
}
.addon-col .opt.is-on { color: var(--ink); font-weight: 600; }
.addon-col .opt .w { color: var(--ink-faint); font-size: 11px; }
.req { color: var(--danger); }
.fee-note { font-size: 11px; color: var(--ink-faint); padding: 0 12px 10px; margin: 0; }

/* 그룹 전체 보기 행 */
.gv-sum { font-size: 12px; margin: 0 0 10px; }
.gv-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.gv-row-main { flex: 1; min-width: 0; }

/* 아무것도 안 열렸을 때 */
.empty-state {
  background: var(--surface); border: 1px dashed var(--line);
  border-radius: var(--radius); padding: 40px 20px; text-align: center; color: var(--ink-soft);
}
.empty-state h3 { margin: 0 0 8px; font-size: 14px; color: var(--ink); }
.empty-state p { margin: 0; font-size: 12.5px; line-height: 1.8; }

/* ── 모바일 하단 tray ── */
.manifest-tray { display: none; }

/* ── 모달 안의 조각 ── */
.ask--wide { max-width: 640px; width: 92vw; }
.addon-inline { margin-top: 12px; }
.addon-inline-t { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.addon-inline label { display: inline-flex; gap: 4px; align-items: center; font-size: 12.5px; margin-right: 12px; cursor: pointer; }
.addr-box-code {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--brand-soft); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px; margin: 10px 0;
}
.addr-box-code-v { font-size: 20px; font-weight: 800; color: var(--brand); letter-spacing: 1px; }
.mp-wrap { max-height: 340px; overflow: auto; }

/* ══════════ 좁은 화면 ══════════
   ★ 2열을 억지로 유지하지 않는다. 한 열이 40자도 안 되면 통관 정보를 읽을 수 없다. */
@media (max-width: 1100px) {
  .reg-wb { grid-template-columns: 1fr; }
  .manifest-viewswitch { display: flex; }
  .manifest-backbar { display: block; }
  /* 스위치가 고른 쪽만 보인다 */
  .reg-wb[data-mview="list"] .reg-wb-detail { display: none; }
  .reg-wb[data-mview="detail"] .reg-wb-list { display: none; }
  .manifest-list { max-height: none; }
}

@media (max-width: 700px) {
  .steps .step-pill, .steps .step-arrow { display: none; }
  .steps-m { display: block; }
  /* 상단의 [다음]은 아래 tray 로 내린다 — 긴 목록에서 위로 올라가지 않게 */
  .manifest-top > .btn { display: none; }
  .manifest-tray {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: sticky; bottom: 0; z-index: 5;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 10px 12px; margin: 12px -12px -12px;
  }
  .manifest-tray-sum { font-size: 12px; color: var(--ink-soft); }
  .manifest-num { min-width: 90px; }
  .manifest-trk input { width: 130px; }
}

/* ══════════════════════════════════════════════════════════════
   배송상품 유형 분류 — 3구역 보드 (원본 renderClassify)

   ★ 왼쪽 '분류 대기' 가 넓고, 오른쪽에 일반·쿠팡이 위아래로 쌓인다.
     대기 구역이 작업 대상이라 가장 넓어야 한다.
   ══════════════════════════════════════════════════════════════ */
.mboard {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}
.mzone { min-width: 0; }
.mboard-stack { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }

/* 이동 버튼 — 두 구역 사이 세로 줄 */
.mboard-moves {
  display: flex; flex-direction: column; gap: 8px;
  align-self: center; white-space: nowrap;
}

.manifest-zone {
  font-size: 10.5px; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px;
}
.manifest-bar {
  flex: none; display: inline-flex; gap: 4px; align-items: center;
  font-size: 11px; color: var(--ink-soft);
}

/* ── 등록 완료 ──
   ★ 가운데 정렬한 확인 화면. 여기서 멈추지 않도록 다음 버튼을 크게 준다. */
.complete-wrap {
  max-width: 34rem; margin: 40px auto; text-align: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 32px 24px;
}
.complete-ic {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--ok-bg); color: var(--ok);
  font-size: 28px; line-height: 56px; font-weight: 800;
}
.complete-title { margin: 0 0 8px; font-size: 18px; }
.complete-info {
  background: var(--bg); border-radius: var(--radius);
  padding: 14px; margin: 20px 0; font-size: 13px; text-align: left;
}
.complete-info p { margin: 0 0 6px; }
.complete-info p:last-child { margin-bottom: 0; font-size: 12px; }
.complete-acts { justify-content: center; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .mboard { grid-template-columns: 1fr; }
  .mboard-moves { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  /* 좁은 화면에서는 스위치가 고른 구역만 보인다 */
  .mboard[data-clsview="pool"] .mboard-stack { display: none; }
  .mboard[data-clsview="general"] .mzone-pool,
  .mboard[data-clsview="general"] [data-zone="coupang"],
  .mboard[data-clsview="coupang"] .mzone-pool,
  .mboard[data-clsview="coupang"] [data-zone="general"] { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   내 상품 관리 — 카드 그리드 + 왼쪽 카테고리 (원본 renderMyProducts)

   ★ 표가 아니라 카드인 이유: 이 화면은 읽는 곳이 아니라 **고르는 곳**이다.
     사진이 커야 고를 수 있고, 카드마다 담기 버튼이 붙어야 다음 화면으로 안 넘어간다.
   ══════════════════════════════════════════════════════════════ */
.fav-search { display: flex; gap: 6px; align-items: center; }
.fav-search input[type="search"] { width: 280px; max-width: 40vw; font-size: 12px; }

.fav-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: var(--gap); }

/* ── 왼쪽 카테고리 ── */
.fav-catrail {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px; align-self: start;
  position: sticky; top: 60px;
}
.fav-cat-title { font-size: 12px; font-weight: 700; margin-bottom: 8px; color: var(--ink-soft); }
.fav-cat {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  width: 100%; padding: 6px 8px; border-radius: var(--radius);
  font-size: 12px; color: var(--ink-soft); text-decoration: none;
}
.fav-cat:hover { background: var(--bg); color: var(--ink); }
.fav-cat.is-on { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.fav-cat b { font-variant-numeric: tabular-nums; }
.fav-cat-refresh { width: 100%; margin-top: 10px; }
.fav-cat-note { font-size: 10px; color: var(--ink-faint); margin: 6px 0 0; line-height: 1.4; }

/* ── 상태칩 ── */
.fav-filter-row {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 12px;
}
.fav-chip {
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-soft); font-size: 12px; text-decoration: none;
}
.fav-chip:hover { border-color: var(--brand); color: var(--ink); }
.fav-chip.is-on {
  background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700;
}
.fav-chip b { font-variant-numeric: tabular-nums; }
/* 라벨 묶음과 통관 묶음을 가르는 선 — 두 축이 섞여 보이면 무엇을 고르는지 헷갈린다 */
.fav-chip-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.fav-filter-cur { margin-left: auto; font-size: 12px; }

/* ── 카드 ── */
.fav-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px;
}
.fav-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px;
}
.fav-card-img {
  display: block; width: 100%; height: 150px; border-radius: 8px;
  border: 1px solid var(--line); overflow: hidden; background: var(--line-soft);
}
.fav-card-img img { width: 100%; height: 100%; object-fit: cover; }
.fav-card-img.is-empty {
  display: flex; align-items: center; justify-content: center; font-size: 40px;
}
.fav-card-name {
  font-weight: 700; font-size: 12px; margin-top: 8px; line-height: 1.4; flex: 1;
}
.fav-card-name a { color: inherit; text-decoration: none; }
.fav-card-name a:hover { text-decoration: underline; }
.fav-card-price { color: var(--brand); font-weight: 800; margin-top: 4px; }
.fav-card-code { margin-top: 5px; font-size: 11px; color: var(--ink-soft); }
.fav-card-code b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); }
/* 검색어와 맞은 옵션 — 왜 이 카드가 나왔는지 알려 준다 */
.fav-card-hit {
  margin-top: 4px; font-size: 11px; color: var(--info);
  background: var(--info-bg); border: 1px solid var(--info-bg);
  border-radius: 6px; padding: 3px 7px;
}
.fav-card-hit .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.fav-card-acts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.fav-card-acts > .btn { flex: 1; text-align: center; }
.fav-act-wide { flex: 1 1 100% !important; }
.fav-empty { padding: 40px 16px; text-align: center; }

@media (max-width: 900px) {
  /* 좁은 화면에서는 카테고리를 위로 올려 가로로 흐르게 한다 */
  .fav-layout { grid-template-columns: 1fr; }
  .fav-catrail { position: static; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  .fav-cat { width: auto; }
  .fav-cat-note { flex: 1 1 100%; }
  .fav-search input[type="search"] { width: 100%; max-width: none; }
}

/* 회원 등급 — 고르고 바로 저장한다. 목록을 다시 그리지 않으므로 한 줄 안에 둔다 */
.grade-cell { white-space: nowrap; }
.grade-cell .grade-sel { max-width: 140px; }

/* ══════════════════════════════════════════════════════════════
   화면 위 팝업 — 지금 보던 자리 위에서 묻는다.

   ★ 전체 화면 안내로 만들면 "이미 처리됐나?" 로 읽힌다.
     아직 아무 일도 일어나지 않았다는 것을 형태로 알린다(어두워진 배경 + 카드).
   ⚠ 자바스크립트를 쓰지 않는다 — 스크립트가 막혀도 로그아웃은 되어야 한다.
   ══════════════════════════════════════════════════════════════ */
.modal-dim {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(26, 31, 36, 0.45);
}
.modal-card {
  width: 100%; max-width: 22rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 22px 20px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
/* 배경을 눌러도 닫힌다. ⚠ 카드 **뒤에** 깔려야 한다 —
   앞에 오면 카드 안의 버튼이 눌리지 않는다(z-index 0 vs 1). */
.modal-dim__close { position: absolute; inset: 0; z-index: 0; }
.modal-card { position: relative; z-index: 1; }

.modal-card__head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.modal-card__title { margin: 0; font-size: 16px; flex: 1; }
/* 닫기(✕) — 버튼이 아니라 링크다. 스크립트가 막혀도 닫힌다.
   ⚠ 눌리는 면을 32px 로 잡는다. 글자 크기만으로는 손가락에 안 맞는다. */
.modal-card__close {
  flex: none; width: 32px; height: 32px; margin: -6px -6px 0 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; color: var(--ink-soft); text-decoration: none;
  font-size: 15px; line-height: 1;
}
.modal-card__close:hover { background: rgba(0, 0, 0, 0.05); color: var(--ink); }
.modal-card__desc { margin: 0 0 18px; font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }
/* 왜 다시 묻는지 — 이 줄이 없으면 같은 팝업이 두 번 뜬 것으로만 보인다 */
.modal-card__warn {
  margin: 0 0 10px; padding: 8px 10px; border-radius: 6px;
  background: rgba(214, 69, 69, 0.08); color: #d64545; font-size: 12.5px;
}
.modal-card .btn-row { margin: 0; align-items: center; }
/* 폼이 버튼 한 개를 감싸고 있어도 줄이 흐트러지지 않게 한다 */
.modal-card .btn-row > form { margin: 0; display: contents; }

/* 승인 칸 — 배지 + 버튼이 한 칸에 들어간다. 줄바꿈을 허용해 좁은 화면에서도 눌린다 */
.approve-cell { min-width: 130px; }
.approve-cell .btn-row { margin: 4px 0 0; gap: 4px; }
.approve-cell .code { display: block; font-size: 11px; }
.approve-reason { margin-top: 4px; font-size: 11px; line-height: 1.4; max-width: 200px; }


/* ══════════════════════════════════════════════════════════════
   회원가입 (3단계)

   ★ 실사이트(Front/Join)의 단계 구성을 그대로 두되, 표(table) 레이아웃 대신
     라벨 위 · 입력칸 100% 로 세운다. 좁은 화면에서 표는 가로로 넘친다.
   ⚠ 14줄을 한 판에 늘어놓지 않는다 — fieldset 으로 묶어 어디까지가 한 덩어리인지 보인다.
   ══════════════════════════════════════════════════════════════ */
.joinp { max-width: 640px; margin: 40px auto 60px; }
.joinp__title { text-align: center; color: var(--brand); margin: 0 0 20px; }
.joinp__lead { font-size: 13.5px; line-height: 1.8; color: var(--ink-soft);
               margin: 0 0 24px; text-align: center; }
.joinp__form { display: grid; gap: 26px; }

/* 묶음 — 기본 fieldset 테두리는 지우고 위쪽 선만 남긴다 */
.joinp__set { border: 0; border-top: 2px solid var(--brand); padding: 16px 0 0; margin: 0;
              display: grid; gap: 14px; }
.joinp__legend { font-size: 15px; font-weight: 700; padding: 0 0 2px; margin: 0; }
.joinp__note { margin: 0; padding: 10px 12px; border-radius: 6px;
               background: var(--bg, rgba(0, 0, 0, .03)); color: var(--ink-soft);
               font-size: 12.5px; line-height: 1.7; }

/* 단계 표시줄 — 지나온 단계는 칠하고, 남은 단계는 흐리게 */
.steps { display: flex; gap: 6px; margin: 0 0 26px; }
.steps__item { flex: 1; text-align: center; padding: 12px 6px; border-radius: 8px;
               background: var(--surface); border: 1px solid var(--line); color: var(--ink-faint); }
.steps__item.is-done { background: var(--brand); border-color: var(--brand); color: #fff; opacity: .55; }
.steps__item.is-now  { background: var(--brand); border-color: var(--brand); color: #fff; }
.steps__no { display: block; font-size: 11px; letter-spacing: .06em; font-weight: 700; }
.steps__nm { display: block; font-size: 13.5px; font-weight: 700; margin-top: 3px; }

/* 약관 본문 — 스크롤 상자. ⚠ 높이를 고정한다. 본문이 길어 페이지가 끝없이 늘어나면
   [동의합니다] 를 못 찾는다 */
.agreebox { height: 220px; overflow-y: auto; padding: 14px 16px;
            border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
            font-size: 12.5px; line-height: 1.75; color: var(--ink-soft); }
.agreebox:focus { outline: 2px solid var(--info); outline-offset: 1px; }
.agreebox h3 { font-size: 13px; margin: 14px 0 4px; color: var(--ink); }
.agreebox p { margin: 0 0 6px; }
.agreebox__ok { margin: 10px 0 20px; font-size: 13.5px; }

/* 여러 개를 한 줄에 늘어놓는 선택지(수신 동의·유입경로) */
.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.checks .check { margin: 0; font-size: 13.5px; }

/* 라벨 자리를 차지하지만 for 대상이 없는 제목(라디오·체크 묶음) */
.form__label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }

/* 우편번호 — 입력칸 + 버튼 한 줄 */
.input-row { display: flex; gap: 8px; align-items: center; }
.input--zip { max-width: 8rem; }

/* 칸 밑 오류 — alert 대신 여기에 붙인다 */
.form__err { font-size: 12px; color: var(--danger); font-weight: 600; }
.form__hint--warn { color: var(--danger); }
input[aria-invalid="true"] { border-color: var(--danger); }

.btn-row--center { justify-content: center; }

@media (max-width: 640px) {
  .joinp { margin: 20px auto 40px; padding: 0 14px; }
  .steps__nm { font-size: 12px; }
  .steps__item { padding: 9px 3px; }
}

/* ── 읽기전용 칸 ──
   ⚠ 흰 칸으로 두면 고객이 커서를 넣고 타이핑하다 "왜 안 써지지" 로 끝난다.
     읽기전용은 **보기에도 달라야** 한다 */
/* ⚠ :not() 3개를 그대로 따라 붙인다. 기본 input 규칙이
     input:not([type=checkbox]):not([type=radio]):not([type=file]) 라
     .form__row input.is-readonly 로는 **우선순위에서 진다**(background 가 흰색으로 남는다). */
input.is-readonly:not([type=checkbox]):not([type=radio]):not([type=file]),
input[readonly]:not([type=checkbox]):not([type=radio]):not([type=file]) {
  background: var(--bg); color: var(--ink-soft); cursor: default;
}
.form__row input.is-readonly::placeholder { color: var(--ink-faint); }

/* 조건부로 나타나는 줄(유입경로 ‘기타’) */
.is-hidden { display: none; }

/* ── 우편번호 검색 레이어 ──
   ★ 새 창(팝업)은 차단기에 막히고, 막힌 사실이 화면에 남지 않는다 */
.modal-card--wide { max-width: 34rem; }
/* ⚠ 검색창을 또 감싸지 않는다 — 검색창이 이미 자기 틀을 갖고 있어
     카드 테두리와 겹쳐 **두 겹**으로 보인다. 카드가 유일한 틀이다. */
.modal-dim--tight .modal-card { padding: 0; overflow: hidden; }
.modal-dim--tight .modal-card__head { padding: 14px 18px; margin: 0;
                                      border-bottom: 1px solid var(--line); }
/* ⚠ 높이를 넉넉히 준다. 검색창 자체 내용이 500px 가까이라, 낮게 잡으면
     열자마자 **안쪽 스크롤**이 생겨 목록이 반쯤 잘려 보인다.
   ⚠ 작은 화면에서는 화면을 넘지 않게 잘라 준다 — 넘치면 [닫기]가 화면 밖으로 나간다. */
.postcode-embed { width: 100%; height: 520px; max-height: calc(100vh - 160px); }
.postcode-embed > div { width: 100% !important; height: 100% !important; }
/* 닫기(✕)를 button 으로도 쓴다 — 링크 기준으로 잡힌 모양을 맞춘다 */
button.modal-card__close { border: 0; background: none; cursor: pointer; font-family: inherit; }

/* ── 약관 동의 ── */
.agree-all { display: flex; align-items: center; gap: 10px; padding: 14px 18px;
             border: 1px solid var(--brand); border-radius: var(--radius);
             background: var(--brand-soft); font-size: 14.5px; }
.agree-all input { width: auto; }
.agree-all__tx { color: var(--ink); }
.panel__foot { padding: 13px 18px; border-top: 1px solid var(--line); background: var(--bg);
               border-radius: 0 0 var(--radius) var(--radius); }
.joinp__form .panel { margin-bottom: 0; }

/* ══════════ 프로젝트 관리 게시판 (운영자 내부) ══════════ */

/* ── 간이 HTML 에디터 ──
   ★ 도구 막대는 스크롤을 따라가지 않는다. 글이 길어지면 불편하지만, 붙여 두면
     좁은 화면에서 본문을 가린다. 필요해지면 본문 폭이 아니라 화면 폭 기준으로 다시 본다 */
.editor { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.editor__bar {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  padding: 6px 8px; border-bottom: 1px solid var(--line-soft); background: var(--bg);
  border-radius: var(--radius) var(--radius) 0 0;
}
.editor__btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  border-radius: 4px; padding: 3px 8px; font-size: .75rem; line-height: 1.6;
  font-family: inherit; cursor: pointer;
}
.editor__btn:hover { border-color: var(--ink-faint); color: var(--ink); }
.editor__sep { width: 1px; height: 18px; background: var(--line); margin: 0 3px; }
/* ⚠ min-height 를 준다 — 빈 상태에서 높이가 0 이면 클릭할 자리가 없다 */
.editor__area {
  min-height: 16rem; max-height: 40rem; overflow-y: auto;
  padding: 14px 16px; font-size: .9375rem; line-height: 1.8; outline: 0;
}
.editor__area:focus { box-shadow: inset 0 0 0 2px var(--brand-soft); }
.editor__area img { max-width: 100%; height: auto; }
.editor__area blockquote {
  margin: .5rem 0; padding: .25rem 0 .25rem .75rem;
  border-left: 3px solid var(--line); color: var(--ink-soft);
}
.editor--sm .editor__area { min-height: 8rem; }

/* ── 서식 있는 본문 표시 ──
   ⚠ .post__body 와 달리 pre-wrap 을 쓰지 않는다. 여기는 HTML 이라 줄바꿈이
     태그로 들어 있고, pre-wrap 을 걸면 태그 사이 들여쓰기가 빈 줄로 보인다 */
.rich { font-size: .9375rem; line-height: 1.8; word-break: break-word; max-width: 52rem; }
.rich img { max-width: 100%; height: auto; border-radius: 4px; }
.rich h3 { font-size: 1.0625rem; margin: 1.2rem 0 .5rem; }
.rich p { margin: 0 0 .75rem; }
.rich ul, .rich ol { margin: 0 0 .75rem 1.25rem; }
.rich blockquote {
  margin: .75rem 0; padding: .5rem 0 .5rem .875rem;
  border-left: 3px solid var(--line); color: var(--ink-soft);
}
.rich table { border-collapse: collapse; margin: .5rem 0; }
.rich td, .rich th { border: 1px solid var(--line); padding: 6px 10px; }

/* ── 체크 묶음(사이트 유형 · 화면 유형) ──
   ★ 라벨 전체가 눌리는 영역이다. 체크박스 사각형만 눌리면 계속 빗나간다 */
.checkset { display: flex; flex-wrap: wrap; gap: 6px; }
.checkset label {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px; font-size: .8125rem; cursor: pointer; background: var(--surface);
}
.checkset input { width: auto; margin: 0; }
.checkset label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }

/* ── 첨부 목록 ── */
.attach { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.attach__item {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line-soft); border-radius: 4px; padding: 6px 10px;
  font-size: .8125rem; background: var(--surface);
}
.attach__name { flex: 1; word-break: break-all; }
.attach__size { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.attach__thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 3px; }

/* ── 히스토리(답변 + 상태 변경) ──
   ★ 사람이 쓴 답변과 시스템 기록을 **같은 줄기**에 그린다. 나누면 "언제 무엇이
     있었나"를 두 곳을 오가며 맞춰 봐야 한다. 대신 무게를 다르게 준다 */
.timeline { display: flex; flex-direction: column; gap: 14px; }
.timeline__item { border-left: 2px solid var(--line); padding: 0 0 0 14px; }
.timeline__item.is-reply { border-left-color: var(--brand); }
.timeline__head { font-size: .8125rem; color: var(--ink-soft); margin-bottom: 4px; }
.timeline__who { font-weight: 700; color: var(--ink); }
/* 상태 변경 줄은 작게 — 답변 사이에서 배경처럼 읽혀야 한다 */
.timeline__item.is-log .timeline__head { color: var(--ink-faint); }
.timeline__log { font-size: .8125rem; color: var(--ink-soft); }

/* ── 요약 표(사이트·화면·메뉴·테스트 데이터) ── */
.meta-grid {
  display: grid; grid-template-columns: 7rem 1fr; gap: 8px 14px;
  font-size: .875rem; margin: 0 0 var(--gap);
  padding-bottom: .875rem; border-bottom: 1px solid var(--line-soft);
}
.meta-grid dt { color: var(--ink-faint); }
.meta-grid dd { margin: 0; word-break: break-all; }
@media (max-width: 640px) {
  .meta-grid { grid-template-columns: 1fr; gap: 2px 0; }
  .meta-grid dd { margin-bottom: 8px; }
}

/* 아이디·코드처럼 글자 폭이 같아야 눈으로 대조되는 값 */
.mono { font-family: ui-monospace, Consolas, "D2Coding", monospace; font-size: .9375em; }

/* 표 안에서 직접 고치는 숫자 칸 — 행을 벌리지 않도록 폭·높이를 붙들어 둔다 */
.cell-num {
  width: 5.5rem; padding: 4px 8px; text-align: right;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink);
}