/* EIS 점검 보고서 폼 — 디자인 시스템 */

:root {
    /* 브랜드 + 중립 */
    --brand-900: #0e2238;
    --brand-700: #1f3a5f;
    --brand-600: #284a76;
    --brand-500: #3a6299;
    --brand-100: #e3eaf3;
    --brand-50:  #f5f9fd;

    --gray-900: #1a1f2b;
    --gray-700: #4a5260;
    --gray-500: #6b7380;
    --gray-400: #98a2b0;
    --gray-300: #c8cfd9;
    --gray-200: #e3e7ec;
    --gray-150: #ecf0f4;
    --gray-100: #f0f3f7;
    --gray-50:  #f7f9fc;
    --bg:       #f4f6fa;

    /* 상태 */
    --good-700:    #15683d;
    --good-500:    #4a8a64;
    --good-100:    #d4eadd;
    --warn-700:    #8a6420;
    --warn-100:    #fbf1d4;
    --orange-700: #8c4218;
    --orange-100: #fae0cf;
    --critical-700: #8e2222;
    --critical-100: #fbdedb;

    /* 그림자 */
    --shadow-xs: 0 1px 2px rgba(15, 25, 45, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 25, 45, 0.06), 0 1px 2px rgba(15, 25, 45, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 25, 45, 0.08), 0 1px 3px rgba(15, 25, 45, 0.05);
    --shadow-lg: 0 10px 28px rgba(15, 25, 45, 0.12);
    --ring:      0 0 0 3px rgba(31, 58, 95, 0.18);

    /* 모서리 */
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 10px;
    --r-xl: 14px;

    /* 폰트 */
    --font-base: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-base);
    color: var(--gray-900);
    background: var(--bg);
    line-height: 1.5;
    font-feature-settings: "ss01", "tnum";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--brand-700); }
a:hover { color: var(--brand-600); }

::selection { background: var(--brand-100); color: var(--brand-900); }

/* ─── 헤더 ───────────────────────────────────────────────── */
.app-header {
    background: white;
    border-bottom: 1px solid var(--gray-200);
    padding: 14px 32px 0;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: var(--shadow-xs);
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 24px;
}

.header-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.header-link {
    padding: 7px 14px;
    border-radius: var(--r-sm);
    text-decoration: none;
    color: var(--gray-700);
    font-weight: 600;
    font-size: 13.5px;
    transition: all 0.15s;
}

.header-link:hover {
    background: var(--brand-50);
    color: var(--brand-700);
}

.header-link.active {
    background: var(--brand-700);
    color: white;
}

.header-link.logout {
    color: var(--gray-500);
    font-weight: 500;
    margin-left: 6px;
    border-left: 1px solid var(--gray-200);
    padding-left: 14px;
    border-radius: 0;
}

.header-current-user {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--brand-700);
    font-weight: 600;
    padding: 6px 10px;
    background: var(--brand-50);
    border-radius: var(--r-md);
    margin-left: 6px;
}

.header-link.logout:hover {
    background: transparent;
    color: var(--critical-700);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-logo {
    height: 30px;
    width: auto;
    display: block;
}

.brand-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gray-700);
    padding-left: 14px;
    border-left: 1px solid var(--gray-200);
    letter-spacing: -0.005em;
}

/* 단계 네비 */
.step-nav ol {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.step-nav .step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 2px solid transparent;
    color: var(--gray-400);
    font-size: 13px;
    transition: color 0.15s, border-color 0.15s;
}

.step-nav .step .num {
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 50%;
    background: var(--gray-200);
    color: var(--gray-500);
    font-size: 11px;
    text-align: center;
    font-weight: 700;
    transition: all 0.15s;
    flex-shrink: 0;
}

.step-nav .step.active {
    color: var(--brand-700);
    border-bottom-color: var(--brand-700);
    font-weight: 700;
}

.step-nav .step.active .num {
    background: var(--brand-700);
    color: white;
    box-shadow: 0 0 0 4px var(--brand-100);
}

.step-nav .step.done {
    color: var(--good-700);
}

.step-nav .step.done .num {
    background: var(--good-500);
    color: white;
    font-size: 0;          /* 원래 숫자 텍스트 숨김 */
}

.step-nav .step.done .num::before {
    content: "✓";
    font-size: 13px;
    font-weight: 700;
}

/* ─── 메인 ───────────────────────────────────────────────── */
.app-main {
    max-width: 1100px;
    margin: 32px auto;
    padding: 0 24px;
}

.card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-md);
    padding: 32px 36px;
    box-shadow: var(--shadow-sm);
}

.form-card {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.form-section {
    border-top: 1px solid var(--gray-100);
    padding-top: 24px;
}

.form-section:first-of-type {
    border-top: none;
    padding-top: 0;
}

.form-section.row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.form-section-header {
    margin-bottom: 14px;
}

.form-section-header h2 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--gray-900);
    letter-spacing: -0.01em;
}

.hint {
    font-size: 12px;
    color: var(--gray-500);
    margin: 0;
    line-height: 1.5;
}

.hint code {
    background: var(--gray-100);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11.5px;
    font-family: var(--font-mono);
}

/* ─── 카운트 배지 ───────────────────────────────────────── */
.count-badge {
    display: inline-block;
    background: #1f3a5f;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}

/* ─── 검색·필터 툴바 ───────────────────────────────────── */
.facility-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.search-wrap {
    flex: 1;
    min-width: 240px;
    position: relative;
}

.search-input {
    width: 100%;
    padding: 10px 36px 10px 38px;
    font-size: 14px;
    border: 1px solid var(--gray-300);
    border-radius: var(--r-sm);
    background: white url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7380' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-4-4'/></svg>") no-repeat 13px center;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.search-input:focus {
    outline: none;
    border-color: var(--brand-700);
    box-shadow: var(--ring);
}

.search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: #e3e7ec;
    color: #4a5260;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
}

.search-clear:hover { background: #d0d7df; }

.cat-chips {
    display: flex;
    gap: 6px;
}

.result-count {
    margin-left: auto;
    font-size: 12.5px;
    color: #6a7280;
    font-weight: 600;
}

.result-count span {
    color: #1f3a5f;
    font-weight: 700;
}

.chip {
    border: 1px solid var(--gray-300);
    background: white;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    color: var(--gray-700);
    font-family: inherit;
    transition: all 0.15s;
}

.chip:hover {
    border-color: var(--brand-500);
    color: var(--brand-700);
}

.chip.active {
    background: var(--brand-700);
    border-color: var(--brand-700);
    color: white;
    box-shadow: var(--shadow-sm);
}

.empty-result {
    margin-top: 14px;
    padding: 24px;
    text-align: center;
    color: #6a7280;
    font-size: 13px;
    border: 1px dashed #d8dee7;
    border-radius: 4px;
    background: #fafbfc;
}

/* ─── 시설 카드 그리드 ───────────────────────────────────── */
.facility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    max-height: 420px;
    overflow-y: auto;
    padding: 2px;
}

/* 60개 + 검색 안 했을 때만 스크롤 의미 있음. 작은 리스트는 스크롤 거의 안 보임 */
.facility-grid::-webkit-scrollbar { width: 8px; }
.facility-grid::-webkit-scrollbar-thumb { background: #c8cfd8; border-radius: 4px; }

.facility-card {
    cursor: pointer;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-md);
    padding: 14px 16px;
    transition: all 0.15s;
    background: white;
    display: block;
}

.facility-card input { display: none; }

.facility-card:hover {
    border-color: var(--brand-500);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.facility-card.active {
    border-color: var(--brand-700);
    background: var(--brand-50);
    box-shadow: 0 0 0 1px var(--brand-700), var(--shadow-sm);
}

.facility-card-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.facility-cat {
    display: inline-block;
    align-self: flex-start;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.04em;
}

.facility-cat.cat-building { color: var(--brand-700); background: var(--brand-100); }
.facility-cat.cat-bridge   { color: #6a4a14; background: #f5e7c9; }
.facility-cat.cat-dam      { color: #2d5a2d; background: #d8e8d0; }
.facility-cat.cat-other    { color: var(--gray-700); background: var(--gray-150); }

.facility-name {
    font-weight: 700;
    font-size: 14px;
    color: #1a1a1a;
}

.facility-type {
    font-size: 12px;
    color: #6a7280;
}

/* ─── 양식 카드 ─────────────────────────────────────────── */
.schema-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.schema-card {
    cursor: pointer;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-md);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.15s;
    background: white;
}

.schema-card input { display: none; }

.schema-card:hover {
    border-color: var(--brand-500);
    box-shadow: var(--shadow-sm);
}

.schema-card.active {
    border-color: var(--brand-700);
    background: var(--brand-50);
    box-shadow: 0 0 0 1px var(--brand-700);
}

.schema-title {
    flex: 1;
    font-weight: 700;
    color: #1a1a1a;
}

.schema-id {
    font-size: 11px;
    color: #6a7280;
    font-family: ui-monospace, monospace;
}

/* ─── 폼 컨트롤 ─────────────────────────────────────────── */
.select, .input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--gray-300);
    border-radius: var(--r-sm);
    background: white;
    color: var(--gray-900);
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.select:hover, .input:hover {
    border-color: var(--brand-500);
}

.select:focus, .input:focus {
    outline: none;
    border-color: var(--brand-700);
    box-shadow: var(--ring);
}

/* ─── 액션 버튼 ─────────────────────────────────────────── */
.actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--gray-100);
    padding-top: 22px;
}

.btn {
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    line-height: 1.4;
    letter-spacing: -0.005em;
}

.btn.primary {
    background: var(--brand-700);
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn.primary:hover:not(:disabled) {
    background: var(--brand-600);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn.primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn.ghost {
    background: white;
    color: var(--gray-700);
    border-color: var(--gray-300);
    text-decoration: none;
    display: inline-block;
}

.btn.ghost:hover {
    border-color: var(--brand-700);
    color: var(--brand-700);
    background: var(--brand-50);
}

.actions {
    align-items: center;
}

/* ─── Key-Value 표 (Step 2 기본정보) ───────────────────── */
.kv-table {
    width: 100%;
    border-collapse: collapse;
}

.kv-table td {
    padding: 9px 4px;
    vertical-align: top;
    border-bottom: 1px solid #eef0f3;
    font-size: 13.5px;
}

.kv-table tr:last-child td {
    border-bottom: none;
}

.kv-table td.k {
    width: 130px;
    color: #6a7280;
    font-weight: 600;
    padding-right: 16px;
}

.kv-table td.v {
    color: #1a1a1a;
}

.kv-table td.v strong { font-weight: 700; }

.muted { color: #6a7280; font-weight: 400; margin-left: 4px; }
.muted-mono { color: #6a7280; font-family: ui-monospace, monospace; font-size: 11.5px; margin-left: 4px; }

.hint-inline {
    font-size: 11.5px;
    font-weight: 400;
    color: #6a7280;
    margin-left: 8px;
}

/* 위치 구성 테이블 */
.loc-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4px;
    background: #fafbfc;
    border: 1px solid #eef0f3;
    border-radius: 4px;
    overflow: hidden;
}

.loc-table th {
    background: #f0f3f7;
    color: #4a5260;
    text-align: left;
    padding: 7px 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-bottom: 1px solid #d8dee7;
}

.loc-table td {
    padding: 7px 10px;
    font-size: 12.5px;
    border-bottom: 1px solid #eef0f3;
}

.loc-table tr:last-child td { border-bottom: none; }

.ps-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ps-tag.ps-ups     { color: #14653a; background: #e7f3ec; border: 0.5px solid #b3d9c1; }
.ps-tag.ps-battery { color: #87651a; background: #fcf3d8; border: 0.5px solid #ead4a3; }
.ps-tag.ps-none    { color: #6a6a6a; background: #eeeeee; border: 0.5px solid #d0d0d0; }

/* ─── 메타 입력 행 (보고월 + 미리보기) ───────────────── */
.meta-row {
    display: flex;
    gap: 24px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.field-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-label {
    font-size: 12px;
    font-weight: 700;
    color: #6a7280;
    letter-spacing: 0.02em;
}

.input.narrow {
    width: 90px;
}

.cover-preview {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cover-preview-text {
    background: #f0f3f7;
    border: 1px dashed #b6c7da;
    padding: 11px 14px;
    border-radius: 4px;
    color: #1f3a5f;
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.45;
}

/* ─── Step 3 ───────────────────────────────────────────── */
.step3-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.step3-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn.sm  { padding: 7px 14px; font-size: 12.5px; }
.btn.xs  { padding: 4px 10px; font-size: 11.5px; font-weight: 600; }

.problem-badge {
    background: #fde8e1;
    color: #8a4014;
    border: 1px solid #e6bb95;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
}

.muted-tiny { font-size: 11px; color: #98a2b0; font-weight: 400; margin-left: 4px; }

/* 위치 카드 */
.loc-card {
    border: 1.5px solid #d8dee7;
    border-radius: 6px;
    background: white;
    padding: 0;
    margin-bottom: 20px;
    overflow: hidden;
}

.loc-card.cat-server { border-color: #b8c8db; }

.loc-card-header {
    background: #1f3a5f;
    color: white;
    padding: 9px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.loc-card.cat-server .loc-card-header { background: #2a4d7a; }

.loc-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.loc-name {
    font-size: 15px;
    font-weight: 700;
}

.loc-sub {
    font-size: 11.5px;
    color: #cfd6e1;
    font-weight: 400;
}

.loc-cat {
    font-size: 10.5px;
    background: rgba(255, 255, 255, 0.18);
    padding: 1px 7px;
    border-radius: 2px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.loc-card-header .btn.ghost {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
}

.loc-card-header .btn.ghost:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: white;
    color: white;
}

/* 체크리스트 */
.checklist {
    padding: 4px 16px;
}

.check-row {
    display: grid;
    grid-template-columns: 220px auto 1fr;
    gap: 14px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f2f4f7;
}

.check-row:last-child { border-bottom: none; }

.check-label {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
}

.check-row.status-row-watch        .check-label { color: #87651a; }
.check-row.status-row-replace_soon .check-label { color: #8a4014; }
.check-row.status-row-critical     .check-label { color: #8a1f1f; }

/* ─── 상태 선택 (segmented) ───────────────────────────
   디자인 의도: 비활성 4개를 같은 톤의 회색 세그먼트로 통일하여 "무지개"
   인상을 제거. 활성 1개만 해당 심각도 색을 보여줌 (배경 옅은 톤 + 좌측
   3px 컬러 인디케이터). 이모지 아이콘은 시각적 노이즈가 커서 숨김. */
.status-pills {
    display: inline-flex;
    background: var(--gray-100, #f1f3f5);
    border: 1px solid var(--gray-200, #e3e7ec);
    border-radius: 6px;
    padding: 2px;
    gap: 0;
}

.status-pill-btn {
    position: relative;
    border: 1px solid transparent;
    background: transparent;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    color: var(--gray-500);
    font-family: inherit;
    transition: background 0.12s, color 0.12s;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.status-pill-btn .pill-icon { display: none; }
.status-pill-btn .pill-label { font-size: 11.5px; font-weight: 600; letter-spacing: -0.005em; }

.status-pill-btn:hover { color: var(--gray-700); }

.status-pill-btn.active {
    background: white;
    border-color: var(--gray-200);
    box-shadow: 0 1px 2px rgba(15, 25, 45, 0.06);
    color: var(--gray-900, #1a1a1a);
}

/* 활성 상태일 때 좌측 3px 컬러 바로 심각도 표시 — 컬러 면적 최소화 */
.status-pill-btn.active::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.85;
}
.status-pill-btn.active { padding-left: 16px; }

.status-pill-btn.active.pill-good         { color: var(--good-700); }
.status-pill-btn.active.pill-watch        { color: var(--warn-700); }
.status-pill-btn.active.pill-replace_soon { color: var(--orange-700); }
.status-pill-btn.active.pill-critical     { color: var(--critical-700); }

.comment-input {
    border: 1.2px solid #e3e7ec;
    background: #fafbfc;
    padding: 7px 11px;
    border-radius: 3px;
    font-size: 12.5px;
    font-family: inherit;
    color: #1a1a1a;
    width: 100%;
}

.comment-input:focus {
    outline: none;
    border-color: #1f3a5f;
    background: white;
}

/* 측정값 */
.measurements {
    background: #fafbfc;
    border-top: 1px solid #eef0f3;
    padding: 12px 16px;
}

.block-label {
    font-size: 11.5px;
    font-weight: 700;
    color: #6a7280;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
    display: block;
}

.measurement-row {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.measurement-input {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.measurement-input .m-label {
    font-size: 11px;
    color: #6a7280;
    font-weight: 600;
}

.measurement-input input {
    width: 130px;
    padding: 7px 10px;
    border: 1.2px solid #d8dee7;
    border-radius: 3px;
    font-size: 13px;
    font-family: ui-monospace, monospace;
    text-align: right;
}

.measurement-input input:focus {
    outline: none;
    border-color: #1f3a5f;
}

/* 특이사항 */
.notes-block {
    padding: 12px 16px 16px;
    border-top: 1px solid #eef0f3;
}

.notes-block textarea {
    width: 100%;
    border: 1.2px solid #d8dee7;
    background: white;
    padding: 9px 12px;
    border-radius: 3px;
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.5;
    resize: vertical;
    min-height: 50px;
}

.notes-block textarea:focus {
    outline: none;
    border-color: #1f3a5f;
}

/* ─── Step 4 — 사진 입력 ───────────────────────────────── */
.workflow-hint {
    background: #f5f9fd;
    border-left: 3px solid #1f3a5f;
    padding: 9px 14px;
    margin: 0 0 14px;
    font-size: 12.5px;
    color: #4a5260;
    line-height: 1.6;
}

.workflow-hint strong {
    color: #1f3a5f;
    margin-right: 4px;
}

.workflow-hint kbd {
    background: white;
    border: 1px solid #c8d3df;
    padding: 1px 6px;
    border-radius: 3px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    color: #1f3a5f;
}


.step4-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: 1fr auto;
    gap: 16px;
    background: white;
    border: 1px solid #d8dee7;
    border-radius: 6px;
    padding: 16px;
}

.step4-aside {
    grid-row: 1 / 2;
    border-right: 1px solid #eef0f3;
    padding-right: 12px;
    overflow-y: auto;
}

.aside-header h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 4px;
    color: #1a1a1a;
}

.overall-progress {
    font-size: 12px;
    color: #6a7280;
    font-weight: 600;
    margin-bottom: 12px;
}

.overall-progress .num {
    color: #1f3a5f;
    font-weight: 700;
    font-size: 14px;
}

.loc-tree {
    list-style: none;
    margin: 0;
    padding: 0;
}

.loc-tree-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 2px;
    border: 1px solid transparent;
    transition: all 0.1s;
    font-size: 13px;
}

.loc-tree-item:hover {
    background: #f5f7fa;
}

.loc-tree-item.active {
    background: #e3eaf3;
    border-color: #8ca3c0;
    font-weight: 700;
}

.loc-tree-item.done {
    color: #14653a;
}

.loc-tree-item.partial {
    color: #87651a;
}

.loc-cat-tag {
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 2px;
    letter-spacing: 0.04em;
}

.loc-cat-tag.cat-measurement { color: #1f3a5f; background: #e3eaf3; }
.loc-cat-tag.cat-server      { color: #2a4d7a; background: #d6dfee; }
.loc-cat-tag.cat-waveform    { color: #6a4a14; background: #f7ecd5; }

.loc-tree-label {
    flex: 1;
}

.loc-tree-progress {
    font-size: 11px;
    color: #6a7280;
    font-family: ui-monospace, monospace;
}

.loc-tree-item.done .loc-tree-progress { color: #14653a; font-weight: 700; }

.step4-main {
    grid-row: 1 / 2;
    min-width: 0;
}

.step4-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 12px;
    border-bottom: 1px solid #eef0f3;
    margin-bottom: 14px;
}

.step4-toolbar h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.toolbar-spacer { flex: 1; }

/* 업로드 영역 + 미할당 풀 */
.card-light {
    background: #fafbfc;
    border: 1.5px dashed #c8d3df;
    border-radius: 5px;
    padding: 14px;
    margin-bottom: 16px;
    transition: all 0.1s;
}

.card-light.dragover {
    background: #e8eef5;
    border-color: #1f3a5f;
}

.upload-area {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.upload-btn {
    background: var(--brand-700);
    color: white;
    padding: 8px 16px;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    transition: all 0.15s;
}

.upload-btn:hover {
    background: var(--brand-600);
    box-shadow: var(--shadow-sm);
}

.upload-btn.ghost {
    background: white;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}

.upload-btn.ghost:hover {
    background: var(--brand-50);
    border-color: var(--brand-700);
    color: var(--brand-700);
}

.upload-hint kbd {
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--brand-700);
}

.upload-hint {
    color: #6a7280;
    font-size: 12.5px;
}

.upload-status {
    color: #14653a;
    font-size: 12px;
    font-weight: 600;
}

.upload-error {
    color: #8a1f1f;
    font-size: 12px;
    font-weight: 600;
}

.pool-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: #6a7280;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.badge {
    background: #e3e7ec;
    color: #4a5260;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 10.5px;
    font-weight: 700;
}

.photo-pool {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    min-height: 100px;
}

.pool-empty {
    grid-column: 1 / -1;
    padding: 24px;
    text-align: center;
    color: #98a2b0;
    font-size: 12px;
}

/* 풀 썸네일 — 슬롯 썸네일보다 크고 파일명 표시 */
.pool-thumb {
    cursor: grab;
    display: flex;
    flex-direction: column;
    background: white;
    border: 1.5px solid #d8dee7;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.1s;
}

.pool-thumb:hover {
    border-color: #1f3a5f;
    box-shadow: 0 2px 6px rgba(31, 58, 95, 0.12);
}

.pool-thumb:active { cursor: grabbing; }

.pool-thumb .thumb-image {
    position: relative;
    aspect-ratio: 1;
    background: var(--gray-100);
    overflow: hidden;
}

/* 자동 매칭 추천 배지 — 풀 썸네일 좌하단 */
.thumb-suggest {
    position: absolute;
    left: 4px;
    bottom: 4px;
    right: 4px;
    background: rgba(31, 58, 95, 0.92);
    color: white;
    border: none;
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s;
}

.thumb-suggest:hover {
    background: var(--good-700);
}

.pool-thumb .thumb-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pool-thumb .thumb-name {
    padding: 5px 8px;
    font-size: 11px;
    font-family: ui-monospace, monospace;
    color: #4a5260;
    background: #fafbfc;
    border-top: 1px solid #eef0f3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 풀 섹션 컨테이너 */
.pool-section {
    margin-top: 8px;
}

.pool-section > summary {
    cursor: pointer;
    padding: 8px 12px;
    background: #f0f3f7;
    border-radius: 4px;
    font-size: 12.5px;
    font-weight: 700;
    color: #4a5260;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pool-section > summary:hover { background: #e3eaf3; }

.pool-section[open] > summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.pool-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* 미리보기 모달 */
.preview-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 40px;
}

.preview-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.preview-content img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.preview-name {
    color: white;
    font-size: 13px;
    font-family: ui-monospace, monospace;
    background: rgba(0, 0, 0, 0.6);
    padding: 6px 14px;
    border-radius: 3px;
}

.preview-close {
    position: absolute;
    top: -36px;
    right: 0;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.preview-close:hover { background: rgba(255, 255, 255, 0.35); }

.photo-thumb {
    position: relative;
    aspect-ratio: 1;
    background: #f0f3f7;
    border-radius: 3px;
    overflow: hidden;
    cursor: grab;
    border: 1.5px solid transparent;
}

.photo-thumb:active { cursor: grabbing; }

.photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 슬롯 안 썸네일도 PDF와 동일하게 fill (칸에 맞춰 늘어남, 약간 왜곡 가능).
   풀의 썸네일은 식별용이라 cover 유지. */
.photo-thumb.in-slot {
    background: #fafbfc;
}
.photo-thumb.in-slot img {
    object-fit: fill;
}

.thumb-x {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 10px;
    line-height: 1;
    padding: 0;
    opacity: 0;
    transition: opacity 0.1s;
}

.photo-thumb:hover .thumb-x { opacity: 1; }

/* 슬롯 목록 */
.slots-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.slot-row {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    background: white;
    border: 1.5px solid #d8dee7;
    border-radius: 5px;
    transition: all 0.1s;
}

.slot-row.dragover {
    border-color: #1f3a5f;
    background: #eef2f7;
    box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.12);
}

.slot-row.filled {
    background: #f6f9f6;
    border-color: #b3d9c1;
}

.slot-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.slot-label {
    font-size: 13.5px;
    font-weight: 700;
    color: #1a1a1a;
}

.slot-meta {
    font-size: 11px;
    color: #6a7280;
    font-family: ui-monospace, monospace;
}

.slot-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.photo-thumb.in-slot {
    width: 80px;
    height: 80px;
    aspect-ratio: 1;
    border: 1.5px solid #b6c7da;
}

/* 슬롯 직접 업로드 버튼 */
.slot-upload-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border: 2px dashed #c8d3df;
    border-radius: 4px;
    background: #fafbfc;
    color: #6a7280;
    cursor: pointer;
    transition: all 0.1s;
    gap: 2px;
    flex: 0 0 auto;
}

.slot-upload-btn:hover {
    border-color: #1f3a5f;
    background: #eef2f7;
    color: #1f3a5f;
}

.slot-upload-btn .plus {
    font-size: 24px;
    line-height: 1;
    font-weight: 300;
}

.slot-upload-btn .text {
    font-size: 11px;
    font-weight: 600;
}

/* 액션 바 — Step 4용 (그리드 2번째 행) */
.step4-actions {
    grid-column: 1 / 3;
    grid-row: 2;
    border-top: 1px solid #eef0f3;
    padding-top: 14px;
    margin: 0;
}

.actions-info {
    flex: 1;
    text-align: center;
    color: #6a7280;
    font-size: 12.5px;
    font-weight: 600;
}

.actions-info span:first-child { color: #1f3a5f; font-weight: 700; }

/* ─── Step 5 — 검토 & 제출 ───────────────────────────── */
.step5-shell {
    display: grid;
    grid-template-columns: 360px 1fr;
    grid-template-rows: 1fr auto;
    gap: 16px;
}

.review-summary {
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

.review-card {
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
}

.review-card h3 {
    margin: 0 0 14px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--brand-700);
    border-bottom: 1px solid var(--gray-100);
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.005em;
}

.review-card h3 .count-badge {
    margin-left: auto;
}

.count-badge.warn {
    background: #c4502a;
}

.progress-bar {
    height: 8px;
    background: #eef0f3;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4a7a4a, #5fa777);
    transition: width 0.3s;
}

.warn { color: #8a4014; font-weight: 700; }

.missing-list {
    margin-top: 8px;
    font-size: 12px;
}

.missing-list summary {
    cursor: pointer;
    color: #6a7280;
    font-weight: 600;
    padding: 4px 0;
}

.missing-list ul {
    margin: 6px 0 0;
    padding-left: 16px;
    max-height: 160px;
    overflow-y: auto;
}

.missing-list li {
    font-size: 11.5px;
    margin-bottom: 2px;
    color: #4a5260;
}

/* 부적합 항목 리스트 */
.problem-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
}

/* Step 3 상태 픽과 동일 어법: 흰 배경 + 좌측 3px 컬러바 + 컬러 텍스트(상태만) */
.problem-item {
    padding: 10px 12px 10px 15px;
    border: 1px solid var(--gray-200, #e3e7ec);
    border-left: 3px solid var(--gray-300, #d8dee7);
    border-radius: 4px;
    background: white;
}

.problem-item.severity-watch        { border-left-color: var(--warn-700, #8a6420); }
.problem-item.severity-replace_soon { border-left-color: var(--orange-700, #8c4218); }
.problem-item.severity-critical     { border-left-color: var(--critical-700, #8e2222); }

.prob-body { min-width: 0; }

.prob-line {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.prob-loc {
    font-size: 11.5px;
    color: var(--gray-500, #6a7280);
    font-weight: 700;
}

.prob-status {
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-500, #6a7280);
}

.problem-item.severity-watch        .prob-status { color: var(--warn-700, #8a6420); }
.problem-item.severity-replace_soon .prob-status { color: var(--orange-700, #8c4218); }
.problem-item.severity-critical     .prob-status { color: var(--critical-700, #8e2222); }

.prob-item-label {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
}

.prob-comment {
    margin-top: 3px;
    font-size: 12px;
    color: #4a5260;
    background: rgba(255, 255, 255, 0.6);
    padding: 4px 8px;
    border-radius: 3px;
}

/* PDF 미리보기 */
.review-preview {
    grid-row: 1;
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid #d8dee7;
    border-radius: 6px;
    overflow: hidden;
}

.preview-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #eef0f3;
    background: #fafbfc;
}

.preview-toolbar h3 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: #1f3a5f;
    flex: 1;
}

.preview-tools {
    display: flex;
    gap: 6px;
}

.preview-frame {
    width: 100%;
    height: calc(100vh - 280px);
    min-height: 500px;
    border: none;
    background: #f0f3f7;
}

.step5-actions {
    grid-column: 1 / 3;
    grid-row: 2;
}

.step5-actions code {
    background: #eef0f3;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
}

/* ─── 완료 페이지 ─────────────────────────────────── */
.done-card {
    max-width: 620px;
    margin: 80px auto;
    text-align: center;
    padding: 48px 40px;
    box-shadow: var(--shadow-md);
    border-radius: var(--r-lg);
}

.done-icon {
    width: 64px;
    height: 64px;
    line-height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--good-700);
    color: white;
    font-size: 32px;
    font-weight: 700;
    box-shadow: 0 0 0 8px var(--good-100);
}

.done-card h2 {
    margin: 0 0 8px;
    font-size: 22px;
    color: var(--good-700);
    letter-spacing: -0.015em;
}

.done-sub {
    color: #4a5260;
    margin: 0;
}

.done-card .kv-table {
    text-align: left;
}

.done-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}

/* ─── 최근 보고서 (이력) ───────────────────────────────── */
.history-shell {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.history-header h1 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--gray-900);
    letter-spacing: -0.015em;
}

.history-header .hint {
    margin: 0;
}

.history-section h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-700);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.report-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-md);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--shadow-sm);
    transition: all 0.15s;
}

.report-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.report-card.status-done {
    border-left: 3px solid var(--good-500);
}

.report-card.status-progress {
    border-left: 3px solid var(--brand-500);
}

.report-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.report-step {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--brand-700);
    background: var(--brand-50);
    padding: 3px 8px;
    border-radius: 3px;
    letter-spacing: -0.005em;
}

.report-step.done-tag {
    color: var(--good-700);
    background: var(--good-100);
}

.report-title {
    font-size: 16px;
    font-weight: 700;
    margin: 2px 0 6px;
    color: var(--gray-900);
    letter-spacing: -0.015em;
    line-height: 1.35;
}

.report-meta {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.report-meta td {
    padding: 3px 0;
    vertical-align: top;
}

.report-meta td:first-child {
    color: var(--gray-500);
    font-weight: 600;
    width: 65px;
}

.report-meta .muted {
    color: var(--gray-500);
    font-family: var(--font-mono);
    font-size: 11.5px;
}

.report-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--gray-100);
    align-items: center;
}

.report-actions form {
    margin: 0;
}

.btn.danger {
    color: var(--critical-700);
    border-color: var(--gray-300);
}

.btn.danger:hover {
    background: var(--critical-100);
    border-color: var(--critical-700);
    color: var(--critical-700);
}

.empty-state {
    background: var(--gray-50);
    border: 1px dashed var(--gray-300);
    border-radius: var(--r-md);
    padding: 36px 24px;
    text-align: center;
    color: var(--gray-500);
    font-size: 13.5px;
}

.empty-state p {
    margin: 0 0 14px;
}

/* ─── 로그인 ─────────────────────────────────────────── */
.login-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 20px;
}

.login-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-lg);
    padding: 40px 36px;
    box-shadow: var(--shadow-md);
    max-width: 420px;
    width: 100%;
    text-align: center;
}

.login-brand {
    margin-bottom: 18px;
}

.login-brand img {
    height: 36px;
    width: auto;
}

.login-card h1 {
    font-size: 17px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.login-sub {
    color: var(--gray-500);
    font-size: 13px;
    margin: 0 0 22px;
}

.login-form .field-block {
    text-align: left;
    margin-bottom: 6px;
}

.login-form .field-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-700);
    margin-bottom: 4px;
    display: block;
}

.login-error {
    background: var(--critical-100);
    border: 1px solid #cf8e8c;
    color: var(--critical-700);
    padding: 10px 14px;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}

.login-warn {
    background: var(--warn-100);
    border: 1px solid #ddc287;
    color: var(--warn-700);
    padding: 10px 14px;
    border-radius: var(--r-sm);
    font-size: 12px;
    margin-bottom: 16px;
    text-align: left;
    line-height: 1.5;
}

.login-warn code {
    background: rgba(255,255,255,0.7);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 11.5px;
}

/* ─── 시설 관리 ─────────────────────────────────────── */
.admin-shell {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.admin-table thead th {
    background: var(--gray-50);
    color: var(--gray-700);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}

.admin-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--gray-100);
    font-size: 13px;
    vertical-align: middle;
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-table tbody tr:hover {
    background: var(--brand-50);
}

.admin-form .grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.admin-form .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.admin-form .grid-span-3 {
    grid-column: 1 / -1;
}

.admin-form .field-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-form .field-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-700);
    letter-spacing: 0.005em;
}

.admin-form .field-label .req {
    color: var(--critical-700);
}

.admin-form .field-hint {
    font-size: 11px;
    color: var(--gray-500);
    margin-top: 1px;
}

/* 위치 편집 카드 */
.loc-editor-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.loc-editor-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--r-md);
    padding: 12px 16px;
}

.loc-editor-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--gray-200);
}

.loc-editor-num {
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 50%;
    background: var(--brand-700);
    color: white;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.loc-editor-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-900);
}

.loc-editor-body {
    display: grid;
}

/* ─── Step 3 전압 사진 위젯 ───────────────────────────────────── */
.voltage-block .voltage-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
}
.voltage-photos {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
}
.voltage-photo-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.voltage-photo-item {
    position: relative;
    width: 64px;
    height: 64px;
    border: 1.2px solid #d8dee7;
    border-radius: 4px;
    overflow: hidden;
    background: #fafbfc;
}
.voltage-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
}
.voltage-photo-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: rgba(15, 25, 45, 0.65);
    color: white;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.voltage-photo-remove:hover {
    background: rgba(150, 40, 40, 0.9);
}
.voltage-photo-add {
    width: 64px;
    height: 64px;
    border: 1.5px dashed #b4bcc8;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-700);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background: white;
    transition: border-color 0.15s, background 0.15s;
}
.voltage-photo-add:hover {
    border-color: var(--brand-500);
    background: var(--brand-50);
}

/* 미리보기 모달 (Step 3에서도 재사용 — 클래스가 step4와 같으면 같은 스타일 사용)
   step4_photos.css에 이미 정의되어 있다면 이 블록은 영향 없음 */
.photo-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 25, 45, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.photo-preview-frame {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}
.photo-preview-frame img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.photo-preview-close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: white;
    color: var(--gray-900);
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
[x-cloak] { display: none !important; }

/* ─── Step 3 전압 슬롯 (Step 4 슬롯 스타일 재사용) ───────────── */
.step3-voltage-slot {
    margin-top: 12px;
    margin-bottom: 0;
}

/* 측정값 + 슬롯이 같은 measurements 블록에 있으니 약간의 간격만 조정 */
.measurements .step3-voltage-slot .slot-row {
    background: white;
}

.measurements .step3-voltage-slot .slot-row.uploading {
    opacity: 0.7;
    pointer-events: none;
}

/* 작은 화면에선 슬롯 라벨 폭을 줄임 (Step 4는 240px이지만 Step 3 카드는 좁음) */
@media (max-width: 1100px) {
    .step3-voltage-slot .slot-row {
        grid-template-columns: 180px 1fr;
    }
}

/* ─── 모바일 폭 (~720px 이하) — 공유 데스크톱 헤더가 들어가는 페이지(/login 등)를 위한 보정 ─── */
@media (max-width: 720px) {
    .app-header {
        padding: 12px 16px 0;
    }
    .header-top { margin-bottom: 10px; gap: 12px; }
    .brand-title {
        font-size: 12.5px;
        padding-left: 10px;
        max-width: 50vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .brand-logo { height: 22px; }

    /* 데스크톱 nav 링크는 모바일에선 모두 숨김. 로그인은 별도 버튼으로 노출. */
    .header-actions .header-link:not(.logout),
    .header-actions .header-current-user {
        display: none;
    }
    .header-link.logout {
        margin-left: 0;
        border-left: none;
        padding: 6px 10px;
        font-size: 12.5px;
    }
    .step-nav { display: none; }
}