/* 업무비서 웹 — 세 사이트와 같은 색 규칙(ponc-tokens.css 값을 그대로 복사) */
:root {
  --accent: #2f6fe4; --accent-dark: #2563d6; --accent-soft: #e8f0fd; --accent-2: #1d9e75;
  --ink: #1a2233; --muted: #5b6577; --line: #e7ebf3; --bg: #f4f6fb; --card: #fff;
  --ok: #12a150; --bad: #e5484d; --warn: #e08600; --radius: 16px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 20px; background: #0f1729; color: #fff; }
.top a { color: #cfd8ee; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; color: #fff !important; }
.mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; background: var(--accent); color: #fff; font-weight: 800; font-size: 15px; }
.mark.big { width: 46px; height: 46px; border-radius: 14px; font-size: 24px; }
.nav { display: flex; gap: 4px; flex: 1; }
.nav a { padding: 6px 12px; border-radius: 9px; }
.nav a.on, .nav a:hover { background: rgba(255,255,255,.14); color: #fff; text-decoration: none; }
.who { font-size: 13px; color: #a9b6d6; }
.wrap { max-width: 1060px; margin: 0 auto; padding: 22px 16px 60px; }
h1 { font-size: 22px; margin: 0 0 14px; }
h3 { margin: 0 0 10px; font-size: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; }
.grid .card { margin: 0; }
.tile { display: block; color: inherit; }
a.tile:hover { text-decoration: none; border-color: var(--accent); }
.tile-title { font-weight: 700; font-size: 16px; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.big { font-size: 30px; font-weight: 800; margin: 6px 0; }
.big small { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.meta { color: var(--muted); font-size: 13px; }
.hint { color: var(--muted); font-size: 13px; }
.dim { color: var(--muted); }
.mono { font-variant-numeric: tabular-nums; }
.nw { white-space: nowrap; }
.actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.btn { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-dark); }
.btn.danger { background: #fff; border-color: var(--bad); color: var(--bad); }
.btn.small { padding: 4px 10px; font-size: 13px; }
.pill { display: inline-block; padding: 1px 9px; border-radius: 999px; background: var(--accent-soft); color: #1e4fb3; font-size: 12px; font-weight: 600; }
.pill.ok { background: #e7f8f0; color: #0f766e; }
.pill.off { background: #eef0f4; color: var(--muted); }
.status { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; margin-bottom: 14px; font-weight: 600; font-size: 14px; }
.status.good { background: #e7f8f0; color: #0f766e; } .status.warn { background: #fff4e5; color: #b45309; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.flash { padding: 10px 14px; border-radius: 12px; margin-bottom: 14px; font-weight: 600; }
.flash.ok { background: #e7f8f0; color: #0f766e; } .flash.bad { background: #fdecec; color: #c0392b; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl th { color: var(--muted); font-size: 13px; }
.preview { max-width: 420px; color: var(--muted); overflow-wrap: anywhere; }
.thumb { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); margin-right: 4px; vertical-align: middle; }
.empty { color: var(--muted); padding: 14px 4px; margin: 0; }
.form label { display: block; font-weight: 600; margin-bottom: 12px; }
.form .hint { font-weight: 400; }
input, select, textarea { display: block; width: 100%; margin-top: 4px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fff; color: var(--ink); }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
label.check, .check { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.check input { width: auto; margin: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .row select { width: auto; margin: 0; min-width: 200px; }
.searchbar { display: flex; gap: 8px; margin-bottom: 12px; } .searchbar input { margin: 0; max-width: 320px; }
details.add > summary { cursor: pointer; font-weight: 700; } details.add[open] > summary { margin-bottom: 12px; }
.imgs { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.imgbox { width: 150px; font-weight: 400 !important; } .imgbox img { width: 150px; height: 150px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
code { background: var(--accent-soft); padding: 1px 6px; border-radius: 6px; }
.login-box { max-width: 380px; margin: 9vh auto; padding: 0 16px; }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .login-brand h1 { margin: 0; }
.login-box .card label { display: block; font-weight: 600; margin-bottom: 12px; }
.login-box .btn { width: 100%; }
[hidden] { display: none !important; }
@media (max-width: 720px) {
  .top { gap: 8px; padding: 10px 12px; } .nav { order: 3; width: 100%; flex: none; }
  .tbl.stack thead { display: none; }
  .tbl.stack tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .tbl.stack td { display: block; border: 0; padding: 2px 4px; }
}

/* 2차: 방 관리·통계·상태 */
.sect { margin: 18px 0 8px; font-size: 15px; color: var(--muted); }
.kpis { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; }
.grid2 .card { margin: 0; }
.toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
.toolbar .searchbar { margin: 0; align-items: center; } .toolbar form { margin: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .card-head h3 { margin: 0; }
tr.on-row td { background: #f3f8ff; }
.members { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 12px; margin-bottom: 12px; }
.member { font-weight: 500 !important; margin: 0 !important; }
.bar { height: 10px; background: var(--accent-soft); border-radius: 999px; overflow: hidden; } .bar span { display: block; height: 100%; background: var(--accent); }
.log { margin: 0; padding: 12px; background: #0f1729; color: #cfe0ff; border-radius: 10px; font: 12px/1.5 Consolas, monospace; overflow-x: auto; white-space: pre-wrap; }
td select { margin: 0; min-width: 150px; }
/* 계정 설정 */
.editform { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap: 8px; } .editform input { margin: 0; }
.pwcell .mask { font-family: Consolas, monospace; margin-right: 6px; } .rv-box input { display: inline-block; width: 190px; margin: 0 4px 0 0; }
.edit-row td { background: #f7f9fd; }
@media (max-width: 720px) { .editform { grid-template-columns: 1fr; } }

/* 계정: 인증 설정 */
.otpedit { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 12px; padding-top: 6px; } .otpedit label { font-weight: 600; font-size: 13px; margin: 0; } .otpedit select, .otpedit input { margin-top: 3px; }
.editform { grid-template-columns: 1fr 1fr 1fr 1fr auto; }
#addtbl input:disabled { background: #f3f4f7; }

/* 저장 규칙(문자웹과 동일): 저장하지 않은 변경 → 아래에 붙는 저장 바 */
.savebar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: #1a2233; color: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(16,24,40,.35);
}
.savebar .sb-msg { font-size: 13px; font-weight: 600; margin-right: 6px; }
.savebar .sb-btn { border: 1px solid rgba(255,255,255,.25); background: transparent; color: #cbd5e1; border-radius: 10px; padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.savebar .sb-btn.primary { background: #2f6fe4; border-color: #2f6fe4; color: #fff; }
[data-toast].fade { opacity: 0; transition: opacity .6s; }
.pagehead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pagehead h1 { margin: 0; } .head-actions { display: flex; gap: 8px; align-items: center; }
@media (max-width: 720px) { .savebar { left: 12px; right: 12px; transform: none; justify-content: space-between; flex-wrap: wrap; } }
/* 포털 로그인 */
.otpbox { background: #fff8e6; border: 1px solid #f5d98a; border-radius: 12px; padding: 10px 14px; margin: 10px 0; } .otpbox p { margin: 0 0 8px; }
.portal .frame { margin: 8px 0; padding: 8px 10px; background: #f7f9fd; border-radius: 10px; } .portal .links { margin: 6px 0 0; padding-left: 18px; max-height: 260px; overflow: auto; font-size: 13px; }

/* 단가표 수집 */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } @media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } }

/* 용량 표시줄(모든 화면 아래) */
.usage{max-width:1100px;margin:18px auto 28px;padding:10px 14px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line)}
.usage b{color:var(--ink)}
.usage .dim{opacity:.75}
.usage .disk.warn b{color:#ffb84d}.usage .disk.bad b{color:#ff6b6b}
.usage .bar{display:inline-block;vertical-align:middle;width:90px;height:7px;margin-left:6px;border-radius:5px;background:rgba(127,127,127,.28);overflow:hidden;font-style:normal}
.usage .bar u{display:block;height:100%;background:#4cc38a;text-decoration:none}
.usage .disk.warn .bar u{background:#ffb84d}.usage .disk.bad .bar u{background:#ff6b6b}
.warn-text{color:#ffb84d}
/* 방 종류 표시(최대 6바이트: 팀채팅·오픈톡·단톡방·1:1) — 종류마다 테두리·바탕·글자색이 다르다 */
.kind { display: inline-block; padding: 1px 9px; border-radius: 999px; border: 1.5px solid; font-size: 12px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.kind-team  { background: #ede9fe; border-color: #7c3aed; color: #5b21b6; }   /* 팀채팅: 보라 */
.kind-open, .kind-open_dm { background: #fff1dc; border-color: #f59e0b; color: #b45309; }   /* 오픈톡: 주황 */
.kind-group { background: #dcfce7; border-color: #16a34a; color: #166534; }   /* 단톡방: 초록 */
.kind-dm    { background: #fde4ee; border-color: #db2777; color: #9d174d; }   /* 1:1: 분홍 */
.kind-plus, .kind-memo, .kind-unknown { background: #eef0f4; border-color: #9aa3b5; color: #4b5565; }   /* 기타: 회색 */
.kind-mth   { background: #e6f4f9; border-color: #0891b2; color: #0e5f75; }   /* 수집 방식(카페·포털) */
tr.on-row .kind { box-shadow: 0 0 0 2px rgba(0,0,0,.04); }

/* 수집 거래처 카드: 접기/펼치기 */
.ccard { padding: 0; }
.chead { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; flex-wrap: wrap; }
.chead:hover { background: #f7f9fd; border-radius: var(--radius); }
.ctoggle { width: 30px; height: 30px; padding: 0; border-radius: 8px; font-size: 18px; font-weight: 700; line-height: 1; flex: 0 0 auto; }
/* ＋/－ 글자는 글꼴마다 오른쪽으로 치우쳐서, 가로·세로 막대를 칸 정중앙에 직접 그린다(2026-10-21). 글자는 숨김, 접근성은 aria-label */
.ctoggle { position: relative; font-size: 0 !important; line-height: 0 !important; color: var(--ink, #1f2937); }
.ctoggle::before, .ctoggle::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%); }
.ctoggle::before { width: 12px; height: 2px; }
.ctoggle::after { width: 2px; height: 12px; }
.chead[aria-expanded="true"] .ctoggle::after { display: none; }
.cname { font-size: 16px; font-weight: 800; margin: 0; }
.csum { color: var(--muted); font-size: 13px; flex: 1 1 260px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cchip { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #eef0f4; color: var(--muted); white-space: nowrap; }
.cchip.good { background: #e7f8f0; color: #0f766e; } .cchip.warn { background: #fff4e5; color: #b45309; } .cchip.run { background: #e8f0fd; color: #1e4fb3; }
.cbody { padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.cbody[hidden] { display: none; }
/* 저장 결과 알림은 화면 위에 계속 붙어 있어 긴 화면에서도 놓치지 않는다 */
.flash.bad, .flash.ok { position: sticky; top: 8px; z-index: 60; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.csec { margin: 14px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--muted); text-transform: none; }
.csec::before { content: ""; display: inline-block; width: 4px; height: 12px; background: var(--accent); border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.ctools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }

/* 공지 규칙 제안 */
.nbadge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.sug { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 10px 0; background: #fff; }
.sug.add_notice { border-left: 5px solid #2f6fe4; } .sug.add_pull { border-left: 5px solid #f59e0b; } .sug.add_sender { border-left: 5px solid #7c3aed; } .sug.remove { border-left: 5px solid #9aa3b5; }
.sug .ex { margin: 6px 0; padding: 6px 10px; background: #f6f8fc; border-radius: 8px; font-size: 13px; white-space: pre-wrap; color: #334; }
.sug .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.sug input[name=phrase] { flex: 1 1 260px; margin: 0; }

/* 지정 글 기간 문구 · 고정 이미지 */
.lbrow { display: grid; grid-template-columns: 150px 150px 1fr; gap: 8px; margin: 6px 0; align-items: start; }
.lbrow input, .lbrow textarea { margin: 0; }
@media (max-width: 720px) { .lbrow { grid-template-columns: 1fr; } }
.attach { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.attach-item { width: 150px; }
.attach-item img { width: 150px; height: 150px; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; background: #f6f8fc; }
.attach-item form { margin-top: 4px; }

/* 설정 묶음: 접이식 구역 */
details.sect { margin: 8px 0; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; }
details.sect > summary { cursor: pointer; padding: 10px 0; font-weight: 700; font-size: 13px; list-style: none; }
details.sect > summary::-webkit-details-marker { display: none; }
details.sect > summary::before { content: "＋ "; color: var(--muted); }
details.sect[open] > summary::before { content: "－ "; }
details.sect[open] { padding-bottom: 10px; }
details.card > summary { cursor: pointer; }

/* 3차: 입력칸 정렬·여백 정리 (모든 화면 공통) */
.form label:not(.check) > .hint { display: block; margin: 2px 0 6px; font-size: 12px; line-height: 1.45; }
.form label:not(.check) { margin-bottom: 14px; }
.two-col { align-items: stretch; }
.two-col > label { display: flex; flex-direction: column; }
.two-col > label > input, .two-col > label > select, .two-col > label > textarea { margin-top: auto; }
.form label.check { flex-wrap: wrap; column-gap: 8px; row-gap: 0; margin-bottom: 12px; }
.form label.check > .hint { flex: 1 1 100%; padding-left: 26px; margin: 0; font-size: 12px; line-height: 1.45; font-weight: 400; }
.form label.check.member { margin-bottom: 0; }
.form .hint code, .hint code { font-size: 12px; }
.form .actions { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.form input[type=number] { max-width: 220px; }
.two-col input[type=number] { max-width: none; }
textarea { min-height: 72px; }
details.sect { color: var(--ink); background: #fbfcfe; }
details.sect > summary { font-size: 14px; }
details.sect > summary .hint { font-weight: 400; margin-left: 6px; font-size: 12px; }
details.sect > .hint, details.sect > .status { margin-top: 6px; }
.card > h3 + .hint { margin-top: -4px; }
.card.form h3 { margin-top: 4px; }
.imgs, .attach { margin-top: 8px; }
.status { flex-wrap: wrap; }
.tbl td .btn { white-space: nowrap; }
.chead .kind { flex: 0 0 auto; }
@media (max-width: 720px) {
  .wrap { padding: 14px 12px 60px; }
  .form label.check > .hint { padding-left: 0; }
  .card { padding: 14px; }
}

/* 쓸 DB 체크 */
.dbchecks { display: flex; gap: 10px; flex-wrap: wrap; } .dbchecks .check { font-weight: 600; font-size: 13px; gap: 4px; white-space: nowrap; }
.dbpick { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe; }
.dbpick > .hint { margin-left: 6px; }
.dbpick .check { margin: 6px 0 0 !important; }

/* 설정 한눈에 · 기능 상태 표시(켜짐/사용 안 함을 한눈에) */
.sumrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 6px; padding: 8px 10px; background: var(--soft, #f5f6f9); border-radius: 10px; }
.sumtitle { font-size: 12px; font-weight: 700; color: #4b5565; margin-right: 4px; }
.sumchip { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: #e9ecf1; color: #5b6575; white-space: nowrap; }
.sumchip.on { background: #dcfce7; color: #166534; font-weight: 700; }
.cstate { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 9px; border-radius: 999px; margin-left: 8px; background: #e9ecf1; color: #5b6575; vertical-align: middle; }
.cstate.on { background: #dcfce7; color: #166534; }
.csub { font-weight: 700; margin: 14px 0 4px; font-size: 13px; }

/* 설명글 접기/펴기: 각 설명 앞의 ⓘ 버튼 */
.hint-i { border: 1px solid #c5cbd6; background: #fff; color: #5b6575; border-radius: 50%; width: 18px; height: 18px; font-size: 11px; line-height: 16px;
  padding: 0; margin: 0 4px 0 2px; cursor: pointer; vertical-align: middle; }
.hint-i:hover { background: #eef0f4; }

/* 설명글 접기: ⓘ 는 글 맨 앞 같은 줄에, 본문만 접힌다 */
.hint .hint-i { display: inline-block; vertical-align: middle; margin: 0 4px 0 0; }
.hint .expl-off > .expl-body { display: none; }

/* 설명글 접기: 라벨 이름 옆에 ⓘ 를 두고, 설명 본문만 접힌다 */
.expl-title { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.expl-title .hint-i { margin: 0; }
.expl-off > .expl-body { display: none; }

/* 새 글 확인: 방법마다 한 덩어리 — 제목(체크) 아래에 그 방법의 설정만 들여써서 */
.watchform .method { border: 1px solid var(--line, #dfe3ea); border-radius: 12px; padding: 10px 14px; margin: 10px 0; background: #fff; }
.watchform .method.off { background: #fafbfc; }
.watchform .method.off .mbody { opacity: .5; }
.watchform .mhead { font-weight: 700; margin: 0; }
.watchform .mno { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #e0e7ff; color: #3730a3; margin: 0 6px 0 2px; }
.watchform .mbody { margin: 8px 0 2px 26px; }
.watchform .mbody label { margin-top: 6px; }

/* 새 글 확인 접고 펴기 + 요약 한 줄 */
.watchfold > summary.csec { cursor: pointer; list-style: none; user-select: none; }
.watchfold > summary.csec::-webkit-details-marker { display: none; }
.watchfold > summary.csec::after { content: "▾ 접기"; margin-left: 10px; font-weight: 600; font-size: 11px; color: var(--muted); }
.watchfold:not([open]) > summary.csec::after { content: "▸ 펼치기"; }
.watchfold .wsum { margin-left: 10px; font-weight: 600; color: var(--text); }
.watchform .m1row { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.watchform .m1row .mbody { flex: 0 0 auto; }
.watchform .noticebox { flex: 1 1 280px; margin: 8px 0 2px 0; padding: 8px 12px; border: 1px dashed var(--line, #ccc); border-radius: 8px; }
.watchform .noticebox.off select, .watchform .noticebox.off input[name=notice_text] { opacity: .55; }
.nstate { font-size: 12px; color: var(--muted); }
.watchform .noticebox > .nstate { display: block; margin-top: 8px; }

.aibadge { display: inline-block; padding: 0 6px; margin-left: 4px; border-radius: 8px; background: #6c4fd6; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .04em; vertical-align: 1px; }

/* ---- 왼쪽 바 메뉴(진심ON 전담비서 웹과 같은 구성): 위쪽 가로 메뉴를 대체 ---- */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: 224px; flex: 0 0 224px; background: var(--card); border-right: 1px solid var(--line); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side-logo { display: flex; align-items: center; gap: 10px; padding: 20px 18px 14px; color: var(--ink) !important; text-decoration: none !important; }
.side-logo .mark { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  box-shadow: 0 6px 14px rgba(47, 111, 228, .28); }
.side-logo .word { font-size: 17px; font-weight: 800; letter-spacing: -.2px; }
.side-nav { padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.side-group { padding: 12px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .05em; color: #94a3b8; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: #475569 !important; font-weight: 700; font-size: 13.5px;
  text-decoration: none !important; transition: background .12s, color .12s; }
.nav-item .ico { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px; background: #eef2f8; color: #64748b; display: flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: 800; }
.nav-item .lab { flex: 1; white-space: nowrap; }
.nav-item:hover { background: #f4f6fb; color: var(--ink) !important; }
.nav-item.active { background: var(--accent-soft); color: var(--accent) !important; }
.nav-item.active .ico { background: var(--accent); color: #fff; }
.nav-item .aibadge { margin-left: 0; }
.side-foot { margin-top: auto; padding: 14px 18px 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.side-user { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-out { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.main-col { flex: 1; min-width: 0; }
/* 왼쪽 메뉴 숨기기/펼치기: ☰ 버튼(제목 줄 맨 앞)을 누르면 .shell 에 sb-off 가 붙고 선택은 이 브라우저에 기억 */
.sb-toggle { flex: none; width: 36px; height: 36px; margin: 0 10px 0 0; padding: 0; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: #475569; font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sb-toggle:hover { background: #f4f6fb; color: var(--ink); }
.sb-toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.shell.sb-off .sidebar { display: none; }
.pagehead .sb-toggle + h1 { margin-right: auto; }
.shell.sb-off .main-col .wrap, .shell.sb-off .main-col .usage { max-width: 1600px; }
.main-col .wrap { max-width: 1180px; }
.main-col .usage { max-width: 1180px; }
@media (min-width: 601px) and (max-width: 900px) {      /* 태블릿: 왼쪽 메뉴를 유지하되 좁게 */
  .sidebar { width: 168px; flex: 0 0 168px; }
  .side-logo { padding: 16px 12px 10px; }
  .side-nav { padding: 4px 6px 12px; }
  .nav-item { padding: 8px 8px; gap: 8px; font-size: 13px; }
  .side-foot { padding: 12px 12px 16px; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {                                   /* 휴대폰만 위쪽 가로 메뉴 */
  .shell { flex-direction: column; }
  .sidebar { width: 100%; flex: none; height: auto; position: static; flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .side-logo { padding: 8px 10px; }
  .side-logo .word { display: none; }
  .side-nav { flex-direction: row; flex: 1; min-width: 0; padding: 6px 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 4px; }
  .side-group { display: none; }
  .nav-item { flex: 0 0 auto; padding: 7px 10px; }
  .side-foot { margin: 0; padding: 6px 10px; border-top: 0; flex-direction: column; align-items: flex-end; gap: 2px; }
}

/* ---- 공통 화면 규칙(ponc-ui.js): ⓘ 설명 · 접고 펴는 구역 · 방 고르기 ---- */
.ui-i { border: 1px solid #c5cbd6; background: #fff; color: #5b6575; border-radius: 50%; width: 18px; height: 18px; font-size: 11px; line-height: 16px;
  padding: 0; margin: 0 4px 0 4px; cursor: pointer; vertical-align: middle; font-weight: 400; }
.ui-i:hover, .ui-i.on { background: #e8f0fd; border-color: var(--accent); color: var(--accent-dark); }
.ui-ibody { display: block; margin: 4px 0 8px; padding: 6px 10px; background: #f5f7fb; border-left: 3px solid var(--accent); border-radius: 6px; color: var(--muted); font-size: 12.5px; line-height: 1.5; font-weight: 400; white-space: normal; }
.ui-ibody[hidden] { display: none; }
.fold > .fold-head { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; flex-wrap: wrap; }
.fold-head h3 { margin: 0; }
.fold-ic { width: 24px; height: 24px; flex: none; border: 1px solid #c5cbd6; border-radius: 7px; background: #fff; color: #5b6575; font-size: 13px; line-height: 22px; text-align: center; padding: 0; cursor: pointer; }
.fold-ic::before { content: "▾"; }
.fold.folded > .fold-head .fold-ic::before { content: "▸"; }
.fold-ic:hover { background: #eef0f4; }
.fold.folded > .fold-body { display: none; }
.fold > .fold-body { margin-top: 10px; }
.fold .fold-search { margin: 10px 0 0; }
.rp { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.rp-col { flex: 1 1 300px; min-width: 260px; }
.rp-left.rp-col { flex: 0 1 210px; min-width: 170px; }
.rp-right.rp-col { flex: 1 1 260px; min-width: 230px; }
.rp-list { border: 1px solid var(--line); border-radius: 10px; padding: 6px; min-height: 120px; max-height: 420px; overflow: auto; background: #fff; }
.rp-left .rp-list { max-height: 360px; }
.rp-item { display: flex; align-items: center; gap: 8px; margin: 2px 0; padding: 4px 8px; border-radius: 8px; cursor: grab; font-weight: 400; user-select: none; }
.rp-item:hover { background: #eef3fd; }
.rp-item.dragging { opacity: .4; }
.rp-item input { width: auto; margin: 0; flex: none; }
.rp-item .rp-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
[data-fit].fit-wrap { white-space: normal; line-height: 1.25; }
.rp-mid { display: flex; align-items: center; }
.rp-right .rp-list.over { outline: 2px dashed var(--accent); outline-offset: -2px; background: #f4f8ff; }
.rp-row { border: 1px solid var(--line); border-radius: 10px; padding: 5px 10px; margin: 4px 0; background: #fbfcfe; }
.rp-row.rp-new { border-color: var(--accent); background: #f4f8ff; }
.rp-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 34px; }
.rp-minus { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #e0b4b6; background: #fff; color: #c0353a; font-size: 16px; line-height: 20px; padding: 0; cursor: pointer; font-weight: 700; }
.rp-minus:hover { background: #fdecec; }
.rp-name { font-weight: 700; flex: 1 1 130px; min-width: 0; white-space: nowrap; }
.rp-line select { width: auto; max-width: 170px; height: 32px; padding: 2px 6px; font-size: 13px; margin: 0; }
.rp-ask { flex: none; }
.rp-ask > summary { cursor: pointer; list-style: none; }
.rp-ask > summary::-webkit-details-marker { display: none; }
.rp-ask > summary .pill::after { content: " ▾"; font-size: 10px; }
.rp-ask[open] { flex: 1 1 100%; }
.rp-askbody { margin-top: 6px; padding: 8px 10px; background: #f5f7fb; border-radius: 8px; font-size: 13px; }
.rp-empty { display: block; color: var(--muted); font-size: 12.5px; padding: 8px; }
.rp-empty[hidden] { display: none; }.fold-head .ui-ibody { flex: 1 1 100%; margin: 0 0 2px 32px; cursor: auto; }.ui-name { display: block; }
.ui-name .ui-ibody { max-width: 560px; }.pagehead .apicost { margin-right: auto; font-size: 13px; color: var(--muted); line-height: 1.5; }
.pagehead .apicost b { color: var(--ink); }
.pagehead .apicost .apic-sub { white-space: nowrap; }
.side-api { margin: -9px 14px 8px 62px; font-size: 12px; line-height: 1.45; color: var(--muted); user-select: none; }
.side-api .tot { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; padding: 1px 0; outline: none; white-space: nowrap; }
.side-api .tot b { color: var(--ink); font-size: 12.5px; }
.side-api .car { font-style: normal; font-size: 11px; transition: transform .25s ease; }
.side-api.open .car { transform: rotate(180deg); }
.side-api .sub { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s ease, opacity .25s ease; font-size: 11.5px; white-space: nowrap; }
.side-api.open .sub { max-height: 72px; opacity: .95; padding-top: 2px; }
.side-api .sub b { color: var(--ink); }
@media (min-width: 601px) and (max-width: 900px) { .side-api { margin-left: 50px; margin-right: 4px; } }
@media (max-width: 600px) { .side-api { display: none; } }
.pagehead .apimodel { display: flex; gap: 6px; align-items: center; margin: 0; }
.pagehead .apimodel select { width: auto; height: 30px; padding: 2px 8px; font-size: 12.5px; border-radius: 8px; margin: 0; max-width: 150px; }
/* 모델을 사용자가 못 바꾸는(고정) AI 메뉴: 선택칸 대신 잠금 표시 — 재고학습(OCR → Haiku → Sonnet 자동) */
.pagehead .apimodel-locked { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 2px 10px; font-size: 12.5px; border-radius: 8px; margin: 0;
  background: var(--bg-soft, rgba(127,127,127,.12)); color: var(--muted, #6b7280); border: 1px dashed var(--line, rgba(127,127,127,.4)); cursor: not-allowed; user-select: none; }
/* 홈 — 메뉴 바로가기 카드 */
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-bottom: 8px; }
.mcard { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 16px 18px; color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s; }
.mcard:hover { text-decoration: none; border-color: var(--accent); box-shadow: 0 6px 18px rgba(47,111,228,.12); transform: translateY(-1px); }
.mico { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px; background: var(--accent-soft); color: var(--accent-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; }
.mbody { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mname { font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mdesc { color: var(--muted); font-size: 13px; line-height: 1.45; }
.mstat { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--accent-dark); }
@media (max-width: 560px) { .mgrid { grid-template-columns: 1fr 1fr; gap: 10px; } .mcard { flex-direction: column; gap: 8px; padding: 14px; } }

/* 카톡비서: 기록의 사람 구분 칩, 응대 매뉴얼 */
.who-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.who-chips .pill{text-decoration:none}
a.who{text-decoration:none;color:inherit}
.manual{line-height:1.6;font-size:14px}
.manual h3,.manual h4,.manual h5{margin:14px 0 6px}
.manual ul,.manual ol{margin:4px 0 8px;padding-left:20px}
.manual li{margin:2px 0}
.manual p{margin:6px 0}

/* 설정 한눈에 — 칩을 누르면 해당 설정으로 이동 */
a.sumchip.jump { text-decoration: none; cursor: pointer; transition: box-shadow .15s, transform .15s; }
a.sumchip.jump:hover { box-shadow: 0 0 0 2px var(--accent); transform: translateY(-1px); text-decoration: none; }
@keyframes jumpflash { 0% { box-shadow: 0 0 0 0 rgba(47,111,228,.0); background-color: #fff3bf; } 25% { box-shadow: 0 0 0 4px rgba(47,111,228,.45); background-color: #fff3bf; } 100% { box-shadow: 0 0 0 0 rgba(47,111,228,0); } }
.jump-flash { animation: jumpflash 2.2s ease-out 1; border-radius: 8px; }

/* ---- 카톡비서 묶음 탭(2026-10-22) — 단가비교 A안 기준: 바깥 테두리+칸 사이 세로선, 켜짐=검정, 모서리 각지게, 본문 14px ---- */
.qa-nav{margin:0 0 14px}
.qa-tabs{display:flex;border:1px solid #9aa1ab;background:#fff;overflow-x:auto;max-width:100%}
.qa-tabs a{flex:1 0 auto;padding:10px 16px;text-align:center;color:#3c4043;text-decoration:none;font-weight:500;white-space:nowrap;border-left:1px solid #9aa1ab;font-size:14px}
.qa-tabs a:first-child{border-left:0}
.qa-tabs a:hover{background:#f1f2f4}
.qa-tabs a.on{background:#1d1f20;color:#fff;font-weight:600}
.qa-sub{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0}
.qa-sub a{padding:5px 12px;border:1px solid #9aa1ab;background:#fff;color:#3c4043;text-decoration:none;font-size:13px}
.qa-sub a:hover{background:#f1f2f4}
.qa-sub a.on{background:#1d1f20;color:#fff;border-color:#1d1f20}
.qa-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px;margin:0 0 14px}
.qa-card{display:block;border:1px solid #c0c6cf;background:#fff;padding:12px 14px;color:inherit;text-decoration:none}
a.qa-card:hover{border-color:#1d1f20}
.qa-card .k{font-size:12px;color:#5f6368}
.qa-card .v{font-size:24px;font-weight:700;margin:2px 0;font-variant-numeric:tabular-nums}
.qa-card .v small{font-size:13px;font-weight:500;color:#5f6368}
.qa-card .s{font-size:12px;color:#5f6368}
.qa-card.warn{border-color:#c0392b}
.qa-card.warn .v{color:#b3261e}
.qa-map{width:100%;border-collapse:collapse}
.qa-map td,.qa-map th{padding:8px 10px;border-bottom:1px solid #c5cad2;text-align:left;font-size:14px}
.qa-map th{font-size:12px;color:#5f6368;font-weight:600;background:#f6f7f9}
.qa-map td a{color:#111;font-weight:600}
.qa-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:760px){.qa-two{grid-template-columns:1fr}.qa-tabs a{padding:10px 12px}}
.rp-tog{display:inline-flex;gap:4px;align-items:center;font-size:13px;white-space:nowrap}
.rp-db>summary{cursor:pointer;list-style:none}
.rp-db>summary::-webkit-details-marker{display:none}
/* 사진 메모 격자(2026-10-22) */
.pic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:6px 0 14px}
.pic-grid .pic{display:block;color:inherit;text-decoration:none;font-size:12px}
.pic-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid #9aa1ab;display:block;background:#f1f2f4}
.pic-grid .pic span{display:block;margin-top:4px;color:#4b5563}
.pic-grid .pic.gone{opacity:.45;text-decoration:line-through}
/* 체크 하나로 쓰지 않게 된 구역(예: 수집 카드의 AI 판정을 켜면 규칙 칸) — 값은 그대로 두고 흐리게·입력 막음 */
[data-aioff].ai-off{opacity:.45}
[data-aioff].ai-off summary{cursor:default}
/* ---- 공통 엑셀식 표 필터(ponc-xfilter.js, 2026-10-26): table[data-xf] 머리글 ▼ · 메뉴 · 내 필터 칩 ---- */
.xf-b { border: 1px solid #c5cbd6; background: #fff; color: #5b6575; border-radius: 4px; font-size: 9px; line-height: 14px; width: 17px; height: 17px; padding: 0; margin-left: 4px; cursor: pointer; vertical-align: middle; }
.xf-b:hover, .xf-b.on { background: #e8f0fd; border-color: var(--accent); color: var(--accent-dark); }
.xf-menu { position: absolute; z-index: 1000; width: 230px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(15,23,42,.16); padding: 8px; font-size: 13px; }
.xf-menu .xf-row { display: flex; gap: 6px; margin: 4px 0; }
.xf-menu .xf-row button, .xf-menu .xf-save { flex: 1; border: 1px solid #c5cbd6; background: #fff; border-radius: 7px; padding: 4px 6px; font-size: 12.5px; cursor: pointer; }
.xf-menu .xf-row button.pri { background: var(--accent); border-color: var(--accent); color: #fff; }
.xf-menu .xf-save { display: block; width: 100%; margin-top: 4px; }
.xf-menu .xf-q { width: 100%; height: 30px; margin: 4px 0; font-size: 13px; }
.xf-list { max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: 7px; padding: 2px 4px; user-select: none; }
.xf-it { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 5px; cursor: pointer; font-weight: 400; margin: 0; }
.xf-it:hover { background: #eef3fd; }
.xf-it[hidden] { display: none; }
.xf-it input { width: auto; margin: 0; pointer-events: none; }
.xf-it span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xf-it i { font-style: normal; color: var(--muted); font-size: 11px; }
.xf-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 6px; }
.xf-chips[hidden] { display: none; }
.xf-chip { display: inline-flex; border: 1px solid #b9c7e6; border-radius: 999px; background: #f4f8ff; overflow: hidden; }
.xf-chip button, .xf-clear { border: 0; background: none; padding: 2px 10px; font-size: 12.5px; cursor: pointer; color: #1e4fb3; }
.xf-chip .x { padding: 2px 8px 2px 2px; color: #8a94a6; }
.xf-clear { border: 1px solid #e0b4b6; border-radius: 999px; color: #c0353a; background: #fff; }
/* ---- 공통: 숫자 열·입력 표 (2026-10-26) — 금액·숫자 칸은 .right(오른쪽 끝 맞춤·한 줄), 칸마다 입력하는 표는 .tbl.tbl-edit ---- */
.tbl .right, .right { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl th.right { text-align: right; }
.tbl tfoot td { font-weight: 700; border-top: 2px solid var(--line); }
.tbl-edit td { padding: 3px 4px; }
.tbl-edit input, .tbl-edit select { width: 100%; min-width: 60px; height: 30px; margin: 0; padding: 2px 6px; font-size: 13px; }
.tbl-edit input.right { text-align: right; }
.tbl-edit td.rm { width: 32px; }
.tbl-scroll { overflow-x: auto; max-width: 100%; }
.tbl-scroll > .tbl { min-width: max-content; }
.tr-warn td { background: #fff4e5; }
.neg { color: #c0353a; }
.tbl-scroll > .tbl.tbl-edit { min-width: 0; }
.tbl-edit { table-layout: auto; }
label.lbl-in { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; white-space: nowrap; }
label.lbl-in input, label.lbl-in select { margin: 0; }
label.lbl-in input[type=checkbox] { width: auto; }
.tbl-edit select { width: auto; min-width: 84px; }