:root {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --text: #1c2331;
  --text-sub: #5c6880;
  --border: #e2e7f0;

  --assistant: #2f6df6;
  --assistant-soft: #eef3ff;
  --generate: #7b46e3;
  --generate-soft: #f3edff;

  /* 文字サイズ。小さすぎる文字を作らないよう、下限を13pxに決めています */
  --fs-xs: 13px;   /* 補足・注記 */
  --fs-sm: 14px;   /* ラベル・小見出し */
  --fs-md: 15px;   /* 本文 */
  --fs-lg: 20px;   /* カード見出し */
  --fs-xl: 22px;   /* アプリ名 */

  /* 角丸は3種類に統一。増やすと画面がちぐはぐに見えます */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;

  --shadow: 0 2px 4px rgba(28, 35, 49, .05), 0 12px 28px rgba(28, 35, 49, .07);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  line-height: 1.75;
}

/* ===== ヘッダー ===== */
.app-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.app-header__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.app-logo {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-size: 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--assistant), var(--generate));
}

.app-title {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.3;
}

.app-subtitle {
  margin: 4px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-sub);
  line-height: 1.6;
}

/* ===== レイアウト（PC:2カラム / スマホ:縦） ===== */
.layout {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 24px 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

/* ===== カード =====
   枠線と影を重ねると輪郭がうるさくなるため、影だけでまとまりを出します。
   上端の4pxだけは、STEP 1 / STEP 2 の区別に必要なので残しています。 */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card__head {
  padding: 24px 24px 20px;
}

.card--assistant .card__head { background: var(--assistant-soft); }
.card--generate  .card__head { background: var(--generate-soft); }

.card--assistant { border-top: 4px solid var(--assistant); }
.card--generate  { border-top: 4px solid var(--generate); }

.card__title {
  margin: 12px 0 8px;
  font-size: var(--fs-lg);
  font-weight: 700;
}

.card__desc {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--text-sub);
}

.card__body { padding: 24px; }

.badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
}

.badge--assistant { background: var(--assistant); }
.badge--generate  { background: var(--generate); }

/* ===== 入力欄 ===== */
.field { margin-bottom: 24px; }

.field__label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.select,
.textarea {
  width: 100%;
  padding: 12px 16px;
  font-family: inherit;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text);
  background: #fbfcfe;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s;
}

/* セレクトボックスの矢印（SVGを埋め込み） */
.select {
  appearance: none;
  cursor: pointer;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235c6880' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.textarea { resize: vertical; }

.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--assistant);
  box-shadow: 0 0 0 3px rgba(47, 109, 246, .15);
}

.card--generate .select:focus,
.card--generate .textarea:focus {
  border-color: var(--generate);
  box-shadow: 0 0 0 3px rgba(123, 70, 227, .15);
}

/* ===== アップロード欄 ===== */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 32px 16px;
  text-align: center;
  background: #fbfcfe;
  border: 2px dashed #c8d3e8;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.dropzone:hover {
  border-color: var(--assistant);
  background: var(--assistant-soft);
}

.dropzone__icon { font-size: 28px; line-height: 1; }
.dropzone__main { font-size: var(--fs-md); font-weight: 700; color: var(--assistant); }
.dropzone__sub  { font-size: var(--fs-xs); color: var(--text-sub); }
.dropzone__input { display: none; }

.dropzone__filename {
  margin: 8px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-sub);
}

/* ===== ボタン ===== */
.btn {
  display: block;
  width: 100%;
  padding: 16px 20px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .1s, filter .15s, box-shadow .15s;
}

.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }

/* 影は薄く。色付きの濃いグローは古い印象になります */
.btn--assistant {
  background: var(--assistant);
  box-shadow: 0 3px 10px rgba(47, 109, 246, .22);
}

.btn--generate {
  background: var(--generate);
  box-shadow: 0 3px 10px rgba(123, 70, 227, .22);
}

/* ===== サンプル出力 ===== */
.result,
.preview { margin-top: 28px; }

.result__label {
  display: block;
  margin-bottom: 12px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-sub);
}

/* 背景色だけでまとまりが分かるので、枠線は付けません */
.result__body {
  padding: 20px;
  background: var(--assistant-soft);
  border-radius: var(--radius);
  font-size: var(--fs-md);
}

/* AIの回答は改行をそのまま活かして表示します */
.result__body { white-space: pre-wrap; }

/* ===== エラーメッセージ ===== */
.error {
  margin: 16px 0 0;
  padding: 12px 16px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: #9b1c1c;
  background: #fdf0f0;
  border: 1px solid #f5c6c6;
  border-radius: var(--radius);
}

.error::before { content: "⚠️ "; }

/* ===== 読み込み中のスピナー ===== */
.spinner {
  width: 26px;
  height: 26px;
  border: 3px solid #d5dcea;
  border-top-color: var(--generate);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
}

.btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  filter: none;
}

/* ===== 生成プレビュー ===== */
/* 1枠が細すぎると漫画の中身が見えないため、最小幅を広めに取っています */
.preview__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}

.page-card {
  background: #fbfcfe;
  border-radius: var(--radius);
  padding: 16px;
}

.page-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.page-card__no {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--generate);
}

.page-card__panels {
  font-size: var(--fs-xs);
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--generate-soft);
  color: var(--generate);
  white-space: nowrap;
}

.page-card__thumb {
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: repeating-linear-gradient(45deg, #f0f2f8, #f0f2f8 10px, #e9edf6 10px, #e9edf6 20px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-sub);
}

/* 生成された画像が入った状態 */
.page-card__thumb--filled {
  background: #fff;
  padding: 0;
  overflow: hidden;
  cursor: zoom-in;
}

.page-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.page-card__thumb-icon { font-size: 24px; }
.page-card__thumb-label { font-size: var(--fs-xs); font-weight: 700; }

.page-card__note {
  margin: 12px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--text-sub);
}

/* 確定したセリフ（画像内の文字が読みにくいときの控え） */
.page-card__script {
  margin-top: 12px;
  padding: 12px;
  font-size: var(--fs-xs);
  line-height: 1.8;
  white-space: pre-wrap;
  color: var(--text);
  background: var(--generate-soft);
  border-radius: var(--radius-sm);
}

/* ===== フッター ===== */
.app-footer {
  padding: 24px 24px 40px;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-sub);
}

.app-footer p { margin: 0; }

/* ===== タブレット =====
   1カラムになるとカードが横に広がるので、余白を少し足して間延びを防ぎます */
@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 20px 48px;
  }
}

/* ===== スマホ ===== */
@media (max-width: 600px) {
  .app-header__inner { padding: 14px 16px; gap: 12px; }
  .app-logo { width: 40px; height: 40px; font-size: 20px; }
  .app-title { font-size: 19px; }

  .layout { padding: 20px 16px 40px; gap: 16px; }

  .card__head { padding: 20px 20px 16px; }
  .card__body { padding: 20px; }
  .card__title { font-size: 18px; }

  /* 縦1列に並べる */
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .preview__grid { grid-template-columns: 1fr; }

  /* iOSでの自動ズームを防ぐ（16px未満だとフォーカス時に拡大される） */
  .select, .textarea { font-size: 16px; }

  .btn { padding: 16px 18px; font-size: 16px; }

  .page-card__thumb { aspect-ratio: 4 / 3; }
}