@charset "EUC-KR";
html { overflow-y:scroll; }
html, body { margin:0; padding:0; min-height:100vh; background:#e5e8ec; font-family:NanumGothic,'Malgun Gothic','Apple SD Gothic Neo', sans-serif; }
a { text-decoration:none; color:inherit; }
form { margin:0; }
.defualt { font-family: "����", "����";  font-size: 12px; color: #404040;  text-decoration: none}
/*
.a { font-family: "����", "����";  font-size: 12px; color: #ff0000;  text-decoration: none}
.a  :link  { color: #ff0000;  font-family: "����",����;    FONT-SIZE: 12px;    text-decoration: none }
.a  :visited { color:  #ff0000; font-family: "����",����; FONT-SIZE: 12px;   text-decoration: none }
.a  :hover { color:  #ff0000;  font-family: "����",����;    FONT-SIZE: 12px; text-decoration: none  }
.a  :active { color:  #ff0000; font-family: "����",����;    FONT-SIZE: 12px; text-decoration: none}
*/

/* ---- 2026 renewal : dashboard shell (div/flex, replaces the old copy-pasted table frame) ---- */
/* self-contained on purpose: this page must not depend on any shared CSS file being updated in production */
:root {
	--snct-wine:#1a56db;
	--snct-wine-deep:#1040a8;
	--snct-wine-light:#bfdbfe;
	--snct-wine-tint:#ebf2ff;
	--snct-line:#e2e8f0;
}
.dash-shell { display:flex; flex-direction:column; min-height:100vh; max-width:1452px; margin:0 auto; background:#f2f3f5; }
.dash-shell-topbar { height:4px; background:linear-gradient(90deg, var(--snct-wine) 0%, var(--snct-wine-light) 60%, var(--snct-wine-tint) 100%); }
.dash-shell { line-height:1.25; }
.dash-topbar, .dash-main, .dash-main *, .dash-footerrow, .dash-footerrow * { line-height:1.25; }
.dash-topbar { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; position:relative; background:#f2f3f5; }
.dash-topbar img { display:block; }
.dash-topbar > a:first-child { width:220px; flex-shrink:0; display:flex; justify-content:center; box-sizing:border-box; margin-left:-24px; padding-right:14px; }
.dash-body { display:flex; flex:1; align-items:stretch; }
.dash-leftmenu { width:220px; flex-shrink:0; background:#111827; display:flex; flex-direction:column; }
.sidenav { padding:16px 10px 16px; display:flex; flex-direction:column; gap:2px; }
.sidenav-group { display:flex; flex-direction:column; }
.sidenav-cat { position:relative; display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none; color:#ffffff; font-size:13px; font-weight:600; padding:10px 12px; border-radius:8px; cursor:pointer; font-family:inherit; }
.sidenav-cat svg { width:16px; height:16px; flex-shrink:0; stroke:#7b869c; }
.sidenav-cat:hover { background:rgba(255,255,255,0.12); }
.sidenav-cat:hover svg { stroke:#ffffff; }
.sidenav-cat.open { color:#ffffff; }
.sidenav-cat.open svg { stroke:var(--snct-wine-light); }
.sidenav-cat.open::before { content:''; position:absolute; left:-10px; top:6px; bottom:6px; width:3px; border-radius:0 3px 3px 0; background:var(--snct-wine); }
.sidenav-cat .chevron { margin-left:auto; width:12px; height:12px; flex-shrink:0; stroke:#5c6a80; transition:transform .15s ease; }
.sidenav-cat.open .chevron { transform:rotate(90deg); stroke:var(--snct-wine-light); }
.sidenav-cat.sidenav-special { margin-top:8px; border-top:1px solid rgba(255,255,255,0.08); border-radius:0; padding-top:16px; }
.sidenav-special + .sidenav-special { margin-top:10px; border-top:none; padding-top:0; }
.sidenav-sub { padding:2px 4px 8px 16px; }
.sidenav-sub a { display:block; padding:5px 10px; font-size:12px; color:#ffffff; text-decoration:none; border-radius:6px; }
.sidenav-sub a:hover { background:rgba(255,255,255,0.04); color:var(--snct-wine-light); padding-left:14px; }
.sidenav-sub a.current { color:var(--snct-wine-light); font-weight:700; background:rgba(255,255,255,0.04); }

.sidenav-login { position:sticky; bottom:0; z-index:5; margin:auto 12px 16px; padding:14px; background:#111827; border:1px solid rgba(255,255,255,0.08); border-top:1px solid rgba(255,255,255,0.12); border-radius:10px; box-shadow:0 -8px 16px rgba(0,0,0,0.25); }
.sidenav-login form { display:flex; flex-direction:column; gap:8px; }
.sidenav-login input { width:100%; background:#1b2333; border:1px solid rgba(255,255,255,0.12); color:#e2e8f0; border-radius:6px; padding:8px 10px; font-size:12px; box-sizing:border-box; }
.sidenav-login input::placeholder { color:#5c6a80; }
.sidenav-login .btn { display:block; text-align:center; background:var(--snct-wine); color:#ffffff; padding:8px; border-radius:6px; font-size:12px; font-weight:600; text-decoration:none; margin-top:2px; }
.sidenav-login .btn:hover { background:var(--snct-wine-deep); }
.sidenav-login .btn.ghost { background:transparent; border:1px solid rgba(255,255,255,0.15); color:#a7b0c0; margin-top:8px; }
.sidenav-login .btn.ghost:hover { color:#ffffff; border-color:rgba(255,255,255,0.3); }
.sidenav-userbox { font-size:12px; color:#a7b0c0; line-height:1.6; margin-bottom:10px; }
.sidenav-userbox b { color:#ffffff; }
.dash-main { flex:1; min-width:0; padding:0 16px 20px 16px; }
.content-wrap { max-width:1200px; width:100%; margin:0; }
.page-title { position:absolute; left:236px; right:16px; top:0; bottom:0; display:flex; align-items:center; gap:14px; }
.page-title-text { flex:1; min-width:0; margin-top:6px; }
.page-title h1 { margin:0; font-size:22px; font-weight:700; letter-spacing:-.03em; color:#2b2f36; line-height:1.6; text-shadow:0 1px 0 rgba(255,255,255,0.85), 0 2px 4px rgba(27,27,27,0.28); font-family:'Bahnschrift','Segoe UI Semibold',-apple-system,'Malgun Gothic',sans-serif; }
.page-title h1 .accent { font-weight:800; color:var(--snct-wine); text-shadow:0 1px 0 rgba(255,255,255,0.85), 0 2px 4px rgba(16,64,168,0.4); }
.page-title h1 .page-title-breadcrumb { display:inline-flex; align-items:center; gap:7px; vertical-align:middle; font-size:13.5px; letter-spacing:normal; text-shadow:none; }
.page-title h1 .page-title-menu-sep { margin:0 10px; color:var(--snct-line); font-weight:400; text-shadow:none; }
.page-title-breadcrumb .page-title-menu-cat { color:#8b95a5; font-weight:500; }
.page-title-breadcrumb .page-title-menu-arrow { color:#c3cad6; font-weight:400; }
.page-title-breadcrumb .page-title-menu-current { color:var(--snct-wine); font-weight:700; text-shadow:0 1px 0 rgba(255,255,255,0.85), 0 2px 4px rgba(27,27,27,0.28); }
.pt-stats { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.pt-stat { display:flex; align-items:center; gap:7px; background:var(--snct-wine-tint); border-radius:999px; padding:6px 14px 6px 8px; }
.pt-stat-icon { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pt-stat-icon svg { width:12px; height:12px; stroke:#ffffff; fill:none; }
.pt-stat-icon.in { background:#2f6fed; }
.pt-stat-icon.out { background:#e0533d; }
.pt-stat-label { font-size:11px; color:#5c6a80; font-weight:600; white-space:nowrap; }
.pt-stat-value { font-size:13.5px; color:#1b1b1b; font-weight:800; font-variant-numeric:tabular-nums; }
.pt-stat-value i { font-size:11px; font-weight:600; font-style:normal; color:#767676; margin-left:1px; }
.pt-stat-divider { width:1px; height:20px; background:var(--snct-line); }
.dash-grid { display:flex; gap:18px; flex-wrap:wrap; align-items:stretch; }
.dash-col { flex:1 1 280px; display:flex; flex-direction:column; gap:16px; min-width:260px; }
.card-flex-fill { flex:1 1 0; display:flex; flex-direction:column; min-height:0; }
.card-flex-fill .scroll-box { flex:1; min-height:0; }
.dash-grid > .dash-col:nth-child(1) { flex:1 1 300px; min-width:280px; }
.dash-grid > .dash-col:nth-child(2) { flex:1 1 300px; min-width:280px; }
.dash-footerrow { border-top:1px solid var(--snct-line); background:#ffffff; }

.card { background:#ffffff; border:1px solid var(--snct-line); border-radius:10px; padding:14px 16px 16px; box-shadow:0 1px 2px rgba(27,27,27,0.03); transition:transform .18s ease, box-shadow .18s ease; }
.card:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(27,27,27,0.09); }
.card:has(.popover-panel) { transition:none; }
.card:has(.popover-panel):hover { transform:none; box-shadow:0 1px 2px rgba(27,27,27,0.03); }
.card:has(.scroll-box) { transition:none; }
.card:has(.scroll-box):hover { transform:none; box-shadow:0 1px 2px rgba(27,27,27,0.03); }
.search-card { transition:none; }
.search-card:hover { transform:none; box-shadow:0 1px 2px rgba(27,27,27,0.03); }
.card-header { display:flex; align-items:center; justify-content:space-between; padding-bottom:6px; margin-bottom:0; border-bottom:2px solid var(--snct-wine); }
.card-header:has(+ .scroll-box) { border-bottom:none; }
.card-header b { font-size:13.5px; display:flex; align-items:center; gap:7px; }
.card-icon { width:15px; height:15px; flex-shrink:0; stroke:var(--snct-wine); }
.badge { font-size:11px; font-weight:700; color:var(--snct-wine-deep); background:var(--snct-wine-tint); padding:1px 7px; border-radius:999px; }
.card-header a.more { font-size:11.5px; font-weight:600; color:var(--snct-wine); }
.card-header a.more:hover { color:var(--snct-wine-deep); }

table.dash-table { width:100%; border-collapse:separate; border-spacing:0; font-size:12px; }
.scroll-box { overflow-y:auto; overflow-x:auto; }
.scroll-box table.dash-table th { position:sticky; top:0; z-index:1; }
.scroll-box table.dash-table tr.thead-row2 th { top:30px; z-index:2; }
table.dash-table tr.thead-row1 th { height:30px; box-sizing:border-box; }
table.dash-table th { background:var(--snct-wine-tint); color:var(--snct-wine-deep); padding:6px 6px; border-bottom:2px solid var(--snct-wine); text-align:center; font-weight:600; white-space:nowrap; }
table.dash-table td { padding:6px 6px; border-bottom:1px solid var(--snct-line); text-align:center; font-variant-numeric:tabular-nums; }
.notice-list { display:flex; flex-direction:column; font-size:12px; }
.notice-row { display:flex; align-items:center; gap:10px; padding:7px 6px; border-bottom:1px solid var(--snct-line); }
.notice-row-head { background:var(--snct-wine-tint); border-bottom:2px solid var(--snct-wine); font-weight:600; color:var(--snct-wine-deep); text-align:center; }
.notice-row:hover:not(.notice-row-head) { background:var(--snct-wine-tint); }
.notice-title-head { flex:1; min-width:0; }
.notice-date-head { flex-shrink:0; width:90px; text-align:center; }
.notice-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#404040; text-align:left; }
.notice-title:hover { color:var(--snct-wine); }
.notice-date { flex-shrink:0; width:90px; text-align:center; color:#666666; }
table.dash-table tbody tr:hover td { background:var(--snct-wine-tint); }
table.dash-table td.dash-empty { padding:22px 0; color:#8c8c8c; }
table.dash-table td.label { background:var(--snct-wine-tint); color:#5c6a80; font-weight:600; text-align:center; white-space:nowrap; }
table.dash-table td.value { text-align:left; }
table.dash-table.value-centered td.value { text-align:center; }
table.dash-table tr.alt-row td { background:#fafbfc; }
table.dash-table tr.alt-row td.label { background:var(--snct-wine-tint); }

.goosl_conNo { color:#1a56db; font-weight:700; text-decoration:none; }
.goosl_conNo:hover { text-decoration:underline; }
.detail-trigger { display:inline-flex; align-items:center; gap:4px; margin-left:6px; padding:2px 9px; border-radius:999px; background:var(--snct-wine-tint); color:var(--snct-wine-deep); font-size:11px; font-weight:700; text-decoration:none; white-space:nowrap; vertical-align:middle; }
.detail-trigger:hover { background:var(--snct-wine-light); }
.detail-trigger svg { width:11px; height:11px; stroke:currentColor; flex-shrink:0; }
.field-trigger-icon { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; margin-left:6px; padding:0; border-radius:7px; background:var(--snct-wine); color:#ffffff; text-decoration:none; vertical-align:middle; border:none; cursor:pointer; }
.field-trigger-icon:hover { background:var(--snct-wine-deep); }
.field-trigger-icon svg { width:14px; height:14px; stroke:currentColor; flex-shrink:0; }

.popover-panel { position:absolute; z-index:60; background:#ffffff; border:1px solid var(--snct-line); border-radius:10px; box-shadow:0 12px 28px rgba(27,27,27,0.18); width:300px; overflow:hidden; }
.popover-header { background:var(--snct-wine); color:#ffffff; padding:8px 12px; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:space-between; }
.popover-close { background:none; border:none; color:#ffffff; font-size:16px; line-height:1; cursor:pointer; padding:0 2px; }
.popover-body { padding:10px 12px; font-size:12.5px; max-height:280px; overflow:auto; }
.popover-row { display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid var(--snct-line); }
.popover-row:last-child { border-bottom:none; }
.popover-label { color:#5c6a80; font-weight:600; flex-shrink:0; }
.popover-value { color:#1b1b1b; font-weight:700; text-align:right; }
.popover-body table.dash-table { font-size:11.5px; }
.popover-body table.dash-table th { padding:5px 6px; }
.popover-body table.dash-table td { padding:5px 6px; }
.fav-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin-top:4px; }
.fav-tile { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:14px 6px; border-radius:12px; background:#fafafa; border:1px solid var(--snct-line); text-align:center; text-decoration:none; transition:background-color .15s ease, border-color .15s ease; }
.fav-tile:hover { background:var(--snct-wine-tint); border-color:var(--snct-wine-light); }
.fav-icon { width:20px; height:20px; stroke:var(--snct-wine); }
.fav-label { font-size:11.5px; color:#404040; line-height:1.3; }
.fav-lock { position:absolute; top:6px; right:6px; width:12px; height:12px; color:#b5bcc7; }
.card-full { margin-top:18px; }
.fav-grid-wide { grid-template-columns:repeat(5, 1fr); }
@media (max-width:900px) { .fav-grid-wide { grid-template-columns:repeat(3, 1fr); } }
.dash-status { margin-top:4px; padding:4px 8px; border-radius:6px; font-size:11.5px; font-weight:600; text-align:center; display:inline-block; }
.dash-status-good { background:#eaf7ee; color:#2e7d4f; }
.dash-status-normal { background:#fff6e5; color:#b8790a; }
.dash-status-busy { background:#fdeeee; color:#c0392b; }
.kpi-unit { font-size:12px; font-weight:600; color:#8c96a6; margin-left:3px; }

.card-featured { border-color:var(--snct-wine-light); box-shadow:0 4px 16px rgba(27,27,27,0.06); }

.vessel-list { display:flex; flex-direction:column; gap:10px; min-height:210px; }
.vessel-list-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:12px; min-height:0; }
.vessel-list-grid .vessel-card { min-height:260px; gap:14px; padding:16px; }
.vessel-list-grid .vessel-icon { width:36px; height:36px; }
.vessel-list-grid .vessel-name { font-size:14.5px; }
.vessel-list-grid .vessel-badge { font-size:11.5px; padding:4px 10px; }
.vessel-list-grid .vessel-card.empty-slot { align-items:stretch; }
.vessel-card { display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:12px; background:#fafafa; border:1px solid var(--snct-line); }
.vessel-card.working { background:var(--snct-wine-tint); border-color:var(--snct-wine-light); }
.vessel-card.empty-slot { background:#fbfbfb; border-style:dashed; opacity:.6; }
.vessel-badge.empty-badge { visibility:hidden; }
.vessel-card.empty-slot .vessel-icon { background:#f0f0f0; }
.vessel-card.empty-slot .vessel-icon svg { stroke:#b5bcc7; }
.vessel-name.empty { color:#a8b0bd; font-weight:600; }
.vessel-icon { width:34px; height:34px; border-radius:50%; background:#eef2fb; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.vessel-icon svg { width:18px; height:18px; stroke:#5b7fd6; }
.vessel-card.working .vessel-icon { background:var(--snct-wine); }
.vessel-card.working .vessel-icon svg { stroke:#ffffff; }
.vessel-main { flex:1; min-width:0; }
.vessel-header { display:flex; align-items:center; gap:14px; }
.vessel-header .vessel-top { flex:1; min-width:0; }
.vessel-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.vessel-name { font-size:13.5px; font-weight:700; color:#1b1b1b; flex-shrink:0; }
.vessel-badge { font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; flex-shrink:0; }
.vessel-badge.working { background:var(--snct-wine); color:#ffffff; }
.vessel-badge.scheduled { background:#eef0f3; color:#5c6a80; }
.vessel-badge.done { background:#eef0f3; color:#98a2b3; }
.pulse-dot { width:6px; height:6px; border-radius:50%; background:#ffffff; animation:pulseDot 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pulse-dot { animation:none; } }
@keyframes pulseDot { 0%,100% { opacity:1; } 50% { opacity:.35; } }
.vessel-voyage { flex:1; text-align:center; font-size:15.5px; font-weight:700; color:#1b1b1b; margin:0; }
.vessel-times { font-size:12px; color:#5c6a80; margin-top:5px; display:flex; align-items:center; justify-content:flex-start; gap:6px; flex-wrap:wrap; }
.vessel-times .sep { color:#c2c9d3; }
.vessel-times.vessel-times-detail { flex-direction:column; align-items:stretch; justify-content:flex-start; flex-wrap:nowrap; gap:0; box-sizing:border-box; width:96%; margin:8px auto 0; background:rgba(255,255,255,0.55); border-radius:8px; padding:1px 14px; }
.time-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 10px; border-bottom:1px solid var(--snct-line); }
.time-row:last-child { border-bottom:none; }
.time-label { display:flex; align-items:center; gap:6px; width:104px; font-size:11.5px; font-weight:700; color:#8c96a6; flex-shrink:0; }
.time-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.time-dot.dot-blue { background:#5b7fd6; }
.time-dot.dot-wine { background:var(--snct-wine); }
.time-val { font-size:12.5px; font-weight:700; color:#1b1b1b; font-variant-numeric:tabular-nums; }
.vessel-bars { display:flex; flex-direction:column; gap:5px; margin-top:8px; }
.vbar-row { display:flex; align-items:center; gap:8px; }
.vbar-label { width:28px; font-size:11px; color:#8c96a6; flex-shrink:0; }
.vbar-track { flex:1; height:6px; background:#eceff3; border-radius:999px; overflow:hidden; }
.vbar-fill { height:100%; border-radius:999px; transition:width .4s ease; }
.vbar-fill.dis { background:#5b7fd6; }
.vbar-fill.load { background:#e0533d; }
.vbar-val { width:88px; text-align:right; font-size:12px; font-weight:700; color:#1b1b1b; font-variant-numeric:tabular-nums; flex-shrink:0; white-space:nowrap; }
.work-summary { display:flex; align-items:center; gap:16px; width:96%; margin:12px auto 0; }
.work-total { display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; width:132px; padding:8px 3px; background:var(--snct-wine-tint); border-radius:10px; margin:0; }
.work-ring { position:relative; width:124px; height:124px; }
.work-ring-svg { width:124px; height:124px; transform:rotate(-90deg); }
.ring-bg { fill:none; stroke:#ffffff; stroke-width:6; }
.ring-fill { fill:none; stroke:var(--snct-wine); stroke-width:6; stroke-linecap:round; transition:stroke-dashoffset .5s ease; }
.work-ring-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.work-ring-center svg { width:54px; height:32px; stroke:var(--snct-wine); fill:var(--snct-wine); }
.work-ring-pct { font-size:20px; font-weight:800; color:var(--snct-wine-deep); font-variant-numeric:tabular-nums; }
.work-metrics { display:flex; gap:10px; flex:1; min-width:0; }
.work-metric-tile { flex:1; min-width:0; padding:10px 8px 9px; border-radius:10px; background:#dce7fb; overflow:hidden; }
.work-metric-tile.load-tile { background:#fdeeea; }
.work-metric-label { display:block; font-size:11px; font-weight:700; color:#5b7fd6; }
.work-metric-tile.load-tile .work-metric-label { color:#e0533d; }
.work-metric-val { display:block; font-size:16px; font-weight:800; color:#1b1b1b; font-variant-numeric:tabular-nums; margin-top:3px; white-space:nowrap; }
.work-metric-val .metric-sep { font-size:12px; color:#c2c9d3; font-weight:600; margin:0 1px; }
.work-metric-val .metric-total { font-size:12px; color:#8c96a6; font-weight:600; }
.work-metric-tile .vbar-track { margin-top:6px; height:6px; }
.work-empty-slot { font-size:12px; color:#a8b0bd; text-align:center; margin:0; }
.empty-main { display:flex; flex-direction:column; height:100%; }
.work-empty-wrap { flex:1; display:flex; align-items:center; justify-content:center; }
.work-remain { display:flex; justify-content:center; gap:9px; margin-top:11px; flex-wrap:wrap; }
.remain-chip { display:inline-flex; align-items:center; gap:5px; padding:7px 13px; border-radius:999px; background:#f1f3f5; }
.remain-chip .remain-label { font-size:13px; font-weight:600; color:#8c96a6; }
.remain-chip .remain-val { font-size:16.5px; font-weight:800; color:#1b1b1b; font-variant-numeric:tabular-nums; }
.remain-chip.done { background:#eaf7ee; }
.remain-chip.done .remain-val { color:#1a7a3d; }
.remain-chip.left { background:#fff4e6; }
.remain-chip.left .remain-val { color:#d9480f; }
.work-empty { padding:40px 0; text-align:center; color:#8c96a6; font-size:12.5px; background:#fafbfc; border-radius:12px; }

.card-dark { background:#16233b; border-color:#223250; }
.card-header.dark { background:#16233b; margin:-14px -16px 12px -16px; padding:14px 16px 12px 16px; border-radius:10px 10px 0 0; border-bottom:2px solid var(--snct-wine); }
.card-header.dark b { color:#e7ecf5; }
.card-header.dark .card-icon { stroke:#8fb3ff; }
.card-header.dark a.more { color:#8fb3ff; }

.yard-flex { display:flex; gap:14px; margin-top:8px; }
.yard-badge { flex:1; display:flex; align-items:center; gap:10px; background:#f7f8fa; border:1px solid var(--snct-line); border-radius:12px; padding:10px 12px; }
.badge-icon { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.badge-icon svg { width:18px; height:18px; stroke:#ffffff; fill:none; }
.badge-icon.blue { background:#2f6fed; }
.badge-icon.red { background:#e0533d; }
.badge-label { font-size:11px; color:#5c6a80; }
.badge-value { font-size:19px; font-weight:800; color:#1b1b1b; font-variant-numeric:tabular-nums; }
.badge-value .unit { font-size:11px; font-weight:600; color:#8c96a6; margin-left:2px; }

.grad-bar-wrap { position:relative; margin:22px 4px 8px; }
.grad-bar { height:8px; border-radius:999px; background:linear-gradient(90deg, #2e7d4f 0%, #d4a017 50%, #c0392b 100%); }
.grad-pill { position:absolute; top:-26px; transform:translateX(-50%); background:#ffffff; color:#16233b; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,0.25); }
.grad-pill::after { content:''; position:absolute; left:50%; top:100%; transform:translateX(-50%); border:5px solid transparent; border-top-color:#ffffff; }
.turntime-flex { margin-top:14px; padding-top:14px; border-top:1px dashed var(--snct-line); }
table.dash-table tr.no-hover:hover td { background:transparent !important; }

.dash-note { font-size:11.5px; color:#666666; line-height:1.6; margin-top:10px; }

.notice-backdrop { display:none; position:fixed; inset:0; background:rgba(27,27,27,0.45); z-index:1000; align-items:center; justify-content:center; }
.notice-modal { position:relative; width:min(660px, 92vw); max-height:85vh; margin-top:-12px; background:#ffffff; border-radius:14px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,0.25); }
.notice-modal-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:var(--snct-wine); color:#ffffff; }
.notice-modal-header span { font-size:14px; font-weight:700; }
.notice-modal-close { background:none; border:none; color:#ffffff; font-size:20px; line-height:1; cursor:pointer; padding:0 4px; }
.notice-modal-close:hover { opacity:0.7; }
.notice-modal-body { overflow-y:auto; max-height:calc(85vh - 120px); background:#ffffff; }
.notice-modal-body pre { white-space:pre-wrap; word-break:break-word; font-family:inherit; margin:0; }
.notice-item { padding:16px 18px; border-bottom:1px solid var(--snct-line); }
.notice-item:last-child { border-bottom:none; }
.notice-item-header { font-size:18px; font-weight:700; color:var(--snct-wine-deep); margin-bottom:12px; }
.notice-item-body { font-size:13px; line-height:1.6; color:#333333; }
.notice-item-body pre { white-space:pre-wrap; word-break:break-word; font-family:inherit; margin:0; }
.notice-modal-footer { padding:12px 18px; border-top:1px solid var(--snct-line); text-align:right; background:#fafbfc; }

/* ---- list/search page components (added for vslScheduleText renewal) ---- */
.search-card { background:var(--snct-wine-tint); border-color:var(--snct-wine-light); padding:10px 20px; display:flex; align-items:center; min-height:0; overflow:hidden; }
.search-card form { display:flex; align-items:center; width:100%; }
.search-row { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.search-field { display:flex; flex-direction:row; align-items:center; gap:10px; }
.search-field-label { font-size:13px; font-weight:700; color:var(--snct-wine-deep); white-space:nowrap; }
.search-field input[type="text"], .search-field select { height:32px; box-sizing:border-box; border:1px solid var(--snct-line); border-radius:6px; padding:0 9px; font-size:13px; font-family:inherit; outline:none; transition:border-color .15s ease; background:#ffffff; }
.search-field input[type="text"]:focus, .search-field select:focus { border-color:var(--snct-wine); }
.search-field .date-range { display:flex; align-items:center; gap:8px; }
.ui-datepicker-trigger { height:20px; width:20px; vertical-align:middle; padding:0; border:none; background:transparent; cursor:pointer; display:inline-block; }
.search-field .date-sep { color:#8c96a6; }
.search-card-body { display:flex; flex-direction:column; gap:10px; width:100%; }
.radio-inline { display:inline-flex; align-items:center; gap:4px; font-size:13px; color:#3a3f47; margin-right:14px; cursor:pointer; font-weight:normal; }
.radio-inline input { cursor:pointer; }
.alphabet-filter { display:flex; flex-wrap:wrap; gap:4px; }
.alphabet-key { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; background:#ffffff; border:1px solid var(--snct-wine-light); color:var(--snct-wine-deep); font-weight:700; font-size:12px; cursor:pointer; }
.alphabet-key:hover { background:var(--snct-wine-light); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:none; border-radius:8px; font-family:inherit; font-weight:700; font-size:13.5px; cursor:pointer; padding:8px 22px; transition:background-color .15s ease, transform .15s ease; }
.btn-primary { background:var(--snct-wine); color:#ffffff; }
.btn-primary:hover { background:var(--snct-wine-deep); }
.btn-ghost { background:var(--snct-wine-tint); color:var(--snct-wine-deep); }
.btn-ghost:hover { background:var(--snct-wine-light); }
.btn-danger { background:#e0533d; color:#ffffff; }
.btn-danger:hover { background:#c23b28; }
.card-header .header-actions { display:flex; align-items:center; gap:8px; }
.legend-note { font-size:12px; color:#8c96a6; }
.legend-note .dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; vertical-align:middle; }
.legend-note .dot.d { background:#eaf7ee; border:1px solid #4caf82; }
.legend-note .dot.b { background:#fdf6df; border:1px solid #e0c341; }
.legend-note .dot.default { background:#ffffff; border:1px solid #cbd5e1; }
table.dash-table tr.row-d td { background:#eaf7ee; }
table.dash-table tr.row-b td { background:#fdf6df; }
table.dash-table tr:hover td { background:var(--snct-wine-tint); }
.ui-datepicker { font-size:13px; z-index:9999 !important; border-radius:10px; box-shadow:0 8px 32px rgba(0,0,0,.12); border:1px solid var(--snct-line); min-width:260px; }
.ui-datepicker .ui-datepicker-header { background:var(--snct-wine-tint); color:var(--snct-wine-deep); border:none; border-radius:10px 10px 0 0; padding:8px 6px; display:flex; align-items:center; justify-content:center; gap:4px; flex-wrap:nowrap; }
.ui-datepicker .ui-datepicker-title { display:flex; align-items:center; gap:4px; flex:1; justify-content:center; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { color:var(--snct-wine-deep); cursor:pointer; }
.ui-datepicker select.ui-datepicker-year, .ui-datepicker select.ui-datepicker-month { width:auto !important; display:inline-block; margin:0; padding:2px 4px; font-size:13px; border:1px solid var(--snct-wine-light); border-radius:6px; background:#ffffff; color:var(--snct-wine-deep); }
.ui-datepicker th { background:var(--snct-wine-tint); color:var(--snct-wine-deep); border:none; }
.ui-datepicker td a.ui-state-active { background:var(--snct-wine-light) !important; border:1px solid var(--snct-wine) !important; color:var(--snct-wine-deep) !important; font-weight:700; }
.ui-datepicker td a.ui-state-highlight { background:var(--snct-wine-tint) !important; border:1px solid var(--snct-wine-light) !important; color:var(--snct-wine-deep) !important; }

/* 2026 renewal: shared print-a-specific-element support for printTable() in common_new.js */
@media print {
	body.print-target-active * { visibility:hidden; }
	body.print-target-active #printCloneHolder,
	body.print-target-active #printCloneHolder * { visibility:visible; }
	body.print-target-active #printCloneHolder { position:absolute; left:0; top:0; width:100%; }
	body.print-target-active .print-target { margin-bottom:16px; }
	body.print-target-active .print-title { font-size:18px; font-weight:800; text-align:center; margin:0 0 14px; }
	body.print-target-active #printCloneHolder, body.print-target-active #printCloneHolder * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; color-adjust:exact !important; }
}

/* 2026 renewal: temporary layout A/B toggle for staff feedback (centered frame vs old left-aligned) */
html.layout-left .dash-shell { max-width:none; margin:0; }
.dash-shell.dash-shell-wide { max-width:1900px; margin-left:max(0px, calc((100vw - 1452px) / 2)); margin-right:0; }
html.layout-left .dash-shell.dash-shell-wide { max-width:none; margin:0; }
.layout-toggle-btn { position:fixed; right:16px; bottom:16px; z-index:999; background:var(--snct-wine); color:#ffffff; border:none; border-radius:999px; padding:10px 18px; font-size:12px; font-weight:700; font-family:inherit; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,0.25); }
.layout-toggle-btn:hover { background:var(--snct-wine-deep); }

.dash-loading-overlay {
	position: fixed;
	inset: 0;
	background: rgba(255,255,255,0.6);
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
}
.dash-loading-overlay.active {
	display: flex;
}
.dash-loading-spinner {
	width: 48px;
	height: 48px;
	border: 4px solid var(--snct-wine-light);
	border-top-color: var(--snct-wine);
	border-radius: 50%;
	animation: dash-spin 0.8s linear infinite;
}
@keyframes dash-spin {
	to { transform: rotate(360deg); }
}

.admin-tabs { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.admin-tabs a { padding:8px 16px; border-radius:8px; background:var(--snct-wine-tint); color:var(--snct-wine-deep); font-weight:700; font-size:13px; text-decoration:none; }
.admin-tabs a:hover { background:var(--snct-wine-light); }
.admin-tabs a.current { background:var(--snct-wine); color:#ffffff; }

.pagination { display:flex; align-items:center; justify-content:center; gap:4px; margin-top:16px; }
.pagination a, .pagination span.current { display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; padding:0 6px; border-radius:6px; font-size:13px; font-weight:600; text-decoration:none; color:#3a3f47; }
.pagination a:hover { background:var(--snct-wine-tint); }
.pagination span.current { background:var(--snct-wine); color:#ffffff; }
.pagination a.page-nav svg { width:14px; height:14px; stroke:currentColor; display:block; }