/* =====================================================================
   사백진&TES TOUR — 오픈 준비 중 · 현장 방문 인증 페이지
   travel.css 의 색/폰트 토큰(--tv-*)을 그대로 씁니다.
   클래스 접두어: .tvv-
   ===================================================================== */

.tvv{overflow-x:clip}
.tvv [id^="tv-"]{scroll-margin-top:92px}
body:has(.tvv) .tv-footer{margin-top:0}
.tvv button{border:0;padding:0;background:none;font:inherit;color:inherit}

/* ───────── 등장 효과 (JS 가 html 에 .tvv-js 를 붙였을 때만) ───────── */
.tvv-js [data-tvv-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.tvv-js [data-tvv-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .tvv-js [data-tvv-reveal]{opacity:1;transform:none;transition:none}
}

/* ───────── 히어로 ───────── */
.tvv-hero{position:relative;min-height:760px;overflow:hidden;background:#2b241d;color:#fbf7ef;display:flex;align-items:center}
.tvv-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:tvvKen 22s ease-out forwards}
@keyframes tvvKen{to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.tvv-hero-bg{animation:none;transform:none}}
.tvv-hero-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(43,36,29,.86) 0%,rgba(43,36,29,.55) 45%,rgba(43,36,29,.18) 100%),
  linear-gradient(0deg,rgba(43,36,29,.65) 0%,rgba(43,36,29,0) 40%)}
.tvv-hero-grain{position:absolute;inset:0;opacity:.18;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.tvv-hero-inner{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center;padding-top:80px;padding-bottom:110px}
.tvv-hero-text{display:flex;flex-direction:column;gap:18px;min-width:0}
.tvv-kicker{margin:10px 0 0;font-size:13px;font-weight:700;letter-spacing:.32em;color:var(--tv-gold);text-transform:uppercase;word-break:keep-all}
.tvv-hero-title{margin:0;font-family:var(--tv-font-disp);font-size:60px;line-height:1.2;font-weight:700;letter-spacing:-.015em;word-break:keep-all;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.tvv-hero-desc{margin:0;font-size:16px;line-height:1.85;color:#e2d3bb;max-width:560px;word-break:keep-all}
.tvv-hero-actions{flex-wrap:wrap}

/* 스크롤 안내 */
.tvv-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:26px;height:42px;border:2px solid rgba(251,247,239,.55);border-radius:14px}
.tvv-scroll span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--tv-gold);animation:tvvScroll 1.8s infinite}
@keyframes tvvScroll{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* ───────── 방문 확인서 (티켓) ───────── */
.tvv-cert{position:relative;justify-self:end;width:100%;max-width:400px;background:#fbf7ef;color:var(--tv-text);border-radius:22px;padding:26px 26px 20px;
  box-shadow:0 30px 70px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.2);transform:rotate(2deg);animation:tvvCertIn 1s .25s cubic-bezier(.2,.7,.2,1) both}
@keyframes tvvCertIn{from{opacity:0;transform:translateY(40px) rotate(6deg)}to{opacity:1;transform:rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.tvv-cert{animation:none}}
.tvv-cert::before{content:"";position:absolute;inset:8px;border:1px dashed var(--tv-line-2);border-radius:16px;pointer-events:none}
.tvv-cert-top{position:relative;display:flex;flex-direction:column;gap:4px}
.tvv-cert-eyebrow{font-size:10px;font-weight:900;letter-spacing:.26em;color:var(--tv-gold-dark)}
.tvv-cert-title{margin:0;font-family:var(--tv-font-disp);font-size:24px;font-weight:700;letter-spacing:-.01em;word-break:keep-all}
.tvv-cert-photo{position:relative;margin:16px 0 4px;height:150px;border-radius:12px;overflow:hidden;background:var(--tv-cream)}
.tvv-cert-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.03)}
.tvv-cert-list{position:relative;margin:12px 0 0;display:grid;gap:0}
.tvv-cert-list > div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--tv-line)}
.tvv-cert-list > div:last-child{border-bottom:0}
.tvv-cert-list dt{font-size:12px;color:var(--tv-sub);word-break:keep-all}
.tvv-cert-list dd{margin:0;font-size:14px;font-weight:700;word-break:keep-all}
.tvv-cert-ok{display:inline-flex;align-items:center;gap:6px;color:var(--tv-green)}
.tvv-cert-tear{position:relative;height:22px;margin:8px -26px 0}
.tvv-cert-tear::before{content:"";position:absolute;left:26px;right:26px;top:50%;border-top:2px dashed var(--tv-line-2)}
.tvv-cert-foot{position:relative;display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:6px;font-size:11px;color:var(--tv-sub)}
.tvv-cert-brand{font-weight:900;color:var(--tv-brown);letter-spacing:.02em}
.tvv-cert-no{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em}
.tvv-stamp{position:absolute;width:132px;height:132px;right:-26px;top:150px;color:#b8453a;opacity:.85;transform:rotate(-14deg);mix-blend-mode:multiply;
  animation:tvvStamp .5s 1.1s cubic-bezier(.3,1.6,.5,1) both;pointer-events:none}
@keyframes tvvStamp{from{opacity:0;transform:scale(2.2) rotate(-30deg)}to{opacity:.85;transform:rotate(-14deg)}}
@media (prefers-reduced-motion:reduce){.tvv-stamp{animation:none}}

/* ───────── 숫자 띠 ───────── */
.tvv-stats{background:var(--tv-brown-dark);color:#f1e7d6}
.tvv-stats-inner{display:grid;grid-template-columns:repeat(4,1fr)}
.tvv-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:28px 10px;text-align:center}
.tvv-stat + .tvv-stat{border-left:1px solid rgba(241,231,214,.14)}
.tvv-stat b{font-family:var(--tv-font-disp);font-size:38px;line-height:1;color:var(--tv-gold);min-height:38px;display:flex;align-items:center}
.tvv-stat span{font-size:13px;color:#d9c9ae;word-break:keep-all}
.tvv-stat--ok b{color:#c9d5b4}

/* ───────── 섹션 머리 ───────── */
.tvv-head{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:44px;max-width:720px}
.tvv-head .tv-sec-title{font-size:36px}

/* ───────── 현장 기록 ───────── */
.tvv-log{padding-top:96px;padding-bottom:40px}
.tvv-chapters{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:96px;position:relative}
.tvv-ch{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
.tvv-ch.is-flip .tvv-ch-text{order:2}
.tvv-ch-text{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:12px;min-width:0}
.tvv-ch-num{position:absolute;top:-58px;left:-10px;font-family:var(--tv-font-disp);font-size:140px;line-height:1;font-weight:700;color:var(--tv-cream);z-index:-1;user-select:none}
.tvv-ch-label{font-size:11px;font-weight:900;letter-spacing:.24em;color:var(--tv-gold-dark)}
.tvv-ch-text h3{margin:0;font-size:32px;line-height:1.3;letter-spacing:-.01em;word-break:keep-all}
.tvv-ch-text p{margin:0;font-size:15px;line-height:1.85;color:var(--tv-sub);word-break:keep-all}
.tvv-ch-text::after{content:"";display:block;width:44px;height:2px;margin-top:8px;background:var(--tv-gold)}

.tvv-ch-photos{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:200px 200px;gap:14px}
.tvv-ph{position:relative;display:block;width:100%;height:100%;border-radius:18px;overflow:hidden;background:var(--tv-cream);cursor:zoom-in;box-shadow:var(--tv-shadow)}
.tvv-ph--0{grid-row:1 / span 2}
/* 사진 2장 : 나란히 */
.tvv-ch-photos--2{grid-template-columns:1fr 1fr;grid-template-rows:414px}
.tvv-ch-photos--2 .tvv-ph--0{grid-row:auto}
/* 사진 4 · 5장 : 큰 사진 + 오른쪽 격자 */
.tvv-ch-photos--4,.tvv-ch-photos--5{grid-template-columns:1.4fr 1fr 1fr}
.tvv-ch-photos--4 .tvv-ph--3{grid-column:2 / span 2}
.tvv-ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.tvv-ph:hover img{transform:scale(1.05)}
.tvv-ph:focus-visible{outline:3px solid var(--tv-gold);outline-offset:3px}

/* ───────── 로드맵 : 완료 단계 ───────── */
.tv-road.is-done h3{color:var(--tv-text)}
.tv-road.is-done p{color:var(--tv-sub)}
.tv-road.is-done .tv-road-num{color:var(--tv-green)}
.tv-road.is-done .tv-road-state{background:var(--tv-green-soft);color:var(--tv-green);display:inline-flex;align-items:center;gap:6px}
.tvv .tv-road-sec{padding-top:90px;padding-bottom:90px}

/* ───────── 마무리 배너 ───────── */
.tvv-end{position:relative;min-height:440px;display:flex;align-items:center;overflow:hidden;background:#2b241d;color:#fbf7ef;text-align:center}
.tvv-end-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tvv-end-shade{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(43,36,29,.45) 0%,rgba(43,36,29,.82) 100%)}
.tvv-end-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:70px;padding-bottom:70px}
.tvv-end h2{margin:0;font-size:46px;line-height:1.25;word-break:keep-all}
.tvv-end p{margin:0;font-size:15px;line-height:1.8;color:#e2d3bb;max-width:520px;word-break:keep-all}
.tvv-end .tv-btn{margin-top:8px}

/* ───────── 라이트박스 ───────── */
.tvv-lb{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(20,16,12,.94);padding:60px 80px;opacity:0;transition:opacity .25s ease}
.tvv-lb[hidden]{display:none}
.tvv-lb.is-open{opacity:1}
.tvv-lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%;max-height:100%}
.tvv-lb-fig img{max-width:min(1200px,100%);max-height:calc(100vh - 150px);width:auto;height:auto;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5);object-fit:contain}
.tvv-lb-fig figcaption{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.2em;color:#b9a98f}
.tvv-lb button{border:0;background:rgba(251,247,239,.1);color:#fbf7ef;cursor:pointer;transition:background .2s}
.tvv-lb button:hover{background:rgba(251,247,239,.22)}
.tvv-lb-close{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;font-size:28px;line-height:1}
.tvv-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;font-size:32px;line-height:1}
.tvv-lb-nav.prev{left:18px}
.tvv-lb-nav.next{right:18px}
body.tvv-lock{overflow:hidden}

/* ───────── 반응형 ───────── */
@media (max-width:1024px){
  .tvv-hero-inner{grid-template-columns:1fr;gap:40px;padding-top:70px}
  .tvv-cert{justify-self:start;transform:rotate(-1deg)}
  @keyframes tvvCertIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:rotate(-1deg)}}
  .tvv-hero-title{font-size:46px}
  .tvv-ch,.tvv-ch.is-flip{grid-template-columns:1fr;gap:28px}
  .tvv-ch.is-flip .tvv-ch-text{order:0}
  .tvv-ch-num{font-size:110px;top:-44px}
  .tvv-chapters{gap:80px}
}
@media (max-width:640px){
  .tvv-hero{min-height:0}
  .tvv-scroll{display:none}
  .tvv-hero-inner{padding-top:56px;padding-bottom:90px}
  .tvv-hero-title{font-size:34px}
  .tvv-hero-desc{font-size:15px}
  .tvv-hero-desc br{display:none}
  .tvv-hero-actions{flex-direction:column;align-items:stretch}
  .tvv-cert{max-width:none;padding:22px 20px 18px}
  .tvv-cert-tear{margin:8px -20px 0}
  .tvv-cert-tear::before{left:20px;right:20px}
  .tvv-cert-list > div{grid-template-columns:84px 1fr}
  .tvv-stamp{width:104px;height:104px;right:-8px;top:120px}
  .tvv-stats-inner{grid-template-columns:repeat(2,1fr)}
  .tvv-stat:nth-child(3){border-left:0}
  .tvv-stat:nth-child(n+3){border-top:1px solid rgba(241,231,214,.14)}
  .tvv-stat b{font-size:30px}
  .tvv-head .tv-sec-title{font-size:27px}
  .tvv-log{padding-top:70px}
  .tvv-ch-text h3{font-size:25px}
  .tvv-ch-num{font-size:90px;top:-36px}
  /* 모바일 : 큰 사진 한 줄 + 나머지 2열 */
  .tvv-ch-photos,.tvv-ch-photos--2,.tvv-ch-photos--4,.tvv-ch-photos--5{grid-template-columns:1fr 1fr;grid-template-rows:220px;grid-auto-rows:150px;gap:10px}
  .tvv-ch-photos .tvv-ph--0{grid-column:1 / -1;grid-row:auto}
  .tvv-ch-photos--2 .tvv-ph--1,.tvv-ch-photos--4 .tvv-ph--3{grid-column:1 / -1}
  .tvv-ph{border-radius:14px}
  .tvv-end{min-height:380px}
  .tvv-end h2{font-size:32px}
  .tvv-lb{padding:60px 12px}
  .tvv-lb-nav{top:auto;bottom:18px;transform:none}
}