/* 기능-라이트(admin): style.css 토큰명→design-system 라이트 remap(CSS 전용). 차트(canvas) 색은 리터럴 유지. 컴팩트 밀도 보존 */
    :root {
      --surface:var(--bg); --surface2:var(--bg-soft); --bg2:var(--bg-soft);
      --border:var(--line); --border2:var(--line);
      --text:var(--ink); --muted:var(--ink-soft);
      --green:var(--op-ok); --red:var(--op-danger); --yellow:var(--op-warn); --blue:var(--accent);
    }
    /* Operate(현장 운영) 팔레트 — 승인 시안 attendance-design-v1. 이 화면에서만 design-system 토큰을 덮는다 */
    :root {
      --bg-soft: #f0f2f5; --line: #dde1e7; --ink: #17191e; --ink-soft: #69707d; --ink-faint: #969daa;
      --accent: #1769e0; --accent-hover: #0e56bf;
      --op-canvas: #f5f6f8; --op-line2: #eceef2; --op-accent-soft: #eaf2ff;
      --op-ok: #16815d; --op-ok-soft: #e8f6f0; --op-warn: #a46110; --op-warn-soft: #fff4df;
      --op-danger: #c43d4b; --op-danger-soft: #fff0f1;
      --op-shadow: 0 1px 2px rgba(20,25,35,.04), 0 8px 24px rgba(20,25,35,.05);
      --op-focus: rgba(23,105,224,.32);
    }
    .btn-primary { }                 /* .btn = accent primary */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { background: var(--bg); color: var(--ink); font-family: var(--font); min-height: 100vh; }

    /* ── Login ── */
    #login-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--op-canvas); }
    .login-box { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 40px 48px; width: 90vw; max-width: 360px; text-align: center; }
    .login-box h1 { font-size: 1.4rem; margin-bottom: 6px; }
    .login-box p  { color: var(--muted); font-size: 0.85rem; margin-bottom: 28px; }
    .login-box input { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 11px 14px; color: var(--text); font-size: 0.95rem; margin-bottom: 12px; outline: none; transition: border-color .2s; }
    .login-box input:focus { border-color: var(--accent); }
    .login-box .btn { font-size: 15px; }   /* 전폭 CTA — 전역 .btn(13px)이 로그인 버튼까지 줄이지 않도록 */
    .login-error { color: var(--red); font-size: 0.82rem; margin-bottom: 10px; display: none; line-height: 1.5; text-align: center; }

    /* ── Layout ── */
    #app { display: none; height: 100vh; display: grid; grid-template-columns: 260px 1fr; grid-template-rows: 56px 1fr; overflow: hidden; }
    header { grid-column: 1/-1; background: var(--bg); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
    header h1 { font-size: 14px; font-weight: 400; color: var(--ink-soft); }
    .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
    .brand-tile { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .brand-name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
    .hdr-sep { width: 1px; height: 16px; background: var(--line); flex-shrink: 0; }
    .header-right { display: flex; align-items: center; gap: 10px; }
    .user-chip {
      display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 4px;
      border: none; border-radius: var(--r-pill); background: var(--bg-soft); color: var(--ink);
      font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; max-width: 220px;
    }
    .user-chip .avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .user-chip #hdr-user { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .user-chip .ic { color: var(--ink-faint); }

    /* ── Sidebar ── */
    #sidebar { background: #fafbfc; border-right: 1px solid var(--line); overflow-y: auto; padding: 16px 12px; display: flex; flex-direction: column; gap: 12px; }
    .sidebar-search { position: relative; flex-shrink: 0; }
    .sidebar-search .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-faint); pointer-events: none; }
    .sidebar-section { padding: 0 4px; font-size: 11px; color: var(--ink-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; flex-shrink: 0; }
    #event-list { display: flex; flex-direction: column; gap: 2px; }
    .event-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; border-radius: 10px; transition: background .15s; font-size: 14px; color: var(--ink); }
    .event-item:hover { background: var(--bg-soft); }
    .event-item.active { background: var(--ink); font-weight: 600; color: #fff; }
    .event-item.active .event-date { color: rgba(255,255,255,.72); }
    .event-item > div { min-width: 0; }
    .event-item .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .event-item .event-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .event-item .event-date { font-size: 12px; color: var(--ink-soft); font-weight: 400; }
    .btn-new-event {
      margin: auto 0 0; flex-shrink: 0; width: 100%; height: 36px;
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      background: var(--ink); border: none; border-radius: 9px; color: #fff;
      font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity .2s;
    }
    .btn-new-event:hover { opacity: .85; }

    /* ── Main ── (밝은 운영 canvas 위에 흰 카드) */
    #main { overflow-y: auto; padding: 24px 32px; background: var(--op-canvas); min-width: 0; }

    /* ── Welcome ── */
    #view-welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; color: var(--muted); gap: 12px; }
    #view-welcome .big-icon { color: var(--ink-faint); }
    #view-welcome .big-icon .ic { width: 48px; height: 48px; stroke-width: 1.4; }
    #view-welcome h2 { color: var(--text); }

    /* ── Event Detail ── */
    #view-event { display: none; }
    .event-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
    .event-header h2 { font-size: 1.4rem; font-weight: 700; flex: 1; }
    /* flex-basis로 좁은 화면에선 제목이 찌그러지지 않고 한 줄을 통째로 차지하게 한다 */
    .event-title { flex: 1 1 260px; min-width: 240px; }
    #ev-name { font-size: 25px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
    #ev-meta { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
    .event-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .status-badge { font-size: 0.75rem; padding: 4px 10px; border-radius: 99px; font-weight: 600; }
    .badge-DRAFT  { background: var(--bg-soft); color: var(--ink-soft); }
    .badge-ACTIVE { background: var(--svc-vote-soft); color: var(--green); }
    .badge-ENDED  { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }

    /* ── 상태 세그먼트 컨트롤 ── */
    .seg-group { display: inline-flex; align-items: center; padding: 3px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; flex-shrink: 0; }
    .seg {
      display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px;
      border: none; background: none; border-radius: 8px; color: var(--ink-soft);
      font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s;
    }
    .seg.active { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
    /* 지금 상태는 배지처럼 읽힌다 — 진행 중=성공색 점+글자, 종료=위험색 글자 */
    .seg[data-status="ACTIVE"].active { color: var(--op-ok); }
    .seg[data-status="ENDED"].active  { color: var(--op-danger); }
    .seg .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--op-ok); display: none; }
    .seg.active .dot { display: inline-block; }

    /* ── Tabs ── */
    .tabs { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
    .tabs::-webkit-scrollbar { display: none; }
    .tab { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 14px; border: none; background: none; color: var(--ink-soft); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s; flex-shrink: 0; white-space: nowrap; }
    .tab .ic { margin-right: 6px; vertical-align: -3px; }   /* JS가 display:inline-block로 되돌리는 탭도 정렬 유지 */
    .tab.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
    .tab:hover { color: var(--ink); }
    .tab-sep { width: 1px; height: 16px; background: var(--line); margin: 0 6px; align-self: center; flex-shrink: 0; }

    /* ── Cards ── */
    .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
    .stat-card { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; box-shadow: var(--op-shadow); }
    .stat-label { font-size: 12px; font-weight: 500; color: var(--ink-soft); text-transform: none; letter-spacing: 0; margin-bottom: 8px; }
    .stat-value { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
    .stat-value.green { color: var(--green); }
    .stat-value.blue  { color: var(--blue); }
    .stat-value.yellow{ color: var(--yellow); }
    .stat-sub { font-size: 12px; color: var(--ink-soft); margin-top: 8px; }
    .stat-bar { height: 4px; border-radius: 2px; background: var(--bg-soft); margin-top: 10px; overflow: hidden; }
    .stat-bar > i { display: block; height: 100%; width: 0; background: var(--op-ok); transition: width .3s; }
    /* 대시보드 요약은 카드 그리드가 아니라 한 줄 요약 띠 — 칸 사이는 얇은 선 */
    #tab-dashboard .stat-grid {
      gap: 0; align-items: stretch; background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
      box-shadow: var(--op-shadow); overflow: hidden;
    }
    #tab-dashboard .stat-card { border: 0; border-radius: 0; box-shadow: none; border-right: 1px solid var(--op-line2); }
    #tab-dashboard .stat-card:last-child { border-right: 0; }

    /* ── 대시보드 2열 ── */
    .dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: stretch; }
    .dash-side { display: flex; flex-direction: column; gap: 16px; }
    .qa-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--op-line2); }
    .qa-row .qa-name { font-size: 13px; font-weight: 600; }
    /* 현장 작업(QR 체크인 스캔·경품 지급 스캔) — 대시보드에서 가장 큰 행동 */
    .qa-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
    .qa-actions .btn { min-height: 58px; font-size: 15px; border-radius: 12px; white-space: normal; text-align: center; }
    @media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr; } }

    /* ── SSE Feed ── */
    .live-feed { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; display: flex; flex-direction: column; box-shadow: var(--op-shadow); }
    .live-feed-header { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; margin-bottom: 8px; }
    .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 1.5s infinite; flex-shrink: 0; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
    .feed-list { list-style: none; max-height: 200px; overflow-y: auto; flex: 1; }
    .feed-item { font-size: 14px; padding: 9px 0; border-bottom: 1px solid var(--op-line2); display: flex; gap: 12px; }
    .feed-item:last-child { border: none; }
    .feed-time { color: var(--ink-faint); font-size: 12px; font-variant-numeric: tabular-nums; flex-shrink: 0; }

    /* ── Table ── */
    .table-wrap { overflow-x: auto; }
    .table-card { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); box-shadow: var(--op-shadow); }
    .table-card td { white-space: nowrap; height: 54px; border-bottom-color: var(--op-line2); }   /* 좁은 화면에선 줄바꿈 대신 .table-wrap이 가로 스크롤 */
    .table-card th { background: #fafbfc; }
    .table-card tbody tr:last-child td { border-bottom: none; }
    .table-card tbody tr:last-child td:first-child { border-bottom-left-radius: 11px; }
    .table-card tbody tr:last-child td:last-child  { border-bottom-right-radius: 11px; }
    table { width: 100%; border-collapse: collapse; font-size: 14px; }
    th { text-align: left; padding: 10px 14px; background: var(--bg-soft); color: var(--ink-soft); font-weight: 600; font-size: 12px; text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
    .table-card thead tr:first-child th:first-child { border-top-left-radius: 11px; }
    .table-card thead tr:first-child th:last-child  { border-top-right-radius: 11px; }
    td { padding: 0 14px; height: 42px; border-bottom: 1px solid var(--bg-soft); }
    tr:hover td { background: var(--bg-soft); }
    #approval-modal th, #approval-modal td { white-space: nowrap; }
    .chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; }
    .chip-yes   { background: var(--op-ok-soft);     color: var(--op-ok); }
    .chip-no    { background: var(--bg-soft);        color: var(--ink-soft); }
    /* 상태 배지 = 점 + 글자 (색만으로 구분하지 않는다) */
    .chip-yes::before, .chip-no::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
    .chip-csv   { background: var(--svc-qr-soft);    color: var(--accent); }
    .chip-pre   { background: var(--svc-video-soft); color: oklch(0.45 0.16 300); }
    .chip-site  { background: var(--svc-ai-soft);    color: oklch(0.50 0.15 55); }
    .chip-count { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill); background: var(--bg-soft); color: var(--ink-soft); font-size: 12px; font-weight: 600; }
    .chip-count:empty { display: none; }
    #participant-resume-totals { white-space: nowrap; }

    /* ── Forms ── */
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-group { display: flex; flex-direction: column; gap: 6px; }
    .form-group.full { grid-column: 1/-1; }
    /* 부스 채용직무 편집 행 (부스 추가 카드·💼 모달) */
    .job-row { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 0 0 10px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
    .job-row legend { font-size: 0.8rem; font-weight: 700; padding: 0 4px; }
    label { font-size: 0.8rem; color: var(--muted); }
    input[type=text], input[type=datetime-local], input[type=date], input[type=time],
    input[type=email], input[type=number], input[type=password], select, textarea {
      background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
      padding: 9px 12px; color: var(--text); font-size: 0.9rem; outline: none; width: 100%;
      transition: border-color .2s;
    }
    input[type=datetime-local] { color-scheme: light; }
    input[type=datetime-local]::-webkit-calendar-picker-indicator { cursor: pointer; }
    input:focus, select:focus, textarea:focus { border-color: var(--accent); }
    select option { background: var(--surface); }
    .toggle-wrap { display: flex; align-items: center; gap: 10px; }
    .toggle { width: 44px; height: 24px; background: var(--border); border-radius: 12px; cursor: pointer; position: relative; transition: background .2s; }
    .toggle.on { background: var(--accent); }
    .toggle::after { content: ''; width: 18px; height: 18px; background: white; border-radius: 50%; position: absolute; top: 3px; left: 3px; transition: left .2s; }
    .toggle.on::after { left: 23px; }
    .prize-stage-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
    .prize-stage-row .btn-icon, .reg-field-card .btn-icon { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: var(--r-pill); width: 26px; height: 26px; font-size: 0.8rem; cursor: pointer; flex: 0 0 auto; }
    .reg-field-card { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
    .reg-field-card-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; background: var(--bg-soft); }
    .reg-field-card-head .reg-field-title { flex: 1 1 100px; min-width: 60px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .reg-field-card-body { padding: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
    .reg-field-card-body label.reg-field-label { font-size: 0.8rem; color: var(--text); display: block; margin-bottom: 4px; }

    /* ── Buttons (pill 통일: ghost / dark / accent) ── */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      min-height: 32px; padding: 0 14px; border-radius: 9px;
      border: 1px solid transparent; background: var(--bg-soft); color: var(--ink);
      font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
      white-space: nowrap; cursor: pointer; transition: background .15s, opacity .15s;
    }
    .btn:hover { opacity: .85; }
    .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
    .btn-dark    { background: var(--ink);    border-color: var(--ink);    color: #fff; }
    .btn-green   { background: var(--green);  border-color: var(--green);  color: #fff; }
    .btn-red     { background: var(--red);    border-color: var(--red);    color: #fff; }
    .btn-outline { background: var(--bg); border-color: var(--line); color: var(--ink); }
    .btn-outline:hover { opacity: 1; background: var(--bg-soft); }
    .btn-danger  { background: color-mix(in srgb, var(--red) 10%, transparent); border-color: color-mix(in srgb, var(--red) 28%, transparent); color: var(--red); }
    .btn-sm { min-height: 28px; padding: 0 12px; font-size: 12px; }
    .btn-icon { width: 32px; padding: 0; }
    .btn-sm.btn-icon { width: 28px; }

    /* ── 아이콘 · 유틸 ── */
    .ic { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .ic-sm { width: 14px; height: 14px; }
    .is-collapsed { display: none !important; }

    /* ── 드롭다운 메뉴 ── */
    .menu-wrap { position: relative; display: inline-flex; }
    .menu {
      display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
      min-width: 190px; flex-direction: column; gap: 2px; padding: 6px;
      background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
      box-shadow: 0 8px 28px rgba(0,0,0,.12);
    }
    .menu.open { display: flex; }
    .menu-item {
      display: flex; align-items: center; width: 100%; padding: 8px 10px;
      border: none; border-radius: 8px; background: none; color: var(--ink);
      font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.3;
      text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer;
    }
    .menu-item:hover { background: var(--bg-soft); }
    .menu-item.danger { color: var(--red); }

    /* ── 툴바 (Forms 이후에 와야 input/select 기본값을 덮는다) ── */
    .toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
    .toolbar h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
    .toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .toolbar-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; flex-shrink: 0; }
    /* 검색·필터 구역 — 찾기 도구를 한 흰 띠로 묶어 행동 버튼과 구분한다 */
    .filter-zone {
      display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px;
      background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--op-shadow);
    }
    .filter-zone .search-pill { width: 260px; }
    .search-pill { position: relative; width: 240px; max-width: 100%; }
    .search-pill .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--ink-faint); pointer-events: none; }
    .search-pill input { height: 38px; width: 100%; padding: 0 12px 0 32px; background: #fff; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; }
    .sel-pill { height: 38px; width: auto; padding: 0 10px; border-radius: 9px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer; }
    .sidebar-search input { height: 40px; padding: 0 12px 0 33px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; font-size: 13px; }
    #participants-tbody td .btn { min-width: 32px; height: 32px; padding: 0 6px; font-size: 12px; }
    #participants-tbody td:last-child { justify-content: flex-end; }   /* 행 액션은 오른쪽 정렬 (td의 인라인 display:flex와 함께) */
    /* 상태 배지/셀렉트는 세그먼트 컨트롤로 대체 — JS가 값을 읽고 쓰므로 DOM엔 남기고 시각적으로만 숨긴다 */
    #ev-status-badge, #ev-status-sel {
      position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }

    /* ── Sections ── */
    .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: var(--op-shadow); }
    .card h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 16px; }
    #section-pre, #section-csv, #section-onsite { padding: 16px 20px; margin-bottom: 12px; }

    /* ── QR Code ── */
    .qr-box { background: white; border-radius: 12px; padding: 12px; display: inline-block; }
    .qr-box img { display: block; width: 160px; height: 160px; }
    /* 버튼이 최대 13개까지 붙는 행 — 감싸지 않으면 .booth-info가 0px까지 눌려 부스명이 세로로 쪼개진다 */
    .booth-row { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; flex-wrap: wrap; }
    .booth-info { flex: 1 1 300px; min-width: 200px; }
    .booth-name { font-weight: 600; margin-bottom: 4px; }
    .booth-url  { font-size: 0.75rem; color: var(--muted); word-break: break-all; }
    .booth-group-label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 18px 0 6px; }
    .booth-group-label:first-child { margin-top: 0; }

    /* ── Lottery ── */
    .winner-card { background: var(--svc-vote-soft); border: 1px solid color-mix(in srgb, var(--green) 28%, transparent); border-radius: 12px; padding: 24px; text-align: center; }
    .winner-card h3 { color: var(--green); font-size: 1.2rem; margin-bottom: 8px; }

    /* ── Modal ── */
    .modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 100; align-items: center; justify-content: center; padding: 16px; }
    .modal-bg.open { display: flex; }
    .modal { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 32px; width: 90vw; max-width: 560px; max-height: 90vh; overflow-y: auto; }
    .modal h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 24px; }
    .modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }

    /* ── Misc ── */
    .divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
    .empty { color: var(--muted); text-align: center; padding: 32px; font-size: 0.875rem; }
    .onsite-qr { text-align: center; padding: 20px 0; display: none; }
    .onsite-qr h3 { color: var(--green); margin-bottom: 16px; }
    .copy-btn { background: none; border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px 10px; color: var(--muted); font-size: 12px; cursor: pointer; margin-left: 6px; }
    .copy-btn:hover { border-color: var(--accent); color: var(--accent); }
    /* ── QR Scanner ── */
    #scan-fab {
      position: fixed; bottom: 28px; right: 28px; z-index: 50;
      width: 60px; height: 60px; border-radius: 50%;
      background: var(--green); border: none; color: #fff;
      cursor: pointer; box-shadow: 0 4px 16px color-mix(in srgb, var(--green) 42%, transparent);
      display: none; align-items: center; justify-content: center;
      transition: transform .15s, box-shadow .15s;
    }
    #scan-fab .ic { width: 26px; height: 26px; }
    #scan-fab:hover { transform: scale(1.08); box-shadow: 0 6px 20px color-mix(in srgb, var(--green) 55%, transparent); }
    #scan-video-wrap {
      position: relative; width: 100%; aspect-ratio: 1;
      border-radius: 14px; overflow: hidden; background: #000;
      margin-bottom: 16px;
    }
    #scan-video { width: 100%; height: 100%; object-fit: cover; display: block; }
    #scan-canvas { display: none; }
    .scan-overlay {
      position: absolute; inset: 0; pointer-events: none;
      display: flex; align-items: center; justify-content: center;
    }
    .scan-frame {
      width: 60%; aspect-ratio: 1;
      border: 3px solid var(--green); border-radius: 12px;
      box-shadow: 0 0 0 1000px #00000060;
    }
    #scan-result {
      padding: 24px 20px; border-radius: 10px;
      font-size: 2.4rem; font-weight: 700; line-height: 1.25; display: none;
      margin-bottom: 12px;
    }
    #scan-result.success { background: color-mix(in srgb, var(--green) 16%, transparent);  border: 1px solid color-mix(in srgb, var(--green) 38%, transparent);  color: var(--green); }
    #scan-result.error   { background: color-mix(in srgb, var(--red) 12%, transparent);    border: 1px solid color-mix(in srgb, var(--red) 38%, transparent);    color: var(--red); }
    #scan-result.warn    { background: color-mix(in srgb, var(--yellow) 14%, transparent); border: 1px solid color-mix(in srgb, var(--yellow) 38%, transparent); color: var(--yellow); }
    #scan-status { font-size: 0.78rem; color: var(--muted); margin-bottom: 16px; min-height: 1.2em; }
    /* ── 경품(Prize) 스캔 ── */
    #prize-scan-video-wrap {
      position: relative; width: 100%; aspect-ratio: 1;
      border-radius: 14px; overflow: hidden; background: #000;
      margin-bottom: 16px;
    }
    #prize-scan-video { width: 100%; height: 100%; object-fit: cover; display: block; }
    .prize-tier-row {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      padding: 14px 16px; border-radius: 10px; margin-bottom: 10px; border: 1px solid var(--border);
    }
    .prize-tier-eligible   { background: var(--svc-vote-soft); border-color: color-mix(in srgb, var(--green) 28%, transparent); }
    .prize-tier-claimed    { background: var(--surface2); opacity: .55; }
    .prize-tier-claimed .prize-tier-name { text-decoration: line-through; color: var(--muted); }
    .prize-tier-ineligible { opacity: .55; }
    .prize-tier-disabled   { opacity: .4; }
    .prize-tier-name  { font-weight: 600; font-size: 0.95rem; }
    .prize-tier-state { font-size: 0.82rem; color: var(--muted); }
    .prize-banner { border-radius: 12px; padding: 20px; text-align: center; margin-bottom: 16px; font-weight: 700; }
    .prize-banner-success { background: color-mix(in srgb, var(--green) 16%, transparent);  border: 1px solid color-mix(in srgb, var(--green) 38%, transparent);  color: var(--green); }
    .prize-banner-warn    { background: color-mix(in srgb, var(--yellow) 14%, transparent); border: 1px solid color-mix(in srgb, var(--yellow) 38%, transparent); color: var(--yellow); }
    .prize-banner-error   { background: color-mix(in srgb, var(--red) 12%, transparent);    border: 1px solid color-mix(in srgb, var(--red) 38%, transparent);    color: var(--red); }
    /* ── 검색 + 페이지네이션 ── */
    .search-input { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; color: var(--text); font-size: 0.85rem; outline: none; width: 200px; transition: border-color .2s; }
    .search-input:focus { border-color: var(--accent); }
    .pagination { display: flex; align-items: center; gap: 6px; margin-top: 12px; justify-content: center; flex-wrap: wrap; }
    .page-btn { min-width: 30px; height: 30px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; font-family: inherit; font-size: 13px; transition: background .15s; }
    .page-btn:hover:not(:disabled) { background: var(--bg-soft); }
    .page-btn:disabled { opacity: .35; cursor: not-allowed; }
    .page-btn.active { background: var(--ink); border-color: var(--ink); color: #fff; }
    .page-info { font-size: 12px; color: var(--ink-soft); }

    /* ── 스캔 전체화면 ── */
    #scan-fullscreen {
      display: none; position: fixed; inset: 0; z-index: 300;
      background: #ffffff; flex-direction: column;
      align-items: center; justify-content: center;
    }
    #scan-fullscreen.open { display: flex; }
    .scan-fs-close {
      position: absolute; top: 20px; right: 24px;
      background: #f5f5f7; border: 1px solid #e5e7eb; color: var(--muted);
      border-radius: 10px; padding: 8px 18px; font-size: 0.9rem; cursor: pointer;
    }
    .scan-fs-close:hover { border-color: var(--accent); color: var(--accent); }
    #scan-fullscreen .scan-fs-inner {
      max-width: 520px; width: 100%; text-align: center; padding: 0 16px;
    }
    #scan-fullscreen #scan-video-wrap { max-height: 72vh; }

    /* ── 오프라인 추첨 전체화면 ── */
    #offline-lottery-screen {
      display: none; position: fixed; inset: 0; z-index: 300;
      background: #ffffff; flex-direction: column; overflow: hidden;
    }
    #offline-lottery-screen.open { display: flex; }
    .ol-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 20px 28px; border-bottom: 1px solid #f5f5f7; flex-shrink: 0;
    }
    .ol-title { font-size: 1.3rem; font-weight: 700; }
    .ol-subtitle { font-size: 0.85rem; color: var(--muted); margin-top: 2px; }
    .ol-number-grid {
      flex: 1; overflow-y: auto; padding: 24px 28px;
      display: flex; flex-wrap: wrap; gap: 12px; align-content: flex-start;
    }
    .ol-num {
      width: 72px; height: 72px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem; font-weight: 700;
      background: #f5f5f7; border: 2px solid #e5e7eb; color: var(--text);
      flex-shrink: 0; transition: background .2s, border-color .2s;
    }
    .ol-num.won {
      background: #22c55e30; border-color: #22c55e60; color: var(--green);
    }
    .ol-num.won::after { content: '✓'; font-size: 0.7rem; }
    .ol-footer {
      padding: 20px 28px; border-top: 1px solid #f5f5f7; flex-shrink: 0;
      display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    }
    .ol-input {
      font-size: 1.4rem; font-weight: 700; text-align: center;
      width: 140px; background: #f5f5f7; border: 2px solid #e5e7eb;
      border-radius: 10px; padding: 12px; color: var(--text);
      outline: none; transition: border-color .2s;
    }
    .ol-input:focus { border-color: var(--accent); }
    .ol-result {
      flex: 1; min-width: 200px; padding: 14px 18px; border-radius: 10px;
      font-size: 1rem; font-weight: 600; display: none;
    }
    .ol-result.success { background: #22c55e40; border: 1px solid #22c55e60; color: var(--green); }
    .ol-result.error   { background: #450a0a40; border: 1px solid #ef444460; color: var(--red); }

    /* ── 사전등록 전체화면 ── */
    #prereg-screen {
      display: none; position: fixed; inset: 0; z-index: 300;
      background: #ffffff; flex-direction: column;
      align-items: center; justify-content: center; text-align: center;
    }
    #prereg-screen.open { display: flex; }
    #prereg-screen .pr-close {
      position: absolute; top: 20px; right: 24px;
      background: #f5f5f7; border: 1px solid #e5e7eb; color: var(--muted);
      border-radius: 10px; padding: 8px 18px; font-size: 0.9rem; cursor: pointer;
    }
    #prereg-screen .pr-event { font-size: 1rem; color: var(--muted); margin-bottom: 8px; }
    #prereg-screen .pr-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 28px; }
    #prereg-screen .pr-qr-wrap {
      background: #fff; border-radius: 20px; padding: 16px; margin-bottom: 28px;
      display: inline-block;
    }
    #prereg-screen .pr-qr-wrap img { display: block; width: 280px; height: 280px; }
    #prereg-screen .pr-url {
      font-size: 1.1rem; color: #0071e3; word-break: break-all;
      max-width: 600px; line-height: 1.6;
    }
    #prereg-screen .pr-hint { font-size: 0.85rem; color: #4b5563; margin-top: 16px; }

    @media print {
      body > *:not(#print-area) { display: none !important; }
      #print-area { display: block !important; text-align: center; padding: 40px; }
      #print-area .pa-title { font-size: 1.6rem; font-weight: 800; margin-bottom: 8px; }
      #print-area .pa-hint  { font-size: 0.9rem; color: #555; margin-bottom: 24px; }
      #print-area .pa-url   { font-size: 1rem; color: #333; margin-top: 20px; word-break: break-all; }
    }

    /* ── 리포트 차트 그리드 반응형 ── */
    @media (max-width: 1100px) {
      #report-charts-row { grid-template-columns: 1fr 1fr !important; }
    }
    @media (max-width: 700px) {
      #report-charts-row { grid-template-columns: 1fr !important; }
    }

    /* ── 햄버거 버튼 (기본 숨김) ── */
    /* 히트 타깃 40×40 — 내용이 16px SVG라 padding만으로는 28px 기준에 미달한다 */
    #hamburger { display: none; justify-content: center; width: 40px; height: 40px; background: none; border: none; color: var(--text); cursor: pointer; padding: 0; }

    /* ── 사이드바 백드롭 ── */
    #sidebar-backdrop { display: none; position: fixed; inset: 0; top: 56px; background: rgba(0,0,0,.38); z-index: 49; }
    #sidebar-backdrop.open { display: block; }

    /* ── 태블릿 (768px ~ 1024px): 사이드바 200px ── */
    @media (max-width: 1024px) {
      #app { grid-template-columns: 200px 1fr; }
      #main { padding: 20px 20px; }
      .stat-grid { grid-template-columns: repeat(2, 1fr); }
      #tab-dashboard .stat-card:nth-child(2) { border-right: 0; }
      #tab-dashboard .stat-card:nth-child(-n+2) { border-bottom: 1px solid var(--op-line2); }
      .form-grid { grid-template-columns: 1fr 1fr; }
    }

    /* ── 소형 태블릿/모바일 (<768px): 햄버거 + 슬라이드 사이드바 ── */
    @media (max-width: 768px) {
      #app { grid-template-columns: 1fr; }
      #hamburger { display: flex; align-items: center; }
      #sidebar {
        position: fixed; top: 56px; left: -280px; height: calc(100vh - 56px);
        z-index: 50; transition: left .25s ease; width: 260px;
        box-shadow: 4px 0 24px rgba(0,0,0,.28);
      }
      #sidebar.open { left: 0; }
      #main { padding: 16px; }
      /* 헤더가 뷰포트보다 넓어지지 않도록 (pill 버튼의 nowrap 때문에) 부제·구분선을 접고 칩을 줄인다 */
      header { padding: 0 12px; }
      /* 페이지의 유일한 h1 — display:none이면 스크린리더에서도 사라지므로 시각적으로만 숨긴다 */
      header h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
      .hdr-sep { display: none; }
      .header-right { gap: 6px; min-width: 0; }
      .user-chip { max-width: 132px; min-width: 0; }
      .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .event-header { flex-wrap: wrap; gap: 10px; }
      .event-title { flex-basis: 100%; min-width: 0; }
      .form-grid { grid-template-columns: 1fr; }
      .modal { padding: 20px; border-radius: 12px; }
      .modal-footer { flex-wrap: wrap; }
      .modal-footer .btn { flex: 1; text-align: center; }
    }

    /* ── 폼 그리드 600px 이하 1열 ── */
    @media (max-width: 600px) {
      .form-grid { grid-template-columns: 1fr; }
      .stat-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* ── 현장 운영 모바일 (≤700px): 주요 타깃 44px, 검색·필터는 한 줄 전체, 줄은 감싸서 넘치지 않게 ── */
    @media (max-width: 700px) {
      #hamburger { width: 44px; height: 44px; }
      /* 헤더가 뷰포트를 넘지 않게 로고 글자는 시각적으로만 접는다(링크 이름은 남는다) */
      .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
      .btn, .tab, .seg, .page-btn, .sel-pill, .menu-item, .event-item { min-height: 44px; }
      .btn-icon, .btn-sm.btn-icon { width: 44px; }
      .search-pill input, .sidebar-search input { height: 44px; }
      #participants-tbody td .btn { min-width: 44px; height: 44px; }
      .seg-group { width: 100%; }
      .seg { flex: 1; justify-content: center; }
      .toolbar-right { margin-left: 0; width: 100%; }
      .toolbar-sep { display: none; }
      .filter-zone { flex: 1 1 100%; }
      .filter-zone .search-pill { flex: 1 1 100%; width: auto; }
      .filter-zone .sel-pill { flex: 1 1 0; min-width: 0; }
      /* 참가자 툴바는 셀렉트가 셋 — 한 줄에 몰면 라벨이 잘린다. 두 개씩 접는다 */
      #tab-participants .filter-zone .sel-pill { flex: 1 1 calc(50% - 3px); }
    }

    /* 설명회 참석 스캔 토스트 (참가자 페이지들의 #toast 관례) */
    #session-toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); border-radius: 10px; padding: 12px 20px; font-size: 0.9rem; font-weight: 600; max-width: 80vw; text-align: center; opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 2000; }
    #session-toast.show { opacity: 1; }
    /* ── 열람 전용(EVENT_VIEWER) 모드 ──
       관리 컨트롤을 한 곳에서 막는다. 버튼을 하나씩 숨기면 나중에 추가되는 관리 버튼이
       그물을 빠져나간다. 인라인 display를 덮어야 하므로 !important.
       .modal-bg(행사 생성·주최자·승인·키오스크·열람 배정·부스 설명·참가자 수정)는 통째로 막지만,
       #changepw-modal은 .modal-bg가 아닌 별도 div라 본인 비밀번호 변경 흐름은 그대로 남는다.
       화면은 1차 차단이고 서버가 최종 방어선이다 — 관리 API는 EVENT_VIEWER에게 전부 403(06a/06b). */
    body.viewer-mode #view-welcome,
    body.viewer-mode #view-event,
    body.viewer-mode .btn-new-event,
    body.viewer-mode #btn-mgmt-link,
    body.viewer-mode #scan-fab,
    body.viewer-mode .modal-bg,
    body.viewer-mode #prereg-screen,
    body.viewer-mode #scan-fullscreen,
    body.viewer-mode #offline-lottery-screen,
    body.viewer-mode #print-area { display: none !important; }

    /* 키보드 포커스 링 — 위쪽 input/select의 outline:none보다 뒤에 있어야 이긴다 */
    button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
      outline: 3px solid var(--op-focus); outline-offset: 2px;
    }
    .tab:focus-visible { outline-offset: -3px; }   /* 탭 줄은 가로 스크롤 컨테이너라 바깥 링이 잘린다 */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
    }