/* 아인 입찰 위키 — 관인(官印) 디자인 시스템 · 제3판(멀티페이지) */
:root{
  --hanji:#f2efe6; --paper:#faf8f1; --meok:#26221c; --meok-soft:#6b6357;
  --inju:#b5342a; --cheong:#2c5c7a; --line:#cfc7b4; --line-soft:#e3dcc9;
  --code:#e9e2d0; --green:#3e6b4f; --warn:#96690f;
  --shadow:0 6px 24px rgba(38,34,28,.14); --shadow-sm:0 2px 8px rgba(38,34,28,.10);
  --serif:'Nanum Myeongjo','Noto Serif KR','Apple Myungjo',serif;
  --sans:'Pretendard','Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  --nav-w:250px; --toc-w:220px; --read:47rem;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--hanji);color:var(--meok);font-family:var(--sans);
  font-size:16.5px;line-height:1.82;-webkit-font-smoothing:antialiased;}
.serif{font-family:var(--serif);}
a{color:var(--cheong);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ── 상단바 ── */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;
  height:56px;padding:0 20px;background:rgba(242,239,230,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);}
.topbar .brand{font-family:var(--serif);font-weight:800;font-size:1.05rem;color:var(--meok);white-space:nowrap;}
.topbar .brand .seal{color:var(--inju);border:1.6px solid var(--inju);border-radius:4px;
  padding:0 5px;font-size:.72rem;margin-right:7px;transform:rotate(-3deg);display:inline-block;}
.topbar .crumb{font-size:.83rem;color:var(--meok-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.topbar .crumb a{color:var(--meok-soft);}
.topbar .search{margin-left:auto;position:relative;}
.topbar .search input{width:200px;max-width:44vw;padding:6px 12px 6px 30px;border:1px solid var(--line);
  border-radius:99px;background:var(--paper);font-family:var(--sans);font-size:.85rem;color:var(--meok);}
.topbar .search input:focus{outline:none;border-color:var(--inju);width:250px;}
.topbar .search::before{content:"🔍";position:absolute;left:10px;top:6px;font-size:.8rem;opacity:.5;}
.search-results{position:absolute;top:38px;right:0;width:340px;max-width:80vw;max-height:60vh;overflow-y:auto;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
  padding:6px;display:none;}
.search-results.on{display:block;}
.search-results a{display:block;padding:8px 12px;border-radius:7px;color:var(--meok);}
.search-results a:hover{background:var(--code);text-decoration:none;}
.search-results .k{font-size:.7rem;color:var(--inju);font-weight:700;margin-right:6px;}
.search-results .d{font-size:.78rem;color:var(--meok-soft);display:block;}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:7px;
  padding:5px 9px;font-size:1rem;cursor:pointer;color:var(--meok);}

/* ── 3단 레이아웃 ── */
.shell{display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr) var(--toc-w);
  max-width:1400px;margin:0 auto;gap:0;}
nav.side{border-right:1px solid var(--line);padding:22px 12px 60px 18px;
  position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto;}
nav.side .g{margin:16px 0 4px;font-size:.68rem;letter-spacing:.16em;color:var(--inju);font-weight:800;}
nav.side a{display:block;color:var(--meok-soft);font-size:.85rem;padding:4px 9px;border-radius:6px;
  border-left:2px solid transparent;line-height:1.5;}
nav.side a:hover{background:var(--code);color:var(--meok);text-decoration:none;}
nav.side a.cur{background:var(--code);color:var(--meok);border-left-color:var(--inju);font-weight:700;}
nav.side a .n{color:var(--inju);font-family:var(--serif);margin-right:6px;font-size:.8rem;}

main{min-width:0;padding:30px 46px 100px;max-width:calc(var(--read) + 92px);}
aside.toc{padding:30px 18px 60px;position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto;
  border-left:1px solid var(--line-soft);font-size:.82rem;}
aside.toc .lbl{font-size:.68rem;letter-spacing:.14em;color:var(--meok-soft);font-weight:800;margin:0 0 8px;}
aside.toc a{display:block;color:var(--meok-soft);padding:3px 0 3px 10px;border-left:2px solid var(--line);line-height:1.45;}
aside.toc a:hover{color:var(--meok);border-left-color:var(--inju);text-decoration:none;}
aside.toc .mini-graph{margin-top:26px;}
aside.toc .mini-graph svg{width:100%;height:170px;border:1px solid var(--line-soft);border-radius:8px;background:var(--paper);}

/* ── 본문 타이포 ── */
main h1{font-family:var(--serif);font-size:2rem;font-weight:800;line-height:1.25;margin:0 0 4px;}
main .eyebrow{font-size:.74rem;letter-spacing:.22em;color:var(--inju);font-weight:800;text-transform:uppercase;}
main .lede{font-size:1.06rem;color:var(--meok-soft);max-width:var(--read);margin:12px 0 8px;}
main h2{font-family:var(--serif);font-size:1.4rem;font-weight:800;margin:44px 0 6px;padding-top:16px;border-top:2px solid var(--meok);}
main h3{font-size:1.08rem;margin:28px 0 6px;border-left:4px solid var(--inju);padding-left:10px;}
main h4{font-size:.98rem;margin:18px 0 4px;}
main p{margin:11px 0;max-width:var(--read);}
main ul,main ol{max-width:var(--read);padding-left:22px;}
main li{margin:7px 0;}
hr{border:none;border-top:1px solid var(--line);margin:34px 0;}

/* ── 도장 ── */
.stamp{display:inline-block;border:2px solid;padding:0 8px;font-weight:800;font-size:.72rem;
  transform:rotate(-2.5deg);border-radius:5px;letter-spacing:.16em;vertical-align:middle;
  font-family:var(--serif);margin:0 3px;line-height:1.65;white-space:nowrap;}
.st-c{color:var(--inju);border-color:var(--inju);}
.st-r{color:var(--cheong);border-color:var(--cheong);}
.st-h{color:var(--meok-soft);border-color:var(--meok-soft);}
.st-o{color:var(--green);border-color:var(--green);}

/* ── 위키링크 & 팝오버 ── */
a.wl{color:var(--meok);text-decoration:none;border-bottom:1.5px solid var(--line);
  padding-bottom:.5px;cursor:help;transition:background .12s,border-color .12s;}
a.wl:hover{background:#efe6d0;border-bottom-color:var(--inju);text-decoration:none;}
a.wl.term{border-bottom-style:dotted;border-bottom-color:var(--cheong);}
a.wl.term:hover{border-bottom-color:var(--inju);}
.popover{position:fixed;z-index:80;width:330px;max-width:86vw;background:var(--paper);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:14px 16px;
  opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .13s,transform .13s;}
.popover.on{opacity:1;transform:translateY(0);pointer-events:auto;}
.popover .pk{font-size:.68rem;font-weight:800;letter-spacing:.1em;color:var(--inju);text-transform:uppercase;}
.popover .pt{font-family:var(--serif);font-weight:800;font-size:1.05rem;margin:2px 0 5px;}
.popover .pt .en{font-weight:400;font-size:.78rem;color:var(--meok-soft);margin-left:6px;}
.popover .pd{font-size:.86rem;color:var(--meok-soft);line-height:1.6;}
.popover .pmore{display:inline-block;margin-top:8px;font-size:.78rem;color:var(--cheong);font-weight:700;}

/* ── 카드/표/콜아웃 (본문 컴포넌트) ── */
table{border-collapse:collapse;width:100%;margin:14px 0 22px;font-size:.87rem;background:var(--paper);
  display:block;overflow-x:auto;}
th,td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top;min-width:60px;}
th{background:var(--code);font-weight:700;}
.num{text-align:right;font-variant-numeric:tabular-nums;}
code{background:var(--code);padding:1.5px 6px;border-radius:4px;font-size:.85em;font-variant-numeric:tabular-nums;
  font-family:'SF Mono',ui-monospace,monospace;}
.formula{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--inju);
  padding:12px 18px;margin:14px 0;font-size:1rem;border-radius:0 8px 8px 0;max-width:var(--read);}
.callout{background:#ece4d2;border-radius:10px;padding:14px 18px;margin:16px 0;max-width:var(--read);}
.callout b:first-child{color:var(--inju);}
.caution{background:var(--paper);border:1.5px solid var(--warn);border-radius:10px;padding:12px 18px;margin:14px 0;max-width:var(--read);}
.caution::before{content:"⚠ 혼동 주의";font-weight:800;color:var(--warn);display:block;font-size:.78rem;letter-spacing:.08em;margin-bottom:4px;}
.note{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 18px;margin:14px 0;max-width:var(--read);font-size:.9rem;}
figure{margin:20px 0;max-width:880px;}
figure svg{width:100%;display:block;background:var(--paper);border:1px solid var(--line);border-radius:10px;}
figcaption{text-align:center;font-size:.79rem;color:var(--meok-soft);margin-top:6px;}
.story{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:16px 20px;margin:14px 0;max-width:var(--read);}
.story h4{margin:0 0 6px;}
.tag{display:inline-block;font-size:.71rem;padding:1px 9px;border-radius:99px;background:var(--code);color:var(--meok-soft);margin-right:6px;font-weight:700;}

/* ── 백링크 & 관계 (페이지 하단) ── */
.relbox{margin:48px 0 0;padding:20px 22px;background:var(--paper);border:1px solid var(--line);border-radius:12px;max-width:var(--read);}
.relbox h4{margin:0 0 10px;font-size:.9rem;letter-spacing:.06em;color:var(--inju);font-weight:800;}
.relbox .chips a{display:inline-block;margin:0 6px 8px 0;padding:4px 11px;background:var(--code);
  border-radius:99px;font-size:.82rem;color:var(--meok);border:1px solid var(--line);}
.relbox .chips a:hover{background:var(--hanji);border-color:var(--inju);text-decoration:none;}
.relbox .empty{font-size:.83rem;color:var(--meok-soft);}
.pager{display:flex;justify-content:space-between;gap:14px;margin:36px 0 0;max-width:var(--read);}
.pager a{flex:1;padding:12px 16px;background:var(--paper);border:1px solid var(--line);border-radius:10px;color:var(--meok);}
.pager a:hover{border-color:var(--inju);text-decoration:none;}
.pager .dir{font-size:.7rem;color:var(--meok-soft);letter-spacing:.1em;}
.pager .tt{font-weight:700;font-size:.92rem;}
.pager .next{text-align:right;}

/* ── 용어 페이지 전용 ── */
.termhead{border-bottom:2px solid var(--meok);padding-bottom:14px;margin-bottom:8px;}
.termhead .en{font-size:.9rem;color:var(--meok-soft);font-weight:400;}
.termhead .tags{margin-top:8px;}

/* ── 홈 표지 & 그래프 ── */
.cover{padding:20px 0 30px;border-bottom:3px double var(--meok);margin-bottom:10px;position:relative;}
.cover h1{font-family:var(--serif);font-size:2.5rem;line-height:1.22;margin:8px 0 12px;font-weight:800;}
.cover .motto{font-family:var(--serif);font-size:1.2rem;}
.cover .motto b{color:var(--inju);}
.cover .bigseal{position:absolute;right:0;top:14px;width:92px;height:92px;border:3.5px solid var(--inju);
  border-radius:12px;transform:rotate(4deg);display:flex;align-items:center;justify-content:center;
  color:var(--inju);font-family:var(--serif);font-weight:800;font-size:1.35rem;text-align:center;line-height:1.15;opacity:.9;}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:16px 0;font-size:.85rem;color:var(--meok-soft);align-items:center;}
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:18px 0;}
.pathcard{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px 18px;}
.pathcard .step{font-size:.72rem;color:var(--inju);font-weight:800;letter-spacing:.1em;}
.pathcard h3{border:none;padding:0;margin:6px 0;font-size:1.02rem;}
.pathcard p{font-size:.85rem;color:var(--meok-soft);margin:4px 0;}
.pathcard a{font-size:.83rem;font-weight:700;}
#graph-wrap{margin:24px 0;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;position:relative;}
#graph-wrap svg{width:100%;display:block;}
#graph-wrap .ghint{position:absolute;bottom:10px;left:14px;font-size:.72rem;color:var(--meok-soft);pointer-events:none;}
#graph-wrap.gfull{position:fixed;inset:0;z-index:100;border-radius:0;margin:0;border:none;background:var(--hanji);}
#graph-wrap.gfull .ghint{bottom:16px;}
.gcontrols{position:absolute;top:12px;right:14px;display:flex;gap:6px;z-index:2;}
.gcontrols button{width:34px;height:34px;border:1px solid var(--line);background:var(--paper);color:var(--meok);
  border-radius:8px;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);}
.gcontrols button:hover{border-color:var(--inju);color:var(--inju);}
.graph-node{cursor:pointer;}
.graph-node text{font-family:var(--sans);}
.idx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 26px;}
.idx-grid .col h4{font-size:.78rem;letter-spacing:.12em;color:var(--inju);margin:16px 0 6px;font-weight:800;}
.idx-grid .col a{display:block;padding:3px 0;font-size:.9rem;color:var(--meok);}

footer.wf{margin-top:70px;padding:18px 0;border-top:2px solid var(--meok);font-size:.8rem;color:var(--meok-soft);}
:focus-visible{outline:2.5px solid var(--inju);outline-offset:2px;border-radius:3px;}

/* ── 반응형 ── */
@media (max-width:1180px){
  .shell{grid-template-columns:var(--nav-w) minmax(0,1fr);}
  aside.toc{display:none;}
}
@media (max-width:820px){
  .shell{grid-template-columns:1fr;}
  nav.side{position:fixed;left:0;top:56px;width:280px;max-width:84vw;height:calc(100vh - 56px);
    background:var(--hanji);z-index:35;transform:translateX(-102%);transition:transform .22s;box-shadow:var(--shadow);}
  nav.side.open{transform:translateX(0);}
  .menu-btn{display:block;}
  main{padding:22px 18px 80px;}
  .topbar .crumb{display:none;}
  .cover h1{font-size:1.8rem;} .cover .bigseal{width:64px;height:64px;font-size:1rem;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;}}
