/* thynC Flow — Setup Plan (checklist) design system */

:root {
    --bg:        transparent;
    --surface:   rgba(255,255,255,0.12);
    --surface-2: rgba(255,255,255,0.08);
    --spring: cubic-bezier(.34,1.56,.64,1);
    --pearl-tint: linear-gradient(145deg, rgba(255,255,255,0.22), rgba(255,248,252,0.06) 42%, rgba(230,238,255,0.08));
    --glass-card: linear-gradient(155deg, rgba(255,255,255,0.52), rgba(255,255,255,0.14));
    --glass-panel: linear-gradient(160deg, rgba(255,255,255,0.38), rgba(255,255,255,0.08));
    --glass-input: linear-gradient(150deg, rgba(255,255,255,0.55), rgba(255,255,255,0.16));
    --glass-btn: linear-gradient(150deg, rgba(255,255,255,0.62), rgba(255,255,255,0.20));
    --glass-grid: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.06));
    --glass-blur: blur(28px) saturate(165%);
    --glass-blur-sm: blur(16px) saturate(150%);
    --glass-blur-xs: blur(10px) saturate(140%);
    --glass-border: rgba(255,255,255,0.62);
    --glass-border-strong: rgba(255,255,255,0.82);
    --glass-highlight: inset 0 1px 0 rgba(255,255,255,0.78);
    --glass-edge: 0 0 0 1px rgba(255,255,255,0.35);
    --shadow-warm: rgba(88,78,108,0.14);
    --shadow-card: 0 18px 40px -22px rgba(72,68,96,0.28);
    /* legacy aliases → glass shadows (NOT neumorphic dual-tone) */
    --raised:    var(--shadow-card), var(--glass-highlight);
    --raised-sm: 0 4px 12px -6px var(--shadow-warm), var(--glass-highlight);
    --raised-xs: 0 2px 8px -4px rgba(88,78,108,0.12), var(--glass-highlight);
    --inset:     inset 0 1px 3px rgba(120,110,100,0.10);
    --inset-sm:  inset 0 1px 2px rgba(120,110,100,0.08);
    --accent:    #ff8862;
    --accent-2:  #f06e3d;
    --accent-s:  rgba(255,136,98,.12);
    --accent-d:  rgba(255,136,98,.2);
    --accent-gradient: linear-gradient(135deg, #ff9a7c, #f06e3d);
    --teal:      #5a5a6e;
    --teal-s:    rgba(90,90,110,.12);
    --teal-d:    rgba(90,90,110,.22);
    --teal-gradient: linear-gradient(135deg, #706f88, #46465a);
    --blue:      #5b9cf6;
    --blue-s:    rgba(91,156,246,.12);
    --indigo:    #7c6ef7;
    --text-1:    #1e2a3a;
    --text-2:    #4e6178;
    --text-3:    #8fa3b8;
    --danger:    #f05252;
    --green:     #34c48a;
    /* legacy */
    --primary-color: #1e2a3a;
    --accent-color: #ff8862;
    --shadow-light: #ffffff;
    --shadow-dark: #c8cdd8;
    --text-primary: #1e2a3a;
    --danger-color: #f05252;
    /* responsive / mobile */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --touch-min: 44px;
    --shell-pad-x: 10px;
    --shell-pad-y: 24px;
    --flow-max-width: 1560px;
    --flow-inner-pad-x: 22px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Noto Sans KR', sans-serif;
    background: var(--bg); color: var(--text-1);
    min-height: 100vh;
    min-height: 100dvh;
    padding:
        max(var(--shell-pad-y), calc(var(--safe-top) + 12px))
        max(var(--shell-pad-x), var(--safe-right))
        max(72px, calc(var(--safe-bottom) + 24px))
        max(var(--shell-pad-x), var(--safe-left));
    -webkit-text-size-adjust: 100%;
}
.container { max-width: 100%; width: 100%; margin: 0; padding: 0; }

/* ── 페이지 헤더 ── */
.page-header {
    background: var(--surface);
    border-radius: 18px;
    box-shadow: var(--raised);
    padding: 16px 22px;
    display: flex; align-items: center;
    justify-content: space-between; gap: 14px; flex-wrap: wrap;
    margin-bottom: 14px;
    animation: slideDown .4s cubic-bezier(.22,.68,0,1.15) both;
}
@keyframes slideDown { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }
.ph-left { display: flex; align-items: center; gap: 13px; }
.ph-icon,
.flow-glass-house-icon {
    width: 42px; height: 42px; border-radius: 14px; flex-shrink: 0;
    background: var(--glass-card);
    backdrop-filter: var(--glass-blur-sm);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    border: 1px solid var(--glass-border);
    box-shadow: var(--raised-sm);
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    text-decoration: none;
    color: inherit;
}
.ph-icon::before,
.flow-glass-house-icon::before {
    content: '';
    position: absolute; inset: 4px; border-radius: 11px;
    background: var(--accent-gradient);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 5px 14px -8px rgba(240,110,61,0.42);
}
.ph-icon svg,
.flow-glass-house-icon svg { position: relative; z-index: 1; }
.flow-glass-house-icon--lg {
    width: 52px; height: 52px; border-radius: 16px;
}
.flow-glass-house-icon--lg::before {
    inset: 5px; border-radius: 13px;
}
.flow-glass-house-icon--nav {
    width: 42px; height: 42px; border-radius: 14px;
}
.flow-glass-house-icon--nav::before {
    inset: 4px; border-radius: 11px;
}

/* ④ 펄 글래스+집 — 시안 PNG */
.flow-house-img {
    flex-shrink: 0;
    display: block;
    object-fit: cover;
    box-shadow: var(--raised-sm);
}
.flow-house-img--nav {
    width: 42px;
    height: 42px;
    border-radius: 14px;
}
.flow-house-img--lg {
    width: 52px;
    height: 52px;
    border-radius: 16px;
}
.flow-house-img--home {
    width: 48px;
    height: 48px;
    border-radius: 16px;
}
a.flow-house-img-link {
    text-decoration: none;
    flex-shrink: 0;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
a.flow-house-img-link:hover {
    opacity: 0.92;
    transform: scale(0.98);
}

/* 브랜드 타일 아이콘 (파비콘과 동일 — 주황 + >_) */
.flow-brand-tile {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-gradient);
    color: #fff;
    font-family: 'DM Mono', 'Consolas', ui-monospace, monospace;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
    box-shadow:
        0 4px 14px rgba(255, 136, 98, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
.flow-brand-tile--sm {
    width: 30px; height: 30px;
    font-size: 10px;
    border-radius: 8px;
}
.flow-brand-tile--md {
    width: 36px; height: 36px;
    font-size: 11px;
    border-radius: 10px;
}
.flow-brand-tile--nav {
    width: 42px; height: 42px;
    font-size: 13px;
    border-radius: 14px;
}
.flow-brand-tile--lg {
    width: 52px; height: 52px;
    font-size: 15px;
    border-radius: 16px;
}

.ph-title { font-size: 16px; font-weight: 800; color: var(--text-1); letter-spacing: -.3px; font-family: 'Nunito', sans-serif; }
.ph-project { font-size: 11px; font-weight: 600; color: var(--text-3); margin-top: 1px; letter-spacing: .3px; }
.ph-right { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* ── 버튼 ── */
.btn {
    padding: 8px 16px; font-size: 12px; font-weight: 700;
    border: none; border-radius: 10px; cursor: pointer;
    transition: all .18s ease; text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--surface); box-shadow: var(--raised-sm);
    color: var(--text-2); white-space: nowrap;
    font-family: 'Noto Sans KR', sans-serif;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--raised); color: var(--text-1); }
.btn:active { transform: none; box-shadow: var(--inset-sm); }
.btn-primary {
    background: var(--accent-gradient); color: white;
    box-shadow: 0 8px 18px -6px rgba(255,136,98,0.30), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-primary:hover { box-shadow: 6px 6px 14px rgba(240,110,61,.34), -2px -2px 6px rgba(255,255,255,.7); color: white; }
.btn-secondary {
    background: var(--teal-gradient); color: white;
    box-shadow: 0 8px 18px -6px rgba(70,70,90,0.28), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-secondary:hover { box-shadow: 6px 6px 14px rgba(70,70,90,.34), -2px -2px 6px rgba(255,255,255,.7); color: white; }

/* ── 메인 카드 ── */
.checklist-section {
    background: var(--surface); border-radius: 20px;
    box-shadow: var(--raised); padding: 26px 26px 22px;
    animation: riseUp .4s cubic-bezier(.22,.68,0,1.15) .06s both;
}
@keyframes riseUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

/* ── 프로젝트 정보 헤더 ── */
.project-info-header {
    margin-bottom: 20px; padding-bottom: 16px;
    border-bottom: 1px solid rgba(200,205,216,.6);
}
.project-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.project-name { font-size: 20px; font-weight: 800; color: var(--text-1); letter-spacing: -.4px; font-family: 'Nunito', sans-serif; }
.hospital-code {
    font-size: 11px; font-weight: 800; color: var(--accent);
    background: var(--accent-s); border: 1px solid var(--accent-d);
    border-radius: 20px; padding: 2px 10px; font-family: 'Nunito', sans-serif;
}
.dns-row { font-size: 12px; color: var(--text-3); font-family: 'Nunito', sans-serif; margin-bottom: 9px; font-weight: 700; }
.dns-row.active { color: var(--teal); }
.meta-info { font-size: 11.5px; color: var(--text-2); line-height: 1.75; }
.meta-info-row { margin-bottom: 1px; }
.meta-label { display: inline-block; min-width: 44px; font-weight: 700; color: var(--text-3); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }

/* ── 코드 입력 ── */
.domain-input-area { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.code-input {
    width: 88px; padding: 6px 11px;
    border: none; border-radius: 9px;
    background: var(--surface); box-shadow: var(--inset-sm);
    font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 800;
    color: var(--accent); text-transform: lowercase; outline: none; transition: all .18s;
}
.code-input:focus { box-shadow: var(--inset-sm), 0 0 0 2px var(--accent-d); }

/* ── 탭 네비 ── */
.tab-nav {
    display: flex; gap: 3px; margin-bottom: 22px;
    background: var(--surface); box-shadow: var(--inset-sm);
    border-radius: 13px; padding: 4px;
}
.tab-link {
    flex: 1; padding: 7px 8px;
    border: none; background: none; cursor: pointer;
    font-size: 11.5px; font-weight: 700; color: var(--text-3);
    border-radius: 9px; transition: all .18s; position: relative;
    font-family: 'Noto Sans KR', sans-serif; white-space: nowrap;
}
.tab-link:hover { color: var(--text-2); background: rgba(255,255,255,.5); }
.tab-link.active {
    color: var(--text-1); background: var(--surface);
    box-shadow: var(--raised-sm);
}
.tab-link .badge {
    position: absolute; top: 2px; right: 2px;
    background: var(--accent-gradient); color: white;
    font-size: 8px; font-weight: 900;
    padding: 1px 4px; border-radius: 7px; min-width: 14px; text-align: center;
}
.tab-content { display: none; animation: fadeTab .25s ease; }
.tab-content.active { display: block; }
@keyframes fadeTab { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* ── 페이지 리드 (콘텐츠 상단 제목 — flow-topbar와 별도, 카드형 헤더 아님) ── */
.page-lead {
    margin: 0 0 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(200,205,216,.5);
}
.page-lead-title {
    margin: 0 0 5px;
    font-family: 'Nunito', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -.35px;
    line-height: 1.25;
}
.page-lead-sub {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-3);
    line-height: 1.55;
}
.page-lead-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.page-lead-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    color: var(--text-2);
    background: var(--glass-input);
    border: 1px solid var(--glass-border);
    letter-spacing: .02em;
}
.page-lead-tag.accent {
    color: var(--accent-2);
    background: var(--accent-s);
    border-color: var(--accent-d);
}
/* flow-main 안에서는 두 번째 page-header 카드 금지 — page-lead 사용 */
.flow-main > .page-header:not(.flow-topbar) { display: none; }

/* ── 섹션 헤더 ── */
.form-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.form-section-header h3 { font-size: 13px; font-weight: 800; color: var(--text-1); margin: 0; font-family: 'Nunito', sans-serif; }
.work-checklist-page .checklist-subsection-divider {
    height: 1px;
    margin: 28px 0 24px;
    background: linear-gradient(90deg, transparent, rgba(200,205,216,.75) 12%, rgba(200,205,216,.75) 88%, transparent);
}
.section-count {
    font-size: 10px; font-weight: 700; color: var(--text-3);
    background: var(--surface); box-shadow: var(--inset-sm);
    border-radius: 20px; padding: 2px 9px;
}

/* ── + 버튼 ── */
.btn-action-3d {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--surface); border: none;
    color: var(--accent); font-weight: 900; font-size: 17px;
    cursor: pointer; box-shadow: var(--raised-sm); transition: all .15s;
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.btn-action-3d:hover { box-shadow: var(--raised); transform: scale(1.08); }
.btn-action-3d:active { box-shadow: var(--inset-sm); transform: scale(.95); }

/* ── 컴팩트 그리드 & 카드 ── */
.compact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 2px; }
.compact-grid.meeting-grid { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }

.compact-card {
    background: var(--surface); border-radius: 14px;
    padding: 13px 15px; position: relative;
    box-shadow: var(--raised-sm); transition: box-shadow .2s, transform .2s; cursor: pointer;
}
.compact-card:hover { box-shadow: var(--raised); transform: translateY(-2px); }
.compact-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; }
.compact-card-number {
    height: 22px; border-radius: 11px;
    background: var(--accent-gradient); color: white;
    display: inline-flex; align-items: center; padding: 0 9px; gap: 6px;
    font-weight: 900; font-size: 11.5px; font-family: 'Nunito', sans-serif;
    box-shadow: 2px 2px 6px rgba(240,110,61,.22);
}
.compact-card-delete {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--surface); border: none; color: var(--text-3);
    font-size: 14px; cursor: pointer;
    box-shadow: var(--raised-xs); transition: all .12s;
    display: flex; align-items: center; justify-content: center;
}
.compact-card-delete:hover { color: var(--danger); box-shadow: var(--raised-sm); }
.compact-card-delete:active { box-shadow: var(--inset-sm); }

/* ── 폼 인풋 ── */
.compact-form-row { margin-bottom: 8px; }
.compact-form-row:last-child { margin-bottom: 0; }
.compact-form-row label {
    display: block; margin-bottom: 3px; font-weight: 700;
    font-size: 9.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .8px;
}
.compact-form-row input,
.compact-form-row textarea,
.compact-form-row select {
    width: 100%; padding: 7px 10px;
    border: none; border-radius: 8px;
    background: var(--surface); box-shadow: var(--inset-sm);
    font-family: 'Noto Sans KR', sans-serif; font-size: 12.5px;
    outline: none; transition: box-shadow .18s; color: var(--text-1);
}
.compact-form-row input:focus,
.compact-form-row textarea:focus,
.compact-form-row select:focus { box-shadow: var(--inset-sm), 0 0 0 2px var(--accent-d); }
.compact-form-row textarea { resize: vertical; min-height: 70px; }
.compact-form-row select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238fa3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; cursor: pointer;
}
.compact-form-row input[type="date"] {
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='3' width='12' height='11' rx='2' stroke='%23ff8862' stroke-width='1.4'/%3E%3Cpath d='M5 1.5V4M11 1.5V4M2 7h12' stroke='%23ff8862' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; padding-right: 36px; cursor: pointer; font-weight: 600;
}
.compact-form-row input[type="date"]::-webkit-calendar-picker-indicator { position:absolute; right:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.compact-form-row input[type="number"] { -moz-appearance: textfield; }
.compact-form-row input[type="number"]::-webkit-inner-spin-button,
.compact-form-row input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.etc-toggle { font-size: 10px; color: var(--accent); opacity: .65; cursor: pointer; text-decoration: underline; margin-bottom: 3px; display: inline-block; }
.etc-toggle:hover { opacity: 1; }

/* ── 스크립트 복사 버튼 ── */
.copy-script-btn {
    padding: 5px 13px; background: var(--accent-gradient);
    color: white; border: none; border-radius: 7px; cursor: pointer;
    font-weight: 700; font-size: 11.5px;
    box-shadow: 2px 2px 7px rgba(240,110,61,.22); transition: all .18s;
    white-space: nowrap;
}
.copy-script-btn:hover { transform: translateY(-1px); box-shadow: 3px 3px 10px rgba(240,110,61,.3); }

/* ── 스테이션 ── */
/* ── 스테이션 행 레이아웃 ─── */
.ward-station-group {
    display: grid;
    grid-template-columns: 72px auto 1fr 200px 160px;
    background: var(--surface); border-radius: 16px;
    box-shadow: var(--raised-sm); margin-bottom: 10px;
    overflow: hidden; min-height: 90px;
    align-items: stretch;
}
/* 병동명 */
.ward-station-name-col {
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 900; color: var(--text-1);
    font-family: 'Nunito', sans-serif; background: rgba(0,0,0,.02);
    border-right: 1.5px solid rgba(200,205,216,.45);
    padding: 14px 8px; text-align: center; word-break: keep-all; line-height: 1.3;
}
/* PC 섹션 — auto: 카드 수만큼만 */
.ward-station-body {
    display: flex; flex-direction: column; gap: 6px;
    padding: 12px 14px; align-items: flex-start;
}
.station-pc-section { display: flex; flex-direction: column; gap: 6px; }
/* spacer — 남은 공간 채움 (1fr) */
.ward-station-spacer { }
/* 사이니지 섹션 */
.station-signage-section {
    border-left: 1.5px solid rgba(200,205,216,.4);
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 6px;
}
/* 특별요청 */
.ward-station-note-col {
    border-left: 1.5px solid rgba(200,205,216,.4);
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 5px;
    background: rgba(128,90,213,.02);
}
.ward-note-label {
    font-size: 9px; font-weight: 800; color: #805AD5;
    text-transform: uppercase; letter-spacing: .7px;
}
.ward-note-input {
    width: 100%; flex: 1; padding: 7px 9px;
    border: none; border-radius: 8px;
    background: var(--surface); box-shadow: var(--inset-sm);
    font-family: 'Noto Sans KR', sans-serif; font-size: 11px;
    outline: none; color: var(--text-1); resize: none; min-height: 52px;
}
.ward-note-input:focus { box-shadow: var(--inset-sm), 0 0 0 2px rgba(128,90,213,.25); }
/* 섹션 레이블 */
.station-section-label {
    font-size: 9px; font-weight: 800; color: var(--text-3);
    text-transform: uppercase; letter-spacing: .8px;
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
    margin-bottom: 4px;
}
.station-section-label span { background: var(--accent-soft); color: var(--accent); padding: 1px 5px; border-radius: 4px; font-size: 8.5px; }
.station-section-label.signage-lbl span { background: rgba(74,158,255,.12); color: #4a9eff; }
/* 카드 컨테이너 */
.station-cards-container { display: flex; flex-wrap: wrap; gap: 7px; }
.signage-cards-container { display: flex; flex-wrap: wrap; gap: 7px; width: 100%; }
/* PC 카드 */
.station-mini-card {
    background: var(--surface); border-radius: 12px;
    padding: 10px 11px; box-shadow: var(--raised-xs);
    width: calc(50% - 4px); min-width: 130px; flex-shrink: 0; position: relative;
    transition: box-shadow .15s;
}
.station-mini-card:hover { box-shadow: var(--raised-sm); }
/* PC 카드: 1대면 해당 영역을 가득 채우고, 2대 이상이면 반반(2열) */
.station-cards-container > .station-mini-card:only-child { width: 100%; }
.station-mini-card.signage-card {
    border-top: 3px solid rgba(74,158,255,.5);
    width: 100%; box-sizing: border-box;
}
.station-mini-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.station-mini-number {
    height: 20px; border-radius: 10px;
    background: var(--accent-gradient); color: white;
    display: inline-flex; align-items: center; padding: 0 8px;
    font-weight: 900; font-size: 10px; font-family: 'Nunito', sans-serif;
    box-shadow: 1px 2px 5px rgba(240,110,61,.2);
}
.station-mini-number.signage-num { background: linear-gradient(135deg,#4a9eff,#60b0ff); box-shadow: 1px 2px 5px rgba(74,158,255,.2); }
.station-mini-delete {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--surface); border: none; color: var(--text-3);
    font-size: 12px; cursor: pointer; box-shadow: var(--raised-xs);
    display: flex; align-items: center; justify-content: center; transition: all .12s;
}
.station-mini-delete:hover { color: var(--danger); box-shadow: var(--raised-sm); }
/* 카드 내 폼 */
.station-form-row { margin-bottom: 5px; }
.station-form-row:last-child { margin-bottom: 0; }
.station-form-row label { display: block; margin-bottom: 2px; font-weight: 700; font-size: 9px; color: var(--text-3); text-transform: uppercase; letter-spacing: .6px; }
.station-form-row input, .station-form-row select {
    width: 100%; padding: 5px 8px; border: none; border-radius: 6px;
    background: var(--surface); box-shadow: var(--inset-sm);
    font-family: 'Noto Sans KR', sans-serif; font-size: 11px;
    outline: none; color: var(--text-1); transition: box-shadow .18s;
}
.station-form-row input:focus, .station-form-row select:focus { box-shadow: var(--inset-sm), 0 0 0 2px rgba(255,136,98,.3); }
.station-form-row select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238fa3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 7px center; padding-right: 22px; cursor: pointer;
}
.pc-item-label {
    font-size: 11.5px; font-weight: 700; color: var(--text-1);
    padding: 4px 8px; background: var(--surface); border-radius: 6px;
    box-shadow: var(--inset-sm); white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 100%;
}
.btn-add-station-inline {
    font-size: 10px; padding: 3px 8px; border-radius: 6px;
    background: var(--surface); border: none; color: var(--accent);
    box-shadow: var(--raised-xs); cursor: pointer; font-weight: 700;
    white-space: nowrap; transition: box-shadow .15s; margin-left: 4px;
}
.btn-add-signage-inline {
    font-size: 10px; padding: 4px 9px; border-radius: 6px;
    background: var(--surface); border: none; color: #4a9eff;
    box-shadow: var(--raised-xs); cursor: pointer; font-weight: 700;
    white-space: nowrap; transition: box-shadow .15s; width: 100%;
    text-align: center; margin-top: 4px;
}
.btn-add-station-inline:hover, .btn-add-signage-inline:hover { box-shadow: var(--raised-sm); }

/* ── ward-card hint ── */
.compact-card.ward-card::after {
    content: "더블클릭으로 병실설정 복사";
    position: absolute; bottom: 7px; right: 11px;
    font-size: 9px; color: var(--text-3); opacity: 0;
    transition: opacity .25s; pointer-events: none;
}
.compact-card.ward-card:hover::after { opacity: 1; }

/* ── 푸터 ── */
.footer-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 24px; padding-top: 18px;
    border-top: 1px solid rgba(200,205,216,.5);
}

/* ── 모달 ── */
.modal {
    display: none; position: fixed; z-index: 1000;
    left: 0; top: 0; width: 100%; height: 100%;
    overflow: auto; background: rgba(15,20,30,.5);
    align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
.modal-content {
    background: var(--surface); padding: 26px; border-radius: 18px;
    max-width: 480px; width: 90%;
    box-shadow: 0 24px 64px rgba(0,0,0,.28); position: relative;
}
.modal-content input[type="email"] {
    width: 100%; padding: 10px 13px; margin: 12px 0;
    border: none; border-radius: 9px;
    background: var(--surface); box-shadow: var(--inset-sm);
    font-family: 'Noto Sans KR', sans-serif; font-size: 13px; outline: none;
}
.modal-content input[type="email"]:focus { box-shadow: var(--inset-sm), 0 0 0 2px var(--accent-d); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.modal-content-script {
    background: #161b27; color: #c5ced9; padding: 24px; border-radius: 16px;
    max-width: 800px; width: 90%; max-height: 82vh; overflow: auto;
    position: relative; box-shadow: 0 24px 64px rgba(0,0,0,.55);
}
.modal-content-script pre { margin: 0; white-space: pre-wrap; font-family: 'Courier New', monospace; font-size: 12.5px; line-height: 1.7; }
.close-btn { position: absolute; top: 16px; right: 24px; color: var(--text-3); font-size: 28px; font-weight: bold; transition: color .15s; cursor: pointer; z-index: 10; line-height: 1; }
.close-btn:hover { color: var(--accent); }
.close-btn-dark { color: var(--text-2); }

/* ── 토스트 ── */
#toast-container { position: fixed; top: 18px; right: 18px; z-index: 1050; display: flex; flex-direction: column; gap: 7px; }
.toast-message {
    background: var(--glass-card), var(--pearl-tint) !important;
    -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm);
    border: 1px solid var(--glass-border-strong);
    box-shadow: var(--shadow-card), var(--glass-highlight) !important;
    padding: 11px 20px; border-radius: 11px;
    font-size: 12.5px; font-weight: 700; color: var(--text-1); opacity: 0; transform: translateX(110%);
    transition: all .4s cubic-bezier(.34,1.56,.64,1);
}
.toast-message.show { opacity: 1; transform: translateX(0); }
.toast-message.success { border-left: 3px solid var(--green); }
.toast-message.error { border-left: 3px solid var(--danger); color: var(--danger); }

label { display: block; margin-bottom: 5px; font-weight: 700; font-size: 12.5px; }

/* ════════════════════════════════════════════════════════
   PEARL GLASS THEME · 웜 그레이 배경 + 투명 글래스 콘텐츠
   - 배경: 진주 오로라 (글래스 전용, 뉴모피즘 미사용)
   - 콘텐츠: 카드·입력·버튼 투명 + backdrop-blur 로 유리감
════════════════════════════════════════════════════════ */
/* 진주 오로라 배경 — 글래스 뒤로 색이 비쳐야 유리감이 살아남 */
body {
    background-color: #e4e9f4 !important;
    background:
        radial-gradient(ellipse 920px 640px at 8% 6%, rgba(255,210,188,0.50), transparent 58%),
        radial-gradient(ellipse 760px 520px at 92% 10%, rgba(198,218,255,0.46), transparent 56%),
        radial-gradient(ellipse 680px 480px at 48% 98%, rgba(255,246,236,0.58), transparent 62%),
        radial-gradient(ellipse 420px 320px at 78% 72%, rgba(255,182,212,0.14), transparent 52%),
        radial-gradient(ellipse 360px 280px at 22% 58%, rgba(186,230,253,0.16), transparent 50%),
        linear-gradient(152deg, #eef2fa 0%, #e6ebf5 38%, #f0ebe8 72%, #ebe8f2 100%) !important;
    background-size: 100% 100%;
    background-attachment: fixed;
    overflow-x: hidden;
}
body.flow-app::after {
    content: '';
    position: fixed; inset: -20%;
    z-index: -2; pointer-events: none;
    background:
        radial-gradient(circle at 30% 40%, rgba(255,200,170,0.18), transparent 42%),
        radial-gradient(circle at 70% 60%, rgba(170,200,255,0.16), transparent 40%);
    filter: blur(40px);
    animation: pearlDrift 28s ease-in-out infinite alternate;
}
@keyframes pearlDrift {
    from { transform: translate(0, 0) scale(1); opacity: .85; }
    to   { transform: translate(2%, -1.5%) scale(1.04); opacity: 1; }
}
/* 미세 그레인 텍스쳐 (정적) — 유리 뒤로 은은하게 비쳐 진짜 유리 느낌 */
body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    opacity: .05;
}

/* 유리판: 헤더 / 메인 / 카드 / 탭바 */
.page-header, .checklist-section, .compact-card, .tab-nav {
    background:
        radial-gradient(320px 320px at var(--mx,50%) var(--my,0%), rgba(255,255,255,0.42), transparent 64%),
        var(--glass-card), var(--pearl-tint) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border-strong);
    box-shadow:
        var(--glass-edge),
        var(--shadow-card),
        var(--glass-highlight) !important;
    position: relative;
}
.page-header, .checklist-section, .compact-card { overflow: hidden; }

/* 정적 상단 광택 (무지갯빛/회전 제거 → 차분한 유리 하이라이트) */
.page-header::before, .checklist-section::before, .compact-card::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; z-index: 0;
    background: linear-gradient(150deg, rgba(255,255,255,0.28), transparent 38%);
    opacity: 0.65;
    animation: none;
}
.page-header > *, .checklist-section > *, .compact-card > * { position: relative; z-index: 1; }

/* 카드 포인터 글레어(JS가 --mx/--my 주입) + 호버 글로우 */
.compact-card, .checklist-section {
    transition: transform .25s var(--spring), box-shadow .35s ease, border-color .35s ease;
    will-change: transform;
}
.compact-card {
    background:
        radial-gradient(220px 220px at var(--mx,50%) var(--my,130%), rgba(255,255,255,0.22), rgba(255,255,255,0) 60%),
        var(--glass-card), var(--pearl-tint) !important;
}
.compact-card:hover, .checklist-section:hover {
    border-color: rgba(255,255,255,0.82);
    box-shadow:
        0 0 0 1px rgba(255,180,150,0.18),
        0 16px 36px -18px rgba(80,72,64,0.22),
        var(--glass-highlight) !important;
}
.tab-nav { padding: 5px; background: linear-gradient(150deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05)), var(--pearl-tint) !important; }
.tab-link:hover { color: var(--text-2); background: rgba(255,255,255,0.22); backdrop-filter: blur(8px); }
.tab-link.active {
    background: linear-gradient(150deg, rgba(255,255,255,0.38), rgba(255,255,255,0.18)) !important;
    -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm);
    color: var(--text-1) !important;
    box-shadow: 0 4px 12px -6px var(--shadow-warm), var(--glass-highlight) !important;
}
.tab-link .badge, .compact-card-number {
    background: var(--accent-gradient) !important;
    box-shadow: 0 4px 10px -3px rgba(255,136,98,0.28) !important;
    color: #fff !important;
}
.work-checklist-page .compact-card-number .switch-meta-badge {
    font-size: 10px;
    font-weight: 700;
    margin-left: 5px;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: -.01em;
    text-shadow: 0 1px 1px rgba(120, 50, 20, 0.22);
}
.work-checklist-page .compact-card-number .switch-meta-ward {
    font-weight: 800;
    color: #fff;
    margin-left: 7px;
}
.section-count, .hospital-code { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn {
    background: var(--glass-btn) !important;
    -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm);
    border: 1px solid var(--glass-border-strong);
    box-shadow: 0 4px 12px -6px var(--shadow-warm), var(--glass-highlight) !important;
    color: var(--text-2);
}
.btn:hover { transform: translateY(-1px); color: var(--text-1); box-shadow: 0 8px 18px -6px rgba(255,136,98,0.16), var(--glass-highlight) !important; }
.btn:active { transform: translateY(1px) scale(.98); }
.btn-primary {
    background: var(--accent-gradient) !important; color: #fff !important;
    box-shadow: 0 8px 18px -6px rgba(255,136,98,0.30), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
.btn-secondary {
    background: var(--glass-btn) !important;
    -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm);
    color: var(--text-2) !important;
    box-shadow: 0 4px 12px -6px var(--shadow-warm), var(--glass-highlight) !important;
}
.compact-form-row input, .compact-form-row textarea, .compact-form-row select, .code-input {
    background: var(--glass-input) !important;
    -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm);
    border: 1px solid var(--glass-border) !important;
    box-shadow: inset 0 1px 2px rgba(120,110,100,0.08), var(--glass-highlight) !important;
    color: var(--text-1) !important;
}
.compact-form-row input:focus, .compact-form-row textarea:focus, .compact-form-row select:focus, .code-input:focus {
    border-color: rgba(255,136,98,0.42) !important;
    box-shadow: inset 0 1px 2px rgba(120,130,170,0.14), 0 0 0 3px rgba(255,136,98,0.14) !important;
}
.section-count {
    background: var(--glass-input) !important;
    -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm);
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-highlight) !important;
}
@media (prefers-reduced-motion: reduce) {
    body { animation: none; }
    .page-header::before, .checklist-section::before, .compact-card::before { animation: none; }
}

/* Login page — true glassmorphism (single blur layer) */
.login-page {
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 28px 20px 56px;
    position: relative; overflow: hidden;
}
.login-page::before {
    content: ''; position: fixed; inset: -18%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 560px 440px at 14% 20%, rgba(255,198,178,0.38), transparent 62%),
        radial-gradient(ellipse 500px 400px at 86% 16%, rgba(168,198,255,0.34), transparent 58%),
        radial-gradient(ellipse 420px 340px at 52% 92%, rgba(255,242,228,0.30), transparent 60%);
    filter: blur(28px);
    animation: loginPearlDrift 26s ease-in-out infinite alternate;
}
@keyframes loginPearlDrift {
    from { transform: translate(0,0) scale(1); opacity: .88; }
    to   { transform: translate(1.8%, -2.2%) scale(1.04); opacity: 1; }
}
/* 블러는 카드 1겹만 — 안쪽은 반투명 레이어로 유리 깊이 표현 */
.login-card.login-pearl {
    width: 100%; max-width: 408px; padding: 0;
    position: relative; z-index: 3; border-radius: 22px;
    overflow: hidden;
    transition: box-shadow .35s ease, border-color .35s ease;
    background:
        radial-gradient(420px 320px at var(--mx,50%) var(--my,28%), rgba(255,255,255,0.50), transparent 58%),
        linear-gradient(155deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.14) 52%, rgba(248,252,255,0.22) 100%);
    -webkit-backdrop-filter: blur(22px) saturate(175%);
    backdrop-filter: blur(22px) saturate(175%);
    border: 1px solid rgba(255,255,255,0.72);
    box-shadow:
        0 8px 32px rgba(31,38,135,0.14),
        0 24px 56px -20px rgba(48,42,68,0.28),
        inset 0 1px 0 rgba(255,255,255,0.85),
        inset 0 -1px 0 rgba(255,255,255,0.18);
}
.login-card.login-pearl.is-active {
    border-color: rgba(255,255,255,0.88);
    box-shadow:
        0 8px 32px rgba(31,38,135,0.16),
        0 28px 64px -18px rgba(48,42,68,0.32),
        0 0 0 1px rgba(255,200,180,0.18),
        inset 0 1px 0 rgba(255,255,255,0.92),
        inset 0 -1px 0 rgba(255,255,255,0.20);
}
.login-card-shine {
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
    background:
        linear-gradient(125deg, rgba(255,255,255,0.42) 0%, transparent 40%, rgba(255,210,230,0.08) 65%, rgba(180,210,255,0.10) 100%);
    opacity: calc(0.45 + var(--glare, 0) * 0.4);
    transition: opacity .2s ease;
}
.login-card-shine::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(280px 200px at var(--mx,50%) var(--my,28%), rgba(255,255,255,0.55), transparent 55%);
    opacity: calc(0.2 + var(--glare, 0) * 0.45);
}
.login-card-body { position: relative; z-index: 1; padding: 38px 32px 34px; }
.login-heading {
    margin: 0 0 22px; padding-bottom: 18px; text-align: center;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
    color: #1c1c24; line-height: 1.2; user-select: none;
    border-bottom: 1px solid rgba(255,255,255,0.42);
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.login-flash-list { list-style: none; padding: 0; margin: 0 0 16px; }
.login-flash {
    padding: 11px 14px; border-radius: 10px; text-align: center;
    font-weight: 600; font-size: 13px;
}
.login-flash-danger, .login-flash-error {
    background: rgba(254,226,226,0.55); color: #b91c1c;
    border: 1px solid rgba(252,165,165,0.45);
}
.login-flash-success {
    background: rgba(220,252,231,0.55); color: #15803d;
    border: 1px solid rgba(134,239,172,0.45);
}
.login-error {
    background: rgba(254,226,226,0.55); color: var(--danger);
    padding: 11px 14px; margin-bottom: 16px; border-radius: 10px;
    font-weight: 600; font-size: 13px; text-align: center;
    border: 1px solid rgba(252,165,165,0.45);
}
.login-form {
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px; border-radius: 14px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.38);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(255,255,255,0.08);
}
.login-field {
    position: relative; padding: 11px 13px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.32);
    border: 1px solid rgba(255,255,255,0.52);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.65),
        inset 0 -1px 2px rgba(100,95,120,0.05),
        0 2px 8px rgba(48,42,68,0.04);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.login-field label {
    display: block; font-size: 11px; font-weight: 700;
    color: rgba(30,32,40,0.72); margin-bottom: 7px; letter-spacing: 0.04em;
    text-transform: uppercase;
}
.login-glass-input {
    width: 100%; padding: 0; border-radius: 0;
    font-size: 14px; font-family: inherit; color: #14141c; outline: none;
    background: transparent !important;
    border: none !important; box-shadow: none !important;
}
.login-field.is-focused {
    background: rgba(255,255,255,0.44);
    border-color: rgba(255,180,150,0.65);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.75),
        0 0 0 3px rgba(255,140,100,0.14),
        0 4px 14px rgba(255,130,90,0.12);
}
.login-glass-input::placeholder { color: rgba(50,52,62,0.45); font-weight: 500; }
.login-submit {
    position: relative; overflow: hidden; width: 100%; margin-top: 14px;
    padding: 14px 16px; border: none; border-radius: 12px; cursor: pointer;
    font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.01em;
    color: #fff; isolation: isolate;
    background:
        radial-gradient(140px 100px at var(--bx,50%) var(--by,40%), rgba(255,255,255,0.32), transparent 65%),
        var(--accent-gradient) !important;
    box-shadow:
        0 8px 22px -6px rgba(255,120,80,0.38),
        inset 0 1px 0 rgba(255,255,255,0.35);
    transition: transform .2s var(--spring), box-shadow .2s ease;
}
.login-submit-label { position: relative; z-index: 1; }
.login-submit-glow {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .5s ease;
}
.login-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -6px rgba(255,120,80,0.44), inset 0 1px 0 rgba(255,255,255,0.38);
}
.login-submit:hover .login-submit-glow { transform: translateX(120%); }
.login-submit:active { transform: translateY(0); }
.login-submit.is-loading { opacity: 0.82; pointer-events: none; }
.login-footer {
    position: absolute; bottom: 22px; width: 100%; left: 0;
    font-size: 11px; font-weight: 500; color: rgba(60,60,68,0.45);
    text-align: center; z-index: 1; letter-spacing: 0.02em;
}
@media (prefers-reduced-motion: reduce) {
    .login-page::before { animation: none; }
}

/* App shell + nav (checklist design) */
body.flow-app { padding: 0 !important; }
.flow-shell { max-width: var(--flow-max-width); margin: 0 auto; padding: 16px var(--shell-pad-x) 72px; }
.flow-topbar {
  position: sticky; top: 12px; z-index: 500;
  margin-bottom: 16px; flex-wrap: wrap;
  width: 100%;
  margin-inline: 0;
}
.flow-main.container {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.flow-topbar .ph-left a { text-decoration: none; color: inherit; display: flex; align-items: center; gap: 13px; }
.flow-topbar .ph-left a,
.flow-topbar .ph-left a:hover,
.flow-topbar .ph-left a:active,
.flow-topbar .ph-left a:focus,
.flow-topbar .ph-left a:visited {
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.flow-topbar .ph-title { color: var(--text-1); }
.flow-topbar .ph-project { color: var(--text-3); }
.flow-actions .btn:active:not(.btn-primary),
.flow-actions .btn:focus-visible:not(.btn-primary) {
  color: #111 !important;
}

.flow-nav-wrap { display: flex; align-items: center; gap: 4px; flex: 1; flex-wrap: wrap; justify-content: center; min-width: 0; }
.flow-nav-wrap .btn { padding: 7px 12px; font-size: 11.5px; }

/* 헤더 네비 — 글씨색 #111 통일 (활성/비활성/설치계획서 동일) */
.flow-topbar .flow-nav-wrap .btn,
.flow-topbar .flow-nav-wrap .btn:hover,
.flow-topbar .flow-nav-wrap .btn:active,
.flow-topbar .flow-nav-wrap .btn:focus,
.flow-topbar .flow-nav-wrap .btn:focus-visible,
.flow-topbar .flow-nav-wrap .btn:visited,
.flow-topbar .flow-nav-wrap .btn.nav-active,
.flow-topbar .flow-nav-wrap .btn.nav-accent,
.flow-topbar .flow-nav-wrap .btn.nav-accent.nav-active,
.flow-topbar .flow-nav-wrap .btn.nav-accent:not(.nav-active) {
  color: #111 !important;
}
.flow-topbar .flow-nav-wrap .btn:focus-visible {
  outline: 2px solid rgba(255,136,98,.35);
  outline-offset: 2px;
}
.flow-topbar .flow-nav-wrap .btn.nav-active,
.flow-topbar .flow-nav-wrap .btn.nav-accent.nav-active {
  background: rgba(255,136,98,0.14) !important;
  border: 1.5px solid rgba(255,136,98,0.45) !important;
  box-shadow: 0 4px 12px -6px rgba(255,136,98,0.18), var(--glass-highlight) !important;
  font-weight: 800;
}
.flow-topbar .flow-nav-wrap .btn.nav-accent:not(.nav-active) {
  background: var(--glass-btn) !important;
  border: 1px solid var(--glass-border-strong) !important;
  box-shadow: 0 4px 12px -6px var(--shadow-warm), var(--glass-highlight) !important;
}
.flow-topbar .flow-actions .btn,
.flow-topbar .flow-actions .btn:hover,
.flow-topbar .flow-notif-btn,
.flow-topbar .flow-user-chip { color: #111 !important; }
.flow-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.flow-user-chip {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px;
  background: var(--glass-input); border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight) !important; font-size: 12px; font-weight: 700; color: var(--text-2);
}
.flow-user-avatar {
  width: 26px; height: 26px; border-radius: 8px; background: var(--accent-gradient);
  color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.flow-notif { position: relative; }
.flow-notif-btn {
  width: 36px; height: 36px; border-radius: 10px; border: none; cursor: pointer;
  background: var(--glass-btn) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight) !important;
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
}
.flow-notif-btn:hover { box-shadow: 0 8px 18px -6px var(--shadow-warm), var(--glass-highlight) !important; color: var(--text-1); }
.notif-badge {
  position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 50%; background: var(--accent-gradient); color: #fff; font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.notif-dropdown {
  display: none; position: absolute; top: 44px; right: 0; width: 300px;
  background: var(--glass-card); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-strong); border-radius: 16px;
  box-shadow: var(--shadow-card); z-index: 600; overflow: hidden;
}
.notif-dropdown.open { display: block; }
.notif-header { padding: 14px 16px; font-size: 12px; font-weight: 800; border-bottom: 1px solid rgba(200,205,216,.5); }
.notif-list { max-height: 280px; overflow-y: auto; }
.notif-item { padding: 12px 16px; border-bottom: 1px solid rgba(200,205,216,.35); cursor: pointer; }
.notif-item:hover { background: var(--accent-s); }
.notif-item.unread { border-left: 3px solid var(--accent); }
.notif-item-title { font-size: 12px; font-weight: 700; }
.notif-item-body { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.notif-item-time { font-size: 10px; color: var(--text-3); margin-top: 3px; }
.notif-empty { padding: 24px; text-align: center; font-size: 12px; color: var(--text-3); }
.notif-footer { padding: 10px 16px; border-top: 1px solid rgba(200,205,216,.5); text-align: right; }

/* Dashboard — 글래스 + 통일 버튼 스펙 */
.dashboard-page { padding: 4px 0 24px; }
.dashboard-page .header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.45);
}
.dashboard-page .header h1 {
  margin: 0; font-family: 'Nunito', sans-serif;
  font-size: 20px; font-weight: 800; color: var(--text-1); letter-spacing: -.3px;
}
.dashboard-page .stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.dashboard-page .stat-card,
.flow-main .dashboard-page .stat-card {
  padding: 18px 16px; text-align: center;
  background: var(--glass-card), var(--pearl-tint) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border-strong) !important;
  box-shadow: var(--shadow-card), var(--glass-highlight) !important;
  border-radius: 16px; transition: transform .2s var(--spring);
}
.dashboard-page .stat-card:not([style*="transform"]):hover { transform: translateY(-2px); }
.dashboard-page .stat-card h3 {
  margin: 0 0 6px; font-size: 11px; font-weight: 800;
  color: var(--text-3); letter-spacing: .04em; text-transform: uppercase;
}
.dashboard-page .stat-card p {
  margin: 0; font-family: 'Nunito', sans-serif;
  font-size: 28px; font-weight: 900; color: var(--accent); line-height: 1;
}
.dashboard-page .search-wrapper { margin-bottom: 18px; }
.dashboard-page .search-input {
  width: 100%; padding: 11px 14px; font-size: 13px; font-family: inherit;
  color: var(--text-1); outline: none;
  background: var(--glass-input) !important;
  -webkit-backdrop-filter: var(--glass-blur-xs); backdrop-filter: var(--glass-blur-xs);
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px;
  box-shadow: inset 0 1px 2px rgba(120,110,100,0.08), var(--glass-highlight) !important;
}
.dashboard-page .search-input::placeholder { color: var(--text-3); }
.dashboard-page .search-input:focus {
  border-color: rgba(255,136,98,0.42) !important;
  box-shadow: inset 0 1px 2px rgba(120,130,170,0.14), 0 0 0 3px rgba(255,136,98,0.14) !important;
}
.dashboard-page .section-header {
  display: flex; align-items: center; gap: 12px;
  margin: 24px 0 12px;
}
.dashboard-page .section-header h2 {
  margin: 0; font-family: 'Nunito', sans-serif;
  font-size: 12px; font-weight: 800; color: var(--text-1);
  text-transform: uppercase; letter-spacing: .06em;
}
.dashboard-page .project-card,
.flow-main .dashboard-page .project-card {
  padding: 16px 18px; margin-bottom: 10px;
  background: var(--glass-card), var(--pearl-tint) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border-strong) !important;
  box-shadow: var(--shadow-card), var(--glass-highlight) !important;
  border-radius: 16px; transition: transform .2s var(--spring), box-shadow .25s ease;
}
.dashboard-page .project-card:not([style*="transform"]):hover {
  box-shadow: var(--glass-edge), 0 14px 32px -18px var(--shadow-warm), var(--glass-highlight) !important;
}
.dashboard-page .project-summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 16px;
}
.dashboard-page .project-title h4 { margin: 0 0 4px; font-size: 14px; font-weight: 800; }
.dashboard-page .project-title a {
  color: var(--text-1); text-decoration: none; font-weight: 800;
}
.dashboard-page .project-title a:hover { color: var(--accent-2); }
.dashboard-page .project-counts { font-size: 11px; color: var(--text-3); font-weight: 600; }
.dashboard-page .project-contacts { margin-top: 4px; font-size: 11px; color: var(--text-2); }
.dashboard-page .contact-sep { margin: 0 4px; color: var(--text-3); }
.dashboard-page .project-dates {
  font-size: 11px; font-weight: 700; color: var(--text-3); white-space: nowrap;
}
.dashboard-page .action-buttons { justify-self: end; }
.dashboard-page .completed-actions {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px;
}
.dashboard-page .status-link { text-decoration: none; }
.dashboard-page #completed-project-list { display: none; }

/* 대시보드 액션 버튼 — 글래스 + 타입별 고유 컬러 */
.dashboard-page .dash-btn,
.dashboard-page .status-badge,
.dashboard-page .completed-btn {
  --dash-accent: #8fa3b8;
  --dash-text: #3d4f62;
  --dash-glow: rgba(88,78,108,0.16);
  --dash-fill-top: rgba(255,255,255,0.42);
  --dash-fill-bot: rgba(255,255,255,0.10);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 32px; padding: 0 14px 0 11px;
  font-size: 12px; font-weight: 700; line-height: 1.2;
  font-family: 'Noto Sans KR', sans-serif;
  border-radius: 10px; cursor: pointer;
  white-space: nowrap; text-decoration: none;
  position: relative; overflow: hidden;
  color: var(--dash-text) !important;
  background:
    radial-gradient(130px 88px at 18% 0%, var(--dash-fill-top), transparent 72%),
    linear-gradient(152deg, var(--dash-fill-top), var(--dash-fill-bot));
  -webkit-backdrop-filter: var(--glass-blur-xs); backdrop-filter: var(--glass-blur-xs);
  border: 1px solid color-mix(in srgb, var(--dash-accent) 42%, rgba(255,255,255,0.72));
  border-left: 3px solid var(--dash-accent);
  box-shadow: 0 4px 14px -6px var(--dash-glow), var(--glass-highlight);
  transition: transform .18s var(--spring), box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.dashboard-page .dash-btn::before,
.dashboard-page .status-badge::before,
.dashboard-page .completed-btn::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--dash-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dash-accent) 24%, transparent), 0 0 10px var(--dash-glow);
}
.dashboard-page .dash-btn:hover,
.dashboard-page .status-badge:hover,
.dashboard-page .completed-btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--dash-accent) 55%, rgba(255,255,255,0.85));
  box-shadow: 0 8px 20px -6px var(--dash-glow), var(--glass-highlight);
}
.dashboard-page .dash-btn:active,
.dashboard-page .status-badge:active,
.dashboard-page .completed-btn:active {
  transform: translateY(1px) scale(.98);
  box-shadow: inset 0 1px 3px rgba(120,110,100,0.10), var(--glass-highlight);
}

/* 대기 — 앰버 */
.dashboard-page .status-badge.status-wait,
.dashboard-page .dash-btn--wait {
  --dash-accent: #e8940f;
  --dash-text: #8a5600;
  --dash-glow: rgba(232,148,15,0.34);
  --dash-fill-top: rgba(255,210,120,0.52);
  --dash-fill-bot: rgba(255,190,80,0.18);
}
/* 진행 — 블루 */
.dashboard-page .status-badge.status-ongoing,
.dashboard-page .dash-btn--ongoing {
  --dash-accent: #2f7fd4;
  --dash-text: #0d4f8f;
  --dash-glow: rgba(47,127,212,0.34);
  --dash-fill-top: rgba(150,200,255,0.50);
  --dash-fill-bot: rgba(80,150,240,0.16);
}
/* 완료/지난 — 그린 */
.dashboard-page .status-badge.status-completed,
.dashboard-page .dash-btn--completed {
  --dash-accent: #2daa62;
  --dash-text: #0f6b38;
  --dash-glow: rgba(45,170,98,0.34);
  --dash-fill-top: rgba(140,230,180,0.48);
  --dash-fill-bot: rgba(70,200,130,0.16);
}
/* 설치 품목 — 인디고 */
.dashboard-page .completed-btn.btn-items,
.dashboard-page .dash-btn--items {
  --dash-accent: #4a6fd8;
  --dash-text: #1e4499;
  --dash-glow: rgba(74,111,216,0.36);
  --dash-fill-top: rgba(160,190,255,0.50);
  --dash-fill-bot: rgba(90,130,230,0.16);
}
/* 설치 현황 — 퍼플 */
.dashboard-page .completed-btn.btn-setup,
.dashboard-page .dash-btn--setup {
  --dash-accent: #6e52d4;
  --dash-text: #4528a8;
  --dash-glow: rgba(110,82,212,0.36);
  --dash-fill-top: rgba(195,175,255,0.50);
  --dash-fill-bot: rgba(140,110,240,0.16);
}
/* 검수 자료 — 골드 */
.dashboard-page .completed-btn.btn-inspect,
.dashboard-page .dash-btn--inspect {
  --dash-accent: #d4920a;
  --dash-text: #8a5c00;
  --dash-glow: rgba(212,146,10,0.36);
  --dash-fill-top: rgba(255,220,130,0.52);
  --dash-fill-bot: rgba(240,180,60,0.16);
}
/* STATUS — 코랄 */
.dashboard-page .completed-btn.btn-status,
.dashboard-page .dash-btn--status {
  --dash-accent: #e86a42;
  --dash-text: #a83818;
  --dash-glow: rgba(232,106,66,0.38);
  --dash-fill-top: rgba(255,185,160,0.52);
  --dash-fill-bot: rgba(255,130,90,0.18);
}

.dashboard-page .flash-messages {
  list-style: none; padding: 12px 14px; margin-bottom: 16px;
  background: rgba(91,156,246,.10); border: 1px solid rgba(91,156,246,.25);
  border-radius: 12px; color: #1565c0; font-size: 12px; font-weight: 700;
}
.dashboard-page .toggle-switch { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.dashboard-page .toggle-switch input { opacity: 0; width: 0; height: 0; }
.dashboard-page .toggle-slider {
  position: absolute; inset: 0; cursor: pointer;
  background: rgba(0,0,0,.12); border-radius: 999px; transition: .25s;
  border: 1px solid var(--glass-border);
}
.dashboard-page .toggle-slider:before {
  content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: .25s;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.dashboard-page .toggle-switch input:checked + .toggle-slider { background: var(--accent-gradient); border-color: transparent; }
.dashboard-page .toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); }
/* Dashboard — 인터랙티브 글래스 */
.dashboard-page.checklist-section { padding: 22px 24px 20px; }
.dashboard-page .stat-card,
.dashboard-page .project-card {
  position: relative; overflow: hidden;
  background:
    radial-gradient(280px 280px at var(--mx,50%) var(--my,0%), rgba(255,255,255,0.40), transparent 62%),
    var(--glass-card), var(--pearl-tint) !important;
}
.dashboard-page .stat-card::before,
.dashboard-page .project-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 0;
  background: linear-gradient(150deg, rgba(255,255,255,0.24), transparent 40%);
}
.dashboard-page .stat-card > *,
.dashboard-page .project-card > * { position: relative; z-index: 1; }
.dashboard-page .stat-card:hover,
.dashboard-page .project-card:hover {
  border-color: rgba(255,255,255,0.88) !important;
  box-shadow: var(--glass-edge), 0 16px 36px -16px rgba(255,160,130,0.16), var(--glass-highlight) !important;
}
.dashboard-page .search-glass {
  padding: 10px 12px; border-radius: 14px;
  background:
    radial-gradient(200px 200px at var(--mx,30%) var(--my,50%), rgba(255,255,255,0.35), transparent 65%),
    var(--glass-panel), var(--pearl-tint) !important;
  -webkit-backdrop-filter: var(--glass-blur-xs); backdrop-filter: var(--glass-blur-xs);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-highlight) !important;
}
.dashboard-page .search-glass .search-input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 2px;
}
.dashboard-page .section-header--past { margin-left: auto; }
.dashboard-page .past-toggle-label {
  font-size: 11px; font-weight: 700; color: var(--text-3); margin-left: auto;
}
.dashboard-page .past-project-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  transition: max-height 0.45s ease, opacity 0.32s ease, transform 0.32s var(--spring);
}
.dashboard-page .past-project-panel.is-open {
  max-height: 12000px;
  opacity: 1;
  transform: none;
}
.dashboard-page .past-project-panel[hidden] { display: block !important; max-height: 0; opacity: 0; }
.dashboard-page .past-search-wrap { margin-bottom: 12px; }
.dashboard-page .past-list-footer {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 12px; padding-top: 4px;
}
.dashboard-page .past-more-btn {
  min-height: 34px; padding: 0 18px;
  font-size: 12px; font-weight: 700; font-family: 'Noto Sans KR', sans-serif;
  color: #111 !important; cursor: pointer; border-radius: 10px;
  background: var(--glass-btn) !important;
  -webkit-backdrop-filter: var(--glass-blur-xs); backdrop-filter: var(--glass-blur-xs);
  border: 1px solid var(--glass-border-strong) !important;
  box-shadow: 0 4px 12px -6px var(--shadow-warm), var(--glass-highlight) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.dashboard-page .past-more-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -6px var(--shadow-warm), var(--glass-highlight) !important;
}
.dashboard-page .past-list-count {
  font-size: 11px; font-weight: 700; color: var(--text-3);
}
.dashboard-page .past-empty {
  margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--text-3); font-weight: 600;
}
.dashboard-page .dash-ripple {
  position: absolute; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(255,255,255,0.42);
  pointer-events: none;
  animation: dashRipple 0.55s ease-out forwards;
}
@keyframes dashRipple {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}


@media (max-width: 720px) {
  .dashboard-page .project-summary { grid-template-columns: 1fr; gap: 10px; }
  .dashboard-page .action-buttons { justify-self: start; }
  .dashboard-page .completed-actions { justify-content: flex-start; }
  .dashboard-page .project-dates { justify-self: start; }
  .dashboard-page .stat-card p { font-size: 24px; }
}

.flow-main .btn-plan { background: var(--teal-gradient) !important; }

@media (max-width: 768px) {
  .flow-topbar { top: 0; border-radius: 0; margin: 0 0 12px; }
  .flow-shell { padding: 12px 14px 48px; }
  .flow-nav-wrap { justify-content: flex-start; }
}

/* ═══════════════════════════════════════════════════════════
   App-wide mobile & fold optimization (all base.html pages)
   ═══════════════════════════════════════════════════════════ */

/* Scroll / table utilities — use on any page */
.flow-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.flow-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    max-width: 100%;
    margin-bottom: 12px;
    border-radius: 12px;
}
.flow-table-wrap > table,
.flow-table-wrap > .ip-table {
    min-width: 520px;
}
.flow-tabs-scroll,
.page-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.flow-main .btn,
.flow-topbar .btn {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Mobile nav drawer */
.flow-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: var(--touch-min);
    height: var(--touch-min);
    padding: 0;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: var(--glass-btn);
    -webkit-backdrop-filter: var(--glass-blur-xs);
    backdrop-filter: var(--glass-blur-xs);
    box-shadow: var(--glass-highlight);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.flow-nav-toggle__bar {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--text-1);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.flow-nav-open .flow-nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.flow-nav-open .flow-nav-toggle__bar:nth-child(2) { opacity: 0; }
.flow-nav-open .flow-nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}
.flow-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 540;
    background: rgba(8, 12, 22, 0.45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

@media (max-width: 768px) {
    body.flow-app {
        padding:
            max(10px, calc(var(--safe-top) + 6px))
            max(12px, var(--safe-right))
            max(48px, calc(var(--safe-bottom) + 16px))
            max(12px, var(--safe-left));
    }
    .flow-shell {
        padding:
            max(10px, calc(var(--safe-top) + 4px))
            max(12px, var(--safe-right))
            max(40px, calc(var(--safe-bottom) + 12px))
            max(12px, var(--safe-left));
    }
    .flow-topbar {
        position: sticky;
        top: max(0px, var(--safe-top));
        z-index: 520;
        padding:
            max(12px, calc(var(--safe-top) + 8px))
            14px 12px 14px;
        gap: 10px;
        align-items: center;
    }
    .flow-topbar .ph-left { min-width: 0; flex: 1; }
    .flow-topbar .ph-title { font-size: 15px; }
    .flow-topbar .ph-project { font-size: 10px; }
    .flow-nav-toggle { display: inline-flex; order: 2; }
    .flow-actions { order: 3; margin-left: auto; }
    .flow-nav-wrap {
        order: 10;
        flex-basis: 100%;
        position: fixed;
        top: calc(max(56px, var(--safe-top) + 56px));
        left: max(12px, var(--safe-left));
        right: max(12px, var(--safe-right));
        bottom: max(12px, var(--safe-bottom));
        z-index: 560;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 14px;
        border-radius: 18px;
        background:
            radial-gradient(280px 180px at 20% 0%, rgba(255,255,255,0.5), transparent 70%),
            var(--glass-card), var(--pearl-tint);
        -webkit-backdrop-filter: var(--glass-blur);
        backdrop-filter: var(--glass-blur);
        border: 1px solid var(--glass-border);
        box-shadow: var(--shadow-card);
        overflow-y: auto;
        overscroll-behavior: contain;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px) scale(0.98);
        pointer-events: none;
        transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    }
    .flow-nav-open .flow-nav-wrap {
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
    }
    .flow-nav-wrap .btn {
        width: 100%;
        justify-content: flex-start;
        min-height: var(--touch-min);
        padding: 12px 16px;
        font-size: 14px;
        border-radius: 12px;
    }
    .flow-notif-btn {
        width: var(--touch-min);
        height: var(--touch-min);
        min-width: var(--touch-min);
    }
    .flow-user-chip span:not(.flow-user-avatar) { display: none; }
    .flow-actions .btn:last-child {
        min-height: var(--touch-min);
        padding: 10px 14px;
        font-size: 13px;
    }
    .notif-dropdown {
        position: fixed;
        top: auto;
        left: max(12px, var(--safe-left));
        right: max(12px, var(--safe-right));
        bottom: max(12px, var(--safe-bottom));
        width: auto;
        max-height: min(70dvh, 480px);
    }
    .flow-main.container {
        max-width: 100%;
        padding-inline: 0;
    }
    /* Touch-friendly forms */
    .flow-main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .flow-main select,
    .flow-main textarea,
    .search-input,
    .compact-form-row input,
    .compact-form-row select,
    .compact-form-row textarea {
        font-size: 16px !important;
        min-height: var(--touch-min);
    }
    .flow-main .btn,
    .dash-btn,
    .admin-btn {
        min-height: var(--touch-min);
    }
    /* Grids */
    .board-grid,
    .hub-wrap .board-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .hub-wrap {
        padding: 16px 0 40px;
    }
    .hub-header { margin-bottom: 18px; }
    .dashboard-page .stat-cards,
    .dashboard-page .project-summary {
        grid-template-columns: 1fr !important;
    }
    /* Tabs — horizontal scroll on narrow screens */
    .page-tabs,
    .tab-nav,
    .flow-tabs-scroll {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        padding-bottom: 4px;
        margin-bottom: 12px;
        scrollbar-width: none;
    }
    .page-tabs::-webkit-scrollbar,
    .tab-nav::-webkit-scrollbar { display: none; }
    .page-tab,
    .tab-nav .btn,
    .tab-nav button {
        flex-shrink: 0;
        scroll-snap-align: start;
        min-height: var(--touch-min);
        white-space: nowrap;
    }
    /* Tables — auto-wrap in main content */
    .flow-main table,
    .flow-main .ip-table,
    .tbl-wrap,
    .week-grid-shell {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Modals */
    .modal-overlay .modal-box,
    .bt-modal-overlay .bt-modal-pearl {
        width: calc(100vw - 24px - var(--safe-left) - var(--safe-right));
        max-width: none;
        max-height: calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom));
        overflow-y: auto;
    }
}

@media (max-width: 430px) {
    .flow-topbar .ph-project { display: none; }
    .flow-actions .btn:last-child { padding: 10px 12px; font-size: 12px; }
    .board-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) {
    .flow-nav-toggle,
    .flow-nav-backdrop { display: none !important; }
}

@media (max-width: 768px) {
    /* Standalone pages (no base.html) — shared patterns */
    .page-tabs,
    .tab-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tbl-wrap,
    .table-wrap,
    .table-scroll,
    .grid-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    .page-header:not(.flow-topbar) {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .ip-editor-shell .flow-topbar,
    .ip-editor-topbar {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* Fold / tablet inner */
@media (min-width: 600px) and (max-width: 960px) {
    .board-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    }
    .flow-shell { padding-inline: max(16px, var(--safe-left)) max(16px, var(--safe-right)); }
}

@media (spanning: single-fold-vertical) {
    .flow-shell {
        padding-inline: max(16px, var(--safe-left)) max(16px, var(--safe-right));
    }
    .flow-main.container {
        max-width: 100%;
        width: 100%;
        margin-inline: 0;
        padding-inline: 0;
    }
}

/* PEARL GLASS ENHANCED — 그리드·테이블·가이드 카드 */
.glass-interactive {
    transition: transform .25s var(--spring), box-shadow .35s ease, border-color .35s ease;
}
.page-lead { border-bottom-color: rgba(255,255,255,0.45); }
.page-lead-tag {
    background: var(--glass-input) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs); backdrop-filter: var(--glass-blur-xs);
    box-shadow: var(--glass-highlight) !important;
}
.flow-main table th,
.flow-main .ip-table th,
.flow-main .week-grid th {
    background: var(--glass-grid) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs); backdrop-filter: var(--glass-blur-xs);
    border-bottom: 1px solid rgba(255,255,255,0.45) !important;
}
.flow-main table td,
.flow-main .ip-table td {
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.28) !important;
}
.flow-main table tbody tr:hover td,
.flow-main .ip-table tbody tr:hover td {
    background: rgba(255,255,255,0.22) !important;
}
.glass-panel, .ip-guide-card {
    background:
        radial-gradient(200px 200px at var(--mx,80%) var(--my,20%), rgba(255,255,255,0.38), transparent 62%),
        var(--glass-panel), var(--pearl-tint) !important;
    -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm);
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-edge), 0 10px 28px -18px var(--shadow-warm), var(--glass-highlight) !important;
}
.glass-panel:hover, .ip-guide-card:hover {
    border-color: rgba(255,255,255,0.88) !important;
    box-shadow: var(--glass-edge), 0 16px 36px -16px rgba(255,160,130,0.18), var(--glass-highlight) !important;
}
.flow-topbar {
    background:
        radial-gradient(360px 200px at var(--mx,20%) var(--my,50%), rgba(255,255,255,0.45), transparent 70%),
        var(--glass-card), var(--pearl-tint) !important;
}
@media (prefers-reduced-motion: reduce) {
    body.flow-app::after { animation: none; }
}


.flow-app .bt-modal-overlay .bt-modal-pearl {
    background:
        radial-gradient(440px 340px at var(--mx, 50%) var(--my, 26%), rgba(255,255,255,0.55), transparent 58%),
        linear-gradient(155deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.16) 50%, rgba(248,252,255,0.24) 100%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.78) !important;
    box-shadow:
        0 8px 32px rgba(31,38,135,0.12),
        0 28px 64px -22px rgba(48,42,68,0.30),
        inset 0 1px 0 rgba(255,255,255,0.88),
        inset 0 -1px 0 rgba(255,255,255,0.20) !important;
}

/* NO NEUMORPHISM — global glass remap */
.flow-app .modal-content,
.flow-app .tab-nav,
.flow-app .section-panel,
.flow-app .ward-panel,
.flow-app .station-mini-card,
.flow-app .checklist-item,
.flow-app .domain-input-area .code-input,
.flow-app .section-count,
.flow-app .btn-action-3d,
.flow-app .compact-card-delete,
.flow-app .station-mini-delete,
.flow-app .btn-add-station-inline,
.flow-app .btn-add-signage-inline,
.flow-app .board-card,
.flow-app .hub-empty,
.flow-app .modal-box,
.flow-app .admin-btn:not(.primary),
.flow-app .board-link:not(.write),
.flow-app .board-icon-wrap,
.flow-app .board-cnt,
.flow-app .modal-cancel,
.flow-app .month-bar,
.flow-app .sec-card,
.flow-app .sel-box,
.flow-app .toggle-wrap,
.flow-app .c-card,
.flow-app .pmo-card,
.flow-app .cal-day:not(.empty),
.flow-app .badge,
.flow-app .stat-card,
.flow-app .chart-card,
.flow-app .table-card,
.flow-app .ip-editor-panel .card,
.flow-app .ip-op-hero-inner,
.flow-app .page-nav,
.flow-app .sum-box,
.flow-app .page-tab,
.flow-app .btn-ghost,
.flow-app .topbar {
    background: var(--glass-card), var(--pearl-tint) !important;
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-edge), var(--shadow-card), var(--glass-highlight) !important;
}
.flow-app .board-card:hover {
    box-shadow: var(--glass-edge), 0 16px 36px -16px rgba(255,160,130,0.18), var(--glass-highlight) !important;
}
.flow-app .btn-neu,
.flow-app .btn-danger,
.flow-app .modal-input,
.flow-app .code-input,
.flow-app .compact-form-row input,
.flow-app .compact-form-row textarea,
.flow-app .compact-form-row select,
.flow-app .ward-note-input,
.flow-app .station-form-row input,
.flow-app .station-form-row select,
.flow-app .setup-row input,
.flow-app .hospital-field input,
.flow-app .search-input,
.flow-app .ip-op-steps li {
    background: var(--glass-input) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs);
    backdrop-filter: var(--glass-blur-xs);
    border: 1px solid var(--glass-border) !important;
    box-shadow: inset 0 1px 2px rgba(120,110,100,0.08), var(--glass-highlight) !important;
}
.flow-app .btn:active:not(.btn-primary):not(.nav-active),
.flow-app .btn-neu:active {
    box-shadow: inset 0 1px 2px rgba(120,110,100,0.12), var(--glass-highlight) !important;
    transform: none;
}
.flow-app .hub-header-icon,
.flow-app .ph-icon {
    box-shadow: var(--raised-sm) !important;
}
.flow-app .board-sep {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45) 35%, rgba(255,255,255,0.15) 65%, transparent) !important;
}

/* ── Checklist page toolbar (extends base shell) ── */
.checklist-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.checklist-toolbar form { margin: 0; }

/* ═══════════════════════════════════════════════════════════
   Work checklist (/p/.../checklist) — dashboard Pearl Glass
═══════════════════════════════════════════════════════════ */
.work-checklist-page {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.work-checklist-page .checklist-toolbar {
    padding: 10px var(--flow-inner-pad-x);
    border-radius: 14px;
    margin-bottom: 0;
    width: 100%;
    box-sizing: border-box;
    background:
        radial-gradient(220px 200px at var(--mx,80%) var(--my,50%), rgba(255,255,255,0.35), transparent 65%),
        var(--glass-panel), var(--pearl-tint) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs); backdrop-filter: var(--glass-blur-xs);
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-highlight) !important;
}
.work-checklist-page.checklist-section,
.work-checklist-page > .checklist-section {
    padding: 20px var(--flow-inner-pad-x) 18px;
    width: 100%;
    box-sizing: border-box;
}
.flow-shell:has(.work-checklist-page) {
    padding-bottom: 28px;
}
.work-checklist-page .gateway-dl-btn {
    margin-left: auto;
    font-size: 11px;
    padding: 4px 10px;
    white-space: nowrap;
}
.work-checklist-page .checklist-gw-list-btn {
    margin-left: auto;
}
.work-checklist-page .gw-list-glass-btn,
.setup-status-page .gw-list-glass-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    border-radius: 14px;
    text-decoration: none;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(82, 62, 148, 0.96);
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.78) 0%,
        rgba(248, 244, 255, 0.52) 35%,
        rgba(235, 228, 255, 0.38) 70%,
        rgba(255, 252, 254, 0.62) 100%);
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow:
        0 2px 10px rgba(124, 95, 220, 0.14),
        0 0 0 1px rgba(200, 185, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(180, 160, 240, 0.12);
    backdrop-filter: blur(16px) saturate(1.35);
    -webkit-backdrop-filter: blur(16px) saturate(1.35);
    overflow: hidden;
    transition: transform .22s cubic-bezier(.22,.68,0,1.2), box-shadow .22s ease, background .22s ease, border-color .22s ease;
    cursor: pointer;
    transform-style: preserve-3d;
    will-change: transform;
}
.work-checklist-page .gw-list-glass-pearl,
.setup-status-page .gw-list-glass-pearl {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(circle at var(--gw-mx, 30%) var(--gw-my, 25%),
            rgba(255, 255, 255, 0.85) 0%,
            rgba(230, 220, 255, 0.35) 22%,
            rgba(200, 185, 255, 0.12) 45%,
            transparent 62%),
        radial-gradient(circle at calc(var(--gw-mx, 70%) + 15%) calc(var(--gw-my, 75%) - 10%),
            rgba(255, 240, 250, 0.45) 0%,
            transparent 42%);
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 0;
}
.work-checklist-page .gw-list-glass-shine,
.setup-status-page .gw-list-glass-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        transparent 28%,
        rgba(255, 255, 255, 0.62) 46%,
        rgba(255, 255, 255, 0.18) 52%,
        transparent 72%);
    transform: translateX(-130%);
    transition: transform .55s cubic-bezier(.22,.68,0,1.2);
    pointer-events: none;
    z-index: 1;
}
.work-checklist-page .gw-list-glass-ripple,
.setup-status-page .gw-list-glass-ripple {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(200,185,255,0.2) 45%, transparent 70%);
    transform: scale(0);
    animation: gwListRipple .52s ease-out forwards;
    pointer-events: none;
    z-index: 2;
}
@keyframes gwListRipple {
    to { transform: scale(1); opacity: 0; }
}
.work-checklist-page .gw-list-glass-text,
.work-checklist-page .gw-list-glass-icon,
.setup-status-page .gw-list-glass-text,
.setup-status-page .gw-list-glass-icon {
    position: relative;
    z-index: 3;
}
.work-checklist-page .gw-list-glass-btn:hover,
.setup-status-page .gw-list-glass-btn:hover {
    box-shadow:
        0 6px 20px rgba(124, 95, 220, 0.26),
        0 0 0 1px rgba(210, 195, 255, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -1px 0 rgba(180, 160, 240, 0.18);
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(250, 246, 255, 0.68) 40%,
        rgba(238, 230, 255, 0.48) 100%);
    border-color: rgba(255, 255, 255, 0.92);
    color: rgba(70, 50, 130, 1);
}
.work-checklist-page .gw-list-glass-btn:hover .gw-list-glass-shine,
.setup-status-page .gw-list-glass-btn:hover .gw-list-glass-shine {
    transform: translateX(130%);
}
.work-checklist-page .gw-list-glass-btn:active,
.setup-status-page .gw-list-glass-btn:active {
    transform: translateY(0) scale(0.97) !important;
}
.work-checklist-page .gw-list-glass-btn:focus-visible,
.setup-status-page .gw-list-glass-btn:focus-visible {
    outline: 2px solid rgba(124, 95, 220, 0.45);
    outline-offset: 2px;
}
.work-checklist-page .scheduling-hint {
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.55;
    margin: 0 0 10px;
}
.work-checklist-page .scheduling-period {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    margin-bottom: 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    color: #5b3fc9;
    background: linear-gradient(145deg, rgba(237, 233, 254, 0.9), rgba(221, 214, 254, 0.55));
    border: 1px solid rgba(196, 181, 253, 0.45);
    letter-spacing: -.02em;
}
.work-checklist-page .scheduling-calendar-wrap {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.45);
    padding: 14px;
}
.work-checklist-page .sched-calendar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.work-checklist-page .sched-month {
    min-width: 0;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.55);
}
.work-checklist-page .sched-month-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-1);
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: -.02em;
}
.work-checklist-page .sched-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 6px;
}
.work-checklist-page .sched-weekday {
    font-size: 10px;
    font-weight: 800;
    color: var(--text-3);
    text-align: center;
    padding: 2px 0;
}
.work-checklist-page .sched-days-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}
.work-checklist-page .sched-day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 58px;
    padding: 5px 3px 4px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    font-family: inherit;
    cursor: default;
    box-sizing: border-box;
    transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.work-checklist-page .sched-day--pad {
    pointer-events: none;
    visibility: hidden;
}
.work-checklist-page .sched-day--out {
    opacity: 0.28;
    cursor: default;
}
.work-checklist-page .sched-day--in {
    cursor: pointer;
    background: rgba(255, 255, 255, 0.42);
    border-color: rgba(255, 255, 255, 0.55);
}
.work-checklist-page .sched-day--in:hover {
    background: rgba(255, 255, 255, 0.62);
    border-color: rgba(124, 95, 220, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -6px rgba(124, 95, 220, 0.25);
}
.work-checklist-page .sched-day--today {
    border-color: rgba(124, 95, 220, 0.5) !important;
    box-shadow: inset 0 0 0 1px rgba(124, 95, 220, 0.15);
}
.work-checklist-page .sched-day--has-entry {
    background: rgba(237, 233, 254, 0.55);
    border-color: rgba(124, 95, 220, 0.28);
}
.work-checklist-page .sched-day-num {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-1);
    line-height: 1.2;
}
.work-checklist-page .sched-day--today .sched-day-num {
    color: #7c5fdc;
}
.work-checklist-page .sched-day-preview {
    display: -webkit-box;
    width: 100%;
    margin-top: 2px;
    font-size: 8px;
    line-height: 1.25;
    color: var(--text-2);
    text-align: center;
    overflow: hidden;
    white-space: pre-line;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    pointer-events: none;
}
.work-checklist-page .sched-day-dot {
    position: absolute;
    top: 4px;
    right: 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #7c5fdc;
    box-shadow: 0 0 0 2px rgba(124, 95, 220, 0.15);
}
.work-checklist-page .scheduling-empty {
    font-size: 12px;
    color: var(--text-3);
    text-align: center;
    padding: 28px 12px;
    margin: 0;
}
.work-checklist-page .sched-day-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.work-checklist-page .sched-day-modal-overlay[hidden] {
    display: none !important;
}
.work-checklist-page .sched-day-modal {
    width: min(100%, 480px);
    padding: 20px 20px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.82));
    border: 1px solid rgba(255, 255, 255, 0.88);
    box-shadow: 0 20px 50px -12px rgba(15, 23, 42, 0.35);
}
.work-checklist-page .sched-day-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.work-checklist-page .sched-day-modal-head h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-1);
}
.work-checklist-page .sched-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
    color: var(--text-2);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}
.work-checklist-page .sched-modal-close:hover {
    background: rgba(124, 95, 220, 0.12);
    color: #7c5fdc;
}
.work-checklist-page .sched-modal-textarea {
    width: 100%;
    min-height: 160px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    line-height: 1.6;
    font-family: inherit;
    color: var(--text-1);
    resize: vertical;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-break: break-word;
}
.work-checklist-page .sched-modal-textarea:focus {
    outline: 2px solid rgba(124, 95, 220, 0.35);
    border-color: rgba(124, 95, 220, 0.45);
}
.work-checklist-page .sched-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}
@media (max-width: 680px) {
    .work-checklist-page .sched-calendar-grid {
        grid-template-columns: 1fr;
    }
    .work-checklist-page .sched-day {
        min-height: 52px;
    }
}
.work-checklist-page .gateway-tab-hint {
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.55;
    margin: 0 0 12px;
}
.work-checklist-page .gateway-paste-panel {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.55);
}
.work-checklist-page .gateway-paste-panel label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-2);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.work-checklist-page .gateway-paste-area {
    width: 100%;
    min-height: 72px;
    resize: vertical;
    font-family: 'Nunito', monospace;
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(200,205,216,.65);
    background: rgba(255,255,255,0.72);
    box-sizing: border-box;
}
.work-checklist-page .gateway-paste-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.work-checklist-page .gateway-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.22);
}
.work-checklist-page .gateway-edit-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 420px;
}
.work-checklist-page .gateway-edit-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(255,255,255,0.82);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-2);
    padding: 8px 10px;
    border-bottom: 1px solid rgba(200,205,216,.55);
    text-align: left;
}
.work-checklist-page .gateway-edit-table td {
    padding: 6px 10px;
    border-bottom: 1px solid rgba(200,205,216,.35);
    font-size: 12px;
    vertical-align: middle;
}
.work-checklist-page .gateway-edit-table .gw-col-num {
    width: 40px;
    text-align: center;
    font-weight: 800;
    color: var(--text-3);
}
.work-checklist-page .gateway-edit-table .gw-col-ip {
    width: 130px;
    font-family: 'Nunito', monospace;
    white-space: nowrap;
}
.work-checklist-page .gateway-edit-table .gw-col-ward {
    min-width: 72px;
}
.work-checklist-page .gateway-edit-table .dev-col-type {
    min-width: 88px;
    white-space: nowrap;
    font-weight: 600;
}
.work-checklist-page .gateway-edit-table .dev-serial-input {
    width: 100%;
    min-width: 100px;
    font-family: 'Nunito', monospace;
    font-size: 12px;
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid rgba(200,205,216,.65);
    background: rgba(255,255,255,0.85);
    box-sizing: border-box;
}
.work-checklist-page .gateway-edit-table .dev-serial-input.dev-serial-invalid {
    border-color: rgba(220, 53, 69, 0.75);
    background: rgba(255, 235, 238, 0.9);
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.12);
}
.work-checklist-page .device-paste-status {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent, #e85d3a);
}
.work-checklist-page .device-paste-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}
.work-checklist-page .device-paste-preview-col {
    border: 1px solid rgba(200,205,216,.55);
    border-radius: 10px;
    background: rgba(255,255,255,0.72);
    padding: 8px 10px;
    min-width: 0;
}
.work-checklist-page .device-paste-preview-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-2);
    margin-bottom: 6px;
}
.work-checklist-page .device-paste-preview pre {
    margin: 0;
    font-family: 'Nunito', monospace;
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-1);
    white-space: pre-wrap;
    word-break: break-all;
}
.work-checklist-page .serial-paste-preview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.work-checklist-page .serial-unified-paste-panel {
    margin-bottom: 4px;
}
.work-checklist-page .serial-split-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    margin-top: 12px;
    align-items: start;
}
.work-checklist-page .serial-split-col {
    min-width: 0;
    border: 1px solid rgba(200,205,216,.5);
    border-radius: 12px;
    background: rgba(255,255,255,0.55);
    overflow: hidden;
}
.work-checklist-page .serial-split-col-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px 8px;
    border-bottom: 1px solid rgba(200,205,216,.4);
    background: rgba(255,255,255,0.72);
}
.work-checklist-page .serial-split-col-head h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-1);
}
.work-checklist-page .serial-split-col-hint {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-3);
    white-space: nowrap;
}
.work-checklist-page .serial-split-col .gateway-table-scroll {
    max-height: min(52vh, 520px);
    overflow: auto;
}
.work-checklist-page .device-type-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}
.work-checklist-page .device-type-block {
    min-width: 0;
    border: 1px solid rgba(200,205,216,.45);
    border-radius: 10px;
    background: rgba(255,255,255,0.62);
    overflow: hidden;
}
.work-checklist-page .device-type-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(200,205,216,.35);
    background: rgba(255,255,255,0.78);
}
.work-checklist-page .device-type-block-head h5 {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-1);
}
.work-checklist-page .device-type-prefix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
    color: var(--accent, #e85d3a);
    background: rgba(232, 93, 58, 0.1);
    border: 1px solid rgba(232, 93, 58, 0.22);
}
.work-checklist-page .device-type-scroll {
    max-height: min(24vh, 240px);
}
.work-checklist-page .device-empty-cell {
    text-align: center;
    padding: 14px 10px !important;
    color: var(--text-3);
    font-size: 12px;
}
.work-checklist-page .serial-rebuild-btn {
    margin-left: auto;
}
@media (max-width: 960px) {
    .work-checklist-page .serial-split-grid {
        grid-template-columns: 1fr;
    }
    .work-checklist-page .serial-paste-preview {
        grid-template-columns: 1fr;
    }
}
.work-checklist-page .gateway-edit-table .dev-ward-pending {
    color: var(--text-3);
    font-style: italic;
}
.work-checklist-page .gateway-edit-table .gw-serial-input {
    width: 100%;
    min-width: 100px;
    font-family: 'Nunito', monospace;
    font-size: 12px;
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid rgba(200,205,216,.65);
    background: rgba(255,255,255,0.85);
    box-sizing: border-box;
}
.work-checklist-page .gateway-edit-table tbody tr:hover td {
    background: rgba(255,136,98,0.05);
}
.work-checklist-page .project-info-header {
    border-bottom-color: rgba(255,255,255,0.42);
}
.work-checklist-page .ward-station-group {
    position: relative; overflow: hidden;
    background:
        radial-gradient(280px 200px at var(--mx,50%) var(--my,30%), rgba(255,255,255,0.38), transparent 62%),
        var(--glass-card), var(--pearl-tint) !important;
    -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm);
    border: 1px solid var(--glass-border-strong) !important;
    box-shadow: var(--shadow-card), var(--glass-highlight) !important;
    transition: transform .2s var(--spring), box-shadow .25s ease, border-color .25s ease;
}
.work-checklist-page .ward-station-group::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; z-index: 0;
    background: linear-gradient(150deg, rgba(255,255,255,0.22), transparent 40%);
}
.work-checklist-page .ward-station-group > * { position: relative; z-index: 1; }
.work-checklist-page .ward-station-group:hover {
    border-color: rgba(255,255,255,0.88) !important;
    box-shadow: var(--glass-edge), 0 14px 32px -16px rgba(255,160,130,0.14), var(--glass-highlight) !important;
}
.work-checklist-page .ward-station-group--4col {
    display: grid !important;
    grid-template-columns: 72px 1fr 1fr 1fr !important;
    align-items: stretch;
    border-radius: 16px;
    margin-bottom: 10px;
    min-height: 90px;
}
.work-checklist-page .ward-station-name-col {
    background: rgba(255,255,255,0.10) !important;
    border-right: 1px solid rgba(255,255,255,0.38) !important;
}
.work-checklist-page .ward-station-body,
.work-checklist-page .station-signage-section {
    border-color: rgba(255,255,255,0.32) !important;
}
.work-checklist-page .ward-station-note-col {
    background: rgba(128,90,213,0.06) !important;
    border-left: 1px solid rgba(255,255,255,0.32) !important;
}
.work-checklist-page .subnet-select {
    font-size: 11px; padding: 5px 26px 5px 9px; border-radius: 9px;
    font-family: 'Noto Sans KR', sans-serif; font-weight: 700; cursor: pointer;
    appearance: none; -webkit-appearance: none; outline: none; color: var(--text-1);
    background: var(--glass-input) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs); backdrop-filter: var(--glass-blur-xs);
    border: 1px solid var(--glass-border) !important;
    box-shadow: inset 0 1px 2px rgba(120,110,100,0.08), var(--glass-highlight) !important;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238fa3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
}
.work-checklist-page .footer-actions {
    border-top-color: rgba(255,255,255,0.42);
}

/* 설치 실사 탭 — 입고 목록 + 모달 위치 입력 */
.work-checklist-page .survey-hint--top {
    text-align: left;
    margin: -4px 0 12px;
    padding: 0;
    color: var(--text-3);
    font-size: 11.5px;
}
.work-checklist-page #install-final-banner-wrap:not(:empty) {
    margin-bottom: 10px;
}
.work-checklist-page .install-survey-panel.install-receipt-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
    max-height: none;
    padding: 12px 14px;
}
@media (max-width: 1100px) {
    .work-checklist-page .install-survey-panel.install-receipt-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 680px) {
    .work-checklist-page .install-survey-panel.install-receipt-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
.work-checklist-page .install-receipt-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 11px 12px;
    box-sizing: border-box;
    margin-bottom: 0 !important;
    border-radius: 14px !important;
    cursor: pointer;
    transition: transform .22s var(--spring), box-shadow .3s ease, border-color .3s ease;
}
.work-checklist-page .install-receipt-row.is-received {
    border-color: rgba(255,255,255,0.88) !important;
    box-shadow:
        var(--glass-edge),
        0 8px 20px -10px rgba(80,66,140,0.18),
        var(--glass-highlight) !important;
}
.work-checklist-page .install-loc-open-btn {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,136,98,0.32);
    background: linear-gradient(135deg, rgba(255,255,255,0.62), rgba(255,136,98,0.12));
    box-shadow: 0 3px 10px -4px rgba(255,136,98,0.2), inset 0 1px 0 rgba(255,255,255,0.75);
    font-size: 10px;
    font-weight: 800;
    color: var(--accent-2);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: transform .18s var(--spring), box-shadow .2s ease;
}
.work-checklist-page .install-loc-open-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -4px rgba(255,136,98,0.28), inset 0 1px 0 rgba(255,255,255,0.85);
}
.work-checklist-page .install-survey-actions {
    margin-top: 12px;
    justify-content: flex-end;
}

/* 설치 위치 입력 모달 */
.install-loc-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.44);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.install-loc-modal-overlay[hidden] {
    display: none !important;
}
.install-loc-modal {
    width: min(100%, 520px);
    max-height: min(88vh, 720px);
    display: flex;
    flex-direction: column;
    padding: 20px 20px 16px;
    border-radius: 20px;
    background:
        radial-gradient(320px 240px at var(--mx, 30%) var(--my, 20%), rgba(255,255,255,0.55), transparent 62%),
        linear-gradient(155deg, rgba(255,255,255,0.96), rgba(255,255,255,0.84));
    border: 1px solid rgba(255,255,255,0.92);
    box-shadow:
        0 24px 56px -16px rgba(15, 23, 42, 0.38),
        inset 0 1px 0 rgba(255,255,255,0.95);
    animation: installLocModalIn .24s cubic-bezier(.22,.68,0,1.15);
}
@keyframes installLocModalIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: none; }
}
.install-loc-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-shrink: 0;
}
.install-loc-modal-head-text { min-width: 0; }
.install-loc-modal-head h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -.02em;
    line-height: 1.35;
}
.install-loc-modal-qty {
    display: inline-block;
    margin-top: 5px;
    font-size: 10px;
    font-weight: 800;
    color: var(--accent);
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255,136,98,0.12);
    border: 1px solid rgba(255,136,98,0.22);
}
.install-loc-modal-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(148,163,184,0.28);
    border-radius: 10px;
    background: rgba(255,255,255,0.72);
    color: var(--text-2);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}
.install-loc-modal-close:hover {
    background: rgba(255,255,255,0.92);
    color: var(--text-1);
}
.install-loc-modal-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 2px 2px 8px;
}
.install-loc-modal-body .survey-unit-row {
    margin-bottom: 8px;
}
.install-loc-modal-body .survey-unit-row:last-child {
    margin-bottom: 0;
}
.install-loc-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(148,163,184,0.18);
    flex-shrink: 0;
}

.work-checklist-page .install-survey-panel {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 16px;
    padding: 14px 16px;
    background:
        radial-gradient(280px 220px at var(--mx,50%) var(--my,30%), rgba(255,255,255,0.38), transparent 62%),
        var(--glass-panel), var(--pearl-tint) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs);
    backdrop-filter: var(--glass-blur-xs);
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-edge), 0 10px 28px -18px rgba(72,68,96,0.18), var(--glass-highlight) !important;
    transition: box-shadow .35s ease, border-color .35s ease;
}
.work-checklist-page .install-survey-panel::before {
    content: '';
    position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; z-index: 0;
    background: linear-gradient(150deg, rgba(255,255,255,0.22), transparent 40%);
}
.work-checklist-page .install-survey-panel > * { position: relative; z-index: 1; }

.work-checklist-page .install-receipt-item.checklist-item {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 7px;
    border-radius: 12px !important;
    background:
        radial-gradient(180px 140px at var(--mx,20%) var(--my,50%), rgba(255,255,255,0.42), transparent 65%),
        var(--glass-input), var(--pearl-tint) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs);
    backdrop-filter: var(--glass-blur-xs);
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-edge), 0 4px 14px -8px rgba(80,66,140,0.16), var(--glass-highlight) !important;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex-wrap: nowrap;
    transition: transform .22s var(--spring), box-shadow .3s ease, border-color .3s ease;
}
.work-checklist-page .install-receipt-item.checklist-item:last-child { margin-bottom: 0; }
.work-checklist-page .install-receipt-item.checklist-item:hover:not(.receipt-locked) {
    border-color: rgba(255,255,255,0.92) !important;
    box-shadow:
        var(--glass-edge),
        0 12px 26px -8px rgba(80,66,140,0.24),
        0 0 0 1px rgba(255,180,150,0.12),
        var(--glass-highlight) !important;
}
.work-checklist-page .install-receipt-item.checklist-item:active:not(.receipt-locked) {
    transform: scale(0.985) !important;
}
.work-checklist-page .install-receipt-item.checklist-item.receipt-locked {
    cursor: default;
    background:
        radial-gradient(200px 160px at 30% 40%, rgba(255,255,255,0.55), transparent 62%),
        linear-gradient(145deg, rgba(255,255,255,0.42), rgba(248,244,255,0.18)),
        var(--pearl-tint) !important;
    border-color: rgba(255,255,255,0.78) !important;
    box-shadow: var(--glass-edge), 0 6px 18px -10px rgba(88,78,108,0.16), var(--glass-highlight) !important;
}
.work-checklist-page .install-receipt-item.checklist-item.receipt-locked:hover {
    transform: none !important;
}

/* 커스텀 글래스 체크박스 — pearl / frosted */
.work-checklist-page .install-receipt-item input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 22px; height: 22px;
    flex-shrink: 0;
    margin: 0;
    border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,0.72);
    background: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.28));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 2px rgba(120,110,100,0.06), 0 2px 6px -2px rgba(88,78,108,0.14);
    cursor: pointer;
    position: relative;
    pointer-events: none;
    transition: all .25s var(--spring);
}
.work-checklist-page .install-receipt-item:not(.receipt-locked):hover input[type="checkbox"] {
    border-color: rgba(255,255,255,0.95);
    transform: scale(1.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 3px 10px -3px rgba(88,78,108,0.18);
}
.work-checklist-page .install-receipt-item input[type="checkbox"]:checked {
    background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(250,246,255,0.55), rgba(255,252,248,0.48));
    border-color: rgba(255,255,255,0.95);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.98),
        0 0 0 1px rgba(200,185,230,0.22),
        0 4px 14px -4px rgba(120,100,160,0.18);
}
.work-checklist-page .install-receipt-item input[type="checkbox"]:checked::after {
    content: '';
    position: absolute; left: 7px; top: 3px;
    width: 5px; height: 10px;
    border: solid rgba(90, 82, 110, 0.78); border-width: 0 2.2px 2.2px 0;
    transform: rotate(45deg);
    animation: wcCheckPop .25s var(--spring);
}
@keyframes wcCheckPop {
    from { opacity: 0; transform: rotate(45deg) scale(0); }
    to { opacity: 1; transform: rotate(45deg) scale(1); }
}

.work-checklist-page .install-receipt-item label {
    flex: 1; min-width: 0;
    cursor: pointer;
    color: var(--text-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.work-checklist-page .install-receipt-item.receipt-locked label {
    color: var(--text-2) !important;
    text-decoration: line-through;
    text-decoration-color: rgba(120,110,140,0.28);
}
.work-checklist-page .install-receipt-item .qty-badge {
    flex-shrink: 0;
    font-size: 10px; font-weight: 700;
    color: var(--text-2);
    padding: 3px 9px;
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(255,255,255,0.55), rgba(255,255,255,0.22)) !important;
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 2px 8px -4px rgba(88,78,108,0.12);
}
.work-checklist-page .install-receipt-item .check-time {
    flex-shrink: 0;
    max-width: 46%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
    color: var(--text-3);
    font-family: var(--mono, 'IBM Plex Mono', monospace);
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255,255,255,0.28);
    border: 1px solid rgba(255,255,255,0.48);
}
.work-checklist-page .install-receipt-item .receipt-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    transform: scale(0);
    background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(230,220,255,0.18) 42%, transparent 70%);
    animation: wcReceiptRipple .62s ease-out forwards;
    z-index: 2;
}
@keyframes wcReceiptRipple {
    to { transform: scale(1); opacity: 0; }
}
.work-checklist-page .install-receipt-item:focus-visible {
    outline: 2px solid rgba(255,136,98,0.45);
    outline-offset: 2px;
}

.work-checklist-page .survey-hint {
    font-size: 12px; color: var(--text-2); line-height: 1.55; text-align: center; padding: 10px 4px;
}
.work-checklist-page .survey-item-card {
    position: relative;
    overflow: hidden;
    padding: 12px 14px;
    margin-bottom: 9px;
    border-radius: 14px;
    background:
        radial-gradient(200px 160px at var(--mx,70%) var(--my,20%), rgba(255,255,255,0.35), transparent 62%),
        var(--glass-input), var(--pearl-tint) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs);
    backdrop-filter: var(--glass-blur-xs);
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-edge), 0 6px 18px -10px rgba(80,66,140,0.18), var(--glass-highlight) !important;
    transition: transform .22s var(--spring), box-shadow .3s ease, border-color .3s ease;
}
.work-checklist-page .survey-item-card:hover {
    border-color: rgba(255,255,255,0.88) !important;
    box-shadow: var(--glass-edge), 0 12px 28px -12px rgba(80,66,140,0.22), var(--glass-highlight) !important;
}
.work-checklist-page .survey-item-title {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 800; color: var(--text-1); margin-bottom: 8px;
}
.work-checklist-page .survey-item-title .qty {
    font-size: 10px; font-weight: 800; color: var(--accent);
    padding: 3px 9px; border-radius: 999px;
    background: linear-gradient(135deg, rgba(255,255,255,0.58), rgba(255,255,255,0.28));
    border: 1px solid rgba(255,255,255,0.72);
    box-shadow: 0 3px 10px -4px rgba(80,66,140,0.16), inset 0 1px 0 rgba(255,255,255,0.8);
}
.work-checklist-page .survey-unit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.work-checklist-page .survey-unit-row:last-child { margin-bottom: 0; }
.work-checklist-page .survey-unit-label {
    flex-shrink: 0; width: 42px; font-size: 10px; font-weight: 700; color: var(--text-3);
}
.work-checklist-page .survey-unit-input {
    flex: 1; min-width: 0;
    padding: 8px 11px; border-radius: 10px;
    border: 1px solid var(--glass-border) !important;
    background: var(--glass-input) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs);
    backdrop-filter: var(--glass-blur-xs);
    box-shadow: inset 0 1px 2px rgba(120,110,100,0.08), var(--glass-highlight) !important;
    font-size: 12px; font-family: inherit; color: var(--text-1);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.work-checklist-page .survey-unit-input:focus {
    outline: none;
    border-color: rgba(255,136,98,0.42) !important;
    box-shadow: inset 0 1px 2px rgba(120,130,170,0.12), 0 0 0 3px rgba(255,136,98,0.14) !important;
}
.work-checklist-page .survey-loc-view {
    flex: 1; font-size: 12px; color: var(--text-1);
    padding: 7px 10px; border-radius: 9px;
    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(255,255,255,0.45);
}
.work-checklist-page .survey-loc-view.empty { color: var(--text-3); font-style: italic; }
.work-checklist-page .survey-final-banner {
    font-size: 11px; font-weight: 750; color: var(--text-2);
    background:
        radial-gradient(220px 120px at 50% 0%, rgba(255,255,255,0.55), transparent 65%),
        linear-gradient(145deg, rgba(255,255,255,0.42), rgba(248,244,255,0.16));
    border: 1px solid rgba(255,255,255,0.72);
    border-radius: 12px; padding: 9px 12px; margin-bottom: 10px; text-align: center;
    box-shadow: 0 6px 18px -10px rgba(88,78,108,0.14), inset 0 1px 0 rgba(255,255,255,0.75);
}
.work-checklist-page .install-survey-actions {
    display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;
}
.work-checklist-page .survey-btn {
    position: relative;
    overflow: hidden;
    padding: 8px 16px; border-radius: 12px;
    font-size: 12px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    transition: transform .2s var(--spring), box-shadow .25s ease;
}
.work-checklist-page .survey-btn:active { transform: scale(0.97); }
.work-checklist-page .survey-save {
    background: var(--glass-btn) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs);
    backdrop-filter: var(--glass-blur-xs);
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 4px 12px -6px var(--shadow-warm), var(--glass-highlight) !important;
    color: var(--text-1);
}
.work-checklist-page .survey-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -6px rgba(255,136,98,0.14), var(--glass-highlight) !important;
}
.work-checklist-page .survey-final {
    background: var(--accent-gradient) !important;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow: 0 6px 16px -4px rgba(255,136,98,0.45), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
.work-checklist-page .survey-final:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -4px rgba(255,136,98,0.52), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}
.work-checklist-page .badge-install {
    font-size: 9px; font-weight: 750; letter-spacing: 0.5px; text-transform: uppercase;
    color: var(--text-2);
    padding: 3px 9px; border-radius: 999px;
    background: linear-gradient(145deg, rgba(255,255,255,0.55), rgba(255,255,255,0.2));
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 2px 8px -4px rgba(88,78,108,0.12);
}

/* 체크리스트 페이지 — 세부 인터랙티브 요소 */
.work-checklist-page .btn-action-3d {
    background: var(--glass-btn) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs);
    backdrop-filter: var(--glass-blur-xs);
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-edge), 0 4px 12px -6px var(--shadow-warm), var(--glass-highlight) !important;
    transition: transform .2s var(--spring), box-shadow .2s ease;
}
.work-checklist-page .btn-action-3d:hover {
    transform: scale(1.1);
    box-shadow: var(--glass-edge), 0 8px 18px -6px rgba(255,136,98,0.16), var(--glass-highlight) !important;
}
.work-checklist-page .diagram-jump-btn {
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid var(--glass-border) !important;
    background: var(--glass-btn) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs);
    backdrop-filter: var(--glass-blur-xs);
    box-shadow: var(--glass-edge), 0 3px 10px -6px var(--shadow-warm), var(--glass-highlight) !important;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-2);
    cursor: pointer;
    font-family: inherit;
    transition: transform .18s var(--spring), box-shadow .2s ease, color .18s ease, border-color .18s ease;
}
.work-checklist-page .diagram-jump-btn:hover {
    color: var(--accent);
    border-color: rgba(255,136,98,0.35) !important;
    transform: translateY(-1px);
    box-shadow: var(--glass-edge), 0 6px 16px -6px rgba(255,136,98,0.18), var(--glass-highlight) !important;
}
.work-checklist-page .diagram-jump-btn:active { transform: scale(0.97); }
.work-checklist-page .section-count {
    background: var(--glass-input) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs);
    backdrop-filter: var(--glass-blur-xs);
    border: 1px solid var(--glass-border) !important;
    box-shadow: inset 0 1px 2px rgba(120,110,100,0.06), var(--glass-highlight) !important;
}
.work-checklist-page .compact-card-delete {
    transition: transform .18s var(--spring), box-shadow .18s ease, color .18s ease;
}
.work-checklist-page .compact-card-delete:hover {
    transform: scale(1.08);
    color: var(--danger);
}
.work-checklist-page .diagram-tab-hint {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.6;
}
.work-checklist-page .switch-uplink-hint {
    margin: 10px 2px 0;
    font-size: 11px;
    color: var(--text-3);
    line-height: 1.55;
}
.work-checklist-page .switch-uplink {
    width: 100%;
    font-size: 12px;
    font-family: inherit;
    padding: 7px 9px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.42);
    color: var(--text-1);
}
.work-checklist-page .switch-uplink:focus {
    outline: 2px solid rgba(124,95,220,0.35);
    outline-offset: 1px;
}
.work-checklist-page .switch-port-range-row {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}
.work-checklist-page .switch-port-range-field {
    flex: 1;
    min-width: 0;
    margin-bottom: 0 !important;
}
.work-checklist-page .switch-access-ports,
.work-checklist-page .switch-trunk-ports {
    width: 100%;
    font-size: 12px;
    font-family: inherit;
    padding: 7px 9px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.42);
    color: var(--text-1);
}
.work-checklist-page .switch-access-ports:focus,
.work-checklist-page .switch-trunk-ports:focus {
    outline: 2px solid rgba(124,95,220,0.35);
    outline-offset: 1px;
}
.work-checklist-page .diagram-tab-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.work-checklist-page .diagram-preview-wrap {
    overflow: hidden;
    background: #fff;
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    padding: 0;
    min-height: 0;
    max-width: 1122px;
    margin: 0 auto;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.work-checklist-page .diagram-a4-sheet--inline {
    position: relative;
    aspect-ratio: 1122 / 794;
    max-width: 1122px;
    max-height: 794px;
    width: 100%;
}
.work-checklist-page .diagram-a4-badge {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 2;
    font-family: 'IBM Plex Mono', 'DM Mono', monospace;
    font-size: 9px;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: .06em;
    pointer-events: none;
}
.work-checklist-page .diagram-a4-sheet--inline .diagram-a4-inner--html {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 0;
    box-sizing: border-box;
}
.work-checklist-page .diagram-a4-viewport {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: auto;
}
.work-checklist-page .diagram-mermaid-scale {
    flex-shrink: 0;
    transform-origin: top center;
}
.work-checklist-page .diagram-mermaid-wrap {
    display: inline-block;
}
.work-checklist-page .diagram-preview-wrap .mermaid,
.work-checklist-page .diagram-mermaid-wrap .mermaid {
    font-size: 9px;
    color: #111;
    display: inline-block;
}
.work-checklist-page .diagram-preview-wrap svg,
.work-checklist-page .diagram-mermaid-wrap svg {
    display: block;
    max-width: none !important;
    width: auto !important;
    height: auto !important;
}

.flow-app .ward-station-group {
    background: var(--glass-card), var(--pearl-tint) !important;
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-edge), var(--shadow-card), var(--glass-highlight) !important;
}

/* ── Setup 현황 (public) — dashboard Pearl Glass ── */
.setup-status-page {
    padding: 0 !important;
}
.setup-status-page .header,
.setup-status-page .section,
.setup-status-page .grid-section,
.setup-status-page .items-group,
.setup-status-page .checklist-item,
.setup-status-page .station-ward-block,
.setup-status-page .meeting-compact-card,
.setup-status-page .issue-compact-card,
.setup-status-page .survey-item-card,
.setup-status-page .meta-chip,
.setup-status-page .domain-chip,
.setup-status-page .section-count,
.setup-status-page .grid-section-count,
.setup-status-page .toggle-icon,
.setup-status-page .toast {
    background: var(--glass-card), var(--pearl-tint) !important;
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-edge), var(--shadow-card), var(--glass-highlight) !important;
}
.setup-status-page .header {
    border-bottom: 1px solid var(--glass-border-strong) !important;
    box-shadow: var(--glass-edge), 0 8px 32px -12px rgba(72,68,96,0.22), var(--glass-highlight) !important;
    overflow: hidden;
    position: relative;
}
.setup-status-page .section,
.setup-status-page .grid-section {
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    transition: transform .25s var(--spring), box-shadow .35s ease, border-color .35s ease;
}
.setup-status-page .section::before,
.setup-status-page .grid-section::before,
.setup-status-page .header::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(150deg, rgba(255,255,255,0.28), transparent 38%);
    opacity: 0.65;
}
.setup-status-page .section > *,
.setup-status-page .grid-section > *,
.setup-status-page .header > * { position: relative; z-index: 1; }
.setup-status-page .checklist-item {
    border-radius: 10px !important;
    transition: background .2s ease, transform .2s var(--spring);
}
.setup-status-page .checklist-item:hover {
    transform: translateY(-1px);
}
.setup-status-page .checklist-item.receipt-locked {
    background: rgba(52,196,138,0.12), var(--pearl-tint) !important;
    border-color: rgba(52,196,138,0.28) !important;
}
.setup-status-page .checklist-item.receipt-locked label {
    color: #166534 !important;
    text-decoration: line-through;
    text-decoration-color: rgba(22,101,52,0.35);
}
.setup-status-page .meta-chip,
.setup-status-page .domain-chip,
.setup-status-page .qty-badge {
    box-shadow: none !important;
    background: var(--glass-input) !important;
}
.setup-status-page .mi-tab-btn.active {
    background: var(--teal-gradient) !important;
    color: #fff !important;
}
.setup-status-page .meeting-issue-tabs {
    background: var(--glass-input) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px;
    padding: 4px;
}
.setup-status-page .compact-info-table th,
.setup-status-page .ward-table th {
    background: rgba(255,255,255,0.35) !important;
    border-bottom: 1px solid var(--glass-line, rgba(15,23,42,0.07)) !important;
}
.setup-status-page .compact-info-table tbody tr:hover td,
.setup-status-page .ward-table tr:hover td,
.setup-status-page .station-table tr:hover td {
    background: rgba(255,255,255,0.28) !important;
}
.setup-status-page .main-container {
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    padding: 4px 0 16px;
}
.setup-status-page .header {
    padding: 14px 18px 12px;
}

/* ═══════════════════════════════════════════════════════════
   Admin page — dashboard Pearl Glass (interactive)
═══════════════════════════════════════════════════════════ */
.admin-page { padding: 4px 0 24px; }
.admin-page.checklist-section { padding: 22px 24px 20px; }
.admin-page .admin-layout { display: grid; grid-template-columns: 210px 1fr; gap: 14px; align-items: start; }
.admin-page .sidebar {
    padding: 12px; border-radius: 16px; position: sticky; top: 76px;
    background:
        radial-gradient(220px 220px at var(--mx,30%) var(--my,20%), rgba(255,255,255,0.38), transparent 62%),
        var(--glass-card), var(--pearl-tint) !important;
    -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm);
    border: 1px solid var(--glass-border-strong) !important;
    box-shadow: var(--shadow-card), var(--glass-highlight) !important;
    transition: transform .25s var(--spring), box-shadow .35s ease, border-color .35s ease;
}
.admin-page .sidebar-nav-item {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 12px; border-radius: 10px; cursor: pointer;
    font-size: 13px; font-weight: 700; color: var(--text-2);
    transition: color .15s, background .18s, box-shadow .18s;
    border: 1px solid transparent; background: transparent; width: 100%; text-align: left;
    font-family: 'Noto Sans KR', sans-serif;
}
.admin-page .sidebar-nav-item:hover {
    color: var(--text-1);
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.45);
}
.admin-page .sidebar-nav-item.active {
    color: #fff !important;
    background: var(--accent-gradient) !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px -6px rgba(255,136,98,0.32), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
.admin-page .sidebar-sep { height: 1px; background: rgba(255,255,255,0.42); margin: 5px 4px; }
.admin-page .section {
    border-radius: 16px; overflow: hidden; display: none;
    background:
        radial-gradient(320px 280px at var(--mx,70%) var(--my,0%), rgba(255,255,255,0.36), transparent 64%),
        var(--glass-card), var(--pearl-tint) !important;
    -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm);
    border: 1px solid var(--glass-border-strong) !important;
    box-shadow: var(--shadow-card), var(--glass-highlight) !important;
    position: relative;
    transition: transform .25s var(--spring), box-shadow .35s ease, border-color .35s ease;
}
.admin-page .section.active { display: block; }
.admin-page .section::before,
.admin-page .panel::before,
.admin-page .user-card::before,
.admin-page .client-table-wrap::before,
.admin-page .partner-panel::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; z-index: 0;
    background: linear-gradient(150deg, rgba(255,255,255,0.24), transparent 40%);
}
.admin-page .section > *,
.admin-page .panel > *,
.admin-page .user-card > * { position: relative; z-index: 1; }
.admin-page .sec-head {
    padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.42);
    display: flex; align-items: center; justify-content: space-between;
}
.admin-page .sec-title {
    font-family: 'Nunito', sans-serif;
    font-size: 17px; font-weight: 800; color: var(--text-1); letter-spacing: -.2px;
}
.admin-page .sec-body { padding: 18px 20px; }
.admin-page .fc,
.admin-page .search-wrap .fc {
    background: var(--glass-input) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs); backdrop-filter: var(--glass-blur-xs);
    border: 1px solid var(--glass-border) !important;
    box-shadow: inset 0 1px 2px rgba(120,110,100,0.08), var(--glass-highlight) !important;
    color: var(--text-1) !important;
}
.admin-page .fc:focus {
    border-color: rgba(255,136,98,0.42) !important;
    box-shadow: inset 0 1px 2px rgba(120,130,170,0.14), 0 0 0 3px rgba(255,136,98,0.14) !important;
}
.admin-page .btn-accent {
    background: var(--accent-gradient) !important; color: #fff !important;
    box-shadow: 0 8px 18px -6px rgba(255,136,98,0.30), inset 0 1px 0 rgba(255,255,255,0.35) !important;
    border: none;
}
.admin-page .btn-neu,
.admin-page .btn-ghost,
.admin-page .btn-navy {
    background: var(--glass-btn) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs); backdrop-filter: var(--glass-blur-xs);
    border: 1px solid var(--glass-border-strong) !important;
    box-shadow: 0 4px 12px -6px var(--shadow-warm), var(--glass-highlight) !important;
    color: var(--text-2) !important;
}
.admin-page .btn-neu:hover,
.admin-page .btn-ghost:hover { color: var(--text-1) !important; transform: translateY(-1px); }
.admin-page .btn-danger {
    background: linear-gradient(135deg, #ff6464, #f05252) !important;
    color: #fff !important;
    border: none !important;
}
.admin-page .user-card,
.admin-page .panel,
.admin-page .partner-panel,
.admin-page .client-table-wrap,
.admin-page .client-detail-card,
.admin-page .contact-mini {
    position: relative; overflow: hidden;
    background:
        radial-gradient(200px 200px at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.35), transparent 65%),
        var(--glass-card), var(--pearl-tint) !important;
    -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm);
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow-card), var(--glass-highlight) !important;
    border-radius: 14px;
    transition: transform .2s var(--spring), box-shadow .25s ease, border-color .25s ease;
}
.admin-page .user-card { padding: 16px; cursor: pointer; }
.admin-page .user-card:hover,
.admin-page .panel:hover,
.admin-page .partner-panel:hover {
    border-color: rgba(255,255,255,0.88) !important;
    box-shadow: var(--glass-edge), 0 14px 32px -16px rgba(255,160,130,0.16), var(--glass-highlight) !important;
    transform: translateY(-2px);
}
.admin-page .user-name { color: var(--text-1); }
.admin-page .user-id-text { color: var(--text-3); }
.admin-page .user-email { color: var(--text-2); }
.admin-page .client-table-header {
    background: var(--glass-grid) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs); backdrop-filter: var(--glass-blur-xs);
    border-bottom: 1px solid rgba(255,255,255,0.42) !important;
    color: var(--text-3);
}
.admin-page .client-row:hover,
.admin-page .client-row.active { background: rgba(255,136,98,0.08) !important; }
.admin-page .client-row.active { border-left: 3px solid var(--accent); }
.admin-page .client-row-name { color: var(--text-1); }
.admin-page .flash {
    background: var(--glass-input) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs); backdrop-filter: var(--glass-blur-xs);
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px;
    box-shadow: var(--glass-highlight) !important;
}
.admin-page .flash.success { border-left: 3px solid var(--green) !important; }
.admin-page .flash.danger { border-left: 3px solid var(--danger) !important; }
.admin-page .flash.warning { border-left: 3px solid #e8940f !important; }
.admin-page .modal-box {
    background:
        radial-gradient(420px 320px at var(--mx,50%) var(--my,28%), rgba(255,255,255,0.50), transparent 58%),
        linear-gradient(155deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.16) 50%, rgba(248,252,255,0.24) 100%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.78) !important;
    box-shadow: 0 8px 32px rgba(31,38,135,0.12), 0 28px 64px -22px rgba(48,42,68,0.30), inset 0 1px 0 rgba(255,255,255,0.88) !important;
}
.admin-page .modal-footer { background: rgba(255,255,255,0.12); border-top: 1px solid rgba(255,255,255,0.38); }
.admin-page .toast {
    background: var(--glass-card), var(--pearl-tint) !important;
    -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm);
    border: 1px solid var(--glass-border-strong) !important;
    box-shadow: var(--shadow-card), var(--glass-highlight) !important;
}
.admin-page .partner-panel-head,
.admin-page .contact-sec-head,
.admin-page .panel-head {
    background: rgba(255,255,255,0.14) !important;
    border-bottom: 1px solid rgba(255,255,255,0.38) !important;
}
.admin-page .panel-title,
.admin-page .partner-panel-label { color: var(--text-1); }
.admin-page .vtab.active { color: var(--accent-2); border-bottom-color: var(--accent); }
.admin-page .vtab:hover { color: var(--text-1); }
.admin-page .user-modal-hero {
    background: linear-gradient(135deg, rgba(30,42,58,0.92), rgba(26,54,93,0.88)) !important;
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.admin-page .user-action-btn {
    background: var(--glass-btn) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs); backdrop-filter: var(--glass-blur-xs);
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-highlight) !important;
    color: var(--text-1) !important;
}
.admin-page .user-action-btn.danger-btn {
    color: var(--danger) !important;
    background: rgba(240,82,82,0.08) !important;
}
.admin-page .user-action-btn.danger-btn:hover { background: rgba(240,82,82,0.12) !important; }
.admin-page .level-card,
.admin-page .dw-card,
.admin-page .cat-item,
.admin-page .ir-row,
.admin-page .item-row {
    background:
        radial-gradient(180px 180px at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.32), transparent 65%),
        var(--glass-card), var(--pearl-tint) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs); backdrop-filter: var(--glass-blur-xs);
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-highlight) !important;
}
.admin-page .cat-item.active {
    background: var(--accent-gradient) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.admin-page .client-list-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.45); }

/* Admin — 품목 관리(#items): 고정 레이아웃 + 좌우 10% 여백, 흔들림 방지 */
.admin-page .admin-layout > .sections { min-width: 0; overflow-x: hidden; }
.admin-page #sec-items {
    width: 80%;
    margin-inline: 10%;
    overflow-x: hidden;
    transform: none !important;
    transition: box-shadow .25s ease, border-color .25s ease !important;
}
.admin-page #sec-items:hover { transform: none !important; }
.admin-page #sec-items .panel,
.admin-page #sec-items .cat-item,
.admin-page #sec-items .item-row,
.admin-page #sec-items .level-card {
    transform: none !important;
    transition: box-shadow .2s ease, border-color .2s ease, background .15s ease !important;
}
.admin-page #sec-items .panel:hover,
.admin-page #sec-items .cat-item:hover,
.admin-page #sec-items .item-row:hover,
.admin-page #sec-items .level-card:hover {
    transform: none !important;
}
.admin-page #sec-items .items-layout {
    display: grid;
    grid-template-columns: minmax(0, 22%) minmax(0, 1fr) minmax(0, 24%);
    gap: 6px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
.admin-page #sec-items .items-layout > * { min-width: 0; max-width: 100%; }
.admin-page #sec-items .item-row,
.admin-page #sec-items .cat-item-name,
.admin-page #sec-items .ir-name { overflow: hidden; text-overflow: ellipsis; }
.admin-page #sec-items .ir-cats { max-width: 28%; }
.admin-page #sec-items .items-scroll-list,
.admin-page #sec-items .system-scroll-panel { overflow-x: hidden; overflow-y: auto; }

/* Admin — 품목 관리(#items) 컴팩트 여백 50% */
.admin-page #sec-items .sec-head { padding: 8px 10px; }
.admin-page #sec-items .sec-body { padding: 9px 0; }
.admin-page #sec-items .panel-head { padding: 5px 7px; gap: 5px; }
.admin-page #sec-items .panel-body { padding: 6px 7px; }
.admin-page #sec-items .cat-panel .panel-body { padding: 4px 5px; }
.admin-page #sec-items .system-panel .panel-body { padding: 6px; }
.admin-page #sec-items .items-hint { margin-bottom: 3px; padding-left: 2px; }
.admin-page #sec-items .cat-item {
    padding: 5px 6px;
    margin-bottom: 2px;
    min-height: 32px;
    border-radius: 7px;
}
.admin-page #sec-items .cat-item-count { margin: 0 3px; }
.admin-page #sec-items .item-row {
    padding: 4px 6px;
    margin-bottom: 2px;
    gap: 4px;
    border-radius: 7px;
}
.admin-page #sec-items .system-level-list,
.admin-page #sec-items #system-level-list { gap: 3px; }
.admin-page #sec-items .level-card { padding: 0; border-radius: 9px; }
.admin-page #sec-items .level-card-head {
    padding: 5px 6px;
    min-height: 34px;
    gap: 4px;
}
.admin-page #sec-items .level-card-body { padding: 5px 6px 6px; }
.admin-page #sec-items .level-item-row {
    padding: 3px 0;
    gap: 3px;
}
.admin-page #sec-items .level-add-form {
    padding: 5px 0 0;
    gap: 4px;
    margin-top: 6px;
}
.admin-page #sec-items .level-add-btn-row { padding: 0 6px 5px; }
.admin-page #sec-items .level-item-count { margin: 0 3px; }
.admin-page #sec-items .items-scroll-list { height: calc(100vh - 250px); }
.admin-page #sec-items .system-scroll-panel { height: calc(100vh - 210px); }
.admin-page #sec-items .search-wrap .fc { padding-top: 4px; padding-bottom: 4px; }

@media (max-width: 768px) {
    .admin-page .admin-layout { grid-template-columns: 1fr; }
    .admin-page .sidebar { position: static; }
}

/* ═══════════════════════════════════════════════════════════
   Project details (/p/) — dashboard Pearl Glass
═══════════════════════════════════════════════════════════ */
.project-details-page { padding: 4px 0 32px; }
.project-details-page.checklist-section { padding: 22px 26px 24px; }
.project-details-page .page-header {
    margin-bottom: 22px; padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.45);
}
.project-details-page .page-header h1 {
    font-family: 'Nunito', sans-serif;
    font-size: 22px; font-weight: 800; color: var(--text-1); letter-spacing: -.35px;
}
.project-details-page .page-header .sub { color: var(--text-3); font-size: 12px; margin-top: 4px; }
.project-details-page .card,
.project-details-page .p-sum-card,
.project-details-page .erp-box,
.project-details-page .stockout-section,
.project-details-page .cat-chip {
    position: relative; overflow: hidden;
    background:
        radial-gradient(280px 280px at var(--mx,50%) var(--my,0%), rgba(255,255,255,0.40), transparent 62%),
        var(--glass-card), var(--pearl-tint) !important;
    -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm);
    border: 1px solid var(--glass-border-strong) !important;
    box-shadow: var(--shadow-card), var(--glass-highlight) !important;
    border-radius: 18px;
    margin-bottom: 18px;
    transition: transform .2s var(--spring), box-shadow .25s ease, border-color .25s ease;
}
.project-details-page .card::before,
.project-details-page .p-sum-card::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; z-index: 0;
    background: linear-gradient(150deg, rgba(255,255,255,0.24), transparent 40%);
}
.project-details-page .card > *,
.project-details-page .p-sum-card > * { position: relative; z-index: 1; }
.project-details-page .card:hover,
.project-details-page .p-sum-card:hover {
    border-color: rgba(255,255,255,0.88) !important;
    box-shadow: var(--glass-edge), 0 14px 32px -16px rgba(255,160,130,0.16), var(--glass-highlight) !important;
}
.project-details-page .card-header {
    border-bottom: 1px solid rgba(255,255,255,0.42);
    background: rgba(255,255,255,0.08);
}
.project-details-page .card-title { color: var(--text-1); font-weight: 800; }
.project-details-page .flash {
    background: rgba(52,196,138,0.12) !important;
    border: 1px solid rgba(52,196,138,0.28) !important;
    border-left: 4px solid var(--green) !important;
    box-shadow: var(--glass-highlight) !important;
}
.project-details-page .btn-secondary,
.project-details-page .copy-btn,
.project-details-page .calc-btn,
.project-details-page .m-btn-ghost,
.project-details-page .btn-done {
    background: var(--glass-btn) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs); backdrop-filter: var(--glass-blur-xs);
    border: 1px solid var(--glass-border-strong) !important;
    box-shadow: 0 4px 12px -6px var(--shadow-warm), var(--glass-highlight) !important;
    color: var(--text-1) !important;
}
.project-details-page .btn-primary,
.project-details-page .btn-success,
.project-details-page .btn-blue,
.project-details-page .btn-next-step,
.project-details-page .add-btn,
.project-details-page .m-btn-primary,
.project-details-page .m-btn-save,
.project-details-page .m-btn-blue {
    color: #fff !important;
    border: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 8px 18px -6px rgba(255,136,98,0.28), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
.project-details-page .btn-primary,
.project-details-page .btn-next-step,
.project-details-page .add-btn,
.project-details-page .m-btn-primary {
    background: var(--accent-gradient) !important;
}
.project-details-page .btn-success,
.project-details-page .m-btn-save {
    background: linear-gradient(135deg, #5cb85c, #4cae4c) !important;
    box-shadow: 0 8px 18px -6px rgba(76,175,80,0.28), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
.project-details-page .btn-blue,
.project-details-page .m-btn-blue {
    background: linear-gradient(135deg, #4a9eff, #2f7de0) !important;
    box-shadow: 0 8px 18px -6px rgba(47,125,224,0.28), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
.project-details-page .btn-next-step {
    opacity: 1 !important;
    animation: pd-btn-glow 2.8s ease-in-out infinite;
}
@keyframes pd-btn-glow {
    0%, 100% { box-shadow: 0 6px 16px -6px rgba(255,120,80,0.28), inset 0 1px 0 rgba(255,255,255,0.35); }
    50%      { box-shadow: 0 10px 28px -4px rgba(255,120,80,0.44), inset 0 1px 0 rgba(255,255,255,0.40); }
}
.project-details-page .btn-next-step.glow-off { animation: none; }
.project-details-page .btn:hover { transform: translateY(-1px); }
.project-details-page .btn-secondary:hover,
.project-details-page .btn-done:hover { color: var(--text-1) !important; }
.project-details-page .btn-group .btn,
.project-details-page .card-header .btn { position: relative; z-index: 2; }
.project-details-page .data-table thead th {
    background: var(--glass-grid) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs); backdrop-filter: var(--glass-blur-xs);
    border-bottom: 1px solid rgba(255,255,255,0.42) !important;
}
.project-details-page .btn-done {
    background: var(--glass-btn) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-2) !important;
    box-shadow: var(--glass-highlight) !important;
    text-decoration: line-through;
    opacity: 0.85 !important;
}
.project-details-page .info-item .lbl { color: var(--text-3); }
.project-details-page .info-item .val { color: var(--text-1); font-weight: 600; }
.project-details-page .data-table tbody td { color: var(--text-2); border-bottom-color: rgba(255,255,255,0.28) !important; }
.project-details-page .data-table tbody tr:hover { background: rgba(255,255,255,0.18) !important; }
.project-details-page .erp-box,
.project-details-page .stockout-section {
    box-shadow: inset 0 1px 2px rgba(120,110,100,0.06), var(--glass-highlight) !important;
}

/* ── Line-only Mermaid diagram (B&W) ── */
.net-line-diagram {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
}
.net-line-diagram .mermaid-network-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 6px 4px 8px;
    background: #fff;
    border: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.net-line-diagram .mermaid-network-host {
    width: auto;
    min-height: 0;
    flex-shrink: 0;
}
.net-line-diagram .mermaid svg {
    max-width: none !important;
    width: auto !important;
    height: auto !important;
    display: block;
}
.net-line-diagram .node rect,
.net-line-diagram .node polygon,
.net-line-diagram .node circle {
    fill: #fff !important;
    stroke: #111 !important;
    stroke-width: 1.2px !important;
}
.net-line-diagram .cluster rect {
    fill: #fafafa !important;
    stroke: #bbb !important;
    stroke-width: 1px !important;
}
.net-line-diagram .cluster .cluster-label,
.net-line-diagram .cluster-label .nodeLabel {
    color: #333 !important;
    font-weight: 700 !important;
    font-size: 9px !important;
}
.net-line-diagram .edgePath path,
.net-line-diagram .flowchart-link {
    stroke: #111 !important;
    stroke-width: 1.2px !important;
}
.net-line-diagram .edgeLabel,
.net-line-diagram .edgeLabel p {
    color: #111 !important;
    background: #fff !important;
    font-size: 9px !important;
}
.net-line-diagram .label,
.net-line-diagram .nodeLabel {
    color: #111 !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
}
.net-line-diagram--landscape .mermaid-network-wrap {
    overflow: auto;
}
.net-line-diagram--landscape .mermaid-network-host {
    min-width: 0;
}
.net-line-diagram--landscape .mermaid,
.net-line-diagram--landscape .mermaid svg {
    font-size: 9px !important;
}
.net-line-diagram--landscape .nodeLabel,
.net-line-diagram--landscape .label {
    font-size: 9px !important;
}

/* Legacy SVG wrapper (preview compat) */
.netdiagram {
    width: 100%;
    height: 100%;
    display: block;
    background: linear-gradient(145deg, #f8fafc 0%, #eef2ff 45%, #fff7ed 100%);
    overflow: hidden;
    border-radius: 10px;
}
.netdiagram--glass {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 8px 32px -8px rgba(100,116,139,0.18);
}
.netdiagram-svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}
.netdiagram-svg--portrait {
    aspect-ratio: 746 / 900;
}
.netdiagram-appendix {
    font-family: 'Noto Sans KR', system-ui, sans-serif;
    font-size: 10px;
    color: #0f172a;
    padding: 4px 0;
}
.netdiagram-appendix-note {
    margin: 0 0 6px;
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
}
.netdiagram-appendix-legend {
    margin: 0 0 10px;
    font-size: 8.5px;
    color: #94a3b8;
    line-height: 1.4;
}
.netdiagram-table--ports {
    font-size: 8.5px;
}
.netdiagram-table--ports th {
    font-size: 7.5px;
    white-space: nowrap;
}
.netdiagram-table tbody tr.netdiag-kind-trunk td:nth-child(6) {
    color: #1d4ed8;
    font-weight: 600;
}
.netdiagram-table tbody tr.netdiag-kind-access td:nth-child(6) {
    color: #0f766e;
    font-weight: 600;
}
.netdiagram-table tbody tr.netdiag-kind-여유 td:nth-child(7) {
    color: #94a3b8;
    font-style: italic;
}
.netdiagram-table tbody tr.netdiag-kind-경고 td {
    background: #fef2f2;
}
.netdiag-tbl-warn {
    color: #dc2626 !important;
    font-weight: 700;
}
.netdiagram-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9px;
    line-height: 1.35;
}
.netdiagram-table th,
.netdiagram-table td {
    border: 1px solid #cbd5e1;
    padding: 5px 6px;
    text-align: left;
    vertical-align: top;
}
.netdiagram-table th {
    background: #0a1f44;
    color: #fff;
    font-weight: 700;
    font-size: 8px;
}
.netdiagram-table tbody tr:nth-child(even) {
    background: #f8fafc;
}
.netdiag-tbl-mono {
    font-family: 'IBM Plex Mono', 'DM Mono', monospace;
    font-size: 8.5px;
}
.netdiag-tbl-muted {
    color: #94a3b8;
    font-style: italic;
}
.diagram-a4-inner--html {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 0 !important;
    display: block !important;
}
.work-checklist-page .diagram-a4-inner--html .netdiagram,
.setup-status-page .diagram-a4-inner--html .netdiagram,
.work-checklist-page .diagram-a4-inner--html .net-line-diagram,
.setup-status-page .diagram-a4-inner--html .net-line-diagram,
#page-1 .net-line-diagram {
    min-height: 100%;
    border: none;
    border-radius: 0;
}

/* ═══════════════════════════════════════════════════════════
   Work checklist — interactive glass details (checkbox, rows, tabs)
═══════════════════════════════════════════════════════════ */
.work-checklist-page .install-survey-panel {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    background:
        radial-gradient(280px 180px at var(--mx, 30%) var(--my, 20%), rgba(255,255,255,0.42), transparent 62%),
        var(--glass-panel), var(--pearl-tint) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs);
    backdrop-filter: var(--glass-blur-xs);
    border: 1px solid var(--glass-border-strong) !important;
    box-shadow: var(--glass-edge), var(--glass-highlight) !important;
}
.work-checklist-page .install-receipt-item,
.work-checklist-page .install-receipt-row,
.work-checklist-page .glass-check-row {
    position: relative;
    overflow: hidden;
    gap: 10px;
    padding: 11px 12px;
    margin-bottom: 8px;
    border-radius: 14px;
    background:
        radial-gradient(180px 120px at var(--mx, 20%) var(--my, 30%), rgba(255,255,255,0.55), transparent 60%),
        var(--glass-card), var(--pearl-tint) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs);
    backdrop-filter: var(--glass-blur-xs);
    border: 1px solid var(--glass-border-strong) !important;
    box-shadow: var(--glass-edge), var(--raised-xs), var(--glass-highlight) !important;
    transition: transform .22s var(--spring, cubic-bezier(.22,.68,0,1.2)), box-shadow .25s ease, border-color .2s ease, background .25s ease;
    cursor: pointer;
    will-change: transform;
}
.work-checklist-page .install-receipt-item::before,
.work-checklist-page .install-receipt-row::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(145deg, rgba(255,255,255,0.35), transparent 42%);
    opacity: .7;
    z-index: 0;
}
.work-checklist-page .install-receipt-item > *,
.work-checklist-page .install-receipt-row > * { position: relative; z-index: 1; }
.work-checklist-page .install-receipt-item:hover,
.work-checklist-page .install-receipt-row:hover {
    border-color: rgba(255,255,255,0.95) !important;
    box-shadow:
        var(--glass-edge),
        0 12px 28px -14px rgba(88,78,108,0.18),
        var(--glass-highlight) !important;
}
.work-checklist-page .install-receipt-item:has(.glass-check-input:checked),
.work-checklist-page .install-receipt-item:has(input[type="checkbox"]:checked),
.work-checklist-page .install-receipt-row:has(.glass-check-input:checked),
.work-checklist-page .install-receipt-row:has(input[type="checkbox"]:checked) {
    background:
        radial-gradient(220px 160px at var(--mx, 28%) var(--my, 32%), rgba(255,255,255,0.62), transparent 58%),
        linear-gradient(145deg, rgba(255,255,255,0.48), rgba(248,244,255,0.16) 48%, rgba(255,252,248,0.22)),
        var(--pearl-tint) !important;
    border-color: rgba(255,255,255,0.88) !important;
    box-shadow:
        0 0 0 1px rgba(220,210,240,0.22),
        0 10px 24px -12px rgba(88,78,108,0.16),
        var(--glass-highlight) !important;
}
.work-checklist-page .install-receipt-item.receipt-locked,
.work-checklist-page .install-receipt-row.receipt-locked {
    opacity: 1;
    background:
        radial-gradient(200px 150px at 30% 40%, rgba(255,255,255,0.5), transparent 60%),
        linear-gradient(145deg, rgba(255,255,255,0.4), rgba(248,244,255,0.14)),
        var(--pearl-tint) !important;
    border-color: rgba(255,255,255,0.78) !important;
}

/* Custom glass checkbox — pearl frosted */
.work-checklist-page .glass-check-input,
.work-checklist-page .install-receipt-item > input[type="checkbox"].glass-check-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}
.work-checklist-page .glass-check-label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    margin: 0;
    font-size: 13px;
    font-weight: 650;
    color: var(--text-1);
    line-height: 1.35;
}
.work-checklist-page .glass-check-box {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 8px;
    display: inline-grid;
    place-items: center;
    background: linear-gradient(145deg, rgba(255,255,255,0.7), rgba(255,255,255,0.28));
    -webkit-backdrop-filter: var(--glass-blur-xs);
    backdrop-filter: var(--glass-blur-xs);
    border: 1.5px solid rgba(255,255,255,0.78);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.92),
        inset 0 -1px 2px rgba(120,110,100,0.06),
        0 2px 6px -2px rgba(88,78,108,0.14);
    transition: transform .18s var(--spring, cubic-bezier(.22,.68,0,1.2)), background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.work-checklist-page .glass-check-box::after {
    content: '';
    width: 11px;
    height: 7px;
    border-left: 2.1px solid rgba(90, 82, 110, 0.78);
    border-bottom: 2.1px solid rgba(90, 82, 110, 0.78);
    transform: rotate(-45deg) scale(0.4);
    opacity: 0;
    margin-top: -2px;
    transition: transform .18s var(--spring, cubic-bezier(.22,.68,0,1.2)), opacity .15s ease;
}
.work-checklist-page .glass-check-input:checked + .glass-check-label .glass-check-box,
.work-checklist-page .install-receipt-item:has(input[type="checkbox"]:checked) .glass-check-box,
.work-checklist-page .install-receipt-row:has(input[type="checkbox"]:checked) .glass-check-box {
    background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(250,246,255,0.58), rgba(255,252,248,0.5));
    border-color: rgba(255,255,255,0.95);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.98),
        0 0 0 1px rgba(200,185,230,0.2),
        0 4px 14px -4px rgba(120,100,160,0.16);
}
.work-checklist-page .glass-check-input:checked + .glass-check-label .glass-check-box::after,
.work-checklist-page .install-receipt-item:has(input[type="checkbox"]:checked) .glass-check-box::after,
.work-checklist-page .install-receipt-row:has(input[type="checkbox"]:checked) .glass-check-box::after {
    opacity: 1;
    transform: rotate(-45deg) scale(1);
}
.work-checklist-page .glass-check-label:hover .glass-check-box {
    transform: scale(1.05);
    border-color: rgba(255,255,255,0.95);
}
.work-checklist-page .glass-check-input:focus-visible + .glass-check-label .glass-check-box {
    outline: 2px solid rgba(180,170,200,0.45);
    outline-offset: 2px;
}
.work-checklist-page .glass-check-text {
    flex: 1;
    min-width: 0;
    word-break: keep-all;
}
.work-checklist-page .install-receipt-grid .glass-check-label {
    min-width: 0;
    flex: 1;
}
.work-checklist-page .install-receipt-grid .glass-check-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.work-checklist-page .install-receipt-row:has(.glass-check-input:checked) .glass-check-text,
.work-checklist-page .install-receipt-row.receipt-locked .glass-check-text,
.work-checklist-page .install-receipt-item:has(.glass-check-input:checked) .glass-check-text,
.work-checklist-page .install-receipt-item.receipt-locked .glass-check-text {
    color: var(--text-2);
}
.work-checklist-page .install-receipt-row.receipt-locked .glass-check-text,
.work-checklist-page .install-receipt-item.receipt-locked .glass-check-text {
    text-decoration: line-through;
    text-decoration-color: rgba(120,110,140,0.28);
}
.work-checklist-page .install-receipt-row .qty-badge,
.work-checklist-page .install-receipt-item .qty-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-2);
    padding: 4px 9px;
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(255,255,255,0.55), rgba(255,255,255,0.2)) !important;
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 2px 8px -4px rgba(88,78,108,0.12);
    letter-spacing: .02em;
}
.work-checklist-page .install-receipt-item .check-time {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 600;
    color: var(--text-3);
    padding: 3px 7px;
    border-radius: 8px;
    background: rgba(255,255,255,0.28);
    border: 1px solid rgba(255,255,255,0.48);
}

/* Survey cards / inputs / actions */
.work-checklist-page .survey-item-card {
    position: relative;
    overflow: hidden;
    padding: 12px 13px;
    margin-bottom: 10px;
    border-radius: 14px;
    background:
        radial-gradient(200px 140px at var(--mx, 30%) var(--my, 20%), rgba(255,255,255,0.5), transparent 60%),
        var(--glass-card), var(--pearl-tint) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs);
    backdrop-filter: var(--glass-blur-xs);
    border: 1px solid var(--glass-border-strong) !important;
    box-shadow: var(--glass-edge), var(--raised-xs), var(--glass-highlight) !important;
    transition: transform .22s var(--spring, cubic-bezier(.22,.68,0,1.2)), box-shadow .25s ease;
}
.work-checklist-page .survey-item-card:hover {
    box-shadow: var(--glass-edge), 0 12px 28px -14px rgba(72,68,96,0.28), var(--glass-highlight) !important;
}
.work-checklist-page .survey-unit-input {
    background: var(--glass-input) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs);
    backdrop-filter: var(--glass-blur-xs);
    border: 1px solid var(--glass-border) !important;
    box-shadow: inset 0 1px 2px rgba(120,110,100,0.08), var(--glass-highlight) !important;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.work-checklist-page .survey-unit-input:focus {
    outline: none;
    border-color: rgba(255,136,98,0.55) !important;
    box-shadow: inset 0 1px 2px rgba(120,110,100,0.08), 0 0 0 2px rgba(255,136,98,0.22) !important;
}
.work-checklist-page .survey-btn {
    position: relative;
    overflow: hidden;
    padding: 9px 16px;
    border-radius: 12px;
    font-weight: 800;
    transition: transform .18s var(--spring, cubic-bezier(.22,.68,0,1.2)), box-shadow .2s ease, background .2s ease;
}
.work-checklist-page .survey-save {
    background: var(--glass-btn) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs);
    backdrop-filter: var(--glass-blur-xs);
    border: 1px solid var(--glass-border-strong) !important;
    box-shadow: var(--glass-edge), var(--raised-sm), var(--glass-highlight) !important;
    color: var(--text-1) !important;
}
.work-checklist-page .survey-save:hover {
    transform: translateY(-1px);
    box-shadow: var(--glass-edge), 0 10px 22px -10px rgba(72,68,96,0.28), var(--glass-highlight) !important;
}
.work-checklist-page .survey-final {
    background: var(--accent-gradient) !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    box-shadow: 0 8px 20px -8px rgba(255,136,98,0.5), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
.work-checklist-page .survey-final:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -8px rgba(255,136,98,0.55), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}
.work-checklist-page .survey-final-banner {
    background:
        radial-gradient(220px 120px at 50% 0%, rgba(255,255,255,0.55), transparent 65%),
        linear-gradient(145deg, rgba(255,255,255,0.42), rgba(248,244,255,0.16)),
        var(--pearl-tint) !important;
    border: 1px solid rgba(255,255,255,0.72) !important;
    color: var(--text-2) !important;
    box-shadow: 0 6px 18px -10px rgba(88,78,108,0.14), inset 0 1px 0 rgba(255,255,255,0.75);
    border-radius: 12px;
}

/* Tabs — glass interactive pills */
.work-checklist-page .tab-nav {
    gap: 4px;
    padding: 5px !important;
    background:
        radial-gradient(240px 160px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.35), transparent 65%),
        var(--glass-panel), var(--pearl-tint) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), var(--glass-highlight) !important;
}
.work-checklist-page .tab-link {
    position: relative;
    overflow: hidden;
    border-radius: 10px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition: color .18s ease, background .18s ease, box-shadow .2s ease, transform .18s ease, border-color .18s ease;
}
.work-checklist-page .tab-link:hover {
    color: var(--text-1);
    background: rgba(255,255,255,0.28) !important;
    border-color: rgba(255,255,255,0.45) !important;
}
.work-checklist-page .tab-link.active {
    color: var(--text-1) !important;
    background:
        radial-gradient(120px 80px at var(--mx, 50%) var(--my, 40%), rgba(255,255,255,0.55), transparent 70%),
        var(--glass-btn) !important;
    border: 1px solid var(--glass-border-strong) !important;
    box-shadow: var(--glass-edge), var(--raised-sm), var(--glass-highlight) !important;
}
.work-checklist-page .tab-link .badge {
    box-shadow: 0 2px 6px rgba(240,110,61,0.35) !important;
}

/* Compact cards / add buttons / gateway paste */
.work-checklist-page .compact-card {
    border-radius: 16px !important;
}
.work-checklist-page .btn-action-3d {
    width: 30px;
    height: 30px;
    border-radius: 10px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: transform .18s var(--spring, cubic-bezier(.22,.68,0,1.2)), box-shadow .2s ease;
}
.work-checklist-page .btn-action-3d:hover {
    transform: translateY(-1px) scale(1.05);
}
.work-checklist-page .gateway-paste-panel {
    position: relative;
    overflow: hidden;
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background:
        radial-gradient(220px 140px at var(--mx, 40%) var(--my, 30%), rgba(255,255,255,0.45), transparent 62%),
        var(--glass-panel), var(--pearl-tint);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-highlight);
}
.work-checklist-page .gateway-paste-panel label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 8px;
}
.work-checklist-page .gateway-paste-area {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--glass-border) !important;
    background: var(--glass-input) !important;
    box-shadow: inset 0 1px 2px rgba(120,110,100,0.08), var(--glass-highlight) !important;
    padding: 10px 12px;
    font-size: 12px;
    font-family: inherit;
    resize: vertical;
}
.work-checklist-page .gateway-table-scroll {
    border-radius: 14px;
    overflow: auto;
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.18);
    box-shadow: var(--glass-highlight);
}
.work-checklist-page .gateway-edit-table th {
    background: var(--glass-grid) !important;
    -webkit-backdrop-filter: var(--glass-blur-xs);
    backdrop-filter: var(--glass-blur-xs);
}
.work-checklist-page .gateway-edit-table td {
    background: rgba(255,255,255,0.06);
}
.work-checklist-page .gateway-edit-table input {
    background: var(--glass-input) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 8px;
    box-shadow: inset 0 1px 2px rgba(120,110,100,0.06), var(--glass-highlight) !important;
}
.work-checklist-page .code-input {
    border-radius: 12px !important;
    min-height: 36px;
}
.work-checklist-page .footer-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.42);
}
.work-checklist-page .footer-actions .btn {
    transition: transform .18s var(--spring, cubic-bezier(.22,.68,0,1.2)), box-shadow .2s ease;
}
.work-checklist-page .footer-actions .btn:hover {
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .work-checklist-page .install-receipt-item,
    .work-checklist-page .survey-item-card,
    .work-checklist-page .tab-link,
    .work-checklist-page .survey-btn,
    .work-checklist-page .btn-action-3d,
    .work-checklist-page .glass-check-box {
        transition: none !important;
    }
}