/* 然（ZEN）— 白を基調に、墨と苔色だけで構成。装飾より「分かりやすさ・速さ」を優先 */
:root{--ink:#1f2421;--moss:#34483d;--moss-d:#25352c;--mist:#f1f4f0;--line:#d9dfd8;--muted:#667069;--err:#a23b2a;--ok:#2f6b46;
--serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;--sans:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:16px/1.7 var(--sans);padding-bottom:env(safe-area-inset-bottom)}
a{color:var(--moss)}
.wrap{max-width:560px;margin:0 auto;padding:20px 18px 120px}
.head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);max-width:560px;margin:0 auto}
.mark{font:700 22px var(--serif);text-decoration:none;color:var(--ink);letter-spacing:.08em}
h1{font:600 24px/1.5 var(--serif);margin:8px 0 6px}
h2{font:600 18px/1.5 var(--serif);margin:28px 0 8px}
.muted{color:var(--muted);font-size:14px}
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:12px 20px;border:1px solid var(--moss);background:var(--moss);color:#fff;border-radius:3px;font:600 17px var(--sans);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--moss-d)}
.btn[disabled]{opacity:.45;cursor:default}
.btn.ghost{background:#fff;color:var(--moss)}
.btn.danger{background:#fff;color:var(--err);border-color:var(--err)}
.btn.sm{min-height:44px;width:auto;font-size:15px;display:inline-flex}
.stack>*+*{margin-top:12px}
label{display:block;font-weight:600;margin:14px 0 4px}
input,select,textarea{width:100%;font:16px var(--sans);padding:13px 12px;border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus,.btn:focus-visible,button:focus-visible{outline:2px solid var(--moss);outline-offset:2px}
.hp{position:absolute;left:-9999px}
.notice{padding:12px 14px;border-left:3px solid var(--moss);background:var(--mist);margin:14px 0;font-size:15px}
.notice.err{border-color:var(--err);color:var(--err);background:#fbf3f1}
.notice.ok{border-color:var(--ok)}
/* トップ */
.hero{padding:34px 0 8px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:end}
.hero .kanji{font:600 clamp(110px,34vw,170px)/1 var(--serif);border-right:1px solid var(--line);padding-right:18px;margin:0}
.hero p{margin:0 0 10px;color:var(--muted)}
/* カレンダー */
.datebar{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.day{flex:0 0 76px;min-height:64px;scroll-snap-align:start;border:1px solid var(--line);background:#fff;border-radius:3px;font:15px var(--sans);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--ink)}
.day em{font-style:normal;font-size:13px;color:var(--moss)}
.day.full{color:var(--muted)}.day.full em{color:var(--muted)}
.day.closed{background:var(--mist);color:#9aa39c;border-style:dashed}.day.closed em{color:#9aa39c}
.day.on{background:var(--moss);color:#fff;border-color:var(--moss)}.day.on em{color:#fff}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot{min-height:56px;border:1px solid var(--moss);background:#fff;color:var(--moss);border-radius:3px;font:600 17px var(--sans)}
.slot.full{border-color:var(--line);color:#a4ada6;background:var(--mist);text-decoration:line-through}
.slot.on{background:var(--moss);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:48px;padding:0 14px;border:1px solid var(--line);background:#fff;border-radius:24px;font:15px var(--sans)}
.chip:hover{border-color:var(--moss)}
.bar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding:10px 18px calc(10px + env(safe-area-inset-bottom));z-index:5}
.bar .in{max-width:560px;margin:0 auto}
.bar .sum{font-size:14px;margin-bottom:8px;color:var(--ink)}
dl.kv{display:grid;grid-template-columns:7em 1fr;gap:8px 12px;margin:14px 0}
dl.kv dt{color:var(--muted);font-size:14px}dl.kv dd{margin:0;font-weight:600}
.foot{max-width:560px;margin:0 auto;padding:0 18px 40px;color:var(--muted);font-size:13px}
.codebox{font:700 28px/1.4 ui-monospace,Menlo,monospace;letter-spacing:.12em;text-align:center;padding:14px;border:1px dashed var(--moss);background:var(--mist)}
/* 管理画面（PCでも使える密度） */
.adm{max-width:1100px;margin:0 auto;padding:16px 18px 60px}
.adm nav{display:flex;flex-wrap:wrap;gap:4px 14px;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--mist)}
.adm-nav a{text-decoration:none;font-size:14px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;color:var(--muted);font-size:13px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:end}.row>*{flex:1 1 140px}
.tag{display:inline-block;padding:1px 8px;border:1px solid var(--line);border-radius:10px;font-size:12px}
.tag.ok{color:var(--ok);border-color:var(--ok)}.tag.err{color:var(--err);border-color:var(--err)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.free{color:#9aa39c}
.adm .btn{min-height:42px;font-size:14px;width:auto;display:inline-flex}
.adm input,.adm select{padding:9px 10px;font-size:14px}
.inline{display:inline}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}