/* 宮川酒店 商品登録支援 MVP — レスポンシブ最小CSS。
   スマホ(320〜767px)で横スクロールなし、768px以上で崩れなし。
   タップ領域は最小 44×44px。 */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
    "Yu Gothic", Meiryo, sans-serif;
  color: #1a1a1a;
  background: #f7f7f8;
  line-height: 1.6;
  /* 横スクロールを防ぐ。 */
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 16px;
}

h1 { font-size: 1.4rem; margin: 0 0 12px; }
h2 { font-size: 1.1rem; margin: 20px 0 8px; }

.card {
  background: #fff;
  border: 1px solid #e2e2e5;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

label { display: block; font-weight: 600; margin-bottom: 6px; }

input[type="file"],
input[type="text"],
input[type="number"],
select,
textarea {
  width: 100%;
  min-height: 44px; /* タップ領域 */
  padding: 10px;
  font-size: 16px; /* iOS のズーム防止 */
  border: 1px solid #c8c8cc;
  border-radius: 8px;
  background: #fff;
}

textarea { min-height: 66px; resize: vertical; }

.field-row {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  background: #1f6feb;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}
.btn:disabled { background: #9db7e0; cursor: not-allowed; }
.btn-secondary { background: #6b7280; }

/* マーカー */
.marker {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}
.marker-label { background: #d1fadf; color: #05603a; }
.marker-web { background: #dbeafe; color: #1e40af; }
.marker-mismatch { background: #fee2e2; color: #991b1b; }
.marker-attention { background: #fef3c7; color: #92400e; }
.marker-hallucination { background: #fde2e2; color: #7f1d1d; border: 1px solid #f43f5e; }
.marker-edited { background: #ede9fe; color: #5b21b6; }
.marker-unconfirmed { background: #eee; color: #555; }

.confidence { font-size: 0.8rem; color: #555; }
.sources { font-size: 0.8rem; color: #444; margin-top: 4px; }
.sources a { color: #1f6feb; word-break: break-all; }

.error-banner {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}
.notice-banner {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}

/* 解析中スピナー */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #cfe0ff;
  border-top-color: #1f6feb;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none; }

pre.export {
  background: #0d1117;
  color: #c9d1d9;
  padding: 14px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.8rem;
}

@media (min-width: 768px) {
  .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}