/* ── style.css ── */
/* 캠프 파지립 원페이지 시안 v1 — 모바일 먼저
   색은 넷: 종이(바탕) · 먹숲(글) · 호박(버튼) · 흐린먹(보조글). 연못 물빛은 사진이 맡는다. */
:root{
  --paper:#F4EFE6; --paper2:#EBE4D8; --ink:#1F2A22; --mute:#5E6358; --amber:#C9812A;
  --line:rgba(31,42,34,.14);
  --serif:"MaruBuri","Nanum Myeongjo","AppleMyungjo",serif;
  --sans:"Pretendard","Pretendard Variable",-apple-system,"Apple SD Gothic Neo",sans-serif;
  --pad:22px; --bar:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.7 var(--sans);
  word-break:keep-all;overflow-wrap:break-word;padding-bottom:var(--bar)}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:-.01em;margin:0}
h2{font-size:27px;line-height:1.35}
h3{font-size:19px;line-height:1.4}
p{margin:0 0 .9em}
.wrap{max-width:640px;margin:0 auto;padding:0 var(--pad)}
section{padding:72px 0}
.eyebrow{font:600 13px/1 var(--sans);letter-spacing:.14em;color:var(--amber);margin-bottom:14px;text-transform:uppercase}
.lead{font-size:17px;color:var(--ink)}
.mute{color:var(--mute)}
.small{font-size:14px;line-height:1.6}

/* 확인이 필요한 칸 — 시안에서만 보인다. 공개 전 전부 없어져야 한다 */
.blank{background:#FFE58A;color:#3B2F00;padding:0 .3em;border-radius:3px;font-weight:600;white-space:nowrap}
.chk{display:inline-block;font:600 11px/1 var(--sans);color:#8A4B00;border:1px solid #D9A45B;background:#FFF4E0;
  border-radius:99px;padding:3px 7px;margin-left:4px;vertical-align:2px;white-space:nowrap}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:12px;
  font:700 16px/1 var(--sans);text-decoration:none;transition:transform .12s ease;cursor:pointer;border:0}
.btn:active{transform:scale(.97)}
.btn-main{background:var(--amber);color:#fff}
.btn-line{background:transparent;color:inherit;border:1.5px solid currentColor}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.btn-row .btn{flex:1 1 150px}

/* ⓪ 공지 띠 · 상단바 */
.notice{background:var(--ink);color:#EDE6D8;font-size:13px;text-align:center;padding:8px 12px;line-height:1.4}
.top{position:sticky;top:0;z-index:20;background:rgba(244,239,230,.94);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line);transition:padding .2s}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:56px;transition:height .2s}
.top.thin .wrap{height:46px}
.logo{font:700 19px/1 var(--serif);text-decoration:none;letter-spacing:-.01em}
.logo small{font:600 10px/1 var(--sans);letter-spacing:.18em;color:var(--mute);margin-left:6px}
.top .btn{min-height:36px;padding:0 16px;font-size:14px;border-radius:9px}

/* ① 히어로 */
.hero{position:relative;height:min(100svh,760px);min-height:560px;overflow:hidden;color:#fff;padding:0}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 50%;
  animation:slowzoom 8s ease-out forwards}
@keyframes slowzoom{from{transform:scale(1)}to{transform:scale(1.06)}}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,20,15,.28) 0%,rgba(10,20,15,0) 28%,rgba(10,20,15,.42) 55%,rgba(10,20,15,.8) 100%)}
.hero .in{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 var(--pad) 36px;max-width:640px;margin:0 auto}
.hero .eyebrow{color:#FFD9A3}
.hero h1{font-size:38px;line-height:1.25;text-shadow:0 1px 18px rgba(0,0,0,.25)}
.hero .sub{font-size:16px;margin:14px 0 18px;opacity:.95}
.hero .stat{font-size:14px;margin-bottom:20px;opacity:.9}
.hero .stat b{font-size:16px}
.hero .btn-line{color:#fff}
.rise{animation:rise .8s .3s both ease-out}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ② 이런 곳 */
.photo{border-radius:14px;overflow:hidden;margin:26px 0}
.photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cards{display:grid;gap:12px;margin-top:26px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
.card h3{margin-bottom:6px}
.card p{margin:0;color:var(--mute);font-size:15px}
.card .num{font:700 13px/1 var(--sans);color:var(--amber);margin-bottom:10px;letter-spacing:.08em}

/* ③ 타임라인 */
.dark{background:var(--ink);color:#EDE6D8}
.dark .mute{color:#AEB3A6}
.timeline{position:relative;margin:34px 0 10px;padding-left:28px}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--amber);
  transform-origin:top;transform:scaleY(0);transition:transform 1.6s ease-out}
.timeline.in::before{transform:scaleY(1)}
.slot{position:relative;margin-bottom:34px}
.slot::before{content:"";position:absolute;left:-28px;top:8px;width:14px;height:14px;border-radius:50%;
  background:var(--ink);border:2px solid var(--amber)}
.slot .time{font:700 22px/1.2 var(--sans);letter-spacing:-.01em}
.slot .time span{font:600 14px/1 var(--sans);color:var(--amber);margin-right:8px}
.slot .when{font-size:13px;color:#AEB3A6;margin:4px 0 10px}
.slot img{border-radius:12px;width:100%;aspect-ratio:16/10;object-fit:cover;margin-bottom:10px}
.slot p{margin:0;font-size:15px}
.note{border-top:1px solid rgba(237,230,216,.2);padding-top:18px;font-size:14px;line-height:1.7}
.note li{margin-bottom:6px}
.note ul{padding-left:18px;margin:0}

/* ④ 텐트와 자리 */
.map{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin:18px 0}
.map svg{width:100%;height:auto;display:block}
.facts{list-style:none;padding:0;margin:18px 0 0;border-top:1px solid var(--line)}
.facts li{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.facts li b{font-weight:600}
.facts li span{text-align:right;color:var(--mute)}

/* ⑤ 계절 */
.seasons{display:grid;gap:14px;margin-top:26px}
.season{border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.season img,.season .empty{width:100%;aspect-ratio:16/9;object-fit:cover}
.season .empty{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#EFE9DE,#EFE9DE 10px,#E6DFD2 10px,#E6DFD2 20px);
  color:var(--mute);font-size:13px;text-align:center;padding:0 20px}
.season .txt{padding:16px 18px 18px}
.season .tag{font:700 12px/1 var(--sans);color:var(--amber);letter-spacing:.08em;margin-bottom:8px}
.season.now{border:2px solid var(--amber)}
.season p{margin:6px 0 0;font-size:15px;color:var(--mute)}

/* ⑥ 고기 */
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0}
.two img{border-radius:12px;width:100%;aspect-ratio:1/1;object-fit:cover}
.box{background:var(--paper2);border-radius:14px;padding:18px 18px 8px;margin-top:16px}
.box h3{font-size:17px;margin-bottom:8px}
.box ul{margin:0 0 10px;padding-left:18px;font-size:15px}
.box li{margin-bottom:4px}

/* ⑦ 요금 */
.big{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 20px;margin:26px 0 14px;text-align:center}
.big .label{font-size:14px;color:var(--mute)}
.big .amount{font:800 44px/1.15 var(--sans);letter-spacing:-.02em;margin:6px 0 4px}
.big .amount small{font-size:22px;font-weight:700}
.price{list-style:none;padding:0;margin:0}
.price li{display:flex;justify-content:space-between;padding:12px 2px;border-bottom:1px solid var(--line);font-size:16px}
.price li b{font-weight:700}
.eg{background:var(--paper2);border-radius:14px;padding:18px;margin-top:18px;font-size:15px}
.eg .row{display:flex;justify-content:space-between;padding:4px 0}
.eg .sum{border-top:1px solid var(--line);margin-top:8px;padding-top:10px;font-weight:700}
.perks{display:grid;gap:12px;margin-top:22px}
.perk{border-left:3px solid var(--amber);padding:4px 0 4px 14px}
.perk b{display:block;font-size:17px;margin-bottom:2px}
.perk span{font-size:14px;color:var(--mute)}

/* ⑧ 환대 */
.welcome img{border-radius:14px;width:100%;aspect-ratio:4/3;object-fit:cover;margin:22px 0}
.quiet{font-family:var(--serif);font-size:20px;line-height:1.6;margin:8px 0 18px}

/* ⑨ 리뷰 */
.reviews{text-align:center}
.reviews .nums{display:flex;justify-content:center;gap:34px;margin:22px 0}
.reviews .nums b{display:block;font:800 36px/1.1 var(--sans)}
.reviews .nums span{font-size:13px;color:var(--mute)}
.voice{font-family:var(--serif);font-size:22px;line-height:1.5;margin:20px 0 6px}

/* ⑩ 예약 · FAQ */
.steps{counter-reset:s;list-style:none;padding:0;margin:24px 0}
.steps li{counter-increment:s;position:relative;padding:0 0 18px 46px;font-size:16px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;
  background:var(--ink);color:var(--paper);font:700 15px/32px var(--sans);text-align:center}
.cancel{list-style:none;padding:0;margin:10px 0 0;font-size:15px}
.cancel li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line)}
.faq{margin-top:34px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:17px 30px 17px 0;font-weight:600;position:relative;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:13px;font:400 24px/1 var(--sans);color:var(--mute)}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 18px;color:var(--mute);font-size:15px}

/* ⑪ 오시는 길 */
.addr{font-size:18px;font-weight:600;margin:16px 0 10px}
.copy{font-size:14px;min-height:40px;padding:0 14px;border-radius:9px}
.maps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 22px}
.maps .btn{min-height:48px;padding:0 6px;font-size:14px}

/* ⑫ 바닥글 */
footer{background:var(--ink);color:#C9CCBF;padding:44px 0 36px;font-size:13px;line-height:1.8}
footer .sign{font:700 18px/1.5 var(--serif);color:#EDE6D8;margin-bottom:18px}
footer a{color:#EDE6D8}
footer .links{display:flex;gap:16px;margin:14px 0}

/* 하단 고정 바 (폰) */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:rgba(244,239,230,.97);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .3s ease}
.dock.show{transform:none}
.dock .btn{min-height:48px;font-size:15px;padding:0 12px}
.dock .btn-main{flex:1}
.dock .btn-line{flex:0 0 auto;color:var(--ink);border-color:var(--line);background:#fff}

/* 스크롤 등장 */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.cards .reveal:nth-child(2),.seasons .reveal:nth-child(2){transition-delay:.1s}
.cards .reveal:nth-child(3),.seasons .reveal:nth-child(3){transition-delay:.2s}
.seasons .reveal:nth-child(4){transition-delay:.3s}

@media (min-width:760px){
  h2{font-size:32px}
  .hero h1{font-size:52px}
  .cards{grid-template-columns:repeat(3,1fr)}
  .seasons{grid-template-columns:1fr 1fr}
  .wrap{max-width:720px}
  .dock{display:none}
  body{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .timeline::before{transform:none}
}
/* 캡처용 — 움직임을 끄고 전부 보이게 */
.shot *,.shot *::before,.shot *::after{animation:none!important;transition:none!important}
.shot .reveal{opacity:1;transform:none}
.shot .timeline::before{transform:none}
.shot .hero{height:760px}
.shot .dock{position:absolute;bottom:0;transform:none}
body.shot{position:relative;width:390px;overflow:hidden}  /* 헤드리스 크롬 창은 500px 아래로 안 줄어든다 → 몸통을 390 으로 묶고 잘라 낸다 */


/* ── style-apple.css ── */
/* v2 — Apple 마케팅 지면의 **구조**를 파지립에 옮긴다 (2026-09-30)
   대표님이 주신 DESIGN-apple.md 기준.

   왜 Apple 인가 — 「사진이 주인공, UI 는 물러난다」. 파지립의 재산이 사진이다.
   (같은 날 받은 Figma 판은 **색면이 주인공**이라 우리 밤·불 사진과 싸운다. 그래서 버렸다)

   가져온다
     · 화면 하나가 타일 하나. **밝은 면 ↔ 어두운 면 교대**
     · **색이 바뀌는 것 자체가 구분선.** 선·테두리·둥근 모서리로 나누지 않는다
     · 그림자는 **사진 밑에 딱 하나.** 카드·버튼·글자에 그림자 금지
     · 그라데이션으로 분위기 내지 않는다. 분위기는 사진이 만든다
     · 본문 17px(16 아님) · 행간 1.47 · 헤드라인 weight 600(700 아님) · 큰 글씨에 음수 자간
     · 굵기 사다리는 300 / 400 / 600 / 700. **500 은 일부러 쓰지 않는다**
     · 누르는 것은 **한 색**으로 통일. 애플은 파랑, 우리는 호박색
     · 누를 때 transform: scale(.95)

   버린다
     · 파랑(#0066cc) — 우리 색이 아니다. 호박색 #C9812A 가 그 자리를 그대로 맡는다
     · SF Pro — Pretendard 로 간다 (한글이 있어야 한다)

   이 파일은 style.css **뒤에** 붙는다. 기존을 건드리지 않고 덮어쓴다. */

:root{
  --canvas:#FFFFFF;          /* 밝은 타일 */
  --parchment:#F5F2EC;       /* 미색 타일 — 세 번째 면 */
  --tile-dark:#161A17;       /* 어두운 타일. 애플의 near-black 자리 */
  --nav-black:#000000;       /* 상단바만 순검정 */
  --act:#C9812A;             /* 누르는 것은 이 색 하나뿐 */
  --act-on-dark:#E8A855;     /* 어두운 면 위에서만 쓰는 밝은 변형 */
  --pill:980px;
  --air:80px;                /* 타일 안쪽 위아래 숨 */
}

/* ── 타일 — 가장자리까지 꽉. 타일끼리 틈 0. 색이 바뀌는 것이 구분선이다 ── */
section{padding:var(--air) 0;margin:0;border-radius:0 !important}
section.hero{padding:0}

#time, #season{background:var(--tile-dark) !important;color:#F2EFE9}
#price, #way{background:var(--parchment) !important}
#review{background:var(--tile-dark) !important;color:#F2EFE9}
#about, #place, #food, #welcome, #book{background:var(--canvas) !important}

/* ⚠ 애플 규칙: 타일을 둥글게 깎지 않는다. 띄우지도 않는다 */
#time, #season, #price, #review, #way{margin:0 !important}

body{background:var(--canvas)}
.notice{background:var(--nav-black)}
.top{background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px)}

/* ── 글자 — 크기가 아니라 굵기. 500 은 없다 ──────────────────────────── */
h1,h2,h3{font-family:var(--sans)}
h1{font-weight:600;letter-spacing:-.035em}
h2{font-weight:600;font-size:32px;line-height:1.12;letter-spacing:-.028em}
h3{font-weight:600;font-size:21px;line-height:1.19;letter-spacing:-.015em}
body,p{font-size:17px;line-height:1.47;font-weight:400;letter-spacing:-.022em}
.lead{font-size:21px;line-height:1.38;font-weight:400;letter-spacing:-.022em}
strong,b{font-weight:600}
.small{font-size:14px;line-height:1.45}

/* eyebrow 는 분류표다. 12px 이하에는 음수 자간을 쓰지 않는다 */
.eyebrow{font-weight:600;font-size:12px;letter-spacing:.06em;color:var(--act)}

.hero h1{font-size:44px;line-height:1.07;font-weight:600;letter-spacing:-.04em}

/* ── 누르는 것은 호박색 하나. 알약. 누르면 살짝 줄어든다 ──────────────── */
.btn{border-radius:var(--pill) !important;min-height:52px;padding:0 20px;
  font-weight:400;font-size:15px;letter-spacing:-.018em;white-space:nowrap;
  transition:transform .12s ease,opacity .12s ease}
.btn:active{transform:scale(.95)}
.btn-main{background:var(--act);color:#fff;border:0}
.btn-line{background:transparent;color:var(--act);border:1px solid var(--act)}
.top .btn{min-height:34px;padding:0 17px;font-size:14px}

/* 어두운 타일 위에서는 밝은 호박색 */
#time .btn-line, #season .btn-line, #review .btn-line{color:var(--act-on-dark);border-color:var(--act-on-dark)}
#time a, #season a, #review a{color:var(--act-on-dark)}
#time .eyebrow, #season .eyebrow, #review .eyebrow{color:var(--act-on-dark)}
#time p, #season p, #review p{color:rgba(242,239,233,.86)}

/* ── 그림자는 **사진 밑에 딱 하나.** 나머지 전부 걷어낸다 ───────────── */
.card, .box, .item, .tile, .num, .step, .btn, h1, h2, h3{box-shadow:none !important;text-shadow:none !important}
section:not(.hero) img, section:not(.hero) figure img{box-shadow:rgba(0,0,0,.22) 3px 5px 30px}
.hero img, .top img{box-shadow:none !important}

/* ── 테두리로 나누지 않는다. 색이 나눈다 ────────────────────────────── */
.card, .box, .item{border:0 !important;background:transparent !important}

/* ── 숨 — 제목 위 64px, 아래 48px. 사진 둘레 40px 이상 ────────────────── */
section > .wrap > .eyebrow:first-child{margin-top:0}
h2{margin-bottom:24px}
section:not(.hero) img, section:not(.hero) figure{margin:40px 0}
.hero img, .hero figure{margin:0 !important}

@media (max-width:420px){
  :root{--air:64px}
  h2{font-size:28px}
  .hero h1{font-size:38px}
  .lead{font-size:19px}
}

/* ── 로고 (2026-09-30 대표님 ③④) ─────────────────────────────────────
   ③ 「캠프 파지립」 글자만 폰트가 달랐다 — `.logo` 가 serif 로 남아 있었다. sans 로 통일.
   ④ 실제 로고 파일을 넣는다. 원본 `OneDrive/00 캠프 파지립/네이밍 & 로고/파지립 로고.PNG`
      (4167x3174). 상단바용으로 높이 72px 사본을 img/logo.png 에 둔다.
   ⚠ 로고에 이미 **CAMP POSITIVE** 가 박혀 있다. 오늘 확인한 영문 표기가 여기서 나왔다. */
.logo{display:inline-flex;align-items:center;gap:16px;font-family:var(--sans) !important;
  font-weight:600;letter-spacing:-.03em;font-size:19px;margin-left:-4px}
.logo img{height:30px;width:auto;display:block}
.logo small{font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.16em;
  color:var(--mute);margin-left:2px}

/* ── 알림줄 — 항목은 여백으로, 점은 시각을 잇는 데만 (2026-09-30 대표님 ①) ──
   「단정하고 깔끔하고 심플하게. 내용을 넣으라는 거지 이대로 넣으라는 건 아니야」
   앞서는 `주말·휴일 11·15·19시 · 평일 15·19시 · 화요일 휴무` 였는데
   **시각을 잇는 점과 항목을 나누는 점이 같은 모양**이라 층이 안 보였다. */
.notice{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:4px 20px;font-size:12.5px;letter-spacing:-.01em;padding:9px 14px}
.notice span{white-space:nowrap;opacity:.82}
.notice b{font-weight:600;opacity:1}
@media (max-width:380px){ .notice{gap:2px 12px;font-size:11.5px} }

/* 알림줄 맨 앞 「영업시간」 (2026-09-30 대표님) — 무엇에 대한 시각인지 먼저 밝힌다 */
.notice em{font-style:normal;font-weight:600;font-size:11px;letter-spacing:.06em;
  opacity:.55;padding-right:2px}


/* ── style-short.css ── */
/* v3 — **짧게.** (2026-09-30 대표님)
   「지금 너무 길어. 오고 싶게 만들기만하면 되고
    자세한내용은 플레이스로 와서 확인할 수 있게 해도 될 것 같아」

   홈페이지가 할 일을 하나로 줄인다 — **오고 싶게 만드는 것.**
   시간·요금·메뉴·위치는 네이버 플레이스에 이미 다 있다. 두 군데서 관리하면 어긋난다.
   (9/29 에 「리뷰 1,974개」가 옛 숫자로 두 곳에 박혀 있던 것이 그 예다)

   남긴다   히어로 → 왜 파지립인가 → 풍경 → 후기 → 예약 → 플레이스로
   접는다   시간표 · 사계절 · 고기 · 요금 · 웰컴티 · 오시는 길 · 취소수수료 · FAQ

   ⭐ 접은 FAQ 안에 **대표님이 채우셔야 할 빈칸이 10개** 들어 있었다. 같이 사라진다.

   이 파일은 style.css + style-apple.css **뒤에** 붙는다. 지우지 않고 숨긴다 —
   되살리려면 이 줄 하나만 빼면 된다. */

#time, #season, #food, #price, #welcome, #way{display:none !important}

/* 예약 섹션에서도 긴 것을 접는다 — 취소 수수료와 FAQ 는 네이버 예약 과정에 나온다 */
#book .cancel, #book .faq, #book h3{display:none !important}

/* 마지막 안내 — 밝은 미색 타일 */
#more{background:var(--parchment) !important;text-align:center}
#more .btn-row{justify-content:center}
#more .btn{flex:0 1 auto;min-width:172px}
#more .lead{margin-bottom:0}

/* 푸터 바로 위가 되었으니 아래 숨을 조금 더 */
#more{padding-bottom:calc(var(--air) + 16px)}

/* 생일 섹션 — 흰 바탕 타일 (2026-09-30 대표님 「생일엔 파지립이 없네」)
   ⚠ 색면(#review) 바로 앞이라 **흰 바탕**이어야 한다. 애플 규칙: 색면끼리 붙이지 않는다 */
#birthday{background:var(--canvas) !important}
#birthday figure{margin:32px 0 28px}
#birthday figcaption{margin-top:10px}


/* ── style-hero.css ── */
/* v4 — 히어로 사진이 **돌아간다** (2026-09-30 대표님)
   「지금 제일 윗 사진이 주야간 텐트 사진 몇개가 돌아가면서 보여지게 만들수 있어?」

   **여섯 장. 지상과 드론을 번갈아, 낮에서 밤으로** (2026-09-30 대표님이 드론 사진을 더하라 하심)
     ① hero 낮·지상   ② air_day 낮·드론    ③ part2 해질녘·지상
     ④ air_blue 블루아워·드론   ⑤ part3 밤·지상   ⑥ air_night 밤·드론
   **시점(지상↔하늘)과 시각(낮→밤)이 함께 바뀐다.** 파지립의 강점은 밤인데
   첫 화면이 낮 하나뿐이면 그 얘기를 못 한다.

   ⚠ 자바스크립트를 쓰지 않는다. CSS 애니메이션만 쓴다 —
     느린 폰에서도, 스크립트가 막혀도 그림은 돈다.
   ⚠ 한 장이 4초, 넘어가는 데 1.2초. 여섯이니 24초에 한 바퀴.
     (대표님 「지금보다 조금 더 빠르게 전환되어도 괜찮을 것 같아」 — 6초에서 4초로) */

.hero .slides{position:absolute;inset:0}
.hero .slides img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:38% 50%;
  opacity:0;animation:파지립돌기 24s infinite;
}
.hero .slides img:nth-child(1){animation-delay:0s}
.hero .slides img:nth-child(2){animation-delay:4s}
.hero .slides img:nth-child(3){animation-delay:8s}
.hero .slides img:nth-child(4){animation-delay:12s}
.hero .slides img:nth-child(5){animation-delay:16s}
.hero .slides img:nth-child(6){animation-delay:20s}

/* 24초에 여섯 장 = 한 장이 4초. 겹치는 1.2초 동안 앞뒤가 함께 보인다 */
@keyframes 파지립돌기{
   0%    {opacity:0}
   5%    {opacity:1}     /* 1.2초에 걸쳐 나타나고 */
  16.7%  {opacity:1}     /* 2.8초 머물다 */
  21.7%  {opacity:0}     /* 1.2초에 걸쳐 사라진다 */
 100%    {opacity:0}
}

/* ⚠ 캡처(`?shot`)와 「동작 줄이기」를 켜신 분께는 **첫 장만** 보인다.
   돌아가는 중에 캡처하면 두 장이 겹쳐 찍힌다. */
.shot .hero .slides img{animation:none !important;opacity:0}
.shot .hero .slides img:nth-child(1){opacity:1}

@media (prefers-reduced-motion:reduce){
  .hero .slides img{animation:none !important;opacity:0}
  .hero .slides img:nth-child(1){opacity:1}
}

/* 글이 사진에 묻히지 않게 — 아래쪽을 조금 더 눌러 준다 */
.hero::after{background:linear-gradient(180deg,
  rgba(10,20,15,.30) 0%, rgba(10,20,15,0) 26%,
  rgba(10,20,15,.46) 54%, rgba(10,20,15,.82) 100%)}

/* ── 사진마다 **자르는 자리**가 다르다 (2026-09-30) ──────────────────
   가로 사진을 세로 화면에 담으면 좌우가 크게 잘린다. 어디를 남길지가 사진마다 다르다.
   ③ 해질녘은 기본값(38% 50%)으로 자르면 **앞쪽 의자와 테이블만 크게 잡히고**
   게이트·연못·단풍이 다 밀려났다. 오른쪽 위로 옮겨 주제를 살린다. */
.hero .slides img:nth-child(3){object-position:72% 35%}