@charset "utf-8";
/* ===
   모란상점 — P4 아틀리에 크래프트 (액센트: 더스티 로즈)
   ★ 레이아웃 아키타입 E — 오버레이 레이어드
     각 .layer 가 position:sticky + 음수 마진으로 앞 장 위에 겹쳐 쌓인다.
     겹쳐 쌓인 포장지가 한 장씩 덮이는 결. 상단 .wrap-edge 가 접힌 가장자리 역할.
   ⚠ scroll-behavior:smooth 전역 금지 (Lenis 충돌) — 모바일 미디어쿼리에만
   ⚠ 액센트는 더스티 로즈 #B4737A. 번트 올리브(ovenondo)·테라코타(kkori) 금지
   === */

:root{
  --linen:#F4EFE7;
  --kraft:#E7DED2;
  --ink:#2B2622;
  --night:#1E1A17;
  --accent:#B4737A;        /* 더스티 로즈 */
  --accent-dp:#8F565D;     /* 진한 더스티 로즈 (호버·다크 배경 대비) */
  --accent-lt:#D5A6AB;     /* 옅은 더스티 로즈 (다크 배경 텍스트용) */

  --ink-74:rgba(43,38,34,.74);
  --ink-54:rgba(43,38,34,.54);
  --line:rgba(43,38,34,.14);

  --serif:'Noto Serif KR',serif;
  --sans:'Pretendard Variable',Pretendard,-apple-system,'Noto Sans KR',sans-serif;
  --mono:'IBM Plex Mono','SF Mono',Consolas,monospace;
  --hand:'Gaegu','Noto Serif KR',cursive;

  --wrap:1340px;
  --gut:clamp(20px,4vw,58px);
  --edge:38px;             /* 레이어 상단 접힌 가장자리 높이 */
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--night);color:var(--ink);
  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}
ol,ul{list-style:none}
::selection{background:var(--accent);color:#fff}

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

/* 사진 톤 통일 — 명세서 §03 (햇빛 바랜 리넨톤) */
.hero-media img,.sea-fig img,.bench-fig img,.cls-fig img,
.sub-fig img,.place-media img{
  filter:saturate(.92) sepia(.09) contrast(.97);
}

/* 종이 질감 노이즈 — 모티프 */
body::before{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.045;
  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(--night);display:grid;place-items:center}
.curtain-inner{text-align:center}
.curtain-mark{width:clamp(58px,10vw,86px);height:auto;margin:0 auto;overflow:visible}
.curtain-txt{margin-top:18px;font-size:10px;letter-spacing:.44em;color:var(--accent-lt);
  padding-left:.44em;opacity:0}

/* ---------- 타이포 ---------- */
.display{font-family:var(--serif);font-weight:300;
  font-size:clamp(44px,8.4vw,122px);line-height:1.03;letter-spacing:-.045em}
.h2{font-family:var(--serif);font-weight:400;
  font-size:clamp(29px,4.6vw,62px);line-height:1.16;letter-spacing:-.032em}
.label{font-size:10.5px;letter-spacing:.34em;color:var(--accent);font-weight:600;font-family:var(--mono)}
em{font-style:normal;color:var(--accent-dp);font-weight:500}
.sec-lead{color:var(--ink-74);font-size:clamp(14.5px,1.5vw,16.5px);max-width:54ch;line-height:1.9}
.sec-lead.note{font-size:12px;color:var(--ink-54)}

/* ---------- 버튼 ---------- */
.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(--ink)}
.btn-ghost:hover{border-color:var(--accent);background:rgba(180,115,122,.08)}
.btn-line{border:1px solid rgba(255,255,255,.44);color:#fff}
.btn-line:hover{border-color:#fff;background:rgba(255,255,255,.11)}
.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:16px}

/* ---------- 헤더 ---------- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:90;color:#fff;border-bottom:1px solid transparent;
  transition:background .4s,border-color .4s,color .4s,backdrop-filter .4s}
.site-head.is-stuck{background:rgba(244,239,231,.93);color:var(--ink);
  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}
.logo-mark{color:var(--accent-lt);display:flex;transition:color .4s}
.site-head.is-stuck .logo-mark{color:var(--accent)}
.logo-txt{font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:-.02em}
.morph-src{display:none}
.gnb{display:none;gap:30px;margin-left:auto;font-size:13.5px;opacity:.82}
@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}}

/* ===
   ★ 아키타입 E — 오버레이 레이어드 (포장지가 한 장씩 겹쳐 덮인다)
   === */
.layer{position:relative;z-index:1}

/* 각 장의 지질(紙質) — 명암 리듬: 사진→린넨→다크→크라프트→린넨→액센트→잉크→… */
.layer-linen  {background:var(--linen);color:var(--ink)}
.layer-kraft  {background:var(--kraft);color:var(--ink)}
.layer-ink    {background:var(--night);color:var(--linen)}
.layer-accent {background:var(--accent-dp);color:#fff}
.layer-photo  {background:var(--night);color:#fff}
.layer-season {background:#241F1B;color:var(--linen)}

/* 접힌 가장자리 — 겹쳐 쌓인 포장지의 색인 탭 */
.wrap-edge{display:flex;align-items:center;gap:12px;height:var(--edge);padding:0 var(--gut);
  font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--accent);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(43,38,34,.05),rgba(43,38,34,0))}
.wrap-edge i{display:block;width:26px;height:1px;background:currentColor;opacity:.55}
.wrap-edge.is-dark{color:var(--accent-lt);border-bottom-color:rgba(244,239,231,.16);
  background:linear-gradient(180deg,rgba(244,239,231,.07),rgba(244,239,231,0))}
.layer-accent .wrap-edge.is-dark{color:rgba(255,255,255,.82);border-bottom-color:rgba(255,255,255,.26)}

/* 레이어 본문 여백 — 섹션 패딩 규칙 clamp(90px,13vw,190px) */
.layer-in{padding:clamp(90px,13vw,190px) 0}

/* ⚠ 데스크톱에서만 겹쳐 쌓는다 (모바일은 일반 흐름 — 함정 3) */
@media(min-width:1024px){
  .layer{position:sticky;top:0;min-height:100svh;
    margin-top:-13vh;                    /* ★ 음수 마진으로 앞 장 위에 덮인다 */
    border-radius:16px 16px 0 0;overflow:hidden;transform-origin:50% 0;
    box-shadow:0 -24px 64px rgba(15,11,9,.34),0 -1px 0 rgba(244,239,231,.11);
    will-change:transform,filter}
  .layer:first-child{margin-top:0;border-radius:0;box-shadow:none}
  /* 마지막 장은 sticky를 풀어 푸터가 이어지게 한다 */
  .layer:last-child{position:relative}

  .wrap-edge{position:sticky;top:0;z-index:6;backdrop-filter:blur(4px)}
  .layer-in{display:flex;flex-direction:column;justify-content:center;
    min-height:calc(100svh - var(--edge));padding:clamp(56px,7vw,96px) 0}

  /* ★ 시그니처 장은 화면에 더 오래 머문다 (스트립이 다 흐르기 전에 덮이면 죽는다)
     ⚠ overflow:hidden 은 자식 sticky 를 무력화 → clip 을 쓴다
        (안 그러면 .layer-in 이 흘러 올라가 아카이브가 빈 화면이 된다) */
  .archive{min-height:250svh;overflow:clip}
  .archive .layer-in{position:sticky;top:var(--edge);min-height:calc(100svh - var(--edge));width:100%}

  /* 히어로는 접힌 가장자리를 사진 위에 띄운다 */
  .hero .wrap-edge{position:absolute;top:0;left:0;right:0;z-index:6;
    height:auto;padding-top:78px;padding-bottom:12px;
    background:linear-gradient(180deg,rgba(20,15,12,.55),rgba(20,15,12,0))}
}

/* ===
   L01 히어로 — 풀블리드 사진 + 2중 그라데이션 스크림 + 텍스트 오버레이
   === */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;isolation:isolate}
/* ⚠ 패럴랙스 scale(1.05) 확대분이 새어 나가면 문서 폭이 넓어져
   모바일에서 가로 스크롤이 생긴다 → 래퍼가 반드시 잘라낸다 */
.hero-media{position:absolute;inset:-6% 0;z-index:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:32% 50%;will-change:transform}
/* 2중 스크림 — 세로 어둠 + 좌하단 대각 어둠 (헤드라인 가독) */
.hero::before,.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.hero::before{background:linear-gradient(180deg,rgba(18,13,11,.62) 0%,rgba(18,13,11,.14) 34%,rgba(18,13,11,.82) 100%)}
.hero::after{background:linear-gradient(102deg,rgba(18,13,11,.72) 0%,rgba(18,13,11,.30) 44%,rgba(18,13,11,0) 74%)}
.hero-in{position:relative;z-index:3;padding-top:clamp(120px,18vh,200px);
  padding-bottom:clamp(48px,7vh,84px)}
@media(min-width:1024px){.hero-in{justify-content:flex-end}}

.eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--mono);
  font-size:11px;letter-spacing:.28em;color:var(--accent-lt)}
.eyebrow .rule{display:block;width:52px;height:1px;background:currentColor;flex:0 0 auto}
.hero-h1{color:#fff;margin:clamp(20px,3vh,34px) 0 clamp(20px,3vh,30px);
  text-shadow:0 2px 40px rgba(12,8,6,.5);max-width:14ch}
.hero-lead{font-size:clamp(15px,1.8vw,19px);color:rgba(255,255,255,.86);max-width:44ch;line-height:1.85}
.hero-lead em{color:var(--accent-lt)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(26px,3.6vh,40px)}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  margin-top:clamp(32px,5vh,64px);padding-top:20px;border-top:1px solid rgba(255,255,255,.2)}
.hero-foot .mono{font-size:10px;letter-spacing:.22em;color:rgba(255,255,255,.6);line-height:2.4}
.hero-scroll{display:flex;align-items:center;gap:10px;letter-spacing:.2em;white-space:nowrap}
.hero-scroll i{display:block;width:34px;height:1px;background:rgba(255,255,255,.24);position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;inset:0;background:var(--accent-lt);
  animation:sweep 2.1s cubic-bezier(.7,0,.3,1) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ===
   L02 선언 — 초대형 타이포 (페이지당 정확히 1곳)
   === */
.statement .layer-in{gap:clamp(28px,4vw,52px)}
.statement-h{font-family:var(--serif);font-weight:200;
  font-size:clamp(38px,8.2vw,118px);line-height:1.05;letter-spacing:-.05em;
  margin:clamp(18px,2.4vw,32px) 0 0}
.st-line{display:block}
@media(min-width:720px){.st-indent{margin-left:13%}}
.statement-sub{max-width:58ch;margin-left:auto}
.statement-sub p{font-size:clamp(14.5px,1.6vw,17px);color:var(--ink-74);line-height:1.92}
.st-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.2deg)}
.st-mark::after{content:"";position:absolute;left:-3px;right:-3px;bottom:2px;height:9px;
  background:rgba(180,115,122,.2);z-index:-1;border-radius:4px}
.st-note{font-size:9.5px;letter-spacing:.28em;color:var(--ink-54);line-height:2.6;
  border-top:1px solid var(--line);padding-top:16px;max-width:30ch}
.st-note span{display:block;margin-top:10px;letter-spacing:.1em;font-size:11px}

/* ===
   L03 ★ 시그니처 — 계절 아카이브 스트립
   계절 팔레트 4장이 크로스페이드하고, 스트립이 가로로 흐른다.
   === */
/* ⚠ overflow:hidden 은 자식(.layer-in) sticky 를 무력화 → clip 을 쓴다 */
.archive{position:relative;overflow:clip}
.sea-bgs{position:absolute;inset:0;z-index:0;pointer-events:none}
.sea-bg{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.sea-bg.is-on{opacity:1}
/* 계절별 배경 그라데이션 — 팔레트가 실제로 갈린다 */
.sea-bg[data-sea="spring"]{background:radial-gradient(120% 78% at 18% 8%,rgba(201,144,154,.30),transparent 62%),radial-gradient(96% 68% at 88% 92%,rgba(163,182,150,.22),transparent 60%),#241F1B}
.sea-bg[data-sea="summer"]{background:radial-gradient(120% 78% at 78% 10%,rgba(122,158,152,.34),transparent 62%),radial-gradient(96% 68% at 12% 90%,rgba(148,170,196,.20),transparent 60%),#1F2422}
.sea-bg[data-sea="autumn"]{background:radial-gradient(120% 78% at 24% 92%,rgba(178,114,74,.32),transparent 62%),radial-gradient(96% 68% at 84% 12%,rgba(180,115,122,.26),transparent 60%),#241C18}
.sea-bg[data-sea="winter"]{background:radial-gradient(120% 78% at 62% 6%,rgba(150,158,168,.26),transparent 62%),radial-gradient(96% 68% at 16% 94%,rgba(120,132,124,.20),transparent 60%),#1C1E1E}

.archive-in{position:relative;z-index:2}
.archive .label{color:var(--accent-lt)}

.arc-head{display:grid;gap:clamp(24px,3.4vw,48px);margin-bottom:clamp(30px,4vw,54px)}
@media(min-width:900px){.arc-head{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:end}}
.arc-title{font-family:var(--serif);font-weight:300;
  font-size:clamp(32px,5.4vw,72px);line-height:1.06;letter-spacing:-.04em;
  margin:14px 0 18px;color:var(--linen)}
.arc-sub{color:rgba(244,239,231,.62);font-size:clamp(13.5px,1.4vw,15.5px);max-width:44ch;line-height:1.85}

.arc-head-r{display:grid;gap:clamp(18px,2.4vw,28px)}
@media(min-width:560px){.arc-head-r{grid-template-columns:auto 1fr;align-items:end}}

/* MorphSVG — 꽃잎 실루엣 (계절 따라 변형) */
.petal-morph{width:clamp(78px,12vw,124px);color:var(--accent-lt);transition:color .9s ease}
.petal-morph svg{width:100%;height:auto;overflow:visible}
.morph-label{margin-top:10px;font-size:9.5px;letter-spacing:.18em;color:rgba(244,239,231,.56);
  white-space:nowrap}

.arc-gauge{display:grid;gap:12px;align-content:end}
.arc-season{display:flex;align-items:baseline;gap:12px;color:rgba(244,239,231,.55);font-size:10.5px;letter-spacing:.2em}
.arc-season b{font-family:var(--serif);font-weight:400;font-size:clamp(22px,3vw,34px);
  color:var(--linen);letter-spacing:-.02em;line-height:1}
.arc-line{height:1px;background:rgba(244,239,231,.2);position:relative}
.arc-line span{display:block;height:100%;width:0;background:var(--accent-lt);transition:background .9s ease}
.arc-hint{font-size:9.5px;letter-spacing:.24em;color:rgba(244,239,231,.42)}

/* 가로 스트립
   ⚠ 100vw 금지 — 스크롤바 폭을 포함해 실제 뷰포트보다 넓다.
      그 값으로 padding 을 계산하면 가로 오버플로가 생긴다 → 100% 를 쓴다 */
.strip-viewport{overflow:hidden;max-width:100%;
  padding-left:max(var(--gut),calc((100% - var(--wrap))/2 + var(--gut)));
  cursor:grab}
.strip-viewport.is-drag{cursor:grabbing}
.strip-track{display:flex;gap:clamp(18px,2.4vw,34px);align-items:stretch;
  width:max-content;will-change:transform}
.strip-viewport img{user-select:none;-webkit-user-drag:none}

.sea-card{flex:0 0 clamp(258px,80vw,400px);display:flex;flex-direction:column;position:relative;
  background:rgba(244,239,231,.05);border:1px solid rgba(244,239,231,.14);
  border-radius:18px;padding:clamp(16px,1.8vw,22px)}
.sea-no{font-size:10px;letter-spacing:.28em;color:var(--accent-lt);margin-bottom:14px}
.sea-fig{position:relative;overflow:hidden;border-radius:12px;background:rgba(0,0,0,.2)}
.sea-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform 1s cubic-bezier(.16,1,.3,1)}
.sea-card:hover .sea-fig img{transform:scale(1.04)}
/* 손글씨 테이프 라벨 — 모티프 */
.sea-tape{position:absolute;left:14px;top:14px;font-family:var(--hand);font-size:20px;font-weight:700;
  color:var(--ink);background:var(--kraft);padding:4px 18px 2px;border-radius:2px;
  transform:rotate(-2.4deg);box-shadow:0 3px 14px rgba(0,0,0,.3);line-height:1.4}
.sea-card:nth-child(even) .sea-tape{transform:rotate(2deg)}
.sea-body{padding:20px 4px 4px;display:flex;flex-direction:column;flex:1}
.sea-body h3{font-family:var(--serif);font-weight:500;font-size:clamp(19px,2.3vw,25px);
  line-height:1.36;letter-spacing:-.025em;color:var(--linen);margin-bottom:12px}
.sea-body>p{font-size:13.5px;color:rgba(244,239,231,.62);line-height:1.8}
.sea-list{margin-top:auto;padding-top:16px;border-top:1px dashed rgba(244,239,231,.22);
  display:grid;gap:7px}
.sea-list li{font-size:11.5px;letter-spacing:.02em;color:rgba(244,239,231,.56);line-height:1.7}
.sea-list b{display:inline-block;min-width:38px;color:var(--accent-lt);font-weight:500;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;margin-right:6px}

.arc-foot{margin-top:clamp(24px,3vw,40px)}
.arc-note{font-size:10.5px;letter-spacing:.04em;color:rgba(244,239,231,.44);max-width:64ch;line-height:1.9}

/* 데스크톱: 스트립이 뷰포트 높이에 들어가야 한다 */
@media(min-width:1024px){
  .archive .layer-in{justify-content:space-between;padding:clamp(46px,6vh,74px) 0 clamp(28px,4vh,44px)}
  .arc-head{margin-bottom:clamp(14px,2vh,26px)}
  .arc-title{font-size:clamp(30px,3.4vw,48px);margin:10px 0 12px}
  /* ★ 카드를 넉넉히 잡아 4장이 뷰포트를 넘치게 — 스트립에 실제 이동 거리가 생긴다 */
  .sea-card{flex:0 0 clamp(400px,34vw,520px)}
  .sea-fig img{aspect-ratio:16/11}
  .sea-body{padding-top:16px}
  .sea-body h3{font-size:clamp(18px,1.9vw,22px);margin-bottom:9px}
  .sea-body>p{font-size:12.5px;line-height:1.7}
  .arc-foot{margin-top:clamp(10px,1.6vh,22px)}
}
@media(min-width:1024px) and (max-height:880px){
  .sea-fig img{aspect-ratio:2/1}
  .sea-body>p{font-size:12px;line-height:1.62}
  .petal-morph{width:clamp(64px,7vh,92px)}
}
/* ⚠ 함정 3 — 모바일·태블릿: 스트립을 손으로 미는 가로 스크롤로 전환 */
@media(max-width:1023px){
  .strip-viewport{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;scrollbar-width:none;touch-action:pan-x pan-y;padding-left:var(--gut)}
  .strip-viewport::-webkit-scrollbar{display:none}
  .strip-track{padding-right:var(--gut)}
  .sea-card{scroll-snap-align:start}
}

/* ===
   L04 작업대 — 손묶음 공정
   === */
.bench-grid{display:grid;gap:clamp(32px,4.6vw,64px);align-items:center}
@media(min-width:900px){.bench-grid{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)}}
.bench-copy .h2{margin:14px 0 20px}
.bench-steps{margin-top:clamp(28px,3.6vw,44px);display:grid;gap:1px;
  background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bench-steps li{background:var(--kraft);display:grid;grid-template-columns:auto auto 1fr;
  gap:14px;align-items:baseline;padding:16px 4px;font-size:14px;color:var(--ink-74)}
.bench-steps span{font-size:10.5px;letter-spacing:.2em;color:var(--accent)}
.bench-steps b{font-weight:600;color:var(--ink);letter-spacing:-.01em}
.bench-fig{position:relative;transform-style:preserve-3d;border-radius:16px;overflow:visible}
.bench-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;will-change:transform}
.tag-cap{display:flex;justify-content:space-between;gap:12px;margin-top:12px;
  font-size:9.5px;color:var(--ink-54);border-top:1px dashed var(--line);padding-top:10px;letter-spacing:.22em}
.tilt{perspective:900px}

/* ===
   L05 화요 클래스
   === */
.cls-head{display:grid;gap:clamp(20px,3vw,44px);margin-bottom:clamp(32px,4.2vw,56px)}
@media(min-width:900px){.cls-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}}
.cls-head .h2{margin-top:14px}
.cls-fig{border-radius:16px;overflow:hidden;background:var(--kraft)}
.cls-fig img{width:100%;aspect-ratio:21/9;object-fit:cover;will-change:transform}
.cls-grid{display:grid;gap:clamp(20px,2.6vw,34px);margin-top:clamp(32px,4.2vw,56px)}
@media(min-width:760px){.cls-grid{grid-template-columns:repeat(3,1fr)}}
.cls{padding-top:22px;border-top:1px solid rgba(43,38,34,.22)}
.cls-no{font-size:10px;letter-spacing:.28em;color:var(--accent)}
.cls h3{font-family:var(--serif);font-weight:500;font-size:clamp(19px,2.2vw,24px);
  margin:12px 0 12px;letter-spacing:-.022em}
.cls p{font-size:14px;color:var(--ink-74)}
.cls-meta{margin-top:16px;font-size:11px;letter-spacing:.1em;color:var(--accent-dp) !important}
.cls-note{margin-top:clamp(30px,4vw,50px);display:grid;gap:11px;
  border-top:1px solid var(--line);padding-top:22px}
.cls-note li{position:relative;padding-left:20px;font-size:13.5px;color:var(--ink-54);line-height:1.85}
.cls-note li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:1px;background:var(--accent)}

/* ===
   L06 격주 구독 (액센트 장)
   === */
.subscribe .label{color:rgba(255,255,255,.8)}
.subscribe .sec-lead{color:rgba(255,255,255,.82)}
.sub-grid{display:grid;gap:clamp(32px,4.6vw,66px);align-items:center}
@media(min-width:960px){.sub-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}}
.sub-fig{transform-style:preserve-3d;perspective:900px}
.sub-fig img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px;will-change:transform}
.sub-copy .h2{color:#fff;margin:14px 0 20px}
.sub-plans{display:grid;gap:1px;background:rgba(255,255,255,.22);margin:clamp(28px,3.4vw,42px) 0;
  border-radius:14px;overflow:hidden}
@media(min-width:640px){.sub-plans{grid-template-columns:repeat(3,1fr)}}
.plan{background:var(--accent-dp);padding:20px 22px}
.plan-name{font-family:var(--serif);font-size:clamp(18px,2vw,22px);font-weight:500;letter-spacing:-.02em}
.plan-desc{font-size:13px;color:rgba(255,255,255,.76);margin:10px 0 14px;line-height:1.8}
.plan-meta{font-size:10.5px;letter-spacing:.14em;color:rgba(255,255,255,.62)}
.sub-list{display:grid;gap:11px;margin-bottom:clamp(26px,3.2vw,36px)}
.sub-list li{position:relative;padding-left:20px;font-size:14px;color:rgba(255,255,255,.8);line-height:1.8}
.sub-list li::before{content:"";position:absolute;left:0;top:13px;width:9px;height:1px;background:rgba(255,255,255,.7)}
.sub-list b{color:#fff;font-weight:600}

/* ===
   L07 주문 흐름 (다크 장)
   === */
.order .label{color:var(--accent-lt)}
.order .h2{color:var(--linen)}
.order .sec-lead{color:rgba(244,239,231,.66)}
.ord-h{margin:14px 0 20px}
.ord-lead{max-width:50ch}
.flow{display:grid;gap:1px;background:rgba(244,239,231,.14);margin:clamp(36px,4.6vw,64px) 0;
  border:1px solid rgba(244,239,231,.14);border-radius:16px;overflow:hidden}
@media(min-width:760px){.flow{grid-template-columns:repeat(4,1fr)}}
.flow-step{background:#221E1B;padding:26px 24px 30px}
.flow-no{font-size:11px;letter-spacing:.24em;color:var(--accent-lt)}
.flow-step h3{font-family:var(--serif);font-weight:500;font-size:clamp(17px,1.9vw,21px);
  margin:14px 0 12px;letter-spacing:-.022em;color:var(--linen)}
.flow-step p{font-size:13px;color:rgba(244,239,231,.6);line-height:1.82}
.ord-cards{display:grid;gap:clamp(20px,2.6vw,32px)}
@media(min-width:640px){.ord-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.ord-cards{grid-template-columns:repeat(4,1fr)}}
.ord{padding-top:22px;border-top:1px solid rgba(244,239,231,.22)}
.ord h3{font-family:var(--serif);font-weight:500;font-size:clamp(18px,2vw,22px);
  margin-bottom:12px;letter-spacing:-.02em;color:var(--linen)}
.ord p{font-size:13.5px;color:rgba(244,239,231,.6);line-height:1.82}
.ord-meta{margin-top:14px;font-size:10.5px;letter-spacing:.14em;color:var(--accent-lt) !important}

/* ===
   L08 손님의 말
   === */
.voi-head{display:grid;gap:clamp(18px,2.6vw,36px);margin-bottom:clamp(34px,4.4vw,58px)}
@media(min-width:900px){.voi-head{grid-template-columns:minmax(0,1fr) auto;align-items:end}}
.voi-head .h2{margin-top:14px}
.voi-head .note{text-align:right;align-self:end}
.voi-grid{display:grid;gap:clamp(26px,3.4vw,46px)}
@media(min-width:860px){.voi-grid{grid-template-columns:repeat(3,1fr)}}
.voice{border-top:1px solid rgba(43,38,34,.22);padding-top:24px}
.voice p{font-family:var(--serif);font-size:clamp(15.5px,1.8vw,18px);line-height:1.85;
  font-weight:300;letter-spacing:-.015em}
.voice cite{display:block;margin-top:20px;font-size:11px;color:var(--ink-54);font-style:normal;letter-spacing:.14em}
@media(min-width:860px){
  .voi-grid .voice:nth-child(2){margin-top:clamp(22px,3vw,52px)}
  .voi-grid .voice:nth-child(3){margin-top:clamp(-12px,-1.2vw,0px)}
}

/* ===
   L09 FAQ
   === */
.faq-grid{display:grid;gap:clamp(30px,4vw,64px)}
@media(min-width:960px){.faq-grid{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}}
.faq-side .h2{margin:14px 0 20px}
@media(min-width:960px){.faq-side{position:sticky;top:calc(var(--edge) + 90px);align-self:start}}
.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:600}
.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-74);max-width:62ch;line-height:1.9}

/* ===
   L10 오시는 길
   === */
.place{position:relative;overflow:hidden}
.place-media{position:absolute;inset:-8% 0;z-index:0}
.place-media img{width:100%;height:100%;object-fit:cover;opacity:.34;will-change:transform}
.place::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(24,19,16,.9),rgba(24,19,16,.96))}
.place .layer-in{position:relative;z-index:2}
.place .label{color:var(--accent-lt)}
.place .h2{color:#fff}
.place-grid{display:grid;gap:clamp(30px,4vw,64px)}
@media(min-width:900px){.place-grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}}
.place-l .h2{margin:14px 0 24px}
.place address{font-style:normal;color:rgba(244,239,231,.76);font-size:15px;line-height:2}
.hours{display:grid;gap:1px;background:rgba(244,239,231,.16);
  border:1px solid rgba(244,239,231,.16);border-radius:14px;overflow:hidden;margin-bottom:clamp(24px,3vw,36px)}
@media(min-width:560px){.hours{grid-template-columns:1fr 1fr}}
.hours>div{background:#221D19;padding:16px 20px;display:flex;justify-content:space-between;gap:12px;font-size:14px}
.hours dt{color:rgba(244,239,231,.55)}
.hours dd{font-weight:600;letter-spacing:.02em;color:var(--linen)}
.place-list{display:grid;gap:11px;margin-bottom:clamp(26px,3.2vw,38px)}
.place-list li{position:relative;padding-left:20px;font-size:14px;color:rgba(244,239,231,.7);line-height:1.8}
.place-list li::before{content:"";position:absolute;left:0;top:13px;width:9px;height:1px;background:var(--accent-lt)}
.place-cta{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- 푸터 ---------- */
.site-foot{background:#171310;color:rgba(244,239,231,.66);padding:clamp(56px,7vw,92px) 0 120px;
  border-top:1px solid rgba(244,239,231,.1);position:relative;z-index:2}
.foot-grid{display:grid;gap:30px}
@media(min-width:820px){.foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot-note{grid-column:1/-1}}
.foot-brand .logo-txt{color:var(--linen);font-size:22px}
.foot-brand .mono{font-size:10px;letter-spacing:.22em;color:rgba(244,239,231,.4);margin-top:8px}
.foot-info p{font-size:13px;line-height:1.95}
@media(min-width:820px){.foot-info{text-align:right}}
.foot-note{border-top:1px solid rgba(244,239,231,.12);padding-top:26px;display:grid;gap:11px}
.foot-note p{font-size:12px;color:rgba(244,239,231,.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(244,239,231,.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(43,38,34,.18)}
  .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(--night);color:var(--linen)}
  .site-foot{padding-bottom:132px}
  .head-inner{height:62px}
}

/* ---------- 애니메이션 초기 상태 (js-anim 하위에만 — 함정 5) ---------- */
html.js-anim .fade-up{opacity:0}
html.js-anim .sea-card{opacity:0}
html.js-anim .sea-tape{opacity:0}
html.js-anim .cls{opacity:0}
html.js-anim .voice{opacity:0}
html.js-anim .qa{opacity:0}
html.js-anim .ord{opacity:0}
html.js-anim .flow-step{opacity:0}
html.js-anim .plan{opacity:0}
html.js-anim .bench-steps li{opacity:0}
html.js-anim .sub-list li{opacity:0}
html.js-anim .cls-note li{opacity:0}
html.js-anim .place-list li{opacity:0}
html.js-anim .hours>div{opacity:0}

/* ⚠ 전역 smooth 금지 — 모바일 미디어쿼리에만 (함정 6) */
@media(max-width:1023px){html{scroll-behavior:smooth}}

/* ===
   ⚠ 함정 3 — 모바일·태블릿(<1024px): 겹침 전면 해제, 일반 흐름
   === */
@media(max-width:1023px){
  .layer{position:relative;top:auto;margin-top:0;min-height:0;
    border-radius:0;box-shadow:none;overflow:visible;
    transform:none !important;filter:none !important}
  .layer-in{min-height:0;display:block}
  .wrap-edge{position:relative}
  /* ⚠ 겹침은 풀되 사진 장은 계속 잘라낸다 (패럴랙스 scale 누출 → 가로 스크롤) */
  .hero,.place{overflow:hidden}
  .hero{min-height:88svh}
  .archive{min-height:0}
  .archive .layer-in{position:relative;top:auto}
  /* 틸트는 터치에서 쓰지 않는다 (translateZ 잔존 시 가로 오버플로우) */
  .tilt{perspective:none}
  .bench-fig,.sub-fig{transform:none !important;transform-style:flat}
  .bench-fig img,.sub-fig img{transform:none !important}
}

/* ---------- 접근성 ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hero :focus-visible,.archive :focus-visible,.subscribe :focus-visible,
.order :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 .sea-card,html.js-anim .sea-tape,html.js-anim .cls,
  html.js-anim .voice,html.js-anim .qa,html.js-anim .ord,html.js-anim .flow-step,
  html.js-anim .plan,html.js-anim .bench-steps li,html.js-anim .sub-list li,
  html.js-anim .cls-note li,html.js-anim .place-list li,html.js-anim .hours>div{opacity:1 !important}
  .curtain{display:none}
  .curtain-txt{opacity:1}
  .layer{position:relative !important;margin-top:0 !important;min-height:0 !important;
    transform:none !important;filter:none !important}
  .archive{min-height:0 !important}
  .archive .layer-in{position:relative !important;top:auto !important;min-height:0 !important}
  .strip-viewport{overflow-x:auto}
  .hero-scroll i::after{animation:none}
  .sea-bg{opacity:0}
  .sea-bg:first-child{opacity:1}
}