/* 月から届く誕生日カード（/card/）のカード作成画面。birthday.css のあとに読む */
.card-maker { grid-template-columns: minmax(0, 410px) minmax(0, 1fr); gap: 28px; }
.card-maker > * { min-width: 0; }
@media (max-width: 960px) {
  .card-maker { grid-template-columns: minmax(0, 1fr); }
  .card-maker .cm-view { order: -1; }
}
.cm-ui { gap: 18px; }
.cm-sec { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cm-sec[hidden] { display: none; }
.cm-step { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 15.5px; color: var(--tx); }
.cm-step b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(180deg, #ffe39d, var(--gold2, #ffb648)); color: #2a1600; font-family: var(--ff-x); font-size: 12.5px; }
.cm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cm-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 380px) { .cm-row2 { grid-template-columns: minmax(0, 1fr); } }
.cm-ui .inp { font-size: 17px; width: 100%; }
.cm-warn { margin: 0; color: #ff9db0; font-size: 14px; font-weight: 700; }
.cm-msg-ja { margin: 0; font-size: 14px; color: var(--tx2); line-height: 1.6; }
.cm-check { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--tx2); cursor: pointer; }
.cm-check input { width: 20px; height: 20px; accent-color: var(--gold); }

/* デザインの見本 */
.cm-tpls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cm-tpls button { line-height: 1.3; position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 6px 8px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line); color: var(--tx2); font-weight: 800; font-size: 12.5px; line-height: 1.3; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; }
.cm-tpls button:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.07); }
.cm-tpls button[aria-pressed='true'] { background: rgba(255, 210, 122, 0.1); box-shadow: 0 0 0 2.5px var(--gold), 0 10px 30px rgba(255, 182, 72, 0.25); color: #fff; }
.cm-tpls canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 9px; background: #070b24; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
.cm-tpls span { text-align: center; }

/* サイズ */
.cm-sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cm-sizes button { line-height: 1.25; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line); color: var(--tx2); cursor: pointer; }
.cm-sizes button i { display: block; height: 30px; max-width: 46px; border-radius: 4px; border: 2px solid currentColor; opacity: 0.8; }
.cm-sizes button b { font-size: 12.5px; white-space: nowrap; }
.cm-sizes button small { font-family: var(--ff-x); font-size: 10.5px; opacity: 0.75; }
.cm-sizes button[aria-pressed='true'] { background: rgba(255, 210, 122, 0.12); box-shadow: 0 0 0 2px var(--gold); color: var(--gold); }

/* 写真 */
.cm-bgs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cm-bgs button { position: relative; cursor: pointer; }
.cm-bgs button em { position: absolute; left: 4px; bottom: 4px; font-style: normal; font-size: 10.5px; font-weight: 900; padding: 1px 6px; border-radius: 999px; background: var(--gold); color: #2a1600; }

/* プレビュー */
.cm-view { min-width: 0; }
.cm-stage { display: flex; justify-content: center; perspective: 1400px; padding: 6px 0 4px; }
.cm-tilt { position: relative; display: inline-block; max-width: 100%; border-radius: 16px; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); transform-style: preserve-3d; }
.cm-tilt.on { transition: transform 0.08s linear; }
.card-maker .cm-canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: min(80vh, 920px); border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08); background: #04060f; }
.cm-shine { position: absolute; inset: 0; border-radius: 16px; pointer-events: none; opacity: 0; transition: opacity 0.3s; background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 45%), linear-gradient(115deg, rgba(255, 255, 255, 0) 35%, rgba(255, 230, 170, 0.1) 48%, rgba(255, 255, 255, 0) 60%); mix-blend-mode: screen; }
.cm-tilt.on .cm-shine { opacity: 1; }
@media (max-width: 960px) { .card-maker .cm-canvas { max-height: 62vh; } }
.cm-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.cm-actions .btn { flex: 1 1 140px; max-width: 260px; line-height: 1.25; padding-left: 14px; padding-right: 14px; }
.cm-credit { font-size: 12px; margin: 10px 0 0; }

/* 宇宙のデータ */
.cm-statlist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.cm-statlist li { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.cm-statlist b { font-family: var(--ff-x); font-size: 22px; color: var(--gold); line-height: 1.25; overflow-wrap: anywhere; }
.cm-statlist b small { font-family: var(--ff); font-size: 13px; margin-left: 3px; color: var(--tx2); }
.cm-statlist span { font-size: 13px; color: var(--tx2); line-height: 1.5; }
.cm-statlist .cm-moonli svg { width: 48px; height: 48px; }
.cm-statlist .cm-moonli b, .cm-statlist .cm-apodli b { font-family: var(--ff); font-size: 18px; }
.cm-note { font-size: 12.5px; margin: 10px 0 0; }