/* 왼쪽 분류 목록(공용 · 대표 지시 2026-11-02). 마크업 site/partials/side_nav.html · 동작 /assets/js/side-nav.js
   액션 카드 docs/액션카드/20261102_왼쪽_분류목록_공용.md
   PC(본문 1240px 이상): 왼쪽 200px 열, 머리 아래 24px에 고정 · 줄 44px · 이름 왼쪽 · 건수 Bodoni 오른쪽 · 고른 줄 네이비 채움
   960~1239: 위쪽 가로 줄(검색 + 가로 밀기 칩) · 960 아래: 검색 한 줄 + 가로 밀기 칩 */
.rsn-body{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:48px;align-items:start}
.rsn-body>.rsn{grid-column:1;grid-row:1}
.rsn-body>.rsn-main{grid-column:2;grid-row:1}
.rsn-body:has(>.rsn[hidden]){grid-template-columns:minmax(0,1fr)}
.rsn-body:has(>.rsn[hidden])>.rsn-main{grid-column:1}
.rsn-main{min-width:0}
.rsn{position:-webkit-sticky;position:sticky;top:calc(var(--hd-h,128px) + 24px);margin-top:36px;max-height:calc(100vh - var(--hd-h,128px) - 104px);max-height:calc(100dvh - var(--hd-h,128px) - 104px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;word-break:keep-all;font-family:'Noto Sans KR',sans-serif}
.rsn[hidden]{display:none}
.rsn-q{position:relative;display:block;margin:0 0 24px}
.rsn-x{position:absolute;right:0;bottom:0;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:none;color:#6B6B6B;cursor:pointer}
.rsn-x[hidden]{display:none}
.rsn-q:has(.rsn-x:not([hidden])) input{padding-right:44px}
.rsn-q .rsn-k{display:block;padding-bottom:0;border:0}
.rsn-q input{box-sizing:border-box;width:100%;height:44px;padding:0 2px;border:0;border-bottom:1px solid #111111;border-radius:0;background:transparent;font-family:'Noto Sans KR',sans-serif;font-size:14px;font-weight:400;color:#111111;outline:none;-webkit-appearance:none;appearance:none}
.rsn .rsn-q input#fz-q{flex:none;box-sizing:border-box;width:100%;height:44px;padding:0 2px;border:0;border-bottom:1px solid #111111;font-family:'Noto Sans KR',sans-serif;font-size:14px;font-weight:400;color:#111111;box-shadow:none}
.rsn .rsn-q input#fz-q::placeholder{color:#A8A8A8;font-weight:400}
.rsn-q input:focus,.rsn .rsn-q input#fz-q:focus{border-bottom:2px solid #1B2438}
.rsn-q input::placeholder{color:#A8A8A8}
.rsn-g+.rsn-g{margin-top:24px}
.rsn-k{margin:0;padding:12px 0 10px;border-bottom:1px solid #111111;font-size:10.5px;line-height:1.4;letter-spacing:.22em;font-weight:500;color:#6B6B6B;white-space:nowrap}
.rsn-k small{margin-left:8px;font-size:11px;letter-spacing:.02em;font-weight:400;color:#8A8A8A}
.rsn-l{list-style:none;margin:0;padding:0}
.rsn-l li{margin:0;padding:0}
.rsn .rsn-f{appearance:none;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;height:auto;min-height:44px;margin:0;padding:10px;border:0;border-bottom:1px solid #EDEDED;border-radius:0;background:none;font-family:'Noto Sans KR',sans-serif;font-size:14px;line-height:1.3;font-weight:400;letter-spacing:0;color:#111111;text-align:left;text-decoration:none;cursor:pointer;white-space:normal;box-shadow:none}
.rsn .rsn-t{min-width:0}
.rsn .rsn-n{flex:none;font-family:'Bodoni Moda',serif;letter-spacing:0;opacity:1;font-size:16px;line-height:1;font-weight:500;color:#111111;font-variant-numeric:lining-nums tabular-nums;-webkit-text-stroke:.2px currentColor}
.rsn .rsn-n:empty{display:none}
.rsn .rsn-f[hidden]{display:none}
.rsn li:has(>.rsn-f[hidden]){display:none}
.rsn .rsn-f:hover .rsn-t{box-shadow:inset 0 -1px 0 #111111}
.rsn .rsn-f.on,.rsn .rsn-f[aria-pressed="true"],.rsn .rsn-f[aria-selected="true"]{background:#1B2438;color:#FFFFFF;font-weight:500}
.rsn .rsn-f.on .rsn-n,.rsn .rsn-f[aria-pressed="true"] .rsn-n,.rsn .rsn-f[aria-selected="true"] .rsn-n{color:#FFFFFF}
.rsn .rsn-f.on .rsn-t,.rsn .rsn-f[aria-pressed="true"] .rsn-t{box-shadow:none}
.rsn .rsn-f:focus-visible{outline:2px solid #1B2438;outline-offset:-2px}
.rsn-hit{margin:18px 0 0;padding:0 10px;font-size:12px;color:#6B6B6B}
.rsn-hit b{margin-right:4px;font-size:20px;font-weight:500;color:#111111}
@container mg (max-width:1239px){
.rsn-body{display:flex;flex-direction:column;min-width:0;max-width:100%}
.rsn-body>*{min-width:0;max-width:100%}
.rsn-body>.rsn{order:-1}
.rsn{position:static;max-height:none;margin-top:32px;overflow:visible;display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:24px;align-items:end}
.rsn-q{margin:0}
.rsn-q .rsn-k{display:none}
.rsn-fs{display:flex;align-items:center;gap:8px;padding:2px 0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.rsn-fs::-webkit-scrollbar{display:none}
.rsn>.rsn-fs:first-child{grid-column:1 / -1}
.rsn-g{display:flex;align-items:center;gap:8px;flex:none}
.rsn-g+.rsn-g{margin:0 0 0 8px;padding-left:16px;border-left:1px solid #E6E6E6}
.rsn-k{padding:0 4px 0 0;border:0}
.rsn-k small{display:none}
.rsn-l{display:flex;gap:8px}
.rsn .rsn-f{width:auto;min-height:44px;gap:8px;padding:0 14px;white-space:nowrap;border:1px solid #D2D2D2;font-size:13.5px}
.rsn .rsn-n{font-size:14px}
.rsn .rsn-f.on,.rsn .rsn-f[aria-pressed="true"],.rsn .rsn-f[aria-selected="true"]{border-color:#1B2438}
.rsn-hit{display:none}
}
@container mg (max-width:960px){
.rsn{display:block;margin-top:24px}
.rsn-q{margin:0 0 12px}
.rsn-q input,.rsn .rsn-q input#fz-q{font-size:15px}
.rsn-fs{margin-right:-20px;padding-right:20px}
/* 공통 찾기 줄(filter-bar)의 검색을 왼쪽 목록으로 옮긴 지면: '필터' 단추를 검색 줄 옆으로 올리지 않는다 */
.rsn-main .rvf:not(:has(>.rvf-q)) .rvf-fbtn{position:static}
.rsn-main .rvf:not(:has(>.rvf-q)){margin-top:16px}
}

/* ---------- 넓은 화면 배치(대표 지시 2026-11-02 13시: 왼쪽 목록이 생기며 답답 → 화면 폭을 쓰게) ----------
   왼쪽 목록이 서는 넓이(본문 1240 이상)에서만 지면 바깥 틀(.rsn-wide)을 넓힌다. 최대 1840px.
   오른쪽은 편의 단추(레일 접기 손잡이 · 맨 위로)를 비우는 안전 여백 72~88px. 레일이 펼쳐지면 body 폭이 줄어 1240 아래 배치(위쪽 가로 줄)로 바뀐다.
   목록과 본문 사이는 처음부터 끝까지 이어지는 가는 세로선 하나로 나눈다. */
@container mg (min-width:1240px){
.rsn-wide{max-width:1840px!important;padding-left:clamp(40px,3.2vw,64px)!important;padding-right:clamp(72px,4.6vw,88px)!important}
.rsn-wide .rsn-body{grid-template-columns:208px minmax(0,1fr);column-gap:56px;background:linear-gradient(#ECECEC,#ECECEC) 235px 0 / 1px 100% no-repeat}
.rsn-wide .rsn-body:has(>.rsn[hidden]){background:none}
.rsn-wide .rsn-k{color:#111111;font-size:11px;letter-spacing:.2em}
.rsn-wide .rsn-k small{color:#8A8A8A}
}
/* 11-04: 1440 보다 넓은 화면(1909 등)에서는 지면 틀이 머리 줄(.wrap 1320)보다 넓게 퍼지지 않게 — 머리·본문 좌우 끝을 맞춘다. 1440 이하 배치는 그대로 */
@container mg (min-width:1441px){.rsn-wide{max-width:1320px!important;padding-left:48px!important;padding-right:48px!important}}
/* 디자인 점검 11-02 A: 묶음 수 · 기준 같은 작은 보조 글씨 #8A8A8A(대비 3.45) → #6B6B6B(대비 5.3) */
.rsn-k small{color:#6B6B6B}
/* 검색 칸 포커스: 굵은 밑줄(2px)을 테두리 1 + 그림자 1 로 같은 모양 유지 — 키보드 포커스 검사(그림자·외곽선)에 잡히게 */
.rsn-q input:focus-visible,.rsn .rsn-q input#fz-q:focus-visible{border-bottom:1px solid #1B2438;box-shadow:inset 0 -1px 0 #1B2438}
.rsn-wide .rsn-k small{color:#6B6B6B}
/* 11-04 대표 지적(디자이너 브랜드관 '상자 칩 + 검정 채움이 무겁고 투박하다') 뒤 공용 원칙 '상자 → 글자 탭'(아트 디렉터, 결정로그 11-04):
   고른 줄은 채움 대신 진한 글자 + 네이비 1px 밑줄, 고르지 않은 줄은 회색 글자. 건수 Bodoni 는 그대로. 좁은 화면 가로 칩도 테두리 없이 글자로 */
.rsn .rsn-f{color:#5E5E5E}
.rsn .rsn-f:hover{color:#111111}
.rsn .rsn-f .rsn-n{color:#6B6B6B}   /* 11-09 전지면 점검: 건수 숫자가 흐림(대비 3.45) → 5.3 */
.rsn .rsn-f.on,.rsn .rsn-f[aria-pressed="true"],.rsn .rsn-f[aria-selected="true"]{background:none;color:#111111;font-weight:500}
.rsn .rsn-f.on .rsn-t,.rsn .rsn-f[aria-pressed="true"] .rsn-t,.rsn .rsn-f[aria-selected="true"] .rsn-t{box-shadow:inset 0 -1px 0 #1B2438}
.rsn .rsn-f.on .rsn-n,.rsn .rsn-f[aria-pressed="true"] .rsn-n,.rsn .rsn-f[aria-selected="true"] .rsn-n{color:#1B2438}
@container mg (max-width:1239px){
.rsn-g{gap:4px}
.rsn-l{gap:20px}
.rsn .rsn-f{min-height:44px;gap:6px;padding:0;border:0}
/* 11-05 광고 디자인팀: 글자 탭의 짧은 이름('독자' · '신청' · '기초 2')은 누르는 폭이 25~39px → 보이는 모양은 그대로, 누르는 범위만 가운데 기준 최소 44px(::after).
   칩 사이 20px 이므로 양옆으로 늘어나는 몫(최대 9.5px)이 이웃 칩과 겹치지 않는다 */
.rsn .rsn-f{position:relative}
.rsn .rsn-f::after{content:'';position:absolute;top:0;bottom:0;left:50%;width:100%;min-width:44px;transform:translateX(-50%)}
.rsn-l li:first-child>.rsn-f::after{left:0;transform:none}
.rsn .rsn-f.on,.rsn .rsn-f[aria-pressed="true"],.rsn .rsn-f[aria-selected="true"]{border:0}
.rsn .rsn-n{font-size:13px}
.rsn-g+.rsn-g{margin-left:12px;padding-left:20px}
.rsn-k{padding-right:10px;font-size:10.5px;color:#6B6B6B}
}