/* ============================================================
   article-deco.css — 記事エディター(T48)の文字装飾と記事パーツ
   公開ページ(本文に部品があるときだけ読み込む)・管理者プレビュー・管理画面のエディターで同じものを使う。
   文字色とマーカーは決められたパレットのクラスだけ(任意の style 属性は保存時に取り除く。server/app/Admin/HtmlSanitizer.php と同じ一覧)。
   色は style.css / admin.css の :root のトークン(--c-*)と、下の :root(装飾専用のトークン)だけを使う。HEX の直書きはしない(T87)。
   ============================================================ */

/* ---- 文字色(パレット) */
.kg-color--red    { color: var(--c-shu); }
.kg-color--blue   { color: var(--c-deco-blue); }
.kg-color--green  { color: var(--c-deco-green); }
.kg-color--orange { color: var(--c-deco-orange); }
.kg-color--gray   { color: var(--c-gray); }
.kg-color--black  { color: var(--c-ink); }

/* ---- マーカー(文字の下側の蛍光ペン風の帯) */
.kg-marker--yellow, .kg-marker--pink, .kg-marker--blue, .kg-marker--green {
  padding: 0 0.05em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.kg-marker--pink   { background: linear-gradient(transparent 58%, var(--c-marker-pink) 58%); }
.kg-marker--blue   { background: linear-gradient(transparent 58%, var(--c-marker-blue) 58%); }
.kg-marker--green  { background: linear-gradient(transparent 58%, var(--c-marker-green) 58%); }
/* 黄色は下の T86 の段(--c-highlight-strong) */

/* ---- 区切り */
.article-body hr, .ed-canvas hr { border: 0; border-top: 1px solid var(--c-rule); margin: 2.2em 0; }

/* ---- 画像(メディアライブラリ)。縦横比を保ち、スマホでははみ出さない */
.kg-figure { margin: 1.6em auto; max-width: 100%; }
.kg-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius, 6px); }
.kg-figure figcaption { margin-top: 6px; font-size: 0.82rem; text-align: center; line-height: 1.6; }
.kg-figure--s { width: 34%; }
.kg-figure--m { width: 66%; }
.kg-figure--l, .kg-figure--full { width: 100%; }
.kg-figure--center { margin-left: auto; margin-right: auto; }
.kg-figure--left { margin-left: 0; margin-right: auto; }
.kg-figure--right { margin-left: auto; margin-right: 0; }
@media (min-width: 640px) {
  .kg-figure--s.kg-figure--left, .kg-figure--m.kg-figure--left { float: left; margin: 0.3em 1.4em 1em 0; }
  .kg-figure--s.kg-figure--right, .kg-figure--m.kg-figure--right { float: right; margin: 0.3em 0 1em 1.4em; }
  .article-body h2, .article-body h3, .article-body table, .article-body .kg-box, .article-body .kg-balloon,
  .ed-canvas h2, .ed-canvas h3 { clear: both; }
}
@media (max-width: 639px) {
  .kg-figure--s { width: 60%; }
  .kg-figure--m { width: 100%; }
}
.article-body::after { content: ""; display: table; clear: both; }

/* ---- 補足・注意・ポイントのボックス */
.kg-box { margin: 1.6em 0; padding: 14px 18px; border: 1px solid; border-left-width: 5px; border-radius: 4px; }
.kg-box p { margin: 0; }
.kg-box p + p { margin-top: 0.4em; }
.kg-box__title { font-weight: 700; }
/* 補足・注意・ポイントの色は下の T86 の段 */

/* ---- 吹き出し */
.kg-balloon { display: flex; align-items: flex-start; gap: 12px; margin: 1.6em 0; }
.kg-balloon--right { flex-direction: row-reverse; }
.kg-balloon__who { flex: 0 0 64px; text-align: center; font-size: 0.72rem; line-height: 1.4; color: var(--c-ink-2); }
.kg-balloon__icon { display: block; width: 56px; height: 56px; margin: 0 auto 4px; object-fit: cover; border-radius: 50%; border: 1px solid var(--c-rule); }
.kg-balloon__name { display: block; overflow-wrap: anywhere; }
.kg-balloon__text { position: relative; flex: 1 1 auto; min-width: 0; padding: 12px 16px; background: var(--c-card); border: 1px solid var(--c-rule); border-radius: 12px; }
.kg-balloon__text::before { content: ""; position: absolute; top: 18px; width: 10px; height: 10px; background: inherit; border: inherit; border-width: 0 0 1px 1px; }
.kg-balloon--left .kg-balloon__text::before { left: -6px; transform: rotate(45deg); }
.kg-balloon--right .kg-balloon__text::before { right: -6px; transform: rotate(-135deg); }

/* ---- リンクボタン */
.kg-btn-wrap { margin: 1.6em 0; text-align: center; }
.kg-btn {
  display: inline-block; min-height: 44px; padding: 11px 28px; border-radius: 999px; border: 2px solid;
  font-weight: 700; line-height: 1.5; text-decoration: none !important; max-width: 100%; overflow-wrap: anywhere;
}
.kg-btn--primary { color: var(--c-card) !important; }
/* 地・枠・文字の色は下の T86 の段 */

/* ---- 関連記事カード(本文中) */
.kg-related {
  display: flex; gap: 14px; align-items: center; margin: 1.6em 0; padding: 12px; border: 1px solid;
  border-radius: 6px; background: var(--c-card); color: var(--c-ink) !important; text-decoration: none !important;
}
.kg-related__thumb { flex: 0 0 112px; }
.kg-related__img { display: block; width: 112px; height: 75px; object-fit: cover; border-radius: 4px; }
.kg-related__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kg-related__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; }
.kg-related__title { font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.kg-related__desc { font-size: 0.82rem; line-height: 1.6; }
@media (max-width: 480px) {
  .kg-related__thumb { flex-basis: 84px; }
  .kg-related__img { width: 84px; height: 60px; }
  .kg-related__desc { display: none; }
}

/* ============================================================
   T86 明るいグルメ雑誌の配色に合わせた調整と、料理紹介カード(部品 dishes)
   色は style.css の :root と同じトークン。管理画面(エディター)は style.css を読まないため、ここでも同じ値を定義する(値は style.css と必ずそろえる)
   ============================================================ */
:root {
  /* T87: 値は style.css の :root と同じ(管理画面は style.css を読まないため、ここでも定義する。rgb 表記) */
  --c-cream: rgb(255, 249, 239);
  --c-ink-warm: rgb(48, 42, 36);
  --c-ink-warm-2: rgb(106, 95, 85);
  --c-orange: rgb(237, 133, 59);
  --c-orange-deep: rgb(168, 74, 18);
  --c-orange-soft: rgb(253, 238, 224);
  --c-green: rgb(54, 130, 91);
  --c-green-deep: rgb(46, 112, 80);
  --c-green-soft: rgb(234, 244, 236);
  --c-highlight: rgb(255, 241, 191);
  --c-highlight-strong: rgb(255, 227, 138);
  --c-rule-warm: rgb(239, 228, 210);
  /* 装飾専用(文字色パレット・マーカー。エディターの装飾メニューと同じ一覧) */
  --c-deco-blue: rgb(31, 87, 184);
  --c-deco-green: rgb(30, 115, 64);
  --c-deco-orange: rgb(180, 83, 9);
  --c-marker-pink: rgb(255, 196, 214);
  --c-marker-blue: rgb(184, 228, 255);
  --c-marker-green: rgb(211, 242, 166);
}

/* 黄色のマーカー: 淡い黄色(重要な短いフレーズだけに。各節 1〜2 か所まで) */
.kg-marker--yellow { background: linear-gradient(transparent 55%, var(--c-highlight-strong) 55%); }

/* 補足・注意・ポイント: 小さなアイコン + 短いラベル(色だけで意味を伝えない) */
.kg-box { border-width: 1px; border-left-width: 5px; border-radius: 12px; }
.kg-box--note  { border-color: var(--c-green); background: var(--c-green-soft); }
.kg-box--note .kg-box__title { color: var(--c-green-deep); }
.kg-box--warn  { border-color: var(--c-orange); background: var(--c-orange-soft); }
.kg-box--warn .kg-box__title { color: var(--c-orange-deep); }
.kg-box--point { border-color: var(--c-highlight-strong); background: var(--c-highlight); }
.kg-box--point .kg-box__title { color: var(--c-ink-warm); }
.kg-box__title { display: flex; align-items: center; gap: 6px; }
.kg-box__title::before {
  content: ""; flex: none; width: 1.15em; height: 1.15em; background: currentColor;
  -webkit-mask: var(--kg-icon) center / contain no-repeat; mask: var(--kg-icon) center / contain no-repeat;
}
.kg-box--note .kg-box__title { --kg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.6v.1'/%3E%3C/svg%3E"); }
.kg-box--warn .kg-box__title { --kg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9.5 17h-19z'/%3E%3Cpath d='M12 10v5M12 17.8v.1'/%3E%3C/svg%3E"); }
.kg-box--point .kg-box__title { --kg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16.2 9.6'/%3E%3C/svg%3E"); }
/* リンクボタン: 目立つ = 濃いオレンジ地に白(5.7:1)、控えめ = 白地に濃いオレンジ */
.kg-btn { border-color: var(--c-orange-deep); }
.kg-btn--primary { background: var(--c-orange-deep); }
.kg-btn--primary:hover { background: var(--c-ink-warm); border-color: var(--c-ink-warm); }
.kg-btn--secondary { background: var(--c-card); color: var(--c-orange-deep) !important; border-color: var(--c-orange); }
.kg-btn--secondary:hover { background: var(--c-orange-soft); }

/* 本文中の関連記事カード・画像 */
.kg-related { border-color: var(--c-rule-warm); border-radius: 12px; }
.kg-related:hover { border-color: var(--c-green); }
.kg-related__label { color: var(--c-orange-deep); }
.kg-related__desc { color: var(--c-ink-warm-2); }
.kg-figure img { border-radius: 14px; }
.kg-figure figcaption { color: var(--c-ink-warm-2); }

/* 料理紹介カード: 写真・料理名・短い説明。PC 2〜3 列、スマホ 1 列(説明は小さくしすぎない) */
.kg-dishes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin: 1.6em 0; }
.kg-dish { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--c-card); border: 1px solid var(--c-rule-warm); border-radius: 14px; }
.kg-dish > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.kg-dish--text { border-top: 4px solid var(--c-orange); }
/* T87: 写真の無い料理カード = クリームの地 + 丼のアイコン + 中央ぞろえの料理名(写真が届くまでの形。空の写真枠は出さない) */
.kg-dish--text {
  background: var(--c-cream); text-align: center;
  --kg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11h18a9 9 0 0 1-18 0z'/%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M9 3.5c-1 1.5 1 2.5 0 4.5M13 3c-1 1.5 1 2.5 0 4.5M17 3.5c-1 1.5 1 2.5 0 4.5'/%3E%3C/svg%3E");
}
.kg-dish--text::before {
  content: ""; display: block; width: 44px; height: 44px; margin: 16px auto 2px; background: var(--c-orange);
  -webkit-mask: var(--kg-icon) center / contain no-repeat; mask: var(--kg-icon) center / contain no-repeat;
}
.kg-dish--text .kg-dish__name { padding-top: 6px; }
/* 記事ページの段落の余白(.section--article .article-body p)を料理カードの中では使わない */
.section--article .article-body .kg-dish__name, .section--article .article-body .kg-dish__desc { margin: 0; }
.section--article .article-body .kg-dish__note { margin: auto 0 0; }
.article-body .kg-dish__name, .ed-canvas .kg-dish__name, .kg-dish__name {
  margin: 0; padding: 10px 14px 0; font-family: var(--font-round, inherit); font-weight: 700; font-size: 1.05rem; line-height: 1.5; color: var(--c-orange-deep);
}
.article-body .kg-dish__desc, .kg-dish__desc { margin: 0; padding: 4px 14px 14px; font-size: 0.94rem; line-height: 1.75; color: var(--c-ink-warm); }
.article-body .kg-dish__note, .kg-dish__note { margin: auto 0 0; padding: 0 14px 10px; font-size: 0.74rem; line-height: 1.4; color: var(--c-ink-warm-2); text-align: right; }
@media (max-width: 559px) {
  .kg-dishes { grid-template-columns: minmax(0, 1fr); }
}