/* ========================================
   RISK_NOTE - 모바일 사용자 전용 스타일
   공통 부분은 common/, components/ 로 분리됨
   - variables.css: CSS 변수
   - reset.css: 리셋/기본 스타일
   - utilities.css: 유틸리티 클래스
   - components/: 뱃지, 버튼, 폼, 테이블, 카드, 서명, 캘린더, 오버레이
   ======================================== */

/* ── 모바일 컨테이너 ── */
.app-wrap {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    background: var(--bg-card);
    position: relative;
}

/* ── 상단 헤더 ── */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.app-header .back-btn {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; color: var(--ink); cursor: pointer;
    background: none; border: none;
}
.app-header .title {
    font-size: 1.0625rem; font-weight: 600; color: var(--ink);
}
.app-header .right-area {
    display: flex; gap: 8px;
}
.app-header .icon-btn {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.125rem; color: var(--ink-light); cursor: pointer;
    background: none; border: none; border-radius: 50%;
}

/* ── 본문 ── */
.app-body {
    padding: 0 16px 100px;
}

/* ── 하단 탭 바 ── */
.app-tab-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    display: flex;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.app-tab-bar .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0 6px;
    white-space: nowrap;
    font-size: 0.6875rem;
    color: #999;
    cursor: pointer;
    text-decoration: none;
}
.app-tab-bar .tab-item .tab-icon {
    font-size: 1.25rem;
    margin-bottom: 2px;
}
.app-tab-bar .tab-item.active {
    color: var(--accent);
    font-weight: 600;
}

/* ── 인증 페이지 전용 ── */
.auth-page {
    min-height: 100vh;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
}
.auth-logo {
    text-align: center;
    padding: 60px 0 20px;
}
.auth-logo h1 {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.5px;
}
.auth-logo p {
    font-size: 0.875rem;
    color: #888;
    margin-top: 4px;
}
.auth-body {
    flex: 1;
    padding: 0 24px;
}

/* ── 현장 정보 카드 ── */
.site-info-card {
    background: var(--accent-soft);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
}
.site-info-card .label {
    font-size: 0.75rem;
    color: var(--ink-light);
    margin-bottom: 2px;
}
.site-info-card .value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 10px;
}
.site-info-card .value:last-child {
    margin-bottom: 0;
}

/* 폼/셀렉트는 u-form-group / u-form-input / u-form-select 단일화 (user_components.css). 옛 .form-* 정의 제거 (2026-05-12). */

/* ── 역할 선택 라디오 ── */
.role-selector {
    display: flex;
    gap: 10px;
}
.role-option {
    flex: 1;
    position: relative;
}
.role-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}
.role-option .role-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.role-option .role-label .role-icon {
    font-size: 1.75rem;
    margin-bottom: 6px;
}
.role-option .role-label .role-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
}
.role-option .role-label .role-desc {
    font-size: 0.6875rem;
    color: #999;
    margin-top: 2px;
}
.role-option input[type="radio"]:checked + .role-label {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.role-option input[type="radio"]:checked + .role-label .role-name {
    color: var(--accent);
}

/* 버튼은 u-btn / u-btn-primary / u-btn-secondary 단일화 (user_components.css). 옛 .btn-* 정의 제거 (2026-05-12). */

/* ── 링크 텍스트 ── */
.auth-link {
    text-align: center;
    padding: 16px 0;
    font-size: 0.875rem;
    color: var(--ink-light);
}
.auth-link a {
    color: var(--accent);
    font-weight: 600;
}

/* 알림은 RN.alert() JS 헬퍼 / 안내문구는 u-hint 통일. 옛 .hint-text · .alert-* 정의 제거 (2026-05-12). */

/* ── 자동완성 드롭다운 ── */
.autocomplete-wrap {
    position: relative;
}
.autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 50;
    display: none;
}
.autocomplete-list.show {
    display: block;
}
.autocomplete-item {
    padding: 12px 14px;
    font-size: 0.875rem;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
}
.autocomplete-item:hover {
    background: var(--accent-soft);
}
.autocomplete-item .site-name {
    font-weight: 600;
    color: var(--ink);
}
.autocomplete-item .company-name {
    font-size: 0.75rem;
    color: #888;
    margin-top: 2px;
}

/* 텍스트 영역은 u-form-textarea 단일화 (user_components.css). 옛 .form-textarea 정의 제거 (2026-05-12). */

/* ── 배너 알림 카드 ── */
.banner-card {
    background: var(--safety-soft);
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
    cursor: pointer;
}
.banner-card.info {
    background: var(--mgr-soft);
    border-color: #bfdbfe;
}
.banner-card.success {
    background: var(--green-soft);
    border-color: #bbf7d0;
}
.banner-card .banner-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #dc2626;
    margin-bottom: 4px;
}
.banner-card.info .banner-title { color: var(--mgr); }
.banner-card.success .banner-title { color: var(--green); }
.banner-card .banner-desc {
    font-size: 0.8125rem;
    color: var(--ink-light);
}
.banner-card .banner-action {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--accent);
    margin-top: 8px;
}

/* ── 캘린더 ── */
.calendar-wrap {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
}
.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.calendar-header .month-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink);
}
.calendar-header .nav-btn {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: #f3f4f6; border: none; border-radius: 8px;
    font-size: 1rem; cursor: pointer; color: var(--ink-light);
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}
.calendar-grid .day-label {
    font-size: 0.75rem;
    color: #9ca3af;
    padding: 4px 0;
    font-weight: 600;
}
.calendar-grid .day-cell {
    position: relative;
    padding: 8px 0;
    font-size: 0.875rem;
    color: var(--ink);
    cursor: pointer;
    border-radius: 8px;
}
.calendar-grid .day-cell:hover { background: var(--accent-soft); }
.calendar-grid .day-cell.today {
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    border-radius: 50%;
}
.calendar-grid .day-cell.has-event::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--accent);
}
.calendar-grid .day-cell.has-report::after { background: var(--mgr); }
.calendar-grid .day-cell.has-tbm::after { background: var(--green); }
.calendar-grid .day-cell.sunday { color: #ef4444; }
.calendar-grid .day-cell.saturday { color: #3b82f6; }
.calendar-grid .day-cell.other-month { color: var(--border); }

/* 캘린더 날짜 클릭 상세 */
.calendar-detail {
    background: var(--bg);
    border-radius: 10px;
    padding: 14px;
    margin-top: 12px;
}
.calendar-detail .detail-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
}
.calendar-detail .detail-item {
    font-size: 0.8125rem;
    color: var(--ink-light);
    padding: 4px 0;
}

/* .list-card 는 사용자단(rn_user/rn_safe_mgr/rn_site_mgr) 사용 0건 — admin.css 의 fnc_mgr 용 정의가 별도 유지. 사용자단 dead 정의 제거 (2026-05-12). */

/* 뱃지는 u-badge 단일화 (user_components.css). 옛 .badge / .badge-* 정의 제거 (2026-05-12). */

/* ── 섹션 구분 ── */
.section-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ink);
    padding: 16px 0 8px;
    border-bottom: 2px solid var(--ink);
    margin-bottom: 12px;
}
.section-subtitle {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-light);
    padding: 12px 0 6px;
}

/* ── 필터 바 ── */
.filter-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    padding: 12px 0;
}
.filter-bar select {
    height: 36px;
    padding: 0 28px 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.8125rem;
    background: var(--bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%236B6660' d='M5 7L0 2h10z'/%3E%3C/svg%3E") no-repeat right 8px center;
    -webkit-appearance: none;
    appearance: none;
}

/* ── 위험도 표시 ── */
.risk-level {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
}
.risk-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.risk-dot.very-high { background: #DC2626; }
.risk-dot.high { background: #C2410C; }
.risk-dot.medium { background: #D97706; }
.risk-dot.low { background: #065F46; }
.risk-dot.very-low { background: #065F46; }

/* ── 빈도x강도 선택 ── */
.score-selector {
    display: flex;
    gap: 6px;
    margin: 8px 0;
}
.score-selector .score-btn {
    flex: 1;
    height: 40px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--ink);
}
.score-selector .score-btn.selected {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

/* ── 위험도 결과 ── */
.risk-result {
    padding: 12px 16px;
    border-radius: 10px;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    margin: 12px 0;
}
.risk-result.very-high { background: var(--safety-soft); color: #DC2626; border: 2px solid #fecaca; }
.risk-result.high { background: #fff7ed; color: #C2410C; border: 2px solid #fed7aa; }
.risk-result.medium { background: var(--yellow-soft); color: var(--yellow); border: 2px solid #fef08a; }
.risk-result.low { background: var(--green-soft); color: #065F46; border: 2px solid #bbf7d0; }

/* ── 평가 유형 선택 ── */
.type-selector {
    display: flex;
    gap: 8px;
}
.type-selector .type-btn {
    flex: 1;
    height: 40px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--ink-light);
}
.type-selector .type-btn.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

/* 테이블은 u-table 단일화 (user_components.css). 옛 .data-table 정의 제거 (2026-05-12). */

/* ── 서명 영역 ── */
.signature-area {
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 16px;
    margin: 12px 0;
    text-align: center;
}
.signature-area.safety {
    border-color: var(--accent);
}
.signature-area.rep {
    border-color: var(--rep);
}
.signature-area.worker {
    border-color: var(--green);
}
.signature-canvas {
    width: 100%;
    height: 150px;
    background: #fafafa;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: crosshair;
}
.signature-info {
    font-size: 0.8125rem;
    color: var(--ink-light);
}
.signature-clear {
    display: inline-block;
    font-size: 0.8125rem;
    color: #ef4444;
    cursor: pointer;
    margin-top: 6px;
    background: none;
    border: none;
    font-weight: 600;
}

/* ── 서명 타임라인 ── */
.sign-timeline {
    padding: 12px 0;
}
.sign-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    position: relative;
}
.sign-step::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 32px;
    bottom: -8px;
    width: 2px;
    background: var(--border);
}
.sign-step:last-child::before { display: none; }
.sign-step .step-icon {
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    background: var(--border);
    color: #9ca3af;
}
.sign-step.done .step-icon { background: var(--green); color: #fff; }
.sign-step.current .step-icon { background: var(--accent); color: #fff; }
.sign-step.waiting .step-icon { background: var(--border); color: #9ca3af; }
.sign-step .step-info {
    flex: 1;
}
.sign-step .step-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
}
.sign-step .step-detail {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 2px;
}

/* ── 체크 리스트 ── */
.check-list .check-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}
.check-list .check-item:last-child { border-bottom: none; }
.check-list .check-item input[type="checkbox"] {
    width: 20px; height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--accent);
}
.check-list .check-text {
    flex: 1;
}
.check-list .check-main {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
}
.check-list .check-sub {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 2px;
}

/* ── 위험요인 카드 ── */
.hazard-card {
    background: var(--yellow-soft);
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
}
.hazard-card .hazard-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #92400e;
    margin-bottom: 4px;
}
.hazard-card .hazard-measure {
    font-size: 0.8125rem;
    color: var(--ink-light);
}

/* ── 건강상태 라디오 ── */
.health-selector {
    display: flex;
    gap: 12px;
    margin: 8px 0;
}
.health-selector label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}
.health-selector input[type="radio"] {
    accent-color: var(--accent);
    width: 18px; height: 18px;
}

/* ── 이행 상태 ── */
.improve-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.8125rem;
}
.improve-item:last-child { border-bottom: none; }
.improve-item .improve-name {
    font-weight: 600;
    color: var(--ink);
}
.improve-item .improve-status {
    font-weight: 600;
}

/* ── 의견 유형 선택 ── */
.opinion-type-selector .type-card {
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
}
.opinion-type-selector .type-card.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.opinion-type-selector .type-card .type-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ink);
}
.opinion-type-selector .type-card .type-desc {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 2px;
}

/* ── 아차사고 등급 ── */
.grade-selector {
    display: flex;
    gap: 8px;
}
.grade-selector .grade-btn {
    flex: 1;
    padding: 16px 8px;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card);
    cursor: pointer;
    text-align: center;
}
.grade-selector .grade-btn.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.grade-selector .grade-btn .grade-label {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ink);
}
.grade-selector .grade-btn .grade-desc {
    font-size: 0.6875rem;
    color: #9ca3af;
    margin-top: 4px;
}

/* 인라인 버튼은 u-btn-sm / u-btn-outline / u-btn-danger 단일화 (user_components.css). 옛 .btn-sm/.btn-outline/.btn-danger 정의 제거 (2026-05-12). */

/* 빈 상태는 .u-empty 단일 컴포넌트 사용 (user_components.css L475). 옛 .empty-state 정의 제거 (2026-05-12). */

/* ── 사진 업로드 ── */
.photo-upload {
    display: flex;
    gap: 8px;
    margin: 8px 0;
}
.photo-upload .photo-btn {
    width: 80px; height: 80px;
    border: 2px dashed var(--border);
    border-radius: 10px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    font-size: 0.75rem; color: #9ca3af;
    cursor: pointer; background: #fafafa;
}
.photo-upload .photo-btn .photo-icon {
    font-size: 1.5rem;
    margin-bottom: 4px;
}
.photo-upload .photo-preview {
    width: 80px; height: 80px;
    border-radius: 10px;
    background: var(--border);
    position: relative;
}

/* ── 법적 체크 카드 ── */
.legal-check {
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
}
.legal-check:last-child { border-bottom: none; }
.legal-check .legal-name { color: var(--ink); }
.legal-check .legal-status { font-weight: 600; }

/* ── 탭 내비게이션 (서브 탭) ── */
.sub-tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--border);
    margin-bottom: 16px;
    /* 넘치면 탭 단위로 wrap. overflow-x 는 쓰지 않음 —
       .sub-tab 의 margin-bottom:-2px 가 overflow-y 에 걸려 헛스크롤바가 생김. */
}
.sub-tabs .sub-tab {
    flex-shrink: 0;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #9ca3af;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}
.sub-tabs .sub-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* 역할별 테마 클래스(.theme-safety/mgr/worker/rep)는 운영 JSP 사용 0건 — 폐기된 rn_assess/rn_report 옛 목업에만 잔재. 정의 제거 (2026-05-12). */

/* ── 유틸리티 ── */
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.text-center { text-align: center; }
.text-sm { font-size: 0.8125rem; }
.text-gray { color: #9ca3af; }
.text-red { color: #dc2626; }
.text-blue { color: var(--mgr); }
.text-green { color: var(--green); }
.text-orange { color: #ea580c; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }

/* ── 팝업 오버레이 (SL_HUB 패턴) ── */
.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    height: 100vh;
    background: rgba(0,0,0,0.4);
    z-index: 500;
}
.popup-overlay.active {
    display: block;
}

/* ========================================
   위험성평가 관리자 홈 (safety_home)
   ======================================== */

/* 캘린더 마커 */
.cal-day {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    padding: 6px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.cal-day:hover { background: var(--accent-soft); }
.cal-day .day-num {
    font-size: 0.875rem; font-weight: 500; color: var(--ink);
}
.cal-day.today .day-num {
    color: var(--accent); font-weight: 700;
}
.cal-day.today {
    background: var(--accent-soft);
    border: 1px solid var(--accent);
}
.cal-day.selected {
    background: var(--mgr-soft);
    border: 1px solid var(--mgr);
}
.cal-day.future .day-num { color: #bbb; }
.cal-day.sunday .day-num { color: #ef4444; }
.cal-day.saturday .day-num { color: #3b82f6; }

/* 마커 점 */
.cal-markers {
    display: flex; gap: 3px; margin-top: 3px; height: 6px; align-items: center;
}
.marker-dot {
    width: 5px; height: 5px; border-radius: 50%;
}
.marker-diamond {
    width: 5px; height: 5px; border-radius: 1px;
    transform: rotate(45deg);
}
.marker-sm {
    width: 4px; height: 4px; border-radius: 50%;
}
.marker-dot.accent { background: var(--accent); }
.marker-diamond.mgr { background: var(--mgr); }
.marker-sm.ink-light { background: var(--ink-light); }

/* 범례 */
.cal-legend {
    display: flex; gap: 16px; margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 0.75rem; color: var(--ink-light);
}
.cal-legend span {
    display: flex; align-items: center; gap: 5px;
}

/* 날짜 상세 */
.date-detail {
    display: none;
    animation: slideUp 0.25s ease-out;
}
.date-detail.show { display: block; }

/* 상세 카드 */
.detail-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 8px;
}
.detail-card .dc-label {
    font-size: 0.75rem; color: var(--ink-light); font-weight: 600; margin-bottom: 6px;
}
.detail-card .dc-title {
    font-size: 0.875rem; font-weight: 600; color: var(--ink);
}
.detail-card .dc-meta {
    font-size: 0.75rem; color: var(--ink-light); margin-top: 3px;
}
.detail-card.report-card {
    border-color: var(--mgr);
}
.detail-card.report-card .dc-title {
    color: var(--mgr);
}

/* 퀵 액션 */
.quick-action {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%;
    padding: 14px 0;
    border-radius: 12px;
    background: var(--accent-soft);
    border: 1.5px solid var(--accent);
    color: var(--accent);
    font-size: 0.9375rem; font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.quick-action:hover {
    background: var(--accent);
    color: #fff;
}

/* TBM 상태 카드 */
.tbm-status-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
}
.tbm-status-card .tsc-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.tbm-status-card .tsc-label {
    font-size: 0.75rem; color: var(--ink-light); font-weight: 600;
}
.tbm-status-card .tsc-badge {
    font-size: 0.6875rem; font-weight: 600;
    color: #dc2626;
    background: var(--safety-soft);
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 2px 8px;
}
.tbm-status-card .tsc-content {
    font-size: 0.875rem; color: var(--ink);
}
.tbm-status-card .tsc-link {
    display: inline-block; margin-top: 6px;
    font-size: 0.8125rem; font-weight: 600; color: var(--accent);
}

.no-record {
    text-align: center; padding: 20px 0;
    font-size: 0.8125rem; color: var(--ink-light);
}

/* 사이트 셀렉터 (헤더 내 select) */
.site-selector {
    border: none; font-size: 1rem; font-weight: 600;
    color: var(--ink); background: transparent;
    -webkit-appearance: none; appearance: none;
    padding-right: 16px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%2710%27 viewBox=%270 0 10 10%27%3E%3Cpath fill=%27%236B6660%27 d=%27M5 7L0 2h10z%27/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right center;
}

/* 알림 벨 (아이콘 버튼 내 배지) */
.icon-btn-badge {
    position: absolute; top: 2px; right: 2px;
    width: 8px; height: 8px;
    background: #dc2626; border-radius: 50%;
}

/* 캘린더 래퍼 */
.calendar-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    margin-top: 8px;
}

/* 요일 라벨 색상 */
.day-label-sun { color: #ef4444; }
.day-label-sat { color: #3b82f6; }

/* 상세 제목 */
.detail-title-sm {
    font-size: 0.875rem; font-weight: 600; color: var(--ink); margin-bottom: 8px;
}

/* 블록 링크 */
.block-link {
    display: block; text-decoration: none;
}

/* 인라인 flex row */
.dc-row {
    display: flex; align-items: center; justify-content: space-between;
}
.dc-category {
    font-size: 0.75rem; color: var(--ink-light); margin-left: 6px;
}

/* ========================================
   종사자 홈 / 근로자대표 홈 (공통)
   ======================================== */

/* 인사 카드 (종사자) */
.greeting-card {
    border-radius: 14px;
    padding: 18px 16px;
}
.greeting-card.worker {
    background: linear-gradient(135deg, var(--green-soft), var(--bg-card));
    border: 1px solid #bbf7d0;
}
.greeting-card.rep {
    background: linear-gradient(135deg, var(--rep-soft), var(--bg-card));
    border: 1px solid #a5f3fc;
}
.greeting-card .gc-role {
    font-size: 0.75rem; color: var(--ink-light); margin-bottom: 4px;
}
.greeting-card .gc-badge {
    display: inline-block;
    font-size: 0.6875rem; font-weight: 600;
    color: var(--rep);
    background: rgba(8,145,178,0.12);
    border-radius: 6px;
    padding: 2px 8px;
    margin-bottom: 6px;
}
.greeting-card .gc-name {
    font-size: 1.25rem; font-weight: 700; color: var(--ink);
}
.greeting-card .gc-site {
    font-size: 0.75rem; color: var(--ink-light); margin-top: 4px;
}

/* TBM 카드는 rn_safe_mgr/tbm_form.jsp 의 페이지 전용 CSS 에서 정의 (assess-card 톤).
   여기에 있던 .tbm-card / .tc-bell / .tc-tasks / .tc-hazards / .tc-link / .tc-arrow 정의는
   사용처 없는 죽은 코드였고, 일부 속성(border-radius 12px / border #fecaca / justify-content: space-between)이
   페이지 전용과 충돌해서 시각이 의도와 달리 보이는 원인이었으므로 제거함. */

.tbm-empty {
    padding: 20px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    text-align: center;
    font-size: 0.8125rem; color: var(--ink-light);
}

/* 섹션 라벨 */
.sec-label {
    font-size: 0.75rem; font-weight: 600; color: var(--ink-light);
    margin-bottom: 8px;
}
.sec-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.sec-header .sec-label { margin-bottom: 0; }
.sec-header .sec-link {
    font-size: 0.75rem; font-weight: 600; color: var(--accent);
    text-decoration: none;
}

/* 결과주지 위험 카드 */
.risk-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    margin-bottom: 8px;
}
.risk-item.level-very-high { border-color: rgba(220,38,38,0.2); }
.risk-item.level-high { border-color: rgba(194,65,12,0.2); }
.risk-item .ri-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}
.ri-dot.very-high { background: #DC2626; }
.ri-dot.high { background: #C2410C; }
.ri-dot.medium { background: #D97706; }
.ri-dot.low { background: #065F46; }
.risk-item .ri-hazard {
    font-size: 0.875rem; font-weight: 600; color: var(--ink);
}
.risk-item .ri-measure {
    font-size: 0.75rem; color: var(--ink-light); margin-top: 3px;
}

/* 바로가기 카드 */
.shortcut-card {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none; color: inherit;
    margin-bottom: 8px;
}
.shortcut-card:hover { border-color: var(--ink-light); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.shortcut-card .sc-left {
    display: flex; align-items: center; gap: 12px;
}
.shortcut-card .sc-icon { font-size: 1.125rem; }
.shortcut-card .sc-title {
    font-size: 0.875rem; font-weight: 600; color: var(--ink);
}
.shortcut-card .sc-desc {
    font-size: 0.75rem; color: var(--ink-light); margin-top: 2px;
}
.shortcut-card .sc-arrow {
    font-size: 1rem; color: var(--ink-light);
}
.shortcut-card.warn { border-color: #fef08a; background: var(--yellow-soft); }
.shortcut-card.teal { border-color: #a5f3fc; background: var(--rep-soft); }

/* ========================================
   근로자대표 홈 전용 (worker_rep_home)
   ======================================== */

/* 서명 필요 헤더 */
.sign-needed-header {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 10px;
}
.sign-needed-header .sn-dot {
    width: 8px; height: 8px;
    background: #dc2626;
    border-radius: 50%;
    animation: pulse-dot 1.5s infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.sign-needed-header .sn-text {
    font-size: 0.8125rem; font-weight: 700; color: #dc2626;
}

/* 서명 대기 보고서 카드 */
.pending-card {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1.5px solid #fecaca;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none; color: inherit;
    margin-bottom: 8px;
}
.pending-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.pending-card .pc-title {
    font-size: 0.875rem; font-weight: 600; color: var(--ink);
}
.pending-card .pc-period {
    font-size: 0.75rem; color: var(--ink-light); margin-top: 3px;
}
.pending-card .pc-status {
    font-size: 0.75rem; font-weight: 600; color: #dc2626; margin-top: 5px;
}
.pending-card .pc-arrow {
    font-size: 1rem; color: var(--ink-light); flex-shrink: 0;
}

/* 최근 보고서 카드 (근로자대표 홈 내) */
.rep-report-card {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none; color: inherit;
    margin-bottom: 8px;
}
.rep-report-card:hover { border-color: var(--ink-light); }
.rep-report-card .rpc-left {
    display: flex; align-items: center; gap: 10px;
}
.rep-report-card .rpc-icon {
    font-size: 1rem; color: var(--ink-light);
}
.rep-report-card .rpc-title {
    font-size: 0.875rem; font-weight: 600; color: var(--ink);
}
.rep-report-card .rpc-period {
    font-size: 0.75rem; color: var(--ink-light); margin-top: 2px;
}

/* 서명 진행 표시 */
.sign-progress {
    display: flex; gap: 4px; flex-shrink: 0;
}
.sign-progress .sp-step {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.625rem; font-weight: 600;
}
.sp-step.done {
    background: var(--green-soft); border: 1px solid #bbf7d0; color: var(--green);
}
.sp-step.pending {
    background: #f3f4f6; border: 1px solid var(--border); color: #bbb;
}

/* ========================================
   슬라이드업 애니메이션 (공통)
   ======================================== */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.app-body.animate > * { animation: slideUp 0.3s ease-out both; }
.app-body.animate > *:nth-child(2) { animation-delay: 0.05s; }
.app-body.animate > *:nth-child(3) { animation-delay: 0.1s; }
.app-body.animate > *:nth-child(4) { animation-delay: 0.15s; }
.app-body.animate > *:nth-child(5) { animation-delay: 0.2s; }
.app-body.animate > *:nth-child(6) { animation-delay: 0.25s; }

/* ========================================
   평가 목록 (assessment_list)
   ======================================== */

/* 검색 바 */
.search-bar { display: flex; gap: 8px; margin-bottom: 14px; }
.search-bar .search-input-wrap { flex: 1; position: relative; }
.search-bar .search-input-wrap .s-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #9ca3af; font-size: 0.875rem; pointer-events: none;
}
.search-bar .search-input-wrap input {
    width: 100%; height: 40px; padding: 0 12px 0 36px;
    border: 1.5px solid var(--border); border-radius: 10px;
    font-size: 0.875rem; color: var(--ink); background: var(--bg-card);
}
.search-bar .search-input-wrap input:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,66,26,0.1);
}
.search-bar .filter-btn {
    width: 40px; height: 40px; border: 1.5px solid var(--border); border-radius: 10px;
    background: var(--bg-card); display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--ink-light); font-size: 1rem;
}
.search-bar .filter-btn:active { background: var(--bg); }

/* 평가 카드 내부 레이아웃 */
.assess-card { cursor: pointer; }
.assess-card .card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.assess-card .card-top .left-info .date { font-size: 0.75rem; color: #9ca3af; margin-bottom: 2px; }
.assess-card .card-top .left-info .name { font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.assess-card .card-top .left-info .category { font-size: 0.75rem; color: var(--ink-light); margin-top: 2px; }
.assess-card .card-top .right-info { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.assess-card .card-bottom { display: flex; justify-content: space-between; align-items: center; }
.assess-card .card-bottom .risk-count { font-size: 0.75rem; color: #9ca3af; }
.assess-card .card-bottom .report-included { font-size: 0.75rem; color: var(--accent); font-weight: 600; }
.assess-card .card-bottom .report-none { font-size: 0.75rem; color: #d1d5db; }

/* 새 평가 / 새 보고서 헤더 버튼 */
.btn-new-action {
    display: inline-flex; align-items: center; gap: 4px;
    height: 34px; padding: 0 14px; font-size: 0.8125rem; font-weight: 700;
    border-radius: 8px; border: none; cursor: pointer;
    background: var(--accent); color: #fff;
}
.btn-new-action:active { background: #D03A16; }
.btn-new-action .plus-icon { font-size: 1rem; line-height: 1; }

/* ========================================
   평가 폼 (assessment_form)
   ======================================== */

/* 메타 정보 카드 */
.meta-card {
    background: var(--accent-soft); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
}
.meta-row { display: flex; justify-content: space-between; font-size: 0.875rem; padding: 4px 0; }
.meta-row .label { color: var(--ink-light); }
.meta-row .value { color: var(--ink); font-weight: 600; }

/* 업종/공종 선택 영역 */
.select-section { margin-bottom: 16px; }
.select-section .field-label {
    font-size: 0.8125rem; font-weight: 700; color: var(--ink); margin-bottom: 6px;
    display: flex; align-items: center; gap: 6px;
}
.field-label .step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--accent); color: #fff; font-size: 0.6875rem; font-weight: 700;
}

/* 업종 그리드 */
.industry-grid {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 12px;
}
.industry-grid .ind-btn {
    padding: 10px 4px; border: 1.5px solid var(--border); border-radius: 8px;
    background: var(--bg-card); font-size: 0.75rem; font-weight: 600;
    color: var(--ink-light); cursor: pointer; text-align: center; word-break: keep-all;
}
.industry-grid .ind-btn.selected {
    border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
}

/* 공종 캐스케이딩 */
.cascade-wrap { margin-bottom: 12px; }
.cascade-wrap select {
    width: 100%; height: 44px; padding: 0 14px;
    border: 1.5px solid var(--border); border-radius: 10px;
    font-size: 0.875rem; color: var(--ink); background: var(--bg-card);
    -webkit-appearance: none; appearance: none; margin-bottom: 8px;
}

/* 기인물 검색 */
.cause-search-wrap { position: relative; margin-bottom: 8px; }
.cause-search-wrap input {
    width: 100%; height: 44px; padding: 0 12px 0 36px;
    border: 1.5px solid var(--border); border-radius: 10px;
    font-size: 0.875rem; color: var(--ink); background: var(--bg-card);
}
.cause-search-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,66,26,0.1); }
.cause-search-wrap .s-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #9ca3af; font-size: 0.875rem; pointer-events: none;
}

/* 기인물 카드 */
.cause-card-list { max-height: 240px; overflow-y: auto; }
.cause-card {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 10px;
    background: var(--bg-card); margin-bottom: 6px; cursor: pointer;
    transition: all 0.15s;
}
.cause-card:active, .cause-card.selected {
    border-color: var(--accent); background: var(--accent-soft);
}
.cause-card .c-name { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.cause-card .c-cat { font-size: 0.75rem; color: var(--ink-light); margin-top: 2px; }
.cause-card .c-arrow { color: var(--ink-light); font-size: 0.875rem; }

/* 평가 방법 탭 */
.eval-method-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.eval-method-tabs .m-tab {
    flex: 1; padding: 10px 0; border: 1.5px solid var(--border); border-radius: 10px;
    background: var(--bg-card); font-size: 0.8125rem; font-weight: 600;
    color: var(--ink-light); cursor: pointer; text-align: center;
}
.eval-method-tabs .m-tab.selected {
    border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
}

/* 위험요인 블록 */
.risk-block {
    background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
    padding: 14px; margin-bottom: 12px;
}
.risk-block .block-title {
    font-size: 0.75rem; color: var(--ink-light); font-weight: 600; margin-bottom: 10px;
}
.risk-block .field-group { margin-bottom: 12px; }
.risk-block .field-group > label {
    display: block; font-size: 0.75rem; color: var(--ink-light); font-weight: 600; margin-bottom: 6px;
}
.risk-block .field-group select,
.risk-block .field-group input[type="text"],
.risk-block .field-group input[type="date"] {
    width: 100%; height: 40px; padding: 0 12px;
    border: 1.5px solid var(--border); border-radius: 8px;
    font-size: 0.875rem; color: var(--ink); background: var(--bg-card);
}
.risk-block .hint { font-size: 0.6875rem; color: #9ca3af; margin-top: 4px; }

/* 빈도x강도 버튼 */
.score-row { display: flex; gap: 6px; }
.score-row .s-btn {
    flex: 1; height: 40px; border: 1.5px solid var(--border); border-radius: 8px;
    background: var(--bg-card); font-size: 0.9375rem; font-weight: 700;
    color: var(--ink); cursor: pointer; text-align: center;
}
.score-row .s-btn.sel-freq { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.score-row .s-btn.sel-int { border-color: #ea580c; background: #fff7ed; color: #ea580c; }

/* 3단계 판단법 */
.three-step-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.three-step-row .ts-btn {
    padding: 14px 0; border: 1.5px solid var(--border); border-radius: 10px;
    background: var(--bg-card); text-align: center; cursor: pointer;
}
.three-step-row .ts-btn .ts-label { font-size: 1rem; font-weight: 800; }
.three-step-row .ts-btn .ts-desc { font-size: 0.6875rem; color: var(--ink-light); margin-top: 2px; }
.three-step-row .ts-btn.sel-high { border-color: #dc2626; background: #fef2f2; }
.three-step-row .ts-btn.sel-high .ts-label { color: #dc2626; }
.three-step-row .ts-btn.sel-medium { border-color: var(--yellow); background: var(--yellow-soft); }
.three-step-row .ts-btn.sel-medium .ts-label { color: var(--yellow); }
.three-step-row .ts-btn.sel-low { border-color: var(--green); background: var(--green-soft); }
.three-step-row .ts-btn.sel-low .ts-label { color: var(--green); }

/* 담당자+이행일 인라인 */
.inline-fields { display: flex; gap: 8px; }
.inline-fields input { flex: 1; }

/* 위험요인 추가 버튼 */
.btn-add-risk {
    width: 100%; padding: 12px 0; border: 2px dashed var(--border); border-radius: 10px;
    background: transparent; font-size: 0.875rem; color: var(--ink-light); font-weight: 600;
    cursor: pointer; margin-bottom: 12px;
}
.btn-add-risk:active { background: var(--bg); }

/* 완료/추가 버튼 */
.btn-complete-assess {
    width: 100%; height: 52px; border: none; border-radius: 12px;
    background: var(--accent); color: #fff; font-size: 1rem; font-weight: 700;
    cursor: pointer; margin-bottom: 10px;
}
.btn-complete-assess:active { background: #D03A16; }
.btn-complete-assess:disabled { background: #F4A193; cursor: not-allowed; }
.btn-add-another {
    width: 100%; height: 46px; border: 1.5px solid var(--border); border-radius: 12px;
    background: var(--bg-card); font-size: 0.875rem; color: var(--ink-light); font-weight: 600;
    cursor: pointer; margin-bottom: 20px;
}
.btn-add-another:active { background: var(--bg); }

/* 체크마크 성공 오버레이 (공통) */
.success-overlay {
    display: none; position: fixed; top: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 480px; height: 100vh;
    background: rgba(255,255,255,0.96); z-index: 600;
    flex-direction: column; align-items: center; justify-content: center;
}
.success-overlay.show { display: flex; }
.success-overlay .check-circle {
    width: 80px; height: 80px; border-radius: 50%;
    background: var(--green); display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px; animation: popIn 0.4s ease;
}
.success-overlay .check-circle svg { width: 40px; height: 40px; stroke: #fff; stroke-width: 3; fill: none; }
.success-overlay .success-text { font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.success-overlay .success-sub { font-size: 0.875rem; color: var(--ink-light); margin-top: 4px; }
@keyframes popIn { 0%{transform:scale(0)} 60%{transform:scale(1.15)} 100%{transform:scale(1)} }

/* ========================================
   평가 상세 (assessment_view)
   ======================================== */

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.info-item .info-label { font-size: 0.75rem; color: var(--ink-light); margin-bottom: 2px; }
.info-item .info-value { font-size: 0.875rem; font-weight: 600; color: var(--ink); }

.hazard-section {
    background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
    padding: 14px; margin-bottom: 10px;
}
.hazard-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.hazard-name { font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.hazard-detail-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; font-size: 0.8125rem; border-bottom: 1px solid #f3f4f6;
}
.hazard-detail-row:last-child { border-bottom: none; }
.hazard-detail-row .d-label { color: var(--ink-light); }
.hazard-detail-row .d-value { color: var(--ink); font-weight: 600; }

.status-pending { color: #ea580c; }
.status-progress { color: var(--yellow); }
.status-done { color: var(--green); }

.bottom-actions { display: flex; gap: 10px; padding: 16px 0; }
.bottom-actions .btn { flex: 1; height: 48px; }

/* 삭제 확인 오버레이 */
.confirm-overlay {
    display: none; position: fixed; top: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 480px; height: 100vh;
    background: rgba(0,0,0,0.4); z-index: 500;
    align-items: center; justify-content: center;
}
.confirm-overlay.show { display: flex; }
.confirm-box {
    background: var(--bg-card); border-radius: 16px; padding: 24px; margin: 0 24px;
    text-align: center; width: 100%;
}
.confirm-box .c-title { font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.confirm-box .c-desc { font-size: 0.875rem; color: var(--ink-light); margin-bottom: 20px; }
.confirm-box .c-btns { display: flex; gap: 10px; }
.confirm-box .c-btns button { flex: 1; height: 44px; border-radius: 10px; font-size: 0.875rem; font-weight: 700; cursor: pointer; border: none; }

/* ========================================
   보고서 목록 (report_list)
   ======================================== */

.report-list-card { cursor: pointer; }
.report-list-card .card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.report-list-card .card-top .r-title { font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.report-list-card .card-top .r-period { font-size: 0.75rem; color: var(--ink-light); margin-top: 2px; }
.report-list-card .card-top .r-status { font-size: 0.75rem; font-weight: 600; }
.report-list-card .card-bottom { display: flex; justify-content: space-between; align-items: center; }
.report-list-card .card-bottom .r-created { font-size: 0.75rem; color: #9ca3af; }

/* 서명 인디케이터 */
.sign-indicators { display: flex; gap: 4px; }
.sign-indicators .sign-dot {
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.625rem; font-weight: 700; border: 1.5px solid var(--border);
    color: #9ca3af; background: var(--bg-card);
}
.sign-indicators .sign-dot.done {
    border-color: var(--green); background: var(--green-soft); color: var(--green);
}

.status-completed { color: var(--green); }
.status-need-sign { color: #dc2626; }

/* ========================================
   의견 폼 (opinion_form)
   ======================================== */

.form-section { margin-bottom: 16px; }
.form-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-light);
    margin-bottom: 6px;
}
.info-banner {
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.info-banner.yellow {
    background: var(--yellow-soft);
    border: 1px solid #fde68a;
}
.info-banner .ib-title {
    font-size: 0.8125rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.info-banner.yellow .ib-title { color: #92400e; }
.info-banner .ib-desc {
    font-size: 0.75rem;
    color: var(--ink-light);
    line-height: 1.4;
}

/* 등급 버튼 (의견 폼 전용) */
.grade-btn {
    flex: 1;
    padding: 14px 8px;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}
.grade-btn .grade-label {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ink);
    display: block;
}
.grade-btn .grade-desc {
    font-size: 0.6875rem;
    color: var(--ink-light);
    margin-top: 4px;
    display: block;
}
.grade-btn.selected-a {
    border-color: #dc2626;
    background: var(--safety-soft);
}
.grade-btn.selected-a .grade-label { color: #dc2626; }
.grade-btn.selected-b {
    border-color: #ea580c;
    background: #fff7ed;
}
.grade-btn.selected-b .grade-label { color: #ea580c; }
.grade-btn.selected-c {
    border-color: var(--green);
    background: var(--green-soft);
}
.grade-btn.selected-c .grade-label { color: var(--green); }
.grade-hint {
    font-size: 0.6875rem;
    color: var(--ink-light);
    margin-top: 6px;
}

/* 익명 체크 */
.anon-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
}
.anon-check input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: var(--accent);
}
.anon-check label {
    font-size: 0.8125rem;
    color: var(--ink-light);
    cursor: pointer;
}

/* 제출 버튼 */
.btn-submit {
    display: block;
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    margin-top: 16px;
    transition: all 0.2s;
}
.btn-submit.near-miss-btn { background: #d97706; }
.btn-submit.near-miss-btn:hover { background: #b45309; }
.btn-submit.opinion-btn { background: var(--rep); }
.btn-submit.opinion-btn:hover { background: #0E7490; }
.btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* 완료 화면 */
.complete-overlay {
    display: none;
    position: fixed;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 480px; height: 100vh;
    background: var(--bg-card);
    z-index: 200;
    text-align: center;
    padding-top: 120px;
}
.complete-overlay.active { display: block; }
.complete-overlay .co-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--green-soft);
    border: 3px solid var(--green);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    font-size: 2.25rem;
    color: var(--green);
}
.complete-overlay .co-title {
    font-size: 1.25rem; font-weight: 800; color: var(--ink); margin-bottom: 8px;
}
.complete-overlay .co-desc {
    font-size: 0.875rem; color: var(--ink-light);
}

/* 모드별 표시 */
.mode-near-miss { display: none; }
.mode-opinion { display: none; }
.mode-near-miss.active { display: block; }
.mode-opinion.active { display: block; }

/* ========================================
   TBM 상세 (tbm_view)
   ======================================== */

.info-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.info-card .info-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
}
.info-card .info-sub {
    font-size: 0.75rem;
    color: var(--ink-light);
}
.section-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-light);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}
.task-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.875rem;
    color: var(--ink);
}
.task-item .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}
.point-check-card {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.point-check-card .pc-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #ea580c;
    margin-bottom: 6px;
}
.point-check-card .pc-text {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #c2410c;
}
.health-btn {
    flex: 1;
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.health-btn.ok.selected {
    border-color: var(--green);
    background: var(--green-soft);
    color: var(--green);
}
.health-btn.issue.selected {
    border-color: #dc2626;
    background: var(--safety-soft);
    color: #dc2626;
}
.health-note { display: none; margin-top: 8px; }
.health-note.show { display: block; }
.tbm-view .signature-canvas {
    height: 120px;
    touch-action: none;
}
.sign-hint {
    text-align: center;
    font-size: 0.75rem;
    color: var(--ink-light);
    margin-top: 6px;
}
.sign-hint.hidden { display: none; }
.btn-sign {
    display: block;
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    background: var(--green);
    color: #fff;
    margin-top: 16px;
    transition: background 0.2s;
}
.btn-sign:hover { background: #15803D; }
.btn-sign:disabled { background: #86EFAC; cursor: not-allowed; }

/* 서명 완료 화면 */
.complete-screen { display: none; padding: 40px 24px; text-align: center; }
.complete-screen.active { display: block; }
.complete-icon {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: var(--green-soft);
    border: 3px solid var(--green);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    font-size: 2.5rem;
    color: var(--green);
}
.complete-title {
    font-size: 1.375rem; font-weight: 800; color: var(--ink); margin-bottom: 8px;
}
.complete-desc {
    font-size: 0.875rem; color: var(--ink-light); margin-bottom: 24px; line-height: 1.6;
}
.complete-info {
    background: var(--bg);
    border-radius: 12px;
    padding: 14px 16px;
    text-align: left;
    margin-bottom: 24px;
}
.complete-info .ci-label {
    font-size: 0.75rem; color: var(--ink-light); margin-bottom: 4px;
}
.complete-info .ci-row {
    font-size: 0.875rem; color: var(--ink); margin-bottom: 6px;
}
.link-opinion {
    font-size: 0.875rem; font-weight: 600; color: var(--accent);
}
.detail-screen { display: block; }
.detail-screen.hidden { display: none; }

/* ── 유틸리티 보강 ── */
.pt-12 { padding-top: 12px; }
.pt-16 { padding-top: 16px; }
.mt-20 { margin-top: 20px; }
.mb-4 { margin-bottom: 4px; }
.health-flex { display: flex; gap: 12px; }
.min-h-60 { min-height: 60px; }

/* ========================================
   사이드 메뉴 (햄버거)
   ======================================== */

/* 햄버거 버튼 */
.hamburger-btn {
    width: 32px; height: 32px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    background: none; border: none;
    cursor: pointer; padding: 4px;
    border-radius: 6px;
}
.hamburger-btn:active { background: var(--bg); }
.hamburger-btn .bar {
    width: 18px; height: 2px;
    background: var(--ink);
    border-radius: 1px;
}

/* 오버레이 */
.side-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 900;
}
.side-overlay.open { display: block; }

/* 사이드 패널 (오른쪽에서 펼침) */
.side-panel {
    position: fixed;
    top: 0; right: -280px;
    width: 280px; height: 100vh;
    background: var(--bg-card);
    z-index: 1000;
    display: flex; flex-direction: column;
    transition: right 0.25s ease;
    box-shadow: -4px 0 20px rgba(0,0,0,0.1);
}
.side-panel.open { right: 0; }

/* 프로필 */
.side-profile {
    display: flex; align-items: center; gap: 12px;
    padding: 24px 20px 16px;
    border-bottom: 1px solid var(--border);
}
.side-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.side-user-name {
    font-size: 1rem; font-weight: 700; color: var(--ink);
}
.side-user-role {
    font-size: 0.8125rem; color: var(--ink-light); margin-top: 2px;
}

/* 현장 */
.side-site {
    display: flex; align-items: center; gap: 6px;
    padding: 12px 20px;
    font-size: 0.8125rem; color: var(--ink-light);
    border-bottom: 1px solid var(--border);
}
.side-site-icon { font-size: 0.875rem; }

/* 메뉴 목록 */
.side-menu-list {
    flex: 1; padding: 8px 0; overflow-y: auto;
}
.side-menu-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px;
    font-size: 0.9375rem; font-weight: 500; color: var(--ink);
    text-decoration: none;
    transition: background 0.15s;
}
.side-menu-item:hover { background: var(--bg); }
.side-menu-item:active { background: var(--accent-soft); }
.side-menu-icon { font-size: 1.125rem; width: 24px; text-align: center; }

/* 하단 */
.side-bottom {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
}
.side-logout {
    display: block;
    padding: 10px 0;
    font-size: 0.875rem; font-weight: 600;
    color: #dc2626;
    text-decoration: none;
}
.side-logout:hover { text-decoration: underline; }
.side-version {
    font-size: 0.6875rem; color: var(--ink-light); margin-top: 8px;
}