@charset "utf-8";
/* ==========================================================================
   꼬리살롱 — P4 아틀리에 크래프트 · 액센트: 소프트 테라코타 #C4694A
   ★ 레이아웃 아키타입 D — 비대칭 매거진 그리드 (CSS Grid 12칼럼)
     섹션마다 좌우 정렬을 뒤집어 지그재그 리듬을 만든다.
     hero 좌이미지 → creed 우문단 → album 풀블리드 → style 좌헤드
     → flow 우헤드 → guide 좌헤드 → kit 중앙 → voices 계단 → faq 좌sticky
     → booking 좌이미지(히어로 반전) → place 배경
   ⚠ scroll-behavior:smooth 전역 금지 (Lenis 충돌) — 모바일 미디어쿼리에만
   ⚠ 같은 P4의 ovenondo(번트 올리브)·moran(더스티 로즈)과 액센트 구분:
     여기는 소프트 테라코타 #C4694A + 딥 클레이 #8E4630
   ========================================================================== */

:root{
  --linen:#F7F2EC;
  --kraft:#EDE3D6;
  --espresso:#2C231C;
  --accent:#C4694A;        /* 소프트 테라코타 */
  --accent-dp:#8E4630;     /* 딥 클레이 (호버) */
  --accent-lt:#E0A183;     /* 다크 챕터용 밝은 테라코타 */
  --night:#1F1813;

  --ink-72:rgba(44,35,28,.72);
  --ink-52:rgba(44,35,28,.52);
  --line:rgba(44,35,28,.14);

  --serif:'Gowun Batang',serif;
  --sans:'Pretendard Variable',Pretendard,-apple-system,'Noto Sans KR',sans-serif;
  --mono:'Space Mono','SF Mono',Consolas,monospace;
  --hand:'Gaegu','Gowun Batang',cursive;

  --wrap:1400px;
  --gut:clamp(20px,4vw,56px);
  --colgap:clamp(12px,1.6vw,28px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--linen);color:var(--espresso);
  font-size:16px;line-height:1.75;word-break:keep-all;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--mono)}

/* ==========================================================================
   ★ 12칼럼 매거진 그리드 (아키타입 D의 뼈대)
   모바일(<720px)은 1칼럼으로 전부 스택 — 배치 클래스가 무력화되어
   어떤 요소도 화면 밖으로 밀리지 않는다
   ========================================================================== */
.mag-grid{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,34px) var(--colgap);
  align-items:start;
}
@media(min-width:720px){
  .mag-grid{grid-template-columns:repeat(12,1fr)}
  /* 칼럼 배치 유틸 — g-c{시작}-{끝} */
  .g-c1-4{grid-column:1/4}    .g-c1-5{grid-column:1/5}
  .g-c1-6{grid-column:1/7}    .g-c1-7{grid-column:1/8}
  .g-c1-8{grid-column:1/9}    .g-c1-13{grid-column:1/13}
  .g-c2-6{grid-column:2/6}    .g-c2-7{grid-column:2/8}
  .g-c2-8{grid-column:2/9}    .g-c2-12{grid-column:2/12}
  .g-c3-12{grid-column:3/12}
  .g-c4-10{grid-column:4/10}
  .g-c5-13{grid-column:5/13}
  .g-c6-13{grid-column:6/13}
  .g-c7-11{grid-column:7/11}  .g-c7-13{grid-column:7/13}
  .g-c8-13{grid-column:8/13}
  .g-c9-13{grid-column:9/13}
  .g-c10-13{grid-column:10/13}
  .g-c11-13{grid-column:11/13}
  .g-r1{grid-row:1} .g-r2{grid-row:2} .g-r3{grid-row:3}
  .g-r4{grid-row:4} .g-r5{grid-row:5}
}

/* 사진 톤 통일 — 명세서 §03 (따뜻한 필름톤) */
.hero-fig img,.pola-photo img,.style-fig img,.kit-fig img,
.booking-fig img,.place-media img{
  filter:saturate(.94) sepia(.10) contrast(.98) brightness(1.02);
}

/* 종이 질감 노이즈 — 아틀리에 모티프 */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.048;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 로딩 커튼 (클리퍼 날 온도 게이지) ---------- */
.curtain{position:fixed;inset:0;z-index:200;background:var(--espresso);display:grid;place-items:center}
.curtain-inner{text-align:center}
.curtain-txt{font-size:11px;letter-spacing:.5em;color:var(--accent-lt);padding-left:.5em}
.curtain-bar{width:min(220px,52vw);height:2px;background:rgba(247,242,236,.16);margin:20px auto 0}
.curtain-bar span{display:block;height:100%;width:0;background:var(--accent-lt)}
.curtain-deg{margin-top:14px;font-size:11px;letter-spacing:.14em;color:rgba(247,242,236,.5)}
.curtain-deg b{font-weight:700;color:var(--linen)}

/* ---------- 타이포 ---------- */
.display{
  font-family:var(--serif);font-weight:400;
  /* 모바일에서도 화면을 압도해야 한다 — 390px 폭에서 약 51px */
  font-size:clamp(46px,13vw,122px);line-height:1.02;letter-spacing:-.045em;
}
.h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(29px,4.7vw,62px);line-height:1.15;letter-spacing:-.032em;
}
.label{font-size:10px;letter-spacing:.32em;color:var(--accent);font-weight:700;font-family:var(--mono)}
em{font-style:normal;color:var(--accent-dp);font-weight:600}
.sec-lead{color:var(--ink-72);font-size:clamp(14.5px,1.5vw,16.5px);max-width:52ch}
.sec-lead.note{font-size:12px;color:var(--ink-52)}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 30px;border-radius:22px;font-size:14.5px;font-weight:700;
  transition:background .25s,color .25s,border-color .25s;will-change:transform;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dp)}
.btn-ghost{border:1px solid var(--line);color:var(--espresso)}
.btn-ghost:hover{border-color:var(--accent);background:rgba(196,105,74,.08)}
.btn-naver{background:#03C75A;color:#fff}
.btn-naver:hover{background:#02A64B}
.btn-mini{padding:10px 18px;font-size:13px;background:var(--accent);color:#fff;border-radius:18px}

/* ---------- 헤더 ---------- */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:90;
  border-bottom:1px solid transparent;transition:background .4s,border-color .4s,backdrop-filter .4s;
}
.site-head.is-stuck{
  background:rgba(247,242,236,.93);border-bottom-color:var(--line);
  backdrop-filter:saturate(1.3) blur(10px);
}
.head-inner{display:flex;align-items:center;gap:24px;height:74px}
.logo{display:flex;align-items:center;gap:9px;color:var(--espresso)}
.logo-mark{color:var(--accent);display:flex}
.logo-txt{font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:-.02em}
.gnb{display:none;gap:30px;margin-left:auto;font-size:13.5px;color:var(--ink-72)}
@media(min-width:900px){.gnb{display:flex}}
.gnb a{position:relative;padding:4px 0}
.gnb a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .3s}
.gnb a:hover::after{right:0}
@media(max-width:899px){.btn-mini{margin-left:auto}}

/* ==========================================================================
   01 히어로 — 매거진 표지형 비대칭 (이미지 좌 1~7 / 타이틀 우 7~13)
   ========================================================================== */
.hero{position:relative;padding:calc(74px + clamp(28px,4vw,56px)) 0 clamp(40px,5vw,72px);
  overflow:hidden;z-index:2}
.hero-grid{row-gap:clamp(14px,1.8vw,24px)}

.eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.24em;color:var(--accent)}
.eyebrow .rule{display:block;width:52px;height:1px;background:var(--accent);flex:0 0 auto}

.hero-fig{position:relative;background:var(--kraft);border-radius:3px;overflow:visible}
/* 모바일에서 4:5 세로 사진은 첫 화면을 통째로 먹어 헤드라인이 밀려난다.
   가로형으로 잘라 사진 + 헤드라인 + 리드가 함께 보이게 한다. */
.hero-fig img{width:100%;aspect-ratio:5/4;object-fit:cover;object-position:44% 44%;
  max-height:42svh;border-radius:3px;will-change:transform}
@media(min-width:600px){.hero-fig img{aspect-ratio:16/10;max-height:46svh}}
.edge-cap{position:absolute;left:0;bottom:-26px;font-size:9.5px;letter-spacing:.24em;
  color:var(--ink-52)}

.hero-title{align-self:end;position:relative;z-index:3;pointer-events:none}
.hero-h1{color:var(--espresso)}

.hero-copy{align-self:start}
.hero-lead{font-size:clamp(15px,1.7vw,18.5px);color:var(--ink-72);max-width:34ch;line-height:1.8}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}

.hero-side{font-size:10px;letter-spacing:.2em;color:var(--ink-52);line-height:2.4;
  border-top:1px solid var(--line);padding-top:14px}

.hero-scroll{display:flex;align-items:center;gap:10px;letter-spacing:.2em;
  font-size:10px;color:var(--ink-52);justify-self:end;align-self:end}
.hero-scroll i{display:block;width:34px;height:1px;background:var(--line);position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;inset:0;background:var(--accent);
  animation:sweep 2s cubic-bezier(.7,0,.3,1) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* 데스크톱: 타이틀이 이미지 오른쪽 경계를 살짝 파고든다 (겹침은 "살짝"만).
   이미지 높이를 뷰포트에 묶어 CTA가 첫 화면에 들어오게 한다. */
@media(min-width:1024px){
  .hero{padding-top:calc(74px + 2vh);padding-bottom:2.5vh}
  /* ★ 스케일 규칙: 히어로는 화면을 압도해야 한다.
     1440px 뷰포트에서 실측 ~120px. 여기서 줄이면 페이지 전체가 무너진다.
     3줄이므로 line-height 를 .92 까지 조여 전체 높이를 잡는다. */
  .hero-h1{font-size:clamp(80px,8.4vw,132px);line-height:.92;letter-spacing:-.055em}
  /* 사진은 뷰포트 상단 절반을 차지하고, 헤드라인 2줄 + 리드 + CTA 가
     그 아래 첫 화면 안에 전부 들어가도록 높이를 묶는다 */
  .hero-fig img{aspect-ratio:auto;height:clamp(260px,34vh,360px)}
  /* 헤드라인이 사진 우측 여백 쪽에서 시작해 강아지(좌측)를 덮지 않는다 */
  .hero-h1{padding-left:14vw}
  /* ⚠ 실측 함정: 헤드라인을 121px 로 키우면 어떤 칼럼 폭에도 2~3줄이 들어가지 않아
     사진 위에 겹칠 때 글자가 강아지를 덮거나 사진 밑단에 잘린다.
     → 사진 아래 행(g-r3)에 풀폭으로 놓고, 사진 오른쪽 여백으로 살짝 끌어올려
       매거진 표지의 겹침 리듬만 남긴다. 잘림 없음. */
  .hero-title{margin-top:calc(-1 * clamp(40px,7vh,88px));position:relative;z-index:3}
  .hero-grid{row-gap:clamp(10px,1.4vh,18px)}
  .hero-copy{padding-top:.5vh}
  .hero-lead{font-size:clamp(15px,1.5vw,17px)}
  .hero-cta{margin-top:20px}
}

/* ==========================================================================
   02 케어 원칙 — 초대형 타이포 선언 (페이지당 정확히 1곳)
   ========================================================================== */
.creed{padding:clamp(90px,13vw,200px) 0 clamp(80px,11vw,170px);
  background:var(--linen);position:relative;z-index:2}
.creed-h{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(38px,9.4vw,138px);line-height:1.02;letter-spacing:-.05em;
}
.cr-line{display:block}
@media(min-width:720px){.cr-indent{margin-left:15%}}
.creed-sub p{font-size:clamp(14.5px,1.6vw,17px);color:var(--ink-72);line-height:1.9}
.cr-mark{margin-top:22px;font-family:var(--hand);font-size:clamp(21px,2.5vw,29px);
  color:var(--accent-dp) !important;line-height:1.5;position:relative;display:inline-block;
  transform:rotate(-1.3deg)}
.cr-mark::after{content:"";position:absolute;left:-3px;right:-3px;bottom:2px;height:9px;
  background:rgba(196,105,74,.2);z-index:-1;border-radius:5px}
.cr-note{font-size:9.5px;letter-spacing:.24em;color:var(--ink-52);line-height:2.6;
  border-top:1px solid var(--line);padding-top:16px}
.cr-note span{display:block;margin-top:12px;letter-spacing:.02em;font-size:11.5px;line-height:1.8}

/* ==========================================================================
   03 ★ 시그니처 — 비포&애프터 폴라로이드 (다크 챕터)
   데스크톱: .board 가 relative, 폴라로이드는 absolute 로 흩뿌려진다
            → Draggable(type:'x,y') 로 집어 던지고, Flip 으로 그리드 정렬
   모바일:   .board 가 CSS grid 2열, 폴라로이드는 static → 핀 없이도 전부 보인다
   ========================================================================== */
.album{background:var(--espresso);color:var(--linen);position:relative;z-index:2}
.album-stage{padding:clamp(80px,11vw,130px) 0 clamp(60px,8vw,100px);
  overflow:hidden;position:relative}
.album .label{color:var(--accent-lt)}
.album-head-grid{row-gap:clamp(14px,2vw,26px);margin-bottom:clamp(26px,3.4vw,44px)}
.album-title{font-family:var(--serif);font-weight:400;
  font-size:clamp(34px,6vw,84px);line-height:1.03;letter-spacing:-.045em}
.album-sub{color:rgba(247,242,236,.58);font-size:clamp(13px,1.4vw,15px);align-self:end}

.album-hint{font-size:10px;letter-spacing:.22em;color:rgba(247,242,236,.44);align-self:center}
.album-hint .hint-desk{display:none}
.album-hint .hint-mob{display:inline}
@media(min-width:1024px){
  .album-hint .hint-desk{display:inline}
  .album-hint .hint-mob{display:none}
}
.album-gauge{display:flex;align-items:center;gap:14px;align-self:center}
.gauge-line{flex:1;height:1px;background:rgba(247,242,236,.2)}
.gauge-line span{display:block;height:100%;width:0;background:var(--accent-lt)}
.gauge-idx{font-size:10.5px;letter-spacing:.14em;color:rgba(247,242,236,.5);white-space:nowrap}
.gauge-idx b{font-weight:700;color:var(--accent-lt)}

/* --- 폴라로이드 판 --- */
.board{
  position:relative;
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(16px,3vw,30px);
}
@media(max-width:479px){.board{grid-template-columns:1fr}}

/* --- 폴라로이드 카드 --- */
.pola{
  background:#FBF8F3;padding:11px 11px 0;border-radius:3px;
  box-shadow:0 14px 34px rgba(0,0,0,.34),0 2px 6px rgba(0,0,0,.24);
  position:relative;transform-style:preserve-3d;
}
.pola-photo{overflow:hidden;background:var(--kraft);border-radius:1px}
.pola-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;
  user-select:none;-webkit-user-drag:none;pointer-events:none}
/* 압정 — 아틀리에 모티프 */
.pola-pin{
  position:absolute;top:-9px;left:50%;width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#E8A88C,var(--accent-dp) 70%);
  box-shadow:0 2px 5px rgba(0,0,0,.42);transform:translateX(-50%);z-index:4;
}
.pola-cap{padding:13px 6px 17px;color:var(--espresso)}
.pola-tag{font-size:9px;letter-spacing:.3em;font-weight:700;color:var(--accent-dp)}
.pola.is-after .pola-tag{color:#5C7A4A}
.pola-name{display:block;font-family:var(--hand);font-size:clamp(19px,2.1vw,23px);
  font-weight:700;margin-top:5px;line-height:1.35;letter-spacing:.01em}
.pola-memo{display:block;font-size:11.5px;color:var(--ink-52);margin-top:5px;line-height:1.6}

.album-foot-grid{margin-top:clamp(28px,4vw,52px)}
.album-note{font-size:10.5px;letter-spacing:.04em;color:rgba(247,242,236,.44);line-height:1.9}
.album-note b{color:var(--accent-lt);font-weight:700}

/* --- 데스크톱: 핀 스테이지 + 흩뿌린 절대배치 --- */
@media(min-width:1024px){
  .album-stage{min-height:100svh;height:100svh;display:flex;flex-direction:column;
    justify-content:space-between;
    padding:clamp(84px,9vh,106px) 0 clamp(26px,3.4vh,46px)}
  .album-head-grid{margin-bottom:0;row-gap:clamp(8px,1.2vh,16px)}
  .album-title{font-size:clamp(30px,3.6vw,50px)}

  /* 흩뿌림 판: 절대배치 무대. 높이를 뷰포트에 묶는다.
     --pola-w 는 흩뿌림/정렬 두 상태가 공유하는 카드 폭이다 (정렬 시 폭 팽창 방지) */
  .board{
    --pola-w:clamp(178px,13.6vw,214px);
    display:block;position:relative;flex:1 1 auto;
    height:clamp(360px,54vh,520px);min-height:360px;
    max-width:none;padding:0;width:100%;
  }
  .pola{
    position:absolute;width:var(--pola-w);
    cursor:grab;touch-action:none;will-change:transform;
  }
  .pola:active{cursor:grabbing}
  .pola.is-drag{box-shadow:0 30px 60px rgba(0,0,0,.5);z-index:60 !important}
  .pola-cap{padding:11px 5px 14px}
  .pola-name{font-size:20px}
  .pola-memo{font-size:11px}

  /* 초기 흩뿌림 좌표 (JS가 Flip 기준 상태로 읽는다) —
     사진관 테이블에 아무렇게나 놓인 배치 */
  .p-b1{left:2%;  top:4%;  transform:rotate(-7.5deg); z-index:6}
  .p-a1{left:19%; top:34%; transform:rotate(5.2deg);  z-index:11}
  .p-b2{left:36%; top:1%;  transform:rotate(3.4deg);  z-index:8}
  .p-a2{left:52%; top:38%; transform:rotate(-6.1deg); z-index:12}
  .p-b3{left:68%; top:6%;  transform:rotate(-2.6deg); z-index:7}
  .p-a3{left:80%; top:36%; transform:rotate(7.8deg);  z-index:10}
}
/* 세로가 짧은 데스크톱: 카드와 판을 함께 줄여 잘림 방지 */
@media(min-width:1024px) and (max-height:860px){
  .board{--pola-w:clamp(150px,11.6vw,178px);height:clamp(320px,48vh,420px);min-height:320px}
  .pola-name{font-size:17px}
  .pola-memo{font-size:10px}
  .board.is-sorted .pola-name{font-size:14px}
  .board.is-sorted .pola-memo{font-size:9.5px}
  .board.is-sorted .pola-photo img{aspect-ratio:2/1}
}

/* --- 정렬 상태(Flip 목표) : JS가 .board 에 .is-sorted 를 붙인다 ---
   ⚠ 실측 함정: 여기서 카드 폭을 grid 칼럼에 맡기면(width:100%) 카드가 3배로 커져
   판 밖으로 넘치고 헤드라인을 덮는다. 폭은 흩뿌림 때와 같게 고정하고,
   사진 비율을 낮춰(16:10) 2행이 판 높이 안에 들어오게 한다. */
@media(min-width:1024px){
  .board.is-sorted{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,var(--pola-w)));
    grid-template-rows:repeat(2,minmax(0,auto));
    /* 칼럼 간격을 넓게 잡아 3열이 판 폭을 고르게 채운다.
       (좁으면 카드가 가운데 몰려 좌우에 빈 여백이 크게 남는다) */
    gap:clamp(8px,1.2vh,18px) clamp(40px,7vw,120px);
    justify-content:center;align-content:center;
    padding:0 var(--gut);
  }
  /* 정렬되면 절대배치·회전이 풀리고 BEFORE 윗줄 / AFTER 아랫줄로 짝이 맞는다 */
  .board.is-sorted .pola{
    position:relative;left:auto;top:auto;transform:none;
    width:var(--pola-w);z-index:1;
  }
  .board.is-sorted .p-b1{grid-area:1/1} .board.is-sorted .p-b2{grid-area:1/2} .board.is-sorted .p-b3{grid-area:1/3}
  .board.is-sorted .p-a1{grid-area:2/1} .board.is-sorted .p-a2{grid-area:2/2} .board.is-sorted .p-a3{grid-area:2/3}
  /* 2행이 판 안에 들어오도록 사진을 납작하게 + 캡션 압축 */
  .board.is-sorted .pola-photo img{aspect-ratio:16/10}
  .board.is-sorted .pola-cap{padding:8px 4px 10px}
  .board.is-sorted .pola-name{font-size:16px;margin-top:3px}
  .board.is-sorted .pola-memo{font-size:10px;margin-top:2px;line-height:1.5}
}

/* ==========================================================================
   04 미용 스타일 갤러리 — 좌우 반전 (헤드 좌 / 리드 우)
   ========================================================================== */
.style{background:var(--linen);position:relative;z-index:2;padding:clamp(90px,13vw,190px) 0}
.style-head-grid{row-gap:clamp(16px,2.4vw,28px);margin-bottom:clamp(34px,4.6vw,62px)}
.style-head-grid .sec-lead{align-self:end}

.style-list{row-gap:clamp(26px,3.4vw,52px)}
.cut{border-top:1px solid rgba(44,35,28,.2);padding-top:24px}
.cut-no{font-size:10px;letter-spacing:.26em;color:var(--accent);font-weight:700}
.cut h3{font-family:var(--serif);font-weight:700;font-size:clamp(21px,2.5vw,29px);
  margin:12px 0 14px;letter-spacing:-.028em;line-height:1.3}
.cut p{font-size:14.5px;color:var(--ink-72);max-width:44ch}
.cut-meta{margin-top:16px;font-size:11px;letter-spacing:.1em;color:var(--accent-dp)}
/* 계단식 어긋남 (아키타입 D) */
@media(min-width:1024px){
  .c2{margin-top:clamp(30px,4vw,66px)}
  .c3{margin-top:clamp(-8px,-.8vw,0px)}
  .c4{margin-top:clamp(36px,4.6vw,80px)}
}

.style-foot-grid{margin-top:clamp(40px,5.4vw,86px);align-items:end}
.style-fig{overflow:hidden;border-radius:3px;background:var(--kraft)}
.style-fig img{width:100%;aspect-ratio:3/2;object-fit:cover;will-change:transform}
.tag-cap{display:flex;justify-content:space-between;gap:12px;margin-top:12px;
  font-size:9.5px;color:var(--ink-52);border-top:1px dashed var(--line);
  padding-top:10px;letter-spacing:.2em}
.style-side{font-size:9.5px;letter-spacing:.24em;color:var(--ink-52);line-height:2.4;
  border-top:1px solid var(--line);padding-top:16px}
.style-side span{display:block;margin-top:10px;letter-spacing:.02em;font-size:11.5px;
  line-height:1.85;color:var(--ink-72)}

/* ==========================================================================
   05 미용 순서 — 우측 정렬로 반전 + 계단식 4단계 (크라프트 배경)
   ========================================================================== */
.flow{background:var(--kraft);padding:clamp(90px,13vw,190px) 0;position:relative;z-index:2}
.flow-grid{row-gap:clamp(26px,3.4vw,50px)}
@media(min-width:720px){
  .flow-grid .label{justify-self:end}
  .flow-h{text-align:right}
}
.step{padding-top:24px;border-top:1px solid rgba(44,35,28,.2)}
.step-no{font-size:clamp(28px,3.6vw,46px);font-weight:700;color:var(--accent);
  line-height:1;letter-spacing:-.03em;display:block}
.step h3{font-family:var(--serif);font-weight:700;font-size:clamp(19px,2.2vw,25px);
  margin:14px 0 12px;letter-spacing:-.025em}
.step p{font-size:14.5px;color:var(--ink-72);max-width:42ch}
.step-meta{margin-top:14px;font-size:11px;letter-spacing:.12em;color:var(--accent-dp)}
@media(min-width:1024px){
  .s2{margin-top:clamp(28px,3.6vw,60px)}
  .s3{margin-top:clamp(-10px,-1vw,0px)}
  .s4{margin-top:clamp(34px,4.4vw,74px)}
}
.flow-total{font-size:11.5px;letter-spacing:.06em;color:var(--ink-52);
  border-top:1px solid var(--line);padding-top:18px}
.flow-total b{color:var(--accent-dp);font-weight:700}

/* ==========================================================================
   06 이용 안내 — 다크 챕터 2 (야간 톤). 체중 구간 + 유의사항
   ========================================================================== */
.guide{background:var(--night);color:var(--linen);padding:clamp(90px,13vw,190px) 0;
  position:relative;z-index:2}
.guide .label{color:var(--accent-lt)}
.guide .h2{color:#fff}
.guide .sec-lead.note{color:rgba(247,242,236,.5)}
.guide-grid{row-gap:clamp(24px,3.4vw,48px)}

.rate{display:grid;gap:1px;background:rgba(247,242,236,.14);
  border:1px solid rgba(247,242,236,.14);border-radius:16px;overflow:hidden}
.rate-row{background:#251E18;padding:18px 22px;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;align-items:baseline}
.rate dt{font-size:14.5px;font-weight:700}
.rate dd{font-size:12px;letter-spacing:.06em;color:var(--accent-lt)}

.guide-list{list-style:none;display:grid;gap:13px}
.guide-list li{position:relative;padding-left:20px;font-size:13.5px;
  color:rgba(247,242,236,.72);line-height:1.85}
.guide-list li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:1px;
  background:var(--accent-lt)}
.guide-list b{color:var(--accent-lt);font-weight:700}

.guide-warn{margin-top:clamp(14px,2vw,26px);border-top:1px dashed rgba(247,242,236,.2);
  padding-top:22px;font-size:12px;color:rgba(247,242,236,.5);line-height:1.9;max-width:74ch}

/* ==========================================================================
   07 우리가 쓰는 것 — 이미지 3~12 중앙, 헤드가 왼쪽 아래를 파고든다
   ========================================================================== */
.kit{background:var(--linen);padding:clamp(80px,11vw,170px) 0;position:relative;z-index:2}
.kit-grid{row-gap:clamp(22px,3vw,40px)}
.kit-fig{overflow:hidden;border-radius:3px;background:var(--kraft)}
.kit-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;will-change:transform}
@media(min-width:1024px){
  .kit-h{margin-top:-3.6vw;position:relative;z-index:3}
}
.kit-p{color:var(--ink-72);font-size:clamp(14.5px,1.5vw,16.5px);max-width:38ch;align-self:end}

/* ==========================================================================
   08 보호자 후기 — 인용문이 서로 다른 칼럼/높이로 어긋난다
   ========================================================================== */
.voices{padding:clamp(90px,13vw,190px) 0;background:var(--kraft);position:relative;z-index:2}
.voice-grid{row-gap:clamp(28px,3.6vw,52px)}
.voice-grid .sec-lead{align-self:end;justify-self:end;text-align:right}
.voice{border-top:1px solid rgba(44,35,28,.2);padding-top:24px}
.voice p{font-family:var(--serif);font-size:clamp(16px,1.9vw,19.5px);line-height:1.85;
  letter-spacing:-.015em}
.voice cite{display:block;margin-top:20px;font-size:11px;color:var(--ink-52);
  font-style:normal;letter-spacing:.14em}
@media(min-width:1024px){
  .v2{margin-top:clamp(36px,4.4vw,80px)}
  .v3{margin-top:clamp(-14px,-1.4vw,0px)}
}

/* ==========================================================================
   09 FAQ — 제목 좌측 sticky, 아코디언 우측 6~13
   ========================================================================== */
.faq{background:var(--linen);padding:clamp(90px,13vw,190px) 0;position:relative;z-index:2}
.faq-side .h2{margin-top:16px}
@media(min-width:1024px){.faq-side{position:sticky;top:110px}}
.acc{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-size:clamp(15px,1.7vw,17.5px);font-weight:700}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.qa[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.qa-body{padding:0 0 26px}
.qa-body p{font-size:14.5px;color:var(--ink-72);max-width:60ch}

/* ==========================================================================
   10 예약 흐름 — 이미지 좌 1~6 (히어로와 반대 배치)
   ========================================================================== */
.booking{background:var(--kraft);padding:clamp(90px,13vw,190px) 0;position:relative;z-index:2}
.booking-grid{row-gap:clamp(24px,3.4vw,44px)}
.booking-copy .h2{margin-bottom:20px}
.booking-list{list-style:none;counter-reset:bk;
  margin:clamp(24px,3vw,34px) 0 clamp(28px,3.4vw,38px);display:grid;gap:13px}
.booking-list li{position:relative;padding-left:32px;font-size:14.5px;color:var(--ink-72)}
.booking-list li::before{
  counter-increment:bk;content:counter(bk,decimal-leading-zero);
  position:absolute;left:0;top:1px;font-family:var(--mono);font-size:11px;
  font-weight:700;color:var(--accent)}
.booking-list b{color:var(--accent-dp);font-weight:700}
.mini-note{margin-top:20px;font-size:12.5px;color:var(--ink-52)}
.booking-fig{position:relative;transform-style:preserve-3d}
.booking-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
@media(min-width:1024px){.booking-fig{margin-top:4vw}}
.tilt{perspective:900px}

/* ==========================================================================
   11 오시는 길
   ========================================================================== */
.place{position:relative;overflow:hidden;padding:clamp(90px,13vw,180px) 0;z-index:2}
.place-media{position:absolute;inset:-10% 0;z-index:0}
.place-media img{width:100%;height:100%;object-fit:cover;will-change:transform;opacity:.32}
.place::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(31,24,19,.9),rgba(31,24,19,.96))}
.place-grid{position:relative;z-index:2;color:var(--linen);row-gap:clamp(24px,3.4vw,46px)}
.place .label{color:var(--accent-lt)}
.place .h2{color:#fff}
.place address{font-style:normal;color:rgba(247,242,236,.76);font-size:15px;line-height:2;align-self:end}
.hours{display:grid;gap:1px;background:rgba(247,242,236,.16);
  border:1px solid rgba(247,242,236,.16);border-radius:14px;overflow:hidden}
@media(min-width:560px){.hours{grid-template-columns:1fr 1fr}}
.hours>div{background:#261E18;padding:16px 20px;display:flex;justify-content:space-between;
  gap:12px;font-size:14px}
.hours dt{color:rgba(247,242,236,.55)}
.hours dd{font-weight:700;letter-spacing:.02em}
.place-list{list-style:none;display:grid;gap:11px}
.place-list li{position:relative;padding-left:20px;font-size:14px;color:rgba(247,242,236,.7)}
.place-list li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:1px;
  background:var(--accent-lt)}
.place-cta{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- 푸터 ---------- */
.site-foot{background:var(--night);color:rgba(247,242,236,.66);
  padding:clamp(56px,7vw,90px) 0 120px;
  border-top:1px solid rgba(247,242,236,.1);position:relative;z-index:2}
.foot-grid{row-gap:30px}
.foot-brand .logo-txt{color:var(--linen);font-size:22px}
.foot-brand .mono{font-size:10px;letter-spacing:.2em;color:rgba(247,242,236,.4);margin-top:8px}
.foot-info p{font-size:13px;line-height:1.95}
.foot-note{border-top:1px solid rgba(247,242,236,.12);padding-top:26px;display:grid;gap:11px}
.foot-note p{font-size:12px;color:rgba(247,242,236,.46);line-height:1.85}
.demo-badge{display:inline-block;justify-self:start;border:1px solid var(--accent-lt);
  color:var(--accent-lt) !important;padding:9px 16px;border-radius:14px;font-size:12.5px !important}
.demo-badge b{color:#fff}
.made-by{letter-spacing:.2em;font-size:10px !important;color:rgba(247,242,236,.3) !important}

/* ---------- 모바일 고정 CTA ---------- */
.mobile-bar{display:none}
@media(max-width:768px){
  .mobile-bar{display:grid;grid-template-columns:1fr 1fr;gap:1px;position:fixed;
    left:0;right:0;bottom:0;z-index:95;background:rgba(44,35,28,.16)}
  .mobile-bar a{padding:17px 10px;text-align:center;font-size:14px;font-weight:700}
  .mb-call{background:var(--accent);color:#fff}
  .mb-map{background:var(--espresso);color:var(--linen)}
  .site-foot{padding-bottom:130px}
  .head-inner{height:62px}
}

/* ---------- 애니메이션 초기 상태 (반드시 js-anim 하위에만) ----------
   GSAP 로드 실패 시 main.js가 html.js-anim 을 제거하면 전부 되살아난다 */
html.js-anim .fade-up{opacity:0}
html.js-anim .pola{opacity:0}
html.js-anim .cut{opacity:0}
html.js-anim .step{opacity:0}
html.js-anim .voice{opacity:0}
html.js-anim .qa{opacity:0}
html.js-anim .rate-row{opacity:0}
html.js-anim .guide-list li{opacity:0}
html.js-anim .booking-list li{opacity:0}
html.js-anim .place-list li{opacity:0}
html.js-anim .hours>div{opacity:0}

@media(max-width:1023px){html{scroll-behavior:smooth}}

/* ---------- 접근성 ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.album :focus-visible,.guide :focus-visible,.place :focus-visible,
.site-foot :focus-visible{outline-color:var(--accent-lt)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  html.js-anim .fade-up,html.js-anim .pola,html.js-anim .cut,html.js-anim .step,
  html.js-anim .voice,html.js-anim .qa,html.js-anim .rate-row,html.js-anim .guide-list li,
  html.js-anim .booking-list li,html.js-anim .place-list li,html.js-anim .hours>div{opacity:1 !important}
  .curtain{display:none}
  .hero-scroll i::after{animation:none}
}
/* reduced-motion + 데스크톱: 폴라로이드 절대배치 흩뿌림을 풀고 정적 그리드로 즉시 표시.
   (중첩 @media 대신 and 결합 — 구형 브라우저 호환) */
@media (prefers-reduced-motion:reduce) and (min-width:1024px){
  .album-stage{height:auto;min-height:0;display:block}
  .board{display:grid !important;grid-template-columns:repeat(3,1fr);
    height:auto;padding:0 var(--gut)}
  .board .pola{position:relative;left:auto;top:auto;transform:none;width:100%;cursor:default}
}