:root{--ink:#172331;--muted:#697787;--line:#dce3e9;--accent:#185d72;--soft:#eef6f7;--paper:#f4f6f8;--warn:#8c4d12}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font:14px/1.6 system-ui,-apple-system,"Malgun Gothic",sans-serif}button,input,select{font:inherit;color:inherit}button,select,input[type=date]{cursor:pointer}button{border:1px solid var(--line);background:white;border-radius:8px;padding:8px 12px;font-weight:600}button:hover{background:#eaf1f5}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:white}input:not([type=checkbox]),select{border:1px solid var(--line);background:white;border-radius:7px;padding:7px 9px;width:100%;min-width:0}input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;vertical-align:middle}label{display:block}small,.muted{color:var(--muted)}h1,h2,h3,p{margin:0}h1{font-size:24px;letter-spacing:-.7px}h2{font-size:18px;letter-spacing:-.3px}h3{font-size:14px}header{padding:23px 30px 20px;display:flex;justify-content:space-between;align-items:center;background:white;border-bottom:1px solid var(--line);gap:20px}.eyebrow{font-size:11px;letter-spacing:1.4px;font-weight:750;color:var(--accent)}.headernote{max-width:440px;text-align:right;color:var(--muted);font-size:12px}.layout{max-width:1820px;margin:auto;display:grid;grid-template-columns:295px minmax(0,1fr);gap:22px;padding:24px}aside{display:flex;flex-direction:column;gap:16px}.card{background:white;border:1px solid var(--line);border-radius:13px;padding:20px;box-shadow:0 2px 4px #192f4210}.smallcard{padding:17px}.space{margin-top:12px}.stack{display:grid;gap:10px}.flex{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.between{justify-content:space-between}.drop{border:1.5px dashed #9bb4c0;border-radius:10px;padding:20px 12px;text-align:center;background:#f8fbfc}.drop.over{background:#dfedf2;border-color:var(--accent)}.drop button{margin:10px 0}.drop strong{display:block;font-size:15px}.drop small{display:block;font-size:11px}summary{cursor:pointer;font-weight:600}details p{font-size:12px;margin-top:8px;color:var(--muted)}.field{font-size:12px;font-weight:650;margin-bottom:4px}.field .normal{font-weight:400}.tag{font-size:11px;border:1px solid var(--line);padding:2px 7px;border-radius:5px;color:var(--muted);background:white}.groupselect{font-weight:650}.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{padding:15px 19px}.stat .value{font-size:27px;font-weight:720;letter-spacing:-1px}.stat small{font-size:11px}.main{display:flex;flex-direction:column;gap:17px;min-width:0}.notice{padding:11px 16px;border:1px solid #e8ceab;background:#fff9ed;border-radius:9px;font-size:12px;color:var(--warn)}.info{border-color:#c5dce3;background:#f1f8fa;color:#295c6b}.controls{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;margin:17px 0}.controls select{font-size:12px}.canvasWrap{position:relative;width:100%;height:440px;margin-top:9px}canvas{width:100%;height:100%;display:block;touch-action:pan-y}.chartnote{font-size:11px;color:var(--muted);margin-top:10px}.chips{display:flex;gap:6px;flex-wrap:wrap;min-height:27px;margin-top:12px}.chip{font-size:12px;padding:3px 8px;border:1px solid var(--line);border-left-width:4px;border-radius:6px;background:white;max-width:100%;word-break:break-all}.tooltip{display:none;position:absolute;pointer-events:none;background:#172331;color:white;border-radius:8px;box-shadow:0 4px 20px #0003;padding:10px 12px;font-size:12px;max-width:340px;z-index:3}.tooltip b{display:block}.tablewrap{overflow:auto;max-height:470px;border-top:1px solid var(--line);margin-top:12px}table{width:100%;border-collapse:collapse;font-size:12px}th{text-align:left;font-weight:650;background:#f5f8fa;position:sticky;top:0;z-index:1;color:#52606f}th,td{padding:9px 10px;border-bottom:1px solid #edf0f3;white-space:nowrap}td.word{white-space:normal;overflow-wrap:anywhere;min-width:190px}td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}.up{color:#16684a}.down{color:#a23d46}.tabletools{display:grid;grid-template-columns:minmax(160px,1fr) 180px 170px;gap:10px;margin-top:12px}.empty{display:flex;align-items:center;justify-content:center;min-height:400px;text-align:center;color:var(--muted)}.empty h2{color:var(--ink);margin-bottom:12px}.empty p{max-width:510px}.logbox{max-height:220px;overflow:auto;font-size:11px}.log{padding:7px 0;border-bottom:1px solid #edf0f3;overflow-wrap:anywhere}.log.error{color:#a23030}.log.warn{color:var(--warn)}.status{font-size:12px;min-height:22px;overflow-wrap:anywhere}.legenditem{font-size:12px;display:flex;align-items:center;gap:5px}.dash{display:inline-block;width:18px;height:2px;background:#acb9c4}.footer{font-size:11px;color:var(--muted);padding:0 3px}.hidden{display:none!important}.quality{max-height:270px}.helpgrid{display:grid;grid-template-columns:1fr 1fr;gap:15px;font-size:12px}.helpgrid h3{margin-bottom:6px}.helpgrid p{margin-bottom:8px}a{color:var(--accent)}.smallbutton{font-size:11px;padding:5px 8px}.nowrap{white-space:nowrap}#loadStatus{margin-top:8px}#loadingOverlay{display:none;position:fixed;inset:0;background:#f4f6f8b8;z-index:10;align-items:center;justify-content:center}#loadingOverlay.show{display:flex}#loadingOverlay div{background:white;border:1px solid var(--line);padding:20px 30px;border-radius:12px;font-weight:650}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #8abdcf;outline-offset:2px}@media(max-width:1050px){.layout{grid-template-columns:250px minmax(0,1fr);padding:15px;gap:15px}.statgrid{grid-template-columns:1fr 1fr}.controls{grid-template-columns:1fr 1fr}.tabletools{grid-template-columns:1fr 1fr}.tabletools input{grid-column:1/-1}.canvasWrap{height:410px}}@media(max-width:720px){header{padding:20px;display:block}.headernote{text-align:left;margin-top:8px}.layout{grid-template-columns:1fr}.controls{grid-template-columns:1fr 1fr}.helpgrid{grid-template-columns:1fr}.card{padding:16px}.canvasWrap{height:370px}}

:root{--accent:#244d68}header{padding:18px 27px}.layout{grid-template-columns:260px minmax(0,1fr);gap:18px;padding:20px}.statgrid .stat{padding:10px 16px}.stat .value{font-size:23px}.signalControls{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:13px;background:#f5f7fa;border:1px solid #e4e9ef;border-radius:9px}.signalControls select{font-size:12px}.surgeFilters{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:12px 0}.surgeFilters input:not([type=checkbox]){max-width:290px}.surgeFilters label{font-size:12px}.signalSummary{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:13px 0 3px}.signalSummary strong{font-size:20px;letter-spacing:-.5px}.signalSummary span{font-size:12px;color:var(--muted)}.signalLegend{display:flex;flex-wrap:wrap;gap:17px;margin:14px 0 4px;font-size:11px;align-items:center}.signalLegend span{display:flex;gap:6px;align-items:center}.signalLegend i{display:inline-block;width:18px;height:3px}.canvasWrap{height:535px}.detailCanvasWrap{height:230px;margin:12px 0}.detailNumbers{display:flex;flex-direction:column;gap:5px;align-items:flex-end}.detailNumbers strong{font-size:23px}.detailNumbers .confirmed{color:#22724e;background:#eef8f2;border-color:#b7d9c4}.wordButton{padding:0;border:0;background:none;text-align:left;font-size:12px;color:#245678}.wordButton:hover{text-decoration:underline;background:none}.focusedRow{background:#fff5ed}.chartnote{line-height:1.55}#detailWord{font-size:24px;overflow-wrap:anywhere}#detailFoot{max-width:80%}.drop #loadDemo{display:block;margin:2px auto 10px;font-size:11px}#surgeRule,#surgeLagNote{margin-top:4px}
@media(max-width:1050px){.layout{grid-template-columns:220px minmax(0,1fr)}.signalControls{grid-template-columns:1fr 1fr}.signalSummary{display:block}.signalSummary span{display:block}.canvasWrap{height:570px}.detailNumbers strong{font-size:18px}.surgeFilters{gap:9px}}@media(max-width:760px){.layout{grid-template-columns:1fr}.signalControls{grid-template-columns:1fr 1fr}.canvasWrap{height:570px}#detailFoot{max-width:100%}.detailCanvasWrap{height:240px}}

/* v0.4: explicit color filters, manual event selection, import-state feedback. */
.colorPanel{margin:15px 0 4px;padding:14px 15px;border:1px solid #dce5ee;background:#fafbfd;border-radius:10px}
.colorHeader{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.colorHeader strong{font-size:13px}.colorOptions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.colorOption{display:flex;align-items:center;gap:10px;border:1px solid #dfe5ed;border-radius:8px;padding:10px 12px;background:white;cursor:pointer;min-width:0}
.colorOption strong{display:block;font-size:13px}.colorOption small{font-size:11px}.colorOption input{flex-shrink:0;accent-color:var(--band)}
.colorOption:has(input:checked){border-color:var(--band);box-shadow:inset 3px 0 var(--band)}
.colorOption:has(input:not(:checked)){background:#f4f6f8}.colorOption:has(input:not(:checked)) .bandDot{opacity:.28}
.bandDot{display:inline-block;width:10px;height:10px;flex-shrink:0;border-radius:50%;background:var(--band)}
.colorCount{margin-left:auto;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.filterHelp{font-size:11px;color:var(--muted);margin-top:8px}.selectionPanel{padding:10px 12px;margin:12px 0;background:#f1f6fa;border-radius:8px;border:1px solid #dce6ee}
.selectionPanel label{font-size:13px;font-weight:650;display:flex;align-items:center;gap:7px}
.selectionPanel small{font-size:11px}.pickCell{display:flex;align-items:center;gap:8px}.pickedRow{background:#f4f8fc}
#surgePickStatus{font-size:12px;color:#4d647a}#loadStatus{padding-top:8px}#loadStatus.updated{border-top:2px solid #347958;color:#285c44}
#surgeDetail:not(.hidden){border-top:3px solid #dce5ee}.hiddenContext{font-size:11px;color:var(--muted)}
@media(max-width:1050px){.colorOptions{grid-template-columns:1fr}.colorOption{padding:8px 10px}.colorOption strong,.colorOption small{display:inline}.colorOption small{margin-left:8px}.colorHeader{align-items:flex-start}}
@media(max-width:760px){.colorOption small{display:block;margin-left:0}.colorOption{gap:8px}.selectionPanel .flex{gap:8px}}

/* v0.10: chart-only export controls; never part of the exported drawing. */
.chartExportBar{margin:17px 0 11px;padding:13px 15px;border:1px solid #ccdce6;border-radius:10px;background:#f6fafc;display:flex;gap:14px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.chartExportBar h3{font-size:14px;margin-bottom:3px}.chartExportBar .exportText{flex:1;min-width:210px}.exportButtons{display:flex;gap:7px;flex-wrap:wrap}.exportButtons button{font-size:12px;padding:8px 13px}.exportHint{font-size:11px;color:var(--muted);line-height:1.6}.exportStatus{margin-top:3px;font-size:11px;color:#476378;overflow-wrap:anywhere}.exportError{color:#a23030!important}.detailExportBar{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
@media(max-width:760px){.chartExportBar{padding:11px;gap:10px}.chartExportBar .exportButtons{width:100%}.chartExportBar .exportButtons button{flex:1}.detailExportBar .exportButtons{width:100%}}

/* v0.10: compact connected labels for every selected keyword. */
.pageControls{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}.pageControls label{display:block;min-width:140px;flex:1}.pageControls select{font-size:12px}.pageActions{display:flex;gap:6px;flex-wrap:wrap}.pageHelp{font-size:12px;color:#637385;line-height:1.55;margin:8px 0}
.surgeListTools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0}.surgeListTools select{max-width:220px}.surgeListTools small{flex:1;color:var(--muted)}
.detailOccurrence{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:12px}.detailOccurrence label{font-size:12px;font-weight:650}.detailOccurrence select{width:auto;max-width:100%;min-width:240px}
@media(max-width:760px){.pageControls label{min-width:120px}.pageActions{width:100%}.pageActions button{flex:1}.signalSummary strong{font-size:17px}.detailOccurrence select{min-width:0;width:100%}}