:root{
  --bg:#f1f3f6; --card:#ffffff; --text:#111827; --muted:#6b7280; --accent:#2563eb; --border:#e5e7eb;
  --btn:#111111; --btn-text:#ffffff; --hint:#94a3b8;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Arial, sans-serif;
  display:grid; place-items:center; padding:0;
}

.wrap{
  width:100%; max-width:1100px; background:var(--card); border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(0,0,0,.06); padding:24px;
}
header{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px}
header h1{font-size:18px; margin:0; font-weight:700}
header .sub{color:var(--muted); font-size:12px}

.grid{display:grid; grid-template-columns: 1fr 420px; gap:24px; align-items:start}
@media (max-width: 980px){ .grid{ grid-template-columns: 1fr; } }

.pane{border:1px solid var(--border); border-radius:14px; padding:16px; background:#fff}
.section-title{font-size:14px; margin:0 0 8px; font-weight:700}
label{font-size:12px; color:var(--muted); display:block; margin:8px 0 6px}
input[type="text"]{
  width:100%; padding:12px; background:#fff; border:1px solid var(--border);
  color:var(--text); border-radius:10px; font-size:14px;
}

.text-preview{ padding:12px 0; background:#fff; }
#outText{
  font-family:-apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  font-weight:400; font-size:16px; line-height:1.6; color:#0f1419; white-space:pre-wrap; margin:0;
}

.preview{
  position:relative; aspect-ratio:1/1; border:1px solid var(--border);
  border-radius:12px; background:#f5f7fa; display:grid; place-items:center; overflow:hidden;
  cursor:pointer;
}
.preview img{width:100%}
.preview img.hidden, .preview img:not([src]), .preview img[src=""]{display:none}
.placeholder{color:#9aa5b1; font-size:14px}
.preview:focus-visible{ outline: 3px solid var(--accent); outline-offset: 2px; }
.preview.dragover{ border-color: var(--accent); background: rgba(37,99,235,.06); }

.range-row{margin-top:8px}
input[type="range"]{width:100%}

.meta-row{margin-top:8px}
.status{color:var(--muted); font-variant-numeric: tabular-nums}
.ok{color:#119955} .warn{color:#b45309} .err{color:#b91c1c}

/* ボタン */
.actions{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; margin-top:22px;
}
.btn{
  appearance:none; border:1px solid transparent;
  padding:14px 16px; border-radius:12px; font-weight:700; font-size:15px;
  cursor:pointer; box-shadow:0 6px 14px rgba(0,0,0,.10);
  transition: transform .06s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  background: var(--btn); color: var(--btn-text);
}
.btn:active{ transform: translateY(1px); box-shadow:0 4px 10px rgba(0,0,0,.12); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.btn-large{height:52px}

/* 画像を保存：ライトブルー */
#saveBtn{
  background: linear-gradient(180deg, #dbeafe, #bfdbfe);
  color:#0f172a; border-color:#93c5fd;
}
#saveBtn:hover:not(:disabled){ background: linear-gradient(180deg, #e0ecff, #c7ddff); }

/* Xを開く：ブラック */
#openXBtn{
  background:#000; color:#fff; border-color:#000;
}
#openXBtn:hover{ background:#111; }

/* スマホ限定ヒント */
.sponly{
  display: none;
  font-size: 12px;
  margin-top:8px;
  color: var(--muted);
}

/* 8) 注意書き（小さく・控えめに） */
.notice{
  margin-top:16px; font-size:12px; color:var(--muted); text-align:left;
}

/* ====== スマホ（例: 640px 以下）での挙動 ====== */
@media (max-width: 640px){
  /* 「画像を保存」ボタンは隠す */
  #saveBtn{ display:none; }

  /* アクションは1列＆Xボタンを横幅いっぱいに */
  .actions{ grid-template-columns: 1fr; }
  #openXBtn{ width:100%; }

  /* ヒント表示 */
  .sponly{ display:block; }

  .wrap{ padding: 8px; }
  input[type="text"]{ font-size: 16px; outline: none; }
}