/* ============================================================
   QR Voting 관리자 공통 스타일 — 파스텔 퍼플 (Onforis 관리자와 같은 팔레트·밀도)
   모든 색은 :root 토큰만 사용 (hex 하드코딩 금지)
   폰트: Pretendard (자체 호스팅 — /admin/assets/fonts/PretendardVariable.woff2)
   v3: 한글 조판 최적화(keep-all) + 여백 축소로 정보 밀도 향상
   ============================================================ */

@font-face {
    font-family: 'Pretendard Variable';
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: url('/admin/assets/fonts/PretendardVariable.woff2') format('woff2-variations');
}

:root {
    /* 브랜드 */
    --primary:       #9A8CC9;
    --primary-hover: #8375B4;
    --primary-soft:  #EDE9F6;
    --deep-purple:   #544A75;

    /* 뉴트럴 (살짝 퍼플기 있는 그레이) */
    --bg:            #FAFAFC;
    --surface:       #FFFFFF;
    --border:        #EAE9EF;
    --text:          #2A2833;
    --text-sub:      #807E8F;

    /* 시맨틱 (채도 낮은 파스텔) */
    --success:       #7FB89A;
    --warning:       #E4C588;
    --error:         #DB9A93;
    --info:          #93B4DA;
    --success-soft:  #EDF6F1;
    --warning-soft:  #FBF4E7;
    --error-soft:    #FAEEED;
    --info-soft:     #EDF3FA;

    /* 형태 — 고밀도: 라운드 축소 */
    --radius-card:   10px;
    --radius-btn:    8px;
    --shadow:        0 1px 3px rgba(42,40,51,.06);
    --shadow-hover:  0 6px 18px rgba(84,74,117,.10);

    /* 레이아웃 — 사이드바·상단바 축소로 본문 영역 확대 */
    --sidebar-w:     208px;
    --topbar-h:      48px;
    --active-text:   #6C5F97;
    --btn2-text:     #454351;
    --btn2-border:   #DBDAE2;

    /* 외부 브랜드 색 (AI 검색 표기 등 — 파스텔 팔레트 밖의 예외) */
    --brand-anthropic: #D97757;

    --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
            'Segoe UI', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}

/* ── 기본 ─────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.55;
    letter-spacing: -.01em;
    /* 한글 조판: 어절 단위 줄바꿈 + 긴 토큰(URL 등)은 강제 개행 */
    word-break: keep-all;
    overflow-wrap: break-word;
}
a { color: var(--deep-purple); text-decoration: none; transition: color .15s; }
a:hover { color: var(--primary-hover); }

/* ── 앱 레이아웃: 사이드바 + (상단바 + 본문) ────── */
.app { display: flex; min-height: 100vh; }
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main {
    flex: 1;
    padding: 18px 22px 40px;
    width: 100%;
}

/* ── 상단바 ───────────────────────────────────── */
.topbar {
    height: var(--topbar-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 50;
}
.topbar .spacer { flex: 1; }
.topbar .user {
    font-size: 12.5px;
    color: var(--text-sub);
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.topbar .user b { color: var(--text); font-weight: 600; }
.topbar .user .role-chip {
    background: var(--primary-soft);
    color: var(--active-text);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

/* 고객센터 버튼 (상단바 우측 — 인라인 SVG, 아이콘 폰트 미사용) */
.support-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--text-sub);
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.support-btn:hover { background: var(--primary-soft); color: var(--active-text); }
.support-badge {
    position: absolute;
    top: -2px; right: -3px;
    min-width: 15px; height: 15px;
    padding: 0 3px;
    background: var(--error);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    border-radius: 99px;
}

/* 햄버거 토글 (CSS 3선 — 아이콘 폰트 미사용) */
.nav-toggle {
    width: 32px; height: 32px;
    border: none;
    background: transparent;
    border-radius: 7px;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    transition: background .15s;
}
.nav-toggle:hover { background: var(--primary-soft); }
.nav-toggle span {
    display: block;
    width: 16px; height: 2px;
    background: var(--deep-purple);
    border-radius: 2px;
}

/* ── 사이드바 (밝게, 아이콘 없음) ──────────────── */
.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 14px 12px 20px;
    transition: margin-left .22s ease;
    overflow-y: auto;
}
html.nav-hidden .sidebar { margin-left: calc(var(--sidebar-w) * -1); }

.sidebar .brand {
    display: flex;
    align-items: center;
    padding: 6px 10px 14px;
}
.sidebar .brand img { height: 20px; width: auto; display: block; }

.sidebar .nav-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-sub);
    padding: 12px 10px 4px;
}
.sidebar a.nav-item {
    position: relative;
    display: block;
    padding: 6px 11px;
    margin-bottom: 1px;
    border-radius: 7px;
    color: var(--text-sub);
    font-weight: 500;
    font-size: 13px;
    transition: background .15s, color .15s;
}
.sidebar a.nav-item:hover { background: var(--bg); color: var(--text); }
.sidebar a.nav-item.active {
    background: var(--primary-soft);
    color: var(--active-text);
    font-weight: 700;
}
.sidebar a.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0; top: 7px; bottom: 7px;
    width: 3px;
    border-radius: 3px;
    background: var(--primary);
}

/* ── 사이드바 이벤트 섹션 (기본 메뉴와 시각 구분) ── */
.sidebar .ev-section {
    margin-top: 18px;
    padding: 10px 8px 8px;
    background: var(--primary-soft);
    border: 1px solid #DDD6EE;
    border-radius: 10px;
}
.sidebar .ev-section-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px 8px;
}
.sidebar .ev-chip {
    flex-shrink: 0;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .06em;
    background: var(--deep-purple);
    color: #fff;
    border-radius: 4px;
    padding: 2px 5px;
}
.sidebar .ev-section-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--deep-purple);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar .ev-section a.nav-item { color: #6B6580; }
.sidebar .ev-section a.nav-item:hover { background: rgba(255,255,255,.65); color: var(--text); }
.sidebar .ev-section a.nav-item.active {
    background: var(--surface);
    color: var(--active-text);
    box-shadow: var(--shadow);
}

/* ── 이벤트 기능 탭 바 (매니지 — $currentEventId 페이지 공통) ── */
.event-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 22px;
    overflow-x: auto;
    white-space: nowrap;
}
.event-tabs .ev-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--deep-purple);
    margin-right: 14px;
    padding: 9px 0;
    flex-shrink: 0;
}
.event-tabs a.event-tab {
    padding: 9px 12px 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-sub);
    border-bottom: 2px solid transparent;
    transition: color .12s, border-color .12s;
}
.event-tabs a.event-tab:hover { color: var(--text); }
.event-tabs a.event-tab.active {
    color: var(--active-text);
    border-bottom-color: var(--primary);
}
/* 탭 배지 — 처리 대기 건수 (페이지 로드 시점 기준) */
.event-tabs a.event-tab .tab-badge {
    display: inline-block;
    min-width: 16px;
    margin-left: 5px;
    padding: 0 5px;
    border-radius: 20px;
    background: var(--error);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    vertical-align: 1px;
    font-variant-numeric: tabular-nums;
}

/* ── 페이지 헤더 ──────────────────────────────── */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 10px;
    flex-wrap: wrap;
}
.page-head h1 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.page-head .sub { color: var(--text-sub); font-size: 12.5px; margin-top: 2px; }

/* ── 카드 ─────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    padding: 16px 18px;
    margin-bottom: 12px;
}
.card h2 {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--deep-purple);
    margin-bottom: 12px;
}
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.card-grid .card {
    margin-bottom: 0;
    transition: transform .18s, box-shadow .18s;
}
.card-grid .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

/* ── 버튼 ─────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: var(--radius-btn);
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: -.01em;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
    background: var(--primary);
    color: #fff;
    white-space: nowrap;
}
.btn:hover { background: var(--primary-hover); color: #fff; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
.btn.secondary {
    background: var(--surface);
    color: var(--btn2-text);
    border-color: var(--btn2-border);
}
.btn.secondary:hover { background: var(--bg); }
.btn.danger  { background: var(--error); }
.btn.danger:hover { background: #C9847D; }
.btn.success { background: var(--success); }
.btn.success:hover { background: #6CA687; }
.btn.sm { padding: 4px 10px; font-size: 12px; border-radius: 7px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* 버튼 안 건수 표시 (예: 연자 관리 3) */
.btn .btn-cnt {
    min-width: 16px;
    padding: 0 5px;
    border-radius: 20px;
    background: var(--primary-soft);
    color: var(--active-text);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 16px;
    font-variant-numeric: tabular-nums;
}

/* ── 폼 ───────────────────────────────────────── */
.form-row { margin-bottom: 12px; }
.form-row label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--deep-purple);
    margin-bottom: 4px;
}
.form-row .req { color: var(--error); }
input[type=text], input[type=password], input[type=email], input[type=tel],
input[type=date], input[type=datetime-local], input[type=number], select, textarea {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    font-size: 13.5px;
    font-family: inherit;
    background: var(--surface);
    color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
input::placeholder, textarea::placeholder { color: #B8B6C4; }
.form-inline { display: flex; gap: 8px 10px; align-items: flex-end; flex-wrap: wrap; }
.form-inline .form-row { margin-bottom: 0; flex: 1; min-width: 130px; }
.form-hint { font-size: 11.5px; color: var(--text-sub); margin-top: 4px; }

/* 단일 체크박스 줄 — 라벨과 설명을 한 덩어리로 (form-grid 안에서 다른 입력과 밑선이 맞는다) */
label.chk {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
}
label.chk input[type=checkbox] { width: auto; flex-shrink: 0; margin-top: 2px; accent-color: var(--primary); cursor: pointer; }
label.chk .t { font-weight: 600; }
label.chk .d { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 400; color: var(--text-sub); }
/* form-grid 열 안에서 위 입력칸의 라벨 높이만큼 내려 정렬 */
.form-grid .form-row > label.chk:first-child { margin-top: 22px; }

/* 날짜+시간 분리 입력 쌍 (이벤트 시작·종료 등) */
.date-time-pair { display: flex; gap: 6px; }
.date-time-pair input[type=date] { flex: 1; min-width: 130px; }
.date-time-pair select { width: auto; flex-shrink: 0; }

/* 다열 폼 그리드 — 넓은 화면에서 폼을 여러 열로 배치해 밀도 향상 */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 4px 16px;
}
.form-grid .form-row.full { grid-column: 1 / -1; }

/* ── 테이블 ───────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table.list {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;                      /* 본문보다 살짝 크게 — 목록 가독성 */
    line-height: 1.45;                    /* 행간 압축 — 행 높이 절약 */
    font-variant-numeric: tabular-nums;   /* 숫자 열 정렬 — 자릿수 맞춤 */
}
table.list th {
    text-align: left;
    padding: 6px 10px;
    color: var(--text-sub);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    background: var(--bg);
}
table.list th:first-child { border-radius: 7px 0 0 7px; }
table.list th:last-child  { border-radius: 0 7px 7px 0; }
table.list td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
table.list tr:last-child td { border-bottom: none; }
table.list tbody tr { transition: background .12s; }
table.list tr:hover td { background: var(--bg); }
/* 정렬 가능 헤더 (table.list.sortable — admin.js 자동 적용) */
table.list th.sort { cursor: pointer; -webkit-user-select: none; user-select: none; transition: color .12s; }
table.list th.sort:hover { color: var(--text); }
table.list th.sort::after { content: '↕'; margin-left: 4px; font-size: 10px; opacity: .35; }
table.list th.sort.asc::after  { content: '↑'; opacity: 1; color: var(--active-text); }
table.list th.sort.desc::after { content: '↓'; opacity: 1; color: var(--active-text); }
/* 숫자·날짜 열 — 우측 정렬 + 줄바꿈 금지 */
table.list td.num, table.list th.num { text-align: right; white-space: nowrap; }
table.list td.nowrap { white-space: nowrap; }
.empty { text-align: center; color: var(--text-sub); padding: 32px 0; }

/* ── 배지 (파스텔 연한 배경 + 진한 톤 글씨) ────── */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
}
.badge.success { background: var(--success-soft); color: #4E8A6C; }
.badge.warning { background: var(--warning-soft); color: #A8853F; }
.badge.error   { background: var(--error-soft);   color: #B05F57; }
.badge.info    { background: var(--info-soft);    color: #5578A5; }
.badge.purple  { background: var(--primary-soft); color: var(--active-text); }
.badge.muted   { background: var(--bg); color: var(--text-sub); }

/* ── 알림 박스 ────────────────────────────────── */
.alert {
    padding: 10px 14px;
    border-radius: var(--radius-btn);
    margin-bottom: 12px;
    font-size: 13px;
    border: 1px solid transparent;
}
.alert.success { background: var(--success-soft); color: #4E8A6C; border-color: #D9EBE1; }
.alert.error   { background: var(--error-soft);   color: #B05F57; border-color: #F2DDDB; }
.alert.info    { background: var(--info-soft);    color: #5578A5; border-color: #DCE8F4; }

/* ── 토스트 ───────────────────────────────────── */
#toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: var(--deep-purple);
    color: #fff;
    padding: 10px 20px;
    border-radius: var(--radius-btn);
    box-shadow: 0 6px 20px rgba(42,40,51,.22);
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    z-index: 999;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 인증 화면 (로그인·가입·setup) ─────────────── */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background:
        radial-gradient(ellipse 60% 50% at 20% 0%, var(--primary-soft), transparent),
        var(--bg);
}
.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-hover);
    padding: 34px 32px;
}
.auth-card .brand { text-align: center; margin-bottom: 8px; }
.auth-card .brand img { height: 26px; width: auto; }
.auth-card .sub {
    text-align: center;
    color: var(--text-sub);
    font-size: 13px;
    margin-bottom: 22px;
}
.auth-card .btn { width: 100%; margin-top: 6px; padding: 9px 16px; font-size: 13.5px; }
.auth-card .foot {
    text-align: center;
    margin-top: 18px;
    font-size: 12.5px;
    color: var(--text-sub);
}

/* ── 유틸리티 ─────────────────────────────────── */
.muted { color: var(--text-sub); }
.nowrap { white-space: nowrap; }

/* ── 도움말 위키 드로어 (우측 슬라이드 레이어) ───── */
#helpWrap .help-backdrop {
    position: fixed; inset: 0;
    background: rgba(42,40,51,.32);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
    z-index: 200;
}
#helpWrap.open .help-backdrop { opacity: 1; pointer-events: auto; }
#helpWrap .help-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 400px;
    max-width: 92vw;
    background: var(--surface);
    box-shadow: -8px 0 32px rgba(42,40,51,.18);
    transform: translateX(105%);
    transition: transform .22s ease;
    z-index: 201;
    display: flex;
    flex-direction: column;
}
#helpWrap.open .help-drawer { transform: none; }
.help-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.help-title { flex: 1; font-size: 15px; font-weight: 800; color: var(--deep-purple); }
.help-back, .help-close {
    width: 28px; height: 28px;
    border: none;
    background: transparent;
    border-radius: 7px;
    font-size: 18px;
    line-height: 1;
    color: var(--text-sub);
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.help-back:hover, .help-close:hover { background: var(--primary-soft); color: var(--active-text); }
.help-body { flex: 1; overflow-y: auto; padding: 14px 16px; }
.help-loading { color: var(--text-sub); text-align: center; padding: 30px 0; font-size: 13px; }
.help-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    margin-bottom: 4px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.help-item:hover { background: var(--primary-soft); border-color: var(--primary); }
.help-item.sub {
    width: calc(100% - 16px);
    margin-left: 16px;
    padding: 7px 11px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-sub);
    border-color: transparent;
    background: var(--bg);
}
.help-item.sub:hover { color: var(--active-text); background: var(--primary-soft); }

/* 기능 타이틀 옆 ? 도움말 버튼 */
.title-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    margin-left: 8px;
    vertical-align: 2px;
    border: 1.5px solid var(--primary);
    border-radius: 50%;
    background: var(--surface);
    color: var(--active-text);
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.title-help:hover { background: var(--primary); color: #fff; }

/* 위키 본문 타이포 */
.wiki h1 { font-size: 17px; font-weight: 800; color: var(--deep-purple); margin: 4px 0 10px; }
.wiki h2 { font-size: 14.5px; font-weight: 700; color: var(--deep-purple); margin: 16px 0 6px; }
.wiki h3 { font-size: 13.5px; font-weight: 700; margin: 12px 0 4px; }
.wiki p  { font-size: 13.5px; margin: 0 0 8px; }
.wiki ul, .wiki ol { font-size: 13.5px; padding-left: 20px; margin: 0 0 10px; }
.wiki li { margin-bottom: 3px; }
.wiki hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.wiki code {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 1px 5px;
    font-size: 12px;
}
.wiki pre {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    margin: 0 0 10px;
}
.wiki pre code { border: none; background: none; padding: 0; font-size: 12px; }
.wiki strong { font-weight: 700; color: var(--deep-purple); }
.wiki blockquote {
    margin: 0 0 10px;
    padding: 8px 11px;
    border-left: 3px solid var(--primary);
    border-radius: 0 8px 8px 0;
    background: var(--primary-soft);
    font-size: 13px;
    color: var(--text-sub);
}
/* 도움말 표 — 드로어 폭이 좁아 넘치면 표만 가로 스크롤 */
.wiki .help-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 12.5px;
    margin: 0 0 10px;
}
.wiki .help-table th, .wiki .help-table td {
    border: 1px solid var(--border);
    padding: 6px 9px;
    text-align: left;
    vertical-align: top;
}
.wiki .help-table th {
    background: var(--bg);
    font-weight: 700;
    color: var(--deep-purple);
    white-space: nowrap;
}

/* ── 이벤트 스위처 (이벤트 탭 바 좌측 — 다른 이벤트로 즉시 이동) ── */
.ev-switch { position: relative; flex-shrink: 0; margin-right: 12px; }
.ev-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 240px;
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--deep-purple);
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.ev-switch-btn:hover { background: var(--primary-soft); border-color: var(--primary); }
.ev-switch-btn .ev-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0; padding: 0;
}
.ev-switch-btn .caret { font-size: 10px; color: var(--text-sub); }
.ev-switch-pop {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 320px;
    max-width: 86vw;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-hover);
    padding: 8px;
    z-index: 80;
}
.ev-switch.open .ev-switch-pop { display: block; }
.ev-switch-q { margin-bottom: 6px; }
.ev-switch-list { max-height: 320px; overflow-y: auto; }
a.ev-switch-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 13px;
    color: var(--text);
    transition: background .12s;
}
a.ev-switch-item:hover { background: var(--bg); }
a.ev-switch-item.active { background: var(--primary-soft); color: var(--active-text); font-weight: 700; }
a.ev-switch-item .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-switch-none { padding: 14px 8px; text-align: center; color: var(--text-sub); font-size: 12.5px; }
a.ev-switch-all {
    display: block;
    margin-top: 6px;
    padding-top: 7px;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-sub);
}
a.ev-switch-all:hover { color: var(--active-text); }

/* ── 목록 검색·필터 바 ────────────────────────── */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.filter-bar input[type=text] { width: auto; flex: 1; min-width: 160px; max-width: 280px; padding: 5px 9px; font-size: 13px; }
.filter-bar select { width: auto; padding: 5px 9px; font-size: 13px; }
.filter-count { margin-left: auto; font-size: 12px; color: var(--text-sub); }
.filter-count b { color: var(--text); }

/* ── 페이지네이션 ─────────────────────────────── */
.pager {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    flex-wrap: wrap;
}
a.pager-num {
    min-width: 26px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-sub);
    text-align: center;
    transition: background .12s, color .12s;
}
a.pager-num:hover { background: var(--bg); color: var(--text); }
a.pager-num.active {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--active-text);
}

/* ── 체크 목록 (이벤트 할당 등) ───────────────── */
.check-list {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    padding: 4px;
}
label.check-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    margin-bottom: 0;
    transition: background .12s;
}
label.check-item:hover { background: var(--bg); }
label.check-item input[type=checkbox] { width: auto; flex-shrink: 0; }
label.check-item > span:first-of-type { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 통계 타일 (이벤트 개요) ──────────────────── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    padding: 12px 14px;
}
.stat .k { font-size: 11.5px; font-weight: 600; color: var(--text-sub); margin-bottom: 3px; }
.stat .v { font-size: 22px; font-weight: 800; color: var(--deep-purple); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat .v small { font-size: 12px; font-weight: 600; color: var(--text-sub); margin-left: 2px; }

/* 정의 목록 (개요 기본 정보) */
.dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; }
.dl dt { color: var(--text-sub); font-weight: 600; white-space: nowrap; }
.dl dd { color: var(--text); overflow-wrap: anywhere; }

/* 체크리스트 (온보딩 안내) */
.todo-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 13px;
}
.todo-line:last-child { border-bottom: none; }
.todo-line .mark {
    width: 18px; height: 18px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
}
.todo-line .mark.done { background: var(--success-soft); color: #4E8A6C; }
.todo-line .mark.todo { background: var(--warning-soft); color: #A8853F; }
.todo-line .t { flex: 1; }
.todo-line.done .t { color: var(--text-sub); }

/* ── 접기 블록 (공통) ────────────────────────── */
details.fold > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
details.fold > summary::-webkit-details-marker { display: none; }
/* 펼침 화살표 — 원형 버튼처럼 보이게 (클릭 가능하다는 신호) */
details.fold > summary::after {
    content: '';
    margin-left: auto;
    flex-shrink: 0;
    width: 28px; height: 28px;
    border: 1px solid var(--btn2-border);
    border-radius: 50%;
    background-color: var(--surface);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C5F97' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    transition: transform .2s ease, background-color .12s, border-color .12s;
}
details.fold > summary:hover::after {
    background-color: var(--primary-soft);
    border-color: var(--primary);
}
details.fold[open] > summary::after { transform: rotate(180deg); }

/* ── AI 검색 (자연어 질의) — 회원 목록 상단 강조 카드 ──── */
.ai-card {
    border-color: #E7D3CA;
    box-shadow: 0 2px 10px rgba(217, 119, 87, .08);
}
.ai-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
details.ai-details[open] > .ai-head { margin-bottom: 12px; }
details.ai-details > summary:hover .ai-title { color: var(--brand-anthropic); }
.ai-head-txt { display: flex; flex-direction: column; min-width: 0; }

/* AI 카드의 펼침 화살표는 브랜드 색으로 */
details.ai-details > summary::after {
    border-color: #E7D3CA;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D97757' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
details.ai-details > summary:hover::after {
    background-color: #FBF0EC;
    border-color: var(--brand-anthropic);
}
/* 로고 타일 — 아이콘이 자체 브랜드 색(#D97757)을 쓰므로 배경은 연한 톤 */
.ai-logo {
    position: relative;
    flex-shrink: 0;
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #FBF0EC;
    border: 1px solid #F2DED6;
    color: var(--brand-anthropic);
    transition: transform .15s, box-shadow .15s, background-color .15s;
}
.ai-logo svg { width: 18px; height: 18px; display: block; }
.ai-logo img { width: 20px; height: 20px; display: block; }

/* ── 아이콘 모션 ─────────────────────────────────
   ① 접혀 있을 때만 은은한 호흡 — "여기 AI 기능이 있다" 신호 (펼치면 멈춤)
   ② hover — 살짝 떠오름
   ③ 분석 중 — 테두리 링 회전 + 아이콘 맥동 (응답까지 수 초 걸리므로 진행 표시)
   모션 최소화 설정(prefers-reduced-motion)에서는 전부 정지 */
@keyframes aiBreathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.09); }
}
@keyframes aiSpin { to { transform: rotate(360deg); } }
@keyframes aiPulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: .45; transform: scale(.86); }
}

details.ai-details:not([open]) .ai-logo img,
details.ai-details:not([open]) .ai-logo svg {
    animation: aiBreathe 3.2s ease-in-out infinite;
}
details.ai-details > summary:hover .ai-logo {
    transform: translateY(-1px);
    background: #F8E7E0;
    box-shadow: 0 3px 9px rgba(217, 119, 87, .22);
}

.ai-logo.thinking { background: #F8E7E0; }
.ai-logo.thinking::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 12px;
    border: 2px solid rgba(217, 119, 87, .18);
    border-top-color: var(--brand-anthropic);
    animation: aiSpin .8s linear infinite;
}
.ai-logo.thinking img,
.ai-logo.thinking svg { animation: aiPulse .9s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .ai-logo img, .ai-logo svg, .ai-logo.thinking::after { animation: none !important; }
    details.ai-details > summary:hover .ai-logo { transform: none; }
}
.ai-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -.02em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ai-title .by {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--brand-anthropic);
    background: #FBF0EC;
    border-radius: 20px;
    padding: 2px 7px;
}
.ai-sub {
    font-size: 12px;
    color: var(--text-sub);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-bar {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}
.ai-bar input[type=text] {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 10px;
}
.ai-bar input[type=text]:focus {
    border-color: var(--brand-anthropic);
    box-shadow: 0 0 0 3px rgba(217, 119, 87, .14);
}
.ai-bar .btn {
    flex-shrink: 0;
    padding: 9px 16px;
    background: var(--brand-anthropic);
    border-radius: 10px;
}
.ai-bar .btn:hover { background: #C86545; }
.ai-bar .btn:disabled { background: var(--brand-anthropic); }

/* 예시 질문 칩 — 클릭하면 입력창에 채움 */
.ai-examples { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ex-chip {
    padding: 3px 10px;
    border: 1px dashed var(--btn2-border);
    border-radius: 20px;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    color: var(--text-sub);
    cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
}
.ex-chip:hover {
    border-style: solid;
    border-color: var(--brand-anthropic);
    background: #FBF0EC;
    color: #A85338;
}

/* 적용된 조건 카드 */
.cond-card { border-color: var(--primary); background: linear-gradient(0deg, var(--surface), var(--primary-soft) 400%); }
.cond-explain {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--deep-purple);
    margin-bottom: 8px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.cond-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 6px 4px 10px;
    border: 1px solid var(--primary);
    border-radius: 20px;
    background: var(--surface);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--active-text);
}
.cond-chip .x, .saved-chip .x {
    width: 16px; height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--active-text);
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.cond-chip .x:hover, .saved-chip .x:hover { background: var(--error); color: #fff; }
.cond-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* 저장된 조건 */
.saved-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.saved-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px 3px 10px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg);
    font-size: 12.5px;
}
.saved-chip a { font-weight: 600; color: var(--text); }
.saved-chip a:hover { color: var(--active-text); }

@media (max-width: 640px) {
    .ai-bar { flex-wrap: wrap; }
    .ai-bar input[type=text] { flex: 1 1 100%; }
}

/* ── 이벤트 카드 (대시보드 · layout/_event_card.php) ──── */
.ev-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 12px;
}
.ev-card {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    padding: 14px 16px;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.ev-card:hover {
    transform: translateY(-2px);
    border-color: #DDD6EE;
    box-shadow: var(--shadow-hover);
}
.ev-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 8px;
}
.ev-dday {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-sub);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ev-card h2.ev-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -.02em;
    line-height: 1.35;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ev-meta { font-size: 11.5px; color: var(--text-sub); margin-bottom: 8px; }
.ev-meta .ev-code {
    font-weight: 700;
    color: var(--active-text);
    background: var(--primary-soft);
    border-radius: 5px;
    padding: 1px 5px;
}
.ev-when {
    font-size: 12.5px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    margin-bottom: 10px;
}
.ev-stats { display: flex; gap: 12px; font-size: 12px; color: var(--text-sub); margin-bottom: 8px; }
.ev-stats b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.ev-mods { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
/* 버튼 줄 — 카드 높이가 달라도 항상 바닥에 정렬 */
.ev-foot {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.ev-foot .right { display: inline-flex; gap: 4px; }

/* ── 대시보드 툴바 (단계 탭 + 검색) ──────────────── */
.dash-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.dash-search {
    width: auto;
    flex: 1;
    min-width: 140px;
    max-width: 240px;
    padding: 5px 10px;
    font-size: 13px;
}
.seg {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 9px;
    overflow: hidden;
    background: var(--surface);
}
.seg button {
    padding: 5px 11px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-sub);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.seg button + button { border-left: 1px solid var(--border); }
.seg button:hover { background: var(--bg); color: var(--text); }
.seg button.on { background: var(--primary-soft); color: var(--active-text); font-weight: 700; }
.seg button i { font-style: normal; opacity: .6; margin-left: 3px; font-variant-numeric: tabular-nums; }

/* ── 처리할 일 배너 ───────────────────────────── */
.todo-card { padding: 10px 14px; }
.todo-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.todo-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--text-sub);
    text-transform: uppercase;
}
a.todo-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 11px;
    border: 1px solid var(--warning);
    border-radius: 20px;
    background: var(--warning-soft);
    font-size: 12.5px;
    font-weight: 600;
    color: #A8853F;
    transition: background .12s;
}
a.todo-item:hover { background: #F6E9D2; color: #8F6F2E; }
a.todo-item b { font-weight: 800; }

/* ── 질문관리 (qa 모듈) ───────────────────────── */
/* 탭 — .seg 를 링크로 쓰는 변형 */
.seg a.seg-a {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-sub);
    transition: background .12s, color .12s;
}
.seg a.seg-a + a.seg-a { border-left: 1px solid var(--border); }
.seg a.seg-a:hover { background: var(--bg); color: var(--text); }
.seg a.seg-a.on { background: var(--primary-soft); color: var(--active-text); font-weight: 700; }
.seg a.seg-a i { font-style: normal; opacity: .6; margin-left: 4px; font-variant-numeric: tabular-nums; }

.qa-filter { display: flex; gap: 6px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.qa-filter input[type=text] { width: auto; min-width: 150px; padding: 5px 9px; font-size: 13px; }
.qa-filter select { width: auto; padding: 5px 9px; font-size: 13px; }

table.qa-table td { vertical-align: top; padding-top: 9px; padding-bottom: 9px; }
table.qa-table td.center { text-align: center; vertical-align: middle; }
table.qa-table td.qa-no { font-size: 12px; font-variant-numeric: tabular-nums; }
table.qa-table input[type=radio], table.qa-table input[type=checkbox] { width: auto; cursor: pointer; }
.qa-q { font-size: 13.5px; line-height: 1.55; color: var(--text); }
/* 완료된 질문은 흐리게, 표시 중인 질문은 강조 */
tr.qa-row.done .qa-q { color: var(--text-sub); }
tr.qa-row.on-display td { background: var(--success-soft) !important; }

/* 접기 제목 (fold 안 제목용) */
.fold-title { font-size: 13.5px; font-weight: 700; color: var(--deep-purple); }

/* 현장 링크 목록 (좌장·표시 화면 공유) */
.link-rows { margin-top: 10px; }
.link-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.link-row:last-child { border-bottom: none; }
.link-info { flex: 1; min-width: 200px; }
.link-label { font-size: 13px; font-weight: 700; color: var(--text); }
.link-url {
    font-size: 11.5px;
    color: var(--text-sub);
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}
.link-acts { display: flex; gap: 4px; flex-shrink: 0; }

/* ── 모달 (공통) ──────────────────────────────── */
.modal-wrap { position: fixed; inset: 0; z-index: 300; display: none; }
.modal-wrap.open { display: block; }
.modal-back {
    position: absolute;
    inset: 0;
    background: rgba(42, 40, 51, .35);
}
.modal {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 340px;
    max-width: 92vw;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-hover);
    display: flex;
    flex-direction: column;
}
.modal-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}
.modal-title { flex: 1; font-size: 14px; font-weight: 800; color: var(--deep-purple); }
.modal-close {
    width: 26px; height: 26px;
    border: none;
    background: transparent;
    border-radius: 7px;
    font-size: 18px;
    line-height: 1;
    color: var(--text-sub);
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.modal-close:hover { background: var(--primary-soft); color: var(--active-text); }
.modal-body { padding: 14px; }

/* QR 모달 */
.qr-modal { width: 360px; }
.qr-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    padding: 10px;
    /* 투명 배경 QR 확인용 체커보드 */
    background:
        linear-gradient(45deg, #EEE 25%, transparent 25%, transparent 75%, #EEE 75%) 0 0 / 16px 16px,
        linear-gradient(45deg, #EEE 25%, transparent 25%, transparent 75%, #EEE 75%) 8px 8px / 16px 16px,
        #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    margin-bottom: 10px;
}
.qr-box img, .qr-box canvas { display: block; }
/* 미리보기는 축소 표시 — 캔버스 원본은 선택한 다운로드 해상도 그대로 */
.qr-preview { width: 100%; max-width: 240px; height: auto; }
.qr-msg { color: var(--text-sub); font-size: 12.5px; text-align: center; padding: 20px 10px; line-height: 1.6; }
.qr-url-row { display: flex; gap: 6px; margin-bottom: 4px; }
.qr-url-row input[type=text] { flex: 1; min-width: 0; padding: 6px 9px; font-size: 12.5px; }
.qr-warn {
    margin: 6px 0 0;
    padding: 6px 9px;
    border-radius: 7px;
    background: var(--warning-soft);
    color: #A8853F;
    font-size: 11.5px;
    line-height: 1.5;
}
.modal-body .qr-download { width: 100%; margin-top: 10px; }

/* QR 스타일 패널 */
details.qr-style { margin-top: 8px; }
details.qr-style > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    cursor: pointer;
    padding: 5px 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-sub);
    -webkit-user-select: none;
    user-select: none;
}
details.qr-style > summary::-webkit-details-marker { display: none; }
details.qr-style > summary::before { content: '▸'; font-size: 10px; transition: transform .15s; }
details.qr-style[open] > summary::before { transform: rotate(90deg); }
details.qr-style > summary:hover { color: var(--text); }
.qr-style-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    padding: 6px 0 2px;
}
.qr-style-grid label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-sub);
}
.qr-style-grid label.wide { grid-column: 1 / -1; }
.qr-style-grid label.chk {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    color: var(--text);
    cursor: pointer;
}
.qr-style-grid input[type=color] {
    width: 100%;
    height: 28px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    cursor: pointer;
}
.qr-style-grid input[type=checkbox] { width: auto; }
.qr-style-grid input[type=range] { width: 100%; accent-color: var(--primary); }
.qr-style-grid select { padding: 4px 7px; font-size: 12.5px; }
.qr-br-val { color: var(--active-text); font-weight: 700; }
details.qr-style .qr-reset { margin-top: 6px; }

/* ── 사이트 풋터 (사업자 정보 + 약관 링크 — layout/site_footer.php) ── */
.site-footer {
    margin-top: auto;
    padding: 16px 22px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    font-size: 12px;
    color: var(--text-sub);
    line-height: 1.8;
}
.site-footer .sf-links { margin-bottom: 4px; }
.site-footer .sf-links a { font-size: 12.5px; font-weight: 600; color: var(--btn2-text); }
.site-footer .sf-links a:hover { color: var(--active-text); }
.site-footer .sf-links a.strong { font-weight: 800; }
.site-footer .sf-links .sep { margin: 0 8px; color: var(--border); }
.site-footer .sf-info { display: flex; flex-wrap: wrap; }
.site-footer .sf-info span { white-space: nowrap; }
.site-footer .sf-info span + span::before { content: '|'; margin: 0 8px; color: var(--border); }
.site-footer .sf-copy { margin-top: 4px; font-size: 11px; opacity: .7; }

/* ── 약관·정책 문서 페이지 (terms.php · privacy.php) ── */
.doc-wrap { max-width: 860px; margin: 0 auto; padding: 26px 20px 60px; }
.doc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}
.doc-top img { height: 22px; width: auto; display: block; }
.doc-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    padding: 36px 38px;
}
.doc-card h1 { font-size: 21px; font-weight: 800; color: var(--deep-purple); margin-bottom: 4px; letter-spacing: -.02em; }
.doc-date { font-size: 12.5px; color: var(--text-sub); margin-bottom: 26px; }
.doc-card h2 { font-size: 15px; font-weight: 700; color: var(--deep-purple); margin: 26px 0 8px; }
.doc-card p, .doc-card li { font-size: 13.5px; line-height: 1.8; color: var(--text); }
.doc-card p { margin: 0 0 8px; }
.doc-card ol, .doc-card ul { padding-left: 22px; margin: 0 0 10px; }
.doc-card li { margin-bottom: 4px; }
.doc-card table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0 12px; }
.doc-card th, .doc-card td { border: 1px solid var(--border); padding: 7px 10px; text-align: left; vertical-align: top; }
.doc-card th { background: var(--bg); font-weight: 700; white-space: nowrap; }
.doc-xlink { text-align: center; margin-top: 14px; font-size: 12.5px; color: var(--text-sub); }
.doc-xlink a { font-weight: 600; }
@media (max-width: 640px) {
    .doc-card { padding: 26px 20px; }
}
@media print {
    .doc-top, .doc-xlink { display: none; }
    .doc-card { border: none; box-shadow: none; padding: 0; }
}

/* ── 반응형: 모바일은 사이드바 오버레이 ─────────── */
@media (max-width: 860px) {
    .sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        z-index: 100;
        margin-left: 0;
        transform: translateX(-105%);
        transition: transform .22s ease;
        box-shadow: var(--shadow-hover);
    }
    html.nav-hidden .sidebar { margin-left: 0; }
    html.nav-open .sidebar { transform: none; }
    .main { padding: 14px 12px 32px; }
    .topbar { padding: 0 12px; }
    .topbar .user span.hide-m { display: none; }
}

/* ══════════════════════════════════════════════════
   로딩 오버레이 — 브랜드 마크(보라 O) 둘레를 링이 돈다
   showLoading() / hideLoading() / setLoadingProgress() (admin.js)
   ══════════════════════════════════════════════════ */
.load-veil {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(40, 36, 58, .42);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .18s;
}
.load-veil.on { opacity: 1; pointer-events: auto; }

.load-box {
    background: var(--surface);
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(60, 52, 96, .28);
    padding: 30px 38px 26px;
    text-align: center;
    min-width: 260px; max-width: 90vw;
    transform: translateY(6px);
    transition: transform .2s cubic-bezier(.2,.8,.3,1);
}
.load-veil.on .load-box { transform: none; }

/* 마크 — 로고는 가만히 두고 링만 돈다 (로고가 돌면 글자가 뒤집혀 읽기 나쁘다) */
.load-mark { position: relative; width: 74px; height: 74px; margin: 0 auto 16px; }
.load-mark img {
    position: absolute; inset: 0; margin: auto;
    width: 38px; height: 38px; object-fit: contain;
    animation: load-pulse 1.6s ease-in-out infinite;
}
.load-ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 3px solid var(--primary-soft);
    border-top-color: var(--primary);
    border-right-color: var(--primary);
    animation: load-spin .85s linear infinite;
}
@keyframes load-spin  { to { transform: rotate(360deg); } }
@keyframes load-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.load-t { font-size: 16px; font-weight: 800; color: var(--deep-purple); letter-spacing: -.02em; }
.load-d { font-size: 13px; color: var(--text-sub); margin-top: 5px; line-height: 1.55; }

.load-bar {
    height: 6px; margin-top: 14px;
    background: var(--primary-soft); border-radius: 6px; overflow: hidden;
}
.load-bar i {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--primary), var(--deep-purple));
    border-radius: 6px;
    transition: width .3s ease;
}

/* 움직임을 불편해하는 사용자 — 회전 대신 은은한 명멸로 */
@media (prefers-reduced-motion: reduce) {
    .load-ring { animation: load-pulse 1.4s ease-in-out infinite; }
    .load-mark img { animation: none; }
}

/* 사이드바 메뉴 배지 — 홈페이지 문의 신규 건수 등 */
.nav-badge {
    display: inline-block;
    min-width: 17px;
    padding: 1px 5px;
    margin-left: 5px;
    background: var(--error);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    border-radius: 99px;
    vertical-align: 1px;
}

/* ── 브랜드 마크 (layout/_brand.php) ─────────────
   SVG 마크 + HTML 텍스트 워드마크. 글자를 SVG 에 넣으면 웹폰트를 못 써서
   기기마다 다른 서체로 보이므로, 마크만 이미지로 두고 글자는 여기서 조판한다. */
.brand-wm { display: inline-flex; align-items: center; gap: 8px; }
.brand-wm img { width: 22px; height: 22px; display: block; }
.brand-wm .wm {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--deep-purple);
    white-space: nowrap;
}
.brand-wm .wm b { font-weight: 800; }
.brand-wm.lg { gap: 11px; }
.brand-wm.lg img { width: 32px; height: 32px; }
.brand-wm.lg .wm { font-size: 21px; }