/* 광화문 사일런트 시네마 — 인생영화 월드컵 */

/*
  시안 36 · 마지막 장면.

  차게 식은 화면에 온기 하나 — 어두운 극장에서 스크린만 빛나는 구조다.
  화면 전체를 낮춰두면 버튼 하나만 따뜻해도 확실히 눈에 들어온다.
  필름 띠는 배경보다 더 어둡게 눌러서 그림이 떠 보이게 한다.
*/
:root {
  --bg-top: #2b3138;
  --bg-bottom: #1d2228;
  --surface: #333a42;
  --surface-2: #262d34;

  /* 맨 위 행사명 띠 — 여기만 밝다 */
  --head: #dfe6ea;
  --head-tx: #1d2228;

  /* 흐르는 필름 */
  --band: #12161a;
  --band-line: #080b0d;
  --hole: #05080a;

  --card: #2f363d;
  --border: #3a424a;
  --border-2: #4a545e;

  /* 화면에서 유일하게 따뜻한 색 */
  --amber: #f0b878;
  --amber-hi: #f6c894;
  /* 투명도를 섞어 쓰는 곳(테두리·번짐)용. 색을 바꾸면 여기만 같이 고치면 된다. */
  --amber-rgb: 240, 184, 120;
  --cyan: #8fb8c9;

  --text: #f1f3f4;
  --text-mid: #c2c9ce;
  --text-muted: #949ba1;
  --text-dim: #6f777e;
  --error: #e2705c;
  --on-amber: #1d2228;
  --shadow-cta: 0 10px 30px rgba(240, 184, 120, 0.18);

  /* 접수 티켓 — 차가운 종이에 어두운 잉크 */
  --paper: #eaeef1;
  --paper-ink: #1d2228;
  --paper-soft: #7d878f;
  --paper-line: #c1ccd3;
  --paper-accent: #c07a2e;
}

* { box-sizing: border-box; }

/*
  hidden 을 건 요소는 무슨 일이 있어도 사라져야 한다.
  클래스에 display 를 주면 브라우저 기본 [hidden] 규칙을 이겨버려서,
  안 보이는 요소가 화면을 덮고 탭을 삼키는 사고가 난다.
*/
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-bottom);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;

  /*
    iOS 사파리는 좁은 칼럼의 글자를 제멋대로 키운다(text autosizing).
    그 탓에 제목이 "시네 / 마" 로 쪼개지고, 부푼 글자가 대결 카드의
    일러스트 자리를 빼앗았다. 우리가 정한 크기를 그대로 쓰게 한다.
  */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* 한글은 낱글자가 아니라 단어 단위로 줄을 넘긴다 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

body {
  font-family: 'Pretendard Variable', Pretendard, system-ui, -apple-system, sans-serif;
  color: var(--text);
  min-height: 100dvh;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  background-attachment: fixed;
}

button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--amber); text-decoration: none; }

.eyebrow {
  font: 700 16px/1 Inter, sans-serif;
  letter-spacing: 0.28em;
  color: var(--cyan);
  text-transform: uppercase;
}
.label-sm { font-weight: 600; font-size: 17.5px; line-height: 1; color: var(--text-muted); }
.optional { color: var(--text-dim); }

/* ---------- 레이아웃 ---------- */

.shell {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1; /* 먼지는 내용 뒤에 */
}

.screen {
  display: none;
  flex: 1;
  flex-direction: column;
  padding: 24px 24px 28px;
  animation: fadeUp 0.32s ease both;
}
.screen.active { display: flex; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.spacer { margin-top: auto; }

/* ---------- 버튼 ---------- */

.btn-primary {
  width: 100%;
  height: 66px;
  border: 0;
  border-radius: 13px;
  background: var(--amber);
  color: var(--on-amber);
  font-weight: 700; font-size: clamp(21px, 6.2vw, 28px); line-height: 1;
  letter-spacing: -0.01em;
  box-shadow: var(--shadow-cta);
  transition: background 0.15s ease;
}
.btn-primary:hover:not(:disabled) { background: var(--amber-hi); }
.btn-primary:disabled { opacity: 0.35; box-shadow: none; cursor: not-allowed; }

.btn-ghost {
  height: 58px;
  background: none;
  border: 1px solid var(--border-2);
  border-radius: 11px;
  color: var(--text-mid);
  font-weight: 600; font-size: clamp(17px, 4.8vw, 22px); line-height: 1;
  transition: border-color 0.15s ease;
}
.btn-ghost:hover { border-color: var(--text-dim); }

.btn-text {
  height: 48px;
  padding: 0 18px;
  background: none;
  border: 0;
  font-weight: 600; font-size: 19px; line-height: 1;
  color: var(--text-dim);
}
.btn-text:hover { color: var(--text-muted); }
.btn-text:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-row { display: flex; gap: 8px; }
.btn-row > * { flex: 1; }

/* ---------- 01 랜딩 ----------
   제목 → 안내 → 흐르는 필름 → 시작 버튼 → 소요시간 → 행사 개요.
   후보작은 오른쪽에서 왼쪽으로 계속 흘러간다.                      */

#screen-landing { padding: 0; position: relative; }
#screen-landing.active { display: block; }

/*
  어떤 기종에서도 "월드컵 시작하기"가 첫 화면에 보여야 한다.
  글자와 버튼은 고정 크기로 두고, 필름 높이만 남는 공간을 흡수한다.
*/
.land {
  height: 100dvh; min-height: 500px;
  display: flex; flex-direction: column;
}
/*
  맨 위 행사명 머리띠.
  위 모서리만 둥글고 밑단은 평평하다 — 카드가 화면 위에서 시작하는 모양.
*/
.land-top {
  flex: none; text-align: center;
  padding: 15px 20px;
  background: var(--head);
  border-radius: 9px 9px 0 0;
  font-weight: 700; font-size: 17px; line-height: 1.3;
  letter-spacing: 0.13em; color: var(--head-tx);
}

.land-head { flex: none; padding: 28px 22px 0; text-align: center; }
.program { margin: 0; font-weight: 700; font-size: 40px; line-height: 1.1; letter-spacing: -0.045em; }
.program-desc { flex: none; margin: 10px 0 0; font-weight: 500; font-size: 18.5px; line-height: 1.65; color: var(--text-muted); text-wrap: pretty; }
/* 장소 이름만 포인트 색으로 — 조사(에서)는 본문 색 그대로 둬야 자연스럽다 */
.program-desc b { font-weight: 700; color: var(--amber); }

/*
  결과·공유 화면의 버튼 자리.

  전에는 남는 세로를 전부 버튼 위에 몰아줘서(margin-top:auto) 버튼이 화면 맨 아래에 붙었다.
  짧은 화면에서는 맞아떨어지는데 큰 화면에서는 한줄평과 버튼 사이가 뻥 뚫려 따로 논다.
  버튼은 내용 바로 아래에 붙이고, 남는 자리는 ::after 가 아래에서 받아낸다.
*/
.result-foot { flex: none; padding-top: 30px; display: flex; flex-direction: column; gap: 10px; }
#screen-result::after,
#screen-shared::after { content: ''; flex: 1 1 auto; }

/* ---------- 참석 확정 ---------- */

.confirm-title { margin: 16px 0 0; font-weight: 700; font-size: 34px; line-height: 1.15; letter-spacing: -0.04em; }
.confirm-sub { margin: 12px 0 0; font-weight: 500; font-size: 17px; line-height: 1.7; color: var(--text-muted); }

.ticket-lite {
  margin-top: 22px; padding: 18px 20px;
  border: 1px solid var(--border-2); border-radius: 14px;
  background: var(--surface-2);
  display: grid; gap: 11px;
}
.tl-row { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.tl-row span { font-weight: 500; font-size: 16px; color: var(--text-muted); }
.tl-row b { font-weight: 700; font-size: 17px; color: var(--text); }
.tl-row:first-child b { font-size: 24px; color: var(--amber); letter-spacing: 0.02em; }

/* ---------- 흐르는 필름 ---------- */

.reelwrap {
  flex: none;
  margin-top: 24px;
  display: flex; flex-direction: column;
  /* 배경보다 더 어둡게 눌러야 그림이 떠 보인다 */
  background: var(--band);
  border-top: 1px solid var(--band-line); border-bottom: 1px solid var(--band-line);
  overflow: hidden;
  touch-action: pan-y;              /* 눌러서 멈추되 세로 스크롤은 막지 않는다 */
}

/*
  천공(필름 구멍)도 그림과 같은 속도로 왼쪽으로 흘러야 한다.
  안쪽 <i> 를 화면보다 넉넉히 늘려두고 한 칸(26px)만큼 움직이면
  무늬가 되풀이되므로 이어짐이 끊기지 않는다.
*/
.perf { flex: none; height: 14px; overflow: hidden; }
.perf i {
  display: block; height: 100%; width: 200%;
  background: repeating-linear-gradient(
    to right, var(--hole) 0 9px, transparent 9px 26px);
  background-size: 26px 100%;
  animation: perfrun var(--perf-dur, 1.4s) linear infinite;
}
@keyframes perfrun { to { transform: translateX(-26px); } }

/* 일러스트가 화면 세로의 약 3/10 — 1/3 은 화면에서 차지하는 비중이 너무 컸다 */
.reel { flex: none; height: clamp(135px, 30dvh, 270px); overflow: hidden; padding: 7px 0; }
.track {
  display: flex; gap: 10px;          /* 그림끼리 붙지 않게 */
  height: 100%; width: max-content;
  animation: reelrun var(--reel-dur, 40s) linear infinite;
}
/* 눌러도 아무 일이 없다 — 보여주기만 한다 */
.track .frame { flex: none; height: 100%; }
/* 원본 비율 그대로 지나간다 — 높이만 맞추고 폭은 그림이 정한다 */
.track img {
  display: block; height: 100%; width: auto;
  border-radius: 4px; background: var(--card);
}
@keyframes reelrun { to { transform: translateX(calc(-50% - 5px)); } }

/* 손을 대고 있는 동안만 멈춘다 — 떼면 다시 흐른다 */
.reelwrap.held .track,
.reelwrap.held .perf i { animation-play-state: paused; }

/*
  마우스가 있는 기기에서만 hover 로 멈춘다.
  터치 화면에서는 한번 탭하면 :hover 가 그대로 눌어붙어,
  손을 떼도 필름이 계속 멈춰 있었다.
*/
@media (hover: hover) and (pointer: fine) {
  .reelwrap:hover .track,
  .reelwrap:hover .perf i { animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce) {
  .track, .perf i { animation: none; }
  .reel { overflow-x: auto; }
}

/* ---------- 랜딩 아래쪽 ---------- */

.land-foot { flex: none; padding: 14px 22px 20px; }

.about { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border); }
.about-h { font-weight: 700; font-size: 16.5px; line-height: 1.3; color: var(--text-mid); }
.about-p { margin-top: 7px; font-weight: 400; font-size: 15.5px; line-height: 1.6; color: var(--text-muted); }
.about-p:first-child { margin-top: 0; }
.about-p em { font-style: normal; color: var(--cyan); }

/* 서울시 보조사업 표기 — 읽히되 눈에 띄지 않게 */
.credits {
  /* 크기도 밝기도 바로 위 안내 줄(.about-p)과 같게 */
  margin-top: 7px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 2px 14px; font-size: 15.5px; line-height: 1.6; color: var(--text-muted);
}
.c-orgs { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.c-role { font-weight: 400; }
.org-name { font-weight: 600; margin-right: 8px; }
.org-name:last-child { margin-right: 0; }
/* 두 로고는 생김새가 달라 높이를 따로 준다 — 눈에 보이는 크기를 맞추려고 */
.org-logo { width: auto; display: block; margin-right: 10px; }
.org-logo:last-child { margin-right: 0; }
.org-logo.bom { height: 30px; }        /* 세로로 긴 그림 */
.org-logo.seoul { height: 17px; }      /* 가로로 긴 글자 로고 */
/*
  글자만 있는 로고라 휘장보다 커 보인다 — 한 단계 낮춘다.
  휘장은 심볼이 글자 위로 솟아 있어 글자 밑선이 서로 어긋난다. 살짝 내려 밑선을 맞추고,
  앞의 간격도 줄여 휘장 쪽에 붙인다.
*/
.org-logo.shinmun { height: 14.5px; position: relative; top: 2px; margin-left: -8px; }

.cta-note { text-align: center; margin-top: 9px; font-weight: 500; font-size: 17px; line-height: 1.4; color: var(--text-muted); }

.notice {
  margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--border-2); border-radius: 10px;
  background: var(--surface-2);
  font-weight: 400; font-size: 16.5px; line-height: 1.6; color: var(--text-mid);
}
/* 한 기기로 다음 사람이 응모하러 가는 길 */
.notice a { display: inline-block; margin-top: 6px; font-weight: 600; color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }

/*
  세로가 짧은 기기 대응.

  전에는 여기서 글자를 줄였는데, 웬만한 폰의 브라우저 화면 높이가 700px 아래라
  사실상 거의 모든 기기에서 글자가 도로 작아지고 있었다. 버튼도 20.5px 로 묶였다.
  글자는 그대로 두고, 필름 높이와 여백이 먼저 줄어들게 한다.
*/
/*
  필름 높이는 33dvh 라 화면에 맞춰 스스로 줄어든다.
  여기서는 여백만 줄인다 — 높이를 또 묶으면 필름이 잘린다.
*/
@media (max-height: 700px) {
  .land-head { padding-top: 22px; }
  .reelwrap { margin-top: 18px; }
}
@media (max-height: 620px) {
  .reelwrap { margin-top: 14px; }
  .land-foot { padding-bottom: 14px; }
  .about { margin-top: 14px; padding-top: 11px; }
}

/* ---------- 홈으로 돌아가기 ---------- */

.screen-top { display: flex; align-items: center; margin-bottom: 14px; flex: none; }
.btn-home {
  /* '홈' 과 '이전' 이 나란히 놓이므로 글자 수와 상관없이 박스 크기를 맞춘다 */
  height: 36px; min-width: 78px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: none; border: 1px solid var(--border); border-radius: 9px;
  color: var(--text-mid); font-weight: 600; font-size: 17.5px; line-height: 1;
  touch-action: manipulation;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.btn-home:hover { border-color: var(--border-2); color: var(--text-mid); }
.btn-home svg { flex: none; }

/* ---------- 02 월드컵 ---------- */

#screen-match { padding: 0; }

.progress-track { height: 2px; background: var(--border); flex: none; }
.progress-fill {
  height: 2px; width: 0;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(143, 195, 189, 0.6);
  transition: width 0.28s ease;
}

.match-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px 10px; flex: none;
}
.round-label { font: 700 17.5px/1 Inter, sans-serif; letter-spacing: 0.14em; color: var(--cyan); }
/* 행사명은 표시가 아니라 서명이다 — 라운드 표시보다 조용해야 한다 */
.match-brand {
  margin-left: auto;
  font-weight: 600; font-size: 14px; line-height: 1;
  letter-spacing: 0.06em; color: var(--text-muted);
  white-space: nowrap;
}

.match-area {
  flex: 1; display: flex; flex-direction: column;
  padding: 4px 20px 0; min-height: 0;
}

/*
  카드 = 일러스트 그 자체.

  칸을 정해두고 그림을 채우면 반드시 어딘가 잘린다.
  그래서 반대로 했다 — 그림이 자기 비율대로 들어갈 수 있는 만큼 커지고,
  카드 테두리가 그 그림에 맞춰 붙는다. 잘리는 곳이 없다.

  높이가 모자라면 <img> 가 알아서 작아지므로(max-height) 어떤 기종에서도 넘치지 않는다.
  두 그림 모두 720×405 이고 자리도 같으니 크기는 항상 서로 같다.
*/
.match-card {
  flex: 1 1 0;
  min-height: 0;
  display: flex;                     /* 안쪽 카드를 남는 자리 가운데에 둔다 */
  padding: 0; border: 0; background: none;
  color: inherit; text-align: left;
  transition: opacity 0.28s ease;
}

.m-inner {
  margin: auto;                      /* 남는 자리는 여백으로 */
  position: relative;
  display: flex;
  max-width: 100%; max-height: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
  transition: border-color 0.2s ease, box-shadow 0.28s ease;
}
.match-card:hover .m-inner { border-color: rgba(var(--amber-rgb), 0.35); }

/* 그림이 크기의 주인이다. 절대 늘리거나 자르지 않는다. */
.m-inner .m-art {
  display: block;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
}

/* 글자는 그림 위 아래쪽 그늘에 얹는다 — 자리를 뺏지 않는다 */
.m-inner .m-text {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 46px 16px 14px;
  background: linear-gradient(180deg,
    rgba(28, 30, 34, 0) 0%, rgba(28, 30, 34, 0.72) 42%, rgba(28, 30, 34, 0.94) 100%);
  pointer-events: none;
}
.m-inner .m-title {
  display: block;
  /* 제목은 한 줄. 좁은 화면에서는 글자가 줄어들어 끝까지 다 보인다. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* 화면 폭의 8.8% — 어떤 기종에서도 카드 대비 같은 비율로 크게 보인다 */
  font-weight: 700; font-size: clamp(26px, 8.8vw, 38px); line-height: 1.2; letter-spacing: -0.035em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}
.m-inner .m-meta {
  display: block; margin-top: 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* 그림 위에 얹히므로 본문보다 밝게 — 차가운 계열로 맞춘다 */
  font-weight: 500; font-size: clamp(16px, 4.6vw, 20px); line-height: 1.3; color: #d3dade;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.match-card.picked .m-inner {
  border-color: rgba(var(--amber-rgb), 0.75);
  box-shadow: 0 0 0 1px rgba(var(--amber-rgb), 0.45), 0 0 42px rgba(var(--amber-rgb), 0.22);
}
.match-card.picked .m-title { color: var(--text); }
.match-card.dropped { opacity: 0.28; }

/* ---------- 길게 눌러 사진첩에 저장 ---------- */

.img-save {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(28, 30, 34, 0.95);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  overflow-y: auto;
  opacity: 0; transition: opacity 0.2s ease;
}
.img-save.show { opacity: 1; }
.img-save[hidden] { display: none; }

.is-box { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 420px; width: 100%; }
.is-hint { text-align: center; font-weight: 600; font-size: 19.5px; line-height: 1.55; color: var(--text); }
.is-hint b { color: var(--amber); }
.img-save img {
  width: 100%; height: auto; display: block;
  border-radius: 12px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.6);
  /* 길게 누르면 저장 메뉴가 떠야 한다 — 기본 동작을 막지 않는다 */
  -webkit-touch-callout: default;
  -webkit-user-select: auto; user-select: auto;
}
.img-save .btn-ghost { width: 100%; }

/* ---------- 라운드 시작 안내 ---------- */

/*
  화면을 덮지 않는다. 가운데에 작은 박스만 잠깐 떴다 사라진다.
  바깥은 투명하지만 탭은 받아서, 아무 데나 누르면 바로 건너뛴다.
*/
.round-intro {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; transition: opacity 0.2s ease;
}
/*
  이 한 줄이 없으면 위의 display:flex 가 브라우저 기본 [hidden]{display:none} 을
  이겨서, 안 보이는(opacity:0) 팝업이 화면을 계속 덮고 탭을 전부 삼킨다.
*/
.round-intro[hidden] { display: none; }
.round-intro.show { opacity: 1; }
.ri-inner {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 26px 46px 30px;
  border: 1px solid rgba(var(--amber-rgb), 0.5);
  border-radius: 20px;
  background: rgba(48, 51, 57, 0.97);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55);
  transform: translateY(8px) scale(0.96);
  transition: transform 0.28s cubic-bezier(.2,.8,.3,1);
}
.round-intro.show .ri-inner { transform: none; }

.ri-eyebrow { font-weight: 700; font-size: 18.5px; line-height: 1; letter-spacing: 0.14em; color: var(--cyan); }
.ri-round { font-weight: 700; font-size: 64px; line-height: 1; letter-spacing: -0.04em; color: var(--amber); }
@media (prefers-reduced-motion: reduce) {
  .round-intro, .ri-inner { transition: none; }
}

.vs { display: flex; align-items: center; gap: 14px; padding: 9px 2px; flex: none; transition: opacity 0.28s ease; }
.vs .line { flex: 1; height: 1px; background: var(--border-2); }
.vs .txt {
  font: 700 22.5px/1 Inter, sans-serif; letter-spacing: 0.16em;
  color: var(--amber);
  padding: 7px 15px; border: 1.5px solid var(--amber); border-radius: 999px;
  background: rgba(var(--amber-rgb), 0.09);
}
.vs.dim { opacity: 0.4; }

.match-foot { height: 62px; flex: none; display: flex; align-items: center; justify-content: center; }

/* ---------- 03 결과 ---------- */

/* 우승작은 자르지 않고 원본 비율(3:2) 그대로 보여준다 */
.result-art {
  margin: 22px 0 0;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
}
.result-art:empty { display: none; }
.result-art img,
.result-art svg { width: 100%; height: 100%; object-fit: cover; display: block; }

.result-year { margin-top: 22px; font: 600 17.5px/1 Inter, sans-serif; letter-spacing: 0.14em; color: var(--text-muted); }
.result-title { margin-top: 11px; font-weight: 700; font-size: 38px; line-height: 1.14; letter-spacing: -0.04em; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.result-meta { margin-top: 13px; font-weight: 500; font-size: 18.5px; line-height: 1.4; color: var(--text-muted); }
.result-tagline { margin-top: 16px; font-weight: 500; font-size: 20px; line-height: 1.6; color: var(--text); opacity: 0.88; }

/* 공유 링크로 들어온 화면 */
.shared-ask {
  margin: 22px 0 0; padding: 15px 17px;
  border-left: 2px solid var(--amber);
  background: linear-gradient(90deg, rgba(var(--amber-rgb), 0.07), transparent);
  font-weight: 600; font-size: 19px; line-height: 1.7; color: var(--text-mid);
}

.link-center { text-align: center; padding-top: 6px; }
.link-center a { font-weight: 600; font-size: 18px; line-height: 1; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 04 응모 폼 ---------- */

.steps { display: flex; gap: 6px; flex: none; }
.steps div { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.steps i { height: 2px; background: var(--border); display: block; }
.steps.s1 div:nth-child(1) i, .steps.s2 div:nth-child(-n+2) i, .steps.s3 i { background: var(--cyan); }
.steps span { font-weight: 600; font-size: 16.5px; line-height: 1; color: var(--text-muted); }
.steps.s1 div:nth-child(1) span, .steps.s2 div:nth-child(2) span, .steps.s3 div:nth-child(3) span { color: var(--text); }

.form-title { margin-top: 22px; font-weight: 700; font-size: 27px; line-height: 1.3; letter-spacing: -0.035em; }
.form-sub { margin-top: 13px; font-weight: 500; font-size: 18.5px; line-height: 1.65; color: var(--text-muted); }
/* 인원 선택 칸이 없어서 '2인 좌석' 은 여기서만 알려준다 — 첫 화면의 '광화문' 과 같은 포인트 색 */
.form-sub b { font-weight: 700; color: var(--amber); }

.fields { margin-top: 26px; display: flex; flex-direction: column; gap: 22px; }
.field > .label-sm { display: block; margin-bottom: 9px; }

.input {
  width: 100%; height: 56px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 0 15px;
  font-weight: 600; font-size: 20px; line-height: 1;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input::placeholder { color: var(--text-dim); }
.input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(143, 195, 189, 0.12); }
.input.tel { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.input.invalid { border-color: var(--error); box-shadow: none; }

.hint { margin-top: 9px; font-weight: 600; font-size: 17px; line-height: 1.4; color: var(--cyan); }
.hint.error { color: var(--error); }

.day-options { display: flex; flex-direction: column; gap: 9px; }
.day-card {
  width: 100%; height: 66px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 18px;
  display: flex; align-items: center; justify-content: space-between;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.day-card .d-name { font-weight: 600; font-size: 21.5px; line-height: 1; }
.day-card .radio { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border-2); flex: none; display: flex; align-items: center; justify-content: center; }
.day-card[aria-checked='true'] { border-color: var(--cyan); box-shadow: inset 0 0 40px rgba(143, 195, 189, 0.05); }
.day-card[aria-checked='true'] .radio { border-color: var(--cyan); }
.day-card[aria-checked='true'] .radio::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); }

.toggle { display: flex; gap: 6px; padding: 5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.toggle button {
  flex: 1; height: 48px; border: 0; border-radius: 8px; background: none;
  font-weight: 600; font-size: 19.5px; line-height: 1; color: var(--text-muted);
  transition: background 0.15s ease, color 0.15s ease;
}
.toggle button[aria-pressed='true'] { background: var(--border-2); color: var(--text); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button {
  height: 46px; padding: 0 17px;
  border: 1px solid var(--border); border-radius: 23px; background: none;
  font-weight: 600; font-size: 19px; line-height: 1; color: var(--text-muted);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.chips button[aria-pressed='true'] { border-color: var(--cyan); color: var(--text); background: rgba(143, 195, 189, 0.07); }

.consent-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.consent-head { min-height: 58px; display: flex; align-items: center; gap: 12px; padding: 15px 16px; width: 100%; background: none; border: 0; text-align: left; }
.consent-head.standalone { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.consent-head .txt { flex: 1; font-weight: 600; font-size: 19.5px; line-height: 1.5; }
.req { color: var(--amber); }
.opt { color: var(--text-muted); }

.checkbox { width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--border-2); flex: none; display: flex; align-items: center; justify-content: center; }
.checkbox svg { display: none; }
[aria-checked='true'] > .checkbox { background: var(--amber); border-color: var(--amber); }
[aria-checked='true'] > .checkbox svg { display: block; }

.consent-toggle {
  width: 100%; border: 0; border-top: 1px solid var(--border); background: none;
  padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; font-size: 17.5px; line-height: 1; color: var(--text-muted);
}
.consent-toggle svg { transition: transform 0.2s ease; }
.consent-toggle[aria-expanded='true'] svg { transform: rotate(180deg); }
.consent-detail { padding: 14px 16px 16px; background: var(--bg-top); display: flex; flex-direction: column; gap: 8px; }
.consent-detail[hidden] { display: none; }
.consent-detail .row { display: flex; gap: 10px; font-weight: 500; font-size: 17px; line-height: 1.65; }
.consent-detail .row b { width: 64px; flex: none; color: var(--text-dim); font-weight: 400; }
.consent-detail .row span { color: var(--text-muted); }

.age-note { margin-top: 20px; font-weight: 500; font-size: 17.5px; line-height: 1.6; color: var(--text-muted); }

.summary { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.summary .cap { font: 400 14.5px/1 Inter, sans-serif; letter-spacing: 0.18em; color: var(--text-dim); }
.summary .row { display: flex; justify-content: space-between; gap: 14px; font-weight: 600; font-size: 18px; line-height: 1.5; }
.summary .row span:first-child { color: var(--text-muted); }
.summary .row span:last-child { color: var(--text-mid); text-align: right; }

.form-error { margin-top: 16px; font-weight: 600; font-size: 18px; line-height: 1.6; color: var(--error); }

/* ---------- 05 완료 ---------- */

#screen-done { align-items: center; padding-top: 40px; }

/*
  접수증은 슬레이트다 — 촬영 직전에 드는 물건이라 '아직 정해지지 않았다' 가 그대로 읽힌다.
  극장표 모양이면 추첨 전인데 자리가 확보된 것처럼 보인다.
*/
.slate {
  width: 100%; max-width: 320px;
  background: var(--band); border: 1px solid var(--border-2); border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* 위쪽 클래퍼 — 흑백 사선 띠 */
.slate-bar {
  height: 30px;
  background: repeating-linear-gradient(115deg, var(--text) 0 15px, var(--band) 15px 30px);
  border-bottom: 1px solid var(--border-2);
}
.slate-body { padding: 17px 19px 19px; }
.sl-cap { font: 500 13px/1 'IBM Plex Mono', monospace; letter-spacing: 0.22em; color: var(--text-dim); }
.sl-prod { margin-top: 6px; font-weight: 700; font-size: 19px; line-height: 1.35; color: var(--text); }
.sl-main { margin-top: 17px; display: flex; gap: 17px; align-items: flex-start; }
.sl-num {
  margin-top: 5px;
  font: 500 40px/1 'IBM Plex Mono', monospace; letter-spacing: 0.01em;
  color: var(--amber); text-shadow: 0 0 24px rgba(var(--amber-rgb), 0.25);
}
.sl-rows {
  flex: 1; min-width: 0; padding-left: 17px; border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 9px;
}
.sl-rows div { display: flex; gap: 9px; font-weight: 600; font-size: 16.5px; line-height: 1.35; color: var(--text); }
.sl-rows span { flex: none; width: 46px; font: 500 12.5px/1.45 'IBM Plex Mono', monospace; letter-spacing: 0.12em; color: var(--text-dim); }
.sl-rows b { font-weight: 600; min-width: 0; word-break: keep-all; }
.sl-foot {
  margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--border);
  font-weight: 500; font-size: 15.5px; line-height: 1.55; color: var(--text-muted); word-break: keep-all;
}

.done-announce { margin-top: 28px; text-align: center; font-weight: 600; font-size: 19px; line-height: 1.7; color: var(--text-mid); }

/* 접수 완료 → 상영작 투표로 넘어가는 다리 */
.done-next { margin-top: 26px; text-align: center; }
.dn-head { font-weight: 700; font-size: 27px; line-height: 1.35; letter-spacing: -0.02em; color: var(--text); text-wrap: pretty; }
.dn-sub { margin-top: 11px; font-weight: 500; font-size: 18px; line-height: 1.6; color: var(--text-muted); word-break: keep-all; }
.dn-sub b { font-weight: 700; color: var(--text); }
.done-warn { margin-top: 14px; padding: 11px 15px; border: 1px solid var(--border-2); border-radius: 8px; font-weight: 600; font-size: 17.5px; line-height: 1; color: var(--amber); }

.done-actions { margin-top: auto; width: 100%; padding-top: 30px; display: flex; flex-direction: column; gap: 10px; }
/*
  '30초 소요' 는 바로 위 「상영작 고르기」에 대한 설명이다.
  flex gap 만 두면 위아래 간격이 같아서 아래 버튼에 딸린 것처럼 읽힌다.
  위는 붙이고 아래는 띄워 소속을 분명히 한다.
*/
.done-actions .cta-note { margin-top: -4px; margin-bottom: 8px; }

/* ---------- 토스트 ---------- */

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px;
  padding: 13px 18px; font-weight: 400; font-size: 17.5px; line-height: 1; color: var(--text);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
  z-index: 50;
}
.toast.show { opacity: 1; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==================================================================
   분위기 — 영사기가 돌아가는 방
   ================================================================== */

.grain {
  position: fixed; inset: -60px;
  pointer-events: none; z-index: 90;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 700ms steps(4, end) infinite;
  will-change: transform;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-4px, 3px); }
  50%  { transform: translate(3px, -4px); }
  75%  { transform: translate(-3px, -2px); }
  100% { transform: translate(2px, 4px); }
}

.wave-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: waveDraw 2.9s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes waveDraw { to { stroke-dashoffset: 0; } }

.wave-ring { transform-origin: 196px 100px; animation: ringBreathe 4.2s ease-in-out 2.4s infinite; }
@keyframes ringBreathe {
  0%, 100% { transform: scale(1);    stroke-opacity: 0.14; }
  50%      { transform: scale(1.16); stroke-opacity: 0.05; }
}

/* 슬레이트가 내려앉고, 위쪽 클래퍼가 한 번 '탁' 닫힌다 */
.slate { animation: slateIn 0.5s cubic-bezier(.18,.89,.32,1.06) both; }
@keyframes slateIn {
  0%   { opacity: 0; transform: translateY(-16px); }
  100% { opacity: 1; transform: translateY(0); }
}
.slate-bar { transform-origin: 0 100%; animation: clap 0.5s cubic-bezier(.5,-0.2,.3,1.4) 0.42s both; }
@keyframes clap {
  0%   { transform: rotate(-16deg); }
  55%  { transform: rotate(2.5deg); }
  100% { transform: rotate(0); }
}

.sl-num { animation: filament 1.1s ease 0.7s both; }
@keyframes filament {
  0%   { opacity: 0; text-shadow: none; }
  35%  { opacity: 0.45; }
  45%  { opacity: 0.15; }
  60%  { opacity: 1; text-shadow: 0 0 34px rgba(var(--amber-rgb), 0.5); }
  100% { opacity: 1; text-shadow: 0 0 24px rgba(var(--amber-rgb), 0.25); }
}

@media (prefers-reduced-motion: reduce) {
  .screen, .match-card { animation: none !important; transition: none !important; }
  .grain { animation: none; }
  .wave-draw { stroke-dashoffset: 0; animation: none; }
  .wave-ring, .sl-num, .slate, .slate-bar { animation: none; opacity: 1; transform: none; }
}