/* TOVILLA。docs/DESIGN.md の 10章 + 10-2(入口は「深緑と山吹」・管理画面は「管理の青」) */
:root{
  --ink:#1d2025; --gray:#5b5f66; --gray-2:#8a8f99;
  --paper:#f7f4ec; --kinari:#efeadd; --white:#fff;
  --rule:#e3e0d6; --rule-strong:#cfcabd; --line:#8d8b85; --alert:#b23a3a;
  --accent:#1b5e30; --on-accent:#fff; --mark:#f2b705;
  --r:4px;
  --font:"Noto Sans JP",system-ui,sans-serif;
  --font-head:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  --font-num:"Jost",sans-serif;
}
body.adm{
  --paper:#f4f4f1; --kinari:#fff; --ink:#1a1814; --rule:#e2e2dc; --accent:#2b5fa3; --mark:#1a1e26;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.8 var(--font)}
a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
h1,h2,h3{font-family:var(--font-head);line-height:1.35;letter-spacing:-.01em;margin:0}
p{margin:0 0 8px;text-align:justify}
small,.sub{color:var(--gray);font-size:14px}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.eyebrow{font-size:12px;letter-spacing:.08em;color:var(--gray);margin:0 0 4px}
[hidden]{display:none!important}

.wrap{max-width:680px;margin:0 auto;padding:0 16px 64px}
.top{border-bottom:3px solid var(--mark);padding:24px 0 16px;margin-bottom:24px}
.top h1{font-size:32px;font-weight:900;letter-spacing:.04em}
.top .eyebrow{margin:0}
section{border-top:1px solid var(--rule);padding:24px 0}
section:first-of-type{border-top:0;padding-top:0}
section h2{font-size:20px;font-weight:700;margin-bottom:12px}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:var(--r);font:700 16px/1 var(--font);text-decoration:none;cursor:pointer;border:0}
.btn-main{background:var(--accent);color:var(--on-accent)}
.btn-sub{background:#fff;color:var(--ink);border:1px solid var(--ink)}
.btn-text{background:none;border:0;padding:0;min-height:44px;color:var(--ink);text-decoration:underline;text-underline-offset:.2em;font:400 14px var(--font);cursor:pointer}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 8px}

.list{list-style:none;margin:0;padding:0}
.list > li{border-top:1px solid var(--rule);padding:12px 0;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.list > li:last-child{border-bottom:1px solid var(--rule)}
.tag{display:inline-block;font-size:12px;letter-spacing:.04em;padding:2px 8px;border-radius:var(--r);background:var(--kinari);color:var(--ink);white-space:nowrap}
.tag-on{background:var(--accent);color:var(--on-accent)}
.tag-off{color:var(--gray-2)}
.note{border-left:3px solid var(--mark);padding:8px 12px;background:var(--kinari);margin:0 0 16px}
.warn{color:var(--alert)}

/* 管理画面 */
.adm .head{background:#1a1e26;color:#fff;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.adm .head h1{font-size:20px;font-weight:900;letter-spacing:.04em}
.adm .head small{color:#c9ccd2}
.adm .nav{display:flex;gap:16px;padding:8px 16px;border-bottom:1px solid var(--rule);background:#fff;font-size:14px;position:sticky;top:0}
.adm main{max-width:1080px;margin:0 auto;padding:0 16px 64px}
.adm section h2{border-bottom:1px solid var(--ink);padding-bottom:4px}
.adm label{display:block;font-size:14px;font-weight:700;margin:0 0 4px}
.adm input,.adm select{min-height:44px;padding:0 8px;border:1px solid var(--line);border-radius:var(--r);background:#fff;font:400 16px var(--font);color:var(--ink);max-width:100%}
.adm .form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:0 0 16px}
.adm .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.adm table{width:100%;border-collapse:collapse;font-size:14px}
.adm th,.adm td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--rule);vertical-align:top}
.adm th{font-weight:700;border-bottom:1px solid var(--rule-strong);white-space:nowrap}
.adm td small{display:block;word-break:break-all}
.adm #pTable{min-width:640px}
.adm #pTable td:first-child{min-width:200px}
.adm #pTable td b{font-size:16px}
.adm .btn-text.danger{color:var(--alert);font-size:13px;margin-top:4px;padding:0;min-height:32px}
.adm .chk{display:flex;align-items:center;gap:6px;font-weight:400;margin:0;min-height:44px;white-space:nowrap}
.adm .chk input{min-height:0;width:20px;height:20px}
.adm .tag{background:var(--paper)}
.adm .tbtn{white-space:nowrap;min-height:40px;padding:0 10px;font:400 14px var(--font);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;margin:2px 4px 2px 0}
.adm .tbtn.danger{color:var(--alert);border-color:var(--alert)}
.adm .key{font-family:ui-monospace,monospace;font-size:14px;word-break:break-all;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px}
.adm .toast{position:fixed;left:16px;right:16px;bottom:16px;max-width:430px;margin:0 auto;background:#1a1e26;color:#fff;padding:12px 16px;border-radius:var(--r);font-size:14px}
.adm .box{border-top:4px solid var(--ink);margin:40px 0 0;padding-top:12px}
.adm .box-h{font-size:24px;font-weight:900;border:0!important;margin:0 0 4px}
.adm .box h3{font-size:17px;font-weight:700;margin:28px 0 8px;border-bottom:1px solid var(--rule);padding-bottom:4px}
.adm .box section h2{border:0}