/* ============================================================
   ES Emoji — 이모지 코드포인트에만 적용되는 «단색» Noto Emoji
   시안 «스윔레인 칸반 보드 설계» src/tokens.css 규격을 자체 호스팅으로 구현.
   · unicode-range 로 이모지 영역만 잡으므로 한글·숫자·영문 글꼴은 그대로다
   · 숫자(0-9)·#·*·©·® 와 UI 화살표(↔ ↕ ↗ ↩)는 범위에서 빼 표·버튼 모양이 바뀌지 않게 했다
   · v123 — U+FE0F(이모지 표현 선택자)·U+200D(ZWJ)를 «모든 조각»에 넣는다.
     둘 중 하나라도 다른 조각에 있으면 🏷 ⚙ ✏ 처럼 선택자가 붙은 이모지가
     한 글꼴에서 처리되지 못해 컬러 이모지로 되돌아간다 (실제 그 증상이 있었음)
   · 외부 CDN 없이 /fonts 에서 직접 받으므로 사내망·오프라인에서도 동일하게 보인다
   ============================================================ */
@font-face{
  font-family:'ES Emoji'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/noto-emoji-0-400-normal.woff2) format('woff2');
  unicode-range:U+1f1e6-1f1ff,U+fe0f,U+200d;
}
@font-face{
  font-family:'ES Emoji'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/noto-emoji-1-400-normal.woff2) format('woff2');
  unicode-range:U+200d,U+2620,U+26a7,U+fe0f,U+1f308,U+1f38c,U+1f3c1,U+1f3f3-1f3f4,U+1f6a9,U+e0062-e0063,U+e0065,U+e0067,U+e006c,U+e006e,U+e0073-e0074,U+e0077,U+e007f;
}
@font-face{
  font-family:'ES Emoji'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/noto-emoji-2-400-normal.woff2) format('woff2');
  unicode-range:U+200d,U+203c,U+2049,U+2122,U+2139,U+23cf,U+23e9-23ef,U+23f8-23fa,U+24c2,U+25aa-25ab,U+25b6,U+25c0,U+25fb-25fe,U+2611,U+2622-2623,U+2626,U+262a,U+262e-262f,U+2638,U+2640,U+2642,U+2648-2653,U+2660,U+2663,U+2665-2666,U+2668,U+267b,U+267e-267f,U+2695,U+269b-269c,U+26a0,U+26a7,U+26aa-26ab,U+26ce,U+26d4,U+2705,U+2714,U+2716,U+271d,U+2721,U+2733-2734,U+2747,U+274c,U+274e,U+2753-2755,U+2757,U+2764,U+2795-2797,U+27a1,U+27b0,U+27bf,U+2934-2935,U+2b05-2b07,U+2b1b-2b1c,U+2b55,U+3030,U+303d,U+3297,U+3299,U+fe0f,U+1f170-1f171,U+1f17e-1f17f,U+1f18e,U+1f191-1f19a,U+1f201-1f202,U+1f21a,U+1f22f,U+1f232-1f23a,U+1f250-1f251,U+1f310,U+1f3a6,U+1f3b5-1f3b6,U+1f3bc,U+1f3e7,U+1f441,U+1f499-1f49c,U+1f49f-1f4a0,U+1f4ac-1f4ad,U+1f4b1-1f4b2,U+1f4b9,U+1f4db,U+1f4f2-1f4f6,U+1f500-1f507,U+1f515,U+1f518-1f524,U+1f52f-1f53d,U+1f549,U+1f54e,U+1f5a4,U+1f5e8,U+1f5ef,U+1f6ab,U+1f6ad-1f6b1,U+1f6b3,U+1f6b7-1f6bc,U+1f6be,U+1f6c2-1f6c5,U+1f6d0-1f6d1,U+1f6d7,U+1f6dc,U+1f7e0-1f7eb,U+1f7f0,U+1f90d-1f90e,U+1f9d1-1f9d2,U+1f9e1,U+1fa75-1fa77,U+1faaf;
}
@font-face{
  font-family:'ES Emoji'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/noto-emoji-3-400-normal.woff2) format('woff2');
  unicode-range:U+200d,U+231a-231b,U+2328,U+23f0-23f3,U+2602,U+260e,U+2692,U+2694,U+2696-2697,U+2699,U+26b0-26b1,U+26cf,U+26d1,U+26d3,U+2702,U+2709,U+270f,U+2712,U+fe0f,U+1f302,U+1f321,U+1f392-1f393,U+1f3a9,U+1f3bd,U+1f3ee,U+1f3f7,U+1f3fa,U+1f451-1f462,U+1f484,U+1f489-1f48a,U+1f48c-1f48e,U+1f4a1,U+1f4a3,U+1f4a5,U+1f4b0,U+1f4b3-1f4b8,U+1f4bb-1f4da,U+1f4dc-1f4f1,U+1f4ff,U+1f508-1f514,U+1f516-1f517,U+1f526-1f529,U+1f52c-1f52e,U+1f550-1f567,U+1f56f-1f570,U+1f576,U+1f587,U+1f58a-1f58d,U+1f5a5,U+1f5a8,U+1f5b1-1f5b2,U+1f5c2-1f5c4,U+1f5d1-1f5d3,U+1f5dc-1f5de,U+1f5e1,U+1f5f3,U+1f6aa,U+1f6ac,U+1f6bd,U+1f6bf,U+1f6c1,U+1f6cb,U+1f6cd-1f6cf,U+1f6d2,U+1f6e0-1f6e1,U+1f6f0,U+1f97b-1f97f,U+1f9af,U+1f9ba,U+1f9e2-1f9e6,U+1f9ea-1f9ec,U+1f9ee-1f9f4,U+1f9f7-1f9ff,U+1fa71-1fa74,U+1fa79-1fa7b,U+1fa86,U+1fa8e-1fa8f,U+1fa91-1fa93,U+1fa96,U+1fa99-1faa0,U+1faa2-1faa7,U+1faaa-1faae;
}
@font-face{
  font-family:'ES Emoji'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/noto-emoji-4-400-normal.woff2) format('woff2');
  unicode-range:U+265f,U+26bd-26be,U+26f3,U+26f8,U+fe0f,U+1f004,U+1f0cf,U+1f380-1f384,U+1f386-1f38b,U+1f38d-1f391,U+1f396-1f397,U+1f399-1f39b,U+1f39e-1f39f,U+1f3a3-1f3a5,U+1f3a7-1f3a9,U+1f3ab-1f3b4,U+1f3b7-1f3bb,U+1f3bd-1f3c0,U+1f3c5-1f3c6,U+1f3c8-1f3c9,U+1f3cf-1f3d3,U+1f3f8-1f3f9,U+1f47e,U+1f4e2,U+1f4f7-1f4fd,U+1f52b,U+1f579,U+1f58c-1f58d,U+1f5bc,U+1f6f7,U+1f6f9,U+1f6fc,U+1f93f,U+1f941,U+1f945,U+1f947-1f94f,U+1f9e7-1f9e9,U+1f9f5-1f9f6,U+1fa70-1fa71,U+1fa80-1fa81,U+1fa83-1fa85,U+1fa87-1fa8a,U+1fa94-1fa95,U+1fa97-1fa98,U+1faa1,U+1faa9,U+1fadf,U+200d;
}
@font-face{
  font-family:'ES Emoji'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/noto-emoji-5-400-normal.woff2) format('woff2');
  unicode-range:U+2693,U+26e9-26ea,U+26f1-26f2,U+26f4-26f5,U+26fa,U+26fd,U+2708,U+fe0f,U+1f301,U+1f303,U+1f306-1f307,U+1f309,U+1f310,U+1f3a0-1f3a2,U+1f3aa,U+1f3cd-1f3ce,U+1f3d5,U+1f3d7-1f3db,U+1f3df-1f3e6,U+1f3e8-1f3ed,U+1f3ef-1f3f0,U+1f488,U+1f492,U+1f4ba,U+1f54b-1f54d,U+1f5fa-1f5ff,U+1f680-1f6a2,U+1f6a4-1f6a8,U+1f6b2,U+1f6d1,U+1f6d5-1f6d6,U+1f6dd-1f6df,U+1f6e2-1f6e5,U+1f6e9,U+1f6eb-1f6ec,U+1f6f3-1f6f6,U+1f6f8,U+1f6fa-1f6fb,U+1f9bc-1f9bd,U+1f9ed,U+1f9f3,U+1fa7c,U+200d;
}
@font-face{
  font-family:'ES Emoji'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/noto-emoji-6-400-normal.woff2) format('woff2');
  unicode-range:U+200d,U+2615,U+fe0f,U+1f32d-1f330,U+1f336,U+1f33d,U+1f344-1f37f,U+1f382,U+1f52a,U+1f7e9,U+1f7eb,U+1f942-1f944,U+1f950-1f96f,U+1f99e,U+1f9aa,U+1f9c0-1f9cb,U+1fad0-1fadc;
}
@font-face{
  font-family:'ES Emoji'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/noto-emoji-7-400-normal.woff2) format('woff2');
  unicode-range:U+200d,U+2600-2601,U+2603-2604,U+2614,U+2618,U+26a1,U+26c4-26c5,U+26c8,U+26f0,U+2728,U+2744,U+2b1b,U+2b50,U+fe0f,U+1f300,U+1f304-1f305,U+1f308,U+1f30a-1f30f,U+1f311-1f321,U+1f324-1f32c,U+1f331-1f335,U+1f337-1f33c,U+1f33e-1f344,U+1f3d4,U+1f3d6,U+1f3dc-1f3de,U+1f3f5,U+1f400-1f43f,U+1f490,U+1f4a7,U+1f4ae,U+1f525,U+1f54a,U+1f573,U+1f577-1f578,U+1f648-1f64a,U+1f6d8,U+1f940,U+1f980-1f9ae,U+1f9ba,U+1fa90,U+1faa8,U+1fab0-1fabf,U+1facd-1facf,U+1fae7;
}
@font-face{
  font-family:'ES Emoji'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/noto-emoji-8-400-normal.woff2) format('woff2');
  unicode-range:U+200d,U+2640,U+2642,U+2695-2696,U+26f7,U+26f9,U+2708,U+2764,U+27a1,U+fe0f,U+1f33e,U+1f373,U+1f37c,U+1f384-1f385,U+1f393,U+1f3a4,U+1f3a8,U+1f3c2-1f3c4,U+1f3c7,U+1f3ca-1f3cc,U+1f3eb,U+1f3ed,U+1f3fb-1f3ff,U+1f430,U+1f466-1f469,U+1f46b-1f478,U+1f47c,U+1f481-1f483,U+1f486-1f487,U+1f48b,U+1f48f,U+1f491,U+1f4bb-1f4bc,U+1f527,U+1f52c,U+1f574-1f575,U+1f57a,U+1f645-1f647,U+1f64b,U+1f64d-1f64e,U+1f680,U+1f692,U+1f6a3,U+1f6b4-1f6b6,U+1f6c0,U+1f6cc,U+1f91d,U+1f926,U+1f930-1f931,U+1f934-1f93a,U+1f93c-1f93e,U+1f977,U+1f9af-1f9b3,U+1f9b8-1f9b9,U+1f9bc-1f9bd,U+1f9cc-1f9cf,U+1f9d1-1f9df,U+1fa70,U+1fa82,U+1fac3-1fac5,U+1fac8,U+1faef;
}
@font-face{
  font-family:'ES Emoji'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/noto-emoji-9-400-normal.woff2) format('woff2');
  unicode-range:U+200d,U+2603,U+261d,U+2620,U+2639-263a,U+2665,U+26a1,U+26c4,U+270a-270d,U+2728,U+2763-2764,U+2b50,U+fe0f,U+1f31a-1f31f,U+1f32b,U+1f389-1f38a,U+1f3fb-1f3ff,U+1f440-1f450,U+1f463-1f465,U+1f479-1f47b,U+1f47d-1f480,U+1f485,U+1f48b-1f48c,U+1f493-1f49f,U+1f4a2,U+1f4a4-1f4a6,U+1f4a8-1f4ab,U+1f4af,U+1f525,U+1f573,U+1f590,U+1f595-1f596,U+1f5a4,U+1f5e3,U+1f600-1f644,U+1f648-1f64a,U+1f64c,U+1f64f,U+1f90c-1f925,U+1f927-1f92f,U+1f932-1f933,U+1f970-1f976,U+1f978-1f97a,U+1f9a0,U+1f9b4-1f9b7,U+1f9bb,U+1f9be-1f9bf,U+1f9d0,U+1f9e0-1f9e1,U+1fa75-1fa79,U+1fac0-1fac2,U+1fac6,U+1fae0-1fae6,U+1fae8-1faea,U+1faef-1faf8;
}

:root {
  --bg: #eef0e6; --panel: #fff; --line: #dcd8c0; --text: #1c2430; --sub: #6b7160;
  --accent: #5a6636; --accent-soft: #ecead7; --danger: #a8442a; --ok: #4d7c2f; --warn: #b8860b;
  --pink: #f3ead5; --radius:0;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'ES Emoji', 'Pretendard', 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;
  background: var(--bg); color: var(--text); font-size: 13.5px;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 13.5px; }

/* ---------- 레이아웃 ---------- */
#app { display: flex; min-height: 100vh; }
#sidebar {
  width: 210px; background: #3a4028; color: #b9bda6; flex-shrink: 0;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
#sidebar .logo { padding: 18px 16px 10px; font-size: 17px; font-weight: 800; color: #f2eeda; letter-spacing:-.3px; }
#sidebar .logo small { display: block; font-size: 11.5px; font-weight: 400; color: #9aa08a; margin-top: 2px; }
#sidebar nav { flex: 1; overflow-y: auto; padding: 6px 0; }
#sidebar a {
  display: flex; align-items: center; gap: 9px; padding: 10px 16px; color: #b9bda6;
  text-decoration: none; font-size: 13.5px; border-left: 3px solid transparent;
}
#sidebar a:hover { background: #454c2f; }
#sidebar a.on { background: #4d5434; color: #f2eeda; border-left-color: #c9b458; }
#sidebar a .badge { margin-left: auto; }
#sidebar .foot { padding: 12px 16px; font-size: 12.5px; color: #9aa08a; border-top: 1px solid #2c3120; }
#sidebar .foot b { color: #f2eeda; }
#sidebar .foot button { background: none; border: 1px solid #55603c; color: #b9bda6; border-radius: 0; padding: 3px 10px; font-size: 12.5px; margin-top: 6px; }

#main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#topbar {
  display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: var(--panel);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30;
}
#topbar h1 { font-size: 15px; margin: 0; font-weight: 700; flex-shrink: 0; }
#gsearch { position: relative; flex: 1; max-width: 460px; margin-left: auto; }
#gsearch input {
  width: 100%; padding: 8px 12px 8px 34px; border: 1.5px solid var(--line); border-radius: 8px; outline: none;
  background: #f6f5ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='%236b7686' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E") no-repeat 11px center;
}
#gsearch input:focus { border-color: var(--accent); background-color: #fff; }
#gsResults {
  position: absolute; top: 40px; left: 0; right: 0; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(16,24,40,.12); max-height: 420px; overflow-y: auto; z-index: 50;
}
#gsResults .row { padding: 9px 13px; border-bottom: 1px solid #edebdb; cursor: pointer; display: flex; gap: 8px; align-items: center; }
#gsResults .row:hover { background: var(--accent-soft); }
#content { padding: 18px; flex: 1; }

/* ---------- 공통 요소 ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.btn {
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: #fff;
  padding: 7px 13px; border-radius: 8px; font-size: 12.5px; color: var(--text);
}
.btn:hover { border-color: #c9c5a1; background: #f6f5ec; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.primary:hover { background: #4d5434; }
.btn.danger { color: var(--danger); border-color: #e3c2b6; }
.btn.danger:hover { background: #f7e7e1; }
.btn.sm { padding: 3px 8px; font-size: 12.5px; border-radius: 6px; }
.btn:disabled { opacity: .5; cursor: default; }
.badge { background: var(--danger); color: #fff; font-size: 11.5px; border-radius: 99px; padding: 1px 7px; font-weight: 700; }
.chip { display: inline-block; background: #eceade; border-radius: 6px; padding: 2px 7px; font-size: 12.5px; margin: 1px; color: #3d4432; }
.chip.acc { background: #ecead7; color: #4d5434; font-weight: 600; }
.muted { color: var(--sub); }
.pos { color: var(--ok); font-weight: 700; }
.neg { color: var(--danger); font-weight: 700; }
.warn { color: var(--warn); font-weight: 700; }
input.field, select.field, textarea.field {
  width: 100%; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 8px; outline: none; background: #fff;
}
input.field:focus, select.field:focus, textarea.field:focus { border-color: var(--accent); }
label.lb { display: block; font-size: 12.5px; color: var(--sub); margin: 10px 0 4px; font-weight: 600; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar input.field, .toolbar select.field { width: auto; }

/* ---------- 테이블 ---------- */
table.tb { width: 100%; border-collapse: collapse; background: #fff; }
.tb th {
  background: #f6f5ec; border: 1px solid var(--line); padding: 8px 9px; font-size: 12.5px; color: #4f5644;
  position: sticky; top: 53px; z-index: 5;
}
.tb td { border: 1px solid var(--line); padding: 7px 9px; vertical-align: middle; }
.tb tr:hover td { background: #fafcff; }
.tb .code { font-weight: 700; color: var(--accent); cursor: pointer; white-space: nowrap; }
.tb .code:hover { text-decoration: underline; }
.tb td.codecell { background: var(--pink); }
.tb .num { text-align: right; font-variant-numeric: tabular-nums; }
.tb .ctr { text-align: center; }
.tb img.thumb { max-width: 110px; max-height: 150px; border-radius: 6px; cursor: zoom-in; display: block; margin: 2px auto; }
.rowbtns { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.rowbtns .btn.sm.buy { color: #4d5434; border-color: #c9c5a1; }
.rowbtns .btn.sm.sell { color: #8f6708; border-color: #e6d3a3; }

/* 카테고리 목차 */
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
/* 대분류 섹션 (헤더+카드 묶음을 하나로) — 좌우 나란히 배치 지원 */
#catGrid { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: flex-start; }
.majorsec { border-radius: 14px; padding: 4px 8px 10px; margin: 6px 0; transition: box-shadow .15s;
  flex: 1 1 100%; min-width: 0; }
.majorsec.w50 { flex: 1 1 calc(50% - 12px); max-width: calc(50% - 6px); }
.majorsec.w33 { flex: 1 1 calc(33.33% - 12px); max-width: calc(33.33% - 8px); }
.majorsec.w50 .cats, .majorsec.w33 .cats { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
@media (max-width: 900px) { .majorsec.w50, .majorsec.w33 { flex-basis: 100%; max-width: none; } }
.majorsec.dragging { opacity: .45; }
.majorsec.collapsed .cats { display: none; }
.majorsec.collapsed { padding-bottom: 4px; }
.majorhead { display: flex; align-items: center; gap: 7px; font-size: 15px; color: #3d4432;
  padding: 8px 10px; margin: 2px 0 8px; border-radius: 10px; user-select: none; }
.majorsec.collapsed .majorhead { margin-bottom: 2px; }
.majorhead b { font-weight: 800; letter-spacing: -.2px; }
.majorhead .mchev { cursor: pointer; width: 20px; height: 20px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 6px; font-size: 12.5px; flex: none; }
.majorhead .mchev:hover { background: rgba(0,0,0,.08); }
.majorhead .mgrip { color: #9aa5b5; font-size: 12.5px; cursor: grab; }
.majorhead .mcount { font-weight: 500; font-size: 12.5px; color: var(--sub); }
.majorhead .medit { margin-left: 2px; cursor: pointer; opacity: 0; font-size: 12.5px; transition: opacity .12s; }
.majorhead:hover .medit { opacity: .8; }
/* 카테고리 카드 */
.catcard { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px;
  cursor: pointer; display: flex; gap: 10px; align-items: flex-start; position: relative;
  transition: box-shadow .13s, transform .13s, border-color .13s; overflow: hidden; }
.catcard:hover { border-color: var(--accent); box-shadow: 0 5px 16px rgba(90,102,54,.13); transform: translateY(-1px); }
.catcard.dragging { opacity: .4; }
.catcard .cph { width: 52px; height: 60px; object-fit: cover; object-position: top; border-radius: 9px; flex: none;
  border: 1px solid rgba(0,0,0,.07); background: #eef0e6; align-self: center; }
.catcard .cbody { min-width: 0; flex: 1; }
.catcard .cc { font-size: 15px; font-weight: 800; color: var(--accent); display: flex; align-items: baseline; }
.catcard .cc .cedit { margin-left: auto; opacity: 0; transition: opacity .12s; font-size: 12.5px; }
.catcard:hover .cc .cedit { opacity: .85; }
.catcard .cn { font-size: 13.5px; margin-top: 1px; min-height: 17px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catcard .csub { font-size: 11.5px; color: var(--sub); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catcard .ci { font-size: 11.5px; color: var(--sub); margin-top: 4px; }
/* 창고 로드맵 */
.rmtabs { display: flex; gap: 7px; flex-wrap: wrap; margin: 4px 0 12px; }
.rmtab { padding: 7px 13px; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer;
  font-size: 13.5px; font-weight: 700; background: #fff; user-select: none; display: inline-flex; gap: 6px; align-items: center; }
.rmtab.on { border-color: var(--accent); background: #e7efff; }
.rmtab small { font-weight: 500; color: var(--sub); }
.rmzone { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.rmzhead { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.rmgridwrap { overflow-x: auto; padding: 10px; }
.rmgrid { border-collapse: separate; border-spacing: 3px; }
.rmgrid td { min-width: 74px; height: 34px; border-radius: 6px; font-size: 10.5px; vertical-align: middle;
  text-align: center; padding: 2px 4px; line-height: 1.15; }
.rmcell { border: 1px solid #dde3ec; cursor: pointer; transition: transform .08s, box-shadow .08s; }
.rmcell:hover { transform: scale(1.06); box-shadow: 0 2px 8px rgba(0,0,0,.18); position: relative; z-index: 2; }
.rmcell .rml { color: #4b5563; letter-spacing: -.2px; white-space: nowrap; }
.rmcell .rmq { font-size: 11.5px; font-weight: 800; color: #111; }
td.rm-gap { background: transparent; min-width: 20px; }
td.rm-label { background: #e8e5d1; color: #6b7280; font-weight: 700; font-size: 11.5px; border: 1px dashed #cfd6e0; }
.rm-empty { background: #fafbfc; }
.rm-empty .rml { color: #b3bcc9; }
.rm-q1 { background: #e6e3cd; }
.rm-q2 { background: #93c5fd; }
.rm-q3 { background: #3b82f6; }
.rm-q3 .rml, .rm-q3 .rmq { color: #fff; }
.rm-neg { background: #fecaca; }
.rm-neg .rmq { color: #8c3721; }
.rmcell.rm-hl { outline: 3px solid #f59e0b; outline-offset: 1px; animation: rmpulse 1.1s ease-in-out infinite; z-index: 1; }
.rmcell.rm-fx { outline: 3px dashed #10b981; outline-offset: 1px; }
@keyframes rmpulse { 50% { outline-color: #fbbf24; } }
span.chip.rm-empty, span.chip.rm-q1, span.chip.rm-q2, span.chip.rm-q3, span.chip.rm-neg { border: 1px solid #d5dbe4; }
/* 색상 스와치 선택 */
.cpick { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; padding: 6px; border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 4px; }
.cpick .cpsw { width: 26px; height: 26px; border-radius: 7px; border: 2px solid rgba(0,0,0,.1); cursor: pointer; padding: 0; }
.cpick .cpsw.on { border: 2.5px solid var(--accent); box-shadow: 0 0 0 2px #fff inset; transform: scale(1.12); }
.cpick .cpnone { font-size: 11.5px; padding: 4px 9px; border-radius: 7px; border: 1.5px dashed #c3cad6;
  background: #fff; cursor: pointer; color: var(--sub); }
.cpick .cpnone.on { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.cpick .cpcustom { cursor: pointer; font-size: 15px; position: relative; padding: 2px 4px; }
/* 홈 워크스페이스 */
.hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.hcard { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; }
.hcard .hh { display: flex; gap: 6px; align-items: center; font-weight: 800; font-size: 13.5px; margin-bottom: 9px; }
.htiles { display: flex; gap: 7px; flex-wrap: wrap; }
.htile { display: inline-flex; gap: 6px; align-items: center; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--text); text-decoration: none; background: #f6f5ec; }
.htile:hover { border-color: var(--accent); background: #eef4ff; }
.hstats { display: flex; gap: 8px; flex-wrap: wrap; }
.hstat { flex: 1; min-width: 70px; background: #f6f5ec; border-radius: 10px; padding: 8px 6px; text-align: center; }
.hstat b { display: block; font-size: 17px; }
.hstat span { font-size: 11.5px; color: var(--sub); }
.hstat.warn { background: #fff7e0; } .hstat.warn b { color: #8f6708; }
.hstat.neg { background: #fee2e2; } .hstat.neg b { color: #8c3721; }
.hfile { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 3px 0; }
.hfile a { color: var(--accent); text-decoration: none; }
.hfile .muted { margin-left: auto; font-size: 11.5px; }
/* 채팅 디테일 */
.cmsg .bub { text-align: left; word-break: break-word; }
.cmsg .cmain {
  position: relative; min-width: 0; flex: 0 1 auto;
  max-width: min(78%, calc(100% - 58px));      /* 시각(.meta) 자리를 뺀 폭 */
  display: flex; flex-direction: column; align-items: flex-start;
}
.cmsg.mine .cmain { align-items: flex-end; }
.cmsg .mact { display: none; position: absolute; top: -10px; right: 0; gap: 4px; background: #fff;
  border: 1px solid var(--line); border-radius: 8px; padding: 2px 6px; font-size: 12.5px; cursor: pointer; z-index: 2; }
.cmsg:hover .mact { display: flex; }
.cmsg.mine .mact { right: auto; left: 0; }
.cmsg .replyq { font-size: 11.5px; color: var(--sub); border-left: 3px solid var(--accent);
  padding: 2px 6px; margin-bottom: 4px; background: rgba(0,0,0,.04); border-radius: 4px; }
.cmsg .reacts { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.cmsg .react { font-size: 11.5px; background: #eef2f8; border: 1px solid var(--line);
  border-radius: 99px; padding: 1px 7px; cursor: pointer; }
.cmsg.mine .reacts { justify-content: flex-end; }
.chatreply { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #f1f5fb;
  border-top: 1px solid var(--line); }
/* 채팅 팝업 모드 (v129 — 새 창에서도 본 화면과 같은 배열로) */
body.popup-mode #sidebar, body.popup-mode #topbar, body.popup-mode #mnav,
body.popup-mode #v2hdr, body.popup-mode #v2fab { display: none !important; }
body.popup-mode #main { margin: 0 !important; height: 100vh; display: flex; flex-direction: column; }
body.popup-mode #main::after { display: none !important; }   /* 새 창에서는 하단 저작권 줄을 숨김 */
body.popup-mode #content {
  padding: 8px !important; margin: 0 !important; max-width: none !important;
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
body.popup-mode .chatwrap { flex: 1; min-height: 0; height: auto; margin: 0; }
/* 방 목록은 가로 한 줄로 짧게 — 대화 영역을 최대한 넓게 */
body.popup-mode .chatrooms {
  width: 100% !important; max-width: none; max-height: 62px; min-height: 62px;
  display: flex; overflow-x: auto; overflow-y: hidden;
}
body.popup-mode .chatrooms .rm { min-width: 128px; padding: 8px 11px; border-bottom: none; border-right: 1px solid #edebdb; }
body.popup-mode .chatrooms .rm .nm { font-size: 12.5px; }
body.popup-mode .chatmsgs { padding: 10px; }
body.popup-mode .toolbar { flex: none; margin: 8px 0 2px !important; gap: 5px; }
body.popup-mode .toolbar .btn { font-size: 11.5px; padding: 5px 9px; }
/* 좁은 창에서는 말풍선을 조금 더 넓게 쓴다 */
body.popup-mode .cmsg .cmain { max-width: min(86%, calc(100% - 52px)); }
/* 검색 점핑 하이라이트 */
@keyframes rowflash { 0%, 60% { background: #fde68a; } 100% { background: transparent; } }
tr.rowflash > td { animation: rowflash 2.6s ease-out; }

/* ---------- 모달 ---------- */
#modalWrap {
  position: fixed; inset: 0; background: rgba(13,18,28,.45); display: none;
  align-items: flex-start; justify-content: center; z-index: 100; overflow-y: auto; padding: 30px 12px;
}
#modalWrap.show { display: flex; }
#modal {
  background: #fff; border-radius: 14px; width: 100%; max-width: 640px; padding: 20px 22px;
  box-shadow: 0 24px 60px rgba(16,24,40,.25); animation: pop .13s ease-out;
}
#modal.wide { max-width: 980px; }
@keyframes pop { from { transform: translateY(8px); opacity: .6; } }
#modal h2 { margin: 0 0 4px; font-size: 17px; display: flex; align-items: center; gap: 8px; }
#modal .x { margin-left: auto; border: none; background: none; font-size: 20px; color: var(--sub); }
.mfoot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }

#modal .tb th { top: 0; }

/* v174 — 자기 스크롤 박스(.tbwrap 에 overflow 를 준 표) 안에서는
   고정 헤더를 페이지 헤더 높이(53px)만큼 내리면 안 된다.
   그러면 헤더가 박스 안 첫 행들 위에 겹쳐 보인다 (가상 로케이션 탭 등). */
.tbwrap[style*="overflow"] table.tb th,
.tbwrap.tbwrap--sc table.tb th { top: 0; }

/* 이미지 라이트박스 */
#lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: none; align-items: center; justify-content: center; z-index: 200; cursor: zoom-out; }
#lightbox.show { display: flex; }
#lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 8px; }

/* 토스트 */
#toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: #101828; color: #fff;
  padding: 10px 18px; border-radius: 10px; font-size: 13.5px; z-index: 300; display: none; box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
#toast.err { background: var(--danger); }
#toast.show { display: block; animation: pop .15s; }

/* 로그인 */
#login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #101828;
}
#login .box { background: #fff; border-radius: 16px; padding: 34px 32px; width: 340px; }
.litabs { display: flex; gap: 6px; margin-bottom: 14px; background: #eceade; border-radius: 10px; padding: 4px; }
.litabs button {
  flex: 1; border: none; background: none; padding: 8px 4px; border-radius: 8px; font-size: 13.5px;
  color: var(--sub); cursor: pointer; font-weight: 600;
}
.litabs button.on { background: #fff; color: var(--accent); box-shadow: 0 1px 4px rgba(16,24,40,.12); }
#login h1 { margin: 0 0 4px; font-size: 20px; }
#login .sub { color: var(--sub); font-size: 12.5px; margin-bottom: 18px; }

/* 수불부 타입 색 */
.ttype { font-size: 12.5px; font-weight: 700; border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.ttype.purchase { background: #ecead7; color: #4d5434; }
.ttype.sale { background: #fdeee1; color: #8f6708; }
.ttype.adjust { background: #f3e8ff; color: #7e22ce; }
.ttype.transfer_in, .ttype.transfer_out { background: #e0f4e8; color: #3f6626; }
.ttype.init { background: #eceade; color: #4f5644; }

/* 관리이력 색상 */
.hk { font-size: 11.5px; font-weight: 700; border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.hk.k-purchase { background: #dbe8ff; color: #4d5434; }
.hk.k-sale { background: #fde5cd; color: #8f6708; }
.hk.k-adjust { background: #eeddff; color: #7e22ce; }
.hk.k-transfer { background: #d3f2df; color: #3f6626; }
.hk.k-adjreq { background: #fff3c4; color: #a16207; }
.hk.k-delete { background: #fecaca; color: #8c3721; }
.hk.k-restore { background: #cffafe; color: #0e7490; }
.hk.k-init { background: #e6eaf0; color: #4f5644; }
.hk.k-etc { background: #f3e8ff; color: #5b6b4a; }
tr.hrow.k-etc td { background: #fbf7ff; }
tr.hrow.k-purchase td { background: #f4f8ff; }
tr.hrow.k-sale td { background: #fff9f2; }
tr.hrow.k-adjust td { background: #fbf7ff; }
tr.hrow.k-transfer td { background: #f4fbf7; }
tr.hrow.k-adjreq td { background: #fffbea; }
tr.hrow.k-delete td { background: #f7e7e1; }
tr.hrow.k-restore td { background: #effcfd; }

/* ---------- 채팅 ---------- */
.chatwrap { display: flex; gap: 12px; height: calc(100vh - 130px); min-height: 420px; }
.chatrooms { width: 230px; flex-shrink: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow-y: auto; }
.chatrooms .rm { padding: 11px 13px; border-bottom: 1px solid #edebdb; cursor: pointer; }
.chatrooms .rm:hover { background: #f6f5ec; }
.chatrooms .rm.on { background: var(--accent-soft); }
.chatrooms .rm .nm { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.chatrooms .rm .lt { font-size: 11.5px; color: var(--sub); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chatpane { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #b2c7da22; border: 1px solid var(--line); border-radius: 12px; }
.chatmsgs { flex: 1; overflow-y: auto; padding: 14px; }
.cmsg { display: flex; margin-bottom: 10px; gap: 8px; align-items: flex-end; }
.cmsg.mine { flex-direction: row-reverse; }
/* v129 — 말풍선 폭은 «말풍선 묶음(.cmain)» 에서만 제한한다.
   말풍선 자체에 %를 걸면 창이 좁을 때 묶음이 줄고 → 말풍선이 그 %만큼 또 줄어드는
   악순환이 생겨 글자가 한두 자씩 세로로 쌓였다 (새 창으로 열었을 때 증상). */
.cmsg .bub {
  max-width: 100%; width: fit-content; background: #fff; border-radius: 12px; padding: 8px 12px; font-size: 13.5px;
  box-shadow: 0 1px 2px rgba(16,24,40,.08); white-space: pre-wrap; word-break: break-word;
}
.cmsg.mine .bub { background: #ffe94a; }
.cmsg.bot .bub { background: #eef4ff; border: 1px solid #d5e3fb; }
.cmsg .meta { font-size: 10.5px; color: var(--sub); align-self: flex-end; flex-shrink: 0; white-space: nowrap; }
.cmsg .who { font-size: 11.5px; color: #556074; margin-bottom: 2px; font-weight: 700; }
.cmsg img.att { max-width: 240px; max-height: 260px; border-radius: 8px; display: block; cursor: zoom-in; }
.cmsg .fatt { display: flex; align-items: center; gap: 7px; background: #eef0e6; border-radius: 8px; padding: 7px 10px; margin-top: 5px; font-size: 12.5px; }
.chatinput { display: flex; gap: 7px; padding: 10px; background: #fff; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; align-items: flex-end; }
.chatinput textarea { flex: 1; border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 11px; resize: none; outline: none; max-height: 110px; font-size: 13.5px; }
.chatinput textarea:focus { border-color: var(--accent); }
.codechip { display: inline-block; background: #ecead7; color: #4d5434; border-radius: 6px; padding: 0 6px; font-weight: 700; cursor: pointer; }
.daysep { text-align: center; font-size: 11.5px; color: var(--sub); margin: 12px 0 10px; }
@media (max-width: 860px) {
  .chatwrap { flex-direction: column; height: calc(100vh - 190px); }
  .chatrooms { width: 100%; max-height: 120px; display: flex; overflow-x: auto; }
  .chatrooms .rm { min-width: 130px; border-bottom: none; border-right: 1px solid #edebdb; }
}

/* 갤러리 */
.gal { display: flex; gap: 8px; flex-wrap: wrap; }
.gal .g { position: relative; }
.gal img { width: 110px; height: 130px; object-fit: contain; background: #fff; border-radius: 8px; border: 1px solid var(--line); cursor: zoom-in; }
.gal .del { position: absolute; top: 3px; right: 3px; background: rgba(0,0,0,.55); color: #fff; border: none; border-radius: 6px; font-size: 11.5px; padding: 2px 6px; }

/* ---------- 모바일 ---------- */
#mnav { display: none; }
#menuBtn { display: none; }
@media (max-width: 860px) {
  #sidebar { display: none; }
  #topbar { padding: 9px 12px; }
  #topbar h1 { font-size: 15px; }
  #content { padding: 10px; padding-bottom: 76px; }
  #mnav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: #fff;
    border-top: 1px solid var(--line); z-index: 60; padding-bottom: env(safe-area-inset-bottom);
  }
  #mnav a {
    flex: 1; text-align: center; padding: 8px 2px 7px; font-size: 11.5px; color: var(--sub);
    text-decoration: none; display: flex; flex-direction: column; gap: 2px; align-items: center; position: relative;
  }
  #mnav a.on { color: var(--accent); font-weight: 700; }
  #mnav a .ico { font-size: 20px; line-height: 1; }
  #mnav a .badge { position: absolute; top: 3px; right: 18%; }
  #menuBtn { display: inline-flex; }
  .tb th { position: static; }
  .grid2 { grid-template-columns: 1fr; }
  .tb img.thumb { max-width: 74px; max-height: 100px; }
  #modal { padding: 16px 14px; }
  .hide-m { display: none !important; }
  .tbwrap { overflow-x: auto; margin: 0 -10px; padding: 0 10px; }
}
@media (min-width: 861px) { .only-m { display: none !important; } }

/* ============================================================
   v102 — 카테고리 상세 표: 엑셀식 셀 드래그 선택 · 병합
   ============================================================ */
.tb.selmode { user-select: none; }
.tb td.selc { cursor: cell; }
.tb td.is-sel { background: #eceada !important; box-shadow: inset 0 0 0 1px #a8ac82; }
.tb td.is-sel.codecell { background: #e3ecff !important; }
.tb td.is-merged { background: #fbfaf2; }
.tb td.is-merged::after {
  content: '⇕'; float: right; font-size: 9.5px; color: #c2bfa6; margin-left: 3px; line-height: 1;
}
.selbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 64px; z-index: 120;
  display: flex; align-items: center; gap: 8px; padding: 9px 13px;
  background: #101828; color: #fff; border-radius: 12px;
  box-shadow: 0 14px 36px rgba(16, 24, 40, .34); font-size: 12.5px;
}
.selbar b { color: #ffd166; }
.selbar button {
  border: 0; border-radius: 8px; padding: 6px 11px; font: inherit; font-size: 12.5px;
  font-weight: 700; cursor: pointer; background: #2f3b52; color: #fff;
}
.selbar button:hover { background: #3d4b66; }
.selbar button.pri { background: #5a6636; }
.selbar button.pri:hover { background: #4d5434; }
.selbar button.gh { background: transparent; color: #a9b4c6; }
.selbar button.gh:hover { background: #232f45; color: #fff; }

/* ============================================================
   v118 — 표 열 너비 드래그 조정 손잡이 (모든 표 공통)
   ============================================================ */
.twgrip {
  position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
  cursor: col-resize; z-index: 5; background: transparent; touch-action: none;
}
.twgrip::after {
  content: ''; position: absolute; top: 18%; bottom: 18%; left: 3px; width: 1px;
  background: rgba(0, 0, 0, .10);
}
.twgrip:hover { background: rgba(90, 102, 54, .18); }
.twgrip:hover::after, .twgrip.is-on::after { background: var(--accent); width: 2px; left: 2px; }
.twgrip.is-on { background: rgba(90, 102, 54, .28); }