/* dsgroup — layout from app.gongbok.com */

:root {
 --sidebar-width: 220px;
 --main-pad-x: 16px;
 --header-h: 48px;
 --action-bar-h: 44px;
 /* 좌측 현장목록 행 ↔ 우측 그리드 행 동일 */
 --list-row-h: 36px;
 --list-row-pad-y: 6px;
 --list-row-pad-x: 14px;
 --list-gap-y: 0;
 --font-menu: 14px;

 /* palette */
 --navy: #0f2a4a;
 --green: #2f6b3a;
 --blue: #2e75b5;
 --blue-soft: #5b9bd5;
 --orange: #ed7d31;
 --peach: #f8cbad;
 --cream: #fff2cc;
 --mint: #c6e0b4;
 --sky: #bdd7ee;
 --gray: #d0d0d0;
 --bg: #e8eef4;
 --panel: #ffffff;
 --line: #c5d0dc;
 --text: #000000;
 --muted: #5a6a7a;
 --shadow: 0 10px 28px rgba(15, 42, 74, 0.12);

 --nav-bg: var(--navy);
 --sidebar-bg: #f3f7fb;
 --card-border: var(--line);
 --text-primary: var(--text);
 --text-secondary: var(--muted);
 --menu-active-bg: var(--sky);
 --menu-active-fg: var(--navy);
 --msg-bg: #e0f2fe;
 --msg-border: #bae6fd;
 --input-bg: #f5f8fb;
 --head-bg: #edf3f8;
 --chrome: #f7fafc;
 --panel-bg: var(--panel);
 --footer-bg: var(--chrome);
 --body-bg: var(--bg);
 --card-bg: var(--panel);
 --table-head-bg: var(--head-bg);
 --accent-blue: #0ea5e9;
 --btn-red: #dc2626;
 --btn-green: #059669;
 --focus-border: #0284c7;
 --focus-glow: rgba(14, 165, 233, 0.22);
 --focus-fill: #e8f6fd;
 --grid-stripe: #f3f7fb;
 --font-sm: 12px;
 --font-sidebar: 13px;
 --font: "Noto Sans KR", sans-serif;
 --brand-h: 22px;
 --font-family-brand: "DaeguCatholicUniversity", system-ui, -apple-system, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { height: 100%; font-family: var(--font); }

body,
button, input, select, textarea, summary, a, label {
 font-family: var(--font);
}

.fa, .fas, .far, .fa-solid, .fa-regular, .fa-brands {
 font-family: "Font Awesome 6 Free" !important;
}
.fa-solid, .fas { font-weight: 900; }

body.app {
 margin: 0;
 height: 100%;
 display: flex;
 flex-direction: column;
 overflow: hidden;
 font-size: 14px;
 color: var(--text-primary);
 background: var(--bg);
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
 left: 8px; top: 8px; z-index: 2000;
 background: var(--panel); padding: 0.5rem 0.75rem;
}

/* ===== gongbok header ===== */
.nav-header {
 background-color: var(--nav-bg);
 height: var(--header-h);
 padding: 0;
 display: grid;
 grid-template-columns: var(--sidebar-width) 1fr;
 align-items: center;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
 flex-shrink: 0;
 z-index: 1000;
 position: relative;
}

.nav-brand {
 width: var(--sidebar-width);
 max-width: var(--sidebar-width);
 height: var(--header-h);
 padding: 0 14px;
 display: flex;
 align-items: center;
 gap: 8px;
 flex-shrink: 0;
 min-width: 0;
 overflow: hidden;
 background: var(--nav-bg);
 border-right: 1px solid rgba(255, 255, 255, 0.12);
 box-sizing: border-box;
}

.mobile-toggle-btn {
 display: none;
 background: transparent;
 border: none;
 color: var(--text);
 font-size: 18px;
 cursor: pointer;
 padding: 4px;
}

.brand-logo {
 display: flex;
 align-items: center;
 gap: 8px;
 text-decoration: none;
 color: #fff;
 font-weight: 700;
 font-size: var(--brand-h);
 white-space: nowrap;
 min-width: 0;
 flex: 1;
 overflow: hidden;
 height: var(--header-h);
}

.brand-logo img {
 height: 36px;
 width: auto;
 max-width: 88px;
 min-width: 0;
 object-fit: contain;
 border-radius: 6px;
 background: var(--nav-bg);
 overflow: hidden;
 flex-shrink: 1;
 display: block;
}

.brand-logo span {
 overflow: hidden;
 font-family: var(--font-family-brand);
 font-weight: normal;
 font-size: var(--brand-h);
 line-height: 1;
 height: var(--brand-h);
 display: flex;
 align-items: center;
 flex: 0 0 auto;
 min-width: 0;
 letter-spacing: -0.02em;
}

.nav-center {
 display: flex;
 align-items: center;
 min-width: 0;
 padding-left: var(--main-pad-x);
 overflow: visible;
 height: var(--header-h);
}

.nav-primary {
 display: inline-grid;
 grid-auto-flow: column;
 grid-auto-columns: 1fr;
 align-items: center;
 gap: 8px;
 min-width: 0;
}

.nav-menubtn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 min-width: 0;
 height: 30px;
 padding: 0 10px;
 border-radius: 6px;
 text-decoration: none;
 color: #fff;
 font-size: 12px;
 font-weight: 700;
 white-space: nowrap;
 background: linear-gradient(180deg, #3d6ea8 0%, #1f4f86 100%);
 box-shadow: 0 2px 6px rgba(15, 42, 74, 0.18);
 border: none;
 cursor: pointer;
 box-sizing: border-box;
}

.nav-menubtn:hover {
 filter: brightness(1.06);
}

.nav-menubtn.active,
.nav-related[open] > .nav-menubtn {
 outline: 2px solid var(--orange);
 outline-offset: 1px;
 box-shadow: 0 0 0 1px var(--orange), 0 2px 6px rgba(15, 42, 74, 0.18);
}

.nav-related {
 position: relative;
 display: inline-flex;
 width: 100%;
 min-width: 0;
 flex-shrink: 0;
}

.nav-related-summary {
 list-style: none;
 width: 100%;
}
.nav-related-summary::-webkit-details-marker { display: none; }
.nav-related-summary::after {
 content: "";
 width: 0; height: 0;
 margin-left: 6px;
 border-left: 4px solid transparent;
 border-right: 4px solid transparent;
 border-top: 5px solid currentColor;
}

.nav-related-panel {
 position: absolute;
 top: calc(100% + 8px);
 left: 0;
 min-width: 180px;
 padding: 6px;
 border-radius: 10px;
 background: var(--panel);
 border: 1px solid var(--line);
 box-shadow: var(--shadow);
 display: flex;
 flex-direction: column;
 gap: 2px;
 z-index: 1100;
}

.nav-related-item {
 display: flex;
 align-items: center;
 min-height: 34px;
 padding: 6px 12px;
 border-radius: 6px;
 color: var(--text);
 text-decoration: none;
 font-size: 13px;
 font-weight: 700;
}
.nav-related-item:hover { background: var(--sky); }

/* ===== gongbok workspace ===== */
.app-workspace {
 display: flex;
 position: relative;
 flex: 1;
 width: 100%;
 min-height: 0;
 overflow: hidden;
}

.site-sidebar {
 width: var(--sidebar-width);
 background-color: var(--sidebar-bg);
 border-right: 1px solid var(--card-border);
 display: flex;
 flex-direction: column;
 flex-shrink: 0;
 overflow: hidden;
 z-index: 900;
 font-size: var(--font-menu);
 height: 100%;
 min-height: 0;
}

.site-sidebar-header {
 height: var(--action-bar-h);
 min-height: var(--action-bar-h);
 box-sizing: border-box;
 border-bottom: 1px solid var(--card-border);
 flex-shrink: 0;
 padding: 0 10px 0 14px;
 font-weight: 700;
 color: var(--text);
 font-size: 13px;
 display: flex;
 align-items: center;
 gap: 6px;
}

.site-sidebar-sites {
 flex: 1 1 0;
 min-height: 0;
 overflow: hidden;
 display: flex;
 flex-direction: column;
}

.site-sidebar-list {
 list-style: none;
 margin: 0;
 padding: 0;
 overflow-y: auto;
 flex: 1;
 min-height: 0;
}

.site-sidebar-site {
 display: flex;
 align-items: center;
 gap: 8px;
 box-sizing: border-box;
 height: var(--list-row-h);
 min-height: var(--list-row-h);
 max-height: var(--list-row-h);
 padding: var(--list-row-pad-y) 10px;
 margin: 0;
 border-radius: 6px;
 color: var(--text);
 text-decoration: none;
 font-weight: 500;
 font-size: var(--font-sidebar);
 line-height: 1.2;
 overflow: visible;
 background: transparent;
}
.site-sidebar-site span {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 min-width: 0;
}
.site-sidebar-site:hover {
 background: rgba(47, 107, 58, 0.1);
 color: var(--text);
}
.site-sidebar-site.active {
 background: var(--mint);
 color: var(--text);
 font-weight: 700;
}
html[data-theme="dark"] .site-sidebar-site:hover {
 background: transparent;
 filter: brightness(1.06);
}
html[data-theme="dark"] .site-sidebar-site.active {
 background: transparent;
 outline: 2px solid var(--orange);
 outline-offset: 1px;
 box-shadow: 0 0 0 1px var(--orange);
}
@media (prefers-color-scheme: dark) {
 html[data-theme="system"] .site-sidebar-site:hover {
 background: transparent;
 filter: brightness(1.06);
 }
 html[data-theme="system"] .site-sidebar-site.active {
 background: transparent;
 outline: 2px solid var(--orange);
 outline-offset: 1px;
 box-shadow: 0 0 0 1px var(--orange);
 }
}

.site-sidebar-hint {
 padding: 10px 14px;
 color: var(--text-secondary);
 font-size: 12px;
}

.site-sidebar-account {
 flex-shrink: 0;
 display: flex;
 flex-direction: column;
 padding: 0;
 border-top: 1px solid var(--card-border);
}

.site-sidebar-account-row {
 display: flex;
 align-items: center;
 gap: 8px;
 box-sizing: border-box;
 height: var(--list-row-h);
 min-height: var(--list-row-h);
 max-height: var(--list-row-h);
 padding: 0 14px;
 color: var(--text);
 text-decoration: none;
 font-weight: 700;
 font-size: var(--font-sidebar);
}
button.site-sidebar-account-row {
 appearance: none;
 border: none;
 background: transparent;
 width: 100%;
 cursor: pointer;
 font-family: inherit;
 text-align: left;
}
.site-sidebar-account-row i {
 width: 1.1em;
 text-align: center;
 font-size: 12px;
 flex-shrink: 0;
}
.site-sidebar-account-row:hover {
 background: rgba(46, 117, 181, 0.1);
 color: var(--text);
}
.site-sidebar-account-row.active {
 background: var(--menu-active-bg);
 color: var(--menu-active-fg);
}
.site-sidebar-account-row.logout-row {
 color: #ef4444;
}
.site-sidebar-account-row.logout-row:hover {
 background: rgba(239, 68, 68, 0.1);
 color: #ef4444;
}
.site-sidebar-account .account-row-text {
 display: flex;
 flex-direction: column;
 gap: 1px;
 min-width: 0;
 flex: 1;
}
.site-sidebar-account .account-email {
 font-size: 11px;
 font-weight: 500;
 color: var(--text-secondary);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 max-width: 160px;
}
.site-sidebar-account .profile-caret {
 margin-left: auto;
 font-size: 10px;
 color: var(--text-secondary);
 transition: transform 0.15s;
}
.site-sidebar-profile { border-top: 1px solid var(--card-border); }
.site-sidebar-profile > summary {
 list-style: none;
 cursor: pointer;
 border-top: none;
 height: auto;
 min-height: var(--list-row-h);
 max-height: none;
 padding-top: 8px;
 padding-bottom: 8px;
}
.site-sidebar-profile > summary::-webkit-details-marker { display: none; }
.site-sidebar-profile[open] .profile-caret { transform: rotate(180deg); }
.site-sidebar-profile-menu {
 padding: 8px 10px 10px;
 display: flex;
 flex-direction: column;
 gap: 8px;
 background: transparent;
 border-top: 1px solid var(--card-border);
}
.profile-menu-block { display: flex; flex-direction: column; gap: 6px; }
.profile-menu-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); }
.profile-menu-edit {
 display: flex;
 align-items: center;
 gap: 8px;
 width: 100%;
 padding: 8px 10px;
 border: 1px solid var(--card-border);
 border-radius: 8px;
 background: var(--input-bg);
 color: var(--text-primary);
 font-size: var(--font-sidebar);
 font-weight: 600;
 cursor: pointer;
 font-family: inherit;
 text-align: left;
}
.profile-menu-edit:hover { background: rgba(46, 117, 181, 0.1); }
.profile-menu-edit i {
 width: 1.1em;
 text-align: center;
 font-size: 12px;
}
.theme-switch {
 display: grid;
 grid-auto-flow: column;
 grid-auto-columns: 1fr;
 gap: 2px;
 background: rgba(15, 42, 74, 0.08);
 border-radius: 8px;
 padding: 2px;
 width: 100%;
}
.theme-switch button {
 width: 100%;
 border: none;
 background: transparent;
 color: var(--text-secondary);
 font-size: 11px;
 font-weight: 700;
 padding: 6px 4px;
 border-radius: 6px;
 cursor: pointer;
 text-align: center;
 font-family: inherit;
}
.theme-switch button.active {
 background: #bdd7ee;
 color: #0f2a4a;
}
html[data-theme="dark"] .theme-switch {
 background: rgba(255, 255, 255, 0.08);
}
@media (prefers-color-scheme: dark) {
 html[data-theme="system"] .theme-switch {
  background: rgba(255, 255, 255, 0.08);
 }
}

html[data-theme="dark"] {
 color-scheme: dark;
 --bg: #0f172a;
 --panel: #111827;
 --sidebar-bg: #0b1220;
 --text: #e5e7eb;
 --text-primary: #e5e7eb;
 --text-secondary: #94a3b8;
 --muted: #94a3b8;
 --line: #334155;
 --card-border: #334155;
 --menu-active-bg: #1e3a5f;
 --menu-active-fg: #e0f2fe;
 --sky: #1e3a5f;
 --input-bg: #1e293b;
 --head-bg: #1e293b;
 --chrome: #0b1220;
 --panel-bg: #1f232d;
 --footer-bg: #111318;
 --body-bg: #0f172a;
 --card-bg: #1f232d;
 --table-head-bg: #1e293b;
 --focus-border: #38bdf8;
 --focus-glow: rgba(56, 189, 248, 0.28);
 --focus-fill: #16324a;
 --grid-stripe: #1e293b;
}
@media (prefers-color-scheme: dark) {
 html[data-theme="system"] {
 color-scheme: dark;
 --bg: #0f172a;
 --panel: #111827;
 --sidebar-bg: #0b1220;
 --text: #e5e7eb;
 --text-primary: #e5e7eb;
 --text-secondary: #94a3b8;
 --muted: #94a3b8;
 --line: #334155;
 --card-border: #334155;
 --menu-active-bg: #1e3a5f;
 --menu-active-fg: #e0f2fe;
 --sky: #1e3a5f;
 --input-bg: #1e293b;
 --head-bg: #1e293b;
 --chrome: #0b1220;
 --panel-bg: #1f232d;
 --footer-bg: #111318;
 --body-bg: #0f172a;
 --card-bg: #1f232d;
 --table-head-bg: #1e293b;
 --focus-border: #38bdf8;
 --focus-glow: rgba(56, 189, 248, 0.28);
 --focus-fill: #16324a;
 --grid-stripe: #1e293b;
 }
}

.main-content {
 flex: 1;
 padding: 0 var(--main-pad-x) 12px;
 min-width: 0;
 overflow-y: auto;
 display: flex;
 flex-direction: column;
 position: relative;
 background: var(--panel);
}

.shell-sketch {
 padding-top: 16px;
}
.shell-sketch h1 {
 margin: 0 0 8px;
 font-size: 1.25rem;
 color: var(--text);
}
.shell-sketch p {
 margin: 0;
 color: var(--muted);
}

/* ===== ADMIN ===== */
.main-content--admin {
 padding: 0;
 overflow: hidden;
}

.admin-accounts {
 flex: 1;
 min-height: 0;
 display: flex;
 flex-direction: column;
 padding: 0;
}

/* ===== ESW / gongbok action · msg · search toolbar ===== */
.action-status-bar {
 height: var(--action-bar-h);
 min-height: var(--action-bar-h);
 max-height: var(--action-bar-h);
 box-sizing: border-box;
 background: var(--head-bg);
 border: none;
 border-bottom: 1px solid var(--line);
 border-radius: 0;
 padding: 0 10px;
 margin: 0;
 display: flex;
 align-items: center;
 justify-content: flex-start;
 gap: 8px;
 flex-wrap: nowrap;
 flex-shrink: 0;
 overflow: hidden;
 container-type: inline-size;
}

.action-status-left {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: nowrap;
 flex: 0 1 auto;
 width: auto;
 max-width: none;
 min-width: 0;
 overflow: hidden;
}

.action-status-right {
 display: flex;
 align-items: center;
 gap: 6px;
 flex: 0 0 auto;
 min-width: 0;
 justify-content: flex-end;
 margin-left: auto;
}

.table-title {
 font-size: var(--font-sidebar);
 font-weight: 700;
 color: var(--text-primary);
 display: flex;
 align-items: center;
 gap: 6px;
 margin: 0;
 white-space: nowrap;
 flex-shrink: 0;
}

.msg-info {
 display: flex;
 align-items: center;
 gap: 6px;
 flex-wrap: nowrap;
 color: #0369a1;
 font-size: var(--font-sm);
 font-weight: 500;
 background: rgba(255, 255, 255, 0.35);
 padding: 0 10px;
 height: 22px;
 border-radius: 10px;
 min-width: 0;
 flex: 1;
}
.msg-info.msg-tone-info { color: #0369a1; }
.msg-info.msg-tone-warn { color: #b54708; background: rgba(255, 242, 204, 0.65); }
.msg-info.msg-tone-danger { color: #b42318; background: rgba(254, 226, 226, 0.7); }

#msg-bar-text {
 flex: 1;
 min-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 word-break: keep-all;
}

.msg-bar-actions {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 margin-left: 6px;
 flex-shrink: 0;
}
.msg-bar-btn {
 appearance: none;
 border: 1px solid var(--card-border);
 border-radius: 4px;
 height: 20px;
 padding: 0 8px;
 font: inherit;
 font-size: 11px;
 font-weight: 700;
 cursor: pointer;
 background: var(--panel);
 color: var(--text);
 line-height: 1;
}
.msg-bar-btn.msg-bar-yes,
.msg-bar-btn--yes {
 background: var(--orange);
 border-color: var(--orange);
 color: #fff;
}

.search-box:not(:has(input)) {
 display: none;
}
.search-box {
 position: relative;
 display: flex;
 align-items: center;
 flex: 0 0 30cqi;
 width: 30cqi;
 max-width: 30cqi;
 min-width: 160px;
 height: 32px;
}
.search-box i.fa-magnifying-glass {
 position: absolute;
 left: 10px;
 top: 50%;
 transform: translateY(-50%);
 color: var(--text-secondary);
 font-size: 12px;
 pointer-events: none;
}
.search-box input {
 height: 32px;
 padding: 0 12px 0 30px;
 background: var(--panel);
 border: 1px solid var(--line);
 border-radius: 8px;
 color: var(--text-primary);
 font-size: 13px;
 width: 100%;
 min-width: 0;
 line-height: 32px;
 box-sizing: border-box;
}
.search-box input::placeholder {
 color: var(--text-secondary);
 opacity: 1;
}
.search-box input:focus {
 outline: none;
 border-color: var(--focus-border);
 background: var(--focus-fill);
 box-shadow: 0 0 0 2px var(--focus-glow);
}
.search-box .search-clear {
 position: absolute;
 right: 4px;
 top: 50%;
 transform: translateY(-50%);
 width: 16px;
 height: 16px;
 border: none;
 border-radius: 3px;
 cursor: pointer;
 background: transparent;
 color: var(--text-secondary);
 display: none;
 align-items: center;
 justify-content: center;
 font-size: 10px;
 padding: 0;
}
.search-box .search-clear:hover {
 background: rgba(15, 42, 74, 0.08);
 color: var(--text-primary);
}
.search-box.has-value .search-clear {
 display: inline-flex;
}

.btn-toolbar {
 height: 32px;
 border: 1px solid var(--line);
 background: var(--panel);
 color: var(--text-primary);
 padding: 0 12px;
 border-radius: 8px;
 font-size: 13px;
 font-weight: 700;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 gap: 4px;
 line-height: 1;
 appearance: none;
 white-space: nowrap;
}
.btn-toolbar:hover:not(:disabled) {
 filter: brightness(1.06);
}
.btn-toolbar.primary {
 background: var(--btn-green);
 border-color: var(--btn-green);
 color: #fff;
}
.btn-toolbar.print {
 background: #0369a1;
 border-color: #0284c7;
 color: #fff;
}

.btn-toolbar-group {
 display: inline-grid;
 grid-auto-flow: column;
 grid-auto-columns: 1fr;
 gap: 6px;
 align-items: center;
}
.btn-toolbar-group .btn-toolbar {
 width: 100%;
 justify-content: center;
}

.btn-sky, .btn-red, .btn-ghost {
 appearance: none;
 border: none;
 border-radius: 6px;
 cursor: pointer;
 font: inherit;
 font-weight: 700;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 0 12px;
 height: 32px;
 white-space: nowrap;
}
html[data-theme="dark"] .btn-sky { color: #0f172a; }
html[data-theme="dark"] .side-panel .btn-ghost,
html[data-theme="dark"] .side-panel-title,
html[data-theme="dark"] .side-panel label {
 color: #e5e7eb;
}
html[data-theme="dark"] .side-panel .form-helper {
 color: #94a3b8;
}
@media (prefers-color-scheme: dark) {
 html[data-theme="system"] .btn-sky { color: #0f172a; }
 html[data-theme="system"] .side-panel .btn-ghost,
 html[data-theme="system"] .side-panel-title,
 html[data-theme="system"] .side-panel label {
 color: #e5e7eb;
 }
 html[data-theme="system"] .side-panel .form-helper {
 color: #94a3b8;
 }
}
.btn-sky { background: #0284c7; color: #fff; }
.btn-red { background: #dc2626; color: #fff; }
.btn-ghost {
 background: transparent;
 color: var(--text);
 border: 1px solid var(--line);
}

.grid-list {
 flex: 1;
 min-height: 0;
 overflow: auto;
 background: var(--panel);
 border: none;
 border-top: 1px solid var(--line);
 border-radius: 0;
 margin: 0;
 padding: var(--list-gap-y) 0;
}
.data-grid {
 width: 100%;
 border-collapse: collapse;
 font-size: var(--font-sidebar);
 table-layout: fixed;
}
.data-grid th.col-check,
.data-grid td.col-check {
 width: 36px;
 text-align: center;
 padding-left: 0;
 padding-right: 0;
}
.data-grid th.col-check input,
.data-grid td.col-check input {
 margin: 0;
 vertical-align: middle;
}
.data-grid th,
.data-grid td {
 box-sizing: border-box;
 height: var(--list-row-h);
 min-height: var(--list-row-h);
 max-height: var(--list-row-h);
 padding: var(--list-row-pad-y) var(--list-row-pad-x);
 font-size: var(--font-sidebar);
 line-height: 1.2;
 vertical-align: middle;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.data-grid th {
 position: sticky;
 top: 0;
 background: var(--head-bg);
 color: var(--text);
 font-weight: 700;
 text-align: left;
 border-bottom: 1px solid var(--line);
 z-index: 1;
}
.data-grid td {
 border-bottom: 1px solid var(--line);
 color: var(--text);
}
.data-grid .col-num { text-align: right; font-variant-numeric: tabular-nums; }
.data-grid tbody tr { cursor: pointer; }
.data-grid tbody tr:nth-child(even) { background: var(--grid-stripe); }
.data-grid tbody tr:hover { background: rgba(46, 117, 181, 0.12); }
.data-grid tbody tr.selected,
.grid-row.selected-row {
 background: var(--mint);
}
html[data-theme="dark"] .data-grid tbody tr:nth-child(even) {
 background: var(--grid-stripe);
}
html[data-theme="dark"] .data-grid tbody tr:hover {
 background: color-mix(in srgb, var(--blue-soft) 22%, var(--panel));
}
html[data-theme="dark"] .data-grid tbody tr.selected,
html[data-theme="dark"] .grid-row.selected-row {
 background: color-mix(in srgb, var(--orange) 22%, var(--panel));
 box-shadow: inset 0 0 0 2px var(--orange);
}
@media (prefers-color-scheme: dark) {
 html[data-theme="system"] .data-grid tbody tr:nth-child(even) {
 background: var(--grid-stripe);
 }
 html[data-theme="system"] .data-grid tbody tr:hover {
 background: color-mix(in srgb, var(--blue-soft) 22%, var(--panel));
 }
 html[data-theme="system"] .data-grid tbody tr.selected,
 html[data-theme="system"] .grid-row.selected-row {
 background: color-mix(in srgb, var(--orange) 22%, var(--panel));
 box-shadow: inset 0 0 0 2px var(--orange);
 }
}
.grid-row { cursor: pointer; }
.grid-row:hover { background: rgba(46, 117, 181, 0.12); }
.grid-row.selected-row { background: var(--mint); }
.grid-file-links {
 display: inline-flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 2px 0;
 max-width: 100%;
 line-height: 1.35;
}
.grid-file-link {
 color: var(--blue);
 text-decoration: none;
 font-weight: 600;
 display: inline-flex;
 align-items: center;
 gap: 4px;
 cursor: pointer;
}
.grid-file-link:hover { color: var(--text); text-decoration: underline; }
.grid-file-name { color: var(--text-secondary); }
.grid-file-sep { color: var(--muted); }

.sheet-file-input {
 display: block;
 margin-top: 6px;
 font-size: 12px;
 width: 100%;
 max-width: 100%;
}
.sheet-file-hint {
 font-size: 11px;
 color: var(--muted);
 margin-top: 4px;
 line-height: 1.35;
}
.file-panel-editable {
 display: flex;
 flex-direction: column;
 gap: 4px;
 margin-bottom: 6px;
 min-width: 0;
 max-width: 100%;
 overflow: hidden;
}
.file-panel-editable-row {
 flex-wrap: nowrap;
 max-width: 100%;
}
.file-panel-editable-thumb {
 width: 6.5em;
 height: 6.5em;
 object-fit: cover;
 border-radius: 4px;
 flex-shrink: 0;
}
.file-keep-row {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 4px 0;
 font-size: 12px;
 min-width: 0;
}
.file-keep-row .file-keep-name {
 flex: 1;
 min-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 color: var(--text);
 font-weight: 600;
}
.file-keep-input { display: none; }
.tbmlist-photo-box {
 min-height: 140px;
 padding: 2px 0 6px;
}
.tbmlist-photo-box .file-panel-editable {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 8px;
 margin-bottom: 8px;
}
.tbmlist-photo-box .file-keep-row {
 flex-direction: column;
 align-items: stretch;
 gap: 6px;
 padding: 0;
}
.tbmlist-photo-box .file-panel-editable-thumb {
 width: 100%;
 height: 140px;
 object-fit: cover;
 border-radius: 6px;
 border: 1px solid var(--line);
}
.tbmlist-photo-box .file-keep-name { display: none; }
.tbmlist-photo-box .file-panel-actions {
 justify-content: flex-end;
}
.file-keep-removed { display: none !important; }
.file-panel-actions {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 flex-shrink: 0;
}
.file-panel-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 28px;
 height: 28px;
 padding: 0;
 border-radius: 6px;
 border: 1px solid var(--line);
 background: var(--head-bg);
 color: var(--blue);
 cursor: pointer;
 text-decoration: none;
 font-size: 12px;
}
.file-panel-btn:hover {
 background: rgba(46, 117, 181, 0.12);
}
.file-photo-panel-remove {
 width: 20px;
 height: 20px;
 padding: 0;
 margin: 0;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 background: rgba(15, 23, 42, 0.72);
 color: #fff;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-size: 11px;
 line-height: 1;
}
.file-photo-panel-remove:hover { background: rgba(220, 38, 38, 0.92); }
.file-photo-panel-remove-inline {
 position: static;
 flex: 0 0 20px;
}
.file-photo-panel-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 8px;
 width: 100%;
}
.file-photo-panel-item {
 width: 100%;
 aspect-ratio: 1;
 padding: 0;
 margin: 0;
 border: 1px solid var(--line);
 border-radius: 6px;
 background: var(--head-bg);
 cursor: pointer;
 overflow: hidden;
 display: block;
 line-height: 0;
}
.file-photo-panel-item:hover {
 background: rgba(46, 117, 181, 0.08);
}
.file-photo-panel-img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.file-photo-panel-tile { position: relative; min-width: 0; }
.file-photo-panel-grid-editable { margin-bottom: 4px; }
.file-photo-panel-tile .file-photo-panel-remove {
 position: absolute;
 top: 3px;
 right: 3px;
 z-index: 2;
}
.file-grid-cell {
 display: inline-flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 4px;
 max-width: 100%;
 min-width: 0;
 vertical-align: middle;
 line-height: 0;
}
.data-grid td .file-grid-cell-compact {
 flex-wrap: nowrap;
 height: 28px;
 max-height: 28px;
 overflow: hidden;
 gap: 3px;
}
.file-grid-empty {
 color: var(--muted);
 font-size: 12px;
 line-height: normal;
}
.file-grid-thumb-btn {
 flex: 0 0 var(--file-grid-tile, 36px);
 width: var(--file-grid-tile, 36px);
 height: var(--file-grid-tile, 36px);
 padding: 0;
 box-sizing: border-box;
 border: 1px solid var(--line);
 border-radius: 4px;
 background: var(--head-bg);
 cursor: pointer;
 line-height: 0;
 overflow: hidden;
 display: inline-flex;
 align-items: center;
 justify-content: center;
}
.file-grid-thumb {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.tag-badge {
 display: inline-block;
 padding: 2px 8px;
 border-radius: 999px;
 font-size: 11px;
 font-weight: 700;
 line-height: 1.4;
 background: var(--sky);
 color: var(--text);
}
.tag-badge.tag-info {
 background: #e0f2fe;
 color: #0369a1;
}
.cell-ellipsis {
 max-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.side-panel {
 position: absolute;
 top: 0;
 right: 0;
 width: min(46%, 520px);
 height: 100%;
 background: var(--panel);
 color: var(--text);
 border-left: 1px solid var(--line);
 box-shadow: -8px 0 24px rgba(15, 42, 74, 0.12);
 transform: translateX(105%);
 transition: transform 0.2s ease;
 z-index: 40;
 display: flex;
 flex-direction: column;
 overflow: hidden;
}
.side-panel.open { transform: translateX(0); }
.side-panel:has(.panel-width-26) {
 width: calc(28px + 26em);
 max-width: 100%;
}
.side-panel:has(.panel-width-40),
.side-panel:has(.panel-width-24) {
 width: calc(28px + 26em);
 max-width: 100%;
}
.side-panel-form-root {
 display: flex;
 flex-direction: column;
 height: 100%;
 margin: 0;
}
.side-panel-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 padding: 10px 12px;
 border-bottom: 1px solid var(--line);
 background: var(--chrome);
 flex-shrink: 0;
}
.side-panel-title { font-weight: 800; color: var(--text); }
.side-panel-actions {
 display: flex;
 gap: 6px;
 flex-wrap: wrap;
 justify-content: flex-end;
}
.side-panel-body {
 flex: 1;
 overflow: auto;
 padding: 14px;
}
.side-panel-form .form-row {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 gap: 12px;
 margin-bottom: 12px;
}
.form-cell {
 min-width: 0;
 overflow: hidden;
}
.side-panel-form .form-row-workstatus-3 {
 grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);
}
.form-cell-full { grid-column: 1 / -1; }
.form-cell label {
 display: block;
 font-size: 12px;
 font-weight: 700;
 color: var(--text);
 margin-bottom: 4px;
}
.form-req { color: #dc2626; margin-left: 2px; }
.form-cell input,
.form-cell select,
.form-cell textarea {
 width: 100%;
 border: 1px solid var(--line);
 border-radius: 6px;
 padding: 6px 10px;
 font: inherit;
 background: var(--input-bg);
 color: var(--text);
 color-scheme: inherit;
}
.form-cell input.field-locked,
.form-cell select.field-locked,
.form-cell textarea.field-locked {
 pointer-events: none;
 background: var(--chrome);
 color: var(--muted);
 cursor: default;
}

.panel-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.field-locked):focus,
.form-cell input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.field-locked):focus,
.form-cell select:not(.field-locked):focus,
.form-cell textarea:not(.field-locked):focus,
.search-box input:focus,
.auth-card input:not([type="checkbox"]):focus,
.auth-card textarea:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(.field-locked):focus,
select:not(.field-locked):focus,
textarea:not(.field-locked):focus {
 outline: none;
 border-color: var(--focus-border);
 background: var(--focus-fill);
 box-shadow: 0 0 0 2px var(--focus-glow);
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
input[type="file"]:focus-visible {
 outline: 2px solid var(--focus-border);
 outline-offset: 2px;
}

/* ===== work module tabs (경영지원 등) ===== */
.work-module {
 flex: 1;
 min-height: 0;
 display: flex;
 flex-direction: column;
 position: relative;
}

.tab-container {
 display: inline-grid;
 grid-auto-flow: column;
 grid-auto-columns: 1fr;
 align-items: stretch;
 gap: 4px;
 height: 100%;
 min-height: 0;
 max-height: none;
 box-sizing: border-box;
 flex: 0 1 auto;
 width: max-content;
 max-width: 100%;
 min-width: 0;
 padding: 6px 0;
 border-bottom: none;
 background: transparent;
 overflow-x: auto;
 overflow-y: hidden;
 scrollbar-width: none;
 -ms-overflow-style: none;
}
.tab-container::-webkit-scrollbar {
 display: none;
 width: 0;
 height: 0;
}

.tab-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 padding: 0 14px;
 height: 100%;
 text-decoration: none;
 color: var(--text-secondary);
 font-size: 13px;
 font-weight: 700;
 border-bottom: 2px solid transparent;
 white-space: nowrap;
 box-sizing: border-box;
 border-radius: 8px;
}
.tab-btn:hover {
 color: var(--text-primary);
 background: color-mix(in srgb, var(--panel) 55%, transparent);
}
.tab-btn.active {
 color: var(--text-primary);
 background: var(--panel);
 border-bottom-color: var(--orange);
}
html[data-theme="dark"] .tab-btn {
 color: #cbd5e1;
}
html[data-theme="dark"] .tab-btn:hover,
html[data-theme="dark"] .tab-btn.active {
 color: #f8fafc;
}
@media (prefers-color-scheme: dark) {
 html[data-theme="system"] .tab-btn {
  color: #cbd5e1;
 }
 html[data-theme="system"] .tab-btn:hover,
 html[data-theme="system"] .tab-btn.active {
  color: #f8fafc;
 }
}

.work-module .admin-accounts {
 flex: 1;
 min-height: 0;
}

.form-helper {
 font-size: 8px;
 font-weight: 500;
 color: var(--muted);
 margin-left: 4px;
}
.form-hint {
 margin-top: 4px;
 font-size: 12px;
 color: var(--muted);
}
.form-file-list {
 margin: 4px 0 0;
 padding-left: 18px;
 font-size: 12px;
}

#file-preview-modal-root:empty { display: none; }
#file-preview-modal-root:not(:empty) {
 position: fixed;
 inset: 0;
 z-index: 7000;
}
.file-preview-dialog.report-view-dialog {
 width: min(96vw, 1100px);
 height: min(92vh, 940px);
 max-height: min(92vh, 940px);
}
.file-preview-dialog.report-view-dialog .file-preview-body {
 flex: 1;
 min-height: 0;
 padding: 0;
 background: #525659;
}
.file-preview-dialog.report-view-dialog .file-preview-body iframe {
 display: block;
 width: 100%;
 height: 100%;
 border: 0;
 background: #fff;
}
.file-preview-actions .file-preview-print {
 background: #0369a1;
 border-color: #0284c7;
 color: #fff;
}
.file-preview-overlay {
 position: fixed;
 inset: 0;
 z-index: 7000;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(0, 0, 0, 0.55);
 padding: 12px;
 backdrop-filter: blur(4px);
}
.file-preview-dialog {
 width: min(96vw, 920px);
 max-height: min(92vh, 900px);
 background: var(--panel);
 border: 1px solid var(--line);
 border-radius: 12px;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}
.file-preview-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 padding: 10px 14px;
 border-bottom: 1px solid var(--line);
 background: var(--head-bg);
 flex-shrink: 0;
}
.file-preview-title {
 flex: 1;
 min-width: 0;
 font-size: 13px;
 font-weight: 700;
 color: var(--text);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.file-preview-actions {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 flex-shrink: 0;
}
.file-preview-actions .file-preview-action,
.file-preview-actions .file-action-download {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 height: 34px;
 min-width: 34px;
 padding: 0 10px;
 border-radius: 8px;
 border: 1px solid var(--line);
 background: var(--panel);
 color: var(--text);
 font-size: 12px;
 font-weight: 700;
 text-decoration: none;
 cursor: pointer;
 white-space: nowrap;
}
.file-preview-actions .file-preview-close {
 width: 40px;
 min-width: 40px;
 height: 40px;
 padding: 0;
 font-size: 20px;
 color: #ef4444;
 border-color: #fecaca;
}
.file-preview-body {
 flex: 1;
 min-height: 0;
 overflow: hidden;
 display: flex;
 align-items: center;
 justify-content: center;
 background: var(--sidebar-bg);
 padding: 8px;
}
.file-preview-body img {
 max-width: 100%;
 max-height: min(78vh, 820px);
 object-fit: contain;
 display: block;
}
.file-preview-body iframe {
 width: 100%;
 height: min(78vh, 820px);
 border: none;
 background: var(--panel);
}

.auth-overlay {
 position: fixed;
 inset: 0;
 z-index: 5000;
 background: rgba(15, 42, 74, 0.45);
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 24px 12px;
}
.auth-card {
 width: min(420px, 100%);
 background: var(--panel);
 border: 1px solid var(--line);
 border-radius: 12px;
 padding: 22px 24px 24px;
 box-shadow: var(--shadow);
}
.auth-card h2, .auth-card-head h2 {
 margin: 0;
 font-size: 1.15rem;
 color: var(--text);
 text-align: center;
}
.auth-card-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 margin-bottom: 12px;
}
.auth-sub, .auth-note {
 color: var(--muted);
 font-size: 13px;
 line-height: 1.45;
}
.auth-msg {
 margin: 8px 0 12px;
 padding: 10px 12px;
 border-radius: 8px;
 background: #e0f2fe;
 color: #0369a1;
 font-size: 13px;
 font-weight: 600;
}
.auth-msg-danger {
 background: #fee2e2;
 color: #b91c1c;
}
.auth-card label {
 display: block;
 font-size: 12px;
 font-weight: 700;
 color: var(--text);
 margin: 10px 0 4px;
}
.auth-card input, .auth-card textarea {
 width: 100%;
 box-sizing: border-box;
 min-height: 36px;
 padding: 8px 10px;
 border: 1px solid var(--line);
 border-radius: 6px;
 font: inherit;
}
.auth-submit, .auth-primary {
 margin-top: 14px;
 width: 100%;
 height: 40px;
 border: none;
 border-radius: 8px;
 background: var(--btn-green, #059669);
 color: #fff;
 font-weight: 700;
 cursor: pointer;
}
.auth-card-head .auth-primary, .auth-card-head .auth-ghost {
 width: auto;
 margin: 0;
 height: 32px;
 padding: 0 12px;
}
.auth-ghost {
 appearance: none;
 background: transparent;
 border: 1px solid var(--line);
 border-radius: 8px;
 height: 36px;
 padding: 0 12px;
 font-weight: 700;
 cursor: pointer;
 color: var(--text);
}
.auth-links { margin-top: 12px; }
.auth-agree { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; }
.auth-agree input { width: auto; min-height: 0; margin-top: 3px; }
#register-modal-root:empty { display: none; }
#register-modal-root:not(:empty) { position: relative; z-index: 5100; }
#notice-modal-root:empty { display: none; }
#notice-modal-root:not(:empty) {
 position: fixed;
 inset: 0;
 z-index: 7200;
}
.notice-modal-meta {
 padding: 8px 14px 0;
 font-size: 12px;
 color: var(--muted);
 flex-shrink: 0;
}
.notice-modal-body {
 padding: 12px 14px 18px;
 overflow: auto;
 color: var(--text);
 line-height: 1.55;
 white-space: normal;
}

.weather-panel { padding: 8px 4px 16px; color: var(--text); }
.weather-meta {
 display: flex;
 gap: 12px;
 flex-wrap: wrap;
 font-weight: 700;
 font-size: 14px;
}
.weather-geo { margin: 4px 0 12px; font-size: 12px; color: var(--muted); }
.weather-now {
 display: flex;
 align-items: center;
 gap: 16px;
 background: var(--panel);
 border: 1px solid var(--line);
 border-radius: 10px;
 padding: 16px 20px;
 margin-bottom: 12px;
}
.weather-now-icon { font-size: 42px; color: #0ea5e9; }
.weather-now-temp { font-size: 42px; font-weight: 800; line-height: 1; }
.weather-now-temp span { font-size: 18px; font-weight: 600; margin-left: 2px; }
.weather-now-sky { font-size: 18px; font-weight: 700; }
.weather-now-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.weather-hours, .weather-days {
 display: flex;
 gap: 8px;
 overflow-x: auto;
 padding-bottom: 6px;
 margin-bottom: 10px;
}
.weather-hour, .weather-day {
 flex: 0 0 88px;
 text-align: center;
 background: var(--panel);
 border: 1px solid var(--line);
 border-radius: 8px;
 padding: 8px 6px;
}
.weather-hour i, .weather-day i { color: #0ea5e9; margin: 6px 0; }
.weather-hour-t, .weather-day-d { font-size: 12px; font-weight: 700; }
.weather-hour-temp, .weather-day-t { font-weight: 800; }
.weather-hour-p, .weather-day-p, .weather-day-sky { font-size: 11px; color: var(--muted); }

 :root { --sidebar-width: 190px; }
}

@media (max-width: 768px) {
 .mobile-toggle-btn { display: inline-flex; }
 .site-sidebar {
 position: fixed;
 left: 0;
 top: var(--header-h);
 bottom: 0;
 transform: translateX(-105%);
 transition: transform 0.2s ease;
 box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
 }
 .site-sidebar.mobile-open { transform: translateX(0); }
}

#app-dialog-root:empty { display: none; }
.app-dialog-overlay {
 position: fixed;
 inset: 0;
 z-index: 8000;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(15, 42, 74, 0.45);
 padding: 20px;
 font-family: "Noto Sans KR", sans-serif;
}
.app-dialog {
 width: min(92vw, 300px);
 background: var(--panel);
 color: var(--text);
 border: 1px solid var(--line);
 border-radius: 12px;
 padding: 22px 20px 16px;
 box-shadow: var(--shadow);
 font-family: "Noto Sans KR", sans-serif;
}
.app-dialog-body {
 margin: 0 0 18px;
 padding: 0;
 font-size: 15px;
 font-weight: 500;
 line-height: 1.65;
 text-align: center;
 word-break: keep-all;
 overflow-wrap: anywhere;
}
.app-dialog-actions {
 display: grid;
 grid-auto-flow: column;
 grid-auto-columns: 1fr;
 gap: 8px;
}
.app-dialog-actions .btn-toolbar {
 width: 100%;
 height: 36px;
 justify-content: center;
 font-family: "Noto Sans KR", sans-serif;
}

/* ===== login (app.gongbok.com /home) ===== */
.app-footer {
 height: 28px;
 padding: 0 16px;
 display: flex;
 align-items: center;
 justify-content: flex-end;
 background: var(--footer-bg);
 color: var(--text-secondary);
 font-size: 11px;
 border-top: 1px solid var(--card-border);
 flex-shrink: 0;
}
.home-blank-workspace { flex: 1; }
.login-modal-overlay {
 position: fixed;
 inset: 0;
 background: rgba(0,0,0,0.55);
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 2000;
}
body:has(.login-modal-overlay) .side-panel {
 position: fixed;
 top: var(--header-h);
 right: 0;
 bottom: 0;
 height: auto;
 z-index: 40;
 pointer-events: none;
}
body:has(.login-modal-overlay) .side-panel.open {
 z-index: 2500;
 pointer-events: auto;
}
.login-modal-card {
 width: 100%;
 max-width: 380px;
 background: var(--panel-bg, #1f232d);
 border: 1px solid var(--card-border, #2e3444);
 border-radius: 12px;
 padding: 24px;
 box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}
.login-modal-card input[readonly] {
 opacity: 0.92;
 cursor: default;
 background: color-mix(in srgb, var(--panel-bg,#1f232d) 88%, #0ea5e9);
}
.panel-field { display: flex; flex-direction: column; gap: 4px; font-family: inherit; }
.panel-field label {
 font-size: 12px;
 font-weight: normal;
 color: var(--text-secondary);
 font-family: var(--font-family-field-label, HANDotumB, sans-serif);
}
.panel-field input:not([type="checkbox"]):not([type="radio"]) {
 width: 100%;
 box-sizing: border-box;
 padding: 8px 10px;
 border-radius: 8px;
 border: 1px solid var(--card-border);
 background: var(--input-bg);
 color: var(--text-primary);
 font: inherit;
}
.ios-sheet-overlay {
 position: fixed; inset: 0; z-index: 4500;
 display: flex; align-items: flex-end; justify-content: center;
 background: color-mix(in srgb, #000 48%, transparent);
 backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px);
 padding: 0;
}
.ios-sheet {
 width: 100%; max-width: 430px; max-height: min(92vh, 780px);
 background: var(--body-bg); color: var(--text-primary);
 border: 1px solid var(--card-border);
 border-radius: 16px 16px 0 0;
 box-shadow: 0 -8px 40px rgba(0,0,0,0.35);
 overflow: hidden; display: flex; flex-direction: column;
}
@media (min-width: 520px) {
 .ios-sheet-overlay { align-items: center; padding: 24px; }
 .ios-sheet { border-radius: 18px; max-height: min(88vh, 720px); }
}
.ios-sheet-nav {
 display: grid; grid-template-columns: 72px 1fr 72px; align-items: center;
 padding: 12px 14px 10px; background: var(--table-head-bg);
 border-bottom: 1px solid var(--card-border);
}
.ios-sheet-title { text-align: center; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.ios-nav-btn {
 border: none; background: transparent; color: var(--accent-blue); font-size: 15px;
 font-weight: 500; cursor: pointer; padding: 6px 0; font-family: inherit;
}
.ios-nav-btn.ios-nav-primary { font-weight: 700; text-align: right; color: var(--btn-green); }
.ios-nav-btn:first-child { text-align: left; color: var(--text-secondary); }
.ios-sheet-scroll { overflow-y: auto; padding: 8px 16px 28px; background: var(--body-bg); }
.ios-section-hint {
 margin: 18px 4px 7px; font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
.ios-group {
 background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden;
}
.ios-row {
 display: flex; align-items: center; gap: 10px;
 min-height: 44px; padding: 8px 14px;
 border-bottom: 1px solid var(--card-border); background: var(--card-bg);
}
.ios-row:last-child { border-bottom: none; }
.ios-row label { flex: 0 0 88px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.ios-row input[type="email"],
.ios-row input[type="password"],
.ios-row input[type="text"],
.ios-row input[type="tel"],
.ios-row input[type="date"] {
 flex: 1; min-width: 0; border: none; outline: none;
 background: transparent !important;
 font-size: 15px; color: var(--text-primary); font-family: inherit; padding: 6px 0;
}
.ios-row-note {
 padding: 0 14px 10px 112px; margin-top: -4px;
 font-size: 11px; color: var(--text-secondary); line-height: 1.4;
 background: var(--card-bg); border-bottom: 1px solid var(--card-border);
}
.ios-req { color: var(--btn-red); font-weight: 700; }
.ios-agree {
 display: flex; align-items: flex-start; gap: 10px;
 margin-top: 16px; padding: 12px 14px;
 background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px;
}
.ios-agree input[type="checkbox"] {
 width: 18px; height: 18px; min-width: 18px; margin: 1px 0 0;
}
.ios-agree label {
 font-size: 13px; line-height: 1.45; color: var(--text-primary); cursor: pointer; font-weight: 500;
}
.ios-footer-note { margin: 14px 4px 0; font-size: 11px; line-height: 1.45; color: var(--text-secondary); }

.sign-field {
 display: flex;
 flex-direction: column;
 gap: 8px;
}
.sign-thumb-btn {
 display: block;
 width: 25%;
 max-width: 25%;
 padding: 0;
 border: none;
 background: none;
 cursor: pointer;
}
.sign-thumb {
 width: 100%;
 height: auto;
 display: block;
 object-fit: contain;
 border: 1px solid var(--line);
 border-radius: 6px;
}
.sign-actions {
 display: inline-grid;
 grid-auto-flow: column;
 grid-auto-columns: 1fr;
 gap: 6px;
 width: max-content;
}
.sign-actions .btn-ghost {
 justify-content: center;
}
.email-settings {
 padding: 16px 18px;
 overflow: auto;
}
.email-settings-title {
 margin: 0 0 8px;
 font-size: 16px;
 font-weight: 700;
}
.email-settings .form-helper {
 margin: 0 0 14px;
}
.email-check {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 13px;
 min-height: 32px;
}
.email-check input {
 width: auto;
}
.email-settings-actions {
 margin-top: 8px;
}