@import url("https://fonts.googleapis.com/css2?family=Yomogi&family=Zen+Kurenaido&family=Klee+One:wght@600&family=Hachi+Maru+Pop&family=Yuji+Syuku&family=Shippori+Mincho:wght@600&display=swap");

/* =========================================================================
   メッセージ (寄せ書き)
   飾りと枠は 画像を使わず SVG / グラデーションで描く。
   端末やブラウザで見た目が変わらず、 印刷しても崩れないため。
   ========================================================================= */

.msg-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.msg-head h2 { margin:0; font-size:1.05rem; }
.msg-head-r  { display:flex; align-items:center; gap:8px; }
.msg-to      { margin:4px 0 0; font-size:0.9rem; }
.msg-to .muted { margin-left:6px; font-size:0.8rem; }

.msg-state { font-size:0.78rem; font-weight:600; padding:3px 10px; border-radius:999px;
             background:#fff3e0; color:#c26a12; white-space:nowrap; }
.msg-state.is-sent { background:#e6f4ea; color:#1b7a3d; }

.msg-sec { margin:0 0 10px; font-size:0.95rem; }
.msg-cnt { font-size:0.82rem; font-weight:600; color:#666; margin-left:6px; }

/* ---- 一覧 ---- */
.msg-list { list-style:none; margin:0; padding:0; }
.msg-list li + li { border-top:1px solid #eee; }
.msg-list a { display:flex; align-items:center; gap:10px; padding:11px 4px;
              text-decoration:none; color:inherit; flex-wrap:wrap; }
.msg-list a:hover { background:#fafafa; }
.msg-list-t  { font-weight:600; }
.msg-list-to { font-size:0.82rem; color:#666; }
.msg-list-st { margin-left:auto; font-size:0.76rem; font-weight:600;
               padding:2px 9px; border-radius:999px; background:#fff3e0; color:#c26a12; white-space:nowrap; }
.msg-list-st.is-sent { background:#e6f4ea; color:#1b7a3d; }

/* =========================================================================
   カード本体
   ========================================================================= */
/* カードは 320x256 を基準にした「1枚の絵」。
   幅が変わっても **中身ごと同じ比率で拡大縮小** させたいので、
   文字も余白も飾りも カードの幅に対する割合 (cqi) で決める。
   こうしないと 枠だけ縮んで 文字だけ元の大きさのまま残り、
   画面幅で改行位置や飾りの相対位置が変わってしまう
   (= 書いた人が見ているものと 受け取った人が見るものが 違う)。

   cqi が使えないブラウザ (iOS 15 以前など) のために、
   同じ指定を px で先に書いておく。 古い環境では従来どおりの見え方になる。 */
.mcard {
  --mink: #3b3226;              /* 文字の色 (枠ごとに上書きする) */
  /* A4 に 横4×縦5 で収まる比率。
       A4(210x297) - 余白10mm = 190x277mm、 見出し 13mm、 すき間 3mm のとき
         カード幅 = (190 - 3*3) / 4 = 45.25mm
         カード高 = 45.25 / 0.9    = 50.28mm  → 5段 + すき間4本 = 263.4mm ≦ 264mm
       画面でも同じ 9:10 にして、 印刷・PDF と見え方をそろえる。 */
  position:relative; width:100%; max-width:300px; aspect-ratio:9/10;
  border-radius:14px; overflow:hidden; box-sizing:border-box;
  box-shadow:0 2px 10px rgba(0,0,0,0.10);
  font-family:var(--mfont, serif); color:var(--mink);
  container-type:inline-size;   /* 中の cqi の基準になる */
}
.mcard-in { position:absolute; inset:0;
            padding:20px 20px 30px;
            padding:6.25cqi 6.25cqi 9.4cqi;
            display:flex; flex-direction:column; box-sizing:border-box; }
.mcard-body { margin:0; flex:1; line-height:1.65;
              font-size:16.3px;
              font-size:5.1cqi;
              overflow:hidden; word-break:break-word; white-space:normal; }
.mcard-sign { position:absolute; z-index:2;
              right:16px; bottom:12px; font-size:12.8px;
              right:5cqi; bottom:3.75cqi; font-size:4cqi;
              opacity:0.85; }
.mcard-items { position:absolute; inset:0; pointer-events:none; }

.mitem { position:absolute;
         width:30px; height:30px; margin:-15px 0 0 -15px;
         width:9.4cqi; height:9.4cqi; margin:-4.7cqi 0 0 -4.7cqi;
         transform:rotate(var(--r,0deg)) scale(var(--s,1)); pointer-events:none; }
.mitem svg { width:100%; height:100%; display:block; }
.mitem--heart   svg { fill:#ef6d8a; }
.mitem--star    svg { fill:#f5c02c; }
.mitem--flower  svg { fill:#f0a5c8; }
.mitem--note    svg { fill:#6aa8e8; }
.mitem--ribbon  svg { fill:#e3705f; }
.mitem--sparkle svg { fill:#f2b705; }

/* ---- 枠 6種 ---- */
/* f1 ドット */
.mcard--f1 { --mink:#5a4632; background:#fffaf0;
  background-image:radial-gradient(#f3d9a4 1.6px, transparent 1.7px);
  background-size:16px 16px;
  background-size:5cqi 5cqi;
  border:3px dashed #efc978; }
/* f2 ハート */
.mcard--f2 { --mink:#7a3247; background:#fff5f7;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.5-7-9.1A4 4 0 0 1 12 7a4 4 0 0 1 7 3.9C19 15.5 12 20 12 20z' fill='%23fbd4dd'/%3E%3C/svg%3E");
  background-size:10.6cqi 10.6cqi;
  border:3px solid #f7aabd; }
/* f3 星空 */
.mcard--f3 { --mink:#fdfcff; background:linear-gradient(160deg,#2b3570,#4b3f86 60%,#7a5a9c);
  background-image:
    radial-gradient(#fff 1.2px, transparent 1.4px),
    linear-gradient(160deg,#2b3570,#4b3f86 60%,#7a5a9c);
  background-size:38px 38px, auto;
  background-size:11.9cqi 11.9cqi, auto;
  border:3px solid #9d8ad0; }
.mcard--f3 .mcard-sign { opacity:0.95; }
/* f4 さくら */
.mcard--f4 { --mink:#6d3b52; background:#fff7fa;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cg fill='%23fadbe6'%3E%3Ccircle cx='12' cy='7' r='3'/%3E%3Ccircle cx='17' cy='11' r='3'/%3E%3Ccircle cx='15' cy='17' r='3'/%3E%3Ccircle cx='9' cy='17' r='3'/%3E%3Ccircle cx='7' cy='11' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size:13.75cqi 13.75cqi;
  border:3px solid #f6bcd0; }
/* f5 リボン */
.mcard--f5 { --mink:#7d2b2b; background:#fffdfa;
  border:4px double #de6b6b; }
.mcard--f5::before { content:""; position:absolute; left:0; right:0; top:0; height:16px; height:5cqi;
  background:repeating-linear-gradient(45deg,#de6b6b 0 10px,#fff 10px 20px); opacity:0.75; }
/* f6 ノート */
.mcard--f6 { --mink:#2f4a63; background:#fdfdfb;
  background-image:linear-gradient(#dbe7f2 1px, transparent 1px);
  background-size:100% 26px; background-position:0 22px;
  background-size:100% 8.1cqi; background-position:0 6.9cqi;
  border:2px solid #cfd9e4; }
.mcard--f6::before { content:""; position:absolute; top:0; bottom:0; left:34px; left:10.6cqi; width:1.5px; background:#f0b3b3; }

/* =========================================================================
   編集
   ========================================================================= */
.msg-edit-wrap { display:flex; gap:20px; flex-wrap:wrap; align-items:flex-start; }
.msg-prev-col { flex:0 0 300px; max-width:100%; position:sticky; top:12px; }
.msg-form { flex:1 1 300px; min-width:260px; }
.msg-hint { margin:8px 0 0; font-size:0.76rem; color:#777; }

/* 編集中のカードは 触れるようにする */
#mcardPrev .mcard-items { pointer-events:auto; }
#mcardPrev .mitem { pointer-events:auto; cursor:grab; touch-action:none; }
#mcardPrev .mitem.is-sel { outline:2px dashed #ed8a2a; outline-offset:3px; border-radius:6px; }
#mcardPrev.is-drag .mitem { cursor:grabbing; }

.msg-f { display:block; margin:0 0 14px; }
.msg-f > span { display:flex; align-items:baseline; gap:8px; font-size:0.85rem; font-weight:600; margin-bottom:5px; }
.msg-f > span small { font-weight:normal; color:#888; font-size:0.75rem; margin-left:auto; }
.msg-f textarea { width:100%; box-sizing:border-box; }

.msg-fonts, .msg-frames, .msg-items { display:flex; flex-wrap:wrap; gap:7px; }
.msg-font { padding:7px 12px; border:1.5px solid #ddd; border-radius:8px; background:#fff;
            cursor:pointer; font-size:1rem; line-height:1.2; }
.msg-font.is-on { border-color:#ed8a2a; background:#fff6ec; }

/* 枠の見本。 名前は 見本の下に置く (重ねると読みにくいため) */
.msg-frames { gap:10px; }
.msg-frame {
  border:0; background:none; padding:0; cursor:pointer; font:inherit;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
/* 見本そのもの。 .mcard--fN が付くので 幅と高さだけ上書きする
   (.mcard の aspect-ratio / max-width は使わない) */
.msg-frame-sw {
  width:58px; height:52px; border-radius:8px; display:block;
  aspect-ratio:auto; max-width:none; box-shadow:none;
  /* .mcard 本体は付けていないので、 位置決め・はみ出し・cqi の基準を自分で持つ。
     これが無いと f5/f6 の ::before (帯や罫線) がページ全体に伸びる。 */
  position:relative; overflow:hidden; container-type:inline-size;
}
.msg-frame-t { font-size:0.68rem; color:#666; line-height:1.2; }
.msg-frame.is-on .msg-frame-t { color:#c26a12; font-weight:600; }
.msg-frame.is-on .msg-frame-sw { outline:2.5px solid #ed8a2a; outline-offset:2px; }

.msg-item { width:42px; height:42px; padding:7px; border:1.5px solid #ddd; border-radius:8px;
            background:#fff; cursor:pointer; }
.msg-item svg { width:100%; height:100%; display:block; }
.msg-item.is-full { opacity:0.35; cursor:not-allowed; }
.msg-item--heart   svg, .msg-item.mitem--heart   svg { fill:#ef6d8a; }
.mitem--heart   svg { fill:#ef6d8a; }

.msg-form-foot { display:flex; align-items:center; gap:9px; flex-wrap:wrap;
                 margin-top:16px; padding-top:14px; border-top:1px solid #eee; }
.msg-done { font-size:0.74rem; font-weight:600; color:#1b7a3d;
            background:#e6f4ea; border-radius:999px; padding:4px 11px; }

/* 飾りの操作パネル
   ※ display:flex は [hidden] の display:none に勝ってしまう。
      hidden で閉じられるよう、 明示的に打ち消す。 */
.msg-itembar[hidden] { display:none !important; }
.msg-itembar { position:fixed; left:50%; transform:translateX(-50%); bottom:14px; z-index:60;
               display:flex; align-items:center; gap:12px; flex-wrap:wrap;
               background:#fff; border:1px solid #e2e2e2; border-radius:12px;
               padding:9px 14px; box-shadow:0 6px 22px rgba(0,0,0,0.16); }
.msg-itembar label { display:flex; align-items:center; gap:6px; font-size:0.78rem; }
.msg-itembar input[type=range] { width:96px; }

/* =========================================================================
   提出状況 / みんなのカード
   ========================================================================= */
.msg-status { list-style:none; margin:0; padding:0; }
.msg-status li { display:flex; align-items:center; gap:9px; padding:7px 2px; font-size:0.9rem; }
.msg-status li + li { border-top:1px solid #f2f2f2; }
.msg-status-i { width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
                font-size:0.7rem; background:#eee; color:#999; flex:none; }
.msg-status li.is-done .msg-status-i { background:#e6f4ea; color:#1b7a3d; }
.msg-status-t { margin-left:auto; font-size:0.76rem; color:#888; }
.msg-status li.is-done .msg-status-t { color:#1b7a3d; }

.msg-send { margin-top:14px; padding-top:12px; border-top:1px solid #eee; }
.msg-send p { font-size:0.82rem; margin:0 0 8px; }
.msg-send-note { margin:12px 0 0; padding-top:10px; border-top:1px solid #eee; font-size:0.82rem; }

.msg-board { display:flex; flex-wrap:wrap; gap:16px; }
.msg-board .mcard { max-width:280px; }

@media (max-width:700px) {
  .msg-prev-col { position:static; flex-basis:100%; }
  .mcard { max-width:100%; }
  .msg-board .mcard { max-width:100%; }
  .msg-edit-wrap { gap:16px; }
  .msg-f { margin-bottom:16px; }
  .msg-editor h3 { font-size:0.98rem; line-height:1.5; }
  .msg-head { gap:8px; }
  .msg-head-r { flex-wrap:wrap; }
}

/* 送信の確認モーダル */
.msgsend-body { padding: 16px 18px; overflow-y: auto; }
.msgsend-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 12px; font-size: 0.9rem; }
.msgsend-dl dt { color: #777; font-size: 0.82rem; white-space: nowrap; }
.msgsend-dl dd { margin: 0; font-weight: 600; word-break: break-word; }
.msgsend-warn { margin: 0 0 10px; padding: 9px 11px; border-radius: 8px;
                background: #fff6ec; border: 1px solid #f3d3ae; font-size: 0.82rem; line-height: 1.6; }
.msgsend-note { margin: 0; font-size: 0.8rem; color: #777; }

/* =========================================================================
   このページのモーダル (送信の確認)
   チャットの .chat-mm は css/chat.css にあり ここでは読まないので、
   同じ見た目を message.css だけで作る。
   ========================================================================= */
.msg-mm[hidden] { display:none !important; }
.msg-mm {
  position:fixed; inset:0; z-index:190; padding:16px;
  background:rgba(15,18,22,.45);
  display:flex; align-items:center; justify-content:center;
}
.msg-mm-box {
  background:#fff; border-radius:14px; width:100%; max-width:430px;
  max-height:88vh; max-height:88dvh;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 18px 44px rgba(15,23,42,.28);
}
.msg-mm-head {
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:14px 12px 12px 18px; border-bottom:1px solid #ececee;
}
.msg-mm-head h2 { margin:0; font-size:1rem; font-weight:600; }
.msg-mm-x {
  margin-left:auto; width:32px; height:32px; border:0; border-radius:50%;
  background:transparent; color:#666; font-size:22px; line-height:1; cursor:pointer;
}
.msg-mm-x:hover { background:#f2f2f4; }
.msg-mm-foot {
  flex:0 0 auto; display:flex; align-items:center; justify-content:flex-end; gap:9px;
  padding:12px 18px; border-top:1px solid #ececee;
}
.msg-mm-no, .msg-mm-yes {
  font:inherit; font-size:0.85rem; font-weight:600; cursor:pointer; border-radius:999px;
  padding:8px 18px;
}
.msg-mm-no  { border:1.5px solid #ddd; background:#fff; color:#555; }
.msg-mm-no:hover { background:#f6f6f8; }
.msg-mm-yes { border:0; background:#e0736f; color:#fff; }
.msg-mm-yes:hover { background:#d4635f; }
.msg-mm-yes[disabled] { background:#e8eaed; color:#9aa0a6; cursor:default; }