/* 초신성 연논술 — 공용 좌측 사이드 메뉴판 (코너 홈 .side 와 동일 룩·동작)
   대상: _book 계열(참고서 등) 페이지 중 .wrap 컨테이너를 쓰는 곳.
   sidenav.js가 DOM을 주입하면, 이 CSS가 배치·접기/펴기·플라이아웃을 담당한다. */

.side{position:fixed;left:0;top:0;height:100vh;width:246px;background:linear-gradient(180deg,#fffdf8,#f7f2e9);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:60;transition:width .22s ease;box-shadow:2px 0 18px rgba(31,42,42,.05)}
.side-brand{position:relative;display:flex;align-items:center;gap:11px;padding:16px 16px 15px;background:radial-gradient(circle at 78% 20%,rgba(195,141,86,.4),transparent 55%),linear-gradient(145deg,#1f2a2a,#23413e 60%,#2f5d62);color:#f4f1eb;overflow:hidden;text-decoration:none}
.side-brand::after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.7) 1px,transparent 1.3px);background-size:22px 22px;opacity:.12}
.sb-mono{width:40px;height:40px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:900;font-size:20px;color:#fff;background:radial-gradient(circle at 34% 28%,#5b9b8f,#2f5d62 62%,#16211f);z-index:1}
.sb-tx{z-index:1;min-width:0;overflow:hidden;white-space:nowrap;padding-right:22px}
.sb-t{font-family:var(--serif);font-weight:900;font-size:1.08rem;line-height:1.15;display:block}
.sb-t .nv{color:#f3c98a}
.sb-s{font-size:11px;color:#cfe2dd;letter-spacing:.03em;margin-top:1px;display:block}
.sb-collapse{position:absolute;right:8px;top:8px;z-index:2;width:24px;height:24px;border-radius:7px;border:none;background:rgba(255,255,255,.16);color:#fff;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sb-collapse:hover{background:rgba(255,255,255,.32)}
.side-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 10px 16px}
.side-nav::-webkit-scrollbar{width:7px}.side-nav::-webkit-scrollbar-thumb{background:#e0d7c6;border-radius:9px}
.nav-grp{margin-top:12px}.nav-grp:first-child{margin-top:4px}
.nav-lb{font-size:10.5px;font-weight:800;color:#a99a80;letter-spacing:.08em;padding:4px 12px 5px}
.nav-lb .lb-hint{font-weight:600;color:#c3b89f}
.nav-i{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:11px;font-size:13.5px;font-weight:700;color:#41494a;position:relative;transition:.13s;white-space:nowrap;text-decoration:none;cursor:pointer}
.nav-i:hover{background:var(--peach);color:var(--accent-deep)}
.nav-i.active{background:linear-gradient(100deg,rgba(47,93,98,.13),rgba(195,141,86,.14));color:var(--deep)}
.nav-i.active::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3.5px;border-radius:0 4px 4px 0;background:linear-gradient(var(--deep),var(--accent))}
.nav-i .ni-ic{font-size:17px;width:24px;text-align:center;flex:none}
.nav-i .ni-tx{overflow:hidden;text-overflow:ellipsis}
.nav-i .ni-badge{margin-left:auto;font-size:10px;font-weight:800;color:#fff;background:#c0392b;border-radius:999px;padding:1px 7px}
.nav-i.teacher{color:#b23a2e}.nav-i.teacher:hover{background:#fbe9e6;color:#a5271b}
.side-foot{border-top:1px solid var(--line);padding:9px 10px;display:flex;gap:6px}
.side-foot a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:700;color:#6b655c;padding:9px;border-radius:10px;white-space:nowrap;overflow:hidden;text-decoration:none}
.side-foot a:hover{background:var(--peach);color:var(--accent-deep)}
.side.collapsed{width:70px}
.side.collapsed .sb-tx,.side.collapsed .nav-lb,.side.collapsed .ni-tx,.side.collapsed .fo-tx,.side.collapsed .ni-badge,.side.collapsed .ni-caret{display:none}
.side.collapsed .side-brand{justify-content:center;padding:16px 8px}
.side.collapsed .nav-i{justify-content:center;padding:10px 0}
.side.collapsed .side-foot{flex-direction:column}
.side.collapsed .sb-collapse{right:50%;transform:translateX(50%);top:auto;bottom:-11px;background:var(--accent);box-shadow:0 2px 6px rgba(0,0,0,.2)}

/* 하위 카테고리: 마우스 올리면 펼침(데스크톱=플라이아웃 / 모바일=탭) */
.cat{position:relative}
.ni-caret{margin-left:auto;color:#b7ad9a;font-size:12px;transition:transform .15s,color .15s;flex:none}
.cat-sub{display:none}
.sub-t{font-family:var(--serif);font-weight:800;font-size:12.5px;color:var(--deep);padding:4px 10px 8px;border-bottom:1px solid var(--line);margin-bottom:5px}
.sub-i{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:9px;font-size:13px;font-weight:600;color:#50585a;white-space:nowrap;text-decoration:none}
.sub-i:hover{background:var(--peach);color:var(--accent-deep)}
.sub-i.active{color:var(--deep);font-weight:800}
.sub-i .si-ic{font-size:14px;width:18px;text-align:center;flex:none}
@keyframes booksidefly{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
@media(min-width:961px){
  .cat-sub.show{display:block;position:fixed;min-width:220px;max-width:264px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px rgba(31,42,42,.22);padding:9px 8px 8px;z-index:90;animation:booksidefly .13s ease}
  .cat.hovering>.nav-i{background:var(--peach);color:var(--accent-deep)}
  .cat.hovering>.nav-i .ni-caret{color:var(--accent);transform:translateX(2px)}
}
@media(max-width:960px){
  .cat-sub.show{display:block;padding:2px 0 8px 30px}
  .cat-sub .sub-t{display:none}
  .cat.open>.nav-i .ni-caret{transform:rotate(90deg)}
}

.side-scrim{position:fixed;inset:0;background:rgba(31,42,42,.5);backdrop-filter:blur(2px);display:none;z-index:55}
.side-scrim.on{display:block}

/* 본문 컨테이너를 사이드바 폭만큼 밀기 (형제 결합자) */
.wrap{margin-left:246px;transition:margin-left .22s ease}
.side.collapsed ~ .wrap{margin-left:70px}

.tb-burger{display:none;width:36px;height:36px;background:var(--card);border:1px solid var(--line);border-radius:11px;font-size:17px;cursor:pointer;align-items:center;justify-content:center;flex:none}

/* 사이드바가 생기면 상단의 작은 아이콘 메뉴판(book-nav)은 중복이므로 숨긴다 */
#bookSide ~ .wrap .book-nav{display:none}

@media(max-width:960px){
  .side{transform:translateX(-100%);box-shadow:none}
  .side.open{transform:translateX(0);box-shadow:8px 0 40px rgba(31,42,42,.3)}
  .wrap,.side.collapsed ~ .wrap{margin-left:0}
  .tb-burger{display:inline-flex}
  .sb-collapse{display:none}
}

@media print{ .side,.side-scrim,.tb-burger{display:none!important} .wrap{margin-left:0!important} }