/* 와우씨씨엠 리뉴얼 · 게시판 위·아래 (왼쪽 메뉴 + 페이지 제목)
 * renew.css 다음에 불러옵니다.
 */
.sub{padding:36px 0 64px}
.sub-in{display:grid;grid-template-columns:220px minmax(0,1fr);gap:44px;align-items:start}
.sub-body{min-width:0}

/* 왼쪽 메뉴 */
.lnb-hd{padding:0 0 16px;border-bottom:2px solid var(--ink)}
.lnb-hd h2{display:flex;align-items:center;gap:10px;margin:0;font-size:25px;font-weight:800;letter-spacing:-.03em;color:var(--brand)}
.lnb-hd h2::before{content:"";flex:none;width:4px;height:22px;background:var(--brand)}
.lnb-hd p{margin:2px 0 0 14px;font-size:13px;color:var(--mute);letter-spacing:.01em}
.lnb-nav a{display:flex;align-items:center;justify-content:space-between;padding:13px 6px 13px 14px;border-bottom:1px solid var(--line);font-size:15.5px;font-weight:600;color:var(--sub)}
.lnb-nav a .ar{font-size:18px;line-height:1;color:transparent;transition:color .2s}
.lnb-nav a:hover{color:var(--brand);background:var(--brand-soft)}
.lnb-nav a:hover .ar{color:var(--brand)}
.lnb-nav a.on{color:var(--brand);font-weight:800}
.lnb-nav a.on .ar{color:var(--brand)}
.lnb-side{display:grid;gap:10px;margin-top:24px}
.lnb-side a{display:block;aspect-ratio:3/2;overflow:hidden;border:1px solid var(--line-2)}
.lnb-side img{width:100%;height:100%;object-fit:cover}

/* 페이지 제목 + 현재 위치 */
.sub-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:16px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.sub-top h1{margin:0;font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.25}
.sub-top h1 small{margin-left:8px;font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--mute)}
.crumb{flex:none;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--mute)}
.crumb a:hover{color:var(--brand)}
.crumb b{font-weight:700;color:var(--sub)}

/* 게시판 스킨의 목록 제목은 위 페이지 제목과 겹치므로 숨김 (글쓰기·보기 화면 제목은 그대로) */
.sub-content .rn-board > .rn-head .rn-title,
.sub-content .rs-board > .rs-head .rs-h,
.sub-content .rc-board > .rc-head .rc-h,
.sub-content .rp-board > .rp-head > div{display:none}
.sub-content .rn-board > .rn-head,
.sub-content .rs-board > .rs-head,
.sub-content .rc-board > .rc-head,
.sub-content .rp-board > .rp-head{justify-content:flex-end;border-bottom:0;padding-bottom:0}
.sub-content .rp-board > .rp-head:not(:has(a)){display:none}

/* 넓은 화면 메뉴(영상 등): 왼쪽 메뉴 없이 한 칸 */
.sub-wide .sub-in{grid-template-columns:minmax(0,1fr)}
.sub-wide .sub-top{margin-bottom:8px;border-bottom:0}

/* 좁은 화면: 왼쪽 메뉴를 위쪽 가로 탭으로 */
@media (max-width:1100px){
  .sub-in{grid-template-columns:190px minmax(0,1fr);gap:28px}
  .sub-wide .sub-in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .sub{padding:0 0 40px}
  .sub .in.sub-in{display:block;padding:0}
  .lnb{background:#fff;border-bottom:1px solid var(--line)}
  .lnb-hd{display:none}
  .lnb-nav{display:flex;overflow-x:auto;scrollbar-width:none;padding:0 12px}
  .lnb-nav::-webkit-scrollbar{display:none}
  .lnb-nav a{flex:none;padding:13px 10px;border:0;border-bottom:3px solid transparent;font-size:15px}
  .lnb-nav a .ar{display:none}
  .lnb-nav a.on{border-bottom-color:var(--brand)}
  .lnb-nav a:hover{background:none}
  .lnb-side{display:none}
  .sub-body{padding:18px 16px 0}
  .sub-top{display:block;margin-bottom:18px;padding-bottom:12px}
  .sub-top h1{font-size:22px}
  .sub-top h1 small{display:block;margin:4px 0 0;font-size:13.5px}
  .crumb{display:none}
}
@media (prefers-reduced-motion:reduce){ .lnb-nav a .ar{transition:none} }

/* 프로그램 게시판(샤인데이 방송안내 등): 왼쪽 메뉴를 프로그램 색 카드로 */
.lnb-prog .lnb-hd{padding:16px 16px 18px;border-bottom:0;background:linear-gradient(160deg,var(--pc),color-mix(in srgb,var(--pc) 78%,#000))}
.lnb-prog .lnb-hd h2{color:var(--pi);font-size:22px}
.lnb-prog .lnb-hd h2::before{display:none}
.lnb-prog .lnb-hd p{margin:2px 0 0;color:var(--pi);opacity:.85;font-size:18px;font-weight:800;letter-spacing:-.01em}
.lnb-prog .lnb-nav a:hover,.lnb-prog .lnb-nav a.on{color:color-mix(in srgb,var(--pc) 78%,#000);background:color-mix(in srgb,var(--pc) 9%,#fff)}
.lnb-prog .lnb-nav a.on .ar,.lnb-prog .lnb-nav a:hover .ar{color:color-mix(in srgb,var(--pc) 78%,#000)}
