/* signature-maker (RT-FUN-097) — tool styles. Card system in share-card.css.
   Signature script fonts: OFL subsets in /assets/fonts/signature/ (see SUBSET.md). */

@font-face { font-family: 'Sig Great Vibes'; font-display: swap; src: url('/assets/fonts/signature/great-vibes.woff2?v=1') format('woff2'); }
@font-face { font-family: 'Sig Sacramento'; font-display: swap; src: url('/assets/fonts/signature/sacramento.woff2?v=1') format('woff2'); }
@font-face { font-family: 'Sig Alex Brush'; font-display: swap; src: url('/assets/fonts/signature/alex-brush.woff2?v=1') format('woff2'); }
@font-face { font-family: 'Sig Dancing'; font-weight: 700; font-display: swap; src: url('/assets/fonts/signature/dancing-script.woff2?v=1') format('woff2'); }

/* Chinese calligraphy faces (OFL) — used in CJK mode, lazy-loaded by app.js.
   See ../../../assets/fonts/signature-cjk/SUBSET.md. */
@font-face { font-family: 'Sig CN Kai';  font-display: swap; src: url('/assets/fonts/signature-cjk/ma-shan-zheng.woff2?v=1') format('woff2'); }
@font-face { font-family: 'Sig CN Xing'; font-display: swap; src: url('/assets/fonts/signature-cjk/zhi-mang-xing.woff2?v=1') format('woff2'); }
@font-face { font-family: 'Sig CN Cao';  font-display: swap; src: url('/assets/fonts/signature-cjk/liu-jian-mao-cao.woff2?v=1') format('woff2'); }
@font-face { font-family: 'Sig CN Mao';  font-display: swap; src: url('/assets/fonts/signature-cjk/long-cang.woff2?v=1') format('woff2'); }
/* Traditional calligraphy faces (OFL) — used when a traditional-only character
   is present. Cover GB2312 ∪ Big5, so they also render the shared/simplified
   glyphs in a mixed name. Lazy-loaded by app.js. */
@font-face { font-family: 'Sig TC Kai'; font-display: swap; src: url('/assets/fonts/signature-cjk/iansui-kai.woff2?v=1') format('woff2'); }
@font-face { font-family: 'Sig TC Wen'; font-display: swap; src: url('/assets/fonts/signature-cjk/lxgw-wenkai.woff2?v=1') format('woff2'); }
/* Japanese brush faces (OFL) + Korean brush/pen faces (OFL) — lazy-loaded by
   app.js when the name contains kana / Hangul. See ../signature-jk/SUBSET.md. */
@font-face { font-family: 'Sig JA Syuku'; font-display: swap; src: url('/assets/fonts/signature-jk/yuji-syuku.woff2?v=1') format('woff2'); }
@font-face { font-family: 'Sig JA Boku';  font-display: swap; src: url('/assets/fonts/signature-jk/yuji-boku.woff2?v=1') format('woff2'); }
@font-face { font-family: 'Sig JA Mai';   font-display: swap; src: url('/assets/fonts/signature-jk/yuji-mai.woff2?v=1') format('woff2'); }
@font-face { font-family: 'Sig KO Brush'; font-display: swap; src: url('/assets/fonts/signature-jk/nanum-brush.woff2?v=1') format('woff2'); }
@font-face { font-family: 'Sig KO Pen';   font-display: swap; src: url('/assets/fonts/signature-jk/nanum-pen.woff2?v=1') format('woff2'); }

.sm-tool { display: flex; flex-direction: column; gap: 16px; }
.sm-controls { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.sm-field { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--t2, #6b6760); }
.sm-field.grow { flex: 1; min-width: 200px; }
.sm-field input, .sm-field select { font: inherit; font-weight: 500; padding: 10px 12px; border: 1.5px solid var(--border, #ebebeb); border-radius: 8px; background: var(--card-bg, #fff); color: var(--t1, #1a1814); }
.sm-field :focus-visible { outline: 3px solid #2440a0; outline-offset: 1px; border-color: #2440a0; }

.sm-inks { display: flex; gap: 8px; align-items: center; }
.sm-ink { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border, #ebebeb); cursor: pointer; padding: 0; }
.sm-ink.is-active { border-color: var(--rt-accent, #e8622a); box-shadow: 0 0 0 2px rgba(232,98,42,.25); }
.sm-ink:focus-visible { outline: 2px solid #1a1814; outline-offset: 2px; }

.sm-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--t1, #1a1814); }

.sm-convert { font: inherit; font-size: .9rem; font-weight: 600; padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--border, #ebebeb); background: var(--card-bg, #fff); color: var(--rt-accent, #e8622a); cursor: pointer; white-space: nowrap; transition: border-color .12s ease, background .12s ease; }
.sm-convert:hover { border-color: var(--rt-accent, #e8622a); background: rgba(232,98,42,.06); }
.sm-convert:disabled { opacity: .55; cursor: default; }
.sm-convert:focus-visible { outline: 2px solid #2440a0; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sm-convert { transition: none; } }

/* Live preview (white "paper") */
.sm-preview { background: #fff; border: 1px solid var(--border, #ebebeb); border-radius: 14px; min-height: 150px; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: hidden; }
.sm-sig { font-size: clamp(2.4rem, 9vw, 4.6rem); line-height: 1.2; white-space: nowrap; max-width: 100%; }
.sm-sig.underline { border-bottom: 3px solid currentColor; padding-bottom: 6px; }

.sm-stage { background: #0c1827; border-radius: 16px; }
.sm-note { font-size: .82rem; color: var(--t2, #6b6760); margin: 0; }

/* Share card (1080×1350 coords) — warm paper */
.sm-card {
    align-items: center; text-align: center; justify-content: center;
    background: linear-gradient(160deg, #fbf8f1 0%, #f3ece0 100%); color: #1a1814;
}
.sm-card .sc-eyebrow { font-size: 26px; letter-spacing: 8px; color: #b4832a; }
.sm-card-sig { font-size: 200px; line-height: 1.25; margin: 36px 30px; max-width: 940px; white-space: nowrap; overflow: hidden; }
.sm-card-sig.underline { border-bottom: 6px solid currentColor; padding-bottom: 16px; display: inline-block; }
.sm-card-name { font-size: 34px; letter-spacing: 6px; text-transform: uppercase; color: #6b6760; }
.sm-card .sc-url, .sm-card .sc-wordmark { color: #6b6760; }
.sm-card .sc-wordmark { color: #1a1814; }