@charset "UTF-8";
/* ============================================================================
   WORK VITAL 새 관리자 (admin.workvital.co.kr)            2026-09-18

   기준
   - 레이아웃·색·폰트: CheckON portal(admin/assets/css/portal.css)을 옮겨 왔다.
     네이비 사이드바(#2C3E50) + 틸 강조(#16A085), Roboto + Noto Sans KR.
   - 영역 구분: docs/DESIGN.md §4 「면으로 영역을 나누고, 선 굵기로 위계를 준다」.
     입력요소·버튼에는 항상 보이는 테두리, 표는 중립 그레이 줄무늬.
   - 글자 크기는 정수 px 로만 쓴다. 소수점 px 에서 한글이 뭉개진다 (DESIGN.md §2).
   - Metronic 을 쓰지 않는다. 기존 관리자(adm)의 style.bundle.css 와 섞이지 않게
     클래스 이름은 portal 체계(.portal-*, .btn, .card …)를 따른다.
   ============================================================================ */

:root {
    /* 브랜드 (portal) */
    --primary:        #2C3E50;
    --primary-dark:   #1A252F;
    --accent:         #16A085;
    --accent-dark:    #138D75;
    --accent-soft:    #E8F6F3;

    /* 면
       2026-09-18: 콘텐츠 박스(카드 헤더·표 헤더·표 줄무늬)의 회청색 배경이 초록빛으로 보인다는
       피드백으로 전부 흰색으로 바꿨다. 영역 구분은 배경색이 아니라 선으로만 한다.
       --surface-muted 는 배지·보조 칩처럼 작은 요소에만 쓴다. */
    /* 2026-09-18 피드백: 페이지 바탕이 초록빛으로 보여 흰색으로. 영역은 진한 테두리로 나눈다 */
    --body-bg:        #FFFFFF;
    --surface:        #FFFFFF;
    --surface-muted:  #F4F5F7;   /* 작은 칩·배지 배경 전용 */
    --surface-hover:  #F7F8FA;   /* 표 행 hover — 색 없이 아주 옅게 */

    /* 선 — 굵기로 위계 */
    --line:           #D8DDE4;   /* 기본 구분선·입력요소 테두리 */
    --card-line:      #C4CBD4;   /* 카드·박스 바깥 테두리 — 흰 바탕 위에서 영역을 나눈다 */
    --line-strong:    #B8C0CA;   /* 섹션 경계·표 헤더 밑줄(2px) */

    /* 글자 */
    --text-strong:    #1F2A36;
    --text:           #333333;
    --text-secondary: #555555;
    --text-muted:     #7A8290;

    /* 상태 */
    --success:        #16A085;
    --danger:         #E74C3C;
    --warning:        #F39C12;
    --info:           #1976D2;

    --radius:         6px;
    --radius-sm:      4px;
    --sidebar-width:  228px;
    --sidebar-collapsed: 60px;
    --topbar-height:  56px;

    --font: 'Roboto', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
    background: var(--body-bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
h1, h2, h3, h4 { margin: 0; color: var(--text-strong); }
p { margin: 0; }
svg { display: block; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================================
   레이아웃
   ============================================================================ */
.portal-layout { display: flex; min-height: 100vh; }

/* ---- 사이드바 ---------------------------------------------------------- */
.portal-sidebar {
    width: var(--sidebar-width);
    background: var(--primary);
    color: #FFFFFF;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: width .25s ease, transform .25s ease;
}

.sidebar-header {
    height: var(--topbar-height);
    padding: 0 14px 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.sidebar-brand {
    display: flex;
    align-items: baseline;
    gap: 6px;
    text-decoration: none;
    color: #FFFFFF;
    white-space: nowrap;
}
.sidebar-brand strong { font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: .04em; }
.sidebar-brand span   { font-size: 12px; font-weight: 400; color: var(--accent); }

.sidebar-toggle {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .08);
    border: 0; border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, .7);
    cursor: pointer;
    flex-shrink: 0;
}
.sidebar-toggle:hover { background: rgba(255, 255, 255, .16); color: #FFFFFF; }
.sidebar-toggle svg { width: 16px; height: 16px; }

.sidebar-nav { flex: 1; padding: 10px 0; overflow-y: auto; }

.nav-section { margin-bottom: 6px; }
.nav-section-title {
    padding: 10px 18px 6px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, .42);
    letter-spacing: .04em;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 18px 10px 15px;
    border: 0;
    border-left: 3px solid transparent;
    background: none;
    color: rgba(255, 255, 255, .74);
    text-decoration: none;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.nav-item:hover { background: rgba(255, 255, 255, .06); color: #FFFFFF; }
.nav-item.active { background: rgba(255, 255, 255, .1); color: #FFFFFF; border-left-color: var(--accent); }
.nav-item > svg { width: 17px; height: 17px; flex-shrink: 0; }
.nav-item > .nav-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item.is-disabled { cursor: default; color: rgba(255, 255, 255, .38); }
.nav-item.is-disabled:hover { background: none; }

.nav-arrow { width: 14px !important; height: 14px !important; opacity: .7; transition: transform .2s; }
.nav-group.open .nav-arrow { transform: rotate(180deg); }

.nav-submenu {
    display: none;
    margin: 2px 10px 8px 12px;
    padding: 4px 0;
    border-left: 2px solid rgba(22, 160, 133, .35);
    background: rgba(255, 255, 255, .05);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.nav-group.open .nav-submenu { display: block; }

.nav-subitem {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px 8px 14px;
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    font-size: 12px;
}
.nav-subitem:hover { color: #FFFFFF; background: rgba(22, 160, 133, .14); }
.nav-subitem.active { color: #FFFFFF; background: rgba(22, 160, 133, .22); }
.nav-subitem > .nav-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-subitem.is-disabled { color: rgba(255, 255, 255, .36); cursor: default; }
.nav-subitem.is-disabled:hover { background: none; }

/* 메뉴 표시: 기존 관리자로 연결 / 준비 중 */
.nav-tag {
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
    line-height: 16px;
}
.nav-tag.legacy { color: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .25); }
.nav-tag.soon   { color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .06); }

.sidebar-footer { padding: 12px 14px; border-top: 1px solid rgba(255, 255, 255, .1); flex-shrink: 0; }

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, .06);
    border-radius: var(--radius);
}
.sidebar-user-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
}
.sidebar-user-info { min-width: 0; }
.sidebar-user-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: 11px; color: rgba(255, 255, 255, .5); }

.sidebar-logout {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%;
    padding: 8px;
    background: rgba(255, 255, 255, .08);
    border: 0; border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, .75);
    font-size: 12px;
    cursor: pointer;
}
.sidebar-logout:hover { background: rgba(255, 255, 255, .16); color: #FFFFFF; }
.sidebar-logout svg { width: 14px; height: 14px; }

/* 접힘 */
.portal-sidebar.collapsed { width: var(--sidebar-collapsed); }
.portal-sidebar.collapsed .sidebar-brand,
.portal-sidebar.collapsed .nav-section-title,
.portal-sidebar.collapsed .nav-label,
.portal-sidebar.collapsed .nav-arrow,
.portal-sidebar.collapsed .nav-tag,
.portal-sidebar.collapsed .nav-submenu,
.portal-sidebar.collapsed .sidebar-user-info,
.portal-sidebar.collapsed .sidebar-logout span { display: none !important; }
.portal-sidebar.collapsed .sidebar-header { justify-content: center; padding: 0; }
.portal-sidebar.collapsed .nav-item { justify-content: center; padding: 12px 0; border-left-width: 0; }
.portal-sidebar.collapsed .nav-item > svg { width: 20px; height: 20px; }
.portal-sidebar.collapsed .sidebar-footer { padding: 12px 8px; }
.portal-sidebar.collapsed .sidebar-user { justify-content: center; padding: 6px 0; }

/* ---- 본문 --------------------------------------------------------------- */
.portal-main {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left .25s ease;
}
.portal-main.expanded { margin-left: var(--sidebar-collapsed); }

.portal-topbar {
    position: sticky; top: 0; z-index: 100;
    height: var(--topbar-height);
    padding: 0 28px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.topbar-breadcrumb b { color: var(--text-strong); font-weight: 500; }
.topbar-breadcrumb .sep { color: var(--line-strong); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.topbar-link { font-size: 12px; color: var(--text-secondary); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.topbar-link:hover { color: var(--accent); }
.topbar-link svg { width: 13px; height: 13px; }

.mobile-menu-btn {
    display: none;
    width: 34px; height: 34px;
    align-items: center; justify-content: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.mobile-menu-btn svg { width: 18px; height: 18px; }

.portal-container { flex: 1; width: 100%; max-width: 1440px; padding: 24px 28px 32px; }

.portal-footer { padding: 16px 28px 20px; font-size: 11px; color: var(--text-muted); }

/* 페이지 제목 */
.page-header {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
    margin-bottom: 20px;
}
.page-title { font-size: 20px; font-weight: 700; line-height: 1.4; }
.page-desc  { margin-top: 4px; font-size: 13px; color: var(--text-muted); }
.page-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ============================================================================
   컴포넌트
   ============================================================================ */

/* ---- 카드 --------------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--card-line);
    border-radius: var(--radius);
}
.card + .card { margin-top: 20px; }
.card-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 56px;
    padding: 12px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius) var(--radius) 0 0;
}
.card-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; }
.card-title small { font-size: 12px; font-weight: 400; color: var(--text-muted); }
/* 카드 제목 앞 아이콘: 선 아이콘을 테두리 타일에 담는다 */
.card-title-icon {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--primary);
    flex-shrink: 0;
}
.card-title-icon svg { width: 16px; height: 16px; }
/* 남색 카드 헤더 — 목록·패널의 머리 (2026-09-18 디자인 패턴). 문항·카테고리 화면 헤더와 같은 색 */
.card-header.is-dark { background: var(--primary); border-bottom-color: var(--primary); border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.card-header.is-dark .card-title { color: #FFFFFF; }
.card-header.is-dark .card-title small { color: rgba(255, 255, 255, .7); }
.card-header.is-dark .card-title-icon { border-color: rgba(255, 255, 255, .3); color: #FFFFFF; }
.card-header.is-dark .inline-select { color: rgba(255, 255, 255, .75); }
.card-header.is-dark .btn-outline { background: transparent; border-color: rgba(255, 255, 255, .4); color: #FFFFFF; }
.card-header.is-dark .btn-outline:hover { background: rgba(255, 255, 255, .12); border-color: #FFFFFF; }
.card-note { margin-top: 14px; font-size: 12px; color: var(--text-muted); }
.card-body { padding: 20px; }
.card-body.flush { padding: 0; }

/* ---- 지표 카드 ----------------------------------------------------------
   아이콘 타일 + 숫자 + 보조 지표 한 줄. 윗변에만 색 띠를 두르는 방식은 쓰지 않는다.
   강조가 필요한 카드(.is-featured)는 테두리 전체를 강조색으로 두르고,
   상태를 알릴 때만 모서리 리본(.kpi-ribbon)을 단다. */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi {
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; gap: 16px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--card-line);
    border-radius: 10px;
}
.kpi-icon {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    color: var(--primary);
    background: var(--surface);
}
.kpi-icon svg { width: 24px; height: 24px; stroke-width: 1.75; }
.kpi-body { display: flex; flex-direction: column; min-width: 0; }
.kpi-label { font-size: 13px; color: var(--text-secondary); }
.kpi-value {
    margin-top: 2px;
    font-family: 'Roboto', sans-serif; font-size: 28px; font-weight: 700; line-height: 1.2;
    color: var(--text-strong); font-variant-numeric: tabular-nums;
}
.kpi-value small { margin-left: 3px; font-family: var(--font); font-size: 13px; font-weight: 400; color: var(--text-muted); }
.kpi-sub {
    margin-top: 6px; padding-top: 6px;
    border-top: 1px dashed var(--line);
    font-size: 12px; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.kpi.is-featured { border: 2px solid var(--accent); padding: 19px; }
.kpi.is-featured .kpi-icon { border-color: var(--accent); color: var(--accent-dark); }
.kpi.is-featured .kpi-value { color: var(--accent-dark); }

/* 모서리 리본 — 오른쪽 위에 45° 로 걸친다 */
.kpi-ribbon {
    position: absolute;
    top: 14px; right: -34px;
    width: 120px;
    padding: 3px 0;
    transform: rotate(45deg);
    background: var(--accent);
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .12em;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

/* ---- 진행 막대 (여러 구간) ---------------------------------------------- */
.progress-stack {
    display: flex; gap: 3px;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface-muted);
}
.progress-stack span { display: block; height: 100%; min-width: 0; }
.progress-stack span:first-child { border-radius: 6px 0 0 6px; }
.progress-stack span:last-child { border-radius: 0 6px 6px 0; }
.seg-new    { background: var(--accent); }
.seg-legacy { background: var(--primary); opacity: .55; }
.seg-soon   { background: #D5DAE1; }
.progress-legend {
    display: flex; flex-wrap: wrap; gap: 8px 20px;
    margin: 12px 0 0; padding: 0; list-style: none;
    font-size: 13px; color: var(--text-secondary);
}
.progress-legend li { display: flex; align-items: center; gap: 6px; }
.progress-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.progress-legend b { color: var(--text-strong); font-family: 'Roboto', sans-serif; }
.nav-tag-sample {
    display: inline-block; padding: 0 6px;
    border: 1px solid var(--line-strong); border-radius: 3px;
    font-size: 11px; color: var(--text-secondary);
}

/* ---- 버튼 --------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-accent  { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.btn-accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
/* 보조 버튼도 테두리를 보이게 한다 — 테두리 없는 버튼이 화면을 떠 보이게 했다 (DESIGN.md §4) */
.btn-outline { background: var(--surface); border-color: var(--line-strong); color: var(--text-secondary); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger  { background: var(--danger); border-color: var(--danger); color: #FFFFFF; }
.btn-sm { height: 30px; padding: 0 10px; font-size: 12px; }
.btn-lg { height: 46px; padding: 0 20px; font-size: 15px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: default; }

/* ---- 폼 ----------------------------------------------------------------- */
.form-group { margin-bottom: 16px; }
.form-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.form-control, .form-select {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    transition: border-color .15s, box-shadow .15s;
}
.form-control::placeholder { color: #A3AAB5; }
.form-control:focus, .form-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(22, 160, 133, .14);
}
.form-control.is-invalid { border-color: var(--danger); }
.input-group { position: relative; }
.input-group .form-control { padding-right: 42px; }
.input-addon {
    position: absolute; top: 0; right: 0;
    width: 40px; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0;
    color: var(--text-muted); cursor: pointer;
}
.input-addon:hover { color: var(--primary); }
.input-addon svg { width: 17px; height: 17px; }

/* ---- 표 ----------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
/* 칸은 줄바꿈하지 않고 .table-wrap 안에서 가로 스크롤한다. 좁은 화면에서 「조직/문화/진단」처럼
   한 글자씩 세로로 쪼개지는 것을 막는다. 긴 제목 칸(.col-main)만 줄바꿈을 허용한다. */
.table th, .table td { padding: 11px 14px; text-align: left; font-size: 13px; vertical-align: middle; white-space: nowrap; }
.table td.col-main { white-space: normal; min-width: 160px; }
/* 표 헤더·행 모두 흰 배경. 헤더는 2px 밑줄, 행은 1px 구분선으로만 나눈다 */
.table thead th {
    background: var(--surface);
    border-bottom: 2px solid var(--line-strong);
    color: var(--text-muted);
    font-size: 12px; font-weight: 500;
    white-space: nowrap;
}
.table tbody td { border-bottom: 1px solid var(--line); color: var(--text-secondary); background: var(--surface); }
.table tbody tr:hover td { background: var(--surface-hover); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .col-main { color: var(--text-strong); font-weight: 500; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .center { text-align: center; }

/* ---- 배지·알림 ---------------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px; font-weight: 500; line-height: 18px;
    white-space: nowrap;
}
.badge-success { background: var(--accent-soft); color: var(--accent-dark); }
.badge-warning { background: #FFF6E5; color: #B26B00; }
.badge-danger  { background: #FDECEA; color: #C0392B; }
.badge-muted   { background: var(--surface-muted); color: var(--text-muted); }

.alert {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid;
    font-size: 13px;
}
.alert svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.alert-danger  { background: #FDECEA; border-color: #F5C2BC; color: #B03A2E; }
.alert-success { background: var(--accent-soft); border-color: #A9DCD0; color: var(--accent-dark); }
.alert-info    { background: #EAF2FB; border-color: #BDD6F0; color: #1D5A99; }

.empty-state { padding: 48px 20px; text-align: center; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty-icon {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed var(--line-strong); border-radius: 16px;
    color: var(--text-muted);
}
.empty-icon svg { width: 26px; height: 26px; stroke-width: 1.75; }

.badge-primary { background: #EAEEF3; color: var(--primary); }

.card-footer { padding: 14px 20px; border-top: 1px solid var(--line); }

.topbar-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.topbar-breadcrumb a:hover { color: var(--accent); }

/* ============================================================================
   목록 화면
   ============================================================================ */

/* ---- 검색 바: 라벨을 입력칸 위에 두고 한 줄로 흐른다 ------------------- */
.filter-card { margin-bottom: 20px; }
.filter-bar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 16px;
    padding: 16px 20px;
}
.filter-field { display: flex; flex-direction: column; min-width: 150px; }
.filter-field .form-label { margin-bottom: 6px; font-size: 12px; color: var(--text-muted); }
.filter-grow { flex: 1 1 280px; }
.filter-actions { display: flex; gap: 8px; margin-left: auto; }

.input-icon { position: relative; }
.input-icon > svg {
    position: absolute; top: 50%; left: 12px;
    width: 16px; height: 16px; transform: translateY(-50%);
    color: var(--text-muted); pointer-events: none;
}
.input-icon .form-control { padding-left: 36px; }

.inline-select { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.form-select-sm { height: 30px; width: auto; padding: 0 28px 0 10px; font-size: 12px; }

/* select 화살표 (브라우저 기본 모양 제거 후 직접 그림) */
.form-select {
    appearance: none; -webkit-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8290' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    cursor: pointer;
}

/* ---- 페이지네이션 ------------------------------------------------------- */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pagination-info { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pagination-pages { display: flex; align-items: center; gap: 4px; }
.page-btn {
    min-width: 32px; height: 32px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-secondary); text-decoration: none;
    font-family: 'Roboto', sans-serif; font-size: 13px;
}
a.page-btn:hover { border-color: var(--primary); color: var(--primary); }
.page-btn.is-current { background: var(--primary); border-color: var(--primary); color: #FFFFFF; font-weight: 500; }
.page-btn.is-disabled { color: #C2C8D0; cursor: default; }

/* 아직 못 쓰는 단추 — 지우지 않고 왜 못 누르는지 보이게 둔다 */
.btn.is-disabled {
    color: var(--text-muted); background: var(--surface-muted); border-color: var(--line);
    cursor: default; opacity: .85;
}
.btn.is-disabled small { font-weight: 400; opacity: .8; margin-left: 2px; }
.page-gap { padding: 0 4px; color: var(--text-muted); }

/* ---- 표 안의 조합 칸 ---------------------------------------------------- */
.company-cell { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.company-cell:hover b { color: var(--accent-dark); text-decoration: underline; }
.company-logo {
    position: relative;
    width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
}
.company-logo img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; background: var(--surface); }
.company-initial { font-size: 15px; font-weight: 700; color: var(--primary); }
.company-text { display: flex; flex-direction: column; min-width: 0; }
.company-text b { font-weight: 500; color: var(--text-strong); }
.company-text small { font-size: 12px; color: var(--text-muted); }

.cell-2line { display: flex; flex-direction: column; gap: 2px; }
.cell-2line small { font-size: 12px; color: var(--text-muted); }
.cell-2line.align-right { align-items: flex-end; }
.table-members td { padding-top: 12px; padding-bottom: 12px; }
.table-members th, .table-members td { padding-left: 12px; padding-right: 12px; }

/* ============================================================================
   입력 폼 화면
   ============================================================================ */
.form-layout { display: flex; flex-direction: column; gap: 20px; }
.form-layout .card + .card { margin-top: 0; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid[hidden] { display: none; }
.form-field { min-width: 0; }
.span-2 { grid-column: span 2; }
.req-mark { color: var(--danger); font-weight: 700; }
.field-help, .field-error, .field-warn { margin-top: 8px; font-size: 12px; line-height: 1.55; }
.field-help  { color: var(--text-secondary); }
.field-error { color: #C0392B; }
.field-warn  { color: #B26B00; }
.form-select.is-invalid { border-color: var(--danger); }

.textarea { height: auto; min-height: 100px; padding: 10px 12px; line-height: 1.6; resize: vertical; }
.field-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 6px; }
.field-foot .field-error { margin-top: 0; }
.char-count { font-size: 12px; color: var(--text-muted); font-family: 'Roboto', sans-serif; white-space: nowrap; }

/* ---- 이미지 업로드 ------------------------------------------------------ */
.dropzone {
    display: flex; align-items: center; gap: 16px;
    padding: 16px;
    border: 1px dashed var(--line-strong); border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.is-dragover { border-color: var(--accent); background: #FBFDFC; }
.dropzone.is-invalid { border-color: var(--danger); }
.dropzone-preview, .dropzone-empty {
    width: 88px; height: 64px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface);
    overflow: hidden;
}
.dropzone-preview[hidden], .dropzone-empty[hidden] { display: none; }
.dropzone-preview img { max-width: 80px; max-height: 56px; object-fit: contain; }
.dropzone-empty { color: var(--text-muted); }
.dropzone-empty svg { width: 26px; height: 26px; stroke-width: 1.5; }
.dropzone-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dropzone-text b { font-weight: 500; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone-text small { font-size: 12px; color: var(--text-muted); }
.dropzone-btn { pointer-events: none; }

/* ---- 선택 카드 (라디오) ------------------------------------------------- */
.choice-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* 요금제 4종 (2026-10-15). 넷을 한 줄에 세우면 설명이 두 글자씩 끊겨 두 줄 두 칸으로 둔다 */
.choice-cards.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1400px) { .choice-cards.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.choice-card { position: relative; display: block; cursor: pointer; }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-body {
    display: flex; flex-direction: column; gap: 4px;
    padding: 16px 16px 16px 46px;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--surface);
    transition: border-color .15s, box-shadow .15s;
}
.choice-body::before {
    content: '';
    position: absolute; left: 16px; top: 18px;
    width: 16px; height: 16px;
    border: 1.5px solid var(--line-strong); border-radius: 50%;
    background: var(--surface);
}
.choice-body b { font-size: 14px; color: var(--text-strong); }
.choice-body b small { margin-left: 4px; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.choice-body > span { font-size: 12px; color: var(--text-muted); }
.choice-card:hover .choice-body { border-color: var(--primary); }
.choice-card input:checked + .choice-body { border: 2px solid var(--accent); padding: 15px 15px 15px 45px; }
.choice-card input:checked + .choice-body::before { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--surface); background: var(--accent); left: 15px; top: 17px; }
.choice-card input:focus-visible + .choice-body { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- 저장 바: 화면 아래 고정 ------------------------------------------- */
.form-actions {
    position: sticky; bottom: 0; z-index: 50;
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    margin: 20px -28px -32px;
    padding: 14px 28px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 12px rgba(31, 42, 54, .04);
}
.form-actions-hint { margin-right: auto; font-size: 12px; color: var(--text-muted); }

/* ============================================================================
   로그인 — 기존 관리자(adm) 로그인 화면의 배치를 따른다
   (왼쪽 입력 폼 · 오른쪽 브랜드 패널과 좌측으로 꺾인 도형)
   ============================================================================ */
.auth-page { display: flex; min-height: 100vh; background: var(--surface); }

.auth-form-side {
    flex: 1 1 50%;
    display: flex; align-items: center; justify-content: center;
    padding: 48px 24px;
}
.auth-form { width: 100%; max-width: 400px; }
.auth-brand-mark { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-bottom: 14px; color: var(--primary); }
.auth-brand-mark strong { font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .08em; }
.auth-brand-mark span { font-size: 12px; color: var(--accent); }
.auth-title { font-size: 26px; font-weight: 700; text-align: center; color: var(--text-strong); }
.auth-desc  { margin: 8px 0 36px; text-align: center; font-size: 13px; color: var(--text-muted); }
.auth-form .form-group { margin-bottom: 20px; }
.auth-form .form-label { font-size: 14px; }
.auth-form .form-control { height: 46px; font-size: 14px; }
.auth-form .alert { margin-bottom: 20px; }
.auth-foot { margin-top: 28px; text-align: center; font-size: 12px; color: var(--text-muted); }

.auth-brand-side {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
    background: var(--surface);
}
.auth-shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.auth-brand-content {
    position: relative; z-index: 1;
    height: 100%;
    padding: 48px 48px 48px 22%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
    color: #FFFFFF; text-align: center;
}
.auth-brand-content img { height: 44px; width: auto; }
.auth-brand-content h2 { color: #FFFFFF; font-size: 28px; font-weight: 700; line-height: 1.4; }
.auth-brand-content p { font-size: 14px; color: rgba(255, 255, 255, .72); line-height: 1.7; }

/* ============================================================================
   카테고리 관리 — 네 칸 탐색 화면 (2026-09-18)
   ============================================================================ */
/* 위쪽 요약 — 문항 화면 상단 카드(.qa-stat)를 그대로 쓴다 */
.cat-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.qa-stat.is-static { cursor: default; }
.qa-stat.is-static:hover { border-color: var(--card-line); }
.qa-stat.is-caution .qa-stat-icon { color: #B35A00; }
.qa-stat.is-caution b { color: #B35A00; }
.cat-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 0 4px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.cat-toggle input { width: 15px; height: 15px; margin: 0; accent-color: var(--primary); }

.cat-card { overflow: hidden; }

.cat-pathbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    min-height: 56px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--line);
}
.cat-path { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.cat-path-empty { font-size: 13px; color: var(--text-muted); }
.cat-path-sep { color: var(--line-strong); font-size: 16px; }
.cat-path-item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px;
    background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
    cursor: pointer;
}
.cat-path-item:hover { border-color: var(--line); }
.cat-path-item small {
    padding: 1px 6px;
    border: 1px solid var(--line); border-radius: 3px;
    font-size: 11px; color: var(--text-muted);
}
.cat-path-item b { font-size: 14px; font-weight: 700; color: var(--text-strong); }
.cat-path-item:last-child b { color: var(--primary); }
.cat-path-stats { font-size: 12px; color: var(--text-muted); }

.cat-browser { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cat-col { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--line); }
.cat-col:last-child { border-right: 0; }
.cat-col-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}
/* 단계 헤더 — 문항·답변 관리 패널 헤더와 같은 남색 바탕 (2026-09-18) */
.cat-col-head { align-items: center; min-height: 52px; background: var(--primary); border-bottom-color: var(--primary); }
.cat-col + .cat-col .cat-col-head { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .14); }
.cat-col-head h2 { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: #FFFFFF; }
.cat-col-head .card-title-icon { border-color: rgba(255, 255, 255, .3); color: #FFFFFF; }
.cat-col-count { font-family: 'Roboto', sans-serif; font-size: 12px; color: rgba(255, 255, 255, .7); }

.cat-list {
    flex: 1;
    margin: 0; padding: 6px;
    list-style: none;
    height: 480px; overflow-y: auto;
}
.cat-list[hidden] { display: none; }
.cat-col-empty {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    height: 480px;
    padding: 20px;
    font-size: 13px; color: var(--text-muted); text-align: center;
}
.cat-col-empty[hidden] { display: none; }

.cat-row {
    display: flex; align-items: center; gap: 6px;
    height: 38px;
    padding: 0 8px 0 2px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 13px; color: var(--text);
    cursor: pointer;
    user-select: none;
}
.cat-row + .cat-row { margin-top: 2px; }
.cat-row:hover { background: var(--surface-hover); }
.cat-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cat-row.is-selected { background: #EDF0F4; border-color: #C9D2DD; }
.cat-row.is-selected .cat-name { font-weight: 700; color: var(--primary); }
.cat-row.is-empty .cat-name { color: var(--text-muted); }
.cat-row.is-dragging { opacity: .4; }
.cat-row.is-editing { background: var(--surface); border-color: var(--line); cursor: default; }

.cat-grip {
    display: inline-flex; flex-shrink: 0;
    width: 16px;
    color: #B7BEC8;
    cursor: grab;
    opacity: 0;
}
.cat-grip svg { width: 16px; height: 16px; }
.cat-row:hover .cat-grip, .cat-row:focus .cat-grip, .cat-row.is-selected .cat-grip { opacity: 1; }
.cat-grip:active { cursor: grabbing; }

.cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-edit-input { flex: 1; min-width: 0; height: 30px; padding: 0 8px; font-size: 13px; }

.cat-meta { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cat-qn {
    min-width: 26px;
    font-family: 'Roboto', sans-serif; font-size: 12px; color: var(--text-muted);
    text-align: right; font-variant-numeric: tabular-nums;
}
.cat-lock { display: inline-flex; color: var(--primary); opacity: .6; }
.cat-lock svg { width: 13px; height: 13px; }

.cat-actions { display: none; gap: 4px; flex-shrink: 0; }
.cat-row:hover .cat-actions, .cat-row:focus-within .cat-actions, .cat-row.is-selected .cat-actions { display: inline-flex; }
.cat-row.is-editing .cat-actions, .cat-row.is-editing .cat-meta, .cat-row.is-editing .cat-grip { display: none; }
.cat-act {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0;
    background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
}
.cat-act svg { width: 13px; height: 13px; }
.cat-act:hover { border-color: var(--primary); color: var(--primary); }
.cat-act.is-danger:hover { border-color: var(--danger); color: var(--danger); }

.cat-chev { display: inline-flex; flex-shrink: 0; width: 14px; color: #A3AAB5; }
.cat-chev svg { width: 14px; height: 14px; }
.cat-row.is-selected .cat-chev { color: var(--primary); }

.cat-add { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--line); }
.cat-add[hidden] { display: none; }
.cat-add .form-control { height: 34px; font-size: 13px; }
.cat-add .btn { width: 34px; height: 34px; padding: 0; flex-shrink: 0; }

/* 영역을 쓰는 진단 (2026-09-18) */
.qa-tree-filter { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.qa-tree-filter .form-select { width: 100%; }
.qa-tree-note { padding: 10px; line-height: 1.6; }
a.dg-area-link { text-decoration: none; }
a.dg-area-link:hover { border-color: var(--primary); color: var(--primary); }
.cat-diag-tag { flex-shrink: 0; padding: 0 5px; border: 1px solid #C9D2DD; border-radius: 3px; font-size: 10px; line-height: 16px; color: var(--primary); white-space: nowrap; }
.cat-diag-tag.is-none { border-color: #F2D2A9; color: #B35A00; }
.cat-diagbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 20px; border-bottom: 1px solid var(--line); font-size: 12px; }
.cat-diagbar[hidden] { display: none; }
.cat-diagbar-label { margin-right: 4px; font-weight: 500; color: var(--text-secondary); }
.cat-diagbar-none { color: #B35A00; }
.cat-diag-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 10px; background: var(--primary); border-radius: 12px; color: #FFFFFF; font-weight: 500; }
.cat-diag-chip small { font-family: 'Roboto', sans-serif; font-size: 10px; font-weight: 400; color: rgba(255, 255, 255, .7); }
.cat-diagbar-btn { margin-left: auto; }
.cat-diag-picks { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.cat-diag-picks .dg-pick { width: 100%; }

.cat-help {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--line);
    font-size: 12px; line-height: 1.6; color: var(--text-muted);
}
.cat-help svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; }

/* ---- 확인 창 · 알림 (공통) ---------------------------------------------- */
.wv-dialog {
    width: min(440px, calc(100vw - 32px));
    /* 창이 화면보다 길어지면 안쪽에서 스크롤한다 (2026-09-29). 닫힌 창은 브라우저가 숨기므로 [open] 에만 flex 를 준다 */
    max-height: calc(100vh - 40px);
    padding: 0;
    border: 1px solid var(--line); border-radius: 8px;
    color: var(--text);
    box-shadow: 0 12px 40px rgba(15, 23, 32, .18);
}
.wv-dialog::backdrop { background: rgba(15, 23, 32, .45); }
.wv-dialog[open] { display: flex; flex-direction: column; }
.wv-dialog[open] > form { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 40px); width: 100%; }
.wv-dialog-title { padding: 20px 24px 0; font-size: 16px; font-weight: 700; flex: none; }
.wv-dialog-body { padding: 12px 24px 4px; font-size: 13px; line-height: 1.7; color: var(--text-secondary); overflow-y: auto; min-height: 0; }
.wv-dialog-body p + p { margin-top: 6px; }
.wv-dialog-list {
    margin: 10px 0 0; padding: 8px 12px 8px 28px;
    max-height: 160px; overflow-y: auto;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-size: 12px;
}
.wv-dialog-list .is-more { list-style: none; margin-left: -16px; color: var(--text-muted); }
.wv-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px 20px; flex: none; }
.wv-dialog-actions [hidden] { display: none; }

.wv-toast {
    position: fixed; left: 50%; bottom: 28px; z-index: 1000;
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
    padding: 10px 16px;
    background: var(--primary); color: #FFFFFF;
    border-radius: var(--radius);
    font-size: 13px;
    box-shadow: 0 6px 20px rgba(15, 23, 32, .2);
}
.wv-toast[hidden] { display: none; }
.wv-toast.is-error { background: #C0392B; }

@media (max-width: 1100px) {
    .cat-browser { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cat-col:nth-child(2) { border-right: 0; }
    .cat-col:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .cat-list, .cat-col-empty { height: 360px; }
}
@media (max-width: 700px) {
    .cat-browser { grid-template-columns: 1fr; }
    .cat-col { border-right: 0; border-bottom: 1px solid var(--line); }
    .cat-col:last-child { border-bottom: 0; }
    .cat-list, .cat-col-empty { height: auto; max-height: 320px; min-height: 80px; }
    .cat-toggle { margin-left: 0; padding: 8px 14px 0; }
    .cat-actions { display: inline-flex; }
    .cat-grip { display: none; }
}

/* ============================================================================
   문항·답변 관리 — 분류 · 목록 · 편집 세 칸 (2026-09-18)
   ============================================================================ */
.qa-summary { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.qa-stat {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px 12px 12px;
    background: var(--surface);
    border: 1px solid var(--card-line); border-radius: var(--radius);
    text-align: left;
    cursor: pointer;
}
.qa-stat-icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 38px; height: 38px;
    border: 1px solid var(--line); border-radius: 8px;
    color: var(--primary);
}
.qa-stat-icon svg { width: 18px; height: 18px; stroke-width: 1.75; }
.qa-stat-text { display: flex; flex-direction: column; gap: 1px; }
.qa-stat-text span { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.qa-stat b { font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.qa-stat:hover { border-color: var(--line-strong); }
/* 선택된 필터 카드 — 대시보드 강조 카드와 같은 방식(테두리 전체 강조색) */
.qa-stat.is-active { border: 2px solid var(--accent); padding: 11px 19px 11px 11px; }
.qa-stat.is-active .qa-stat-icon { border-color: var(--accent); color: var(--accent-dark); }
.qa-stat.is-active:not(.is-warn) b { color: var(--accent-dark); }
.qa-stat.is-warn b { color: #C0392B; }

.qa-layout {
    display: grid;
    /* 2026-09-18 피드백: 목록은 줄이고 오른쪽 편집(선택지 입력)을 넓게 */
    grid-template-columns: 240px minmax(0, 1fr) minmax(560px, 1.1fr);
    gap: 16px;
    align-items: start;
}
.qa-layout .card + .card { margin-top: 0; }

.qa-pane-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: 52px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
}
.qa-pane-head h2 { font-size: 14px; font-weight: 700; }
.qa-pane-title { display: flex; align-items: center; gap: 10px; }
.qa-pane-title small { font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.card-title-icon.sm { width: 26px; height: 26px; border-radius: 6px; }
.card-title-icon.sm svg { width: 14px; height: 14px; }
.qa-pane-sub { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); }
.qa-unset-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #E67E22; }
.qa-muted { font-size: 12px; color: var(--text-muted); }
.qa-muted + .qa-muted { margin-top: 4px; }

/* 분류 트리 */
.qa-tree-card { position: sticky; top: 72px; max-height: calc(100vh - 88px); display: flex; flex-direction: column; }
.qa-tree { flex: 1; overflow-y: auto; padding: 6px; }
.qa-tree-list { margin: 0; padding: 0; list-style: none; }
.qa-tree-list .qa-tree-list { padding-left: 12px; }
.qa-node {
    display: flex; align-items: center; gap: 4px;
    width: 100%; min-height: 32px;
    padding: 4px 8px 4px 2px;
    background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
    font-size: 13px; color: var(--text); text-align: left;
    cursor: pointer;
}
.qa-node:hover { background: var(--surface-hover); }
.qa-node.is-active { background: #EDF0F4; border-color: #C9D2DD; }
.qa-node.is-active .qa-node-name { font-weight: 700; color: var(--primary); }
.qa-node.is-empty .qa-node-name { color: var(--text-muted); }
.qa-node-root { padding-left: 10px; margin-bottom: 4px; font-weight: 500; }
.qa-level-1 .qa-node-name { font-weight: 500; }
.qa-node-twisty { display: inline-flex; flex-shrink: 0; width: 16px; color: #A3AAB5; transition: transform .15s; }
.qa-node-twisty svg { width: 14px; height: 14px; }
.qa-node-twisty.is-open { transform: rotate(90deg); }
.qa-node-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-node-count { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-family: 'Roboto', sans-serif; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.qa-unset {
    min-width: 18px; padding: 0 5px;
    border-radius: 9px;
    background: #FDF0E4; color: #B35A00;
    font-style: normal; font-size: 11px; line-height: 18px; text-align: center;
}

/* 목록 */
.qa-toolbar { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.qa-search { flex: 1 1 240px; }
.qa-toolbar .form-select { width: auto; min-width: 120px; }
.qa-search { min-width: 180px; }
.qa-filterline[hidden] { display: none; }
.qa-filterline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 12px; }
.qa-result { color: var(--text-secondary); font-weight: 500; }
/* 걸려 있는 분류 조건 — 채운 칩(남색 바탕·흰 글씨). 초록 테두리는 선택 카드에만 쓴다 */
.qa-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px; padding: 0 8px 0 12px;
    background: var(--primary); border: 1px solid var(--primary); border-radius: 13px;
    font-size: 12px; font-weight: 500; color: #FFFFFF; cursor: pointer;
}
.qa-chip svg { width: 13px; height: 13px; opacity: .75; }
.qa-chip:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.qa-chip:hover svg { opacity: 1; }
.qa-filterline .qa-result { color: var(--text-muted); font-weight: 400; }

.qa-bulkbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    background: #F3F6FA;
    font-size: 13px;
}
.qa-bulkbar[hidden] { display: none; }
.qa-bulkbar b { color: var(--primary); margin-right: 4px; }

.qa-table th, .qa-table td { white-space: normal; }
.qa-col-check { width: 40px; text-align: center !important; padding-left: 16px !important; padding-right: 0 !important; }
.qa-col-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--primary); vertical-align: middle; }
.qa-col-no { width: 60px; font-family: 'Roboto', sans-serif; font-size: 12px !important; color: var(--text-muted) !important; font-variant-numeric: tabular-nums; }
.qa-col-type { width: 150px; }
.qa-col-type .qa-flags { margin-top: 6px; }
.qa-row { cursor: pointer; }
.qa-row td { vertical-align: top !important; }
.qa-row.is-checked td { background: #F6F8FB; }
.qa-row.is-current td { background: #EDF0F4; }
.qa-row.is-current td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.qa-row-title { color: var(--text-strong); font-weight: 400; line-height: 1.55; }
.qa-row-path { margin-top: 3px; font-size: 12px; color: var(--text-muted); }
.qa-row-path.is-warn { color: #B26B00; }
.qa-badge-unset { background: #FDF0E4; color: #B35A00; }
.qa-flags { display: flex; gap: 4px; flex-wrap: wrap; }
.qa-flag {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 0 6px;
    border: 1px solid var(--line); border-radius: 3px;
    font-size: 11px; line-height: 18px; color: var(--text-secondary);
}
.qa-flag svg { width: 11px; height: 11px; }
.qa-flag.is-rev { border-color: #D6C6E8; color: #6C3FA0; }
.qa-flag.is-dup { border-color: #F2D2A9; color: #B35A00; }
.qa-flag.is-lock { border-color: #C9D2DD; color: var(--primary); font-family: 'Roboto', sans-serif; }

/* 편집 패널 */
.qa-editor-card { position: sticky; top: 72px; max-height: calc(100vh - 88px); display: flex; flex-direction: column; overflow: hidden; }
.qa-editor-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 24px; text-align: center; color: var(--text-muted); }
.qa-editor-empty svg { width: 28px; height: 28px; stroke-width: 1.5; }
.qa-editor-empty p { font-size: 14px; color: var(--text-secondary); }
.qa-editor-empty small { font-size: 12px; line-height: 1.6; }
.qa-editor-empty[hidden] { display: none; }
.empty-state[hidden] { display: none; }
.qa-editor { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.qa-editor[hidden] { display: none; }
.qa-editor-actions { display: flex; gap: 6px; }
.qa-btn-danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }
.qa-editor-body { flex: 1; overflow-y: auto; padding: 16px; }
.qa-editor-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}
.qa-dirty { margin-right: auto; font-size: 12px; color: #B26B00; }
.qa-dirty[hidden] { display: none; }

.qa-lock-note { margin-bottom: 14px; font-size: 12px; line-height: 1.6; }
.qa-lock-note[hidden] { display: none; }
.qa-field { margin-bottom: 16px; }

/* 패널 헤더 남색 (2026-09-18 확정) — 문항·답변 관리 세 칸 */
.qa-layout .qa-pane-head {
    background: var(--primary);
    border-bottom-color: var(--primary);
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
    color: #FFFFFF;
}
.qa-layout .qa-pane-head h2 { color: #FFFFFF; }
.qa-layout .qa-pane-title small { color: rgba(255, 255, 255, .7); }
.qa-layout .qa-pane-sub { color: rgba(255, 255, 255, .7); }
.qa-layout .qa-pane-head .card-title-icon { border-color: rgba(255, 255, 255, .3); color: #FFFFFF; }
.qa-layout .qa-pane-head .btn-outline { background: transparent; border-color: rgba(255, 255, 255, .4); color: #FFFFFF; }
.qa-layout .qa-pane-head .btn-outline:hover:not(:disabled) { background: rgba(255, 255, 255, .12); border-color: #FFFFFF; color: #FFFFFF; }
.qa-layout .qa-pane-head .btn-outline:disabled { opacity: .4; }

/* 편집 패널 구역: 기본 정보 · 답변 설정 · 미리보기 */
.qa-sec + .qa-sec { margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.qa-sec-title { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; font-weight: 700; color: var(--text-strong); }
.qa-sec-title svg { width: 15px; height: 15px; color: var(--primary); }
.qa-sec > :last-child { margin-bottom: 0; }
.qa-sec .qa-answer { margin-bottom: 18px; }
.qa-field .form-label small { font-weight: 400; }
.qa-title-input { min-height: 76px; }
.qa-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.qa-label-row .form-label { margin: 0; }
.qa-label-row .form-select { max-width: 200px; }

.qa-switches { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.qa-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.qa-switch input { width: 15px; height: 15px; margin: 0; accent-color: var(--primary); }
.qa-switch small { color: var(--text-muted); }
.qa-switch input:disabled + span { opacity: .55; }

.qa-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.qa-type {
    height: 34px; padding: 0 6px;
    background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-size: 12px; color: var(--text-secondary);
    cursor: pointer;
}
.qa-type:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.qa-type.is-active { border: 2px solid var(--accent); color: var(--accent-dark); font-weight: 700; }
.qa-type:disabled { opacity: .45; cursor: default; }

.qa-answer { margin-bottom: 16px; }
.qa-options-head { display: flex; justify-content: space-between; margin-bottom: 6px; padding: 0 36px 0 22px; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.qa-score-head { width: 72px; text-align: center; }
.qa-option-list { margin: 0 0 8px; padding: 0; list-style: none; }
.qa-option { display: flex; align-items: center; gap: 6px; }
.qa-option + .qa-option { margin-top: 6px; }
.qa-option .form-control { height: 34px; font-size: 13px; }
.qa-option.is-dragging { opacity: .4; }
.qa-grip { display: inline-flex; flex-shrink: 0; width: 16px; color: #B7BEC8; cursor: grab; }
.qa-grip svg { width: 16px; height: 16px; }
.qa-score { width: 72px !important; flex-shrink: 0; text-align: center; font-family: 'Roboto', sans-serif; }
.qa-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 30px; height: 30px; padding: 0;
    background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
}
.qa-icon-btn svg { width: 14px; height: 14px; }
.qa-icon-btn:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }
.qa-icon-btn:disabled { opacity: .4; cursor: default; }
.qa-options-foot { display: flex; gap: 6px; flex-wrap: wrap; }
.qa-push-right { margin-left: auto; }
.qa-inline-field { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--text-secondary); }
.qa-inline-field .form-control { width: 110px; height: 34px; }
.qa-minmax { display: flex; gap: 16px; flex-wrap: wrap; }
.qa-minmax .qa-inline-field { margin-top: 0; }
.qa-matrix-edit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qa-matrix-edit .qa-options-head { padding: 0; }

/* 미리보기 */
.qa-preview { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.qa-preview-head { padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 500; color: var(--text-muted); }
.qa-preview-body { padding: 16px; }
.qa-pv-title { margin-bottom: 12px; font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--text-strong); }
.qa-pv-title.is-required::after { content: ' *'; color: var(--danger); }
.qa-pv-choices { margin: 0; padding: 0; list-style: none; }
.qa-pv-choices li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; color: var(--text); }
.qa-pv-radio, .qa-pv-check { display: inline-block; flex-shrink: 0; width: 16px; height: 16px; border: 1.5px solid #B7BEC8; background: var(--surface); }
.qa-pv-radio { border-radius: 50%; }
.qa-pv-check { border-radius: 3px; }
.qa-pv-rank { margin: 0; padding: 0; list-style: none; }
.qa-pv-rank li { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13px; }
.qa-pv-rank-no { font-family: 'Roboto', sans-serif; font-weight: 700; color: var(--primary); }
.qa-pv-text { height: 72px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13px; color: #A3AAB5; }
.qa-pv-matrix { overflow-x: auto; }
.qa-pv-matrix table { border-collapse: collapse; width: 100%; font-size: 12px; }
.qa-pv-matrix th, .qa-pv-matrix td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: center; }
.qa-pv-matrix th { font-weight: 500; color: var(--text-secondary); }
.qa-pv-matrix .qa-pv-matrix-row { text-align: left; color: var(--text); }
.qa-pv-seven { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.qa-pv-seven-end { font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 700; color: var(--info); }
.qa-pv-seven-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border: 1.5px solid #B7BEC8; border-radius: 50%;
    font-family: 'Roboto', sans-serif; font-size: 12px; color: var(--text-muted);
}

/* 대화상자 */
.qa-dialog-wide { width: min(600px, calc(100vw - 32px)); }
.qa-dialog-wide .qa-field { margin-bottom: 14px; }
.qa-dialog-wide textarea { min-height: 120px; }
.wv-dialog-input-label { display: block; margin-top: 12px; }
.wv-dialog-input-label .form-control { margin-top: 6px; }
.qa-tpl-list { margin: 12px 0 0; padding: 0; list-style: none; }
.qa-tpl { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.qa-tpl-body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.qa-tpl-body b { color: var(--text-strong); font-size: 13px; }
.qa-tpl-body small { flex-basis: 100%; font-size: 12px; color: var(--text-muted); line-height: 1.5; }

@media (max-width: 1400px) {
    .qa-layout { grid-template-columns: minmax(0, 1fr) minmax(520px, 1.1fr); }
    .qa-tree-card { grid-column: 1 / -1; position: static; max-height: 240px; }
}
@media (max-width: 1100px) {
    .qa-layout { grid-template-columns: 1fr; }
    .qa-editor-card { position: static; max-height: none; }
    .qa-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================================
   진단 종류 · 진단 패키지 (2026-09-18)
   ============================================================================ */
.dg-col-code { width: 80px; font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; }
.dg-table tr.is-hidden td { color: var(--text-muted); }
.dg-areas { display: flex; flex-wrap: wrap; gap: 4px; white-space: normal; }
.dg-none { font-size: 12px; color: var(--text-muted); }
.dg-area-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.dg-pick {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-size: 13px; cursor: pointer;
}
.dg-pick input { margin: 0; accent-color: var(--primary); }
.dg-pick:has(input:checked) { border-color: var(--primary); color: var(--primary); font-weight: 500; }

/* 진단 탭 */
.pk-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; align-items: stretch; }
.pk-tab {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 150px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--card-line); border-radius: var(--radius);
    text-decoration: none; color: var(--text);
}
.pk-tab small { font-family: 'Roboto', sans-serif; font-size: 11px; color: var(--text-muted); }
.pk-tab b { font-size: 14px; color: var(--text-strong); }
.pk-tab-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.pk-tab-meta em { font-style: normal; padding: 0 5px; border: 1px solid #F2D2A9; border-radius: 3px; color: #B35A00; font-size: 11px; }
.pk-tab:hover { border-color: var(--line-strong); }
.pk-tab.is-active { border: 2px solid var(--accent); padding: 9px 13px; }
.pk-tab.is-active b { color: var(--accent-dark); }
.pk-hidden { position: relative; align-self: center; font-size: 12px; color: var(--text-muted); }
.pk-hidden summary { cursor: pointer; padding: 6px 10px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); list-style: none; }
.pk-hidden-menu {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 10;
    display: flex; flex-direction: column; min-width: 180px; padding: 6px;
    background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(15, 23, 32, .12);
}
.pk-hidden-menu a { display: flex; justify-content: space-between; gap: 12px; padding: 6px 8px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text); font-size: 13px; }
.pk-hidden-menu a:hover { background: var(--surface-hover); }
.pk-hidden-menu span { color: var(--text-muted); font-size: 12px; }

.pk-table tr.is-archived td { color: var(--text-muted); }
.pk-title { display: inline-flex; align-items: center; gap: 6px; color: var(--text-strong); font-weight: 500; text-decoration: none; }
.pk-title:hover { color: var(--accent-dark); text-decoration: underline; }
.pk-actions { display: inline-flex; gap: 4px; }

/* 회원 목록도 칸이 많아 가로로 넘친다. 명단(.sv-people)과 같이 관리 열을 붙여 둔다 */
.table-members th:last-child,
.table-members td:last-child {
    position: sticky; right: 0; z-index: 2;
    background: var(--surface);
    box-shadow: -6px 0 6px -6px rgba(16, 24, 32, .18);
}
.table-members thead th:last-child { z-index: 3; }

/* 빌더 머리 */
.pb-head { margin-bottom: 16px; }
.pb-head-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; }
.pb-label { padding: 0 10px; border-left: 1px solid var(--line); font-size: 15px; font-weight: 700; color: var(--text-strong); white-space: nowrap; }
.pb-diag { display: inline-flex; align-items: baseline; gap: 6px; padding: 0 4px; font-weight: 700; color: var(--primary); white-space: nowrap; }
.pb-diag small { font-family: 'Roboto', sans-serif; font-size: 11px; font-weight: 400; color: var(--text-muted); }
.pb-title { flex: 1 1 260px; font-size: 14px; font-weight: 500; }
/* 응답 제한시간 (2026-10-02) — 머리줄이 좁아 칸을 작게 두고 단위·버튼을 옆에 붙인다 */
.pb-limit { display: flex; align-items: center; gap: 6px; flex: none; }
.pb-limit label { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; }
.pb-limit .form-control { width: 72px; }
.pb-limit span { font-size: 12.5px; color: var(--text-secondary); }
.pb-seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.pb-seg label { cursor: pointer; }
.pb-seg input { position: absolute; opacity: 0; pointer-events: none; }
.pb-seg span { display: inline-block; padding: 0 14px; line-height: 34px; font-size: 13px; color: var(--text-secondary); }
.pb-seg label + label span { border-left: 1px solid var(--line); }
.pb-seg input:checked + span { background: var(--primary); color: #FFFFFF; font-weight: 500; }
.pb-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.pb-dirty { font-size: 12px; color: #B26B00; }
.pb-dirty[hidden] { display: none; }
.pb-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
.pb-note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; color: var(--primary); }

/* 빌더 트리: 체크박스 + 노드 */
.pb-node { display: flex; align-items: center; gap: 4px; }
.pb-node > input { flex-shrink: 0; width: 15px; height: 15px; margin: 0 0 0 4px; accent-color: var(--primary); }
.pb-node > .qa-node { flex: 1; min-width: 0; }
.pb-node.is-active > .qa-node { background: #EDF0F4; border-color: #C9D2DD; }
.pb-node.is-active .qa-node-name { font-weight: 700; color: var(--primary); }
.pb-node.is-empty .qa-node-name { color: var(--text-muted); }
.qa-node-count.has-picked { color: var(--accent-dark); font-weight: 500; }
.pb-extra { flex-shrink: 0; font-style: normal; font-size: 10px; color: #B35A00; }
.pb-tree-empty { padding: 12px; line-height: 1.6; }

/* 문항 은행 */
.pb-bankbar { display: flex; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
/* 담은 문항: 바탕색 대신 왼쪽 강조선 (초록 바탕 금지) */
.pb-bank-row.is-picked td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.pb-bank-row.is-picked .qa-row-title { color: var(--accent-dark); }
.pb-bank-row.is-flash td { box-shadow: inset 0 0 0 2px var(--accent); }

/* 담은 문항 */
.pb-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.pb-stat { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.pb-stat span { font-size: 11px; color: var(--text-secondary); }
.pb-stat b { font-family: 'Roboto', sans-serif; font-size: 15px; color: var(--text-strong); }
.pb-stat.is-warn { border-color: #F2D2A9; }
.pb-stat.is-warn b { color: #B35A00; }
.pb-mrow { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px; align-items: stretch; }
.pb-mrow + .pb-mrow { margin-top: 6px; }
.pb-mhead { display: flex; flex-direction: column; justify-content: center; padding: 6px 8px; background: var(--primary); border-radius: var(--radius-sm); color: #FFFFFF; }
.pb-mhead b { font-size: 12px; line-height: 1.35; }
.pb-mhead small { font-size: 11px; color: rgba(255, 255, 255, .7); }
.pb-mcells { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; }
.pb-mcell {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    padding: 6px 8px;
    background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-size: 12px; color: var(--text); text-align: left; cursor: pointer;
}
.pb-mcell span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-mcell b { font-family: 'Roboto', sans-serif; color: var(--accent-dark); }
.pb-mcell:hover { border-color: var(--primary); }
.pb-mcell.is-gap { border-style: dashed; border-color: #E0B98A; }
.pb-mcell.is-gap b { color: #B35A00; }
.pb-mcell.is-none { color: var(--text-muted); border-color: var(--line); }
.pb-mcell.is-none b { color: var(--text-muted); }

.pb-cart-empty { padding: 16px 0; }
.pb-group { margin: 14px 0 6px; font-size: 12px; font-weight: 700; color: var(--primary); }
.pb-group:first-child { margin-top: 0; }
.pb-card { padding: 10px 10px 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; }
.pb-card + .pb-card { margin-top: 6px; }
.pb-card:hover { border-color: var(--line-strong); }
.pb-card-top { display: flex; align-items: flex-start; gap: 8px; }
.pb-no { flex-shrink: 0; min-width: 22px; font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 700; color: var(--primary); line-height: 1.6; }
.pb-card-title { flex: 1; min-width: 0; font-size: 13px; line-height: 1.6; color: var(--text-strong); }
.pb-card-title.is-required::after { content: ' *'; color: var(--danger); }
.pb-card-acts { display: inline-flex; gap: 3px; flex-shrink: 0; opacity: 0; }
.pb-card:hover .pb-card-acts, .pb-card:focus-within .pb-card-acts { opacity: 1; }
.pb-card-acts .qa-icon-btn { width: 24px; height: 24px; }
.pb-card-acts .qa-icon-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.pb-card-acts .pb-act-remove:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }
.pb-act-up svg { transform: rotate(180deg); }
.pb-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 6px 0 0 30px; }
.pb-card-ans { font-size: 12px; color: var(--text-muted); }

/* 검색 자동완성 선택 (select[data-combobox]) — 2026-09-19 */
.wv-combo { position: relative; }
.wv-combo-input { padding-right: 32px; }
.wv-combo-clear { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-muted); font-size: 16px; line-height: 1; cursor: pointer; }
.wv-combo-clear:hover { background: var(--surface-muted); color: var(--danger); }
.wv-combo-clear[hidden] { display: none; }
.wv-combo-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; max-height: 280px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(15, 23, 32, .12); }
.wv-combo-list[hidden] { display: none; }
.wv-combo-item { padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; color: var(--text); cursor: pointer; }
.wv-combo-item mark { background: none; color: var(--accent-dark); font-weight: 700; }
.wv-combo-item.is-active { background: #EDF0F4; }
.wv-combo-item.is-selected { font-weight: 700; color: var(--primary); }
.wv-combo-empty { padding: 8px 10px; font-size: 12px; color: var(--text-muted); }
.wv-combo-group { position: sticky; top: -4px; margin: 4px -4px 2px; padding: 6px 12px; background: #F3F5F8; border-top: 1px solid var(--line); font-size: 11px; font-weight: 700; color: var(--primary); }
.wv-combo-group:first-child { margin-top: -4px; border-top: 0; }
.filter-field .wv-combo { min-width: 200px; }

/* ============================================================================
   설문 — 목록 · 만들기 · 상세 (2026-09-19)
   ============================================================================ */
/* 목록 */
a.qa-stat { text-decoration: none; }
.sv-col-rate { width: 170px; }
.sv-rate { display: flex; flex-direction: column; gap: 4px; }
.sv-rate-bar { display: block; height: 6px; border-radius: 3px; background: #E9EDF2; overflow: hidden; }
.sv-rate-bar i { display: block; height: 100%; background: var(--accent); }
.sv-rate small { font-family: 'Roboto', sans-serif; font-size: 12px; color: var(--text-muted); }

/* 만들기 */
.sv-part { display: flex; align-items: center; gap: 8px; }
.sv-part .form-control { width: 120px; }
.sv-part span { font-size: 13px; color: var(--text-secondary); }
.sv-history { margin-top: 6px; }
.sv-history-list { margin: 6px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--text-secondary); }
.sv-history-list li { padding: 3px 0; border-top: 1px dashed var(--line); }
.sv-history-list b { color: var(--primary); margin-right: 4px; }
.sv-period { display: flex; align-items: center; gap: 8px; }
.sv-period .form-control { flex: 1; min-width: 0; }
/* ── 가운데 창 (2026-10-07)
   설문 명단 편집과 지식자료 카테고리가 같이 쓴다. 한 화면에만 두면 다음 화면에서 복제된다. */
.sv-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(18,28,36,.45); padding: 20px; }
/* display:flex 가 hidden 속성의 기본 display:none 을 덮는다 — 다시 눌러 준다 */
.sv-modal[hidden] { display: none; }
.sv-modal-box { width: min(760px, 100%); max-height: 88vh; display: flex; flex-direction: column; background: var(--surface); border-radius: 12px; box-shadow: 0 18px 50px rgba(18,28,36,.28); }
.sv-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.sv-modal-head h2 { margin: 0; font-size: 16px; }
.sv-modal-body { padding: 18px; overflow: auto; }
.sv-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line); }

/* 응답 제한시간 (2026-10-02) — 바로 위 「회차」(.sv-part)와 같은 모양으로 두 줄이 맞아 떨어진다 */
.sv-limit { display: flex; align-items: center; gap: 8px; }
.sv-limit .form-control { width: 120px; }
.sv-limit span { font-size: 13px; color: var(--text-secondary); }
.sv-logo-field { margin-bottom: 18px; }
.sv-editors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.sv-editor { background: var(--surface); }
.sv-editors .ql-toolbar.ql-snow { border-color: var(--line); border-radius: var(--radius-sm) var(--radius-sm) 0 0; font-family: var(--font); }
.sv-editors .ql-container.ql-snow { border-color: var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-family: var(--font); font-size: 14px; }
/* Quill 기본값 height:100% 가 칸 밖으로 넘친다 */
.sv-editors .ql-container { height: auto; }
.sv-editors .ql-editor { min-height: 160px; max-height: 360px; overflow-y: auto; }
.sv-editors .ql-editor img { max-width: 100%; }
.sv-pop-load .form-select { min-width: 240px; }
.sv-pop-lock { margin-bottom: 12px; }
.sv-pop-lock[hidden] { display: none; }
.sv-pop { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px; }
.sv-pop-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: stretch; }
.sv-pop-row + .sv-pop-row { border-top: 1px solid var(--line); }
.sv-pop-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: #F6F7F9; border-right: 1px solid var(--line); }
.sv-pop-name b { font-size: 13px; color: var(--text-strong); }
.sv-pop-name small { flex-shrink: 0; font-family: 'Roboto', sans-serif; font-size: 11px; color: var(--text-muted); }
.sv-pop-name .form-control { height: 32px; font-size: 13px; }
.sv-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; }
.sv-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; background: #EDF0F4; border: 1px solid #C9D2DD; border-radius: 12px; font-size: 12px; color: var(--primary); }
.sv-chip-x { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-muted); font-size: 14px; line-height: 1; cursor: pointer; }
.sv-chip-x:hover { background: #D9DFE7; color: var(--danger); }
.sv-chip-input { flex: 1; min-width: 140px; height: 28px; padding: 0 4px; border: 0; outline: 0; font-size: 13px; background: none; }
.sv-prereg { margin-bottom: 14px; }
.sv-people-row[hidden], .sv-roster[hidden] { display: none; }
.sv-roster-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sv-roster-bar label.btn { cursor: pointer; }
.sv-roster-status { font-size: 12px; color: var(--text-secondary); }
.sv-roster-status.is-new { color: var(--accent-dark); font-weight: 500; }
.sv-roster-status.is-empty { color: #B35A00; }
.sv-problems { margin: 10px 0 0; padding: 10px 12px 10px 28px; border: 1px solid #F5C2BC; border-radius: var(--radius-sm); color: #B03A2E; font-size: 12px; line-height: 1.7; }
.sv-problems[hidden] { display: none; }
.sv-roster-preview { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.sv-roster-preview[hidden] { display: none; }
.sv-roster-preview .field-help { padding: 6px 12px; }

/* 사전등록 미리보기 — 엑셀 15칸 전원을 보여 주느라 가로·세로로 길어진다 (2026-10-02) */
.sv-roster-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface-muted);
    font-size: 12.5px; color: var(--text-secondary);
}
.sv-roster-scroll { max-height: 420px; overflow: auto; }
.sv-roster-scroll thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--surface-muted); white-space: nowrap;
}
.sv-roster-table td { white-space: nowrap; }
.sv-roster-table .sv-roster-no { color: var(--text-muted); text-align: right; }

/* 사전등록 요약 줄 — 모달을 여는 입구 (2026-10-02) */
.sv-roster-sum {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    margin-top: 10px; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted);
    font-size: 12.5px; color: var(--text-secondary);
}
.sv-roster-sum[hidden] { display: none; }

/* 명단 보기·편집 모달 — 칸이 16개라 넓게 쓴다 */
.sv-rd { width: min(1240px, calc(100vw - 32px)); height: min(860px, calc(100vh - 40px)); padding: 0; }
.sv-rd[open] { display: flex; flex-direction: column; }
.sv-rd-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 20px; background: var(--primary); color: #FFFFFF; flex: none;
}
.sv-rd-head h2 { font-size: 15px; font-weight: 700; color: #FFFFFF; }
.sv-rd-head h2 small { margin-left: 8px; font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, .7); }
.sv-rd-head .qa-icon-btn { background: transparent; border-color: rgba(255, 255, 255, .4); color: #FFFFFF; }
.sv-rd-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 12px 20px; border-bottom: 1px solid var(--line); flex: none;
}
.sv-rd-bar .form-control { width: 260px; height: 34px; font-size: 13px; }
.sv-rd-count { font-size: 12.5px; color: var(--text-secondary); margin-right: auto; }
.sv-rd-body { flex: 1 1 auto; min-height: 0; padding: 0 20px 12px; display: flex; }
.sv-rd-body .sv-roster-scroll { flex: 1 1 auto; max-height: none; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.sv-rd-empty { padding: 40px 0; text-align: center; color: var(--text-muted); font-size: 13.5px; }
.sv-rd .sv-rd-del { text-align: center; }
.sv-rd .sv-rd-del .qa-icon-btn { width: 26px; height: 26px; line-height: 1; font-size: 13px; }
.sv-rd-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    padding: 12px 20px; border-top: 1px solid var(--line); flex: none;
}
.sv-rd-foot .qa-muted { margin-right: auto; font-size: 12px; }
.sv-rd .sv-problems { margin: 0 20px 10px; }

/* 상세 */
.sv-link-card { margin-bottom: 16px; }
.sv-link { display: flex; align-items: center; gap: 8px; padding: 12px 16px; }
.sv-link-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--primary); white-space: nowrap; }
.sv-link-label svg { width: 14px; height: 14px; }
.sv-link .form-control { flex: 1; font-family: 'Roboto', sans-serif; font-size: 13px; background: #F6F7F9; }
.sv-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid var(--line); }
.sv-tab { padding: 10px 18px; margin-bottom: -2px; background: none; border: 0; border-bottom: 3px solid transparent; font-size: 14px; font-weight: 500; color: var(--text-secondary); cursor: pointer; }
.sv-tab:hover { color: var(--primary); }
.sv-tab.is-active { border-bottom-color: var(--primary); color: var(--primary); font-weight: 700; }
.sv-panel[hidden] { display: none; }
.sv-info { display: flex; gap: 24px; align-items: flex-start; }
.sv-info dl { flex: 1; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.sv-info dt { font-size: 12px; color: var(--text-muted); }
.sv-info dd { margin: 2px 0 0; font-size: 14px; color: var(--text-strong); }
.sv-info-logo { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-muted); }
.sv-info-logo img { max-width: 180px; max-height: 70px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px; }
.sv-notices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.sv-notices .card + .card { margin-top: 0; }
.sv-notice { max-height: 280px; overflow: auto; font-size: 13px; line-height: 1.7; }
.sv-notice img { max-width: 100%; }
.sv-people-tools { display: flex; gap: 6px; align-items: center; }
.sv-people-tools .form-select { width: auto; }
.sv-people tr[hidden] { display: none; }

/*
 * 명단은 엑셀로 올린 칸까지 더해 16열 안팎이라 반드시 가로로 넘친다(.table td 가
 * nowrap 이다). 「관리」가 맨 오른쪽이라 스크롤하지 않으면 수정·빼기 단추가 아예
 * 보이지 않아 「그런 기능이 없다」고 오인하게 된다 (운영 요청서 2026-10-07 3번).
 * 열 자체를 오른쪽에 붙여 둔다.
 */
.sv-people th:last-child,
.sv-people td:last-child {
    position: sticky; right: 0; z-index: 2;
    background: var(--surface);
    box-shadow: -6px 0 6px -6px rgba(16, 24, 32, .18);
}
.sv-people thead th:last-child { z-index: 3; background: var(--surface); }
/* 미응답 행만 옅게 물들여 눈에 먼저 들어오게 한다 — 손댈 수 있는 줄이 그 줄뿐이다 */
.sv-people tr[data-answered="N"] > td { background: #FFFBF4; }
.sv-people tr[data-answered="N"] > td:last-child { background: #FFFBF4; }
.sv-people tr[data-answered="N"]:hover > td { background: #FFF4E3; }
.sv-people tr[data-answered="N"]:hover > td:last-child { background: #FFF4E3; }
.sv-send { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sv-send .card + .card { margin-top: 0; }
.sv-notice-text { min-height: 260px; font-size: 13px; }
.sv-send-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.sv-seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 12px; }
.sv-seg label { cursor: pointer; }
.sv-seg input { position: absolute; opacity: 0; pointer-events: none; }
.sv-seg span { display: inline-block; padding: 0 16px; line-height: 34px; font-size: 13px; color: var(--text-secondary); }
.sv-seg label + label span { border-left: 1px solid var(--line); }
.sv-seg input:checked + span { background: var(--primary); color: #FFFFFF; font-weight: 500; }
.sv-mail-fields { margin-bottom: 12px; }
.sv-mail-fields[hidden] { display: none; }
.sv-recipients-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; font-size: 13px; }
.sv-recipient-list { max-height: 260px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.sv-recipient-list label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; }
.sv-recipient-list label:hover { background: var(--surface-hover); }
.sv-recipient-list input { margin: 0; accent-color: var(--primary); }
.sv-recipient-list small { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 12px; }
.sv-send-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.sv-send-foot .form-control { width: 220px; }
.sv-send-foot .form-control[hidden] { display: none; }
.sv-send-foot .btn-primary { margin-left: auto; }
@media (max-width: 1100px) {
    .sv-editors, .sv-notices, .sv-send { grid-template-columns: 1fr; }
    .sv-pop-row { grid-template-columns: 1fr; }
    .sv-pop-name { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* 설문 미리보기 창 (2026-09-19) */
.sv-pv { width: min(880px, calc(100vw - 32px)); height: min(900px, calc(100vh - 40px)); padding: 0; }
.sv-pv[open] { display: flex; flex-direction: column; }
.sv-pv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; background: var(--primary); color: #FFFFFF; }
.sv-pv-head h2 { font-size: 15px; font-weight: 700; color: #FFFFFF; }
.sv-pv-head h2 small { margin-left: 8px; font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, .7); }
.sv-pv-head .qa-icon-btn { background: transparent; border-color: rgba(255, 255, 255, .4); color: #FFFFFF; }
.sv-pv-steps { display: flex; gap: 4px; padding: 10px 20px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.sv-pv-step { padding: 6px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; cursor: pointer; }
.sv-pv-step:hover { border-color: var(--primary); color: var(--primary); }
.sv-pv-step.is-active { background: var(--primary); border-color: var(--primary); color: #FFFFFF; font-weight: 500; }
.sv-pv-body { flex: 1; overflow-y: auto; padding: 24px 20px; background: #EEF1F5; }
.sv-pv-page { max-width: 640px; margin: 0 auto; padding: 28px 32px 36px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 16px rgba(15, 23, 32, .06); }
.sv-pv-brand { display: flex; justify-content: center; margin-bottom: 14px; }
.sv-pv-brand img { max-height: 56px; max-width: 240px; object-fit: contain; }
.sv-pv-nologo { padding: 8px 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); font-size: 12px; color: var(--text-muted); }
.sv-pv-title { margin-bottom: 8px; text-align: center; font-size: 20px; font-weight: 700; color: var(--text-strong); }
.sv-pv-meta { margin-bottom: 16px; text-align: center; font-size: 13px; color: var(--text-secondary); }
.sv-pv-login { margin-bottom: 16px; padding: 10px 12px; border: 1px solid #BDD6F0; border-radius: var(--radius-sm); background: #EAF2FB; font-size: 12px; color: #1D5A99; }
.sv-pv-sub { margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--primary); font-size: 14px; font-weight: 700; color: var(--primary); }
.sv-pv-notice { padding: 0; font-size: 14px; line-height: 1.8; }
.sv-pv-notice img { max-width: 100%; }
.sv-pv-empty { padding: 16px 0; font-size: 13px; color: var(--text-muted); }
.sv-pv-q { padding: 14px 0; border-bottom: 1px solid var(--line); }
.sv-pv-q:last-child { border-bottom: 0; }
.sv-pv-foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); }
.sv-pv-foot .qa-muted { margin-right: auto; color: #B35A00; }

/* 고객사 배정 패키지 (2026-09-19) */
.mp-card { margin-top: 32px; scroll-margin-top: 72px; }
.mp-group + .mp-group { margin-top: 18px; }
.mp-group-title { margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--primary); }
.mp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.mp-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; }
.mp-item input { margin: 3px 0 0; width: 15px; height: 15px; accent-color: var(--primary); flex-shrink: 0; }
.mp-item:hover { border-color: var(--line-strong); }
.mp-item.is-on { border: 2px solid var(--accent); padding: 9px 11px; }
.mp-item.is-locked { cursor: default; }
.mp-item > svg { width: 14px; height: 14px; margin-left: auto; color: var(--primary); flex-shrink: 0; }
.mp-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-body b { font-size: 13px; font-weight: 500; color: var(--text-strong); }
.mp-body small { font-size: 12px; color: var(--text-muted); }

/* 답변 미설정 → 문항·답변 관리로 바로 가기 (2026-09-19) */
a.pb-fix-link { text-decoration: none; cursor: pointer; }
a.pb-fix-link:hover { background: #F9E0C7; text-decoration: underline; }
.pb-fix-all { display: inline-flex; align-items: center; align-self: center; padding: 6px 12px; border: 1px solid #E0B98A; border-radius: var(--radius-sm); background: #FFFFFF; color: #B35A00; font-size: 12px; font-weight: 500; text-decoration: none; }
.pb-fix-all:hover { border-color: #B35A00; }
.pb-fix-all[hidden] { display: none; }
.qa-editor-body .pb-fix-all { margin: -4px 0 12px; }
/* 패키지 보기 (읽기 전용 검토 · 인쇄) */
.pv-eyebrow { margin-bottom: 4px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.page-title .qa-flag { vertical-align: middle; margin-left: 4px; }
.pv-card { margin-top: 16px; }
.pv-matrix { display: flex; flex-direction: column; }
.pv-table td { vertical-align: top !important; white-space: normal; }
.pv-order { width: 52px; font-family: 'Roboto', sans-serif; font-weight: 700; color: var(--primary) !important; }
.pv-no { width: 60px; font-family: 'Roboto', sans-serif; font-size: 12px !important; color: var(--text-muted) !important; }
.pv-path { width: 160px; font-size: 12px !important; }
.pv-path small { display: block; margin-top: 2px; color: var(--text-muted); }
.pv-title { color: var(--text-strong) !important; line-height: 1.6; min-width: 260px; }
.pv-answer { width: 32%; }
.pv-answer p { margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--text-secondary); white-space: pre-line; }
.pv-table td.center, .pv-table th.center { width: 56px; white-space: nowrap; }
.pv-table .qa-flag { white-space: nowrap; }
.pv-group td { padding: 8px 14px !important; background: #F3F5F8 !important; font-size: 12px !important; font-weight: 700; color: var(--primary) !important; }

@media print {
    @page { size: A4 landscape; margin: 12mm; }
    body { background: #FFFFFF; font-size: 10pt; }
    .portal-sidebar, .portal-topbar, .portal-footer, .no-print, .wv-toast { display: none !important; }
    .portal-main, .portal-main.expanded { margin-left: 0 !important; }
    .portal-container { padding: 0 !important; max-width: none !important; }
    .card { border-color: #999999; break-inside: auto; }
    .card-header.is-dark { background: #FFFFFF !important; border-bottom: 2px solid #333333; }
    .card-header.is-dark .card-title, .card-header.is-dark .card-title small { color: #111111 !important; }
    .card-header.is-dark .card-title-icon { display: none; }
    .pb-mhead { background: #FFFFFF !important; color: #111111 !important; border: 1px solid #999999; }
    .pb-mhead small { color: #555555 !important; }
    .qa-stat { padding: 6px 10px; }
    .qa-stat-icon { display: none; }
    .pv-table th, .pv-table td { padding: 6px 8px !important; font-size: 9pt !important; }
    .pv-table tr { break-inside: avoid; }
    .pv-table thead { display: table-header-group; }
    .pv-group td { background: #EEEEEE !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    a { text-decoration: none; color: inherit; }
}

@media (max-width: 1400px) {
    .pb-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================================
   반응형
   ============================================================================ */
@media (max-width: 1100px) {
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .form-grid, .form-grid.cols-3, .choice-cards { grid-template-columns: 1fr; }
    .span-2 { grid-column: auto; }
    .filter-field { flex: 1 1 100%; }
    .filter-actions { margin-left: 0; }
    .form-actions { margin: 20px -16px -16px; padding: 12px 16px; }
    .form-actions-hint { display: none; }
    .dropzone { flex-wrap: wrap; }
}

@media (max-width: 900px) {
    .auth-brand-side { display: none; }
}

@media (max-width: 768px) {
    .portal-sidebar { transform: translateX(-100%); width: var(--sidebar-width) !important; }
    .portal-sidebar.open { transform: translateX(0); box-shadow: 0 0 0 100vmax rgba(15, 23, 32, .4); }
    .portal-main, .portal-main.expanded { margin-left: 0; }
    .mobile-menu-btn { display: inline-flex; }
    .sidebar-toggle { display: none; }
    .portal-topbar { padding: 0 16px; }
    .portal-container { padding: 16px; }
    .page-header { flex-direction: column; align-items: flex-start; }
    .topbar-link span { display: none; }
}

@media (max-width: 520px) {
    .kpi-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ============================================================
   채점·등급 기준 (B2-05, 2026-09-23) — sc-*
   ============================================================ */
.sc-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -4px 0 18px; font-size: 13px; color: var(--text-secondary); }
.sc-status .badge { flex-shrink: 0; }
.sc-status-memo { color: var(--text-muted); }

.sc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.sc-side { position: sticky; top: calc(var(--topbar-height) + 16px); }
.sc-side .card + .card { margin-top: 16px; }
@media (max-width: 1100px) {
    .sc-layout { grid-template-columns: minmax(0, 1fr); }
    .sc-side { position: static; }
}

.sc-rows .form-control { height: 32px; padding: 0 8px; font-size: 13px; min-width: 90px; }
.sc-rows .sc-code { width: 90px; font-weight: 700; font-family: 'Roboto', sans-serif; }
.sc-rows .sc-min { width: 96px; }
.sc-rows .sc-color { width: 44px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; cursor: pointer; }
.sc-rows .sc-range { color: var(--text-muted); font-size: 12px; min-width: 110px; }
.sc-rows tr.is-invalid .sc-range { color: var(--danger); font-weight: 700; }
.sc-rows tr.is-invalid .sc-min { border-color: var(--danger); }

.sc-band-preview { display: flex; gap: 2px; padding: 14px 20px 4px; }
.sc-seg { min-width: 0; padding: 8px 4px; border-radius: 3px; color: #fff; font-size: 12px; font-weight: 500; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sc-warn { margin: 0; font-size: 13px; color: #9A5B00; }
.sc-fixed { display: flex; align-items: center; height: 40px; margin: 0; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-muted); font-size: 14px; color: var(--text-strong); }

.sc-try { display: flex; align-items: center; gap: 12px; margin: 14px 0 8px; min-height: 44px; }
.sc-try-grade { font: 700 30px/1 'Roboto', sans-serif; color: var(--text-strong); min-width: 64px; }
.sc-try-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 13px; color: var(--text-secondary); }
.sc-chip { display: inline-block; padding: 2px 8px; border-radius: 3px; color: #fff; font-size: 12px; font-weight: 500; }

.sc-versions { list-style: none; margin: 0; padding: 0; max-height: 460px; overflow-y: auto; }
.sc-v { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sc-v:last-child { border-bottom: 0; }
.sc-v.is-current { background: #FAFCFB; }
.sc-v-head { display: flex; align-items: center; gap: 8px; }
.sc-v-head b { font: 700 14px 'Roboto', sans-serif; color: var(--text-strong); }
.sc-v-date { margin-left: auto; font-size: 12px; color: var(--text-muted); font-family: 'Roboto', sans-serif; }
.sc-v-memo { margin: 6px 0 0; font-size: 13px; color: var(--text-secondary); word-break: keep-all; }
.sc-v-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.sc-v-empty { padding: 16px; font-size: 13px; color: var(--text-muted); }

/* ============================================================
   결과 리포트 (2026-09-23) — rp-* : 확정 시안을 관리자 안에 띄운다
   ============================================================ */
.portal-container:has(.rp-frame) { max-width: none; }
.rp-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rp-bar-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; color: var(--text-secondary); }
.rp-bar-text b { color: var(--text-strong); font-size: 16px; }
.rp-bar-text .badge { margin-right: 6px; vertical-align: 1px; }
.rp-bar-actions { display: flex; gap: 8px; flex-shrink: 0; }
.rp-frame { display: block; width: 100%; height: calc(100vh - 210px); min-height: 640px; border: 1px solid var(--card-line); border-radius: var(--radius); background: #FFFFFF; }
@media (max-width: 760px) {
    .rp-bar { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   협의 필요 표시 (2026-09-23) — wv-discuss : 마우스·초점·탭으로 말풍선
   ============================================================ */
.wv-discuss { position: relative; display: inline-flex; align-items: center; height: 18px; margin-left: 6px; padding: 0 6px; border: 1px dashed #D9A45B; border-radius: 9px; background: #FFF8EE; color: #9A5B00; font-size: 11px; font-weight: 700; line-height: 1; vertical-align: 1px; cursor: help; white-space: nowrap; }
.wv-discuss:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.card-header.is-dark .wv-discuss { background: rgba(255, 255, 255, .1); border-color: rgba(255, 214, 153, .8); color: #FFE0B2; }
.wv-discuss-tip { position: absolute; z-index: 40; top: calc(100% + 8px); left: -8px; display: none; width: 300px; padding: 12px 14px; border-radius: 8px; background: #1F2A36; box-shadow: 0 8px 24px rgba(15, 23, 32, .22); color: #E6EAEF; font-size: 12px; font-weight: 400; line-height: 1.6; white-space: normal; text-align: left; cursor: default; }
.wv-discuss-tip::before { content: ''; position: absolute; top: -5px; left: 16px; width: 10px; height: 10px; background: #1F2A36; transform: rotate(45deg); }
.wv-discuss-tip b { display: block; margin-bottom: 4px; color: #FFFFFF; font-size: 13px; }
.wv-discuss-tip > span { white-space: pre-line; }
.wv-discuss-tip em { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .15); color: #FFD699; font-style: normal; }
.wv-discuss:hover .wv-discuss-tip, .wv-discuss:focus .wv-discuss-tip, .wv-discuss.is-open .wv-discuss-tip { display: block; }
.bm-head-discuss .wv-discuss-tip, .wv-discuss.is-right .wv-discuss-tip { left: auto; right: -8px; }
.bm-head-discuss .wv-discuss-tip::before, .wv-discuss.is-right .wv-discuss-tip::before { left: auto; right: 16px; }
.card-title .wv-discuss { margin-left: 2px; }
/* 기능정의서에 없어 임의로 추가한 항목 — 협의(주황)와 구분되는 회색 */
.wv-discuss.is-added { border-color: #9AA5B1; background: var(--surface-muted); color: var(--text-secondary); }
.card-header.is-dark .wv-discuss.is-added { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .08); color: #E6EAEF; }
.wv-discuss-row + .wv-discuss-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.wv-discuss-row b { color: var(--text-strong); font-size: 13px; }
.wv-discuss-row p { margin: 4px 0 0; }
.wv-discuss-row .wv-discuss-now { color: #9A5B00; }

/* ============================================================
   타사 평균 (B2-06, 2026-09-23) — bm-*
   ============================================================ */
.bm-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
.bm-list-card { position: sticky; top: calc(var(--topbar-height) + 16px); }
.bm-main .card + .card { margin-top: 20px; }
@media (max-width: 1100px) {
    .bm-layout { grid-template-columns: minmax(0, 1fr); }
    .bm-list-card { position: static; }
}
.bm-list { list-style: none; margin: 0; padding: 6px; max-height: 520px; overflow-y: auto; }
.bm-list-empty { padding: 14px 10px; font-size: 13px; color: var(--text-muted); }
.bm-set { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 10px 12px; border: 1px solid transparent; border-radius: var(--radius); background: none; font: inherit; text-align: left; cursor: pointer; }
.bm-set:hover { background: var(--surface-hover); }
.bm-set.is-active { border: 2px solid var(--accent); padding: 9px 11px; }
.bm-set-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bm-set-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-strong); font-size: 13px; }
.bm-set-meta { font-size: 12px; color: var(--text-secondary); }
.bm-set-use { font-size: 12px; font-weight: 700; color: var(--accent-dark); }
.bm-form-actions, .bm-head-discuss { display: flex; align-items: center; gap: 8px; }

.bm-matrix th.bm-area { width: 170px; color: var(--text-strong); font-weight: 700; vertical-align: top; white-space: normal; }
.bm-matrix td, .bm-matrix th { vertical-align: top; }
.bm-th-note { margin-left: 6px; font-weight: 400; font-size: 12px; color: var(--text-muted); }
.bm-in-total { display: block; margin-top: 2px; font-weight: 400; font-size: 12px; color: var(--text-muted); }
.bm-items { display: flex; flex-wrap: wrap; gap: 10px; }
.bm-item { display: flex; flex-direction: column; gap: 4px; width: 132px; }
.bm-item-name { font-size: 12px; font-weight: 700; color: var(--text-strong); white-space: normal; }
.bm-item .form-control { height: 34px; }
.bm-item small { font-size: 11px; color: var(--text-secondary); white-space: normal; }
.bm-item.is-unmeasured .bm-item-name, .bm-item.is-unmeasured small { color: var(--text-muted); }
.bm-item.is-unmeasured .form-control { background: var(--surface-muted); }
.bm-avg, .bm-total { font: 700 15px 'Roboto', sans-serif; color: var(--text-strong); }
.bm-matrix tfoot th, .bm-matrix tfoot td { border-top: 2px solid var(--line-strong); background: var(--surface); }
.bm-total-label { color: var(--text-strong); font-weight: 700; white-space: normal; }
.bm-total-label small { display: block; margin-top: 2px; font-weight: 400; font-size: 12px; color: var(--text-secondary); }

.bm-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bm-pv-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 14px; }
.bm-pv-item b { color: var(--text-strong); font-size: 15px; }
.bm-pv-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.bm-pv-sub { margin-left: 6px; font-size: 13px; color: var(--text-secondary); }
.bm-try { max-width: 140px; }
@media (max-width: 900px) { .bm-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.bm-save-bar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 20px; padding: 12px 0; background: linear-gradient(to top, #FFFFFF 70%, rgba(255, 255, 255, 0)); }
.bm-save-bar .field-help { margin: 0; }

/* 카드 머리 오른쪽 도구 묶음 (2026-09-23 회원 목록 엑셀 · 표시 개수) */
.card-header-tools { display: flex; align-items: center; gap: 12px; }

/* ============================================================
   대시보드 설문 진행 흐름 (2026-09-23) — flow-*
   ============================================================ */
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.flow-phase-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--line-strong); }
.flow-phase-head b { font-size: 15px; color: var(--text-strong); }
.flow-phase-head span { font-size: 12px; color: var(--text-secondary); }
.flow-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.flow-step { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--card-line); border-radius: var(--radius); color: inherit; text-decoration: none; transition: background .15s, border-color .15s; }
.flow-step:hover { background: var(--surface-hover); border-color: var(--line-strong); }
.flow-no { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #FFFFFF; font: 700 13px/26px 'Roboto', sans-serif; text-align: center; }
.flow-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.flow-text b { font-size: 14px; color: var(--text-strong); }
.flow-text span { font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.flow-text small { font-size: 12px; color: var(--text-muted); }
/* 끝낸 걸음 — 번호 자리에 체크를 넣고 테두리를 눕힌다 (2026-10-13) */
.flow-step.is-done .flow-no { background: var(--success, #2E7D63); }
.flow-step.is-done { border-color: var(--line); background: var(--surface-soft, transparent); }
.flow-text b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.flow-text b .badge { font-weight: 700; }
.flow-go { flex: none; align-self: center; color: var(--text-muted); }
.flow-go svg { width: 16px; height: 16px; }
@media (max-width: 1100px) { .flow { grid-template-columns: minmax(0, 1fr); } }

/* 임시 비밀번호 발급 창 (2026-09-23) */
.mp-tp { display: flex; flex-direction: column; gap: 8px; }
.mp-tp p { margin: 0 0 4px; }
.mp-tp-label { margin-top: 6px; font-size: 12px; color: var(--text-strong); }
.mp-tp-opt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.mp-tp-opt input { margin: 0; accent-color: var(--primary); }
.mp-tp-opt:has(input:disabled) { color: var(--text-muted); cursor: default; }
.mp-tp-opt[hidden] { display: none; }

/* ============================================================
   일반 설문 문항 고르기 (2026-09-29) — sv-q-*
   ============================================================ */
.sv-q { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 1000px) { .sv-q { grid-template-columns: minmax(0, 1fr); } }
.sv-q-results, .sv-q-list { list-style: none; margin: 10px 0 0; padding: 0; max-height: 360px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.sv-q-list { counter-reset: q; }
.sv-q-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.sv-q-row:last-child { border-bottom: 0; }
.sv-q-list .sv-q-row::before { counter-increment: q; content: counter(q); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-muted); color: var(--text-secondary); font: 700 11px/22px 'Roboto', sans-serif; text-align: center; }
.sv-q-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sv-q-text b { font-size: 13px; color: var(--text-strong); word-break: keep-all; }
.sv-q-text small { font-size: 12px; color: var(--text-muted); }
.sv-q-move { display: flex; gap: 4px; }
.sv-q-move .btn { width: 30px; padding: 0; }
.sv-q-empty { padding: 16px 12px; font-size: 13px; color: var(--text-muted); }

/* 일반 설문 결과 (응답 분포) */
.sv-r-q { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.sv-r-q:last-child { border-bottom: 0; }
.sv-r-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sv-r-head b { font-size: 14px; color: var(--text-strong); word-break: keep-all; }
.sv-r-head small { flex: none; font-size: 12px; color: var(--text-muted); }
.sv-r-opt { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) 96px; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13px; }
.sv-r-bar { height: 12px; border-radius: 6px; background: var(--surface-muted); overflow: hidden; }
.sv-r-bar span { display: block; height: 100%; background: var(--primary); }
.sv-r-num { text-align: right; color: var(--text-secondary); font-family: 'Roboto', sans-serif; }
.sv-r-texts { margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); max-height: 220px; overflow-y: auto; }
.sv-r-texts li { font-size: 13px; color: var(--text-secondary); padding: 4px 0; border-bottom: 1px dashed var(--line); word-break: keep-all; }
.sv-r-texts li:last-child { border-bottom: 0; }

/* 척도 템플릿 만들기 (2026-09-29) */
.qa-tpl-new { margin: 12px 0 16px; border: 1px solid var(--card-line); border-radius: var(--radius); }
.qa-tpl-new > summary { display: flex; align-items: center; gap: 6px; padding: 10px 14px; font-size: 13px; font-weight: 700; color: var(--text-strong); cursor: pointer; list-style: none; }
.qa-tpl-new > summary::-webkit-details-marker { display: none; }
.qa-tpl-new > summary svg { width: 14px; height: 14px; }
.qa-tpl-new[open] > summary { border-bottom: 1px solid var(--line); }
.qa-tpl-form { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.qa-tpl-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 12px; }
.qa-tpl-preview { display: flex; flex-wrap: wrap; gap: 6px; }
.qa-tpl-chip { padding: 4px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-muted); font-size: 12px; color: var(--text-secondary); }
.qa-tpl-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 640px) { .qa-tpl-row { grid-template-columns: minmax(0, 1fr); } }

/* 카테고리 진단 필터 (2026-09-29) */
.cat-diagfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.cat-diagfilter-label { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.cat-diagfilter-label svg { width: 14px; height: 14px; }
.cat-diagbtn { padding: 6px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--text-secondary); font: 500 13px var(--font); cursor: pointer; }
.cat-diagbtn:hover { border-color: var(--line-strong); color: var(--text-strong); }
.cat-diagbtn small { margin-left: 4px; font-size: 12px; color: var(--text-muted); font-family: 'Roboto', sans-serif; }
.cat-diagbtn.is-active { background: var(--primary); border-color: var(--primary); color: #FFFFFF; font-weight: 700; }
.cat-diagbtn.is-active small { color: rgba(255, 255, 255, .75); }

/* 지표 카드의 보조 설명 (2026-09-29 예상 응답 시간 기준 표시) */
.qa-stat-note { display: block; margin-top: 2px; font-style: normal; font-size: 11px; color: var(--text-muted); }

/* 답변 유형 확장 (2026-09-30): 2축 이름·숫자 척도 라벨 입력, 2축 미리보기 */
.qa-labels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.qa-pv-axis { margin: 10px 0 4px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
@media (max-width: 640px) { .qa-labels { grid-template-columns: minmax(0, 1fr); } }

/* ---- 카카오 알림톡 준비 (2026-09-30) ---- */
.sv-seg label.is-off { cursor: not-allowed; }
.sv-seg label.is-off span { color: var(--text-muted); background: var(--surface-2); }
.sv-seg label.is-off span small { font-size: 11px; margin-left: 4px; opacity: .8; }

.sv-kakao .card-body { display: grid; gap: 16px; }
.sv-kakao-steps { margin: 0; padding-left: 20px; display: grid; gap: 12px; }
.sv-kakao-steps li { font-size: 13px; }
.sv-kakao-steps li b { margin-right: 6px; }
.sv-kakao-steps li small { display: block; margin-top: 3px; color: var(--text-secondary); font-size: 12.5px; line-height: 1.6; }
.sv-kakao-steps code,
.sv-kakao-need code { background: var(--surface-2); border-radius: 4px; padding: 1px 5px; font-size: 12px; }
.sv-kakao-tpl { display: grid; gap: 8px; }
.sv-kakao-tpl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sv-kakao-tpl-head b { font-size: 13px; }
.sv-kakao-tpl-head b small { font-weight: 400; color: var(--text-muted); margin-left: 6px; }
.sv-kakao-tpl textarea { font-size: 12.5px; line-height: 1.7; background: var(--surface-2); }
.sv-kakao-need { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 12px 16px; }
.sv-kakao-need b { font-size: 13px; }
.sv-kakao-need ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 12.5px; color: var(--text-secondary); }
.sv-kakao-need ul li { list-style: disc; }

/* ---- AI 코멘트 템플릿 (B2-08, 2026-09-30) ---- */
.ai-model { font-size: 12.5px; color: var(--text-secondary); margin-right: 4px; }
.ai-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .ai-layout { grid-template-columns: minmax(0, 1fr); } }
.ai-list { display: grid; }
.ai-item {
    display: grid; gap: 5px; text-align: left; width: 100%;
    padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line);
    background: transparent; cursor: pointer;
}
.ai-item:last-child { border-bottom: 0; }
.ai-item:hover { background: var(--surface-2); }
.ai-item.is-on { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--primary); }
.ai-item b { font-size: 13.5px; }
.ai-item-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; }
.ai-main { display: grid; gap: 16px; }
.ai-vars { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ai-var {
    border: 1px solid var(--line); background: var(--surface-2); color: var(--text-strong);
    border-radius: 20px; padding: 4px 11px; font-size: 12px; cursor: pointer;
}
.ai-var:hover { border-color: var(--primary); color: var(--primary); }
.ai-safety { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
/* 프롬프트·안전 규칙은 위 입력 묶음과 붙어 보여 구분선과 여백을 둔다 */
#aiForm .card-body > .form-grid + .form-field,
#aiForm .card-body > .form-field + .form-field {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}
#aiForm .card-body > .form-field > .form-label { margin-bottom: 10px; }
#aiForm .textarea { min-height: 260px; line-height: 1.7; }
.ai-test-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ai-test-bar .form-select { max-width: 420px; }
.ai-result { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; background: var(--surface-2); }
.ai-result-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.ai-result-text { margin: 0; font-size: 13.5px; line-height: 1.8; white-space: pre-wrap; }
.ai-sent { margin-top: 10px; }
.ai-sent summary { font-size: 12.5px; color: var(--text-secondary); cursor: pointer; }
.ai-sent pre { margin: 8px 0 0; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
    font-size: 12px; line-height: 1.6; white-space: pre-wrap; max-height: 320px; overflow: auto; }

/* 본문 에디터 (editor.js) — 2026-10-01 */
.ed-note { margin: 6px 2px 0; font-size: 12px; color: var(--text-muted); min-height: 16px; }
.ed-note.is-error { color: #C0392B; font-weight: 500; }
.ql-snow .ql-editor img { max-width: 100%; height: auto; }
.ql-snow .ql-editor blockquote { border-left: 3px solid var(--line); padding-left: 12px; color: var(--text-muted); }
.ql-snow .ql-editor pre.ql-syntax { background: #2C3E50; color: #ECF0F1; border-radius: 6px; padding: 12px; }

/* ---- 결과 리포트 — 평면 목록 (2026-10-14 개선요청 3번) ------------------
   설문 목록과 같은 틀을 쓰되, 응답률이 낮은 줄은 눈에 먼저 들어오게 한다.
   결과를 보러 오는 사람이 가장 먼저 가리는 것이 「이 결과를 믿어도 되는가」다. */
.sv-rate-bar.is-low i { background: #C0392B; }

.rp-list-scope { padding: 10px 16px; margin-bottom: 14px; background: var(--surface-muted);
    border-radius: var(--radius-sm); font-size: 12px; color: var(--text-muted); }
.rp-list-scope b { color: var(--text); }

/* 내려받기 창의 체크 한 줄 — 켜는 것이 사람의 결정이어야 해서 눈에 띄게 둔다 */
.dl-chk { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; cursor: pointer; }
.dl-chk input { width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--primary); flex: none; }

/* 여러 화면이 쓰고 있는데 정의가 없던 유틸 (2026-10-14).
   --text-muted 토큰은 처음부터 있었으나 클래스를 만들어 두지 않아, `text-muted` 를
   붙인 곳이 전부 본문 색으로 나왔다. 흐리게 보이려던 곁말들을 제 색으로 돌린다. */
.text-muted { color: var(--text-muted); }

/* ---- 무료체험 관리 상단 카드 (B1-03, 2026-10-15) ----------------------------
   .qa-stat 은 내용만큼만 넓어져 다섯 장을 늘어놓으면 들쭉날쭉했다. 여기서는 다섯이
   한 줄을 고르게 나눠 쓰고, 상태마다 아이콘 색을 달리해 눈으로 먼저 가려지게 한다.
   숫자 아래 한 줄은 꾸밈이 아니라 「이 상태가 무엇인지」를 적는다 — 접수와 전환의
   뜻을 매번 되묻지 않게 한다. */
.tr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tr-card {
    display: flex; align-items: flex-start; gap: 13px;
    padding: 15px 16px; background: var(--surface);
    border: 1px solid var(--card-line); border-radius: var(--radius);
    text-decoration: none; cursor: pointer;
}
.tr-card:hover { border-color: var(--line-strong); }
.tr-card-icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 40px; height: 40px; border-radius: 9px;
    background: var(--surface-muted); color: var(--text-muted);
}
.tr-card-icon svg { width: 19px; height: 19px; stroke-width: 1.75; }
.tr-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tr-card-text > span { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.tr-card b {
    font-family: 'Roboto', sans-serif; font-size: 25px; font-weight: 700; line-height: 1.15;
    color: var(--text-strong); font-variant-numeric: tabular-nums;
}
.tr-card small { font-size: 11px; line-height: 1.45; color: var(--text-muted); white-space: normal; }

/* 상태별 색 — 뱃지와 같은 짝을 쓴다. 목록의 상태 뱃지와 눈에 이어지게 한다 */
.tr-card.t-wait      .tr-card-icon { background: #FFF6E5; color: #B26B00; }
.tr-card.t-approved  .tr-card-icon { background: #EAEEF3; color: var(--primary); }
.tr-card.t-rejected  .tr-card-icon { background: var(--surface-muted); color: var(--text-muted); }
.tr-card.t-converted .tr-card-icon { background: var(--accent-soft); color: var(--accent-dark); }

/* 고른 카드 — 테두리를 강조색으로 두르고 숫자도 같은 색으로 (회원 목록 카드와 같은 방식) */
.tr-card.is-active { border: 2px solid var(--accent); padding: 14px 15px; }
.tr-card.is-active b { color: var(--accent-dark); }

/* 처리를 기다리는 건이 있으면 그 카드만 눈에 띄게 한다 — 들어와서 가장 먼저 볼 것이다 */
.tr-card.t-wait.has-todo { border-color: #E8B964; background: #FFFCF5; }
.tr-card.t-wait.has-todo b { color: #B26B00; }

@media (max-width: 900px) {
    .tr-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .tr-card small { display: none; }
}

/* 회사 주소 찾기 (2026-10-15) — 도로명 칸과 「주소 찾기」 단추를 한 줄에 둔다 */
.addr-row { display: flex; gap: 8px; align-items: stretch; }
.addr-row .form-control { flex: 1; min-width: 0; }
.addr-row .btn { flex: none; white-space: nowrap; }

/* ---- 대시보드 (2026-10-15, 「261014 개선 필요사항」 1번) --------------------
   구역을 셋으로 나눈다 — 운영 현황 · 진행 중 설문 · 경영 현황.
   구역 제목을 두어 어디까지가 한 묶음인지 보이게 한다. */
.dash-h { margin: 26px 0 12px; font-size: 14px; font-weight: 700; color: var(--text-secondary);
    display: flex; align-items: baseline; gap: 10px; }
.dash-h:first-of-type { margin-top: 0; }
.dash-h-note { font-size: 11.5px; font-weight: 400; color: var(--text-muted);
    padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; }

/* 누를 수 있는 지표 카드 — 글자 색과 밑줄이 생기지 않게 한다 */
a.kpi { text-decoration: none; color: inherit; }
a.kpi:hover { border-color: var(--line-strong); }
/* 처리할 것이 있는 카드만 눈에 띄게. 숫자가 0 이면 다른 카드와 같아진다 */
.kpi.is-caution { border: 2px solid #E8B964; padding: 19px; background: #FFFCF5; }
.kpi.is-caution .kpi-icon { border-color: #E8B964; color: #B26B00; }
.kpi.is-caution .kpi-value { color: #B26B00; }
.kpi-ribbon.is-warn { background: #B26B00; }

/* 진행 중 설문 — 손봐야 할 줄을 바탕색으로 띄운다 */
.dash-hot { background: #FFFCF5; }
.dash-due { color: #C0392B; font-weight: 700; }

.dash-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px;
    align-items: stretch; }
/* 두 장의 키를 맞춘다 — 안쪽 내용이 늘어나도록 카드까지 세로로 펴 준다.
   그러지 않으면 막대가 적은 쪽이 위에 붙고 아래가 비어 짝이 안 맞아 보인다 */
/* .card + .card 의 margin-top:20px 가 나란히 놓인 둘째 칸까지 밀어 내린다.
   격자 안에서는 gap 이 사이를 벌리므로 꺼야 두 장의 윗선이 맞는다 (다른 격자들도 같다) */
.dash-two > .card + .card { margin-top: 0; }
.dash-two > .card { height: 100%; margin-bottom: 0; display: flex; flex-direction: column; }
.dash-two > .card > .card-body { flex: 1; display: flex; flex-direction: column; }

/* 회원사 단계 — 가로 막대 셋 */
.fnl { display: grid; gap: 10px; }
.fnl-row { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: center; gap: 12px; }
.fnl-k { font-size: 12.5px; color: var(--text-secondary); }
.fnl-bar { display: block; height: 30px; background: var(--surface-muted); border-radius: 6px; overflow: hidden; }
.fnl-bar i { display: flex; align-items: center; justify-content: flex-end; height: 100%; padding-right: 10px;
    border-radius: 6px; font-style: normal; font-size: 12.5px; font-weight: 700; color: #fff;
    font-variant-numeric: tabular-nums; white-space: nowrap; }
.fnl-bar i.b-all  { background: #9AA3AC; }
.fnl-bar i.b-free { background: #5B7FC4; }
.fnl-bar i.b-paid { background: var(--accent); }

.fnl-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.fnl-kpis > div { display: grid; gap: 2px; }
.fnl-kpis.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fnl-kpis span { font-size: 12px; color: var(--text-muted); }
.fnl-kpis b { font-family: 'Roboto', sans-serif; font-size: 22px; line-height: 1.2; color: var(--text-strong);
    font-variant-numeric: tabular-nums; }
.fnl-kpis small { font-size: 11px; color: var(--text-muted); }

/* 월별 유료 구매 — 차트 라이브러리를 들이지 않고 막대만 세운다 */
.mbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; align-items: end;
    flex: 1; min-height: 180px; }
.mbar-col { display: grid; grid-template-rows: 18px minmax(0, 1fr) 20px; align-items: end;
    justify-items: center; height: 100%; }
.mbar-col b { font-family: 'Roboto', sans-serif; font-size: 13px; color: var(--text-strong); }
.mbar-col i { display: block; width: 60%; max-width: 46px; background: var(--accent); border-radius: 5px 5px 0 0; }
.mbar-col span { font-size: 11.5px; color: var(--text-muted); }

@media (max-width: 1100px) {
    .fnl-row { grid-template-columns: 104px minmax(0, 1fr); }
}