:root{--hh:52px}@media(max-width:760px){:root{--hh:48px}}
:root{--bg:#FAFAF9;--sf:#fff;--ln:#ECEBE8;--tx:#1c1b19;--tx2:#78756e;--ac:#4F46E5;--ac2:#eef0ff;--hv:#f4f3f0;--dg:#d9453d;--sel:#f0f1ff;--sh:0 8px 30px rgba(0,0,0,.12);--rh:44px}
[data-theme=dark]{--bg:#141413;--sf:#1c1c1a;--ln:#2d2c29;--tx:#ecebe7;--tx2:#9a978f;--ac:#8b86ff;--ac2:#25244a;--hv:#252522;--sel:#23233f;--sh:0 8px 30px rgba(0,0,0,.5)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#141413;--sf:#1c1c1a;--ln:#2d2c29;--tx:#ecebe7;--tx2:#9a978f;--ac:#8b86ff;--ac2:#25244a;--hv:#252522;--sel:#23233f;--sh:0 8px 30px rgba(0,0,0,.5)}}
[data-density=compact]{--rh:36px}[data-density=roomy]{--rh:58px}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{font:14px/1.5 Pretendard,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;background:var(--bg);color:var(--tx);-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ib{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;color:var(--tx2)}
.ib:hover{background:var(--hv);color:var(--tx)}.ib.on{color:var(--ac)}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;border:1px solid var(--ln);background:var(--sf);white-space:nowrap}
.btn:hover{background:var(--hv)}.btn.pri{background:var(--ac);border-color:var(--ac);color:#fff}.btn.pri:hover{filter:brightness(1.08)}.btn.dg{color:var(--dg)}.btn.sm{padding:4px 10px;font-size:13px}
.btn:disabled{opacity:.5;pointer-events:none}
input.f,select.f,textarea.f{width:100%;padding:9px 11px;border:1px solid var(--ln);border-radius:8px;background:var(--sf);outline:0}
input.f:focus,select.f:focus,textarea.f:focus{border-color:var(--ac)}
.muted{color:var(--tx2)}.grow{flex:1;min-width:0}.row{display:flex;align-items:center;gap:8px}
.hide{display:none!important}
/* 로그인 */
.login{min-height:100%;display:grid;place-items:center;padding:20px}
.login form{width:min(380px,100%);background:var(--sf);border:1px solid var(--ln);border-radius:14px;padding:32px 28px;display:grid;gap:12px}
.login h1{margin:0 0 4px;font-size:22px;display:flex;align-items:center;gap:10px}.login h1 img{width:32px;height:32px}
.err{color:var(--dg);font-size:13px;min-height:18px}
/* 셸 */
.shell{display:grid;grid-template-rows:var(--hh) 1fr;height:100%}
.top{display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--ln);background:var(--sf)}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;width:196px}.logo img{width:26px;height:26px}
.sbox{position:relative;flex:1;max-width:640px}
.sbox input{width:100%;padding:8px 80px 8px 36px;border:1px solid transparent;border-radius:10px;background:var(--hv);outline:0}
.sbox input:focus{background:var(--sf);border-color:var(--ac)}
.sbox .si{position:absolute;left:10px;top:8px;color:var(--tx2)}
.sbox .adv{position:absolute;right:4px;top:4px;font-size:13px;color:var(--tx2);padding:3px 10px;border-radius:6px}.sbox .adv:hover{background:var(--ln)}
.body{display:grid;grid-template-columns:224px minmax(340px,var(--lw,440px)) 1fr;min-height:0}
.body[data-layout=list]{grid-template-columns:224px 1fr}.body[data-layout=list] .read{display:none}
.side{padding:14px 10px;overflow:auto;border-right:1px solid var(--ln);display:flex;flex-direction:column;gap:2px}
.compose-btn{margin:0 4px 12px;padding:10px;border-radius:10px;background:var(--ac);color:#fff;font-weight:600;display:flex;justify-content:center;gap:8px}.compose-btn:hover{filter:brightness(1.08)}
.fi{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;color:var(--tx);cursor:pointer;user-select:none}
.fi:hover{background:var(--hv)}.fi.on{background:var(--ac2);color:var(--ac);font-weight:600}
.fi .n{margin-left:auto;font-size:12px;color:var(--ac);font-weight:600}.fi.dragover{outline:2px dashed var(--ac)}
.sec{font-size:11px;color:var(--tx2);padding:14px 10px 4px;display:flex;align-items:center;letter-spacing:.04em}.sec button{margin-left:auto;color:var(--tx2)}
.quota{margin:auto 6px 0;padding-top:14px;font-size:12px;color:var(--tx2)}.bar{height:4px;background:var(--ln);border-radius:2px;margin-top:5px;overflow:hidden}.bar i{display:block;height:100%;background:var(--ac)}
.listp{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--ln);background:var(--sf)}
.tb{display:flex;align-items:center;gap:4px;padding:6px 10px;border-bottom:1px solid var(--ln);min-height:46px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;background:var(--hv);font-size:12px;color:var(--tx2);border:1px solid transparent}
.chip.on{background:var(--ac2);color:var(--ac);border-color:var(--ac)}.chip button{color:inherit}
.fchips{display:flex;gap:6px;padding:6px 12px;flex-wrap:wrap;border-bottom:1px solid var(--ln)}
.rows{flex:1;overflow:auto}
.mrow{display:flex;align-items:center;gap:8px;height:var(--rh);padding:0 12px 0 10px;border-bottom:1px solid var(--ln);cursor:pointer;position:relative}
.mrow:hover{background:var(--hv)}.mrow.sel{background:var(--sel)}.mrow.cur{background:var(--ac2)}
.mrow.unread::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--ac)}
.mrow .cb{width:15px;height:15px;accent-color:var(--ac);flex:none}
.mrow .star{color:var(--ln);flex:none;width:22px;height:22px;display:grid;place-items:center}.mrow .star.on{color:#f5a623}.mrow:hover .star:not(.on){color:var(--tx2)}
.mrow .fr{width:120px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow .sb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow .sb span{color:var(--tx2);font-weight:400}
.mrow.unread .fr,.mrow.unread .sb b{font-weight:700}
.mrow .dt{font-size:12px;color:var(--tx2);flex:none;min-width:48px;text-align:right}
.mrow .at{color:var(--tx2);flex:none;display:flex}
[data-density=roomy] .mrow{align-items:center}
.pager{display:flex;align-items:center;justify-content:center;gap:10px;padding:6px;border-top:1px solid var(--ln);font-size:13px;color:var(--tx2)}
.empty{padding:60px 20px;text-align:center;color:var(--tx2)}
.skel{height:var(--rh);margin:1px 12px;border-radius:6px;background:linear-gradient(90deg,var(--hv),var(--ln),var(--hv));background-size:200% 100%;animation:sk 1.2s infinite}@keyframes sk{to{background-position:-200% 0}}
/* 읽기 */
.read{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--sf)}
.read .rb{flex:1;overflow:auto;padding:22px 30px 40px}
.read .empty{margin:auto}
.mh h2{margin:0 0 12px;font-size:20px;font-weight:700;line-height:1.35;word-break:break-word}
.who{display:flex;gap:12px;align-items:flex-start;padding-bottom:14px;border-bottom:1px solid var(--ln);margin-bottom:12px}
.av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;flex:none}
.who .nm{font-weight:600}.who .meta{font-size:12px;color:var(--tx2);word-break:break-all}
.banner{padding:9px 12px;border-radius:8px;background:var(--ac2);font-size:13px;margin-bottom:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.atts{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 14px}
.att{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--ln);border-radius:8px;font-size:13px;max-width:100%}
.att a{color:inherit;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}.att a:hover{color:var(--ac)}
iframe.mb{width:100%;border:0;display:block;min-height:120px;background:#fff;border-radius:6px;color-scheme:light}
.quick{margin-top:22px;padding:14px;border:1px solid var(--ln);border-radius:10px;color:var(--tx2);cursor:text}
.quick:hover{border-color:var(--ac)}
/* 팝오버/메뉴/모달 */
.menu{position:fixed;z-index:60;background:var(--sf);border:1px solid var(--ln);border-radius:10px;box-shadow:var(--sh);padding:4px;min-width:170px;max-height:70vh;overflow:auto}
.menu button{display:flex;width:100%;gap:8px;align-items:center;text-align:left;padding:7px 10px;border-radius:6px}.menu button:hover{background:var(--hv)}
.menu hr{border:0;border-top:1px solid var(--ln);margin:4px 0}
.modal{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.35);display:grid;place-items:center;padding:16px}
.mbox{background:var(--sf);border-radius:14px;padding:22px;width:min(520px,100%);max-height:92vh;overflow:auto;box-shadow:var(--sh)}
.mbox h3{margin:0 0 14px}.grid2{display:grid;grid-template-columns:90px 1fr;gap:10px;align-items:center}.grid2 label{color:var(--tx2);font-size:13px}
.mbox .act{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
#toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;display:grid;gap:8px;justify-items:center}
.toast{background:#262521;color:#fff;padding:10px 16px;border-radius:10px;display:flex;gap:14px;align-items:center;box-shadow:var(--sh)}.toast button{color:#a5a0ff;font-weight:600}
/* 쓰기 */
.cw{position:fixed;right:24px;bottom:0;width:min(640px,calc(100vw - 32px));height:min(640px,86vh);z-index:50;background:var(--sf);border:1px solid var(--ln);border-bottom:0;border-radius:12px 12px 0 0;box-shadow:var(--sh);display:flex;flex-direction:column}
.cw.min{height:44px}.cw.min .cb2{display:none}.cw.full{inset:3vh 4vw 0;width:auto;height:auto}
.ch{display:flex;align-items:center;padding:6px 8px 6px 16px;border-bottom:1px solid var(--ln);font-weight:600;background:var(--hv);border-radius:12px 12px 0 0;cursor:pointer}
.cb2{display:flex;flex-direction:column;flex:1;min-height:0}
.fl{display:flex;align-items:flex-start;gap:8px;padding:4px 14px;border-bottom:1px solid var(--ln);min-height:40px}.fl>label{width:56px;flex:none;color:var(--tx2);font-size:13px;padding-top:8px}
.rcp{flex:1;display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:4px 0;position:relative;min-width:0}
.rc{display:inline-flex;gap:4px;align-items:center;padding:2px 4px 2px 10px;background:var(--ac2);color:var(--ac);border-radius:99px;font-size:13px}.rc.bad{background:#fde8e6;color:var(--dg)}.rc button{width:18px;height:18px;line-height:16px;border-radius:50%}
.rcp input,.fl input.ns{border:0;outline:0;background:none;flex:1;min-width:120px;padding:4px 0}
.fl .tg{color:var(--tx2);font-size:12px;padding-top:9px;display:flex;gap:8px}
.sug{position:absolute;left:0;top:100%;z-index:5;background:var(--sf);border:1px solid var(--ln);border-radius:8px;box-shadow:var(--sh);min-width:260px;max-width:100%}.sug div{padding:7px 12px;cursor:pointer}.sug div:hover,.sug div.on{background:var(--hv)}
.ftb{display:flex;gap:2px;padding:4px 10px;border-bottom:1px solid var(--ln);flex-wrap:wrap}.ftb .ib{width:30px;height:30px;font-weight:700}
.ed{flex:1;overflow:auto;padding:14px 16px;outline:0;min-height:120px}.ed:empty::before{content:attr(data-ph);color:var(--tx2)}
.ed blockquote,.quote{border-left:3px solid var(--ln);margin:8px 0;padding-left:12px;color:var(--tx2)}
.cf{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--ln)}
.ul{display:flex;gap:6px;flex-wrap:wrap;padding:6px 14px}.ul:empty{display:none}
.ui{display:flex;align-items:center;gap:8px;padding:4px 10px;border:1px solid var(--ln);border-radius:8px;font-size:12px;position:relative;overflow:hidden}.ui i{position:absolute;left:0;bottom:0;height:2px;background:var(--ac)}
.drop{outline:2px dashed var(--ac);outline-offset:-6px}
/* 설정 */
.page{grid-column:2/-1;overflow:auto;padding:24px 32px;background:var(--sf)}
.page h2{margin:0 0 16px}.page .card{border:1px solid var(--ln);border-radius:12px;padding:18px;margin-bottom:16px;max-width:720px}
.tbl{width:100%;border-collapse:collapse}.tbl td,.tbl th{padding:8px;border-bottom:1px solid var(--ln);text-align:left;font-size:13px}
.tabbar,.drawer-bg,.mback{display:none}
@media(max-width:1100px){.body{grid-template-columns:minmax(300px,380px) 1fr}.side{position:fixed;z-index:40;top:var(--hh);bottom:0;left:0;width:260px;background:var(--sf);transform:translateX(-100%);transition:.2s}.side.open{transform:none;box-shadow:var(--sh)}.logo{width:auto}.page{grid-column:1/-1}.menubtn{display:inline-grid!important}
.body[data-layout=list]{grid-template-columns:1fr}}
.menubtn{display:none}
@media(max-width:760px){
 .body,.body[data-layout=list]{grid-template-columns:1fr;position:relative}
 .read{position:fixed;inset:var(--hh) 0 0 0;z-index:30;transform:translateX(100%);transition:.2s}.read.show{transform:none}.body[data-layout=list] .read{display:flex}
 .mback{display:inline-grid}.read .rb{padding:16px}
 .logo span{display:none}.sbox .adv{display:none}.sbox input{padding-right:10px}
 .mrow .fr{width:84px}.mrow .at,.mrow .star{display:none}.mrow.unread .star{display:none}
 .cw,.cw.full{inset:0;width:auto;height:auto;border-radius:0;border:0}.cw.min{height:auto}.ch{border-radius:0}
 .top{padding:0 8px;gap:4px}.page{padding:16px}
 .mrow:hover{background:none}
}
/* 보정: 앱 전체 높이, 모바일 상단 바 넘침, 참조 링크 색 */
#app{height:100%}
html,body{overflow-x:hidden}
.sbox{min-width:0}.sbox input{min-width:0}
.fl .tg a{color:var(--tx2);text-decoration:none}.fl .tg a:hover{color:var(--ac)}
@media(max-width:760px){
 .top .grow{display:none}.sbox{flex:1}#th{display:none}
 .logo{width:auto}.fl>label{width:48px}.ftb{overflow-x:auto;flex-wrap:nowrap}
}
.fl>label{white-space:nowrap}@media(max-width:760px){.fl>label{width:62px;font-size:12px}}
/* ── 상태 색 체계 ── */
:root{--ok:#1F8F5F;--okbg:#E4F6EC;--warn:#B26A00;--warnbg:#FFF1D6;--dg:#C73A32;--dgbg:#FDE8E6;--info:#2563B0;--infobg:#E6F0FB;--star:#D98A00;--tx2:#6B685F}
[data-theme=dark]{--ok:#4CC38A;--okbg:#143024;--warn:#F0A93B;--warnbg:#3A2B10;--dg:#FF7A70;--dgbg:#3F1B18;--info:#6AA6EE;--infobg:#16263A;--star:#F5B83D;--tx2:#9a978f}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--ok:#4CC38A;--okbg:#143024;--warn:#F0A93B;--warnbg:#3A2B10;--dg:#FF7A70;--dgbg:#3F1B18;--info:#6AA6EE;--infobg:#16263A;--star:#F5B83D;--tx2:#9a978f}}
.mrow .star.on{color:var(--star)}
.rc.bad{background:var(--dgbg)}
.banner.warn{background:var(--warnbg);color:var(--warn)}.banner.danger{background:var(--dgbg);color:var(--dg)}
.banner.warn b,.banner.danger b{font-weight:700}.banner span{color:var(--tx)}
.att.risk{border-color:var(--dg)}.att .rk{color:var(--dg);font-size:12px;font-weight:600}
/* ── 접근성 ── */
:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:6px}
input.f:focus-visible,.sbox input:focus-visible,.rcp input:focus-visible,.fl input:focus-visible{outline:0}
.mrow:focus-visible{outline-offset:-2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ── 툴바 버튼(아이콘+글자) ── */
.tbtn{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:8px;color:var(--tx);font-size:13px}
.tbtn:hover{background:var(--hv)}.tbtn.dg{color:var(--dg)}.tbtn.dg:hover{background:var(--dgbg)}
/* ── 2줄 목록 ── */
.mrow.two{height:76px;gap:10px;padding:0 14px 0 12px;align-items:center}
.mrow.two .av{width:36px;height:36px;font-size:14px;flex:none}
.mrow.two .cb{position:absolute;left:12px;top:50%;margin-top:-8px;z-index:2;opacity:0}
.mrow.two:hover .cb,.mrow.two.sel .cb,body.selecting .mrow.two .cb{opacity:1}
.mrow.two:hover .av,.mrow.two.sel .av,body.selecting .mrow.two .av{visibility:hidden}
.mrow.two .mc{flex:1;min-width:0;display:grid;gap:1px}
.mrow.two .l1,.mrow.two .l2{display:flex;align-items:center;gap:8px;min-width:0}
.mrow.two .fr{flex:1;width:auto;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow.two .dt{font-size:12px}
.mrow.two .sj{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow.two .l3{font-size:12.5px;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:19px}
.mrow.two.unread .sj{font-weight:700}
.mrow.two .star{width:20px;height:20px;margin:0}.mrow.two .star:not(.on){opacity:0}.mrow.two:hover .star{opacity:1}
.mrow[data-sw]{transition:none}
.mrow[data-sw=read]{background:var(--infobg);box-shadow:inset 6px 0 0 var(--info)}
.mrow[data-sw=del]{background:var(--dgbg);box-shadow:inset -6px 0 0 var(--dg)}
/* ── 모바일 탭바 / FAB ── */
.tabbar,.fab{display:none}
@media(max-width:760px){
 .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:35;background:var(--sf);border-top:1px solid var(--ln);padding-bottom:env(safe-area-inset-bottom);height:calc(56px + env(safe-area-inset-bottom))}
 .tabbar button{flex:1;display:grid;place-items:center;align-content:center;gap:1px;color:var(--tx2);font-size:11px;min-height:56px}
 .tabbar button.on{color:var(--ac);font-weight:600}
 .fab{display:flex;align-items:center;justify-content:center;gap:8px;position:fixed;right:16px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:36;height:56px;min-width:56px;padding:0 18px;border-radius:28px;background:var(--ac);color:#fff;font-weight:600;box-shadow:var(--sh);transition:padding .2s}
 .fab.mini{padding:0 17px}.fab.mini span{display:none}
 body.reading .tabbar,body.reading .fab,body.composing .tabbar,body.composing .fab,body.selecting .fab{display:none}
 body.selecting .tabbar{display:none}
 .rows{padding-bottom:140px}
 .ib{width:44px;height:44px}.tbtn{padding:8px 10px}
 .mrow .cb{width:20px;height:20px}
 .mrow.two{height:80px}.mrow.two .star{opacity:1;width:28px;height:28px}.mrow.two .star:not(.on){display:none}
 .mrow.two .cb{opacity:0}.mrow.two.sel .cb,body.selecting .mrow.two .cb{opacity:1}
 .read .tb{position:sticky;bottom:0}
 .read{padding-bottom:env(safe-area-inset-bottom)}
 .mrow.unread .star{display:grid}
 .tb{position:sticky;top:0;z-index:5;background:var(--sf)}
 body.selecting .listp .tb{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:40;border-top:1px solid var(--ln);border-bottom:0;padding-bottom:calc(6px + env(safe-area-inset-bottom));justify-content:space-around}
 body.selecting .listp .tb b{display:none}
 .tbtn{flex-direction:column;gap:0;font-size:11px}
}
/* 관리자 / 당겨서 새로고침 */
.rows[data-ptr]::before{content:attr(data-ptr);position:absolute;left:0;right:0;top:-34px;text-align:center;font-size:12px;color:var(--tx2)}
.listp{position:relative}.rows{position:relative}
.card .bar{max-width:420px}
.page .tbl td .btn{margin-left:2px}
/* 드래그해서 복사 가능 (메일 이동 드래그는 아바타·체크박스를 잡았을 때만) */
.rows,.read,.page{user-select:text;-webkit-user-select:text}
.mrow .av,.mrow .cb,.mrow .star,button,.tabbar,.fab{user-select:none;-webkit-user-select:none}
.mrow.two .av{cursor:grab}
/* 태그 점 */
.td{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:4px;vertical-align:middle}
.tds{display:inline-flex;gap:0;flex:none}
.tagdot{width:18px;height:18px;border-radius:50%;border:2px solid var(--sf);box-shadow:0 0 0 1px var(--ln);cursor:pointer;padding:0}
.tagdot:hover{transform:scale(1.15)}
/* 목록 도구 줄이 좁을 때 한 줄에 맞추기 */
.listp .tb .chip{padding:3px 8px}.listp .tb .btn.sm{padding:3px 8px}.listp .tb{gap:3px}
/* ── 아웃룩식: 상단 명령 줄, 읽기 창 위치 ── */
.shell{grid-template-rows:var(--hh) auto 1fr}
.ribbon{display:flex;align-items:center;gap:2px;padding:4px 10px;border-bottom:1px solid var(--ln);background:var(--sf);overflow-x:auto;white-space:nowrap}
.ribbon.hide{display:none!important}.shell:has(.ribbon.hide){grid-template-rows:var(--hh) 0 1fr}
.rbn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;color:var(--tx);font-size:13px;flex:none}
.rbn:hover:not(:disabled){background:var(--hv)}.rbn:disabled{opacity:.38;cursor:default}
.rbn.pri{background:var(--ac);color:#fff}.rbn.pri:hover{filter:brightness(1.08);background:var(--ac)}
.rbn.dg:not(:disabled){color:var(--dg)}
.ribbon .sep{width:1px;height:20px;background:var(--ln);margin:0 6px;flex:none}
.body[data-layout=bottom]{grid-template-columns:224px 1fr;grid-template-rows:minmax(150px,42%) minmax(0,1fr)}
.body[data-layout=bottom] .side{grid-row:1/3}
.body[data-layout=bottom] .listp{border-right:0;border-bottom:1px solid var(--ln)}
.body[data-layout=bottom] .page{grid-row:1/3}
.body[data-layout=bottom] .read .rb{padding:16px 26px 30px}
.mrow{user-select:none}.mrow *{user-select:none}
.mrow.sel{box-shadow:inset 3px 0 0 var(--ac)}
@media(max-width:1100px){.body[data-layout=bottom]{grid-template-columns:1fr}.body[data-layout=bottom] .side{grid-row:auto}}
@media(max-width:760px){.ribbon{display:none!important}.shell,.shell:has(.ribbon.hide){grid-template-rows:var(--hh) 0 1fr}.body[data-layout=bottom]{grid-template-rows:none}}
/* 사이드바: 계정 줄 */
.acch{display:flex;align-items:center;gap:6px;padding:8px 10px 4px;margin-top:6px;font-size:12px;font-weight:600;color:var(--tx2);cursor:pointer;user-select:none}
.acch:hover{color:var(--tx)}.acch .n{margin-left:auto;font-size:12px;color:var(--ac);font-weight:600}
.acch button{margin-left:auto;color:var(--tx2)}.acch button:hover{color:var(--ac)}
/* 대화로 묶어 보기 / 크게 열기 */
.thr{display:inline-block;font-size:11px;font-weight:600;color:var(--ac);background:var(--ac2);border-radius:99px;padding:0 7px;margin-right:4px;cursor:pointer;user-select:none}
.thr:hover{filter:brightness(.95)}
.mrow.child{background:var(--bg)}.mrow.child.two{height:64px}.mrow.child .mc,.mrow.child .sb,.mrow.child .fr{opacity:.92}
.mrow.child.two .av{width:28px;height:28px;font-size:12px;margin-left:16px}.mrow.child:not(.two){padding-left:28px}
.read.zoom{position:fixed;inset:var(--hh) 0 0 0;z-index:30;display:flex!important;border:0}
.read.zoom .mback{display:inline-grid}
.read.zoom .rb{padding:22px max(30px,calc((100vw - 900px)/2)) 40px}
/* 보정: 명령 줄이 숨겨져도 화면 줄 배치가 어긋나지 않게 (항상 3줄: 상단 바 / 명령 줄 / 본문) */
.shell,.shell:has(.ribbon.hide){grid-template-rows:var(--hh) auto minmax(0,1fr)}
.ribbon.hide{display:block!important;height:0;min-height:0;padding:0!important;border:0!important;overflow:hidden}
@media(max-width:760px){
 .shell,.shell:has(.ribbon.hide){grid-template-rows:var(--hh) auto minmax(0,1fr)}
 .ribbon{display:block!important;height:0;min-height:0;padding:0!important;border:0!important;overflow:hidden}
}
/* ── 잘림 보정 (전수 조사 결과) ── */
/* 1) 긴 글이 목록 폭을 늘려서 화면 밖으로 밀던 문제 */
.body{grid-template-columns:224px minmax(340px,var(--lw,440px)) minmax(0,1fr)}
.body[data-layout=list]{grid-template-columns:224px minmax(0,1fr)}
.body[data-layout=bottom]{grid-template-columns:224px minmax(0,1fr)}
.body>*,.listp,.read,.rows,.page,.mc,.sb,.sj{min-width:0}
@media(max-width:1100px){.body,.body[data-layout=bottom]{grid-template-columns:minmax(300px,380px) minmax(0,1fr)}.body[data-layout=list],.body[data-layout=bottom]{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.body,.body[data-layout=list],.body[data-layout=bottom]{grid-template-columns:minmax(0,1fr)}}
.mrow>.sb{flex:1 1 0}
/* 2) 쓰기 창 아래 줄/대용량 옵션 */
.cf{flex-wrap:wrap}
#lg>label{width:auto!important;padding-top:0!important;white-space:nowrap}
#lg select,#lg input{max-width:130px}
@media(max-width:760px){.cf #ds{display:none}.cf .btn{padding:7px 10px}#sgp{max-width:110px}}
/* 3) 모바일 설정 입력 칸: 라벨을 위로, 입력은 한 줄에 */
@media(max-width:760px){.grid2{grid-template-columns:minmax(0,1fr)!important;gap:6px}.grid2>label{margin-top:6px}.grid2 .row{flex-wrap:nowrap}.grid2 .row input.f{min-width:0}.card{padding:14px}.page .card{max-width:100%}}
/* 4) 명령 줄: 좁으면 글자를 숨기고 아이콘만 (넘치지 않게) */
@media(max-width:1250px){.rbn:not(.pri) span{display:none}.rbn{padding:6px 9px}}
/* 5) 표가 카드보다 넓으면 카드 안에서 가로로 밀 수 있게 */
.page .card{overflow-x:auto}
.tbl{min-width:0}
@media(max-width:760px){.tbl td,.tbl th{padding:6px 5px}.tbl td{word-break:break-all}}
.grid2 .row input[type=number]{min-width:72px;flex:none}
@media(max-width:760px){.tbl td[style*="nowrap"]{white-space:normal!important}.tbl td .btn{margin:2px 0}}
.tds .td{margin:0 2px 0 0}
/* ── 잘림 보정 2: 모바일 도구 줄(꺾임), 미리보기 없는 2줄 행, 규칙 이름 칸 ── */
.mrow.two .l3:empty{display:none}
.card>.row{flex-wrap:wrap}.card input[data-k=name]{flex:1 1 130px;min-width:0;max-width:240px}
@media(max-width:760px){
 .listp .tb,.read .tb{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none;min-height:46px}
 .listp .tb::-webkit-scrollbar,.read .tb::-webkit-scrollbar{display:none}
 .listp .tb>*,.read .tb>*{flex:none}.listp .tb .grow,.read .tb .grow{flex:1 0 8px}
 .fchips{flex-wrap:nowrap;overflow-x:auto}.fchips>*{flex:none}
}
/* 명령 줄이 있는 화면(761px 이상)에서는 목록 줄의 새로 고침·보기 버튼이 중복이라 숨김 */
@media(min-width:761px){.listp .tb #den,.listp .tb #rf{display:none}}
/* 좁은 목록 열에서는 도구 줄을 한 줄로 유지 (넘치면 옆으로 밀기) */
@media(max-width:1100px){.listp .tb,.read .tb{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none}.listp .tb::-webkit-scrollbar,.read .tb::-webkit-scrollbar{display:none}.listp .tb>*,.read .tb>*{flex:none}.listp .tb .grow,.read .tb .grow{flex:1 0 4px}}
/* ── 자문 반영: 상태 색 엄격 분리(안읽음=파랑, 별표=금색, 위험=코랄), 계정 트리, 일정 카드 ── */
:root{--un:#3B82F6;--star:#D97706;--dg:#E11D48;--dgbg:#FFE4EA}
[data-theme=dark]{--un:#60A5FA;--star:#F5B83D;--dg:#FF7A90;--dgbg:#40181F}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--un:#60A5FA;--star:#F5B83D;--dg:#FF7A90;--dgbg:#40181F}}
.mrow.unread::before{background:var(--un)}.fi .n,.acch .n{color:var(--un)}.tabbar button.on{color:var(--ac)}
.sbox input:focus{box-shadow:0 0 0 2px rgba(79,70,229,.15)}
.acch{background:rgba(0,0,0,.03);border-radius:8px;margin:8px 4px 2px;padding:8px 10px;font-size:12.5px}
[data-theme=dark] .acch{background:rgba(255,255,255,.05)}
.acch>span:first-child{width:28px!important;height:28px;display:grid;place-items:center;font-size:12px!important;margin:-6px 0 -6px -8px}
.fi[data-a]{position:relative}.fi[data-a]::before{content:"";position:absolute;left:14px;top:0;bottom:0;border-left:1px solid var(--ln)}
.fi[data-a] svg,.fi[data-a] span{position:relative}
.evt{border:1px solid var(--ln);border-left:4px solid var(--ac);border-radius:10px;padding:10px 14px;margin:8px 0 12px;background:var(--hv)}
.evt .evh{display:flex;gap:8px;align-items:center;margin-bottom:2px}.evt .evh svg{color:var(--ac)}
@media print{.top,.ribbon,.side,.listp,.tabbar,.fab,.read .tb,.quick,.banner{display:none!important}.read{position:static!important;display:block!important}.read .rb{overflow:visible!important;padding:0!important}iframe.mb{height:auto!important}}

/* ── 자문 반영: 헤더 52px(모바일 48px), 검색창 가운데, 모달 규격, 뷰어 헤더, 작성 탭 ── */
.top{height:var(--hh)}.top .grow{display:none}.sbox{flex:1 1 auto;max-width:560px;margin:0 auto}.sbox input{padding-top:7px;padding-bottom:7px}.sbox .si{top:7px}.sbox .adv{top:3px}
.mbox{border-radius:12px;padding:24px}.mbox h3{margin-bottom:16px}
.mbox input.f,.mbox select.f{height:36px;font-size:13px;padding-top:0;padding-bottom:0}.mbox textarea.f{font-size:13px}
.mbox .grid2{grid-template-columns:minmax(0,1fr);gap:4px 0}.mbox .grid2>label{margin-top:8px;font-size:12px}
.mh h2{font-size:18px;font-weight:700;line-height:1.4}
.who{padding:16px 20px;margin:0 -20px 12px}
.who .grow>.meta:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:760px){.who{padding:12px 4px;margin:0 -4px 10px}}
/* 여러 작성 창: 가려 둔 작성 창이 탭으로 남는다 */
#cdock{position:fixed;bottom:0;right:calc(24px + min(640px,100vw - 32px) + 8px);z-index:49;display:flex;gap:6px;flex-direction:row-reverse}
#cdock .ctab{display:flex;align-items:center;gap:4px;max-width:200px;height:36px;padding:0 6px 0 12px;background:var(--hv);border:1px solid var(--ln);border-bottom:0;border-radius:10px 10px 0 0;cursor:pointer;font-size:13px;box-shadow:var(--sh)}
#cdock .ctab:hover{background:var(--sf)}#cdock .ctab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#cdock .ctab button{width:22px;height:22px;border-radius:50%;color:var(--tx2);flex:none}#cdock .ctab button:hover{background:var(--ln)}
body:has(#cw:not(.min)) #cdock{display:flex}
@media(max-width:760px){#cdock{display:none}}
/* ══ 자체 UI: 선택창·날짜·색·말풍선·확인창·체크박스·스크롤바 ══ */
.csb{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;cursor:pointer;min-height:36px;padding:7px 10px 7px 12px;border:1px solid var(--ln);border-radius:8px;background:var(--sf);color:var(--tx);font:inherit}
.csb:hover{border-color:var(--tx2)}.csb:focus-visible{outline:2px solid var(--ac);outline-offset:1px}.csb:disabled{opacity:.5;cursor:default}
.csb .csl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.csb.ph .csl{color:var(--tx2)}.csb .cav{width:15px;height:15px;color:var(--tx2);flex:none}
.csb.f{width:100%}.csb[style*="width:auto"]{width:auto}.page .csb[style*="max-width"]{width:100%}
.ftb .csb{min-height:30px;padding:2px 8px 2px 10px;font-size:13px}.cf .csb{min-height:36px}.ct .csb{min-height:34px;width:auto;padding:4px 10px}
.menu.csm{padding:4px}.menu.csm button{white-space:nowrap}
.cal{position:fixed;z-index:80;width:288px;background:var(--sf);border:1px solid var(--ln);border-radius:12px;box-shadow:var(--sh);padding:12px}
.cal .ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.cal .ch b{font-size:14px}
.cal .ch button{width:34px;height:34px;border-radius:8px;font-size:20px;color:var(--tx2)}.cal .ch button:hover{background:var(--hv);color:var(--tx)}
.cw7{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}.cw7 span{font-size:11px;color:var(--tx2);padding:4px 0}.cw7 .su{color:var(--dg)}.cw7 .sa{color:var(--info)}
.cw7 button{height:34px;border-radius:8px;font-size:13px}.cw7 button:hover:not(:disabled){background:var(--hv)}.cw7 button:disabled{opacity:.3;cursor:default}
.cw7 button.td0{box-shadow:inset 0 0 0 1px var(--ac)}.cw7 button.on{background:var(--ac);color:#fff}
.cal .ct{display:flex;gap:8px;margin-top:10px;justify-content:center}
.cf2{display:flex;gap:6px;margin-top:10px;justify-content:flex-end}.cf2 button{padding:6px 12px;border-radius:8px;font-size:13px;color:var(--tx2)}.cf2 button:hover{background:var(--hv);color:var(--tx)}.cf2 button.pri{background:var(--ac);color:#fff}.cf2 button.pri:hover{filter:brightness(1.08)}
.cal.pal{width:auto;display:grid;grid-template-columns:repeat(4,30px);gap:8px;padding:12px}.cal.pal .sw{width:30px;height:30px;border-radius:50%;border:2px solid var(--sf);box-shadow:0 0 0 1px var(--ln)}.cal.pal .sw:hover{transform:scale(1.12)}
.cal.pal .pr{grid-column:1/-1;padding:6px;border-radius:8px;font-size:13px;color:var(--tx2)}.cal.pal .pr:hover{background:var(--hv)}
.fcb{position:relative;width:30px;height:30px}.fcb .fcl{font-weight:700;font-size:15px;color:var(--tx)}.fcb .fcd{position:absolute;left:8px;right:8px;bottom:4px;height:3px;border-radius:2px}
#tip{position:fixed;z-index:95;max-width:260px;padding:5px 10px;border-radius:8px;background:#262521;color:#fff;font-size:12px;line-height:1.4;pointer-events:none;opacity:0;transition:opacity .12s;box-shadow:var(--sh)}#tip.on{opacity:1}
.dlg{width:min(400px,100%);padding:22px}.dlg .dm{white-space:pre-wrap;line-height:1.6;word-break:break-word;margin-bottom:6px}.dlg .f{margin-top:10px}
.btn.pri.dg2{background:var(--dg);border-color:var(--dg)}
/* 체크박스·라디오를 앱 모양으로 */
input[type=checkbox],input[type=radio]{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin:0;border:1.5px solid var(--tx2);background:var(--sf);display:inline-grid;place-content:center;flex:none;cursor:pointer;vertical-align:middle;transition:background .1s,border-color .1s}
input[type=checkbox]{border-radius:5px}input[type=radio]{border-radius:50%}
input[type=checkbox]:checked,input[type=radio]:checked{background:var(--ac);border-color:var(--ac)}
input[type=checkbox]:checked::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
input[type=radio]:checked::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--ac);outline-offset:2px}input[type=checkbox]:disabled{opacity:.5}
.mrow .cb{width:18px;height:18px}
input[type=number]{-moz-appearance:textfield;appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* 가는 스크롤바 */
*{scrollbar-width:thin;scrollbar-color:var(--ln) transparent}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--ln);border-radius:8px;border:2px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:var(--tx2);background-clip:content-box;border:2px solid transparent}::-webkit-scrollbar-track{background:transparent}
/* 겹침 순서: 목록(메뉴)은 달력·팔레트 위, 말풍선·토스트는 그 위 */
.menu{z-index:92}.cal{z-index:80}#toasts{z-index:96}