/* ==========================================================
   全体設定
   ========================================================== */
:root {
  --color-bg: #f6f8fb;
  --color-surface: #ffffff;
  --color-text: #223047;
  --color-text-light: #5b6b83;
  --color-primary: #3a6df0;
  --color-primary-dark: #2851c4;
  --color-border: #d7e0ee;
  --color-code-bg: #1f2733;
  --color-code-text: #e8edf5;

  --box-color-1: #f7a8b8;
  --box-color-2: #a8e6df;
  --box-color-3: #ffd3a0;
  --box-color-4: #aac4f7;
  --box-color-5: #d8bdf2;
  --box-color-6: #a8ddd0;
  --box-color-7: #f5c4ab;
  --box-color-8: #bdcde0;

  --box-text: #2c3550;
}

* {
  box-sizing: border-box;
}

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

h1, h2, h3 {
  line-height: 1.4;
  color: var(--color-text);
}

h2 {
  font-size: 1.5rem;
  border-left: 6px solid var(--color-primary);
  padding-left: 0.6rem;
  margin-bottom: 1rem;
}

h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

code {
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  background-color: #eef2fa;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.92em;
}

main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ==========================================================
   1. ヘッダー
   ========================================================== */
.page-header {
  background-color: #ae8cbb;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.6) 2.5px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 255, 255, 0.6) 2.5px, transparent 2.5px);
  background-size: 22px 22px;
  background-position: 0 0, 11px 11px;
  color: #fff;
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.page-header h1 {
  color: #fff;
  margin: 0 0 0.6rem;
  font-size: 1.9rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.page-header p {
  margin: 0;
  font-size: 1rem;
  opacity: 0.95;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ==========================================================
   セクション共通
   ========================================================== */
.content-section {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.8rem;
  margin: 2rem 0;
  box-shadow: 0 2px 6px rgba(20, 40, 80, 0.05);
}

.key-point {
  background-color: #f0e15b;
  border: 1px solid #ffdf99;
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin-top: 1.2rem;
  font-size: 0.98rem;
}

.compare-caption {
  color: var(--color-text-light);
  font-size: 0.92rem;
}

/* ==========================================================
   2. Flexboxの基本説明
   ========================================================== */
.compare-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1rem;
}

.compare-item {
  flex: 1 1 300px;
  background-color: #fbfcfe;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1.2rem;
}

.box {
  padding: 0.7rem 1rem;
  border-radius: 6px;
  color: var(--box-text);
  font-weight: bold;
  text-align: center;
}

.box-red {
  background-color: var(--box-color-1);
}

.box-blue {
  background-color: var(--box-color-4);
}

.box-green {
  background-color: var(--box-color-6);
}

/* Flexboxを使わない場合：初期状態のまま（ブロック要素なので縦に並ぶ） */
.no-flex-parent {
  border: 2px dashed #b7c3d8;
  border-radius: 8px;
  padding: 0.8rem;
}

.no-flex-parent .box {
  margin-bottom: 0.6rem;
}

.no-flex-parent .box:last-child {
  margin-bottom: 0;
}

/* Flexboxを使った場合：親要素に display: flex を指定して横並びにする */
.flex-parent-demo {
  display: flex;
  gap: 0.8rem;
  border: 2px dashed var(--color-primary);
  border-radius: 8px;
  padding: 0.8rem;
}

.flex-parent-demo .box {
  flex: 1;
}

.mini-code {
  background-color: var(--color-code-bg);
  color: var(--color-code-text);
  padding: 0.8rem 1rem;
  border-radius: 8px;
  font-size: 0.88rem;
  overflow-x: auto;
  margin: 0.6rem 0;
}

/* ページ共通のcodeタグ用スタイル（薄い背景・パディング）を、
   ここでは複数行にまたがるコード表示なので打ち消しておく */
.mini-code code {
  background-color: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* ==========================================================
   3〜4. 操作パネル / 色付きプレビュー
   ========================================================== */
.playground {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.control-panel {
  flex: 0 0 280px;
  background-color: #fbfcfe;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1.2rem;
}

.control-item {
  margin-bottom: 1rem;
}

.control-item label {
  display: block;
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color-text-light);
  margin-bottom: 0.35rem;
}

.control-item select,
.control-item input[type="number"] {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.95rem;
  background-color: #fff;
  color: var(--color-text);
}

.control-item input[type="range"] {
  width: 100%;
  height: 2rem;
}

.preview-area {
  flex: 1 1 auto;
  min-width: 0;
}

.preview-frame {
  position: relative;
  border: 3px dashed var(--color-primary);
  border-radius: 10px;
  background-color: #f4f8ff;
  padding: 1.8rem 0.8rem 0.8rem;
}

.parent-label {
  position: absolute;
  top: -0.9rem;
  left: 0.8rem;
  background-color: var(--color-primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: bold;
  padding: 0.15rem 0.6rem;
  border-radius: 10px;
}

.axis-label {
  position: absolute;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--color-primary-dark);
  background-color: rgba(255, 255, 255, 0.85);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

.axis-main {
  top: 0.4rem;
  right: 0.8rem;
}

.axis-cross {
  bottom: 0.4rem;
  right: 0.8rem;
}

.flex-container {
  display: flex;
  width: 100%;
  overflow: auto;
}

.flex-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-width: 70px;
  min-height: 50px;
  padding: 0.8rem;
  border-radius: 8px;
  color: var(--box-text);
  font-weight: bold;
  text-align: center;
}

.flex-item-name {
  font-size: 1rem;
}

/* この箱が対応するCSSセレクタ（HTML内でのnth-child位置）を示す */
.flex-item-selector {
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: normal;
  opacity: 0.9;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

.layout-description {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  background-color: #eef4ff;
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--color-text);
}

/* ==========================================================
   5. CSSコード表示
   ========================================================== */
.code-box {
  position: relative;
  background-color: var(--color-code-bg);
  border-radius: 10px;
  padding: 1.2rem;
}

.code-box pre {
  margin: 0;
  color: var(--color-code-text);
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 0.92rem;
  overflow-x: auto;
  white-space: pre;
}

/* ページ共通のcodeタグ用スタイル（薄い背景・パディング）を、
   ここでは複数行にまたがるコード表示なので打ち消しておく */
.code-box pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* コードを選択したとき、暗い背景でも文字が読めるようにする */
.code-box pre::selection,
.code-box pre ::selection {
  background-color: rgba(58, 109, 240, 0.5);
  color: var(--color-code-text);
}

.copy-button {
  margin-top: 1rem;
  padding: 0.5rem 1.1rem;
  background-color: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.92rem;
  cursor: pointer;
}

.copy-button:hover {
  background-color: var(--color-primary-dark);
}

.copy-message {
  margin-left: 0.8rem;
  color: #8ce0a0;
  font-size: 0.9rem;
}

/* ==========================================================
   6. 主軸と交差軸
   ========================================================== */
.axis-explain-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.axis-explain-item {
  flex: 1 1 260px;
}

/* ==========================================================
   7. 子要素側のFlex設定
   ========================================================== */
.item-settings-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
}

.item-setting-card {
  flex: 1 1 220px;
  border-radius: 10px;
  padding: 1rem;
  color: var(--box-text);
}

.item-setting-1 {
  background-color: var(--box-color-1);
}

.item-setting-2 {
  background-color: var(--box-color-4);
}

.item-setting-3 {
  background-color: var(--box-color-6);
}

.item-setting-card h3 {
  color: var(--box-text);
}

.item-setting-card .control-item label {
  color: var(--box-text);
  opacity: 0.85;
}

.item-setting-card .control-item input[type="number"] {
  border: none;
}

.item-preview-frame {
  border: 3px dashed var(--color-primary);
  border-radius: 10px;
  background-color: #f4f8ff;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.item-flex-container {
  display: flex;
  gap: 0.6rem;
}

.item-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  border-radius: 8px;
  color: var(--box-text);
  font-weight: bold;
}

.item-box-1 {
  background-color: var(--box-color-1);
}

.item-box-2 {
  background-color: var(--box-color-4);
}

.item-box-3 {
  background-color: var(--box-color-6);
}

.property-explain-list {
  margin-top: 1.2rem;
  padding-left: 1.4rem;
}

.property-explain-list li {
  margin-bottom: 0.4rem;
}

/* ==========================================================
   8. 実用レイアウト作例
   ========================================================== */
.example-block {
  margin-bottom: 2rem;
}

.example-block:last-child {
  margin-bottom: 0;
}

/* 作例1：ヘッダー */
.example-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #eef4ff;
  border-radius: 8px;
  padding: 1rem 1.2rem;
}

.site-name {
  font-weight: bold;
  color: var(--color-primary-dark);
}

.menu-button {
  padding: 0.5rem 1rem;
  background-color: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* 作例2：カードの横並び */
.example-card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.example-card {
  flex: 1 1 180px;
  background-color: var(--box-color-3);
  color: var(--box-text);
  border-radius: 8px;
  padding: 1.5rem 1rem;
  text-align: center;
  font-weight: bold;
}

/* 作例3：管理画面のサイドバー */
.example-admin-layout {
  display: flex;
  min-height: 220px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.example-sidebar {
  width: 200px;
  flex-shrink: 0;
  background-color: #2a3a5c;
  color: #fff;
  padding: 1rem;
  font-weight: bold;
}

.example-main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.example-main-header {
  background-color: #dbe6fb;
  padding: 0.8rem 1rem;
  font-weight: bold;
}

.example-main-content {
  flex: 1;
  background-color: #f5f8ff;
  padding: 1rem;
}

/* 作例4：中央配置 */
.example-center-layout {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 160px;
  background-color: #eef4ff;
  border-radius: 8px;
}

.example-center-box {
  background-color: var(--color-primary);
  color: #fff;
  font-weight: bold;
  padding: 1rem 2rem;
  border-radius: 8px;
}

/* ==========================================================
   フッター
   ========================================================== */
.page-footer {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-text-light);
  font-size: 0.88rem;
}

/* ==========================================================
   レスポンシブ対応
   ========================================================== */
@media (max-width: 760px) {
  .playground {
    flex-direction: column;
  }

  .control-panel {
    flex: 1 1 auto;
    width: 100%;
  }

  .page-header h1 {
    font-size: 1.5rem;
  }

  .content-section {
    padding: 1.2rem;
  }

  .example-admin-layout {
    flex-direction: column;
  }

  .example-sidebar {
    width: 100%;
  }
}