.layout1, .layout2, .layout3 { --dashboard-ink:#222; --dashboard-muted:#666; --dashboard-light:#999; --dashboard-line:#d5d8de; --dashboard-surface:#fff; --dashboard-soft:#f3f4f6; --dashboard-blue:#4876EE; --dashboard-green:#39A861; --dashboard-orange:#FFA000; --dashboard-purple:#8B5CF6; width:100%; display:grid; gap:18px; }
.layout1 { grid-template-columns:repeat(4, minmax(0, 1fr)); margin-top:48px; }
.layout2 { grid-template-columns:minmax(0, 1.08fr) minmax(460px, .92fr); margin-top:18px; }
.layout3 { grid-template-columns:minmax(420px, 1.4fr) repeat(2, minmax(260px, .85fr)); margin-top:18px; margin-bottom:24px; }
.frame { position:relative; overflow:hidden; border:1px solid var(--dashboard-line); border-radius:12px; background:var(--dashboard-surface); transition:border-color .18s ease, box-shadow .18s ease; }
.frame:hover { border-color:#bfc5cf; box-shadow:0 8px 22px rgba(72, 118, 238, .06); }
.frame > h2 { display:flex; align-items:center; justify-content:space-between; margin:0; padding:22px 24px 0; color:var(--dashboard-ink); font-size:17px; font-weight:650; line-height:1.35; letter-spacing:-.025em; }
.frame > .content { padding:18px 24px 24px; }
.frame-metric { min-height:142px; }
.frame-metric { --metric-accent:var(--dashboard-blue); --metric-soft:#d5def4; background:#FAFBFD; }
.layout1 .frame-metric:nth-child(1) { --metric-accent:var(--dashboard-green); --metric-soft:#d9ead6; }
.layout1 .frame-metric:nth-child(2) { --metric-accent:var(--dashboard-orange); --metric-soft:#f4dfbd; }
.layout1 .frame-metric:nth-child(3) { --metric-accent:var(--dashboard-blue); --metric-soft:#d5def4; }
.layout1 .frame-metric:nth-child(4) { --metric-accent:var(--dashboard-purple); --metric-soft:#e3def6; }
.frame-metric::before { position:absolute; top:0; right:22px; left:22px; height:2px; background:transparent; content:""; transition:background .22s ease; }
.frame-metric:hover::before { background:var(--metric-accent); }
.frame-metric > h2 { padding:20px 20px 0; color:var(--dashboard-muted); font-size:15px; font-weight:600; letter-spacing:-.015em; }
.frame-metric > .content { padding:15px 20px 20px; }
.h2-right { color:var(--metric-accent); font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:0; }
.frame .jw-progress { overflow:hidden; border-radius:999px; background:var(--metric-soft); }
.frame .jw-progress progress { display:block; width:100%; height:7px; border:0; border-radius:999px; background:var(--metric-soft); }
.frame .jw-progress progress::-webkit-progress-bar { border-radius:999px; background:var(--metric-soft); }
.frame .jw-progress progress::-webkit-progress-value { border-radius:999px; background:var(--metric-accent); }
.frame .jw-progress progress::-moz-progress-bar { border-radius:999px; background:var(--metric-accent); }
.diskinfo { display:flex; justify-content:space-between; margin-top:10px; }
.diskinfo span { color:var(--dashboard-light); font-size:10px; font-weight:500; font-variant-numeric:tabular-nums; }
.metric-row { display:flex; align-items:center; justify-content:space-between; min-height:62px; }
.metric-number { color:var(--dashboard-ink); font-size:34px; font-weight:750; line-height:1; letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.metric-icon { display:flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:14px; background:var(--metric-soft); }
.metric-icon svg { width:25px; height:25px; fill:var(--metric-accent); }
.notice { display:flex; flex-direction:column; gap:11px; margin:0; padding:0; list-style:none; }
.notice li { display:flex; width:100%; min-width:0; align-items:center; gap:8px; }
.notice li::before { width:5px; height:5px; flex:0 0 auto; border-radius:50%; background:var(--metric-accent); content:""; }
.notice li span { display:block; min-width:0; flex:1; overflow:hidden; color:var(--dashboard-muted); font-size:12px; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }
.frame-panel { display:flex; flex-direction:column; }
.layout2 > .frame { min-height:398px; }
.layout3 > .frame { min-height:268px; }
.frame-panel > .content { min-height:0; flex:1; }
.frame-panel canvas { display:block; width:100%; height:100%; }
.frame .jw-tableA { width:100%; margin-top:0; border-collapse:collapse; table-layout:fixed; }
.frame .jw-tableA th { height:38px; border-top:0; border-bottom:1px solid #cfd3da; background:var(--dashboard-soft); color:#4b5563; font-size:11px; font-weight:650; }
.frame .jw-tableA td { height:39px; overflow:hidden; border-bottom:1px solid #e5e7eb; color:#40444b; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.frame .jw-tableA tr:last-child td { border-bottom:0; }
.frame .jw-tableA tr:not(:first-child) { transition:background .18s ease; }
.frame .jw-tableA tr:not(:first-child):hover { background:#F7F9FC; }
.frame .jw-tableA td.center { text-align:center; font-variant-numeric:tabular-nums; }
.project-progress-wrap { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:190px; }
.project-progress-wrap svg { width:158px; }
.project-progress { position:relative; display:flex; align-items:center; justify-content:center; width:158px; height:158px; }
.project-progress .center-text { position:absolute; top:50%; left:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; transform:translate(-50%, -50%); }
.project-progress .center-text .title { color:var(--dashboard-muted); font-size:11px; font-weight:550; }
.project-progress .center-text .value { margin-top:2px; color:var(--dashboard-ink); font-size:28px; font-weight:750; line-height:1.1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.donut { width:100%; height:100%; transform:rotate(-90deg); }
.track { fill:none; stroke:#e5e7eb; stroke-width:4; }
.segment { fill:none; stroke-width:4; stroke-linecap:round; }
.red1 { stroke:var(--dashboard-blue); }
.red2 { stroke:var(--dashboard-purple); }
.legend { margin:0; padding:0; color:var(--dashboard-muted); font-size:11px; list-style:none; }
.legend li { display:flex; align-items:center; margin-bottom:12px; white-space:nowrap; }
.legend li:last-child { margin-bottom:0; }
.legend .dot { display:inline-block; width:7px; height:7px; margin-right:9px; border-radius:50%; }
.legend .red1 { background:var(--dashboard-blue); }
.legend .red2 { background:var(--dashboard-purple); }
.legend .gray { background:#d9dde4; }

@media screen and (max-width:1280px) {
	main > .container { padding-right:20px; padding-left:20px; }
	.layout1 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
	.layout2 { grid-template-columns:1fr; }
	.layout3 { grid-template-columns:minmax(400px, 1.35fr) repeat(2, minmax(240px, .8fr)); }
}

@media screen and (max-width:1060px) {
	.layout3 { grid-template-columns:1fr 1fr; }
	.layout3 > .frame:first-child { grid-column:1 / -1; }
	.pc { display:none; }
	.jw-tableA .author { width:70px; font-size:11px; }
	.jw-tableA .date { width:70px; font-size:11px; }
}

@media screen and (max-width:768px) {
	.layout1 { grid-template-columns:1fr; margin-top:32px; }
	.layout2, .layout3 { grid-template-columns:1fr; }
	.layout3 > .frame:first-child { grid-column:auto; }
	#sub02 { padding:0 10px; }
	.frame { border-radius:10px; }
	.frame > h2 { padding:20px 20px 0; }
	.frame > .content { padding:16px 20px 20px; }
	.frame-metric { min-height:132px; }
	.layout2 > .frame, .layout3 > .frame { min-height:0; }
	.frame-panel > .content { min-height:250px; }
	.project-progress-wrap { justify-content:center; min-height:210px; }
}