*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0b1120;--surface: #131c31;--surface-2: #1a2540;--border: #2a3a5c;--text: #e8edf7;--text-muted: #8b9dc3;--accent: #3b82f6;--land: #1e2d4a;--land-stroke: #3d5278}html,body,#app{height:100%}body{font-family:Noto Sans JP,system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}.site-header{background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}.site-header-inner{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;max-width:1200px;margin:0 auto}.site-logo{font-size:1rem;font-weight:700;color:var(--text);text-decoration:none}.site-nav{display:flex;gap:.5rem}.site-nav-link{padding:.4rem .85rem;border-radius:6px;font-size:.85rem;color:var(--text-muted);text-decoration:none;transition:color .15s,background .15s}.site-nav-link:hover{color:var(--text);background:var(--surface-2)}.site-nav-link.active{color:var(--text);background:#3b82f626}.page-map{display:flex;flex-direction:column;height:100%}.map-root{flex:1;min-height:0}.map-layout{display:grid;grid-template-columns:300px 1fr;height:100%;overflow:hidden}.sidebar{background:var(--surface);border-right:1px solid var(--border);padding:1.5rem;overflow-y:auto;display:flex;flex-direction:column;gap:1.5rem}.sidebar-header h1{font-size:1.25rem;font-weight:700;margin-bottom:.5rem}.sidebar-header p{font-size:.8rem;color:var(--text-muted)}.map-hint{margin-top:.5rem;font-size:.75rem!important;color:var(--accent)!important}.control-section h2,.legend-section h2{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:.75rem}.category-filters{display:flex;flex-direction:column;gap:.4rem}.filter-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:.8rem;font-family:inherit;cursor:pointer;text-align:left;transition:border-color .15s,background .15s}.filter-btn:hover{border-color:var(--accent)}.filter-btn.active{background:#3b82f626;border-color:var(--accent)}.color-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.country-select{width:100%;padding:.55rem .75rem;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:.85rem;font-family:inherit;cursor:pointer;transition:border-color .15s}.country-select:hover,.country-select:focus{border-color:var(--accent);outline:none}#min-value-slider{width:100%;accent-color:var(--accent)}.slider-label{font-size:.8rem;color:var(--text-muted);margin-top:.4rem}.legend-categories{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}.legend-item{display:flex;align-items:center;gap:.5rem;font-size:.8rem}.legend-width{display:flex;flex-direction:column;gap:.5rem}.legend-width-item{display:flex;align-items:center;gap:.75rem;font-size:.75rem;color:var(--text-muted)}.line-sample{display:inline-block;width:40px;height:0;border-top:solid #8b9dc3;border-radius:2px}.line-sample.thick{border-top-width:6px}.line-sample.medium{border-top-width:3px}.line-sample.thin{border-top-width:1.5px}.map-main{position:relative;overflow:hidden}.map-canvas{width:100%;height:100%;cursor:grab}.map-canvas:active{cursor:grabbing}.map-canvas svg{width:100%;height:100%}.map-controls{position:absolute;top:1rem;right:1rem;display:flex;align-items:center;gap:.35rem;background:#131c31e6;border:1px solid var(--border);border-radius:8px;padding:.35rem;z-index:5}.zoom-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:1.1rem;font-family:inherit;cursor:pointer;transition:border-color .15s,background .15s}.zoom-btn:hover{border-color:var(--accent);background:#3b82f626}.zoom-level{font-size:.75rem;color:var(--text-muted);min-width:42px;text-align:center;padding:0 .25rem}.country{fill:var(--land);stroke:var(--land-stroke);stroke-width:.5;vector-effect:non-scaling-stroke;transition:fill .2s,stroke .2s,opacity .2s}.country-highlighted{fill:#2a4068;stroke:var(--accent);stroke-width:1.2}.country-dimmed{opacity:.35}.trade-hits{pointer-events:all}.trade-hit-area{cursor:pointer;vector-effect:non-scaling-stroke}.trade-line{transition:opacity .2s,stroke-width .2s;vector-effect:non-scaling-stroke}.country-label{font-size:11px;fill:var(--text-muted);pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.8)}.country-label-active{fill:var(--text);font-weight:600}.map-tooltip{position:absolute;pointer-events:none;background:#131c31f7;border:1px solid var(--border);border-radius:10px;padding:.85rem 1rem;font-size:.78rem;opacity:0;transition:opacity .15s;z-index:10;min-width:260px;max-width:320px;box-shadow:0 8px 24px #0006}.map-tooltip.visible{opacity:1}.tooltip-header{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-bottom:.6rem;margin-bottom:.6rem;border-bottom:1px solid var(--border)}.tooltip-header strong{font-size:.9rem}.tooltip-total{font-size:.85rem;font-weight:700;color:var(--accent);white-space:nowrap}.tooltip-direction{margin-bottom:.65rem}.tooltip-direction:last-child{margin-bottom:0}.tooltip-direction-header{font-size:.72rem;font-weight:600;color:var(--text-muted);margin-bottom:.35rem;letter-spacing:.02em}.tooltip-flow-item{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:.4rem .5rem;padding:.2rem 0}.tooltip-cat{color:var(--text)}.tooltip-val{font-weight:600;color:var(--text);white-space:nowrap}.tooltip-subtotal{display:flex;justify-content:space-between;margin-top:.3rem;padding-top:.3rem;border-top:1px dashed var(--border);font-size:.72rem;color:var(--text-muted)}.tooltip-subtotal span:last-child{font-weight:600;color:var(--text)}.error{padding:2rem;text-align:center;color:#f87171}.page-about{display:flex;flex-direction:column;min-height:100%}.about-container{flex:1;overflow-y:auto}.about-page{max-width:760px;margin:0 auto;padding:2rem 1.5rem 3rem}.about-hero{margin-bottom:2.5rem}.about-hero h1{font-size:1.75rem;font-weight:700;margin-bottom:.75rem}.about-lead{font-size:1rem;color:var(--text-muted);line-height:1.7}.about-section{margin-bottom:2.5rem}.about-section h2{font-size:1.15rem;font-weight:700;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}.about-section p{margin-bottom:1rem;color:var(--text-muted);line-height:1.8}.about-section p strong{color:var(--text)}.about-note{padding:.85rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:8px;font-size:.85rem!important}.about-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;margin-bottom:1rem}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1rem;display:flex;flex-direction:column;gap:.25rem}.stat-value{font-size:1.25rem;font-weight:700;color:var(--accent)}.stat-label{font-size:.75rem;color:var(--text-muted)}.about-list{list-style:none;display:flex;flex-direction:column;gap:.5rem;color:var(--text-muted);line-height:1.7}.about-list li:before{content:"・";color:var(--accent);margin-right:.25rem}.about-list a{color:var(--accent);text-decoration:none}.about-list a:hover{text-decoration:underline}.about-table{width:100%;border-collapse:collapse;font-size:.85rem}.about-table th,.about-table td{padding:.6rem .75rem;text-align:left;border-bottom:1px solid var(--border)}.about-table th{color:var(--text-muted);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em}.about-table td{color:var(--text-muted)}.about-table td.num{text-align:right;font-weight:600;color:var(--text);white-space:nowrap}.about-table .color-dot{margin-right:.4rem;vertical-align:middle}.about-country-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.4rem 1rem;list-style:none;color:var(--text-muted);font-size:.85rem}.about-country-list strong{color:var(--text)}.about-code{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1rem 1.25rem;overflow-x:auto;font-size:.8rem;line-height:1.6}.about-code code{color:var(--text-muted);font-family:SF Mono,Fira Code,monospace}.about-footer{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border)}.about-back-link{color:var(--accent);text-decoration:none;font-size:.9rem}.about-back-link:hover{text-decoration:underline}code{background:var(--surface-2);padding:.15rem .4rem;border-radius:4px;font-size:.85em;font-family:SF Mono,Fira Code,monospace}@media(max-width:768px){.map-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr}.sidebar{max-height:40vh}.about-page{padding:1.5rem 1rem 2rem}.about-hero h1{font-size:1.4rem}}