/* 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;
}
*, *::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; padding: 24px 20px 72px;
}
.container { max-width: 1160px; margin: auto; }

/* ── 페이지 헤더 ── */
.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 {
    width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
    background: var(--accent-gradient);
    box-shadow: 4px 4px 12px rgba(240,110,61,.3), -2px -2px 6px rgba(255,255,255,.7);
    display: flex; align-items: center; justify-content: center;
}
.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; }
.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;
}
.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 */
.login-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.login-card {
    width: 100%; max-width: 400px; padding: 44px 36px;
    background:
        radial-gradient(280px 280px at var(--mx,50%) var(--my,30%), 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); border-radius: 22px;
    box-shadow: var(--shadow-card), var(--glass-highlight);
    position: relative; z-index: 1;
}
.login-card h1 {
    text-align: center; font-family: 'Nunito', sans-serif;
    font-size: 26px; font-weight: 800; color: var(--text-1);
    margin: 0 0 24px; letter-spacing: -.3px;
}
.login-card label { font-size: 12px; font-weight: 700; color: var(--text-3); margin-bottom: 6px; }
.login-card input[type="text"], .login-card input[type="password"] {
    width: 100%; padding: 13px 16px; margin-bottom: 18px; border-radius: 12px;
    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;
    font-size: 14px; font-family: inherit; color: var(--text-1); outline: none;
}
.login-card 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; }
.login-card button[type="submit"] {
    width: 100%; padding: 14px; font-size: 15px; font-weight: 800;
    background: var(--accent-gradient) !important; color: #fff; border: none; border-radius: 12px; cursor: pointer;
    box-shadow: 0 8px 18px -6px rgba(255,136,98,0.30), inset 0 1px 0 rgba(255,255,255,0.35);
    font-family: inherit; transition: transform .18s, box-shadow .18s;
}
.login-card button[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -6px rgba(255,136,98,0.38), inset 0 1px 0 rgba(255,255,255,0.35); }
.login-error { background: rgba(240,82,82,.12); color: var(--danger); padding: 12px; margin-bottom: 16px; border-radius: 12px; font-weight: 700; font-size: 13px; text-align: center; border: 1px solid rgba(240,82,82,.25); }
.login-footer { margin-top: 32px; font-size: 12px; color: var(--text-3); text-align: center; }

/* App shell + nav (checklist design) */
body.flow-app { padding: 0 !important; }
.flow-shell { max-width: 1200px; margin: 0 auto; padding: 16px 20px 72px; }
.flow-topbar {
  position: sticky; top: 12px; z-index: 500;
  margin-bottom: 16px; flex-wrap: wrap;
}
.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; }

/* 대시보드 액션 버튼 — 단일 스펙 (12px / 32px 높이 / 10px radius) */
.dashboard-page .dash-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px; padding: 0 14px;
  font-size: 12px; font-weight: 700; line-height: 1.2;
  font-family: 'Noto Sans KR', sans-serif;
  border-radius: 10px; border: none; cursor: pointer;
  white-space: nowrap; text-decoration: none;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  color: #fff !important;
}
.dashboard-page .dash-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 6px 14px -4px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.28);
}
.dashboard-page .dash-btn:active { transform: translateY(0); filter: brightness(.98); }
.dashboard-page .status-badge.status-wait { background: linear-gradient(135deg, #f5a623, #e08a10); }
.dashboard-page .status-badge.status-ongoing { background: linear-gradient(135deg, #4a90e2, #2f6fbe); }
.dashboard-page .status-badge.status-completed { background: linear-gradient(135deg, #43b97a, #2d9a62); }
.dashboard-page .completed-btn.btn-items { background: linear-gradient(135deg, #5c85d6, #4a6fbf); }
.dashboard-page .completed-btn.btn-setup { background: linear-gradient(135deg, #7c6fcd, #6558b8); }
.dashboard-page .completed-btn.btn-inspect { background: linear-gradient(135deg, #e8a838, #cf8f20); }
.dashboard-page .completed-btn.btn-status { background: var(--accent-gradient) !important; }

.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-btn { position: relative; overflow: hidden; }
.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; }
}


/* 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; }
}


/* 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: 0 8px 18px -6px rgba(255,136,98,0.30), inset 0 1px 0 rgba(255,255,255,0.35) !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;
}