/* ===== WORKS 서브페이지 (may-tree 스타일: 좌 카테고리 · 우 이미지 그리드) ===== */

/* 라이트 페이지용 상단 메뉴바 (흰 배경 · 선명한 색) */
/* 라이트 페이지 보정 — 글래스 캡슐 링만 풀 명도로 */
.nav-in::after{background:conic-gradient(from 205deg,
    rgba(255,255,255,.45) 0 8%,
    rgba(255,130,110,.60) 12%,
    rgba(255,225,130,.38) 17%,
    rgba(255,255,255,.21) 24% 46%,
    rgba(130,230,255,.38) 53%,
    rgba(170,140,255,.38) 59%,
    rgba(255,255,255,.38) 67% 84%,
    rgba(120,255,190,.32) 90%,
    rgba(255,255,255,.45) 96% 100%);}
.nav.scrolled .nav-in{background:transparent;}
.nav-menu,.nav.scrolled .nav-menu{color:var(--ink-2);}
.nav-menu a:hover,.nav.scrolled .nav-menu a:hover,.nav-menu a.current{color:var(--red);}
.nav-menu a.current{font-weight:800;position:relative;}
.nav-menu a.current::after{content:"";position:absolute;top:-3px;right:-10px;width:6px;height:6px;border-radius:999px;background:var(--red);}
.burger span,.nav.scrolled .burger span{background:var(--ink);}
.nav.open .nav-menu>a,.nav.open .nav-item .nav-top{color:var(--ink-2);}

/* 상단 헤더 */
body{background:radial-gradient(104% 532px at 50% -40px,#FCE8E3 0%,#FCE8E3 26%,rgba(252,232,227,.72) 56%,rgba(252,232,227,0) 100%) no-repeat,var(--bg);}
.shell-left { margin-left: 10px; }

/* ── AOS fade-up 커스텀 (공통) ──
   sub-layout.css 가 aos.css 보다 먼저 로드되므로 'body' 접두로 우선순위를 한 단계 올려
   시작 거리(40px)는 이기고, 도착 상태(aos-animate)는 건드리지 않도록 함. */
body [data-aos="fade-up"]{transform:translate3d(0,40px,0);}
[data-aos]{transition-timing-function:cubic-bezier(.16,1,.3,1)!important;}

/* ── 히어로 ── */
.sb-hero{padding:clamp(120px,15vh,180px) 0 clamp(2px,4vw,0px);}
.sb-hero .crumb{font-family:var(--mono);font-size:12px;color:var(--gray-2);letter-spacing:.03em;margin:0 0 20px;}
.sb-hero .crumb a{color:var(--gray-2);}
.sb-hero .crumb a:hover{color:var(--red);}
.sb-hero .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.24em;color:var(--red);margin:0 0 18px 4px;text-transform:uppercase;}
.sb-hero h1{font-size:clamp(1.8rem,5.5vw,3.2rem);font-weight:800;letter-spacing:-.035em;line-height:1.2;margin:0 0 4px;color:var(--ink);}
.sb-hero h1 em{font-style:normal;color:var(--red);}
.sb-hero .lead{font-size:clamp(1.01rem,1.9vw,1.02rem);color:var(--gray);line-height:1.45;margin:15px 0 0;max-width:55ch;}

/* ── 2단: 좌 메뉴 · 우 상세 ── */
.sb-wrap{display:grid;grid-template-columns:clamp(230px,26vw,320px) 1fr;gap:clamp(30px,5vw,80px);align-items:start;padding-top:0;}

/* 2단 레이아웃 */
.sb-head{display:grid;grid-template-columns:clamp(220px,24vw,280px) 1fr;gap:clamp(28px,5vw,72px);align-items:start;padding-top:0;}

/* ── 우측 상단바로가기 ── */
.to-top.show {
    bottom: calc(clamp(16px, 3vw, 28px) + 70px);
}

/* ── 우측 이미지 그리드 ── */


@media (max-width:820px){
  .wk-wrap{grid-template-columns:1fr;gap:26px;}
  .wk-side{position:static;top:auto;border-bottom:1px solid var(--line);padding-bottom:6px;}
  .wk-filter{display:flex;flex-wrap:wrap;gap:16px 22px;}
  .wk-filter li{margin:0 0 12px;}
  .wkf{font-size:17px;}
  .wk-grid{gap:30px 22px;}
}
@media (max-width:540px){
  .wk-grid{grid-template-columns:1fr;}
  .wk:nth-child(odd){margin-top:0;}
}