:root{--bg:#0f1115;--panel:#161a22;--panel2:#10131a;--text:#e7e9ee;--muted:#aab2c5;--border:#2a3142;--btn:#22293a;--btn2:#2c3650;--accent:#4aa3ff;--radius:14px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#131826,#0f1115);position:sticky;top:0;z-index:10}
.brand{font-weight:700}.actions{display:flex;gap:10px}
button{border:1px solid var(--border);background:var(--btn);color:var(--text);padding:8px 10px;border-radius:10px;cursor:pointer}
button:hover{background:var(--btn2)}
.layout{display:grid;grid-template-columns:360px 1fr 320px;gap:12px;padding:12px;height:calc(100vh - 56px)}
.pane{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:12px;overflow:auto;resize:both;min-height:300px}
.pane h2{margin:6px 0 10px;font-size:16px}
.group{border:1px solid var(--border);border-radius:12px;padding:10px;margin:10px 0;background:var(--panel2)}
.label{font-size:12px;color:var(--muted);margin-bottom:6px}
.hint{font-size:12px;color:var(--muted);line-height:1.5;margin-top:8px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
input[type="number"]{width:70px;background:#0b0d12;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:6px}
select{width:100%;background:#0b0d12;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:8px}
.outbox{margin:10px 0}.outhead{display:flex;align-items:center;justify-content:space-between;margin:6px 2px}
textarea{width:100%;height:170px;resize:vertical;background:#0b0d12;color:var(--text);border:1px solid var(--border);border-radius:12px;padding:10px;line-height:1.4}
.btn-small{padding:6px 8px;border-radius:10px;font-size:12px}
.seg{display:flex;gap:8px}.segbtn{flex:1}.segbtn.active{outline:2px solid var(--accent);border-color:transparent}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-size:12px;background:#0b0d12;cursor:pointer;user-select:none}
.chip.on{outline:2px solid var(--accent);border-color:transparent}
.preset-list{display:flex;flex-direction:column;gap:8px}
.preset{border:1px solid var(--border);border-radius:12px;padding:10px;background:#0b0d12}
.preset .name{font-weight:700;font-size:13px;margin-bottom:6px}
.preset .desc{font-size:12px;color:var(--muted);line-height:1.4}
.preset button{margin-top:8px;width:100%}
.switch{position:relative;display:inline-block;width:42px;height:24px}.switch input{display:none}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#2a3142;border-radius:999px;border:1px solid var(--border)}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;top:2px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked + .slider{background:rgba(74,163,255,.35);border-color:rgba(74,163,255,.7)}
.switch input:checked + .slider:before{transform:translateX(18px)}
.search-area{padding:10px;border:1px solid #ddd;border-radius:8px;margin:10px 0;}
.search-row{display:flex;gap:6px;align-items:center;}
#search-input{flex:1;padding:8px;}
#search-clear{padding:8px 10px;}
.search-subrow{display:flex;gap:12px;font-size:12px;margin-top:6px;opacity:.9;}
.search-results{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.search-item{display:flex;gap:6px;align-items:center;}
.search-pick{flex:1;text-align:left;padding:8px;}
.search-star{width:44px;padding:8px;}
.search-hint{opacity:.7;font-size:12px;padding:6px;}
.search-pins{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap;}
.pins-block{min-width:220px;}
.pins-title{font-size:12px;opacity:.7;margin-bottom:4px;}
.pins-list{display:flex;gap:6px;flex-wrap:wrap;}
.pin{padding:6px 8px;font-size:12px;}
/* ===== Mobile layout fix ===== */
@media (max-width: 900px) {
  /* 3ペイン → 縦積みにする */
  .layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* 左・中・右を全部100%幅に */
  .pane-left,
  .pane-mid,
  .pane-right {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 順番（必要なら） */
  .pane-left { order: 1; }
  .pane-mid  { order: 2; }
  .pane-right{ order: 3; }

  /* テキストエリアが潰れないように */
  textarea,
  .output,
  .panel {
    width: 100%;
    box-sizing: border-box;
  }
}
 /* 不要な説明文の削除 */
@media (max-width: 900px) {
  .site-desc { display: none !important; }
}

/* コピーライトマークのスマホ用場所固定 */
@media (max-width: 900px) {
  .layout{
    height: auto !important;                 /* ← 固定を解除 */
    min-height: calc(100dvh - 56px);         /* ← topbar分を引いた最低高さ */
  }
}