[hidden] { display: none !important; }
/* 화면 틀(DESIGN.md): Claude 앱 배치. 색은 app.css의 --w-* (화이트/블랙 테마 공통). 인라인 스타일 금지(CSP). */
/* 면 색: 본문(--w-page)·사이드바(--w-side)·입력창·카드(--card). 블랙 테마는 Claude 앱 다크와 같은 값(사용자 요청 2026-10-10) */
:root { --w-page: var(--card); --w-side: var(--w-soft); }
html[data-theme="dark"] {
  --w-page: #262624; --w-side: #1f1e1d; --card: #30302e; --w-card: #30302e;
  --w-bubble: #141413; --w-text: #faf9f5; --text: #faf9f5; --w-muted: #a6a39b; --muted: #a6a39b;
  --w-soft: #2a2a28; --w-hover: #343432; --w-sel: #343432; --w-line: #3d3d3a; --w-line2: #33332f;
}
html[data-theme="dark"] .cc-send { background: #d97757; }
html[data-theme="dark"] .cc-send:hover { background: #c6613f; }
html[data-theme="dark"] .wh-side { border-right-color: transparent; }
body { background: var(--w-page); }
.cc { background: var(--w-page); }
.wh { display: grid; grid-template-columns: 272px minmax(0, 1fr); height: 100dvh; color: var(--w-text); }

/* 왼쪽 사이드바 */
.wh-side { display: flex; flex-direction: column; min-height: 0; background: var(--w-side); border-right: 1px solid var(--w-line2); padding: 10px 8px 8px; gap: 2px; }
.wh-brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 12px; color: var(--w-text); text-decoration: none; }
.wh-brand:hover { text-decoration: none; }
.wh-brand img { height: 34px; width: auto; aspect-ratio: 500 / 405; flex: none; object-fit: contain; } /* 공식 로고(컬러 CI 500×405) 비율 그대로, 칸이 좁아도 줄지 않게 — 2026-10-11 사용자: 찌그러짐 */
.wh-brand b { font-size: 16px; letter-spacing: -.2px; }
.wh-act { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 14px; color: var(--w-text); cursor: pointer; text-decoration: none; text-align: left; }
.wh-act:hover { background: var(--w-bubble); text-decoration: none; }
.wh-hist { flex: 1; min-height: 0; overflow-y: auto; margin-top: 10px; padding-bottom: 8px; }
.wh-group h3 { margin: 14px 0 4px; padding: 0 10px; font-size: 12px; font-weight: 500; color: var(--w-muted); }
.wh-empty { margin: 8px 10px; font-size: 13px; color: var(--w-muted); }
.wh-row { position: relative; border-radius: 8px; }
.wh-row:hover, .wh-row:has(.wh-menu) { background: var(--w-bubble); }
.wh-row.sel { background: var(--w-sel); }
.wh-item { display: block; padding: 7px 34px 7px 10px; font-size: 14px; color: var(--w-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; border-radius: 8px; }
.wh-item:hover { text-decoration: none; }
.wh-more { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--w-text); cursor: pointer; opacity: 0; }
.wh-row:hover .wh-more, .wh-more:focus-visible, .wh-row:has(.wh-menu) .wh-more, .wh-row.sel .wh-more { opacity: 1; }
.wh-more:hover { background: var(--w-line); }
.wh-rename { width: 100%; padding: 6px 10px; border: 1px solid #c96442; border-radius: 8px; font: inherit; font-size: 14px; background: var(--card); color: var(--w-text); outline: none; }

/* 메뉴(… · 프로필 · 알림) */
.wh-anchor { position: relative; min-width: 0; }
.wh-menu { position: absolute; right: 4px; top: calc(100% - 2px); z-index: 50; min-width: 168px; padding: 6px; background: var(--card); border: 1px solid var(--w-line); border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .14); }
.wh-menu.up { top: auto; bottom: calc(100% + 6px); left: 0; right: 0; }
.wh-mitem { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 14px; color: var(--w-text); text-align: left; cursor: pointer; }
.wh-mitem:hover, .wh-mitem:focus-visible { background: var(--w-hover); outline: none; }
.wh-mitem.danger { color: #b42318; }
html[data-theme="dark"] .wh-mitem.danger { color: #f5b4b4; }

/* 좌측 하단: 프로필 + 알림 */
.wh-foot { display: flex; align-items: center; gap: 4px; padding-top: 8px; border-top: 1px solid var(--w-line2); }
.wh-who { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 10px; background: none; font: inherit; color: var(--w-text); cursor: pointer; text-align: left; min-width: 0; }
.wh-who:hover { background: var(--w-bubble); }
.wh-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #c96442; color: #fff; font-weight: 600; font-size: 14px; }
.wh-who-t { display: grid; min-width: 0; }
.wh-who-t b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-who-t small { font-size: 12px; color: var(--w-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-icon { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: var(--w-text); cursor: pointer; }
.wh-icon:hover { background: var(--w-bubble); }
.wh-badge { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #c96442; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; }
.wh-notes { width: 320px; max-height: 420px; overflow-y: auto; left: 0; right: auto; top: auto; bottom: calc(100% + 6px); }
.wh-notes-h { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 8px; }
.wh-note { display: grid; gap: 2px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; color: var(--w-text); text-align: left; cursor: pointer; }
.wh-note:hover { background: var(--w-hover); }
.wh-note b { font-size: 13.5px; font-weight: 500; }
.wh-note.unread b { font-weight: 700; }
.wh-note.unread b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #c96442; margin-right: 6px; vertical-align: middle; }
.wh-note span, .wh-note small { font-size: 12.5px; color: var(--w-muted); }

/* 가운데 */
.wh-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--w-page); outline: none; }
.wh-main > .cc { flex: 1; }
.wh-center { flex: 1; display: grid; place-items: center; }
.wh-page { padding: 32px 40px; overflow-y: auto; }
.wh-page h1 { margin: 0 0 4px; font-size: 22px; }
.cc-hello { font-size: 30px; margin-bottom: 28px; }
.cc-plus:disabled { opacity: .45; cursor: default; }

/* 검색 창 */
.wh-search-in { width: 100%; padding: 10px 12px; border: 1px solid var(--w-line); border-radius: 10px; font: inherit; font-size: 15px; background: var(--card); color: var(--w-text); }
.wh-search-out { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.wh-search-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--w-text); text-decoration: none; }
.wh-search-item:hover { background: var(--w-hover); text-decoration: none; }
.wh-search-item.on { background: rgba(201, 100, 66, .08); color: #c96442; }
.pd-picked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pd-picked:empty { display: none; }
.pd-tag { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border-radius: 12px; background: var(--w-soft); font-size: 13px; }
.pd-tag button { border: 0; background: none; padding: 2px; cursor: pointer; color: var(--w-muted); display: grid; }
button.wh-search-item { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.wh-search-item small { color: var(--w-muted); flex: none; }
/* 작은 버튼은 아이콘이 있든 없든 같은 높이, 표 안 버튼 묶음은 가운데 한 줄 */
.btn.sm { min-height: 32px; }
.ad-acts { display: flex; align-items: center; gap: 6px; }
/* 관리자 표: 눌러서 상세를 여는 글자(제품ID·바코드·상품명) */
.ad-link { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--w-line); text-underline-offset: 3px; }
.ad-link:hover { color: #c96442; text-decoration-color: currentColor; }
.wh-search-item span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-search-item small { color: var(--w-muted); font-size: 12px; }

@media (max-width: 800px) { .wh { grid-template-columns: 1fr; } .wh-side { display: none; } }
.wh-page table.t td:first-child { white-space: nowrap; }
/* 왼쪽 위는 공식 컬러 로고라 어두운 테마에서도 색을 뒤집지 않음(2026-10-11) */
.wh-avatar { overflow: hidden; }
.wh-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wh-avatar.sm { width: 26px; height: 26px; font-size: 12px; }
.wh-page table.t td:first-child .row { flex-wrap: nowrap; }

/* ---------- 대화(TODO 3) ---------- */
.wh-item { display: flex; align-items: center; gap: 8px; }
.wh-item-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 모델 선택(입력창 우측 하단, Claude와 같은 자리) */
.mp { position: relative; }
.mp-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13.5px; color: var(--w-text); cursor: pointer; }
.mp-btn:hover, .mp-btn[aria-expanded="true"] { background: var(--w-hover); }
.mp-eff { color: var(--w-muted); }
.mp-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 40; width: 240px; padding: 6px; background: var(--card); border: 1px solid var(--w-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .14); }
.mp-h { padding: 6px 10px 4px; font-size: 12px; color: var(--w-muted); }
.mp-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 14px; color: var(--w-text); text-align: left; cursor: pointer; }
.mp-item:hover, .mp-item:focus-visible { background: var(--w-hover); outline: none; }
.mp-item .mp-sub { margin-left: auto; font-size: 12px; color: var(--w-muted); }
.mp-item .i { color: #c96442; }
.mp-back { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--w-muted); cursor: pointer; border-radius: 6px; }
.mp-back:hover { background: var(--w-hover); }
/* 대답 요소 */
.cc-ububble.queued { opacity: .6; }
.cc-fold.tool, .cc-fold.think { border: 0; background: none; }
.cc-fold.tool > .cc-fold-head, .cc-fold.think > .cc-fold-head { padding: 4px 6px; font-size: 13.5px; color: var(--w-muted); }
.cc-fold.tool > .cc-fold-body, .cc-fold.think > .cc-fold-body { border: 1px solid var(--w-line2); border-radius: 10px; margin: 2px 0 6px 24px; padding: 10px 12px; }
.wh-tool-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wh-tool-h b { font-weight: 600; color: var(--w-text); flex: none; }
.wh-tool-s { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: Consolas, monospace; font-size: 12.5px; }
.wh-tool-err { color: #b42318; font-size: 12px; }
.wh-think { color: var(--w-muted); font-size: 13.5px; line-height: 1.6; }
.wh-pre { margin: 0 0 8px; padding: 8px 10px; background: var(--w-soft); border-radius: 8px; font-family: Consolas, monospace; font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow-y: auto; }
.wh-pre.out { background: var(--w-hover); }
/* 눌러야 하는 카드: 입력창과 같은 틀(흰 바탕·둥근 20px·옅은 그림자), 버튼은 오른쪽(닫기·거부 → 허용) — Claude 앱 허용 요청처럼 */
.wh-card { border: 1px solid var(--w-line); background: var(--card); border-radius: 20px; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, .05); }
.wh-card .wh-pre { margin: 0; max-height: 160px; }
.wh-card-h { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.wh-card-h b { font-weight: 600; }
.wh-card-sub { margin-top: -4px; }
.wh-card-acts { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--w-muted); }
.btn.ghost:hover { background: var(--w-hover); color: var(--w-text); }
/* 기다리는 카드는 입력창 위에 고정, 흐름에는 자리 표시 / 처리한 카드는 흐름에 한 줄 */
.cc-dock { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 4px; }
.cc-dock:not(:empty) { margin-bottom: 8px; }
.cc-dock .wh-card { max-height: 45vh; overflow-y: auto; }
.wh-card-wait, .wh-card-done { display: flex; align-items: flex-start; gap: 6px; padding: 4px 0; }
.wh-card-done.denied { color: #b42318; }
/* 메일 팝업 */
.ml-g h3 { margin: 6px 0; font-size: 14px; }
.ml-i { border: 1px solid var(--w-line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; background: var(--card); }
.ml-i.new { border-left: 3px solid #c96442; }
.ml-h { display: flex; align-items: center; gap: 8px; }
.ml-h b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-due { font-size: 12px; color: #c96442; font-weight: 600; }
.ml-s { font-size: 13.5px; }
.ml-i p { margin: 0; }
.ml-d:empty { display: none; }
.ml-ta { width: 100%; padding: 8px 10px; border: 1px solid var(--w-line); border-radius: 10px; font: inherit; background: var(--w-page); color: var(--w-text); resize: vertical; }
.ml-pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 0; max-height: 60vh; overflow-y: auto; }
.ml-cc { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--w-soft); color: var(--w-muted); }
.ml-att { padding: 6px 8px; border-radius: 8px; background: var(--w-soft); white-space: pre-wrap; }
.ml-sheet { max-height: 62vh; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.ml-tbl { border-collapse: collapse; font-size: 12.5px; }
.ml-tbl th, .ml-tbl td { border: 1px solid var(--w-line); padding: 4px 6px; vertical-align: top; text-align: left; max-width: 320px; overflow-wrap: anywhere; }
.ml-tbl th { color: var(--w-muted); font-weight: 500; background: var(--w-soft); }
.ml-head { flex-wrap: wrap; position: sticky; top: 0; z-index: 1; background: var(--card); padding-bottom: 6px; }
.ml-tabs { margin-left: 0; flex-wrap: wrap; }
.ml-n { margin-left: 5px; font-size: 11px; color: var(--w-muted); }
.btn.sm.ib { padding: 4px 6px; min-width: 28px; justify-content: center; }
/* 버튼 설명 말풍선(core.js showTip) */
.wh-tip { position: fixed; z-index: 1000; max-width: 320px; padding: 4px 8px; border-radius: 6px; font-size: 12px; line-height: 1.4; background: var(--w-text); color: var(--w-page); pointer-events: none; }
/* 메일 팝업: 닫기 왼쪽 버튼·메일함 표시·메일함 탭(PRD 7차) */
.modal-tools { position: absolute; top: 14px; right: 50px; display: flex; align-items: center; gap: 6px; }
.ml-stamp { white-space: nowrap; }
.ml-title { display: inline-flex; color: var(--w-text); }
.ml-title svg { width: 24px; height: 24px; }
.modal.ml-modal { width: 980px; }
.ml-badge { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; font-size: 11px; font-weight: 800; line-height: 1; flex: none; }
.ml-badge { background: #888; color: #fff; }
.ml-badge.pv-hanbiro { background: #d6322c; }
.ml-badge.pv-naver { background: #03c75a; }
/* Gmail: 흰 바탕에 여러 색 M(사용자 2026-10-11 — Gmail 아이콘처럼, 로고 그림 대신 글자) */
.ml-badge.pv-gmail { position: relative; background: #fff; color: transparent; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.ml-badge.pv-gmail::after { content: "M"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; color: transparent;
  background: linear-gradient(90deg, #4285f4 0 28%, #ea4335 28% 50%, #fbbc04 50% 66%, #34a853 66%); -webkit-background-clip: text; background-clip: text; }
/* 한메일(다음): 검은 바탕에 무지개색 D(사용자 2026-10-11 — 다음 아이콘처럼, 로고 그림 대신 글자) */
.ml-badge.pv-hanmail { position: relative; background: #1b1b1b; color: transparent; }
.ml-badge.pv-hanmail::after { content: "D"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; color: transparent;
  background: linear-gradient(135deg, #3b82f6 20%, #22c55e 40%, #facc15 55%, #f97316 68%, #ec4899 82%); -webkit-background-clip: text; background-clip: text; }
.ml-boxtab { display: inline-flex; align-items: center; gap: 5px; }
.ml-sumtab { position: relative; }
.ml-sup { position: absolute; top: -7px; right: -6px; }
.ml-cnt { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e5484d; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.ml-boxbar { align-items: center; flex-wrap: wrap; }
.ml-folder { max-width: 220px; }
.ml-rows { display: flex; flex-direction: column; border: 1px solid var(--w-line); border-radius: 10px; overflow: hidden; }
.ml-row { display: grid; grid-template-columns: 20px minmax(90px, 180px) 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--w-line); cursor: pointer; font-size: 13.5px; }
.ml-row:last-child { border-bottom: 0; }
.ml-row:hover, .ml-row:focus-visible { background: var(--w-hover); }
.ml-row.unread .ml-row-who, .ml-row.unread .ml-row-s { font-weight: 700; }
.ml-row-who, .ml-row-s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-row-s svg { margin-left: 4px; vertical-align: -2px; color: var(--w-muted); }
.ml-file { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border: 1px solid var(--w-line); border-radius: 8px; font-size: 12.5px; }
@media (max-width: 640px) { .ml-row { grid-template-columns: 20px 1fr; } .ml-row-who { display: none; } .ml-row-d { grid-column: 2; } }
.stack-s { display: flex; flex-direction: column; gap: 6px; }
.ml-acc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--w-line); border-radius: 10px; }
.ml-acc .ml-badge { width: 24px; height: 24px; font-size: 13px; }
.ml-pw { width: 170px; }
.ml-cimg { width: 90px; height: 90px; object-fit: contain; display: block; }
.ml-img { max-width: 100%; max-height: 66vh; object-fit: contain; border-radius: 8px; align-self: center; }
/* 질문 카드 */
.qc-q { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 8px; border-bottom: 1px solid var(--w-line); }
.qc-q:last-of-type { border-bottom: 0; }
.qc-h { align-self: flex-start; padding: 1px 8px; border-radius: 10px; background: var(--w-soft); color: var(--w-muted); }
.qc-opt { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border: 1px solid var(--w-line); border-radius: 10px; cursor: pointer; }
.qc-opt:has(input:checked) { border-color: #c96442; background: rgba(201, 100, 66, .06); }
.qc-opt input { margin-top: 3px; }
.qc-opt span { display: flex; flex-direction: column; }
.qc-opt small { color: var(--w-muted); }
.qc-other { padding: 6px 10px; border: 1px solid var(--w-line); border-radius: 10px; font: inherit; background: var(--card); color: var(--w-text); }
/* 팝업 닫기(X) — 제목과 겹치지 않게 제목 오른쪽 여백 */
.modal-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--w-muted); cursor: pointer; }
.modal-x:hover { background: var(--w-hover); color: var(--w-text); }
.modal > h2 { padding-right: 36px; }
/* 상세페이지 결과 그림: 위쪽 일부만 보이고 누르면 패널에서 전체 */
.wh-result { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.wh-result-img { padding: 0; border: 1px solid var(--w-line); border-radius: 12px; overflow: hidden; background: var(--card); cursor: zoom-in; max-height: 420px; }
.wh-result-img img { display: block; width: 100%; }
/* 묶어 접은 작업 과정 */
.cc-fold.steps > .cc-fold-body { margin-left: 8px; padding-left: 10px; border-left: 2px solid var(--w-line); }
.wh-compact { text-align: center; font-size: 12.5px; color: var(--w-muted); }
.wh-acts { display: flex; align-items: center; gap: 2px; margin-top: -2px; }
.wh-act-i { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--w-muted); cursor: pointer; }
.wh-act-i:hover { background: var(--w-hover); color: var(--w-text); }
.wh-model { margin-left: 6px; font-size: 12px; color: var(--w-muted); }
.cc-bot .md { line-height: 1.7; }
.cc-bot .md pre { background: var(--w-soft); border-radius: 10px; padding: 12px; overflow-x: auto; }
/* 입력창 `/` 목록 */
.sl-menu { position: absolute; left: 10px; right: 10px; bottom: calc(100% + 8px); z-index: 40; max-height: 300px; overflow-y: auto; padding: 6px; background: var(--card); border: 1px solid var(--w-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .14); }
.sl-item { display: grid; gap: 2px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; color: var(--w-text); text-align: left; cursor: pointer; }
.sl-item b { font-size: 14px; font-weight: 600; }
.sl-item span { font-size: 12.5px; color: var(--w-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sl-item.on, .sl-item:hover { background: var(--w-hover); }

/* ---------- 첨부·파일 카드·우측 패널(TODO 3·4) ---------- */
.wh-split { flex: 1; min-height: 0; display: flex; }
.wh-split > .cc { flex: 1; min-width: 0; }
.cc-chips .cc-att.img { width: 64px; height: 64px; }
.cc-chips .cc-att.doc { width: 200px; }
button.cc-att { padding: 0; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.cc-att .cc-att-t small, .wh-file small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-file { display: flex; align-items: center; gap: 10px; width: min(100%, 420px); padding: 10px 12px; border: 1px solid var(--w-line); border-radius: 12px; background: var(--card); font: inherit; color: var(--w-text); text-align: left; cursor: pointer; }
.wh-file:hover { background: var(--w-hover); }
.wh-file .cc-att-t { flex: 1; }
.wh-file-go { font-size: 12.5px; color: var(--w-muted); }
.wh-file.ext-pdf .cc-att-ic { background: #d94b3d; }
.wh-file.ext-xlsx .cc-att-ic, .wh-file.ext-csv .cc-att-ic { background: #1f8a4c; }
.wh-file.ext-docx .cc-att-ic { background: #2b5fd9; }
.wh-file.ext-pptx .cc-att-ic { background: #d9772b; }
.wh-file.ext-html .cc-att-ic, .wh-file.ext-svg .cc-att-ic { background: #c96442; }
.cc-bot pre.has-open { position: relative; }
.pn-open { position: absolute; top: 6px; right: 6px; padding: 3px 9px; border: 1px solid var(--w-line); border-radius: 7px; background: var(--card); font: inherit; font-size: 12px; color: var(--w-text); cursor: pointer; opacity: .85; }
.pn-open:hover { opacity: 1; background: var(--w-hover); }
.pn { position: relative; flex: none; display: flex; flex-direction: column; min-width: 320px; max-width: calc(100vw - 560px); border-left: 1px solid var(--w-line2); background: var(--card); }
.pn-grip { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 5; }
.pn-grip:hover { background: rgba(201, 100, 66, .25); }
.pn-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--w-line2); min-height: 48px; }
.pn-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.pn-tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--w-hover); margin-left: 8px; }
.pn-tab { border: 0; background: none; padding: 4px 10px; border-radius: 6px; font: inherit; font-size: 12.5px; color: var(--w-muted); cursor: pointer; }
.pn-tab.on { background: var(--card); color: var(--w-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.pn-head .wh-act-i { text-decoration: none; }
.pn-body { flex: 1; min-height: 0; overflow: auto; }
.pn-pad { padding: 16px; }
.pn-frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.pn-imgwrap { padding: 12px; }
.pn-imgwrap img, .pn-screen { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.pn-code { position: relative; }
.pn-copy { position: sticky; float: right; top: 8px; margin: 8px; z-index: 2; }
.pn-code pre { margin: 0; padding: 10px 0; font-family: Consolas, monospace; font-size: 12.5px; line-height: 1.55; }
.pn-line { display: flex; white-space: pre-wrap; overflow-wrap: anywhere; }
.pn-no { flex: none; width: 48px; padding-right: 12px; text-align: right; color: var(--w-muted); user-select: none; }
.pn-list { display: flex; flex-direction: column; padding: 8px; }
.pn-file { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13.5px; color: var(--w-text); text-align: left; cursor: pointer; }
.pn-file:hover { background: var(--w-hover); }
.pn-file span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-file small { color: var(--w-muted); }
@media (max-width: 1000px) { .pn { position: absolute; right: 0; top: 0; bottom: 0; z-index: 30; max-width: 100%; box-shadow: -8px 0 24px rgba(0, 0, 0, .12); } .wh-split { position: relative; } }
/* 관리자 화면 */
.ad-tabs { margin: 12px 0 16px; }
.ad-body { display: flex; flex-direction: column; gap: 12px; }
.ad-q { width: 320px; max-width: 100%; }
.ad-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.ad-check { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--w-line2); border-radius: 8px; font-size: 13px; }
.ad-check span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-check small { color: var(--w-muted); }
.mp-menu.plus { bottom: 52px; width: 200px; }
/* 상품 칩·DB 반영 카드(D-010) */
.pd-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; height: 32px; padding: 0 10px; border: 1px solid var(--w-line); border-radius: 8px; background: var(--card); font: inherit; font-size: 13px; color: var(--w-text); cursor: pointer; }
.pd-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-chip:hover { background: var(--w-hover); }
.pc-t { border-collapse: collapse; font-size: 13.5px; }
.pc-t td { padding: 4px 8px 4px 0; vertical-align: top; }
.pc-t tr.bad td { color: #b42318; }
.pc-needs { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.pc-needs input, .pc-needs select { padding: 4px 8px; border: 1px solid var(--w-line); border-radius: 6px; font: inherit; background: var(--card); color: var(--w-text); }

/* ===== 메일 팝업 디자인 다듬기(2026-10-11 사용자: UI 고도화 — Claude 앱 느낌, 밝은·어두운 테마 공통) ===== */
.modal.ml-modal { width: min(1040px, calc(100vw - 40px)); height: min(820px, calc(100vh - 64px)); padding: 22px 26px 26px; border-radius: 20px; } /* 탭을 바꿔도 팝업 크기가 그대로 */
.ml-modal h2 { margin: 0 0 8px; }
.ml { gap: 12px; }
.ml-head { gap: 10px; padding: 4px 0 10px; margin: 0 -2px; border-bottom: 1px solid var(--w-line2); align-items: center; }
.ml-tabs { background: var(--w-soft); }
.ml .pn-tab { padding: 6px 12px; font-size: 13px; border-radius: 7px; display: inline-flex; align-items: center; gap: 4px; }
.ml .pn-tab .ml-n { margin-left: 2px; padding: 0 6px; border-radius: 999px; background: var(--w-hover); font-size: 11px; line-height: 17px; }
.ml .pn-tab.on .ml-n { background: var(--w-soft); color: var(--w-text); }
.ml-boxtab { gap: 6px !important; }
/* 메일 카드 */
.ml-i { position: relative; border: 1px solid var(--w-line2); border-radius: 14px; padding: 14px 16px 10px; gap: 6px; margin-bottom: 10px; background: var(--card); transition: border-color .15s, box-shadow .15s; }
.ml-i:hover { border-color: var(--w-line); box-shadow: 0 2px 10px rgba(0, 0, 0, .05); }
.ml-i.new { border-left: 1px solid var(--w-line2); }
.ml-i.ready { border-color: rgba(201, 100, 66, .45); box-shadow: 0 0 0 3px rgba(201, 100, 66, .08); }
.ml-h { gap: 7px; min-height: 22px; }
.ml-h b { flex: 0 1 auto; font-size: 14px; }
.ml-dot { width: 7px; height: 7px; border-radius: 50%; background: #c96442; flex: none; display: inline-block; }
.ml-time { color: var(--w-muted); font-size: 12px; white-space: nowrap; margin-left: 8px; }
.ml-s { font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; }
.ml-sum { font-size: 13.5px; line-height: 1.6; color: var(--w-text); opacity: .86; margin: 0; }
/* 구분 칩 */
.ml-tag { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--w-soft); color: var(--w-muted); }
.ml-tag.t-답장 { background: rgba(201, 100, 66, .13); color: #c96442; }
.ml-tag.t-할일 { background: rgba(37, 99, 235, .12); color: #3b6fe0; }
.ml-tag.t-확인 { background: rgba(124, 58, 237, .12); color: #8b5cf6; }
.ml-tag.t-cc { background: transparent; box-shadow: inset 0 0 0 1px var(--w-line); }
.ml-tag.t-ready { background: #c96442; color: #fff; }
.ml-tag.t-due { background: rgba(220, 38, 38, .1); color: #e0533d; }
/* 첨부 요약·첨부 칩 */
.ml-att { padding: 10px 12px; border-radius: 10px; background: var(--w-soft); font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.ml-att-h { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--w-muted); margin-bottom: 2px; }
.ml-files { display: flex; flex-wrap: wrap; gap: 6px; }
.ml-fchip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 10px 5px 5px; border: 1px solid var(--w-line); border-radius: 9px; background: var(--card); color: var(--w-text); font: inherit; font-size: 12.5px; cursor: pointer; }
.ml-fchip:hover { background: var(--w-hover); }
.ml-fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; }
.ml-ext { font-size: 9.5px; font-weight: 800; letter-spacing: .02em; padding: 3px 5px; border-radius: 5px; color: #fff; background: #8a8577; }
.ml-ext.x-xls { background: #1d7044; } .ml-ext.x-pdf { background: #d93025; } .ml-ext.x-hwp { background: #2b6cd4; } .ml-ext.x-doc { background: #2b579a; }
.ml-ext.x-ppt { background: #c43e1c; } .ml-ext.x-img { background: #7c3aed; } .ml-ext.x-zip { background: #57534e; }
/* 버튼 줄: 평소엔 옅게, 카드에 마우스·초점이 오면 진하게(터치 화면은 늘 보임) */
.ml-i > .wh-card-acts { gap: 2px; margin-top: 0; }
@media (hover: hover) { .ml-i > .wh-card-acts .ib { opacity: .5; transition: opacity .15s; } .ml-i:hover > .wh-card-acts .ib, .ml-i:focus-within > .wh-card-acts .ib { opacity: 1; } }
/* 초안 */
.ml-d { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 12px; border-radius: 12px; background: var(--w-soft); }
.ml-d-h { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--w-muted); }
.ml-d .ml-ta { background: var(--card); border-color: var(--w-line2); line-height: 1.6; }
.ml-d .wh-card-acts { align-items: center; }
/* 빈 화면 */
.ml-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 0; color: var(--w-muted); }
.ml-empty svg { width: 28px; height: 28px; opacity: .6; }
.ml-empty p { margin: 0; font-size: 13.5px; }
/* 메일함 탭: 목록·읽기 */
.ml-boxbar { padding: 2px 0; gap: 8px; }
.ml-folder { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--w-line); background: var(--card); color: var(--w-text); font: inherit; font-size: 13px; }
.ml-rows { border-color: var(--w-line2); border-radius: 12px; }
.ml-row { padding: 10px 14px; border-bottom-color: var(--w-line2); transition: background .12s; }
.ml-row-who { display: flex; align-items: center; gap: 6px; }
.ml-row.unread { background: linear-gradient(90deg, rgba(201, 100, 66, .05), transparent 40%); }
.ml-meta { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; background: var(--w-soft); font-size: 13px; }
.ml-meta .ml-time { float: right; }
.ml-pre { padding: 4px 2px; line-height: 1.7; font-size: 14px; }
.ml-compose .form-grid input, .ml-compose .form-grid select { border-radius: 8px; }
.ml-compose .ml-ta { min-height: 220px; line-height: 1.6; }
/* 메일함 표시 줄 맞춤(2026-10-11 사용자: 카드의 표시가 오른쪽으로 쏠림) — 새 메일 점은 카드 왼쪽 여백에 따로(표시 위치가 카드마다 같게), 글자는 영문 글꼴로 가운데 */
.ml-i > .ml-h > .ml-dot { position: absolute; left: 6px; top: 22px; }
.ml-badge { font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; text-align: center; letter-spacing: 0; }
/* Gmail 표시: 흰 바탕은 테두리가 안 보여 작아 보임(2026-10-11 사용자) → 구글 파랑 바탕에 흰 M */
.ml-badge.pv-gmail { background: #4285f4; color: #fff; box-shadow: none; }
.ml-badge.pv-gmail::after { content: none; }
/* 서명 미리보기(설정)·쓰기 창 — 실제 메일 모양: 흰 바탕, 본문 14px, 서명은 고른 크기·회색(mail.ts withSignature와 같게) */
.ml-sigpv { display: flex; flex-direction: column; gap: 4px; }
.ml-sigpv-mail { padding: 14px 16px; border-radius: 10px; border: 1px solid var(--w-line); background: #fff; color: #222; font-family: "Malgun Gothic", sans-serif; font-size: 14px; line-height: 1.6; }
.ml-sigpv-sig { margin-top: 14px; color: #555; line-height: 1.5; white-space: pre-wrap; font-family: "Malgun Gothic", sans-serif; }
.ml-sigpv-sig.sz-small { font-size: 12px; } .ml-sigpv-sig.sz-normal { font-size: 14px; } .ml-sigpv-sig.sz-large { font-size: 16px; }
.ml-sigrow { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--w-line); }
.ml-sigrow .ml-sigpv-sig { margin-top: 0; color: var(--w-muted); }
.ml-sigrow.off .ml-sigpv-sig { text-decoration: line-through; opacity: .5; }
.ib.spinning svg { animation: spin .9s linear infinite; } /* 메일 새로고침 중 */
@media (prefers-reduced-motion: reduce) { .ib.spinning svg { animation: none; } }
/* 팝업 스크롤바가 둥근 모서리 밖으로 삐져나오지 않게(2026-10-11 사용자) — 모든 팝업은 모서리에서 잘리게,
   메일 팝업은 팝업 자체는 고정하고 안쪽 내용만 스크롤 */
.modal { clip-path: inset(0 round 16px); }
.modal.ml-modal { clip-path: inset(0 round 20px); overflow: hidden; display: flex; flex-direction: column; }
.modal.ml-modal > .ml { flex: 1; min-height: 0; overflow-y: auto; margin-right: -14px; padding-right: 14px; }

/* 받는 사람 주소록 후보(2026-10-12) */
.ml-ac { position: relative; min-width: 0; }
.ml-ac > input { width: 100%; }
.ml-ac-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; max-height: 260px; overflow-y: auto; background: var(--card); border: 1px solid var(--w-line); border-radius: 10px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); }
.ml-ac-list li { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; min-width: 0; }
.ml-ac-list li b { font-weight: 600; white-space: nowrap; }
.ml-ac-list li span { color: var(--w-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-ac-list li.on, .ml-ac-list li:hover { background: var(--w-bubble); }
.ml-ac-list li span { flex: 1; }
.ml-ac-x { margin-left: auto; flex: none; display: inline-flex; padding: 3px; border: 0; border-radius: 6px; background: none; color: var(--w-muted); cursor: pointer; opacity: 0; }
.ml-ac-list li.on .ml-ac-x, .ml-ac-list li:hover .ml-ac-x { opacity: 1; }
.ml-ac-x:hover { background: var(--w-sel); color: var(--w-text); }

/* 로그인 창 원격 보기 — 관리자 화면 오른쪽 패널(2026-10-16): 화면만 */
.rv-dock { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 100vw); z-index: 60; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; overflow: auto; background: var(--card); border-left: 1px solid var(--w-line2); box-shadow: -8px 0 24px rgba(0, 0, 0, .14); }
.rv-head { display: flex; align-items: center; gap: 10px; }
.rv-head .tiny { flex: 1; }
.rv-img { width: 100%; border: 1px solid var(--w-line); border-radius: 6px; background: #f4f5f8; cursor: pointer; touch-action: manipulation; user-select: none; }
.rv-kbd { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; }
/* 로그인 풀린 연동 빨간 띠(2026-10-21 Y♥ANA) — 본문 위에 붙고 본문은 남은 높이를 씀 */
.wh-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100dvh; }
.wh-col > .wh-main { flex: 1; min-height: 0; }
.wh-linkbar { display: flex; align-items: center; gap: 10px; padding: 10px 20px; background: #dc2626; color: #fff; font-size: 14px; flex: none; }
.wh-linkbar[hidden] { display: none; }
.wh-linkbar .btn { margin-left: auto; background: #fff; color: #b91c1c; border-color: #fff; font-weight: 600; }
/* 채팅 | 업무 전환(2026-10-21 Y♥ANA, D-112) — Claude 앱처럼 로고 아래 두 칸 */
.wh-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; margin: 0 2px 8px; border-radius: 10px; background: var(--w-bubble); }
.wh-mode-b { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 0; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13.5px; color: var(--w-muted); cursor: pointer; }
.wh-mode-b:hover { color: var(--w-text); }
.wh-mode-b.on { background: var(--w-card, var(--card)); color: var(--w-text); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.wh-nav { display: flex; flex-direction: column; gap: 2px; min-height: 0; flex: 1; } /* 둘 다 남는 높이를 채워 아래 프로필 줄이 맨 밑에 */
.wh-nav[hidden] { display: none; }
.wh-nav .wh-act.on { background: var(--w-sel); font-weight: 600; }