/* 우진 ERP 도움말 — 공통 스타일 */
:root{
  --navy:#334464; --navy2:#3f5480; --line:#d6dbe6; --bg:#f4f6fb;
  --card:#ffffff; --ink:#22293a; --muted:#6b7488; --accent:#2f6fed;
  --chip:#e7ecf6; --chipink:#3a4a6b; --hi:#fff6c9;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"맑은 고딕","Malgun Gothic",굴림,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.6}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ── 상단바 ── */
.topbar{background:var(--navy);color:#fff;padding:10px 18px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:10;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.topbar .brand{font-size:17px;font-weight:700;white-space:nowrap}
.topbar .brand small{font-weight:400;opacity:.8;font-size:12px;margin-left:6px}
.topbar a{color:#dbe4f5}
.searchwrap{flex:1;display:flex;justify-content:center}
.searchwrap input{width:min(560px,100%);padding:9px 14px;border:0;border-radius:8px;font-size:15px;outline:none}
.topbar .home{background:rgba(255,255,255,.14);padding:6px 12px;border-radius:7px;color:#fff;white-space:nowrap}
.topbar .home:hover{background:rgba(255,255,255,.25);text-decoration:none}

/* ── 홈: 카테고리 칩 ── */
.wrap{max-width:1180px;margin:0 auto;padding:18px}
.stat{color:var(--muted);margin:2px 0 14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip{background:var(--chip);color:#3a4a6b;border:1px solid var(--line);padding:6px 12px;border-radius:20px;cursor:pointer;font-size:13px;user-select:none}
.chip.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.chip .n{opacity:.65;margin-left:5px;font-size:12px}

/* ── 홈: 메뉴 목록 ── */
.catblock{margin-bottom:26px}
.catblock h2{font-size:15px;color:var(--navy);border-left:4px solid var(--navy);padding:2px 0 2px 10px;margin:0 0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.mcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;transition:.12s}
.mcard:hover{border-color:var(--accent);box-shadow:0 3px 10px rgba(47,111,237,.12);text-decoration:none;transform:translateY(-1px)}
.mcard .nm{font-weight:700;color:var(--ink);font-size:14.5px}
.mcard .cd{color:var(--muted);font-size:12px;margin-top:3px;font-family:Consolas,monospace}
.mcard mark{background:var(--hi);padding:0 1px;border-radius:2px}
.empty{color:var(--muted);padding:40px;text-align:center}

/* ── 도움말 문서 ── */
.doc{max-width:900px;margin:0 auto;padding:22px 18px 60px}
.crumb{color:var(--muted);font-size:12.5px;margin-bottom:10px}
.doc h1{font-size:24px;margin:4px 0 6px;color:var(--navy)}
.doc h1 .code{font-family:Consolas,monospace;font-size:14px;background:var(--chip);color:#3a4a6b;padding:3px 8px;border-radius:6px;vertical-align:middle;margin-left:8px}
.doc .cat{color:var(--muted);margin-bottom:18px}
.doc section{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 20px;margin-bottom:14px}
.doc section h2{font-size:16px;color:var(--navy);margin:0 0 10px;border-bottom:2px solid var(--line);padding-bottom:6px}
.doc p{margin:8px 0}
.doc ul,.doc ol{margin:8px 0;padding-left:22px}
.doc li{margin:4px 0}
.doc table{border-collapse:collapse;width:100%;margin:10px 0;font-size:13.5px}
.doc th,.doc td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
.doc th{background:var(--chip);color:#33405c;white-space:nowrap}
.doc .todo{color:var(--muted);font-style:italic}
.key{display:inline-block;background:#eef1f7;border:1px solid #c7cede;border-bottom-width:2px;border-radius:5px;padding:1px 7px;font-family:Consolas,monospace;font-size:12.5px;color:#33405c}
.tip{background:#eef5ff;border-left:4px solid var(--accent);padding:10px 14px;border-radius:0 8px 8px 0;margin:10px 0}
.warn{background:#fff5ec;border-left:4px solid #e08a2b;padding:10px 14px;border-radius:0 8px 8px 0;margin:10px 0}
.pager{display:flex;justify-content:space-between;margin-top:18px;gap:10px}
.pager a{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:9px 14px;flex:1}
.pager a:hover{border-color:var(--accent);text-decoration:none}
.pager .nx{text-align:right}
.pager .dis{opacity:.4;pointer-events:none}
.footer{color:var(--muted);font-size:12px;text-align:center;padding:24px}

/* ═══════════════════════════════════════════════════════════
   메인창 모방 레이아웃 (index.html, body.appmode)
   ═══════════════════════════════════════════════════════════ */
body.appmode{background:#c9d2e3;overflow:hidden}
.appwin{display:flex;flex-direction:column;height:100vh;background:var(--bg)}

/* 제목표시줄 */
.titlebar{display:flex;align-items:center;gap:14px;background:linear-gradient(#3b4f76,#334464);color:#fff;padding:7px 12px;font-size:13.5px}
.titlebar .tb-title{font-weight:700;font-size:14.5px}
.titlebar .tb-welcome{opacity:.85;font-size:12.5px}
.titlebar .tb-winbtns{margin-left:auto;display:flex;gap:6px}
.titlebar .tb-winbtns i{display:inline-flex;align-items:center;justify-content:center;width:26px;height:20px;background:rgba(255,255,255,.12);border-radius:4px;font-style:normal;font-size:12px}
.titlebar .tb-winbtns i.x{background:#c0392b}

/* 툴바 */
.toolbar{display:flex;background:#e9edf5;border-bottom:1px solid var(--line);padding:5px 10px}
.toolbar .tb-right{margin-left:auto;display:flex;gap:6px}
.tbtn{background:linear-gradient(#fff,#eef1f7);border:1px solid #c2cad9;border-radius:6px;padding:6px 14px;font-size:13px;font-weight:700;color:#33405c;cursor:pointer;font-family:inherit}
.tbtn:hover{background:linear-gradient(#fff,#e3e9f4);border-color:var(--accent)}
.tbtn:active{background:#dbe2f0}
.tbtn.exit{color:#b8402f;border-color:#e0b3ab}
.tbtn.ask{background:linear-gradient(#2f6fed,#2a5fd0);color:#fff;border-color:#2454b8}
.tbtn.ask:hover{background:linear-gradient(#3f7cf5,#2f6fed)}

/* 열린 메뉴 탭 */
.tabstrip{display:flex;gap:3px;background:#dfe5f0;padding:5px 8px 0;min-height:12px;overflow-x:auto}
.tabstrip:empty{padding:0;min-height:0}
.tab{display:flex;align-items:center;gap:8px;background:#eef1f7;border:1px solid var(--line);border-bottom:0;border-radius:7px 7px 0 0;padding:6px 10px 7px 12px;font-size:13px;cursor:pointer;white-space:nowrap;color:#3a445c}
.tab:hover{background:#f6f8fc}
.tab.act{background:#fff;color:var(--navy);font-weight:700;border-color:#b9c4db}
.tab-x{opacity:.5;font-size:11px}
.tab-x:hover{opacity:1;color:#c0392b}

/* 본문 좌우 분할 */
.appbody{flex:1;display:flex;min-height:0}
.sidemenu{width:290px;min-width:290px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column}
.sidehead{padding:8px;border-bottom:1px solid var(--line);background:#f4f6fb}
.sidehead input{width:100%;padding:7px 10px;border:1px solid #c7cede;border-radius:7px;font-size:13px;outline:none;font-family:inherit}
.sidehead input:focus{border-color:var(--accent)}
.tree{flex:1;overflow:auto;padding:6px 4px}
.tempty{color:var(--muted);padding:24px;text-align:center;font-size:13px}

/* 트리 노드 — 대분류(dae) / 중분류(jung) / 메뉴(leaf) */
.tdae,.tjung{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:6px;cursor:pointer;user-select:none}
.tdae{font-weight:700;color:#2f3b56;font-size:13.5px}
.tjung{font-weight:600;color:#3a4a66;font-size:13px}
.tdae:hover,.tjung:hover{background:#eef2fb}
.tw{width:12px;color:#8892a8;font-size:11px;flex:none}
.tf{flex:none}
.tt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn{margin-left:auto;font-weight:400;color:#9aa3b6;font-size:12px;flex:none}
.dnode .dkids{display:none}
.dnode.open .dkids{display:block}
.unode{margin-left:8px}
.unode .ukids{display:none;margin:1px 0 3px 8px;border-left:1px dashed #d7deeb;padding-left:6px}
.unode.open .ukids{display:block}
.tleaf{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:13px;color:#3d465c}
.tleaf:hover{background:#eaf1ff}
.tleaf.sel{background:#dbe7ff;color:var(--navy);font-weight:700}
.tleaf .tdoc{font-size:12px;opacity:.8}
.tleaf .tln{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tleaf .tlc{color:#9aa3b6;font-size:11px;font-family:Consolas,monospace}
.tleaf mark{background:var(--hi);padding:0 1px;border-radius:2px}

/* 콘텐츠(MDI) */
.content{flex:1;position:relative;background:#eef1f7;min-width:0}
.content iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.welcome{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.wc-box{text-align:center;color:#556}
.wc-logo{font-size:26px;font-weight:800;color:var(--navy);margin-bottom:14px;letter-spacing:1px}
.wc-box p{margin:6px 0;font-size:14px}
.wc-sub{color:var(--muted)}

/* 상태바 */
.statusbar{display:flex;align-items:center;gap:12px;background:var(--navy);color:#e7ecf6;font-size:12px;padding:5px 14px}
.statusbar .st-sp{flex:1}

/* iframe 내부(임베드)일 때 문서 여백 축소 */
body.embed .doc{padding-top:14px}

/* ── 도움말 본문 추가 요소 (자동 생성 페이지용) ── */
.doc pre.layout{background:#f7f9fd;border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;overflow-x:auto;font-family:Consolas,"D2Coding",monospace;
  font-size:12.5px;line-height:1.5;color:#33405c;margin:10px 0;white-space:pre}
.doc .cols{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.doc .col{background:var(--chip);border:1px solid var(--line);border-radius:6px;
  padding:3px 9px;font-size:12.5px;color:#33405c;max-width:100%;overflow-wrap:anywhere}
.doc a.col{color:var(--accent);text-decoration:none}
.doc a.col:hover{border-color:var(--accent);background:#eaf1ff}
.doc code{background:var(--chip);border-radius:4px;padding:1px 6px;
  font-family:Consolas,monospace;font-size:12.5px}
.doc .pager a.dis{color:var(--muted);pointer-events:none}