/*
[레이어] L4 설정
[역할]   홈 시작 화면(영상 몽타주) 모양 + 「뒤로 넘김」 모양 — 2_로직/시작화면.js · 2_로직/넘김.js 와 짝
[입력]   4_설정/기본.css 의 색 변수(--ink · --copper · --bone · --serif · --sans · --ease)
[출력]   /(홈)만 <link> 로 읽는다. 다른 페이지에는 영향 없음
*/
/* ── 시작 화면 막 ── 지금 홈 위를 화면 가득 덮는다 */
.시작막{position:fixed;inset:0;z-index:300;overflow:hidden;background:#3A1219;color:#F3F0EA;clip-path:inset(0 0 0 0);transition:clip-path 1.15s cubic-bezier(.77,0,.18,1)}
.시작막.퇴장{clip-path:inset(50% 0 50% 0)}   /* 위아래로 갈라지며 홈이 나온다 */
.시작막 .컷{position:absolute;inset:0;opacity:0;background-size:cover;background-position:center}   /* 바닥에 표지 사진 — 영상이 늦어도 검은 화면 대신 사진(2026-10-05) */
.시작막 .컷.on{opacity:1}
.시작막 .컷 video{width:100%;height:100%;object-fit:cover;filter:contrast(1.08) saturate(1.05);opacity:0;transition:opacity .2s}
.시작막 .컷 video.재생{opacity:1}   /* 실제로 재생이 시작되어야 보인다 */
.시작막 .컷:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,12,18,.25),rgba(40,12,18,.55))}
.시작막 .큰글{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;font:800 clamp(70px,14vw,240px)/1 var(--sans);letter-spacing:-.03em;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.92);white-space:nowrap}
.시작막 .컷.on .큰글{animation:시작번쩍 .75s steps(1) both}
@keyframes 시작번쩍{0%{opacity:0}12%{opacity:1;transform:scale(1.06)}30%{transform:none}100%{opacity:1}}
.시작막 .브랜드{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .5s;background:rgba(40,12,18,.45)}
.시작막 .브랜드 b{font-family:var(--serif);font-weight:500;font-size:clamp(70px,12vw,200px);letter-spacing:.06em;line-height:.9}
.시작막 .브랜드 i{font-family:var(--serif);font-style:italic;font-size:clamp(28px,4vw,64px);color:#E7B4BD}
.시작막.브랜드중 .브랜드{opacity:1}
.시작막:not(.글꼴) .큰글{visibility:hidden}   /* 큰 글자는 글꼴 준비 뒤(기본 글꼴로 번쩍이지 않게) — 영상은 기다리지 않고 바로 */
.시작막.브랜드중 .컷.on .큰글{animation:none;opacity:0;transition:opacity .3s}   /* 브랜드 뒤에 마지막 낱말이 겹쳐 남지 않게 */
.시작막 .시각{position:absolute;left:24px;top:22px;z-index:4;font:600 12px/1 var(--sans);letter-spacing:.14em;color:#fff}
.시작막 .시각 em{font-style:normal;margin-left:6px;font-variant-numeric:tabular-nums}
.시작막 .건너{position:absolute;right:20px;top:20px;z-index:5;font:600 12px/1 var(--sans);letter-spacing:.14em;color:#fff;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:10px 16px;cursor:pointer;backdrop-filter:blur(6px)}
.시작막 .진행{position:absolute;left:0;bottom:0;height:2px;width:0;background:#E7B4BD;z-index:5;transition-property:width;transition-timing-function:linear}
/* 진행 막대 너비는 2_로직/시작화면.js 가 장면마다 늘린다(사진 준비에 따라 시간이 달라서) */
/* 시작 화면이 물러나는 동안 첫 화면 사진이 살짝 다가오고 큰 글자가 올라온다 */
#site .hero .bg img,#site .hero .bg video{transition:transform 2.6s var(--ease)}
body.시작중 #site .hero .bg img,body.시작중 #site .hero .bg video{transform:scale(1.14)}
#site .hero h1{transition:opacity 1.4s var(--ease) .3s,transform 1.4s var(--ease) .3s}
body.시작중 #site .hero h1{opacity:0;transform:translateY(40px)}

/* ── 뒤로 넘김 ── 구역이 붙어 있다가 다음 구역이 덮으면 작아지며 물러난다(2_로직/넘김.js 가 transform 을 준다) */
.넘김-장{position:sticky;transform-origin:50% 35%;will-change:transform;box-shadow:0 -30px 60px -30px rgba(43,16,22,.35)}
:where(#site > section){background:var(--bone)}   /* 덮는 구역 뒤가 비치지 않게(어두운·회색 구역은 원래 바탕 유지) */

@media (max-width:640px){
  html,body{overflow-x:clip}   /* 폰.css 의 overflow-x:hidden 은 body 를 스크롤 상자로 만들어 붙임(sticky)을 끈다 — clip 은 넘침만 자르고 붙임은 살린다. clip 을 모르는 옛 브라우저는 hidden 그대로(붙임만 안 됨) */
  .시작막 .시각{top:24px}
  .시작막 .큰글{font-size:20vw}
}
@media (prefers-reduced-motion:reduce){.시작막{display:none}}
/* 시작 화면이 나올 예정이면 페이지 맨 앞(2_로직/시작준비.js)에서 홈을 잠깐 가린다 — 막이 덮이기 전 홈이 번쩍 보이지 않게. 막이 덮이면 시작화면.js 가 푼다(안전장치 3초) */
html.시작대기{background-color:#3A1219;background-size:cover;background-position:center;background-repeat:no-repeat}   /* 첫 표지 사진은 2_로직/시작준비.js 가 깐다 · 사진이 오기 전 바탕은 검정 대신 브랜드 버건디(느린 인터넷에서 「끊긴 화면」처럼 안 보이게 · 2026-10-05) */
html.시작대기 body{background:transparent}
html.시작대기 #site,html.시작대기 body > .next{visibility:hidden}
/* 2026-11-10 표지가 첫 화면(투어)과 합쳐짐 — 시작 영상 뒤 확대·떠오름도 새 첫 화면에 */
#site .tour-top .tour-bg img,#site .tour-top .tour-bg video{transition:transform 2.6s var(--ease)}
body.시작중 #site .tour-top .tour-bg img,body.시작중 #site .tour-top .tour-bg video{transform:scale(1.14)}
#site .tour-top h1.brand{transition:opacity 1.4s var(--ease) .3s,transform 1.4s var(--ease) .3s}
body.시작중 #site .tour-top h1.brand{opacity:0;transform:translateY(40px)}