:root{--navy:#0b2f5b;--navy-dark:#06254a;--blue:#2f75b5;--light-blue:#d9eaf7;--pale-blue:#eef4fa;--border:#1c4f85;--text:#1f2937;--muted:#64748b;--danger:#c00000;--success:#2e7d32;--gold:#d6a928;--white:#fff}
*{box-sizing:border-box}html{background:#fff}body{margin:0;color:var(--text);background:#f5f8fb;font-family:"Meiryo UI","Yu Gothic",sans-serif}button,a,[tabindex],canvas:focus{outline-offset:3px}:focus-visible{outline:3px solid #60a5fa}
.dashboard-header{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:18px max(24px,calc((100vw - 1552px)/2));color:#fff;background:linear-gradient(118deg,var(--navy-dark),var(--navy) 72%,#174c80);border-bottom:4px solid #78b9e6}
.eyebrow{margin:0 0 3px;font-size:10px;letter-spacing:.16em;color:#b9d9f0}.dashboard-header h1{margin:0;font-size:clamp(28px,2.3vw,34px);line-height:1.2;letter-spacing:.02em}.header-subtitle{margin:4px 0 0;color:#cbe4f7;font-size:15px;font-weight:700}
.meta{display:flex;gap:24px;margin:0;white-space:nowrap}.meta div{padding-left:14px;border-left:1px solid rgba(255,255,255,.35)}.meta dt{font-size:10px;color:#cbd5e1}.meta dd{margin:3px 0 0;font-size:13px;font-weight:700}
.dashboard{display:grid;grid-template-columns:58fr 42fr;gap:18px;width:min(1600px,calc(100% - 48px));margin:18px auto}
.kpi-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.kpi-card{position:relative;min-height:112px;padding:16px 18px 13px;background:#fff;border:1px solid #dbe5ef;border-radius:12px;box-shadow:0 4px 13px rgba(11,47,91,.08);overflow:hidden}.kpi-card:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--blue)}.kpi-card.gross:before{background:#5b9bd5}.kpi-card.margin:before{background:var(--gold)}.kpi-card.achievement:before{background:#7aa874}.kpi-card p{margin:0;color:var(--muted);font-size:11px;font-weight:700}.kpi-card strong{display:block;margin:5px 0 2px;color:var(--navy);font-size:clamp(25px,2vw,31px);line-height:1.25}.kpi-card span{font-size:11px;font-weight:700}.positive{color:var(--success)!important}.negative{color:var(--danger)!important}.neutral{color:var(--muted)!important}
.panel{min-width:0;padding:13px 16px 15px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 4px 14px rgba(11,47,91,.07)}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:9px;padding-bottom:8px;border-bottom:1px solid #dbe7f1}.panel-heading>div{display:flex;align-items:center;gap:9px}.panel-heading h2{margin:0;color:var(--navy);font-size:16px}.panel-heading p{margin:0;color:var(--muted);font-size:10px;text-align:right}.section-number{display:grid;place-items:center;width:27px;height:23px;color:#fff;background:var(--blue);border-radius:5px;font-size:10px;font-weight:800}.chart-wrap{position:relative;width:100%}.trend-chart{height:294px}.rank-chart{height:315px}
.table-scroll{overflow-x:auto}table{width:100%;border-collapse:separate;border-spacing:0;font-size:11px;white-space:nowrap}caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}th,td{padding:7px 6px;text-align:right;border-right:1px solid #c9d8e6;border-bottom:1px solid #c9d8e6}thead tr:first-child th{background:var(--navy);color:#fff;text-align:center}thead tr:nth-child(2) th{background:var(--light-blue);color:var(--navy)}th:first-child,td:first-child{position:sticky;left:0;z-index:1;text-align:center;font-weight:700;border-left:1px solid #c9d8e6}thead th:first-child{z-index:2}tbody td:first-child{background:#fff}tbody tr:nth-child(even) td{background:var(--pale-blue)}tbody tr.latest td{background:#fff5cf;font-weight:700}.margin-delta{display:block;font-size:9px;font-weight:800}
.insights{position:relative;grid-column:1/-1;padding:13px 20px 25px;background:#edf4fa;border:1px solid #9ab8d3;border-left:6px solid var(--navy);border-radius:10px}.insights h2{margin:0 0 6px;color:var(--navy);font-size:15px}.insights ul{display:grid;grid-template-columns:repeat(2,1fr);gap:3px 28px;margin:0;padding-left:20px;line-height:1.55;font-size:12px}.tax-note{position:absolute;right:14px;bottom:6px;margin:0;color:var(--muted);font-size:9px}
#loading,#error-message{grid-column:1/-1;text-align:center;font-weight:700}#loading{color:var(--navy)}#loading span{display:inline-block;width:14px;height:14px;margin-right:8px;border:2px solid #cbd5e1;border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px}#error-message{padding:12px;color:var(--danger);background:#fff1f1;border-radius:8px}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1000px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.dashboard{grid-template-columns:1fr}.insights ul{grid-template-columns:1fr}}
@media(max-width:768px){.dashboard-header{min-height:auto;align-items:flex-start;flex-direction:column;padding:16px 18px}.dashboard-header h1{font-size:24px}.meta{width:100%;justify-content:space-between;gap:8px}.dashboard{width:calc(100% - 24px);margin:12px auto;gap:12px}.kpi-grid{gap:10px}.kpi-card{min-height:98px;padding:13px}.kpi-card strong{font-size:23px}.panel{padding:12px}.trend-chart{height:340px}.rank-chart{height:360px}.panel-heading p{max-width:48%;font-size:9px}}
@media(max-width:480px){.dashboard-header{padding:14px 12px}.dashboard-header h1{font-size:21px}.header-subtitle{font-size:13px}.dashboard{width:calc(100% - 24px)}.kpi-grid{grid-template-columns:1fr 1fr}.kpi-card strong{font-size:19px}.kpi-card span{font-size:9px}.panel{border-radius:10px}.panel-heading h2{font-size:14px}.rank-chart{height:350px}}
@media print{@page{size:A4 landscape;margin:8mm}*{print-color-adjust:exact!important;-webkit-print-color-adjust:exact!important}body{background:#fff}.dashboard-header{min-height:60px;padding:8px 14px}.dashboard-header h1{font-size:22px}.header-subtitle{font-size:11px}.dashboard{width:100%;margin:7px 0;gap:7px}.kpi-grid{gap:7px}.kpi-card{min-height:70px;padding:8px;box-shadow:none}.kpi-card strong{font-size:18px}.panel,.insights{padding:7px;box-shadow:none;break-inside:avoid}.trend-chart{height:205px}.rank-chart{height:210px}.insights ul{grid-template-columns:repeat(2,1fr);font-size:9px}.panel-heading{margin-bottom:4px;padding-bottom:4px}.panel-heading h2{font-size:12px}#loading,#error-message{display:none}}