:root{
  --ink:#16202b;--ink2:#46586b;--ink3:#7d8ea0;--line:#e4e9ef;--line2:#eef2f6;
  --bg:#f6f8fb;--card:#fff;--han:#1d6fb8;--han-d:#15527f;--han-l:#eaf3fb;
  --gold:#c08a2d;--gold-l:#f7efe0;--green:#2f7d5b;--green-l:#e7f3ec;--red:#c0392b;
  --shadow:0 1px 2px rgba(20,40,70,.04),0 8px 24px rgba(20,40,70,.06);
  --shadow-lg:0 12px 40px rgba(20,40,70,.14);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
mark{background:#ffe9a8;padding:0 1px;border-radius:2px}
button{font-family:inherit}
.hidden{display:none!important}

/* ---------- Login ---------- */
.login-bg{position:fixed;inset:0;background:linear-gradient(150deg,#0f3a5f,#1d6fb8 60%,#2f88cf);display:flex;align-items:center;justify-content:center;padding:20px;z-index:200}
.login-card{background:#fff;border-radius:20px;box-shadow:var(--shadow-lg);width:100%;max-width:420px;padding:40px 38px 34px}
.login-card .lk{font-size:12.5px;letter-spacing:.14em;color:var(--han);font-weight:700}
.login-card h1{font-size:25px;font-weight:800;margin:8px 0 2px;letter-spacing:-.01em}
.login-card .en{font-size:13.5px;color:var(--ink3);font-style:italic;margin-bottom:26px}
.login-card label{display:block;font-size:13px;font-weight:700;color:var(--ink2);margin:14px 0 5px}
.login-card input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:15px;font-family:inherit}
.login-card input:focus{outline:none;border-color:var(--han);box-shadow:0 0 0 3px var(--han-l)}
.btn{border:0;border-radius:10px;padding:11px 16px;font-size:15px;font-weight:700;cursor:pointer;transition:.15s}
.btn-primary{background:var(--han);color:#fff;width:100%;margin-top:22px}
.btn-primary:hover{background:var(--han-d)}
.login-err{color:var(--red);font-size:13.5px;margin-top:14px;min-height:18px}
.login-hint{margin-top:20px;font-size:12px;color:var(--ink3);border-top:1px solid var(--line2);padding-top:14px;line-height:1.7}

/* ---------- Header ---------- */
header.hero{background:linear-gradient(150deg,#0f3a5f,#1d6fb8 60%,#2f88cf);color:#fff;position:relative;overflow:hidden}
header.hero::after{content:"";position:absolute;right:-80px;top:-60px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle at center,rgba(255,255,255,.16),transparent 70%)}
.hero-in{padding:30px 0 26px;position:relative;z-index:1}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.kicker{font-size:12.5px;letter-spacing:.14em;opacity:.9;font-weight:600}
.hero h1{margin:.3em 0 .08em;font-size:29px;font-weight:800;letter-spacing:-.01em}
.hero .en{font-size:15px;opacity:.9;font-style:italic;font-weight:500}
.userchip{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.14);border-radius:30px;padding:6px 8px 6px 15px;flex:none}
.userchip .ui{text-align:right;line-height:1.25}
.userchip .un{font-size:13.5px;font-weight:700}
.userchip .ur{font-size:11px;opacity:.85}
.userchip .uav{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--han-d);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
.userchip .menu-btn{border:0;background:rgba(255,255,255,.2);color:#fff;border-radius:50%;width:30px;height:30px;cursor:pointer;font-size:15px}
.stats{display:flex;gap:26px;margin-top:18px;flex-wrap:wrap}
.stat .n{font-size:25px;font-weight:800;line-height:1}.stat .l{font-size:12px;opacity:.82;margin-top:3px}
.umenu{position:absolute;right:24px;top:74px;background:#fff;color:var(--ink);border-radius:12px;box-shadow:var(--shadow-lg);z-index:60;min-width:190px;overflow:hidden;display:none}
.umenu.open{display:block}
.umenu button{display:block;width:100%;text-align:left;border:0;background:#fff;padding:11px 16px;font-size:13.5px;cursor:pointer;color:var(--ink)}
.umenu button:hover{background:var(--han-l)}
.umenu .sep{border-top:1px solid var(--line2)}

/* ---------- Toolbar ---------- */
.toolbar{position:sticky;top:0;z-index:40;background:rgba(246,248,251,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:10px 0}
.toolbar-in{display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.tabs{display:flex;background:#e9eef4;border-radius:11px;padding:3px}
.tab{border:0;background:transparent;padding:8px 14px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--ink2);cursor:pointer;transition:.15s}
.tab.active{background:#fff;color:var(--han-d);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.search{flex:1;min-width:190px;position:relative}
.search input{width:100%;padding:9px 32px 9px 36px;border:1px solid var(--line);border-radius:10px;font-size:14px;background:#fff;font-family:inherit}
.search input:focus{outline:none;border-color:var(--han);box-shadow:0 0 0 3px var(--han-l)}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink3)}
.search .clr{position:absolute;right:9px;top:50%;transform:translateY(-50%);border:0;background:#dde5ee;color:#5a6b7d;width:20px;height:20px;border-radius:50%;cursor:pointer;font-size:13px;display:none}
.search.has .clr{display:block}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;padding:6px 12px;border-radius:20px;font-size:12.5px;font-weight:600;color:var(--ink2);cursor:pointer;transition:.15s;white-space:nowrap}
.chip.active{background:var(--han);border-color:var(--han);color:#fff}
main{padding:26px 0 70px;min-height:55vh}

/* ---------- Chapter cards ---------- */
.part-group{margin-bottom:36px}
.part-h{display:flex;align-items:baseline;gap:12px;margin:0 0 16px;padding-bottom:9px;border-bottom:2px solid var(--line)}
.part-h .pt{font-size:18px;font-weight:800;color:var(--han-d)}.part-h .pc{font-size:13px;color:var(--ink3);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:19px 20px 15px;cursor:pointer;transition:.18s;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#cfe0ee}
.card .num{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.05em;color:var(--han);background:var(--han-l);padding:3px 9px;border-radius:6px;margin-bottom:10px;align-self:flex-start}
.card h3{margin:0 0 3px;font-size:18px;font-weight:800}.card .cen{font-size:12.5px;color:var(--ink3);font-style:italic;margin-bottom:12px}
.card .outline{font-size:13px;color:var(--ink2);display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.card .outline .ol{display:flex;gap:7px}.card .outline .dot{color:var(--ink3);flex:none}
.card .foot{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed var(--line);padding-top:10px;margin-top:auto;font-size:12px;font-weight:700}
.card .cc{color:var(--gold)} .card .meta{color:var(--ink3);font-weight:600} .card .read{color:var(--han)}

/* ---------- Table ---------- */
.tbl-wrap{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
table.cases{width:100%;border-collapse:collapse;font-size:14px}
table.cases th{background:#f0f4f8;text-align:left;padding:11px 16px;font-size:12.5px;font-weight:700;color:var(--ink2);border-bottom:1px solid var(--line)}
table.cases td{padding:11px 16px;border-bottom:1px solid var(--line2);vertical-align:top}
tr.crow{cursor:pointer}tr.crow:hover{background:var(--han-l)}
.tnum{font-weight:800;color:var(--han);white-space:nowrap;font-size:13px}.tpart{color:var(--ink3);font-size:12.5px}
.tcase{font-weight:600}.kw{display:inline-block;background:var(--gold-l);color:#8a6418;border:1px solid #ecdcb8;border-radius:14px;padding:3px 10px;font-size:12.5px;font-weight:700;margin:2px 4px 2px 0;white-space:nowrap}
.part-sep td{background:#fafbfd;font-weight:800;color:var(--han-d);font-size:13px;padding:9px 16px}

/* ---------- Search results ---------- */
.sr-head{font-size:14px;color:var(--ink2);margin-bottom:14px}
.sr-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 17px;margin-bottom:10px;cursor:pointer;box-shadow:var(--shadow)}
.sr-item:hover{border-color:#cfe0ee}
.sr-src{font-size:12px;font-weight:700;color:var(--han);margin-bottom:5px}
.sr-src .chip-sm{background:var(--han-l);padding:1px 7px;border-radius:5px;margin-right:6px}
.sr-snip{font-size:13.5px;color:var(--ink2)}
.sr-kind{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:5px;margin-right:6px}
.k-h{background:var(--green-l);color:var(--green)}.k-core{background:var(--gold-l);color:var(--gold)}.k-p{background:#eef1f4;color:var(--ink3)}

/* ---------- Reader ---------- */
.list-view.off{display:none}.reader{display:none}.reader.on{display:block}
.rbar{position:sticky;top:53px;z-index:20;background:rgba(246,248,251,.93);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:9px 0;margin-bottom:8px}
.rbar-in{display:flex;align-items:center;gap:13px}
.back{border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 13px;font-size:13.5px;font-weight:700;color:var(--han-d);cursor:pointer;white-space:nowrap}
.back:hover{background:var(--han-l)}
.rbar .rt{font-weight:800;font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rbar .rt small{color:var(--ink3);font-weight:600;margin-left:7px}
.memo-toggle{border:1px solid var(--gold);background:var(--gold-l);color:#8a6418;border-radius:9px;padding:7px 13px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.memo-toggle.on{background:var(--gold);color:#fff}
.read-layout{display:grid;grid-template-columns:175px minmax(0,1fr) 312px;gap:22px;align-items:start}
.toc{position:sticky;top:116px;font-size:13px;max-height:calc(100vh-140px);overflow-y:auto;padding-right:6px}
.toc a{display:block;color:var(--ink2);text-decoration:none;padding:4px 9px;border-radius:7px;border-left:2px solid transparent;line-height:1.4;margin-bottom:1px}
.toc a:hover{background:#eef2f6}.toc a.t1{font-weight:700;color:var(--ink)}.toc a.t2{padding-left:18px;font-size:12.5px}
.toc a.core{color:var(--gold);font-weight:700}.toc a.active{border-left-color:var(--han);background:var(--han-l);color:var(--han-d)}
article.read{max-width:none;background:#fff;border:1px solid var(--line);border-radius:16px;padding:34px 40px 50px;box-shadow:var(--shadow);font-size:16px;line-height:1.82}
article.read .doc-h{font-size:13px;font-weight:800;color:var(--han);letter-spacing:.05em;margin-bottom:4px}
article.read>h1{font-size:29px;font-weight:800;margin:2px 0 4px}
article.read>.den{font-size:15px;color:var(--ink3);font-style:italic;margin-bottom:26px;padding-bottom:20px;border-bottom:2px solid var(--line)}
.blk{position:relative;border-radius:8px;transition:background .15s}
.blk:hover{background:#fafbfd}
.blk{position:relative}
.blk .addmemo{position:absolute;right:-30px;top:3px;width:24px;height:24px;border-radius:7px;border:1px solid var(--line);background:#fff;color:var(--gold);cursor:pointer;font-size:13px;opacity:0;transition:.12s;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);z-index:3}
.blk:hover .addmemo{opacity:1}
/* image (figure) gets a clear corner memo button */
figure.figblk{position:relative}
figure.figblk .addmemo{right:8px;top:8px;width:auto;height:28px;padding:0 10px;gap:4px;border-radius:8px;background:rgba(255,255,255,.94);font-weight:700;font-size:12px}
figure.figblk .addmemo::after{content:"메모"}
figure.figblk:hover .addmemo{opacity:1}
/* touch devices have no hover → keep the button visible */
@media (hover:none){.blk .addmemo{opacity:.6}.blk .addmemo:active{opacity:1}}
.blk.hascom{background:#fffaf0}
.blk .cbadge{position:absolute;right:-30px;top:3px;min-width:24px;height:24px;border-radius:12px;background:var(--gold);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 6px;cursor:pointer}
h2.read-h{font-size:22px;font-weight:800;margin:34px 0 6px;scroll-margin-top:128px}
h2.read-h .en,h3.read-h .en{display:block;font-size:14px;color:var(--ink3);font-style:italic;font-weight:500;margin-top:2px}
h3.read-h{font-size:18px;font-weight:700;margin:24px 0 4px;scroll-margin-top:128px}
h4.read-h{font-size:15.5px;font-weight:700;margin:16px 0 2px;color:var(--ink2);scroll-margin-top:128px}
article.read p.txt{margin:0 0 14px;color:#24323f}
article.read .cap{font-size:13.5px;color:var(--ink3);background:#f6f8fb;border-left:3px solid #cfd9e3;padding:6px 13px;border-radius:0 7px 7px 0;margin:4px 0 16px;font-style:italic}
.tbl-scroll{overflow-x:auto;margin:16px 0 20px}
table.doc-tbl{border-collapse:collapse;width:100%;font-size:13.5px;line-height:1.5}
table.doc-tbl th,table.doc-tbl td{border:1px solid #d4dde6;padding:7px 10px;text-align:left;vertical-align:top}
table.doc-tbl th{background:#eef3f8;font-weight:700;color:var(--han-d)}
table.doc-tbl tr:nth-child(even) td{background:#fafbfd}
.docnote{font-size:13px;color:#8a6418;background:var(--gold-l);border:1px solid #ecdcb8;border-radius:9px;padding:10px 14px;margin:10px 0 16px;line-height:1.55}
article.read figure{margin:14px 0 20px;text-align:center}
article.read figure img{max-width:100%;border-radius:10px;border:1px solid var(--line);box-shadow:var(--shadow);cursor:zoom-in}
.case-h{background:var(--gold-l);border:1px solid #ecdcb8;border-radius:11px;padding:12px 18px;margin:34px 0 8px;scroll-margin-top:128px}
.case-h h2{margin:0;font-size:20px;color:#8a6418}.case-h .cbd{display:inline-block;font-size:11px;font-weight:800;background:var(--gold);color:#fff;padding:2px 9px;border-radius:11px;margin-bottom:6px}
.case-h .kws{margin-top:8px}.case-h .kws .kw{margin-top:0}
article.read .figs-h{color:var(--ink2)}
ul.refs{font-size:13.5px;color:var(--ink3);line-height:1.7;padding-left:20px}
.hl{background:#fff2c2;animation:hlf 2.6s ease}@keyframes hlf{0%,40%{background:#ffe27a}100%{background:transparent}}

/* inline comment block (mobile): grouped card under the block */
.notes{margin:8px 0 18px;background:#fffaf0;border:1px solid #f0e2c4;border-radius:11px;padding:10px 13px}
.notes .ccard-h{font-size:11.5px;font-weight:800;color:var(--gold);margin-bottom:4px}
.note{background:#fff;border:1px solid #ecdcb8;border-left:3px solid var(--gold);border-radius:9px;padding:10px 13px;margin:7px 0;font-size:13.5px;box-shadow:var(--shadow)}
.note.resolved{opacity:.6;border-left-color:var(--green)}
.note .nh{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.note .who{font-weight:700;font-size:12.5px}
.note .who .rb{font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:5px;margin-left:6px}
.rb-admin{background:#eaf3fb;color:var(--han-d)}.rb-author{background:var(--green-l);color:var(--green)}.rb-reviewer{background:var(--gold-l);color:#8a6418}
.note .tm{font-size:11px;color:var(--ink3)}
.note .body{color:var(--ink);white-space:pre-wrap;line-height:1.55}
.note .acts{margin-top:6px;display:flex;gap:10px}
.note .acts button{border:0;background:transparent;color:var(--ink3);font-size:11.5px;cursor:pointer;font-weight:600;padding:0}
.note .acts button:hover{color:var(--han)}
/* margin comment rail (Google-Docs-style side comments) */
.crail{position:relative;min-height:40px}
.crail .ccard,.crail .composer{position:absolute;left:0;right:0;transition:top .18s ease}
.crail .ccard{background:#fff;border:1px solid #ecdcb8;border-left:3px solid var(--gold);border-radius:11px;padding:10px 12px 8px;box-shadow:var(--shadow);font-size:13px;cursor:default}
.crail .ccard:hover{box-shadow:var(--shadow-lg)}
.crail .ccard.focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-l),var(--shadow-lg)}
.ccard-h{font-size:11px;font-weight:800;color:var(--gold);margin-bottom:6px;letter-spacing:.02em}
.crail .note{font-size:12.5px;box-shadow:none;border:0;border-left:0;padding:6px 0;margin:0;background:none!important}
.crail .note+.note{border-top:1px solid var(--line2)}
.crail .note .body{font-size:12.5px}
.crail .note.reply{margin-left:0;padding-left:10px;border-left:2px solid #e3e9f0;background:none}
.crail .note.reply::before{left:1px}
.crail .note .acts button{font-size:11px}
.crail .composer{box-shadow:var(--shadow-lg)}
.crail .empty-rail{position:static;color:var(--ink3);font-size:12.5px;text-align:center;padding:10px}
/* paragraph that carries comments */
.blk.hascom{background:#fffdf6}
.blk.blk-focus{background:#fff5e0;box-shadow:inset 3px 0 0 var(--gold)}
@media(max-width:1080px){
  .read-layout{grid-template-columns:minmax(0,1fr)}
  .toc{display:none}
  .crail{display:none}        /* 모바일은 인라인 표시 → 레일 숨김 */
}
.notes-h{font-size:12px;font-weight:700;color:var(--gold);margin:8px 0 2px}
.note .replies{margin-top:6px}
.note.reply{border-left:3px solid #cfd9e3;border-color:#dde5ee;background:#fbfcfe}
.note.reply::before{content:"↳";position:absolute;left:-13px;top:9px;color:var(--ink3);font-size:12px}
.note{position:relative}
.composer.reply{margin:6px 0 8px}
.composer{background:#fff;border:1px solid var(--gold);border-radius:10px;padding:11px;margin:8px 0 16px;box-shadow:var(--shadow)}
.composer textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px;font-family:inherit;font-size:13.5px;resize:vertical;min-height:60px}
.composer .cb{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.composer .cb button{border:0;border-radius:8px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer}
.composer .cancel{background:#eef1f4;color:var(--ink2)}.composer .save{background:var(--gold);color:#fff}

/* memo panel */
.memo-panel{position:fixed;top:0;right:0;width:380px;max-width:92vw;height:100vh;background:#fff;box-shadow:-8px 0 40px rgba(20,40,70,.18);z-index:120;transform:translateX(100%);transition:.25s;display:flex;flex-direction:column}
.memo-panel.open{transform:none}
.mp-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.mp-head h3{margin:0;font-size:17px;font-weight:800}
.mp-head .x{border:0;background:#eef1f4;border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:16px}
.mp-body{flex:1;overflow-y:auto;padding:14px 18px}
.mp-empty{color:var(--ink3);text-align:center;padding:50px 10px;font-size:14px}
.mp-note{border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:10px;cursor:pointer}
.mp-note:hover{border-color:var(--gold);background:#fffdf8}
.mp-note .body{font-size:13.5px;color:var(--ink);margin:5px 0;white-space:pre-wrap}
.mp-note .anchor{font-size:11.5px;color:var(--ink3);font-style:italic;border-left:2px solid var(--line);padding-left:7px;margin-bottom:5px}
.overlay{position:fixed;inset:0;background:rgba(15,30,50,.4);z-index:110;display:none}.overlay.open{display:block}

/* admin / modal */
.modal-bg{position:fixed;inset:0;background:rgba(15,30,50,.5);backdrop-filter:blur(3px);z-index:150;display:none;align-items:flex-start;justify-content:center;padding:42px 18px;overflow-y:auto}
.modal-bg.open{display:flex}
.modal{background:#fff;border-radius:18px;max-width:760px;width:100%;box-shadow:var(--shadow-lg);overflow:hidden}
.modal-head{background:linear-gradient(135deg,#15527f,#1d6fb8);color:#fff;padding:22px 28px;display:flex;justify-content:space-between;align-items:center}
.modal-head h2{margin:0;font-size:21px;font-weight:800}
.modal-head .x{border:0;background:rgba(255,255,255,.2);color:#fff;border-radius:8px;width:32px;height:32px;font-size:17px;cursor:pointer}
.modal-body{padding:24px 28px 30px;max-height:70vh;overflow-y:auto}
table.users{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:18px}
table.users th{text-align:left;color:var(--ink3);font-size:12px;padding:7px 9px;border-bottom:1px solid var(--line)}
table.users td{padding:8px 9px;border-bottom:1px solid var(--line2)}
table.users select,table.users input{border:1px solid var(--line);border-radius:6px;padding:4px 7px;font-size:12.5px;font-family:inherit}
.urole{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px}
.adduser{background:#f6f8fb;border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.adduser h4{margin:0 0 4px;grid-column:1/-1;font-size:14px}
.adduser input,.adduser select{padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:14px;font-family:inherit;width:100%}
.adduser .full{grid-column:1/-1}
.adduser .msg{grid-column:1/-1;font-size:13px;min-height:16px}
.imgzoom{position:fixed;inset:0;background:rgba(10,20,35,.92);z-index:300;display:none;align-items:center;justify-content:center;padding:30px;cursor:zoom-out}
.imgzoom.open{display:flex}.imgzoom img{max-width:96%;max-height:96%;border-radius:8px}
.empty{text-align:center;padding:60px 20px;color:var(--ink3)}
footer{border-top:1px solid var(--line);padding:22px 0;color:var(--ink3);font-size:12.5px;text-align:center}
/* ---------- 태블릿/모바일 ---------- */
@media(max-width:820px){
  .read-layout{grid-template-columns:minmax(0,1fr);gap:0}
  .toc{display:none}
  article.read{padding:22px 18px 40px;border-radius:12px;font-size:15.5px;min-width:0;overflow-wrap:break-word}
  .tbl-scroll{max-width:100%}
  .blk .addmemo,.blk .cbadge{right:0;top:1px}
  .blk .addmemo{opacity:.55}
  figure.figblk .addmemo{right:8px;top:8px;opacity:.9}
}
@media(max-width:640px){
  .wrap{padding:0 14px}
  /* header */
  .hero-in{padding:24px 0 20px}
  .hero-top{gap:10px}
  .hero h1{font-size:22px}
  .hero .en{font-size:13.5px}
  .hero .sub{font-size:12px;margin-top:5px}
  .kicker{font-size:11.5px;letter-spacing:.1em}
  .stats{gap:15px;margin-top:14px}
  .stat .n{font-size:20px}.stat .l{font-size:10.5px}
  .userchip{padding:5px 5px 5px 10px;gap:7px}
  .userchip .un{font-size:12.5px}.userchip .ur{font-size:10px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .userchip .uav{width:30px;height:30px;font-size:13px}
  /* toolbar: 모바일은 고정 해제(리더바와 이중 고정 방지), 검색은 한 줄 차지 */
  .toolbar{position:static;padding:8px 0}
  .toolbar-in{gap:8px}
  .tabs{order:1}.tab{padding:7px 12px;font-size:13px}
  .filters{order:2;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .filters::-webkit-scrollbar{display:none}
  .search{order:3;flex-basis:100%;min-width:0}
  .chip{padding:6px 11px;font-size:12.5px}
  .grid{grid-template-columns:1fr;gap:12px}
  main{padding:18px 0 56px}
  /* reader */
  .rbar{top:0;padding:9px 0}
  .rbar-in{gap:9px}
  .rbar .rt{font-size:13.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rbar .rt small{display:none}
  .back{padding:7px 11px;font-size:13px}
  .memo-toggle{padding:7px 11px;font-size:12px}
  article.read{padding:20px 16px 40px}
  article.read>h1{font-size:22px}
  article.read>.den{font-size:13.5px;margin-bottom:20px}
  h2.read-h{font-size:19px}h3.read-h{font-size:16.5px}h4.read-h{font-size:15px}
  .case-h h2{font-size:17.5px}
  .blk .addmemo{width:28px;height:28px;font-size:14px}   /* 터치 타깃 확대 */
  /* memo panel & modals full-bleed */
  .memo-panel{width:100%;max-width:100%}
  .modal-bg{padding:0;align-items:stretch}
  .modal{border-radius:0;min-height:100%}
  .modal-body{max-height:none}
  .adduser{grid-template-columns:1fr}
  .login-card{padding:28px 20px 24px;border-radius:16px}
  .login-bg{padding:12px}
  table.cases{font-size:12.5px}
  table.cases th,table.cases td{padding:8px 9px}
  table.cases th{top:0}
  table.doc-tbl{font-size:12px}
}

/* ===== 편집/내보내기/관리 (추가 기능) ===== */
.rbtn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 11px;font-size:12.5px;font-weight:700;color:var(--ink2);cursor:pointer;white-space:nowrap}
.rbtn:hover{background:var(--han-l);color:var(--han-d)}
.rbtn.on{background:var(--gold);border-color:var(--gold);color:#fff}
/* 본문 편집 */
article.editing{outline:2px dashed var(--gold);outline-offset:8px}
article.editing .txt.blk,article.editing .cap.blk{cursor:pointer;border-radius:6px}
article.editing .txt.blk:hover,article.editing .cap.blk:hover{background:#fff7e6;box-shadow:inset 3px 0 0 var(--gold)}
article.editing .addmemo{display:none}
.blk.edited{background:#eaf7ef}
.blk-editor{background:#fff;border:1px solid var(--gold);border-radius:10px;padding:10px;margin:6px 0 14px;box-shadow:var(--shadow-lg)}
.blk-editor textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px;font-family:inherit;font-size:14.5px;line-height:1.65;resize:vertical;min-height:60px}
.blk-editor .cb{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.blk-editor .cb button{border:0;border-radius:8px;padding:7px 15px;font-size:13px;font-weight:700;cursor:pointer}
.blk-editor .cancel{background:#eef1f4;color:var(--ink2)}.blk-editor .save{background:var(--gold);color:#fff}
/* toast */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:#16202b;color:#fff;padding:11px 18px;border-radius:10px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow-lg);z-index:400;opacity:0;transition:.2s;pointer-events:none;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* 관리자: 장 배정 */
.chipmini{display:inline-block;background:var(--han-l);color:var(--han-d);border-radius:11px;padding:1px 8px;font-size:11px;font-weight:700;margin:1px 3px 1px 0}
.asgn{display:flex;flex-wrap:wrap;gap:2px}
.asgngrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 14px}
.asgnchk{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px;border-radius:7px;cursor:pointer}
.asgnchk:hover{background:var(--han-l)}
.asgnchk input{width:16px;height:16px;flex:none}
/* 인쇄(PDF) */
@media print{
  header.hero,.toolbar,.rbar,.toc,.crail,.memo-panel,.overlay,.modal-bg,.notes,.addmemo,.blk-editor,footer,#listView,#toast{display:none!important}
  .read-layout{display:block}
  article.read{border:0;box-shadow:none;max-width:100%;padding:0;font-size:11pt}
  body,main{background:#fff;padding:0;margin:0}
  article.read figure img{max-width:460px}
}
/* 모바일: 관리 모달 전체 스크롤 (#8) */
@media(max-width:640px){
  .modal-bg{padding:0;align-items:stretch}
  .modal{border-radius:0;min-height:100vh;width:100%;display:flex;flex-direction:column}
  .modal-head{flex:none}
  .modal-body{flex:1;max-height:none;overflow:auto;-webkit-overflow-scrolling:touch}
  table.users{font-size:12px}
  table.users th,table.users td{padding:6px 5px}
  .asgngrid{grid-template-columns:1fr}
  .rbar-in{flex-wrap:wrap}
  .rbtn{padding:6px 9px;font-size:11.5px}
}

/* 블록 이동 컨트롤 + 제목 편집 */
.movectl{position:absolute;left:-34px;top:2px;display:flex;flex-direction:column;gap:1px;opacity:.5;transition:.12s}
.blk:hover .movectl{opacity:1}
.movectl .mv{border:1px solid var(--line);background:#fff;color:var(--han);width:24px;height:18px;font-size:10px;line-height:1;border-radius:5px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.movectl .mv:hover{background:var(--han);color:#fff}
article.editing h2.read-h.blk:hover,article.editing h3.read-h.blk:hover,article.editing h4.read-h.blk:hover,article.editing .case-h.blk:hover{background:#fff7e6;cursor:pointer;outline:1px dashed var(--gold)}
.uedit{border:1px solid var(--line);border-radius:6px;padding:4px 7px;font-size:12.5px;font-family:inherit}
.uedit.small{font-size:11px;color:var(--ink2);margin-top:3px}
@media(max-width:820px){.movectl{left:auto;right:2px;top:auto;bottom:2px;flex-direction:row}}

/* 헤더: 영문 크게 위 / 국문 작게 아래 */
.hero .ksub{font-size:15px;opacity:.92;font-weight:500;margin-top:3px}
/* 도움말 플로팅 버튼 + 패널 */
.hero-right{display:flex;align-items:center;gap:10px;flex:none}
#helpBtn{border:0;background:rgba(255,255,255,.16);color:#fff;border-radius:30px;padding:9px 15px;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
#helpBtn:hover{background:rgba(255,255,255,.28)}
.help-tabs{display:flex;gap:6px;margin-bottom:16px}
.help-tabs .ht{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 14px;font-size:13.5px;font-weight:700;color:var(--ink2);cursor:pointer}
.help-tabs .ht.active{background:var(--han);border-color:var(--han);color:#fff}
.man-item{border-left:3px solid var(--han-l);padding:2px 0 2px 12px;margin-bottom:14px}
.man-t{font-weight:800;color:var(--han-d);font-size:14.5px;margin-bottom:3px}
.man-d{font-size:13.5px;color:var(--ink2);line-height:1.65}
.cl-item{margin-bottom:16px}
.cl-v{font-weight:800;color:var(--gold);font-size:15px;margin-bottom:5px}
.cl-v .cl-d{color:var(--ink3);font-size:12px;font-weight:600;margin-left:6px}
.cl-item ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--ink2);line-height:1.7}
/* 드래그앤드롭 */
.movectl .draghandle{border:1px solid var(--line);background:#fff;color:var(--ink3);width:24px;height:18px;font-size:11px;border-radius:5px;cursor:grab;padding:0;display:flex;align-items:center;justify-content:center}
.movectl .draghandle:active{cursor:grabbing}
.blk.dragging{opacity:.4}
.blk.dragover{box-shadow:0 -3px 0 var(--gold) inset;background:#fff7e6}
@media(max-width:640px){#helpBtn{right:14px;bottom:14px;width:44px;height:44px;font-size:21px}}

@media(max-width:640px){
  .hero-right{gap:7px}
  #helpBtn{padding:7px 10px;font-size:11px}
  .hero-top{flex-wrap:wrap}
}
.rb-super{background:#efe3fb;color:#6b3fa0}
.userchip .ur .rolepill{}