/* Process Log 템플릿 — 왼쪽 소개 + 로그 카드 두 장(텍스트 · 이미지)
   크기는 1920~2000px 화면 스케치 기준의 vw 값. 모노 = Victor Mono, 영문 본문 = Gwen Text, 숫자·한글 = 부크크 명조 */

@font-face {
    font-family: "Victor Mono";
    src:
        url("/fonts/victor-mono/VictorMono-Medium.woff2") format("woff2"),
        url("/fonts/victor-mono/VictorMono-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gwen Text";
    src: url("/saharandust/xiren-1-0-process-log/assets/fonts/GwenText-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gwen Text";
    src: url("/saharandust/xiren-1-0-process-log/assets/fonts/GwenText-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Bookk Myungjo";
    src: url("/saharandust/xiren-1-0-process-log/assets/fonts/BookkMyungjo_Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Bookk Myungjo";
    src: url("/saharandust/xiren-1-0-process-log/assets/fonts/BookkMyungjo_Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body.page-process-log {
    --pl-mono: "Victor Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --pl-serif: "Gwen Text", "Bookk Myungjo", Georgia, serif;
    --pl-num: "Bookk Myungjo", "Gwen Text", Georgia, serif;
    --pl-card-w: 28.7vw;
    --pl-gap: 1.7vw;
    --pl-card-h: min(
        calc(var(--pl-card-w) * 792 / 574),
        calc(100vh - var(--ro-pad-top) - var(--ro-footer-outer-h) - 64px)
    );
    --pl-line: 1.5px solid #000000;
    /* 이미지 카드는 반전(검은 바탕 · 흰 글자/아이콘), 텍스트 카드는 흰 바탕 — .pl-card--text 에서 되돌림 */
    --pl-card-bg: #000000;
    --pl-card-ink: #ffffff;
    --pl-nav-size: clamp(22px, 1.43vw, 30.8px);
    --pl-shift-left: 3vw;
}

/* 한글 본문은 부크크 명조가 먼저 */
body.page-process-log.page-rusty-odyssey--ko {
    --pl-serif: "Bookk Myungjo", "Gwen Text", Georgia, serif;
}

.pl-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--pl-card-w) var(--pl-card-w);
    column-gap: var(--pl-gap);
    align-items: start;
    /* 로그 영역(카드 + 이전/다음 화살표)을 오른쪽 끝에서 이만큼 왼쪽으로 */
    padding-right: var(--pl-shift-left);
}

/* —— 왼쪽 소개 —— */
.pl-intro {
    max-width: 18.5vw;
    min-width: 220px;
    padding-top: 0.5vw;
}

body.page-process-log .pl-intro .ro-title {
    font-family: var(--pl-mono);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: 0;
}

/* 연도 · 소개 글: 필드 리서치(스트립형) 왼쪽 글과 같은 크기 · 간격 (field-research-strip.css) */
.pl-intro .ro-meta-line {
    margin-top: 1.85rem;
}

.pl-intro .ro-year,
.pl-intro .ro-type {
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.3;
}

.pl-intro-copy {
    margin-top: 1.85rem;
    max-width: 22em;
    font-family: var(--ro-font);
    font-size: clamp(13px, 1.05vw, 15.5px);
    line-height: 1.45;
}

/* 한글 소개 글: 한글은 Pretendard (사이트 style.css 의 Pretendard 는 한글 글자만 담당 → 영문·숫자는 parabolica) */
body.page-process-log.page-rusty-odyssey--ko .pl-intro-copy {
    font-family: "Pretendard", "parabolica", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
}

.pl-intro-copy p {
    margin: 0 0 0.85em;
}

.pl-intro-copy p:last-child {
    margin-bottom: 0;
}

/* 키워드 크기·간격은 다른 상세 페이지(.ro-tags/.ro-tag)와 동일 */
.pl-intro .ro-tags {
    margin-top: 1.85rem;
}

/* —— 로그 뷰어 —— */
.pl-viewer {
    grid-column: 2 / 4;
    position: relative;
}

.pl-log {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--pl-gap);
}

.pl-logs {
    position: relative;
    overflow: hidden;
}

.pl-viewer.is-ready .pl-log:not(.is-active):not(.is-leaving) {
    display: none;
}

/* 넘어가는 동안 나가는 로그는 들어오는 로그와 같은 자리에 겹쳐 둔다 */
/* 처음 들어올 때: 이미지 카드가 텍스트 카드 아래(뒤)에서 나온다 */
.pl-log.is-entering .pl-card--text {
    z-index: 2;
}

.pl-log.is-entering .pl-card--media {
    z-index: 1;
    pointer-events: none;
}

.pl-log.is-leaving {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pl-log {
    will-change: transform;
}

.pl-viewer:not(.is-ready) .pl-log + .pl-log {
    margin-top: var(--pl-gap);
}

.pl-card {
    position: relative;
    box-sizing: border-box;
    height: var(--pl-card-h);
    border: var(--pl-line);
    background: var(--pl-card-bg);
    color: var(--pl-card-ink);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 텍스트 카드 */
.pl-card--text {
    --pl-card-bg: #ffffff;
    --pl-card-ink: #000000;
    padding: 1.1vw 1.35vw 1.6vw;
}

.pl-num {
    align-self: flex-start;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* 스케치 크기의 70% */
    min-width: 1.505vw;
    height: 1.26vw;
    padding: 0 0.315vw;
    border-radius: 0.315vw;
    background: var(--pl-card-ink);
    color: var(--pl-card-bg);
    font-family: var(--ro-font);
    font-size: clamp(8.4px, 0.665vw, 13.3px);
    line-height: 1;
}

.pl-meta {
    flex: 0 0 auto;
    margin-top: 0.85vw;
    white-space: pre-line;
    text-align: center;
    font-family: var(--pl-mono);
    font-weight: 500;
    font-size: clamp(10px, 0.66vw, 14px);
    line-height: 1.33;
    color: var(--pl-card-ink);
}

.pl-body {
    flex: 1 1 auto;
    min-height: 0;
    /* 본문은 넘겨 보는 쪽(페이지)으로 나뉜다: 칸 높이를 넘는 줄은 다음 쪽(오른쪽 단)으로 흘러가고,
       스크립트가 한 쪽씩 옆으로 넘긴다. 마지막 2줄 높이는 비워 둔다(padding-bottom). 단 사이 간격 = 좌우 여백 합 */
    overflow: hidden;
    box-sizing: border-box;
    margin-top: 5vw;
    padding: 0 2.4vw 2.6em 1.8vw;
    column-count: 1;
    column-gap: calc(2.4vw + 1.8vw);
    column-fill: auto;
    font-family: var(--pl-serif);
    font-weight: 300;
    font-size: clamp(14px, 1.1vw, 22px);
    line-height: 1.3;
    color: var(--pl-card-ink);
    scrollbar-width: none;
}

.pl-body::-webkit-scrollbar {
    display: none;
}

.pl-body p {
    margin: 0 0 1.3em;
}

.pl-body p:last-child {
    margin-bottom: 0;
}

/* 텍스트 카드 쪽 넘기기: 쪽이 둘 이상일 때만 화살표 커서 (이미지 카드와 같은 방식) */
.pl-card--text.is-paged {
    cursor: url("/saharandust/xiren-1-0-process-log/assets/cursor-next.svg?v=2") 9 6, e-resize;
}

.pl-card--text.is-paged.is-left {
    cursor: url("/saharandust/xiren-1-0-process-log/assets/cursor-prev.svg?v=2") 9 6, w-resize;
}

/* 텍스트 카드의 1/3: 이미지 카드의 1/3과 같은 높이에 오도록 카드 바닥에 붙인다 */
.pl-card--text .pl-text-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

/* 이미지 카드: 어디를 눌러도 다음 이미지 */
.pl-card--media {
    padding: 2vw 2.3vw 0;
    /* 오른쪽 절반 → 다음, 왼쪽 절반 ← 이전 (스크립트가 is-left 를 붙인다) */
    cursor: url("/saharandust/xiren-1-0-process-log/assets/cursor-next.svg?v=2") 9 6, e-resize;
    user-select: none;
    -webkit-user-select: none;
}

.pl-card--media.is-left {
    cursor: url("/saharandust/xiren-1-0-process-log/assets/cursor-prev.svg?v=2") 9 6, w-resize;
}

.pl-card--media:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 3px;
}

.pl-slides {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.pl-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    row-gap: 1.2vw;
    justify-items: center;
    visibility: hidden;
}

.pl-viewer:not(.is-ready) .pl-slide:first-child,
.pl-slide.is-active {
    visibility: visible;
}

.pl-slide img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    object-position: center top;
    -webkit-user-drag: none;
}

.pl-caption {
    max-width: 52%;
    min-height: 3.75em;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    font-family: var(--pl-serif);
    font-weight: 300;
    font-size: clamp(12px, 0.8vw, 16px);
    line-height: 1.25;
    color: var(--pl-card-ink);
}

.pl-media-foot {
    /* 1/3 · 확대 아이콘을 아주 약간 아래로 */
    --pl-foot-nudge: 0.6vw;
    box-sizing: border-box;
    padding-top: calc(var(--pl-foot-nudge) * 2);
    position: relative;
    flex: 0 0 auto;
    height: 4.3vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pl-counter {
    font-family: var(--pl-num);
    font-weight: 300;
    font-size: clamp(14px, 1.1vw, 22px);
    line-height: 1;
    font-variant-numeric: lining-nums;
    color: var(--pl-card-ink);
}

.pl-enlarge {
    position: absolute;
    right: -1.15vw;
    top: calc(50% + var(--pl-foot-nudge));
    transform: translateY(-50%);
    width: clamp(12.8px, 0.96vw, 19.2px);
    height: clamp(12.8px, 0.96vw, 19.2px);
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.pl-enlarge img {
    display: block;
    width: 100%;
    height: 100%;
    filter: invert(1); /* 검은 아이콘 → 흰색 */
}

/* 이전 · 다음 로그 */
.pl-nav {
    position: absolute;
    top: calc(var(--pl-card-h) / 2);
    z-index: 2;
    width: var(--pl-nav-size);
    height: var(--pl-nav-size);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity 0.2s ease;
}

.pl-nav img {
    display: block;
    width: 100%;
    height: 100%;
}

.pl-nav--prev {
    right: calc(100% + 1.2vw);
}

.pl-nav--next {
    left: calc(100% + 1.2vw);
}

.pl-nav--next img {
    transform: scaleX(-1);
}

/* 호버: 색상 반전 — 원 안을 검게 채우고 화살표·테두리는 흰색 (원 크기 = 아이콘 원의 바깥 지름 ≈ 87%) */
.pl-nav:not(:disabled):hover {
    background: radial-gradient(circle closest-side, #000000 86.5%, transparent 87.5%);
}

.pl-nav:not(:disabled):hover img {
    filter: invert(1);
}

.pl-nav:disabled {
    opacity: 0.18;
    cursor: default;
}

.pl-viewer:not(.is-ready) .pl-nav {
    display: none;
}

/* 크게 보기 */
.pl-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.97);
    cursor: zoom-out;
}

.pl-lightbox[hidden] {
    display: none;
}

.pl-lightbox img {
    display: block;
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
}

.pl-lightbox-count {
    position: absolute;
    bottom: 3vh;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--pl-num);
    font-weight: 300;
    font-size: clamp(14px, 1.1vw, 22px);
}

/* 한글은 단어 단위로 줄바꿈 */
body.page-process-log.page-rusty-odyssey--ko .pl-body,
body.page-process-log.page-rusty-odyssey--ko .pl-caption,
body.page-process-log.page-rusty-odyssey--ko .pl-intro-copy {
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 한글 본문 · 캡션: 영문보다 10% 작게, 행간 넓게 */
body.page-process-log.page-rusty-odyssey--ko .pl-body {
    font-size: clamp(12.6px, 0.99vw, 19.8px);
    line-height: 1.6;
    padding-bottom: 3.2em; /* 마지막 2줄 비움 (행간 1.6 × 2) */
}

body.page-process-log.page-rusty-odyssey--ko .pl-caption {
    font-size: clamp(10.8px, 0.72vw, 14.4px);
    line-height: 1.55;
}

/* 모바일 이전 · 다음 로그 버튼은 데스크톱에서 안 보임 */
.pl-mnav {
    display: none;
}

/* ===== 모바일 (≤768px) =====
   세 단계를 위아래로 스와이프해서 넘긴다 (스크롤 스냅):
   0) 소개(제목 · 연도 · 키워드 · 소개 글) + 아래로 텍스트 카드 윗부분
   1) 텍스트 카드가 위로 올라와 화면을 채움 (언어 설정 · 소개 글은 사라짐) + 바닥에 이미지 카드 아주 약간
   2) 이미지 카드만
   좌우 원형 화살표 = 이전 · 다음 로그 (1 · 2 단계에서만) */
@media (max-width: 768px) {
    body.page-process-log {
        --pl-m-gap: 12px;
        --pl-m-peek: 34px;    /* 1단계에서 아래로 보이는 이미지 카드 높이 */
        /* 언어 설정이 숨은 상태의 본문 칸 높이 = 카드가 꽉 차는 높이 */
        --pl-m-h: calc(100svh - var(--ro-mobile-lang-top) - var(--ro-mobile-footer-total));
        --pl-nav-size: 22px;
    }

    /* 스크롤 칸의 위치 · 크기는 고정 (언어 설정이 숨을 때 칸이 커지면 스냅 도중 크기가 바뀌어 카드가 위로 잘려 멈춘다).
       언어 설정 자리만큼은 소개 위쪽 여백으로 비워 두고, 언어 설정은 그 위에서 미끄러져 사라진다 */
    body.page-process-log .pl-main,
    body.page-process-log.is-lang-hidden .pl-main {
        top: var(--ro-mobile-lang-top);
        transition: none;
    }

    body.page-process-log .pl-main {
        padding: 0;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }

    body.page-process-log .pl-main::-webkit-scrollbar {
        display: none;
    }

    .pl-layout {
        display: block;
        padding-right: 0;
    }

    /* 소개: 제목 | 연도 · 카테고리 / 키워드 / 소개 글 (다른 상세 페이지 모바일과 같은 칸) */
    .pl-intro {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
        column-gap: 0.75rem;
        align-items: start;
        max-width: none;
        min-width: 0;
        /* 위 여백 = 언어 설정 자리(2.7em) + 언어 설정과 제목 사이 30px */
        padding: calc(var(--ro-mobile-content-top) - var(--ro-mobile-lang-top) + 30px) 0 44px;   /* 아래 = 소개 글과 글 카드 사이 */
        scroll-snap-align: start;
    }

    /* 키워드는 옆으로 밀지 않고 다음 줄로 넘김 (프로토타입 다음 제작 일지가 아래 줄로) */
    .pl-intro .ro-tags {
        grid-row: 2;
        margin-top: calc(1.5rem - 3px);
        flex-wrap: wrap;
        row-gap: 0.4rem;
        overflow: visible;
        touch-action: auto;
    }

    .pl-intro-copy {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: 2.3rem;
        max-width: var(--pl-copy-w, none);   /* 연도 · 카테고리 글자의 오른쪽 끝까지 (스크립트가 잰다) */
        font-size: clamp(13px, 3.5vw, 15px);
    }

    .pl-viewer {
        position: static;
    }

    /* hidden 은 스크롤 상자가 돼서 카드가 바깥(.pl-main) 스냅에 안 걸린다 → clip */
    .pl-logs {
        overflow: clip;
    }

    .pl-log {
        display: block;
    }

    .pl-viewer:not(.is-ready) .pl-log + .pl-log {
        margin-top: var(--pl-m-gap);
    }

    .pl-card {
        border-width: 1px;
        touch-action: pan-y;       /* 가로 밀기는 스크립트가 받아서 다음 · 이전 */
        cursor: auto;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    /* 옆으로 빠져나가는 로그는 스냅 대상이 아님 */
    .pl-log.is-leaving .pl-card {
        scroll-snap-align: none;
    }

    .pl-card--text {
        height: calc(var(--pl-m-h) - var(--pl-m-peek) - var(--pl-m-gap));
        padding: 14px 16px 18px;
    }

    .pl-card--text.is-paged,
    .pl-card--media,
    .pl-card--media.is-left {
        cursor: auto;
    }

    .pl-card--media {
        height: var(--pl-m-h);
        margin-top: var(--pl-m-gap);
        padding: 22px 18px 0;
    }

    .pl-num {
        min-width: 22px;
        height: 18px;
        padding: 0 5px;
        border-radius: 4px;
        font-size: 10px;
    }

    .pl-meta {
        margin-top: 12px;
        font-size: 10px;
    }

    /* 쪽 나누기는 스크립트가 줄 단위로 (높이 · 아래 여백도 스크립트가 정함) */
    .pl-body,
    body.page-process-log.page-rusty-odyssey--ko .pl-body {
        flex: 0 0 auto;
        margin-top: 30px;
        padding: 0 10px 0 8px;
        column-count: auto;
        columns: auto;
    }

    .pl-body {
        font-size: 15px;
        line-height: 1.35;
    }

    body.page-process-log.page-rusty-odyssey--ko .pl-body {
        font-size: 13.5px;
        line-height: 1.6;
    }

    /* 문단 간격 = 정확히 한 줄 → 쪽 경계에서 줄이 반쯤 잘리지 않음 */
    .pl-body p {
        margin: 0 0 1.35em;
    }

    body.page-process-log.page-rusty-odyssey--ko .pl-body p:not(:last-child) {
        margin-bottom: 1.6em;
    }

    .pl-slide {
        row-gap: 14px;
    }

    .pl-caption {
        max-width: 86%;
        font-size: 12px;
    }

    body.page-process-log.page-rusty-odyssey--ko .pl-caption {
        font-size: 11px;
    }

    .pl-media-foot {
        --pl-foot-nudge: 3px;
        height: 46px;
    }

    .pl-counter {
        font-size: 15px;
    }

    .pl-enlarge {
        right: -4px;
        width: 15px;
        height: 15px;
    }

    /* 데스크톱용 화살표는 숨기고 body 에 붙은 모바일 버튼(.pl-mnav)을 쓴다 */
    .pl-nav {
        display: none !important;
    }

    /* 원형 화살표: 카드 양옆 여백 가운데, 카드 높이의 가운데 (스케치 Frame 264) */
    .pl-mnav {
        display: block;
        position: fixed;
        z-index: 13;
        top: calc(var(--ro-mobile-lang-top) + (var(--pl-m-h) - var(--pl-m-peek) - var(--pl-m-gap)) / 2);
        width: var(--pl-nav-size);
        height: var(--pl-nav-size);
        margin-top: calc(var(--pl-nav-size) / -2);
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: none;
        color: #000000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;   /* 위치는 바로 바뀜 (위아래로 미끄러지는 모습 없음) */
        -webkit-tap-highlight-color: transparent;
    }

    .pl-mnav circle {
        fill: #ffffff;
    }

    .pl-mnav svg {
        display: block;
        width: 100%;
        height: 100%;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.15;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .pl-mnav--next svg {
        transform: scaleX(-1);
    }

    /* 카드 왼쪽 · 오른쪽 테두리 선 한가운데에 걸치게 (원 중심 = 선) */
    .pl-mnav--prev {
        left: calc(var(--ro-mobile-pad-x) - var(--pl-nav-size) / 2);
    }

    .pl-mnav--next {
        right: calc(var(--ro-mobile-pad-x) - var(--pl-nav-size) / 2);
    }

    body.pl-stage-2 .pl-mnav {
        top: calc(var(--ro-mobile-lang-top) + var(--pl-m-h) / 2);
    }

    body.pl-stage-1 .pl-mnav,
    body.pl-stage-2 .pl-mnav {
        opacity: 1;
        pointer-events: auto;
    }

    body.pl-stage-1 .pl-mnav:disabled,
    body.pl-stage-2 .pl-mnav:disabled {
        pointer-events: none;
    }

    /* 끝 로그: 흰 원은 그대로(선을 가림), 원 테두리 · 화살표만 흐리게 */
    .pl-mnav:disabled svg {
        stroke: rgba(0, 0, 0, 0.2);
    }

    /* 누르는 동안 반전 (데스크톱 호버와 같은 모양) */
    .pl-mnav:not(:disabled):active {
        background: #000000;
        color: #ffffff;
    }

    .pl-mnav:not(:disabled):active circle {
        fill: #000000;
        stroke: #000000;
    }

    /* 버튼 누르는 자리 넓히기 */
    .pl-mnav::before {
        content: "";
        position: absolute;
        inset: -10px;
    }

    /* 열린 메뉴 위로는 안 보이게 */
    body:has(.nav-overlay[aria-hidden="false"]) .pl-mnav {
        display: none;
    }

    /* 모바일 푸터: 영문 · 한글 모두 뉴트로닉 한글 */
    body.page-process-log .ro-footer,
    body.page-process-log .ro-footer *,
    body.page-process-log .ro-footer *::before,
    body.page-process-log .ro-footer *::after,
    body.page-process-log.page-rusty-odyssey--ko .ro-footer-item--ko,
    body.page-process-log.page-rusty-odyssey--ko a.ro-footer-item--ko::after,
    body.page-process-log.page-rusty-odyssey--ko a.ro-footer-item--ko:hover {
        font-family: "neutronic-hangeul", sans-serif;
    }

    .pl-lightbox img {
        max-width: 100vw;
        max-height: 80svh;
    }

    .pl-lightbox-count {
        font-size: 15px;
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    body.page-process-log .pl-main {
        scroll-behavior: auto;
    }
}