body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;margin:0;padding:20px;background:#f4f7f6;max-width:1400px;margin:0 auto}
h1{margin-top:0;color:#2c3e50}
.subtitle{color:#7f8c8d;font-size:0.9em;margin-top:-10px;margin-bottom:20px}

/* Header & Logo */
.header {
	padding: 12px 16px;
}
.header-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: flex-end; /* 右寄せ */
	align-items: center;
}
.header-logo {
	height: 48px;
	width: auto;
	display: block;
}
.header-logo { transition: opacity .2s ease; }
.header-logo:hover { opacity: .8; }
#brandLogo a { text-decoration: none; display: inline-block; }
#brandLogo a:focus img { outline: 2px solid #8a2c40; outline-offset: 2px; }
.card{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,.1);margin-bottom:20px}

/* Guide section */
.card.guide{background:linear-gradient(135deg,#e3f2fd 0%,#f3e5f5 100%);border-left:4px solid #3498db}
.guide-content{margin-top:15px}
.guide-section{margin-bottom:15px}
.guide-section h3{color:#2c3e50;font-size:1.05em;margin:8px 0 6px 0;border:none;padding:0}
.guide-section p{margin:5px 0;color:#34495e;line-height:1.6}
.guide-section ul{margin:8px 0;padding-left:20px;color:#34495e}
.guide-section li{margin:4px 0;line-height:1.5}
.guide-section strong{color:#2c3e50}

#controls h2{font-size:1.2em;margin-top:0;border-bottom:2px solid #3498db;padding-bottom:5px}
#plot{min-height:600px}
.control-group{margin-bottom:15px}
.control-group label{display:block;font-weight:700;margin-bottom:5px;color:#34495e}
.control-group small{display:block;color:#7f8c8d;font-size:0.85em;margin-top:3px}
select,input[type=file],input[type=number],button{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;font-size:14px}
input[type=number]{font-family:monospace}
textarea{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;font-family:'Courier New',monospace;font-size:0.9em;resize:vertical;box-sizing:border-box}
button{background:#3498db;color:#fff;font-weight:700;cursor:pointer;border:none;margin-top:10px;transition:background 0.3s}
button:hover{background:#2980b9}
button.download{background:#27ae60}
button.download:hover{background:#229954}
button:disabled{background:#bdc3c7;cursor:not-allowed}
button.edit-mode{background:#95a5a6;margin:5px}
button.edit-mode:hover{background:#7f8c8d}
button.edit-mode.active{background:#e74c3c;font-weight:bold}
button.edit-mode.active:hover{background:#c0392b}
.modal-actions button.danger{background:#e74c3c;color:#fff}
.modal-actions button.danger:hover{background:#c0392b}
.modal-actions button.add{background:#27ae60;color:#fff}
.modal-actions button.add:hover{background:#229954}

/* Draggable modal custom positioning */
#pointEditDialog.custom-position{align-items:flex-start;justify-content:flex-end;}
#pointEditDialog.custom-position .modal-content{position:relative;margin:60px 10px 0 0;max-height:calc(100vh - 70px);overflow:auto}
.drag-handle{padding:6px 8px;background:#ecf0f1;border-radius:4px;margin:-4px -4px 10px -4px;}
.divider{text-align:center;margin:20px 0;color:#7f8c8d;font-weight:700;position:relative}
.divider::before,.divider::after{content:'';position:absolute;top:50%;width:40%;height:1px;background:#bdc3c7}
.divider::before{left:0}
.divider::after{right:0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.center-button{display:flex;justify-content:center;margin-top:10px;gap:12px}
.center-button button{width:auto;max-width:400px}
/* Horizontal paste button group */
.paste-buttons{display:flex;gap:10px;flex-wrap:nowrap;margin-top:15px}
.paste-buttons button{flex:1 1 0;min-width:0;margin-top:0}
table{width:100%;border-collapse:collapse;margin-top:10px;font-size:0.95em}
table th,table td{border:1px solid #ddd;padding:8px 10px;text-align:left}
table th{background:#ecf0f1;font-weight:700}
table td:first-child{font-weight:600;background:#f8f9fa}
table td:last-child{font-family:monospace;text-align:right}
tr.highlight{background:#e8f5e9}
tr.highlight.final{background:#fff9c4;font-size:1.1em}
tr.highlight td{font-weight:700}
h3{color:#2c3e50;border-left:4px solid #3498db;padding-left:10px;margin-top:20px}

/* Results: responsive 2-column layout on desktop */
#results.card.results{padding-top:16px}
.results-grid{display:grid;gap:16px}
.results-section{min-width:0}
.results-section-wide{grid-column:1 / -1}

/* Compact tables in results */
#results table{font-size:0.92em}
#results table td:first-child{width:70%}

@media (min-width: 992px){
	.results-grid{
		grid-template-columns: 1fr 1fr;
		align-items:start;
	}
	/* 最終評価を横幅いっぱいに */
	.results-section-wide{grid-column: 1 / 3}
}

/* Tooltip for point dragging */
.tooltip{
	background:rgba(0,0,0,0.75);
	color:#fff;
	padding:6px 8px;
	border-radius:4px;
	font-size:12px;
	pointer-events:none;
	z-index:1000;
	box-shadow:0 2px 4px rgba(0,0,0,0.3);
	white-space:nowrap;
}

/* Modal dialog for point editing */
.modal{
	position:fixed;
	top:0;left:0;right:0;bottom:0;
	background:transparent;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:1500;
	pointer-events:none;
}
.modal-content{
	background:#fff;
	padding:16px 20px 18px;
	width:320px;
	border-radius:8px;
	box-shadow:0 4px 12px rgba(0,0,0,0.25);
	font-size:14px;
	pointer-events:auto;
}
.modal-content h3{margin-top:0;font-size:1.05em;border:none;padding:0;color:#2c3e50}
.modal-content label{display:block;margin-bottom:10px;font-weight:600}
.modal-content input{width:100%;margin-top:4px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.modal-actions button{flex:0 0 auto;width:auto;padding:6px 14px;margin-top:0}