/*
 * デモサイトの「お店の名前で見てみる」（inc/demo.php）。
 * どのデザインの上でも同じ見た目になるよう、色・書体・大きさはここで決める（デザインの指定を受けない）。
 * 左端の縦のタブ → 開くと中央にパネル。ヘッダーや画面下の予約ボタンの帯と重ならない位置。
 */
.sdt { --sdt-primary: #5E44E6; --sdt-text: #252B37; --sdt-sub: #5F6675; --sdt-line: #E2DEF5; font-family: "Noto Sans JP", "Hiragino Sans", sans-serif; }
.sdt *, .sdt *::before, .sdt *::after { box-sizing: border-box; }

/* 左端のタブ */
.sdt-tab { position: fixed; left: 0; top: 50%; z-index: 9990; display: flex; align-items: center; gap: 8px; padding: 16px 10px; border: 0; border-radius: 0 14px 14px 0; background: var(--sdt-primary); color: #fff; font: 700 13px/1.2 "Noto Sans JP", "Hiragino Sans", sans-serif; letter-spacing: 0.1em; writing-mode: vertical-rl; transform: translateY(-50%); box-shadow: 0 10px 30px -10px rgba(37, 43, 55, 0.5); cursor: pointer; transition: padding 0.2s, background 0.2s; }
.sdt-tab:hover, .sdt-tab:focus-visible { padding-left: 14px; background: #4E35D6; }
.sdt-tab:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.sdt-tab-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
.sdt-tab.is-active { background: #0F6E32; }
.sdt-tab.is-active .sdt-tab-dot { background: #9CF0B6; animation: sdt-blink 1.6s ease-in-out infinite; }
@keyframes sdt-blink { 50% { opacity: 0.3; } }

/* パネル */
.sdt-panel { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 0; border-radius: 22px; background: #fff; color: var(--sdt-text); box-shadow: 0 30px 80px -20px rgba(20, 16, 50, 0.45); overflow: auto; }
.sdt-panel::backdrop { background: rgba(25, 20, 50, 0.45); }
.sdt-panel[open] { animation: sdt-in 0.25s ease-out; }
@keyframes sdt-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.sdt-form { padding: 24px 26px 26px; text-align: left; }
.sdt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sdt-title { margin: 0; font: 700 20px/1.4 "Noto Sans JP", "Hiragino Sans", sans-serif; letter-spacing: 0.02em; color: var(--sdt-text); }
.sdt-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--sdt-line); border-radius: 12px; background: #fff; color: var(--sdt-text); font-size: 22px; line-height: 1; cursor: pointer; }
.sdt-close:hover { border-color: var(--sdt-primary); color: var(--sdt-primary); }
.sdt-lead { margin: 10px 0 18px; font-size: 13px; line-height: 1.8; color: var(--sdt-sub); }
.sdt-lead strong { color: var(--sdt-text); }

.sdt-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.sdt-field-name, .sdt-field-catch_en, .sdt-field-catch_jp, .sdt-field-address, .sdt-field-lead, .sdt-field-about_title, .sdt-field-about_text { grid-column: 1 / -1; }
.sdt-group { grid-column: 1 / -1; margin: 6px 0 -2px; padding-top: 12px; border-top: 1px solid var(--sdt-line); font-size: 13px; font-weight: 700; color: var(--sdt-primary); letter-spacing: 0.06em; }
.sdt-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.sdt-field label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 700; color: var(--sdt-sub); letter-spacing: 0.02em; }
.sdt-field textarea { display: block; width: 100%; margin: 0; padding: 10px 14px; border: 1.5px solid #DCD8F0; border-radius: 12px; background: #fff; color: var(--sdt-text); font: 500 15px/1.7 "Noto Sans JP", "Hiragino Sans", sans-serif; resize: vertical; box-shadow: none; }
.sdt-field textarea:focus { outline: none; border-color: var(--sdt-primary); box-shadow: 0 0 0 4px rgba(94, 68, 230, 0.15); }
.sdt-field textarea::placeholder { color: #8A90A0; }
.sdt-field input { display: block; width: 100%; min-height: 44px; margin: 0; padding: 9px 14px; border: 1.5px solid #DCD8F0; border-radius: 12px; background: #fff; color: var(--sdt-text); font: 500 15px/1.5 "Noto Sans JP", "Hiragino Sans", sans-serif; letter-spacing: 0; box-shadow: none; }
.sdt-field input::placeholder { color: #8A90A0; }
.sdt-field input:focus { outline: none; border-color: var(--sdt-primary); box-shadow: 0 0 0 4px rgba(94, 68, 230, 0.15); }

.sdt-designs { margin: 18px 0 0; padding: 0; border: 0; }
.sdt-designs legend { margin-bottom: 6px; padding: 0; font-size: 12px; font-weight: 700; color: var(--sdt-sub); }
.sdt-designs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sdt-designs legend { grid-column: 1 / -1; }
.sdt-design { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 8px 12px; border: 1.5px solid #DCD8F0; border-radius: 12px; font-size: 13px; line-height: 1.4; color: var(--sdt-text); cursor: pointer; }
.sdt-design input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--sdt-primary); }
.sdt-design span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sdt-design strong { font-family: "Jost", "Noto Sans JP", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--sdt-primary); }
.sdt-design:has(input:checked) { border-color: var(--sdt-primary); background: #F0EEFB; }

.sdt-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.sdt-submit { min-height: 50px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--sdt-primary); color: #fff; font: 700 15px/1 "Noto Sans JP", "Hiragino Sans", sans-serif; cursor: pointer; }
.sdt-submit:hover { background: #4E35D6; }
.sdt-reset { color: var(--sdt-sub); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.sdt-reset:hover { color: var(--sdt-primary); }

@media (max-width: 600px) {
	/* スマホは左下の小さな丸いボタン（ページの文字に重ならないよう、画面下の予約ボタンの帯より上） */
	.sdt-tab { top: auto; bottom: 76px; left: 10px; padding: 9px 14px; border-radius: 999px; font-size: 12px; writing-mode: horizontal-tb; transform: none; }
	.sdt-tab:hover, .sdt-tab:focus-visible { padding-left: 14px; }
	.sdt-form { padding: 20px 18px 22px; }
	.sdt-fields, .sdt-designs { grid-template-columns: 1fr 1fr; }
	.sdt-field { grid-column: 1 / -1; } /* スマホは1列。開店・閉店だけ横に並べる */
	.sdt-field-open_time, .sdt-field-close_time { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.sdt-panel[open], .sdt-tab.is-active .sdt-tab-dot { animation: none; }
}