:root { --cream:#f7f2e8; --paper:#fffdf8; --ink:#27433f; --teal:#287c76; --teal-dark:#1f5e5a; --line:#d9d1c3; --accent:#f6d78c; }
* { box-sizing:border-box; }
html, body { height:100%; margin:0; }
body { min-width:320px; background:var(--cream); color:var(--ink); font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; }
.toolbar { min-height:130px; padding:14px clamp(16px, 3vw, 38px); display:flex; align-items:center; gap:24px; border-bottom:1px solid var(--line); background:var(--paper); }
.toolbar__brand { flex:0 0 auto; }
.notice { display:inline-block; margin:0 0 4px; padding:3px 9px; border-radius:999px; background:#edf5f2; color:var(--teal-dark); font-size:12px; font-weight:700; }
h1 { margin:0; font-size:19px; letter-spacing:.04em; }
.toolbar__controls { display:flex; flex:1; align-items:end; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.field { display:grid; gap:4px; color:#58706c; font-size:12px; font-weight:700; }
select, button { min-height:38px; border-radius:6px; font:inherit; }
select { max-width:250px; padding:0 30px 0 10px; border:1px solid var(--line); background:#fff; color:var(--ink); }
button { padding:0 13px; border:1px solid var(--teal); background:var(--teal); color:#fff; font-weight:700; cursor:pointer; }
button:hover { background:var(--teal-dark); } button:disabled { opacity:.5; cursor:not-allowed; }
.view-switch { display:flex; gap:7px; min-height:38px; margin:0; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); font-size:13px; white-space:nowrap; }
.view-switch label, .highlight-toggle { cursor:pointer; }.highlight-toggle { padding:10px 3px; color:#42625e; font-size:13px; white-space:nowrap; }
.viewer { height:calc(100vh - 130px); min-height:300px; display:flex; flex-direction:column; padding:12px clamp(10px, 2vw, 24px) 18px; }
.viewer__status { padding:0 3px 8px; color:#617671; font-size:12px; }.viewer iframe { width:100%; flex:1; min-height:0; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 4px 15px rgb(57 71 66 / 8%); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media (max-width:760px) { .toolbar { align-items:flex-start; flex-direction:column; gap:10px; padding:12px 14px; }.toolbar__controls { width:100%; justify-content:flex-start; align-items:end; gap:8px; }.change-field { flex:1 1 180px; }.change-field select { width:100%; }.viewer { height:calc(100vh - 278px); padding:8px 8px 10px; } h1 { font-size:17px; } }
@media (max-width:420px) { .toolbar__controls { display:grid; grid-template-columns:1fr 1fr; }.field, .change-field, .highlight-toggle { grid-column:span 2; }.view-switch { justify-content:center; }.viewer { height:calc(100vh - 355px); } }