/* works_page */
.works_page .works { max-width: 1440px; margin: 0 auto; padding-top: 150px; }
.works_page .works h2 { font-family: 'Druk'; font-size: 8rem; font-weight: 500; line-height: 1; letter-spacing: 0.3rem; color: #fff; text-align: center;  margin-bottom: 90px; }

.works-view-toggle { display: flex; gap: 12px; justify-content: flex-end; margin-bottom: 24px; }
.view-btn { padding: 8px 24px; border-radius: 24px; border: none; background: #222; color: #fff; font-size: 1.8rem; cursor: pointer; opacity: 0.7; transition: background 0.2s, opacity 0.2s; }
.view-btn.active { background: #FFCC00; color: #222; opacity: 1; }
.works-grid.grid-view { display: flex; flex-wrap: wrap; gap: 40px; }
.works-grid.list-view { display: block; }
.works-grid.list-view .work-card { display: flex; flex-direction: row; align-items: flex-start; width: 100%; margin-bottom: 40px; background: none; box-shadow: none; }
.works-grid.list-view .work-img { width: 320px; height: 220px; border-radius: 24px; margin-right: 32px; }

/* 그리드 카드 스타일 추가 */
.works-grid.grid-view { display: flex; flex-wrap: wrap; gap: 30px; }

/* 카드 기본 스타일 */
.works-grid.grid-view .work-card { position: relative; /* 카드 전체 링크(.card-link) 기준 */ width: calc((100% - 30px * 3) / 4); /* 기본 4열 */ background: #ffffff15; border-radius: 16px; padding: 18px; box-shadow: 0 8px 30px #ffffff20; display: flex; /* 변경: block -> flex */ flex-direction: column; /* 카드 내부를 세로 스택으로 */ box-sizing: border-box; transition: transform 0.18s ease, box-shadow 0.18s ease; border: 1px solid #ffffff20; min-height: 380px; /* 카드 높이 확보 (필요시 조절) */ }

/* 카드 전체를 detail 페이지로 보내는 투명 커버 링크 (stretched link) */
.works-grid.grid-view .work-card .card-link { position: absolute; inset: 0; z-index: 2; border-radius: 16px; cursor: pointer; }
body.light-mode .works-grid.grid-view .work-card { border: 1px solid #00000020; }


/* 이미지 블록은 수축하지 않도록 */
.works-grid.grid-view .work-card > div:first-child { flex: 0 0 auto; }

/* work-info가 남은 공간을 채우도록 */
.works-grid.grid-view .work-info { padding-top: 0; width: 100%; display: flex; flex-direction: column; flex: 1 1 auto; }

/* 호버 효과 */
.works-grid.grid-view .work-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px #ffffff30; }

/* 라이트 모드에서 그림자 색상(하양)으로 덮어쓰기 */
body.light-mode .works-grid.grid-view .work-card { box-shadow: 0 18px 40px #00000010; }
body.light-mode .works-grid.grid-view .work-card:hover { box-shadow: 0 18px 40px #00000020; }

/* 모바일에서 효과 축소 */
@media (max-width:600px) {
    .works-grid .work-card:hover > a { transform: translateY(-3px); }
    /* 다크 모드(기본) 모바일 그림자 */
    .works-grid .work-card:hover > a .work-img { box-shadow: 0 10px 24px #ffffff10; }
    /* 라이트 모드 모바일 오버라이드 */
    body.light-mode .works-grid .work-card:hover > a .work-img { box-shadow: 0 10px 24px #00000030; }
}



/* 이미지 스타일 */
/* .works-grid.grid-view .W_c-img { overflow: hidden; border-radius: 12px; box-shadow: 0 6px 20px #0000001f; } */
.works-grid.grid-view .work-img { width: 100%; height: 160px; border-radius: 12px; background-size: cover; background-position: top center; margin-bottom: 12px; box-shadow: none; box-sizing: border-box; border: 1px solid #555; }

/* 카드 내용 정렬 및 텍스트 스타일 */
.works-grid.grid-view .work_top { display: flex; justify-content: space-between; align-items: center; }
.works-grid.grid-view .work_top strong { display: inline-block; font-size: 2.2rem; margin-bottom: 6px; color: #fff; }
.works-grid.grid-view .work_top span { display: inline-block; font-size: 1.6rem; font-weight: 400; color: #FFCC00; }
.works-grid.grid-view .work-info p { margin: 0; color: #888; font-size: 1.5rem; line-height: 1.45; margin-top: 8px; }

body.light-mode .works-grid.grid-view .work_top strong { color: #000; }
body.light-mode .works-grid.grid-view .work_top span { color: #4300D1; }
body.light-mode .works-grid.grid-view .work-info p { color: #666; }

/* 리스트 뷰 유지 규칙(우선순위 보장) */
.works-grid.list-view .work-card { width: 100%; }

/* 반응형: 3열 (큰 태블릿 / 작은 데스크탑) */
@media (max-width:1200px) {
    .works-grid.grid-view .work-card { width: calc((100% - 40px * 2) / 3); }
}
/* 반응형: 2열 (태블릿) */
@media (max-width:900px) {
    .works-grid.grid-view .work-card { width: calc((100% - 40px) / 2); }
    .works-grid.grid-view .work-img { height: 160px; }
}
/* 반응형: 1열 (모바일) */
@media (max-width:600px) {
    .works-grid.grid-view { gap: 20px; }
    .works-grid.grid-view .work-card { width: 100%; padding: 14px; }
    .works-grid.grid-view .work-img { height: 200px; border-radius: 12px; }
}


/* tag pills */
.works-grid .tag-list { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.works-grid .tag { background: #ffffff1f; color:#fff; padding:8px 12px; border-radius:999px; font-size:1.2rem; font-weight:600; letter-spacing:0.02em; display:inline-block; box-shadow: 0 4px 14px #0000001f; border:1px solid #ffffff0f; }

/* 라이트 모드 오버라이드 */
body.light-mode .works-grid .tag { background: #f0f0f0; color:#222; box-shadow: 0 6px 18px #0000000a; border:1px solid #0000000f; }

/* 반응형 조정 */
@media (max-width:600px) {
    .works-grid .tag { font-size:1.1rem; padding:6px 10px; }
}


/* ============================================================
   KERI Case Study (work_KERI.html)
   - work_KERI_detail_prototype 인라인 스타일을 분리·네임스페이스화
   - 모든 규칙은 .case-study 하위 + cs- 접두사로 기존 클래스와 격리
   ============================================================ */
.case-study { max-width: 980px; margin: 0 auto; padding: 0 24px 60px; }
.case-study a { color: inherit; }

/* 상단 돌아가기 */
.cs-back { display: inline-flex; align-items: center; gap: 8px; margin: 120px 0 0; font-size: 1.4rem; opacity: .6; text-decoration: none; color: #fff; }
.cs-back:hover { opacity: 1; }

/* Hero */
.cs-hero { padding: 50px 0 40px; border-bottom: 1px solid #ffffff15; }
.cs-hero .eyebrow { color: #FFCC00; font-weight: 700; letter-spacing: .1em; font-size: 1.3rem; text-transform: uppercase; }
.cs-hero h1 { font-family: 'Druk', sans-serif; font-size: clamp(3.6rem, 7vw, 6rem); font-weight: 500; margin: 10px 0 14px; line-height: 1; color: #fff; }
.cs-hero .lead { font-size: 1.9rem; color: #bbb; max-width: 680px; }
.cs-visit { display: inline-block; margin-top: 26px; padding: 12px 24px; background: #FFCC00; color: #111; font-weight: 700; border-radius: 999px; text-decoration: none; font-size: 1.5rem; transition: transform .15s; }
.cs-visit:hover { transform: translateY(-2px); }

/* Overview (메타 + 시간 분리 표기) */
.cs-overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 36px 0; border-bottom: 1px solid #ffffff15; }
.cs-meta .k { font-size: 1.3rem; color: #888; margin-bottom: 6px; letter-spacing: .04em; text-transform: uppercase; }
.cs-meta .v { font-size: 1.7rem; font-weight: 600; color: #fff; }
.cs-time-split { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; padding-top: 6px; }
.cs-time-split .t-item { font-size: 1.6rem; color: #fff; }
.cs-time-split .t-item b { color: #FFCC00; font-weight: 700; }
.cs-time-split .t-item span { color: #888; }
.cs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cs-tag { background: #ffffff1f; padding: 6px 12px; border-radius: 999px; font-size: 1.3rem; font-weight: 600; color: #fff; }

/* 공통 섹션 */
.cs-block { padding: 56px 0; border-bottom: 1px solid #ffffff12; }
.cs-block h2 { font-size: 2.8rem; font-weight: 800; margin-bottom: 8px; color: #fff; }
.cs-block h2 .num { color: #FFCC00; font-size: 1.8rem; margin-right: 10px; vertical-align: middle; }
.cs-block .sub { color: #888; margin-bottom: 28px; font-size: 1.5rem; }
.cs-block p { color: #cfcfcf; font-size: 1.7rem; margin-bottom: 14px; }
.cs-block strong { color: #fff; }

/* Problem / Goal: 리스트형 카드 */
.cs-points { display: grid; gap: 16px; }
.cs-point { background: #ffffff08; border: 1px solid #ffffff12; border-radius: 14px; padding: 22px 24px; }
.cs-point h3 { font-size: 1.8rem; margin-bottom: 6px; color: #fff; }
.cs-point p { margin: 0; color: #aaa; font-size: 1.5rem; }

/* Process: 단계별 (왜 그렇게 했는지) */
.cs-process-step { margin-bottom: 40px; }
.cs-process-step .label { display: inline-block; color: #FFCC00; font-weight: 700; font-size: 1.4rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.cs-process-step h3 { font-size: 2.1rem; margin-bottom: 10px; color: #fff; }
.cs-why { background: #FFCC0012; border-left: 3px solid #FFCC00; padding: 14px 18px; border-radius: 0 10px 10px 0; margin-top: 12px; }
.cs-why span { color: #FFCC00; font-weight: 700; font-size: 1.4rem; }
.cs-why p { margin: 4px 0 0; font-size: 1.6rem; color: #ddd; }

/* Before / After */
.cs-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cs-ba figure { background: #ffffff08; border: 1px solid #ffffff12; border-radius: 14px; overflow: hidden; }
.cs-ba .ph { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; color: #555; font-size: 1.5rem; background: repeating-linear-gradient(45deg, #ffffff05 0 12px, #ffffff08 12px 24px); }
.cs-ba figcaption { padding: 12px 16px; font-size: 1.4rem; color: #fff; }
.cs-ba .tag-before { color: #ff7a7a; font-weight: 700; }
.cs-ba .tag-after { color: #7affb0; font-weight: 700; }

/* Retrospective */
.cs-retro { background: #ffffff08; border-radius: 16px; padding: 30px; }
.cs-retro ul { list-style: none; display: grid; gap: 14px; }
.cs-retro li { padding-left: 26px; position: relative; font-size: 1.6rem; color: #ddd; }
.cs-retro li::before { content: "→"; position: absolute; left: 0; color: #FFCC00; font-weight: 700; }

/* 반응형 */
@media (max-width: 720px) {
    .cs-overview { grid-template-columns: repeat(2, 1fr); }
    .cs-ba { grid-template-columns: 1fr; }
    .cs-back { margin-top: 100px; }
}

/* 라이트 모드 오버라이드 (액센트 퍼플 #4300D1) */
body.light-mode .cs-back,
body.light-mode .cs-hero h1,
body.light-mode .cs-meta .v,
body.light-mode .cs-time-split .t-item,
body.light-mode .cs-tag,
body.light-mode .cs-block h2,
body.light-mode .cs-block strong,
body.light-mode .cs-point h3,
body.light-mode .cs-process-step h3,
body.light-mode .cs-ba figcaption { color: #111; }
body.light-mode .cs-hero .eyebrow,
body.light-mode .cs-block h2 .num,
body.light-mode .cs-time-split .t-item b,
body.light-mode .cs-process-step .label,
body.light-mode .cs-why span,
body.light-mode .cs-retro li::before { color: #4300D1; }
body.light-mode .cs-visit { background: #4300D1; color: #fff; }
body.light-mode .cs-hero .lead,
body.light-mode .cs-block p,
body.light-mode .cs-why p,
body.light-mode .cs-retro li { color: #333; }
body.light-mode .cs-block .sub,
body.light-mode .cs-point p,
body.light-mode .cs-time-split .t-item span { color: #666; }
body.light-mode .cs-point,
body.light-mode .cs-ba figure,
body.light-mode .cs-retro { background: #00000005; border-color: #00000012; }
body.light-mode .cs-tag { background: #f0f0f0; color: #222; }
body.light-mode .cs-why { background: #4300d112; border-left-color: #4300D1; }
body.light-mode .cs-hero,
body.light-mode .cs-overview { border-bottom-color: #00000015; }
body.light-mode .cs-block { border-bottom-color: #00000012; }