/*
 * 전역 디자인 토큰
 * ------------------------------------------------------------------
 * 프론트 테마와 관리자 화면이 함께 참조하는 단일 색·타이포 기준이다.
 * 테마 CSS(public/themes/{테마명}/css/style.css)는 이 파일 뒤에 로드되므로
 * 같은 변수를 다시 선언하면 테마 값이 이긴다 — 테마 교체 지점을 깨지 않는다.
 *
 * 색 값 옆 비율은 실측한 명도 대비다. KWCAG 2.2 / WCAG 1.4.3 기준
 * 본문 텍스트 4.5:1, 큰 텍스트·비텍스트 3:1 을 만족하는 값만 토큰이 된다.
 */
:root {
    /* ─── 브랜드 (테마가 재정의하는 지점) ───────────────── */
    --primary: #0d6efd;
    --dark:    #1e2a38;
    --danger:  #dc3545;

    /* ─── 표면 ──────────────────────────────────────────── */
    --surface-body:   #f1f3f5;
    --surface-raised: #fff;
    --border-subtle:  #e9ecef;
    --border-hairline:#f0f0f0;

    /* ─── 흰 배경 위 텍스트 ─────────────────────────────── */
    --text-strong: #212529; /* 16.1:1 */
    --text-body:   #333;    /* 12.6:1 */
    --text-muted:  #6c757d; /*  4.7:1 — AA 최소선. 이보다 옅게 내리지 않는다 */

    /* ─── 어두운 표면(--dark) 위 텍스트 ─────────────────── */
    --on-dark-strong: #fff;     /* 15.4:1 */
    --on-dark-body:   #a8b7c7; /*  7.1:1 */
    --on-dark-muted:  #7e93a6; /*  4.6:1 — 구 #5a7080 은 2.8:1 로 미달이었다 */
    --on-dark-raised: #2d3f54;
    --on-dark-danger: #ff6b6b; /*  5.2:1 — Bootstrap 기본 danger(#dc3545)는 3.2:1 로 미달이었다 */

    /* ─── 타이포 ────────────────────────────────────────── */
    --font-sans: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;

    /* 타이포 역할별 크기 — 모든 테마가 같은 값을 쓴다. 위계: 제목 > 메뉴 > 요약 > 메타.
       제목은 메뉴보다 한 단계만 크고, 요약은 제목보다 분명히 작다.
       메뉴(GNB·사이드바)와 우측 카테고리는 같은 역할이라 같은 크기를 쓴다. */
    --fs-list-title: 1.125rem;  /* 글 목록 제목 */
    --fs-summary:    .9375rem;  /* 글 목록 요약 */
    --fs-meta:       .8125rem;  /* 작성자·날짜 */
    --fs-nav:        1rem;      /* 상단/사이드 메뉴 1단계, 우측 카테고리 항목 */
    --fs-nav-sub:    .9375rem;  /* 하위 메뉴 */
    --fs-nav-label:  .8125rem;  /* 카테고리 섹션 제목·게시판 소제목 */
    --fs-board-title: var(--fs-nav); /* 게시판 목록·시리즈·태그 등 목록형 화면 제목은 메뉴와 같은 크기. 홈 목록 제목과는 별개 */
    --fs-post-title:  1.75rem;       /* 글 상세 제목 — 읽기 화면의 최상위 위계라 메뉴보다 분명히 크다 */

    /* ─── 레이아웃 ──────────────────────────────────────── */
    --sidebar-w: 240px;

    /* ─── 초점 표시 ─────────────────────────────────────── */
    /* 밝은 표면 기준값. 어두운 표면에서는 그 컨테이너가 재정의한다. */
    --focus-ring-color: #0a58ca; /* 흰 배경 대비 6.5:1 */
    --focus-ring-width: 3px;

    /* ─── Bootstrap 유틸리티 연결 ────────────────────────
       .bg-dark·.text-danger 같은 Bootstrap 유틸리티는 위 프로젝트 토큰이
       아니라 Bootstrap 자체 --bs-* 변수만 읽는다. 재정의하지 않으면 테마가
       --primary/--dark/--danger 를 바꿔도 이 클래스들은 Bootstrap 기본색
       그대로 남는다. .bg-*/.text-*/.border-* 계열은 rgba(var(--bs-x-rgb), 기회)
       형태라 RGB 삼중값이 따로 필요하다 — 위 hex 를 바꾸면 이 줄도 같은 색의
       R,G,B 로 함께 바꿔야 한다. */
    --bs-primary: var(--primary);
    --bs-primary-rgb: 13, 110, 253;
    --bs-dark: var(--dark);
    --bs-dark-rgb: 30, 42, 56;
    --bs-danger: var(--danger);
    --bs-danger-rgb: 220, 53, 69;
}

/* ─── Bootstrap 버튼 컴포넌트 연결 ─────────────────────────
   .btn-primary 등 버튼 컴포넌트는 --bs-btn-* 를 클래스 자체에 리터럴 hex 로
   구워(bake) 두므로 위 --bs-primary 재정의만으로는 닿지 않는다. hover/active
   음영은 테마가 어떤 색을 넣든 그대로 따라가도록 color-mix 로 계산한다. */
.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--primary) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--primary) 80%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--primary) 80%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--primary) 75%, black);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
}
.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-disabled-color: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}
.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: var(--danger);
    --bs-btn-hover-border-color: var(--danger);
    --bs-btn-active-bg: var(--danger);
    --bs-btn-active-border-color: var(--danger);
    --bs-btn-disabled-color: var(--danger);
    --bs-btn-disabled-border-color: var(--danger);
}

/* ─── 작은 버튼 터치 여유 ─────────────────────────────────
   표에 담긴 조작 버튼이 좁은 화면에서 뭉치지 않도록 최소 터치 여유를 준다.
   관리자·프론트가 함께 참조 — 한쪽에만 있으면 다른 쪽 .btn-sm 은 방치된다. */
.btn-sm { min-height: 32px; }
@media (max-width: 991.98px) {
    .btn-sm { min-height: 40px; display: inline-flex; align-items: center; }
}

/* ─── 좁은 화면에서 목록 표를 행 단위 카드로 쌓는다 ────────
   열이 많은 표를 가로로 긁게 만들면 운영자·방문자가 조작 버튼을 찾지 못한다.
   각 칸의 이름은 td 의 data-label 이 들고 있다. 관리자·프론트가 함께 참조. */
@media (max-width: 767.98px) {
    .table-stack thead { display: none; }
    .table-stack,
    .table-stack tbody,
    .table-stack tr,
    .table-stack td { display: block; width: 100%; }

    .table-stack tr {
        border: 1px solid var(--border-subtle);
        border-radius: .5rem;
        background: var(--surface-raised);
        padding: .25rem .75rem;
        margin-bottom: .75rem;
    }
    .table-stack td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        border: 0;
        padding: .45rem 0;
        /* 긴 이메일·제목이 카드를 밀어내지 않도록 줄바꿈을 허용한다 */
        min-width: 0;
        overflow-wrap: anywhere;
        text-align: right;
    }
    .table-stack td + td { border-top: 1px solid var(--border-hairline); }
    .table-stack td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: .75rem;
        font-weight: 600;
        color: var(--text-muted);
    }
    /* 이름이 없는 칸(배지·조작 버튼)은 레이블 자리를 만들지 않는다 */
    .table-stack td[data-label='']::before { content: none; }
    .table-stack td.cell-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: .35rem;
    }
}

/* ─── 초점 가시성 (KWCAG «초점 이동과 표시») ─────────────
   마우스 클릭에는 링을 띄우지 않고 키보드 이동에만 반응한다.       */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ─── 터치 기기 입력 크기 ────────────────────────────────
   iOS Safari 는 글자 16px 미만인 입력에 초점이 가면 화면을 강제로 확대하고
   되돌리지 않는다. 관리자 화면이 쓰는 form-control-sm 은 14px 이라 그대로
   두면 운영자가 폼을 채울 때마다 화면이 튄다.
   화면 폭이 아니라 포인터 종류로 판정한다 — 터치 노트북도 대상이다. */
@media (pointer: coarse) {
    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm {
        font-size: 16px;
    }
}

/* ─── 반복 영역 건너뛰기 (KWCAG «반복 영역 건너뛰기») ─────
   평소엔 화면 밖, 탭으로 도달하면 좌상단에 나타난다.
   display:none 이나 visibility:hidden 은 초점을 받지 못해 쓰지 않는다. */
.skip-link {
    position: absolute;
    top: 0;
    left: -9999px;
    z-index: 10000;
    padding: .65rem 1.1rem;
    background: var(--dark);
    color: var(--on-dark-strong);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 .375rem 0;
}
.skip-link:focus {
    left: 0;
}
.skip-link:focus-visible {
    outline-color: var(--on-dark-strong);
}


.board-table > :not(caption) > * > * {
    padding-block: .5rem;
}

/* ─── 게시판 목록 글자 크기 — 모든 테마 공통 ───────────────
 * 목록 글자가 메인(제목 1.25rem·요약 .9375rem·메타 .8125rem)과 상세 본문(1rem)보다
 * 작아 보였다. 목록 3종(표·블로그형·갤러리)을 메인 기준으로 맞춘다.
 */
.board-table th,
.board-table td {
    font-size: 1rem;
    vertical-align: middle;
}
.board-table th {
    font-size: var(--fs-meta);
}
.board-list-blog h2 {
    font-size: var(--fs-board-title);
    line-height: 1.45;
}
.board-view-title {
    font-size: var(--fs-board-title);
}
.board-list-blog .small {
    font-size: var(--fs-meta);
}
/* 요약 <p> 에도 Bootstrap .small 이 붙어 있어, 위 메타 규칙보다 구체적이어야 이긴다 */
.board-list-blog p.small {
    font-size: var(--fs-summary);
}
.board-list-gallery .small {
    font-size: 1rem;
}

/* ─── 시리즈(연재) 내비게이션 — 글 상세 상단 · 모든 테마 공통 ─────────── */
.series-nav {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    padding: .625rem .875rem;
    font-size: var(--fs-meta);
}
.series-nav > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .75rem;
    cursor: pointer;
}
.series-nav__label {
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--bs-secondary-color, #6c757d);
}
.series-nav__title {
    font-weight: 700;
    text-decoration: none;
}
.series-nav__pos {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}
.series-nav__list {
    margin: .75rem 0 0;
    padding-left: 1.5rem;
}
.series-nav__list li[aria-current="page"] {
    font-weight: 700;
}
.series-nav__list li[aria-current="page"] a {
    text-decoration: none;
}
.series-nav__pager {
    display: flex;
    gap: 1rem;
    margin-top: .75rem;
    padding-top: .625rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

/* ─── 글 상세 구획 — 제목 블록 / 보조 영역 / 본문 / 하단 흐름 · 모든 테마 공통 ───
   카드 상자 대신 여백과 가는 구분선으로 구획한다. */
.post-head {
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.post-title {
    font-size: var(--fs-post-title);
    line-height: 1.35;
    margin: 0 0 .625rem;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 0;
    font-size: var(--fs-meta);
    color: var(--text-muted);
}
.post-meta__item + .post-meta__item::before {
    content: "·";
    margin: 0 .5rem;
}
.post-share {
    display: inline-flex;
    gap: .125rem;
    margin-left: auto;
}
.post-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.125rem;
    text-decoration: none;
    transition: background-color .15s ease-out, color .15s ease-out;
}
.post-share__btn:hover,
.post-share__btn.is-copied {
    background: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--text-strong);
}
.post-aux {
    margin-bottom: 1rem;
}
.post-aux .series-nav {
    margin-top: 0;
}
.post-body {
    margin-bottom: 1.5rem;
}
.post-files {
    margin-top: 1.5rem;
    padding: .875rem 1rem;
    border-radius: .5rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
}
.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-top: 2rem;
}
.post-foot {
    margin-top: 1.5rem;
}
.post-section {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}
.post-section__title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 1rem;
}
.post-pager {
    padding-top: 0;
}
@media (max-width: 575.98px) {
    .post-title { font-size: 1.375rem; }
    .post-share { margin-left: 0; width: 100%; margin-top: .25rem; }
}


/* ─── 운영 영역 4종 구분색 (공연·입장·좌석·설문) ──────────
   한 화면에서 "지금 어느 기능인가"가 색으로 먼저 읽히도록 영역마다 색상을 하나씩 준다.
   --sect 는 흰 배경 위 글자·버튼 바탕, --sect-soft 는 옅은 면, --sect-ink 는 soft 위 글자.
   대비(실측): perf 6.87/8.46, att 5.39/7.13, seat 5.22/7.10, surv 7.05/8.36 — 모두 AA.
   색만으로 구분하지 않는다: 영역 이름 라벨과 아이콘을 함께 낸다. */
.sect[data-sect="performance"] { --sect: #3f51b5; --sect-soft: #e8ebfa; --sect-ink: #2c3a8c; }
.sect[data-sect="attendance"]  { --sect: #0b7a4b; --sect-soft: #e2f5ec; --sect-ink: #075c38; }
.sect[data-sect="seating"]     { --sect: #a35a00; --sect-soft: #fdf0dc; --sect-ink: #7a4300; }
.sect[data-sect="survey"]      { --sect: #a3206c; --sect-soft: #fbe6f1; --sect-ink: #7d1752; }

/* 영역 머리띠 — 아이콘 칩 + 영역명 + 제목 */
.sect-head { display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem; margin-bottom: 1.25rem;
             background: var(--sect-soft); border-radius: .75rem; color: var(--sect-ink); }
.sect-head__icon { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: .625rem;
                   background: var(--sect); color: #fff; font-size: 1.35rem; }
.sect-head__eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .06em; margin: 0; }
.sect-head h1 { margin: 0; color: var(--text-strong); }
.sect-head__desc { margin: .125rem 0 0; font-size: .875rem; color: var(--sect-ink); }
.sect-head__actions { margin-left: auto; }

/* 영역 안 구성요소가 영역색을 따른다 */
.sect .btn-primary { --bs-btn-bg: var(--sect); --bs-btn-border-color: var(--sect);
    --bs-btn-hover-bg: color-mix(in srgb, var(--sect) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--sect) 80%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--sect) 80%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--sect) 75%, black);
    --bs-btn-disabled-bg: var(--sect); --bs-btn-disabled-border-color: var(--sect); }
.sect .btn-outline-primary { --bs-btn-color: var(--sect); --bs-btn-border-color: var(--sect);
    --bs-btn-hover-bg: var(--sect); --bs-btn-hover-border-color: var(--sect);
    --bs-btn-active-bg: var(--sect); --bs-btn-active-border-color: var(--sect); }
.sect .card-header { background: var(--sect-soft); color: var(--sect-ink); border-bottom-color: transparent; }
.sect .list-group-item-action:hover, .sect .list-group-item-action:focus-visible { background: var(--sect-soft); color: var(--sect-ink); }
.sect .table > thead th { background: var(--sect-soft); color: var(--sect-ink); border-bottom-color: transparent; }
.sect a:not(.btn):not(.list-group-item) { color: var(--sect-ink); }
.sect .badge.text-bg-secondary { background-color: var(--sect-soft) !important; color: var(--sect-ink) !important; }

/* ─── 공연 허브: 업무 순서 4단계 + 관객 전달물 ───────────── */
.wf-steps { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); counter-reset: none; }
.wf-step { display: flex; gap: .75rem; padding: 1rem; background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: .75rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.wf-step__no { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--sect); color: #fff; font-weight: 700; }
.wf-step__body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .375rem; }
.wf-step__who { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--sect-ink); background: var(--sect-soft); padding: .125rem .5rem; border-radius: .375rem; }
.wf-step__title { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--text-strong); }
.wf-step__stat { margin: 0; font-size: .875rem; color: var(--text-body); }
.wf-shows { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: .375rem; }
.wf-shows li { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.wf-shows__name { flex: 1 1 100%; font-size: .875rem; font-weight: 600; color: var(--text-strong); }
.wf-audience { margin-bottom: 1rem; padding: 1rem; border: 1px dashed var(--text-muted); border-radius: .75rem; background: var(--surface-raised); }
.wf-audience__tag { margin-left: .5rem; font-size: .75rem; font-weight: 400; color: var(--text-muted); }
.wf-audience__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.wf-audience__list li { display: flex; flex-direction: column; gap: .125rem; font-size: .875rem; }
.wf-audience__list span { color: var(--text-muted); }

/* ─── 현장 모드(스캐너): 스태프가 한 손으로 급하게 쓴다 ───── */
.scan-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: 1rem; padding: .75rem 1rem; background: var(--sect-soft); border-radius: .75rem; }
.scan-bar__mode { font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--sect); padding: .25rem .625rem; border-radius: 50rem; }
.scan-bar h1 { flex: 1 1 12rem; color: var(--text-strong); }
.scan-bar__links { display: flex; gap: .5rem; }
.sect #scan-result { font-size: 1.5rem; font-weight: 700; padding: 1.25rem; text-align: center; }
.scan-fold { margin-bottom: 1rem; padding: .75rem 1rem; background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: .75rem; }
.scan-fold > summary { cursor: pointer; min-height: 2.5rem; display: flex; align-items: center; gap: .5rem; }
.scan-fold[open] > summary { margin-bottom: .75rem; }
.scan-audience { margin-top: 1.5rem; padding: 1rem; border: 1px dashed var(--text-muted); border-radius: .75rem; background: var(--surface-raised); }
.scan-audience__tag { margin: 0 0 .5rem; font-size: .75rem; font-weight: 700; color: var(--text-muted); }
@media (pointer: coarse) { .sect #scanner-root .btn, #scanner-root .btn { min-height: 44px; } }