/* つくる（create.js）の見た目。デザインキット v2（style.md）の部品だけで組む。長さと色はすべて tokens.css の名前（数字を直接書くのは、幅の区切り 768px・374px・359px・339px だけ）。
   1 の段：形式のカード（カード全体が 1 つのボタン）。2 の段：素材・仕上がり（お任せ／こだわる）・雰囲気・文字・下の帯。窓：撮り方（#tipsSheet）・最後の 1 本（#lastFreeSheet）。
   スマホは幅 767px まで、パソコンは 768px から。窓の枠（角・線・下から上がる動き）は app.css の dialog.sheet が決め、ここは中身だけ。
   見本の動画の枠（.clip）と札（.tag）の置き方は media.css。ここでは、この画面の中の大きさと札の見た目だけを決める。
   app.css の昔の土台（button の丸い角・薄くなる disabled など）に左右されないよう、この画面の部品は自分で全部の見た目を決める（:where は強さ 0 の土台） */

/* ---------- 下の帯の高さ（--actionbar-h）：スマホで画面の下に貼りつく帯の、安全な余白を含めた高さ。app.css がページの下をこの分あける。
   ここの式は「いちばん多い形」（目安の行・本数の行・ボタン）の高さと同じ。形によって帯が高くなるときは create.js が測って入れ直す。パソコンでは貼りつけないので 0 ---------- */
:root {
  --actionbar-h: calc(var(--ol-3) + var(--sp-3) + var(--fs-body) * var(--lh-ui) + var(--sp-1) + var(--box-s) + var(--sp-3) + var(--cta-h) + var(--cta-lift) + var(--sp-3) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) {
  :root { --actionbar-h: 0px; }
}

/* ---------- 土台（この画面の中だけ） ---------- */
:where(#t-edit, #tipsSheet, #lastFreeSheet) button { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
:where(#t-edit, #tipsSheet, #lastFreeSheet) button:disabled { opacity: 1; cursor: not-allowed; }
:where(#t-edit, #tipsSheet, #lastFreeSheet) :focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-off); }
:where(#t-edit, #tipsSheet, #lastFreeSheet) [hidden] { display: none !important; }
:where(#t-edit, #tipsSheet, #lastFreeSheet) .m-ic { width: var(--ic); height: var(--ic); vertical-align: middle; }
:where(#t-edit, #tipsSheet, #lastFreeSheet) .m-ic.s { width: var(--ic-s); height: var(--ic-s); }
:where(#t-edit, #tipsSheet, #lastFreeSheet) :is(h1, h2, p, ul, figure) { margin: 0; }
:where(#t-edit, #tipsSheet, #lastFreeSheet) ul { padding: 0; list-style: none; }
:where(#t-edit, #tipsSheet, #lastFreeSheet) .nw { display: inline-block; max-width: 100%; overflow-wrap: anywhere; } /* 言葉のまとまり（app.css の .nw と同じ。行の終わりに 1〜2 字だけ落ちないように） */

#t-edit { max-width: var(--w-app); margin-inline: auto; color: var(--navy); }
/* 段を変えたとき・窓を開いたときにフォーカスを移す見出し（押せない見出しなので枠は出さない。色だけ透明にして、強制色のモードでは見える） */
#c1Title:focus, #cTitle:focus, .cr-sh-t:focus { outline-color: transparent; }
html:has(#tipsSheet[open]) { overflow: hidden; } /* 窓の後ろの画面は動かさない */

/* 確認用の帯（見本のプレビューだけ） */
#mockBanner { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border: var(--ol-2) solid var(--navy); border-radius: var(--r-m); background: var(--sky-l); color: var(--navy); font-size: var(--fs-body); line-height: var(--lh-ui); }

/* ---------- 部品：リンク・ボタン・押せない札・事実の札 ---------- */
.cr-link { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--hit); padding: 0 var(--sp-2); color: var(--navy); font-weight: var(--w-bold); line-height: var(--lh-ui); text-decoration: underline; text-decoration-thickness: var(--ol-2); text-underline-offset: var(--ul-off); }
.cr-link:disabled { color: var(--muted); text-decoration: none; }
.cr-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--btn-h); padding: var(--sp-2) var(--sp-5); border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); background: var(--white); color: var(--navy); font-weight: var(--w-bold); line-height: var(--lh-ui); letter-spacing: var(--ls-btn); text-align: center; text-wrap: balance; }
.cr-btn.is-s { min-height: var(--hit); padding: 0 var(--sp-4); }
.cr-btn:active { background: var(--sky); }
.cr-btn:disabled { border-color: var(--off-line); background: var(--off); color: var(--muted); }
/* 画面に 1 つだけの主なボタン：黄色・高さ 60・影は下に 5px だけ（キットでこの影を使うのはここだけ） */
.cr-cta { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; min-height: var(--cta-h); padding: var(--sp-2) var(--sp-5); border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); background: var(--yellow); color: var(--navy); font-weight: var(--w-bold); line-height: var(--lh-ui); letter-spacing: var(--ls-btn); text-align: center; box-shadow: var(--shadow-cta); }
.cr-cta:active { transform: translateY(var(--press-shift)); box-shadow: var(--shadow-cta-down); }
.cr-cta:focus-visible { outline-offset: calc(var(--cta-lift) + var(--focus-off)); }
.cr-cta:disabled { border-color: var(--off-line); background: var(--off); color: var(--muted); box-shadow: none; transform: none; }
.cr-cta.is-armed:disabled { border-color: var(--navy); background: var(--sky-l); color: var(--navy); } /* 予約した（押せないが、押せない色ではなく「済んだ」色） */
@media (hover: hover) {
  .cr-cta:hover:not(:disabled) { background: var(--y-hover); }
  .cr-btn:hover:not(:disabled) { background: var(--sky-l); }
}
/* まるい小さなボタン（閉じる・はずす）：44px の円。.is-plain は枠なし */
.cr-x { display: inline-grid; place-items: center; flex: none; width: var(--hit); height: var(--hit); border: var(--ol-2) solid var(--navy); border-radius: var(--r-pill); background: var(--white); color: var(--navy); }
.cr-x.is-plain { border-color: transparent; background: none; }
@media (hover: hover) { .cr-x:hover { background: var(--sky-l); } }
.cr-x:active { background: var(--sky); }
/* 事実の札（絵と短い言葉。押せない） */
.cr-tag { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-2); border: var(--ol-2) solid var(--navy); border-radius: var(--r-s); background: var(--white); color: var(--navy); font-size: var(--fs-label); font-weight: var(--w-bold); line-height: var(--lh-ui); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-tag .t { min-width: 0; }
/* 見本のそばの一文（16px。札の 14px より小さくしない） */
.cr-sample { color: var(--navy); font-size: var(--fs-body); line-height: var(--lh-cond); }
.cr-err { display: flex; align-items: flex-start; gap: var(--sp-2); color: var(--red); font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); }
/* 開け閉めの印（丸の中の＋と－。開くと縦棒が回って－になる）。見出しの帯のボタンの右に置く */
.cr-pm { position: relative; flex: none; width: var(--pm); height: var(--pm); border: var(--ol-2) solid var(--navy); border-radius: var(--r-pill); }
.cr-pm::before, .cr-pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--pm) * var(--pm-bar)); height: var(--ol-3); margin: calc(var(--ol-3) / -2) 0 0 calc(var(--pm) * var(--pm-bar) / -2); border-radius: var(--ol-2); background: var(--navy); }
.cr-pm::after { transform: rotate(90deg); }
[aria-expanded="true"] > .cr-pm::after, details[open] > summary > .cr-pm::after { transform: rotate(0deg); }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="off"]) .cr-pm::after { transition: transform var(--t-ui) var(--e-io); }
  :root:not([data-motion="off"]) .cr-cta { transition: transform var(--t-press) var(--e-io), box-shadow var(--t-press) var(--e-io); }
  :root:not([data-motion="off"]) .rg-val { transition: stroke-dasharray var(--t-ring) var(--e-io); }
}

/* ---------- 1 の段：どれをつくる？（形式のカード。カード全体が 1 つのボタン） ---------- */
#cStep1 { display: grid; gap: var(--sp-4); }
#c1Title, #cTitle { margin: 0; color: var(--navy); font-size: var(--fs-h2); font-weight: var(--w-bold); line-height: var(--lh-head); letter-spacing: var(--ls-head); text-wrap: balance; }
.fmt-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); margin: 0; }
.fmt-card { --cw: var(--il-s); display: grid; grid-template-columns: var(--cw) minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-3); border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); background: var(--white); color: var(--navy); line-height: var(--lh-ui); }
.fmt-card > .clip, .fmt-ic { width: 100%; border: var(--ol-3) solid var(--navy); border-radius: var(--r-m); background: var(--off); }
.fmt-ic { display: grid; place-items: center; aspect-ratio: 9 / 16; color: var(--muted); }
.fmt-ic .m-ic { width: var(--ic-xl); height: var(--ic-xl); }
.fmt-body { display: grid; gap: var(--sp-3); min-width: 0; }
.fmt-name { font-size: var(--fs-h3); font-weight: var(--w-bold); line-height: var(--lh-head); text-wrap: balance; overflow-wrap: anywhere; }
.fmt-facts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.fmt-go { display: grid; place-items: center; width: calc(var(--ic) + var(--sp-3)); height: calc(var(--ic) + var(--sp-3)); border: var(--ol-2) solid var(--navy); border-radius: var(--r-pill); background: var(--white); }
.fmt-card:active { background: var(--sky); }
@media (hover: hover) {
  .fmt-card:hover { background: var(--sky-l); }
  .fmt-card:hover .fmt-go { background: var(--yellow); }
}
.cr-tips { display: flex; }
/* カードの登録がまだのとき、形式の一覧の上に出す「カードが先」 */
.cr-gate { display: grid; justify-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-5); text-align: center; }
.cr-gate[hidden] { display: none; }
.cr-gate .il { width: 96px; height: 96px; }
.cr-gate p { margin: 0; color: var(--navy); font-size: var(--fs-lead); font-weight: var(--w-bold); line-height: var(--lh-ui); }
/* 小さな見本の枠の札：キットの札（14px 太字・白・2px の枠）。media.css の黒い札を、この画面では置き換える */
:is(#t-edit, #tipsSheet) .clip > .tag { left: var(--sp-1); top: var(--sp-1); padding: 0 var(--sp-2); border: var(--ol-2) solid var(--navy); border-radius: var(--r-s); background: var(--white); color: var(--navy); font-size: var(--fs-label); font-weight: var(--w-bold); line-height: var(--lh-ui); letter-spacing: 0; }

/* ---------- 2 の段：上の帯（もどる・形式の名前） ---------- */
.c-top { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.cr-back { display: inline-flex; align-items: center; flex: none; gap: var(--sp-1); min-height: var(--hit); padding: 0 var(--sp-3) 0 0; color: var(--navy); font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); }
@media (hover: hover) { .cr-back:hover { text-decoration: underline; text-decoration-thickness: var(--ol-2); text-underline-offset: var(--ul-off); } }
#cTitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 左（素材・仕上がり・雰囲気・文字）と、右に貼りつく下の帯 */
.c-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
.c-main { display: grid; gap: var(--sp-6); min-width: 0; }
.cr-block { display: grid; gap: var(--sp-3); min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.cr-block { display: block; }
.cr-h { display: flex; align-items: center; gap: var(--sp-2); margin: 0; padding: 0; color: var(--navy); font-size: var(--fs-h3); font-weight: var(--w-bold); line-height: var(--lh-head); }
legend.cr-h { margin-bottom: var(--sp-3); }
.cr-facts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; }

/* 素材の枠：押すとファイルを選ぶ（パソコンは落としても選べる）。中の input は見えないが、キーボードで選んだときは枠に印を出す */
.cr-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); min-height: calc(var(--il-s) + var(--sp-4)); margin: 0; padding: var(--sp-4); border: var(--ol-3) dashed var(--navy); border-radius: var(--r-l); background: var(--white); color: var(--navy); font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); letter-spacing: var(--ls-btn); text-align: center; cursor: pointer; }
.cr-plus { display: grid; place-items: center; flex: none; width: var(--ic-xl); height: var(--ic-xl); border: var(--ol-3) solid var(--navy); border-radius: var(--r-pill); background: var(--yellow); }
.cr-plus .m-ic { width: var(--ic); height: var(--ic); }
.cr-drop.over { border-style: solid; background: var(--sky-l); }
@media (hover: hover) { .cr-drop:hover { background: var(--sky-l); } }
.cr-drop:has(> #file:focus-visible) { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-off); }
@supports not selector(:has(*)) { .cr-drop:focus-within { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-off); } }
#cSrc.has-files .cr-drop { flex-direction: row; min-height: var(--btn-h); padding: var(--sp-2) var(--sp-4); }
#cSrc.has-files .cr-plus { width: var(--ic-l); height: var(--ic-l); border-width: var(--ol-2); }
#cSrc.has-files .cr-plus .m-ic { width: var(--ic-s); height: var(--ic-s); }
.cr-consent, .cr-uphint, .cr-upeta { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0; color: var(--navy); font-size: var(--fs-body); line-height: var(--lh-ui); }
.cr-upeta { align-items: center; font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
#t-edit:has(#armNote:not([hidden])) .cr-uphint { display: none; } /* 予約したら、帯の「ページは閉じないでください」が同じことを言うので、一覧の下の一文は出さない */
.cr-consent .m-ic, .cr-uphint .m-ic { margin-top: 0; }

/* 送る素材の行：絵・名前と大きさ・状態（送っている輪／送った印／順番待ち／できなかった印）・はずす */
.cr-ups { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.cr-ups:empty { display: none; }
.cr-up { display: grid; grid-template-columns: var(--hit) minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3); min-height: calc(var(--hit) + var(--sp-4)); padding: var(--sp-2) var(--sp-1) var(--sp-2) var(--sp-3); border: var(--ol-2) solid var(--navy); border-radius: var(--r-m); background: var(--white); color: var(--navy); }
.cr-up.bad { border-color: var(--red); background: var(--red-l); }
.cr-up-th { display: grid; place-items: center; width: var(--hit); height: var(--hit); border: var(--ol-2) solid var(--navy); border-radius: var(--r-s); background: var(--sky-l); }
.cr-up-tx { display: grid; min-width: 0; line-height: var(--lh-ui); }
.cr-up-tx .name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-weight: var(--w-bold); overflow-wrap: anywhere; } /* 長い名前は 2 行まで（拡張子まで見えるように） */
.cr-up-tx .size { color: var(--muted); font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
.cr-up-err { margin-top: var(--sp-1); color: var(--red); font-weight: var(--w-bold); overflow-wrap: anywhere; }
.cr-up-st { position: relative; display: grid; place-items: center; width: var(--ic-xl); height: var(--ic-xl); }
.cr-up-st.is-bad { color: var(--red); }
.cr-up-st.is-wait { border: var(--ol-2) dashed var(--navy); border-radius: var(--r-pill); }
.cr-up-st .good-ic { display: grid; place-items: center; width: var(--ic-l); height: var(--ic-l); border-radius: var(--r-pill); background: var(--navy); color: var(--white); }
.cr-up-note { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-label); line-height: var(--lh-ui); }
/* 送っている輪：100 の円に太さ 12（--rg-w）。0 のときは何も描かない。数字は輪の真ん中 */
.cr-ring .rg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rg-trk { fill: none; stroke: var(--sky-l); stroke-width: var(--rg-w); }
.rg-val { fill: none; stroke: var(--navy); stroke-width: var(--rg-w); stroke-linecap: round; }
.rg-val[stroke-dasharray^="0 "] { display: none; }
.cr-ring-n { position: relative; font-size: var(--fs-micro); font-weight: var(--w-bold); line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- 仕上がり：お任せ／こだわる の切り替え（2 つの大きな札） ---------- */
.cr-look { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.cr-opt { position: relative; display: flex; align-items: center; gap: var(--sp-2); min-height: calc(var(--hit) + var(--sp-4)); padding: var(--sp-2) var(--sp-3); border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); background: var(--white); color: var(--navy); }
.cr-opt[aria-checked="true"] { background: var(--sky-l); }
.cr-opt-t { flex: 1; min-width: 0; font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); }
.cr-radio { display: grid; place-items: center; flex: none; width: var(--ic); height: var(--ic); border: var(--ol-2) solid var(--navy); border-radius: var(--r-pill); background: var(--white); color: var(--white); }
.cr-radio .m-ic { visibility: hidden; }
.cr-opt[aria-checked="true"] .cr-radio { background: var(--navy); }
.cr-opt[aria-checked="true"] .cr-radio .m-ic { visibility: visible; }
.cr-n { position: absolute; top: calc(var(--sp-3) * -1); right: calc(var(--sp-2) * -1); display: grid; place-items: center; min-width: var(--ic); height: var(--ic); padding: 0 var(--sp-1); border: var(--ol-2) solid var(--white); border-radius: var(--r-pill); background: var(--navy); color: var(--white); font-size: var(--fs-micro); font-weight: var(--w-bold); line-height: 1; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .cr-opt[aria-checked="false"]:hover { background: var(--sky-l); } }
.cr-opt:active { background: var(--sky); }

/* こだわる：開くと、項目の見出しが縦に並ぶ（開けるのは 1 つだけ。見出しの右は今の選び方） */
.cr-panel { margin: 0; overflow: hidden; border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); background: var(--white); }
.cr-panel-h { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3); border-bottom: var(--ol-2) solid var(--navy); }
.cr-panel-h .cr-x { margin-left: auto; }
#items { display: block; margin: 0; }
.it + .it { border-top: var(--ol-1) solid var(--line); }
.it-head { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: calc(var(--hit) + var(--sp-4)); padding: var(--sp-2) var(--sp-3); background: var(--white); color: var(--navy); }
.it-head:focus-visible { outline-offset: calc(var(--focus-w) * -1); }
.it-head[aria-expanded="true"] { border-bottom: var(--ol-2) solid var(--navy); background: var(--sky-l); }
.it-label { flex: none; font-weight: var(--w-bold); line-height: var(--lh-ui); }
.it-n { flex: none; color: var(--muted); font-size: var(--fs-micro); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.it-pick { flex: 1; min-width: 0; overflow: hidden; color: var(--muted); line-height: var(--lh-ui); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.it.is-custom .it-pick { color: var(--navy); font-weight: var(--w-bold); }
@media (hover: hover) { .it-head[aria-expanded="false"]:hover { background: var(--sky-l); } }
.it-body { display: grid; gap: var(--sp-3); padding: var(--sp-3); background: var(--white); }
.it-desc, .it-fine { margin: 0; color: var(--navy); font-size: var(--fs-body); line-height: var(--lh-ui); }
.it-fine { display: flex; align-items: flex-start; gap: var(--sp-2); }
.c-play { margin: 0; }
:root:not([data-motion="off"]):not([data-motion="reduce"]) .c-play { display: none; } /* 「見本を動かす」は動きを止めているときだけ */

/* テンプレートの絵のボタン（見本のある項目は 9:16 の絵が並び、無い項目は絵と名前の横並び）。選ぶと水色・紺のチェックの丸・太字 */
.c-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--il-s) + var(--sp-2)), 1fr)); gap: var(--sp-2); }
.c-tiles:not(.pics) { grid-template-columns: repeat(auto-fill, minmax(calc(var(--il-m) + var(--sp-4)), 1fr)); }
.c-tile { display: grid; grid-template-rows: auto auto; align-content: start; gap: var(--sp-2); min-width: 0; padding: var(--sp-1) var(--sp-1) var(--sp-2); border: var(--ol-2) solid var(--navy); border-radius: var(--r-m); background: var(--white); color: var(--navy); }
.c-tile[aria-pressed="true"] { background: var(--sky-l); }
.c-tile > .clip, .c-tile > .c-ic { grid-row: 1; grid-column: 1; width: 100%; border: var(--ol-2) solid var(--navy); border-radius: var(--r-s); background: var(--off); }
.c-ic { display: grid; place-items: center; background: var(--y4); color: var(--navy); }
.c-tiles.pics .c-ic { aspect-ratio: 9 / 16; }
.c-ic .m-ic { width: var(--ic-l); height: var(--ic-l); }
.c-name { grid-row: 2; grid-column: 1; padding: 0 var(--sp-1); font-size: var(--fs-label); font-weight: var(--w-bold); line-height: var(--lh-ui); overflow-wrap: anywhere; }
.c-on { position: relative; z-index: 1; grid-row: 1; grid-column: 1; align-self: end; justify-self: end; display: none; place-items: center; width: var(--ic); height: var(--ic); margin: 0 var(--sp-1) var(--sp-1) 0; border-radius: var(--r-pill); background: var(--navy); color: var(--white); }
.c-tile[aria-pressed="true"] .c-on { display: grid; }
.c-tiles:not(.pics) .c-tile { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto; align-items: center; align-content: center; gap: var(--sp-2); min-height: calc(var(--hit) + var(--sp-2)); padding: var(--sp-2) var(--sp-3); }
.c-tiles:not(.pics) .c-ic { grid-row: 1; grid-column: 1; width: auto; border: 0; background: none; }
.c-tiles:not(.pics) .c-name { grid-row: 1; grid-column: 2; padding: 0; }
.c-tiles:not(.pics) .c-on { grid-row: 1; grid-column: 3; align-self: center; margin: 0; }
.c-tiles:not(.pics) .c-tile[aria-pressed="true"] { grid-template-columns: auto minmax(0, 1fr) auto; }
.c-pair { display: grid; align-content: start; gap: var(--sp-1); min-width: 0; }
@media (hover: hover) { .c-tile[aria-pressed="false"]:hover { background: var(--sky-l); } }

/* ---------- 雰囲気（任意）：押せる札。押した札は水色で、チェックの印が出る（印の場所は取ってあるので、押しても動かない） ---------- */
.cr-moods { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cr-chip { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--hit); padding: 0 var(--sp-3) 0 var(--sp-2); border: var(--ol-2) solid var(--navy); border-radius: var(--r-m); background: var(--white); color: var(--navy); font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); }
/* 選んだら check、選んでいないときは同じ場所に空の丸（幅が変わらず、左右の余白も同じ。形で状態が分かる） */
.cr-chip[aria-pressed="false"] .m-ic { --ic-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E"); }
.cr-chip[aria-pressed="true"] { background: var(--sky-l); }
@media (hover: hover) { .cr-chip[aria-pressed="false"]:hover { background: var(--sky-l); } }

/* ---------- 文字を入れる（任意）：開く帯 ---------- */
.cr-notebox { margin: 0; overflow: hidden; border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); background: var(--white); }
.cr-notebox > summary { display: flex; align-items: center; gap: var(--sp-3); min-height: calc(var(--hit) + var(--sp-4)); margin: 0; padding: var(--sp-2) var(--sp-3); color: var(--navy); list-style: none; cursor: pointer; }
.cr-notebox > summary::-webkit-details-marker { display: none; }
.cr-notebox > summary:focus-visible { outline-offset: calc(var(--focus-w) * -1); }
.cr-notebox[open] > summary { border-bottom: var(--ol-2) solid var(--navy); background: var(--sky-l); }
.cr-st { flex: 1; min-width: 0; font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); }
.cr-nb { display: grid; gap: var(--sp-2); padding: var(--sp-3); }
.cr-nb textarea { display: block; width: 100%; min-height: calc(var(--field-h) * 2); margin: 0; padding: var(--sp-2) var(--sp-3); border: var(--ol-2) solid var(--navy); border-radius: var(--r-m); background: var(--white); color: var(--navy); font: inherit; font-size: var(--fs-body); line-height: var(--lh-ui); resize: vertical; }
.cr-nb textarea::placeholder { color: var(--muted); opacity: 1; }
.cr-count { justify-self: end; margin: 0; color: var(--muted); font-size: var(--fs-label); line-height: var(--lh-ui); font-variant-numeric: tabular-nums; }
.cr-privacy { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0; color: var(--navy); font-size: var(--fs-body); line-height: var(--lh-ui); }

/* ---------- 下の帯：目安の行・本数の行・（月額プランの知らせ）・ボタン。スマホは画面の下に貼りつき、パソコンは右の列でスクロールしても見える ---------- */
#actionBar { position: relative; display: grid; gap: var(--sp-3); min-width: 0; background: var(--white); color: var(--navy); }
.ab-info { display: grid; gap: var(--sp-1); min-width: 0; }
.ab-row { display: flex; align-items: flex-start; gap: var(--sp-2); min-width: 0; margin: 0; font-size: var(--fs-body); line-height: var(--lh-ui); }
.ab-t { min-width: 0; font-variant-numeric: tabular-nums; }
.ab-cost { align-items: center; min-height: var(--box-s); }
.ab-cost .ab-t { font-weight: var(--w-bold); white-space: nowrap; }
.ab-note { font-weight: var(--w-bold); }
/* 本数の箱（できた＝紺にチェック・つくっている＝黄色と紺の縞・残り＝黄色・これからの月額プラン＝点線と水色の斜線）。月額プランの箱は 2.4 倍の幅 */
.ab-tix { display: flex; flex: 0 1 calc(var(--il-l) + var(--sp-7) + var(--sp-2)); gap: var(--sp-1); height: var(--box-s); min-width: 0; }
.ab-bx { display: grid; place-items: center; flex: 1 1 0; min-width: 0; border: var(--ol-3) solid var(--navy); border-radius: var(--r-s); background: var(--yellow); color: var(--white); }
.ab-tix.is-many .ab-bx { border-width: var(--ol-2); }
.ab-bx.done { background: var(--navy); }
.ab-bx.making { background: repeating-linear-gradient(135deg, var(--yellow) 0 var(--sp-2), var(--navy) var(--sp-2) var(--sp-3)); }
.ab-bx.plan { flex: var(--bx-plan) 1 0; border-style: dashed; background: repeating-linear-gradient(135deg, var(--sky) 0 var(--ol-2), var(--white) var(--ol-2) var(--sp-2)); }
.ab-cost > .m-ic.s[data-ic="warn"] { color: var(--warn); }
.ab-msg { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0; font-size: var(--fs-body); line-height: var(--lh-ui); }
.ab-msg:empty { position: absolute; width: var(--ol-1); height: var(--ol-1); margin: calc(var(--ol-1) * -1); overflow: hidden; clip-path: inset(50%); } /* 理由が無いときは場所を取らない（読み上げの欄としては残す） */
.ab-msg[data-kind="bad"] { color: var(--red); font-weight: var(--w-bold); }
.ab-arm { display: grid; gap: var(--sp-1); }
.ab-plan { display: grid; }
.ab-acts { display: grid; gap: var(--sp-1); padding-bottom: var(--cta-lift); }
.ab-acts .cr-link { justify-self: center; }

/* ---------- 窓：撮り方（#tipsSheet）・最後の 1 本（#lastFreeSheet）。枠は app.css の dialog.sheet ---------- */
#tipsSheet.cr-sheet, #lastFreeSheet.cr-sheet { padding: 0; color: var(--navy); }
.cr-sh-h { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-2) var(--sp-5); background: var(--white); }
.cr-sh-t { margin: 0; color: var(--navy); font-size: var(--fs-h2); font-weight: var(--w-bold); line-height: var(--lh-head); }
.cr-tips-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); padding: var(--sp-2) var(--sp-5) 0; }
.cr-tip { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--sp-2); min-width: 0; }
.cr-tip .clip-slot { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
.cr-tip .clip { border: var(--ol-3) solid var(--navy); border-radius: var(--r-m); background: var(--off); }
:is(#tipsSheet) .clip > .tag { left: var(--sp-2); top: var(--sp-2); }
.cr-tip .clip-ctl { margin-top: 0; } /* 止める・見るの丸いボタン（media.css。絵だけで 44px）は、.clip-slot の隙間のぶんだけ枠から離れる */
.cr-tip figcaption { display: grid; gap: var(--sp-1); font-size: var(--fs-body); line-height: var(--lh-ui); }
.cr-tip figcaption b { font-weight: var(--w-bold); overflow-wrap: anywhere; }
.cr-tip-l { display: flex; align-items: flex-start; gap: var(--sp-2); }
.cr-tip3 { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) 0; font-weight: var(--w-bold); line-height: var(--lh-ui); }
.cr-ic { flex: none; width: var(--ic-l); height: var(--ic-l); background-color: var(--navy); -webkit-mask: var(--cr-img) center / contain no-repeat; mask: var(--cr-img) center / contain no-repeat; }
.cr-ic[data-cr="phone"] { --cr-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2.5'/%3E%3Cpath d='M10.5 18.5 H13.5'/%3E%3C/svg%3E"); }
.cr-ic[data-cr="sun"] { --cr-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5 V4.5 M12 19.5 V21.5 M2.5 12 H4.5 M19.5 12 H21.5 M5.3 5.3 L6.7 6.7 M17.3 17.3 L18.7 18.7 M18.7 5.3 L17.3 6.7 M6.7 17.3 L5.3 18.7'/%3E%3C/svg%3E"); }
#tipsSheet > .cr-sample { padding: var(--sp-3) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px)); }

/* 最後の 1 本：短いレシートのような並び（絵と言葉の行） */
#lastFreeSheet .cr-sh-t { padding: var(--sp-5) var(--sp-5) var(--sp-3); }
.cr-lf { padding: 0 var(--sp-5); }
.lf-rows { margin: 0; padding: 0; list-style: none; border-top: var(--ol-3) solid var(--navy); }
.lf-row { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: var(--ol-1) solid var(--line); font-size: var(--fs-cond); line-height: var(--lh-ui); }
.lf-row > .m-ic, .lf-row > .ic-stack { margin-top: calc((var(--fs-cond) * var(--lh-ui) - var(--ic)) / 2); }
.lf-row.is-key { font-weight: var(--w-bold); }
.lf-t { min-width: 0; }
.lf-warn { display: flex; align-items: flex-start; gap: var(--sp-2); margin: var(--sp-3) 0 0; padding: var(--sp-3); border: var(--ol-2) solid var(--warn); border-radius: var(--r-m); background: var(--y4); color: var(--navy); font-size: var(--fs-body); line-height: var(--lh-ui); }
.lf-warn .m-ic { color: var(--warn); }
.cr-lf > .cr-btn { margin-top: var(--sp-3); }
.cr-lf-acts { display: grid; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px)); }
.cr-lf-acts .cr-link { justify-self: center; }

/* ---------- スマホ（幅 767px まで）：下の帯は画面の下に貼りつく。中身は幅 480px の列に寄せる ---------- */
@media (max-width: 767px) {
  #actionBar { position: fixed; inset: auto 0 0; z-index: var(--z-sticky); padding: var(--sp-3) max(var(--sp-4), env(safe-area-inset-right, 0px), calc((100% - var(--w-col)) / 2)) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)) max(var(--sp-4), env(safe-area-inset-left, 0px), calc((100% - var(--w-col)) / 2)); border-top: var(--ol-3) solid var(--navy); }
  .c-top { margin-top: calc(var(--sp-2) * -1); }
  .cr-tips-list { gap: var(--sp-3); padding-inline: var(--sp-4); }
  .cr-sh-h { padding-left: var(--sp-4); }
  .cr-tip3 { padding-inline: var(--sp-4); }
  #tipsSheet > .cr-sample { padding-inline: var(--sp-4); }
  .cr-lf, #lastFreeSheet .cr-sh-t, .cr-lf-acts { padding-inline: var(--sp-4); }
}
@media (max-width: 359px) {
  .fmt-card { --cw: calc(var(--il-s) - var(--sp-2)); gap: var(--sp-3); }
  .cr-up { gap: var(--sp-2); }
  /* 撮り方：せまい画面では 1 列（見本は左に小さく、言葉は右に。2 列だと長い名前が隣にはみ出す） */
  .cr-tips-list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .cr-tip { grid-template-columns: var(--il-s) minmax(0, 1fr); align-items: start; column-gap: var(--sp-3); }
}

/* せまい画面：仕上がりの 2 つの札は「こだわる」が途中で折れないように余白をつめ、もっとせまければ絵を外す（言葉と丸は残す） */
@media (max-width: 374px) {
  .cr-opt { padding-inline: var(--sp-2); gap: var(--sp-1); }
  .cr-opt-t { white-space: nowrap; }
}
@media (max-width: 339px) {
  .cr-opt > .m-ic { display: none; }
  /* 送る素材の行：名前に幅をあげる（左の小さな絵は飾りなので外す。状態の印・はずすは残る） */
  .cr-up { grid-template-columns: minmax(0, 1fr) auto auto; }
  .cr-up-th { display: none; }
}

/* ---------- パソコン（幅 768px から）：形式のカードは 2 枚横に、2 の段は左右 2 列（右は貼りつく下の帯） ---------- */
@media (min-width: 768px) {
  .fmt-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 392px), 1fr)); gap: var(--sp-5); } /* 2 枚横並びは、1 枚に 392px 取れるときだけ（iPad 縦では 1 列。題名が語の途中で割れない） */
  .fmt-card { --cw: var(--il-m); gap: var(--sp-4); }
  .c-cols { grid-template-columns: minmax(0, 1fr) calc(var(--il-l) * 2); align-items: start; gap: var(--sp-7); }
  .c-main { gap: var(--sp-7); }
  #actionBar { position: sticky; top: calc(var(--top-h-l) + var(--sp-4)); padding: var(--sp-4); border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); }
}