/* ================================================================
   style-shikaku.css – 四角い顔ジェネレータ テーマ上書き
   style.css の後に読み込む（色テーマ＋アンチエイリアス表示）。
   指定カラー：文字 #007143 / タブ内側 #FFFFFF / ページ背景 #ffae00
              枠 #35d392・#00ae68 / ナビ・フッタは共通(#4A4343)
   © 2012–2026 icongenerators.net / えいちぜろな
   ================================================================ */

:root {
  --orange:      #35d392;  /* 主ボタン・アクセント（明るい緑） */
  --orange-dark: #00ae68;  /* ボタン影・濃い緑 */
  --orange-bg:   #35d392;  /* ページ全体背景（薄い方の緑） */
  --brown-dark:  #00ae68;  /* 枠線・見出し */
  --panel-bg:    #ffffff;  /* タブ内側（パーツエリア） */
  --part-bg:     #eafff7;  /* サムネ／コントロール下地（淡い緑） */
  --part-sel:    #bff0dc;  /* タブ選択・ホバー */
  --border:      #35d392;  /* 枠線 */
  --text-dark:   #007143;  /* 白／淡色背景上の文字 */
  /* --text-light（白）はそのまま：緑ボタン上の文字に使用 */
}

/* ── パーツエリア（タブ内側）＝白地・緑文字・緑枠 ──────────── */
#parts-area {
  background: #ffffff;
  border-color: #35d392;
  color: #007143;
}
#parts-area .slot-label,
#parts-area .color-btn,
#parts-area .part-thumb.none-thumb,
#parts-area .ctrl-label,
#parts-area .move-label,
#parts-area .color-ctrl-label,
#parts-area .lang-alt-link {
  color: #007143;
}
/* 「なし」ボタンは白地なので暗い影は不要 */
#parts-area .part-thumb.none-thumb { text-shadow: none; }

/* タブボタン：白文字だと淡色背景で見えないので緑文字に（選択中は元の金色を維持） */
.tab-btn { color: #007143; }
.slot-label { border-bottom-color: rgba(0, 174, 104, 0.35) !important; }

/* スロットの選択中パネル：白地に合う淡い緑へ（元は黒半透明） */
.slot-group.active { background: rgba(0, 174, 104, 0.08); }

/* サムネ選択ハイライト */
.part-thumb.selected { box-shadow: 0 0 0 3px #00ae68; }
.part-thumb:hover    { box-shadow: 0 0 0 2px #35d392; }

/* ── 「ハイライト」スロットは白パーツが多く白地で見えないため、
      そのボタンの下だけ中間色の下地を敷く ──────────────────── */
#parts-area .slot-group[data-slot="high"] .part-thumb,
#parts-area .slot-group[data-slot="ear"] .part-thumb {
  background: #8fc9b2;
}
#parts-area .slot-group[data-slot="high"] .part-thumb.selected,
#parts-area .slot-group[data-slot="ear"] .part-thumb.selected {
  background: #57b393;
}

/* ── 左パネル（緑背景）：文字は白（例外）──────────────────── */
#app-title  { color: #FFFFFF; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.save-label { color: #FFFFFF; }

/* ── チェックボックス横の文言（白地パーツエリア内）は濃色に ──── */
#parts-area .lr-toggle-label,
#parts-area .lr-toggle-wrap label,
#parts-area .lr-toggle-wrap span,
#parts-area .hairmask-target-label,
#parts-area .hairmask-targets label,
#parts-area .hairmask-targets span { color: #007143; }

/* ── キャンバス／サムネは平滑表示（ドット絵ではない） ──────── */
#preview-canvas,
.thumb-canvas {
  image-rendering: auto;
}

/* プレビュー枠 */
#canvas-wrap { border-color: #00ae68; }

/* 横髪未選択でロックされた耳ボタン（選択不可） */
.part-thumb.thumb-locked {
  opacity: 0.35;
  pointer-events: none;
  filter: grayscale(0.5);
}

/* プレビュー＋回転UIをまとめる列（スマホでボタンと横並びを維持するため）*/
#preview-col { display: flex; flex-direction: column; align-items: center; }
@media (max-width: 600px) { #preview-col { flex: 0 0 auto; } }

/* 回転コントロール（プレビュー下） */
#rotate-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
  width: 100%;
}
#rot-title {
  font-size: 0.78rem;
  font-weight: bold;
  color: #FFFFFF;
}
#rot-ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
#rotate-row button { padding: 4px 14px; font-size: 1rem; }
#rot-label {
  min-width: 56px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: bold;
  color: #FFFFFF;
}

/* ── スタート画面（タイトルウィンドウ）：緑背景＋白文字 ──────── */
#start-card {
  background: #00ae68;        /* 枠色として指定した緑 */
  border-color: #007143;
}
#start-card h2 {
  color: #FFFFFF;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
#start-desc,
#start-desc li {
  color: #FFFFFF;
}
#start-desc li,
#start-desc li:first-child {
  border-color: rgba(255, 255, 255, 0.30);
}
#start-sample-img { image-rendering: auto; }
/* 進捗バー */
#start-progress-wrap { background: rgba(0, 0, 0, 0.25); }
#start-progress-bar  { background: #FFFFFF; }
/* スタートボタン：緑カード上でも目立つよう白文字 */
#btn-start {
  background: linear-gradient(180deg, #5fe3ad 0%, #00c277 100%);
  color: #FFFFFF;
}

/* ── 左右別色 / オッドアイ ポップアップ：薄い背景に濃い文字 ──── */
#lr-color-popup,
#odd-eye-popup {
  background: #ffffff;
  border-color: #35d392;
  color: #007143;
}
#lr-color-close,
#odd-eye-close { color: #007143; }

/* ── 不透明度UI（タイトル・ドット）を白地で見えるよう濃色に ──── */
.opacity-steps-label { color: #007143; }
.opacity-step-dot { border-color: #00ae68; }
.opacity-step-dot.active { background: #00ae68; border-color: #00ae68; }
.opacity-step-dot:hover:not(.active) { background: rgba(0, 174, 104, 0.25); }
.opacity-step-line { background: rgba(0, 174, 104, 0.45); }

/* ── 保存サイズ／形式 セレクトの文字を見えるように ──────────── */
#dl-size, #dl-format {
  color: #333333;
  background: #ffffff;
  border: 1px solid #35d392;
}

/* ── 一部ボタンはちびドットと共通の色 ────────────────────────── */
/* 画像を保存(#btn-save=#7D8531)・セーブ/ロード/レシピは app.js が共通色を注入。
   ギャラリーに投稿(.btn-submit) だけは shikaku テーマで緑になるため茶に戻す。 */
.btn-submit { background: #7A4E10; }                       /* ギャラリーに投稿（茶）*/
.btn-submit:hover:not(:disabled) { background: #C07818; }
/* 画像を保存・セーブ＝青 #6671ff（セーブはapp.jsが色を注入するため !important で上書き）*/
#btn-save, #btn-savecode {
  background: #6671ff !important;
  box-shadow: 0 3px 0 #4a55cc !important;
}
#btn-save:hover:not(:disabled),
#btn-savecode:hover:not(:disabled) { background: #7b85ff !important; }

/* ── アンドゥ／リドゥ：淡色＋白文字で見えないので緑地・白文字に ──── */
.btn-undo-redo {
  background: #00ae68;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.6);
}
.btn-undo-redo:hover:not(:disabled) { background: #35d392; }
.btn-undo-redo:disabled { opacity: 0.4; }

/* ── 生成ページ下部フッター（緑地）：白文字で読めるように ──── */
#app-footer { color: #FFFFFF; opacity: 0.95; }
#app-footer a,
#app-footer a:link,
#app-footer a:visited { color: #FFFFFF; }
.app-footer-sep { margin: 0 8px; opacity: 0.7; }