/* 料金シミュレーター — 道具の画面（左で直す・右に見本） */
.studio { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:22px; align-items:start; }
.studio .panel:first-child { margin-top:0; }
.look { position:sticky; top:12px; }
.look-in { background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px; max-height:calc(100vh - 24px); overflow:auto; }
@media (max-width: 980px) { .studio { grid-template-columns:1fr; } .look { position:static; } .look-in { max-height:none; } }
.preview-head { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.preview-head h2 { margin:0; }
.seg { display:flex; gap:6px; }
.preview-box { margin-top:12px; background:#ecebe6; border-radius:8px; padding:14px; }
#preview { margin:0 auto; max-width:100%; }
#preview.sp { width:375px; }
label.f { display:block; margin:12px 0 0; font-size:.88rem; font-weight:600; }
label.f > span { display:block; margin-bottom:4px; }
label.f input, label.f select, label.f textarea { margin-top:0; }
select { display:block; width:100%; padding:10px 10px; font-size:.98rem; font-family:inherit; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--fg); }
input[type=color] { display:block; width:100%; height:44px; padding:3px; border:1px solid var(--line); border-radius:7px; background:#fff; }
input[type=url], input[type=tel] { display:block; width:100%; padding:11px 12px; font-size:1rem; font-family:inherit; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--fg); }
.grid2, .grid3, .grid4 { display:grid; gap:0 12px; }
.grid2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.grid3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.grid4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
@media (max-width: 600px) { .grid2, .grid3 { grid-template-columns:1fr; } .grid4 { grid-template-columns:1fr 1fr; } }
.q { border:1px solid var(--line); border-radius:9px; padding:12px 14px 14px; margin-top:14px; background:#fcfcfb; }
.q-head { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.q-head .sp { flex:1; }
.tag { font-size:.75rem; background:#eee; border-radius:20px; padding:2px 10px; color:#555; }
.danger-text { color:var(--err) !important; border-color:#f0c4cb !important; }
.tbl { overflow-x:auto; margin-top:10px; }
table.opts { width:100%; border-collapse:collapse; font-size:.88rem; min-width:520px; }
table.opts th { text-align:left; font-weight:600; color:var(--muted); padding:4px 4px; font-size:.78rem; }
table.opts td { padding:3px 4px; vertical-align:middle; }
table.opts input[type=text], table.opts input[type=number] { margin:0; padding:7px 8px; font-size:.92rem; }
table.opts td.num { width:7.5em; }
table.opts select { padding:7px 6px; font-size:.85rem; }
table.opts td.c { text-align:center; width:3.5em; }
table.opts td.ops { white-space:nowrap; width:1%; }
table.opts td.ops button { padding:5px 8px; margin-left:2px; }
.q > button.small { margin-top:8px; }
#add-q button { margin:0; }
.msg-line { min-height:1.2em; margin:6px 0 0; font-size:.88rem; color:var(--err); }
.msg:empty { display:none; }
#paste, #out-text { font-family:ui-monospace, Consolas, monospace; font-size:.8rem; margin-top:10px; }
#load-paste { margin-top:8px; }
.small-file { display:inline-block; padding:8px 13px; font-size:.88rem; border:1px solid var(--accent); border-radius:8px; cursor:pointer; background:#fff; font-weight:600; }
.small-file input { display:none; }
h3 { font-size:1rem; margin:26px 0 0; }
.warn-box ul { margin:6px 0 0; padding-left:1.2em; }