/* 메뉴판세트 v1.2 — 은수의 이야기 서재 전용 이식본
   ☰메뉴 · 🔍검색 · 🔗QR · 📤보내기 · ⚙옵션(글자크기·다크모드·로그인·편집)          */

/* ── 글자 크기 3단 (가 / 가 / 가) ── */
html{font-size:16px}
html[data-fs="s"]{font-size:14.5px}
html[data-fs="l"]{font-size:18px}

/* ── 다크모드 — 같은 이름의 색만 갈아 끼운다 ([data-theme]가 :root보다 세다) ── */
:root[data-theme="dark"]{
  --ink:#e8e4da; --deep:#8fc3bd; --pine:#7fb3ab; --accent:#d8a76a; --accent-deep:#e0b077;
  --mist:#12181a; --sand:#3c3a33; --peach:#2c2723; --line:#33393a; --card:#1a2124;
  --muted:#9aa3a3; --sec:#c3c8c5;
  --bg:radial-gradient(circle at top left,rgba(195,141,86,.07),transparent 22%),radial-gradient(circle at bottom right,rgba(66,122,113,.10),transparent 22%),linear-gradient(180deg,#12181a,#0e1315);
}
:root[data-theme="dark"] body{background:var(--bg)}
:root[data-theme="dark"] .ms-bar{background:rgba(18,24,26,.92);border-bottom-color:#2a3133}
:root[data-theme="dark"] .sh.empty,:root[data-theme="dark"] .sub,:root[data-theme="dark"] .none,
:root[data-theme="dark"] .note,:root[data-theme="dark"] .howto{background:#171d1f}
:root[data-theme="dark"] .page{background:var(--card);border-color:#2c3335}
:root[data-theme="dark"] .rec th{background:#1f2628}
:root[data-theme="dark"] .pull{background:linear-gradient(135deg,#2a2620,#221f1a);color:#e8dcc4}
:root[data-theme="dark"] .lead{background:var(--card)}
:root[data-theme="dark"] img.hfig,:root[data-theme="dark"] img.cvfig{opacity:.8}

/* ── 상단바 ── */
.ms-bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:8px;
  padding:9px 12px;backdrop-filter:blur(10px);background:rgba(248,245,239,.92);
  border-bottom:1px solid rgba(66,122,113,.16)}
.ms-brand{display:flex;align-items:center;gap:9px;min-width:0;flex:1;text-decoration:none;color:inherit}
.ms-brand .dot{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--deep),var(--pine));color:#fff;font-family:var(--ft,serif);font-size:16px}
.ms-brand b{font-family:var(--ft,serif);font-size:14.5px;display:block;line-height:1.15;color:var(--ink)}
.ms-brand span{font-size:10.5px;color:var(--muted);display:block}
.ms-icons{display:flex;gap:2px;flex:none}
.ms-ic{width:36px;height:36px;display:grid;place-items:center;border:none;background:none;cursor:pointer;
  border-radius:10px;color:var(--deep);transition:background .15s}
.ms-ic:hover{background:var(--peach)}
.ms-ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ms-ic.on{background:var(--deep);color:#fff}

/* ── 패널 공통 ── */
.ms-panel{position:fixed;inset:0;z-index:70;display:none;background:rgba(20,26,26,.42);backdrop-filter:blur(2px)}
.ms-panel.open{display:block}
.ms-sheet{position:absolute;top:56px;right:12px;width:min(340px,calc(100vw - 24px));max-height:calc(100vh - 76px);
  overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 14px 44px rgba(20,26,26,.30);padding:14px 16px}
.ms-sheet h4{font-family:var(--ft,serif);font-size:13px;letter-spacing:.08em;color:var(--muted);
  font-weight:700;margin:14px 0 7px}
.ms-sheet h4:first-child{margin-top:2px}
.ms-row{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:11px;color:var(--ink);
  text-decoration:none;font-size:14px;cursor:pointer;border:1px solid transparent;background:none;width:100%;
  font-family:inherit;text-align:left}
.ms-row:hover{background:var(--peach);border-color:var(--line)}
.ms-row .ri{width:20px;text-align:center;font-family:var(--ft,serif);color:var(--accent-deep);flex:none}
.ms-row .rt{flex:1;min-width:0}
.ms-row .rt b{display:block;font-weight:700}
.ms-row .rt span{display:block;font-size:11.5px;color:var(--muted)}
.ms-seg{display:flex;gap:6px;margin:2px 0 4px}
.ms-seg button{flex:1;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--sec);
  border-radius:10px;padding:9px 0;font-family:var(--ft,serif);font-weight:700}
.ms-seg button.on{background:var(--deep);border-color:var(--deep);color:#fff}
.ms-seg button.s1{font-size:13px}.ms-seg button.s2{font-size:16px}.ms-seg button.s3{font-size:20px}
.ms-note{font-size:11.5px;color:var(--muted);line-height:1.7;padding:2px 2px 6px}

/* ── 검색 ── */
.ms-search input{width:100%;border:1px solid var(--line);background:var(--mist);color:var(--ink);
  border-radius:11px;padding:11px 13px;font-family:inherit;font-size:14px}
.ms-hits{margin-top:8px;display:grid;gap:6px}
.ms-hit{display:block;padding:10px 11px;border:1px solid var(--line);border-radius:11px;background:var(--card);
  text-decoration:none;color:var(--ink)}
.ms-hit b{display:block;font-size:13.5px}
.ms-hit span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.ms-hit em{font-style:normal;background:#f7e3bf;color:#6b4a18;border-radius:3px;padding:0 2px}
:root[data-theme="dark"] .ms-hit em{background:#4a3a1c;color:#f0d9ac}

/* ── QR · 보내기 ── */
.ms-qr{display:grid;place-items:center;padding:12px;background:#fff;border-radius:14px;margin:4px 0 8px}
.ms-qr canvas,.ms-qr img{display:block}
.ms-url{font-size:11.5px;color:var(--muted);word-break:break-all;line-height:1.6;padding:0 2px 6px}

/* ── 로그인 모달 ── */
.ms-login{max-width:360px;margin:12vh auto 0;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:22px 22px 18px;box-shadow:0 18px 50px rgba(20,26,26,.34)}
.ms-login h3{font-family:var(--ft,serif);font-size:1.15rem;font-weight:800;color:var(--deep)}
.ms-login p.d{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.7}
.ms-login label{display:block;font-size:12px;color:var(--muted);margin:12px 0 4px}
.ms-login input{width:100%;border:1px solid var(--line);background:var(--mist);color:var(--ink);
  border-radius:10px;padding:10px 12px;font-family:inherit;font-size:14px}
.ms-login .btns{display:flex;gap:7px;margin-top:14px}
.ms-login button{flex:1;cursor:pointer;border:none;border-radius:11px;padding:11px 0;font-family:inherit;
  font-weight:700;font-size:13.5px}
.ms-login .go{background:var(--deep);color:#fff}
.ms-login .gg{background:#fff;color:#3c4043;border:1px solid #dadce0}
.ms-login .cancel{background:var(--peach);color:var(--sec)}
.ms-login .err{font-size:12px;color:#b3392f;margin-top:9px;line-height:1.6;min-height:1em}

/* ── 편집 장치 ── */
.ms-editbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;align-items:center;gap:10px;
  padding:11px 14px;background:linear-gradient(180deg,rgba(47,93,98,.96),rgba(35,65,62,.98));color:#f4f1eb}
body.editing .ms-editbar{display:flex}
.ms-editbar .t{flex:1;font-size:13px}
.ms-editbar button{cursor:pointer;border:none;border-radius:10px;padding:9px 14px;font-family:inherit;
  font-weight:700;font-size:13px;background:rgba(255,255,255,.16);color:#fff}
.ms-editbar button.save{background:var(--accent);color:#fff}
[contenteditable="true"]{outline:1px dashed rgba(195,141,86,.75);outline-offset:3px;border-radius:3px}
[contenteditable="true"]:focus{outline:2px solid var(--accent);background:rgba(195,141,86,.07)}
.ms-tool{display:none;gap:6px;margin-top:8px}
body.editing .ms-tool{display:flex;flex-wrap:wrap}
.ms-tool button{cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--sec);
  border-radius:9px;padding:6px 11px;font-family:inherit;font-size:12px;font-weight:700}
.ms-tool button:hover{border-color:var(--accent);color:var(--accent-deep)}

@media(max-width:600px){.ms-brand span{display:none}.ms-sheet{top:52px;right:8px;left:8px;width:auto}}
@media print{.ms-bar,.ms-panel,.ms-editbar,.ms-tool{display:none!important}}