/* ══════════════════════════════════════════════════ * ui.css — 組み立てたもの。ここを直さない。 * 元は assets/ui/ の中。直したら * cd salontown-booking && python3 ../scripts/build_ui_css.py * で作り直す。 * * テーマの替え方: のように書くだけ。 * salon-classic（既定）／warm-editorial／dark／high-contrast * ══════════════════════════════════════════════════ */ /* ───────── assets/ui/tokens.base.css ───────── */ /* ══════════ 尺度のトークン（色を含まない） ══════════ 余白・文字・角丸・影・動き・重なりの「ものさし」。 ★ここは流行が変わっても、ほとんど動かない層。 色だけを差し替えたいときは themes/ を触る。 */ :root{ /* ── 余白（4pxきざみ。名前で覚えるより、隣との差で覚える） ── */ --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; /* ── 文字の大きさ ── */ --text-xs:11.5px; --text-sm:12.5px; --text-md:14px; --text-lg:16px; --text-xl:19px; --text-2xl:24px; --text-3xl:30px; --leading-tight:1.35; --leading-normal:1.7; --leading-loose:2; --weight-normal:400; --weight-medium:500; --weight-bold:700; --weight-black:800; --tracking-tight:0; --tracking-wide:.06em; --tracking-wider:.18em; /* ── 文字の書体 ── */ --font-sans:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; --font-serif:"Noto Serif JP",serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace; /* ── 角丸 ── */ --radius-none:0; --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-full:999px; /* ── 影（濃さは色の層で決める。ここは形だけ） ── */ --shadow-1:0 1px 2px var(--color-shadow); --shadow-2:0 4px 14px var(--color-shadow); --shadow-3:0 12px 32px var(--color-shadow); /* ── 動き ── */ --motion-fast:.12s; --motion-base:.2s; --motion-slow:.4s; --ease:cubic-bezier(.2,.8,.2,1); /* ── 重なりの順番（数字を散らかさない） ── */ --z-base:0; --z-sticky:10; --z-overlay:100; --z-modal:200; --z-toast:300; /* ── 指で押せる大きさ（44pxはAppleの目安） ── */ --tap-min:44px; /* ── 画面の幅 ── */ --width-content:960px; --width-narrow:640px; --width-wide:1280px; /* ── 密度（狭くしたい店は data-density="compact" を body に付ける） ── */ --density:1; } [data-density="compact"]{ --density:.82; } [data-density="comfortable"]{ --density:1.15; } @media (prefers-reduced-motion:reduce){ :root{ --motion-fast:.001ms; --motion-base:.001ms; --motion-slow:.001ms; } } /* ───────── assets/ui/themes/salon-classic.css ───────── */ /* ══════════ salon-classic（既定） ══════════ いまの admin / index / staff の見た目そのもの。 ★値は既存の :root から1つずつ写した。見た目は変わらない。 */ :root, [data-theme="salon-classic"]{ --t-surface: #eef1f6; --t-surface-raised: #ffffff; --t-surface-sunken: #f1f4f9; --t-surface-inverse: #1e293b; --t-text: #1b2333; --t-text-muted: #6b7484; --t-text-inverse: #ffffff; --t-text-on-action: #ffffff; --t-border: #e4e8f0; --t-border-strong: #c8cfdc; --t-focus: #0f766e; --t-action: #0f766e; --t-action-hover: #0b5d56; --t-action-soft: #e6f4f2; --t-accent: #b08d3e; --t-ok: #16a34a; --t-ok-soft: #eafaf0; --t-warn: #e0762d; --t-warn-soft: #fdf1e7; --t-danger: #dc2626; --t-danger-soft: #fdf0f0; --t-shadow: rgba(20,30,50,.08); /* ── 第2階層（いまの画面から拾った値。見た目は変わらない） ── */ --t-action-tint: #f0faf8; --t-action-border: #bfe3dd; --t-action-strong: #2dd4bf; --t-accent-text: #8a6d1f; --t-accent-soft: #fffdf5; --t-accent-border: #ead9a8; --t-ok-text: #0d5c55; --t-warn-text: #b45309; --t-danger-text: #923b32; --t-danger-border: #f3cfcf; --t-surface-inverse-2: #0f172a; --t-surface-inverse-soft:#3b4454; --t-on-inverse: #cbd5e1; --t-on-inverse-muted: #94a3b8; --t-action-on-inverse: #7fd6cb; } /* ───────── assets/ui/themes/warm-editorial.css ───────── */ /* ══════════ warm-editorial ══════════ counsel.html（来店前のご希望うかがい）で使っている、紙のような暖色。 お客様が手に取る画面向き。 ★これも値は既存の :root から写した。counsel の見た目は変わらない。 */ [data-theme="warm-editorial"]{ /* warm1131：SEAM の温かい色（テラコッタ・金・紙） */ --t-surface: #f6efe6; --t-surface-raised: #fffdf9; --t-surface-sunken: #efe6da; --t-surface-inverse: #3a2e28; --t-text: #2b2420; --t-text-muted: #7a6d64; --t-text-inverse: #ffffff; --t-text-on-action: #ffffff; --t-border: #e4d8ca; --t-border-strong: #cdbba8; --t-focus: #8a5a44; --t-action: #8a5a44; --t-action-hover: #6f4634; --t-action-soft: #f3e6dc; --t-accent: #b8955a; --t-ok: #2f6d50; --t-ok-soft: #e8f0ed; --t-warn: #a5742a; --t-warn-soft: #f7efdf; --t-danger: #a44338; --t-danger-soft: #fff1ee; --t-shadow: rgba(40,32,24,.08); /* ── 第2階層（counsel.html から拾った値） ── */ --t-action-tint: #f7ebe2; --t-action-border: #e6cdbc; --t-action-strong: #b88a74; --t-accent-text: #8d6048; --t-accent-soft: #f7f0e4; --t-accent-border: #e6d9c2; --t-ok-text: #31584f; --t-warn-text: #8a6d1f; --t-danger-text: #923b32; --t-danger-border: #e5bbb5; --t-surface-inverse-2: #172823; --t-surface-inverse-soft:#29463f; --t-on-inverse: #d8e6df; --t-on-inverse-muted: #8a8f8c; --t-action-on-inverse: #bfe8e2; } /* ───────── assets/ui/themes/dark.css ───────── */ /* ══════════ dark ══════════ 夜のサロン・暗い店内で、まぶしくないように。 ★暗くしただけの反転にはしない。線と文字の見やすさを保つ。 */ [data-theme="dark"]{ --t-surface: #14171c; --t-surface-raised: #1c2027; --t-surface-sunken: #10131722; --t-surface-inverse: #e7ebf2; --t-text: #e7ebf2; --t-text-muted: #98a1b0; --t-text-inverse: #14171c; --t-text-on-action: #06120f; --t-border: #2b313a; --t-border-strong: #3d4653; --t-focus: #4fd1c5; --t-action: #3fbfb2; --t-action-hover: #59d3c6; --t-action-soft: #14312e; --t-accent: #d8b878; --t-ok: #4ade80; --t-ok-soft: #10281a; --t-warn: #fbbf24; --t-warn-soft: #2c220b; --t-danger: #f87171; --t-danger-soft: #2e1414; --t-shadow: rgba(0,0,0,.5); /* ── 第2階層（暗い店内むけ。明るい面を残さない） ── */ --t-action-tint: #14312e; --t-action-border: #1f4a45; --t-action-strong: #59d3c6; --t-accent-text: #e0c48a; --t-accent-soft: #2a2416; --t-accent-border: #4a3f22; --t-ok-text: #86efac; --t-warn-text: #fcd34d; --t-danger-text: #fca5a5; --t-danger-border: #5a2626; --t-surface-inverse-2: #0b0d11; --t-surface-inverse-soft:#262c35; --t-on-inverse: #cbd5e1; --t-on-inverse-muted: #8b94a3; --t-action-on-inverse: #7fd6cb; } /* ───────── assets/ui/themes/high-contrast.css ───────── */ /* ══════════ high-contrast ══════════ 目が見えにくい方・明るい店頭で画面が見えないときのため。 ★色の差を大きくし、線を太くする。飾りは捨てる。 */ [data-theme="high-contrast"]{ --t-surface: #ffffff; --t-surface-raised: #ffffff; --t-surface-sunken: #f2f2f2; --t-surface-inverse: #000000; --t-text: #000000; --t-text-muted: #3a3a3a; --t-text-inverse: #ffffff; --t-text-on-action: #ffffff; --t-border: #000000; --t-border-strong: #000000; --t-focus: #0000ee; --t-action: #00514a; --t-action-hover: #00332e; --t-action-soft: #dcefed; --t-accent: #6b4b00; --t-ok: #006b2d; --t-ok-soft: #e2f5e9; --t-warn: #8a4b00; --t-warn-soft: #fbeede; --t-danger: #a10000; --t-danger-soft: #fbe4e4; --t-shadow: rgba(0,0,0,.35); } [data-theme="high-contrast"] *{ box-shadow:none !important; } [data-theme="high-contrast"] :where(a,button,input,select,textarea):focus-visible{ outline:3px solid var(--color-focus) !important; outline-offset:2px !important; /* ── 第2階層（見えやすさ優先。薄い色を作らない） ── */ --t-action-tint: #ffffff; --t-action-border: #000000; --t-action-strong: #00332e; --t-accent-text: #4a3400; --t-accent-soft: #ffffff; --t-accent-border: #000000; --t-ok-text: #00461e; --t-warn-text: #6b3a00; --t-danger-text: #7a0000; --t-danger-border: #000000; --t-surface-inverse-2: #000000; --t-surface-inverse-soft:#1a1a1a; --t-on-inverse: #ffffff; --t-on-inverse-muted: #e0e0e0; --t-action-on-inverse: #9fe8e0; } /* ───────── assets/ui/tokens.semantic.css ───────── */ /* ══════════ 意味のトークン ══════════ 画面のCSSは、**ここに書いてある名前だけ**を使う。 ★「--brand」ではなく「--color-action-primary」と書く。 ブランド色を押しボタン以外にも使い始めた瞬間に、 「ブランド色を変えたい」が「押しボタンだけ変えたい」と 区別できなくなるため。 ★値そのものはここに書かない。themes/ の中で決める。 こうしておくと、テーマのCSSを差し替えるだけで 見た目が変わり、業務のHTMLとJSは触らずに済む。 */ :root{ /* ── 面（背景） ── */ --color-surface: var(--t-surface); --color-surface-raised: var(--t-surface-raised); --color-surface-sunken: var(--t-surface-sunken); --color-surface-inverse: var(--t-surface-inverse); /* ── 文字 ── */ --color-text: var(--t-text); --color-text-muted: var(--t-text-muted); --color-text-inverse: var(--t-text-inverse); --color-text-on-action: var(--t-text-on-action); /* ── 線 ── */ --color-border: var(--t-border); --color-border-strong: var(--t-border-strong); --color-focus: var(--t-focus); /* ── 押すもの ── */ --color-action-primary: var(--t-action); --color-action-primary-hover: var(--t-action-hover); --color-action-soft: var(--t-action-soft); --color-action-accent: var(--t-accent); /* ── 状態（色だけに頼らない。アイコンや文言も必ず添える） ── */ --color-status-ok: var(--t-ok); --color-status-ok-soft: var(--t-ok-soft); --color-status-warn: var(--t-warn); --color-status-warn-soft: var(--t-warn-soft); --color-status-danger: var(--t-danger); --color-status-danger-soft: var(--t-danger-soft); /* ── 影の濃さ ── */ --color-shadow: var(--t-shadow); } /* ══════════ 第2階層（実際に使われている役割） ══════════ 画面を数えたら、この形の色が繰り返し出ていた。 名前を付けないと、暗いテーマにしたときにここだけ明るいまま残る。 */ :root{ /* 押すものの、さらに薄い面と、その線 */ --color-action-tint: var(--t-action-tint); --color-action-border: var(--t-action-border); --color-action-strong: var(--t-action-strong); /* 金色まわり（会員・特別なお知らせ） */ --color-accent-text: var(--t-accent-text); --color-accent-soft: var(--t-accent-soft); --color-accent-border: var(--t-accent-border); /* 状態の、線と読める文字 */ --color-status-ok-text: var(--t-ok-text); --color-status-warn-text: var(--t-warn-text); --color-status-danger-text: var(--t-danger-text); --color-status-danger-border: var(--t-danger-border); /* 濃い面（帯・見出し）の上に載るもの */ --color-surface-inverse-2: var(--t-surface-inverse-2); --color-surface-inverse-soft: var(--t-surface-inverse-soft); --color-on-inverse: var(--t-on-inverse); --color-on-inverse-muted: var(--t-on-inverse-muted); --color-action-on-inverse: var(--t-action-on-inverse); } /* ══════════ 昔の名前（そのまま動かすための橋） ══════════ いまの画面は --brand や --ink を使って書かれている。 一度に全部書き換えると必ず壊すので、 昔の名前を、意味のトークンへ向けておく。 ★新しく書くところでは使わないこと。 */ :root{ --brand: var(--color-action-primary); --brand-soft: var(--color-action-soft); --ink: var(--color-text); --muted: var(--color-text-muted); --line: var(--color-border); --bg: var(--color-surface); --panel: var(--color-surface-raised); --chip: var(--color-surface-sunken); --card: var(--color-surface-raised); --paper: var(--color-surface); --body: var(--color-text); --navy: var(--color-surface-inverse); --navy2: var(--color-surface-inverse); --gold: var(--color-action-accent); --copper: var(--color-action-accent); --good: var(--color-status-ok); --ok: var(--color-status-ok); --warn: var(--color-status-warn); --bad: var(--color-status-danger); --risk: var(--color-status-danger); --risk-soft: var(--color-status-danger-soft); } /* ───────── assets/ui/components.css ───────── */ /* ══════════ 共通の部品 ══════════ ボタン・カード・入力欄・見出し・帯・表・タブ・知らせ。 ★色も余白もトークンだけで書く。ここに #hex を書かない。 書いた瞬間に、テーマを差し替えても変わらない場所ができる。 */ /* ── 押すもの ── */ .ui-btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); min-height:var(--tap-min); padding:0 var(--space-5); border:1px solid transparent; border-radius:var(--radius-md); font:var(--weight-bold) var(--text-md)/1 var(--font-sans); background:var(--color-action-primary); color:var(--color-text-on-action); cursor:pointer; transition:background var(--motion-base) var(--ease); } .ui-btn:hover{ background:var(--color-action-primary-hover); } .ui-btn:disabled{ opacity:.5; cursor:not-allowed; } .ui-btn--quiet{ background:transparent; color:var(--color-text); border-color:var(--color-border); } .ui-btn--quiet:hover{ background:var(--color-surface-sunken); } .ui-btn--soft{ background:var(--color-action-soft); color:var(--color-action-primary); } .ui-btn--danger{ background:var(--color-status-danger); } .ui-btn--sm{ min-height:36px; padding:0 var(--space-3); font-size:var(--text-sm); } /* ── まとまり ── */ .ui-card{ background:var(--color-surface-raised); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:calc(var(--space-5) * var(--density)); box-shadow:var(--shadow-1); } .ui-card__title{ margin:0 0 var(--space-2); color:var(--color-text); font:var(--weight-bold) var(--text-lg)/var(--leading-tight) var(--font-sans); } .ui-card__note{ margin:0; color:var(--color-text-muted); font-size:var(--text-sm); } /* ── 書き入れるもの ── */ .ui-field{ display:block; margin-bottom:var(--space-4); } .ui-label{ display:block; margin-bottom:var(--space-1); color:var(--color-text-muted); font-size:var(--text-sm); letter-spacing:var(--tracking-wide); } .ui-input, .ui-select, .ui-textarea{ width:100%; min-height:var(--tap-min); padding:var(--space-2) var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface-raised); color:var(--color-text); font:var(--weight-normal) var(--text-md)/var(--leading-normal) var(--font-sans); } .ui-input:focus, .ui-select:focus, .ui-textarea:focus{ border-color:var(--color-focus); outline:2px solid var(--color-focus); outline-offset:1px; } .ui-textarea{ min-height:96px; resize:vertical; } /* ── 状態を示す小さな札 ── ★色だけで意味を伝えない。必ず文字（と、必要なら形）を添える。 */ .ui-badge{ display:inline-flex; align-items:center; gap:var(--space-1); padding:2px var(--space-2); border-radius:var(--radius-full); font:var(--weight-bold) var(--text-xs)/1.8 var(--font-sans); border:1px solid currentColor; } .ui-badge--ok{ color:var(--color-status-ok); background:var(--color-status-ok-soft); } .ui-badge--warn{ color:var(--color-status-warn); background:var(--color-status-warn-soft); } .ui-badge--danger{ color:var(--color-status-danger); background:var(--color-status-danger-soft); } .ui-badge--quiet{ color:var(--color-text-muted); background:var(--color-surface-sunken); } .ui-badge::before{ font-size:1.1em; line-height:1; } .ui-badge--ok::before{ content:"✓"; } .ui-badge--warn::before{ content:"！"; } .ui-badge--danger::before{ content:"✕"; } /* ── 表 ── */ .ui-table{ width:100%; border-collapse:collapse; font-size:var(--text-md); font-variant-numeric:tabular-nums; } .ui-table th, .ui-table td{ padding:calc(var(--space-3) * var(--density)) var(--space-2); border-bottom:1px solid var(--color-border); text-align:left; } .ui-table th{ color:var(--color-text-muted); font-size:var(--text-sm); font-weight:var(--weight-medium); } .ui-table td.num, .ui-table th.num{ text-align:right; } .ui-table__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; } /* ── 並び ── */ .ui-tabs{ display:flex; gap:var(--space-1); flex-wrap:wrap; border-bottom:1px solid var(--color-border); } .ui-tab{ min-height:var(--tap-min); padding:0 var(--space-4); background:transparent; border:none; border-bottom:2px solid transparent; color:var(--color-text-muted); font:var(--weight-medium) var(--text-md)/1 var(--font-sans); cursor:pointer; } .ui-tab[aria-selected="true"]{ color:var(--color-text); border-bottom-color:var(--color-action-primary); } /* ── 覆い（確認・入力） ── */ .ui-modal-bg{ position:fixed; inset:0; z-index:var(--z-modal); background:var(--color-surface-inverse); opacity:.5; } .ui-modal{ position:fixed; z-index:calc(var(--z-modal) + 1); left:50%; top:50%; transform:translate(-50%,-50%); width:min(92vw, var(--width-narrow)); max-height:86vh; overflow:auto; background:var(--color-surface-raised); color:var(--color-text); border-radius:var(--radius-xl); box-shadow:var(--shadow-3); padding:calc(var(--space-6) * var(--density)); } /* ── 知らせ ── */ .ui-toast{ position:fixed; z-index:var(--z-toast); left:50%; bottom:var(--space-6); transform:translateX(-50%); background:var(--color-surface-inverse); color:var(--color-text-inverse); padding:var(--space-3) var(--space-5); border-radius:var(--radius-full); font-size:var(--text-md); box-shadow:var(--shadow-2); } /* ── 置きかた ── */ .ui-stack{ display:flex; flex-direction:column; gap:var(--space-4); } .ui-cluster{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; } .ui-grid{ display:grid; gap:var(--space-4); grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); } .ui-shell{ max-width:var(--width-content); margin:0 auto; padding:var(--space-5) var(--space-4) var(--space-16); } /* ───────── warm1131：温かいテーマの飾り（warm-editorial のときだけ） ───────── */ [data-theme="warm-editorial"] body{background:var(--color-surface) radial-gradient(1200px 600px at 100% -10%,#fbf3ea 0,transparent 60%)} [data-theme="warm-editorial"] .card,[data-theme="warm-editorial"] .mbox,[data-theme="warm-editorial"] .loginBox{border:1px solid var(--color-border);box-shadow:0 0 0 4px var(--color-surface-raised),0 0 0 5px var(--color-border),0 10px 24px -18px rgba(70,45,30,.35);border-radius:14px;position:relative;background:var(--color-surface-raised)} [data-theme="warm-editorial"] .card{border-top:3px solid var(--color-action-primary)} [data-theme="warm-editorial"] .card > h2:first-child,[data-theme="warm-editorial"] .card > .row:first-child > h2{padding-left:20px;background:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20d%3D%22M6%201l1.6%203.4L11%206%207.6%207.6%206%2011%204.4%207.6%201%206l3.4-1.6z%22%20fill%3D%22%23b8955a%22%2F%3E%3C%2Fsvg%3E") no-repeat 0 55%/12px 12px} [data-theme="warm-editorial"] h2,[data-theme="warm-editorial"] h3{letter-spacing:.03em;color:#3a2e28} [data-theme="warm-editorial"] hr{border:0;border-top:1px dashed var(--color-border-strong);margin:12px 0} [data-theme="warm-editorial"] .lrow{border-top:1px dotted var(--color-border-strong)} [data-theme="warm-editorial"] .hint{color:var(--color-text-muted)} [data-theme="warm-editorial"] .btn{border-radius:12px;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 2px 6px -4px rgba(70,45,30,.5)} [data-theme="warm-editorial"] .btn.gray{background:var(--color-surface-sunken);border:1px solid var(--color-border-strong);color:var(--color-text)} [data-theme="warm-editorial"] .brand,[data-theme="warm-editorial"] .wordmark,[data-theme="warm-editorial"] .logo{opacity:1;color:#8a5a44;font-weight:800;letter-spacing:.18em;padding-left:26px;background:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2236%22%20height%3D%2236%22%20rx%3D%2210%22%20fill%3D%22%238a5a44%22%2F%3E%3Cpath%20d%3D%22M12%2027c3-1%205-3%205-6%200-4-4-4-4-8%200-2%202-3%204-3%202%200%203%201%204%202%22%20fill%3D%22none%22%20stroke%3D%22%23f3e2d3%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M22%2013c2%201%203%203%203%206%200%204%204%204%204%208%200%202-2%203-4%203-2%200-3-1-4-2%22%20fill%3D%22none%22%20stroke%3D%22%23e6c089%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat 0 50%/20px 20px;line-height:20px} [data-theme="warm-editorial"] .top .brand,[data-theme="warm-editorial"] .hdr .brand{color:#e6c089} [data-theme="warm-editorial"] .top,[data-theme="warm-editorial"] .hdr{background:linear-gradient(135deg,#3a2e28 0,#5a4034 100%)} [data-theme="warm-editorial"] #tabs button.on,[data-theme="warm-editorial"] #tabs button[aria-selected="true"]{background:var(--color-action-soft);color:#6f4634;box-shadow:inset 3px 0 0 var(--color-action-primary)} [data-theme="warm-editorial"] .navCategory{color:#a57a52;letter-spacing:.14em} html[data-theme="warm-editorial"],html[data-theme="warm-editorial"] body,html[data-theme="warm-editorial"] #ledger{--board-head:#f3e7da;--board-line:#cdbba8;--board-ink:#3a2e28} [data-theme="warm-editorial"] .sb-hours{border-bottom:2px solid #b88a74 !important} html[data-theme="warm-editorial"] .sb-staff,html[data-theme="warm-editorial"] .sb-corner,html[data-theme="warm-editorial"] .sb-hours{background:#f3e7da !important;color:#3a2e28} html[data-theme="warm-editorial"] .sb-staff{background:#f9f1e8 !important;border-right:2px solid #e6cdbc} [data-theme="warm-editorial"] .tlhead{background:#f3e7da;color:#3a2e28} [data-theme="warm-editorial"] .tlblock{border-radius:10px;box-shadow:0 2px 6px -3px rgba(70,45,30,.5)} [data-theme="warm-editorial"] .chb1130{border-radius:999px} [data-theme="warm-editorial"] .mcard,[data-theme="warm-editorial"] .scard,[data-theme="warm-editorial"] .day{border-radius:14px;border-color:var(--color-border)} [data-theme="warm-editorial"] .mcard.on,[data-theme="warm-editorial"] .scard.on{border-color:var(--color-action-primary);background:var(--color-action-tint);box-shadow:0 0 0 3px #f3e6dc} [data-theme="warm-editorial"] .mcard .pr{color:#6f4634;font-family:"Cormorant Garamond","Noto Serif JP",serif;font-size:1.15em} [data-theme="warm-editorial"] #bookingSteps button[aria-selected="true"],[data-theme="warm-editorial"] .steps .on{background:#5a4034;color:#fff} [data-theme="warm-editorial"] .gridWrap1109{border-color:var(--color-border-strong);box-shadow:0 0 0 4px #fffdf9,0 0 0 5px var(--color-border)} [data-theme="warm-editorial"] #days.days .day.today1104{background:#f7ebe2;color:#6f4634} [data-theme="warm-editorial"] table.grid1104 td.today1109{background:#fbf3ea} [data-theme="warm-editorial"] #bottomBar1101{background:#fffdf9;border-top:1px solid var(--color-border-strong)} [data-theme="warm-editorial"] #bottomBar1101 button.on{color:#8a5a44} [data-theme="warm-editorial"] input,[data-theme="warm-editorial"] select,[data-theme="warm-editorial"] textarea{border-color:var(--color-border-strong);border-radius:10px;background:#fffdf9} [data-theme="warm-editorial"] input:focus,[data-theme="warm-editorial"] select:focus,[data-theme="warm-editorial"] textarea:focus{outline:2px solid #b8955a;outline-offset:1px} [data-theme="warm-editorial"] .closedMsg{background:#fbf3ea;border:1px dashed var(--color-border-strong)}