/* ===== 基本の色・余白 ===== */
/* 方針：今のすっきりしたカード型をベースに、漫画原稿風の要素
   （墨の太い枠線・ぼかしのない影・網点・吹き出し）を見出し・ボタン・プレビュー枠に絞って使う */
:root {
  --bg: #f7f4ec;            /* 原稿用紙のような、少し黄みのある白 */
  --surface: #ffffff;
  --text: #1f2333;
  --text-sub: #4f5566;
  --ink: #16181f;           /* 墨（枠線・影） */
  --border: #d6d3c8;
  --border-hover: #a9a597;  /* 入力欄にマウスを乗せたときの枠 */
  --placeholder: #6b7080;   /* 例文の文字（白背景で 4.5:1 以上） */
  --danger: #a11d1d;        /* エラー表示だけに使う赤 */
  --danger-soft: #fdecec;
  --assist: #6a3fd1;        /* 企画アシスタントの色（紫） */
  --assist-soft: #f1ecfd;
  --generate: #c2410c;      /* 漫画生成の色（オレンジ） */
  --generate-soft: #fff1e8;
  --radius: 10px;
  --ink-line: 3px solid var(--ink);
  --ink-shadow: 6px 6px 0 var(--ink);   /* ぼかしのない、ずらした影 */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  line-height: 1.7;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== ヘッダー ===== */
.app-header {
  position: relative;
  background: var(--surface);
  border-bottom: var(--ink-line);
  overflow: hidden;
}
/* 右側に網点（スクリーントーン）をうっすら敷く。文字の下にはかからない */
.app-header::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 45%;
  background-image: radial-gradient(var(--ink) 1.2px, transparent 1.4px);
  background-size: 9px 9px;
  opacity: 0.12;
  -webkit-mask-image: linear-gradient(to right, transparent, #000);
  mask-image: linear-gradient(to right, transparent, #000);
  pointer-events: none;
}
.app-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 18px;
  padding-bottom: 18px;
}
/* ロゴ：左にコマ割りのマーク、右に「MangaDraft」と「マンガドラフト」を上下に重ねる */
.app-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.app-logo__mark {
  flex: none;
  width: 38px;
  height: 46px;
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
  filter: drop-shadow(3px 3px 0 var(--ink));
}
.app-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.app-logo__en {
  font-family: "Arial Black", "Segoe UI Black", "Hiragino Sans", sans-serif;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
}
/* 「Draft」は網点の帯に乗せて、下書きの蛍光ペンのように見せる */
.app-logo__accent {
  position: relative;
  color: var(--generate);
}
.app-logo__accent::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -2px;
  right: -4px;
  bottom: -3px;
  height: 55%;
  background-image: radial-gradient(var(--ink) 1.3px, transparent 1.6px);
  background-size: 5px 5px;
  opacity: 0.3;
}
.app-logo__en { position: relative; z-index: 0; }
.app-logo__kana {
  margin-top: 7px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.38em;
  color: var(--text-sub);
}
/* バッジは吹き出しの形 */
.badge-mock {
  position: relative;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 4px 14px;
}
.badge-mock::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  margin-top: -5px;
  border: 5px solid transparent;
  border-right: 7px solid var(--ink);
}

/* ===== 2カラム ===== */
.studio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 40px 0 48px;
  align-items: start;
}

/* ===== カード（各エリア）＝ 漫画のコマのような枠 ===== */
.panel {
  position: relative;
  background: var(--surface);
  border: var(--ink-line);
  border-radius: var(--radius);
  box-shadow: var(--ink-shadow);
  padding: 32px;
  overflow: hidden;
}
.panel--assist { --accent: var(--assist); --accent-soft: var(--assist-soft); }
.panel--generate { --accent: var(--generate); --accent-soft: var(--generate-soft); }

/* カード右上の角に、そのエリアの色の網点を置く（色分けの目印） */
.panel::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 160px;
  height: 120px;
  background-image: radial-gradient(var(--accent) 1.6px, transparent 1.8px);
  background-size: 10px 10px;
  opacity: 0.35;
  -webkit-mask-image: linear-gradient(to bottom left, #000 10%, transparent 70%);
  mask-image: linear-gradient(to bottom left, #000 10%, transparent 70%);
  pointer-events: none;
}
.panel__head { position: relative; }

/* 「STEP 1｜企画する」はスタンプ風 */
.panel__step {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 800;
  color: #fff;
  background: var(--accent);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 2px 12px;
  transform: rotate(-2deg);
}
.panel__title {
  margin: 12px 0 6px;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.4;
}
.panel__lead {
  margin: 0 0 24px;
  color: var(--text-sub);
  font-size: 0.95rem;
}

/* ===== 入力欄（読みやすさ優先で、すっきりのまま） ===== */
.form { display: grid; gap: 24px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field__label {
  font-weight: 700;
  font-size: 0.95rem;
}
.input {
  width: 100%;
  min-height: 48px;
  font: inherit;
  font-size: 1rem;   /* 16px 未満だとスマホで入力時に画面が拡大されるため */
  color: var(--text);
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color 0.15s;
}
textarea.input { resize: vertical; }
.input::placeholder { color: var(--placeholder); }
.input:hover { border-color: var(--border-hover); }
/* 選んでいる欄がはっきり分かるように、そのエリアの色で囲む */
.input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}
/* 選択欄：OS ごとに違う矢印を消し、同じ形の矢印にそろえる */
select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%2316181f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* 画像アップロード欄 */
.upload {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 28px 16px;
  text-align: center;
  border: 2px dashed var(--ink);
  border-radius: 8px;
  background-color: var(--surface);
  cursor: pointer;
  transition: background-color 0.2s;
}
.upload:hover { background-color: var(--accent-soft); }
/* キーボードで選んだときも、枠が選ばれていると分かるようにする */
.field:has(.upload__input:focus-visible) .upload {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background-color: var(--accent-soft);
}
.upload__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--accent);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
}
.upload__text { font-weight: 700; }
.upload__hint { font-size: 0.82rem; color: var(--text-sub); word-break: break-all; }
.upload__input {
  /* 見た目は上の枠で代用し、本物の選択欄は隠す */
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ===== ボタン：墨の枠＋ずらした影。押すと影の分だけ沈む ===== */
.btn {
  width: 100%;
  min-height: 58px;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--accent);
  border: var(--ink-line);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.2s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ink);
}
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.btn:disabled {
  cursor: wait;
  filter: grayscale(0.3);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

/* ===== 出力エリア ===== */
.result {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 2px dashed var(--border);
}
.result__label {
  display: inline-block;
  margin: 0 0 14px;
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  background: var(--ink);
  border-radius: 4px;
  padding: 2px 10px;
}
/* アシスタントの回答は吹き出しの形 */
.result__body {
  position: relative;
  margin-top: 6px;
  background: var(--accent-soft);
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 20px 22px;
}
.result__body::before,
.result__body::after {
  content: "";
  position: absolute;
  left: 32px;
  border: 10px solid transparent;
}
.result__body::before { top: -22px; border-bottom: 12px solid var(--ink); }   /* しっぽの枠線 */
.result__body::after { top: -18px; border-bottom: 12px solid var(--accent-soft); } /* しっぽの中身 */
.result__title { margin: 0 0 6px; font-weight: 700; }
.result__list { margin: 0; padding-left: 1.2em; }
.result__list li + li { margin-top: 6px; }
.result__body--answer { white-space: pre-wrap; }   /* AI の回答の改行をそのまま見せる */

/* エラー表示 */
.form-error {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 12px 16px;
  border: 2px solid var(--danger);
  border-radius: 8px;
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 700;
  font-size: 0.95rem;
}
/* 色だけに頼らず、「！」の印でもエラーだと分かるようにする */
.form-error::before {
  content: "!";
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
}
.form-error[hidden] { display: none; }

/* ===== 生成プレビューのカード＝漫画の1ページ ===== */
.preview-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
.preview-card {
  background: var(--surface);
  border: var(--ink-line);
  border-radius: 6px;
  padding: 12px;
  box-shadow: 4px 4px 0 var(--ink);
}
.preview-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  margin-bottom: 10px;
}
.preview-card__page {
  font-weight: 900;
  color: #fff;
  background: var(--ink);
  border-radius: 3px;
  padding: 0 8px;
}
.preview-card__layout { color: var(--accent); font-weight: 800; }
/* 仮枠：網点の上に白いコマが並ぶ、漫画原稿のような見た目 */
.preview-card__frame {
  aspect-ratio: 2 / 3;   /* 生成画像（1024×1536）と同じ縦長比率 */
  display: grid;
  gap: 6px;
  padding: 8px;
  background-color: var(--surface);
  background-image: radial-gradient(#b9b6ad 1.2px, transparent 1.4px);
  background-size: 8px 8px;
  border: 2px solid var(--ink);
  border-radius: 2px;
}
.preview-card__koma {
  background: var(--surface);
  border: 2.5px solid var(--ink);
}
.preview-card__caption {
  margin: 12px 0 0;
  font-size: 0.82rem;
  color: var(--text-sub);
  line-height: 1.6;
}
.preview-card__caption strong { display: block; color: var(--text); }
.preview-card__caption--error { color: var(--danger); }

/* 生成された画像 */
.preview-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--surface);
}
/* 「画像を保存」は、指でも押しやすい控えめなボタンの形にする（主ボタンより目立たせない） */
.preview-card__download {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 12px;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--accent);
  text-decoration: none;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 999px;
  transition: background-color 0.15s;
}
.preview-card__download:hover { background: var(--accent-soft); }
.preview-card__download:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

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

/* ===== タブレット（960px以下）：縦に並べる ===== */
@media (max-width: 960px) {
  /* 1列になったときに、入力欄が横に間延びしすぎないよう幅を抑える */
  .studio {
    grid-template-columns: 1fr;
    max-width: 760px;
    margin: 0 auto;
  }
}

/* ===== スマホ（600px以下） ===== */
@media (max-width: 600px) {
  .container { padding: 0 16px; }
  .studio { padding: 24px 0 32px; gap: 24px; }
  .panel { padding: 24px 20px; box-shadow: 4px 4px 0 var(--ink); }
  .form { gap: 20px; }
  .panel__title { font-size: 1.3rem; }
  .badge-mock::before { display: none; }   /* アプリ名の下に回り込むので、吹き出しのしっぽは消す */
  .field-row { grid-template-columns: 1fr; }
  .preview-list { grid-template-columns: 1fr; }
  .preview-card__frame,
  .preview-card__image { max-width: 320px; margin: 0 auto; }
}

/* 動きを減らす設定の人には、ボタンの沈み込みなどを止める */
@media (prefers-reduced-motion: reduce) {
  .btn, .upload, .input, .preview-card__download { transition: none; }
}