/* 새 첫 화면 · 시안 B(10-27 대표님 선택) — '고장 난 금빛 네온 간판 + 도장' + 금빛 10 영상
   문구는 두 가지 그대로: 딱 10곳만 추가 상담을 받습니다 / 아직도 반짝하고 사라지는 프랜차이즈 창업만 찾아보고 계신가요?
   움직임(opacity·transform 만)
   ① 0~0.56초  '반짝하고 사라지는' 금빛 네온이 깜빡이며 켜짐 (꺼진 상태도 옅은 금색 글자라 처음부터 읽힘)
   ② 0.1~0.55초 01 광주하남점 '계약 완료' 도장이 위에서 쾅 → 0.36~0.84초 '한정 10곳' 도장이 이어서 쾅(좌석표가 살짝 눌림)
   ③ 반복: 3.65초부터 17초 주기에 두 번(8.5초 간격) '사라지는'만 지지직 — 가장 어두울 때도 불투명도 .25
   ④ 금빛 움직임은 10 위를 지나가는 빛 영상 하나: 4초 반짝 → 4초 쉼 → 반복 (js/s00.js). 10 뒤 후광은 멈춰 있는 빛.
      글자 10 은 늘 CSS(또렷한 글꼴) 그대로이고, 영상은 검은 바탕에 '더할 빛'만 담아 섞기(plus-lighter·screen)로 얹는다(10-27 대표님 선택).
   prefers-reduced-motion 이면 모두 멈추고 마지막 모습(네온 켜짐·도장 찍힘), 영상은 재생하지 않고 CSS 10 만 보인다.
   첫 화면이 화면 밖이면 js/s00.js 가 반복을 멈춘다(.s00-away). */
.s00 {
  --s00-ink: #010d07;
  --s00-gold: linear-gradient(180deg, #f3e3a6 8%, #e2c878 50%, #b8913a 100%);
  --s00-red: #b3261e;
  /* 10-27 손봄: 340~450 → 380~480. 좌석 칸이 커져야 키운 '계약 완료' 도장이 '01'·가게 이름을 덮지 않는다(문구와 상담권 사이 여백은 넉넉함) */
  --s00-ticket-w: clamp(380px, 27vw, 480px);
  --s00-photo-h: clamp(130px, 18vh, 200px);
  /* 금색 10 글자 크기 — CSS 10 과 영상이 같은 값을 써야 영상 속 10 이 정확히 겹친다 */
  --s00-ten-fs: clamp(160px, min(16.6vw, 28vh), 320px);
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--c-white);
  background-color: var(--s00-ink);
  isolation: isolate;
}
.s00 a { text-decoration: none; }

/* 배경: 초록 커튼 사진을 어둡게 + 제목 뒤 초록 조명 + 상담권 뒤 금빛 */
.s00 .s00-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 40% 58% at 28% 48%, rgba(0, 96, 54, .5), rgba(0, 0, 0, 0) 70%),
    radial-gradient(ellipse 26% 40% at 77% 46%, rgba(226, 200, 120, .16), rgba(0, 0, 0, 0) 70%),
    linear-gradient(90deg, rgba(1, 13, 7, .9) 0%, rgba(1, 13, 7, .62) 50%, rgba(1, 13, 7, .78) 100%),
    linear-gradient(180deg, rgba(1, 13, 7, .55) 0%, rgba(1, 13, 7, 0) 26%, rgba(1, 13, 7, 0) 66%, rgba(1, 13, 7, .92) 100%),
    url(../assets/s00/curtain.jpg) center / cover no-repeat;
}
/* 아래 경계: 가는 금색 줄 → 다음 구역(지금의 ①)으로 넘어감 */
.s00::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, rgba(184, 145, 58, 0), #e2c878 30%, #f3e3a6 50%, #e2c878 70%, rgba(184, 145, 58, 0));
  opacity: .7;
}

/* ---------- 상단: 로고 · 대표번호 ---------- */
/* 큰 화면(1920)에서는 문구가 커진 만큼 무대를 조금 넓게 쓴다 */
.s00 .s00-top, .s00 .s00-stage { max-width: 1720px; }
/* z-index 2: 휴대폰에서 10 위 빛이 로고까지 번져도 머리줄은 그 위에 그대로(10-27) */
.s00 .s00-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 18px; padding-top: 22px; padding-bottom: 8px; }
.s00 .s00-logo { flex: none; width: 104px; }
.s00 .s00-logo img { width: 100%; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }
.s00 .s00-tel { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--c-khaki); }
.s00 .s00-tel svg { flex: none; width: 30px; height: 30px; fill: currentColor; }
.s00 .s00-tel small { display: block; font-size: 13px; font-weight: 500; line-height: 1.2; color: rgba(255, 255, 255, .7); }
.s00 .s00-tel b { display: block; font-size: 34px; line-height: 1; letter-spacing: -0.03em; }
.s00 .s00-tel:hover b, .s00 .s00-tel:focus-visible b { color: var(--c-gold-light); }
.s00 .s00-tel:focus-visible, .s00 .s00-logo:focus-visible { outline: 3px solid var(--c-gold-light); outline-offset: 3px; }

/* ---------- 무대: 왼쪽 문구 / 오른쪽 상담권 ---------- */
.s00 .s00-stage {
  flex: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(40px, 5vw, 120px);
  padding-top: 8px; padding-bottom: clamp(32px, 5vh, 60px);
}
.s00 .s00-copy { flex: 1 1 0; min-width: 0; }

/* 제목: 딱 [10] 곳만 / 추가 상담을 받습니다 */
.s00 .s00-h { line-height: 1; letter-spacing: -0.04em; text-wrap: initial; }
.s00 .s00-h1 { display: flex; align-items: baseline; gap: .14em; font-size: clamp(48px, 5vw, 96px); color: #fff; }
.s00 .s00-dak, .s00 .s00-gon { text-shadow: 0 4px 18px rgba(0, 0, 0, .5); }
/* isolation 을 두지 않는다 — 빛 영상의 섞기가 이 상자 안이 아니라 첫 화면 전체 배경(.s00, isolation)과 섞여야 검은 바탕이 사라진다.
   후광(::before, z-index −1)은 .s00 안에서 배경(.s00-bg) 위·글자 아래에 그대로 그려진다 */
.s00 .s00-tenbox { position: relative; display: inline-block; }
/* 10 뒤 금빛 후광 — 멈춰 있는 빛(숨쉬기 없음. 금빛 움직임은 영상 하나로) */
.s00 .s00-tenbox::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -24%; right: -24%; top: -14%; bottom: -22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(243, 227, 166, .34), rgba(226, 200, 120, .15) 52%, rgba(226, 200, 120, 0) 100%);
  opacity: .62;
}
.s00 .s00-ten {
  display: inline-block;
  font-weight: 900;
  font-size: var(--s00-ten-fs);
  line-height: .82;
  letter-spacing: -0.05em;
  padding-right: .04em;
  /* 줄 높이(.82)가 글자보다 낮아 금빛 배경이 1 의 받침·0 의 아래 끝까지 닿지 않아 아래가 잘려 보였다(10-28 대표님) →
     아래로 .14em 칠할 자리를 더하고 같은 만큼 바깥 여백을 당겨 배치·빛 영상 자리는 그대로. 금빛 띠는 원래 높이 그대로 두고 더한 자리는 끝 색으로 */
  padding-bottom: .14em; margin-bottom: -.14em;
  background: var(--s00-gold) top / 100% calc(100% - .14em) no-repeat, #b8913a;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .55));
}
/* 금빛 10 빛 영상(assets/s00/ten-glow-1027.webm, 정사각 960, 소리 없음, 투명 없음) — 힉스필드 80번(seedance 4초)에서
   첫 장면보다 밝아진 부분(빛줄기·반짝임)만 뽑아 검은 바탕에 담았다('08. 힉스필드 작업판/gold10/make_glowbk.py', 끝 10장면은 서서히 0).
   검은색은 섞기에서 아무것도 더하지 않으므로, 글자 10 은 늘 CSS 그대로 또렷하고 그 위로 빛만 지나간다.
   위치는 원본 판과 같은 틀(한 변 = 2.56em): 판 속 10 과 CSS 10 을 맞춘 값 왼쪽 −.772em, 위쪽 −.855em (em = 10 글자 크기,
   PC·태블릿·휴대폰 8개 폭에서 1px 안 겹침 확인 10-27).
   처음엔 투명, 재생이 시작되면(js/s00.js 가 .s00-ten-live) 보인다. plus-lighter 를 모르는 브라우저는 screen 으로 섞는다. */
.s00 .s00-tenv {
  position: absolute; z-index: 1; pointer-events: none;
  font-size: var(--s00-ten-fs);
  left: -0.772em; top: -0.855em;
  width: 2.56em; height: 2.56em; max-width: none;
  object-fit: contain;
  mix-blend-mode: screen;
  mix-blend-mode: plus-lighter;
  opacity: 0;
}
.s00 .s00-ten-live .s00-tenv { opacity: 1; }
/* 섞기를 못 하면 검은 네모가 보이므로 영상을 빼고 CSS 10 만 */
@supports not (mix-blend-mode: screen) { .s00 .s00-tenv { display: none; } }
.s00 .s00-h2 { display: block; margin-top: .2em; font-size: clamp(40px, 4.4vw, 84px); line-height: 1.15; color: #fff; text-shadow: 0 4px 18px rgba(0, 0, 0, .5); }

/* 질문 — 금빛 네온 간판
   줄바꿈: 1줄 '아직도 반짝하고 사라지는' / 2줄 '프랜차이즈 창업만 찾아보고 계신가요?' */
.s00 .s00-hook {
  position: relative; isolation: isolate;
  margin-top: clamp(24px, 4vh, 46px);
  padding-left: .55em;
  font-size: clamp(32px, 3.45vw, 62px); font-weight: 700; line-height: 1.34; letter-spacing: -0.045em;
  color: #fff; text-wrap: balance; text-shadow: 0 3px 14px rgba(0, 0, 0, .45);
}
/* 왼쪽 세로줄도 금빛 네온관으로 */
.s00 .s00-hook::before {
  content: ""; position: absolute; left: 0; top: .22em; bottom: .22em; width: 4px; border-radius: 2px;
  background: var(--c-gold-light);
  box-shadow: 0 0 4px rgba(243, 227, 166, .85), 0 0 10px rgba(226, 200, 120, .55), 0 0 20px rgba(184, 145, 58, .4);
  animation: s00-neon-on .5s step-end both;
}
.s00 .s00-hook-l2 { display: block; }
.s00 .s00-neon { font-style: normal; font-weight: 900; }
/* 글자 자체 = 꺼진 네온관(옅은 금색, 처음부터 읽힘) / ::after = 켜진 불빛 / ::before = 벽에 번지는 빛
   번짐은 1·4·10·20px 네 단계만(글자 가장자리가 뿌옇지 않게), 켜진 색은 금색 10 과 같은 톤 */
.s00 .s00-neon-w {
  position: relative; display: inline-block;
  color: rgba(226, 200, 120, .5);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}
.s00 .s00-neon-w::after {
  content: attr(data-t);
  content: attr(data-t) / "";
  position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none;
  color: var(--c-gold-light);
  text-shadow:
    0 0 1px rgba(255, 246, 214, .9),
    0 0 4px rgba(243, 227, 166, .75),
    0 0 10px rgba(226, 192, 98, .55),
    0 0 20px rgba(184, 145, 58, .45);
}
.s00 .s00-neon-w::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -16%; right: -16%; top: -34%; bottom: -34%;
  background: radial-gradient(closest-side, rgba(226, 192, 98, .18), rgba(226, 192, 98, 0));
}
.s00 .s00-neon-a::before, .s00 .s00-neon-a::after { animation: s00-neon-on .5s step-end both; }
.s00 .s00-neon-b::before, .s00 .s00-neon-b::after { animation: s00-neon-on .5s step-end .06s both, s00-neon-glitch 17s step-end 3.65s infinite; }

/* 켜질 때: 0.5초 동안 깜빡깜빡 → 켜짐 (처음 한 번) */
@keyframes s00-neon-on {
  0% { opacity: 0; }
  12% { opacity: .85; }
  20% { opacity: .1; }
  34% { opacity: 1; }
  44% { opacity: .2; }
  58% { opacity: 1; }
  66% { opacity: .55; }
  76%, 100% { opacity: 1; }
}
/* 고장 난 간판: 17초 안에 두 번(0초·8.5초, 한 번에 약 0.6초) — 가장 어두울 때도 .25 */
@keyframes s00-neon-glitch {
  0% { opacity: 1; }
  0.6% { opacity: .3; }
  1.1% { opacity: 1; }
  1.8% { opacity: .25; }
  2.6% { opacity: .8; }
  3.0% { opacity: .3; }
  3.5% { opacity: 1; }
  50% { opacity: 1; }
  50.6% { opacity: .28; }
  51.2% { opacity: 1; }
  52.0% { opacity: .25; }
  53.0%, 100% { opacity: 1; }
}

/* ---------- 상담권(좌석표) ---------- */
.s00 .s00-ticket {
  --notch: 12px;
  position: relative; flex: 0 0 var(--s00-ticket-w);
  color: var(--c-green-deep);
  /* 그림자는 모양(절취선 홈 포함)을 따라가도록 drop-shadow 로 */
  filter: drop-shadow(0 0 1px rgba(226, 200, 120, .95)) drop-shadow(0 30px 36px rgba(0, 0, 0, .6));
  transform: rotate(1.6deg);
  /* '한정 10곳' 도장이 찍히는 순간 살짝 눌림 */
  animation: s00-tk-bump .34s ease-out .6s both;
}
@keyframes s00-tk-bump {
  0%, 100% { translate: 0 0; }
  35% { translate: 0 4px; }
  70% { translate: 0 -1px; }
}
.s00 .s00-tk-photo { position: relative; margin: 0; height: var(--s00-photo-h); border-radius: 20px 20px 0 0; overflow: hidden; background: #0b0b0b; }
.s00 .s00-tk-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.s00 .s00-tk-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(2, 47, 27, .35) 100%); }
/* 검토 꼬리표 자리(사진은 overflow, 절취 부분은 mask 라서 꼬리표가 잘리지 않게 밖에 둔다) */
.s00 .s00-hfmark { position: absolute; left: 0; right: 0; top: 0; height: 0; }
.s00 .s00-tk-foot { position: relative; }

.s00 .s00-tk-body {
  padding: clamp(16px, 2.2vh, 24px) clamp(20px, 1.5vw, 28px) clamp(18px, 2.4vh, 26px);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%),
    repeating-linear-gradient(0deg, rgba(120, 90, 30, .03) 0 1px, rgba(0, 0, 0, 0) 1px 4px),
    var(--c-cream);
  /* 절취선 양쪽 홈(위쪽 반) */
  -webkit-mask: radial-gradient(circle var(--notch) at 0 100%, #0000 96%, #000) left / 50.5% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 96%, #000) right / 50.5% 100% no-repeat;
  mask: radial-gradient(circle var(--notch) at 0 100%, #0000 96%, #000) left / 50.5% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 96%, #000) right / 50.5% 100% no-repeat;
}
.s00 .s00-tk-t { font-size: clamp(22px, 1.6vw, 30px); line-height: 1.2; color: var(--c-green-deep); }

/* 위 여백 12~20 → 23~30px: 칸 모서리에 걸친 '계약 완료' 도장 윗부분이 '추가 상담 좌석표' 글자와 3px 이상 떨어지게(10-27, 화면 잉크로 잼) */
.s00 .s00-seats { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(7px, .6vw, 10px); margin: clamp(23px, 3vh, 30px) 0 0; padding: 0; list-style: none; }
.s00 .s00-seats li {
  position: relative; display: grid; place-items: center; aspect-ratio: 1 / .8;
  border: 2px solid var(--c-green); border-radius: 12px 12px 6px 6px;
  background: linear-gradient(180deg, #fffbea 0%, #f2e6bd 100%);
  font-family: var(--f-display); font-weight: 900; font-size: clamp(16px, 1.15vw, 22px); line-height: 1; color: var(--c-green);
}
/* 좌석 받침(의자 모양) */
.s00 .s00-seats li::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -6px; height: 4px; border-radius: 3px; background: var(--c-green); opacity: .45; }
/* 채워진 자리(본사 확정 후 li 에 class="on") */
.s00 .s00-seats li.on { background: var(--c-green); color: rgba(243, 227, 166, .55); border-color: var(--c-green); }

/* 채운 자리: 01 광주하남점 + 빨간 '계약 완료' 도장(10-27 대표님, 10-28 상담 완료 → 계약 완료)
   PC 는 가게 이름이 읽히게 '01 / 광주 / 하남점' 세 줄, 도장은 칸 오른쪽 위 모서리에 걸쳐 찍는다(시안 B 그대로) */
/* z-index 1: 칸 밖으로 걸친 도장이 옆 칸(02) 아래로 숨지 않게 — 이 칸은 찍힘 움직임(transform) 때문에 따로 쌓이므로 칸째 위로 올린다 */
.s00 .s00-seats li.s00-seat-taken {
  z-index: 1;
  gap: 1px; place-content: center; color: var(--c-gold-light);
  background: linear-gradient(180deg, #0a6a3e 0%, var(--c-green) 100%);
  box-shadow: inset 0 0 0 1px rgba(243, 227, 166, .3);
  animation: s00-seat-bump .3s ease-out .32s both;
}
@keyframes s00-seat-bump {
  0%, 100% { transform: none; }
  40% { transform: translateY(2px) scale(.97); }
  75% { transform: translateY(-1px); }
}
/* 10-27 손봄: 1366 노트북에서도 읽히게 '01'·가게 이름·도장 글자를 한 단계씩 키움(도장 글자 9 → 11px 이상) */
.s00 .s00-seat-no { font-size: clamp(11px, .72vw, 13px); line-height: 1; letter-spacing: 0; opacity: .85; }
.s00 .s00-seat-who { display: block; font-family: var(--f-body); font-size: clamp(12.5px, .9vw, 16px); font-weight: 900; line-height: 1.08; letter-spacing: -0.05em; text-align: center; color: #fff; }
.s00 .s00-seat-who > span { display: block; white-space: nowrap; }
/* 도장 중심 = 칸 테두리 안쪽 오른쪽 위 모서리에서 오른쪽 7px · 위 2px(눈에 보이는 바깥 모서리로는 오른쪽 5px · 위아래 0px).
   도장이 커져도 '01'·'광주'·옆 칸 '02'와 떨어지게 잰 값 */
.s00 .s00-seat-stamp {
  --stw: clamp(44px, 3vw, 52px);
  position: absolute; right: calc(var(--stw) / -2 - 7px); top: calc(var(--stw) / -2 - 2px); z-index: 2;
  display: grid; place-content: center; text-align: center;
  width: var(--stw); aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--s00-red); background: rgba(249, 242, 214, .95); color: var(--s00-red);
  font-family: var(--f-display); font-size: clamp(11px, .78vw, 13px); font-weight: 900; line-height: 1.05; letter-spacing: -0.04em;
  box-shadow: inset 0 0 0 2px rgba(249, 242, 214, .92), inset 0 0 0 3px var(--s00-red), 0 3px 8px rgba(0, 0, 0, .3);
  rotate: -14deg;
  animation: s00-slam .44s .1s both;
}
.s00 .s00-seats li.s00-seat-taken::after { opacity: .8; }

/* 도장 쾅: 위에서 크게 → 제자리 → 살짝 흔들림 (처음 한 번) */
@keyframes s00-slam {
  0% { opacity: 0; transform: translateY(-40%) scale(2.3); animation-timing-function: cubic-bezier(.6, 0, .9, .45); }
  40% { opacity: 1; }
  58% { transform: translateY(0) scale(.9); animation-timing-function: ease-out; }
  72% { transform: scale(1.07) rotate(4deg); }
  86% { transform: scale(.98) rotate(-2deg); }
  100% { opacity: 1; transform: none; }
}
/* 찍히는 순간 퍼지는 잉크 테두리(한 번, 끝나면 안 보임) */
.s00 .s00-seat-stamp::after, .s00 .s00-stamp::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none;
  border: 2px solid rgba(179, 38, 30, .6);
  opacity: 0;
}
.s00 .s00-seat-stamp::after { animation: s00-ring .5s ease-out .34s both; }
.s00 .s00-stamp::after { animation: s00-ring .55s ease-out .62s both; }
@keyframes s00-ring {
  0% { opacity: .75; transform: scale(.92); }
  100% { opacity: 0; transform: scale(1.65); }
}

/* 떼어내는 쪽(절취선 + 양쪽 홈) */
.s00 .s00-tk-stub {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  padding: clamp(12px, 1.9vh, 20px) clamp(20px, 1.5vw, 28px);
  border-radius: 0 0 20px 20px; border-top: 2px dashed rgba(226, 200, 120, .55);
  background: linear-gradient(180deg, #03402a 0%, var(--c-green-deep) 100%);
  color: #fff;
  /* 절취선 양쪽 홈(아래쪽 반) */
  -webkit-mask: radial-gradient(circle var(--notch) at 0 0, #0000 96%, #000) left / 50.5% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 0, #0000 96%, #000) right / 50.5% 100% no-repeat;
  mask: radial-gradient(circle var(--notch) at 0 0, #0000 96%, #000) left / 50.5% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 0, #0000 96%, #000) right / 50.5% 100% no-repeat;
}
.s00 .s00-tk-stub p { display: flex; flex-direction: column; gap: 2px; }
.s00 .s00-tk-stub p + p { padding-left: clamp(14px, 1.2vw, 22px); border-left: 1px solid rgba(226, 200, 120, .3); }
.s00 .s00-tk-stub span { font-size: 13px; font-weight: 500; letter-spacing: -0.02em; color: rgba(255, 255, 255, .72); }
.s00 .s00-tk-stub b {
  font-size: clamp(22px, 1.7vw, 32px); line-height: 1.15; letter-spacing: -0.03em;
  background: var(--s00-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 도장: 한정 10곳 (빨강은 도장에만) — '계약 완료'에 이어서 쾅.
   10-27 손봄: 오른쪽으로 −12px 만 내밀어 1440·1366·1024 화면 끝에 잘리지 않게. 크기는 시안 그대로(좌석 숫자와 40px 이상 떨어져 있음을 재서 확인) */
.s00 .s00-stamp {
  position: absolute; z-index: 2;
  right: -12px; top: calc(var(--s00-photo-h) - 58px);
  display: grid; place-content: center; text-align: center;
  width: clamp(92px, 6vw, 116px); aspect-ratio: 1;
  border-radius: 50%; border: 3px solid var(--s00-red);
  background: rgba(249, 242, 214, .94);
  color: var(--s00-red);
  box-shadow: inset 0 0 0 5px rgba(249, 242, 214, .94), inset 0 0 0 6.5px var(--s00-red), 0 8px 20px rgba(0, 0, 0, .35);
  rotate: -14deg;
  animation: s00-slam .48s .36s both;
}
.s00 .s00-stamp small { font-size: clamp(12px, .8vw, 15px); font-weight: 900; letter-spacing: .3em; padding-left: .3em; line-height: 1.2; }
.s00 .s00-stamp b { font-family: var(--f-display); font-weight: 900; font-size: clamp(24px, 1.6vw, 32px); line-height: 1.05; letter-spacing: -0.04em; }

/* ---------- 태블릿 폭: 상담권을 조금 줄인다 ---------- */
@media (max-width: 1200px) and (min-width: 901px) {
  /* 330 → 350px(10-27): 키운 도장이 옆 칸 '02'에 닿지 않게 */
  .s00 { --s00-ticket-w: 350px; }
}

/* ---------- 휴대폰 (390×844 기준: 하단 고정 줄 위에 한 화면) ----------
   10-27 손봄: 아이패드 세로(1100px 이하 세로 화면)도 PC 두 칸 대신 이 위아래 쌓기 배치를 쓴다 */
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .s00 { --s00-ten-fs: min(47vw, 23svh, 210px); min-height: calc(100svh - var(--bar-h)); }
  .s00 .s00-bg {
    background:
      radial-gradient(ellipse 80% 40% at 30% 30%, rgba(0, 96, 54, .55), rgba(0, 0, 0, 0) 70%),
      linear-gradient(180deg, rgba(1, 13, 7, .6) 0%, rgba(1, 13, 7, .55) 45%, rgba(1, 13, 7, .88) 100%),
      url(../assets/s00/curtain.jpg) 40% center / cover no-repeat;
  }
  .s00 .s00-top { gap: 10px; padding-top: 12px; padding-bottom: 2px; }
  .s00 .s00-logo { width: 64px; }
  .s00 .s00-tel { gap: 6px; padding: 7px 13px 7px 11px; border: 1px solid rgba(226, 200, 120, .55); border-radius: 999px; background: rgba(0, 0, 0, .32); }
  .s00 .s00-tel svg { width: 16px; height: 16px; }
  .s00 .s00-tel small { display: none; }
  .s00 .s00-tel b { font-size: 17px; }

  .s00 .s00-stage { flex-direction: column; align-items: stretch; justify-content: center; gap: 0; padding-top: 4px; padding-bottom: 24px; }
  .s00 .s00-copy { display: contents; }
  .s00 .s00-h { order: 1; }
  .s00 .s00-h1 { font-size: clamp(30px, 9.6vw, 42px); gap: .12em; }
  .s00 .s00-h2 { margin-top: .16em; font-size: clamp(27px, 8.8vw, 38px); }
  .s00 .s00-hook { order: 2; margin-top: 22px; padding-left: 14px; font-size: clamp(23px, 7.3vw, 30px); line-height: 1.32; }
  .s00 .s00-hook::before { width: 3.5px; }
  /* 휴대폰은 글자가 작아 번짐을 한 단계 더 줄인다(가장자리 또렷하게) */
  .s00 .s00-neon-w::after {
    text-shadow:
      0 0 1px rgba(255, 246, 214, .85),
      0 0 3px rgba(243, 227, 166, .65),
      0 0 7px rgba(226, 192, 98, .45),
      0 0 14px rgba(184, 145, 58, .35);
  }

  .s00 .s00-ticket { --notch: 9px; order: 3; flex: none; margin-top: 26px; transform: none; filter: drop-shadow(0 0 1px rgba(226, 200, 120, .95)) drop-shadow(0 14px 20px rgba(0, 0, 0, .55)); }
  .s00 .s00-tk-photo { display: none; }
  .s00 .s00-hfmark { display: none; } /* 휴대폰은 사진을 빼므로 사진 교체 꼬리표도 숨김 */
  .s00 .s00-tk-body { padding: 13px 14px 16px; border-radius: 16px 16px 0 0; }
  .s00 .s00-tk-t { padding-right: 70px; font-size: 19px; }
  /* 좌석표 5칸 2줄 — 01 칸에 '광주 / 하남점' 이름과 빨간 '계약 완료' 도장이 함께 보이게 */
  /* 위 여백 15 → 19px: 키운 도장(39px) 윗부분이 '추가 상담 좌석표' 글자에 닿지 않게(10-27) */
  .s00 .s00-seats { grid-template-columns: repeat(5, 1fr); gap: 9px 7px; margin-top: 19px; }
  .s00 .s00-seats li { aspect-ratio: 1 / .9; border-width: 1.5px; border-radius: 9px 9px 5px 5px; font-size: 15px; }
  .s00 .s00-seats li::after { bottom: -5px; height: 3px; }
  .s00 .s00-seats li.s00-seat-taken { gap: 0; box-shadow: none; place-content: end start; padding: 0 0 4px 5px; }
  .s00 .s00-seat-no { position: absolute; left: 5px; top: 4px; font-size: 10.5px; }
  .s00 .s00-seat-who { font-size: 12.5px; line-height: 1.1; text-align: left; }
  /* 10-27 손봄: 도장 34 → 39px, 글자 9 → 10.5px. 중심은 칸 오른쪽 위 모서리 그대로(‘광주’와 떨어지게 바깥으로 조금 더) */
  .s00 .s00-seat-stamp {
    right: -15px; top: -18px; width: 39px;
    border-width: 1.5px; font-size: 10.5px;
    box-shadow: inset 0 0 0 1.5px rgba(249, 242, 214, .92), inset 0 0 0 2.5px var(--s00-red), 0 2px 6px rgba(0, 0, 0, .3);
    rotate: -12deg;
  }
  /* 두 칸을 글자 폭만큼만 잡아 360px 폭에서도 '접수 마감 12월 31일'이 한 줄로 */
  .s00 .s00-tk-stub { grid-template-columns: auto auto; justify-content: space-between; padding: 9px 14px 10px; border-radius: 0 0 16px 16px; }
  .s00 .s00-tk-stub p { flex-direction: row; align-items: baseline; gap: 8px; white-space: nowrap; }
  .s00 .s00-tk-stub p + p { padding-left: 12px; }
  .s00 .s00-tk-stub span { font-size: 12px; }
  .s00 .s00-tk-stub b { font-size: 20px; }
  .s00 .s00-stamp { right: 10px; top: -30px; width: 72px; box-shadow: inset 0 0 0 3.5px rgba(249, 242, 214, .94), inset 0 0 0 4.5px var(--s00-red), 0 6px 14px rgba(0, 0, 0, .35); border-width: 2px; rotate: -12deg; }
  .s00 .s00-stamp small { font-size: 10px; }
  .s00 .s00-stamp b { font-size: 20px; }
}
/* 태블릿 세로(601~900px, 그리고 1100px 이하 세로 화면): 5칸 2줄 좌석이 너무 커지지 않게 상담권 폭을 묶고 글자·도장을 한 단계 키운다.
   10-27 손봄: 768 에서는 예전 값 그대로, 아이패드(1024 세로)로 갈수록 vw 로 조금씩 커진다 */
@media (min-width: 601px) and (max-width: 900px), (min-width: 601px) and (max-width: 1100px) and (orientation: portrait) {
  .s00 .s00-ticket { width: 100%; max-width: clamp(540px, 62vw, 660px); }
  .s00 .s00-tk-t { font-size: clamp(22px, 2.6vw, 28px); }
  .s00 .s00-seats li { font-size: clamp(20px, 2.4vw, 26px); }
  .s00 .s00-seats li.s00-seat-taken { padding: 0 0 6px 8px; }
  .s00 .s00-seat-no { left: 8px; top: 6px; font-size: clamp(11px, 1.3vw, 14px); }
  .s00 .s00-seat-who { font-size: clamp(15.5px, 1.9vw, 20px); }
  .s00 .s00-seat-stamp { right: clamp(-17px, -1.6vw, -14px); top: clamp(-22px, -2vw, -18px); width: clamp(44px, 5vw, 54px); font-size: clamp(11px, 1.3vw, 13.5px); }
  .s00 .s00-tk-stub span { font-size: clamp(12px, 1.4vw, 15px); }
  .s00 .s00-tk-stub b { font-size: clamp(20px, 2.6vw, 28px); }
  .s00 .s00-stamp { width: clamp(72px, 8.6vw, 92px); }
  .s00 .s00-stamp small { font-size: clamp(10px, 1.2vw, 13px); }
  .s00 .s00-stamp b { font-size: clamp(20px, 2.5vw, 26px); }
}
/* 세로 태블릿(아이패드 등): 화면이 넓은 만큼 제목·질문·10 을 키운다(768 은 휴대폰 배치 값과 거의 같음) */
@media (min-width: 601px) and (max-width: 1100px) and (orientation: portrait) {
  .s00 { --s00-ten-fs: min(27vw, 21svh, 290px); }
  .s00 .s00-logo { width: clamp(64px, 9vw, 100px); }
  .s00 .s00-tel svg { width: clamp(16px, 2vw, 22px); height: clamp(16px, 2vw, 22px); }
  .s00 .s00-tel b { font-size: clamp(17px, 2.2vw, 24px); }
  .s00 .s00-h1 { font-size: clamp(42px, 5.6vw, 62px); }
  .s00 .s00-h2 { font-size: clamp(38px, 5.1vw, 56px); }
  .s00 .s00-hook { font-size: clamp(30px, 3.9vw, 42px); margin-top: clamp(22px, 3vw, 32px); }
  .s00 .s00-ticket { margin-top: clamp(26px, 3.4vw, 38px); }
  .s00 .s00-seats { margin-top: clamp(19px, 2.4vw, 25px); }
}
@media (max-width: 360px) {
  .s00 { --s00-ten-fs: min(42vw, 20svh); }
  .s00 .s00-hook { font-size: 22px; }
}
/* 키 작은 휴대폰(예: 375×667) */
@media (max-width: 900px) and (max-height: 760px) {
  .s00 { --s00-ten-fs: min(40vw, 19svh); }
  .s00 .s00-hook { margin-top: 14px; }
  .s00 .s00-ticket { margin-top: 18px; }
}
/* 더 낮은 화면(아이폰 SE 사파리는 툴바를 빼면 약 375×553): 상담권 아래 끝(남은 자리·마감 줄)이 하단 고정 줄 위에 오게 줄인다(10-27) */
@media (max-width: 900px) and (max-height: 600px) and (orientation: portrait) {
  .s00 { --s00-ten-fs: min(34vw, 13svh); }
  .s00 .s00-top { padding-top: 8px; }
  .s00 .s00-stage { padding-bottom: 12px; }
  .s00 .s00-h1 { font-size: clamp(28px, 8.4vw, 36px); }
  .s00 .s00-h2 { font-size: clamp(25px, 7.6vw, 32px); }
  .s00 .s00-hook { margin-top: 6px; font-size: clamp(20px, 6.2vw, 24px); }
  .s00 .s00-ticket { margin-top: 9px; }
  .s00 .s00-tk-body { padding: 10px 12px 13px; }
  .s00 .s00-seats { margin-top: 18px; gap: 8px 6px; }
}

/* 첫 화면이 화면 밖이면 반복 움직임을 멈춘다(js/s00.js 가 .s00-away 를 붙임) */
.s00.s00-away *, .s00.s00-away *::before, .s00.s00-away *::after { animation-play-state: paused !important; }
/* 줄임 동작: base.css 는 ::before·::after 를 못 멈추므로 여기서 함께 멈춘다 → 마지막 모습(네온 켜짐·도장 찍힘).
   영상은 base.js 가 재생하지 않으므로 투명인 채로 두고 CSS 10 이 보인다. */
@media (prefers-reduced-motion: reduce) {
  .s00 *, .s00 *::before, .s00 *::after { animation: none !important; }
  .s00 .s00-tenv { display: none; }
}