/*
 * 첫 화면 SUCCESS STORY — 스크롤 고정 + 사진 펼침 (2026-10-08 대표님 · 참고 nobiliaire.kr)
 * ------------------------------------------------------------------------------------------------
 *  story-reveal.js 가 칸에 .story_on 을 붙였을 때만 걸린다 — 스크립트가 없거나 화면이 너무 낮으면 예전 모양 그대로.
 *
 *  칸 높이   = 무대(화면 - 머리글) + 고정 구간(화면 높이 × 2.1) — 값은 스크립트가 --story-* 로 넣는다
 *  무대      = 고정 전에는 칸 맨 위 · 고정 중에는 머리글 바로 아래에 붙음(fixed) · 고정 뒤에는 칸 맨 아래
 *  뒤 사진   = 무대 안에서 오른쪽 사진 자리 → 무대 전체로 커진다. 사진을 늘린 그림이 아니라 원본을 그 크기로 다시 그린다(object-fit)
 *  글 색     = 스크립트가 글 요소에 직접 (검정 → 흰색) · 사진 위 어둡게 = .story_bg_shade 투명도 (0 → 1)
 *  매 장면 바뀌는 값은 칸 맨 위가 아니라 그 값을 쓰는 요소에만 넣는다 — 칸 전체를 다시 셈하면 휴대폰에서 끊긴다 (2026-10-09)
 */

.section08.story_on { padding: 0; height: var(--story-total, auto); }

.section08.story_on .story_stage {
    position: absolute; left: 0; top: 0; z-index: 5;
    width: 100%; height: var(--story-stage-h, 100vh);
    padding: 0 50px var(--story-bot, 0px); box-sizing: border-box;   /* 아래 여백 = 화면 아래 고정 메뉴(휴대폰 50px) */
    display: flex; align-items: center;
    overflow: hidden;
}
.section08.story_on .story_stage.story_pin { position: fixed; top: var(--story-top, 0px); }
.section08.story_on .story_stage.story_after { top: auto; bottom: 0; }
.section08.story_on .story_stage > .cont_wrap { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; }

/* 뒤 사진 — 자리 · 크기 · 모서리는 스크립트가 매 장면 이 요소에만 직접 넣는다 (칸 전체를 다시 셈하지 않게) */
.section08 .story_bg { display: none; }
.section08.story_on .story_bg {
    display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 0;
    overflow: hidden; visibility: hidden; pointer-events: none;
}
.section08.story_on.story_open .story_bg { visibility: visible; }
.section08 .story_bg_img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; transition: opacity .5s ease; }
.section08 .story_bg_img.is-cur { opacity: 1; }
.section08 .story_bg_img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 40%; }
.section08 .story_bg_shade {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0;   /* 펼침에 맞춰 스크립트가 0 → 1 */
    background: linear-gradient(90deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.34) 45%, rgba(0,0,0,.12) 100%);
}

/* 펼치는 동안 넘김 속 사진은 감춘다 — 같은 자리에 같은 사진을 뒤 사진이 대신 그린다 (사진 칸 테두리도) */
.section08.story_on.story_open .visuals li img { visibility: hidden; }
.section08.story_on.story_open .visuals li > div:last-child { border-color: transparent; }

/* 넘김 속 사진 — 무대가 낮으면 폭은 그대로 두고 높이만 맞춘다 (--story-img-h · 가운데 위쪽을 남기고 잘림 = 뒤 사진과 같은 자리) */
.section08.story_on .visuals li > div:last-child img { display: block; height: var(--story-img-h, auto); object-fit: cover; object-position: 50% 40%; }

/*
 * 글 색 — 스크립트가 원래 색에서 흰색 쪽으로 섞은 색을 SUCCESS STORY · 문구 · 01 02 에 직접 넣고, 접히면 걷는다.
 * 01 옆(아래) 줄과 휴대폰 따옴표 그림은 가짜 요소라 값만 넘긴다 : --story-c-line(01 02 목록에) · --story-t(문구 h5 에)
 */
/* 휴대폰 따옴표 그림(“ — h5:before 의 tt.png) 도 같은 빠르기로 흰색 쪽으로 (--story-t 0 → 1) */
.section08.story_tint .visuals li > div:first-child h5:before { filter: brightness(calc(1 - var(--story-t, 0))) invert(var(--story-t, 0)); }

/* PC — 01 옆 가로줄 · 사진 칸이 낮아져 글과 겹칠 때만 01 02 를 글 아래로 (--story-dots-b · 원래 100px) */
@media screen and (min-width: 901px) {
    .section08.story_tint .visuals .slick-dots li.slick-active button:after { background-color: var(--story-c-line); }
    .section08.story_on .visuals .slick-dots { bottom: var(--story-dots-b, 100px); }
}

/* 휴대폰 · 태블릿 — 글 아래 사진 칸을 무대 높이에 맞추고, 정보 상자는 PC 처럼 사진 아래쪽에 겹친다 · 01 위 세로줄 */
@media screen and (max-width: 900px) {
    .section08.story_on .story_stage { padding: 0 20px var(--story-bot, 0px); }
    .section08.story_on .visuals li > div:last-child { position: relative; overflow: hidden; }
    .section08.story_on .visuals li > div:last-child > div { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 14px 12px 16px; }
    .section08.story_on .visuals li > div:last-child > div > span { padding: 10px 0 0; }
    .section08.story_tint .visuals .slick-dots li.slick-active button:before { background-color: var(--story-c-line); }
}

/*
 * 사진 없는 사례 (2026-10-18 대표님 "사진 없어도 보기 좋게") — home.blade.php 가 사진 자리에 .story_noimg 를 둔다.
 *  사진과 같은 크기(세로 1107:1421 · 펼침 중엔 --story-img-h)의 어두운 판이라 정보 상자 · 글 자리 · 펼침 시작 자리가 사진 있는 사례와 같다.
 *  펼치면 뒤 사진 자리(.story_bg_img.is-empty · story-reveal.js)도 같은 어두운 바탕이 화면 가득 커지고 글은 흰색으로.
 */
.section08 .visuals li > div:last-child .story_noimg {
    display: block; width: 100%; aspect-ratio: 1107 / 1421;
    background: linear-gradient(160deg, #3d352e 0%, #27221e 58%, #1b1815 100%);
}
.section08 .story_bg_img.is-empty { background: linear-gradient(160deg, #3d352e 0%, #27221e 58%, #1b1815 100%); }
.section08.story_on .visuals li > div:last-child .story_noimg { height: var(--story-img-h, auto); }
.section08.story_on.story_open .visuals li .story_noimg { visibility: hidden; }

/* 넘김 글은 낱말 단위로 줄을 바꾼다 — narrow.css 가 공개 화면 글에 break-word 를 걸어 "채워질 예 / 정입니다" 처럼 끊겼다 (2026-10-09 · 후기 화면과 같은 처리) */
@media screen and (max-width: 900px) {
    .section08 .visuals li > div:first-child h2,
    .section08 .visuals li > div:first-child h5,
    .section08 .visuals li > div:first-child h5 span,
    .section08 .visuals li > div:first-child p { word-break: keep-all; }
}