/* ワンタイム表札 */
:root {
  --hyo-ink: #1f2328;
  --hyo-wall: #ece7df;
  --hyo-accent: #b4543a;
  --hyo-paper: #faf8f4;
}
body { background: var(--hyo-paper); color: var(--hyo-ink); font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif; }
a { color: var(--hyo-accent); }
.hyo-header { background: #fff; border-bottom: 1px solid #e7e2da; padding: 10px 0; }
.hyo-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--hyo-ink); text-decoration: none; font-size: 1.1rem; }
.hyo-brand img { object-fit: cover; object-position: 50% 60%; }
.hyo-header nav a { color: var(--hyo-ink); text-decoration: none; }
.hyo-hero { background: linear-gradient(160deg, #f4efe7 0%, #e6ded2 100%); padding: 56px 0 48px; }
.hyo-hero h1 { font-weight: 800; font-size: clamp(1.8rem, 4.5vw, 2.8rem); line-height: 1.3; margin-bottom: 16px; }
.hyo-eyebrow { color: var(--hyo-accent); font-weight: 700; letter-spacing: .1em; margin-bottom: 8px; }
.hyo-price { font-size: 2rem; font-weight: 800; line-height: 1; }
.hyo-price span { font-size: .9rem; font-weight: 600; margin-right: 2px; }
.hyo-price small { font-size: 1rem; }
.hyo-price em { display: block; font-style: normal; font-size: .75rem; font-weight: 500; color: #6b6259; margin-top: 4px; }
.hyo-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hyo-hero-grid a { background: var(--hyo-wall); border-radius: 14px; display: block; padding: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.hyo-hero-grid img { width: 100%; height: auto; display: block; }
.hyo-h2 { font-size: 1.35rem; font-weight: 800; margin-bottom: 18px; }
.hyo-card { background: #fff; border-radius: 14px; padding: 16px; box-shadow: 0 1px 6px rgba(0,0,0,.05); }
.hyo-band { background: #f1ece4; }
.hyo-num { width: 32px; height: 32px; border-radius: 50%; background: var(--hyo-ink); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; font-weight: 700; }
.hyo-preview-wrap { position: relative; background: var(--hyo-wall); border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px #ddd5c9; }
/* PC: プレビュー・寸法・メッセージをまとめて画面に貼り付ける（プレビューだけ貼ると、下のメッセージが上に重なる）。
   メッセージまで画面に収まるよう、プレビューの大きさは画面の高さに合わせる */
@media (min-width: 992px) {
  .hyo-sticky { position: sticky; top: 12px; }
  .hyo-sticky .hyo-preview-wrap { max-width: max(320px, calc(100vh - 260px)); margin: 0 auto; }
}
.hyo-preview-scroll { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.hyo-preview-scroll.zoomed { overflow: auto; overscroll-behavior: contain; }
#hyo-preview { width: calc(var(--hyo-zoom, 1) * 100%); height: auto; display: block; aspect-ratio: 1 / 1; max-width: none; }
.hyo-preview-scroll.zoomed #hyo-preview { image-rendering: pixelated; }
.hyo-zoom { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 2px; background: rgba(255,255,255,.85); border-radius: 8px; padding: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.hyo-zoom .btn { min-width: 2rem; padding: .1rem .4rem; touch-action: manipulation; }
.hyo-zoom-val { min-width: 3.4rem !important; font-variant-numeric: tabular-nums; font-size: .75rem; }
.hyo-busy { position: absolute; right: 10px; top: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: .75rem; padding: 2px 10px; border-radius: 99px; }
.hyo-step { background: #fff; border-radius: 14px; padding: 16px; margin-bottom: 14px; box-shadow: 0 1px 6px rgba(0,0,0,.05); }
.hyo-step h3 { font-size: 1rem; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.hyo-step h3 span { width: 24px; height: 24px; border-radius: 50%; background: var(--hyo-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; }
.hyo-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.hyo-tpl { border: 2px solid transparent; background: var(--hyo-wall); border-radius: 10px; padding: 4px 4px 6px; cursor: pointer; text-align: center; }
.hyo-tpl img { width: 100%; aspect-ratio: 1 / 1; display: block; }
.hyo-tpl span { font-size: .68rem; display: block; line-height: 1.3; margin-top: 2px; color: #4b4540; }
.hyo-tpl.active { border-color: var(--hyo-accent); background: #fff; }
.hyo-tpl:focus-visible { outline: 3px solid #f0b39e; }
/* 横書き／縦書きの切り替え: 一覧はその向きの図柄だけ */
.hyo-templates[data-dir="h"] .hyo-tpl[data-v="1"], .hyo-templates[data-dir="v"] .hyo-tpl:not([data-v="1"]) { display: none; }
/* オリジナル画像: グリッドの全幅を使う横長ボタン */
.hyo-tpl.hyo-tpl-wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; text-align: left; padding: 8px 12px 8px 8px; }
.hyo-tpl-wide img { width: 92px; flex: 0 0 92px; }
.hyo-tpl-wide .hyo-tpl-body { display: block; margin: 0; font-size: .8rem; }
.hyo-tpl-wide .hyo-tpl-body strong { display: block; font-size: .95rem; color: #2a2622; }
.hyo-tpl-wide .hyo-tpl-body em { display: block; font-style: normal; color: #4b4540; }
.hyo-tpl-wide .hyo-tpl-body small { display: block; color: #a14a2a; margin-top: 2px; }
.hyo-rights { background: #fff6ef; border: 1px solid #f0b39e; border-radius: 8px; padding: 10px 12px; color: #4b4540; }
.hyo-rights .fw-bold:first-child { color: #a14a2a; }
.hyo-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.hyo-spec th { width: 7em; color: #6b6259; font-weight: 600; white-space: nowrap; }
.hyo-footer { background: #2a2622; color: #d7cfc5; padding: 28px 0; margin-top: 40px; }
.hyo-footer a { color: #f1d6c8; }

/* Tagify（フォント選択） */
.hyo-font-input { width: 100%; }
.tagify.hyo-font-input, .tagify { --tag-bg: transparent; --tags-border-color: #ced4da; border-radius: 8px; width: 100%; background: #fff; }
.tagify--select .tagify__tag { margin: 6px; }
.tagify__tag-text { font-size: 1.15rem; }
.hyo-font-dd .tagify__dropdown__wrapper { max-height: 60vh; }
.hyo-font-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px !important; border-bottom: 1px solid #f0ece6; }
.hyo-font-sample { display: block; font-size: 1.6rem; line-height: 1.6; min-height: 2.6rem; white-space: nowrap; overflow: visible; color: var(--hyo-ink); }
.hyo-font-dd .tagify__dropdown__item { max-height: none; overflow: visible; }
.hyo-font-name { font-size: .78rem; color: #5b544d; }
.hyo-font-name small { margin-left: 8px; color: #9a9188; }
.hyo-font-item.tagify__dropdown__item--active { background: #f6ede7; }

/* 注文ページ */
.hyo-order-no { font-size: 1.8rem; font-weight: 800; letter-spacing: .05em; }
.hyo-status { display: inline-block; padding: 4px 12px; border-radius: 99px; font-size: .85rem; font-weight: 700; background: #fff3cd; color: #7a5a00; }
.hyo-status.paid, .hyo-status.producing { background: #d1e7dd; color: #0f5132; }
.hyo-status.shipped { background: #cfe2ff; color: #084298; }
.hyo-status.canceled { background: #eee; color: #666; }
.hyo-img-box { background: var(--hyo-wall); border-radius: 14px; overflow: hidden; }
.hyo-img-box img { width: 100%; display: block; }
#card-container { margin-bottom: 12px; min-height: 90px; }
.btn-paypay { display: block; width: 100%; padding: 12px; background: #e0004d; color: #fff; border: none; border-radius: 8px; font-weight: 700; }
.btn-paypay:disabled { background: #f0a9c0; }
.btn-apple-pay { display: block; width: 100%; padding: 12px; background: #000; color: #fff; border: none; border-radius: 8px; }
.pay-divider { text-align: center; font-size: .78rem; color: #999; margin: 12px 0; }

.hyo-font-filter { display: grid; grid-template-columns: 9.5em 1fr; gap: 6px; margin-bottom: 6px; }

/* テストモード（?test=mokumoku・社内LANのみ） */
.hyo-testbadge { background: #f59e0b; color: #000; padding: 2px 10px; border-radius: 4px; font-size: .75rem; margin-left: 12px; font-weight: 700; white-space: nowrap; }

/* 文字の位置の微調整 */
.hyo-nudge { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.hyo-nudge-name { width: 3.2em; font-size: .8rem; }
.hyo-nudge .btn-outline-dark { width: 2.4rem; touch-action: manipulation; user-select: none; }
.hyo-nudge-val { min-width: 9.5em; margin-left: 4px; }
.hyo-nudge-reset { padding: 0 4px; }
.hyo-nudge-sep { flex-basis: 100%; height: 0; }
.hyo-nudge-label { width: 3.2em; white-space: nowrap; font-size: .8rem; color: #6b6259; }
.hyo-scale-val { min-width: 3.2em; text-align: center; font-variant-numeric: tabular-nums; }
.hyo-nudge { padding-bottom: 6px; border-bottom: 1px dashed #eee; }

/* 行ごとの設定（配置・太さ・大きさ・位置） */
.hyo-linecfg { border: 1px solid #eee7de; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.hyo-linecfg-head { font-weight: 700; font-size: .9rem; margin-bottom: 6px; }
.hyo-linecfg-empty { display: none; font-weight: 400; font-size: .75rem; color: #9a9188; margin-left: 6px; }
.hyo-linecfg.is-empty { opacity: .55; }
.hyo-linecfg.is-empty .hyo-linecfg-empty { display: inline; }
.hyo-linecfg .hyo-nudge { border-bottom: 0; padding-bottom: 0; }

/* 画像入稿（オリジナル画像） */
.hyo-upload { border: 1px dashed #d9cfc2; border-radius: 10px; padding: 10px 12px; background: #fbf9f6; }
.hyo-img-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.hyo-img-chip { display: flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 6px 3px 3px; border: 2px solid #d9cfc2; border-radius: 8px; background: #fff; cursor: pointer; font-size: .8rem; }
.hyo-img-chip.active { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.2); }
.hyo-img-chip canvas { width: 40px; height: 40px; background: #ece7df; border-radius: 4px; flex: 0 0 auto; }
.hyo-img-chip-name { max-width: 11em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hyo-img-chip .btn-close { flex: 0 0 auto; padding: 4px; }
.hyo-img-hint { background: #eef4ff; border: 1px solid #c7d7fb; border-radius: 6px; padding: 6px 8px; color: #33415c; }
.hyo-ai { border-bottom: 1px dashed #d9cfc2; padding-bottom: 10px; }
.hyo-ai-error { color: #b02a37; }
.hyo-ai-advice { color: #4b4540; }
.hyo-ai-debug { background: #fff8d6; border: 1px solid #e0c96b; border-radius: 6px; padding: 6px 8px; white-space: pre-wrap; word-break: break-word; color: #333; }

.hyo-ctxmenu { position: absolute; z-index: 2000; min-width: 12em; }
.hyo-ctxmenu[hidden] { display: none !important; }
.hyo-drawbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; padding: 6px; background: #fff; border: 1px solid #e3dbd0; border-radius: 10px; }
.hyo-drawbar[hidden] { display: none; }
.hyo-drawbar .btn { display: inline-flex; align-items: center; gap: 4px; touch-action: manipulation; }
.hyo-ico { width: 16px; height: 16px; flex: 0 0 auto; }
.hyo-drawbar-w { display: inline-flex; align-items: center; gap: 4px; margin: 0; color: #4b4540; }
.hyo-drawbar-w .form-select { width: auto; padding-top: .15rem; padding-bottom: .15rem; }
.hyo-drawbar-info { flex-basis: 100%; font-size: .75rem; color: #6b6259; min-height: 0; }
.hyo-drawbar-info:empty { display: none; }
@media (max-width: 520px) { .hyo-drawbar .btn span { display: none; } .hyo-drawbar .btn { padding: .3rem .5rem; } }
.hyo-fixthin { display: flex; align-items: center; gap: 6px; background: #fff4e6; border: 1px solid #f0c48f; border-radius: 8px; padding: 2px 10px; font-size: .8rem; }
.hyo-fixthin[hidden] { display: none; }
.hyo-fixthin-label { white-space: nowrap; margin: 0; }
.hyo-fixthin .form-range { flex: 1 1 auto; min-width: 60px; height: 1.2rem; }
.hyo-fixthin-end { color: #8a8077; }
.hyo-fixthin-val { white-space: nowrap; color: #6b6259; min-width: 7.2em; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .hyo-fixthin-label { display: none; } }

/* 注文ページ: テンプレートとしての提供（半額） */
.hyo-offer { border: 1px solid #d6d3d1; border-radius: .5rem; padding: .6rem .75rem; margin-bottom: 1rem; background: #fafaf9; }
.hyo-offer.on { border-color: #16a34a; background: #f0fdf4; }
.hyo-offer-dlg { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 0; border-radius: .75rem; padding: 1rem; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.hyo-offer-dlg::backdrop { background: rgba(0,0,0,.45); }
.hyo-offer-terms { max-height: 50vh; overflow: auto; border: 1px solid #e7e5e4; border-radius: .5rem; padding: .5rem .75rem; background: #fafaf9; }
.hyo-offer-terms ol { padding-left: 1.2rem; margin: 0; }
.hyo-offer-terms li { margin-bottom: .4rem; }

/* マイページ（このブラウザに保存したデザイン・画像） */
.hyo-my { border: 1px dashed #d6d3d1; border-radius: .5rem; padding: .5rem .75rem; background: #fafaf9; }
.hyo-my-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }
.hyo-my-grid-sm { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.hyo-my-item { display: flex; flex-direction: column; gap: .2rem; border: 1px solid #e7e5e4; border-radius: .5rem; padding: .4rem; background: #fff; color: inherit; text-decoration: none; min-width: 0; }
.hyo-my-item.is-auto { border-color: #1c1917; }
.hyo-my-item > a { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: .2rem; }
.hyo-my-item img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: .35rem; background: #ece7df; }
.hyo-my-item img.is-img { background: #fff; border: 1px solid #f0efee; }
.hyo-my-noimg { width: 100%; aspect-ratio: 1; border-radius: .35rem; background: #ece7df; }
.hyo-my-name { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hyo-my-meta { font-size: .72rem; color: #78716c; }
.hyo-my-acts { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: auto; padding-top: .2rem; }
.hyo-my-acts .btn { padding: .1rem .45rem; font-size: .75rem; }
.hyo-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; }
.hyo-lib-item { display: flex; flex-direction: column; gap: .2rem; border: 1px solid #e7e5e4; border-radius: .5rem; padding: .35rem; background: #fff; text-align: left; min-width: 0; }
.hyo-lib-item:hover, .hyo-lib-item:focus-visible { border-color: #1c1917; }
.hyo-lib-item img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.hyo-lib-item span { font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hyo-lib-ai { display: inline-block; font-size: .65rem; background: #1c1917; color: #fff; border-radius: .25rem; padding: 0 .25rem; margin-right: .2rem; }

/* 同封チラシのクーポン（index.php ?c=） */
.hyo-coupon { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 2px dashed #b4382f; border-radius: 12px; background: #fff7f3; }
.hyo-coupon.off { border-color: #aaa; background: #f6f6f6; }
.hyo-coupon-yen { flex: none; font-size: 1.9rem; font-weight: 800; color: #b4382f; line-height: 1; }
.hyo-coupon-yen small { font-size: .8rem; margin-left: 2px; }