:root {
  --volt: #DBFF7E;
  --volt-mid: #E9FFB2;
  --volt-pale: #F4FFD8;
  --peri: #A6ADF9;
  --ink: #000000;
  --paper: #FFFFFF;
  --mute: #6E7566;
  --f-disp: "Wanted Sans Variable", "Wanted Sans", "Pretendard", "Apple SD Gothic Neo", sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  font-family: "Wanted Sans Variable", "Wanted Sans", "Pretendard", "Apple SD Gothic Neo", sans-serif;
  color: var(--ink);
  background: var(--volt);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

.display {
  font-family: "Archivo Black", "Outfit", sans-serif;
  letter-spacing: -0.02em;
  line-height: 0.88;
  text-transform: uppercase;
}
.eyebrow {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
}

.stage { min-height: 100svh; display: flex; justify-content: center; }
.deskpanel { display: none; }

/* ---------- phone ---------- */
.phone {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: 100svh;
  height: 100dvh;
  background: var(--volt);
  overflow: hidden;
}
.screens { position: relative; width: 100%; height: 100%; }

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--volt);
  color: var(--ink);
}
.screen.is-on { display: flex; animation: slide 0.34s cubic-bezier(0.22, 0.8, 0.3, 1); }
@keyframes slide {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- buttons ---------- */
.btn-fill, .btn-line {
  width: 100%;
  min-height: 54px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: "Wanted Sans Variable", "Wanted Sans", "Pretendard", sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.btn-fill { background: var(--ink); color: var(--volt); }
.btn-line { background: transparent; color: var(--ink); }
.btn-fill:active, .btn-line:active { transform: scale(0.985); }

/* ---------- intro ---------- */
.intro {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--volt);
  padding: calc(26px + var(--safe-t)) 20px calc(18px + var(--safe-b));
}
.intro-kv {
  flex: 0 1 auto;
  min-height: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid var(--ink);
}
.intro-kv img { display: block; width: 100%; height: 100%; object-fit: cover; }
.intro-body { flex: 0 0 auto; padding: 18px 2px 0; }
.intro-body .eyebrow { color: rgba(0,0,0,0.55); }
.intro-body .lockup em { color: rgba(0,0,0,0.6); }
.intro-body h2 { margin: 8px 0 0; font-size: clamp(34px, 11vw, 46px); }
.intro-copy {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.6;
  word-break: keep-all;
}
/* 팝업 벽면 문구를 그대로 가져옴 + 크록스 특유의 지비츠 홀 패턴 */
.tagline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
}
.tagline span {
  flex: 0 0 auto;
  font-family: "Archivo Black", sans-serif;
  font-size: 17px;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}
.tagline i {
  flex: 1 1 auto;
  height: 16px;
  background-image: radial-gradient(circle at 5px 50%, rgba(0,0,0,0.3) 2.8px, transparent 3.4px);
  background-size: 15px 16px;
  background-repeat: repeat-x;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 48%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 48%, transparent 100%);
}
.intro-foot { flex: 0 0 auto; padding-top: 18px; }

/* ---------- question ---------- */
.qhead {
  flex: 0 0 auto;
  padding: calc(17px + var(--safe-t)) 20px 16px;
  background: var(--volt);
}
/* 브랜드 락업 — PC 패널과 같은 한 덩어리 스타일을 전 화면 공통으로 */
.lockup {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: "Archivo Black", "Outfit", sans-serif;
  font-size: 17px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.lockup > span { white-space: nowrap; }
.qhead .lockup, .rhead .lockup { cursor: pointer; }
.lockup i { font-style: normal; }
.lockup sup {
  font-size: 8px;
  letter-spacing: 0;
  vertical-align: super;
  margin-left: 0.5px;
}
.lockup em {
  font-family: "Outfit", sans-serif;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
.lockup em::before { content: "·"; margin-right: 6px; opacity: 0.55; }
.qplate {
  flex: 0 0 auto;
  border-bottom: 2px solid var(--ink);
  background-color: var(--volt);
  background-image: radial-gradient(circle, rgba(0,0,0,0.14) 1.7px, transparent 1.8px);
  background-size: 15px 15px;
  overflow: hidden;
}
.qplate-run {
  display: flex;
  width: max-content;
  animation: plate-run 26s linear infinite;
}
/* 띠는 존 이름을 되풀이하지 않고 지금 할 행동만 영문으로 흘린다 */
.qplate-set { display: flex; align-items: center; gap: 13px; padding-right: 13px; }
.qplate-set b {
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 10px 0 9px;
  white-space: nowrap;
}
.qplate-set i {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0.5;
}
@keyframes plate-run { to { transform: translateX(-50%); } }
.qplate-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 20px 7px;
  border-top: 2px solid var(--ink);
  background: var(--ink);
  color: var(--volt);
}
.qplate-bar span {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
}
/* 신발 구멍에 지비츠를 끼우듯 채워지는 진행 표시 */
.qpg { display: flex; align-items: center; gap: 5px; }
.qpg b {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.6px currentColor;
  transition: background 0.25s ease;
}
.qpg b.on { background: currentColor; }
.qplate[data-zone="2"] { background-color: var(--peri); }
.qplate[data-zone="3"] {
  background-color: var(--ink);
  color: var(--volt);
  background-image: radial-gradient(circle, rgba(219,255,126,0.2) 1.7px, transparent 1.8px);
}
.qplate[data-zone="3"] .qplate-bar { background: var(--volt); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .qplate-run { animation: none; } }

.qbody { flex: 1 1 auto; padding: 22px 20px calc(22px + var(--safe-b)); }

/* 지금 서 있는 존이 화면의 주인공. 형광 마커를 깔아 존마다 색이 바뀐다 */
/* 가장 긴 PERSONALIZATION ZONE이 좁은 화면에서도 한 줄에 들어가는 크기까지만 키운다 */
.qzone {
  margin: 0;
  font-size: clamp(16.5px, 5.3vw, 21px);
  line-height: 1.16;
  letter-spacing: -0.01em;
  text-indent: -0.02em;
  word-break: keep-all;
}
.qzone b {
  font-family: "Archivo Black", "Outfit", sans-serif;
  font-weight: 400;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  background-image: linear-gradient(transparent 58%, var(--peri) 58%, var(--peri) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* 조사가 단어에서 떨어져 다음 줄로 넘어가면 보기 흉하다 */
.qzone i {
  font-family: "Wanted Sans Variable", "Wanted Sans", "Pretendard Variable", Pretendard, sans-serif;
  font-style: normal;
  font-size: 0.56em;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-left: 1px;
  white-space: nowrap;
}
.screen[data-step="2"] .qzone b {
  background-image: linear-gradient(transparent 58%, var(--peri) 58%, var(--peri) 94%, transparent 94%);
}

/* 지시문은 존 이름보다 한 단 작게, 붙여서 한 덩어리로 읽히게 */
.qtitle {
  margin: 10px 0 0;
  font-size: clamp(16px, 5vw, 19.5px);
  font-weight: 800;
  line-height: 1.36;
  letter-spacing: -0.03em;
  word-break: keep-all;
}
.qhelp { margin: 7px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--mute); }

/* 보기 카드가 2px 잉크 테두리라, 뒤로가기는 옅은 테두리로 낮춰 보기와 헷갈리지 않게 */
.btn-line.qback {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: fit-content;
  /* 손끝 기준 40px — 옅은 테두리로 낮춘 버튼이라 더 키우지 않고 여기서 멈춘다 */
  min-height: 40px;
  margin: 20px auto 0;
  padding: 0 18px;
  border-width: 1.5px;
  border-color: rgba(17,17,17,0.24);
  font-size: 13px;
  color: var(--mute);
}
.qback svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.qback:active { border-color: var(--ink); color: var(--ink); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sprite symbol {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 선택지 — 가방·지비츠·신제품 모두 한 줄 카드 (제품컷 + 이름 + 설명) */
.opts { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 20px; }
.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 10px 14px 10px 10px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
  text-align: left;
  cursor: pointer;
}
.opt:active { background: var(--volt); transform: scale(0.985); }
.opt.is-pick { background: var(--volt); }

/* 제품컷은 투명 배경이라 흰 타일 위에 얹어야 형태가 보인다 */
.opt-cut {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(17,17,17,0.1);
}
.opt-cut img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 3px; }
/* 지비츠 조합컷은 낱개 6개를 3열로 붙인 그림이라 가로로 넓다 */
.opt-cut-wide { width: 92px; height: 64px; }

.opt-sw { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.opt-sw i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.22);
}
.opt-sw em {
  font-family: "Outfit", sans-serif;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mute);
  margin-left: 2px;
}

.opt-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opt-txt b {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
  word-break: keep-all;
}
.opt-txt s {
  text-decoration: none;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--mute);
  word-break: keep-all;
}
.opt-txt i {
  font-family: "Outfit", sans-serif;
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(0,0,0,0.38);
  text-transform: uppercase;
}

/* ---------- result ---------- */
.result {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: calc(28px + var(--safe-t)) 20px calc(22px + var(--safe-b));
  background: var(--volt);
}

/* 페이지 머리말 — 어떤 화면인지 먼저 알려 준다 */
.rhead { flex: 0 0 auto; padding-bottom: 14px; }
.rhead .eyebrow { color: rgba(0,0,0,0.5); }
.rhead h2 {
  margin: 8px 0 0;
  font-size: clamp(23px, 6.8vw, 28px);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.035em;
}

/* 리워드 / 안내 두 묶음으로 나눔 */
.rgroup { flex: 0 0 auto; }
.rgroup + .rgroup { margin-top: 22px; }
.rgroup-t {
  margin: 0 0 9px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid rgba(0,0,0,0.16);
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}

/* 본문 흐름을 끊지 않는 보조 링크 */
.rlink {
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rlink-c { display: block; margin: 14px auto 0; color: var(--mute); }
.rcard-hero {
  padding: 18px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--paper);
}
.rbrand {
  margin: 0 0 12px;
  font-family: "Archivo Black", "Outfit", sans-serif;
  font-size: 15px;
  letter-spacing: -0.03em;
}
.rbrand sup { font-size: 8px; vertical-align: super; }
.rcard-hero .eyebrow { color: var(--mute); }
.rtype {
  margin: 12px 0 0;
  font-size: clamp(20px, 6vw, 25px);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.03em;
  word-break: keep-all;
}
.rline {
  margin: 4px 0 0;
  font-family: "Archivo Black", "Outfit", sans-serif;
  font-size: clamp(40px, 13.5vw, 56px);
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: var(--ink);
  -webkit-text-stroke: 0;
}
.rmsg {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--volt);
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 600;
  word-break: keep-all;
}
.rodds {
  margin: 10px 0 0;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mute);
}

.recipe {
  padding: 16px;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
}
.recipe-cap {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--mute);
}
.recipe-list { margin: 0; padding: 0; list-style: none; }
.recipe-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--volt-pale);
}
.recipe-list li:first-child { border-top: 0; padding-top: 0; }
.recipe-list span {
  flex: 0 0 46px;
  font-size: 11px;
  font-weight: 700;
  color: var(--mute);
}
.recipe-list b {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  word-break: keep-all;
}
.recipe-list span sup { font-size: 7px; vertical-align: super; }
.recipe-note {
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--volt-pale);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--mute);
  word-break: keep-all;
}

/* ---------- 스토리 카드 (캡처 전용 한 장) ---------- */
.story {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: calc(18px + var(--safe-t)) 11px calc(11px + var(--safe-b));
  background: var(--ink);
}
.story-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 16px;
  border-radius: 22px;
  background-color: var(--volt);
  background-image: radial-gradient(circle, rgba(0,0,0,0.1) 1.6px, transparent 1.7px);
  background-size: 16px 16px;
  color: var(--ink);
  overflow: hidden;
}
/* 좁은 기기(320px)에서는 락업과 기간이 한 줄에 못 들어간다.
   줄이 넘치면 기간을 아래 줄로 내린다 — 글자를 더 줄이면 공유 이미지에서 안 읽힌다 */
.sc-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 8px;
}
.sc-venue {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  opacity: 0.62;
  white-space: nowrap;
}

/* 남는 공간을 헤드라인 위와 픽 목록 위로 반씩 나눠 한쪽에 몰리지 않게 한다 */
.sc-mid { flex: 0 0 auto; display: flex; flex-direction: column; margin-top: auto; padding: 12px 0 0; }
/* 헤드라인 — 두 번째 줄은 아웃라인으로 눌러 밀도를 만든다 */
.sc-head {
  margin: 0;
  font-family: "Archivo Black", "Outfit", sans-serif;
  font-size: clamp(35px, 11.2vw, 44px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
/* 둘째 줄(YOUR CROCS)은 글자 수가 두 개 더 많아 같은 크기면 첫 줄보다 훨씬 넓어진다.
   0.86배로 줄이면 두 줄 폭이 맞아 한 덩어리로 읽히고, DISCOVER가 첫마디로 세진다 */
.sc-head i {
  display: inline-block;
  font-style: normal;
  font-size: 0.86em;
  color: transparent;
  -webkit-text-stroke: 1.8px var(--ink);
}
[data-skin="a"] .sc-head {
  font-size: clamp(42px, 13.2vw, 54px);
}
[data-skin="a"] .sc-head i {
  -webkit-text-stroke: 2.6px var(--ink);
}
.sc-ask {
  align-self: flex-start;
  margin: 15px 0 0;
  padding: 6px 13px 7px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--volt);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
/* 유형 코드 — MBTI 네 글자처럼 읽히는 부분 */
.sc-code {
  margin: 13px 0 0;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  opacity: 0.6;
}
/* 기분 칩 — 설문 라벨이 아니라 유형 이름 위에 앉는 짧은 바이브.
   페리윙클 알약 하나가 카드에서 유일한 포인트 색이라 시선이 유형 이름 직전에 멈춘다 */
.sc-lead {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 6px 0 0;
  padding: 5px 13px 6px;
  border-radius: 999px;
  background: var(--peri);
  font-size: 12.5px;
  letter-spacing: -0.03em;
  word-break: keep-all;
  text-align: center;
  color: var(--ink);
}
.sc-lead[hidden] { display: none; }
.sc-lead b { font-weight: 900; }
.sc-lead i { font-style: normal; font-weight: 700; }
/* 칩은 위(질문)와 띄고, 아래 유형명과는 한 덩어리로 붙인다 */
.sc-box .sc-lead + .sc-type { margin-top: 4px; }

.sc-type {
  margin: 5px 0 0;
  font-size: clamp(21px, 6.7vw, 26px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.04em;
  word-break: keep-all;
}
.sc-trait {
  margin: 7px 0 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  opacity: 0.62;
  word-break: keep-all;
}
.sc-dp {
  margin: 6px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  opacity: 0.55;
  word-break: keep-all;
}

/* 고른 세 가지 — 제품컷 + 이름 + 설명 (PDF 6페이지 구성) */
.sc-picks {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.sc-picks li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
/* 제품컷이 투명 PNG라 흰 타일을 깔고 여백을 두고 얹는다 */
.sc-thumb {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 13px;
  overflow: hidden;
  background: #fff;
}
.sc-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.sc-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sc-txt em {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.5;
}
.sc-txt em sup { font-size: 6px; vertical-align: super; }
.sc-txt b {
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -0.035em;
  word-break: keep-all;
}
.sc-txt s {
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
  opacity: 0.6;
  word-break: keep-all;
}

.sc-msg {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--volt);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.sc-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding: 9px 13px 10px;
  border-radius: 13px;
  background: var(--ink);
  color: var(--volt);
}
.sc-place { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.sc-tags {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: clamp(7.5px, 2.2vw, 9px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  opacity: 0.9;
  white-space: nowrap;
}

.story-bar { flex: 0 0 auto; }
.story-acts { display: flex; gap: 8px; }
.story-acts .btn-sm { margin-top: 0; }
/* 공유도 현장 유입도 같은 무게라 폭을 반반으로 둔다 */
.story-acts .btn-fill,
.story-acts .btn-line { flex: 1 1 0; min-width: 0; }
/* 화면 배경이 잉크라 기본 btn-fill(잉크 채움)은 형태가 사라진다 */
.story-acts .btn-fill {
  border-color: var(--volt);
  background: var(--volt);
  color: var(--ink);
}
.story-acts .btn-line {
  border-color: var(--volt);
  color: var(--volt);
}
/* 밑줄 링크로 두면 카드와 따로 떠 보인다. 헤어라인 사이에 앉힌 캡션으로 */
.story-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 13px 2px 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: rgba(255,255,255,0.46);
}
.story-hint::before,
.story-hint::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255,255,255,0.16);
}

.rsum { padding: 2px 2px 4px; }
.rsum-type {
  margin: 0;
  font-size: clamp(18px, 5.4vw, 22px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.035em;
  word-break: keep-all;
}
.rsum-note {
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--mute);
  word-break: keep-all;
}
.rsum-back {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.rnext { display: flex; flex-direction: column; gap: 10px; }
.rcard {
  padding: 15px 16px;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
}
.rcard-draw { background: var(--peri); }

/* 조건 없이 바로 받는 리워드 — 한 줄로 끝냄 */
.rnow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: var(--volt);
}
.rnow-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--paper);
}
.rnow-ic svg {
  width: 24px;
  height: 24px;
  fill: var(--ink);
  stroke: none;
}
.rnow p {
  margin: 5px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

/* 홈페이지 할인 쿠폰 — 글 영역은 사이트로, 번호는 복사 */
.rcoupon {
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
  overflow: hidden;
}
.rcoupon-go {
  display: block;
  padding: 14px 15px 12px;
  color: inherit;
  text-decoration: none;
}
.rcoupon-go p {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em;
  word-break: keep-all;
}
.rcoupon-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}
.rcoupon-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 5px 9px 5px 7px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--volt);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.rcoupon-hint span {
  line-height: 1;
}
.rcoupon-hint svg {
  display: block;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rcoupon-until {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(0,0,0,0.55);
}
.rcoupon-code {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 8px;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 0 15px;
  border: 0;
  border-top: 1.5px dashed rgba(0,0,0,0.28);
  background: transparent;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rcoupon-code i {
  justify-self: start;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: rgba(0,0,0,0.5);
}
.rcoupon-code b {
  justify-self: center;
  font-family: "Outfit", sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  text-align: center;
}
.rcoupon-code svg {
  justify-self: end;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
}
.rcoupon-code.is-done { background: var(--ink); color: var(--paper); }
.rcoupon-code.is-done i,
.rcoupon-code.is-done b { color: var(--paper); }
.rcoupon-code.is-done svg { stroke: var(--paper); opacity: 1; }

.rprize { margin: 12px 0 0; padding: 0; list-style: none; }
.rprize li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid rgba(0,0,0,0.12);
}
.rprize li:first-child { border-top: 0; }
.rp-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: rgba(0,0,0,0.08);
}
.rp-ic svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rprize li { align-items: center; }
.rprize b {
  flex: 0 0 30px;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.rprize span { font-size: 13px; font-weight: 700; letter-spacing: -0.02em; }

.rcard h3 { line-height: 1.35; word-break: keep-all; }

/* 계정 태그는 눌러서 계정으로 갈 수 있게. 본문 안이라 알약은 무거워서 형광 마커로 */
.ig {
  display: inline;
  padding: 0 1px;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  background-image: linear-gradient(transparent 58%, var(--volt) 58%, var(--volt) 96%, transparent 96%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.ig:active { background-image: linear-gradient(transparent 58%, var(--volt-mid) 58%); }
.rtags {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px dashed rgba(17,17,17,0.28);
  border-radius: 10px;
  background: transparent;
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: left;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.rtags svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
}
.rtags span {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}
.rtags:active { background: rgba(17,17,17,0.05); }
.rtags.is-done {
  border-style: solid;
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.rtags.is-done svg { stroke: var(--paper); opacity: 1; }
.btn-sm {
  margin-top: 12px;
  min-height: 44px;
  font-size: 14px;
}
.rcard h3 {
  margin: 6px 0 6px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.rcard p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #2C3227;
  word-break: keep-all;
}
.rfoot { flex: 0 0 auto; margin-top: auto; padding-top: 22px; }
.rfoot .btn-sm { margin-top: 0; }
.rlegal {
  margin: 11px 2px 0;
  font-size: 10.5px;
  line-height: 1.7;
  text-align: center;
  text-wrap: balance;
  color: rgba(0,0,0,0.5);
  word-break: keep-all;
}

/* ---------- 컬러 선택 시트 ---------- */
.cmodal {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
}
.cmodal[hidden] { display: none; }
.cmodal-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.46);
  animation: sh-fade 0.2s ease both;
}
.cmodal-box {
  position: relative;
  width: 100%;
  max-height: min(82dvh, 82%);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 10px 20px calc(20px + var(--safe-b));
  border-radius: 22px 22px 0 0;
  background: var(--paper);
  animation: sh-up 0.26s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
.cmodal-p { display: none; }
.cmodal-p.on { display: block; }
.cmodal-p h3 {
  margin: 4px 0 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.cmodal-box .btn-line { width: 100%; margin-top: 16px; }


/* ---------- 컬러 선택 ---------- */
.cgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-items: start;
  align-content: start;
  gap: 8px;
  margin-top: 12px;
}
.copt {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: start;
  height: auto;
  min-width: 0;
  padding: 0;
  border: 1.5px solid rgba(17,17,17,0.14);
  border-radius: 14px;
  background: var(--paper);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.copt:active { transform: scale(0.975); }
/* 정사각형은 너비 기준(padding-top)으로만 잡는다.
   aspect-ratio를 그리드 stretch 칸에 두면 사파리가 높이로 사각형을 키워
   아래 색이름·도트를 overflow로 잘라 낸다(아이폰 16 Pro 등). */
.copt-im {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 100%;
  flex: 0 0 auto;
  background: #fff;
}
.cgrid-shoe .copt-im { padding-top: 80%; }
.cgrid-shoe .copt-im img { padding: 2% 3%; }
.copt-im img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}
.copt-tx {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 7px 8px 8px;
}
.copt-tx i {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(17,17,17,0.22);
  border-radius: 50%;
}
.copt-tx b {
  min-width: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.3;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: normal;
}
.copt.is-pick {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 2.5px var(--volt);
}

/* 방에 신제품이 둘 이상이면 제품명으로 묶어 보여준다 */
.cmodal-gr {
  margin: 14px 0 0;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--mute);
}
.cmodal-p > .btn-line { width: 100%; margin-top: 16px; }

/* 인트로 — 확정 카피의 질문 한 줄 */
.intro-ask {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* ---------- PC: 캠페인 브랜드 페이지 ---------- */
@media (min-width: 1080px) {
  body {
    background: #000;
    overflow: auto;
  }
  .deskpanel { display: block; color: var(--paper); }
  .stage {
    display: grid;
    grid-template-columns: minmax(340px, 470px) 390px;
    gap: 76px;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 76px 44px 84px;
  }
  .dp-mark {
    margin: 0;
    font-family: "Archivo Black", "Outfit", sans-serif;
    font-size: 19px;
    letter-spacing: -0.03em;
    color: var(--volt);
  }
  .dp-mark sup { font-size: 9px; vertical-align: super; }
  .deskpanel h1 {
    margin: 26px 0 0;
    font-size: clamp(56px, 5.6vw, 78px);
    line-height: 0.9;
    letter-spacing: -0.045em;
    color: var(--paper);
  }
  .dp-lede {
    max-width: 27em;
    margin: 26px 0 0;
    font-size: 15.5px;
    line-height: 1.72;
    color: rgba(255,255,255,0.62);
    word-break: keep-all;
  }
  .dp-prog {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    max-width: 27em;
  }
  .dp-prog li {
    position: relative;
    padding-left: 15px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.9;
    color: rgba(255,255,255,0.78);
    word-break: keep-all;
  }
  .dp-prog li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 7px;
    height: 2px;
    background: var(--volt);
  }
  .dp-prog sup { font-size: 9.5px; vertical-align: baseline; position: relative; top: -0.42em; }

  .dp-tagline {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 32px 0 0;
  }
  .dp-tagline span {
    flex: 0 0 auto;
    font-family: "Archivo Black", sans-serif;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--volt);
  }
  .dp-tagline i {
    flex: 1 1 auto;
    height: 18px;
    background-image: radial-gradient(circle at 6px 50%, rgba(255,255,255,0.28) 3px, transparent 3.6px);
    background-size: 17px 18px;
    background-repeat: repeat-x;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 46%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 46%, transparent 100%);
  }
  .dp-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 38px;
    margin: 32px 0 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.18);
  }
  .dp-facts dt {
    font-family: "Outfit", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--volt);
  }
  .dp-facts dd {
    margin: 9px 0 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
    color: rgba(255,255,255,0.8);
  }
  /* ---------- 안 세 벌 고르기 ----------
     1차 · 2차 A · 2차 B가 각각 '보기 + 문구 수정' 두 갈래를 갖는다. 알약 세그먼트로는
     여섯 갈래가 들어가지 않고, 무엇이 짝인지도 흐려진다. 그래서 한 줄에 한 안을 두고
     오른쪽에 문구 수정을 붙였다 — 줄이 곧 한 벌이라는 뜻이 된다. */
  .dp-actions { margin-top: 34px; }
  .dp-actions-t {
    margin: 0 0 10px;
    font-family: "Outfit", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
  }
  .dp-sets { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .dp-set {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1.5px solid rgba(255,255,255,0.16);
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    overflow: hidden;
    transition: border-color 0.18s ease, background 0.18s ease;
  }
  .dp-set-go {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 11px 14px 12px;
    text-decoration: none;
  }
  .dp-set-go b {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--paper);
  }
  .dp-set-go s {
    text-decoration: none;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: rgba(255,255,255,0.42);
  }
  /* 문구 수정은 보기와 같은 무게로 두면 어디를 눌러야 할지 갈린다. 한 단 낮춰 붙인다 */
  .dp-set-ed {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 15px;
    border-left: 1.5px solid rgba(255,255,255,0.14);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
  }
  .dp-set-ed svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .dp-set:hover { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.07); }
  .dp-set-ed:hover { background: rgba(219,255,126,0.12); color: var(--volt); }
  /* 지금 보고 있는 안 — 왼쪽에 형광 띠를 세워 목록에서 즉시 찾게 한다 */
  .dp-set.is-on {
    border-color: var(--volt);
    background: rgba(219,255,126,0.08);
    box-shadow: inset 3px 0 0 var(--volt);
  }
  .dp-set.is-on .dp-set-go b { color: var(--volt); }
  .dp-actions-d {
    margin: 12px 0 0;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: rgba(255,255,255,0.34);
  }

  .phone {
    width: 390px;
    height: 844px;
    border-radius: 46px;
    box-shadow: 0 0 0 11px #131313, 0 0 0 13px #333, 0 46px 96px rgba(0,0,0,0.72);
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen.is-on { animation: none; }
  .btn-fill:active, .btn-line:active, .opt:active { transform: none; }
}


/* ---------- 더 즐기기: 2단 타일 ---------- */
.rduo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.rtile {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.16s ease;
}
.rtile:active { transform: scale(0.982); }
.rtile-top {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
.rtile-top img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7px;
}
/* 존 사이니지와 같은 언어 — 타공 패턴 위에 영문 라벨.
   라벨이 아래에 붙으니 4:3은 위쪽 여백만 남아 낮게 잡는다 */
.rtile-plate {
  place-items: end start;
  aspect-ratio: 2 / 1;
  padding: 0 0 9px 12px;
  background-color: var(--volt);
  background-image: radial-gradient(circle, rgba(0,0,0,0.14) 1.7px, transparent 1.8px);
  background-size: 15px 15px;
  color: var(--ink);
}
.rtile-plate b {
  font-family: "Archivo Black", "Outfit", sans-serif;
  font-size: 27px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.rtile-plate-dark {
  background-color: var(--ink);
  background-image: radial-gradient(circle, rgba(219,255,126,0.22) 1.7px, transparent 1.8px);
  color: var(--volt);
}
.rtile-tx {
  display: grid;
  gap: 2px;
  padding: 10px 12px 12px;
  color: var(--ink);
}
.rtile-tx em {
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--mute);
}
.rtile-tx b {
  font-family: var(--f-disp);
  font-size: 16px;
  letter-spacing: -0.01em;
}

/* ---------- 상세 시트 ---------- */
.sheet {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
}
.sheet[hidden] { display: none; }
.sheet-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.46);
  animation: sh-fade 0.2s ease both;
}
.sheet-box {
  position: relative;
  width: 100%;
  max-height: 82%;
  overflow-y: auto;
  padding: 10px 22px calc(24px + var(--safe-b));
  border-radius: 22px 22px 0 0;
  background: var(--paper);
  animation: sh-up 0.26s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
.sheet-grip {
  display: block;
  width: 38px;
  height: 4px;
  margin: 0 auto 16px;
  border-radius: 4px;
  background: rgba(17,17,17,0.16);
}
.sheet-p { display: none; }
.sheet-p.on { display: block; }
.sheet-p h3 {
  margin: 6px 0 8px;
  font-family: var(--f-disp);
  font-size: 20px;
  letter-spacing: -0.02em;
}
.sheet-p > p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: rgba(17,17,17,0.8);
}
.sheet-note {
  margin-top: 10px !important;
  font-size: 11.5px !important;
  line-height: 1.6 !important;
  color: rgba(17,17,17,0.5) !important;
}
.sheet-box .btn-line {
  width: 100%;
  margin-top: 20px;
}

/* DJ 라인업 */
.djlist {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(17,17,17,0.1);
}
.djlist li {
  display: grid;
  grid-template-columns: 44px 40px 1fr;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(17,17,17,0.1);
}
.djlist .dj-d {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.djlist .dj-w {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(17,17,17,0.42);
}
.djlist b {
  font-family: var(--f-disp);
  font-size: 14px;
  letter-spacing: 0.01em;
}
.djlist li.on {
  margin: 0 -10px;
  padding: 11px 10px;
  border-radius: 10px;
  background: var(--volt);
  border-bottom-color: transparent;
}
.djlist li.on .dj-w { color: rgba(17,17,17,0.58); }

@keyframes sh-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sh-up { from { transform: translateY(100%); } to { transform: none; } }

/* ================================================================
   0916 수정 요청 반영 — 여기서부터가 1차 전달본과 달라진 부분이다.
   앞의 규칙을 그대로 두고 덮어써서, 1차와 비교할 때 차이를 짚기 쉽게 했다.
   ================================================================ */

/* 머리말에 장소·기간을 같이 둔다 (회신본 4·8·9페이지) */
.qhead,
.rhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.qhead-v {
  flex: 0 0 auto;
  font-style: normal;
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  opacity: 0.6;
  white-space: nowrap;
}

/* ---------- 인트로 — 질문 · KV · 설명 · START (회신본 4페이지) ---------- */
/* 락업·슬로건·기간·주소가 모두 KV 안에 박혀 있어 화면에는 헤더도 띠도 두지 않는다.
   위는 상태바만 피하고, 아래는 iOS 홈 인디케이터 제스처 영역과 겹치지 않게 여유를 둔다 */
.intro { padding: calc(var(--safe-t) + 10px) 20px calc(24px + var(--safe-b)); }
/* 첫 화면이 캠페인의 얼굴이라 세로 리듬을 여기서 직접 잡는다.
   간격을 전부 같게 두면 질문 · KV · 설명 · 버튼이 무관한 낱개로 흩어져 읽힌다.
   그래서 큰 간격(덩어리 사이) · 중간(설명) · 작은 간격(킥커와 질문)으로 3단만 쓴다.
   폭이 같고 높이만 다른 기기가 많아 기준은 svh로 잡는다. */
.intro-body {
  /* KV 그림 자체가 위아래로 여백을 갖고 있어(투명 여백은 잘라 냈다) 화면 간격까지
     넉넉하면 제목·KV·설명이 서로 멀어 보인다. 붙일 수 있는 만큼 붙인다 */
  --gap-lg: clamp(10px, 1.8svh, 16px);
  --gap-md: clamp(9px, 1.5svh, 13px);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-height: 0;
  padding: clamp(4px, 1.4vh, 14px) 0 0;
}

/* 질문 — 킥커가 본문보다 겨우 크면 라벨이 아니라 본문으로 읽힌다.
   킥커 20 : 질문 35 = 1.7:1로 좁히고, 대신 킥커 굵기를 낮춰 질문과 경쟁하지 않게 한다. */
.intro-ask {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
  word-break: keep-all;
}
.intro-ask em {
  display: block;
  font-style: normal;
  font-size: clamp(18px, 2.6svh, 21px);
  font-weight: 600;
  letter-spacing: 0;
  color: rgba(0,0,0,0.58);
}
/* 첫 화면의 주인공이라 화면이 허용하는 만큼 키운다.
   큰 글자는 자간을 조여야 덩어리로 읽힌다. */
.intro-ask b {
  display: block;
  margin-top: 4px;
  font-size: clamp(32px, 4.9svh, 41px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.042em;
}
.intro-ask b sup { font-size: 0.4em; vertical-align: 0.95em; }

/* KV는 배경을 떼어낸 투명 PNG라 형광 배경 위에 바로 얹힌다.
   테두리도 배경도 없애 삽입 이미지가 아니라 화면 자체가 되게 한다.
   남은 높이만 차지하므로 작은 화면(640px)에서도 START가 밀려나지 않는다. */
.intro .intro-kv {
  flex: 1 1 0;
  display: block;
  min-height: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: none;
}
.intro .intro-kv img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 워드마크가 화면 끝에 닿으면 글자가 잘릴 듯 답답해 보인다.
   화면 여백(20px)에 조금 더 얹어 좌우로 숨 쉴 자리를 만든다 */
.intro .intro-kv { margin: var(--gap-lg) 0 0; padding: 0 clamp(6px, 2.6vw, 16px); }

/* 설명은 가운데로 모으고 폭을 묶어 끝줄에 두 단어만 남는 줄바꿈을 막는다.
   형광 배경 위라 너무 흐리면 묻히므로 검정에 가깝게 둔다. */
/* ---------- 인트로 문구 ----------
   기본 웹 글자처럼 보이지 않게 세 가지만 손본다.
   1) 굵기를 올리고 자간을 좁혀(-0.035em) 한 덩어리로 뭉친다 — 큰 한글은 좁은 자간이 디자인처럼 읽힌다
   2) 핵심 두 마디에 마커를 깐다(글자 아래 절반만 칠하는 형광펜 방식)
   3) 마커는 글자 뒤에 깔리고 글자는 그대로 검정 — 대비를 잃지 않는다 */
.intro-copy .hl {
  display: inline;
  font-weight: 900;
  background-image: linear-gradient(transparent 62%, var(--mark, var(--peri)) 62%,
                                    var(--mark, var(--peri)) 97%, transparent 97%);
  background-repeat: no-repeat;
  padding: 0 1px;
  /* 강조 구간이 줄 끝에서 갈라지면 마커가 두 조각으로 끊긴다 */
  white-space: nowrap;
}
.intro .intro-copy {
  flex: 0 0 auto;
  max-width: 320px;
  margin: var(--gap-md) auto 0;
  font-size: clamp(13px, 1.75svh, 14.5px);
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-align: center;
  color: rgba(17,17,17,0.82);
  word-break: keep-all;
}
.intro .intro-foot { padding-top: clamp(16px, 3.4svh, 28px); }
.intro .intro-foot .btn-fill { min-height: clamp(50px, 6.6svh, 56px); }

/* 세로 568px(SE 1세대) · 640px(보급형 안드로이드)에서는 clamp의 최소값을 다 더해도
   한 화면을 넘긴다. 이 높이에서만 바닥값을 한 단 낮춘다 — 넘겨서 START가 잘리는 편이 더 나쁘다 */
@media (max-height: 640px) {
  .intro { padding: calc(var(--safe-t) + 6px) 20px calc(16px + var(--safe-b)); }
  .intro-body { --gap-lg: 8px; --gap-md: 7px; padding-top: 2px; }
  /* 조각 표지는 자기 clamp(--ask)로 이미 줄어든다 — 스티커 표지에만 적용한다 */
  .intro:not(.bk) .intro-ask em { font-size: 16px; }
  .intro:not(.bk) .intro-ask b { font-size: 29px; }
  .intro .intro-copy { font-size: 12.5px; }
  .intro .intro-foot { padding-top: 12px; }
  .intro .intro-foot .btn-fill { min-height: 48px; }
}

/* ---------- 오늘의 기분 (두 번째 화면) ----------
   제품이 아니라 마음 상태를 받는 자리라 존 띠는 페리윙클로 두고,
   보기는 단어 하나씩이라 2열로 붙여 한 화면에 여섯 개가 다 보이게 한다. */
.qplate[data-zone="0"] { background-color: var(--peri); }
.qtitle-lg {
  margin: 12px 0 0;
  font-size: clamp(25px, 7.6vw, 31px);
  line-height: 1.18;
  letter-spacing: -0.045em;
}
/* 보기가 여섯 개뿐이라 위에 몰리면 화면 아래가 텅 빈다.
   남는 높이를 카드가 나눠 가져 화면을 채우게 한다 */
[data-screen="mood"] .qbody { display: flex; flex-direction: column; }
.moods {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(72px, 1fr);
  gap: 10px;
  margin: 20px 0 0;
  max-height: 380px;
}
/* 카드가 커진 만큼 글자를 가운데로 모아야 빈 칸으로 안 읽힌다 */
.mood {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 글자 위아래 유령 공백을 잘라 냈으니(text-box) 간격은 여기서 직접 준다 */
  gap: 9px;
  min-height: 72px;
  padding: 14px;
  text-align: center;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--card);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mood i {
  font-family: "Outfit", sans-serif;
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(0,0,0,0.4);
}
.mood:active, .mood.is-pick { background: var(--volt); }
.mood b {
  font-size: clamp(19px, 5.8vw, 23px);
  font-weight: 800;
  letter-spacing: -0.04em;
}
.mood:active { transform: scale(0.985); }
.moods + .qback { margin-top: 22px; }

/* ---------- 보기 카드 배경 ----------
   흰 화면에 흰 카드라 테두리만 남아 허옇게 보였다. KV의 페리윙클을 아주 옅게 깔아
   카드가 화면에서 떠 보이게 한다. 고른 카드는 형광이라 이 옅은 배경과 확실히 갈린다.
   제품컷 자리는 흰색으로 두되 실선 한 줄을 둘러 배경에 묻히지 않게 한다. */
:root { --card: #ffffff; }
.opt, .copt, .mood { background: var(--card); }

/* 테두리 안에 또 테두리를 두르지 않는다. 카드를 두 칸으로 갈라
   제품컷 칸은 흰색, 글자 칸은 옅은 색을 깔아 경계를 색으로만 만든다.
   줄 카드는 왼쪽이 흰 칸, 2열 카드는 위가 흰 칸이다. */
.opt-cut, .copt-im { background: var(--paper); box-shadow: none; border-radius: 0; }
.opt {
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.opt .opt-cut {
  align-self: stretch;
  width: 88px;
  height: auto;
  min-height: 82px;
}
.opt .opt-txt {
  flex: 1 1 auto;
  justify-content: center;
  padding: 12px 15px;
}

/* ---------- 지비츠 2열 카드 (회신본 6페이지) ---------- */
.opts-duo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 9px;
}
.opt-duo {
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  height: 100%;
  gap: 0;
  padding: 0;
}
.opt-duo .opt-cut {
  position: relative;
  align-self: auto;
  width: 100%;
  height: 0;
  min-height: 0;
  padding-top: 100%;
  aspect-ratio: auto;
}
.opt-duo[data-kind="shoe"] .opt-cut { padding-top: 80%; }
.opt-duo[data-kind="shoe"] .opt-cut img { padding: 5px 6px; }
.opt-duo .opt-cut img {
  position: absolute;
  inset: 0;
}
.opts-duo { grid-auto-rows: 1fr; }
.opt-duo .opt-txt {
  flex: 0 0 70px;
  height: 70px;
  min-height: 70px;
  max-height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 8px 8px 9px;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
}
.opt-duo .opt-txt i { font-size: 8.5px; }
.opt-duo .opt-txt b {
  font-size: 13px;
  line-height: 1.3;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: pretty;
}

/* ---------- 지비츠 낱개 시트 (회신본 '누르면 지비츠 나오게') ---------- */
.jm-en {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
}
.cmodal-p .jm-desc {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--mute);
  word-break: keep-all;
}
.jgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-items: start;
  align-content: start;
  gap: 8px;
  margin: 14px 0 4px;
  padding: 0;
  list-style: none;
}
.jgrid li { display: flex; min-width: 0; }
.jchip {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 고른 표시는 카드 테두리와 이름 칸 형광으로만 낸다.
   컷 안쪽에 검정 인셋을 또 두르면 테두리가 두 겹으로 겹쳐 보인다 */
.jchip.is-pick .jchip-tx, .jchip.is-pick b { opacity: 1; }
/* 낱개를 골라야 넘어가는 화면이라 무엇을 하면 되는지 한 줄로 짚어 준다 */
.jm-pick {
  margin: 12px 0 0;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -0.025em;
  word-break: keep-all;
}
/* 테두리는 다른 화면의 상품 섬네일(.opt-cut)과 같은 굵기·농도로 맞춘다 */
.jg-im {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 100%;
  flex: 0 0 auto;
  border-radius: 13px;
  background: #fff;
  overflow: hidden;
  box-shadow: inset 0 0 0 1.5px rgba(17,17,17,0.1);
}
.jg-im img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}
.jgrid b {
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-align: center;
  opacity: 0.7;
  word-break: keep-all;
}

/* ---------- 결과 카드 — 가운데 정렬, 유형 A×B (회신본 8페이지) ---------- */
.story-card { text-align: center; }
.sc-top { text-align: left; }
/* 헤드라인·질문·결과 박스를 한 덩어리로 묶어 카드 가운데에 모은다.
   남는 공간을 덩어리 위(.sc-head)와 아래(.sc-box)로만 나눠 요소 사이가 벌어지지 않게 한다. */
.sc-head { margin-top: auto; }
.sc-ask { align-self: center; margin-top: 11px; }
/* 흰 칸은 내용 높이만 갖고, 남는 높이는 칸 위와 태그 줄 아래로 반씩 나눈다.
   칸을 늘려 버리면(flex: 1) 안쪽에 빈 자리가 생겨 칸만 크고 내용은 작아 보이고,
   반대로 남는 높이를 전부 아래로 몰면 카드 아래쪽이 200px 비어 잘린 것처럼 보인다 */
.sc-box {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 14px 0 0;
  padding: 18px 14px 16px;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: rgba(255,255,255,0.42);
}
.sc-box .sc-type {
  margin: 0;
  font-size: clamp(23px, 7.2vw, 29px);
  letter-spacing: -0.05em;
}
.sc-box .sc-msg {
  margin: 5px 0 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  opacity: 0.78;
}
/* 두 번째 화면에서 받은 오늘의 기분 — 유형 이름 위에 한 줄로 얹는다 */
.sc-mood {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 8px;
}
.sc-mood i {
  font-family: "Outfit", sans-serif;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}
.sc-mood b { font-size: 14px; font-weight: 800; letter-spacing: -0.03em; }

.sc-box .sc-picks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 0;
}
.sc-box .sc-picks li { flex-direction: column; gap: 6px; align-items: stretch; }
.sc-box .sc-thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.sc-box .sc-picks b {
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.03em;
  word-break: keep-all;
}
.sc-picks .sc-cap i,
.sc-picks [id$="Color"],
.sc-txt s { display: none; }
/* 해시태그 띠를 카드 맨 아래에 붙이면 상자와의 사이가 텅 빈다.
   상자 바로 아래에 붙이고, 남는 자리는 띠 아래로 보내 덩어리째 가운데로 모은다 */
.sc-foot { justify-content: center; margin: 14px 0 auto; }

/* 버튼 두 개를 위아래로, 아이스크림 안내가 위 버튼을 가리키게 (회신본 8페이지) */
.story-bar { display: flex; flex-direction: column; gap: 8px; }
.story-bar .btn-fill {
  border-color: var(--volt);
  background: var(--volt);
  color: var(--ink);
}
.story-bar .btn-line {
  border-color: var(--volt);
  color: var(--volt);
}
.story-bar .story-hint {
  justify-content: center;
  margin: 2px 2px 0;
  color: rgba(255,255,255,0.6);
}
.story-bar .story-hint::before,
.story-bar .story-hint::after { display: none; }
.story-bar .story-hint span { font-weight: 800; }

/* ---------- 경품을 이미지 1×3으로 (회신본 9페이지) ---------- */
.rgroup .rprize {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
}
.rgroup .rprize li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 11px 9px 12px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
}
.rp-im {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.rp-im img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.rp-im-duo {
  display: grid;
  grid-template-rows: 1.15fr 0.85fr;
  align-items: stretch;
  justify-items: stretch;
  gap: 2px;
  padding: 7px 6px 8px;
}
.rp-im-duo img {
  position: static;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  object-fit: contain;
}
.rp-im svg {
  width: 40%;
  height: 40%;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
}
.rgroup .rprize b {
  flex: 0 0 auto;
  font-family: "Outfit", sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  opacity: 0.55;
}
/* 세 칸의 줄바꿈 위치를 맞춘다 — 제품명은 한 줄, 괄호 설명은 둘째 줄 고정 */
.rgroup .rprize s {
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.03em;
  text-align: center;
  word-break: keep-all;
}
.rgroup .rprize s em {
  display: block;
  font-style: normal;
  font-weight: 700;
  opacity: 0.6;
}

/* ---------- 셀렉트 카드 한 벌 ----------
   가방·지비츠 조합·낱개 참·신발·색상 — 고르는 카드는 다섯 곳에 나오는데
   테두리 두께도, 안쪽 액자도, 글자 크기도 다 달라 손으로 만든 티가 났다.
   규칙을 하나로 묶는다.

     1) 카드는 두 칸이다 — 제품컷 칸은 흰색, 글자 칸은 옅은 페리윙클
     2) 테두리는 겉에 한 겹만, 칸 사이는 실선 한 줄로만 나눈다
     3) 고르면 글자 칸이 형광으로 뒤집힌다
     4) 영문 라벨(작게·자간 넓게) → 한글 이름 → 설명 순서 */
.opt, .opt-duo, .mood, .copt, .jchip {
  border: 1.5px solid rgba(17,17,17,0.92);
  border-radius: 16px;
  overflow: hidden;
  transition: background 0.16s ease, transform 0.16s ease;
}
.opt-cut, .copt-im, .jg-im {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--paper);
}
/* 컷은 액자에 딱 붙이지 않고 숨 쉴 자리를 준다 */
.opt .opt-cut img { padding: 9px; }
.opt-duo .opt-cut img { padding: 10px 12px; }
.jg-im img { padding: 10%; }
.copt-im img { padding: 4% 6%; }

/* 칸 사이에 선은 두지 않는다 — 흰색과 옅은 색이 갈리는 지점이 이미 경계다.
   선을 한 줄 더 그으면 색 경계와 겹쳐 어중간한 획으로 남는다 */
.opt .opt-txt, .opt-duo .opt-txt, .copt-tx, .jchip b { border: 0; }

/* 글자 위계 — 영문 라벨은 흐리게 눕히고 이름만 검정으로 세운다 */
.opt-txt i, .jm-en {
  font-size: 8.5px;
  letter-spacing: 0.11em;
  color: rgba(17,17,17,0.36);
}
.opt-txt b { font-size: 14.5px; letter-spacing: -0.035em; }
.opt-txt s { font-size: 11.5px; line-height: 1.42; color: rgba(17,17,17,0.5); }
.opt-duo .opt-txt b { font-size: 13.5px; }

/* 낱개 참도 같은 카드로 — 흰 컷 위, 이름 칸 아래. 이름 줄 수와 상관없이 카드 높이는 같다. */
.jgrid { gap: 9px; align-items: stretch; }
.jgrid li { height: 100%; }
.jchip {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  height: 100%;
  gap: 0;
  background: var(--card);
}
.jg-im { aspect-ratio: auto; }
.jchip-tx {
  flex: 0 0 48px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 6px;
  box-sizing: border-box;
}
.jchip-tx b {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  text-align: center;
  opacity: 1;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: pretty;
}

/* 고른 카드 — 글자 칸만 형광으로 바뀌고 테두리가 진해진다 */
.opt:active, .opt.is-pick,
.mood:active, .mood.is-pick { background: #fff; border-color: var(--ink); box-shadow: none; }
.opt:active::after, .opt.is-pick::after,
.mood:active::after, .mood.is-pick::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2.5px solid var(--ink);
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
}
.copt.is-pick, .jchip.is-pick { border-color: var(--ink); box-shadow: none; }
.copt.is-pick .copt-tx, .jchip.is-pick .jchip-tx,
.copt:active .copt-tx, .jchip:active .jchip-tx { background: var(--volt); }
.jchip:active .jg-im, .jchip.is-pick .jg-im { transform: none; box-shadow: none; border: 0; }
.opt:active, .copt:active, .jchip:active, .mood:active { transform: scale(0.99); }

/* ---------- 색상 칩 이름줄 ----------
   이름이 두 줄이 된다고 그 카드만 커지지 않게, 라벨 칸을 두 줄 높이로 고정한다.
   한 줄 이름은 그 칸 안에서 가운데. 세 줄 이상은 자른다. */
.copt-tx {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px;
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  padding: 8px 6px;
  box-sizing: border-box;
}
.copt-tx b {
  flex: 0 1 auto;
  align-self: center;
  min-width: 0;
  text-align: center;
  line-height: 1.3;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: pretty;
}

/* ---------- 한글 세로 중앙 정렬 ----------
   폰트는 어센더·디센더가 들어갈 자리를 글자 위아래에 미리 비워 둔다.
   한글에는 디센더가 없으니 그 빈 자리가 그대로 남아, align-items: center로
   가운데를 맞춰도 '줄 박스'가 맞을 뿐 글자는 위로 떠 보인다.
   도트·아이콘과 나란히 두면 이 차이가 눈에 걸린다.

   text-box로 그 빈 자리를 잘라 내면 글자 자체를 기준으로 맞춰진다.
   잘라내기는 줄 박스를 만드는 요소, 즉 글자가 든 자식에 걸어야 듣는다.
   크롬 133 · 사파리 18.2부터 되고, 파이어폭스는 아직이라 기존 flex 정렬로 남는다.
   여러 줄로 흐르는 본문·설명에는 걸지 않는다 — 줄 간격이 흐트러진다. */
@supports (text-box: trim-both cap alphabetic) {
  .copt-tx b,
  .opt-sw em,
  .mood b, .mood i,
  .jchip b,
  .qplate-bar span,
  .qback, .btn-fill, .btn-line,
  .sc-mood i, .sc-mood b,
  .rgroup-t,
  .rgroup .rprize b,
  .rcoupon-code i,
  .rcoupon-code b,
  .rcoupon-hint span,
  .rcoupon-until,
  .story-hint,
  .ig {
    text-box: trim-both cap alphabetic;
  }
}

/* ---------- 한글 줄바꿈 ----------
   한글은 어디서 끊기는지가 그대로 보인다. 두 줄이 될 자리라면
   "둘째 줄에 두 글자만 남는" 모양이 아니라 두 줄의 길이가 비슷해야 읽힌다.

     word-break: keep-all  — 어절(띄어쓰기) 단위로만 끊는다. 단어 중간 끊김 방지
     text-wrap: balance    — 짧은 제목·라벨을 줄 길이가 고르게 나눠 준다
     text-wrap: pretty     — 본문은 마지막 줄에 한 단어만 남는 모양(고아 줄)을 막는다

   balance는 줄 수가 적은 덩어리에만 듣는다(브라우저가 몇 줄까지만 계산한다).
   그래서 제목·이름·라벨에는 balance, 여러 줄 설명에는 pretty를 쓴다.
   미지원 브라우저는 기존 줄바꿈으로 남는다 — 깨지지 않는다. */
.qtitle, .qtitle-lg, .qhelp, .qzone,
.opt-txt s,
.mood b,
.sc-ask, .sc-type, .sc-msg, .sc-picks b, .sc-mood b,
.rgroup-t, .rprize s,
.rcard b, .rcard p,
.cmodal-h, .jm-desc, .jm-pick,
.intro-ask b, .intro-ask em {
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.opt-txt b,
.jchip b, .jchip-tx b, .copt-tx b {
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}
.intro-copy, .rlegal, .story-hint, .dp-lede, .sheet-p p {
  word-break: keep-all;
  text-wrap: pretty;
}

/* ---------- 색 쓰임 정리 ----------
   브랜드가 준 색은 넷뿐이다 — 형광 #DBFF7E · 보라 #A6ADF9 · 검정 · 흰색.
   중간색이 필요할 때마다 눈대중으로 새 색을 만들면 브랜드에서 조금씩 미끄러진다.
   규칙을 둘로 줄인다.

     1) 카드 틴트는 페리윙클에서 유도한다 (직접 고르지 않는다)
     2) 회색은 만들지 않는다 — 검정의 투명도 단계로만 쓴다
        얹힌 배경색을 머금기 때문에 형광 위에서도 라벤더 위에서도 같은 계열로 읽힌다 */
:root {
  --ink-72: rgba(0,0,0,0.72);
  --ink-50: rgba(0,0,0,0.5);
  --ink-36: rgba(0,0,0,0.36);
  --ink-12: rgba(0,0,0,0.12);

  /* 페리윙클 22%를 흰색에 섞은 값.
     sRGB에서 섞으면 아주 밝은 쪽에서 파랑 채도가 먼저 죽어 '푸르딩딩한 회색'이 된다.
     oklab(사람이 느끼는 밝기 기준 좌표계)에서 섞어야 색조(235°)를 유지한 라벤더로 남는다.
     흰 제품컷 칸과는 밝기 14.7% 차이 — 경계가 보이면서 눈에 튀지 않는 최소치다.
     검정 글씨 대비 18:1로 가독성에는 영향이 없다. 미지원 브라우저는 위 폴백값. */
  --card: #EAEDFF;
  --card: color-mix(in oklab, var(--peri) 22%, #fff);
}

/* 존 색은 세 개다 — 01 형광 · 02 페리윙클 · 03 검정 (KV의 세 색 그대로).
   기분 화면은 존이 아니므로 존 색을 쓰지 않고 연한 형광으로 구분한다 */
.qplate[data-zone="0"] { background-color: var(--volt-mid); }

/* 올리브빛 회색(#2C3227 · --mute #6E7566)은 형광 배경에서 나온 색이라
   라벤더 카드 위에 올리면 탁해 보인다. 검정 투명도로 바꾼다 */
.rcard p, .opt-txt s { color: var(--ink-50); }
.opt-txt i, .mood i, .jm-en { color: var(--ink-36); }

/* 제품 사진이 앉는 칸은 언제나 흰 종이색 — 흰 배경 컷, 검정 컷 모두 여기서 살아난다 */
.opt-cut, .copt-im, .jg-im, .sc-thumb, .rp-im { background: var(--paper); }

/* ---------- 카드 세 줄의 위계 ----------
   영문 라벨 · 한글 이름 · 설명이 크기만 조금 다르고 굵기·색이 비슷해서
   맨 위와 맨 아래가 같은 줄처럼 읽혔다. 역할을 셋으로 확실히 갈라 놓는다.

     영문 라벨 — 아주 작게, 대문자, 자간 넓게 + 형광 대시. '분류표' 같은 것
     한글 이름 — 가장 크고 굵게, 자간 조여서 덩어리로. 카드의 주인공
     설명    — 작고 얇게, 흐리게. 곁들이는 말

   크기(8.5 → 15.5 → 11)와 굵기(800 → 800 → 500)와 색(36% → 100% → 44%)이
   동시에 어긋나야 세 줄로 보인다. 하나만 바꾸면 계속 비슷하게 읽힌다. */
.opt-txt { gap: 0; }
.opt-txt i {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--ink-36);
}
/* 대시는 글자와 같은 회색 계열로 — 형광은 '고른 것'을 알리는 데만 쓴다.
   여기에 형광을 얹으면 아직 고르지 않은 카드가 이미 골라진 듯 보인다 */
.opt-txt i::before {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 2px;
  background: rgba(17,17,17,0.26);
}
.opt-txt b {
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -0.042em;
  color: var(--ink);
}
.opt-txt s {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--ink-36);
}
/* 2열(지비츠) 카드는 라벨과 이름만 있으니 가운데로 모은다 */
.opt-duo .opt-txt i { justify-content: center; margin-bottom: 5px; }
.opt-duo .opt-txt b { font-size: 13.5px; }

/* 고른 카드는 형광이 배경이 되니 대시를 조금 진하게 해 묻히지 않게 한다 */
.opt:active .opt-txt i::before, .opt.is-pick .opt-txt i::before {
  background: rgba(17,17,17,0.42);
}
.opt:active .opt-txt s, .opt.is-pick .opt-txt s { color: rgba(0,0,0,0.55); }
.opt:active .opt-txt i, .opt.is-pick .opt-txt i { color: rgba(0,0,0,0.5); }

/* ---------- 인트로 제목 ----------
   둥근 디스플레이 서체(Bagel Fat One)를 얹어 봤지만 KV 워드마크는 둥글면서도
   기하학적인 반면 그 서체는 만화 같은 인상이라 격이 떨어졌다. 서체는 본문 고딕으로
   되돌리고 크기·자간·대비로 제목을 세운다. '디자인된 느낌'은 서체 교체가 아니라
   레터링 연출(마커·블롭 같은 장치)로 얹는 편이 브랜드와 안 어긋난다. */
/* 크기 기준을 높이(svh)에서 폭(vw)으로 옮긴다.
   줄바꿈은 높이가 아니라 폭 문제다. 360×800처럼 좁고 긴 화면에서 svh만 쓰면
   글자가 커져 '크록스™ / 바이브는?'으로 접힌다. 폭 320px에 이 글줄이 들어가는
   한계는 45px이라 11.5vw(360px에서 41px)로 여유를 남긴다. */
.intro-ask {
  --ask: clamp(32px, min(11.5vw, 5.4svh), 44px);
  position: relative;
  isolation: isolate;
}
.intro-ask b {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  margin: calc(var(--ask) * 0.05) auto 0;
  font-weight: 800;
  font-size: var(--ask);
  line-height: 1.14;
  letter-spacing: -0.045em;
}
/* 부제와 제목의 크기비를 0.618(황금비의 역수)로 묶는다.
   비가 2.0을 넘으면 부제가 '제목에 딸린 라벨'로 떨어져 나가고,
   1.3 아래면 둘이 경쟁한다. 1.62가 한 덩어리로 읽히는 구간이다.
   색도 같이 올린다 — 검정 58%는 형광 배경에서 5:1로 흐리고, 74%면 8.5:1이다. */
.intro-ask em {
  font-size: calc(var(--ask) * 0.618);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: rgba(0,0,0,0.74);
}

/* ---------- 인트로 제목 — 스티커 한 장 ----------
   형광 배경에 글자만 얹으면 제목이 '배경 위의 텍스트'로 흘러 첫 화면의 중심이 되지 못한다.
   그래서 흰 판을 씌워 손으로 붙인 스티커로 만든다. 알약 두 개로 나눠 봤더니 '오늘 나의'가
   따로 떠서 두 덩어리로 읽혔고, 한 장에 두 줄을 같이 담는 쪽이 한 오브젝트로 붙는다.

   힙하게 읽히는 건 라운드가 아니라 그림자와 각도다 — 흐림 없는 그림자(5px 밀기)로 종이
   두께를 만들고 2.5도만 틀어 붙인다. 흐린 그림자를 쓰면 웹 카드로, 각도가 없으면 배너로
   내려앉는다. 두 줄 모두 검정 한 색이고 크기와 굵기로만 위계를 낸다.

   판 안쪽 여백(좌우 22px + 테두리)만큼 글줄이 좁아지므로 기준 폭도 9.6vw로 낮춘다.
   기울인 판은 모서리가 좌우로 5px쯤 더 나가니 폭도 화면에 딱 맞추지 않는다. */
/* 셀렉터에 .intro-body를 붙이는 이유 — 위쪽 .intro-body h2 규칙이 요소 선택자를 하나 더
   갖고 있어 그냥 .intro-ask로는 margin이 먹지 않는다 (auto 가운데 정렬도 같이 무시됐다) */
.intro-body .intro-ask {
  --ask: clamp(20px, min(7.4vw, 3.8svh), 28px);
  position: relative;
  z-index: 2;
  width: max-content;
  max-width: calc(100% - 12px);
  /* 스티커는 KV 워드마크 바로 위에 붙어야 '포스터에 붙인 것'으로 읽힌다.
     떨어져 있으면 화면 제목이 되고, 그러면 KV와 둘이 각각 제목 노릇을 한다.
     기울인 판은 모서리가 아래로 6px, 그림자가 5px 더 내려오므로 18px를 띄워야
     'crocs' 글자에 닿지 않는다 */
  margin: 0 auto 18px;
  padding: 11px 20px 13px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 30px;
  box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(-2.5deg);
  text-align: center;
}
.intro-ask em {
  display: block;
  font-size: calc(var(--ask) * 0.5);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.intro-ask b {
  display: block;
  width: auto;
  margin: 2px 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-weight: 900;
  letter-spacing: -0.045em;
}

/* KV 상자는 그림 높이만큼만 갖는다. 상자를 늘려 놓고 그림을 위로 붙이면 그림 아래에
   빈 칸이 남아 설명글과 벌어진다. 남는 높이는 덩어리 바깥(위·아래)으로 흘려보낸다 */
.intro .intro-kv {
  flex: 0 1 auto;
  min-height: 0;
  margin: 0;
}
.intro .intro-kv img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center top;
}
/* 페리윙클 덩어리는 흰 판을 뚫고 나와 얼룩으로 보인다. KV에 이미 같은 덩어리가 있으니 뺀다 */
.intro-ask b::before { display: none; }

/* 첫 화면은 정지 화면으로 둔다 — KV 자체가 브랜드 자산이라 흔들면 인쇄물처럼 읽히지 않고,
   QR로 들어온 사용자가 첫 0.5초에 봐야 하는 건 움직임이 아니라 제목과 START다.
   화면 진입 효과(slide)도 첫 화면에서는 끈다. 로딩이 끝난 뒤 한 번 더 밀려 올라오면
   페이지가 늦게 뜬 것처럼 보인다. 단계 전환에는 그대로 남는다 */
.intro .intro-kv img { animation: none; }
.screen[data-screen="intro"].is-on { animation: none; }

/* 세로가 짧은 기기(568·640px)에서는 결과 카드가 390px밖에 안 되어 안쪽 요소가 카드 밖으로
   밀렸다. 카드는 overflow: hidden이라 넘친 자리가 조용히 잘린다 — 이 높이에서만 활자와
   여백을 한 단 낮춰 카드 안에 다 담기게 한다 */
@media (max-height: 700px) {
  .story-card { padding: 14px 14px 12px; }
  .sc-mid { padding-top: 8px; }
  .sc-head { font-size: clamp(29px, 9.2vw, 34px); }
  [data-skin="a"] .sc-head { font-size: clamp(36px, 11.2vw, 44px); }
  .sc-ask { margin-top: 10px; }
  .sc-box { margin-top: 10px; padding: 13px 12px 12px; }
  .sc-lead { margin-top: 0; padding: 4px 11px 5px; font-size: 11.5px; }
  .sc-type { font-size: clamp(19px, 6vw, 22px); }
  .sc-msg { margin-top: 8px; font-size: 12.5px; line-height: 1.52; }
  .sc-picks { gap: 6px; margin-top: 12px; }
  .sc-thumb { width: 44px; height: 44px; }
  .sc-foot { padding: 7px 11px 8px; }
  .story-bar { gap: 7px; }
}

/* 568px대(SE 1세대)에서는 한 단으로 부족했다 — 제품 칸과 여백을 한 번 더 줄인다 */
@media (max-height: 600px) {
  .story-card { padding: 12px 12px 10px; }
  .sc-head { font-size: clamp(26px, 8.4vw, 30px); }
  .sc-ask { margin-top: 8px; padding: 5px 11px 6px; }
  .sc-box { margin-top: 8px; padding: 11px 10px 10px; }
  .sc-lead { margin-top: 0; padding: 4px 10px 5px; font-size: 11px; }
  .sc-type { font-size: clamp(18px, 5.6vw, 20px); }
  .sc-msg { margin-top: 6px; font-size: 12px; line-height: 1.45; }
  .sc-picks { gap: 5px; margin-top: 9px; }
  .sc-thumb { width: 38px; height: 38px; }
  .sc-foot { padding: 6px 10px 7px; }
}

/* 320x568(가장 작은 기준 기기)에서는 카드 아래 검정 띠가 두 줄로 늘어 마지막 몇 px이 잘렸다.
   띠와 제품 칸만 한 번 더 낮춘다 — 여기가 바닥이다 */
@media (max-height: 580px) {
  .sc-mid { padding-top: 6px; }
  .sc-ask { margin-top: 6px; }
  .sc-box { margin-top: 6px; padding: 10px 9px 9px; }
  .sc-msg { margin-top: 5px; }
  .sc-picks { gap: 4px; margin-top: 8px; }
  .sc-thumb { width: 34px; height: 34px; border-radius: 10px; }
  .sc-foot { padding: 5px 9px 6px; }
  .sc-place, .sc-tags { font-size: 9px; }
}

/* ==========================================================================
   조각 표지 (.intro.bk) — KV를 조각으로 뜯어 얹는 첫 화면

   원래 2차 B안의 첫 화면이었다. 클라이언트 비교를 위해 A안과 B안의 첫 화면만 맞바꿨고,
   그 과정에서 두 표지가 한 파일에 같이 있어야 해서 이 표지를 .bk로 묶어 여기로 옮겼다.
   마크업에 .bk가 붙은 쪽이 이 표지를 쓴다 — 지금은 A안(view-ver2.php)이다.
   스티커 표지(위쪽 .intro-body .intro-ask)는 .bk가 없는 쪽, 지금은 B안이 쓴다.
   ========================================================================== */
/* ---------- 인트로 (조각 표지) ----------
   KV 한 장을 얹던 화면을 조각(assets/kv/parts/*)으로 다시 짰다.
   한 장이면 락업 · 손글씨 · 지비츠 간격이 그림 안에 박혀 화면에서 못 움직인다.
   조각으로 두면 제목과 락업 사이에 기간 줄을 끼우고, 지비츠만 키우는 배치가 된다.

   각 조각의 %값은 assets/kv/parts/parts.json의 원본 좌표에서 뽑았다.
   두 상자(.bk-lock 996x450 · .bk-stage 996x555)가 원본의 비례를 그대로 들고 있어
   안에서 조각을 옮기거나 키워도 서로 어긋나지 않는다. */
.intro.bk {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  justify-content: safe center;
  padding-top: calc(var(--safe-t) + 6px);
  padding-bottom: calc(12px + var(--safe-b));
}
.bk .intro-body {
  flex: 0 0 auto;
  min-height: auto;
  justify-content: center;
  gap: 0;
  padding: 0;
  overflow-x: clip;
}

/* 네 귀의 조준선 — 형광 지면이 넓게 비므로 인쇄물처럼 재는 표시를 둔다 */
/* ---------- 배경 데코 ----------
   형광 한 색으로 넓게 비는 지면에 결만 준다. 재단선 테나 레지스터 마크처럼 '표시'를
   얹으면 브라우저 테두리나 아이콘으로 오해되기 쉬워서, 아주 옅은 격자 하나로 끝낸다.
   먹색 5.5% · 26px 눈금이고, 가장자리로 갈수록 마스크로 사라진다 — 격자가 화면 끝에서
   끊기면 무늬로 보이고, 흐려지면 종이 결로 읽힌다. */
.intro.bk::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(20,21,15,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,21,15,0.055) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 45%, #000 35%, transparent 88%);
  mask-image: radial-gradient(120% 90% at 50% 45%, #000 35%, transparent 88%);
}
/* 판 표시(레지스터 마크 · 미세 라벨)는 접는다. 마크업은 남겨 둔다 — 다시 켤 수 있게 */
.bk-tick { display: none; }

/* 무대 조명은 뺐다 — 흰빛·페리윙클을 타원으로 깔면 형광 지면이 워낙 평평해서
   그라디언트가 끝나는 자리가 미세한 경계로 보인다(격자와 겹치면 더 도드라진다).
   알이 떠 보이게 하는 일은 컷마다 붙은 드롭섀도가 이미 하고 있다. */
.bk-stage img { position: relative; }

/* 제목 — 형광 위 검정 두 줄. 첫 줄은 라벨 크기로 눕히고 둘째 줄이 화면의 첫마디다 */
.bk .intro-ask {
  --ask: clamp(29px, min(9vw, 4.4svh), 38px);
  width: min(58%, 180px);
  max-width: none;
  margin: 0 auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  text-align: center;
}
.bk .intro-ask img {
  display: block;
  width: 100%;
  height: auto;
}
/* 참고본처럼 첫 줄도 제목의 한 부분으로 크게 — 라벨 크기로 눕히면 둘째 줄만 떠 보인다 */
.bk .intro-ask em {
  display: block;
  margin: 0 0 4px;
  font-size: calc(var(--ask) * 0.62);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.04em;
  color: var(--b-ink, var(--ink));
}
.bk .intro-ask b {
  display: block;
  margin: 0;
  font-size: var(--ask);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.048em;
  color: var(--peri);
}
.bk .intro-ask b .ask-rest { color: var(--b-ink, var(--ink)); }
.bk .intro-ask b sup { font-size: 0.36em; vertical-align: 1.1em; }

/* 락업 — 원본 비례(996x450) 상자 안에 네 조각.
   튤립이 STUDIO의 T 자리에 앉는다(원본에서 T가 튤립이다) */
.bk-lock {
  position: relative;
  width: min(92%, 300px);
  margin: clamp(4px, 1.1svh, 10px) auto 0;
  aspect-ratio: 996 / 450;
}
.bk-lock img { position: absolute; height: auto; }
.bk-crocs  { left: 30.12%; top:  0.00%; width: 39.46%; }
.bk-studio { left:  0.00%; top: 24.67%; width: 99.90%; }
.bk-tulip  { left: 17.37%; top: 18.67%; width: 24.00%; }
.bk-script { left:  0.00%; top: 74.22%; width: 100%;   }

/* 기간 · 주소 — 이미지에서 떼어 글자로 짠 줄. 대괄호는 원본 인쇄물의 표기를 따른다.
   숫자는 tabular로 고정해 날짜가 흔들리지 않게 한다 */
.bk-venue {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 날짜와 주소는 항상 두 줄. 한 줄로 붙이면 SE에서 칸이 화면 끝까지 늘어난다 */
  gap: 2px;
  text-align: center;
  /* 상자는 글자 폭만 — 지면 끝까지 늘리면 테두리가 띠처럼 보여 락업과 경쟁한다 */
  align-self: center;
  width: fit-content;
  max-width: 100%;
  margin: clamp(6px, 1.2svh, 10px) auto 0;
  padding: 6px 18px;
  border: 1.5px solid var(--b-ink, var(--ink));
  /* 폭이 좁은 활자 — 가변 폰트의 wdth 축을 72%로 좁힌다. 좁은 대문자는 자간을
     조금 벌려야 붙어 보이지 않는다 */
  font-family: "Archivo", "Outfit", sans-serif;
  font-stretch: 72%;
  font-size: clamp(9.5px, 3.1vw, 13px);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--b-ink, var(--ink));
  white-space: nowrap;
}
.bk-venue b,
.bk-venue span { display: block; }
.bk-venue b { font-weight: 800; font-variant-numeric: tabular-nums; }
.bk-venue b::before { content: "["; margin-right: 2px; }
.bk-venue b::after  { content: "]"; margin-left: 2px; }
.bk-venue span { font-weight: 700; }

/* 지비츠 무대 — 나비를 크게, 작은 참은 원본이 놓였던 자리에 흩는다 */
.bk-stage {
  position: relative;
  /* 무대는 그림일 뿐이라 손가락을 받지 않는다 — 화면이 낮으면 나비가 아래 버튼 위로
     겹쳐 앉아 버튼이 눌리지 않았다 */
  pointer-events: none;
  width: min(92%, 320px);
  margin: clamp(6px, 1.4svh, 12px) auto 0;
  aspect-ratio: 1100 / 704;
}
.bk-stage img {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 7px 18px rgba(20,21,15,0.13));
}
.bk-fly { left: 0; top: 0; width: 100%; }
.bk-c1  { left:  0.00%; top: 21.62%; width: 10.84%; }
.bk-c2  { left:  5.12%; top: 65.77%; width:  7.53%; }
.bk-c3  { left: 43.47%; top:  3.96%; width:  7.13%; }
.bk-c4  { left: 91.67%; top: 21.62%; width:  5.42%; }
.bk-c5  { left: 85.04%; top: 69.91%; width: 14.96%; }

.intro.bk .intro-copy {
  max-width: 30ch;
  margin: clamp(8px, 1.5svh, 12px) auto 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--b-ink, var(--ink));
}
/* 형광 지면에서는 마커를 흰색으로 — 형광 위에 형광을 깔 수 없다 */
.intro.bk .intro-copy .hl {
  --mark: #fff;
  font-size: 1.18em;
}
/* 형광 위의 검정 바 — 첫 화면에서 유일한 어두운 덩어리라 시선이 바로 붙는다 */
.intro.bk .btn-fill { background: var(--b-ink, var(--ink)); color: var(--volt); }
.intro.bk .intro-foot { padding: clamp(8px, 1.6svh, 14px) 0 0; }

/* 공유 캡처 — 결과 카드만 1080×1350(4:5)에 맞춰 뜬다. 버튼·안내는 카드 밖이라 안 들어간다 */
.share-stage {
  position: fixed;
  left: -24000px;
  top: 0;
  width: 1080px;
  height: 1350px;
  overflow: hidden;
  background: var(--volt);
  pointer-events: none;
  z-index: -1;
}
.share-stage .story-card {
  width: 1080px;
  height: 1350px;
  margin: 0;
  padding: 44px 56px 40px;
  border-radius: 0;
  box-sizing: border-box;
  flex: none;
}
.share-stage .sc-top { flex-wrap: nowrap; }
.share-stage .lockup { font-size: 40px; gap: 12px; }
.share-stage .lockup sup { font-size: 16px; }
.share-stage .sc-venue { font-size: 22px; }
.share-stage .sc-head { font-size: 108px; margin-top: auto; }
.share-stage .sc-head i { -webkit-text-stroke-width: 4.4px; }
.share-stage .sc-ask {
  align-self: center;
  margin-top: 22px;
  padding: 12px 28px 14px;
  font-size: 26px;
}
.share-stage .sc-title {
  display: block;
  width: auto;
  max-width: 88%;
  max-height: 430px;
  height: auto;
  margin: auto auto 0;
  object-fit: contain;
}
.share-stage .sc-box {
  margin-top: 28px;
  padding: 32px 28px 28px;
  border-width: 3px;
  border-radius: 28px;
}
.share-stage .sc-lead {
  font-size: 26px;
  padding: 10px 24px 12px;
}
.share-stage .sc-box .sc-type { font-size: 56px; }
.share-stage .sc-box .sc-msg { margin-top: 10px; font-size: 26px; }
.share-stage .sc-box .sc-picks { gap: 18px; margin-top: 26px; }
.share-stage .sc-box .sc-picks b { font-size: 22px; }
.share-stage .sc-foot {
  margin: 28px 0 auto;
  padding: 16px 32px 18px;
}
.share-stage .sc-tags { font-size: 24px; }

/* 공유 이미지 미리보기 — ?preview=share 로만 연다. 퀴즈를 돌리지 않고 1080×1350을 본다 */
.share-look {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow: auto;
  background: #111;
  padding: 18px 16px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.share-look p {
  margin: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.share-look img {
  display: block;
  width: min(100%, 420px);
  height: auto;
  background: #222;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}