/* Memory Wall 說明書共用樣式(使用手冊 /help 與管理員手冊 /help/admin 共用) */
:root { --cream:#f5efe6; --paper:#fdfaf3; --ink:#2a2520; --ink-soft:#5a544c; --ink-soft2:#7a7268; --rose:#c9756a; --rose-deep:#a85a50; --gold:#b89968; --success:#6b8e6b; --error:#b85450; --line:rgba(184,153,104,0.25); --code-bg:#f0e9dd; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Noto Serif TC',serif; background:var(--cream); color:var(--ink); line-height:1.7; }

.layout { display:grid; grid-template-columns:240px 1fr; min-height:100vh; }
@media (max-width: 900px) { .layout { grid-template-columns:1fr; } .sidebar { position:static; height:auto; border-right:none; border-bottom:1px solid var(--line); } }

.sidebar {
  position:sticky; top:0; height:100vh;
  background:var(--paper); border-right:1px solid var(--line);
  padding:32px 24px; overflow-y:auto;
}
.sidebar h2 { font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:500; }
.sidebar h2 em { font-style:italic; color:var(--rose); }
.sidebar .sub { font-size:11px; color:var(--ink-soft); letter-spacing:2px; margin-top:2px; margin-bottom:24px; }
.sidebar nav a { display:block; padding:8px 12px; font-size:13px; color:var(--ink-soft); text-decoration:none; border-left:2px solid transparent; transition:all 0.15s; }
.sidebar nav a:hover { color:var(--ink); background:rgba(184,153,104,0.08); border-left-color:var(--gold); }
.sidebar nav a.active { color:var(--rose); border-left-color:var(--rose); background:rgba(201,117,106,0.06); font-weight:500; }
.sidebar nav .group { font-size:10px; letter-spacing:2px; color:var(--ink-soft); text-transform:uppercase; margin-top:18px; margin-bottom:6px; padding:0 12px; opacity:0.6; }
.sidebar .home-link { font-size:12px; color:var(--ink-soft); margin-top:24px; padding-top:16px; border-top:1px solid var(--line); display:block; padding:16px 12px 0; }
.sidebar .home-link a { color:var(--rose); text-decoration:none; display:block; margin-bottom:6px; }

main { padding:48px 56px 80px; max-width:900px; }
@media (max-width: 700px) { main { padding:32px 20px 60px; } }

h1 { font-family:'Cormorant Garamond',serif; font-size:48px; font-weight:500; margin-bottom:8px; }
h1 em { font-style:italic; color:var(--rose); }
@media (max-width: 700px) { h1 { font-size:36px; } }
.lede { font-size:16px; color:var(--ink-soft); margin-bottom:48px; max-width:680px; line-height:1.8; }

section { margin-bottom:64px; scroll-margin-top:24px; }
section h2 {
  font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:500;
  border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:20px;
}
section h2 .num {
  display:inline-block; width:36px; height:36px; line-height:36px;
  background:var(--rose); color:#fff; border-radius:50%; text-align:center;
  font-size:16px; font-style:normal; margin-right:14px;
  font-family:'JetBrains Mono', monospace;
}
section h3 { font-family:'Noto Serif TC',serif; font-size:18px; font-weight:600; margin-top:28px; margin-bottom:10px; color:var(--ink); }
section h4 { font-size:15px; font-weight:600; margin-top:18px; margin-bottom:6px; color:var(--ink); }

p { margin-bottom:14px; color:var(--ink-soft); }
strong { color:var(--ink); font-weight:600; }
em { color:var(--rose); font-style:italic; }

ul, ol { padding-left:24px; margin-bottom:14px; color:var(--ink-soft); }
li { margin-bottom:6px; }
ul li::marker { color:var(--gold); }
ol li::marker { color:var(--rose); font-weight:600; }

code { background:var(--code-bg); padding:2px 8px; border-radius:2px; font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--rose-deep); overflow-wrap:anywhere; }
pre {
  background:var(--code-bg); padding:14px 18px; border-radius:3px;
  overflow-x:auto; font-family:'JetBrains Mono', monospace; font-size:13px;
  color:var(--ink); margin-bottom:14px; line-height:1.6;
  border-left:3px solid var(--gold);
}
pre code { background:none; padding:0; color:inherit; }

.table-scroll { overflow-x:auto; margin-bottom:14px; }
table { width:100%; border-collapse:collapse; margin-bottom:14px; font-size:14px; background:var(--paper); border:1px solid var(--line); }
.table-scroll table { margin-bottom:0; }
th, td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); }
th { background:#f0e9dd; font-weight:500; color:var(--ink-soft); font-size:12px; letter-spacing:0.5px; text-transform:uppercase; }
tr:last-child td { border-bottom:none; }

.callout {
  background:var(--paper); border-left:3px solid var(--gold);
  padding:12px 16px 12px 18px; margin:12px 0;
  font-size:14px; color:var(--ink-soft); line-height:1.7;
}
.callout strong { color:var(--ink); }
.callout.warn { border-left-color:var(--error); background:#fdf0ef; }
.callout.tip { border-left-color:var(--success); background:#f0f7f0; }
.callout.note { border-left-color:var(--rose); background:#fdf5f3; }

.role-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; margin:16px 0 22px; }
.role-card { background:var(--paper); border:1px solid var(--line); padding:18px; }
.role-card .tag { display:inline-block; font-size:10px; padding:2px 8px; background:var(--gold); color:#fff; border-radius:2px; letter-spacing:1px; }
.role-card .tag.super { background:var(--rose); }
.role-card .tag.owner { background:var(--ink); }
.role-card .tag.moderator { background:var(--gold); }
.role-card .tag.legacy { background:#999; }
.role-card .tag.guest { background:var(--success); }
.role-card h4 { margin-top:8px; margin-bottom:6px; }
.role-card p { font-size:13px; margin-bottom:0; line-height:1.6; }

.steps-block { counter-reset:step-counter; padding-left:0; list-style:none; }
.steps-block > li {
  counter-increment:step-counter;
  position:relative; padding:12px 16px 12px 56px;
  background:var(--paper); border:1px solid var(--line);
  margin-bottom:10px;
}
.steps-block > li::before {
  content:counter(step-counter);
  position:absolute; left:14px; top:14px;
  width:30px; height:30px; line-height:30px; text-align:center;
  background:var(--gold); color:#fff; border-radius:50%;
  font-family:'Cormorant Garamond', serif; font-size:16px;
}
.steps-block > li strong { display:block; margin-bottom:4px; }
.steps-block > li p, .steps-block > li ul { margin:0; font-size:13px; }

.kbd {
  background:#fff; border:1px solid var(--line);
  padding:2px 8px; border-radius:3px;
  font-family:'JetBrains Mono', monospace; font-size:12px;
  box-shadow:0 1px 0 var(--line);
  color:var(--ink);
}
.kbd-combo { display:inline-flex; align-items:center; gap:4px; }

.faq-item { background:var(--paper); border:1px solid var(--line); margin-bottom:8px; }
.faq-item summary { padding:14px 18px; cursor:pointer; font-weight:500; color:var(--ink); }
.faq-item summary::marker { color:var(--rose); }
.faq-item[open] summary { border-bottom:1px solid var(--line); background:rgba(184,153,104,0.04); }
.faq-item .body { padding:14px 18px; font-size:14px; color:var(--ink-soft); line-height:1.8; }

footer { padding:32px 56px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-soft); text-align:center; }

/* 管理員手冊專用 */
.super-badge {
  display:inline-block; font-size:10px; letter-spacing:2px;
  background:var(--rose); color:#fff; padding:3px 10px; border-radius:2px;
  vertical-align:middle; margin-left:10px; font-family:'JetBrains Mono', monospace;
}
.manual-switch {
  display:inline-block; margin-bottom:32px; padding:9px 16px;
  background:var(--paper); border:1px solid var(--line); border-radius:3px;
  color:var(--rose); text-decoration:none; font-size:14px;
}
.manual-switch:hover { border-color:var(--rose); }