/* メッセージカードの本文とプレビュー（2026-10-23）。商品ページの「メッセージカード（有料:110円/枚）」欄 */

/* PC・スマホとも「本文の欄 → プレビュー」の上下1列（2026-10-24 矢野さん指示。プレビューは本文の欄と同じ幅） */
.mc-form__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}
@media (max-width: 750px) {
  .mc-form__body {
    gap: 1.6rem;
  }
}
/* スクリプトが動かない・字幅表が読めないときは、本文の欄だけ（プレビューと字数の表示を出さない） */
.mc-form:not(.mc-form--ready) .mc-form__preview,
.mc-form:not(.mc-form--ready) .mc-form__status,
.mc-form:not(.mc-form--ready) .mc-form__note {
  display: none;
}

/* 本文の欄（サイト共通の入力欄の見た目は残し、入力しやすい行間と、スマホで拡大されない 16px にする） */
.page-detail .section-orderform form dl dd textarea.mc-form__textarea {
  min-height: 15rem;
  padding: 0.6em 0.7em;
  font-size: 16px;
  line-height: 1.7;
}
.page-detail .section-orderform form dl dd .mc-form--error textarea.mc-form__textarea {
  border-color: #ad1617;
}
.mc-form__status {
  margin-top: 0.6rem;
  font-size: 13px;
  color: #514a3f;
}
.mc-form__status--over {
  color: #ad1617;
  font-weight: 600;
}
.mc-form__note {
  margin-top: 0.3rem;
  font-size: 12.5px;
  color: #8a5300;
}
.mc-form__note:empty {
  display: none;
}
/* 知らせの一覧（dd の ul li に付く 2.5rem の下余白を打ち消す） */
.page-detail .section-orderform form dl dd ul.mc-form__problems {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}
.page-detail .section-orderform form dl dd ul.mc-form__problems li {
  margin: 0 0 0.4rem;
  font-size: 13px;
  line-height: 1.6;
  color: #ad1617;
}
.mc-form__problems:empty {
  display: none;
}

/* ---- プレビュー（A5横の台紙＋印刷どおりの文字） ---- */
/* 見出しを大きくし、左に赤の縦線を付けてプレビューの欄だと分かるようにする（2026-10-24 矢野さん指示） */
.mc-form__preview-title {
  margin-bottom: 0.8rem;
  padding-left: 0.6em;
  border-left: 4px solid #ad1617;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #141414;
}
@media (max-width: 750px) {
  .mc-form__preview-title {
    font-size: 16px;
  }
}
/* 幅 320px 前後でも見出しを1行に収める（18字＋左の線） */
@media (max-width: 359px) {
  .mc-form__preview-title {
    font-size: 14.5px;
  }
}
.mc-card {
  position: relative;
  width: 100%;
  aspect-ratio: 210 / 148;
  overflow: hidden;
  border: 1px solid #ddd5c6;
  background-color: #fbf9f4;
  /* 台紙（A5横・柄入り・2026-10-24 受け取り）。受け取った画像の仕上がり線（内トンボ）の内側を sRGB に直し、A5 の比率の 1036×730 にしたもの。
     印刷用 PDF は文字だけで、この台紙に刷る。画像を差し替えたら ? の後ろ（中身の sha256 の先頭8桁）も変える＝ブラウザが前の画像を使い続けない */
  background-image: url("../img/product/message_card/card.webp?6f4ecc08");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: 0 2px 8px rgba(60, 45, 20, 0.12);
}
.mc-card__svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* 字の位置は message_card.js が1字ずつ決める（PDF と同じ字幅・字間）。ブラウザの詰めや合字で位置を変えない */
.mc-card__text {
  font-family: "GyubeeMessageCard", serif;
  font-weight: 600;
  fill: #141414;
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "kern" 0, "liga" 0, "palt" 0;
}
.mc-card__text text {
  white-space: pre;
}
/* 見本を出せないとき（未入力・お知らせがあるとき）のひとこと */
.mc-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 2em;
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  color: #8f8576;
  pointer-events: none;
}
.mc-card--drawn .mc-card__placeholder {
  display: none;
}
.mc-form__caption {
  margin-top: 0.6rem;
  font-size: 11.5px;
  color: #6b6255;
}
.page-detail .section-orderform form dl dd .mc-form .hosoku {
  margin-top: 1.6rem;
}