@font-face {
  font-family: "Share Tech Mono";
  src: local("Share Tech Mono");
  font-display: swap;
}

:root {
  --bg: #f5f7fb;
  --panel: #ffffff;
  --line: #d9dee8;
  --text: #1b2430;
  --muted: #5a6778;
  --accent: #2159a6;
  --accent-2: #0b2d5b;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

header.topbar {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  padding:24px 28px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color:#fff;
}
header.topbar h1 { margin:2px 0 2px; font-size:32px; }
.product-subtitle { margin:0 0 10px; font-size:14px; font-style:italic; letter-spacing:0.035em; opacity:0.9; }
header.topbar p { margin:0; opacity:0.92; }
.eyebrow { font-size:12px; letter-spacing:0.12em; opacity:0.9; }
.privacy-badge {
  white-space:nowrap;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,0.22);
  border-radius:999px;
  background: rgba(255,255,255,0.10);
}

.layout {
  display:grid;
  grid-template-columns: minmax(320px, 430px) 1fr;
  gap:22px;
  padding:22px;
}

.panel, .preview-wrap {
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.05);
}

.controls { padding:18px; }
label { display:block; margin:12px 0; font-size:14px; color:var(--muted); }
input[type="text"], select {
  display:block;
  width:100%;
  margin-top:6px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  font: inherit;
}
input[type="color"] {
  display:block;
  width:100%;
  height:44px;
  margin-top:6px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
input[type="range"] { width: 100%; vertical-align: middle; }

.two-col {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.section-title {
  margin:18px 0 10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.12em;
  color:#526176;
  text-transform:uppercase;
}
.no-margin { margin-top:0; }

.dropzone {
  border:2px dashed #9bb0cd;
  border-radius:16px;
  background:#f9fbff;
  color:#425266;
  text-align:center;
  padding:24px 16px;
  cursor:pointer;
  transition: all .18s ease;
}
.dropzone.dragover, .dropzone:hover { border-color:var(--accent); background:#eef4ff; }
.drop-icon { font-size:34px; line-height:1; margin-bottom:8px; color:var(--accent); }
.dropzone strong { display:block; font-size:18px; color:#27374a; }
.dropzone span { display:block; margin-top:6px; font-size:13px; }

.status {
  padding:10px 12px;
  background:#f6f8fb;
  border:1px solid #e4e9f1;
  border-radius:10px;
  color:#536274;
  font-size:13px;
}
.warning, .hint { color:#6b7787; font-size:12px; }
.detected { color:#55657a; font-size:13px; }

.exif-grid {
  display:grid;
  grid-template-columns: max-content 1fr;
  gap:8px 10px;
  margin:12px 0 0;
}
.exif-grid dt {
  font-size:12px;
  color:#647488;
  font-weight:700;
}
.exif-grid dd {
  margin:0;
  font-size:13px;
  color:#223042;
}

.checks {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:2px 14px;
}
.checks label { margin:4px 0; color:#314155; }
.checks input { margin-right:6px; }

button {
  appearance:none;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  font: inherit;
  cursor:pointer;
}
button:hover:not(:disabled) { filter: brightness(0.98); }
button:disabled { opacity:0.55; cursor:not-allowed; }
button.primary {
  width:100%;
  margin-top:12px;
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
  font-weight:700;
}
button.ghost { background:#fff; }

.preview-wrap { padding:18px; display:flex; flex-direction:column; }
.preview-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.canvas-shell {
  position:relative;
  min-height:420px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#f3f5f9;
  overflow:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
canvas { max-width:100%; height:auto; display:block; }
.empty-preview {
  color:#7a8696;
  font-size:14px;
}

footer {
  padding:0 22px 22px;
  color:#66768a;
  font-size:13px;
}

@media (max-width: 1080px) {
  .layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  header.topbar { flex-direction:column; }
  .two-col, .checks { grid-template-columns: 1fr; }
}