/* ============================================================
   Manga Creative Studio - デザイン
   色・余白・角丸・影は下の :root にまとめています。
   見た目を調整したいときは、まずここの値を変えてください。
   ============================================================ */

:root{
  /* --- 色（ベース） --- */
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#161c2b;          /* 本文 */
  --muted:#5a6379;         /* 補足文（背景とのコントラストを確保） */
  --line:#e5e9f2;          /* 枠線 */

  /* --- 色（アクセント） --- */
  --assistant:#3b6ef5;     /* STEP 1：企画アシスタント */
  --assistant-soft:#eef3ff;
  --generate:#8442e6;      /* STEP 2：漫画生成 */
  --generate-soft:#f4edff;
  --danger:#b3261e;        /* エラー表示にだけ使う */
  --danger-soft:#fdf3f2;
  --danger-line:#f2cdc9;

  /* --- 余白（4pxの倍数で統一） --- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-12:48px;

  /* --- 角丸 --- */
  --radius-sm:10px;
  --radius:14px;
  --radius-lg:18px;
  --radius-pill:999px;

  /* --- 影（枠線は薄くして、影を主役にする） --- */
  --shadow-sm:0 1px 2px rgba(18,24,40,.04);
  --shadow:0 1px 2px rgba(18,24,40,.04), 0 10px 28px rgba(18,24,40,.07);

  /* --- レイアウト幅 --- */
  --page-width:1180px;      /* PC：広げすぎない */
  --page-width-narrow:760px; /* タブレット：1カラム時に伸びすぎない */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  /* 英字はモダンなUIフォント、日本語は読みやすいゴシックを優先 */
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,
    "Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;
  font-feature-settings:"palt"; /* 日本語の字間を自然に詰める */
  line-height:1.75;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}

/* キーボード操作時にフォーカス位置が分かるようにする */
:focus-visible{outline:2px solid var(--assistant); outline-offset:2px}

/* ---------- header ---------- */
.app-header{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.app-header__inner{
  max-width:var(--page-width); margin:0 auto;
  padding:var(--space-4) var(--space-6);
  display:flex; align-items:center; gap:var(--space-3);
}
.logo{
  width:44px; height:44px; flex:none;
  border-radius:var(--radius);
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--assistant),var(--generate));
  color:#fff; font-weight:700; letter-spacing:.5px; font-size:14px;
  box-shadow:0 4px 12px rgba(74,86,226,.25);
}
.app-title{
  margin:0; font-size:22px; font-weight:700;
  letter-spacing:-.01em; line-height:1.4;
}
.app-subtitle{margin:2px 0 0; font-size:13px; color:var(--muted); line-height:1.5}

/* ---------- layout ---------- */
.layout{
  max-width:var(--page-width);
  margin:0 auto;
  padding:var(--space-8) var(--space-6) var(--space-12);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-6);
  align-items:start;
}

/* ---------- card ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card__head{
  padding:var(--space-6) var(--space-6) var(--space-5);
  border-bottom:1px solid var(--line);
}
/* 2つの機能の違いが一目で分かるように、見出し部分の色を変える */
.card--assistant .card__head{background:linear-gradient(180deg,var(--assistant-soft),#fff)}
.card--generate .card__head{background:linear-gradient(180deg,var(--generate-soft),#fff)}
.card__title{
  margin:var(--space-3) 0 var(--space-2);
  font-size:20px; font-weight:700; line-height:1.5; letter-spacing:-.01em;
}
.card__desc{margin:0; font-size:14px; color:var(--muted); line-height:1.7}
.card__body{
  padding:var(--space-6);
  display:flex; flex-direction:column; gap:var(--space-6);
}

.badge{
  display:inline-block; font-size:12px; font-weight:700;
  letter-spacing:.04em; padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-pill); color:#fff;
}
.badge--assistant{background:var(--assistant)}
.badge--generate{background:var(--generate)}

/* ---------- form ---------- */
.field{display:flex; flex-direction:column; gap:var(--space-2)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4)}
.label{font-size:14px; font-weight:700; line-height:1.6}
.hint{margin:0; font-size:12.5px; color:var(--muted); line-height:1.6}

.select,.textarea{
  width:100%;
  font:inherit; color:inherit;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--space-3) var(--space-4);
  transition:border-color .15s, box-shadow .15s;
}
.select{
  min-height:48px;
  appearance:none; -webkit-appearance:none;
  padding-right:40px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6379' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;
  background-position:right var(--space-4) center;
  cursor:pointer;
}
.textarea{resize:vertical; min-height:104px; line-height:1.7}
.select:hover,.textarea:hover{border-color:#ccd5e6}
.select:focus,.textarea:focus{
  outline:none; border-color:var(--assistant);
  box-shadow:0 0 0 4px rgba(59,110,245,.14);
}
.card--generate .select:focus,.card--generate .textarea:focus{
  border-color:var(--generate); box-shadow:0 0 0 4px rgba(132,66,230,.14);
}

.dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--space-1); text-align:center;
  padding:var(--space-8) var(--space-4);
  border:2px dashed #ccd7ec;
  border-radius:var(--radius);
  background:#fbfcff;
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.dropzone:hover{border-color:var(--assistant); background:var(--assistant-soft)}
/* キーボードでファイル選択にフォーカスしたときも、位置が分かるようにする */
.field:has(#rough-image:focus-visible) .dropzone{
  border-color:var(--assistant); background:var(--assistant-soft);
  box-shadow:0 0 0 4px rgba(59,110,245,.14);
}
/* アイコンは線の太さ・サイズ・色を画面全体で統一する */
.dropzone__icon{
  width:44px; height:44px; margin-bottom:var(--space-2);
  display:grid; place-items:center;
  border-radius:var(--radius);
  background:var(--assistant-soft);
  color:var(--assistant);
}
.dropzone__icon svg{width:22px; height:22px; display:block}
.dropzone__main{font-size:14px; font-weight:700; color:var(--assistant)}
.dropzone__sub{font-size:12.5px; color:var(--muted)}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- button ---------- */
.btn{
  width:100%;
  min-height:52px;              /* スマホでも押しやすい高さ */
  font:inherit; font-weight:700; font-size:16px; letter-spacing:.02em;
  color:#fff; border:0; border-radius:var(--radius);
  padding:var(--space-4) var(--space-6);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .18s ease, filter .15s ease;
}
.btn:hover{filter:brightness(1.05); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
/* 処理中（disabled）は、待っていることが分かるようにスピナーを出す */
.btn:disabled{opacity:.75; cursor:default; transform:none; filter:none}
.btn:disabled::before{
  content:"";
  display:inline-block; vertical-align:-3px;
  width:16px; height:16px; margin-right:var(--space-2);
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.btn--assistant{background:var(--assistant); box-shadow:0 6px 18px rgba(59,110,245,.26)}
.btn--assistant:hover{box-shadow:0 10px 24px rgba(59,110,245,.32)}
.btn--generate{background:var(--generate); box-shadow:0 6px 18px rgba(132,66,230,.26)}
.btn--generate:hover{box-shadow:0 10px 24px rgba(132,66,230,.32)}

/* ---------- alert（エラー表示。赤はここだけで使う） ---------- */
.alert{
  margin:0;
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--danger-line);
  background:var(--danger-soft);
  color:var(--danger);
  border-radius:var(--radius);
  font-size:14px;
  line-height:1.7;
}
.alert[hidden]{display:none}

/* ---------- result ---------- */
.result{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fafbfe;
  padding:var(--space-5);
}
.result__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-3); margin-bottom:var(--space-4);
}
.result__label{font-size:14px; font-weight:700}
.tag{
  font-size:12px; color:var(--muted);
  border:1px solid var(--line); background:#fff;
  padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill);
  white-space:nowrap; line-height:1.5;
}
.result__body{font-size:14.5px}
.result__lead{margin:0 0 var(--space-2); font-weight:700}
.result__list{margin:0; padding-left:1.25em}
.result__list li{margin-bottom:var(--space-2)}
.result__list li:last-child{margin-bottom:0}

/* ---------- preview ---------- */
/* PC・タブレットは2列、スマホは1列（下のレスポンシブで切り替え） */
.preview-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--space-4);
}
.preview{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
/* 空の枠は、うっすらコマ割りが見えるページ風の見た目にする */
.preview__thumb{
  aspect-ratio:3/4;
  display:grid; place-items:center;
  background-color:#f8f9fd;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:50% 50%;
  background-position:center;
  color:var(--muted); font-size:12.5px; font-weight:700; text-align:center;
  padding:var(--space-3);
  border-bottom:1px solid var(--line);
}
.preview__thumb span{
  background:rgba(255,255,255,.9);
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-pill);
  line-height:1.6;
}
/* 画像が入ったら枠の比率を解除して、生成画像をそのまま表示する */
.preview__thumb:has(.preview__img){aspect-ratio:auto; background:#fff; padding:0}
.preview__img{display:block; width:100%; height:auto}
.preview__meta{padding:var(--space-3) var(--space-4) var(--space-4)}
.preview__title{margin:0; font-size:14.5px; font-weight:700; line-height:1.5}
.preview__sub{margin:2px 0 0; font-size:12.5px; color:var(--generate); font-weight:700}
.preview__note{margin:var(--space-2) 0 0; font-size:12.5px; color:var(--muted); line-height:1.6}

/* ---------- footer ---------- */
.app-footer{
  text-align:center; padding:0 var(--space-6) var(--space-8);
  font-size:12.5px; color:var(--muted);
}

/* ============================================================
   レスポンシブ
   1000px以下：2カラム → 1カラム（タブレット・小さめPC）
   640px以下：スマホ向けの余白と文字サイズ
   ============================================================ */

@media (max-width:1000px){
  .layout{
    grid-template-columns:1fr;
    gap:var(--space-5);
    /* 1カラムのときに横に伸びすぎないよう、幅を抑えて中央寄せ */
    max-width:var(--page-width-narrow);
  }
  .app-header__inner{max-width:var(--page-width-narrow)}
}

@media (max-width:640px){
  body{font-size:15px}
  .app-header__inner{padding:var(--space-3) var(--space-4)}
  .logo{width:40px; height:40px; font-size:13px}
  .app-title{font-size:18px}
  .app-subtitle{font-size:12.5px}
  .layout{padding:var(--space-5) var(--space-4) var(--space-8); gap:var(--space-4)}
  .card__head{padding:var(--space-5) var(--space-4) var(--space-4)}
  .card__body{padding:var(--space-5) var(--space-4); gap:var(--space-5)}
  .card__title{font-size:18px}
  .field-row{grid-template-columns:1fr}   /* 横並びをやめて縦に積む */
  .preview-grid{grid-template-columns:1fr}
  .preview__thumb{aspect-ratio:4/5}
  .result{padding:var(--space-4)}
  .btn{min-height:56px}                   /* 指で押しやすい高さ */
  .select,.textarea{font-size:16px}       /* iOS の自動ズーム防止 */
  .app-footer{padding:0 var(--space-4) var(--space-6)}
}

/* 動きを減らす設定の端末では、アニメーションを控える */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
  .btn:hover{transform:none}
}