/* 뷰휠 미리보기 — 한 화면 넘김(peel) 표현 층.
   대표 지시(2026-09-09): 사진 선택 창부터 한 화면에서, 아이폰 창 기준으로 끊는다.
   ai-preview.css 뒤에 로드된다. data-flow="peel" 이 붙은 화면에서만 먹는다. */

/* ── 진행 막대 ─────────────────────────────── */
.flow-rail{
  position:sticky;top:var(--hdr,64px);z-index:4;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  padding:9px clamp(16px,5vw,40px) 8px;
  background:color-mix(in srgb,var(--ink) 88%,transparent);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
body:not([data-flow="peel"]) .flow-rail{display:none}

.flow-back,.flow-replay{
  border:1px solid var(--line);background:transparent;color:var(--muted);
  border-radius:999px;line-height:1;font-family:inherit;
}
.flow-back{width:30px;height:30px;font-size:15px;padding:0}
.flow-replay{justify-self:end;padding:7px 11px;font-size:11px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.flow-back:hover,.flow-replay:hover{color:var(--lime);border-color:var(--lime)}
.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;
  border-radius:999px;color:var(--muted);white-space:nowrap;font:inherit;font-size:11px;
  transition:color .2s,background .2s;
}
.flow-dots b{
  display:grid;place-items:center;width:17px;height:17px;border-radius:50%;
  border:1px solid currentColor;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9px;font-weight:900;
}
.flow-dots button[data-done]{color:var(--paper)}
.flow-dots button[data-done] b{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.flow-dots button[aria-current="step"]{color:var(--lime);background:color-mix(in srgb,var(--lime) 14%,transparent)}
.flow-dots button[aria-current="step"] b{background:var(--lime);border-color:var(--lime);color:#111}
.flow-dots button:disabled{opacity:.38;cursor:default}

.flow-hint{grid-column:1/-1;margin:2px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted)}
/* 결제 배지를 막대 안으로 들인다 — 인라인 스타일이 붙어 있어 덮어써야 한다 */
.flow-rail .flow-badge{grid-column:1/-1;margin:6px 0 0!important;padding:7px 10px!important;font-size:11.5px!important;border-radius:10px!important}

/* ── 무대 — 한 번에 한 장 ────────────────────
   아래 푸터(사업자 정보·약관)는 페이지를 조금 내리면 그대로 나온다. */
body[data-flow="peel"] main{
  position:relative;padding:0;
  height:calc(100vh - var(--hdr,64px) - var(--rail,64px));
  height:calc(100dvh - var(--hdr,64px) - var(--rail,64px));
  overflow:hidden;perspective:1400px;
}
body[data-flow="peel"] [data-flow-hide]{display:none}

body[data-flow="peel"] .flow-panel{
  position:absolute;inset:0;margin:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:18px clamp(16px,5vw,40px) calc(var(--cta-h,76px) + 22px);
  opacity:0;pointer-events:none;transform-origin:50% 0;
}
body[data-flow="peel"] .flow-panel[data-panel-active]{opacity:1;pointer-events:auto;z-index:2}
/* 막대가 이미 "01 사진"을 보여 준다 — 장 안의 번호표와 큰 제목은 줄인다 */
body[data-flow="peel"] .flow-panel .eyebrow{display:none}
body[data-flow="peel"] .flow-panel h2{font-size:clamp(20px,4.8vw,28px);margin-bottom:4px}
body[data-flow="peel"] .flow-panel>section{margin-top:0}
body[data-flow="peel"] .flow-panel>section+section{margin-top:18px}
body[data-flow="peel"] .boundary{margin:0 0 16px}
body[data-flow="peel"] .grid{margin-top:16px}
body[data-flow="peel"] .dropzone{min-height:180px;padding:22px}
body[data-flow="peel"] .dropzone strong{margin-top:14px;font-size:22px}
body[data-flow="peel"] .source-preview{min-height:220px}
/* .result 가 곧 결과 장 자체다 — padding 을 0 으로 두면 장의 좌우 여백까지 지워져
   제목이 화면 가장자리에 붙고 아래는 고정 버튼에 가린다(2026-09-09 실측). 테두리만 지운다. */
body[data-flow="peel"] .result{border:0;background:none}
/* 사진을 고르기 전에는 빈 미리보기 칸을 두지 않는다 — 첫 장이 한 화면에 들어와야 한다.
   고른 뒤에는 미리보기가 주인공이므로 올리는 칸을 줄인다. */
body[data-flow="peel"] .grid:has(#sourceImage[hidden]) .source-preview{display:none}
body[data-flow="peel"] .grid:has(#sourceImage:not([hidden])) .dropzone{min-height:118px;padding:16px 22px}
body[data-flow="peel"] .grid:has(#sourceImage:not([hidden])) .dropzone strong{margin-top:10px;font-size:19px}
/* 확인 장도 한 화면에 — 세 줄을 조금씩 좁힌다 */
body[data-flow="peel"] .consent-list{margin-top:14px}
body[data-flow="peel"] .consent-list label{padding:13px 16px;font-size:13.5px}
body[data-flow="peel"] .option-group{margin-top:14px}

/* 열린 부위의 조절기는 소제목 바로 아래에 붙어 따라온다 — 목록이 길어도 손이 닿는다 */
body[data-flow="peel"] .area-sec.is-open .depth-control{
  position:sticky;top:0;z-index:3;margin:0 0 16px;
  background:color-mix(in srgb,var(--panel) 95%,transparent);
  backdrop-filter:saturate(160%) blur(12px);
  box-shadow:0 10px 26px rgba(10,30,45,.12);
}
body[data-flow="peel"] .depth-control{padding:14px 16px}
body[data-flow="peel"] .depth-control .depth-note{display:none}

/* 확대 중에는 사진이 장 위에 붙는다 — 아래에서 조절하면서 눈을 본다.
   .result 가 곧 스크롤하는 장이라, 그 자식인 사진에 sticky 가 먹는다. */
body[data-flow="peel"] .result.zooming>figure{
  position:sticky;top:0;z-index:4;margin-top:0;
  box-shadow:0 14px 30px rgba(10,30,45,.18);
}
/* 높이는 사진 칸(.ba-stage)에만 건다.
   액자(figure) 를 자르면 그 안에 든 「원래 크기로」 버튼까지 함께 잘려 사라진다 —
   확대해 놓고 되돌릴 길이 없어진다(2026-09-10 대표 실화면). */
body[data-flow="peel"] .result.zooming .ba-stage{max-height:40dvh}
/* 고지 캡션은 평소 사진 위에 떠 있다(absolute bottom:12px). 확대해서 액자가 줄면
   그 자리가 「원래 크기로」 버튼 위가 되어 버튼을 덮는다. 확대 중에는 흐름에 내려
   사진과 버튼 사이에 한 줄로 놓는다 — 고지를 숨기지 않으면서 버튼도 살린다. */
body[data-flow="peel"] .result.zooming figcaption{
  position:static;display:block;width:max-content;max-width:100%;margin:8px 0 0;
}
body[data-flow="peel"] .result.zooming .ba-more{display:none}

/* 아래가 더 있다는 표시 */
body[data-flow="peel"] main::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:30px;pointer-events:none;z-index:3;
  background:linear-gradient(to top,var(--ink),transparent);
}

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

/* ── 화면 아래 고정 버튼 ───────────────────── */
.flow-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:9;
  padding:12px clamp(16px,5vw,40px) calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--ink) 64%,transparent);
  border-top:1px solid var(--line);
}
body:not([data-flow="peel"]) .flow-cta{display:none}
.flow-cta[data-empty]{display:none}
.flow-next{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;
  padding:0 20px;border:1px solid var(--lime);border-radius:999px;background:var(--lime);
  color:#111;font:inherit;font-size:14.5px;font-weight:900;letter-spacing:-.02em;
}
.flow-next:not(:disabled):hover{background:#efff82}
.flow-next:disabled{
  background:transparent;border-color:var(--line);color:var(--muted);
  font-weight:700;cursor:default;
}
body[data-flow="peel"] footer{padding-bottom:calc(var(--cta-h,76px) + 24px)}
/* 넓은 화면에서는 띠 전체를 라임으로 칠하지 않는다 */
@media (min-width:760px){
  .flow-cta{display:flex;justify-content:center}
  .flow-next{max-width:400px}
}
/* 큰 화면에서도 한 장은 읽기 좋은 폭으로 — 넓은 빈 벌판을 만들지 않는다 */
@media (min-width:900px){
  body[data-flow="peel"] .flow-panel{
    padding-left:max(40px,calc((100% - 860px)/2));
    padding-right:max(40px,calc((100% - 860px)/2));
  }
}

/* ── 시작 전 순서 미리보기 ─────────────────── */
.flow-intro{
  position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px;
  background:rgba(4,8,12,.42);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s;
}
.flow-intro[data-in]{opacity:1}
.flow-intro-card{
  width:min(500px,100%);max-height:88dvh;overflow:hidden;display:flex;flex-direction:column;
  padding:28px 26px 22px;border:1px solid var(--line);border-radius:22px;
  background:var(--panel);color:var(--paper);
  box-shadow:0 24px 70px rgba(0,0,0,.34);
}
.flow-intro-card .eyebrow{display:block;margin:0 0 10px;font-size:10.5px}
.flow-intro-card h2{font-size:22px;letter-spacing:-.05em}
.flow-intro-lede{margin:10px 0 16px;color:var(--muted);font-size:13px;line-height:1.65}
.flow-intro-list{flex:1;min-height:0;overflow-y:auto;margin:0 0 16px;padding:0;list-style:none}
.flow-intro-list li{
  display:grid;grid-template-columns:26px 1fr auto;align-items:start;gap:11px;
  padding:12px 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(7px);animation:bwPeelIn .42s cubic-bezier(.22,.61,.36,1) forwards;animation-delay:var(--d);
}
.flow-intro-list li:last-child{border-bottom:0}
.flow-intro-list b{
  display:grid;place-items:center;width:23px;height:23px;border-radius:50%;
  background:color-mix(in srgb,var(--lime) 20%,transparent);color:var(--paper);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:900;
}
.flow-intro-list strong{display:block;font-size:13.5px;font-weight:800;letter-spacing:-.03em}
.flow-intro-list p{margin:2px 0 0;color:var(--muted);font-size:12px;line-height:1.6}
.flow-intro-list em{font-style:normal;padding-top:3px;color:var(--muted);font-size:11px;white-space:nowrap}
.flow-intro-note{margin:0 0 16px;color:var(--muted);font-size:12px;line-height:1.6}
.flow-intro-btns{display:flex;align-items:center;gap:12px;margin:0}
.flow-intro-btns .flow-next{width:auto;flex:1;min-height:48px}
.flow-skip{border:0;background:none;padding:8px 2px;color:var(--muted);font:inherit;font-size:12px}
.flow-skip:hover{color:var(--paper)}
body[data-flow-intro]{overflow:hidden}

/* 부위 장은 목록이라 어차피 내려 봐야 한다 — 대신 손가락이 덜 가게 두 칸으로 좁힌다 */
@media (max-width:700px){
  body[data-flow="peel"] .style-grid{grid-template-columns:1fr 1fr}
  body[data-flow="peel"] .style-card{min-height:0;padding:14px}
  body[data-flow="peel"] .style-card--line{padding:0 20px 14px}
  body[data-flow="peel"] .style-card strong{margin-top:10px;font-size:16px}
  body[data-flow="peel"] .style-card p{font-size:11.5px;line-height:1.55}
}

/* 좁은 화면에서 머리띠가 세 조각(로고·돌아가기·로그인)으로 넘쳐 글자가 겹쳤다.
   넘김 모드에서는 로고를 누르면 같은 곳(디자인 체험)으로 가므로 그 링크를 접는다. */
@media (max-width:560px){
  body[data-flow="peel"] .topbar .back{display:none}
}

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