/* 참가자 화면(제품 한 장 · 신청 · 티켓 · 재조회 · 취소 · 안내) - 휴대폰 우선.
   색 · 모서리 · 글꼴은 전부 --sd-* 변수(src/lib/theme.ts themeCss 가 :root 에 넣는다).
   예외: .sd-code-area 만 흰 바탕 · 검정 고정 - 다크모드 반전 코드는 스캐너가 못 읽는다. (public 담당 소유) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--sd-surface-soft); color: var(--sd-body); font-family: var(--sd-font);
  font-size: 16px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere;
}
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }
a { color: var(--sd-primary); }
h1, h2, h3, p, dl, dd, ul, figure { margin: 0; }
button, input, select, textarea { font: inherit; }
.sd-skip { position: absolute; left: -9999px; top: 0; z-index: 10; padding: 8px 12px; background: var(--sd-canvas); color: var(--sd-ink); }
.sd-skip:focus { left: 8px; top: 8px; }

/* 틀 */
.sd-wrap { width: 100%; max-width: 560px; margin: 0 auto; padding: 16px 16px 32px; flex: 1; display: flex; flex-direction: column; gap: 16px; }
.sd-hero { width: 100%; max-width: 960px; margin: 0 auto; }
.sd-hero img { display: block; width: 100%; aspect-ratio: 8 / 3; object-fit: cover; }

/* 행사 머리 */
.sd-event-head { display: flex; flex-direction: column; gap: 6px; padding: 4px 4px 0; }
.sd-logo { height: 40px; width: auto; max-width: 240px; object-fit: contain; align-self: flex-start; }
.sd-logo--sm { height: 28px; align-self: center; }
.sd-title { font-size: 24px; line-height: 1.3; font-weight: 700; color: var(--sd-ink); }
.sd-organizer { color: var(--sd-mute); font-size: 15px; }
.sd-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin-top: 6px; font-size: 15px; }
.sd-meta > div { display: contents; }
.sd-meta dt { color: var(--sd-mute); font-weight: 500; white-space: nowrap; }
.sd-meta dd { color: var(--sd-body); }
/* 장소 주소 · 카카오맵 '지도' 단추(작게, 같은 줄) */
.sd-addr { color: var(--sd-mute); }
.sd-map-btn { display: inline-flex; align-items: center; margin-left: 4px; padding: 1px 8px; border: 1px solid var(--sd-hairline); border-radius: var(--wf-radius-action); font-size: 12px; line-height: 1.6; color: var(--sd-ink); text-decoration: none; background: var(--sd-canvas); vertical-align: 1px; white-space: nowrap; }
.sd-map-btn:hover, .sd-map-btn:focus-visible { border-color: var(--sd-primary); outline: 2px solid var(--sd-focus); outline-offset: 1px; }
.sd-meta--ticket { margin-top: 0; padding: 12px 14px; background: var(--sd-surface-card); border-radius: var(--sd-radius-sm); }
.sd-desc { margin-top: 8px; padding: 12px 14px; background: var(--sd-surface-card); border-radius: var(--sd-radius-sm); font-size: 15px; }

/* 카드 · 글 */
.sd-card { background: var(--sd-canvas); border: 1px solid var(--sd-hairline); border-radius: var(--sd-radius-md); padding: 20px 16px; display: flex; flex-direction: column; gap: 16px; }
.sd-h1 { font-size: 22px; line-height: 1.3; color: var(--sd-ink); }
.sd-h2 { font-size: 18px; line-height: 1.3; color: var(--sd-ink); }
.sd-kicker { font-size: 13px; letter-spacing: .02em; color: var(--sd-mute); font-weight: 600; }
.sd-text { color: var(--sd-body); }
.sd-tip { font-size: 13px; line-height: 1.6; color: var(--sd-mute); }
.sd-tip--bright { text-align: center; color: var(--sd-ink); font-weight: 600; }
.sd-list { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }

/* 배너 */
.sd-banner { padding: 12px 14px; border-radius: var(--sd-radius-sm); border: 1px solid var(--sd-hairline); background: var(--sd-surface-card); color: var(--sd-body); font-size: 15px; font-weight: 600; }
.sd-banner--ok { border-color: var(--sd-success); color: var(--sd-success); }
.sd-banner--error { border-color: var(--sd-error); color: var(--sd-error); }
.sd-banner--info { border-color: var(--sd-ink); color: var(--sd-ink); } /* 승인 대기 안내 - 주색이 빨강인 테마에서 오류처럼 보이지 않게 먹색 */
.sd-banner a { color: inherit; }

/* 폼 */
.sd-form { display: flex; flex-direction: column; gap: 16px; }
.sd-field { display: flex; flex-direction: column; gap: 6px; }
fieldset.sd-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.sd-field legend { padding: 0; }
.sd-label { font-weight: 600; color: var(--sd-ink); font-size: 15px; }
.sd-req, .sd-opt { font-size: 12px; font-weight: 500; }
.sd-req { color: var(--sd-error); }
.sd-opt { color: var(--sd-mute); }
.sd-input { width: 100%; min-height: 48px; padding: 10px 14px; font-size: 16px; color: var(--sd-ink); background: var(--sd-canvas); border: 1px solid var(--sd-hairline); border-radius: var(--wf-radius-action); }
.sd-input::placeholder { color: var(--sd-mute); opacity: .7; }
.sd-input:focus { outline: 2px solid var(--sd-focus); outline-offset: 1px; border-color: var(--sd-focus); }
.sd-field--error .sd-input { border-color: var(--sd-error); }
.sd-hint { font-size: 13px; color: var(--sd-mute); }
.sd-error { font-size: 13px; color: var(--sd-error); font-weight: 600; }
.sd-radios { display: flex; flex-direction: column; gap: 8px; }
.sd-radio { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border: 1px solid var(--sd-hairline); border-radius: var(--wf-radius-action); background: var(--sd-canvas); cursor: pointer; }
.sd-radio input { width: 20px; height: 20px; margin: 0; accent-color: var(--sd-primary); flex: none; }
.sd-radio:has(input:checked) { border-color: var(--sd-primary); box-shadow: inset 0 0 0 1px var(--sd-primary); }
.sd-radio:has(input:focus-visible) { outline: 2px solid var(--sd-focus); outline-offset: 1px; }
.sd-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--sd-dot, var(--sd-mute)); border: 1px solid var(--sd-hairline); flex: none; }
.sd-radio-label { font-weight: 600; color: var(--sd-ink); }
.sd-consent { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--sd-hairline); border-radius: var(--sd-radius-sm); background: var(--sd-surface-card); }
.sd-consent.sd-field--error { border-color: var(--sd-error); }
.sd-consent-title { font-weight: 700; color: var(--sd-ink); font-size: 15px; }
.sd-consent-text { max-height: 480px; overflow: auto; padding: 10px 12px; font-size: 14px; line-height: 1.6; color: var(--sd-body); background: var(--sd-canvas); border: 1px solid var(--sd-hairline); border-radius: var(--sd-radius-sm); }
.sd-consent-text:focus { outline: 2px solid var(--sd-focus); }
.sd-consent-text ul { padding-left: 18px; margin-top: 6px; }
.sd-consent-text li + li { margin-top: 4px; }
.sd-consent-text p + p { margin-top: 6px; }
.sd-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; color: var(--sd-ink); font-size: 15px; cursor: pointer; }
.sd-check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--sd-primary); flex: none; }
.sd-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* 버튼 */
.sd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 10px 20px; font-size: 16px; font-weight: 700; border-radius: var(--wf-radius-action); border: 1px solid var(--sd-hairline); background: var(--sd-canvas); color: var(--sd-ink); cursor: pointer; text-decoration: none; text-align: center; }
.sd-btn--primary { background: var(--sd-primary); color: var(--sd-canvas); border-color: var(--sd-primary); }
.sd-btn--primary:hover, .sd-btn--primary:active { background: var(--sd-primary-pressed); border-color: var(--sd-primary-pressed); }
.sd-btn--secondary { background: var(--sd-canvas); color: var(--sd-ink); border-color: var(--sd-hairline); }
.sd-btn--danger { background: var(--sd-canvas); color: var(--sd-error); border-color: var(--sd-error); }
.sd-btn--block { width: 100%; }
.sd-btn:focus-visible { outline: 2px solid var(--sd-focus); outline-offset: 2px; }
.sd-actions { display: flex; flex-direction: column; gap: 10px; }
.sd-actions .sd-btn { width: 100%; }
.sd-foot-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; }
.sd-foot-links a { color: var(--sd-mute); }

/* 티켓 */
.sd-ticket-head { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; }
.sd-status { display: inline-block; margin-top: 4px; padding: 4px 12px; border-radius: var(--sd-radius-lg); border: 1px solid currentColor; font-size: 14px; font-weight: 700; }
.sd-status--ok { color: var(--sd-success); }
.sd-status--pending { color: var(--sd-error); }
/* 코드 영역 - 흰 바탕 고정. 위아래 40px = QR 4모듈(360px 에서 모듈 약 8.3px, 1280px 에서 약 9.3px) 이상의 흰 여백(SPEC 7-1) */
.sd-code-area { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 16px; background: #fff; color: #000; border: 1px solid var(--sd-hairline); border-radius: var(--sd-radius-sm); }
.sd-qr { width: 232px; max-width: 80%; aspect-ratio: 1 / 1; image-rendering: pixelated; margin-bottom: 24px; } /* 다음 요소(바코드 · 코드 글자)까지 40px */
/* 바코드 - 인라인 SVG(views/public/ticket.ts barcodeSvg). 좌우 12px 안쪽 여백 + 영역 16px = Code 128 조용한 구역 10모듈 이상 */
.sd-barcode { width: 100%; max-width: 480px; padding: 0 12px; }
.sd-barcode svg { display: block; width: 100%; height: auto; }
.sd-code-text { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 22px; letter-spacing: .08em; font-weight: 700; color: #000; }
.sd-code-inline { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; font-weight: 700; color: var(--sd-ink); }

/* 토스트(복사 안내) - 짧은 글은 한 줄(max-content), 긴 글은 화면 폭 안에서 줄바꿈(360px 에서 양쪽이 잘리지 않게). fixed 라 % 는 뷰포트 기준 */
.sd-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 20; width: max-content; max-width: calc(100% - 32px); padding: 10px 18px; background: var(--sd-ink); color: var(--sd-canvas); border-radius: var(--sd-radius-lg); font-size: 14px; text-align: center; }

/* 꼬리말 */
.sd-footer { padding: 16px; text-align: center; font-size: 13px; color: var(--sd-mute); }
.sd-footer-product { font-size: 12px; opacity: .8; }

/* 제품 한 장 */
.sd-wrap.sd-home { max-width: 880px; }
.sd-home-hero { display: flex; flex-direction: column; gap: 10px; padding: 24px 4px 8px; }
.sd-home-hero h1 { font-size: 32px; line-height: 1.2; color: var(--sd-ink); }
.sd-lead { font-size: 17px; }
.sd-grid { display: grid; gap: 12px; }
.sd-grid .sd-card { gap: 8px; }
.sd-home-note { padding: 0 4px; }

/* 데스크톱 */
@media (min-width: 720px) {
  .sd-wrap { padding: 24px 24px 48px; gap: 20px; }
  .sd-card { padding: 28px; }
  .sd-title { font-size: 30px; }
  .sd-radios { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .sd-actions { flex-direction: row; }
  .sd-actions .sd-btn { width: auto; flex: 1; }
  .sd-grid { grid-template-columns: repeat(3, 1fr); }
  .sd-home-hero h1 { font-size: 40px; }
}

/* ── 추가 항목(textarea · select) · 행사 안내 · 쿠폰 안내 ── */
textarea.sd-input { height: auto; min-height: 128px; padding: 12px 16px; line-height: 1.5; resize: vertical; }
.sd-select { appearance: auto; }
.sd-hint { margin: 0; font-size: 13px; color: var(--sd-mute); }
.sd-guide-text { white-space: normal; line-height: 1.65; font-size: 16px; color: var(--sd-body); }
.sd-guide-img { display: block; max-width: 100%; height: auto; border-radius: var(--sd-radius-md); border: 1px solid var(--sd-hairline); }
.sd-guide { display: grid; gap: 24px; }
.sd-guide-fig { margin: 0; display: grid; gap: 6px; }
.sd-guide-fig a { display: block; }
/* 신청 페이지 안내문 아래 그림 · 파일 - 휴대폰에서는 신청 칸이 너무 밀리지 않게 그림 높이를 줄인다(누르면 원본) */
.sd-desc-files { display: grid; gap: 12px; margin-top: 12px; }
@media (max-width: 720px) { .sd-desc-files .sd-guide-img { max-height: 240px; width: 100%; object-fit: cover; object-position: top; } }
.sd-coupon-state { font-weight: 700; font-size: 18px; padding: 12px 16px; border-radius: var(--sd-radius-md); background: var(--sd-surface-card); border: 1px solid var(--sd-hairline); }
.sd-coupon-state.is-used { color: var(--sd-mute); }
.sd-coupon-state.is-fresh { color: var(--sd-success); }
.sd-mute { color: var(--sd-mute); font-weight: 400; font-size: 0.8em; }

/* WhaleFair 참가자 화면. 제품 배치와 행사 테마를 분리한다. */
.sd-public { background: var(--sd-surface-soft); line-height: 1.65; }
.sd-public :is(a,button,summary,input,select,textarea):focus-visible { outline: 3px solid var(--sd-focus); outline-offset: 3px; }
.wf-public-bar { width: 100%; min-height: 76px; padding: 16px max(24px, calc((100% - 1160px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--sd-canvas); border-bottom: 1px solid var(--sd-hairline); }
.wf-public-brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 750; color: var(--sd-ink); letter-spacing: -.6px; }
.wf-public-brand .wf-mark { background: var(--sd-ink); color: var(--sd-canvas); }
.wf-public-brand small { margin-left: 8px; color: var(--sd-mute); font-size: 11px; font-weight: 500; letter-spacing: 0; }
.wf-public-label { color: var(--sd-mute); font-size: 12px; }
/* 행사 공개 화면은 행사 아이덴티티를 앞에 두고 서비스 표시는 꼬리말에 둔다. */
.wf-event-bar { min-height: 76px; padding: 12px max(24px, calc((100% - 1160px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--sd-canvas); border-bottom: 1px solid var(--sd-hairline); }
.wf-event-identity { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 52px; text-decoration: none; }
.sd-public .wf-event-identity { color: var(--sd-ink); }
.wf-event-logo { width: auto; max-width: 112px; height: 36px; object-fit: contain; flex: none; }
.wf-event-name { font-size: 18px; line-height: 1.4; font-weight: 750; letter-spacing: -.4px; overflow-wrap: anywhere; }
.wf-event-context { flex: none; color: var(--sd-mute); font-size: 12px; line-height: 20px; }
.wf-registration-approval { margin: 0; padding: 14px 16px; border: 1px solid var(--sd-hairline); border-left: 3px solid var(--sd-primary); border-radius: var(--sd-radius-sm); color: var(--sd-body); font-size: 14px; line-height: 1.7; }
.sd-public .sd-input[readonly] { background: var(--sd-surface-soft); color: var(--sd-body); cursor: default; }
.wf-social-registration { display: grid; gap: 12px; min-width: 0; padding-bottom: 20px; border-bottom: 1px solid var(--sd-hairline); }
.wf-social-login-options { display: grid; gap: 8px; min-width: 0; }
.wf-social-start { display: grid; min-width: 0; margin: 0; }
.wf-social-registration .wf-social-help, .wf-social-registration .wf-social-message { margin: 0; }
.wf-social-help a { text-underline-offset: 3px; }
.wf-social-connected { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; min-height: 52px; padding: 12px 16px; border: 1px solid var(--sd-hairline); border-radius: var(--sd-radius-sm); background: var(--sd-surface-soft); color: var(--sd-ink); font-size: 16px; line-height: 24px; margin: 0; }
.wf-social-connected p { display: flex; align-items: center; gap: 8px; margin: 0; }
.wf-social-reset { display: grid; margin: 0; min-width: 0; }
.sd-public .wf-social-reset .sd-btn { padding-inline: 8px; border: 0; background: transparent; color: var(--sd-link, var(--sd-primary)); text-decoration: underline; text-underline-offset: 3px; }
.wf-social-message { padding: 12px 14px; border: 1px solid var(--sd-hairline); border-radius: var(--sd-radius-sm); background: var(--sd-surface-soft); color: var(--sd-body); }
/* 카카오 공식 완성형 원본을 보존한다. 브랜드 색은 행사 테마로 바꾸지 않는다.
   https://developers.kakao.com/docs/ko/kakaologin/design-guide */
.sd-public .wf-kakao-button, .sd-public .wf-kakao-button:hover, .sd-public .wf-kakao-button:active { padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: #fee500; color: rgb(0 0 0 / .85); }
/* NAVER 공식 PNG 원본. 지정 녹색·흰 로고/문구를 유지하고 가로 여백만 조정한다. https://developers.naver.com/docs/login/bi/bi.md */
.sd-public .wf-naver-button, .sd-public .wf-naver-button:hover, .sd-public .wf-naver-button:active { padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: #03a94d; color: #fff; }
.wf-social-button img { display: block; flex: none; width: auto; max-width: none; height: 52px; pointer-events: none; }
.sd-wrap { min-width: 0; max-width: var(--wf-form); padding: 40px 24px 48px; gap: 24px; }
.sd-wrap > *, .sd-card > *, .sd-field > *, .sd-meta dd { min-width: 0; }
.sd-wrap.wf-registration { max-width: 1160px; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; padding: 48px 24px 64px; align-items: start; }
.wf-event-panel { position: sticky; top: 32px; min-width: 0; display: grid; gap: 28px; }
.wf-reg-panel { min-width: 0; display: grid; gap: 24px; }
.wf-event-panel .sd-hero { border-radius: var(--sd-radius-md); overflow: hidden; }
.sd-hero img { aspect-ratio: 8 / 3; object-fit: contain; background: var(--sd-canvas); }
/* 옛 HTML 호환(10-19 배포 순간 - 새 화면은 빈 hero 를 그리지 않고 포스터 무대가 대신한다) */
.sd-hero--blank { height: 220px; display: flex; align-items: flex-end; padding: 28px; background: var(--sd-ink); color: var(--sd-canvas); }
.sd-hero--blank span { font-size: 28px; line-height: 1.4; font-weight: 650; }
.sd-hero--blank i { display: none; }
.sd-event-head { gap: 12px; padding: 0; }
.sd-title { font-size: 34px; line-height: 1.35; letter-spacing: -1.2px; font-weight: 750; }
.sd-organizer { font-size: 14px; }
.sd-meta { margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--sd-hairline); gap: 12px 20px; font-size: 14px; }
.sd-desc { border-radius: var(--sd-radius-sm); padding: 20px; line-height: 1.8; background: var(--sd-canvas); font-size: 14px; }
.sd-card { padding: 28px; gap: 24px; box-shadow: 0 8px 32px color-mix(in srgb, var(--sd-ink) 3%, transparent); }
.wf-form-heading { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 24px; border-bottom: 1px solid var(--sd-hairline); }
.wf-step { font-size: 13px; font-weight: 700; color: var(--sd-primary); background: var(--sd-surface-soft); border: 1px solid var(--sd-hairline); border-radius: var(--sd-radius-sm); padding: 8px 10px; }
.wf-form-heading .sd-tip { margin-top: 8px; }
.sd-h2 { font-size: 20px; line-height: 1.4; letter-spacing: -.5px; }
.sd-h3 { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 650; color: var(--sd-ink); }
.sd-form { gap: 24px; }
.sd-field { gap: 8px; }
.sd-label { font-size: 14px; }
.sd-req, .sd-opt { margin-left: 4px; font-size: 11px; white-space: nowrap; }
/* 단일 줄은 글자 24px + 상하 13px + 테두리 2px = 실제 52px. textarea는 여러 줄을 유지한다. */
.sd-input { height: var(--wf-control-public, 52px); min-height: var(--wf-control-public, 52px); padding: 13px 16px; line-height: 24px; background: var(--sd-canvas); }
.sd-input::placeholder { opacity: 1; }
.sd-input:hover { border-color: var(--sd-mute); }
.sd-input:disabled { background: var(--sd-surface-soft); color: var(--sd-mute); }
.sd-hint, .sd-error { font-size: 13px; line-height: 1.6; }
.sd-radios { display: flex; flex-direction: column; gap: 8px; }
.sd-radio { min-height: var(--wf-control-public, 52px); padding: 13px 16px; font-size: 14px; line-height: 24px; }
.sd-radio-label { min-width: 0; }
.sd-radio-fallback { display: block; margin-top: 4px; font-size: 13px; line-height: 20px; font-weight: 400; color: var(--sd-mute); overflow-wrap: anywhere; }
.sd-radio:has(input:checked) { background: color-mix(in srgb, var(--sd-primary) 4%, var(--sd-canvas)); }
.sd-consent { padding: 20px; background: var(--sd-surface-card); gap: 12px; }
.sd-consent-title { font-size: 14px; }
.sd-consent-text { margin-top: 8px; font-size: 13px; max-height: 360px; }
.wf-consent-details summary { min-height: var(--wf-control-public, 52px); display: list-item; padding: 14px 0; font-size: 13px; line-height: 24px; color: var(--sd-mute); cursor: pointer; }
.sd-check { min-height: var(--wf-control-public, 52px); padding: 12px 0; gap: 12px; font-size: 14px; line-height: 24px; }
.sd-btn { height: var(--wf-control-public, 52px); min-height: var(--wf-control-public, 52px); padding: 13px 20px; font-size: 16px; line-height: 24px; gap: 8px; white-space: nowrap; flex-shrink: 0; min-width: var(--wf-eq-w, auto); letter-spacing: var(--wf-action-track); transition: background var(--wf-duration), border-color var(--wf-duration); }
/* 관리자 입력 문구·첨부 파일명은 생략하지 않고 필요한 만큼만 여러 줄로 표시한다. */
.sd-btn--wrap { height: auto; white-space: normal; overflow-wrap: anywhere; }
.sd-btn:disabled { opacity: .55; cursor: wait; }
.sd-actions { gap: 12px; flex-wrap: wrap; }
.sd-actions > .sd-btn { flex-shrink: 0; }
.sd-banner { font-size: 14px; padding: 16px 20px; font-weight: 500; }
.sd-banner--ok { background: color-mix(in srgb, var(--sd-success) 5%, var(--sd-canvas)); }
.sd-banner--error { background: color-mix(in srgb, var(--sd-error) 5%, var(--sd-canvas)); }
.sd-footer { padding: 24px; border-top: 1px solid var(--sd-hairline); line-height: 1.8; font-size: 12px; }
.sd-footer-product { margin-top: 4px; font-size: 11px; opacity: 1; }
.sd-wrap.wf-privacy { max-width: 880px; }
.wf-privacy { line-height: 1.8; overflow-wrap: anywhere; }
.wf-privacy-section { scroll-margin-top: 24px; }
.wf-privacy-list { display: grid; gap: 20px; }
.wf-privacy-list dt { color: var(--sd-ink); font-weight: 700; margin-bottom: 6px; }
.wf-privacy-list dd { margin: 0; color: var(--sd-body); }
.wf-privacy .sd-meta { margin-top: 0; }
/* 티켓은 스캔 가능한 백색 영역과 사람을 위한 안내 영역을 구분한다. */
.sd-wrap.sd-ticket { max-width: 480px; }
.sd-wrap.sd-ticket--seat-map { max-width: 720px; }
.sd-ticket-seat-map { display: grid; gap: 8px; min-width: 0; padding-block: 20px; border-block: 1px solid var(--sd-hairline); }
.sd-ticket-seat-map h2 { margin: 0; color: var(--sd-ink); font-size: 20px; line-height: 28px; font-weight: 750; }
.sd-ticket-seat-map-label { margin: 0; color: var(--sd-ink); font-size: 16px; line-height: 24px; font-weight: 650; overflow-wrap: anywhere; }
.sd-ticket-seat-map .sd-tip { margin: 0; }
.sd-ticket-seat-map-canvas { min-width: 0; margin-top: 8px; padding: 12px; border: 1px solid var(--sd-hairline); border-radius: var(--sd-radius-sm); background: #fff; }
.sd-ticket-seat-map-svg { display: block; width: 100%; height: auto; }
.sd-ticket-card { border-top: 4px solid var(--sd-primary); gap: 20px; }
.sd-ticket-head { gap: 8px; }
.sd-ticket-head .sd-h1 { font-size: 22px; }
.sd-status { font-size: 12px; padding: 5px 10px; margin-top: 2px; }
.sd-status--pending { color: var(--sd-body); }
.sd-code-area { border: 0; border-radius: 0; padding: 40px 16px; }
.sd-qr { width: 232px; max-width: 100%; }
.sd-code-text { font-size: 20px; }
.sd-meta--ticket { margin-top: 0; border: 0; border-radius: var(--sd-radius-sm); padding: 20px 16px; gap: 10px 16px; }
.sd-meta--ticket .sd-meta-deadline :is(dt,dd) { color: var(--sd-ink); font-weight: 750; }
.sd-mobile-seat { display: grid; gap: 12px; padding: 28px 20px; text-align: center; background: var(--sd-surface-soft); border: 1px solid var(--sd-hairline); border-radius: var(--sd-radius-sm); }
.sd-mobile-seat-label { margin: 0; color: var(--sd-mute); font-size: 14px; line-height: 20px; font-weight: 600; }
.sd-mobile-seat-value { margin: 0; color: var(--sd-ink); font-size: clamp(28px, 6vw, 40px); line-height: 1.35; font-weight: 800; overflow-wrap: anywhere; }
.sd-mobile-seat-message { margin: 0; color: var(--sd-ink); font-size: 20px; line-height: 1.5; font-weight: 750; word-break: keep-all; overflow-wrap: anywhere; }
.sd-mobile-seat .sd-tip { margin: 0; }
.sd-ticket-entry-qr { display: grid; gap: 12px; text-align: center; }
/* 같은 카드의 소제목(나의 좌석 배치도)과 같은 크기 */
.sd-ticket-entry-qr h2 { margin: 0; color: var(--sd-ink); font-size: 20px; line-height: 28px; font-weight: 750; }
/* QR만 흰 바탕. 최대232px 코드 주위32px는 최소4모듈의 quiet zone을 확보한다. */
.sd-ticket-entry-qr .sd-code-area { padding: 32px; border-radius: var(--sd-radius-sm); }
.sd-ticket-entry-qr .sd-qr { margin: 0; }
.sd-ticket-entry-qr .sd-tip { margin: 0; }
.sd-ticket-map { white-space: nowrap; }
.sd-admission-notice { display: grid; gap: 20px; min-width: 0; padding: 24px 20px; border: 1px solid var(--sd-hairline); border-top: 4px solid var(--sd-primary); border-radius: var(--sd-radius-sm); background: color-mix(in srgb, var(--sd-primary) 7%, var(--sd-canvas)); color: var(--sd-body); font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.sd-admission-notice h2 { margin: 0; color: var(--sd-ink); font-size: 20px; line-height: 1.45; font-weight: 750; }
.sd-admission-notice p { margin: 0; }
.sd-admission-deadline { display: grid; gap: 8px; }
.sd-admission-label { color: var(--sd-body); font-size: 14px; font-weight: 650; }
.sd-admission-deadline time { color: var(--sd-ink); font-size: 40px; line-height: 1.2; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sd-admission-deadline-body { color: var(--sd-ink); font-weight: 650; }
.sd-admission-arrival { display: grid; gap: 8px; }
.sd-admission-deadline + .sd-admission-arrival { padding-top: 20px; border-top: 1px solid var(--sd-hairline); }
.sd-admission-arrival h3 { margin: 0; color: var(--sd-ink); font-size: 18px; line-height: 1.5; font-weight: 750; }
.sd-ticket .sd-actions { flex-direction: column; }
.sd-ticket .sd-tip { font-size: 13px; line-height: 1.6; }
.sd-ticket-card--pending { border-top-color: var(--sd-primary); }
.sd-ticket-card--pending .sd-status { padding: 7px 14px; color: var(--sd-ink); font-size: 14px; line-height: 20px; background: var(--sd-surface-soft); }
.sd-ticket-pending-note { display: grid; gap: 12px; padding: 24px 20px; border: 1px solid var(--sd-hairline); border-left: 4px solid var(--sd-primary); border-radius: var(--sd-radius-sm); background: color-mix(in srgb, var(--sd-primary) 6%, var(--sd-canvas)); color: var(--sd-body); font-size: 15px; line-height: 1.75; }
.sd-ticket-pending-note :is(h2,strong) { color: var(--sd-ink); font-size: 20px; line-height: 1.45; font-weight: 750; }
.sd-ticket-pending-note p { margin: 0; }
.sd-ticket-pending-actions, [data-ticket-code-actions] { display: flex; flex-direction: column; gap: 12px; }
.sd-ticket-pending-actions > .sd-btn { width: 100%; }
[data-ticket-code-panel][hidden], [data-ticket-code-actions][hidden] { display: none !important; }
.sd-ticket-download-help { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.sd-ticket-download-help > .sd-tip { margin: 0; }
.sd-ticket-image-open { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; color: var(--sd-primary); font-size: 14px; line-height: 20px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.sd-ticket-image-open:focus-visible { outline: 2px solid var(--sd-focus); outline-offset: 3px; border-radius: 4px; }
.sd-ticket-download-status { margin: 0; font-size: 13px; line-height: 20px; color: var(--sd-body); overflow-wrap: anywhere; }
.sd-ticket-download-status[data-state="error"] { color: var(--sd-error); }
[data-ticket-download][aria-disabled="true"] { opacity: .65; cursor: wait; }
.sd-tip--bright { padding-bottom: 20px; border-bottom: 1px dashed var(--sd-hairline); }
/* 제품 소개: 실제 서비스의 세 단계. 이미지나 수치를 임의로 만들지 않는다. */
.sd-wrap.sd-home { max-width: 1120px; gap: 40px; }
.sd-home-hero { padding: 48px 0 24px; gap: 24px; max-width: 800px; }
.sd-home-hero h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.2; letter-spacing: -2px; font-weight: 750; }
.sd-home-hero .sd-lead { max-width: 620px; font-size: 17px; color: var(--sd-mute); }
.sd-home-hero .sd-actions { align-self: flex-start; }
.sd-home .sd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sd-home .sd-grid .sd-card { gap: 16px; box-shadow: none; }
.sd-home .sd-text { font-size: 14px; }
.wf-feature-number { font-size: 13px; color: var(--sd-mute); padding-bottom: 16px; border-bottom: 1px solid var(--sd-hairline); }
.sd-home-agency .sd-list { font-size: 14px; gap: 12px; }
@media (max-width: 900px) {
  .sd-wrap.wf-registration { grid-template-columns: 1fr; max-width: 640px; gap: 32px; padding-top: 28px; }
  .wf-event-panel { position: static; gap: 24px; }
  .sd-title { font-size: 28px; }
  .sd-home .sd-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .wf-event-bar { min-height: 68px; padding: 8px 16px; gap: 12px; }
  .wf-event-name { font-size: 16px; }
  .wf-event-logo { max-width: 72px; height: 32px; }
  .wf-event-context { display: none; }
  .wf-public-bar { min-height: 64px; padding: 12px 20px; gap: 12px; }
  .wf-public-brand { font-size: 18px; }
  .wf-public-brand small { display: none; }
  .wf-public-brand .wf-mark { width: 30px; height: 30px; border-radius: 9px; }
  .wf-public-label { font-size: 11px; }
  .sd-wrap, .sd-wrap.wf-registration { padding: 24px 16px 40px; gap: 24px; }
  .sd-card { padding: 24px 20px; }
  .sd-title { font-size: 26px; letter-spacing: -.8px; }
  .sd-hero:has(source) img { aspect-ratio: 4 / 5; max-height: 400px; }
  .sd-consent { padding: 16px; }
  .sd-meta { gap: 10px 16px; }
  .sd-home-hero { padding-top: 24px; }
  .sd-home-hero .sd-actions { align-self: stretch; }
  .sd-home-hero .sd-actions .sd-btn { width: 100%; }
  .sd-ticket-card { padding: 24px 16px; }
  .sd-seat-page .sm-pickbar { flex-direction: column; align-items: stretch; }
  .sm-pickbar .sd-btn { width: 100%; }
}
/* 파생 대비 토큰: 밝은 행사색에서도 버튼과 링크의 읽기 순서를 지킨다. */
.sd-public a { color: var(--sd-link, var(--sd-primary)); }
.sd-public .sd-btn--primary { color: var(--sd-on-primary, var(--sd-canvas)); }
.sd-public .sd-btn--primary:hover, .sd-public .sd-btn--primary:active { color: var(--sd-on-primary-pressed, var(--sd-canvas)); }
.sd-public .sd-btn--secondary { color: var(--sd-ink); }
.sd-public .sd-btn--danger { color: var(--sd-error); }
.sd-public .sd-foot-links a { color: var(--sd-mute); }
.sd-page-error .sd-wrap { padding-top: 80px; }
.wf-step { color: var(--sd-link, var(--sd-primary)); }

/* ── 좌석 고르기 (/q/:code/seat · 10-16) - 행사 테마 색, 칸 34px(손가락), 지도 상자만 가로 스크롤, 확인 막대는 아래 고정 ── */
.sd-seat-page .sm-zone { display: grid; gap: 10px; }
/* 배치도 - 무대 하나 + 구역 나란히(세로 열 구역은 옆으로, 휴대폰에서 넘치면 아래로) */
.sm-hall { display: grid; gap: 16px; min-width: 0; }
.sm-hall-zones { display: flex; flex-wrap: wrap; gap: 24px 32px; justify-content: center; align-items: flex-start; min-width: 0; }
.sm-zone--h { flex: 1 1 100%; min-width: 0; }
.sm-zone--v { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.sm-zone--v .sm-zone-head { width: 0; min-width: max(100%, 6rem); }
.sm-rows--v { grid-auto-flow: column; grid-template-rows: auto auto auto; align-items: start; }
.sm-rows--v > .sm-row { display: contents; }
.sm-rows--v .sm-line { flex-direction: column; }
.sm-rows--v .sm-rowname { width: 34px; white-space: nowrap; font-size: 11px; }
.sm-rows--v .sm-rowname:first-child { align-self: end; }
.sm-stage { justify-self: center; min-width: 50%; padding: 6px 24px; border-radius: 0 0 14px 14px; background: var(--sd-surface-soft); border: 1px solid var(--sd-hairline); border-top: 0; color: var(--sd-mute); font-size: 13px; text-align: center; letter-spacing: .3em; }
/* 무대 아래 · 왼쪽 · 오른쪽(10-18) - 왼쪽 · 오른쪽은 배치도 높이만큼 세로 띠, 숨김은 띠가 없다. 구역 사이 표시(예: 연설단)는 나란히 놓인 세로 구역들의 가운데 틈에 세로 띠 */
.sm-hall--stage-left { grid-template-columns: auto minmax(0, max-content); justify-content: center; }
.sm-hall--stage-right { grid-template-columns: minmax(0, max-content) auto; justify-content: center; }
.sm-stage--bottom { border-radius: 14px 14px 0 0; border-top: 1px solid var(--sd-hairline); border-bottom: 0; }
.sm-stage--left, .sm-stage--right { justify-self: stretch; align-self: stretch; min-width: 0; display: grid; place-items: center; padding: 24px 6px; border-top: 1px solid var(--sd-hairline); writing-mode: vertical-rl; text-orientation: upright; }
.sm-stage--left { border-radius: 0 14px 14px 0; border-left: 0; }
.sm-stage--right { border-radius: 14px 0 0 14px; border-right: 0; }
.sm-between { flex: 0 0 auto; align-self: stretch; display: grid; place-items: center; min-width: 32px; padding: 12px 6px; border: 1px solid var(--sd-hairline); border-radius: 10px; background: var(--sd-surface-soft); color: var(--sd-mute); font-size: 13px; line-height: 1; letter-spacing: .3em; writing-mode: vertical-rl; text-orientation: upright; }
/* 스탠딩(10-22 SPEC 92장) - 칸이 아니라 이름 · 인원 상자(고를 수 없음), 배치도의 무대 반대쪽 끝에 한 줄. 내 자리면 진한 실선 */
.sm-standing-band { flex: 1 1 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; min-width: 0; }
.sm-standing { display: grid; gap: 2px; justify-items: center; min-width: 160px; max-width: 100%; padding: 12px 20px; border: 1px dashed var(--sd-hairline); border-radius: 10px; background: var(--sd-surface-soft); text-align: center; }
.sm-standing-name { font-size: 15px; line-height: 22px; color: var(--sd-ink); overflow-wrap: anywhere; }
.sm-standing-count { font-size: 13px; line-height: 18px; color: var(--sd-mute); font-variant-numeric: tabular-nums; }
.sm-standing--mine { border: 2px solid var(--sd-ink); }
.sm-scroll { overflow-x: auto; padding: 2px 2px 8px; -webkit-overflow-scrolling: touch; }
.sm-rows { display: grid; gap: 5px; width: max-content; margin: 0 auto; }
.sm-row { display: flex; gap: 5px; align-items: center; }
.sm-rowname { width: 20px; flex: none; text-align: center; font-size: 12px; font-weight: 700; color: var(--sd-mute); }
.sm-aisle { width: 16px; height: 16px; flex: none; }
.sm-line { display: flex; gap: 5px; align-items: center; }
.sm-rows--h { grid-template-columns: auto auto auto; align-items: center; }
.sm-rows--h > .sm-row { display: contents; }
.sm-rows--h .sm-rowname { width: auto; min-width: 20px; white-space: nowrap; }
.sm-seat { width: 34px; height: 34px; flex: none; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--sd-hairline); border-radius: 8px; background: var(--sd-canvas); color: var(--sd-body); font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; }
button.sm-seat { cursor: pointer; }
.sm-seat--free:hover, .sm-seat--free:focus-visible { border-color: var(--sd-primary); outline: 2px solid var(--sd-focus); outline-offset: 1px; }
.sm-seat--taken { background: var(--sd-surface-soft); color: var(--sd-mute); border-color: transparent; opacity: .6; }
.sm-seat--mine, .sm-seat[aria-pressed="true"] { background: var(--sd-primary); color: var(--sd-on-primary, #fff); border-color: var(--sd-primary); font-weight: 700; }
.sm-seat--off { border-style: dashed; border-color: transparent; background: transparent; }
.sm-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--sd-mute); }
.sm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sm-legend .sm-seat { width: 18px; height: 18px; }
.sm-pickbar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 12px 16px; border: 1px solid var(--sd-hairline); border-radius: var(--sd-radius-md, 12px); background: var(--sd-canvas); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.sm-pickbar[hidden] { display: none; }
/* 휴대폰 폭에 맞춘 좌석 고르기 지도(10-23 대표님 - 배치도가 화면보다 넓어 좌우로 밀림, SPEC 104장): 가로 구역(한 줄에 하나)은 구역 폭을 그릇으로 삼아
   칸 크기를 '구역 폭 ÷ 가장 긴 줄 칸 수(--sm-n - seatHallHtml)' 로 줄인다(34px 까지 · 12px 아래로는 줄이지 않고 그때만 지도 상자를 옆으로 민다 - 320 폭에 12칸 줄이 들어감, 작은 칸은 아래 확인 막대 '이 자리로 정하기' 로 한 번 더 확인). 줄 이름 · 칸 사이도 함께 줄인다.
   세로 구역(나란히 놓임)은 내용 폭이라 그대로 */
.sd-seat-page .sm-zone--h { container: sm-zone / inline-size; }
.sd-seat-page .sm-zone--h .sm-scroll { --sm-gap: 3px; --sm-cell: clamp(12px, calc((100cqi - 48px) / var(--sm-n, 12) - var(--sm-gap)), 34px); padding-inline: 0; }
.sd-seat-page .sm-zone--h .sm-rows, .sd-seat-page .sm-zone--h .sm-row, .sd-seat-page .sm-zone--h .sm-line { gap: var(--sm-gap); }
.sd-seat-page .sm-zone--h .sm-seat { width: var(--sm-cell); height: var(--sm-cell); border-radius: 6px; font-size: clamp(8px, calc(var(--sm-cell) * .4), 12px); }
.sd-seat-page .sm-zone--h .sm-aisle { width: var(--sm-cell); height: var(--sm-cell); }
.sd-seat-page .sm-zone--h .sm-rows--h .sm-rowname { min-width: 18px; font-size: 11px; }
/* 라운드(부채꼴 - 11-07 SPEC 180장): 관리자 배치도와 같은 좌표(views/seatmap.ts fanHallHtml) × --fan-u. 칸 한 변 = 칸 간격 × 0.7(45° 호에서도 이웃과 안 겹침 - admin-ops.css 같은 셈).
   좌석 고르기는 칸 간격을 화면 폭에 맞춰 줄인다(17px - 칸 12px, 반듯한 배치도 최소 칸과 같음 - 아래로는 줄이지 않고 지도 상자를 옆으로 민다 - 작은 칸은 아래 확인 막대로 한 번 더 확인) */
.sm-zone--fan { flex: 1 1 100%; min-width: 0; }
.sm-fan-heads { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; }
.sm-fan { --fan-u: 48px; position: relative; width: calc(var(--fan-w) * var(--fan-u)); height: calc(var(--fan-h) * var(--fan-u)); margin: 0 auto; }
.sm-fan > .sm-fan-line { display: contents; }
.sm-fan :is(.sm-fan-at, .sm-fan-title, .sm-rowname) { position: absolute; left: calc(var(--x) * var(--fan-u)); top: calc(var(--y) * var(--fan-u)); transform: translate(-50%, -50%); margin: 0; }
.sm-fan-at { display: block; line-height: 0; }
.sm-fan .sm-rowname { width: auto; min-width: 0; white-space: nowrap; }
.sm-fan-title { font-size: 14px; line-height: 20px; font-weight: 800; color: var(--sd-ink); white-space: nowrap; }
.sd-seat-page .sm-zone--fan { container: sm-zone / inline-size; }
.sd-seat-page .sm-zone--fan .sm-fan { --fan-u: clamp(17px, calc((100cqi - 8px) / var(--fan-w)), 48px); }
.sm-fan .sm-seat, .sd-seat-page .sm-zone--fan .sm-seat { width: calc(var(--fan-u) * .7); height: calc(var(--fan-u) * .7); border-radius: 6px; font-size: clamp(8px, calc(var(--fan-u) * .3), 12px); }
.sd-seat-page .sm-zone--fan .sm-rowname { font-size: clamp(9px, calc(var(--fan-u) * .32), 12px); }
.sd-seat-page .sm-zone--fan .sm-fan-title { font-size: clamp(11px, calc(var(--fan-u) * .4), 14px); }
.sm-pickbar__label { font-weight: 700; color: var(--sd-ink); }


/* 서비스 기본 화면은 Forest 다크, 행사 전용 테마 및 인쇄 색은 해당 팩을 따른다. */
.wf-brand-theme { --sd-link:#b9e6cc; --sd-on-primary:#0d1c17; --sd-on-primary-pressed:#ffffff; --sd-canvas:#12261f; --sd-surface-soft:#0d1c17; --sd-surface-card:#1e3932; --sd-hairline:#466456; --sd-ink:#f2f0eb; --sd-body:#dedfd5; --sd-mute:#b3c6ba; --sd-primary:#a9d9bf; --sd-primary-pressed:#006241; --sd-error:#ffb4ab; --sd-success:#a9d9bf; --sd-focus:#cba258; color-scheme:dark; }
.wf-brand-theme .sd-btn--primary { background:#00754a; color:#fff; }
.wf-brand-theme .wf-public-brand .wf-mark { background:#0a3125; }
.sd-guide-table { overflow:auto; }
.sd-guide-table table { width:100%; border-collapse:collapse; font-size:14px; }
.sd-guide-table th,.sd-guide-table td { text-align:left; padding:12px 8px; border-bottom:1px solid var(--sd-hairline); vertical-align:top; }
.sd-guide-table th:nth-child(-n+2),.sd-guide-table td:nth-child(-n+2) { white-space:nowrap; }
/* 11-05 밤 대표님 "참가 페이지에 식순에 '비고'가 비/고 줄바꿈 현상이 모바일이던 웹이던" - 내용이 길면 표가 빈 비고 칸을 한 글자 폭까지 줄여 머리 글이 꺾였다.
   머리 칸은 늘 한 줄(칸 최소 폭 = 머리 글 폭), 칸 글은 낱말 단위로 줄바꿈(한글 낱말 가운데서 꺾지 않음 · 아주 긴 글만 넘칠 때 꺾음) */
.sd-guide-table th { white-space:nowrap; }
.sd-guide-table td { word-break:keep-all; overflow-wrap:break-word; }
.sd-guide-map { overflow:auto; padding:16px; border:1px solid var(--sd-hairline); border-radius:12px; background:#fff; }
.sd-guide-map .b-seat-map { display:block; width:100%; min-width:320px; height:auto; }
.sd-guide-agenda,.sd-guide-seats { display:grid; gap:12px; }

.sd-public.wf-brand-theme .sd-btn--primary { color:#fff; }
.wf-brand-theme .sm-seat--mine { color:#0d1c17; }

/* 참가 신청 페이지 편집. 아래 범위는 입장권·키오스크·행사 테마 원본에 적용하지 않는다. */
.sd-page-register .wf-registration-block { min-width:0; }
.sd-page-register .wf-event-panel { --wf-reg-block-gap:28px; gap:var(--wf-reg-block-gap); }
.sd-page-register .wf-registration-description { display:grid; gap:12px; }
.sd-page-register [data-registration-block="info"] + [data-registration-block="description"] .wf-registration-description { margin-top:calc(12px - var(--wf-reg-block-gap)); }
.sd-page-register .wf-registration-agenda,
.sd-page-register .wf-registration-notice { gap:16px; }
.sd-page-register .wf-registration-agenda table { min-width:340px; }
.sd-page-register .wf-registration-agenda .sd-guide-table { max-width:100%; }
.sd-page-register .wf-reg-width-wide { max-width:1440px; }
.sd-page-register .wf-reg-layout-form-first { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); }
.sd-page-register .wf-reg-layout-stacked { grid-template-columns:minmax(0,1fr); max-width:760px; }
.sd-page-register .wf-reg-layout-stacked.wf-reg-width-wide { max-width:1160px; }
.sd-page-register .wf-reg-layout-stacked .wf-event-panel { position:static; }
.sd-page-register .wf-reg-layout-stacked .wf-reg-panel { width:100%; max-width:640px; justify-self:center; }
.sd-page-register .wf-reg-align-center .wf-event-panel { text-align:center; }
.sd-page-register .wf-reg-align-center .sd-logo { align-self:center; }
.sd-page-register .wf-reg-align-center .sd-meta { text-align:left; }
.sd-page-register .wf-reg-align-center .wf-form-heading { justify-content:center; text-align:center; }
/* 11-07 가운데 정렬 시트 머리 - 제목 · 알약 · 숫자 칸을 위아래로(줄바꿈 없이 - 세로 줄이 갈라져 두 열이 되지 않게), 숫자 칸 둘 규칙(flex 100%)보다 세게 */
.sd-page-register .wf-reg-align-center .wf-sheet-top { flex-direction:column; flex-wrap:nowrap; align-items:center; text-align:center; }
.sd-page-register .wf-reg-align-center .wf-sheet-head .wf-sheet-top > .wf-sheet-stats { flex:none; width:auto; max-width:100%; justify-items:center; }
.sd-page-register .wf-reg-align-center .wf-sheet-policy { margin-inline:auto; }
.sd-page-register .wf-reg-align-center .wf-sheet-notes { text-align:center; }
.sd-page-register .wf-form-heading > .wf-step { flex:none; white-space:nowrap; }
.sd-page-register .wf-form-heading > div { min-width:0; }
.sd-page-register .wf-reg-fit-cover .sd-hero img { object-fit:cover; }
.sd-page-register .wf-reg-fit-contain .sd-hero img { object-fit:contain; }
.sd-page-register .wf-reg-hero-wide .sd-hero img { aspect-ratio:16/9; height:auto; max-height:none; }
.sd-page-register .wf-reg-hero-square .sd-hero img { aspect-ratio:1; height:auto; max-height:none; }
.sd-page-register .wf-reg-spacing-compact { gap:28px; padding-top:28px; padding-bottom:40px; }
.sd-page-register .wf-reg-spacing-compact .wf-event-panel { --wf-reg-block-gap:16px; }
.sd-page-register .wf-reg-spacing-compact .wf-reg-panel,
.sd-page-register .wf-reg-spacing-compact .sd-form { gap:16px; }
.sd-page-register .wf-reg-spacing-compact .sd-card,
.sd-page-register .wf-reg-spacing-compact .sd-desc { padding:20px; }
.sd-page-register .wf-reg-spacing-compact .wf-form-heading { padding-bottom:16px; }
.sd-page-register .wf-reg-spacing-compact .sd-consent { padding:16px; gap:10px; }
/* 신청 페이지 사용자 색(10-19 포스터): 배경 = 무대(--sd-stage), 카드 = 흰 시트(.wf-reg-panel), 버튼 = 신청 단추. 무대 위 글자는 --wf-reg-on-stage */
.sd-page-register.wf-registration-colors {
  background:var(--wf-reg-background);
  --sd-stage:var(--wf-reg-background); --sd-on-stage:var(--wf-reg-on-stage, var(--wf-reg-page-ink));
  --sd-stage-tint:var(--wf-reg-stage-tint, var(--wf-reg-background)); --sd-stage-shade:var(--wf-reg-stage-shade, var(--wf-reg-background));
  --sd-canvas:var(--wf-reg-surface); --sd-surface-card:var(--wf-reg-surface); --sd-surface-soft:var(--wf-reg-background);
  --sd-primary:var(--wf-reg-accent); --sd-primary-pressed:var(--wf-reg-pressed);
  --sd-on-primary:var(--wf-reg-on-accent); --sd-on-primary-pressed:var(--wf-reg-on-pressed);
  --sd-ink:var(--wf-reg-page-ink); --sd-body:var(--wf-reg-page-body); --sd-mute:var(--wf-reg-page-mute);
  --sd-hairline:var(--wf-reg-page-line); --sd-link:var(--wf-reg-page-link); --sd-focus:var(--wf-reg-page-ink);
  --sd-error:var(--wf-reg-page-error); --sd-success:var(--wf-reg-page-success);
}
.sd-page-register.wf-registration-colors :is(.wf-reg-panel,.sd-skip,.wf-preview-banner) {
  color:var(--sd-body);
  /* 시트 안 연한 면(읽기 전용 칸 · 계정 연결됨 상자)은 카드 기준 옅은 면 - 무대(배경)색이 아니다(10-19 검토 C3) */
  --sd-surface-soft:var(--wf-reg-card-soft, var(--wf-reg-surface));
  --sd-ink:var(--wf-reg-card-ink); --sd-body:var(--wf-reg-card-body); --sd-mute:var(--wf-reg-card-mute);
  --sd-hairline:var(--wf-reg-card-line); --sd-link:var(--wf-reg-card-link); --sd-focus:var(--wf-reg-card-ink);
  --sd-error:var(--wf-reg-card-error); --sd-success:var(--wf-reg-card-success);
}
.sd-public.wf-registration-colors .sd-btn--primary { background:var(--wf-reg-accent); border-color:var(--wf-reg-accent); color:var(--wf-reg-on-accent); }
.sd-public.wf-registration-colors .sd-btn--primary:hover,
.sd-public.wf-registration-colors .sd-btn--primary:active { background:var(--wf-reg-pressed); border-color:var(--wf-reg-pressed); color:var(--wf-reg-on-pressed); }
.sd-page-register.wf-registration-colors .wf-step { background:var(--wf-reg-surface); }
/* 직접 지정한 글자색은 신청 버튼 하나에만 적용한다. hover·active·disabled·접수 중에도 같은 선택을 유지한다. */
.sd-public.sd-page-register .sd-btn.wf-registration-submit[data-registration-button-text] { color:var(--wf-reg-button-text); }
.wf-public-preview .wf-preview-banner { padding:12px 20px; border-bottom:1px solid var(--sd-hairline); color:var(--sd-ink); text-align:center; font-size:12px; }
.wf-public-preview .sd-btn:disabled { opacity:1; cursor:default; }
.wf-public-preview [aria-disabled="true"] { cursor:default; }
.wf-public-preview .sd-foot-links span { color:var(--sd-mute); }
@media(max-width:900px) {
  .sd-page-register .wf-registration { grid-template-columns:minmax(0,1fr); max-width:640px; }
  .sd-page-register .wf-reg-width-wide { max-width:760px; }
  .sd-page-register .wf-event-panel { --wf-reg-block-gap:24px; }
  .sd-page-register .wf-reg-spacing-compact { gap:24px; }
}
@media(max-width:600px) {
  .sd-page-register .wf-reg-spacing-compact { gap:20px; padding-top:20px; }
  .sd-page-register .wf-reg-spacing-compact .sd-card { padding:20px 16px; }
  .wf-public-preview .wf-preview-banner { padding:10px 16px; }
}

/* ════════ 포스터 몰입형(10-19 대표님 선택 시안 ①) ════════
   행사 화면은 화면 전체가 행사 포스터(무대 --sd-stage)이고, 신청서 · 입장권 · 안내는 그 위에 놓인 흰 시트(.sd-card · .wf-sheet)다.
   색은 전부 토큰 - 무대 --sd-stage · 그 위 글자 --sd-on-stage · 시트 머리(깊은 면) --sd-deep · --sd-on-deep (lib/theme.ts posterLook · themeCss).
   글자 그림(.wf-kv-mark)은 --sd-kv-mark 를 CSS mask 로 쓰고 색은 currentColor 라 어느 무대색 · 밝은 행사색(검정 글자)에서도 같은 규칙.
   빨강 위 흰 글자(4.58:1, AA 경계)는 16px · 굵기 500 이상, 작은 글은 굵기 600 이상만 둔다. 숫자 · 기울인 큰 글자는 장식(aria-hidden), 읽기 글은 표 · h1 이 맡는다. */
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
html:has(> body.wf-poster) { background:var(--sd-stage); scroll-behavior:smooth; }
.wf-poster {
  --wf-on-stage-line:color-mix(in srgb, var(--sd-on-stage) 32%, transparent);
  --wf-sheet-radius:28px;
  position:relative; color:var(--sd-on-stage); background-color:var(--sd-stage); background-image:url(/static/img/grain.png);
}
.wf-poster--photo { background-image:none; }
.wf-poster > :is(header, main, footer, .wf-preview-banner) { position:relative; z-index:1; }
/* 기본 공개(Forest) 무대 - 테마 없는 행사 */
.wf-brand-theme.wf-poster { --sd-stage:#0d1c17; --sd-on-stage:#f2f0eb; --sd-deep:#1e3932; --sd-on-deep:#f2f0eb; --sd-stage-tint:#a9d9bf; --sd-stage-shade:#2c4a3e; }
.wf-poster :is(a, button, summary, input, select, textarea):focus-visible { outline:3px solid var(--sd-on-stage); outline-offset:3px; }
.wf-poster :is(.sd-card, .sd-banner) :is(a, button, summary, input, select, textarea):focus-visible { outline-color:var(--sd-focus); }

/* 사진 무대: 그림을 화면 가득(흐리게) + 어두운 막 - 글자는 흰색 */
.wf-stage-photo { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:var(--sd-stage); }
.wf-stage-photo img { display:block; width:100%; height:100%; object-fit:cover; filter:blur(10px); transform:scale(1.08); }
.wf-stage-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgb(0 0 0 / .64), rgb(0 0 0 / .5) 42%, rgb(0 0 0 / .68)); }
/* 글자 그림 무대의 바탕 메아리 - 무대색보다 조금 짙은(어두운 무대는 밝은) 큰 글자 그림을 10도 올려 화면 밖까지(정지 그림) */
.wf-poster-echo { position:absolute; z-index:0; left:0; right:0; top:0; height:1700px; overflow:hidden; pointer-events:none; }
.wf-poster-echo .wf-kv-mark { position:absolute; width:1500px; max-height:none; left:-220px; top:1010px; color:color-mix(in srgb, var(--sd-stage) 72%, var(--sd-stage-shade)); transform:rotate(-10deg); transform-origin:0 100%; }

/* 글자 그림(키비주얼에서 뽑은 투명 PNG) - 색은 currentColor */
.wf-kv-mark { display:block; width:100%; aspect-ratio:var(--sd-kv-ratio, 2.9); max-height:60vh; background-color:currentColor;
  -webkit-mask:var(--sd-kv-mark) left center / contain no-repeat; mask:var(--sd-kv-mark) left center / contain no-repeat; }
.wf-kv-fallback { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; transform:none !important; }

/* 머리 띠 - 무대 위 투명, 행사명은 무대 글자색. 로고는 흰 받침(흰 바탕용 원본) */
.wf-poster .wf-event-bar { background:transparent; border-bottom:1px solid var(--wf-on-stage-line); padding-inline:max(24px, calc((100% - 1200px) / 2 + 40px)); }
.wf-poster .wf-event-identity, .wf-poster .wf-event-context { color:var(--sd-on-stage); }
.wf-poster .wf-event-name { font-weight:800; }
.wf-poster .wf-event-context { font-size:13px; font-weight:700; }
.wf-logo-plate, .wf-poster :is(.sd-event-head, .wf-sheet-head) .sd-logo { box-sizing:border-box; padding:5px 9px; border-radius:10px; background:#fff; }
.wf-poster .wf-event-logo.wf-logo-plate { height:40px; }
.wf-poster .wf-preview-banner { border-bottom:0; background:var(--sd-canvas); color:var(--sd-ink); font-weight:600; }
.wf-poster .sd-footer { color:var(--sd-on-stage); border-top:1px solid var(--wf-on-stage-line); font-size:13px; font-weight:600; }
.wf-poster .sd-footer-product { font-size:12px; font-weight:600; }
.wf-poster .sd-footer a { color:inherit; }
.wf-poster .sd-foot-links a, .wf-poster .sd-foot-links span { display:inline-flex; align-items:center; min-height:44px; color:var(--sd-on-stage); font-size:15px; font-weight:800; text-underline-offset:4px; }
.wf-poster main > .sd-banner, .wf-poster .wf-reg-panel > .sd-banner { border-radius:16px; }

/* 무대 위 포스터 조각 - 주최 · 주관 알약 · 글자 그림 · 큰 행사명 · 큰 날짜 · 정보 표 */
.wf-poster-hero { display:grid; justify-items:start; gap:28px; min-width:0; }
.wf-poster-presenter { display:inline-flex; align-items:center; max-width:100%; min-height:40px; margin:0; padding:6px 18px; border:2px solid currentColor; border-radius:999px; font-size:15px; line-height:24px; font-weight:800; letter-spacing:-.2px; }
.wf-poster-mark { max-width:560px; }
.wf-poster .wf-poster-hero .sd-hero { width:100%; border-radius:20px; overflow:hidden; box-shadow:0 30px 60px -30px rgb(0 0 0 / .55); }
/* 비율 '자동'이면 액자가 그림 크기에 맞는다(휴대폰 4:5 그림이 높이 상한에 걸려 옆에 흰 띠가 생기지 않게). 16:9 · 1:1 지정은 예전 규칙 그대로 */
.wf-poster .wf-reg-hero-auto .wf-poster-hero .sd-hero { width:auto; max-width:100%; }
.wf-poster .wf-reg-hero-auto .wf-poster-hero .sd-hero img { width:auto; max-width:100%; height:auto; max-height:min(400px, 60vh); aspect-ratio:auto; background:transparent; }
.wf-poster .sd-event-head { display:block; padding:0; color:inherit; }
.wf-poster .sd-event-head > .sd-logo { display:block; height:48px; margin-bottom:24px; }
.wf-poster .sd-title, .wf-stage-title { display:block; margin:0; padding-right:.2em; color:inherit; font-weight:900; line-height:1.08; letter-spacing:-.04em; overflow-wrap:anywhere; }
/* 낱말마다 제 밑줄 기준으로 10도 기울인다(여러 줄이어도 왼쪽 시작선이 같다) */
.wf-skew { display:inline-block; transform:skewX(-10deg); transform-origin:0 100%; }
.wf-poster .sd-title.wf-poster-title--xl { font-size:76px; }
.wf-poster .sd-title.wf-poster-title--l { font-size:60px; }
.wf-poster .sd-title.wf-poster-title--m { font-size:46px; }
.wf-poster .sd-title.wf-poster-title--s { font-size:36px; }
.wf-poster-date { display:flex; flex-wrap:wrap; align-items:flex-end; gap:6px 22px; margin:0; }
.wf-poster-date b { display:block; padding-right:.08em; font-size:120px; line-height:.8; font-weight:900; letter-spacing:-.05em; transform:skewX(-10deg); transform-origin:0 100%; font-variant-numeric:tabular-nums; }
.wf-poster-date span { display:grid; padding-bottom:2px; font-size:24px; line-height:1.25; font-weight:900; letter-spacing:-.02em; }
.wf-poster-date em { font-style:normal; font-weight:700; font-variant-numeric:tabular-nums; }
.wf-poster .sd-event-head .wf-poster-date { margin-top:40px; }
.wf-poster .sd-event-head .wf-kv-fallback + .wf-poster-date { margin-top:0; }
.wf-poster .sd-event-head .sd-meta { display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:0; margin-top:40px; padding-top:0; border-top:3px solid currentColor; font-size:16px; line-height:1.55; }
.wf-poster .sd-event-head .wf-kv-fallback + .sd-meta { margin-top:0; }
.wf-poster .sd-event-head .sd-meta :is(dt, dd) { padding:13px 0; border-bottom:1px solid var(--wf-on-stage-line); color:inherit; }
.wf-poster .sd-event-head .sd-meta dt { padding-right:22px; font-weight:800; white-space:nowrap; }
.wf-poster .sd-event-head .sd-meta dd { font-weight:500; }
.wf-poster .sd-event-head .sd-addr { color:inherit; }
.wf-poster .sd-event-head .sd-map-btn { min-height:26px; margin-left:6px; padding:0 11px; border:0; background:var(--sd-on-stage); color:var(--sd-stage); font-size:13px; font-weight:800; }
.wf-poster .sd-event-head .sd-map-btn:is(:hover, :focus-visible) { border-color:transparent; outline:3px solid var(--sd-on-stage); outline-offset:2px; }
.wf-poster a.wf-poster-jump, .wf-poster span.wf-poster-jump { display:none; align-items:center; justify-content:center; gap:8px; height:52px; margin-top:0; border-radius:var(--wf-radius-action); background:var(--sd-on-stage); color:var(--sd-stage); font-size:16px; font-weight:800; text-decoration:none; }
.wf-poster .wf-event-panel a:not(.sd-map-btn, .wf-poster-jump) { color:inherit; }
/* 무대 위 보조 글(안내 그림 설명 등)도 무대 글자색 - 회색 보조색은 무대에서 읽히지 않는다 */
.wf-poster :is(.wf-event-panel, .wf-poster-col) :is(.sd-tip, .sd-hint, .sd-mute) { color:inherit; font-weight:600; }

/* 신청 페이지 틀 - 넓으면 포스터 | 시트, 한 줄형은 포스터 위 · 시트 아래, 신청서 우선형은 시트 | 포스터 */
.wf-poster .sd-wrap.wf-registration { max-width:1200px; padding:44px 40px 96px; grid-template-columns:minmax(0, 1fr) minmax(0, 560px); gap:72px; align-items:start; }
.wf-poster .wf-registration.wf-reg-width-wide { max-width:1440px; }
.wf-poster .wf-registration.wf-reg-layout-form-first { grid-template-columns:minmax(0, 560px) minmax(0, 1fr); }
.wf-poster .wf-registration.wf-reg-layout-stacked { grid-template-columns:minmax(0, 1fr); max-width:760px; gap:48px; }
.wf-poster .wf-registration.wf-reg-layout-stacked.wf-reg-width-wide { max-width:1160px; }
.wf-poster .wf-reg-layout-stacked .wf-reg-panel { width:100%; max-width:640px; justify-self:center; }
.wf-poster .wf-reg-layout-stacked a.wf-poster-jump, .wf-poster .wf-reg-layout-stacked span.wf-poster-jump { display:flex; }
.wf-poster .wf-registration.wf-reg-spacing-compact { gap:40px; padding-top:28px; padding-bottom:56px; }
.wf-poster .wf-event-panel { --wf-reg-block-gap:40px; position:static; top:auto; display:grid; gap:var(--wf-reg-block-gap); min-width:0; color:var(--sd-on-stage); }
.wf-poster .wf-reg-spacing-compact .wf-event-panel { --wf-reg-block-gap:24px; }
.wf-poster [data-registration-block="info"] + [data-registration-block="description"] .wf-registration-description { margin-top:0; }
@media (min-width:901px) and (min-height:760px) {
  .wf-poster .wf-registration:not(.wf-reg-layout-stacked) .wf-event-panel[data-poster-pin] { position:sticky; top:var(--wf-pin-top, 28px); }   /* 열이 화면보다 길면 public.js 가 위를 더 올려 아래 끝까지 보이게(SPEC 75장) */
}
.wf-poster .wf-reg-panel { gap:20px; }
.wf-poster .wf-reg-panel:target, .wf-poster #apply { scroll-margin-top:12px; }
.wf-poster .wf-reg-align-center .wf-event-panel { text-align:center; }
.wf-poster .wf-reg-align-center .wf-poster-hero { justify-items:center; }
.wf-poster .wf-reg-align-center .wf-kv-mark { -webkit-mask-position:center; mask-position:center; }
.wf-poster .wf-reg-align-center .wf-poster-date { justify-content:center; }
/* 무대 위 설명 · 식순 · 추가 안내 - 포스터 문법(굵은 윗줄 + 무대 글자), 본문 16px · 500 */
.wf-poster .wf-registration-description { padding-top:18px; border-top:3px solid currentColor; color:inherit; }
.wf-poster .wf-registration-description .sd-desc { margin:0; padding:0; background:transparent; color:inherit; font-size:16px; line-height:1.75; font-weight:500; }
.wf-poster .wf-event-panel .sd-card { gap:12px; padding:18px 0 0; border:0; border-top:3px solid currentColor; border-radius:0; background:transparent; box-shadow:none; color:inherit; }
.wf-poster .wf-event-panel .sd-card .sd-h2 { color:inherit; font-size:20px; font-weight:900; }
.wf-poster .wf-event-panel .sd-card .sd-text { color:inherit; font-size:16px; font-weight:500; }
.wf-poster .wf-event-panel .sd-guide-table :is(th, td) { border-bottom-color:var(--wf-on-stage-line); color:inherit; font-size:15px; }
.wf-poster .wf-event-panel .sd-guide-table th { font-weight:800; }
.wf-poster .wf-event-panel .sd-guide-table td { font-weight:500; }

/* 흰 시트 - 머리 띠(깊은 면)와 본문. 입력 테두리는 글자색 42%(3:1 이상), 강조 면은 주색 6% */
.wf-poster .sd-card { --wf-sheet-line:color-mix(in srgb, var(--sd-ink) 42%, var(--sd-canvas)); --wf-sheet-tint:color-mix(in srgb, var(--sd-primary) 6%, var(--sd-canvas));
  border:0; border-radius:var(--wf-sheet-radius); background:var(--sd-canvas); color:var(--sd-body); box-shadow:0 44px 84px -36px rgb(0 0 0 / .5), 0 2px 0 rgb(0 0 0 / .05); }
.wf-poster .sd-card.wf-sheet, .wf-poster .sd-card.sd-guide { gap:0; padding:0; overflow:hidden; }
.wf-poster .wf-sheet-head { display:grid; gap:6px; padding:28px 32px 24px; background:var(--sd-deep); color:var(--sd-on-deep); }
.wf-poster .wf-sheet-head :is(.sd-h1, .sd-h2, .sd-kicker, .sd-tip, .sd-text) { margin:0; color:inherit; }
.wf-poster .wf-sheet-head .sd-h1 { font-size:26px; line-height:1.25; font-weight:900; letter-spacing:-.6px; }
.wf-poster .wf-sheet-head .sd-h2 { font-size:24px; line-height:1.25; font-weight:900; letter-spacing:-.6px; }
.wf-poster .wf-sheet-body { display:grid; gap:22px; min-width:0; padding:28px 32px 32px; }
.wf-poster .sd-card .sd-btn:not(.wf-social-button) { border-radius:var(--wf-radius-action); }
/* 신청서 머리 - 단계 · 제목 · 안내 + 숫자 칸(잔여 객석 · 접수 마감 · 정책 알약) */
.wf-poster .wf-form-heading { gap:14px; padding:0; border:0; }
.wf-poster .wf-sheet-head .wf-step { padding:5px 9px; border:0; border-radius:8px; background:var(--sd-on-deep); color:var(--sd-deep); font-size:13px; line-height:18px; font-weight:900; }
.wf-poster .wf-form-heading .sd-h2 { font-size:28px; line-height:1.2; letter-spacing:-.8px; }
.wf-poster .wf-sheet-notes .sd-tip { font-size:15px; line-height:1.6; }
/* 11-07 머리 윗줄(대표님 그림판 시안 - "이런식으로 바꿔달랬던거"): 왼쪽 [01 제목] 아래 정책 알약 · 오른쪽 숫자 칸(잔여 객석 · 접수 마감 D-day), 구분선 아래 안내 글 · 좌석 안내.
   숫자 칸은 가장 좁은 폭(min-content - 접수 마감 날짜와 시각 사이 줄바꿈)에서 시작해 남는 자리만큼 한 줄 폭까지 넓어진다 - 좁아도 제목 · 알약은 그대로.
   제목이 길어 둘이 한 줄에 못 서면 숫자 칸이 아래 줄로. 숫자 칸이 둘(잔여 객석 + 접수 마감)이면 제목 아래 한 줄 두 열(예전 숫자 칸 줄 - 신청서 폭 496 에는 제목과 두 칸이 한 줄에 못 선다).
   휴대폰(머리 안쪽 400 이하)은 알약을 [01] 앞선에 맞춰(제목 아래 들여쓰기 없이) 제목 쪽을 좁힌다 - 360 · 390 에서 가장 긴 날짜('12월 31일(목) 24:00')도 한 줄(11-07 측정),
   300 이하(320 폭)는 접수 마감 칸을 제목 아래 줄로 */
.wf-poster .wf-sheet-head:has(> .wf-sheet-top) { container:wf-sheet-head / inline-size; }
.wf-sheet-top { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:16px 24px; }
.wf-sheet-top > .wf-form-heading { flex:0 1 auto; min-width:0; }
.wf-sheet-stats { flex:1 0 auto; width:min-content; max-width:max-content; display:grid; }
.wf-sheet-top > .wf-sheet-stats:has(.wf-sheet-stat + .wf-sheet-stat) { flex:1 1 100%; width:auto; max-width:none; grid-template-columns:1fr 1fr; gap:10px 20px; }
@container wf-sheet-head (max-width:400px) {
  .wf-sheet-top { gap:12px; }
  .wf-sheet-top > .wf-form-heading { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; column-gap:12px; }
  .wf-sheet-top > .wf-form-heading > div { display:contents; }
  .wf-sheet-top > .wf-form-heading .wf-sheet-policy { grid-column:1 / -1; }
}
@container wf-sheet-head (max-width:300px) { .wf-sheet-top > .wf-sheet-stats { flex:1 1 100%; width:auto; max-width:none; } }
.wf-sheet-notes { display:grid; gap:4px; margin-top:16px; padding-top:16px; border-top:1px solid color-mix(in srgb, var(--sd-on-deep) 30%, transparent); }
.wf-sheet-stat { display:grid; align-content:start; gap:2px; margin:0; min-width:0; }   /* 위에서부터 - 옆 칸이 더 길어도(접수 마감 작은 날짜 줄) 이름 · 숫자 시작선이 같다(10-22 SPEC 100장) */
.wf-sheet-stat > span { font-size:13px; line-height:18px; font-weight:700; }   /* 칸 이름만 - 작은 날짜 줄 안 덩어리(span)는 작은 글 크기 그대로(10-22 검토 고침) */
.wf-sheet-stat b { font-size:34px; line-height:1.1; font-weight:900; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.wf-sheet-stat small { margin-left:3px; font-size:16px; font-weight:800; letter-spacing:-.3px; }
/* 접수 마감(10-22 SPEC 100장) - 큰 글은 남은 날(D-3 · D-DAY - 잔여 객석 숫자와 같은 크기 · 같은 줄), 그 아래 줄 작은 글은 실제 마감(월 · 일 · 요일 · 시:분).
   작은 글은 날짜 · 시각 두 덩어리이고 줄바꿈 금지는 덩어리 안만 - 기본 크기는 한 줄, 글자를 키운 휴대폰(앱 안 브라우저 글자 배율 · 페이지 확대)에서 넘치면
   날짜와 시각 사이에서 두 줄(시트가 overflow:hidden 이라 통째 줄바꿈 금지면 시각 끝이 잘렸음 - 10-22 검토 고침) */
.wf-sheet-stat .wf-sheet-due { margin:0; font-size:15px; line-height:20px; font-weight:700; letter-spacing:-.2px; }
.wf-sheet-stat .wf-sheet-due > span { white-space:nowrap; }
.wf-sheet-note { margin:0; font-size:15px; line-height:1.6; font-weight:600; }
.wf-sheet-policy { display:flex; width:fit-content; align-items:center; gap:8px; min-height:32px; margin:10px 0 0; padding:4px 14px; border:1px solid color-mix(in srgb, var(--sd-on-deep) 45%, transparent); border-radius:999px; font-size:14px; line-height:20px; font-weight:800; }
.wf-sheet-policy::before { content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--sd-stage); box-shadow:0 0 0 2px var(--sd-on-deep); }
/* 시트 안 입력 - 참가자 52px 그대로, 테두리 1.5px · 모서리 12px */
.wf-poster .wf-sheet .sd-form { gap:22px; }
.wf-poster .wf-sheet .sd-label { font-size:15px; line-height:22px; font-weight:800; }
.wf-poster .wf-sheet .sd-req { font-weight:800; }
.wf-poster .wf-sheet .sd-input { border:1.5px solid var(--wf-sheet-line); border-radius:var(--wf-radius-action); }
/* 고르기 칸 - 글자색으로 그린 꺾쇠(어느 시트색에서도 보임) */
.wf-poster .wf-sheet .sd-select { -webkit-appearance:none; appearance:none; padding-right:44px; background-color:var(--sd-canvas);
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 24px) 50%, calc(100% - 18px) 50%; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; }
/* 고른 표시는 링크색(시트에서 4.5:1 이상 - 밝은 행사색이면 검정) */
.wf-poster .wf-sheet :is(.sd-radio, .sd-check) input { accent-color:var(--sd-link, var(--sd-primary)); }
.wf-poster .wf-sheet .sd-input:hover { border-color:var(--sd-ink); }
.wf-poster .wf-sheet .sd-input:focus { border-color:var(--sd-focus); }
.wf-poster .wf-sheet .sd-field--error .sd-input { border-color:var(--sd-error); }
.wf-poster .wf-sheet .sd-radio { align-items:flex-start; border:1.5px solid var(--wf-sheet-line); border-radius:var(--wf-radius-action); }
.wf-poster .wf-sheet .sd-radio input { margin-top:2px; }
.wf-poster .wf-sheet .sd-radio .sd-dot { margin-top:5px; }
.wf-poster .wf-sheet .sd-radio:has(input:checked) { border-color:var(--sd-link, var(--sd-primary)); box-shadow:inset 0 0 0 1.5px var(--sd-link, var(--sd-primary)); background:var(--wf-sheet-tint); }
.wf-poster .wf-sheet .sd-radio-label { font-size:15px; font-weight:800; }
.wf-poster .wf-sheet .sd-consent { gap:2px; padding:18px 20px 8px; border:0; border-radius:16px; background:var(--wf-sheet-tint); }
.wf-poster .wf-sheet .sd-consent.sd-field--error { box-shadow:inset 0 0 0 1.5px var(--sd-error); }
.wf-poster .wf-sheet .sd-consent-title { font-size:15px; font-weight:900; }
.wf-poster .wf-sheet .wf-consent-details summary { color:var(--sd-body); font-size:14px; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.wf-poster .wf-sheet .sd-consent-text { border:0; border-radius:10px; background:var(--sd-canvas); }
.wf-poster .wf-sheet .sd-check { align-items:center; font-size:15px; font-weight:800; }
.wf-poster .wf-registration-approval { border:0; border-left:4px solid var(--sd-primary); border-radius:0 12px 12px 0; background:var(--wf-sheet-tint); }
.wf-poster .wf-registration-approval + .wf-registration-approval { margin-top:-10px; }
/* 신청 단추 - 참가자 규격 52px · 16px 그대로(시안의 18px 대신), 굵기 900 + 오른쪽 화살표로 강조 */
.wf-poster .wf-registration-submit { margin-top:4px; gap:10px; font-weight:900; letter-spacing:-.3px; }
.wf-poster .wf-registration-submit::after { content:""; flex:none; width:20px; height:20px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h12M11 5l5 5-5 5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h12M11 5l5 5-5 5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.wf-poster .wf-sheet .wf-social-registration { padding-bottom:22px; border-bottom-color:var(--wf-sheet-line); }

/* 다른 참가자 화면 - 무대 머리(글자 그림 또는 큰 행사명 + 큰 날짜) 아래 시트 */
.wf-poster .sd-wrap:not(.wf-registration) { padding:32px 24px 56px; gap:20px; }
.wf-stage-head { display:grid; justify-items:start; gap:16px; padding:4px 0 8px; color:var(--sd-on-stage); }
.wf-stage-mark { max-width:380px; }
.wf-stage-title.wf-poster-title--xl { font-size:48px; }
.wf-stage-title.wf-poster-title--l { font-size:40px; }
.wf-stage-title.wf-poster-title--m { font-size:32px; }
.wf-stage-title.wf-poster-title--s { font-size:26px; }
.wf-poster-date--sm { gap:4px 14px; }
.wf-poster-date--sm b { font-size:64px; letter-spacing:-.05em; }
.wf-poster-date--sm span { font-size:17px; }
/* 입장권 - 머리 띠에 종류 · 행사명 · 상태 알약, 본문에 QR · 좌석 · 정보 · 행동 */
.wf-poster .sd-card.sd-ticket-card { border-top:0; }
.wf-poster .sd-ticket-head { justify-items:center; text-align:center; gap:6px; }
.wf-poster .sd-ticket-head .sd-kicker { font-size:13px; line-height:20px; font-weight:800; letter-spacing:.02em; }
.wf-poster .sd-ticket-head .sd-h1 { font-size:24px; }
.wf-poster .sd-ticket-head .sd-logo { height:40px; margin-bottom:6px; }
.wf-poster .sd-ticket-head .sd-status { display:inline-flex; align-items:center; gap:8px; margin-top:6px; padding:6px 14px; border:1px solid color-mix(in srgb, var(--sd-on-deep) 55%, transparent); background:transparent; color:var(--sd-on-deep); font-size:14px; line-height:20px; font-weight:800; }
.wf-poster .sd-ticket-head .sd-status::before { content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--sd-stage); box-shadow:0 0 0 2px var(--sd-on-deep); }
.wf-poster .sd-ticket-body { gap:20px; }
.wf-poster .sd-guide .wf-sheet-body { gap:24px; }
.wf-poster .wf-sheet--map .wf-sheet-body { padding:24px 16px; }
/* 안내 한 장(행사 안내 · 쿠폰) - 신청 페이지 포스터와 같은 순서의 무대 */
.wf-poster-col { display:grid; gap:36px; min-width:0; padding:4px 0 8px; color:var(--sd-on-stage); }
/* 시트 묶음 - 좁으면 무대 머리 아래로 쌓고, 넓으면(1024px 이상) 신청 페이지처럼 포스터 | 시트 두 열 */
.wf-sheet-col { display:grid; gap:20px; min-width:0; }
.wf-sheet-col > * { min-width:0; }
@media (min-width:1024px) {
  .wf-poster .sd-wrap:has(> .wf-sheet-col) { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 520px); align-items:start; gap:72px; max-width:1200px; padding:44px 40px 96px; }
  .wf-poster .sd-wrap.sd-ticket--seat-map:has(> .wf-sheet-col) { grid-template-columns:minmax(0, 1fr) minmax(0, 720px); gap:56px; }
  .wf-poster .sd-wrap > .wf-stage-head { gap:36px; padding-top:0; }
  /* 10-25 F12: 행사 안내(/guide)의 포스터 열이 옆 시트 열보다 4px 내려가 있던 것 - 두 열 위 선 맞춤 */
  .wf-poster .sd-wrap > .wf-poster-col { padding-top:0; }
  .wf-poster .sd-wrap > .wf-stage-head .wf-stage-mark { max-width:560px; }
  .wf-poster .sd-wrap > .wf-stage-head .wf-poster-date--sm { gap:6px 22px; }
  .wf-poster .sd-wrap > .wf-stage-head .wf-poster-date--sm b { font-size:120px; }
  .wf-poster .sd-wrap > .wf-stage-head .wf-poster-date--sm span { font-size:24px; }
  .wf-poster .sd-wrap > .wf-stage-head .wf-stage-title.wf-poster-title--xl { font-size:76px; }
  .wf-poster .sd-wrap > .wf-stage-head .wf-stage-title.wf-poster-title--l { font-size:60px; }
  .wf-poster .sd-wrap > .wf-stage-head .wf-stage-title.wf-poster-title--m { font-size:46px; }
  .wf-poster .sd-wrap > .wf-stage-head .wf-stage-title.wf-poster-title--s { font-size:36px; }
}
@media (min-width:1024px) and (min-height:760px) {
  .wf-poster .sd-wrap:has(> .wf-sheet-col) > .wf-stage-head { position:sticky; top:28px; }
}

@media (max-width:900px) {
  .wf-poster-echo { height:1000px; }
  .wf-poster-echo .wf-kv-mark { width:1100px; left:-170px; top:690px; }
  .wf-poster .wf-event-bar { min-height:64px; padding:8px 20px; }
  .wf-poster .sd-wrap.wf-registration { grid-template-columns:minmax(0, 1fr); gap:0; max-width:640px; padding:0; }
  .wf-poster .wf-registration.wf-reg-layout-stacked { gap:0; }
  .wf-poster .wf-event-panel { --wf-reg-block-gap:28px; padding:28px 20px 36px; }
  .wf-poster .wf-reg-spacing-compact .wf-event-panel { --wf-reg-block-gap:20px; padding-top:20px; padding-bottom:28px; }
  .wf-poster-presenter { min-height:36px; padding:4px 14px; font-size:14px; }
  .wf-poster-hero { gap:22px; }
  .wf-poster .sd-title.wf-poster-title--xl { font-size:46px; }
  .wf-poster .sd-title.wf-poster-title--l { font-size:38px; }
  .wf-poster .sd-title.wf-poster-title--m { font-size:30px; }
  .wf-poster .sd-title.wf-poster-title--s { font-size:26px; }
  .wf-poster .sd-event-head .wf-poster-date { margin-top:30px; }
  .wf-poster-date { gap:4px 16px; }
  .wf-poster-date b { font-size:84px; }
  .wf-poster-date span { font-size:18px; }
  .wf-poster .sd-event-head .sd-meta { margin-top:28px; font-size:15px; }
  .wf-poster .sd-event-head .sd-meta :is(dt, dd) { padding:11px 0; }
  .wf-poster .sd-event-head .sd-meta dt { padding-right:16px; }
  .wf-poster a.wf-poster-jump, .wf-poster span.wf-poster-jump { display:flex; }
  .wf-poster .wf-reg-panel { gap:0; overflow:hidden; border-radius:28px 28px 0 0; background:var(--sd-canvas); color:var(--sd-body); box-shadow:0 -18px 40px -18px rgb(0 0 0 / .45); }
  .wf-poster .wf-reg-panel > .sd-card { border-radius:0; box-shadow:none; }
  .wf-poster .wf-reg-panel > .sd-banner { margin:20px 20px 0; }
  .wf-poster .wf-reg-panel .sd-foot-links { padding:0 20px 28px; }
  .wf-poster .wf-reg-panel .sd-foot-links :is(a, span) { color:var(--sd-body); }
  .wf-poster .wf-reg-panel .sd-foot-links a:focus-visible { outline-color:var(--sd-focus); }
  .wf-poster .wf-sheet-head { padding:28px 20px 22px; }
  .wf-poster .wf-form-heading .sd-h2 { font-size:24px; }
  .wf-poster .wf-sheet-stat b { font-size:28px; }
  .wf-poster .wf-sheet-stat .wf-sheet-due { font-size:14px; }   /* 큰 글처럼 한 단계 - 320 폭 두 칸(130px)에 '10월 22일(목) 24:00' 한 줄(SPEC 100장 측정) */
  .wf-poster .wf-sheet-body { padding:24px 20px 28px; }
  /* 신청서 우선형 · 서버가 돌려준 오류: 시트가 포스터보다 위, 네 모서리 둥글게 */
  .wf-poster .wf-reg-layout-form-first .wf-reg-panel, .wf-poster .wf-reg-has-error .wf-reg-panel { margin-top:16px; border-radius:28px; }
  .wf-poster .wf-reg-has-error:not(.wf-reg-layout-form-first) .wf-reg-panel { order:-1; }
  .wf-poster .wf-reg-has-error :is(a, span).wf-poster-jump { display:none; }
}
@media (max-width:600px) {
  .wf-poster .sd-wrap:not(.wf-registration) { padding:24px 20px 40px; }
  .wf-poster { --wf-sheet-radius:24px; }
  .wf-poster .sd-card.wf-sheet, .wf-poster .sd-card.sd-guide { padding:0; }
  .wf-poster .wf-sheet-head { padding:24px 20px 20px; }
  .wf-poster .wf-sheet-body { padding:22px 20px 26px; }
  .wf-poster .wf-sheet--map .wf-sheet-body { padding:20px 12px; }
  .wf-stage-mark { max-width:300px; }
  .wf-stage-title.wf-poster-title--xl { font-size:40px; }
  .wf-stage-title.wf-poster-title--l { font-size:34px; }
  .wf-stage-title.wf-poster-title--m { font-size:28px; }
  .wf-stage-title.wf-poster-title--s { font-size:24px; }
  .wf-poster-date--sm b { font-size:56px; }
  .wf-poster-date--sm span { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) {
  html:has(> body.wf-poster) { scroll-behavior:auto; }
}

/* ════════ 모바일 티켓 ①(10-19 대표님 "쭉해줘" - 시안 poster-ticket, SPEC 73장) ════════
   입장권(/q/:code) · 신청 취소 · 무효 코드(410) 화면은 body .pt(views/public/ticket.ts · notice.ts). 포스터 위에 놓인 '흰 티켓' 한 장(이름 · 상태 · 입장 확인 QR | 절취선 | 나의 좌석)과
   그 아래 흰 시트(나의 좌석 배치도 · 행사 정보 · 입장 안내 · 공유 · 이미지 저장 · 행사 안내). 무대색이 상태를 말한다 - 입장 전 무대 · 입장 완료 깊은 면(직원 휴대폰의 '이미 입장' 과 같은 색) · 무효 꺼진 회색.
   색은 테마 토큰만(--sd-*), 입장 확인 QR 칸만 흰 바탕 · 검정 고정(스캐너). 시트 위에서 무대색으로 칠하는 것(모서리 · 마감 띠 · 입장 안내 · 주 단추)은 --sd-stage-action(흰 무대면 무대 위 글자색 - 10-19 검토 C4).
   모든 규칙이 .wf-poster.pt 아래라 옛 HTML(배포 순간)과 다른 참가자 화면은 그대로다. */
.wf-poster.pt {
  --pt-act: var(--sd-stage-action, var(--sd-stage)); --pt-on-act: var(--sd-on-stage-action, var(--sd-on-stage));
  --pt-line: color-mix(in srgb, var(--sd-ink) 42%, var(--sd-canvas));   /* 절취선 · 입력 테두리 - 3:1 이상 */
  --pt-hair: color-mix(in srgb, var(--sd-ink) 14%, var(--sd-canvas));
  --pt-stamp: var(--sd-link, var(--sd-primary));                         /* 입장 완료 도장 - 시트 위 AA(밝은 행사색이면 잉크) */
  --pt-seat-ink: var(--sd-deep);                                          /* 큰 좌석 글자 - 서버가 main 에 AA 색을 싣는다 */
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M7 21l9 9 18-19' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ico-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M9 21l8 8 15-17' fill='none' stroke='%23fff' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ico-ticket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M2 0h16a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V9a2 2 0 0 0 0-4V2a2 2 0 0 1 2-2z' fill='%23000'/%3E%3C/svg%3E");
  --ico-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M4.9 19.1l1.8-1.8M17.3 6.7l1.8-1.8'/%3E%3C/g%3E%3C/svg%3E");
  --ico-glass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12M6 21h12M7.5 3c0 4.5 9 5 9 9s-9 4.5-9 9M16.5 3c0 4.5-9 5-9 9s9 4.5 9 9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --ico-scan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8V5.5A1.5 1.5 0 0 1 5.5 4H8M16 4h2.5A1.5 1.5 0 0 1 20 5.5V8M20 16v2.5a1.5 1.5 0 0 1-1.5 1.5H16M8 20H5.5A1.5 1.5 0 0 1 4 18.5V16M4 12h16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ico-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15V3.5M7.5 8L12 3.5 16.5 8M5 12.5V19a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ico-save: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5V15M7.5 10.5L12 15l4.5-4.5M4.5 20.5h15' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ico-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.5s-6.8-6-6.8-11.4a6.8 6.8 0 0 1 13.6 0C18.8 15.5 12 21.5 12 21.5z' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='10' r='2.6' fill='%23000'/%3E%3C/svg%3E");
  --ico-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12a8 8 0 1 1-2.6-5.9M20 4v5h-5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ico-seat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 11V5.5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2V11M4.5 11h15v5h-15zM6.5 16v4.5M17.5 16v4.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* 입장 완료 - 무대가 깊은 면(남색, 직원 휴대폰 · 키오스크 '이미 입장' 과 같은 색). 무효 - 꺼진 무대(짙은 회색) */
.wf-poster.pt--entered { --sd-stage: var(--sd-deep); --sd-on-stage: var(--sd-on-deep); --pt-act: var(--sd-deep); --pt-on-act: var(--sd-on-deep); }
html:has(> body.wf-poster.pt--entered) { background: var(--sd-deep); }
.wf-poster.pt--void { --sd-stage: color-mix(in srgb, var(--sd-primary) 12%, #2b2b28); --sd-on-stage: #ffffff; --pt-act: #2b2b28; --pt-on-act: #ffffff; }
html:has(> body.wf-poster.pt--void) { background: color-mix(in srgb, var(--sd-primary) 12%, #2b2b28); }
/* 기본 공개(Forest 어두운 시트) - 무대색 조작은 Forest 주 단추 녹색, 큰 좌석 글자는 잉크(어두운 시트 위) */
.wf-brand-theme.wf-poster.pt { --pt-act: #00754a; --pt-on-act: #ffffff; --pt-seat-ink: var(--sd-ink); }
.wf-brand-theme.wf-poster.pt--entered { --pt-act: #1e3932; }
.wf-poster.pt :is(.pt-ticket, .pt-sheet) :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline-color: var(--sd-focus); }

/* 바탕 메아리 - 키비주얼 글자 그림을 무대색보다 조금 어둡게, 10도 올려 티켓 옆 · 아래로. 짧은 화면(무효 · 취소)을 늘리지 않게 본문 높이까지만 */
.wf-poster.pt .wf-poster-echo { height: min(1180px, 100%); }
.wf-poster.pt .wf-poster-echo .wf-kv-mark { width: 1100px; left: -150px; top: 560px; color: color-mix(in srgb, var(--sd-stage) 92%, #000); }

/* 틀 - 휴대폰은 포스터 머리 위 · 티켓 · 시트 아래로 한 열. clip 이라 넓은 화면 포스터 sticky 는 그대로(도장이 커질 때도 가로 넘침 0) */
.wf-poster.pt .sd-wrap.pt-wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0; width: 100%; max-width: 560px; margin: 0 auto; padding: 0; flex: 1; overflow-x: clip; }
/* 머리 띠 - 휴대폰은 낮게(52px, 시안) 첫 화면에 티켓 전체가 들어오게 */
@media (max-width: 900px) { .wf-poster.pt .wf-event-bar { min-height: 52px; padding: 4px 20px; } .wf-poster.pt .wf-event-identity { min-height: 44px; } }
.wf-poster.pt .pt-flow { display: grid; gap: 0; min-width: 0; align-content: start; }

/* 포스터 머리(휴대폰): 글자 그림 또는 기울인 행사명 | 큰 날짜 한 줄. 첫 화면에 티켓 전체가 들어오게 낮게 */
.wf-poster.pt .pt-poster { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 14px; padding: 14px 20px 18px; color: var(--sd-on-stage); }
.wf-poster.pt .pt-presenter, .wf-poster.pt .pt-venue { display: none; }
.wf-poster.pt .pt-mark { grid-column: 1; grid-row: 1; width: 100%; max-width: 204px; max-height: none; }
.wf-poster.pt .pt-title { grid-column: 1; grid-row: 1; margin: 0; padding-right: .2em; color: inherit; font-size: 28px; line-height: 1.1; font-weight: 900; letter-spacing: -1px; overflow-wrap: anywhere; }
.wf-poster.pt .pt-title.wf-poster-title--xl { font-size: 30px; }
.wf-poster.pt .pt-title.wf-poster-title--m { font-size: 24px; }
.wf-poster.pt .pt-title.wf-poster-title--s { font-size: 20px; }
.wf-poster.pt .pt-date { grid-column: 2; grid-row: 1; display: grid; justify-items: end; gap: 6px; margin: 0; text-align: right; }
.wf-poster.pt .pt-date b { display: block; padding-right: 4px; font-size: 47px; line-height: .8; font-weight: 900; letter-spacing: -2.5px; transform: skewX(-10deg); transform-origin: 0 100%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wf-poster.pt .pt-date span { display: grid; font-size: 14px; line-height: 1.3; font-weight: 900; letter-spacing: -.2px; }
.wf-poster.pt .pt-date em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wf-poster.pt--void .pt-poster > :not(.pt-title) { opacity: .6; }

/* 한 번 안내(신청 직후 · 좌석을 정함) - 무대 위 흰 띠 */
.wf-poster.pt .pt-flow > .sd-banner { margin: 0 14px 14px; border: 0; border-radius: 16px; background: var(--sd-canvas); font-size: 15px; line-height: 1.5; font-weight: 800; }
.wf-poster.pt .pt-flow > .sd-banner--info { color: var(--sd-ink); }
/* 종이 출력 행사의 입장 뒤 안내 먼저(행사 안내 시트) */
.wf-poster.pt .pt-flow > .sd-guide { margin: 0 14px 14px; }

/* 흰 티켓: 머리(이름 · 상태) → 입장 확인 QR · 절취선 · 나의 좌석(입장 뒤에는 좌석 → QR). 조각마다 흰 바탕, 절취선 홈은 진짜 구멍(mask)이라 무대 · 그림자가 비친다 */
.wf-poster.pt .sd-card.pt-ticket { position: relative; display: flex; flex-direction: column; gap: 0; margin: 0 14px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--sd-body);
  filter: drop-shadow(0 26px 26px rgb(40 0 8 / .30)) drop-shadow(0 2px 1px rgb(0 0 0 / .08)); }
.wf-poster.pt .pt-ticket > * { background: var(--sd-canvas); }
.wf-poster.pt .pt-ticket > :first-child { border-radius: 26px 26px 0 0; }
.wf-poster.pt .pt-ticket > :last-child { border-radius: 0 0 26px 26px; }
.wf-poster.pt .pt-ticket > :only-child { border-radius: 26px; }

.wf-poster.pt .sd-ticket-head.pt-head { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 2px 12px; padding: 16px 20px 0; text-align: left; }
.wf-poster.pt .pt-head .sd-kicker { flex: 0 0 100%; display: flex; align-items: center; gap: 8px; margin: 0; color: var(--sd-mute); font-size: 13px; line-height: 20px; font-weight: 900; letter-spacing: .04em; }
.wf-poster.pt .pt-head .sd-kicker::before { content: ""; flex: none; width: 20px; height: 14px; background: var(--pt-act); -webkit-mask: var(--ico-ticket) center / contain no-repeat; mask: var(--ico-ticket) center / contain no-repeat; }
/* 참가자 이름 - 키비주얼처럼 10도 기울인 굵은 글자 + 밑줄 몸짓. 직원이 화면만 보고도 확인 */
.wf-poster.pt .pt-holder { flex: 1 1 auto; min-width: 0; position: relative; margin: 0; padding: 0 0 12px; color: var(--sd-ink); font-size: 44px; line-height: 1.12; font-weight: 900; letter-spacing: -2px; transform: skewX(-10deg); transform-origin: 0 100%; overflow-wrap: anywhere; }
.wf-poster.pt .pt-holder::after { content: ""; position: absolute; left: 3px; bottom: 2px; width: 68px; height: 6px; background: var(--pt-act); }

/* 상태 - 승인(초록 알약) · 대기(먹색 테두리) · 현장 확인 대기(무대색 테두리) · 입장 완료(도장) */
.wf-poster.pt .pt-head .sd-status { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin: 0 0 10px; padding: 6px 14px 6px 10px; border: 0; border-radius: 999px; background: var(--sd-canvas); color: var(--sd-ink); font-size: 15px; line-height: 20px; font-weight: 800; white-space: nowrap; }
.wf-poster.pt .pt-head .sd-status::before { content: none; }
.wf-poster.pt .pt-head .sd-status--ok { color: var(--sd-success); background: color-mix(in srgb, var(--sd-success) 9%, var(--sd-canvas)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sd-success) 45%, var(--sd-canvas)); }
.wf-poster.pt .pt-head .sd-status--ok::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 0; box-shadow: none; background: currentColor; -webkit-mask: var(--ico-check) center / contain no-repeat; mask: var(--ico-check) center / contain no-repeat; }
.wf-poster.pt .pt-head .sd-status--pending { box-shadow: inset 0 0 0 1.5px var(--pt-line); }
.wf-poster.pt .pt-head .sd-status--onsite { box-shadow: inset 0 0 0 2px var(--pt-act); }
.wf-poster.pt .pt-head .sd-status--onsite .pt-ico { background: var(--pt-act); }
.wf-poster.pt .pt-head .sd-status--done { flex-direction: column; justify-content: center; gap: 0; min-height: 0; margin: -4px 2px 12px 0; padding: 7px 14px 8px; border-radius: 12px; color: var(--pt-stamp); background: transparent;
  box-shadow: inset 0 0 0 3px var(--pt-stamp), inset 0 0 0 6px var(--sd-canvas), inset 0 0 0 7.5px var(--pt-stamp); transform: rotate(-8deg); line-height: 1.1; text-align: center; }
.wf-poster.pt .pt-head .sd-status--done::before { content: none; }
.wf-poster.pt .sd-status--done span:not(.sr-only) { font-size: 15px; font-weight: 900; letter-spacing: .04em; }
.wf-poster.pt .sd-status--done time { font-size: 28px; font-weight: 900; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
/* 방금 입장(입장 시각 2분 안 - 서버 표식 pt-just) - 도장이 한 번 찍힌다 */
.wf-poster.pt-just .pt-head .sd-status--done { animation: pt-stamp .44s cubic-bezier(.3, 1.45, .5, 1) .3s both; }
@keyframes pt-stamp { from { opacity: 0; transform: rotate(-8deg) scale(1.6); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
.wf-poster.pt .pt-ico { flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.wf-poster.pt .pt-ico--sun { --ico: var(--ico-sun); }
.wf-poster.pt .pt-ico--glass { --ico: var(--ico-glass); }
.wf-poster.pt .pt-ico--scan { --ico: var(--ico-scan); }

/* 입장 확인 QR - 흰 바탕 · 검정 고정. QR 그림(qr.png)이 사방 4모듈 흰 여백을 품고(10-19 검토 V4 - 브라우저가 페이지를 강제로 어둡게 바꿔 CSS 흰 바탕이
   어두워져도 조용한 둘레가 남는다) 흰 칸 안쪽 8px 을 더한다 - 390 폭 둘레 약 48px · QR 248px(버전 2, 주소가 길면 모듈이 늘어 조금 더 큼). 모서리 넷은 그 바깥(모바일 체크인 카메라 표적의 짝) */
.wf-poster.pt .pt-qr { display: grid; justify-items: center; gap: 0; padding: 4px 5px 14px; text-align: center; }
.wf-poster.pt .pt-qr h2, .wf-poster.pt .pt-code-title { position: relative; z-index: 1; margin: 0 0 -6px; padding: 0 12px; background: var(--sd-canvas); color: var(--sd-ink); font-size: 15px; line-height: 22px; font-weight: 900; letter-spacing: -.2px; }
.wf-poster.pt .pt-qr .sd-code-area { position: relative; display: grid; place-items: center; gap: 0; width: 100%; max-width: 344px; margin: 0; padding: 8px; background: #ffffff; color: #000000; border: 0; border-radius: 0; }
.wf-poster.pt .pt-qr .sd-qr { display: block; width: 100%; max-width: 328px; height: auto; aspect-ratio: 1 / 1; margin: 0; image-rendering: pixelated; }
.wf-poster.pt .pt-aim { position: absolute; inset: 0; pointer-events: none; }
.wf-poster.pt .pt-aim i { position: absolute; width: 30px; height: 30px; border: 0 solid var(--pt-act); }
.wf-poster.pt .pt-aim i:nth-child(1) { top: 0; left: 0; border-width: 4px 0 0 4px; border-top-left-radius: 12px; }
.wf-poster.pt .pt-aim i:nth-child(2) { top: 0; right: 0; border-width: 4px 4px 0 0; border-top-right-radius: 12px; }
.wf-poster.pt .pt-aim i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 4px 4px; border-bottom-left-radius: 12px; }
.wf-poster.pt .pt-aim i:nth-child(4) { bottom: 0; right: 0; border-width: 0 4px 4px 0; border-bottom-right-radius: 12px; }
/* 밝기 안내 - 흰 칸 아랫변에 얹는다(위 끝이 QR 에서 42px) */
.wf-poster.pt .pt-bright { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; margin: -6px 0 0; padding: 0 12px; background: var(--sd-canvas); color: var(--sd-mute); font-size: 14px; line-height: 20px; font-weight: 700; }
.wf-poster.pt .pt-qr .sd-tip { margin: 6px 0 0; padding-inline: 15px; color: var(--sd-ink); font-size: 16px; line-height: 1.5; font-weight: 800; text-align: center; text-wrap: balance; }   /* 티켓 가장자리에서 20px(10-19 검토 V7), 두 줄이면 고르게 */
/* 입장 뒤 QR(좌석 아래) - 크기는 그대로, 제목만 낮춘다 */
.wf-poster.pt .pt-qr--after { padding-top: 4px; }
.wf-poster.pt .pt-qr--after h2, .wf-poster.pt .pt-qr--after .pt-code-title { color: var(--sd-mute); }
/* 종이 출력 행사 - 코드 칸에 지금 계약 그대로 QR · 바코드 · 코드 글자. 바코드 · 코드 글자는 QR 아래 4모듈 넘게 띄운다 */
.wf-poster.pt .pt-qr--paper .sd-barcode { width: 100%; max-width: 248px; margin-top: 8px; padding: 0 12px; }   /* QR 그림 아래 - 그림이 품은 4모듈 여백 + 8px */
.wf-poster.pt .pt-qr--paper .sd-barcode:first-child, .wf-poster.pt .pt-qr--paper .pt-aim + .sd-barcode { margin-top: 32px; }   /* 바코드만 - 모서리 표적과 떨어지게 */
.wf-poster.pt .pt-qr--paper .sd-code-text { margin: 12px 0 24px; color: #000000; font-size: 20px; line-height: 1.3; letter-spacing: .12em; }
.wf-poster.pt .pt-qr--paper .sd-qr + .sd-code-text { margin-top: 4px; }
.wf-poster.pt .pt-qr--paper .sd-tip--bright { padding-bottom: 0; border-bottom: 0; }
/* 기본 공개(어두운 시트) - 제목 · 밝기 띠를 흰 칸에 얹지 않는다(어두운 띠가 흰 칸을 파고들지 않게) */
.wf-brand-theme.wf-poster.pt .pt-qr :is(h2, .pt-code-title) { margin-bottom: 10px; background: transparent; }
.wf-brand-theme.wf-poster.pt .pt-bright { margin-top: 10px; background: transparent; }

/* 절취선 - 양끝 반원 홈은 진짜 구멍(mask) */
.wf-poster.pt .pt-perf { position: relative; flex: none; height: 28px;
  -webkit-mask: radial-gradient(circle at 0 50%, #0000 14px, #000 14.5px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 14px, #000 14.5px) 100% 0 / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, #0000 14px, #000 14.5px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 14px, #000 14.5px) 100% 0 / 51% 100% no-repeat; }
.wf-poster.pt .pt-perf::before { content: ""; position: absolute; left: 24px; right: 24px; top: 13px; height: 2px; background: repeating-linear-gradient(90deg, var(--pt-line) 0 9px, transparent 9px 16px); }

/* 나의 좌석 - 무대색 이름표 + 깊은 면 큰 좌석(모바일 체크인 결과 카드와 같은 문법) */
.wf-poster.pt .pt-seat { display: grid; gap: 0; margin: 0; padding: 2px 20px 22px; border: 0; border-radius: 0; text-align: left; }
.wf-poster.pt .pt-seat .sd-mobile-seat-label { margin: 0; color: var(--sd-link, var(--sd-primary)); font-size: 14px; line-height: 20px; font-weight: 900; }
.wf-poster.pt .pt-seat .sd-mobile-seat-value { margin: 2px 0 0; color: var(--pt-seat-ink); font-size: 40px; line-height: 1.15; font-weight: 900; letter-spacing: -1.4px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wf-poster.pt .pt-seat .sd-mobile-seat-message { margin: 2px 0 0; color: var(--sd-ink); font-size: 21px; line-height: 1.4; font-weight: 900; letter-spacing: -.4px; }
.wf-poster.pt .pt-seat .sd-tip { margin: 6px 0 0; color: var(--sd-body); font-size: 15px; line-height: 1.55; font-weight: 600; }
.wf-poster.pt .pt-seat--first { padding: 8px 20px 18px; }
/* 발표 화면 보기(10-24 SPEC 106장) - 좌석 카드(또는 코드 칸) 안 맨 아래, 카드의 좌우 20px 안쪽 여백을 그대로 받는다 */
.wf-poster.pt .pt-present { margin: 14px 0 0; }
.wf-poster.pt .pt-qr .pt-present { margin: 10px 0 4px; }
/* 입장 마감 강조 - 좌석 칸 안 한 줄(아래 '입장 전 꼭 확인해 주세요' 와 같은 판정 · 시각) */
.wf-poster.pt .pt-due { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 0 12px; margin: 10px 0 2px; padding: 12px 16px; border-radius: 16px; background-color: var(--pt-act); background-image: url(/static/img/grain.png); color: var(--pt-on-act); }
.wf-poster.pt .pt-due-label { font-size: 14px; line-height: 1.3; font-weight: 800; }
.wf-poster.pt .pt-due-time { padding-right: 4px; font-size: 34px; line-height: 1; font-weight: 900; letter-spacing: -1px; transform: skewX(-10deg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wf-poster.pt .pt-due-note { justify-self: end; font-size: 14px; line-height: 1.4; font-weight: 800; text-align: right; text-wrap: balance; }
/* 자동 갱신 안내(갱신 스크립트가 돌 때만 보임) - 한 줄로 떼고 초록 점 */
.wf-poster.pt [data-ticket-poll-note] { display: block; margin-top: 2px; }
.wf-poster.pt [data-ticket-poll-note]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 8px 2px 1px; border-radius: 50%; background: var(--sd-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sd-success) 18%, transparent); vertical-align: middle; }

/* 승인 대기 - QR 자리 대신 '지금 어느 단계인지' 세 칸(QR 자리 그림은 두지 않는다 - 직원 카메라가 가짜 무늬를 읽지 않게) */
.wf-poster.pt .pt-wait { padding: 16px 20px 14px; }
.wf-poster.pt .pt-steps { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: pt-step; }
.wf-poster.pt .pt-steps li { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; padding-bottom: 18px; counter-increment: pt-step; }
.wf-poster.pt .pt-steps li:last-child { padding-bottom: 0; }
.wf-poster.pt .pt-steps li::before { content: counter(pt-step); content: counter(pt-step) / ""; grid-row: 1 / span 2; position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box; border: 2px solid var(--pt-line); background: var(--sd-canvas); color: var(--sd-mute); font-size: 16px; font-weight: 900; }
.wf-poster.pt .pt-steps li::after { content: ""; position: absolute; left: 18px; top: 38px; bottom: 0; width: 2px; background: var(--pt-hair); }
.wf-poster.pt .pt-steps li:last-child::after { display: none; }
.wf-poster.pt .pt-steps li.is-done::before { content: ""; border-color: var(--sd-success); background: var(--sd-success) var(--ico-check-white) center / 20px no-repeat; }
.wf-poster.pt .pt-steps li.is-done::after { background: var(--sd-success); }
.wf-poster.pt .pt-steps li.is-now::before { border-color: var(--pt-act); background: var(--pt-act); color: var(--pt-on-act); box-shadow: 0 0 0 5px color-mix(in srgb, var(--pt-act) 18%, transparent); animation: pt-pulse 1.6s ease-in-out infinite; }
@keyframes pt-pulse { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--pt-act) 8%, transparent); } }
.wf-poster.pt .pt-steps b { padding-top: 8px; color: var(--sd-ink); font-size: 17px; line-height: 22px; font-weight: 900; }
.wf-poster.pt .pt-steps span { color: var(--sd-mute); font-size: 14px; line-height: 20px; font-weight: 600; }
.wf-poster.pt .pt-steps li:not(.is-done):not(.is-now) b { color: var(--sd-mute); }
.wf-poster.pt .sd-ticket-pending-note.pt-pending-note { display: grid; gap: 8px; padding: 4px 20px 24px; border: 0; color: var(--sd-body); }   /* 모서리는 티켓 마지막 조각 규칙(26px)이 정한다(10-19 검토 V5) */
.wf-poster.pt .pt-pending-note h2 { margin: 0; color: var(--sd-ink); font-size: 20px; line-height: 1.4; font-weight: 900; letter-spacing: -.4px; }
.wf-poster.pt .pt-pending-note p { margin: 0; color: var(--sd-body); font-size: 15px; line-height: 1.7; }

/* 흰 시트 - 티켓 아래 나머지 전부(지금 순서 그대로) */
.wf-poster.pt .pt-sheet { position: relative; z-index: 1; display: grid; gap: 28px; min-width: 0; margin: 30px 0 0; padding: 28px 20px 30px; border: 0; border-radius: 28px 28px 0 0; background: var(--sd-canvas); color: var(--sd-body); box-shadow: 0 -18px 40px -18px rgb(40 0 8 / .5); }
.wf-poster.pt .pt-sheet > * { min-width: 0; margin: 0; }
.wf-poster.pt .pt-sheet h2 { margin: 0; color: var(--sd-ink); font-size: 21px; line-height: 1.35; font-weight: 900; letter-spacing: -.5px; }
.wf-poster.pt .pt-sheet .sd-tip { margin: 0; color: var(--sd-mute); font-size: 14px; line-height: 1.6; }
.wf-poster.pt .pt-sheet .sd-ticket-seat-map { display: grid; gap: 2px; padding: 0; border: 0; }
.wf-poster.pt .pt-sheet .sd-ticket-seat-map-label { margin: 2px 0 0; color: var(--pt-seat-ink); font-size: 18px; line-height: 1.4; font-weight: 900; }
.wf-poster.pt .pt-sheet .sd-ticket-seat-map-canvas { margin-top: 12px; padding: 12px; border: 1.5px solid var(--pt-hair); border-radius: 18px; background: #ffffff; }
/* 행사 정보 - 포스터 표(굵은 윗줄 + 가는 가로줄) */
.wf-poster.pt .pt-sheet .sd-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; margin: 0; padding: 0; border: 0; border-top: 3px solid var(--sd-ink); border-radius: 0; background: transparent; font-size: 16px; line-height: 1.55; }
.wf-poster.pt .pt-sheet .sd-meta > div { display: contents; }
.wf-poster.pt .pt-sheet .sd-meta :is(dt, dd) { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--pt-hair); }
.wf-poster.pt .pt-sheet .sd-meta dt { padding-right: 20px; color: var(--sd-ink); font-weight: 900; white-space: nowrap; }
.wf-poster.pt .pt-sheet .sd-meta dd { color: var(--sd-body); font-weight: 500; }
.wf-poster.pt .pt-sheet .sd-meta-deadline :is(dt, dd) { color: var(--sd-link, var(--sd-primary)); font-weight: 900; }
.wf-poster.pt .pt-sheet .sd-ticket-map { margin-top: -14px; }
/* 입장 전 꼭 확인해 주세요 - 시트 안의 작은 포스터(무대색 + 큰 기울인 시각 + 밑줄) */
.wf-poster.pt .pt-sheet .sd-admission-notice { position: relative; overflow: hidden; display: grid; gap: 16px; padding: 24px 22px; border: 0; border-radius: 24px; background-color: var(--pt-act); background-image: url(/static/img/grain.png); color: var(--pt-on-act); }
.wf-poster.pt .pt-sheet .sd-admission-notice h2 { color: inherit; font-size: 18px; letter-spacing: -.3px; }
.wf-poster.pt .pt-sheet .sd-admission-notice p { margin: 0; }
.wf-poster.pt .pt-sheet .sd-admission-deadline { display: grid; gap: 2px; }
.wf-poster.pt .pt-sheet .sd-admission-label { color: inherit; font-size: 15px; font-weight: 800; }
.wf-poster.pt .pt-sheet .sd-admission-deadline time { position: relative; display: block; justify-self: start; padding: 6px 8px 24px 0; color: inherit; font-size: 84px; line-height: .9; font-weight: 900; letter-spacing: -4px; transform: skewX(-10deg); transform-origin: 0 100%; font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; }
.wf-poster.pt .pt-sheet .sd-admission-deadline time::after { content: ""; position: absolute; left: 4px; bottom: 2px; width: 92px; height: 7px; background: currentColor; }
.wf-poster.pt .pt-sheet .sd-admission-deadline-body { color: inherit; font-size: 16px; line-height: 1.6; font-weight: 700; }
.wf-poster.pt .pt-sheet .sd-admission-arrival { display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, currentColor 45%, transparent); }
.wf-poster.pt .pt-sheet .sd-admission-notice h2 + .sd-admission-arrival { padding-top: 0; border-top: 0; }
.wf-poster.pt .pt-sheet .sd-admission-arrival h3 { margin: 0; color: inherit; font-size: 18px; line-height: 1.45; font-weight: 900; }
.wf-poster.pt .pt-sheet .sd-admission-arrival p { font-size: 16px; line-height: 1.65; font-weight: 500; }
/* 단추 - 참가자 52px · 16px 그대로. 주 행동은 무대색(--pt-act), 나머지는 먹색 테두리 */
.wf-poster.pt .pt-actions { display: grid; gap: 12px; }
.wf-poster.pt .pt-sheet .sd-actions, .wf-poster.pt .pt-void .sd-actions, .wf-poster.pt .pt-cancel .sd-actions { display: grid; gap: 10px; }
.wf-poster.pt :is(.pt-sheet, .pt-void) .sd-btn { width: 100%; border: 0; border-radius: var(--wf-radius-action); font-weight: 900; letter-spacing: var(--wf-action-track); }
.wf-poster.pt :is(.pt-sheet, .pt-void) .sd-btn--primary { background: var(--pt-act); color: var(--pt-on-act); }
.wf-poster.pt :is(.pt-sheet, .pt-void) .sd-btn--primary:is(:hover, :active) { background: color-mix(in srgb, var(--pt-act) 86%, #000000); }
.wf-poster.pt :is(.pt-sheet, .pt-void) .sd-btn--secondary { background: var(--sd-canvas); color: var(--sd-ink); box-shadow: inset 0 0 0 2px var(--sd-ink); }
.wf-poster.pt :is(.pt-sheet, .pt-void) .sd-btn--danger { background: var(--sd-error); color: #ffffff; }
.wf-poster.pt :is(.pt-sheet, .pt-void) .sd-btn:disabled { opacity: .55; cursor: not-allowed; }
.wf-poster.pt .pt-btn-ico::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.wf-poster.pt .pt-btn-ico--share { --ico: var(--ico-share); }
.wf-poster.pt .pt-btn-ico--save { --ico: var(--ico-save); }
.wf-poster.pt .pt-btn-ico--pin { --ico: var(--ico-pin); }
.wf-poster.pt .pt-btn-ico--refresh { --ico: var(--ico-refresh); }
.wf-poster.pt .pt-btn-ico--seat { --ico: var(--ico-seat); }
.wf-poster.pt .pt-sheet .sd-ticket-download-help { display: grid; gap: 0; justify-items: start; }
.wf-poster.pt .pt-sheet .sd-ticket-image-open { display: inline-flex; align-items: center; min-height: 44px; color: var(--sd-link, var(--sd-primary)); font-size: 15px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.wf-poster.pt .pt-sheet .pt-actions > .sd-tip { margin-top: -2px; }
/* 행사 안내 - 시트 안에서는 머리 띠 없이 가는 윗줄 + 제목 */
.wf-poster.pt .pt-sheet .sd-card.sd-guide { gap: 16px; padding: 26px 0 0; border: 0; border-top: 1px solid var(--pt-hair); border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.wf-poster.pt .pt-sheet .sd-guide .wf-sheet-head { padding: 0; background: transparent; color: var(--sd-ink); }
.wf-poster.pt .pt-sheet .sd-guide .wf-sheet-head .sd-h2 { color: var(--sd-ink); font-size: 21px; line-height: 1.35; font-weight: 900; letter-spacing: -.5px; }
.wf-poster.pt .pt-sheet .sd-guide .wf-sheet-body { gap: 16px; padding: 0; }
.wf-poster.pt .pt-sheet .sd-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; font-size: 15px; font-weight: 800; }
.wf-poster.pt .pt-sheet .sd-foot-links :is(a, span) { display: inline-flex; align-items: center; min-height: 44px; color: var(--sd-body); text-underline-offset: 4px; }
.wf-poster.pt .sd-footer { border-top: 0; }

/* 무효(취소 · 재발급 코드) - 이름 · 좌석 · QR 없이 큰 '무효' 도장(장식) */
.wf-poster.pt .pt-void .pt-head { justify-content: space-between; padding-bottom: 0; }
.wf-poster.pt .pt-void .pt-head .sd-kicker { flex: 1 1 auto; }
.wf-poster.pt .pt-void .pt-head .sd-kicker::before { background: var(--sd-mute); }
.wf-poster.pt .pt-stamp-void { flex: none; display: grid; place-items: center; margin: 2px 0 0; padding: 6px 20px 8px; border-radius: 14px; color: var(--sd-error); box-shadow: inset 0 0 0 4px var(--sd-error), inset 0 0 0 7px var(--sd-canvas), inset 0 0 0 9px var(--sd-error); transform: rotate(-8deg); font-size: 34px; line-height: 1.1; font-weight: 900; letter-spacing: 6px; text-indent: 6px; }
.wf-poster.pt .pt-void-body { display: grid; gap: 10px; padding: 14px 20px 16px; }
.wf-poster.pt .pt-void-body .sd-h1 { margin: 0; color: var(--sd-ink); font-size: 27px; line-height: 1.3; font-weight: 900; letter-spacing: -.8px; }
.wf-poster.pt .pt-void-body .sd-text { margin: 0; color: var(--sd-body); font-size: 16px; line-height: 1.7; }
.wf-poster.pt .pt-void-actions { padding: 4px 20px 22px; }
.wf-poster.pt--void .pt-void .sd-btn--primary { background: var(--sd-ink); color: var(--sd-canvas); }

/* 신청 취소(본인 확인) - 흰 시트 하나 */
.wf-poster.pt--cancel .pt-sheet { margin-top: 6px; gap: 16px; padding-top: 30px; }
.wf-poster.pt .pt-cancel .sd-kicker { margin: 0; color: var(--sd-mute); font-size: 14px; line-height: 1.5; font-weight: 800; }
.wf-poster.pt .pt-cancel .sd-h1 { margin: 0; color: var(--sd-ink); font-size: 30px; line-height: 1.25; font-weight: 900; letter-spacing: -1px; }
.wf-poster.pt .pt-cancel .sd-text { margin: 0; color: var(--sd-body); font-size: 16px; line-height: 1.7; }
.wf-poster.pt .pt-cancel .sd-form { display: grid; gap: 22px; margin-top: 8px; }
.wf-poster.pt .pt-cancel .sd-label { font-size: 15px; line-height: 22px; font-weight: 800; }
.wf-poster.pt .pt-cancel .sd-input { border: 1.5px solid var(--pt-line); border-radius: var(--wf-radius-action); }

/* 넓은 화면: 포스터 | 티켓 2열(참가 신청 페이지와 같은 틀) */
@media (min-width: 901px) {
  .wf-poster.pt .wf-poster-echo { height: min(1700px, 100%); }
  .wf-poster.pt .wf-poster-echo .wf-kv-mark { width: 1500px; left: -220px; top: 1010px; }
  .wf-poster.pt .sd-wrap.pt-wrap { max-width: 1200px; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 72px; align-items: start; padding: 44px 40px 96px; }
  .wf-poster.pt .pt-poster { position: sticky; top: 28px; grid-template-columns: minmax(0, 1fr); justify-items: start; padding: 0; }
  .wf-poster.pt .pt-presenter { display: inline-flex; margin: 0; }
  .wf-poster.pt :is(.pt-mark, .pt-title, .pt-date) { grid-column: 1; grid-row: auto; }
  .wf-poster.pt .pt-mark { margin-top: 28px; max-width: 560px; }
  .wf-poster.pt .pt-title { margin-top: 28px; font-size: 60px; letter-spacing: -3px; }
  .wf-poster.pt .pt-title.wf-poster-title--xl { font-size: 76px; }
  .wf-poster.pt .pt-title.wf-poster-title--m { font-size: 46px; }
  .wf-poster.pt .pt-title.wf-poster-title--s { font-size: 36px; }
  .wf-poster.pt .pt-date { margin-top: 40px; display: flex; align-items: flex-end; gap: 22px; text-align: left; }
  .wf-poster.pt .pt-date b { padding-right: 8px; font-size: 120px; letter-spacing: -6px; }
  .wf-poster.pt .pt-date span { padding-bottom: 2px; font-size: 24px; line-height: 1.25; }
  .wf-poster.pt .pt-venue { display: block; width: 100%; margin: 36px 0 0; padding-top: 16px; border-top: 3px solid currentColor; font-size: 20px; line-height: 1.4; font-weight: 800; }
  .wf-poster.pt .pt-venue small { display: block; margin-top: 4px; font-size: 16px; font-weight: 600; }
  .wf-poster.pt :is(.sd-card.pt-ticket, .pt-flow > .sd-banner, .pt-flow > .sd-guide) { margin-inline: 0; }
  .wf-poster.pt .pt-qr .sd-code-area { max-width: 388px; }
  .wf-poster.pt .pt-qr .sd-qr { max-width: 372px; }   /* 그림 안 4모듈 여백 포함 - QR 약 282px(버전 2) */
  .wf-poster.pt .pt-sheet { margin-top: 28px; padding: 32px; border-radius: 28px; box-shadow: 0 48px 90px -36px rgb(40 0 8 / .55), 0 2px 0 rgb(0 0 0 / .05); }
  .wf-poster.pt .sd-footer { border-top: 1px solid var(--wf-on-stage-line); }
}
@media (min-width: 901px) and (max-height: 759px) {
  .wf-poster.pt .pt-poster { position: static; }
}
/* 아주 좁은 화면(380 이하): 티켓 여백을 10px 로 줄이고 흰 칸을 티켓 폭에 맞춰 QR 을 가능한 크게 - 360 폭 약 245px, 320 폭 약 215px(버전 2, 사방 4모듈 여백은 늘 지킨다 -
   10-19 검토 V11: 예전 주석의 '240px 이상' 은 340 폭 아래에서 맞지 않았다) */
@media (max-width: 380px) {
  .wf-poster.pt :is(.sd-card.pt-ticket, .pt-flow > .sd-banner, .pt-flow > .sd-guide) { margin-inline: 10px; }
  .wf-poster.pt .pt-qr { padding-inline: 0; }
  .wf-poster.pt .pt-qr .sd-tip { padding-inline: 20px; }
  .wf-poster.pt .pt-aim { inset: 0 4px; }   /* 모서리 표적은 그림이 품은 4모듈 여백 바깥(흰 칸 안쪽 8px 띠) */
  /* 마감 띠 두 줄 - '입장 마감' + 시각 한 줄, 안내는 아래 줄 왼쪽(320 에서 낱말마다 다섯 줄로 서던 것 - 10-19 검토 V6) */
  .wf-poster.pt .pt-due { grid-template-columns: auto minmax(0, 1fr); row-gap: 4px; }
  .wf-poster.pt .pt-due-note { grid-column: 1 / -1; justify-self: start; text-align: left; }
  /* 큰 마감 시각 - 좁은 폭에서 줄여 한 줄(320 에서 '13:3 / 0' 으로 쪼개지던 것 - 10-19 검토 V2) */
  .wf-poster.pt .pt-sheet .sd-admission-deadline time { font-size: min(84px, 21vw); letter-spacing: -3px; }
  .wf-poster.pt .pt-poster { padding-inline: 16px; }
  .wf-poster.pt .pt-mark { max-width: 190px; }
  .wf-poster.pt .pt-date b { font-size: 44px; }
  .wf-poster.pt .pt-holder { order: 2; flex-basis: 100%; font-size: 42px; }
  .wf-poster.pt .pt-head .sd-kicker { flex: 1 1 auto; }
  .wf-poster.pt .pt-head .sd-status { order: 1; margin-bottom: 0; }
  .wf-poster.pt .pt-head .sd-status--done { margin: 2px 4px 0 0; }
  .wf-poster.pt .pt-seat .sd-mobile-seat-value { font-size: 36px; }
}
/* 이름 길이 단계 - 좁은 화면 규칙보다 뒤(긴 이름은 어느 폭에서든 줄인다) */
.wf-poster.pt .pt-holder--m { font-size: 38px; letter-spacing: -1.5px; }
.wf-poster.pt .pt-holder--s { font-size: 30px; letter-spacing: -1px; }
.wf-poster.pt .pt-holder--xs { font-size: 23px; letter-spacing: -.5px; }
/* 움직임 줄이기 - 도장 · 단계 깜박임 없이 마지막 모습 */
@media (prefers-reduced-motion: reduce) {
  .wf-poster.pt-just .pt-head .sd-status--done { animation: none; }
  .wf-poster.pt .pt-steps li.is-now::before { animation: none; }
}

/* ════════ 내 참가 확인(10-19 대표님 "참가자가 본인 승인 되었는지 확인하는 '내 참가 확인'", SPEC 75장) ════════
   예전 '신청 내역 확인'(신청서 아래 작은 링크)을 잘 보이게 - 넓은 화면은 포스터 열 정보 표 아래 흰 테두리 단추(.wf-my-cta--info), 휴대폰 · 한 줄형은 포스터 끝
   '참가 신청서 작성 ↓' 옆 두 단추(.wf-poster-actions - 자리가 모자라면 위아래), (시트 머리 띠 '이미 신청하셨나요?' 링크는 11-07 그림판 시안으로 뺌), 닫힌 신청서는 시트 안 주 단추(.wf-my-primary - 공용 주 단추 그대로).
   색은 무대 토큰만(테두리 · 글자 = 무대 위 글자색, 누르는 손 위에서는 뒤집힘) - 사용자 색 · 노랑 행사 · Forest 기본이 같은 규칙. 크기는 참가자 52px · 16px · 한 줄(.sd-btn).
   새 규칙은 새 묶음 · 새 클래스 아래만이라 옛 HTML(배포 순간 - 묶음 없는 이동 링크)은 예전 그대로다. */
.wf-poster .wf-poster-actions { display:none; flex-wrap:wrap; gap:10px; min-width:0; }
.wf-poster .wf-reg-layout-stacked .wf-poster-actions { display:flex; }
/* 두 단추는 글자 폭에서 같이 늘어난다(주 단추가 조금 넓다). 한 줄에 다 들어가지 않으면 줄을 바꿔 위아래 - 글자를 줄바꿈하거나 넘치지 않는다 */
.wf-poster .wf-poster-actions > * { flex:1 1 auto; }
.wf-poster .wf-poster-actions :is(a, span).wf-poster-jump { display:flex; padding:0 18px; white-space:nowrap; }
.wf-poster .wf-event-panel .sd-btn.wf-my-cta { gap:8px; padding:12px 22px; border:2px solid var(--sd-on-stage); border-radius:var(--wf-radius-action); background:transparent; color:var(--sd-on-stage); font-weight:800; text-decoration:none; transition:background-color .2s, color .2s; }
.wf-poster .wf-event-panel a.sd-btn.wf-my-cta:hover { background:var(--sd-on-stage); color:var(--sd-stage); }
.wf-poster .wf-event-panel .sd-btn.wf-my-cta--info { display:flex; width:fit-content; min-width:220px; max-width:100%; margin-top:28px; }
.wf-poster .wf-reg-align-center .wf-event-panel .sd-btn.wf-my-cta--info { margin-inline:auto; }
/* ── 행사 안내 · 머리 줄 바로 가기(11-05 밤 대표님 "내참가 확인 버튼 왼쪽에 … 행사 안내 버튼" · "우측 상단도 이런 배열로" · "모바일도 잘 조정") ──
   정보 표 아래 두 단추(.wf-info-ctas) - 내 참가 확인과 같은 흰 테두리 단추를 같은 폭으로 나란히(넓은 화면 220px 씩, 좁으면 반반 · 그보다 좁으면 위아래).
   포스터 끝 묶음(.wf-poster-actions--guide) - [참가 신청서 작성 ↓] 한 줄, 그 아래 [행사 안내] [내 참가 확인] 반반.
   머리 줄(.wf-reg-nav) - 예전 글자 '행사 참가 안내' 자리에 작은 테두리 단추 둘(공유 링크 화면 머리 줄 단추와 같은 꼴 · 무대 글자색), 600px 아래는 숨김(끝 묶음이 맡는다) */
.wf-poster .wf-event-panel .wf-info-ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.wf-poster .wf-event-panel .wf-info-ctas > .sd-btn.wf-my-cta--info { flex:0 1 220px; min-width:min(100%, 150px); margin-top:0; justify-content:center; }
.wf-poster .wf-reg-align-center .wf-event-panel .wf-info-ctas { justify-content:center; }
.wf-poster .wf-poster-actions--guide > .wf-poster-jump { flex-basis:100%; }
.wf-poster .wf-poster-actions--guide > .wf-my-cta { flex:1 1 0; min-width:0; justify-content:center; }
.wf-reg-nav { display:flex; align-items:center; gap:8px; flex:none; }
/* .wf-event-bar 범위 - 공개 화면 링크 기본색(.sd-public a)보다 세게(무대 위 글자색) */
.wf-event-bar .wf-reg-nav-link { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 14px; border:1px solid var(--wf-on-stage-line, var(--sd-hairline)); border-radius:var(--wf-radius-action, 2px); color:var(--sd-on-stage, var(--sd-ink)); font-size:13px; line-height:20px; font-weight:700; white-space:nowrap; text-decoration:none; transition:background-color .2s; }
.wf-event-bar a.wf-reg-nav-link:hover { background:color-mix(in srgb, var(--sd-on-stage, var(--sd-ink)) 12%, transparent); }
.wf-event-bar .wf-reg-nav-link:focus-visible { outline:3px solid var(--sd-focus, var(--sd-primary)); outline-offset:2px; }
/* 시트 머리 띠 - 신청서 제목 · 안내 아래 한 줄. 링크는 깊은 면 글자색 밑줄(누르는 높이 44px, 띠 아래 여백은 그만큼 당김) */
/* 안내 한 문장(내 참가 확인 화면 · 닫힌 신청서) - 마지막 줄에 낱말 하나만 남지 않게 */
.wf-poster :is(.sd-my, .sd-closed) .wf-sheet-body > .sd-text { text-wrap:pretty; }
/* 바탕 메아리는 문서 높이를 늘리지 않는다 - 닫힌 신청서처럼 짧은 화면에서 꼬리말 아래로 무대가 길게 남지 않게(모바일 티켓 화면과 같은 min(…, 100%)) */
.wf-poster.sd-page-register .wf-poster-echo { height:min(1700px, 100%); }
@media (max-width:900px) {
  .wf-poster.sd-page-register .wf-poster-echo { height:min(1000px, 100%); }
  .wf-poster .wf-poster-actions { display:flex; }
  /* 서버 오류로 시트가 먼저인 휴대폰 화면 - 이동 링크만 뺀다(내 참가 확인은 남는다) */
  .wf-poster .wf-reg-has-error .wf-poster-actions :is(a, span).wf-poster-jump { display:none; }
  /* 기본형은 포스터 끝 묶음이 맡는다 - 정보 표 아래 단추는 넓은 화면에서만(신청서 우선형은 묶음이 없어 그대로) */
  .wf-poster .wf-event-panel .sd-btn.wf-my-cta--wide { display:none; }
  .wf-poster .wf-event-panel .sd-btn.wf-my-cta--info { margin-top:24px; }
  /* 두 단추 묶음도 같은 규칙(빈 묶음의 위 여백이 남지 않게 묶음째), 신청서 우선형은 묶음이 그대로 남고 위 여백만 */
  .wf-poster .wf-event-panel .wf-info-ctas--wide { display:none; }
  .wf-poster .wf-event-panel .wf-info-ctas { margin-top:24px; }
}
@media (max-width:600px) { .wf-reg-nav { display:none; } }

/* ── 사이트 아래 사업자 정보 (10-19 카카오 동의항목 심사 대비, SPEC 76장 - views/bizInfo.ts) ──
   행사 밖 화면(제품 첫 화면 · 개인정보처리방침 · 오류)의 꼬리말: 서비스 이름 + 두 줄(상호 · 대표 · 사업자등록번호 / 주소 · 전화 · 이메일) + 개인정보처리방침, 작은 글 12px.
   좁은 화면은 항목 단위로 줄을 바꾸고 긴 주소 · 이메일은 항목 안에서 바꾼다(가로 넘침 없음). 색은 테마 토큰(--sd-body · --sd-mute · --sd-ink)만.
   행사 화면(포스터 무대)은 행사 꼬리말 아래 '운영 <상호> · 개인정보처리방침' 한 줄(.sd-footer-legal)만 - 무대 위 글자색(--sd-on-stage)을 그대로 물려받는다 */
.wf-site-footer { display:grid; justify-items:center; gap:8px; }
.wf-site-footer .wf-footer-product { font-size:12px; }
.wf-biz { display:grid; gap:2px; min-width:0; max-width:100%; margin:0; font-style:normal; }
.wf-biz__row { display:flex; flex-wrap:wrap; justify-content:center; gap:0 14px; margin:0; font-size:12px; line-height:20px; color:var(--sd-body); }
.wf-biz__item { min-width:0; max-width:100%; overflow-wrap:anywhere; }
.wf-biz__label { color:var(--sd-mute); }
.sd-public .wf-biz a { color:inherit; text-underline-offset:3px; }
.sd-public .wf-biz .wf-biz__privacy { color:var(--sd-ink); font-weight:700; }
.sd-footer-legal { margin-top:2px; font-size:12px; }
.sd-public .sd-footer-legal a { color:inherit; text-underline-offset:3px; }
.wf-poster .sd-footer-legal { font-weight:600; }
.wf-privacy-company dd { overflow-wrap:anywhere; }

/* ── 주요 안내사항 (10-22 대표님 "신분증 필수로 가져오셔야 된다 등, 적을 수 있는 주요 안내사항", SPEC 86장 - views/public/parts.ts keyNoticesHtml) ──
   모바일 티켓 시트(흰 티켓 바로 아래 '꼭 확인해 주세요') · 신청서 시트(신청 단추 바로 위 '참가 전 꼭 확인해 주세요')의 같은 상자. 새 색 없음 - 면은 시트 강조 면(주색 6% - 동의 · 승인 안내와 같은 면),
   왼쪽 굵은 줄 · 줄 앞 표식(장식)은 그 시트의 조작색(모바일 티켓 --pt-act - 입장 뒤 깊은 면, 신청서는 승인 안내 줄과 같은 --sd-primary). 글은 잉크 16px 700, 긴 낱말 · 주소는 칸 안에서 줄을 바꾼다 */
.wf-poster .wf-key-notices { --wf-kn-act:var(--pt-act, var(--sd-primary)); display:grid; gap:10px; min-width:0; margin:0; padding:18px 20px 20px; border:0; border-left:4px solid var(--wf-kn-act); border-radius:0 16px 16px 0; background:color-mix(in srgb, var(--sd-primary) 6%, var(--sd-canvas)); color:var(--sd-body); }
.wf-poster :is(.pt-sheet, .wf-sheet) .wf-key-notices .wf-key-notices-title { margin:0; color:var(--sd-ink); font-size:17px; line-height:1.4; font-weight:900; letter-spacing:-.3px; }
.wf-poster .wf-key-notices-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.wf-poster .wf-key-notices-list li { position:relative; margin:0; padding-left:18px; color:var(--sd-ink); font-size:16px; line-height:1.55; font-weight:700; word-break:keep-all; overflow-wrap:anywhere; }
.wf-poster .wf-key-notices-list li::before { content:""; position:absolute; left:0; top:calc(.775em - 4px); width:8px; height:8px; border-radius:2px; background:var(--wf-kn-act); }