:root{
  --void:#0c0405; --char:#160809;
  --ash:#d9c2c4; --ash-dim:#8e6d72; --ash-faint:#54383d;
  --ember:#8e1016; --ember-soft:#b8444b;
  --line:rgba(217,194,196,.10);
  --serif:"Nanum Myeongjo", serif;
  --sans:"Pretendard", sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;

  /* ---- tweak : 분위기 조절 노브 (우하단 버튼/T 키로 라이브 패널) ---- */
  --bg-blur:35px;   /* 배경 블러 강도 */
  --bg-dim:.32;     /* 배경 밝기 (0=암전, 1=원본) */
  --bg-sat:.95;     /* 배경 채도 */
  --bg-shade:.58;   /* 배경 덮개(균일한 그림자) — 1에 가까울수록 검은 화면, 앨범은 희미해짐 */
  --vig-edge:.6;    /* 가장자리 비네트 어둡기 */
  --fade-tb:.55;    /* 상하 페이드 어둡기 */
  --pack-h:64svh;   /* 담뱃갑 이미지 크기 */
  --open-deg:42deg; /* 뚜껑 최대 열림 각도 — 여기 도달하면 다음 섹션으로 자동 전환, 그 이상 안 젖혀짐 (최대 118) */
  --bgm-vol:.55;    /* 배경음악 볼륨 */

}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth; scroll-snap-type:y mandatory;}
body{background:var(--void); color:var(--ash); font-family:var(--sans); line-height:1.6; overflow-x:hidden;
  word-break:keep-all;} /* 한국어 단어 단위 줄바꿈 — "선곡하세/요" 같은 어절 중간 절단 방지 */

#smoke{position:fixed; inset:0; z-index:1; pointer-events:none;}
.grain{position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.045; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}
.vig{position:fixed; inset:0; z-index:2; pointer-events:none; box-shadow:inset 0 0 220px 80px rgba(14,2,4,.85);}
.wrap{max-width:600px; margin:0 auto; position:relative; z-index:10;}

nav{position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 22px; padding-top:calc(env(safe-area-inset-top) + 16px); mix-blend-mode:difference;}
.brand{display:flex; align-items:center; gap:9px; color:#fff;}
/* 로고 — logo.png(흰 배경 일러스트)를 알파 마스크로 가공해 currentColor로 칠함
   (nav에선 흰색+difference 블렌드, footer에선 ash를 그대로 따라감) */
.brand .logo{width:25px; height:25px; flex:none; background:currentColor;
  -webkit-mask:url('../images/logo-mask.png') center/contain no-repeat;
  mask:url('../images/logo-mask.png') center/contain no-repeat;}
.brand .wm{font-family:var(--serif); font-weight:800; font-size:18px; letter-spacing:.02em;}
nav .beta{font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:#fff; text-transform:uppercase;}

.chapter{position:relative; min-height:100svh;
  /* dvh 금지 — 주소창 개폐 때마다 섹션 높이가 변해 스냅 위치가 흔들림 (svh = 항상 안정) */
  scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; flex-direction:column; justify-content:center; padding:84px 26px;}
.bg{position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none;}
.bg::before{content:""; position:absolute; inset:-28px;
  background-size:cover; background-position:center;
  filter:blur(var(--bg-blur)) brightness(var(--bg-dim)) saturate(var(--bg-sat));}
/* 챕터별 배경 — 경로는 이 파일(css/) 기준 */
.bg-loveless::before{background-image:url('../images/loveless.png');}
.bg-trpp::before{background-image:url('../images/TRPP.jpg');}
.bg-cas::before{background-image:url('../images/CAS.jpg');}
.bg-love::before{background-image:url('../images/Love.jpg');}
.bg-lily::before{background-image:url('../images/lily-chou-chou.jpg');}
/* 공연장 건설 시퀀스 — 비유가 진행될수록 무대가 또렷해진다 (흐림 → 선명 → 06에서 완성)
   같은 앵글 6컷이라 스크롤이 곧 타임랩스가 됨. 변수 오버라이드로 챕터마다 초점이 맞춰짐.
   원본이 이미 어두운 사진이라 기본값(--bg-dim .32, --bg-shade .58)보다 훨씬 밝게 */
.bg-build1{--bg-blur:7px;  --bg-dim:.68; --bg-shade:.44;} /* 01 빈 창고 — 흐릿하지만 형체는 보이게 */
.bg-build2{--bg-blur:5px;  --bg-dim:.73; --bg-shade:.41;} /* 02 측량·첫 작업 */
.bg-build3{--bg-blur:3.5px; --bg-dim:.78; --bg-shade:.38;} /* 03 골조가 선다 */
.bg-build4{--bg-blur:2px;  --bg-dim:.84; --bg-shade:.34;} /* 04 무대 완성 */
.bg-build5{--bg-blur:1px;  --bg-dim:.9;  --bg-shade:.29;} /* 05 조명·리허설 */
.bg-build6{--bg-blur:0px;  --bg-dim:.95; --bg-shade:.24;} /* 06 만석 — 완전한 초점 */
.bg-build1::before{background-image:url('../images/build-1.jpg');}
.bg-build2::before{background-image:url('../images/build-2.jpg');}
.bg-build3::before{background-image:url('../images/build-3.jpg');}
.bg-build4::before{background-image:url('../images/build-4.jpg');}
.bg-build5::before{background-image:url('../images/build-5.jpg');}
.bg-build6::before{background-image:url('../images/build-6.jpg');}
.bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(rgba(12,4,5,var(--bg-shade)), rgba(12,4,5,var(--bg-shade))),
             radial-gradient(120% 85% at 50% 50%, transparent 38%, rgba(12,4,5,var(--vig-edge))),
             linear-gradient(180deg, rgba(12,4,5,var(--fade-tb)), transparent 30% 70%, rgba(12,4,5,var(--fade-tb)));}
.line{font-family:var(--serif); font-weight:700; color:#f2e1e1; font-size:clamp(27px,7.6vw,40px); line-height:1.5; letter-spacing:-.01em;}
.line em{color:var(--ember); font-style:normal;}
.note{margin-top:22px; font-size:14.5px; line-height:1.95; color:var(--ash-dim); font-weight:300;}
/* <br> 엄격 준수 — 자연 줄바꿈 금지. 폭이 모자라면 main.js(fitAll)가 글자 크기를 줄여 한 줄에 맞춤 */
.line,.note,.bridge{white-space:nowrap;}
.note b{color:var(--ash); font-weight:500;}
.right{text-align:right;} .right .note{margin-left:auto;}

.reveal{opacity:0; transform:translateY(24px); filter:blur(7px);
  transition:opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1), filter 1.1s;}
.reveal.in{opacity:1; transform:none; filter:blur(0);}
.d1{transition-delay:.12s;} .d2{transition-delay:.26s;} .d3{transition-delay:.4s;}

/* ---- HERO with pack (the hook) ----
   섹션을 150svh로 늘리고 내용물을 sticky로 고정 → 핀 구간 동안 스크롤이 뚜껑만 열고,
   다 열린 뒤에야 페이지가 아래로 내려간다 (스냅은 섹션이 뷰포트보다 크면 자유 정지 허용)
   220svh였으나 첫 스크롤이 너무 길어 150svh로 단축 — 반 화면이면 뚜껑이 다 열림 */
.hero{display:block; min-height:150svh; padding:0; text-align:center;
  /* 모바일 롱프레스 시 선택/돋보기/콜아웃이 뜨며 WebGL 캔버스가 깜빡이는 것 방지 */
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;}
.pack-wrap{position:sticky; top:0; height:100svh; width:100%;
  /* dvh 금지 — 스크롤 중 주소창 개폐로 높이가 계속 변해 WebGL 캔버스가 리사이즈→깜빡임 */
  display:flex; align-items:center; justify-content:center;
  padding-top:calc(env(safe-area-inset-top) + 70px); padding-bottom:5svh;}
.pack-pool{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:100%; height:64%; border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(228,198,200,.5), rgba(148,98,104,.16) 42%, transparent 68%); filter:blur(28px);}
.pack-smoke{position:absolute; left:0; right:0; bottom:0; height:90%; pointer-events:none; overflow:hidden; z-index:3;}
.pack-smoke span{position:absolute; bottom:-30px; width:170px; height:170px; border-radius:50%;
  background:radial-gradient(circle, rgba(207,170,174,.17), transparent 65%); filter:blur(7px); animation:rise 9s linear infinite;}
.pack-smoke span:nth-child(1){left:16%; animation-delay:0s;}
.pack-smoke span:nth-child(2){left:52%; animation-delay:3s; width:210px; height:210px;}
.pack-smoke span:nth-child(3){left:34%; animation-delay:6s;}
@keyframes rise{0%{transform:translateY(0) scale(.8); opacity:0;}18%{opacity:.7;}100%{transform:translateY(-180px) scale(1.5); opacity:0;}}
.pack3d{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:2;
  opacity:0; animation:packin 1.4s .2s cubic-bezier(.2,.85,.2,1) both;}
.pack3d-fallback{position:relative; z-index:2; max-height:var(--pack-h); max-width:84%; height:auto;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.6));}
@keyframes packin{to{opacity:1;}}
/* 씬 사이를 잇는 브릿지 카피 */
.bridge{margin-top:30px; font-family:var(--serif); font-size:16.5px; line-height:1.85; color:var(--ash);}
.bridge:empty{display:none;}

/* ---- playlist : 오르지 못한 곡들 (곡이 늘어나도 내부 스크롤) ---- */
.pl{list-style:none; margin-top:26px; border-top:1px solid var(--line);
  max-height:42svh; overflow-y:auto; /* dvh 금지 — 주소창 개폐 리플로우 방지 */
  overscroll-behavior:contain; /* 리스트 끝에서 페이지 스냅으로 튕기지 않게 */
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 24px, #000 calc(100% - 28px), transparent);
  mask-image:linear-gradient(180deg, transparent, #000 24px, #000 calc(100% - 28px), transparent);
  scrollbar-width:thin; scrollbar-color:var(--ash-faint) transparent;}
.pl::-webkit-scrollbar{width:4px;}
.pl::-webkit-scrollbar-thumb{background:var(--ash-faint); border-radius:2px;}
.pl::-webkit-scrollbar-track{background:transparent;}
.pl-row{position:relative; display:flex; align-items:center; gap:14px; padding:12px 4px;
  border-bottom:1px solid var(--line); cursor:pointer; transition:background .25s;}
/* 앨범 아트 위 재생/정지 아이콘 — 재생 중엔 ❚❚ 상시 노출(재클릭=정지), 그 외엔 호버 시 ▶ */
.pl-ctl{position:absolute; left:4px; top:50%; transform:translateY(-50%); width:44px; height:44px;
  display:flex; align-items:center; justify-content:center; border-radius:3px;
  background:rgba(10,3,4,.42); color:#fff; font-size:10px;
  opacity:0; transition:opacity .25s; pointer-events:none;}
.pl-ctl::after{content:"▶"; padding-left:2px;}
.pl-row:hover .pl-ctl{opacity:1;}
.pl-row.playing .pl-ctl{opacity:1; background:rgba(10,3,4,.55);}
.pl-row.playing .pl-ctl::after{content:"❚❚"; font-size:8.5px; letter-spacing:2px; padding-left:0;}
.pl-row:hover{background:rgba(217,194,196,.045);}
.pl-row img{width:44px; height:44px; object-fit:cover; border-radius:3px; filter:saturate(.85); flex:none;}
.pl-meta{flex:1; min-width:0;}
.pl-meta b{display:block; font-size:14.5px; font-weight:700; color:var(--ash);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .3s;}
.pl-meta span{font-size:11.5px; color:var(--ash-dim);}
.pl-row.playing .pl-meta b{color:var(--ember-soft);}
.pl-eq{display:flex; gap:2.5px; align-items:flex-end; height:14px; width:13px; flex:none; opacity:0; transition:opacity .3s;}
.pl-eq i{width:2.5px; height:30%; background:var(--ember-soft);}
.pl-row.playing .pl-eq{opacity:1;}
.pl-row.playing .pl-eq i{animation:eq .9s ease-in-out infinite;}
.pl-row.playing .pl-eq i:nth-child(2){animation-delay:.25s;}
.pl-row.playing .pl-eq i:nth-child(3){animation-delay:.5s;}
@keyframes eq{0%,100%{height:28%;}50%{height:100%;}}

/* ---- select : 선곡 CTA — 심장 위로 떠오르는 홀로그램 밴드 이미지 + 카피 ---- */
.select{align-items:center; text-align:center;}
/* "마음속 담아뒀던 노래를 선곡하세요." — 어느 화면에서나 한 줄 (5.6vw 비례, PC 본문폭 680px에 38px까지) */
.select .line{white-space:nowrap; font-size:clamp(15px, calc(5.6vw - 3px), 38px);}
.select .note{margin-left:auto; margin-right:auto;}
.select .btn{margin-top:34px;}
.select .bridge{margin-top:36px;} /* 버튼 아래 질문 브릿지 — 거리 챕터로 연결 */
.bv-img{width:min(86vw, 430px); height:auto; flex:none; border-radius:14px;
  margin-bottom:clamp(26px, 5svh, 48px);
  box-shadow:0 18px 60px rgba(0,0,0,.55);}

.turn{background:linear-gradient(180deg, transparent, rgba(142,16,22,.08) 50%, transparent);}
.turn .line{line-height:1.42;}

.cta-sec{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center;
  scroll-snap-align:start; scroll-snap-stop:always;
  text-align:center; padding:96px 26px 80px; background:radial-gradient(120% 70% at 50% 30%, rgba(142,16,22,.18), transparent 60%);}
.cta-sec .line{color:#fff; margin-bottom:8px;}
.cta-sec .note{margin:0 auto 32px; text-align:center;}
/* 버튼 = 언더라인 텍스트 — 박스 없이 카피의 마지막 문장처럼 (시안 비교 후 확정) */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:11px; min-height:48px; padding:6px 4px;
  font-family:var(--serif); font-weight:700; font-size:18.5px; letter-spacing:.03em; color:#f2e1e1;
  background:none; border:none; border-bottom:1px solid var(--ember-soft); border-radius:0;
  cursor:pointer; text-decoration:none;}
  /* ⚠ 여기에 transition을 선언하면 .reveal의 페이드인 transition을 덮어써서
     버튼만 스태거 없이 즉시 나타남 — 호버 전환은 :hover 상태 안에서만 */
.btn:hover{color:#fff; border-bottom-color:#e8746d; transition:color .25s, border-color .25s;}
.btn:active{transform:translateY(1px);}
.btn .arr{transition:transform .25s;} .btn:hover .arr{transform:translateX(4px);}
.btn .arr{font-family:var(--mono);}
.cta-meta{margin-top:18px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--ash-faint); text-transform:uppercase;}

.faq-sec{position:relative; height:100svh; display:flex; align-items:stretch;
  scroll-snap-align:start; scroll-snap-stop:always;
  padding:72px 22px 56px;}
.faq-inner{width:100%; max-width:760px; height:100%; min-height:0; margin:0 auto;
  display:flex; flex-direction:column;}
.faq-sec .cta-meta{margin:0 0 10px;}
.faq-list{margin-top:24px; border-top:1px solid var(--line);
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--ash-faint) transparent;}
.faq-list::-webkit-scrollbar{width:4px;}
.faq-list::-webkit-scrollbar-thumb{background:var(--ash-faint); border-radius:2px;}
.faq-list::-webkit-scrollbar-track{background:transparent;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%; display:grid; grid-template-columns:1fr auto; align-items:center; gap:18px;
  padding:17px 0; background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-size:15px; line-height:1.55; color:#f2e1e1; text-align:left;
  word-break:keep-all;}
.faq-q::after{content:"+"; font-family:var(--mono); color:var(--ember-soft); font-size:16px; line-height:1;}
.faq-item.is-open .faq-q::after{content:"-";}
.faq-a{display:none; padding:0 28px 18px 0; color:var(--ash-dim); font-size:13.5px; line-height:1.85; font-weight:300;
  word-break:keep-all;}
.faq-a[hidden]{display:none;}
.faq-item.is-open .faq-a{display:block;}
.faq-a p + p{margin-top:10px;}
.faq-a a{color:var(--ash); text-decoration:none; border-bottom:1px solid var(--ember-soft);}
.faq-a a:hover{color:#fff; border-bottom-color:#e8746d;}

footer{position:relative; z-index:10; padding:30px 26px 46px; text-align:center; border-top:1px solid var(--line); scroll-snap-align:end;}
footer .brand{justify-content:center; color:var(--ash);}
footer .fnote{font-family:var(--mono); font-size:10px; color:var(--ash-faint); letter-spacing:.06em; margin-top:12px;}

/* ---- 스크롤 큐 — 하단 중앙 셰브런, 살짝 가라앉는 모션. 페이지 끝에서 .off ---- */
#cue{position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 48px); transform:translateX(-50%);
  /* 모바일 하단 바(사파리 주소창 등)에 가리지 않게 살짝 위로 */
  z-index:40; pointer-events:none; mix-blend-mode:difference; color:#fff; opacity:.65;
  transition:opacity .5s;}
#cue svg{display:block; animation:cuebob 2.2s ease-in-out infinite;}
#cue.off{opacity:0;}
@keyframes cuebob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}

/* ---- bgm toggle ---- */
#snd{position:fixed; right:18px; top:calc(env(safe-area-inset-top) + 16px); z-index:55; display:flex; align-items:center; justify-content:flex-end; gap:8px;
  background:none; border:none; cursor:pointer; mix-blend-mode:difference; color:#fff;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  max-width:calc(100vw - 36px); padding:8px 4px; opacity:.9; transition:opacity .3s;}
#snd .ic{font-size:13px; line-height:1; flex:0 0 auto;}
#snd-label{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right;}
#snd[aria-pressed="false"]{opacity:.45;}
#snd[aria-pressed="true"] .ic{animation:flick 2.4s ease-in-out infinite;}

/* ---- tweak panel (우하단 버튼 / T 키 / ?tweak) ---- */
#tweak-toggle{position:fixed; right:18px; bottom:16px; z-index:99;
  background:none; border:none; cursor:pointer; mix-blend-mode:difference; color:#fff;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  padding:8px 4px; opacity:.45; transition:opacity .3s;}
#tweak-toggle:hover{opacity:.9;}
#tweak{position:fixed; right:14px; bottom:52px; z-index:100; width:236px; padding:14px 16px 16px;
  background:rgba(13,12,14,.95); border:1px solid var(--line); border-radius:6px;
  font-family:var(--mono); font-size:10px; color:var(--ash-dim); letter-spacing:.04em;
  box-shadow:0 10px 40px rgba(0,0,0,.6);}
#tweak h3{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ash);
  display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;}
#tweak h3 button{background:none; border:none; color:var(--ash-dim); cursor:pointer; font-size:12px; padding:2px 4px;}
#tweak label{display:block; margin-top:9px;}
#tweak .val{float:right; color:var(--ember-soft);}
#tweak input[type=range]{width:100%; margin-top:3px; accent-color:var(--ember);}
#tweak select{display:block; width:100%; margin-top:4px; padding:5px 6px;
  background:#1a0d0f; color:var(--ash); border:1px solid var(--line); border-radius:3px;
  font-family:var(--mono); font-size:10px;}
#tweak .row{display:flex; gap:8px; margin-top:14px;}
#tweak .row button{flex:1; padding:7px 0; background:none; border:1px solid var(--line);
  color:var(--ash-dim); font-family:var(--mono); font-size:9px; letter-spacing:.12em;
  cursor:pointer; border-radius:3px; transition:color .2s, border-color .2s;}
#tweak .row button:hover{color:var(--ash); border-color:var(--ash-faint);}

/* ---- 작은 폰(아이폰 미니 등 가용 높이 ≤720px) : 텍스트 많은 선곡 CTA가
        한 화면(100svh)을 넘지 않게 압축 — 안 그러면 스냅과 충돌하며 아래가 잘림 ---- */
@media (max-width:767px) and (max-height:720px){
  .chapter:not(.hero){padding-top:40px; padding-bottom:40px;}
  .bv-img{width:min(72vw, 270px); margin-bottom:18px;} /* 텍스트만 압축하고 사진은 크게 유지 */
  .select .note{margin-top:12px; line-height:1.8; font-size:13.5px;}
  .select .btn{margin-top:16px; min-height:44px; font-size:17px;}
  .select .bridge{margin-top:16px; font-size:14.5px;}
}
/* 진짜 작은 폰(SE급, 가용높이 ≤600px)에서만 사진까지 축소 */
@media (max-width:767px) and (max-height:600px){
  .bv-img{width:min(46vw, 185px);}
}

/* ---- PC : 모바일 칼럼을 강제하지 않음 — 배경·캔버스는 풀블리드, 본문만 중앙 680px ---- */
@media (min-width:768px){
  .wrap{max-width:none;} /* 챕터 배경(.bg)이 화면 전체로 퍼지게 */
  .chapter:not(.hero), .cta-sec{
    padding-left:max(26px, calc(50vw - 340px));
    padding-right:max(26px, calc(50vw - 340px));}
  nav{padding-left:34px; padding-right:34px;}
  .line{font-size:clamp(34px, 4.2vw, 54px); line-height:1.42;}
  .note{font-size:16.5px;}
  .bridge{font-size:19px;}
  .playlist .line br{display:none;} /* "무대에 오르지 못한 흔적들."은 PC에서 한 줄로 */
  .pl{max-height:48svh;}
  .bv-img{width:min(52svh, 480px);} /* 홀로그램 밴드 이미지는 PC에서 넉넉하게 */
  .faq-sec{padding-left:max(26px, calc(50vw - 380px)); padding-right:max(26px, calc(50vw - 380px));}
  .faq-q{font-size:16px;}
  .faq-a{font-size:14.5px;}
  footer{padding-left:34px; padding-right:34px;}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;}
  .reveal{opacity:1 !important; transform:none !important; filter:none !important;}
  .pack3d,.pack3d-fallback{opacity:1 !important; transform:none !important;}
}