/* 3chara_break_tool externalized 2026-09-18 */
/* 3キャラ用追加 */
.chip-c{background:#e3f7ff;color:#166a9c;border-color:#9dd8f3;}
.badge-c-char{background:#1e90d4;color:#fff;}
.chara-grid-3{display:grid;gap:16px;grid-template-columns:1fr;}
@media(min-width:900px){.chara-grid-3{grid-template-columns:1fr 1fr 1fr;}}

/* 2char/3char 統一 Flexbox レイアウト */
.kakko-flex{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start;justify-content:center;margin:15px 0;}
.kakko-flex>div{flex:1 1 320px;min-width:280px;}
.kakko-flex textarea{width:100%;min-height:220px;box-sizing:border-box;}
@media(max-width:900px){.kakko-flex{flex-direction:column;}}

/* switcher */
.break-switcher{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0;}
.break-switcher .break-link{padding:6px 12px;border-radius:999px;background:#eef2ff;color:#0066cc;border:1px solid #c7d2fe;text-decoration:none;font-weight:600;font-size:0.85em;}
.break-switcher .break-link:hover{background:#dbe4ff;color:#004499;}
.break-switcher .break-link.active{background:#5b5bff;color:#fff;pointer-events:none;}

/* =========================================================
   2026-09-19 ページ別薄色背景（#fff7ed）
   ========================================================= */
body {
    background-color: #fff7ed !important;
    color: #111111 !important;
}
/* 3chara BREAK - ライトテーマ最終補正 */

html {
  background: #f8f9fc !important;
}

body {
  min-width: 320px;
  margin: 0;
  background: #f8f9fc !important;
  color: #202124 !important;
}

body > nav,
body > header,
body > h1,
body > .site-header,
body > .page-header {
  width: min(100% - 32px, 1080px) !important;
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body > nav {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}

body > h1,
body > header h1,
body > .site-header h1,
body > .page-header h1 {
  margin-top: 16px;
  margin-bottom: 16px;
  color: #202124 !important;
}

main,
main.container,
.container,
.main-container,
.layout-container {
  width: min(100% - 32px, 1080px) !important;
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

textarea,
input[type="text"],
input[type="search"],
input[type="url"],
select {
  color: #202124 !important;
  background: #ffffff !important;
  caret-color: #202124 !important;
}

textarea::placeholder,
input::placeholder {
  color: #6b7280 !important;
  opacity: 1 !important;
}

.prompt-output,
.output,
.result,
.tag,
.tag-chip,
.chip,
.token {
  color: #202124 !important;
}

/* ============================================================
   3chara BREAK - ヘッダー幅・ナビ位置整形パッチ
   ============================================================ */

body > nav,
body > header,
body > h1,
body.page-3chara-break > h1,
#common-nav-container,
.site-header,
.page-header {
  width: min(100% - 32px, 1080px) !important;
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body > h1,
body.page-3chara-break > h1 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
  color: #202124 !important;
  text-align: left;
}

@media (max-width: 600px) {
  body > nav,
  body > header,
  body > h1,
  body.page-3chara-break > h1,
  #common-nav-container {
    width: calc(100% - 20px) !important;
  }
}

/* ============================================================
   3chara BREAK - ヘッダー幅・ナビ位置整形パッチ
   ============================================================ */

body > nav,
body > header,
body > h1,
body.page-3chara-break > h1,
#common-nav-container,
.site-header,
.page-header {
  width: min(100% - 32px, 1080px) !important;
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body > h1,
body.page-3chara-break > h1 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
  color: #202124 !important;
  text-align: left;
}

@media (max-width: 600px) {
  body > nav,
  body > header,
  body > h1,
  body.page-3chara-break > h1,
  #common-nav-container {
    width: calc(100% - 20px) !important;
  }
}

/* ==========================================================================
   ✨ Tag Chips & Drop Zone Layout (3chara_break_ui.js 準拠)
   ========================================================================== */
#chips-a, #chips-b, #chips-c, #chips-common, #chips-neg,
.chip-container, .drop-zone {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 8px !important;
  min-height: 48px;
  padding: 8px 12px;
  background-color: rgba(248, 250, 252, 0.8);
  border: 1.5px dashed #cbd5e1;
  border-radius: 8px;
  align-items: center;
  transition: background-color 0.2s, border-color 0.2s;
}

/* ドラッグオーバー時のハイライト */
.drag-over {
  background-color: #f0fdf4 !important;
  border-color: #22c55e !important;
  border-style: solid !important;
}

/* チップ基本スタイル */
.chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid transparent;
  user-select: none;
  cursor: grab;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: transform 0.1s, opacity 0.1s, box-shadow 0.1s;
}

.chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.chip.dragging {
  opacity: 0.4;
  cursor: grabbing;
}

/* ゾーン別カラーリング（キャラA: 青 / キャラB: 緑 / キャラC: 紫 / 共通: 灰色 / ネガティブ: 赤） */
.chip-a {
  background-color: #eff6ff !important;
  color: #1e40af !important;
  border-color: #bfdbfe !important;
}

.chip-b {
  background-color: #f0fdf4 !important;
  color: #166534 !important;
  border-color: #bbf7d0 !important;
}

.chip-c {
  background-color: #faf5ff !important;
  color: #6b21a8 !important;
  border-color: #e9d5ff !important;
}

.chip-cm {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}

.chip-neg {
  background-color: #fef2f2 !important;
  color: #991b1b !important;
  border-color: #fecaca !important;
}

/* 削除ボタン × */
.chip-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
  border-radius: 50%;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.15s, background-color 0.15s;
}

.chip-del:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
}