@font-face {
  font-family: "Badge Flow Sans";
  src: url("assets/fonts/NanumSquareR.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 699;
  font-display: swap;
}

@font-face {
  font-family: "Badge Flow Sans";
  src: url("assets/fonts/NanumSquareB.ttf") format("truetype");
  font-style: normal;
  font-weight: 700 950;
  font-display: swap;
}

.badge-mobile-flow-active {
  overflow: hidden;
  background: #061a3b;
}

.badge-mobile-flow-active .relock-dialog {
  display: none;
}

.badge-mobile-flow-active .entry-gate:not([hidden]) {
  display: grid;
}

.badge-mobile-flow {
  --badge-sky: #92ccff;
  --badge-panel: #eef7ff;
  --badge-ink: #021c51;
  --badge-blue: #0c46b5;
  --badge-cyan: #61cbe7;
  /* --badge-chrome은 머리말·안내·푸터가 반드시 차지하는 최소 높이다(아래 프레임
     규칙에서 씀). 타이틀 아트워크는 웹폰트 조판보다 70px쯤 높으므로, 아트워크를
     쓰는 행사에서는 그만큼 더 잡아야 프레임이 화면 밖으로 밀리지 않는다. */
  --badge-title-extra: 0px;
  --badge-chrome-base: 252px;
  --badge-chrome: calc(var(--badge-chrome-base) + var(--badge-title-extra));
  position: relative;
  width: min(100vw, 430px);
  height: 100svh;
  min-height: 640px;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  /* 디자인 원본의 세로 그러데이션을 그대로 옮겼다. 원본은 높이의 82%까지
     하늘색 한 색으로 가다가 98%에서 흰색이 된다. */
  background: linear-gradient(180deg, var(--badge-sky) 0 82%, #d4ebff 90%, #fff 98%);
  color: var(--badge-ink);
  font-family: "Badge Flow Sans", "NanumSquare", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.badge-mobile-flow[hidden] {
  display: none;
}

.badge-mobile-flow::before,
.badge-mobile-flow::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
}

/* 눈 텍스처는 디자인 원본에서 밀도·크기·짙기를 재어 만든 타일이다
   (scripts/build-badge-title-artwork.cjs). CSS 그러데이션 점으로 흉내 냈을
   때는 원본보다 여섯 배 성겨서, 타이틀 그림이 끝나는 자리에 눈이 뚝 끊기는
   가로줄이 보였다. 타일 한 변은 원본 566px 중 160px에 해당하므로, 화면
   너비의 160/566 로 깔면 타이틀 그림 속 눈송이와 크기가 정확히 맞는다. */
.badge-mobile-flow::before {
  background-image: url("assets/events/bridge-generations-snow.png");
  background-repeat: repeat;
  background-size: 28.269% auto;
  /* 배경이 흰색으로 바뀌는 아래쪽에서는 원본도 눈이 보이지 않는다. */
  mask-image: linear-gradient(180deg, #000 0 78%, transparent 92%);
}

.badge-mobile-flow::after {
  opacity: .18;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 25%, rgba(255, 255, 255, .48) 25.4% 25.7%, transparent 26.1%),
    radial-gradient(circle at 50% 48%, transparent 0 35%, rgba(2, 28, 81, .22) 35.3% 35.6%, transparent 36%);
}

/* 프레임은 어떤 상태에서도 2:3 세로다. 그래서 행 높이를 상태마다 바꾸지 않고
   한 가지 트랙으로 고정한다. 예전에는 idle이 가로 박스였다가 촬영에 들어가야
   세로가 되어, 화면이 눈앞에서 비율을 갈아 끼우는 것처럼 보였다. */
.badge-flow-layout {
  display: grid;
  height: 100%;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 7px;
  padding: max(12px, env(safe-area-inset-top)) 16px max(10px, env(safe-area-inset-bottom));
}

.badge-mobile-flow[data-title-art="on"] {
  --badge-title-extra: 70px;
}

.badge-mobile-flow[data-state="review"],
.badge-mobile-flow[data-state="result"] {
  /* 확인·결과 화면에는 버튼 줄이 하나 더 들어간다. */
  --badge-chrome-base: 305px;
}

.badge-mobile-flow[data-state="review"] .badge-flow-layout,
.badge-mobile-flow[data-state="result"] .badge-flow-layout {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.badge-flow-header {
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  text-align: center;
}

.badge-flow-header > p {
  margin: 0;
  color: var(--badge-blue);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -.035em;
}

.badge-flow-header > p .badge-flow-bubble {
  display: inline-grid;
  width: 22px;
  height: 18px;
  place-items: center;
  margin: 0 2px;
  border-radius: 9px 9px 9px 3px;
  background: var(--badge-ink);
  vertical-align: 2px;
}

/* 말풍선 안의 점 세 개는 글자가 아니라 CSS로 그린다. 브랜드 폰트 서브셋에
   U+2022가 없어 기기마다 대체 글꼴에 따라 보이거나 사라지기 때문이다. */
.badge-flow-header > p .badge-flow-bubble::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: -5px 0 0 #fff, 5px 0 0 #fff;
}

/* 세대공감 행사 타이틀은 디자인 원본을 그대로 잘라낸 그림이다. 원본 하늘색이
   --badge-sky와 같은 값이라, 좌우 여백까지 꽉 채워 깔면 이음매가 보이지 않는다.
   글자를 웹폰트로 다시 조판하면 원본 글자꼴이 아니게 되므로 그림을 쓴다. */
.badge-flow-title-art {
  display: block;
  width: calc(100% + 32px);
  height: auto;
  margin-inline: -16px;
}

.badge-flow-title-art[hidden] {
  display: none;
}

.badge-mobile-flow[data-title-art="on"] .badge-flow-header > p,
.badge-mobile-flow[data-title-art="on"] .badge-flow-header h1 {
  display: none;
}

.badge-flow-header h1 {
  max-width: 328px;
  margin: 9px 0 0;
  color: var(--badge-ink);
  font-size: clamp(30px, 8.6vw, 38px);
  font-weight: 950;
  line-height: .98;
  letter-spacing: -.07em;
  text-wrap: balance;
  word-break: keep-all;
}

/* 세로 폭이 남으면 가로를 꽉 채우고, 세로가 모자라면 남은 높이에 맞춰
   폭을 줄인다. 어느 쪽이든 2:3은 그대로라 촬영 프리뷰·AI 결과와 어긋나지
   않는다. --badge-chrome은 머리말·안내·푸터가 반드시 차지하는 최소 높이다. */
.badge-flow-frame {
  position: relative;
  width: min(100%, calc((max(640px, 100svh) - var(--badge-chrome)) * 2 / 3));
  aspect-ratio: 2 / 3;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .94);
  border-radius: 28px;
  background: rgba(238, 247, 255, .96);
  box-shadow: 0 18px 44px rgba(2, 28, 81, .14), inset 0 1px 0 #fff;
}

.badge-flow-frame::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .55), transparent 46%),
    radial-gradient(circle at 50% 100%, rgba(97, 203, 231, .18), transparent 44%);
  content: "";
}

.badge-flow-view {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
}

.badge-mobile-flow[data-state="idle"] .badge-flow-idle,
.badge-mobile-flow[data-state="camera"] .badge-flow-camera,
.badge-mobile-flow[data-state="review"] .badge-flow-review,
.badge-mobile-flow[data-state="sending"] .badge-flow-sending,
.badge-mobile-flow[data-state="generating"] .badge-flow-generating,
.badge-mobile-flow[data-state="result"] .badge-flow-result,
.badge-mobile-flow[data-state="error"] .badge-flow-error {
  display: grid;
}

.badge-flow-idle {
  place-items: center;
  padding: 26px;
}

.badge-flow-orbit {
  position: absolute;
  width: min(64vw, 216px);
  height: min(64vw, 216px);
  border: 2px dashed rgba(12, 70, 181, .26);
  border-radius: 50%;
}

.badge-flow-orbit::before,
.badge-flow-orbit::after {
  position: absolute;
  border-radius: 50%;
  background: var(--badge-blue);
  box-shadow: 0 0 0 8px rgba(12, 70, 181, .1);
  content: "";
}

.badge-flow-orbit::before { top: 14px; right: 22px; width: 9px; height: 9px; }
.badge-flow-orbit::after { bottom: 24px; left: 12px; width: 6px; height: 6px; }

.badge-flow-primary {
  position: relative;
  z-index: 3;
  display: inline-flex;
  width: min(100%, 286px);
  min-height: 68px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 14px 20px;
  background: var(--badge-ink);
  color: #fff;
  box-shadow: 0 14px 28px rgba(2, 28, 81, .22);
  font: 900 20px/1.25 "Badge Flow Sans", sans-serif;
  letter-spacing: -.035em;
  cursor: pointer;
}

.badge-flow-primary::after {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  margin-left: 10px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.badge-flow-primary:focus-visible,
.badge-flow-shutter:focus-visible,
.badge-flow-result-actions a:focus-visible,
.badge-flow-result-actions button:focus-visible,
.badge-flow-error button:focus-visible {
  outline: 4px solid #07162f;
  outline-offset: 4px;
  box-shadow: 0 0 0 8px #fff2bd;
}

.badge-flow-camera {
  place-items: center;
  overflow: hidden;
  background: #07162f;
}

/* 프레임 자체가 2:3이므로 미디어는 레터박스 없이 프레임을 그대로 채운다.
   예전에는 여기서 다시 2:3 박스를 만들어 좌우에 빈 칸이 생겼다. */
.badge-flow-camera-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #041634;
}

.badge-flow-camera-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.badge-flow-camera-media video {
  z-index: 2;
  object-position: center;
  opacity: 0;
  transform: scaleX(-1);
}

/* 가로 센서라도 잘라서 채운다. contain으로 두면 좌우가 비어 명찰이 헐거워
   보이고, 촬영 캔버스(2:3 cover)와 보이는 구도도 어긋난다. */
.badge-flow-camera-media[data-orientation="portrait"] video,
.badge-flow-camera-media[data-orientation="landscape"] video {
  object-fit: cover;
}
.badge-flow-camera[data-source="live"] .badge-flow-camera-media video { opacity: 1; }

.badge-flow-camera-standby {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 32px;
  color: rgba(255, 255, 255, .82);
  font-size: 16px;
  font-weight: 800;
  text-align: center;
}

.badge-flow-camera[data-source="live"] .badge-flow-camera-standby { display: none; }

.badge-flow-camera::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 28, 81, .56), transparent 36%, transparent 61%, rgba(2, 28, 81, .82));
  content: "";
}

.badge-flow-bust-guide {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, .92);
  filter: drop-shadow(0 3px 10px rgba(2, 28, 81, .48));
}

.badge-flow-bust-guide path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-dasharray: 8 7;
}

.badge-flow-bust-guide .corners {
  stroke-width: 5;
  stroke-dasharray: none;
  stroke-linecap: round;
}

.badge-flow-camera > p {
  position: absolute;
  z-index: 5;
  top: 13px;
  right: 14px;
  left: 14px;
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 2px 9px rgba(2, 28, 81, .9);
  word-break: keep-all;
}

.badge-flow-countdown {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: rgba(2, 28, 81, .7);
  color: #fff;
  font-size: 40px;
  font-weight: 950;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.badge-flow-camera.is-counting .badge-flow-countdown { opacity: 1; }

.badge-flow-shutter {
  position: absolute;
  z-index: 6;
  bottom: 12px;
  left: 50%;
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  border: 5px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
  box-shadow: 0 5px 18px rgba(2, 28, 81, .4);
  cursor: pointer;
  transform: translateX(-50%);
}

.badge-flow-shutter::after {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  content: "";
}

.badge-flow-shutter:disabled { opacity: .6; }

.badge-flow-sending,
.badge-flow-generating,
.badge-flow-error {
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  background: radial-gradient(circle at 50% 48%, rgba(146, 204, 255, .72), transparent 50%);
  text-align: center;
}

.badge-flow-sending strong,
.badge-flow-generating > strong,
.badge-flow-error > strong {
  font-size: 23px;
  font-weight: 950;
  letter-spacing: -.045em;
}

.badge-flow-sending > p,
.badge-flow-generating > p,
.badge-flow-error > p {
  max-width: 280px;
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  word-break: keep-all;
}

.badge-flow-transfer {
  display: flex;
  width: 120px;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.badge-flow-transfer span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--badge-blue);
  animation: badge-flow-transfer 1s ease-in-out infinite alternate;
}

.badge-flow-transfer span:nth-child(2) { animation-delay: .16s; }
.badge-flow-transfer span:nth-child(3) { animation-delay: .32s; }

.badge-flow-generator {
  position: relative;
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border: 7px solid rgba(12, 70, 181, .13);
  border-top-color: var(--badge-blue);
  border-right-color: var(--badge-cyan);
  border-radius: 50%;
  animation: badge-flow-spin 1.05s linear infinite;
}

.badge-flow-generator span {
  width: 24px;
  height: 24px;
  border-radius: 8px 8px 8px 2px;
  background: var(--badge-ink);
}

.badge-flow-progress {
  width: min(100%, 262px);
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(2, 28, 81, .13);
}

.badge-flow-progress > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--badge-blue), var(--badge-cyan));
  transition: width .3s ease;
}

/* 촬영본 확인 화면. 방금 찍은 사진이 명찰 자리를 그대로 채워, 완성본이 어떤
   구도로 앉을지 보내기 전에 알 수 있다. 촬영본은 이미 2:3이라 프레임에
   빈틈없이 들어맞는다. */
.badge-flow-review,
.badge-flow-result {
  background: #d9ebfa;
}

.badge-flow-review-image,
.badge-flow-result-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  background: #d9ebfa;
  object-fit: cover;
  object-position: 50% 15%;
}

.badge-flow-review-actions,
.badge-flow-result-actions {
  display: none;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.badge-mobile-flow[data-state="review"] .badge-flow-review-actions,
.badge-mobile-flow[data-state="result"] .badge-flow-result-actions {
  display: grid;
}

/* 보내기가 다음 걸음이라 눈에 먼저 들어와야 한다. 넓게 잡고 진한 색으로 둔다. */
.badge-flow-review-actions {
  grid-template-columns: 1.35fr 1fr;
}

.badge-flow-review-actions button,
.badge-flow-result-actions a,
.badge-flow-result-actions button,
.badge-flow-error button {
  display: inline-flex;
  min-width: 0;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 10px 13px;
  font: 900 14px/1.2 "Badge Flow Sans", sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.badge-flow-send,
.badge-flow-result-actions a {
  background: var(--badge-ink);
  color: #fff;
}

.badge-flow-send {
  min-height: 52px;
  font-size: 17px;
}

.badge-flow-review-actions button:not(.badge-flow-send),
.badge-flow-result-actions button,
.badge-flow-error button {
  border: 2px solid rgba(2, 28, 81, .16);
  background: #fff;
  color: var(--badge-ink);
}

.badge-flow-error-mark {
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #b32937;
  box-shadow: 0 10px 24px rgba(2, 28, 81, .13);
  font-size: 36px;
  font-weight: 950;
}

.badge-flow-status {
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  padding: 4px 8px;
  text-align: center;
}

.badge-flow-status p {
  display: none;
  max-width: 330px;
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.38;
  text-wrap: balance;
  word-break: keep-all;
}

.badge-flow-status p strong {
  display: block;
  margin-bottom: 3px;
  color: var(--badge-blue);
  font-size: 18px;
  font-weight: 950;
}

.badge-mobile-flow[data-state="idle"] [data-badge-copy="idle"],
.badge-mobile-flow[data-state="camera"] [data-badge-copy="camera"],
.badge-mobile-flow[data-state="review"] [data-badge-copy="review"],
.badge-mobile-flow[data-state="sending"] [data-badge-copy="sending"],
.badge-mobile-flow[data-state="generating"] [data-badge-copy="generating"],
.badge-mobile-flow[data-state="result"] [data-badge-copy="result"],
.badge-mobile-flow[data-state="error"] [data-badge-copy="error"] {
  display: block;
}

/* The committee signature is the official artwork from the k-cohesion.go.kr
   CI package, so it is placed as an image instead of being redrawn in CSS —
   the taegeuk and the 정음체 wordmark must not be approximated. */
.badge-flow-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
}

.badge-flow-footer-logo {
  width: auto;
  height: 32px;
  max-width: 52%;
  object-fit: contain;
}

/* 유니크굿 워드마크는 글자만 있는 로고라, 태극 심볼을 낀 위원회 마크와
   같은 높이로 두면 훨씬 커 보인다. 시각 무게를 맞춰 낮춘다. */
.badge-flow-footer-logo-partner {
  height: 18px;
}

.badge-flow-footer-divider {
  width: 1px;
  height: 22px;
  flex: 0 0 1px;
  background: rgba(2, 28, 81, .22);
}

/* 행사 진입 스플래시. 코드 입장 화면(가로 카드)과 달리 처음부터 세로 전체
   화면을 쓰고, 문구는 위아래로 넉넉히 벌린다. */
.badge-intro {
  position: fixed;
  /* 입장 게이트(.entry-gate, z-index 1000)까지 덮어야 진입 화면이 겹치지 않는다. */
  z-index: 1200;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100dvh;
  min-height: 100svh;
  grid-template-rows: 1fr auto;
  padding:
    max(32px, env(safe-area-inset-top))
    24px
    max(28px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #92ccff 0 58%, #d4ebff 82%, #fff 100%);
  color: #021c51;
  font-family: "Badge Flow Sans", "NanumSquare", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: center;
}

.badge-intro[hidden] {
  display: none;
}

.badge-intro-inner {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(22px, 6.4vh, 54px);
  min-height: 0;
}

.badge-intro-eyebrow {
  margin: 0;
  color: #0c46b5;
  font-size: clamp(16px, 4.6vw, 20px);
  font-weight: 900;
  letter-spacing: -.035em;
}

.badge-intro-bubble {
  display: inline-grid;
  width: 24px;
  height: 19px;
  place-items: center;
  margin: 0 3px;
  border-radius: 10px 10px 10px 3px;
  background: #021c51;
  vertical-align: 2px;
}

.badge-intro-bubble::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: -5px 0 0 #fff, 5px 0 0 #fff;
}

.badge-intro-title {
  max-width: 9em;
  margin: 0;
  font-family: "Badge Flow Sans", "NanumSquare", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(34px, 11vw, 52px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.06em;
  word-break: keep-all;
}

.badge-intro-lead {
  max-width: 17em;
  margin: 0;
  color: #12489f;
  font-size: clamp(14px, 4vw, 17px);
  font-weight: 800;
  line-height: 1.5;
  word-break: keep-all;
}

.badge-intro-footer {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.badge-intro-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  max-width: 84%;
}

.badge-intro-logo {
  width: auto;
  height: 22px;
  max-width: 62%;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(2, 28, 81, .22));
}

/* 태극 심볼을 낀 위원회 마크는 글자만 있는 유니크굿 워드마크보다 시각 무게가
   가벼워 보인다. 본 화면 푸터와 같은 비율(32 : 18)로 맞춘다. */
.badge-intro-logo-host {
  height: 39px;
  max-width: 52%;
}

.badge-intro-logo-divider {
  flex: none;
  width: 1px;
  height: 26px;
  background: rgba(12, 63, 122, .28);
}

@media (prefers-reduced-motion: no-preference) {
  .badge-intro-inner > * {
    animation: badge-intro-rise .62s cubic-bezier(.2, .7, .3, 1) both;
  }
  .badge-intro-title { animation-delay: .1s; }
  .badge-intro-lead { animation-delay: .2s; }
}

@keyframes badge-intro-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.badge-flow-live {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 카메라 권한이 거부됐을 때만 미리보기 위에 얹히는 탈출구. hidden 상태에서는
   자리도 차지하지 않으므로 정상 촬영 화면의 구도는 그대로다. */
.badge-flow-camera-escape {
  position: absolute;
  z-index: 5;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.badge-flow-camera-escape[hidden] {
  display: none;
}

.badge-flow-camera-escape button {
  display: inline-flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .94);
  color: var(--badge-ink);
  box-shadow: 0 10px 22px rgba(2, 28, 81, .28);
  font: 900 14px/1.2 "Badge Flow Sans", sans-serif;
  cursor: pointer;
}

/* 뒤로가기로 진행 중인 여정을 버리기 전에 묻는 대화상자. 명찰 레이어(최대 6)
   보다 위에 두고, 뒤 조작은 백드롭이 막는다. 화면 전체가 아니라 명찰 열
   안쪽만 덮어 다른 제품 화면이 비치지 않게 한다. */
.badge-flow-confirm {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  align-items: center;
  padding: 24px;
  background: rgba(2, 20, 58, .62);
  backdrop-filter: blur(6px);
}

.badge-flow-confirm[hidden] {
  display: none;
}

.badge-flow-confirm-card {
  border-radius: 26px;
  padding: 26px 22px 22px;
  background: var(--badge-panel);
  box-shadow: 0 26px 60px rgba(2, 28, 81, .38);
  text-align: center;
}

.badge-flow-confirm-card h2 {
  margin: 0;
  color: var(--badge-ink);
  font: 900 22px/1.3 "Badge Flow Sans", sans-serif;
  letter-spacing: -.035em;
}

.badge-flow-confirm-card h2:focus-visible {
  outline: none;
}

.badge-flow-confirm-card p {
  margin: 12px 0 22px;
  color: rgba(2, 28, 81, .78);
  font: 700 15px/1.5 "Badge Flow Sans", sans-serif;
  letter-spacing: -.02em;
}

.badge-flow-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 8px;
}

.badge-flow-confirm-actions button {
  display: inline-flex;
  min-width: 0;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 10px 13px;
  font: 900 15px/1.2 "Badge Flow Sans", sans-serif;
  letter-spacing: -.03em;
  cursor: pointer;
}

/* 계속하기(취소)가 기본 선택이다. 실수로 여정을 버리는 쪽이 더 아프다. */
.badge-flow-confirm-actions [data-badge-action="cancel-exit"] {
  background: var(--badge-ink);
  color: #fff;
  box-shadow: 0 12px 24px rgba(2, 28, 81, .24);
}

.badge-flow-confirm-actions [data-badge-action="confirm-exit"] {
  border: 2px solid rgba(2, 28, 81, .18);
  background: #fff;
  color: var(--badge-ink);
}

@keyframes badge-flow-spin { to { transform: rotate(1turn); } }
@keyframes badge-flow-transfer { to { opacity: .3; transform: translateY(-8px); } }

@media (max-height: 700px) {
  .badge-mobile-flow { --badge-chrome-base: 226px; }
  .badge-mobile-flow[data-state="review"],
  .badge-mobile-flow[data-state="result"] { --badge-chrome-base: 279px; }
  .badge-flow-layout {
    gap: 4px;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .badge-flow-header h1 { font-size: 29px; }
  .badge-flow-header > p { font-size: 15px; }
  .badge-flow-footer-logo { height: 28px; }
  .badge-intro-logo { height: 19px; }
  .badge-intro-logo-host { height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .badge-mobile-flow *,
  .badge-mobile-flow *::before,
  .badge-mobile-flow *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}