/* 수행실적 보드: 카테고리별 갤러리/목록 */
.works-filter{display:flex;flex-wrap:nowrap;gap:8px;margin-bottom:28px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.works-filter button{
  appearance:none;border:1px solid #cfd5d1;border-radius:999px;padding:9px 13px;
  font:inherit;font-size:12px;font-weight:800;color:#617078;cursor:pointer;background:#fff;
  white-space:nowrap;flex:0 0 auto
}
.works-filter button.on{background:#0c1720;color:#fff;border-color:#0c1720}
.works-panel{min-height:120px}
.works-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.works-gallery .work{
  background:#fff;border:1px solid #e0e4df;border-radius:20px;overflow:hidden;display:block;color:inherit;text-decoration:none
}
.works-gallery .work:hover{border-color:#0c1720}
.works-gallery .thumb{height:210px;position:relative;overflow:hidden;background:#111 center/cover no-repeat}
.works-gallery .thumb.has-photo{
  background-position:top center;
  background-size:cover;
  filter:saturate(1.15) contrast(1.08);
}
.works-gallery .thumb.has-photo .frame{display:none!important}
.works-gallery .thumb .frame{position:absolute;inset:20px;border:1px solid rgba(255,255,255,.5);border-radius:12px}
.works-gallery .t1{background-image:linear-gradient(135deg,#8eb8df,#d9e4ec 56%,#6b8ca8)}
.works-gallery .t2{background-image:linear-gradient(135deg,#7a9864,#dbe8ae 55%,#38624d)}
.works-gallery .t3{background-image:linear-gradient(135deg,#80c7be,#d6eee9 55%,#487d7a)}
.works-gallery .t5{background-image:linear-gradient(135deg,#829bd6,#d8def2 55%,#455985)}
.works-gallery .t6{background-image:linear-gradient(135deg,#c598d7,#eee0f4 55%,#7c5e8b)}
.works-gallery .work-copy{padding:22px}
.works-gallery .badge{display:inline-block;padding:7px 10px;border-radius:999px;background:#edf1ed;font-size:11px;font-weight:900;color:#5e696f}
.works-gallery h3{font-size:20px;margin:12px 0 8px;line-height:1.35}
.works-gallery p{font-size:13px;color:#768087;margin:0}
.works-gallery .more{margin-top:14px;font-size:12px;font-weight:900;color:#0c1720}

.works-list{border-top:2px solid #0c1720}
.works-list .project-row{
  display:grid;grid-template-columns:90px 150px 1.6fr 1fr 1.4fr 40px;
  gap:20px;align-items:center;padding:24px 6px;border-bottom:1px solid #d3d9d4;
  color:inherit;text-decoration:none
}
.works-list .project-row.list-head{font-size:11px;font-weight:900;color:#7c868b;padding-top:16px;padding-bottom:14px}
.works-list .project-row:not(.list-head):hover{background:rgba(255,255,255,.6)}
.works-list .year{font-weight:850;font-size:16px}
.works-list .type{font-size:12px;color:#647078}
.works-list .title{font-size:18px;font-weight:750;line-height:1.4;min-width:0;overflow-wrap:anywhere}
.works-list .client,.works-list .role{font-size:13px;color:#647078;line-height:1.5;min-width:0;overflow-wrap:anywhere}
.works-list .go{font-size:20px}
.works-empty{color:#66727a;padding:28px 0;font-size:14px}

.works-more{display:flex;justify-content:center;margin-top:32px}
.works-more a{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid #0c1720;border-radius:999px;padding:14px 22px;
  font-size:13px;font-weight:850;color:#0c1720;text-decoration:none;background:#fff
}
.works-more a:hover{background:#0c1720;color:#fff}

.works-pager{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;
  margin-top:36px;padding-top:8px
}
.works-pager button{
  appearance:none;min-width:40px;height:40px;padding:0 12px;
  border:1px solid #cfd5d1;border-radius:10px;background:#fff;
  font:inherit;font-size:13px;font-weight:800;color:#617078;cursor:pointer
}
.works-pager button.on{background:#0c1720;color:#fff;border-color:#0c1720}
.works-pager button:disabled{opacity:.35;cursor:default}
.works-pager .works-pager-nav{min-width:64px}

@media(max-width:1100px){
  .works-gallery{grid-template-columns:1fr 1fr}
  .works-list .project-row{grid-template-columns:72px 110px minmax(0,1.5fr) minmax(0,0.9fr) 36px;gap:14px}
  .works-list .role,.works-list .list-head .roleh{display:none}
  .works-list .project-row .year,
  .works-list .project-row .type,
  .works-list .project-row .title,
  .works-list .project-row .client,
  .works-list .project-row .role,
  .works-list .project-row .go{
    grid-column:auto;
    grid-row:auto
  }
}
@media(max-width:900px){
  .works-list .project-row{grid-template-columns:64px minmax(0,1.7fr) minmax(0,0.8fr) 32px;gap:12px}
  .works-list .type,
  .works-list .list-head > div:nth-child(2){display:none}
  .works-list .role,.works-list .list-head .roleh{display:none}
  .works-list .project-row .year,
  .works-list .project-row .type,
  .works-list .project-row .title,
  .works-list .project-row .client,
  .works-list .project-row .role,
  .works-list .project-row .go{
    grid-column:auto;
    grid-row:auto
  }
}
@media(max-width:720px){
  .works-gallery{grid-template-columns:1fr}
  .works-list .project-row.list-head{display:none!important}
  .works-list .project-row{grid-template-columns:68px minmax(0,1fr) 32px;gap:10px;padding:20px 0}
  .works-list .type{display:block}
  .works-list .type,.works-list .client,.works-list .role{grid-column:2;font-size:12px}
  .works-list .title{grid-column:2;font-size:17px}
  .works-list .go{grid-column:3;grid-row:1/5}
}