/* 룩북 아틀리에 — 라라랜드맘 본 사이트와 같은 옷을 입는다.
   토큰·폰트·눈썹라벨·격자선·낟알을 그대로 가져오되, 스무스 스크롤(.loco)은 쓰지 않는다.
   본 사이트에서 관성 스크롤 때문에 버튼 터치가 죽는 일을 겪었다(2026-09-04). 폼이 있는 화면에는 안 쓴다. */
:root{
  --paper:#FFFFFF; --paper-2:#F7F7F6;
  --con:#EDECE8; --con-2:#E2E0DB; --con-3:#CFCCC6;
  --ink:#0B0B0B; --ink-2:#6E6E6E; --ink-3:#A6A6A4;
  --line:rgba(11,11,11,.10); --line-2:rgba(11,11,11,.06);
  --ease:cubic-bezier(.16,1,.3,1);
  --edge:max(18px,calc((100vw - 940px)/2));
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --kr:"Noto Sans KR",-apple-system,"Apple SD Gothic Neo",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* 콘크리트 낟알 — opacity 는 .028 이 상한이다. 넘기면 지저분해진다. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 세로 격자 — 본 사이트와 같은 6등분. 같은 건물로 읽히게 한다. */
.grid-lines{
  position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:repeating-linear-gradient(to right,var(--con-2) 0 1px,transparent 1px calc(100% / 6));
}
.wrap{position:relative;z-index:2;padding:0 var(--edge)}

/* ── 머리띠 ───────────────────────────────────── */
.top{
  position:sticky;top:0;z-index:9;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px var(--edge);border-bottom:1px solid var(--line-2);
}
.brand{font-weight:800;letter-spacing:.16em;font-size:13px}
.brand small{display:block;font-size:8.5px;letter-spacing:.34em;color:var(--ink-3);font-weight:600;margin-top:3px}
.top nav{display:flex;gap:16px;font-size:11px;letter-spacing:.12em;color:var(--ink-3)}
.top nav a{color:inherit;text-decoration:none}
.top nav a:hover{color:var(--ink)}

/* ── 단계 ─────────────────────────────────────── */
.step{padding:56px 0;border-top:1px solid var(--line-2)}
.step:first-of-type{border-top:0}
.eyebrow{
  margin:0 0 22px;font-weight:600;font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-3);
}
.step h2{
  margin:0 0 8px;font-family:var(--kr);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(21px,3.4vw,30px);line-height:1.3;
}
.step .lede{margin:0 0 26px;font-family:var(--kr);font-size:13.5px;color:var(--ink-2);max-width:52ch}

/* ── 무엇을 만들까 (카드 3장) ──────────────────── */
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;
       border:1px solid var(--line);background:var(--paper)}
.pick{
  display:flex;flex-direction:column;gap:8px;padding:26px 24px;background:none;
  border:0;border-right:1px solid var(--line);text-align:left;cursor:pointer;
  font:inherit;color:inherit;transition:background .25s var(--ease);
}
.pick:last-child{border-right:0}
.pick:hover{background:var(--paper-2)}
.pick[aria-pressed="true"]{background:var(--paper-2);box-shadow:inset 3px 0 0 var(--ink)}
.pick b{font-family:var(--kr);font-size:17px;font-weight:700;letter-spacing:-.01em}
.pick .en{font-size:9.5px;letter-spacing:.28em;color:var(--ink-3);font-weight:600}
.pick p{margin:0;font-family:var(--kr);font-size:12.5px;color:var(--ink-2);line-height:1.65}
.pick .meta{margin-top:6px;display:flex;gap:12px;font-size:11px;color:var(--ink-3);letter-spacing:.04em}
.pick .meta b{font-size:12.5px;font-family:var(--sans);font-weight:700;letter-spacing:.02em;color:var(--ink)}

/* ── 선택 줄 (성별·나이·취향·스타일) ────────────
   칩이 아니라 세그먼트. 고른 것은 배경을 채우지 않고 테두리로 표시한다. */
.rows{display:grid;gap:0;border:1px solid var(--line)}
.row{display:grid;grid-template-columns:96px 1fr;align-items:start;gap:18px;
     padding:18px 22px;border-bottom:1px solid var(--line-2)}
.row:last-child{border-bottom:0}
.row > .k{
  font-family:var(--kr);font-size:12px;font-weight:500;letter-spacing:-.01em;
  color:var(--ink-2);padding-top:8px;line-height:1.3;
}
.row > .k em{
  display:block;margin-top:2px;font-family:var(--sans);font-style:normal;
  font-size:8.5px;font-weight:600;letter-spacing:.22em;color:var(--ink-3);
}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{
  font:inherit;cursor:pointer;background:none;color:var(--ink-2);
  border:1px solid var(--line);border-radius:0;padding:8px 14px;
  font-size:12px;letter-spacing:.06em;line-height:1.2;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.opt .kr{font-family:var(--kr);font-weight:500}
.opt .en{margin-left:7px;font-size:9.5px;letter-spacing:.18em;color:var(--ink-3)}
.opt:hover{border-color:var(--con-3)}
.opt[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);background:var(--paper-2)}
.opt[aria-pressed="true"] .en{color:var(--ink-2)}
.opt:disabled{color:var(--ink-3);border-color:var(--line-2);cursor:default}

/* 고른 조합 요약 — 무엇을 만들지 늘 눈에 있게 */
.summary{
  margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-family:var(--kr);font-size:12.5px;color:var(--ink-2);
}
.summary .chipline{color:var(--ink);font-weight:500}
.summary .dot{color:var(--con-3)}

/* ── 버튼 ─────────────────────────────────────── */
.lb-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:15px 26px;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);text-decoration:none;cursor:pointer;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.lb-btn:hover,.lb-btn:focus-visible{background:var(--paper);color:var(--ink)}
.lb-btn[disabled]{opacity:.35;cursor:default}
.lb-btn.ghost{background:none;color:var(--ink);border-color:var(--line)}
.lb-btn.ghost:hover{border-color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:26px}
.btn-row small{font-family:var(--kr);font-size:11.5px;color:var(--ink-3);line-height:1.7}

/* ── 후보 3장 ─────────────────────────────────── */
.cands{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.cand{border:1px solid var(--line);background:var(--paper-2);cursor:pointer;padding:0;font:inherit;text-align:left}
.cand[aria-pressed="true"]{border-color:var(--ink)}
.cand .ph{aspect-ratio:9/16;background:var(--con);display:block;width:100%;object-fit:cover}
.cand figcaption{padding:9px 11px;font-family:var(--kr);font-size:11px;color:var(--ink-3);line-height:1.6}
@media(max-width:640px){
  .cands{grid-template-columns:1fr;gap:10px}
  .row{grid-template-columns:1fr;gap:9px}
  .row > .k{padding-top:0}
  /* 세로로 쌓이면 오른쪽 선은 뜻이 없다 — 아래선으로 나눈다 */
  .pick{border-right:0;border-bottom:1px solid var(--line)}
  .pick:last-child{border-bottom:0}
  .rows{border-left:0;border-right:0}
}

/* ══ Step 03~05 ═══════════════════════════════════════════════ */

/* 아직 차례가 아닌 단계 — 지우지 않고 잠근다. 무엇이 남았는지 보이는 편이 낫다. */
.step[data-locked]{opacity:.34;pointer-events:none;filter:grayscale(1)}
.step[data-locked]::after{
  content:"앞 단계를 마치면 열립니다";display:block;margin-top:18px;
  font-family:var(--kr);font-size:11.5px;color:var(--ink-3);letter-spacing:.02em;
}

/* ── 사진 올리는 칸 ───────────────────────────── */
.drops{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);background:var(--paper)}
.drop{
  display:flex;flex-direction:column;gap:5px;align-items:flex-start;justify-content:flex-end;
  min-height:172px;padding:20px 22px;cursor:pointer;
  border-right:1px solid var(--line);background:var(--paper-2);
  background-size:cover;background-position:center;
  transition:background-color .25s var(--ease);
}
.drop:last-child{border-right:0}
.drop:hover{background-color:var(--con)}
.drop[hidden]{display:none}
.drop .en{font-size:9.5px;letter-spacing:.28em;color:var(--ink-3);font-weight:600}
.drop b{font-family:var(--kr);font-size:14.5px;font-weight:700}
.drop small{font-family:var(--kr);font-size:11px;color:var(--ink-3)}
/* 사진을 올리는 자리라는 것이 보여야 한다 — 점선 상자와 + 기호 (2026-09-05 대표 지적) */
.drop .cta{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:auto;
  padding:7px 11px;border:1.5px dashed var(--ink-3);border-radius:3px;
  font-family:var(--kr);font-size:12px;color:var(--ink-2);letter-spacing:.01em;
}
.drop .cta::before{content:"＋";font-weight:700;font-size:13px}
.drop:hover .cta{border-color:var(--ink);color:var(--ink)}
.drop[data-filled="1"] .cta{display:none}
.drop[data-filled="1"]{background-color:var(--ink);color:var(--paper)}
.drop[data-filled="1"] .en,.drop[data-filled="1"] small{color:rgba(255,255,255,.62)}

/* 검증 문구 — 올리자마자 무엇을 확인했는지 말해 준다 */
.checks{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.checks li{font-family:var(--kr);font-size:12px;color:var(--ink-2);display:flex;gap:7px;align-items:baseline}
.checks li::before{content:"✓";font-family:var(--sans);font-weight:700;color:var(--ink);font-size:11px}

/* 대표 포즈 줄 */
.poserow{margin-top:22px;padding:18px 22px;border:1px solid var(--line)}
.poserow .k{display:block;margin-bottom:11px;font-size:9.5px;letter-spacing:.26em;
            color:var(--ink-3);font-weight:600;text-transform:uppercase}
.poserow .note{margin:12px 0 0;font-family:var(--kr);font-size:11.5px;color:var(--ink-3)}

/* 동의 — 법적 방어선이라 작게 숨기지 않는다 */
.agree{margin-top:22px;display:grid;gap:10px}
.agree label{display:grid;grid-template-columns:16px 1fr;gap:11px;align-items:start;cursor:pointer}
.agree input{appearance:none;-webkit-appearance:none;margin:3px 0 0;width:15px;height:15px;
             border:1px solid var(--con-3);background:var(--paper);cursor:pointer}
.agree input:checked{background:var(--ink);border-color:var(--ink)}
.agree input:checked::after{content:"✓";display:block;color:var(--paper);font-size:10px;
                            line-height:13px;text-align:center;font-weight:700}
.agree span{font-family:var(--kr);font-size:12px;color:var(--ink-2);line-height:1.7}
.agree b{color:var(--ink);font-weight:700}
.agree.one{padding:18px 20px;border:1px solid var(--line)}

/* 착장 시안 */
.proof{margin-top:28px;display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:24px;align-items:start}
.proof[hidden]{display:none}
.proofcard{margin:0;border:1px solid var(--line);max-width:260px}
.proofcard .ph{display:block;aspect-ratio:3/4;background:var(--con)}
.proofcard figcaption{padding:9px 12px;font-family:var(--kr);font-size:11px;color:var(--ink-3)}
.proofside p{margin:0;font-family:var(--kr);font-size:13px;color:var(--ink-2);max-width:44ch}
.lb-btn em{font-style:normal;margin-left:8px;font-size:10px;color:var(--ink-3)}

/* ── 결제 ─────────────────────────────────────── */
.bill{border:1px solid var(--line)}
.billrow{display:grid;grid-template-columns:96px 1fr auto;gap:18px;align-items:baseline;padding:20px 22px}
.billrow span{font-size:9.5px;letter-spacing:.26em;color:var(--ink-3);font-weight:600;text-transform:uppercase}
.billrow b{font-family:var(--kr);font-size:16px;font-weight:700}
.billrow em{font-style:normal;font-size:16px;font-weight:700;letter-spacing:.02em}

.offer{margin-top:14px;padding:22px;border:1px solid var(--ink)}
.offerhead{margin:0 0 6px;font-family:var(--kr);font-size:15px;font-weight:700}
.offerbody{margin:0;font-family:var(--kr);font-size:12.5px;color:var(--ink-2);line-height:1.75}
.offerbody s{color:var(--ink-3)}
.offerbody b{color:var(--ink);font-weight:700}
.offer .btn-row{margin-top:16px}
.offer[data-done="1"]{border-color:var(--line);opacity:.5}

/* ── 진행 화면 — 핏픽스 동작을 그대로, 색만 먹·종이로 ──
   라임색을 그대로 들이면 이 사이트에 없는 색이 하나 생긴다. */
.gen-live{position:relative;width:100%;max-width:360px;aspect-ratio:3/4;overflow:hidden;background:var(--ink)}
.gen-live[hidden]{display:none !important}
.gen-base{position:absolute;inset:0;background:#1A1A1A center/cover no-repeat}
.gen-mesh{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.20) 0 1px,transparent 1px 13px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.20) 0 1px,transparent 1px 13px);
  -webkit-mask-image:radial-gradient(ellipse 72% 82% at 50% 46%,#000 58%,rgba(0,0,0,.25) 82%,transparent 100%);
  mask-image:radial-gradient(ellipse 72% 82% at 50% 46%,#000 58%,rgba(0,0,0,.25) 82%,transparent 100%);
  animation:genMeshShimmer 2.6s ease-in-out infinite;
}
@keyframes genMeshShimmer{0%,100%{opacity:.5;background-position:0 0,0 0}50%{opacity:1;background-position:7px 7px,-7px 7px}}
.gen-scan{position:absolute;left:0;right:0;top:-18%;height:16%;z-index:3;pointer-events:none;filter:blur(1px);
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.30) 45%,rgba(255,255,255,.62) 50%,rgba(255,255,255,.30) 55%,transparent);
  animation:genScanSweep 2.4s ease-in-out infinite alternate;
}
@keyframes genScanSweep{0%{top:-18%}100%{top:102%}}
.gen-progress{position:absolute;z-index:4;left:0;right:0;bottom:0;display:grid;
  grid-template-columns:1fr auto;align-items:center;gap:8px 12px;padding:14px 16px;
  background:rgba(11,11,11,.72);backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.14)}
.gen-progress-track{grid-column:1/-1;height:2px;background:rgba(255,255,255,.18);overflow:hidden}
.gen-progress-bar{width:0;height:100%;background:var(--paper);transition:width .4s linear}
.gen-pct{color:var(--paper);font-size:15px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.gen-label{justify-self:end;color:rgba(255,255,255,.66);font-family:var(--kr);font-size:11px;letter-spacing:.06em}
@media(prefers-reduced-motion:reduce){.gen-mesh,.gen-scan{animation:none}}

/* ── 여덟 컷 — 완성된 것부터 자리에 채운다 ─────── */
.shots[hidden]{display:none}
.shots{margin-top:26px}
/* 진행 중에는 왼쪽에 진행 화면, 오른쪽에 채워지는 칸들 */
.making{display:grid;grid-template-columns:1fr;gap:22px;align-items:start}
.making[data-live="1"]{grid-template-columns:300px 1fr}
.making > *{min-width:0}
.making .gen-live{max-width:none}
.making .shots{margin-top:0}
.shotcount{margin:0 0 12px;font-family:var(--kr);font-size:12.5px;color:var(--ink-2)}
.shotcount b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.shotgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.shot{aspect-ratio:3/4;border:1px solid var(--line);background:var(--paper-2);position:relative}
.shot[data-done="1"]{background:var(--con-3);border-color:var(--con-3)}
.shot[data-fail="1"]{background:var(--paper);border-style:dashed}
.shot .again{position:absolute;inset:auto 0 0 0;padding:6px;border:0;background:var(--ink);color:var(--paper);
             font-family:var(--kr);font-size:10px;cursor:pointer}

/* ── 접수 완료 ────────────────────────────────── */
.receipt[hidden]{display:none}
.receipt{margin-top:8px;padding:26px 24px;border:1px solid var(--line)}
.rcno{margin:0 0 20px;font-family:var(--kr);font-size:15px;font-weight:700}
.rcno b{font-family:var(--sans);letter-spacing:.06em}
.rcsteps{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line-2)}
.rcsteps li{display:grid;grid-template-columns:96px 1fr;gap:18px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.rcsteps span{font-size:9.5px;letter-spacing:.2em;color:var(--ink-3);font-weight:600;text-transform:uppercase;padding-top:3px}
.rcsteps b{font-family:var(--kr);font-size:13.5px;font-weight:500}
.rcnote{margin:18px 0 0;font-family:var(--kr);font-size:12px;color:var(--ink-3)}
.rcnote b{color:var(--ink-2);font-weight:500}

@media(max-width:760px){ .making[data-live="1"]{grid-template-columns:1fr} }
@media(max-width:640px){
  .drops{grid-template-columns:1fr;border-left:0;border-right:0}
  .drop{border-right:0;border-bottom:1px solid var(--line);min-height:132px}
  .drop:last-child{border-bottom:0}
  .proof{grid-template-columns:1fr}
  .shotgrid{grid-template-columns:repeat(3,1fr)}
  .billrow{grid-template-columns:1fr auto;gap:10px}
  .billrow span{grid-column:1/-1}
}

/* ── 준비 상태 띠 — 생성이 아직 안 붙었다는 것을 손님이 먼저 알아야 한다 ── */
.notice{
  position:relative;z-index:3;margin:0;padding:13px var(--edge);
  border-bottom:1px solid var(--line);background:var(--con);
  font-family:var(--kr);font-size:12.5px;line-height:1.7;color:var(--ink-2);
}
.notice[hidden]{display:none}
.notice b{color:var(--ink);font-weight:700}
.notice a{color:var(--ink);font-family:var(--sans);font-size:11px;font-weight:700;
          letter-spacing:.1em;text-decoration:none;border-bottom:1px solid var(--ink);
          margin-left:6px;white-space:nowrap}

/* 아직 못 누르는 버튼 옆에 이유를 적는다 — 잠긴 채로 말이 없으면 고장으로 읽힌다 */
.soon{display:block;margin-top:9px;font-family:var(--kr);font-size:11.5px;color:var(--ink-3)}
.soon a{color:var(--ink-2);border-bottom:1px solid var(--con-2);text-decoration:none}
.soon a:hover{color:var(--ink);border-color:var(--ink)}

/* ── 법적 고지 푸터 — 본 사이트 것을 그대로 ─────────────── */
.lb-foot{border-top:1px solid var(--line-2);background:var(--paper-2);
         padding:52px var(--edge) 64px;position:relative;z-index:2}
.lb-foot-in{max-width:940px;margin:0 auto}
.lb-foot-brand{margin:0 0 22px;font-family:var(--sans);font-size:12px;font-weight:800;
               letter-spacing:.34em;color:var(--ink-3)}
.lb-foot-biz{margin:0 0 16px;font-family:var(--kr);font-size:12px;line-height:1.95;color:var(--ink-2)}
.lb-foot-biz b{color:var(--ink);font-weight:700}
.lb-foot-biz a{color:var(--ink-2)}
.lb-foot-addr{margin:10px 0 0;font-family:var(--kr);font-size:11.5px;line-height:1.8;color:var(--ink-3)}
.lb-foot-addr summary{display:inline-block;cursor:pointer;list-style:none;
                      border-bottom:1px solid var(--con-2);color:var(--ink-3)}
.lb-foot-addr summary::-webkit-details-marker{display:none}
.lb-foot-addr summary::after{content:" +";font-weight:400}
.lb-foot-addr[open] summary::after{content:" −"}
.lb-foot-addr summary:hover,.lb-foot-addr summary:focus-visible{border-color:var(--ink);color:var(--ink)}
.lb-foot-addr > span{display:block;margin-top:9px}
.lb-foot-links{display:flex;flex-wrap:wrap;gap:6px 20px;margin:20px 0;font-family:var(--kr);font-size:12px}
.lb-foot-links a{color:var(--ink-2);text-decoration:none;
                 border-bottom:1px solid var(--con-2);padding-bottom:2px}
.lb-foot-links a:hover{color:var(--ink);border-color:var(--ink)}
.lb-foot-note{margin:0;padding-top:18px;border-top:1px solid var(--line-2);
              font-family:var(--kr);font-size:11.5px;line-height:1.85;color:var(--ink-3);max-width:70ch}
.lb-foot-note b{color:var(--ink-2)}
.lb-foot-note a{color:var(--ink-2)}
@media(max-width:640px){
  .lb-foot{padding:40px var(--edge) 52px}
  .lb-foot-biz,.lb-foot-links{font-size:11.5px}
}

/* 언어 선택기 — 본 사이트와 같은 각진 형태. 기본 select 는 둥글어서 이 사이트에 안 맞는다. */
.lang-pick{
  appearance:none;-webkit-appearance:none;
  border:1px solid var(--line);background:var(--paper);border-radius:0;
  padding:4px 8px;
  font-family:var(--sans);font-weight:600;font-size:9px;letter-spacing:.2em;
  color:var(--ink-3);cursor:pointer;text-transform:uppercase;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.lang-pick:hover,.lang-pick:focus-visible{border-color:var(--ink);color:var(--ink)}
.top nav{align-items:center}

/* 생성 실패 — 진행 화면만 사라지면 고장으로 읽힌다. 이유를 남긴다. */
.genfail{
  margin:18px 0 0;padding:13px 16px;border:1px solid var(--ink);
  font-family:var(--kr);font-size:12.5px;line-height:1.7;color:var(--ink);
}
.genfail[hidden]{display:none}
/* 후보는 이제 진짜 사진이다 */
.cand img.ph{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--con)}
/* 시안 자리도 진짜 사진으로 바뀐다 */
.proofcard img.ph{width:100%;object-fit:cover}
/* 완성된 컷이 자리에 앉는다 */
.shot img{display:block;width:100%;height:100%;object-fit:cover}

/* 결제 알림 — 각진 먹색. 이 사이트에는 둥근 구석이 없다. */
.lm-toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:20;
  padding:13px 22px;background:var(--ink);color:var(--paper);
  font-family:var(--kr);font-size:12.5px;line-height:1.6;
  max-width:88vw;text-align:center;opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease);
}
.lm-toast[data-on="1"]{opacity:1}
.lm-toast[data-bad="1"]{background:var(--paper);color:var(--ink);border:1px solid var(--ink)}

/* 완성물 — 영상과 파일이 앉는 자리 */
.result[hidden]{display:none}
.result{margin-top:22px;display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
.result video{display:block;max-width:340px;width:100%;border:1px solid var(--line);background:var(--con)}

/* 3D 뷰어 — 회전 영상과 같은 세로 비율로 (2026-09-06) */
.result model-viewer.glb{display:block;width:100%;max-width:520px;aspect-ratio:3/4;background:var(--paper-2);border:1px solid var(--line);margin:0 0 14px}

/* 생성물 한계 고지 — 실측(2026-09-06)에서 컷마다 단추·소맷단이 갈렸다 */
.proof-note{margin-top:.5rem;font-size:.82rem;line-height:1.6;color:#6b6b6b}

/* ══════════════════════════════════════════════════
   한 화면 넘김(peel) — atelier-flow.js 가 켤 때만 산다.
   꺼져 있으면 이 블록은 하나도 걸리지 않고 종전 세로 스크롤 그대로다.
   대표 지시 2026-09-06.
   ══════════════════════════════════════════════════ */
body[data-flow="peel"]{overflow:hidden}
body[data-flow="peel"] .lb-foot{display:none}

/* 진행 막대 */
.flow-rail{
  position:sticky;top:0;z-index:8;display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  padding:9px var(--edge) 8px;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line-2);
}
.flow-back,.flow-replay{
  border:1px solid var(--line);background:var(--paper);color:var(--ink-2);
  border-radius:999px;cursor:pointer;font-family:var(--kr);line-height:1;
}
.flow-back{width:30px;height:30px;font-size:15px}
.flow-replay{grid-column:3;padding:7px 11px;font-size:11px;letter-spacing:.02em}
.flow-back:hover,.flow-replay:hover{color:var(--ink);border-color:var(--con-3)}
.flow-back[hidden]{visibility:hidden;display:block}

.flow-dots{display:flex;gap:4px;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.flow-dots::-webkit-scrollbar{display:none}
.flow-dots button{
  display:flex;align-items:center;gap:5px;padding:6px 9px;border:0;background:none;
  cursor:pointer;border-radius:999px;color:var(--ink-3);white-space:nowrap;
  font-family:var(--kr);font-size:11px;transition:color .2s var(--ease),background .2s var(--ease);
}
.flow-dots b{
  display:grid;place-items:center;width:17px;height:17px;border-radius:50%;
  border:1px solid currentColor;font-family:var(--sans);font-size:9px;font-weight:700;
}
.flow-dots button[data-done]{color:var(--ink-2)}
.flow-dots button[data-done] b{background:var(--ink-2);border-color:var(--ink-2);color:#fff}
.flow-dots button[aria-current="step"]{color:var(--ink);background:var(--con)}
.flow-dots button[aria-current="step"] b{background:var(--ink);border-color:var(--ink);color:#fff}
.flow-dots button:disabled{opacity:.42;cursor:default}
.flow-hint{
  grid-column:1/-1;margin:2px 0 0;font-family:var(--kr);font-size:11.5px;
  line-height:1.5;color:var(--ink-2);
}

/* 무대 — 한 번에 한 장 */
body[data-flow="peel"] .wrap{
  position:relative;height:calc(100dvh - var(--rail,104px));
  padding:0;perspective:1400px;
}
body[data-flow="peel"] .step{
  position:absolute;inset:0;margin:0;border-top:0;overflow-y:auto;
  padding:30px var(--edge) 60px;background:var(--paper);
  opacity:0;pointer-events:none;transform-origin:50% 0;
  -webkit-overflow-scrolling:touch;
}
body[data-flow="peel"] .step[data-panel-active]{opacity:1;pointer-events:auto;z-index:2}
body[data-flow="peel"] .step[data-locked]{opacity:0;filter:none}
body[data-flow="peel"] .step[data-locked]::after{content:none}

/* 벗겨지듯 — 위 모서리를 축으로 들리며 넘어간다 */
@keyframes peelOut{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(-6%) rotateX(11deg) scale(.965)}
}
@keyframes peelIn{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes peelBack{ from{opacity:1;transform:none} to{opacity:0;transform:translateY(16px) scale(.99)} }
@keyframes peelReturn{ from{opacity:0;transform:translateY(-5%) rotateX(9deg) scale(.97)} to{opacity:1;transform:none} }
body[data-flow="peel"] .step[data-peel="out"]{opacity:1;pointer-events:none;z-index:3;animation:peelOut .5s var(--ease) forwards}
body[data-flow="peel"] .step[data-peel="in"]{animation:peelIn .46s var(--ease) .06s backwards}
body[data-flow="peel"] .step[data-peel="back"]{opacity:1;pointer-events:none;z-index:3;animation:peelBack .38s var(--ease) forwards}
body[data-flow="peel"] .step[data-peel="return"]{animation:peelReturn .46s var(--ease) .04s backwards}

/* 순서 미리보기 */
.flow-intro{
  position:fixed;inset:0;z-index:40;display:grid;place-items:center;
  padding:20px;background:rgba(11,11,11,.34);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s var(--ease);
}
.flow-intro[data-in]{opacity:1}
/* 카드는 넘치지 않는다. 목록만 줄고, '시작하기'는 언제나 눈에 있다 —
   내리지 못하는 손님을 위한 규칙(2026-09-06 대표 지시). */
.flow-intro-card{
  width:min(520px,100%);max-height:88dvh;overflow:hidden;background:var(--paper);
  border:1px solid var(--line);padding:30px 26px 24px;
  display:flex;flex-direction:column;
  transform:translateY(12px) scale(.985);transition:transform .38s var(--ease);
}
.flow-intro[data-in] .flow-intro-card{transform:none}
.flow-intro-card h2{margin:0 0 8px;font-family:var(--kr);font-weight:700;font-size:21px;letter-spacing:-.02em}
.flow-intro-lede{margin:0 0 20px;font-family:var(--kr);font-size:13px;color:var(--ink-2);line-height:1.65}
.flow-intro-list{margin:0 0 18px;padding:0;list-style:none;border-top:1px solid var(--line-2);overflow-y:auto;min-height:0}
.flow-intro-list li{
  display:grid;grid-template-columns:26px 1fr auto;align-items:start;gap:11px;
  padding:13px 0;border-bottom:1px solid var(--line-2);
  opacity:0;transform:translateY(7px);animation:peelIn .42s var(--ease) forwards;animation-delay:var(--d)
}
.flow-intro-list b{
  display:grid;place-items:center;width:23px;height:23px;border-radius:50%;
  background:var(--con);font-family:var(--sans);font-size:10px;font-weight:700;color:var(--ink-2)
}
.flow-intro-list strong{display:block;font-family:var(--kr);font-size:13.5px;font-weight:700}
.flow-intro-list p{margin:2px 0 0;font-family:var(--kr);font-size:12px;color:var(--ink-2);line-height:1.6}
.flow-intro-list em{font-style:normal;font-family:var(--kr);font-size:11px;color:var(--ink-3);white-space:nowrap;padding-top:3px}
.flow-intro-note{margin:0 0 18px;font-family:var(--kr);font-size:12px;color:var(--ink-2)}
.flow-intro-btns{display:flex;align-items:center;gap:12px;margin:0}
.flow-skip{border:0;background:none;color:var(--ink-3);font-family:var(--kr);font-size:12px;cursor:pointer;padding:8px 2px}
.flow-skip:hover{color:var(--ink-2)}
body[data-flow-intro]{overflow:hidden}
@media (max-width:560px){
  .flow-intro{padding:14px}
  .flow-intro-card{padding:22px 20px 18px}
  .flow-intro-card h2{font-size:19px}
  .flow-intro-lede{margin-bottom:14px}
  .flow-intro-list{margin-bottom:12px}
  .flow-intro-list li{padding:10px 0;gap:10px}
  .flow-intro-note{margin-bottom:14px}
}

@media (prefers-reduced-motion: reduce){
  body[data-flow="peel"] .step[data-peel]{animation:none}
  .flow-intro,.flow-intro-card,.flow-intro-list li{transition:none;animation:none;opacity:1;transform:none}
}
@media (max-width:560px){
  .flow-dots button span{display:none}
  .flow-dots button[aria-current="step"] span{display:inline}
  body[data-flow="peel"] .step{padding-top:22px}
}

/* 화면 아래 고정 버튼 — 스크롤하지 않아도 다음으로 간다 */
.flow-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:9;
  display:grid;gap:8px;padding:12px var(--edge) calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--paper) 62%,rgba(255,255,255,0));
  border-top:1px solid var(--line-2);
}
body:not([data-flow="peel"]) .flow-cta{display:none}
.flow-cta .lb-btn{width:100%;justify-content:center;font-size:14px;padding:14px 18px}
/* ①처럼 누를 것이 없는 단계에서는 바 자체를 감춘다 — 빈 띠를 남기지 않는다 */
.flow-cta[data-empty]{display:none}
body[data-flow="peel"] .step{padding-bottom:calc(var(--cta-h,72px) + 26px)}
/* 아래가 더 있다는 표시 — 내리지 않아도 되지만, 있으면 알 수 있게 */
body[data-flow="peel"] .wrap::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34px;pointer-events:none;
  background:linear-gradient(to top,rgba(255,255,255,.9),rgba(255,255,255,0));z-index:3;
}

/* 한 화면에 담기 — 넘김 모드에서만 세로 여백을 줄인다.
   막대가 이미 "01 고르기"를 보여 주므로 단계 안의 eyebrow 는 지운다.
   대표 지시: 내리지 않아도, 내리지 못해도 할 수 있게. */
body[data-flow="peel"] .step{padding:16px var(--edge) 128px}
body[data-flow="peel"] .step > .eyebrow{display:none}
body[data-flow="peel"] .step h2{font-size:clamp(19px,4.6vw,26px);margin-bottom:6px}
body[data-flow="peel"] .step .lede{margin-bottom:14px;font-size:12.5px}
body[data-flow="peel"] .pick{padding:15px 18px;gap:5px}
body[data-flow="peel"] .row{padding-top:9px;padding-bottom:9px}
body[data-flow="peel"] .btn-row{margin-top:12px}
body[data-flow="peel"] .drop{min-height:104px}
body[data-flow="peel"] .step small{font-size:11px;line-height:1.55}
@media (max-width:560px){
  body[data-flow="peel"] .opt{padding:7px 10px;font-size:11.5px}
  body[data-flow="peel"] .step h2{font-size:19px}
}

/* 모델 단계가 가장 길다 — 영문 보조 라벨을 접고 칩을 좁힌다 (넘김 모드·모바일만) */
@media (max-width:560px){
  body[data-flow="peel"] .row .k em{display:none}
  body[data-flow="peel"] .row{padding-top:7px;padding-bottom:7px}
  body[data-flow="peel"] .row .k{margin-bottom:5px}
  body[data-flow="peel"] .opt{padding:6px 9px;font-size:11px}
  body[data-flow="peel"] .opts{gap:5px}
  body[data-flow="peel"] .step .lede{margin-bottom:10px}
}

@media (max-width:560px){
  /* 아래 고정 버튼이 같은 일을 하므로 단계 안 버튼은 작게 */
  body[data-flow="peel"] .btn-row .lb-btn{padding:10px 14px;font-size:12px}
  body[data-flow="peel"] .summary{font-size:11.5px;margin-top:6px}
}

/* 아래 바가 내용을 가리지 않게 — 높이를 실측해 여백으로 준다 */
body[data-flow="peel"] .step{padding-bottom:calc(var(--cta-h,120px) + 18px)}
/* 헤더+막대+패널 = 정확히 100dvh. 페이지가 밀릴 여지가 없어야 막대가 헤더 밑으로 안 들어간다 */
body[data-flow="peel"] .wrap{height:calc(100dvh - var(--rail,104px) - var(--hdr,0px))}
body[data-flow="peel"] .flow-rail{top:var(--hdr,0px)}
/* 막대: 되돌아가기·점·진행순서는 한 줄, 안내는 아랫줄 */
.flow-replay{grid-column:3;grid-row:1}
.flow-hint{grid-row:2}
@media (max-width:560px){
  /* 칩의 영문 보조 글자를 접으면 줄바꿈이 줄어 한 화면에 더 들어간다 */
  body[data-flow="peel"] .opt .en{display:none}
}