/* K-Booth — 셀프 포토부스 기계 안의 화면.
 * 디자인 v2(2026-09-30): 밝은 스튜디오 부스. 흰 바탕 + 먹색 글자 + 포인트 색 하나. 사진이 주인공이다.
 *   참고한 인상: 한국 셀프사진관의 절제된 흑백·필름 감성(특정 브랜드의 에셋·프레임은 쓰지 않는다).
 *   지난 디자인(v1 네온 부스)과 바꾼 이유, 시즌 스킨 만드는 법: docs/design/k-booth.md
 * 색은 모두 아래 :root 변수로만 쓴다 → 시즌 스킨(assets/booth-skins.js)이 변수만 덮어써서 분위기를 바꾼다.
 * 한 단계 = 한 화면(스크롤 없음). 크기는 vmin 기준이라 폰·데스크톱·TV 모두 한 화면에 들어간다.
 * 상태 클래스(.is-*, .printing, .fly-in, .on …)는 assets/booth.js 가 붙이고 뗀다. */

:root {
  /* 부스 */
  --bg: #ececee;            /* 부스 바깥(화면 가장자리) */
  --surface: #ffffff;       /* 부스 안 판·버튼 */
  --surface-2: #f5f5f6;     /* 한 단계 낮은 판(묶음 배경·빈 칸) */
  --line: #e2e2e6;
  --line-strong: #c9c9cf;
  /* 글자 */
  --ink: #141416;           /* 본문·주 버튼 */
  --ink-2: #4c4c53;         /* 보조 글자(흰 바탕 대비 8:1) */
  --muted: #6b6b73;         /* 옅은 글자(흰 바탕 대비 5:1) */
  /* 포인트 — 화면의 10% 이하: 지금 단계, 촬영 링, 가격, 지금 찍을 칸 */
  --accent: #d92d4a;
  --accent-ink: #ffffff;    /* 포인트 위 글자(대비 6.3:1) */
  --accent-soft: #fbe6ea;
  /* 주 동작 — 주 버튼·고른 판·지금 단계·포커스 테두리. classic(이 :root 값)은 먹색. 기본 테마는 민트 — booth-theme.js 가 html 에 data-theme="mint" 를 단다(아래 블록) */
  --primary: var(--ink);
  --primary-ink: #ffffff;   /* 주 버튼 위 글자 */
  --primary-hover: #2c2c30;
  /* 경고·안내 상자(앱 안 브라우저·환불 안내 등): 테마와 상관없이 따뜻한 색. classic 은 포인트와 같은 값 */
  --warn-soft: var(--accent-soft);
  --warn-line: color-mix(in srgb, var(--accent) 30%, transparent);
  --warn-ink: var(--accent);
  --ok: #17774d;
  --bad: #b8322a;

  --f-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic",
    "Hiragino Sans", "Microsoft YaHei", system-ui, sans-serif;

  /* 크기 — 화면 짧은 변(vmin)을 따라 커진다. 터치 영역 최소 56px */
  --tap: max(56px, 7.2vmin);
  --gap: clamp(8px, 1.6vmin, 24px);
  --pad: clamp(12px, 2.4vmin, 40px);
  --radius: clamp(14px, 2vmin, 28px);
  --fs: clamp(15px, 0.5rem + 1.35vmin, 30px);
  --fs-s: clamp(13px, 0.4rem + 1.1vmin, 24px);
  --fs-h: clamp(22px, 0.6rem + 2.7vmin, 54px);
  --ease: cubic-bezier(.25, 1, .5, 1);      /* ease-out-quart */

  /* 고른 프레임(booth.js 가 body 에 --fr-bg/--fr-fg 를 덮어쓴다) */
  --fr-bg: #ffffff;
  --fr-fg: #141416;
  --fr-pad: clamp(8px, 1.6vmin, 24px);
  /* 라이브 화면·미니 스트립 칸 비율(가로/세로 숫자). strip 520:367, grid 525:725 */
  --cell-ar: 1.4169;
}
body[data-layout="grid"] { --cell-ar: .7241; }

/* 민트 테마(포토몬 메인 사이트 브랜드색 #00b4a0 계열). ?theme=mint 로 켜고 ?theme=classic 으로 끈다 — assets/booth-theme.js.
 * 주 버튼은 흰 글자가 4.5:1 이상 읽히게 짙은 민트(#00796b, 흰 글자 대비 5.3:1). 포인트도 민트 계열로 바꾼다.
 * 우선순위: 시즌 스킨(booth-skins.js)은 html 의 인라인 style 로 --accent 를 덮으니 포인트는 스킨이 이기고, 주 동작(--primary)은 테마가 정한다.
 * 캔버스로 그리는 프레임(네컷)은 UI 테마와 상관없다. */
:root[data-theme="mint"] {
  --primary: #00796b;
  --primary-ink: #ffffff;
  --primary-hover: #00695c;
  --accent: #00695c;
  --accent-ink: #ffffff;
  --accent-soft: #e0f5f2;
  /* 경고 상자는 민트가 아니라 따뜻한 코랄(메인 사이트 --accent #ff6b6b 계열). 링크 글자는 흰 바탕 대비 4.5:1 이상 */
  --warn-soft: #ffece9;
  --warn-line: #f6b5ab;
  --warn-ink: #b3361f;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; background: var(--bg); color: var(--ink);
  font-family: var(--f-sans); font-size: var(--fs); line-height: 1.45; font-weight: 500;
  -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere;
  font-feature-settings: "tnum" 1;
}
button, select, input { font: inherit; color: inherit; }
.bt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bt-ico { width: 1.25em; height: 1.25em; flex: none; display: block; }

/* ---------- 키오스크 몸체: 조명이 고르게 드는 흰 부스 ---------- */
.bt-kiosk {
  position: fixed; inset: max(6px, 1vmin); display: flex; flex-direction: column;
  border-radius: calc(var(--radius) + 6px); overflow: hidden;
  background:
    radial-gradient(90% 45% at 50% -6%, #ffffff, transparent 70%),
    #f9f9fa;
  box-shadow: 0 0 0 1px var(--line), 0 20px 60px rgba(20, 20, 22, .10);
}

/* ---------- 상단: 로고 · 단계 · 소리/언어 ---------- */
.bt-top {
  flex: none; display: flex; align-items: center; gap: var(--gap);
  padding: calc(var(--pad) * .6) var(--pad) 0; min-height: var(--tap);
}
.bt-brand { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none;
  font-weight: 800; letter-spacing: .14em; font-size: var(--fs-s); border-radius: 10px;
  flex: none; white-space: nowrap; }   /* 로고 글자는 절대 줄바꿈하지 않는다(좁으면 단계 표시가 먼저 줄어든다) */
.bt-brand img { width: clamp(22px, 3vmin, 36px); height: auto; }
.bt-steps { flex: 1; min-width: 0; display: flex; justify-content: center; gap: clamp(4px, 1vmin, 18px);
  list-style: none; margin: 0; padding: 0; }
.bt-steps li { display: flex; align-items: center; gap: .5em; color: var(--muted); font-size: var(--fs-s);
  font-weight: 600; white-space: nowrap; }
.bt-steps li + li::before { content: ""; width: clamp(10px, 2.4vmin, 44px); height: 1.5px; border-radius: 2px;
  background: var(--line-strong); margin-inline-end: clamp(0px, .6vmin, 12px); }
.bt-steps i { font-style: normal; display: grid; place-items: center; width: 1.85em; height: 1.85em; border-radius: 50%;
  border: 1.5px solid var(--line-strong); font-size: .92em; font-weight: 700; color: var(--muted); background: var(--surface); }
.bt-steps li.is-done { color: var(--ink-2); }
.bt-steps li.is-done i { border-color: var(--primary); color: var(--primary); }
.bt-steps li.is-done + li::before { background: var(--primary); }
.bt-steps li.is-current { color: var(--ink); font-weight: 700; }
.bt-steps li.is-current i { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
/* 대기·이어하기 화면에선 단계 표시를 감춘다(자리는 유지해 흔들림 없게) */
body[data-sc="scAttract"] .bt-steps, body[data-sc="scResume"] .bt-steps { visibility: hidden; }
body[data-sc="scAttract"] .bt-brand { visibility: hidden; }

.bt-tools { flex: none; display: flex; align-items: center; gap: 8px; }
.bt-icon {
  height: var(--tap); min-width: var(--tap); border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.bt-icon { display: inline-grid; place-items: center; padding: 0; }
.bt-icon .bt-ico { width: 44%; height: 44%; min-width: 20px; min-height: 20px; }
.bt-icon:hover { border-color: var(--line-strong); }
.bt-icon.is-muted, .bt-icon[aria-pressed="true"] { color: var(--muted); }
/* 언어: 국기 언어 메뉴(#btLang .lm--bt) — 모양은 assets/langmenu.css */

/* ---------- 화면(단계) 공통 ---------- */
.bt-screen { flex: 1; min-height: 0; position: relative; }
.bt-sc {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--gap);
  padding: var(--pad); padding-bottom: max(var(--pad), env(safe-area-inset-bottom));
  animation: btIn .32s var(--ease);
}
@keyframes btIn { from { opacity: 0; transform: translateY(1vmin); } }
.bt-h { margin: 0; font-size: var(--fs-h); font-weight: 800;
  line-height: 1.2; text-align: center; letter-spacing: -.02em; text-wrap: balance; }
.bt-h--sm { font-size: calc(var(--fs-h) * .76); }
.bt-sub { margin: 0; color: var(--ink-2); text-align: center; font-size: var(--fs-s); line-height: 1.55; text-wrap: pretty; }
.bt-label { margin: 0 0 calc(var(--gap) * .7); font-size: var(--fs-s); font-weight: 700; color: var(--ink-2);
  text-align: center; }
.bt-note { margin: 0; padding: .7em 1em; border-radius: calc(var(--radius) * .7); font-size: var(--fs-s);
  background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--ink); }
.bt-note a { color: var(--warn-ink); font-weight: 800; }

/* ---------- 포커스: 리모컨·키보드에서 멀리서도 보이게 ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--primary); outline-offset: 3px;
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* ---------- 버튼 ---------- */
.bt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: var(--tap); padding: 0 1.5em; border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: var(--fs); line-height: 1.15; text-align: center; letter-spacing: -.01em;
  cursor: pointer; user-select: none; transition: transform .12s var(--ease), background-color .15s, border-color .15s, color .15s;
}
.bt-btn .bt-ico { width: 1.15em; height: 1.15em; }
.bt-btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.97); }
.bt-btn:disabled, .bt-btn[aria-disabled="true"] { cursor: not-allowed; }
.bt-btn[aria-busy="true"] { cursor: progress; opacity: .6; }
.bt-primary { background: var(--primary); color: var(--primary-ink); }
.bt-primary:not(:disabled):not([aria-disabled="true"]):hover { background: var(--primary-hover); }
.bt-primary:disabled, .bt-primary[aria-disabled="true"] { background: var(--line); color: var(--muted); }
.bt-ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.bt-ghost:hover { border-color: var(--primary); }

.bt-actions { flex: none; display: flex; align-items: center; gap: var(--gap); }
.bt-actions > .bt-primary { flex: 1; }
.bt-back { flex: none; }
.bt-actions--stack { flex-direction: column; align-items: stretch; }
.bt-actions--grid { display: grid; grid-template-columns: 1fr 1fr; }
.bt-actions--grid > .bt-primary, .bt-actions--grid > #btShare, .bt-actions--grid > #btVShare { grid-column: 1 / -1; }   /* 저장·보내기가 한 줄씩, 나머지 둘은 반씩 */
.bt-actions--grid { position: relative; }
.bt-actions--grid > .bt-btn { padding-left: .9em; padding-right: .9em; }   /* 반 칸 버튼에 긴 낱말(Neu fotografieren)이 들어가게 */
/* 영상 공유가 안 될 때 [영상 공유] 위에 뜨는 작은 창: SNS 바로가기 + 문구 복사(로고 없이 글자) */
.bt-vspop {
  position: relative; z-index: 15; grid-column: 1 / -1;   /* [영상 공유] 바로 아래 한 줄로(위로 띄우면 낮은 화면에서 머리줄 위로 나간다) */
  display: grid; gap: calc(var(--gap) * .6); padding: calc(var(--gap) * .8) calc(var(--gap) * .8) calc(var(--gap) * .8) 1.1em;
  border-radius: calc(var(--radius) * .7); background: var(--surface); border: 1px solid var(--line-strong);
  color: var(--ink); box-shadow: 0 16px 40px rgba(20, 20, 22, .16); animation: btIn .2s var(--ease);
}
.bt-vspop[hidden] { display: none; }
.bt-vspop-x { position: absolute; top: 4px; inset-inline-end: 4px; }
#btVsPopBody { display: grid; gap: calc(var(--gap) * .6); }
.bt-vspop .vs-h { margin: 0; padding-inline-end: var(--tap); font-weight: 800; font-size: var(--fs-s); }
.bt-vspop .vs-guide { margin: 0; padding-inline-end: var(--tap); color: var(--ink-2); font-size: calc(var(--fs-s) * .92); line-height: 1.45; }
.bt-vspop .vs-links { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--gap) * .5); }
.bt-vspop .vs-link {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 44px; padding: .3em .6em;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  text-decoration: none; font-weight: 700; font-size: var(--fs-s);
}
.bt-vspop .vs-link:hover { border-color: var(--primary); }
.bt-vspop .vs-ext { width: .85em; height: .85em; flex: none; opacity: .6; }
.bt-vspop .vs-copy {
  justify-self: start; min-height: 44px; padding: 0 1.1em; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: var(--fs-s);
}
.bt-pricetag { margin: 0; flex: none; font-size: var(--fs-s); font-weight: 700; color: var(--accent);
  padding: .3em .85em; border-radius: 999px; background: var(--accent-soft); }
.bt-pricetag:empty { display: none; }

/* ---------- 대기 화면(attract) ---------- */
.bt-attract { padding: 0; }
.bt-attract-go {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--gap) * 1.3);
  width: 100%; min-height: 0; border: 0; border-radius: calc(var(--radius) + 6px); background: none; cursor: pointer; padding: var(--pad);
}
.bt-attract-go > :not(.bt-demo) { flex: none; }
.bt-attract-go:focus-visible { outline-offset: -10px; box-shadow: none; }
.bt-logo {
  font-weight: 900; font-size: clamp(44px, 10.5vmin, 150px); line-height: .95;
  letter-spacing: .06em; color: var(--ink); padding-left: .06em;   /* 자간만큼 오른쪽이 비는 걸 맞춘다 */
}
.bt-skin-badge { display: inline-flex; align-items: center; gap: .4em; padding: .35em 1em; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: var(--fs-s); font-weight: 700; margin-bottom: -.3em; }
.bt-attract-sub { max-width: 30em; color: var(--ink-2); font-size: var(--fs); text-align: center; line-height: 1.5; text-wrap: balance; }
.bt-demo { display: flex; align-items: flex-start; justify-content: center; gap: clamp(12px, 3vmin, 56px);
  height: clamp(190px, 42vmin, 580px); flex: 0 1 auto; min-height: 120px; }   /* 낮은 화면에선 샘플이 줄어 [시작] 이 잘리지 않는다 */
/* 샘플 스트립: 부스 옆에 집게로 걸어 둔 인화지처럼 아주 천천히 흔들린다 */
.bt-demo-strip {
  display: flex; flex-direction: column; gap: 5%; height: 100%; aspect-ratio: 600 / 1800;
  padding: 7% 7% 16%; border-radius: 3px; background: var(--surface); position: relative;
  box-shadow: 0 14px 34px rgba(20, 20, 22, .16), 0 0 0 1px var(--line);
}
.bt-demo-strip i { flex: 1; border-radius: 2px; background: var(--surface-2); }
/* 첫 화면 샘플 띠: 매달린 사진처럼 좌우로 흔들리고 살짝 떠오른다(움직이는 게 한눈에 보이게 4.5초 주기·±4도) */
.bt-demo > canvas, .bt-demo-strip { animation: btSway 4.5s ease-in-out infinite; transform-origin: 50% -12%; will-change: transform; }
.bt-demo > canvas { height: 100%; width: auto; border-radius: 3px;
  box-shadow: 0 14px 34px rgba(20, 20, 22, .18), 0 0 0 1px rgba(20, 20, 22, .06); }
.bt-demo > :nth-child(1) { --r: -4deg; }
.bt-demo > :nth-child(2) { --r: 1deg; animation-delay: -1.5s; margin-top: 4%; }
.bt-demo > :nth-child(3) { --r: 5deg; animation-delay: -3s; }
@keyframes btSway { 0%, 100% { transform: rotate(var(--r, 0deg)); }
  25% { transform: rotate(calc(var(--r, 0deg) + 4deg)) translateY(-3%) scale(1.03); }
  75% { transform: rotate(calc(var(--r, 0deg) - 3deg)) translateY(-1.5%) scale(1.015); } }
.bt-attract-foot { display: flex; flex-direction: column; align-items: center; gap: .6em; }
/* 하던 세트로 돌아가기: 머리줄 왼쪽(첫 화면에선 로고가 숨는 자리)에 작은 알약. 첫 화면에서만 */
.bt-top { position: relative; }
.bt-attract-resume { position: absolute; z-index: 3; top: 50%; inset-inline-start: var(--pad-x, 16px); transform: translateY(-50%); min-height: 44px; padding: 0 1em;
  border: 1.5px solid var(--primary); border-radius: 999px; background: var(--surface, #fff); color: var(--primary); font: inherit; font-weight: 800;
  box-shadow: 0 6px 18px rgba(20, 20, 22, .10); cursor: pointer; white-space: nowrap; }
.bt-attract-resume:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.bt-attract-resume[hidden], body:not([data-sc="scAttract"]) .bt-attract-resume { display: none; }
/* 포토몬으로 돌아가기: 같은 자리의 옅은 알약 링크. 이어서 하기가 보이면 숨는다(둘 중 하나만) */
.bt-home-link { position: absolute; z-index: 3; top: 50%; inset-inline-start: var(--pad-x, 16px); transform: translateY(-50%);
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1em; border: 1.5px solid var(--line-strong); border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--ink-2); font-weight: 700; font-size: var(--fs-s);
  text-decoration: none; white-space: nowrap; }
.bt-home-link:hover { color: var(--primary); border-color: var(--primary); }
.bt-home-link:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
body:not([data-sc="scAttract"]) .bt-home-link, .bt-attract-resume:not([hidden]) ~ .bt-home-link { display: none; }
.bt-tap {
  display: inline-flex; align-items: center; gap: .5em; min-height: var(--tap); padding: 0 1.8em;
  border-radius: 999px; background: var(--primary); color: var(--primary-ink); font-weight: 700; font-size: var(--fs);
}
.bt-attract-price { color: var(--muted); font-size: var(--fs-s); font-weight: 600; }
.bt-attract-price:empty { display: none; }

/* ---------- 대기 화면 아래: 서비스 소개·사용법·자주 묻는 질문(스크롤해야 보인다) ----------
 * 부스는 한 화면 앱이라 body 는 스크롤하지 않는다. 대기 화면(#scAttract)만 자기 안에서 세로로 스크롤하고,
 * 시작 버튼(.bt-attract-go)은 화면 높이 그대로(100%) 두어 첫 화면은 예전과 똑같다. 다른 화면은 그대로 스크롤 없음. */
#scAttract { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
/* 첫 화면 한 장(.bt-attract-first = 화면 높이): 시작 버튼이 남는 높이를 다 쓰고 그 아래 AI 남친·여친 입구 카드.
   맨 아래 "더 알아보기" 표시 자리만큼 비워 둔다(그 표시가 숨는 낮은 화면에선 여백만) */
#scAttract > .bt-attract-first { flex: none; height: 100%; display: flex; flex-direction: column; align-items: center;
  padding-bottom: calc(var(--fs-s) * 2.4 + 8px); }
.bt-attract-first > .bt-attract-go { flex: 1 1 auto; min-height: 0; }
@media (max-height: 640px), (max-aspect-ratio: 1/3) { #scAttract > .bt-attract-first { padding-bottom: var(--gap); } }
.bt-mate-entry {
  flex: none; display: flex; align-items: center; gap: .75em; width: min(100% - 2 * var(--pad), 480px); min-height: var(--tap);
  padding: .55em .8em .55em .6em; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: calc(var(--radius) + 2px); background: var(--accent-soft); color: var(--ink); font: inherit; text-align: start; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s var(--ease);
}
.bt-mate-entry:hover { border-color: var(--accent); box-shadow: 0 8px 22px rgba(20, 20, 22, .10); }
.bt-mate-entry:active { transform: scale(.98); }
.bt-mate-entry:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.bt-mate-entry-faces { flex: none; display: flex; }
.bt-mate-entry-faces img { display: block; width: clamp(30px, 5.4vmin, 48px); height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 8px; border: 2px solid var(--surface); background: var(--surface-2); }
.bt-mate-entry-faces img + img { margin-inline-start: -12px; }
.bt-mate-entry-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15em; line-height: 1.3; overflow-wrap: anywhere; }
.bt-mate-entry-t { font-weight: 800; font-size: var(--fs-s); color: var(--accent); }
.bt-mate-entry-d { font-size: calc(var(--fs-s) * .88); color: var(--ink-2); }
.bt-mate-entry-go { flex: none; color: var(--accent); }
@media (max-width: 380px) { .bt-mate-entry-faces img:nth-child(4) { display: none; } }
/* 첫 화면 맨 아래 "더 알아보기" 표시(누르는 곳이 아니다 — 아래는 시작 버튼). 낮은 화면에선 [시작] 과 부딪히지 않게 감춘다 */
.bt-intro-cue {
  position: absolute; left: 50%; top: calc(100% - 2.6em); transform: translateX(-50%); z-index: 1;
  display: inline-flex; align-items: center; gap: .3em; pointer-events: none; white-space: nowrap;
  color: var(--muted); font-size: calc(var(--fs-s) * .92); font-weight: 600;
}
.bt-intro-cue svg { width: 1.1em; height: 1.1em; animation: btCue 2.4s ease-in-out infinite; }
@keyframes btCue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (max-height: 640px), (max-aspect-ratio: 1/3) { .bt-intro-cue { display: none; } }

.bt-intro {
  flex: none; display: flex; flex-direction: column; gap: calc(var(--gap) * 3.6);
  width: min(100%, 1120px); margin: 0 auto;
  padding: calc(var(--pad) * 1.8) var(--pad) max(calc(var(--pad) * 1.2), env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); font-size: clamp(15px, .45rem + .9vmin, 20px); line-height: 1.6;
  --hole: #f9f9fa;           /* 필름 구멍 색 = 부스 판 색 */
  --tile: linear-gradient(150deg, var(--accent-soft) 0%, color-mix(in srgb, var(--primary) 16%, var(--accent-soft)) 100%);
}
.bt-intro-block { display: flex; flex-direction: column; gap: calc(var(--gap) * 1.6); }
/* 제목 위 작은 영문 머리표(모든 언어 같은 영문) — 양옆 짧은 선 */
.bt-intro-head { display: flex; flex-direction: column; align-items: center; gap: .5em; text-align: center; }
.bt-eyebrow {
  display: inline-flex; align-items: center; gap: .7em; font-size: .7em; font-weight: 800; line-height: 1;
  letter-spacing: .2em; text-transform: uppercase; color: var(--primary); padding-left: .2em;
}
.bt-eyebrow::before, .bt-eyebrow::after { content: ""; width: 1.8em; height: 2px; border-radius: 2px; background: currentColor; opacity: .35; }
.bt-intro-h { margin: 0; font-size: clamp(22px, .6rem + 2vmin, 36px); font-weight: 800; line-height: 1.25;
  letter-spacing: -.02em; text-align: center; text-wrap: balance; }
.bt-intro h3 { margin: 0; font-size: 1.06em; font-weight: 800; line-height: 1.35; color: var(--ink); text-wrap: balance; }
.bt-intro p { margin: 0; color: var(--ink-2); text-wrap: pretty; }
.bt-card-txt { display: flex; flex-direction: column; gap: .35em; min-width: 0; }

/* 기능: 벤토. 폰 1열(작은 카드도 그림 위·글 아래) · 600px~ 2열(큰 카드는 그림|글 가로) · 960px~ 12칸(큰 카드 반씩, 작은 카드 4개 한 줄) */
.bt-bento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.bt-intro-card {
  display: flex; flex-direction: row; align-items: flex-start; gap: 1em; min-width: 0; padding: 1.1em 1.15em 1.2em;
  border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(20, 20, 22, .04);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.bt-intro-card.bt-card-big { flex-direction: column; align-items: stretch; padding: .7em .7em 1.25em; gap: 1.05em; }
.bt-card-big > .bt-card-txt { padding: 0 .5em; }
.bt-intro-card.bt-card-sm { flex-direction: column; align-items: stretch; padding: .7em .7em 1.2em; gap: 1em; }
.bt-card-sm > .bt-card-txt { padding: 0 .5em; }
@media (hover: hover) and (pointer: fine) {
  .bt-intro-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
    box-shadow: 0 18px 38px -16px color-mix(in srgb, var(--primary) 45%, transparent); }
}
@media (min-width: 600px) {
  .bt-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt-intro-card { flex-direction: column; }
  .bt-intro-card.bt-card-big { grid-column: 1 / -1; flex-direction: row; align-items: center; padding: .7em 1.4em .7em .7em; gap: 1.4em; }
  .bt-card-big > .bt-viz { flex: 0 0 54%; }
  .bt-card-big > .bt-card-txt { padding: 0; }
}
@media (min-width: 960px) {
  .bt-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bt-intro-card { grid-column: span 3; }
  .bt-intro-card.bt-card-big { grid-column: span 6; flex-direction: column; align-items: stretch; padding: .7em .7em 1.3em; gap: 1.1em; }
  .bt-card-big > .bt-viz { flex: 1 1 auto; }   /* 두 큰 카드 높이를 맞추고 남는 자리는 그림이 채운다 */
  .bt-card-big > .bt-card-txt { padding: 0 .6em; }
  /* AI 남친·여친: 큰 카드 둘 아래 한 줄을 다 쓰는 가로 카드(그림|글) */
  .bt-intro-card.bt-card-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; padding: .7em 1.6em .7em .7em; gap: 1.6em; }
  .bt-card-wide > .bt-viz { flex: 0 0 46%; }
  .bt-card-wide > .bt-card-txt { padding: 0; }
}
/* 아이콘 판: 옅은 민트 그라데이션 */
.bt-intro-tile {
  flex: none; display: grid; place-items: center; width: 3.3em; height: 3.3em; border-radius: calc(var(--radius) * .7);
  background: var(--tile); color: var(--primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent);
}
.bt-intro-ic { width: 1.7em; height: 1.7em; }

/* 큰 카드 그림 판 */
.bt-viz {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 1.1em;
  min-height: 12em; padding: 1.2em 1em; border-radius: calc(var(--radius) * .75); overflow: hidden;
  background: radial-gradient(110% 80% at 15% 0%, rgba(255, 255, 255, .9), transparent 62%), var(--tile);
}
.bt-viz img { display: block; background: var(--surface-2); }
/* 멀리 있는 친구와 한 장에: 따로 찍은 3장 → 합성 1장 */
.bt-tg-src { position: relative; flex: none; width: 7.4em; height: 8.4em; }
.bt-tg-src img {
  position: absolute; width: 4.5em; height: auto; aspect-ratio: 358 / 480; object-fit: cover;
  border: 3px solid #fff; border-radius: 6px; box-shadow: 0 6px 16px rgba(20, 20, 22, .18);
}
.bt-tg-src img:nth-child(1) { left: 0; top: .1em; transform: rotate(-8deg); }
.bt-tg-src img:nth-child(2) { left: 2.9em; top: 0; transform: rotate(7deg); }
.bt-tg-src img:nth-child(3) { left: 1.4em; top: 2.1em; transform: rotate(-1deg); z-index: 1; }
.bt-mate-src { position: relative; flex: none; width: 7.2em; height: 8.2em; }
.bt-mate-src img {
  position: absolute; width: 4.6em; height: auto; object-fit: cover;
  border: 3px solid #fff; border-radius: 6px; box-shadow: 0 6px 16px rgba(20, 20, 22, .18);
}
.bt-mate-src img:nth-child(1) { left: 0; top: .2em; aspect-ratio: 358 / 480; transform: rotate(-7deg); }
.bt-mate-src img:nth-child(2) { right: 0; top: 1.6em; aspect-ratio: 240 / 320; transform: rotate(6deg); z-index: 1; }
.bt-tg-arrow { flex: none; width: 1.5em; height: 1.5em; color: var(--primary); }
.bt-tg-out {
  flex: none; width: 6.9em; height: auto; aspect-ratio: 672 / 900; object-fit: cover;
  border: 4px solid #fff; border-radius: 8px; box-shadow: 0 14px 30px rgba(20, 20, 22, .24); transform: rotate(2deg);
}
/* 움직이는 네컷: 밤 띠가 매달려 흔들리고 칸마다 사진이 천천히 다가온다 + SNS 공유 그림 */
.bt-mo-strip {
  --r: -3deg; position: relative; flex: none; display: flex; flex-direction: column; gap: .3em; width: 5.4em;
  padding: .42em .42em 1.15em; border-radius: 3px; background: #17171a;
  box-shadow: 0 16px 30px rgba(20, 20, 22, .3); transform: rotate(var(--r)); transform-origin: 50% -10%;
  animation: btSway 6s ease-in-out infinite;
}
/* 칸마다 사진 네 장(같은 사람들의 다른 포즈)을 빠르게 넘겨, 찍기 전 각자 움직이는 짧은 영상처럼 보이게 한다.
 * 한 장이 0.45초씩 보이고(1.8초 주기), 칸마다 시작 포즈와 박자를 달리 해 네 칸이 따로 움직인다 */
.bt-mo-strip > span { position: relative; display: block; overflow: hidden; border-radius: 2px; aspect-ratio: 600 / 448; }
.bt-mo-strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  animation: btFlip var(--d, 1.8s) steps(1, end) infinite; }
.bt-mo-strip > span:nth-child(2) { --d: 2.2s; }   /* 칸마다 박자가 달라 네 칸이 따로 움직인다 */
.bt-mo-strip > span:nth-child(3) { --d: 1.6s; }
.bt-mo-strip > span:nth-child(4) { --d: 2s; }
.bt-mo-strip > span img:nth-child(1) { opacity: 1; animation-delay: 0s; }
.bt-mo-strip > span img:nth-child(2) { animation-delay: calc(var(--d, 1.8s) * -.75); }
.bt-mo-strip > span img:nth-child(3) { animation-delay: calc(var(--d, 1.8s) * -.5); }
.bt-mo-strip > span img:nth-child(4) { animation-delay: calc(var(--d, 1.8s) * -.25); }
.bt-mo-strip > span:nth-child(2) { animation: btJig 1.8s steps(4, end) -.3s infinite; }
.bt-mo-strip > span:nth-child(3) { animation: btJig 1.8s steps(4, end) -.7s infinite; }
.bt-mo-strip > span:nth-child(4) { animation: btJig 1.8s steps(4, end) -1.1s infinite; }
.bt-mo-strip > span:nth-child(1) { animation: btJig 1.8s steps(4, end) infinite; }
@keyframes btFlip { 0% { opacity: 1; } 25%, 100% { opacity: 0; } }
/* 프레임이 바뀔 때마다 아주 살짝 흔들려 손으로 든 카메라 영상 느낌 */
@keyframes btJig { 0% { transform: translate(0, 0); } 25% { transform: translate(-1px, .5px); } 50% { transform: translate(.5px, -1px); } 75% { transform: translate(1px, .5px); } 100% { transform: translate(0, 0); } }
.bt-mo-play {
  position: absolute; right: -.8em; bottom: -.7em; display: grid; place-items: center; width: 2.3em; height: 2.3em;
  border-radius: 50%; background: var(--primary); color: var(--primary-ink); box-shadow: 0 6px 14px rgba(20, 20, 22, .28);
}
.bt-mo-play svg { width: 1em; height: 1em; margin-left: .12em; }
.bt-sns { display: grid; grid-template-columns: repeat(2, 2.7em); gap: .55em; }
.bt-sns i {
  display: grid; place-items: center; width: 2.7em; height: 2.7em; border-radius: .85em;
  background: var(--surface); color: var(--ink); box-shadow: 0 4px 12px rgba(20, 20, 22, .08);
}
.bt-sns svg { width: 1.35em; height: 1.35em; }

/* 작은 카드 그림 판: 큰 카드와 같은 민트 판, 높이는 고정(폰 약 130px, 글자 크기 따라 최대 약 170px)이라 카드끼리 그림 높이가 같다 */
.bt-viz.bt-viz-sm { min-height: 0; height: 8.6em; padding: .7em; gap: .7em; }
/* AI 스튜디오 보정: 폰으로 찍은 사진 → 같은 사람 스튜디오 보정본(가상 인물) */
.bt-ai-src, .bt-ai-out { flex: none; height: auto; object-fit: cover; border-radius: 6px; }
.bt-ai-src { width: 4em; aspect-ratio: 358 / 480; border: 3px solid #fff; box-shadow: 0 6px 14px rgba(20, 20, 22, .16); transform: rotate(-6deg); filter: saturate(.85); }
.bt-ai-out { width: 5em; aspect-ratio: 672 / 900; border: 3.5px solid #fff; box-shadow: 0 12px 24px rgba(20, 20, 22, .22); transform: rotate(3deg); }
.bt-ai-go { flex: none; display: grid; place-items: center; color: var(--primary); }
.bt-ai-go svg { width: 1.3em; height: 1.3em; }
.bt-ai-spark { position: absolute; left: calc(50% + 3.6em); top: .55em; display: grid; place-items: center; width: 1.9em; height: 1.9em;
  border-radius: 50%; background: var(--primary); color: var(--primary-ink); box-shadow: 0 4px 10px rgba(20, 20, 22, .22); }
.bt-ai-spark svg { width: 1.1em; height: 1.1em; }
/* QR 로 받기: 네컷 아래 QR 부분 + 그 QR 을 비추는 폰(화면 속 QR 확대, 훑는 선) + 3일 달력 표시(숫자만, 언어 무관) */
.bt-viz-qr { gap: 0; }
.bt-qr-foot { flex: none; width: 7.4em; height: auto; aspect-ratio: 360 / 300; object-fit: cover; border-radius: 5px;
  box-shadow: 0 10px 22px rgba(20, 20, 22, .18); transform: rotate(-3deg); }
.bt-qr-phone { position: relative; z-index: 1; flex: none; width: 3.5em; height: 6.2em; margin-left: -1.1em; padding: .32em .22em; border-radius: .7em;
  background: #17171a; box-shadow: 0 14px 26px rgba(20, 20, 22, .3); transform: rotate(7deg) translateY(.2em); }
.bt-qr-screen { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: .45em; background: #fff; }
.bt-qr-screen img { position: absolute; width: 15.9em; max-width: none; height: auto; left: -11.84em; top: -6.63em; }   /* 화면 가운데에 QR(그림의 84%, 71% 자리)이 오게 확대 */
.bt-qr-scan { position: absolute; left: 6%; right: 6%; top: 30%; height: 2px; border-radius: 2px; background: var(--primary);
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--primary) 70%, transparent); animation: btScan 2.4s ease-in-out infinite alternate; }
@keyframes btScan { from { top: 30%; } to { top: 68%; } }
.bt-qr-days { position: absolute; z-index: 2; left: calc(50% + 1.9em); top: .45em; display: grid; place-items: center; width: 2.1em; height: 2.1em;
  border-radius: 50%; background: var(--primary); color: var(--primary-ink); box-shadow: 0 4px 10px rgba(20, 20, 22, .22); }
.bt-qr-days svg { width: 1.3em; height: 1.3em; }
/* 거울 효과·소품: 큰 머리 + 하트 안경·고깔모자·선글라스를 실제로 입힌 사진 + 효과·소품 표시 */
.bt-fx-ph { flex: none; width: 6.9em; height: auto; aspect-ratio: 360 / 340; object-fit: cover; border: 3.5px solid #fff; border-radius: 6px;
  box-shadow: 0 12px 24px rgba(20, 20, 22, .22); transform: rotate(-3deg); }
/* 이름 주의: 촬영 화면의 효과 칩 줄은 .bt-fx-chips — 소개 카드 아이콘 묶음은 .bt-vfx-icons 로 따로 둔다(겹치면 촬영 화면이 세로로 무너진다) */
.bt-vfx-icons { display: flex; flex-direction: column; gap: .5em; }
.bt-vfx-icons i { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: .8em; background: var(--surface); color: var(--ink);
  box-shadow: 0 4px 12px rgba(20, 20, 22, .08); }
.bt-vfx-icons i:first-child { background: var(--primary); color: var(--primary-ink); }
.bt-vfx-icons svg { width: 1.3em; height: 1.3em; }
/* 한국 감성 프레임: 필름·까치호랑이·모노 화이트 미니 띠를 부채꼴로(가운데가 앞) */
.bt-viz-fr { gap: 0; }
.bt-viz-fr img { flex: none; width: 2.35em; height: auto; aspect-ratio: 120 / 360; object-fit: cover; border-radius: 2px;
  box-shadow: 0 8px 18px rgba(20, 20, 22, .2); }
.bt-viz-fr img:nth-child(1) { transform: rotate(-9deg) translateY(.25em); margin-right: -.35em; }
.bt-viz-fr img:nth-child(2) { position: relative; z-index: 1; width: 2.5em; transform: translateY(-.15em); box-shadow: 0 12px 24px rgba(20, 20, 22, .28); }
.bt-viz-fr img:nth-child(3) { transform: rotate(9deg) translateY(.25em); margin-left: -.35em; }

/* 사용법: 필름 띠로 이은 타임라인. 폰은 세로(왼쪽 띠), 900px~ 가로(위 띠) */
.bt-tl {
  --n: 2.9em; --tlg: calc(var(--gap) * 1.7); --band: .8em;
  position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tlg);
}
/* 띠는 단계마다 자기 숫자 가운데에서 다음 숫자 가운데까지(마지막 단계 아래로 삐져나오지 않게) */
.bt-tl > li:not(:last-child)::before {
  content: ""; position: absolute; left: calc(var(--n) / 2); top: calc(var(--n) / 2); bottom: calc(-1 * var(--tlg) - var(--n) / 2);
  width: var(--band); transform: translateX(-50%); border-radius: 3px;
  background-color: var(--primary);
  background-image: repeating-linear-gradient(to bottom, var(--hole) 0 .26em, transparent .26em .78em),
                    repeating-linear-gradient(to bottom, var(--hole) 0 .26em, transparent .26em .78em);
  background-size: .18em 100%, .18em 100%; background-position: .12em .26em, calc(100% - .12em) .26em; background-repeat: no-repeat;
}
.bt-tl > li {
  position: relative; display: grid; grid-template-columns: var(--n) minmax(0, 1fr) auto; column-gap: .95em; align-items: start;
}
.bt-tl-n {
  grid-column: 1; grid-row: 1; display: grid; place-items: center; width: var(--n); height: var(--n); border-radius: 50%;
  background: var(--surface); border: 2.5px solid var(--primary); color: var(--primary);
  font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; position: relative; z-index: 1;
  box-shadow: 0 0 0 5px var(--hole);
}
.bt-tl-n { font-size: 1.35em; --n: 2.15em; }      /* 큰 숫자: 글자 크기만큼 원도 같이 커진다(바깥 --n 2.9em 과 같은 크기) */
.bt-tl > li > .bt-card-txt { grid-column: 2; grid-row: 1; padding-top: .35em; }
.bt-tl-viz { grid-column: 3; grid-row: 1; width: 4.4em; height: 4.4em; border-radius: calc(var(--radius) * .7); overflow: hidden; }
.bt-tl-viz .bt-intro-ic { width: 1.9em; height: 1.9em; }
.bt-tl-frame { display: flex; flex-direction: column; gap: .22em; padding: .42em 1.15em; background: var(--tile); }
.bt-tl-frame img { flex: 1; min-height: 0; width: 100%; object-fit: cover; box-shadow: 0 0 0 .2em #fff; border-radius: 1px; }
.bt-tl-bg { position: relative; background: var(--surface-2); }
.bt-tl-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bt-tl-bg b { position: absolute; left: .35em; bottom: .35em; display: flex; gap: .2em; }
.bt-tl-bg b i { width: .78em; height: .78em; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.bt-tl-bg b i:nth-child(1) { background: #f3d3da; }
.bt-tl-bg b i:nth-child(2) { background: #cfe3f3; }
.bt-tl-bg b i:nth-child(3) { background: #f6e7b8; }
@media (min-width: 900px) {
  .bt-tl { flex-direction: row; align-items: stretch; }
  .bt-tl > li::before { display: none; }
  .bt-tl::before {
    content: ""; position: absolute; border-radius: 3px; background-color: var(--primary); background-repeat: no-repeat;
    top: calc(var(--n) / 2); bottom: auto; height: var(--band); width: auto; transform: translateY(-50%);
    left: calc((100% - 3 * var(--tlg)) / 8); right: calc((100% - 3 * var(--tlg)) / 8);
    background-image: repeating-linear-gradient(to right, var(--hole) 0 .26em, transparent .26em .78em),
                      repeating-linear-gradient(to right, var(--hole) 0 .26em, transparent .26em .78em);
    background-size: 100% .18em, 100% .18em; background-position: .26em .12em, .26em calc(100% - .12em);
  }
  .bt-tl > li { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .9em; text-align: center; }
  .bt-tl > li > .bt-card-txt { padding-top: 0; }
  .bt-tl-viz { width: 5.2em; height: 5.2em; order: 1; }
  .bt-tl > li > .bt-card-txt { order: 2; }
  .bt-tl-frame { padding: .48em 1.45em; }
}

/* 자주 묻는 질문: 카드. 누르는 줄은 44px 이상, 펼치면 테두리가 민트 */
.bt-intro-faq { display: flex; flex-direction: column; gap: calc(var(--gap) * .7); width: min(100%, 820px); margin: 0 auto; }
.bt-intro-faq details {
  border-radius: calc(var(--radius) * .8); background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(20, 20, 22, .04); transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.bt-intro-faq details[open] { border-color: color-mix(in srgb, var(--primary) 40%, var(--line));
  box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--primary) 55%, transparent); }
.bt-intro-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1em; min-height: 56px;
  padding: .7em .9em .7em 1.2em; cursor: pointer; list-style: none; font-weight: 700; color: var(--ink); border-radius: inherit;
}
.bt-intro-faq summary::-webkit-details-marker { display: none; }
.bt-intro-faq summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.bt-intro-faq summary > i {
  position: relative; flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--accent-soft);
  transition: background-color .25s var(--ease);
}
.bt-intro-faq summary > i::before, .bt-intro-faq summary > i::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: .72em; height: 2px; border-radius: 2px;
  background: var(--primary); transform: translate(-50%, -50%); transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.bt-intro-faq summary > i::after { transform: translate(-50%, -50%) rotate(90deg); }
.bt-intro-faq details[open] summary > i { background: var(--primary); }
.bt-intro-faq details[open] summary > i::before, .bt-intro-faq details[open] summary > i::after { background: var(--primary-ink); }
.bt-intro-faq details[open] summary > i::after { transform: translate(-50%, -50%) rotate(0deg); }
@media (hover: hover) { .bt-intro-faq summary:hover { color: var(--primary); } }
.bt-intro-faq details > p { padding: 0 1.2em 1.15em; }

/* 마무리 띠: 민트 판 + 위아래 필름 구멍. 단추는 시작하기와 같은 동작 */
.bt-cta {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .6em; text-align: center;
  padding: 2.6em 1.4em 2.8em; border-radius: calc(var(--radius) * 1.1); overflow: hidden;
  background: radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, #fff 14%, var(--primary)), var(--primary) 70%);
  color: var(--primary-ink);
}
.bt-cta::before, .bt-cta::after {
  content: ""; position: absolute; left: 1.1em; right: 1.1em; height: .42em; border-radius: 2px;
  background: repeating-linear-gradient(to right, rgba(255, 255, 255, .24) 0 .62em, transparent .62em 1.2em);
}
.bt-cta::before { top: .85em; }
.bt-cta::after { bottom: .85em; }
.bt-cta-h { margin: 0; font-size: clamp(24px, .7rem + 2.3vmin, 42px); font-weight: 900; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.bt-intro .bt-cta-d { max-width: 30em; color: color-mix(in srgb, var(--primary-ink) 86%, transparent); }
.bt-cta-go {
  display: inline-flex; align-items: center; gap: .5em; min-height: var(--tap); margin-top: .6em; padding: 0 1.9em;
  border: 0; border-radius: 999px; background: #fff; color: var(--primary); font: inherit; font-weight: 800; font-size: var(--fs);
  cursor: pointer; box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4); transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.bt-cta-go svg { width: 1.1em; height: 1.1em; flex: none; transition: transform .25s var(--ease); }
.bt-cta-go:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .bt-cta-go:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .45); }
  .bt-cta-go:hover svg { transform: translateX(3px); }
}

/* 맨 아래: 약관 링크 · photomon.net */
.bt-intro-foot { display: flex; flex-direction: column; align-items: center; gap: .3em; padding-top: var(--gap);
  border-top: 1px solid var(--line); font-size: .92em; }
.bt-intro-links { display: flex; flex-wrap: wrap; justify-content: center; column-gap: .4em; }
.bt-intro-links a, .bt-intro-site {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .7em; border-radius: 10px;
  color: var(--ink-2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong);
}
.bt-intro-links a:hover, .bt-intro-site:hover { color: var(--primary); text-decoration-color: currentColor; }
.bt-intro-site { color: var(--muted); text-decoration: none; letter-spacing: .02em; }

@media (prefers-reduced-motion: reduce) {
  .bt-intro-cue svg, .bt-mo-strip, .bt-mo-strip img, .bt-mo-strip > span { animation: none; }
  .bt-mo-strip > span img:not(:first-child) { display: none; }   /* 움직임 줄이기: 첫 포즈만 */
  .bt-qr-scan { animation: none; top: 48%; }
  .bt-intro-card, .bt-intro-card:hover, .bt-cta-go:hover, .bt-cta-go:hover svg { transition: none; transform: none; }
  .bt-mo-strip { transform: rotate(var(--r)); }
  .bt-intro-faq summary > i, .bt-intro-faq summary > i::before, .bt-intro-faq summary > i::after { transition: none; }
}

/* ---------- 이어하기 ---------- */
.bt-resume { justify-content: center; align-items: center; }
.bt-resume .bt-actions { width: min(100%, 520px); }
.bt-resume .bt-note { width: min(100%, 520px); text-align: center; text-wrap: pretty; }

/* ---------- ①② 선택 ---------- */
/* 묶음(배경 칩·스타일 카드·프레임)은 내용 높이 그대로 둔다(줄어들면 아래 묶음과 겹친다).
   다 안 들어가는 높이(접는 폰 안쪽 화면 등)에선 이 몸통만 스크롤 — 제목·동의·시작 버튼은 그대로 보인다 */
.bt-pick-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(var(--gap) * 1.4);
  justify-content: safe center; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px 10px; margin: 0 -10px; }   /* 선택 그림자·포커스 테두리가 스크롤 상자에 잘리지 않게 */
.bt-group { flex: none; }

/* ① 누구와 찍나: 모드 스위치(프레임 모양 스위치와 같은 모양) → 남친·여친 탭 → 인물 카드 4열 × 2줄. 고른 카드는 민트 테두리 */
.bt-group--mate { display: flex; flex-direction: column; align-items: center; gap: calc(var(--gap) * .8); }
.bt-mate-mode { max-width: 100%; }
/* 세 단추가 360px 폰 한 줄에(긴 언어는 단추 안에서 두 줄로): 좁은 화면에선 옆 여백을 줄인다 */
.bt-tiles--layout.bt-mate-mode > button { min-width: 0; white-space: normal; text-align: center; line-height: 1.2; text-wrap: balance;
  padding-inline: clamp(.6em, 2.6vw, 1.3em); }
.bt-mate-panel { width: min(100%, 520px); display: flex; flex-direction: column; align-items: center; gap: calc(var(--gap) * .7); }
.bt-mate-panel[hidden] { display: none; }
.bt-mate-tabs { display: flex; gap: 6px; }
.bt-mate-tabs > button { min-height: 40px; min-width: 5.5em; padding: 0 1.1em; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2); font: inherit; font-size: var(--fs-s); font-weight: 700; cursor: pointer; }
.bt-mate-tabs > button:hover { border-color: var(--line-strong); }
.bt-mate-tabs > [aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.bt-mates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(6px, 1.2vmin, 12px); width: 100%; }
.bt-mate {
  min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: .3em; padding: 3px 3px .4em;
  border: 1px solid var(--line); border-radius: calc(var(--radius) * .7); background: var(--surface); color: var(--ink);
  font: inherit; font-size: calc(var(--fs-s) * .86); font-weight: 600; line-height: 1.2; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.bt-mate:hover { border-color: var(--line-strong); }
.bt-mate img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: calc(var(--radius) * .5); background: var(--surface-2); }
.bt-mate-name { text-align: center; overflow-wrap: anywhere; hyphens: auto; }
.bt-mate[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent), 0 6px 16px rgba(20, 20, 22, .10); }
.bt-mate[aria-pressed="true"] .bt-mate-name { color: var(--accent); font-weight: 800; }
.bt-mate-need { margin: 0; font-size: var(--fs-s); font-weight: 700; color: var(--accent); text-align: center; }
.bt-mate-need[hidden] { display: none; }
.bt-mate-need.need { animation: btNeed .9s var(--ease) 2; border-radius: 999px; }
/* 함께 찍기 방(호스트·게스트)에서는 AI 상대를 붙이지 않는다 */
body[data-tg="host"] .bt-group--mate, body[data-tg="guest"] .bt-group--mate { display: none; }

/* 공통: 고를 수 있는 판 — booth.js 가 넣는 button 은 aria-pressed="true" 또는 .is-selected 로 선택 표시 */
.bt-tiles > button, .bt-cards > button, .bt-chips > button, .bt-tile, .bt-card, .bt-chip {
  position: relative; cursor: pointer; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font-weight: 600; transition: border-color .15s, box-shadow .15s, background-color .15s, transform .15s var(--ease);
}
.bt-tiles > button:hover, .bt-cards > button:hover, .bt-chips > button:hover { border-color: var(--line-strong); }
.bt-tiles > [aria-pressed="true"], .bt-cards > [aria-pressed="true"], .bt-chips > [aria-pressed="true"],
.bt-tiles > .is-selected, .bt-cards > .is-selected, .bt-chips > .is-selected {
  border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary), 0 8px 22px rgba(20, 20, 22, .10); z-index: 1;
}
/* 선택된 판 안쪽 오른쪽 위에 체크(판 밖으로 삐져나오지 않게) */
.bt-tiles--frame > [aria-pressed="true"]::after, .bt-cards > [aria-pressed="true"]::after,
.bt-tiles--frame > .is-selected::after, .bt-cards > .is-selected::after {
  content: ""; position: absolute; top: .55em; inset-inline-end: .55em; width: 1.5em; height: 1.5em; border-radius: 50%;
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 64% no-repeat;
}

/* 프레임 모양: 두 칸짜리 스위치(세로 1×4 / 넓은 2×2) */
.bt-tiles { display: flex; justify-content: center; gap: var(--gap); }
.bt-tiles--layout { gap: 4px; width: fit-content; margin: 0 auto; padding: 4px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); }
.bt-tiles--layout > button { display: inline-flex; align-items: center; gap: .55em; min-height: calc(var(--tap) - 8px);
  padding: 0 1.3em; border: 0; border-radius: 999px; background: transparent; font-size: var(--fs-s); color: var(--ink-2); box-shadow: none; }
/* 마우스가 있는 기기에서만(터치 기기는 누른 뒤 hover 가 남아 선택된 단추가 흰 바탕·흰 글자로 보였다) */
@media (hover: hover) and (pointer: fine) { .bt-tiles--layout > button:not([aria-pressed="true"]):hover { background: var(--surface); } }
.bt-tiles--layout > [aria-pressed="true"], .bt-tiles--layout > [aria-pressed="true"]:hover { background: var(--primary); color: var(--primary-ink); box-shadow: none; }
.bt-lay-glyph { display: grid; gap: 2px; width: 1.05em; height: 1.2em; flex: none; }
.bt-lay-glyph i { background: currentColor; border-radius: 1px; opacity: .9; }
.bt-lay-glyph--strip { grid-template-rows: repeat(4, 1fr); width: .6em; }
.bt-lay-glyph--grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* 프레임 디자인: 샘플 사진을 넣은 실물 미리보기 타일 */
/* 높이는 화면 높이에서 위 단계줄·제목·프레임 모양·찍는 방법·아래 버튼 몫(약 540px)을 뺀 만큼까지 — 낮은 태블릿·접는 폰 안쪽(가로 700~1000)에서
   몸통이 넘쳐 스크롤되면 맨 위 프레임 모양 스위치가 제목 밑으로 잘려 보였다 */
.bt-tiles--frame { --tile-h: clamp(120px, min(36vmin, 100vh - 540px), 440px); --tile-h: clamp(120px, min(36vmin, 100dvh - 540px), 440px); }
.bt-tiles--frame > button {
  flex: 1 1 0; max-width: 28vmin; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .6em;
  padding: calc(var(--gap) * .9) calc(var(--gap) * .6) calc(var(--gap) * .7); border-radius: var(--radius); font-size: var(--fs-s);
}
.bt-tiles canvas, .bt-tiles img { display: block; height: var(--tile-h); width: auto; max-width: 100%; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(20, 20, 22, .08), 0 6px 16px rgba(20, 20, 22, .14); }
body[data-layout="grid"] .bt-tiles--frame { --tile-h: clamp(110px, min(31vmin, 100vh - 540px), 380px); --tile-h: clamp(110px, min(31vmin, 100dvh - 540px), 380px); }

/* 배경 칩: 스튜디오는 색 견본(.bt-sw), 서울은 선 아이콘(.bt-emo) + 이름 */
.bt-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--gap) * .7); }
.bt-chips > button, .bt-chip {
  display: inline-flex; align-items: center; gap: .6em; min-height: var(--tap); padding: 0 1.1em 0 .45em;
  border-radius: 999px; font-size: var(--fs-s);
}
.bt-sw { flex: none; width: calc(var(--tap) * .64); height: calc(var(--tap) * .64); border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(20, 20, 22, .12); }
.bt-emo { flex: none; display: grid; place-items: center; width: calc(var(--tap) * .64); height: calc(var(--tap) * .64);
  border-radius: 50%; background: var(--surface-2); color: var(--ink); }
.bt-emo .bt-ico { width: 58%; height: 58%; }
.bt-sublabel { flex-basis: 100%; text-align: center; font-size: var(--fs-s); font-weight: 600; color: var(--muted); margin-top: .2em; }

/* ② 배경: 도시 줄(가로로 넘김, 묶음 사이 구분선) → 스튜디오 4 → 보는 도시의 명소 5(미리보기 사진 + 이름).
   사진을 못 받으면 같은 자리에 선 아이콘(.is-icon). 고른 배경이 다른 도시에 있으면 그 도시 단추에 점(.has-bg) */
.bt-cities { flex: none; display: flex; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: none; scroll-snap-type: x proximity; padding: 3px 3px 5px; margin: 0 -3px calc(var(--gap) * .5); }
.bt-cities::-webkit-scrollbar, .bt-bgrow--place::-webkit-scrollbar { display: none; }
.bt-city { position: relative; flex: none; display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: 3px 1em 3px 3px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2);
  font-size: min(var(--fs-s), 17px); font-weight: 600; white-space: nowrap; cursor: pointer; scroll-snap-align: start;
  transition: border-color .15s, background-color .15s, color .15s; }
.bt-city:hover { border-color: var(--line-strong); color: var(--ink); }
.bt-city[aria-pressed="true"] { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); }
.bt-city-img { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  background: var(--surface-2); color: var(--ink-2); }
.bt-city-img, .bt-bg-img { position: relative; }
.bt-city-img img, .bt-bg-img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.bt-city-img.is-icon .bt-ico { width: 58%; height: 58%; }
.bt-city[aria-pressed="true"] .bt-city-img { box-shadow: 0 0 0 2px var(--primary-ink); }
.bt-city.has-bg::after { content: ""; position: absolute; top: 2px; inset-inline-start: 30px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 0 2px var(--surface); }
.bt-city-sep { flex: none; align-self: center; width: 1px; height: 26px; margin: 0 4px; background: var(--line-strong); }

.bt-bgs { --pw: clamp(140px, 14vmin, 200px); display: flex; flex-direction: column; gap: calc(var(--gap) * .6); }
.bt-bgs > .bt-sublabel { margin: 0; }
.bt-bgrow { flex: none; display: flex; gap: calc(var(--gap) * .6); }   /* 줄어들지 않게(넘기는 줄은 overflow 라 min-height 가 0 이 된다) */
.bt-bgrow > :first-child { margin-inline-start: auto; }       /* 가운데 정렬 — 넘치면(폰) 자동 여백이 0 이 되어 왼쪽부터 넘긴다 */
.bt-bgrow > :last-child { margin-inline-end: auto; }
.bt-bgrow--place { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-snap-type: x proximity; padding: 3px; margin: -3px; }
.bt-bg { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: .4em; min-height: 44px;
  padding: 5px 5px .55em; border: 1px solid var(--line); border-radius: calc(var(--radius) * .7); background: var(--surface);
  color: var(--ink); font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; scroll-snap-align: start;
  transition: border-color .15s, box-shadow .15s; }
.bt-bg:hover { border-color: var(--line-strong); }
.bt-bg[aria-pressed="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary), 0 8px 22px rgba(20, 20, 22, .10); z-index: 1; }
.bt-bg[aria-pressed="true"]::after { content: ""; position: absolute; top: 9px; inset-inline-end: 9px; width: 22px; height: 22px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--surface);
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 64% no-repeat; }
.bt-bg-name { display: block; max-width: 100%; text-wrap: balance; }
.bt-bg--studio { width: calc(var(--pw) * .8); font-size: calc(var(--pw) * .1); }
.bt-bg-sw { display: block; width: 100%; height: 32px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(20, 20, 22, .12); }
.bt-bg--studio[aria-pressed="true"]::after { top: 10px; inset-inline-end: 10px; width: 20px; height: 20px; }
.bt-bg--place { width: var(--pw); font-size: calc(var(--pw) * .093); }   /* 폭에 맞춘 글자: 가장 긴 낱말(de Mandarinenplantage)도 한 줄 */
.bt-bg-img { display: grid; place-items: center; width: 100%; height: calc(var(--pw) * .9); border-radius: 10px; overflow: hidden;
  background: var(--surface-2); color: var(--ink-2); }
.bt-bg-img.is-icon .bt-ico { width: 34%; height: 34%; }
/* 낮은 태블릿·가로 화면: 스튜디오는 알약 칩 한 줄, 명소 사진은 낮게(스타일 카드가 덜 밀리게) */
@media (min-width: 600px) and (max-width: 1219px) and (max-height: 760px) {
  .bt-bgs .bt-bg-img { height: calc(var(--pw) * .5); }
  .bt-bg--studio { flex-direction: row; gap: .55em; width: auto; padding: 0 1.1em 0 .4em; border-radius: 999px; font-size: min(var(--fs-s), 16px); }
  .bt-bg--studio .bt-bg-sw { flex: none; width: 30px; height: 30px; border-radius: 50%; }
  .bt-bg--studio[aria-pressed="true"]::after { display: none; }
}
/* 넓은 화면: 스튜디오 넷과 명소 다섯을 한 줄로(높이를 아껴 스타일 카드까지 한눈에) */
@media (min-width: 1220px) {
  .bt-bgs { display: grid; grid-template-rows: auto auto; grid-auto-flow: column; justify-content: center;
    column-gap: calc(var(--gap) * 1.4); row-gap: calc(var(--gap) * .5); }
  .bt-bgs .bt-bg--studio { width: calc(var(--pw) * .68); }
  .bt-bgs .bt-bg-sw, .bt-bgs .bt-bg-img { height: calc(var(--pw) * .72); }
}

/* 스타일 카드 4장: 아이콘 + 이름(한 줄에 넷, 좁은 폰은 2×2) */
.bt-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.bt-cards > button, .bt-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45em;
  min-height: calc(var(--tap) * 1.8); padding: .6em; border-radius: var(--radius); font-size: var(--fs-s); text-align: center;
}
.bt-cards .bt-emo { width: calc(var(--tap) * .8); height: calc(var(--tap) * .8); }
/* 낮은 화면(접는 폰 안쪽·가로 노트북): ② 카드와 간격을 줄여 스크롤 없이 들어가게 */
@media (max-height: 760px) {
  .bt-pick2 .bt-pick-body { gap: var(--gap); }
  .bt-pick2 .bt-cards > button { min-height: calc(var(--tap) * 1.3); }
}
@media (max-height: 680px) { .bt-pick2 .bt-sublabel { display: none; } }

.bt-consent {
  flex: none; display: flex; align-items: center; gap: .8em; align-self: center; max-width: 40em;
  min-height: var(--tap); padding: .4em 1.1em .4em .8em; border-radius: calc(var(--radius) * .8);
  border: 1px solid var(--line-strong); background: var(--surface); font-size: var(--fs-s); color: var(--ink); cursor: pointer;
}
.bt-consent input { flex: none; width: calc(var(--tap) * .46); height: calc(var(--tap) * .46); margin: 0;
  accent-color: var(--primary); cursor: pointer; }
.bt-consent:has(input:checked) { border-color: var(--primary); }
/* 동의가 비어 있는데 시작하려 할 때 booth.js 가 .need 를 붙인다 */
.bt-consent.need { border-color: var(--accent); background: var(--accent-soft); animation: btNeed .9s var(--ease) 2; }
@keyframes btNeed { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); } }

/* ---------- ③ 촬영 ---------- */
.bt-shoot { padding-top: calc(var(--pad) * .6); }
.bt-shoot-body { flex: 1; min-height: 0; display: grid; gap: var(--gap);
  grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "hud" "live" "side"; }
.bt-hud { grid-area: hud; display: flex; align-items: center; justify-content: center; gap: var(--gap); min-height: calc(var(--tap) * .8); }
.bt-shotn {
  flex: none; font-weight: 700; font-size: var(--fs-s); letter-spacing: .04em;
  padding: .4em .9em; border-radius: 999px; background: var(--primary); color: var(--primary-ink);
}
.bt-pose {
  position: relative; margin: 0; padding: .5em 1.1em; border-radius: 999px; background: var(--surface); color: var(--ink);
  font-weight: 700; font-size: var(--fs); box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(20, 20, 22, .08);
}
.bt-pose:empty { display: none; }
.bt-pose.is-new { animation: btPop .35s var(--ease); }

.bt-live-wrap { grid-area: live; min-height: 0; display: grid; place-items: center; container-type: size; container-name: btlive; position: relative; }
/* 라이브 화면 = 고른 프레임의 칸. 바깥 두께(--fr-pad)가 프레임 색, 안쪽 .bt-view 가 칸 비율 그대로 */
.bt-live {
  position: relative; padding: var(--fr-pad); border-radius: calc(var(--radius) * .5); background: var(--fr-bg);
  width: min(100cqw, calc((100cqh - 2 * var(--fr-pad)) * var(--cell-ar) + 2 * var(--fr-pad)));
  box-shadow: 0 0 0 1px rgba(20, 20, 22, .08), 0 24px 60px rgba(20, 20, 22, .18);
  transition: background-color .3s;
}
.bt-view { position: relative; width: 100%; aspect-ratio: var(--cell-ar); overflow: hidden; border-radius: 3px; background: #111; }
.bt-view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
/* 우스꽝 거울 캔버스: 비디오 위를 덮는다. 좌우 반전·칸 비율 자르기는 셰이더가 한다(transform 없음) */
.bt-view .bt-mirror { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bt-view .bt-mirror[hidden] { display: none; }
/* 스카이 프레임: 칸 둘레의 흰 테두리를 라이브 화면에도 */
body[data-deco="sky"] .bt-view { box-shadow: 0 0 0 calc(var(--fr-pad) * .3) #fff; }
/* 필름: 양옆 스프로킷 구멍 */
body[data-deco="film"] .bt-live {
  background:
    repeating-linear-gradient(180deg, transparent 0 8px, color-mix(in srgb, var(--fr-fg) 85%, transparent) 8px 16px) left calc(var(--fr-pad) * .3) top 0 / calc(var(--fr-pad) * .4) 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 8px, color-mix(in srgb, var(--fr-fg) 85%, transparent) 8px 16px) right calc(var(--fr-pad) * .3) top 0 / calc(var(--fr-pad) * .4) 100% no-repeat,
    var(--fr-bg);
}

/* 카운트다운: 가운데 큰 숫자 + 원형 진행 링. booth.js 가 --p(0~1, 링이 찬 비율)를 바꾼다. 비면 숨는다 */
.bt-count {
  --p: 0;
  position: absolute; left: 50%; top: 50%; width: min(46%, 30vmin); aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; background: rgba(20, 20, 22, .32);
  font-weight: 800; font-size: clamp(56px, 15vmin, 210px); line-height: 1;
  color: #fff; text-shadow: 0 4px 18px rgba(0, 0, 0, .35);
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.bt-count::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(#fff calc(var(--p) * 1turn), rgba(255, 255, 255, .25) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - clamp(5px, 1.1vmin, 14px)), #000 calc(100% - clamp(5px, 1.1vmin, 14px) + 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - clamp(5px, 1.1vmin, 14px)), #000 calc(100% - clamp(5px, 1.1vmin, 14px) + 1px));
}
.bt-count:empty { display: none; }
.bt-count.is-tick { animation: btTick .45s var(--ease); }
@keyframes btTick { from { transform: translate(-50%, -50%) scale(1.18); opacity: .35; } }
@keyframes btPop { from { transform: scale(.92); opacity: 0; } }

/* 셔터 플래시: .on(또는 .flash-on) 을 붙이는 순간 하얗게, 떼면 .25초에 사라진다 */
.bt-flash { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; transition: opacity .25s; }
.bt-flash.on, .bt-flash.flash-on { opacity: .95; transition: none; }

.bt-cammsg { position: absolute; inset: 0; z-index: 4; margin: 0; display: grid; place-items: center; padding: clamp(8px, 6%, 40px);
  text-align: center; background: rgba(249, 249, 250, .96); color: var(--ink); font-weight: 600; font-size: var(--fs);
  container-type: size; overflow-y: auto; overscroll-behavior: contain; }
/* 카메라 칸이 작으면(접는 폰 안쪽 화면) 글자·버튼을 칸에 맞춰 줄인다. 그래도 넘치면 칸 안에서 스크롤 */
.bt-cammsg p { font-size: clamp(13px, 6cqmin, var(--fs)); line-height: 1.35; }
.bt-cammsg .bt-btn { min-height: clamp(44px, 16cqmin, var(--tap)); font-size: clamp(13px, 5.4cqmin, var(--fs)); padding: .3em 1.2em; }
/* 카메라 안내가 떠 있으면 거리 힌트는 숨긴다(글자가 겹치지 않게) */
.bt-view:has(.bt-cammsg:not([hidden])) .bt-disthint { display: none; }

/* 촬영 전 "한 걸음 뒤로" 안내(카메라 모드, 1번 컷 전에만). booth.js 의 shootGen 으로 취소한다.
 * 라이브 화면(.bt-live, 프레임 테두리 포함)을 덮고 위에서 아래로 쌓는다: 머리·어깨 점선 그림 → 안내 글(가로 전체, 가운데) → [바로 시작].
 * 글이 버튼 옆으로 밀려 한 글자씩 줄바꿈되던 문제(접는 폰 안쪽 화면에서 카메라 칸이 100~180px 일 때) 때문에 가로 배치는 쓰지 않는다.
 * 크기는 이 상자(container) 기준이라 작은 칸에선 글자가 줄고, 낮으면 그림을 뺀다.
 * 카메라 자리(.bt-live-wrap)가 낮아 칸이 작아지면 .bt-live 의 position 을 풀어 카메라 자리 전체를 덮는다(아래 @container btlive).
 * 그래도 넘치면 상자 안에서 스크롤한다. */
.bt-ready {
  position: absolute; inset: 0; z-index: 5; container-type: size; border-radius: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: safe center;
  gap: clamp(6px, 3cqmin, 20px); padding: clamp(8px, 4.5cqmin, 32px);
  background: rgba(20, 20, 22, .42); text-align: center; overflow-y: auto; overscroll-behavior: contain;
}
.bt-ready-guide { position: relative; flex: none; width: clamp(40px, 24cqmin, 160px); aspect-ratio: 1.15; pointer-events: none; }
.bt-ready-head {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 46%; aspect-ratio: 1; border-radius: 50%; border: 2.5px dashed rgba(255, 255, 255, .9);
}
.bt-ready-shoulders {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  border: 2.5px dashed rgba(255, 255, 255, .8); border-bottom: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.bt-ready-card {
  flex: none; width: 100%; max-width: 28em; margin: 0;
  padding: clamp(8px, 3.5cqmin, 22px) clamp(10px, 4.5cqmin, 28px); border-radius: clamp(10px, 3cqmin, 20px);
  background: rgba(255, 255, 255, .96); color: var(--ink);
}
.bt-ready-msg { margin: 0; font-weight: 800; font-size: clamp(15px, 6.5cqmin, 34px); line-height: 1.2; text-wrap: balance; }
.bt-ready-sub { margin: .3em 0 0; color: var(--ink-2); font-size: clamp(12px, 3.9cqmin, 22px); line-height: 1.4; text-wrap: pretty; }
#btReadySkip { flex: none; min-height: clamp(44px, 14cqmin, var(--tap)); padding: 0 1.5em; font-size: clamp(14px, 5cqmin, var(--fs)); }
/* 낮은 칸: 그림을 빼고 글·버튼만. 좁은 칸: 여백을 줄여 글 폭을 넓힌다 */
@container (max-height: 250px) { .bt-ready-guide { display: none; } }   /* 상자 안쪽(패딩 뺀) 높이 기준 */
@container (max-width: 260px) {
  .bt-ready-card { padding: 8px 10px; }
  .bt-ready-sub { line-height: 1.32; }
}
/* 카메라 자리가 낮은 화면(접는 폰 안쪽 + 앱 안 브라우저 안내 등): 칸 대신 카메라 자리 전체를 덮는다.
   (.bt-live-wrap 이 크기 컨테이너일 때만 — 좁은 폰·아주 낮은 화면에선 칸 크기가 폭으로 정해지고 페이지가 스크롤된다) */
@container btlive (max-height: 330px) {
  .bt-live { position: static; }
  .bt-ready { border-radius: calc(var(--radius) * .5); }
}

/* 촬영 내내 보이는 작은 거리 힌트. 가이드 띠가 떠 있는 동안은 겹치지 않게 숨긴다 */
.bt-disthint {
  position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); z-index: 2; margin: 0;
  max-width: 92%; padding: .35em 1em; border-radius: 999px; background: rgba(20, 20, 22, .55);
  color: #fff; font-size: var(--fs-s); font-weight: 600; text-align: center; line-height: 1.3;
}
.bt-live:has(> .bt-ready:not([hidden])) .bt-disthint { display: none; }

/* AI 남친·여친 자리: 라이브 화면 오른쪽에 반투명 사람 윤곽선(머리·어깨), 왼쪽 아래에 "이 자리는 {name}의 자리예요" 안내.
   윤곽선은 오른쪽 40%, 안내는 왼쪽 55% 안에서만 — 둘이 겹치지 않는다. 안내가 떠 있는 동안 가운데 거리 힌트는 숨긴다 */
.bt-matespot { position: absolute; right: 3%; bottom: 0; width: 40%; height: 84%; z-index: 1; pointer-events: none; }
.bt-matespot[hidden] { display: none; }
.bt-matespot svg { display: block; width: 100%; height: 100%; }
.bt-matespot path {
  fill: color-mix(in srgb, var(--primary) 20%, transparent); stroke: rgba(255, 255, 255, .92);
  stroke-width: 1.6; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke;
}
.bt-matespot-t {
  position: absolute; left: 3%; bottom: 3%; z-index: 2; margin: 0; max-width: 54%;
  padding: .4em .8em; border-radius: 12px; background: rgba(20, 20, 22, .6);
  color: #fff; font-size: var(--fs-s); font-weight: 600; line-height: 1.3; text-wrap: pretty; overflow-wrap: anywhere;
}
.bt-matespot-t[hidden] { display: none; }
.bt-view:has(> .bt-matespot:not([hidden])) .bt-disthint { display: none; }
.bt-view:has(> .bt-cammsg:not([hidden])) .bt-matespot-t { display: none; }
/* 포즈 안내가 이름까지 들어가 길다 → 여러 줄이면 알약 대신 둥근 상자 */
body:has(#btMateSpot:not([hidden])) .bt-pose { min-width: 0; border-radius: 14px; text-align: center; line-height: 1.3; text-wrap: balance; }
/* 올리기 모드 안내(사진 고르기 판 안) */
.bt-picker-mate { color: var(--ink); font-weight: 700; }
.bt-picker-mate[hidden] { display: none; }

/* 찍은 컷 모음. 좁은 화면에선 4칸 줄(진행 표시), 넓은 화면에선 고른 프레임 색의 세로 스트립.
   booth.js 가 .bt-thumb 4칸을 다시 그린다 */
.bt-side { grid-area: side; display: flex; flex-direction: column; gap: var(--gap); min-height: 0; }
.bt-mini {
  --mini-pad: clamp(5px, 1vmin, 12px);
  position: relative; display: grid; gap: clamp(6px, 1.2vmin, 14px);
  grid-template-columns: repeat(4, 1fr); align-self: center; width: min(100%, 560px);
}
body[data-layout="grid"] .bt-mini { width: min(100%, 440px); }
.bt-thumb {
  position: relative; aspect-ratio: var(--cell-ar); overflow: hidden; border-radius: 8px;
  display: grid; place-items: center; font-size: var(--fs-s); font-weight: 700;
  color: var(--muted); background: var(--surface-2);
  outline: 1.5px dashed var(--line-strong); outline-offset: -1.5px;
}
.bt-thumb img, .bt-thumb canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 올린 사진은 칸 비율로 잘려 있지 않다. 프레임 합성(boothCoverRect)과 같게 위쪽 30% 기준으로 채운다 */
.bt-thumb img { object-position: 50% 30%; }
.bt-thumb.is-shot, .bt-thumb:has(img), .bt-thumb:has(canvas) { outline: 0; background: #111; }
/* 다음에 찍힐 칸 */
.bt-thumb.is-current { outline: 2.5px solid var(--accent); outline-offset: -2.5px; color: var(--accent); background: var(--accent-soft); }
/* 방금 찍힌 사진이 라이브 화면에서 칸으로 날아 들어온다. 출발점은 --fly-x/--fly-y(칸 기준 이동량)로 조절 */
.bt-thumb.fly-in { animation: btFly .6s var(--ease) both; z-index: 2; }
@keyframes btFly { from { transform: translate(var(--fly-x, 0), var(--fly-y, -260%)) scale(3); opacity: .4; } }
.bt-thumb button {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: center;
  padding: .35em; border: 0; border-radius: 0; background: linear-gradient(180deg, transparent 40%, rgba(20, 20, 22, .82));
  color: #fff; font: 700 calc(var(--fs-s) * .82)/1.15 var(--f-sans); text-align: center; cursor: pointer;
}
/* 칸 전체가 '다시 찍기/다시 보정' 버튼(작은 칸에서도 누르기 쉽게) */
.bt-thumb button:hover { background: linear-gradient(180deg, rgba(20, 20, 22, .1) 25%, rgba(20, 20, 22, .9)); }
.bt-thumb button:focus-visible { outline-offset: -4px; }
.bt-actions--shoot > * { flex: 1; }
.bt-upload { position: relative; }
.bt-upload:focus-within { outline: 3px solid var(--primary); outline-offset: 3px; }

/* 가로 넓은 화면(데스크톱·TV·가로 태블릿): 라이브 가운데, 찍은 컷은 오른쪽에 고른 프레임의 세로 스트립으로 */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .bt-shoot-body { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "hud hud" "live side"; }
  .bt-side { width: clamp(190px, 25vmin, 380px); justify-content: center; }
  .bt-shoot .bt-mini { grid-template-columns: 1fr; width: clamp(120px, 15vmin, 240px); gap: var(--mini-pad);
    padding: var(--mini-pad) var(--mini-pad) calc(var(--mini-pad) * 3.4); background: var(--fr-bg); border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(20, 20, 22, .08), 0 14px 34px rgba(20, 20, 22, .16); transition: background-color .3s; }
  .bt-shoot .bt-mini::after { content: "K-BOOTH"; position: absolute; left: 0; right: 0; bottom: calc(var(--mini-pad) * 1.1);
    text-align: center; font: 800 clamp(8px, 1.1vmin, 14px)/1 var(--f-sans); letter-spacing: .2em; color: var(--fr-fg); }
  body[data-layout="grid"] .bt-shoot .bt-mini { grid-template-columns: repeat(2, 1fr); width: 100%; }
  .bt-shoot .bt-thumb { border-radius: 1px; }
  .bt-actions--shoot { flex-direction: column; align-items: stretch; }
}

/* 올리기 모드: 옆 스트립 대신 가운데 아래로 4칸 줄. 4장을 다 채우면 그 4칸이 화면 가운데 주인공이 되고,
   고르기 판은 아래 작은 "바꾸기" 버튼으로 줄어든다(data-filled 는 booth.js renderThumbs 가 단다) */
body[data-mode="upload"] .bt-shoot-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "hud" "live" "side"; }
body[data-mode="upload"] .bt-side { width: auto; justify-content: center; }
body[data-mode="upload"] .bt-shoot .bt-mini { grid-template-columns: repeat(4, 1fr); width: min(100%, 720px); padding: 0;
  background: none; box-shadow: none; }
body[data-mode="upload"] .bt-shoot .bt-mini::after { content: none; }
body[data-mode="upload"] .bt-shoot .bt-thumb { border-radius: 8px; }
body[data-mode="upload"] .bt-actions--shoot { flex-direction: row; justify-content: center; }
body[data-mode="upload"] .bt-actions--shoot > * { flex: 0 1 520px; }
body[data-mode="upload"][data-filled="4"] .bt-shoot-body { grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "hud" "side" "live"; }
body[data-mode="upload"][data-filled="4"] .bt-side { container-type: size; }
body[data-mode="upload"][data-filled="4"] .bt-shoot .bt-mini {
  width: min(100%, 1100px, calc((100cqh - var(--tap) - var(--gap)) * var(--cell-ar) * 4 + 3 * var(--gap))); }
@media (max-width: 599px) {
  body[data-mode="upload"][data-filled="4"] .bt-shoot-body { align-content: center; }
  body[data-mode="upload"][data-filled="4"] .bt-side { container-type: normal; }
  body[data-mode="upload"][data-filled="4"] .bt-shoot .bt-mini { grid-template-columns: 1fr 1fr; width: 100%; }
}

/* ---------- 미리보기·완성: 출력구에서 스트립이 내려온다 ---------- */
.bt-out-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--gap); }
.bt-out-side { flex: none; display: flex; flex-direction: column; gap: var(--gap); }
.bt-print { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; container-type: size; }
/* 출력구: 기계 앞면에 파인 가늘고 어두운 틈 */
.bt-slot {
  flex: none; position: relative; z-index: 2; width: min(92%, 440px); height: clamp(10px, 1.6vmin, 20px);
  border-radius: 999px; background: linear-gradient(180deg, #0c0c0d, #2a2a2e);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .8);
}
/* 틈 아래로만 종이가 보이게 자른다. 그림자가 잘려 회색 상자가 되지 않게 좌우·아래 여백을 그림자보다 넓게 둔다 */
.bt-paper-clip { flex: 1; min-height: 0; width: 100%; margin-top: calc(clamp(10px, 1.6vmin, 20px) * -.5);
  overflow: hidden; display: flex; justify-content: center; padding: 0 24px 28px; }
.bt-paper { height: fit-content; }
.bt-canvas {
  display: block; max-width: calc(100cqw - 48px); max-height: calc(100cqh - clamp(10px, 1.6vmin, 20px) - 28px);
  width: auto; height: auto; box-shadow: 0 8px 20px rgba(20, 20, 22, .14), 0 0 0 1px rgba(20, 20, 22, .06);
}
/* 인화 연출: booth.js 가 .bt-print 에 .printing 을 붙이면 약 1.6초 동안 종이가 틈에서 내려온다
   (다시 재생하려면 떼고 → reflow → 다시 붙인다) */
.bt-print.printing .bt-paper { animation: btPrint 1.6s cubic-bezier(.35, .1, .25, 1) both; }
@keyframes btPrint {
  0%   { transform: translateY(-101%); }
  20%  { transform: translateY(-80%); }
  24%  { transform: translateY(-78%); }
  55%  { transform: translateY(-34%); }
  59%  { transform: translateY(-32%); }
  100% { transform: translateY(0); }
}
/* 출력구는 종이가 나오는 동안만 보이고, 다 나오면 사라진다(자리는 그대로 둬 스트립이 움직이지 않는다). */
.bt-slot { opacity: 0; }
.bt-print.printing .bt-slot { animation: btSlot 1.9s ease-in-out both; }
@keyframes btSlot { 0%, 84% { opacity: 1; } 100% { opacity: 0; } }

/* 완성: 네컷 사진 / 움직이는 네컷 스위치(프레임 모양 스위치와 같은 모양) */
.bt-viewsw { flex: none; display: flex; gap: 4px; width: fit-content; margin: 0 auto; padding: 4px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); }
.bt-viewsw > button { min-height: calc(var(--tap) - 8px); padding: 0 1.3em; border: 0; border-radius: 999px; background: transparent;
  color: var(--ink-2); font-weight: 700; font-size: var(--fs-s); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .bt-viewsw > button:not([aria-pressed="true"]):hover { background: var(--surface); } }
.bt-viewsw > [aria-pressed="true"], .bt-viewsw > [aria-pressed="true"]:hover { background: var(--primary); color: var(--primary-ink); }
.bt-motion-msg { margin: 0; font-size: var(--fs-s); color: var(--ink-2); text-align: center; font-variant-numeric: tabular-nums; }
@media (min-width: 600px) { .bt-out-side .bt-motion-msg { text-align: start; } }
video.bt-canvas { background: var(--fr-bg); }

/* 결제 전: 무엇을 받는지 */
.bt-get { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.bt-get li { display: flex; align-items: flex-start; gap: .6em; font-size: var(--fs-s); color: var(--ink); line-height: 1.4; }
.bt-get .bt-ico { width: 1.25em; height: 1.25em; margin-top: .05em; color: var(--ok); }
/* 결제 버튼: 이름은 줄바꿈해도 가격(₩4,900 / $4.99)은 한 덩어리로 */
#btPay > #btPayL { min-width: 0; }
#btPrice { flex: none; white-space: nowrap; }
.bt-pay-note { margin: 0; color: var(--muted); font-size: calc(var(--fs-s) * .92); text-align: center; line-height: 1.45; }

.bt-cuts { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--gap) * .6); }
.bt-cuts .bt-thumb { outline: 0; background: #111; }

.bt-order { margin: 0; text-align: center; color: var(--muted); font-size: calc(var(--fs-s) * .9); }
.bt-order:empty { display: none; }
.bt-dl-note { margin: 0; text-align: center; color: var(--muted); font-size: calc(var(--fs-s) * .9); line-height: 1.45; text-wrap: pretty; }
.bt-dl-note[hidden] { display: none; }
.bt-dl-copy { display: inline-flex; align-items: center; min-height: 32px; padding: 0 .2em; border: 0; background: none;
  font: inherit; font-weight: 800; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* 폭 600px 이상(폴드 안쪽 화면·태블릿·가로 폰·데스크톱): 스트립(왼쪽)과 버튼 열(오른쪽)을 한 덩어리로 가운데에 모은다.
   .bt-print 는 size 컨테이너라 내용으로 폭을 못 정한다 → 높이(100cqh)와 인화지 비율로 폭을 계산한다.
   인화지 비율 = 폭/높이: 1×4 600/1800, 2×2 1200/1800. */
@media (min-width: 600px) {
  .bt-out-body { --paper-ar: .3333; flex-direction: row; align-items: stretch; justify-content: center;
    gap: clamp(24px, 4vmin, 72px); container-type: size; }
  body[data-layout="grid"] .bt-out-body { --paper-ar: .6667; }
  .bt-print { flex: 0 1 calc((100cqh - clamp(10px, 1.6vmin, 20px) - 28px) * var(--paper-ar) + 48px); min-width: 0; }
  /* 버튼 열이 높이보다 길면(긴 언어·낮은 화면) 위로 넘쳐 제목을 덮지 않게 위에서부터 쌓고 열 안에서 스크롤한다.
     좌우 10px·위아래 4px 은 포커스 테두리가 스크롤 상자에 잘리지 않게 둔 여백(바깥 여백으로 상쇄해 자리는 그대로) */
  .bt-out-side { flex: 0 1 calc(clamp(320px, 34vw, 560px) + 20px); min-width: 300px; min-height: 0; justify-content: safe center;
    overflow-y: auto; overscroll-behavior: contain; padding: 4px 10px; margin: -4px -10px; }
  .bt-out-side .bt-sub, .bt-out-side .bt-h, .bt-out-side .bt-pay-note { text-align: start; }
}
/* 미리보기·완성 제목은 버튼 열 안에(넓은 화면) — 좁은 화면에선 맨 위 */
.bt-out-side > .bt-h { margin-bottom: .1em; }
/* 위아래로 쌓는 화면(폭 600px 미만 세로 폰): 스트립이 알아볼 수 없을 만큼 작아지지 않게 인화 칸에 최소 높이를 둔다
   (세로 1×4 가 폭 140px 남짓). 다 안 들어가면 그림을 줄이지 않고 화면 전체가 스크롤된다. 남는 높이는 인화 칸이 다 쓴다 */
@media (max-width: 599px) {
  #scPreview, #scDone { overflow-y: auto; overscroll-behavior: contain; }
  #scPreview > *, #scDone > * { flex-shrink: 0; }
  .bt-out-body { flex: 1 0 auto; }
  .bt-print { flex: 1 0 auto; min-height: 460px; }
}

/* 인화지를 누르면 크게 보기(booth-zoom.js). 오른쪽 위 "크게 보기" 단추로 알린다(아래쪽 로고·날짜를 가리지 않게) */
.bt-paper { position: relative; }
.bt-paper .bt-canvas { cursor: zoom-in; }
.bt-zoom-go { position: absolute; right: 6px; top: 6px; display: inline-flex; align-items: center; gap: .3em;
  min-height: 34px; max-width: calc(100% - 12px); padding: 0 .75em 0 .55em; border: 0; border-radius: 999px;
  background: rgba(20, 20, 22, .74); color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.1; white-space: nowrap;
  cursor: zoom-in; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.bt-zoom-go .bt-ico { width: 16px; height: 16px; }
.bt-zoom-go span { overflow: hidden; text-overflow: ellipsis; }
.bt-zoom-go:hover { background: rgba(20, 20, 22, .88); }
.bt-print:has(canvas.bt-canvas:not([hidden]):not([width])) .bt-zoom-go { display: none; }   /* 아직 그리기 전 */

/* 결제 버튼은 늘 닿게: 좁은 세로 폰이나 낮은 화면(가로 폰)에선 스트립 최소 크기 때문에 화면이 스크롤되므로
   미리보기의 결제 버튼(혼자 "AI 스튜디오 보정 받기" / 함께 "함께 합성 받기")을 화면 아래에 띄워 둔다.
   그만큼 화면 끝에 여백을 둬서 마지막 내용까지 스크롤하면 가리지 않는다 */
@media (max-width: 599px), (max-height: 640px) {
  #scPreview { --paybar: calc(var(--tap) + 28px + env(safe-area-inset-bottom)); padding-bottom: calc(var(--paybar) + var(--gap)); }
  #scPreview #btPay { position: fixed; z-index: 30; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom)); margin: 0 auto; max-width: 560px;
    box-shadow: 0 0 0 6px color-mix(in srgb, #f9f9fa 85%, transparent), 0 10px 28px rgba(20, 20, 22, .22); }
}
/* 그 밖의 화면도 글자가 크거나(기기 글꼴 크기·확대) 안내가 길어 결제 버튼이 첫 화면 아래로 밀리면 똑같이 띄운다.
   밀리는지는 booth.js payPin() 이 띄우지 않은 자리로 재서 정한다 */
#scPreview.is-paybar { --paybar: calc(var(--tap) + 28px + env(safe-area-inset-bottom)); padding-bottom: calc(var(--paybar) + var(--gap)); }
#scPreview.is-paybar #btPay { position: fixed; z-index: 30; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom)); margin: 0 auto; max-width: 560px;
  box-shadow: 0 0 0 6px color-mix(in srgb, #f9f9fa 85%, transparent), 0 10px 28px rgba(20, 20, 22, .22); }

/* 크게 보기 창: 어두운 바탕에 그림을 화면에 맞춰 띄운다. 두 번 누르면 2배, 확대 중엔 밀어서 옮긴다 */
.bt-zoom { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: rgba(8, 8, 10, .93);
  color: #fff; animation: btZoomIn .18s ease both; }
.bt-zoom[hidden] { display: none; }
@keyframes btZoomIn { from { opacity: 0; } }
.bt-zoom-bar { flex: none; display: flex; justify-content: flex-end;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 0 8px; }
.bt-zoom-x { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.bt-zoom-x:hover { background: rgba(255, 255, 255, .22); }
.bt-zoom-x:focus-visible { outline-color: #fff; }
.bt-zoom-box { flex: 1; min-height: 0; display: flex; overflow: auto; overscroll-behavior: contain; touch-action: manipulation; }
.bt-zoom-box > img, .bt-zoom-box > video { flex: none; display: block; margin: auto; max-width: none; background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5); cursor: zoom-in; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.bt-zoom.is-zoomed .bt-zoom-box > * { cursor: zoom-out; }
.bt-zoom-tip { flex: none; margin: 0; padding: 8px 16px max(12px, env(safe-area-inset-bottom)); text-align: center;
  font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .72); }
/* 합성 예시 결과 그림도 누르면 크게 */
.bt-tgex-zoom { display: block; padding: 0; border: 0; background: none; border-radius: 8px; cursor: zoom-in; }

/* ---------- 보정 중 ---------- */
.bt-workscreen { justify-content: center; }
.bt-workscreen .bt-h::after { content: ""; display: block; width: 3em; height: 3px; margin: .45em auto 0; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent); background-size: 200% 100%;
  animation: btScan 1.4s linear infinite; }
@keyframes btScan { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.bt-work-body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap); }
.bt-mini--work { flex: none; }
body .bt-mini.bt-mini--work { width: min(100%, 560px, 60vh); }
body[data-layout="grid"] .bt-mini.bt-mini--work { grid-template-columns: repeat(4, 1fr); width: min(100%, 440px); }
/* 칸 상태: 흐림 → 선명. booth.js 가 .bt-thumb 에 is-wait / is-run / is-ok / is-fail 을 붙인다 */
.bt-thumb.is-wait img, .bt-thumb.is-wait canvas { filter: blur(6px) grayscale(.7) brightness(.8); }
.bt-thumb.is-run img, .bt-thumb.is-run canvas { filter: blur(3px) saturate(.6); }
.bt-thumb.is-run::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%) 0 0 / 250% 100%;
  animation: btShine 1.3s linear infinite; }
@keyframes btShine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.bt-thumb.is-ok img, .bt-thumb.is-ok canvas { filter: none; transition: filter 1.2s var(--ease); }
.bt-thumb.is-fail { outline: 2.5px solid var(--bad); outline-offset: -2.5px; }
.bt-thumb.is-fail img, .bt-thumb.is-fail canvas { filter: grayscale(1) brightness(.6); }
.bt-work { list-style: none; margin: 0; padding: 0; width: min(100%, 560px); display: grid; gap: calc(var(--gap) * .5); }
.bt-work li { display: flex; justify-content: space-between; align-items: center; gap: var(--gap); flex-wrap: wrap;
  min-height: calc(var(--tap) * .8); padding: .3em 1em; border-radius: calc(var(--radius) * .6);
  background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-s); }
.bt-work li > :nth-child(2) { color: var(--muted); font-weight: 600; }
.bt-work li.is-run > :nth-child(2) { color: var(--ink); }
.bt-work li.is-ok > :nth-child(2) { color: var(--ok); }
.bt-work li.is-fail { border-color: color-mix(in srgb, var(--bad) 50%, transparent); }
.bt-work li.is-fail > :nth-child(2) { color: var(--bad); }
.bt-work li button { min-height: var(--tap); padding: 0 1em; border-radius: 999px; border: 1px solid var(--primary);
  background: none; color: var(--primary); font-weight: 700; cursor: pointer; }
.bt-workscreen > .bt-btn, .bt-workscreen > .bt-actions { align-self: center; width: min(100%, 520px); }

/* ---------- 화면 위 알림(카카오페이 승인 확인 실패 등) — 자리를 차지하지 않고 위에 뜬다 ---------- */
.bt-toast {
  position: absolute; z-index: 20; left: 50%; top: var(--pad); transform: translateX(-50%);
  width: min(calc(100% - 32px), 640px); display: flex; align-items: center; gap: var(--gap);
  padding: calc(var(--gap) * .6) calc(var(--gap) * .6) calc(var(--gap) * .6) 1.1em;
  border-radius: calc(var(--radius) * .7); background: var(--surface); border: 1px solid var(--line-strong);
  color: var(--ink); box-shadow: 0 16px 40px rgba(20, 20, 22, .16); animation: btIn .32s var(--ease);
}
.bt-toast p { margin: 0; flex: 1; min-width: 0; font-size: var(--fs-s); line-height: 1.45; }
.bt-toast .bt-icon { flex: none; }

/* ---------- ② 두 가지 시작 버튼 ---------- */
.bt-actions--start > .bt-start { flex: 1 1 0; min-width: 0; padding: .3em 1em; }
/* 올리기: 같은 크기, 테두리 버튼으로 나눈다(주 행동은 카메라) */
.bt-start--up { background: var(--surface); color: var(--ink); border-color: var(--primary); }
.bt-start--up:not([aria-disabled="true"]):hover { background: var(--surface-2); }
.bt-start--up[aria-disabled="true"] { background: var(--surface); border-color: var(--line); color: var(--muted); }

/* ---------- ③ 올리기 모드: 라이브 화면·카운트다운·포즈 대신 큰 사진 고르기 판 ---------- */
.bt-picker { display: none; }
body[data-mode="upload"] #btStage, body[data-mode="upload"] .bt-pose { display: none; }
body[data-mode="upload"] .bt-picker {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--gap) * .8);
  width: min(100cqw, 900px); height: min(100cqh, 640px); min-height: calc(var(--tap) * 2); padding: var(--pad);
  border: 2px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); cursor: pointer; text-align: center;
  transition: background-color .15s, border-color .15s, transform .12s var(--ease);
}
body[data-mode="upload"] .bt-picker:hover { border-color: var(--primary); }
body[data-mode="upload"] .bt-picker:active { transform: scale(.99); }
/* 4장을 다 채웠으면 고르기 판은 작게 줄이고 찍은 컷이 주인공이 된다 */
body[data-mode="upload"][data-filled="4"] .bt-picker { height: auto; min-height: var(--tap); flex-direction: row; gap: .7em;
  width: auto; padding: .4em 1.4em; border-style: solid; border-width: 1px; border-radius: 999px; }
body[data-mode="upload"][data-filled="4"] .bt-picker-d { display: none; }
body[data-mode="upload"][data-filled="4"] .bt-picker-ico { width: 1.3em; height: 1.3em; }
body[data-mode="upload"][data-filled="4"] .bt-picker-t { font-size: var(--fs); }
/* 작은 "바꾸기" 버튼만 남으니 높이를 내용만큼 */
body[data-mode="upload"][data-filled="4"] .bt-live-wrap { container-type: normal; place-items: center; }
.bt-picker-ico { width: clamp(40px, 9vmin, 120px); height: clamp(40px, 9vmin, 120px); color: var(--ink-2); }
.bt-picker-ico .bt-ico { width: 100%; height: 100%; }
.bt-picker-t { font-weight: 800; font-size: calc(var(--fs-h) * .8); line-height: 1.2; }
.bt-picker-d { max-width: 30em; color: var(--ink-2); font-size: var(--fs-s); line-height: 1.45; text-wrap: pretty; }
/* 사진을 읽는 동안 */
.bt-picker.is-busy { pointer-events: none; opacity: .6; }
/* 올리기 모드의 빈 칸 = '＋ n / 4' 버튼(칸 전체) */
.bt-thumb:not(.is-shot) button { background: none; align-items: center; color: var(--ink-2);
  font: 700 var(--fs-s)/1.1 var(--f-sans); }
.bt-thumb:not(.is-shot) button:hover { background: var(--surface); }

/* 카메라 안내 + '올리기로 바꾸기' 버튼 */
.bt-cammsg { align-content: safe center; gap: clamp(6px, 3cqmin, 24px); }
.bt-cammsg p { margin: 0; }
.bt-cammsg .bt-btn { justify-self: center; max-width: 100%; }

@media (max-width: 599px) {
  /* 폰 ②: 이전은 ‹ 아이콘만, 두 시작 버튼이 나머지 폭을 반씩 */
  .bt-actions--start { gap: calc(var(--gap) * .8); }
  .bt-actions--start .bt-back { width: var(--tap); padding: 0; font-size: 0; }
  .bt-actions--start .bt-back::before { content: ""; width: 22px; height: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141416' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5 8 12l6.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat; }
  .bt-actions--start > .bt-start { padding: .25em .6em; font-size: var(--fs-s); }
  .bt-pick2 .bt-pick-body { gap: var(--gap); }
  .bt-pick2 .bt-sublabel { display: none; }             /* 색 견본 / 사진만으로도 스튜디오·명소가 구분된다(도시는 도시 줄에) */
  /* 폰 ② 배경: 스튜디오 넷은 한 줄 4칸, 명소 다섯은 가로로 넘긴다(긴 이름도 낱말이 잘리지 않는 폭) */
  .bt-bgrow--studio > .bt-bg { flex: 1 1 0; width: auto; min-width: 0; }
  .bt-bgrow--studio > :first-child { margin-inline-start: 0; }
  .bt-bgrow--studio > :last-child { margin-inline-end: 0; }
  .bt-bgs { --pw: 140px; }
  .bt-bg--studio { font-size: 13px; }
  .bt-bg-sw { height: 26px; }
  .bt-bg-img { height: 84px; }
  .bt-pick2 .bt-cards > button { min-height: calc(var(--tap) * 1.3); }
}

/* ---------- 아주 작은 화면만 스크롤 허용 ---------- */
@media (max-height: 640px) {
  body { overflow: auto; }
  .bt-kiosk { position: relative; inset: auto; margin: 6px; min-height: calc(100dvh - 12px); }
  .bt-screen { display: flex; }
  .bt-sc { position: relative; inset: auto; flex: 1; }
  .bt-live-wrap { container-type: inline-size; }
  .bt-live { width: min(100%, 60vh * var(--cell-ar)); }
  .bt-print { container-type: inline-size; min-height: max(60vh, 460px); }
  .bt-canvas { max-height: max(70vh, 420px); }
}
/* 낮은 가로 화면(가로 폰): 두 칸은 그대로 두되 높이가 안 정해지므로 크기 컨테이너를 풀고 스트립 칸 폭을 캔버스 높이로 정한다.
   화면 전체가 스크롤되고, 결제 버튼은 아래에 떠 있다 */
@media (max-height: 640px) and (min-width: 600px) {
  .bt-out-body { container-type: normal; align-items: flex-start; }
  .bt-print { flex: 0 0 calc(max(70vh, 420px) * var(--paper-ar) + 48px); }
}

/* 좁은 폰: 단계 표시줄은 둘째 줄로, 단계 이름은 지금 단계만 */
@media (max-width: 599px) {
  .bt-top { flex-wrap: wrap; row-gap: 4px; }
  .bt-tools { margin-inline-start: auto; }
  .bt-steps { order: 3; flex-basis: 100%; }
  body[data-sc="scAttract"] .bt-steps, body[data-sc="scResume"] .bt-steps { display: none; }
  .bt-steps li:not(.is-current) span { display: none; }
  /* 프레임 4종은 2×2 로 크게 */
  .bt-tiles--frame { display: grid; grid-template-columns: 1fr 1fr; --tile-h: clamp(110px, 22vh, 190px); }
  body[data-layout="grid"] .bt-tiles--frame { --tile-h: clamp(100px, 19vh, 170px); }
  .bt-tiles--frame > button { max-width: none; }
  .bt-cards { grid-template-columns: 1fr 1fr; gap: calc(var(--gap) * .7); }
  .bt-cards > button, .bt-pick2 .bt-cards > button { gap: .3em; min-height: calc(var(--tap) * 1.3); padding: .45em .5em; line-height: 1.25; }
  .bt-cards .bt-emo { width: calc(var(--tap) * .62); height: calc(var(--tap) * .62); }
  .bt-cards > [aria-pressed="true"]::after, .bt-cards > .is-selected::after { top: .4em; inset-inline-end: .4em; width: 1.3em; height: 1.3em; }
  .bt-actions:not(.bt-actions--stack):not(.bt-actions--grid) .bt-pricetag { display: none; }
  .bt-pick .bt-actions { flex-wrap: wrap; }
  /* 촬영(세로 폰): 칸은 가로로 넓어서 화면 높이를 다 못 쓴다. 컷 수·라이브 화면·찍은 컷을 한 덩어리로
     가운데 모아, 위아래로 흩어져 보이지 않게 한다. 높이는 화면 폭 기준(칸 비율 그대로) */
  .bt-shoot-body { grid-template-rows: auto auto auto; align-content: center; }
  .bt-live-wrap { container-type: inline-size; }
  .bt-live { width: min(100%, calc((100dvh - 360px) * var(--cell-ar) + 2 * var(--fr-pad))); }
  body[data-mode="upload"] .bt-picker { width: 100%; height: auto; min-height: 42dvh; }
}
/* 단계 표시가 한 줄에 안 들어갈 때(긴 언어·접는 폰 안쪽 화면): booth.js fitSteps() 가 .bt-top[data-fit] 를 붙인다.
   cur = 지금 단계만 이름, num = 숫자만, row = 둘째 줄 + 지금 단계 이름, rownum = 둘째 줄 + 숫자만. 소리·언어 단추는 늘 화면 안에 */
.bt-top[data-fit="cur"] .bt-steps li:not(.is-current) span, .bt-top[data-fit="row"] .bt-steps li:not(.is-current) span,
.bt-top[data-fit="num"] .bt-steps li span, .bt-top[data-fit="rownum"] .bt-steps li span { display: none; }
.bt-top[data-fit="row"], .bt-top[data-fit="rownum"] { flex-wrap: wrap; row-gap: 4px; }
.bt-top[data-fit="row"] .bt-tools, .bt-top[data-fit="rownum"] .bt-tools { margin-inline-start: auto; }
.bt-top[data-fit="row"] .bt-steps, .bt-top[data-fit="rownum"] .bt-steps { order: 3; flex-basis: 100%; }
body[data-sc="scAttract"] .bt-top[data-fit^="row"] .bt-steps, body[data-sc="scResume"] .bt-top[data-fit^="row"] .bt-steps { display: none; }
/* 폰에선 가격을 버튼 위 한 줄 글자로 */
@media (max-width: 599px) { .bt-pick .bt-pricetag { display: block !important; order: -1; flex-basis: 100%; text-align: center;
  background: none; padding: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .bt-flash, .bt-flash.on { transition: none; }
}

/* ↓ 결제창(pp-*, kp-*, tp-*, cu-*, pay-*) 규칙 — assets/style.css 에서 그대로 복사 */
/* ---- PayPal 결제창 ---- */
.pp-ov{position:fixed;inset:0;background:rgba(10,30,28,.55);display:flex;align-items:center;
  justify-content:center;z-index:9999;padding:18px}
.pp-card{background:#fff;border-radius:16px;padding:22px 20px 18px;width:min(380px,100%);
  position:relative;box-shadow:0 18px 50px rgba(0,0,0,.25);max-height:90vh;overflow:auto}
.pp-x{position:absolute;top:10px;inset-inline-end:12px;border:0;background:none;font-size:17px;
  color:#8a9a97;cursor:pointer;line-height:1;padding:4px}
.pp-t{margin:0 0 4px;font-weight:800;font-size:17px;color:#0b3d39;padding-inline-end:22px}
.pp-p{margin:0 0 16px;font-size:14px;color:#667}
.pp-msg{margin:10px 0 0;font-size:13px;min-height:18px;text-align:center}
.pp-oid{display:inline-block;margin-top:6px;font-family:ui-monospace,Menlo,monospace;
  font-size:12px;background:#f3f5f6;color:#334;padding:3px 8px;border-radius:6px;user-select:all}
/* ---- 카카오페이 버튼 ---- */
.kp-wrap{margin-top:10px}
.kp-btn{width:100%; padding:13px 14px; border:0; border-radius:10px; background:#FEE500;
  color:#191600; font-weight:800; font-size:15px; cursor:pointer; font-family:inherit}
.kp-btn:hover:not(:disabled){filter:brightness(.97)}
.kp-btn:disabled{opacity:.6; cursor:default}
.kp-test{margin:8px 0 0; font-size:12px; color:#8a9a97; text-align:center}
.pp-tabs{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:0 0 14px}
.pay-tab{min-width:0; min-height:44px; padding:9px 8px; border:1px solid #d5e3e1; border-radius:10px;
  background:#fff; color:#5a7d78; font-weight:700; font-size:13px; line-height:1.3; cursor:pointer;
  font-family:inherit; white-space:normal; overflow-wrap:anywhere}
.pay-tab:hover{border-color:#00877d}
.pay-tab.on{border-color:#00877d; background:#eaf7f5; color:#0b3d39; box-shadow:inset 0 0 0 1px #00877d}
.tp-btn{width:100%; padding:13px 14px; border:0; border-radius:10px; background:#00877d;
  color:#fff; font-weight:800; font-size:15px; line-height:1.3; cursor:pointer; font-family:inherit}
.tp-btn:hover:not(:disabled){background:#00756c}
.tp-btn:disabled{opacity:.6; cursor:default}
.tp-test{margin:8px 0 0; font-size:12px; color:#8a9a97; text-align:center}
/* Dodo(달러 카드) — PayPal 위에(사이트 style.css 와 같게) */
.dd-btn{width:100%; padding:13px 14px; border:0; border-radius:10px; background:#1f2a37; color:#fff; font-family:inherit; line-height:1.3;
  font-weight:700; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px}
.dd-btn:hover:not(:disabled){background:#111a24}
.dd-btn:disabled{opacity:.6; cursor:default}
.dd-by{font-weight:500; font-size:11px; opacity:.7}
.dd-test{margin:8px 0 0; font-size:12px; color:#8a9a97; text-align:center}
.pay-or{height:1px; margin:12px 0; background:#eef1f3}
.cu-wrap{margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid #eef1f3}
.cu-btn{width:100%; padding:13px 14px; border:0; border-radius:10px; background:#00877d;
  color:#fff; font-weight:800; font-size:15px; cursor:pointer; font-family:inherit}
.cu-btn:hover:not(:disabled){background:#00756c}
.cu-btn:disabled{opacity:.6; cursor:default}
.cu-note{margin:7px 0 0; font-size:12px; color:#8a9a97; text-align:center}

/* ↓ 부스 톤으로 덮어쓰기: 결제창은 부스가 내주는 '영수증'처럼 */
.pp-ov { background: rgba(20, 20, 22, .45); }
.pp-card {
  background: #fff; color: var(--ink); border-radius: 4px 4px 14px 14px; padding: 30px 22px 20px;
  box-shadow: 0 24px 60px rgba(20, 20, 22, .25);
  -webkit-mask: radial-gradient(circle 6px at 8px 0, transparent 98%, #000) -8px 0 / 16px 100% repeat-x;
          mask: radial-gradient(circle 6px at 8px 0, transparent 98%, #000) -8px 0 / 16px 100% repeat-x;
  font-family: var(--f-sans);
}
.pp-t { color: var(--ink); font-size: 19px; }
.pp-p { color: var(--ink-2); padding-bottom: 12px; border-bottom: 1px dashed var(--line-strong); }
.pp-x { top: 6px; inset-inline-end: 6px; font-size: 20px; min-width: 56px; min-height: 56px; color: var(--muted); }
.kp-btn, .cu-btn { min-height: 56px; border-radius: 999px; }
.cu-btn { background: var(--primary); }
.cu-btn:hover:not(:disabled) { background: var(--primary-hover); }
.tp-btn { min-height: 56px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); }
.tp-btn:hover:not(:disabled) { background: var(--primary-hover); }
.dd-btn { min-height: 56px; border-radius: 999px; }
.pay-tab { min-height: 56px; border-radius: 999px; border-color: var(--line-strong); color: var(--ink-2); }
.pay-tab:hover { border-color: var(--primary); }
.pay-tab.on { border-color: var(--primary); background: var(--accent-soft, #f2f2f4); color: var(--ink); box-shadow: inset 0 0 0 1px var(--primary); }
.pay-or { background: none; border-top: 1px dashed var(--line-strong); }
.cu-wrap { border-bottom: 1px dashed var(--line-strong); }
.pp-msg { color: var(--ink-2); }
.pp-card :focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; box-shadow: none; }

/* ---------- 함께 찍기(assets/booth-together.js) ---------- */
/* ② 화면의 "친구와 함께 찍기": ① 에서 [친구와 같이]를 고르면 두 시작 버튼 자리에 이것 하나(주 행동, 같은 모양·크기) */
.bt-together .bt-ico .bt-ico { width: 100%; height: 100%; }
/* 초대 시트: 화면 위에 뜨는 판 */
.bt-sheet { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--ink) 40%, transparent); animation: btIn .2s var(--ease); }
.bt-sheet-box { position: relative; display: flex; flex-direction: column; gap: var(--gap);
  width: min(600px, 100%); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain;
  background: var(--surface); border-radius: var(--radius); padding: calc(var(--pad) * 1.2) var(--pad) var(--pad);
  box-shadow: 0 24px 60px rgba(20, 20, 22, .18); }
.bt-sheet-box .bt-h { padding: 0 44px; }
.bt-sheet-x { position: absolute; top: 12px; inset-inline-end: 12px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; border: 0; background: var(--surface-2); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; }
.bt-sheet-x:hover { background: var(--line); }
#btTgStep1, #btTgStep2 { display: flex; flex-direction: column; gap: var(--gap); }
#btTgStep1[hidden], #btTgStep2[hidden] { display: none; }
.bt-tg-friends > button { padding: 0 1.4em; min-width: 5em; justify-content: center; }
.bt-tg-pays { grid-template-columns: 1fr 1fr; }
.bt-tg-pays > button { padding: .8em 2.4em .8em 1em; gap: .3em; }
.bt-tg-price { font-size: .88em; font-weight: 500; color: var(--muted); line-height: 1.35; }
.bt-sheet .bt-actions { display: flex; flex-wrap: wrap; gap: calc(var(--gap) * .7); justify-content: center; }
.bt-sheet .bt-actions--stack { flex-direction: column; align-items: stretch; }
.bt-tg-invite { display: grid; grid-template-columns: 168px 1fr; gap: calc(var(--gap) * 1.4); align-items: center; }
.bt-tg-invite .bt-sub { text-align: start; }
.bt-tg-qr { width: 168px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.bt-tg-qr svg { width: 100%; height: 100%; display: block; }
.bt-tg-url { width: 100%; font-size: 14px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); margin: 8px 0; text-overflow: ellipsis; }
.bt-tg-row { justify-content: flex-start !important; }
.bt-tg-row > .bt-btn { flex: 1 1 auto; min-height: calc(var(--tap) * .85); font-size: var(--fs-s); }
/* 자리: 사람마다 동그라미 하나. 빈 자리 = 점선, 들어옴 = 실선, 찍음 = 먹색, 결제 = 포인트 색 */
.bt-tg-seats { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--gap) * 1.2); }
.bt-tg-seats li { display: grid; justify-items: center; gap: 6px; min-width: 64px; font-size: 13px; color: var(--muted); text-align: center; }
.bt-tg-seats .av { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  border: 2px dashed var(--line-strong); color: var(--muted); font-weight: 700; }
.bt-tg-seats li.in, .bt-tg-seats li.shot, .bt-tg-seats li.paid { color: var(--ink); }
.bt-tg-seats li.in .av { border-style: solid; border-color: var(--primary); color: var(--primary); }
.bt-tg-seats li.shot .av { background: var(--primary); color: var(--surface); border: 2px solid var(--primary); }
.bt-tg-seats li.paid .av { background: var(--accent); color: var(--accent-ink); border: 2px solid var(--accent); }
/* 기다림·게스트 입장 화면 */
.bt-tgwait, .bt-tgjoin { justify-content: center; align-items: center; text-align: center; }
/* 기다림 화면도 안내·단추가 많으면(낮은 화면·긴 언어) 위가 잘리지 않게 넘치면 스크롤 */
.bt-tgwait { justify-content: safe center; overflow-y: auto; overscroll-behavior: contain; }
.bt-tgwait > * { flex-shrink: 0; }
.bt-tgwait .bt-actions, .bt-tgjoin .bt-actions { width: min(100%, 520px); }
.bt-tgwait .bt-actions--stack, .bt-tgjoin .bt-actions--stack { display: flex; flex-direction: column; gap: calc(var(--gap) * .7); }
.bt-tgwait .bt-tg-seats { margin: var(--gap) 0; }
.bt-tgwait .bt-tg-seats .av { width: 64px; height: 64px; font-size: 1.1em; }
.bt-tg-preview { width: min(220px, 50vw); height: auto; display: block; margin: 8px auto; }
@media (max-width: 520px) {
  .bt-tg-invite { grid-template-columns: 1fr; justify-items: center; }
  .bt-tg-invite .bt-sub { text-align: center; }
  .bt-tg-pays { grid-template-columns: 1fr; }
  .bt-tg-seats .av { width: 44px; height: 44px; }
}
@media (max-width: 520px) { .bt-tg-invite > div:last-child { width: 100%; } }
.bt-sheet .bt-ghost[aria-disabled="true"] { color: var(--muted); border-color: var(--line); }
/* 함께 찍기 호스트: 올리기 모드는 숨기고, 방을 만든 뒤엔 프레임·배경·스타일을 바꿀 수 없다.
 * 게스트는 숨기지 않는다 — 인앱 브라우저에서 카메라가 막히면 사진 올리기로 가야 한다 */
body[data-tg="host"] #btStartUp, body[data-tg="host"] #btCamToUp { display: none; }
body[data-tg="host"] #btFrames, body[data-tg="host"] #btLayouts, body[data-tg="host"] #btBgs, body[data-tg="host"] #btStyles { opacity: .55; }
body[data-tg="host"] #btFrames > button, body[data-tg="host"] #btLayouts > button,
body[data-tg="host"] #btBgs .bt-bg, body[data-tg="host"] #btStyles > button { cursor: not-allowed; }
/* 잠긴 까닭 + 방 나가기(제목 바로 아래 한 줄). 방 밖이면 없다 */
.bt-tg-lock { display: none; flex: none; align-self: center; max-width: 100%; margin: calc(var(--gap) * -.5) 0 0;
  padding: .45em 1em; border-radius: 999px; background: var(--surface-2); color: var(--ink-2);
  font-size: var(--fs-s); line-height: 1.4; text-align: center; text-wrap: balance; }
body[data-tg="host"] .bt-tg-lock { display: block; }
.bt-tg-lock-go { display: inline-flex; align-items: center; min-height: 32px; padding: 0 .2em; border: 0; background: none;
  font: inherit; font-weight: 800; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bt-leave .bt-sheet-box { width: min(440px, 100%); }
.bt-leave .bt-sub { text-wrap: pretty; }
/* 함께 찍기 게스트: 결제·다시 보정·새로 찍기·단계 표시는 없다(호스트가 낸 결과를 받는다) */
body[data-guest] #btPay, body[data-guest] #btReshoot, body[data-guest] #btAgain,
body[data-guest] #btCuts button, body[data-guest] .bt-steps, body[data-guest] #btStartUp { display: none; }
.bt-tgjoin a.bt-btn { text-decoration: none; }
.bt-tgwait > .bt-note, .bt-tgjoin > .bt-note { width: min(100%, 520px); text-wrap: pretty; }
/* 입장 화면은 미리보기가 길다: 작은 폰에서 위가 머리줄 밑으로 잘리지 않게 넘치면 아래로 스크롤 */
.bt-tgjoin { justify-content: safe center; overflow-y: auto; }
.bt-tgjoin .bt-tg-preview { width: auto; max-width: min(220px, 50vw); max-height: 44dvh; }

/* ---------- 함께 찍기: 합성 예시·호스트 미리보기·기다림 ---------- */
/* 합성 예시: [1명][2명][3명][4명] 탭 → 따로 찍은 사진 n장 → 합성 결과(크게). 이미지 크기를 미리 잡아 늦게 와도 자리가 안 흔들린다.
   --th = 따로 찍은 사진 한 칸 높이, --oh = 합성 결과 높이(따로 찍은 사진 묶음보다 크게 — 보여 주려는 것이 이것) */
.bt-tgex { --th: 60px; --oh: 172px; position: relative; display: grid; justify-items: center; gap: calc(var(--gap) * .45); }
.bt-tgex[hidden] { display: none; }
.bt-tgex .bt-tgex-t { margin: 0; text-align: center; text-wrap: balance; }
.bt-tgex-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; }
.bt-tgex-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; padding: 3px; border-radius: 22px; background: var(--surface-2); border: 1px solid var(--line); }
.bt-tgex-tabs > button { min-height: 36px; min-width: 3em; padding: 0 .8em; white-space: nowrap;   /* "4 personnes" 를 낱말 중간에서 끊지 않는다. 안 들어가면 탭이 두 줄로 */ border: 0; border-radius: 999px; background: transparent;
  color: var(--ink-2); font-weight: 700; font-size: calc(var(--fs-s) * .92); cursor: pointer; }
.bt-tgex-tabs > button:hover { background: var(--surface); }
.bt-tgex-tabs > [aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); }
/* 처음 보는 사람에게: 탭이 눌린다는 것을 말풍선과 은은한 맥박으로 알린다(한 번 누르면 사라지고 다시 안 뜬다) */
.bt-tgex-hint { position: relative; display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 4px 10px 4px 7px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font-size: calc(var(--fs-s) * .82); font-weight: 800; line-height: 1.25; white-space: nowrap; }
.bt-tgex-hint[hidden] { display: none; }
.bt-tgex-hint::before { content: ""; position: absolute; inset-inline-start: -5px; top: 50%; width: 8px; height: 8px; margin-top: -4px; transform: rotate(45deg);
  background: inherit; border-left: inherit; border-bottom: inherit; }
.bt-tgex-hint .bt-ico { width: 17px; height: 17px; flex: none; }
.bt-tgex.is-hinting .bt-tgex-tabs { animation: btExPulse 1.8s ease-out infinite; }
@keyframes btExPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 38%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); }
}
.bt-tgex-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.bt-tgex-col { display: grid; justify-items: center; gap: 3px; }
.bt-tgex-l { font-size: calc(var(--fs-s) * .78); font-weight: 700; color: var(--muted); line-height: 1.2; white-space: nowrap; }
.bt-tgex-l--out { color: var(--accent); font-weight: 800; }
.bt-tgex-src { display: grid; grid-template-columns: repeat(2, calc(var(--th) * .746)); grid-auto-rows: var(--th); gap: 4px;
  width: calc(var(--th) * 1.492 + 4px); justify-content: center; }
.bt-tgex-src img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; background: var(--surface-2); }
.bt-tgex-src[data-n="1"] { grid-template-columns: auto; grid-auto-rows: calc(var(--th) * 2 + 4px); }
.bt-tgex-src[data-n="1"] img { width: auto; aspect-ratio: 358 / 480; }
.bt-tgex-arrow { display: grid; place-items: center; color: var(--accent); }
.bt-tgex-arrow .bt-ico { width: 24px; height: 24px; stroke-width: 2.4; transform: rotate(180deg); }
.bt-tgex-out { display: block; height: var(--oh); width: auto; aspect-ratio: 672 / 900; border-radius: 10px;
  object-fit: cover; background: var(--surface-2);
  box-shadow: 0 6px 18px rgba(20, 20, 22, .16), 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
/* 자동 시연: 따로 찍은 사진이 합성 결과로 날아 들어간다(booth-together.js exAnimate) */
.bt-tgex-fly { position: absolute; z-index: 2; margin: 0; object-fit: cover; border-radius: 6px; pointer-events: none; will-change: transform, opacity; }
.bt-tgex-cap { margin: 0; font-size: calc(var(--fs-s) * .85); color: var(--muted); text-align: center; }
.bt-tgex-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .bt-tgex.is-hinting .bt-tgex-tabs { animation: none; } }
.bt-sheet .bt-tgex { --th: 58px; --oh: 168px; padding: calc(var(--gap) * .5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* 호스트 미리보기: 친구 촬영 현황과 환불 안내(결제 버튼 바로 위) */
.bt-tg-prebox { display: grid; gap: .2em; padding: .7em 1em; border-radius: calc(var(--radius) * .7); font-size: var(--fs-s); line-height: 1.45;
  background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--ink); text-align: center; }
.bt-tg-prebox[hidden] { display: none; }
.bt-tg-prebox p { margin: 0; }
.bt-tg-prebox-t { font-weight: 800; font-variant-numeric: tabular-nums; }
/* 미리보기 현황 상자 안의 작은 "초대 링크 다시 보내기": 글자 링크처럼, 누르는 자리는 44px */
.bt-tg-prebox-link { justify-self: center; min-height: 44px; margin: .1em 0 -.4em; padding: 0 .4em; border: 0; border-radius: 8px; background: none;
  color: var(--accent); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bt-tg-prebox-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.bt-tg-prebox-link[hidden] { display: none; }
@media (min-width: 600px) {
  .bt-tg-prebox { text-align: start; }
  .bt-tg-prebox-link { justify-self: start; margin-inline-start: -.4em; }
  /* 넓은 화면 오른쪽 열: 왼쪽 정렬, 따로 찍은 사진은 작게·합성 결과는 크게(결제 버튼이 한 화면에 들어오게) */
  .bt-out-side .bt-tgex { --th: 44px; --oh: 132px; justify-items: start; gap: 5px; }
  .bt-out-side .bt-tgex-t { text-align: start; }
  .bt-out-side .bt-tgex-bar { justify-content: flex-start; }
  .bt-out-side .bt-tgex-tabs > button { min-height: 30px; }
  .bt-out-side .bt-tgex-cap { text-align: start; }
  body[data-tg="host"] #scPreview .bt-out-side { gap: calc(var(--gap) * .6); justify-content: safe center; }
  body[data-tg="host"] #scPreview .bt-out-side .bt-btn { min-height: calc(var(--tap) * .8); }
}
/* 호스트 미리보기는 안내가 길다: 넘치면 오른쪽 열(넓은 화면)이나 화면 전체(폰)가 스크롤된다 */
body[data-tg="host"] #scPreview .bt-out-side { overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 599px) {
  body[data-tg="host"] #scPreview .bt-print { flex: none; height: clamp(460px, 50dvh, 600px); }
  /* 폰: 예시는 결제 버튼 아래로(첫 화면에 결제까지 보이게) */
  body[data-tg="host"] #btTgExPre { order: 10; padding-top: calc(var(--gap) * .5); border-top: 1px solid var(--line); }
  body[data-tg="host"] #scPreview .bt-out-side { overflow: visible; }
}
.bt-tgwait .bt-sub { width: min(100%, 520px); }

/* ---------- 함께 찍기: 공유 화면(공유 창이 없는 앱 안 브라우저) ---------- */
/* 초대 시트(z 60) 위에 뜬다. 360px 폭에서 3칸, 넓으면 더 */
.bt-sp { z-index: 61; }
.bt-sp .bt-sheet-box { width: min(480px, 100%); }
.bt-sp .bt-tg-url { margin: 0; }
.bt-sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px 8px; }
.bt-sp-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 80px; padding: 10px 4px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.25;
  text-align: center; text-decoration: none; overflow-wrap: anywhere; cursor: pointer; }
.bt-sp-btn:hover, .bt-sp-btn[aria-expanded="true"] { border-color: var(--primary); }
.bt-sp-btn:active { transform: scale(.97); }
.bt-sp-ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); flex: none; }
.bt-sp-ico svg { width: 22px; height: 22px; display: block; }
.bt-sp-btn[data-sp="line"] .bt-sp-ico svg, .bt-sp-btn[data-sp="facebook"] .bt-sp-ico svg, .bt-sp-btn[data-sp="x"] .bt-sp-ico svg,
.bt-sp-btn[data-sp="whatsapp"] .bt-sp-ico svg, .bt-sp-btn[data-sp="telegram"] .bt-sp-ico svg { width: 36px; height: 36px; }
.bt-sp-qr { width: min(100%, 320px); aspect-ratio: 1; margin: 0 auto; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; flex: none; }
.bt-sp-qr[hidden] { display: none; }
.bt-sp-qr svg { width: 100%; height: 100%; display: block; }
.bt-sp .bt-note { text-wrap: pretty; }
/* 제목 칸이 닫기(×, 위 12px + 44px) 아래까지 내려오게 — 주소 칸이 × 와 겹치지 않는다 */
.bt-sp #btTgSpT { min-height: calc(56px - var(--pad) * 1.2); display: flex; align-items: center; justify-content: center; }

/* ---------- 우스꽝 거울 효과 칩: 라이브 화면 바로 아래 한 줄(넘치면 옆으로 밀어 본다) ----------
   body[data-fx] 는 칩이 보일 때만 booth.js renderFx 가 단다 → 그때만 촬영 격자에 줄을 하나 더 둔다 */
.bt-fx { grid-area: fx; min-width: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--gap) * .6); }
.bt-fx[hidden] { display: none; }
.bt-fx-l { flex: none; font-size: var(--fs-s); font-weight: 700; color: var(--muted); white-space: nowrap; }
.bt-fx-chips { display: flex; gap: 6px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 3px; }
.bt-fx-chips::-webkit-scrollbar { display: none; }
.bt-fx-chips > button {
  flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: calc(var(--tap) * .82); padding: .2em 1em; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 var(--fs-s)/1.15 var(--f-sans);
  transition: border-color .15s, background-color .15s, color .15s;
}
.bt-fx-chips > button:hover { border-color: var(--line-strong); }
.bt-fx-chips > [aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.bt-fx-busy { font-size: .78em; font-weight: 600; opacity: .8; }
body[data-fx] .bt-shoot-body { grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "hud" "live" "fx" "side"; }
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  body[data-fx] .bt-shoot-body { grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "hud hud" "live side" "fx side"; }
}
@media (max-width: 599px) {
  body[data-fx] .bt-shoot-body { grid-template-rows: auto auto auto auto; }
  body[data-fx] .bt-live { width: min(100%, calc((100dvh - 410px) * var(--cell-ar) + 2 * var(--fr-pad))); }
  .bt-fx { justify-content: flex-start; }
  /* 옆으로 넘치는 칩 줄: 양 끝을 흐리게 해 더 있다는 걸 보인다 */
  .bt-fx-chips { padding-inline: 10px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); }
}

/* ---------- 라이브 화면 아래 줄 묶음(거울 효과 칩 + 소품 줄) ----------
   묶음이 촬영 격자의 fx 칸을 차지한다. 둘 다 숨으면 묶음도 숨긴다(booth.js renderFx) */
.bt-fxbar { grid-area: fx; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bt-fxbar[hidden] { display: none; }
/* 소품 줄: [소품] [눈|머리|목] | [없음] [그림]… — 그림 줄은 넘치면 옆으로 밀어 본다 */
.bt-props { min-width: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--gap) * .6); }
.bt-props[hidden] { display: none; }
.bt-props-tabs { flex: none; display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.bt-props-tabs > button {
  position: relative; min-height: calc(var(--tap) * .7); padding: 0 .85em; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--muted); font: 600 var(--fs-s)/1.1 var(--f-sans); white-space: nowrap;
}
.bt-props-tabs > [aria-pressed="true"] { background: var(--surface-2); color: var(--ink); font-weight: 800; }
/* 그 부위에 고른 소품이 있다 */
.bt-props-tabs > .is-on::after { content: ''; position: absolute; top: 5px; inset-inline-end: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.bt-props-busy { flex: none; color: var(--muted); white-space: nowrap; }
.bt-props-busy[hidden] { display: none; }
.bt-props-chips { display: flex; gap: 6px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 3px; }
.bt-props-chips::-webkit-scrollbar { display: none; }
.bt-props-chips > button {
  flex: none; display: grid; place-items: center; width: calc(var(--tap) * .82); height: calc(var(--tap) * .82); padding: 4px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.bt-props-chips > button:hover { border-color: var(--line-strong); }
.bt-props-chips > button img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.bt-props-chips > .bt-props-none { width: auto; padding: 0 .9em; border-radius: 999px; font: 600 var(--fs-s)/1.1 var(--f-sans); white-space: nowrap; }
.bt-props-chips > [aria-pressed="true"] { border-color: var(--primary); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--primary); }
.bt-props-chips > .bt-props-none[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); }
@media (max-width: 599px) {
  /* 효과 줄 + 소품 줄 두 줄이면 라이브 화면을 그만큼 줄인다 */
  body[data-props] .bt-live { width: min(100%, calc((100dvh - 520px) * var(--cell-ar) + 2 * var(--fr-pad))); }
  /* 폰: [소품][부위 탭] 한 줄, 그림은 그 아래 한 줄(긴 언어에서도 그림이 두세 개만 보이지 않게) */
  .bt-props { justify-content: flex-start; flex-wrap: wrap; row-gap: 2px; }
  .bt-props-chips.is-fixed { flex: 0 1 auto; -webkit-mask-image: none; mask-image: none; }
  .bt-props-chips { flex: 1 1 100%; padding-inline: 10px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); }
}

/* 함께 찍기 방 소품: 촬영 화면은 표시만(그림), 초대 시트는 부위 탭 + 그림(줄을 바꿔 다 보인다) */
.bt-props-tabs[hidden] { display: none; }
.bt-props-chips > .bt-props-fixed { flex: none; display: grid; place-items: center; width: calc(var(--tap) * .82); height: calc(var(--tap) * .82); padding: 4px;
  border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--primary); }
.bt-props-chips > .bt-props-fixed img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bt-tg-props { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: calc(var(--gap) * .6); }
.bt-props-chips.bt-tg-propchips { flex-wrap: wrap; justify-content: center; overflow: visible; padding-inline: 3px; -webkit-mask-image: none; mask-image: none; }

/* 함께 찍기: 촬영 화면에는 방 효과 하나를 표시만(고르기 없음), 초대 시트에는 방 효과 고르기 줄 */
.bt-fx-chips > .bt-fx-fixed { flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: calc(var(--tap) * .82); padding: .2em 1em; border-radius: 999px; white-space: nowrap;
  background: var(--primary); color: var(--primary-ink); font: 600 var(--fs-s)/1.15 var(--f-sans); }
/* 시트는 세로로 스크롤되니 칩은 줄을 바꿔 다 보인다(옆으로 숨기지 않는다) */
.bt-fx-chips.bt-tg-fx { flex-wrap: wrap; justify-content: center; overflow: visible; margin-bottom: calc(var(--gap) * .6);
  padding-inline: 3px; -webkit-mask-image: none; mask-image: none; }

/* ---------- 소품·효과 바꾸기: 인화지 아래 단추 + 시트(초대 시트 모양) ----------
   단추가 보이면(.has-edit) 인화지 최대 높이에서 단추 높이만큼 뺀다(잘리지 않게) */
.bt-print { --edit-h: 0px; }
.bt-print.has-edit { --edit-h: calc(var(--tap) * .74 - 14px); }
.bt-print.has-edit .bt-canvas { max-height: calc(100cqh - clamp(10px, 1.6vmin, 20px) - 28px - var(--edit-h)); }
@media (min-width: 600px) {
  .bt-print.has-edit { flex-basis: calc((100cqh - clamp(10px, 1.6vmin, 20px) - 28px - var(--edit-h)) * var(--paper-ar) + 48px); }
}
.bt-edit-go { flex: none; position: relative; z-index: 1; margin-top: -14px; min-height: calc(var(--tap) * .74); max-width: 100%;
  padding: 0 1.1em; font-size: var(--fs-s); background: var(--surface); }
.bt-edit-go[hidden] { display: none; }
.bt-ed .bt-sheet-box { width: min(780px, 100%); }
.bt-ed [hidden] { display: none !important; }
.bt-ed-body { display: flex; flex-direction: column; align-items: center; gap: var(--gap); min-width: 0; }
.bt-ed-view { flex: none; display: flex; justify-content: center; max-width: 100%; }
.bt-ed-canvas { display: block; height: min(34dvh, 300px); width: auto; max-width: 100%;
  box-shadow: 0 6px 16px rgba(20, 20, 22, .14), 0 0 0 1px rgba(20, 20, 22, .06); }
.bt-ed-canvas:not([width]) { aspect-ratio: 1 / 3; background: var(--surface-2); }
body[data-layout="grid"] .bt-ed-canvas:not([width]) { aspect-ratio: 2 / 3; }
.bt-ed-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; min-width: 0; }
.bt-ed-pick .bt-label { margin-bottom: 2px; text-align: center; }
.bt-ed-cuts { margin-bottom: calc(var(--gap) * .6); max-width: 100%; }
.bt-ed-cuts > button { min-width: 2.6em; }
.bt-ed-note { margin: 2px 0 0; color: var(--muted); font-size: calc(var(--fs-s) * .92); line-height: 1.45; text-align: center; text-wrap: pretty; }
/* [취소][적용]은 시트가 스크롤돼도 아래에 붙어 있다 */
.bt-ed .bt-ed-acts { position: sticky; bottom: calc(var(--pad) * -1); z-index: 2; margin: 0 calc(var(--pad) * -1) calc(var(--pad) * -1);
  padding: 10px var(--pad) var(--pad); background: var(--surface); border-top: 1px solid var(--line); }
.bt-ed .bt-ed-acts > .bt-btn { flex: 1 1 0; min-width: 0; max-width: 240px; min-height: calc(var(--tap) * .82); }
@media (min-width: 700px) {
  .bt-ed-body { flex-direction: row; align-items: flex-start; justify-content: center; }
  .bt-ed-canvas { height: min(58dvh, 520px); }
  .bt-ed-pick { flex: 1 1 0; }
}
/* 폰: 화면 아래에서 올라오는 시트 */
@media (max-width: 599px) {
  .bt-ed { place-items: end center; padding: 8px 0 0; }
  .bt-ed .bt-sheet-box { max-height: calc(100dvh - 8px); border-radius: var(--radius) var(--radius) 0 0; }
  .bt-ed .bt-ed-acts { padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px)); }
}
/* ---------- 내 앨범에 저장 · 30일 보관(assets/booth-album.js) ----------
   완성 화면 단추 묶음 아래 한 줄. 상태 글(저장됨·이미 저장·만료·오류)은 단추 아래 작은 글 + [내 앨범 보기] */
.kba { display: flex; flex-direction: column; gap: calc(var(--gap) * .5); }
.kba-btn { width: 100%; padding-left: .9em; padding-right: .9em; }
.kba-btn:disabled { color: var(--muted); border-color: var(--line); }
.kba-btn:disabled:hover { border-color: var(--line); }
.kba-msg { margin: 0; text-align: center; color: var(--ink-2); font-size: calc(var(--fs-s) * .92); line-height: 1.45; text-wrap: pretty; }
.kba-msg[data-st="saved"], .kba-msg[data-st="already"] { color: var(--ok); font-weight: 700; }
.kba-msg[data-st="error"], .kba-msg[data-st="expired"] { color: var(--warn-ink); font-weight: 700; }
.kba-go { display: inline-flex; align-items: center; min-height: 32px; padding: 0 .2em; white-space: nowrap;
  color: var(--accent); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 600px) { .bt-out-side .kba-msg { text-align: start; } }
/* 이메일 시트: 고객 문의 단추(z 900) 위에. 폰에서는 아래에서 올라온다 */
.kba-sheet { z-index: 1000; }
.kba-sheet-box { width: min(460px, 100%); padding-top: 12px; }
/* 제목 줄 = 닫기 단추 줄(44px): 설명 글이 단추 밑으로 들어가지 않게 */
.kba-sheet-box > .bt-h { min-height: 44px; display: grid; place-items: center; }
.kba-ask, .kba-sent { display: flex; flex-direction: column; gap: calc(var(--gap) * .8); }
.kba-ask[hidden], .kba-sent[hidden] { display: none; }
.kba-d { margin: 0; color: var(--ink-2); text-align: center; font-size: var(--fs-s); line-height: 1.55; text-wrap: pretty; word-break: keep-all; overflow-wrap: anywhere; }
.kba-form { display: flex; flex-direction: column; gap: calc(var(--gap) * .6); margin: 0; }
.kba-label { font-weight: 700; font-size: var(--fs-s); color: var(--ink); }
/* 글자 16px 이상: iOS 가 입력할 때 화면을 확대하지 않게 */
.kba-input { width: 100%; min-height: 52px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font: inherit; font-size: max(16px, var(--fs-s)); }
.kba-input::placeholder { color: var(--muted); }
.kba-input:focus-visible { outline: 3px solid var(--primary); outline-offset: 1px; box-shadow: none; }
.kba-input[aria-invalid="true"] { border-color: var(--warn-ink); }
.kba-err { margin: 0; color: var(--warn-ink); font-size: var(--fs-s); font-weight: 700; line-height: 1.45; }
.kba-send { width: 100%; }
.kba-fine { margin: 0; color: var(--muted); font-size: calc(var(--fs-s) * .9); text-align: center; line-height: 1.45; text-wrap: pretty; }
.kba-sent-t { margin: 0; text-align: center; font-weight: 800; font-size: calc(var(--fs-h) * .6); line-height: 1.3; }
.kba-to { margin: 0; text-align: center; font-weight: 700; overflow-wrap: anywhere; }
.kba-to:empty { display: none; }
@media (max-width: 599px) {
  .kba-sheet { place-items: end center; padding: 8px 0 0; }
  .kba-sheet .kba-sheet-box { max-height: calc(100dvh - 8px); border-radius: var(--radius) var(--radius) 0 0;
    padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px)); }
}
/* 내 앨범 바로가기(첫 화면 머리줄, 소리·언어 단추 왼쪽). 로그인된 기기에서만 booth.js 가 연다 */
.bt-myalb { display: inline-flex; align-items: center; gap: .4em; height: var(--tap); padding: 0 1em; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; font-size: var(--fs-s);
  text-decoration: none; white-space: nowrap; transition: border-color .15s; }
.bt-myalb:hover { border-color: var(--primary); color: var(--primary); }
.bt-myalb .bt-ico { width: 1.25em; height: 1.25em; flex: none; color: var(--primary); }
.bt-myalb[hidden], body:not([data-sc="scAttract"]) .bt-myalb { display: none; }
/* 좁은 폰: 아이콘만(이름은 화면 읽기용으로 남긴다) — 왼쪽 「← 포토몬」·소리·언어 단추와 한 줄에 들어가게 */
@media (max-width: 599px) {
  .bt-myalb { width: var(--tap); padding: 0; justify-content: center; }
  .bt-myalb span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* 소개 맨 아래 「내 앨범 보기」 */
.bt-intro-album { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

/* ---- 오른쪽→왼쪽(ar·he): 여백·위치는 논리 속성으로 저절로 뒤집힌다. 여기는 그것만으로 안 되는 것만 ----
   사진 편집 캔버스·네컷 미리보기·낱장 줄은 booth.html 에서 dir="ltr" 로 고정(1→4 컷 순서, 캔버스 글자) */
/* 머리줄: 로고(여우 + K-BOOTH)는 그림처럼 왼→오 */
[dir="rtl"] .bt-top .bt-brand { direction: ltr; }
/* 단계 표시: 동그라미 번호는 왼→오 섬(연결선은 margin-inline-end 로 뒤집힌다) */
[dir="rtl"] .bt-steps i { unicode-bidi: isolate; }
/* 버튼 줄·시작 버튼의 화살표 아이콘은 읽는 방향으로(번역문 속 ←/→ 글자는 번역이 이미 맞췄다 — 겹쳐 뒤집지 않는다) */
[dir="rtl"] .bt-cta-go svg, [dir="rtl"] .bt-mate-entry-go { transform: scaleX(-1); }
/* 폰 ② 이전 단추의 ‹ 꺾쇠(배경 그림)도 → 쪽으로 */
[dir="rtl"] .bt-actions--start .bt-back::before { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) { [dir="rtl"] .bt-cta-go:hover svg { transform: scaleX(-1) translateX(3px); } }
/* 소개 그림(전후 사진·QR 폰·프레임 부채꼴)은 그림이라 왼→오 그대로 */
[dir="rtl"] .bt-viz { direction: ltr; }
/* 말풍선 꼬리: 왼쪽 → 오른쪽을 가리키게 */
[dir="rtl"] .bt-tgex-hint::before { transform: rotate(-135deg); }
/* 결제 창: 주문번호·금액은 왼→오 섬 */
[dir="rtl"] .pp-oid { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .pp-tabs .pay-tab bdi, [dir="rtl"] .pp-p bdi, [dir="rtl"] #btOrder bdi { unicode-bidi: isolate; }
/* 앨범 이메일 칸: 주소는 왼→오, 비어 있을 때 안내 글만 오른쪽→왼쪽 */
[dir="rtl"] .kba-input[type="email"]:placeholder-shown { direction: rtl; }