/* ==========================================================================
   안전관리(산업안전보건) 모듈 — 카드 컴포넌트
   원칙: 페이지 바탕·제목·탭·버튼·표·입력칸은 모빌하이 공통 테마(curator_theme)를
         그대로 따른다. 이 파일은 카드 계열(.sh-*) 컴포넌트의 모양만 정의한다.
   색: curator_theme 팔레트 — 웜 그레이 주색(#5f5e5e), 옐로(#fdc003), 코랄(#fe8b70),
       웜 서피스(#f1eee2 / #f7f3ea), 본문 잉크(#39382f)
   ========================================================================== */

.sh-page {
    --sh-card: #FFFFFF;
    --sh-ink: #39382f;          /* co-on-surface */
    --sh-ink2: #66655a;         /* co-on-variant */
    --sh-slate: #5f5e5e;        /* co-primary */
    --sh-muted: #8a887c;
    --sh-faint: #b3b0a3;
    --sh-line: #efebe0;
    --sh-soft: #f4f1e8;         /* co-surface-high 계열 */
    --sh-cream: #faf7f0;
    --sh-busy: #e4dfd0;
    --sh-red: #d9573a;          /* 코랄(글자용으로 한 톤 진하게) */
    --sh-red-soft: #ffe8e1;
    --sh-amber: #9a6d00;        /* 옐로(글자용) */
    --sh-amber-soft: #fff3cc;
    --sh-green: #2f8a5b;
    --sh-green-soft: #e5f3ea;
    --sh-blue: #2563eb;         /* co-blue */
    --sh-blue-soft: #eff4ff;
    --sh-violet: #6b52a8;
    --sh-violet-soft: #efeaf8;
    --sh-yellow-fill: #fdc003;
    --sh-coral-fill: #fe8b70;
    --sh-radius: 20px;
    --sh-radius-sm: 14px;
    --sh-shadow: 0 10px 24px rgba(57, 56, 47, .07), 0 2px 6px rgba(57, 56, 47, .04);
    --sh-shadow-hover: 0 16px 32px rgba(57, 56, 47, .10), 0 4px 10px rgba(57, 56, 47, .05);

    /* 이전 토큰 이름 호환 */
    --sh-primary: var(--sh-slate);
    --sh-coral: var(--sh-red);
    --sh-yellow: var(--sh-amber);
    --sh-ok: var(--sh-green);
    --sh-warn: var(--sh-amber);
    --sh-danger: var(--sh-red);
    --sh-info: var(--sh-blue);
    --sh-purple: var(--sh-violet);
    --sh-surface: var(--sh-card);
    --sh-surface-2: var(--sh-soft);

    white-space: normal;
}
.sh-page .sh-tab-load { padding-top: 12px; }

/* ── 툴바 (검색·기간·버튼 줄) ── */
.sh-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 4px 2px 12px; margin-bottom: 14px;
    background: transparent; border: none; border-bottom: 1px solid var(--sh-busy);
    border-radius: 0; box-shadow: none;
}
.sh-toolbar-right { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sh-toolbar-label { font-size: 12.5px; font-weight: 700; color: var(--sh-ink2); white-space: nowrap; }

/* ── 안내 문구 ── */
.sh-note { font-size: 12px; color: var(--sh-muted); }
.sh-note-box {
    position: relative;
    font-size: 12.5px; line-height: 1.6; color: var(--sh-ink2);
    background: var(--sh-cream); border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius-sm); padding: 10px 16px 10px 32px; margin-bottom: 14px;
}
.sh-note-box::before {
    content: ""; position: absolute; left: 15px; top: 17px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--sh-yellow-fill);
}
.sh-note-box strong { color: var(--sh-ink); font-weight: 800; }
.sh-note-box.sh-note-info::before { background: var(--sh-blue); }
.sh-note-box.sh-note-danger { background: var(--sh-red-soft); border-color: transparent; color: #8f3219; }
.sh-note-box.sh-note-danger::before { background: var(--sh-coral-fill); }
.sh-note-box.sh-note-ok::before { background: var(--sh-green); }

/* ── 요약 띠 (KPI) — 카드를 따로 띄우지 않고 한 줄 띠 안에 칸 구분선으로 ── */
.sh-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; margin-bottom: 14px;
    background: var(--sh-card); border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius); box-shadow: var(--sh-shadow); overflow: hidden;
}
.sh-stat {
    position: relative; overflow: hidden;
    background: transparent; border: none; border-left: 1px solid var(--sh-line);
    border-radius: 0; padding: 14px 20px 15px;
    box-shadow: none;
}
.sh-stats > .sh-stat:first-child { border-left: none; }
.sh-stat::after {  /* 칸 아래쪽 상태색 밑줄 */
    content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 3px;
    border-radius: 3px 3px 0 0; background: var(--sh-busy);
}
.sh-stat.sh-stat-ok::after { background: var(--sh-green); }
.sh-stat.sh-stat-warn::after { background: var(--sh-yellow-fill); }
.sh-stat.sh-stat-danger::after, .sh-stat.sh-stat-coral::after { background: var(--sh-coral-fill); }
.sh-stat.sh-stat-info::after { background: var(--sh-slate); }
.sh-stat.sh-stat-hero { border-radius: 0; box-shadow: none; }
.sh-stat.sh-stat-hero::after { display: none; }
/* 띠 밖에서 단독으로 쓰인 .sh-stat 은 예전 카드 모양 유지 */
:not(.sh-stats) > .sh-stat {
    background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: var(--sh-radius);
    padding: 16px 18px 17px; box-shadow: var(--sh-shadow);
}
:not(.sh-stats) > .sh-stat::after { display: none; }
.sh-stat-label {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 700; color: var(--sh-ink2); white-space: nowrap;
}
.sh-stat-label::before { display: none; }
.sh-stat-label > :last-child:not(:first-child) { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--sh-faint); letter-spacing: .04em; }
.sh-stat-value {
    font-size: 28px; font-weight: 800; color: var(--sh-ink);
    line-height: 1.1; margin-top: 10px; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.sh-stat-value small { font-size: 13px; font-weight: 700; color: var(--sh-muted); margin-left: 3px; letter-spacing: 0; }
.sh-stat-sub { font-size: 11.5px; color: var(--sh-muted); margin-top: 6px; }
.sh-stat > .sh-stat-value:first-child { margin-top: 0; }
.sh-stat > .sh-stat-value:first-child + .sh-stat-label { margin-top: 8px; }

.sh-stat.sh-stat-ok .sh-stat-label::before { background: var(--sh-green); }
.sh-stat.sh-stat-warn .sh-stat-label::before { background: var(--sh-yellow-fill); }
.sh-stat.sh-stat-danger .sh-stat-label::before,
.sh-stat.sh-stat-coral .sh-stat-label::before { background: var(--sh-coral-fill); }
.sh-stat.sh-stat-info .sh-stat-label::before { background: var(--sh-slate); }
.sh-stat-danger .sh-stat-value, .sh-stat-coral .sh-stat-value { color: var(--sh-red); }
.sh-stat-warn .sh-stat-value { color: var(--sh-amber); }
.sh-stat-ok .sh-stat-value { color: var(--sh-green); }

/* 강조 카드: 테마 주색(웜 그레이) + 상단바와 같은 옐로·코랄 광원 */
.sh-stat.sh-stat-hero,
.sh-card.sh-card-hero {
    background-color: var(--sh-slate);
    background-image:
        radial-gradient(420px 220px at 100% 0%, rgba(253, 192, 3, .22), transparent 60%),
        radial-gradient(320px 180px at 0% 100%, rgba(254, 139, 112, .20), transparent 60%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 18px 40px rgba(95, 94, 94, .20);
}
.sh-stat.sh-stat-hero .sh-stat-label,
.sh-card.sh-card-hero .sh-card-title { color: #fff; }
.sh-stat.sh-stat-hero .sh-stat-label::before { background: var(--sh-yellow-fill); }
.sh-stat.sh-stat-hero .sh-stat-value { color: #fff; }
.sh-stat.sh-stat-hero .sh-stat-sub,
.sh-card.sh-card-hero .sh-card-sub { color: rgba(255, 255, 255, .7); }

/* ── 카드 ── */
.sh-card {
    position: relative;
    background: var(--sh-card); border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius); box-shadow: var(--sh-shadow);
    padding: 18px 20px; margin-bottom: 14px;
    min-width: 0;
}
.sh-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.sh-card-title { font-size: 15px; font-weight: 800; color: var(--sh-ink); margin: 0; padding-left: 10px; border-left: 3px solid var(--sh-yellow-fill); line-height: 1.2; }
.sh-card-sub { font-size: 12px; color: var(--sh-muted); margin: 3px 0 0; line-height: 1.5; }
.sh-card-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* 상태 카드: 굵은 선 대신 제목 앞 상태 점 */
.sh-card.sh-card-accent .sh-card-title::before,
.sh-card.sh-card-danger .sh-card-title::before,
.sh-card.sh-card-warn .sh-card-title::before,
.sh-card.sh-card-ok .sh-card-title::before {
    display: none;
}
.sh-card.sh-card-accent .sh-card-title { border-left-color: var(--sh-slate); }
.sh-card.sh-card-danger .sh-card-title { border-left-color: var(--sh-coral-fill); }
.sh-card.sh-card-ok .sh-card-title { border-left-color: var(--sh-green); }
.sh-card.sh-card-hero .sh-card-title { border-left-color: var(--sh-yellow-fill); }
.sh-card.sh-card-danger { background: linear-gradient(180deg, #fff7f4 0%, #fff 60%); }
.sh-card.sh-card-danger .sh-card-title::before { background: var(--sh-coral-fill); }
.sh-card.sh-card-warn { background: linear-gradient(180deg, #fffaeb 0%, #fff 60%); }
.sh-card.sh-card-warn .sh-card-title::before { background: var(--sh-yellow-fill); }
.sh-card.sh-card-ok .sh-card-title::before { background: var(--sh-green); }

/* 클릭 가능한 카드 */
.sh-page .sh-card, .sh-page .sh-stat { transition: box-shadow .18s ease, transform .18s ease; }
.sh-page [onclick].sh-card:hover,
.sh-page [onclick].sh-stat:hover { box-shadow: var(--sh-shadow-hover); transform: translateY(-2px); cursor: pointer; }

/* 카드 안 작은 면 타일 */
.sh-tile { background: var(--sh-soft); border-radius: var(--sh-radius-sm); padding: 12px 14px; min-width: 0; }
.sh-tile b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--sh-ink); font-variant-numeric: tabular-nums; }
.sh-tile b small { font-size: 12px; color: var(--sh-muted); font-weight: 700; margin-left: 2px; }
.sh-tile span { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--sh-ink2); font-weight: 700; margin-top: 5px; }
.sh-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }

/* 아이콘 타일 (메인 대시보드 KPI 아이콘과 같은 톤) */
.sh-ico {
    width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto;
    display: grid; place-items: center;
    background: rgba(109, 99, 84, .12); color: #6d6354;
}
.sh-ico .material-symbols-outlined { font-size: 20px; }
.sh-ico.dark { background: rgba(253, 192, 3, .22); color: #8a6400; }
.sh-ico.red, .sh-ico.soft-red { background: rgba(254, 139, 112, .22); color: #c54a31; }

/* 격자 */
.sh-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sh-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sh-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sh-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sh-bento > .sh-card, .sh-grid-2 > .sh-card, .sh-grid-3 > .sh-card, .sh-grid-4 > .sh-card { margin-bottom: 0; }
.sh-span-2 { grid-column: span 2; }
.sh-span-3 { grid-column: span 3; }
.sh-span-4 { grid-column: 1 / -1; }
@media (max-width: 1280px) {
    .sh-grid-4, .sh-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sh-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sh-span-3 { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
    .sh-grid-2, .sh-grid-3, .sh-grid-4, .sh-bento { grid-template-columns: 1fr; }
    .sh-span-2, .sh-span-3 { grid-column: auto; }
}

/* ── 배지 ── */
.sh-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.4;
    background: var(--sh-soft); color: #6d6354; white-space: nowrap; border: none;
}
.sh-badge-ok { background: var(--sh-green-soft); color: var(--sh-green); }
.sh-badge-warn { background: var(--sh-amber-soft); color: var(--sh-amber); }
.sh-badge-danger { background: var(--sh-red-soft); color: var(--sh-red); }
.sh-badge-info { background: var(--sh-blue-soft); color: var(--sh-blue); }
.sh-badge-purple { background: var(--sh-violet-soft); color: var(--sh-violet); }
.sh-badge-dark { background: var(--sh-slate); color: #fff; }
.sh-badge-outline { background: #fff; color: var(--sh-ink2); box-shadow: inset 0 0 0 1px var(--sh-busy); }

/* ── 진행 막대 (메인 대시보드 co-progress 와 같은 옐로→코랄) ── */
.sh-progress { width: 100%; height: 8px; background: var(--sh-soft); border-radius: 999px; overflow: hidden; }
.sh-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #fdc003, #fe8b70); }
.sh-progress-fill.ok { background: linear-gradient(90deg, #34d399, #22c55e); }
.sh-progress-fill.info { background: var(--sh-slate); }
.sh-progress-fill.danger { background: linear-gradient(90deg, #fe8b70, #ef4444); }
.sh-progress-row { display: flex; align-items: center; gap: 12px; font-size: 12.5px; margin: 8px 0; }
.sh-progress-row .sh-progress { flex: 1; }
.sh-progress-row .sh-progress-key { width: 92px; color: var(--sh-ink2); font-weight: 700; }
.sh-progress-row .sh-progress-val { width: 96px; text-align: right; color: var(--sh-ink); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── 키·값 행 ── */
.sh-kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--sh-line); font-size: 13px; }
.sh-kv:last-child { border-bottom: none; }
.sh-kv-key { color: var(--sh-muted); font-weight: 700; }
.sh-kv-val { color: var(--sh-ink); font-weight: 800; text-align: right; }

/* ── 목록형 항목 (이행관리·알림) ── */
.sh-item {
    position: relative;
    background: var(--sh-card); border: 1px solid var(--sh-line);
    border-radius: 16px; box-shadow: var(--sh-shadow);
    padding: 14px 18px 14px 22px; margin-bottom: 10px;
}
.sh-item::before {
    content: ""; position: absolute; left: 9px; top: 16px; bottom: 16px; width: 4px;
    border-radius: 4px; background: var(--sh-busy);
}
.sh-item.danger::before { background: var(--sh-coral-fill); }
.sh-item.warn::before { background: var(--sh-yellow-fill); }
.sh-item.ok::before { background: #34d399; }
.sh-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sh-item-title { font-weight: 800; font-size: 14px; color: var(--sh-ink); }
.sh-item-body { font-size: 12.5px; color: var(--sh-ink2); margin-top: 6px; line-height: 1.65; }
.sh-item-law { font-size: 11.5px; color: var(--sh-faint); margin-top: 4px; }

/* ── 화면 안 소탭 · 칩 (테마 탭과 같은 규칙: 비활성 웜 칩 / 활성 주색) ── */
.sh-subtabs { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; border-bottom: none; }
.sh-subtabs .sh-subtab {
    background: #f1eee2; border: none; margin: 0;
    padding: 6px 14px; border-radius: 8px;
    font-size: 12.5px; font-weight: 700; color: #66655a; cursor: pointer; white-space: nowrap;
}
.sh-subtabs .sh-subtab:hover { background: #ece8db; color: var(--sh-ink); }
.sh-subtabs .sh-subtab.active { background: var(--sh-slate); color: #faf7f6; }
.sh-chipbar { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.sh-chip {
    border: none; background: #f1eee2; border-radius: 999px; padding: 5px 12px;
    font-size: 12px; font-weight: 700; color: #66655a; cursor: pointer; white-space: nowrap;
}
.sh-chip:hover { background: #ece8db; color: var(--sh-ink); }
.sh-chip.active { background: var(--sh-slate); color: #faf7f6; }

/* ── 빈 상태 ── */
.sh-empty { padding: 34px 12px; text-align: center; color: var(--sh-faint); font-size: 13px; }
.sh-empty strong { display: block; color: var(--sh-ink2); font-size: 14px; margin-bottom: 4px; }

/* ── 표 보조 (표 모양 자체는 공통 테마 그대로) ── */
.sh-table-wrap { overflow: auto; }
.sh-page .sh-table-wrap > .my_table_data { width: auto; min-width: 100%; }
.sh-page .my_table_data th, .sh-page .my_table_data td { max-width: none; white-space: nowrap; }
.sh-page .my_table_data td.sh-left { text-align: left; }
.sh-page .my_table_data td.sh-wrap { white-space: normal; }
.sh-page .sh-table-wrap .my_table_data td > .btn + .btn { margin-left: 4px; }
.sh-page .my_table_data td select { min-width: 120px; }
.sh-page .my_table_data td input[type="text"],
.sh-page .my_table_data td input[type="number"] { min-width: 90px; }
.sh-page .my_table_data td input[type="date"] { min-width: 130px; }
.sh-page-modal .my_table_input th { width: 150px; }

.sh-num { font-variant-numeric: tabular-nums; }
.sh-link { color: var(--sh-blue); font-weight: 700; text-decoration: underline; cursor: pointer; }
.sh-dim { color: var(--sh-faint); }
.sh-strong { font-weight: 800; color: var(--sh-ink); }

/* ── 조직도 ── */
.sh-org { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 0; }
.sh-org-node {
    min-width: 176px; text-align: center; background: var(--sh-card);
    border: 1px solid var(--sh-line); border-radius: 14px; box-shadow: var(--sh-shadow);
    padding: 11px 16px; font-size: 13px;
}
.sh-org-node .sh-org-role { font-weight: 800; color: var(--sh-ink); }
.sh-org-node .sh-org-name { color: var(--sh-muted); font-size: 12px; margin-top: 3px; }
.sh-org > .sh-org-node:first-child { background: var(--sh-slate); border-color: transparent; }
.sh-org > .sh-org-node:first-child .sh-org-role { color: #fff; }
.sh-org > .sh-org-node:first-child .sh-org-name { color: rgba(255, 255, 255, .7); }
.sh-org-node.warn { background: #fff7f4; border-color: #ffd9cd; box-shadow: none; }
.sh-org-node.warn .sh-org-name { color: var(--sh-red); font-weight: 700; }
.sh-org-node.dashed { background: var(--sh-cream); border: 1px dashed var(--sh-busy); box-shadow: none; }
.sh-org-line { width: 2px; height: 22px; background: var(--sh-busy); }
.sh-org-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── 체크 원 ── */
.sh-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sh-soft); color: var(--sh-muted); font-size: 12px; font-weight: 800; border: none; }
.sh-check.on { background: var(--sh-slate); color: #fff; }
.sh-check.warn { background: var(--sh-yellow-fill); color: #553e00; }
.sh-check.danger { background: var(--sh-coral-fill); color: #fff; }

/* ── 대화형 ── */
.sh-chat { min-height: 360px; background: var(--sh-cream); border: 1px solid var(--sh-line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.sh-chat-msg { max-width: 75%; padding: 10px 14px; border-radius: 16px; font-size: 13px; line-height: 1.6; background: #fff; border: 1px solid var(--sh-line); color: var(--sh-ink); }
.sh-chat-msg.me { align-self: flex-end; background: var(--sh-slate); color: #fff; border-color: transparent; border-bottom-right-radius: 6px; }
.sh-chat-input { display: flex; gap: 6px; margin-top: 10px; }
.sh-chat-input input { flex: 1; height: 38px; }

.sh-modal-note { font-size: 12px; color: var(--sh-muted); margin: 6px 0 10px; }

/* 테마의 input 폭/높이 규칙이 라디오·체크박스를 타원으로 늘리지 않도록 */
.sh-page input[type="radio"],
.sh-page input[type="checkbox"] {
    width: 16px !important; height: 16px !important; min-width: 16px; padding: 0 !important;
    flex: 0 0 auto; vertical-align: middle; margin: 0 4px 0 0;
}

/* ==========================================================================
   2026-09-18 추가 부품 — 현장 서식(점검표·사진대지·QR)과 기한 관리
   ========================================================================== */

/* 제목 아래 설명 줄 (page.html) */
.sh-pagemeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 12px; }
.sh-pagemeta-desc { font-size: 12.5px; color: var(--sh-muted); }
.sh-pagemeta-chip {
    font-size: 11px; font-weight: 800; color: #6d6354; background: #f1eee2;
    border-radius: 6px; padding: 2px 8px; letter-spacing: .01em;
}

/* 기한 칩: D-day 표시 */
.sh-due {
    display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800;
    border-radius: 6px; padding: 2px 8px; background: var(--sh-soft); color: var(--sh-ink2);
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.sh-due.over { background: var(--sh-red-soft); color: var(--sh-red); }
.sh-due.soon { background: var(--sh-amber-soft); color: var(--sh-amber); }
.sh-due.done { background: var(--sh-green-soft); color: var(--sh-green); }

/* 섹션 제목 (카드 밖 구분) */
.sh-section { display: flex; align-items: baseline; gap: 10px; margin: 20px 0 10px; }
.sh-section h6 { margin: 0; font-size: 14px; font-weight: 800; color: var(--sh-ink); }
.sh-section span { font-size: 12px; color: var(--sh-muted); }

/* 사업장 타일 격자 (영업소·정비소별 상태) */
.sh-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sh-site {
    background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: 14px;
    padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.sh-site-name { font-weight: 800; font-size: 13.5px; color: var(--sh-ink); display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sh-site-meta { font-size: 11.5px; color: var(--sh-muted); }
.sh-site.warn { border-color: #f6dc8a; background: #fffbef; }
.sh-site.danger { border-color: #ffc9b9; background: #fff7f4; }
.sh-site.active { border-color: var(--sh-slate); box-shadow: 0 0 0 1px var(--sh-slate) inset; }
[onclick].sh-site { cursor: pointer; }
[onclick].sh-site:hover { box-shadow: var(--sh-shadow); }

/* 점검표 (O/△/X 선택) — 표 모양은 공통 .my_table_data 그대로, 셀 안 선택 버튼만 */
.sh-page .my_table_data.sh-sheet td.sh-left { text-align: left; white-space: normal; min-width: 280px; }
.sh-page .my_table_data.sh-sheet td.sh-cat { font-weight: 800; color: var(--sh-ink2); background: var(--sh-cream); }
.sh-ox { display: inline-flex; gap: 4px; }
.sh-ox label { margin: 0; cursor: pointer; position: relative; }
.sh-page .sh-ox input[type="radio"],
.sh-page .sh-ox input[type="checkbox"] { position: absolute; opacity: 0; width: 0 !important; height: 0 !important; min-width: 0; margin: 0; }
.sh-ox span {
    display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 6px; border-radius: 8px;
    background: var(--sh-soft); color: var(--sh-muted); font-weight: 800; font-size: 13px;
}
.sh-ox input:checked + span.o { background: var(--sh-green-soft); color: var(--sh-green); box-shadow: inset 0 0 0 1.5px var(--sh-green); }
.sh-ox input:checked + span.t { background: var(--sh-amber-soft); color: var(--sh-amber); box-shadow: inset 0 0 0 1.5px #e9b949; }
.sh-ox input:checked + span.x { background: var(--sh-red-soft); color: var(--sh-red); box-shadow: inset 0 0 0 1.5px var(--sh-coral-fill); }
.sh-ox input:checked + span.na { background: #ecebe6; color: var(--sh-ink2); box-shadow: inset 0 0 0 1.5px var(--sh-faint); }
/* 결과 표시용 (읽기 전용) */
.sh-mark { display: inline-grid; place-items: center; min-width: 24px; height: 22px; border-radius: 6px; font-weight: 800; font-size: 12.5px; padding: 0 4px; }
.sh-mark.o { background: var(--sh-green-soft); color: var(--sh-green); }
.sh-mark.t { background: var(--sh-amber-soft); color: var(--sh-amber); }
.sh-mark.x { background: var(--sh-red-soft); color: var(--sh-red); }
.sh-mark.na { background: var(--sh-soft); color: var(--sh-faint); }

/* 사진 칸 (조치 전·후, 사진대지) */
.sh-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.sh-photo {
    position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
    background: repeating-linear-gradient(45deg, #f4f1e8 0 10px, #efebe0 10px 20px);
    display: grid; place-items: center; text-align: center; color: var(--sh-faint); font-size: 12px; font-weight: 700;
    border: 1px dashed var(--sh-busy);
}
.sh-photo .material-symbols-outlined { font-size: 28px; display: block; margin: 0 auto 2px; }
.sh-photo-cap { position: absolute; left: 8px; top: 8px; font-size: 11px; font-weight: 800; background: rgba(255, 255, 255, .92); color: var(--sh-ink2); border-radius: 6px; padding: 2px 7px; }
.sh-photo-cap.before { color: var(--sh-red); }
.sh-photo-cap.after { color: var(--sh-green); }
.sh-photo-desc { font-size: 12px; color: var(--sh-ink2); margin-top: 6px; line-height: 1.5; }

/* QR 카드 ({{ 값|sh_qr }} 필터가 .sh-qr-svg 를 그림) */
.sh-qr { display: flex; gap: 14px; align-items: center; background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: 16px; padding: 14px; min-width: 0; }
.sh-qr-svg { flex: 0 0 auto; background: #fff; border-radius: 8px; padding: 4px; border: 1px solid var(--sh-line); }
.sh-qr-title { font-weight: 800; font-size: 14px; color: var(--sh-ink); }
.sh-qr-sub { font-size: 12px; color: var(--sh-muted); margin-top: 2px; }
/* 스캔 화면 (태블릿 카메라 영역 모형) */
.sh-scan {
    position: relative; border-radius: 18px; background: #34332f; color: #e9e6dc;
    display: grid; place-items: center; min-height: 260px; overflow: hidden; text-align: center; padding: 24px;
}
.sh-scan-frame { width: 170px; height: 170px; border-radius: 18px; border: 3px dashed rgba(253, 192, 3, .85); margin: 0 auto 12px; display: grid; place-items: center; }
.sh-scan-frame .sh-qr-svg { border: none; }
.sh-scan-text { font-size: 12.5px; color: #cfcabb; }

/* 개인 차트 타임라인 (보건상담·사후관리) */
.sh-timeline { position: relative; padding-left: 22px; }
.sh-timeline::before { content: ""; position: absolute; left: 7px; top: 4px; bottom: 4px; width: 2px; background: var(--sh-line); }
.sh-tl { position: relative; padding: 0 0 14px; }
.sh-tl::before { content: ""; position: absolute; left: -19px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--sh-busy); }
.sh-tl.warn::before { box-shadow: 0 0 0 2px var(--sh-yellow-fill); }
.sh-tl.danger::before { box-shadow: 0 0 0 2px var(--sh-coral-fill); background: var(--sh-coral-fill); }
.sh-tl.ok::before { box-shadow: 0 0 0 2px var(--sh-green); }
.sh-tl-date { font-size: 11.5px; color: var(--sh-muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.sh-tl-title { font-size: 13px; font-weight: 800; color: var(--sh-ink); margin-top: 2px; }
.sh-tl-body { font-size: 12.5px; color: var(--sh-ink2); margin-top: 2px; line-height: 1.55; }

/* 가로 막대 비교 (부서별·사업장별 수치, 누적 막대) */
.sh-bars { display: flex; flex-direction: column; gap: 8px; }
.sh-bar { display: grid; grid-template-columns: 110px 1fr 70px; align-items: center; gap: 10px; font-size: 12.5px; }
.sh-bar-key { color: var(--sh-ink2); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-bar-track { height: 10px; background: var(--sh-soft); border-radius: 999px; overflow: hidden; display: flex; }
.sh-bar-seg { height: 100%; background: var(--sh-slate); }
.sh-bar-seg.ok { background: #34d399; }
.sh-bar-seg.warn { background: var(--sh-yellow-fill); }
.sh-bar-seg.danger { background: var(--sh-coral-fill); }
.sh-bar-seg.info { background: #9aa8c7; }
.sh-bar-val { text-align: right; font-weight: 800; color: var(--sh-ink); font-variant-numeric: tabular-nums; }
.sh-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--sh-ink2); font-weight: 700; }
.sh-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: var(--sh-slate); }
.sh-legend i.ok { background: #34d399; }
.sh-legend i.warn { background: var(--sh-yellow-fill); }
.sh-legend i.danger { background: var(--sh-coral-fill); }
.sh-legend i.info { background: #9aa8c7; }

/* 할 일 줄 (대시보드·미이행 목록) */
.sh-todo { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--sh-line); font-size: 13px; }
.sh-todo:last-child { border-bottom: none; }
.sh-todo-main { flex: 1; min-width: 0; }
.sh-todo-title { font-weight: 800; color: var(--sh-ink); }
.sh-todo-sub { font-size: 11.5px; color: var(--sh-muted); margin-top: 1px; }

/* 익명 표시 (직무스트레스) */
.sh-anon { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--sh-ink2); background: var(--sh-soft); border-radius: 6px; padding: 1px 6px; }

/* 테마가 표 머리글을 대문자로 바꿔 단위 (cm)→(CM) 가 되는 것 방지 */
.sh-page .my_table_data th { text-transform: none; }
/* 긴 소견·내용 칸 줄바꿈 (테마의 max-width·말줄임 규칙보다 우선) */
.sh-page .my_table_data td.sh-wrap,
.sh-page .my_table_data th.sh-wrap { white-space: normal !important; max-width: none !important; overflow: visible !important; text-overflow: clip !important; }
/* 테마가 표 행 인라인 display:none 을 덮어써서 행 숨김은 이 클래스로 */
.sh-page tr.sh-row-hide { display: none !important; }

/* ── 고객 전산양식 표 (sh/_sheet_list.html · 줄 입력 모달 · 업로드 결과) ── */
.sh-sheet-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.sh-page .my_table_data .sh-sheet-check { width: 34px; }
.sh-page .my_table_data .sh-sheet-check input { width: 16px; height: 16px; vertical-align: middle; cursor: pointer; }
.sh-page .sh-sheet-table tr[ondblclick] { cursor: pointer; }
.sh-page .sh-sheet-table tr.sh-sheet-group td { background: var(--sh-cream) !important; text-align: left; font-weight: 800; color: var(--sh-ink); }
.sh-page .my_table_data td.sh-sheet-long { white-space: normal !important; text-align: left; min-width: 220px; max-width: 420px !important; overflow: visible !important; text-overflow: clip !important; }
.sh-sheet-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.sh-sheet-field { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.sh-sheet-field.wide { grid-column: 1 / -1; }
.sh-sheet-field > span { font-size: 12.5px; font-weight: 700; color: var(--sh-ink2); }
.sh-upload-errors { margin: 8px 0 0; padding-left: 18px; max-height: 220px; overflow-y: auto; font-size: 12.5px; color: var(--sh-red); }
.sh-upload-errors li { list-style: disc; display: list-item; white-space: normal; }