/* 농업위키 — 위키백과식 경량 뷰어 (화이트 테마, 모바일 반응형) */
:root{
  --fw-green:#4b7a3f; --fw-green-dark:#33562b; --fw-ink:#202122; --fw-muted:#5b6168;
  --fw-line:#d3d7dd; --fw-soft:#eef4ea; --fw-bg:#ffffff; --fw-link:#1a5fb4;
  --fw-box:#f7f9f6; --fw-side:#fafbfc;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fw-bg); color:var(--fw-ink);
  font-family:"Malgun Gothic","맑은 고딕","Noto Sans KR",-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.7;
}
a{color:var(--fw-link); text-decoration:none}
a:hover{text-decoration:underline}

/* ── 헤더: 화이트, 취지 카피 2줄 ── */
.fw-header{border-bottom:1px solid var(--fw-line); background:#fff; position:sticky; top:0; z-index:20}
.fw-header-in{max-width:1280px; margin:0 auto; display:flex; align-items:center; gap:14px; padding:8px 16px}
.fw-menu-toggle{border:1px solid var(--fw-line); background:#fff; border-radius:6px; width:34px; height:34px;
  font-size:16px; cursor:pointer; color:var(--fw-green-dark); flex:0 0 auto}
.fw-menu-toggle:hover{background:var(--fw-soft)}
.fw-logo{display:inline-flex; align-items:center; gap:9px; font-size:25px; font-weight:800; color:var(--fw-green-dark); white-space:nowrap; flex:0 0 auto; text-decoration:none}
.fw-logo:hover{text-decoration:none}
.fw-logo-img{height:38px; width:auto; display:block}
.fw-mission{flex:1 1 auto; margin:0; font-size:12.5px; line-height:1.45; color:var(--fw-muted); min-width:0}
.fw-mission b{color:var(--fw-green-dark); font-weight:700}
.fw-search{flex:1 1 360px; max-width:460px; min-width:200px}
.fw-search-row{display:flex; gap:6px}
.fw-search input{flex:1 1 auto; width:100%; padding:8px 12px; border:1px solid var(--fw-line); border-radius:6px; font-size:14px}
.fw-search-btn{flex:0 0 auto; width:40px; border:1px solid var(--fw-green); background:var(--fw-green); color:#fff; border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center}
.fw-search-btn:hover{background:var(--fw-green-dark); border-color:var(--fw-green-dark)}
.fw-msg{font-size:12px; color:#c0392b; margin-top:4px; line-height:1.4}
.fw-result{border-bottom:1px solid var(--fw-line); padding:9px 0}
.fw-result h3{margin:0 0 3px; font-size:17px; color:var(--fw-green-dark)}
.fw-result p{margin:0; color:var(--fw-muted); font-size:14px}

/* ── 3열 레이아웃 (좌 메뉴 / 중 본문 / 우 그래프+엣지) ── */
.fw-wrap{max-width:1280px; margin:0 auto; display:grid;
  grid-template-columns:198px minmax(0,1fr) 256px; gap:22px; padding:18px 16px; align-items:start}
.fw-side{font-size:13.5px}
.fw-side h4{font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--fw-muted);
  border-bottom:1px solid var(--fw-line); padding-bottom:4px; margin:0 0 8px}
.fw-side.left{position:sticky; top:64px}

/* 좌측 메뉴 (접기 가능) */
.fw-menu details{margin:1px 0}
.fw-menu summary{cursor:pointer; padding:5px 8px; border-radius:6px; font-weight:700; font-size:13px;
  color:var(--fw-green-dark); list-style:none; user-select:none}
.fw-menu summary::-webkit-details-marker{display:none}
.fw-menu summary::before{content:"▸"; display:inline-block; width:1em; color:#9aa0a6}
.fw-menu details[open]>summary::before{content:"▾"}
.fw-menu summary:hover{background:var(--fw-soft)}
.fw-menu .cnt{color:#9aa0a6; font-weight:400; font-size:11px}
.fw-menu ul{list-style:none; margin:1px 0 5px; padding:0 0 0 16px}
.fw-menu li{margin:1px 0}
.fw-menu li a{display:block; padding:4px 8px; border-radius:5px; color:var(--fw-ink); font-size:12.5px; line-height:1.35}
.fw-menu li a:hover{background:var(--fw-soft); color:var(--fw-green-dark); text-decoration:none}
.fw-menu li a.cur{background:var(--fw-soft); color:var(--fw-green-dark); font-weight:700}
.fw-menu li.empty{color:#b3b3b3; font-size:12px; padding:3px 8px}
body.menu-collapsed .fw-side.left{display:none}
body.menu-collapsed .fw-wrap{grid-template-columns:minmax(0,1fr) 256px}

/* ── 본문 (대16·중14·소12 약 2pt 간격은 인쇄용; 웹 가독성 위해 px로 매핑, 단계 ~2pt) ── */
.fw-main{min-width:0}
.fw-toc{background:var(--fw-side); border:1px solid var(--fw-line); border-radius:6px;
  padding:8px 12px; margin:0 0 16px; font-size:13.5px; display:inline-block; min-width:240px}
.fw-toc h4{margin:0 0 4px; font-size:12px; color:var(--fw-muted)}
.fw-toc ul{list-style:none; margin:0; padding:0}
.fw-toc li{margin:2px 0}
.fw-toc a{color:var(--fw-link)}                 /* 목차도 링크처럼 보이게 */
.fw-toc a:hover{text-decoration:underline}
.fw-toc li.tl2>a{font-weight:700}               /* 하위가 있는 상위 항목 강조 */
.fw-toc li.tl3{padding-left:14px}               /* 하위 항목 들여쓰기 */
.fw-main h1{font-size:23px; font-weight:800; border-bottom:2px solid var(--fw-line); padding-bottom:7px; margin:0 0 13px; line-height:1.3}     /* 대제목 ≈17pt */
.fw-main h2{font-size:20.5px; font-weight:700; border-bottom:1px solid var(--fw-line); padding-bottom:4px; margin:24px 0 10px}              /* 중제목 ≈15pt (−≈2.5px≈≈2pt) */
.fw-main h3{font-size:18px; font-weight:700; margin:18px 0 7px; color:var(--fw-green-dark)}                                                /* 소제목 ≈13.5pt (−≈2.5px≈2pt) */
.fw-main p{margin:0 0 13px}
.fw-main p.fw-q{margin:14px 0 2px}          /* QnA 질문 */
.fw-main p.fw-a{margin:0 0 8px; color:#333} /* QnA 답 — 질문 바로 아래 줄 */
.fw-main ul,.fw-main ol{margin:0 0 13px; padding-left:22px}
.fw-main li{margin:4px 0}
/* 표: 맨 왼쪽·맨 오른쪽 외곽선만 트임(open), 내부 세로줄·가로줄은 유지 */
.fw-main table{width:100%; border-collapse:collapse; font-size:15px; line-height:1.6; margin:0 0 16px}
.fw-main th,.fw-main td{border:1px solid #ddd; padding:8px 10px; text-align:left; vertical-align:top}
.fw-main th{background:var(--fw-soft); font-weight:700; text-align:center}
.fw-main tr>:first-child{border-left:none}   /* 맨 왼쪽 트임 */
.fw-main tr>:last-child{border-right:none}   /* 맨 오른쪽 트임 */
.fw-box{background:var(--fw-box); border-left:4px solid var(--fw-green); padding:13px 15px; margin:15px 0; border-radius:5px}
.fw-original{background:#fbfbf6; border:1px solid #e4e1d0; padding:12px 14px; margin:14px 0; border-radius:5px; font-size:14.5px}
.fw-original .tag{display:inline-block; font-size:11px; font-weight:700; color:#8a6d00; background:#fff4d6; padding:1px 8px; border-radius:10px; margin-bottom:6px}
.fw-src{font-weight:700; font-size:13px; color:#7a6a2a; margin:0 0 8px}
.fw-meta{color:var(--fw-muted); font-size:12.5px; margin:18px 0 0; border-top:1px solid var(--fw-line); padding-top:10px}

/* ── 우측: 미니 그래프 + 엣지 ── */
.fw-side.right{position:sticky; top:64px}
.fw-graphbox{background:#fff; border:1px solid var(--fw-line); border-radius:8px; padding:10px; margin-bottom:14px}
.fw-graphbox svg{width:100%; height:auto; display:block; background:#fff; border-radius:4px}
.fw-graphbox .gnode-c{fill:var(--fw-green); stroke:#fff; stroke-width:1.5}
.fw-graphbox .gnode-n{fill:var(--fw-green); stroke:#fff; stroke-width:0.7}
.fw-graphbox .gedge{stroke:var(--fw-green); stroke-width:1.6; opacity:.5}
.fw-graphbox .gedge2{stroke:#9bbf90; stroke-width:0.5; opacity:.55}
.fw-graphbox .gdot{fill:var(--fw-green)}
.fw-graphbox a:hover .gdot{fill:var(--fw-green-dark)}
.fw-graphbox text{font-size:9.5px; fill:#202122; font-weight:600; paint-order:stroke; stroke:#fff; stroke-width:2.4px; stroke-linejoin:round}
.fw-graphbox text.c{fill:#fff; font-weight:800; stroke:none}
.fw-graphbox a:hover .gnode-n{fill:var(--fw-green-dark)}
.fw-graphbox a:hover text{fill:var(--fw-green-dark)}
.fw-edges ul{list-style:none; margin:0; padding:0}
.fw-edges li{margin:5px 0; padding-left:14px; position:relative; line-height:1.4}
.fw-edges li::before{content:"→"; position:absolute; left:0; color:var(--fw-green)}
.fw-edges .rel{display:block; font-size:11px; color:var(--fw-muted)}

/* ── 푸터 ── */
.fw-footer{border-top:1px solid var(--fw-line); background:var(--fw-side); margin-top:28px}
.fw-footer-in{max-width:1280px; margin:0 auto; padding:18px 16px; font-size:13px; color:var(--fw-muted)}
.fw-footer a{color:var(--fw-muted)} .fw-footer a:hover{color:var(--fw-green-dark)}
.fw-footer .links{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:8px}
.fw-disclaimer{font-size:12px; line-height:1.6; margin:4px 0}
.fw-ad{margin:16px 0}

/* ── 반응형 ── */
@media(max-width:1040px){
  .fw-wrap{grid-template-columns:180px minmax(0,1fr); }
  .fw-side.right{grid-column:1 / -1; position:static; display:grid; grid-template-columns:1fr 1fr; gap:14px}
  body.menu-collapsed .fw-wrap{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:720px){
  .fw-mission{display:none}
  .fw-wrap{grid-template-columns:minmax(0,1fr); gap:14px}
  .fw-side.left{position:static}
  .fw-side.right{grid-template-columns:1fr}
  .fw-main h1{font-size:22px} .fw-main h2{font-size:18.5px} .fw-main h3{font-size:16.5px}
}