@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════
   작업 상세 (/work/{slug})

   어두운 머리 위로 큰 라운드 패널이 겹쳐 올라오는 구조.
   칩(.chips2)과 목업(.wmock)은 home.css 를 함께 불러 재사용한다.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 머리 ─────────────────────────────────────────────────────── */
.wk__head {
    position: relative;
    background: var(--stage);
    color: #cfe0dc;
    overflow: hidden;
}

/* 캡처는 분위기로만 남긴다. 흐리게 하지 않으면 배경의 글자가 제목과 겹쳐 읽혀
   둘 다 안 읽힌다 — 실제로 그렇게 나왔다. */
.wk__head-bg {
    position: absolute;
    inset: -12px;              /* blur 가장자리가 비지 않게 넉넉히 */
    background-size: cover;
    background-position: center top;
    opacity: .22;
    filter: blur(3px) saturate(.7);
}

.wk__head--shot::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14,58,53,.72) 0%, rgba(14,58,53,.94) 68%, var(--stage) 100%);
}

.wk__head-inner {
    position: relative;
    z-index: 1;
    padding-block: clamp(48px, 7vw, 96px) clamp(84px, 11vw, 148px);
}

.wk__crumb {
    display: flex;
    gap: 10px;
    font-size: var(--fs-small);
    color: #7fa39c;
}

.wk__crumb a { color: #9dbdb6; }
.wk__crumb a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* 분류에는 한글이 섞이므로 mono 를 쓰지 않는다 */
.wk__kind {
    margin-top: 26px;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--primary-lt);
}

.wk__title {
    margin-top: 12px;
    font-family: var(--display);
    font-size: clamp(2.5rem, 6.4vw, 4.75rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.04em;
    color: #fff;
}

.wk__lead {
    margin-top: 24px;
    color: #cfe0dc;
}

.wk__chips { margin-top: 26px; }
.wk__link  { margin-top: 30px; }

/* ── 본문 패널 — 머리를 물고 올라온다 ─────────────────────────── */
.wk__panel {
    position: relative;
    z-index: 2;
    margin-top: clamp(-64px, -5vw, -40px);
    border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
    background: var(--paper);
    overflow: hidden;
}

/* 패널 안 첫 섹션은 위 경계선을 그리지 않는다 — 라운드가 이미 경계다 */
.wk__panel .wk__first { border-top: 0; }

/* ── 화면 ─────────────────────────────────────────────────────── */
.wk__gallery { display: grid; gap: 28px; }

/* 원본보다 크게 늘리지 않는다 — 확대하면 캡처가 뭉개져 오히려 못 만든 것처럼 보인다.
   본문 칸보다 좁은 캡처는 가운데 놓는다. */
.wk__shot img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    border: 1px solid var(--rule);
    border-radius: 6px;
}

.wk__shot figcaption { text-align: center; }

.wk__shot figcaption {
    margin-top: 10px;
    font-size: var(--fs-small);
    color: var(--ink-soft);
}

/* ── 만든 방식 ────────────────────────────────────────────────── */
.wk__points {
    border-top: 1px solid var(--rule);
    list-style: none;
}

.wk__point {
    padding-block: 30px;
    border-bottom: 1px solid var(--rule);
}

/* 이름과 설명은 나란히, 근거 화면은 그 아래 행 전체를 쓴다 —
   본문 칸 안에 가두면 화면이 좁아져 캡처의 글자를 못 읽는다. */
@media (min-width: 760px) {
    .wk__point {
        display: grid;
        grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
        grid-template-areas: 'name desc' 'fig fig';
        column-gap: 36px;
        align-items: baseline;
    }

    .wk__point-name { grid-area: name; }
    .wk__point-desc { grid-area: desc; }
    .wk__point-fig  { grid-area: fig; }
}

.wk__point-name {
    font-family: var(--display);
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.45;
}

.wk__point-desc {
    margin-top: 8px;
    color: var(--ink-soft);
}

@media (min-width: 760px) {
    .wk__point-desc { margin-top: 0; }
}

/* 주장 옆에 근거 화면. 주장만 있는 것보다 훨씬 설득력이 있다. */
.wk__point-fig { margin-top: 20px; }

.wk__point-fig img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--rule);
    border-radius: 5px;
}

.wk__point-fig figcaption {
    margin-top: 9px;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

/* ── 이전 · 다음 ──────────────────────────────────────────────
   두 칸 사이는 경계선으로 가른다. 배경으로 틈을 만들면 .wrap 의 좌우 안쪽
   여백까지 물들어 양 끝에 띠가 남는다. */
.wk__nav { border-top: 1px solid var(--rule); }

.wk__nav-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.wk__nav-link {
    display: grid;
    gap: 6px;
    padding: 34px 26px;
    transition: background .22s ease;
}

.wk__nav-link:hover { background: var(--paper-sunk); }

.wk__nav-link--next {
    text-align: right;
    border-left: 1px solid var(--rule);
}

/* 한글이라 mono 를 쓰지 않는다 */
.wk__nav-dir {
    font-size: .8125rem;
    color: var(--primary);
}

.wk__nav-name {
    font-family: var(--display);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

/* ── 마무리 ───────────────────────────────────────────────────── */
.wk__cta { text-align: center; }
.wk__cta .lead { color: #e4efec; }

.wk__cta-acts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}