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


/* 상단 헤더 */
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);}
.wk-head{padding:clamp(118px,15vh,172px) 0 clamp(30px,4vw,50px);}
.wk-head .eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.28em;color:var(--red);margin:0 0 18px;}
.wk-head h1{font-size:clamp(2.4rem,6vw,3.6rem);font-weight:800;letter-spacing:-.035em;line-height:1.08;margin:0 0 20px;color:var(--ink);}
.wk-head .lead{font-size:clamp(1rem,1.8vw,1.2rem);color:var(--gray);margin:0;max-width:52ch;line-height:1.7;}

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

/* ── 좌측 카테고리 리스트 ── */
.wk-side{position:sticky;top:150px;margin-left:15px;}
.wk-filter{list-style:none;margin:0;padding:0;margin-top: 50px;}
.wk-filter li{margin:0 0 clamp(18px,2.4vw,30px);}
.wkf{display:inline-flex;align-items:flex-start;gap:12px;font-size:19px;font-weight:500;color:var(--ink-2);background:none;border:0;padding:0;cursor:pointer;letter-spacing:-.01em;line-height:1.15;text-align:left;transition:color .18s;}
.wkf::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--gray-2);margin-top:7px;flex:none;transition:background .18s;}
.wkf .label{position:relative;padding-bottom:3px;border-bottom:2px solid transparent;transition:border-color .18s;}
.wkf .cnt{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--gray-2);vertical-align:super;margin-left:3px;}
.wkf:hover{color:var(--ink);}
.wkf.on{font-weight:800;color:var(--ink);}
.wkf.on::before{background:var(--red);}
.wkf.on .label{border-bottom-color:var(--ink);}
.wkf.on .cnt{color:var(--red);}

/* ── 우측 이미지 그리드 ── */
.wk-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.5vw,52px) clamp(20px,2.6vw,36px);}
.wk{display:block;color:inherit;text-decoration:none;}
.wk:nth-child(odd){margin-top:clamp(0px,4vw,58px);}
.wk.hide{display:none;}
.wk-img{overflow:hidden;border-radius:18px;border: 1px solid rgba(230, 227, 227, 0.823); background:var(--bg);aspect-ratio:4/3;position:relative;}
.wk-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.wk:hover .wk-img img{transform:scale(1.05);}
.wk-cap{padding:18px 2px 0;}
.wk-cap .c{display:inline-block;font-family:var(--mono);font-size:.775rem;letter-spacing:.-01em;color:var(--red);background:#fbe7e7;padding:0 5px;border-radius:5px;}
.wk-cap h3{font-size:clamp(1.1rem,1.9vw,1.45rem);font-weight:700;letter-spacing:-.02em;margin:9px 0 7px;color:var(--ink);line-height:1.34;transition:color .18s;}
.wk:hover .wk-cap h3{color:var(--red);}
.wk-cap p{font-size:14px;color:var(--gray);margin:0;line-height:1.6;}
.wk-empty{grid-column:1/-1;text-align:center;color:var(--gray);font-size:15px;padding:60px 0;display:none;}

@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:15px;}
  .wk-filter{display:flex;flex-wrap:wrap;gap:2px 22px;margin-top: 15px;}
  .wk-filter li{margin:0 0 5px;}
  .wkf{font-size:13px;gap: 7px;}
  .wk-grid{gap:30px 22px;}
}
@media (max-width:540px){
  .wk-grid{grid-template-columns:1fr;}
  .wk:nth-child(odd){margin-top:0;}
}

/* ═══════════ 다크 버전 (프로젝트 리스트) ═══════════ */
body{background:radial-gradient(120% 760px at 50% -60px,rgba(255,255,255,.20) 0%,rgba(255,255,255,.13) 24%,rgba(255,255,255,.065) 52%,rgba(255,255,255,.025) 74%,rgba(255,255,255,0) 100%) no-repeat,#0F1013;}

/* 헤더 텍스트 */
.wk-head h1,.sb-hero h1{color:#FFFFFF;}
.wk-head .lead,.sb-hero .lead{color:#A6ADB6;}
.sb-hero h1 em{color:var(--red);}
.sb-hero .crumb,.sb-hero .crumb a{color:#6B7480;}

/* 좌측 카테고리 */
.wkf{color:#B4BBC4;}
.wkf::before{background:#5A6069;}
.wkf:hover{color:#FFFFFF;}
.wkf.on{color:#FFFFFF;}
.wkf.on::before{background:var(--red);}
.wkf.on .label{border-bottom-color:#FFFFFF;}
.wkf .cnt{color:#8A929B;}
.wkf.on .cnt{color:var(--red);}

/* 카드 */
.wk-img{border:1px solid rgba(255,255,255,.08);background:#17191E;}
.wk-cap .c{background:#34373D;color:#E9ECF0;padding:3px 10px;border-radius:8px;}
.wk-cap h3{color:#F2F4F7;}
.wk:hover .wk-cap h3{color:#FF6B62;}
.wk-cap p{color:#8A929B;}
.wk-empty{color:#8A929B;}

/* 상단 네비 — 다크 보정 (상세 다크와 동일) */
.nav-menu,.nav.scrolled .nav-menu{color:rgba(255,255,255,.85);}
.nav-menu a:hover,.nav.scrolled .nav-menu a:hover{color:#fff;}
.nav-menu a.current{color:var(--red);}
.burger span,.nav.scrolled .burger span{background:#fff;}
.nav-in::after{background:conic-gradient(from 205deg,
    rgba(255,255,255,.46) 0 8%,
    rgba(255,130,110,.42) 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,.46) 96% 100%);}

@media (max-width:820px){
  .wk-side{border-bottom-color:rgba(255,255,255,.12);}
}