/* 참가자 화면(제품 한 장 · 신청 · 티켓 · 재조회 · 취소 · 안내) - 휴대폰 우선.
   색 · 모서리 · 글꼴은 전부 --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-hero--blank { height: 88px; background: var(--sd-primary); }

/* 행사 머리 */
.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: 999px; 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(--sd-radius-sm); }
.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(--sd-radius-sm); 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(--sd-radius-sm); 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-hero--blank { height: 150px; }
  .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); }
.sd-hero--blank { height: 220px; position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 28px; background: var(--sd-ink); color: var(--sd-canvas); }
.sd-hero--blank span { position: relative; z-index: 1; font-size: 28px; line-height: 1.4; font-weight: 650; letter-spacing: -1px; }
.sd-hero--blank i { position: absolute; width: 210px; height: 210px; border: 1px solid color-mix(in srgb, var(--sd-canvas) 24%, transparent); border-radius: 50%; right: -40px; top: -80px; }
.sd-hero--blank i:nth-of-type(2) { right: -8px; top: -48px; }
.sd-hero--blank i:nth-of-type(3) { right: 24px; top: -16px; }
.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; 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; font-size: 18px; line-height: 1.5; font-weight: 700; }
/* 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-hero--blank { height: 180px; }
  .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--blank { height: 148px; padding: 24px; }
  .sd-hero--blank span { font-size: 24px; }
  .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; }
.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; }
.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 .sd-hero--blank { background:#1e3932; color:#d4e9e2; }
.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; }
.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; }
.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,
.sd-page-register .wf-reg-hero-wide .sd-hero--blank { aspect-ratio:16/9; height:auto; max-height:none; }
.sd-page-register .wf-reg-hero-square .sd-hero img,
.sd-page-register .wf-reg-hero-square .sd-hero--blank { 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; }
.sd-page-register.wf-registration-colors {
  background: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-public-bar,.wf-event-bar,.wf-reg-panel,.wf-registration-description,.wf-registration-agenda,.wf-registration-notice,.sd-map-btn,.sd-skip) {
  color:var(--sd-body);
  --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-page-register.wf-registration-colors .wf-registration-description { background:var(--wf-reg-surface); border-radius:var(--sd-radius-sm); }
.sd-page-register.wf-registration-colors .wf-reg-panel .sd-foot-links { --sd-mute:var(--wf-reg-page-mute); }
.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 .sd-hero--blank { background:var(--wf-reg-accent); color:var(--wf-reg-on-accent); }
.sd-page-register.wf-registration-colors .sd-hero--blank i { border-color:color-mix(in srgb,var(--wf-reg-on-accent) 24%,transparent); }
.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; }
}