:root { color-scheme: light; font-family: system-ui,-apple-system,"Hiragino Sans",sans-serif; color:#17213a; background:#f5f7fb; }
* { box-sizing:border-box; }
body { margin:0; }
main { width:min(1120px,calc(100% - 32px)); margin:32px auto; }
header,.controls,.result,details,.related { background:white; border:1px solid #dbe2ee; border-radius:16px; padding:24px; box-shadow:0 8px 28px rgba(29,45,75,.06); }
header { border-top:5px solid #2857c5; }
h1 { margin:.15rem 0 .5rem; font-size:clamp(1.6rem,4vw,2.5rem); }
h2 { grid-column:1/-1; margin:0; font-size:1.1rem; }
.controls { margin-top:18px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
label { display:grid; gap:6px; font-size:.85rem; font-weight:700; }
select { width:100%; min-height:44px; border:1px solid #9aa9bf; border-radius:9px; padding:8px; background:white; color:inherit; }
.result { margin-top:18px; display:grid; grid-template-columns:repeat(5,1fr); gap:1px; padding:0; overflow:hidden; background:#dbe2ee; }
.result div { background:white; padding:20px; min-width:0; }
.result span,.result strong { display:block; overflow-wrap:anywhere; }
.result span { color:#667085; font-size:.8rem; margin-bottom:8px; }
.result strong { font-size:1.08rem; }
.notice { min-height:1.5em; padding:12px 4px; font-weight:650; }
.notice.caution { color:#874b00; }
.notice.blocked { color:#9b2515; }
details { margin-top:8px; }
summary { cursor:pointer; font-weight:750; }
dl { display:grid; grid-template-columns:max-content 1fr; gap:8px 16px; }
dt { font-weight:750; }
dd { margin:0; overflow-wrap:anywhere; }
.related { margin-top:18px; display:flex; flex-wrap:wrap; gap:12px 20px; }
.related a { color:#1d4ed8; }
@media (max-width:900px) { .controls { grid-template-columns:repeat(2,minmax(0,1fr)); } .result { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px) { main { width:min(100% - 20px,1120px); margin:10px auto 24px; } header,.controls,details,.related { padding:16px; border-radius:12px; } .controls,.result { grid-template-columns:1fr; } dl { grid-template-columns:1fr; gap:4px; } dd { margin-bottom:10px; } }