:root{
  --bg:#f4f6f8; --panel:#fff; --line:#e3e7ec; --text:#1d2329; --muted:#7a8591;
  --brand:#03c75a; --brand-d:#02a64b; --accent:#2f6fed;
  --g5:#03a85a; --g4:#5fbf3f; --g3:#d9a400; --g2:#ea7a1f; --g1:#e04848;
  --radius:12px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.muted{color:var(--muted);font-weight:400;font-size:13px}
.pad{padding:24px;text-align:center}
.wrap{max-width:1320px;margin:0 auto;padding:0 16px}
code{background:#eef1f4;padding:1px 6px;border-radius:4px;font-size:13px}

/* 헤더 */
.top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.top-in{display:flex;align-items:center;gap:20px;height:58px}
.brand{font-weight:800;font-size:18px;text-decoration:none;color:var(--text);white-space:nowrap}
.tabs{display:flex;gap:4px;flex:1}
.tab{white-space:nowrap;border:0;background:none;padding:8px 14px;border-radius:8px;color:var(--muted);font-weight:600}
.tab.on{background:#e9f9f0;color:var(--brand-d)}
.pill{display:inline-block;min-width:20px;padding:0 6px;border-radius:10px;background:#eef1f4;font-size:12px;color:var(--text)}
.logout{color:var(--muted);font-size:13px;text-decoration:none}

main.wrap{padding-top:20px;padding-bottom:60px}
.notice{background:#eef4ff;border:1px solid #d3e1ff;padding:10px 14px;border-radius:10px;margin-bottom:14px;font-size:14px}
.notice.warn{background:#fff7e6;border-color:#ffe2a8}

/* 검색바 */
.search{display:flex;gap:8px;background:#fff;padding:10px;border-radius:var(--radius);border:1px solid var(--line);box-shadow:0 2px 8px rgba(0,0,0,.03)}
.search input{flex:1;min-width:0;border:0;outline:0;font-size:17px;padding:8px 10px}
.search select{border:1px solid var(--line);border-radius:8px;padding:0 8px;background:#fff}
.search button{border:0;background:var(--brand);color:#fff;font-weight:700;padding:0 26px;border-radius:8px}
.search button:hover{background:var(--brand-d)}
.search button:disabled{opacity:.6;cursor:wait}
.recent{margin:10px 2px 16px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{border:1px solid var(--line);background:#fff;border-radius:16px;padding:2px 12px;font-size:13px}
.chip:hover{border-color:var(--brand);color:var(--brand-d)}

/* 요약 카드 */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column}
.card .lbl{font-size:13px;color:var(--muted)}
.card b{font-size:26px;line-height:1.3}
.card small{color:var(--muted);font-size:12px;min-height:18px}
.card.grade[data-level="5"] b{color:var(--g5)} .card.grade[data-level="4"] b{color:var(--g4)}
.card.grade[data-level="3"] b{color:var(--g3)} .card.grade[data-level="2"] b{color:var(--g2)}
.card.grade[data-level="1"] b{color:var(--g1)}

/* 2단 */
.cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.panel-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel-h h2{margin:0;font-size:16px}
.seg{display:flex;background:#f0f2f5;border-radius:8px;padding:3px}
.seg button{border:0;background:none;padding:4px 12px;border-radius:6px;font-size:13px;color:var(--muted)}
.seg button.on{background:#fff;color:var(--text);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.tools{display:flex;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);background:#fafbfc;flex-wrap:wrap}
.tools input,.tools-inline input{flex:1;min-width:120px;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:14px;background:#fff}
.tools-inline{display:flex;gap:8px;align-items:center}
.ghost,.btn.ghost{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 12px;font-size:13px;text-decoration:none;color:var(--text);white-space:nowrap}
.ghost:hover{border-color:var(--accent);color:var(--accent)}

/* 지식인 리스트 */
.kin{list-style:none;margin:0;padding:0;max-height:calc(100vh - 290px);min-height:300px;overflow:auto}
.kin li{display:flex;gap:12px;align-items:flex-start;padding:11px 16px;border-bottom:1px solid #f0f2f4}
.kin li:hover{background:#fafcff}
.kin li.done{background:#f3fbf6}
.kin li.done .title{color:#6b7a72}
.kin .t{flex:1;min-width:0}
.title{border:0;background:none;padding:0;text-align:left;font-weight:600;font-size:15px;line-height:1.45}
.title:hover{color:var(--accent)}
.title mark{background:#fff1a8;color:inherit;padding:0 1px}
.desc{margin:3px 0 0;color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act{display:flex;align-items:center;gap:6px;flex-shrink:0}
.badge{font-size:12px;color:var(--brand-d);background:#e3f7ec;padding:3px 8px;border-radius:6px;white-space:nowrap;font-weight:600}
.ico{color:var(--muted);text-decoration:none;padding:2px 6px;border-radius:6px}
.ico:hover{background:#eef1f4;color:var(--text)}
.pub{border:0;background:var(--brand);color:#fff;border-radius:7px;padding:5px 12px;font-size:13px;font-weight:700;white-space:nowrap}
.pub:hover{background:var(--brand-d)}
.pub.undo{background:#eef1f4;color:var(--muted);font-weight:500}
.pub.undo:hover{background:#ffe5e5;color:var(--g1)}
.loading{padding:30px;text-align:center;color:var(--muted)}
.err{color:var(--g1);padding:16px}

/* 연관키워드 표 */
.tblwrap{overflow:auto;max-height:calc(100vh - 330px);min-height:300px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{position:sticky;top:0;background:#fafbfc;text-align:left;padding:9px 12px;font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap}
.rel th{cursor:pointer;user-select:none}
.rel th.sorted{color:var(--text)}
td{padding:8px 12px;border-bottom:1px solid #f0f2f4}
.num{text-align:right;font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.kw{border:0;background:none;padding:0;color:var(--accent);font-weight:600;text-align:left}
.kw:hover{text-decoration:underline}
.lv{font-size:12px;padding:2px 8px;border-radius:6px;font-weight:700;white-space:nowrap;background:#eef1f4;color:var(--muted)}
.lv[data-level="5"]{background:#ddf5e8;color:var(--g5)} .lv[data-level="4"]{background:#e8f6df;color:#3f9a24}
.lv[data-level="3"]{background:#fff4d1;color:#a37b00} .lv[data-level="2"]{background:#ffeadb;color:var(--g2)}
.lv[data-level="1"]{background:#ffe3e3;color:var(--g1)}
.hint{margin:0;padding:12px 16px;font-size:12.5px;color:var(--muted);background:#fafbfc;border-top:1px solid var(--line)}
.memo{width:100%;min-width:160px;border:1px solid var(--line);border-radius:6px;padding:4px 8px;font-size:13px}

.empty{background:#fff;border:1px dashed #cfd6de;border-radius:var(--radius);padding:30px;color:var(--muted)}
.empty p{margin:0 0 10px;font-size:16px;color:var(--text)}
.empty ol{margin:0;padding-left:20px;line-height:1.9}

.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);background:#222;color:#fff;padding:9px 18px;border-radius:20px;font-size:14px;opacity:0;transition:.2s;pointer-events:none;z-index:99}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* 로그인 */
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login-box{background:#fff;padding:36px 30px;border-radius:16px;border:1px solid var(--line);width:100%;max-width:340px;text-align:center}
.login-box .logo{font-size:40px}
.login-box h1{font-size:19px;margin:6px 0 20px}
.login-box input{width:100%;border:1px solid var(--line);border-radius:8px;padding:11px;margin-bottom:10px}
.login-box button{width:100%;border:0;background:var(--brand);color:#fff;font-weight:700;padding:11px;border-radius:8px}

/* 반응형 */
@media (max-width:980px){
  .cols{grid-template-columns:1fr}
  .kin,.tblwrap{max-height:none}
}
@media (max-width:640px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .card b{font-size:21px}
  .search{flex-wrap:wrap}
  .search input{flex-basis:100%}
  .search select{flex:1;padding:8px}
  .search button{flex:1;padding:10px}
  .top-in{gap:10px}
  .brand{font-size:14px;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .logout{font-size:12px}
  .tab{padding:6px 8px;font-size:14px}
  .kin li{flex-direction:column;gap:6px}
  .act{align-self:flex-end}
}

/* 질문별 검색량·경쟁도 */
.meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:4px;font-size:12.5px;color:var(--muted);align-items:center}
.meta b{color:var(--text);font-variant-numeric:tabular-nums}
.meta .lv{margin:0 2px}
.meta .none,.meta .wait{color:#b0b8c1}
.kw.sm{font-size:12px;font-weight:500;background:#eef4ff;padding:1px 7px;border-radius:5px;margin-left:2px}
.tools select{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:13px;background:#fff}
.subhint{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:7px 16px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}
.prog{color:var(--accent);font-weight:600}