@font-face{font-family:"Pretendard";font-weight:45 920;font-style:normal;font-display:swap;src:url(/fonts/PretendardVariable.woff2) format("woff2-variations")}
/*
  기존(classic) 화면에 새 디자인의 색·모서리·글꼴을 입히는 덮어쓰기 스타일.
  기존 화면은 색을 CSS 변수로 쓰기 때문에, 구조는 건드리지 않고 변수만 새 값으로 바꾼다.
  되돌리려면 public/index.html 의 이 파일을 불러오는 <link> 한 줄을 지우면 된다.
*/
html[data-theme=light]{
  --bg:#eef0fb;--body-bg-rgb:238,240,251;--surface:#ffffff;--surface-2:#f6f7fd;--cap-bg:#f6f7fd;
  --border:#e5e8f4;--text:#1f2337;--muted:#7a8099;--muted-2:#9aa0b8;
  --accent:#5b6cf0;--accent-hover:#4757d6;--accent-soft:#e8ebff;--accent-text:#ffffff;--focus-border:#aab4ff;
  --primary-bg:#3a4052;--primary-hover:#4a516a;--primary-color:#ffffff;
  --sidebar-bg:#cfd5ee;--sidebar-border:#e5e8f4;--sidebar-color:#1f2337;--sidebar-color-muted:#7a8099;
  --sidebar-hover-bg:#c2c9e6;--sidebar-hover-color:#1f2337;--sidebar-active-bg:#ffffff;--sidebar-active-color:#5b6cf0;
  --danger:#e5484d;--ok:#2f9e63;--warn:#e0a100;
  --shadow-sm:0 1px 3px rgba(60,70,140,.08);--shadow:0 8px 30px rgba(60,70,140,.14);--shadow-lg:0 12px 40px rgba(60,70,140,.18);
}
html[data-theme=dark]{
  --bg:#14161f;--body-bg-rgb:20,22,31;--surface:#1c1f2b;--surface-2:#232736;--cap-bg:#232736;
  --border:#2c3144;--text:#e8eaf5;--muted:#8d93ad;--muted-2:#6c7290;
  --accent:#8393ff;--accent-hover:#a3afff;--accent-soft:#2a3052;--accent-text:#14161f;--focus-border:#5b6cf0;
  --primary-bg:#4a5168;--primary-hover:#5a627c;--primary-color:#ffffff;
  --sidebar-bg:#080a10;--sidebar-border:#2c3144;--sidebar-color:#d5d8ea;--sidebar-color-muted:#8d93ad;
  --sidebar-hover-bg:#232736;--sidebar-hover-color:#ffffff;--sidebar-active-bg:#2a3052;--sidebar-active-color:#aab4ff;
  --danger:#ff6b70;--ok:#4cc38a;--warn:#f0b429;
  --shadow-sm:0 1px 3px rgba(0,0,0,.35);--shadow:0 8px 30px rgba(0,0,0,.5);--shadow-lg:0 12px 40px rgba(0,0,0,.55);
}
:root{--radius:12px;--radius-sm:8px}
body{font-family:"Pretendard","Noto Sans KR","Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
html[data-theme=light] body{background:radial-gradient(900px 500px at 10% 0,rgba(185,167,245,.22),transparent 60%),radial-gradient(800px 500px at 100% 100%,rgba(143,176,247,.22),transparent 60%),var(--bg)}

/* ── 사이드바: 새 화면과 같은 모양(왼쪽 보라→파랑 띠, 둥근 항목, 강조 표시) ── */
html .sidebar.sidebar{
  background:linear-gradient(180deg,#b9a7f5,#8fb0f7) left top/4px 100% no-repeat,var(--sidebar-bg);
  border-right:1px solid var(--sidebar-border);
}
html[data-theme=dark] .sidebar.sidebar{background:linear-gradient(180deg,#6a58b8,#4d70b8) left top/4px 100% no-repeat,var(--sidebar-bg)}
html .sidebar-brand-icon.sidebar-brand-icon{background:linear-gradient(135deg,#b9a7f5,#8fb0f7);color:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(91,108,240,.25)}
html .sidebar-brand-text.sidebar-brand-text strong{font-weight:800;letter-spacing:-.02em}
html .nav-link.nav-link{margin:2px 10px;padding:.55rem .85rem;border-radius:10px;font-weight:500}
html .nav-link.nav-link:hover{background:var(--sidebar-hover-bg);color:var(--sidebar-hover-color)}
html .nav-link.nav-link.active{background:var(--sidebar-active-bg);color:var(--sidebar-active-color);font-weight:700;box-shadow:inset 3px 0 0 var(--accent)}
html .nav-link.nav-link.sub{padding-top:.4rem;padding-bottom:.4rem;font-weight:400}
html .sidebar-footer.sidebar-footer{border-top:1px solid var(--sidebar-border)}

/* ── 상단 헤더: 사이드바와 같은 배경(사이드바 색을 바꾸면 헤더도 같이 바뀐다) ── */
html .top-header.top-header{background:var(--sidebar-bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--sidebar-border)}

/* ── 환경설정 > 개인정보 변경: 가로 꽉 차게(원래는 980px 까지만) ── */
html .page.prof.prof{max-width:none;width:100%}

/* ── 사이드바 마감: 위쪽 은은한 빛, 눌림·hover·선택 표시, 아이콘 색, 아래 사용자 카드 ── */
html[data-theme=light] .sidebar.sidebar{
  background:linear-gradient(180deg,#b9a7f5,#8fb0f7) left top/4px 100% no-repeat,linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 38%),var(--sidebar-bg);
  box-shadow:1px 0 0 rgba(255,255,255,.6) inset,2px 0 14px rgba(60,70,140,.07)}
html .nav-link.nav-link{position:relative;color:var(--sidebar-color);transition:background .15s,color .15s,box-shadow .15s}
html .nav-link.nav-link svg{color:var(--sidebar-color-muted);transition:color .15s}
html[data-theme=light] .nav-link.nav-link:hover{background:rgba(255,255,255,.6);box-shadow:0 1px 2px rgba(60,70,140,.08)}
html .nav-link.nav-link:hover svg{color:var(--accent)}
html[data-theme=light] .nav-link.nav-link.active{background:linear-gradient(90deg,#fff,#f3f5ff);box-shadow:inset 3px 0 0 var(--accent),0 1px 2px rgba(60,70,140,.14),0 6px 14px rgba(91,108,240,.12)}
html[data-theme=dark] .nav-link.nav-link:hover{background:rgba(255,255,255,.06)}
html[data-theme=dark] .nav-link.nav-link.active{background:linear-gradient(90deg,#2d3560,#232a4a);box-shadow:inset 3px 0 0 var(--accent),0 4px 12px rgba(0,0,0,.35)}
html .nav-link.nav-link.active svg{color:var(--accent)}
html .nav-link.nav-link:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
html .sidebar-footer.sidebar-footer{padding:10px}
html .sidebar-footer .user-profile{border-radius:12px;padding:8px 10px;transition:background .15s,box-shadow .15s}
html[data-theme=light] .sidebar-footer .user-profile{background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(255,255,255,.7) inset,0 1px 2px rgba(60,70,140,.08)}
html[data-theme=light] .sidebar-footer .user-profile:hover{background:#fff}
html[data-theme=dark] .sidebar-footer .user-profile{background:rgba(255,255,255,.05)}
html[data-theme=dark] .sidebar-footer .user-profile:hover{background:rgba(255,255,255,.09)}

/* ── 모바일 rail: 좁은 화면에서 아래에 앱 이동 줄. 새 화면의 rail 과 같은 모양(아이콘만, 화면마다 다른 색). classic-design.js 가 만든다. ── */
#wm-rail{display:none;--ra:#72abf4;--rb:#b4a8f5}
#wm-rail[data-app=mail]{--ra:#72abf4;--rb:#b4a8f5}
#wm-rail[data-app=home]{--ra:#9db4f6;--rb:#c0a6f4}
#wm-rail[data-app=contacts]{--ra:#b19cf2;--rb:#cbc6fa}
#wm-rail[data-app=calendar]{--ra:#f88fd8;--rb:#fbc3dc}
@media (max-width:992px){
  html.wm-has-rail #wm-rail{display:flex;position:fixed;left:0;right:0;bottom:0;height:calc(56px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);z-index:30;background:linear-gradient(180deg,var(--ra),var(--rb));box-shadow:inset 0 1px 0 rgba(255,255,255,.18);overflow:hidden}
  html[data-theme=dark].wm-has-rail #wm-rail{background:linear-gradient(180deg,color-mix(in srgb,var(--ra) 48%,#14161f),color-mix(in srgb,var(--rb) 48%,#14161f))}
  #wm-rail a{flex:1;min-width:0;height:56px;display:grid;place-items:center;color:#fff;text-decoration:none;opacity:1}
  #wm-rail a svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  #wm-rail a:hover,#wm-rail a:active{background:rgba(255,255,255,.16)}
  #wm-rail a[aria-current=page]{background:rgba(40,50,120,.11)}
  html.wm-has-rail #app{height:calc(100% - 56px - env(safe-area-inset-bottom))}
}

/* ── 왼쪽 rail(넓은 화면): 사이드바 왼쪽에 앱 이동 버튼 줄. 새 화면의 rail 과 같은 모양. classic-design.js 가 만든다. ── */
#wm-rail .wm-sp{display:none}
@media (min-width:993px){
  html.wm-has-rail #wm-rail{display:flex;flex-direction:column;align-items:center;position:fixed;left:0;top:0;bottom:0;width:60px;z-index:5;padding:0 0 12px;box-sizing:border-box;
    background:linear-gradient(180deg,var(--ra),var(--rb));box-shadow:inset -1px 0 0 rgba(255,255,255,.18);overflow:hidden auto;scrollbar-width:none}
  html[data-theme=dark].wm-has-rail #wm-rail{background:linear-gradient(180deg,color-mix(in srgb,var(--ra) 48%,#14161f),color-mix(in srgb,var(--rb) 48%,#14161f))}
  #wm-rail a{width:100%;height:64px;flex:none;display:grid;place-items:center;color:#fff;text-decoration:none}
  #wm-rail a svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  #wm-rail a:hover{background:rgba(255,255,255,.16)}
  #wm-rail a[aria-current=page]{background:rgba(40,50,120,.11)}
  #wm-rail .wm-sp{display:block;flex:1;min-height:8px}
  #wm-rail a.wm-b{width:36px;height:36px;margin-top:8px;border:1.5px solid rgba(255,255,255,.65);border-radius:8px;box-sizing:border-box}
  #wm-rail a.wm-b svg{width:17px;height:17px}
  #wm-rail a.wm-b[aria-current=page]{background:rgba(255,255,255,.3)}
  #wm-rail a:focus-visible{outline:2px solid #fff;outline-offset:-3px}
  html.wm-has-rail #app{margin-left:60px;width:calc(100% - 60px)}
  /* rail 이 색 띠 역할을 하므로 사이드바 왼쪽의 얇은 색 띠는 뺀다 */
  html.wm-has-rail .sidebar.sidebar{background-size:0 0,auto,auto}
}

/* ── 상단 헤더(새 모양): [접기] [검색] …… [도구 묶음] [사용자]. 순서는 order 로 잡는다(기존 요소는 그대로 두고 자리만 바꾼다). ── */
html.wm-hdr{--header-h:64px}
html.wm-hdr .top-header.top-header{background:var(--surface);border-bottom:1px solid var(--border);gap:10px;padding:0 16px}
html.wm-hdr .top-header>.top-menu{display:none}
html.wm-hdr .top-header>button.header-icon-link:not(:first-child){display:none}   /* 밝기 버튼은 디자인 테마 버튼 안으로 옮겼다 */
html.wm-hdr .top-header>button.header-icon-link:first-child{order:1;width:40px;height:40px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--muted)}
html.wm-hdr .top-header>button.header-icon-link:first-child:hover{background:var(--surface-2);color:var(--text)}
html.wm-hdr .top-header>button.header-icon-link:first-child svg{display:none}
html.wm-hdr .top-header>button.header-icon-link:first-child::before{content:"";width:17px;height:14px;box-sizing:border-box;border:1.6px solid currentColor;border-radius:4px;background:linear-gradient(currentColor,currentColor) 4px 0/1.6px 100% no-repeat}
html.wm-hdr .top-header>.search{order:2;flex:1 1 220px;max-width:520px;margin-left:0}
html.wm-hdr .top-header>.search input{height:40px;border-radius:10px;background:var(--surface-2);padding-right:46px;font-size:12.5px}
html.wm-hdr .top-header>.search input:focus{background:var(--surface)}
html.wm-hdr .top-header>.search::after{content:"/";position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:10px;line-height:1.6;color:var(--muted);border:1px solid var(--border);background:var(--surface);border-radius:6px;padding:0 9px;pointer-events:none}
html.wm-hdr .top-header>.search:focus-within::after{opacity:.45}
#wm-sd{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:6px;z-index:60}
#wm-sd[hidden]{display:none}
#wm-sd button{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:6px;background:none;color:var(--text);font:inherit;font-size:13px;text-align:left;cursor:pointer}
#wm-sd button small{color:var(--muted);font-size:11.5px}
#wm-sd button:hover,#wm-sd button[aria-selected=true]{background:var(--accent-soft);color:var(--accent)}
/* 도구 묶음 */
#wm-tcl{order:3;margin-left:auto;flex:none;display:flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
#wm-tcl .wm-tw{position:relative}
#wm-tcl .wm-tw>button{width:36px;height:36px;padding:0;border:1px solid var(--border);border-radius:8px;background:none;display:grid;place-items:center;color:var(--muted);position:relative;cursor:pointer}
#wm-tcl .wm-tw>button:hover,#wm-tcl .wm-tw>button[aria-expanded=true]{background:var(--accent-soft);color:var(--accent);border-color:transparent}
#wm-tcl svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#wm-tcl .wm-ko{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);font:700 8.5px/13px system-ui,sans-serif;font-style:normal;letter-spacing:.03em;color:#fff;background:#4a90e8;border-radius:4px;padding:0 4px}
#wm-tcl .wm-nb{position:absolute;top:-9px;right:-9px;min-width:20px;height:20px;box-sizing:border-box;border-radius:99px;background:var(--danger);color:#fff;font:700 11px/16px system-ui,sans-serif;font-style:normal;text-align:center;padding:0 5px;border:2px solid var(--surface)}
#wm-tcl .wm-nb[hidden],#wm-tcl .wm-pp[hidden]{display:none}
#wm-tcl .wm-pp{position:absolute;right:0;top:calc(100% + 12px);min-width:220px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:10px;z-index:60;color:var(--text);font-size:13px}
#wm-tcl .wm-pph{font-size:12px;font-weight:700;color:var(--muted);padding:2px 4px 8px}
#wm-tcl #wm-p-apps{padding:0}
#wm-tcl .wm-hh2{padding:10px 12px 4px}#wm-tcl .wm-hh2 b{display:block;font-size:13.5px}#wm-tcl .wm-hh2 span{font-size:11.5px;color:var(--muted)}
#wm-tcl .wm-tiles{display:grid;grid-template-columns:repeat(3,74px);gap:2px;padding:2px 8px 8px}
#wm-tcl .wm-ap{display:grid;justify-items:center;gap:5px;padding:8px 2px 7px;border-radius:10px;text-decoration:none;color:var(--text);font-size:11.5px;text-align:center;transition:background .12s,transform .12s}
#wm-tcl .wm-ap .wm-ti{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,var(--ca,#8aa4f5),var(--cb,#b9c4fa));box-shadow:0 2px 6px rgba(60,70,140,.18)}
#wm-tcl .wm-ap .wm-ti svg{width:18px;height:18px;color:#fff;stroke:#fff;fill:none;stroke-width:1.6}
#wm-tcl .wm-ap:hover{background:var(--surface-2);transform:translateY(-1px)}
#wm-tcl .wm-ap[aria-current=page]{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent)}
#wm-tcl .wm-ap-home{--ca:#7a8cf0;--cb:#a9b4f8}#wm-tcl .wm-ap-mail{--ca:#5b8def;--cb:#8fb4f7}#wm-tcl .wm-ap-contacts{--ca:#9a7af0;--cb:#c1aaf8}#wm-tcl .wm-ap-drive{--ca:#3fa7e8;--cb:#7cc9f2}#wm-tcl .wm-ap-calendar{--ca:#ee6fb0;--cb:#f6a4cf}#wm-tcl .wm-ap-board{--ca:#35b27a;--cb:#6fd0a2}#wm-tcl .wm-ap-settings{--ca:#7d8aa5;--cb:#aab3c8}#wm-tcl .wm-ap-admin{--ca:#6b7388;--cb:#9aa2b5}#wm-tcl .wm-ap-server{--ca:#4a5268;--cb:#7c849b}
#wm-tcl #wm-p-apps .wm-hs{padding:0 12px;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
#wm-tcl .wm-pm{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#wm-tcl .wm-pm button,#wm-tcl .wm-list button{border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font:inherit;font-size:13px;padding:8px 10px;cursor:pointer}
#wm-tcl .wm-pm button[aria-pressed=true],#wm-tcl .wm-list button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:700}
#wm-tcl .wm-list{display:grid;gap:6px}
#wm-tcl .wm-list button{display:flex;justify-content:space-between;align-items:center;text-align:left}
#wm-tcl .wm-list button small{font-size:11.5px;font-weight:400;color:var(--muted)}
#wm-tcl .wm-list button:disabled{opacity:.55;cursor:default}
#wm-tcl .wm-ppl{display:block;margin-top:10px;padding:8px 4px 2px;border-top:1px solid var(--border);font-size:12.5px;color:var(--accent);text-decoration:none}
#wm-tcl .wm-none{margin:0;padding:10px 4px;color:var(--muted)}
#wm-tcl .wm-notes{display:grid;gap:4px;width:300px;max-height:320px;overflow:auto}
#wm-tcl .wm-notes>div{padding:8px;border-radius:8px}
#wm-tcl .wm-notes>div:hover{background:var(--surface-2)}
#wm-tcl .wm-notes b{display:block;font-size:13px}
#wm-tcl .wm-notes small{color:var(--muted);font-size:11.5px}
#wm-tcl .wm-notes p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
#wm-tcl .wm-nrow{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:8px;text-decoration:none;color:var(--text);white-space:nowrap}
#wm-tcl .wm-nrow:hover{background:var(--surface-2)}
#wm-tcl .wm-nrow i{width:8px;height:8px;border-radius:50%;background:var(--danger);flex:none}
/* 사용자: 알약 모양(아바타 · 이름 · 아이디). 앱 설치 버튼은 알약 오른쪽 끝에 겹쳐 놓는다 */
html.wm-hdr .top-header>.user-menu{order:4}
html.wm-hdr .top-header .user-btn{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-content:center;column-gap:9px;height:44px;max-width:240px;padding:0 44px 0 5px;border:1px solid var(--border);border-radius:99px;background:var(--surface);text-align:left;line-height:1.25}
html.wm-hdr .top-header:not(:has(>.install)) .user-btn{padding-right:14px}
html.wm-hdr .top-header .user-btn:hover{background:var(--surface-2)}
html.wm-hdr .top-header .user-btn svg{display:none}
html.wm-hdr .top-header .user-btn::before{content:attr(data-i);grid-row:1/3;grid-column:1;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:700;
  background:radial-gradient(circle at 82% 82%,#34c37a 0 3.5px,#fff 3.500px 5.500px,transparent 6px),linear-gradient(135deg,#f3b06a,#de6f3f)}
html.wm-hdr .top-header .user-btn span{grid-column:2;grid-row:1;font-size:13.5px;font-weight:700}
html.wm-hdr .top-header .user-btn::after{content:attr(data-sub);grid-column:2;grid-row:2;font-size:12px;font-weight:400;color:var(--muted);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.wm-hdr .top-header>.install{order:5;margin-left:-50px;z-index:1}
html.wm-hdr .top-header>.install>.header-icon-link{width:30px;height:30px;border-radius:50%;color:var(--muted-2)}
html.wm-hdr .top-header>.install>.header-icon-link svg{width:15px;height:15px}
@media (max-width:992px){
  html.wm-hdr .top-header>.search::after{display:none}
  html.wm-hdr .top-header>.search input{padding-right:10px}
  html.wm-hdr .top-header .user-btn{grid-template-columns:auto;padding:0 5px}
  html.wm-hdr .top-header .user-btn span,html.wm-hdr .top-header .user-btn::after{display:none}
  html.wm-hdr .top-header>.install{display:none}
}
@media (max-width:700px){#wm-tcl .wm-mh{display:none}}

/* ── 편의 기능: 목록 가독성·줄 간격, 검색·툴바 정리, 사이드바 정리, 줄 빠른 동작, 단축키 도움말. classic-design.js 와 짝이다. ── */
#wm-tcl .wm-pm3{grid-template-columns:1fr 1fr 1fr}
/* 메일 목록: 줄 강조, 넓은 화면에서 보낸이 열을 좁혀 제목과 붙인다, 줄 간격 선택 */
html .mail .list tbody tr:hover>td{background:var(--surface-2)}
html .mail .list tbody tr[data-wm-cur]>td{background:var(--accent-soft)}
html .mail .list tbody tr[data-wm-cur]>td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
@media (min-width:993px){
  html .mail .list .c-from{width:200px}
  html[data-wm-density=compact] .mail .list tbody td{padding-top:.3rem;padding-bottom:.3rem}
  html[data-wm-density=comfortable] .mail .list tbody td{padding-top:.85rem;padding-bottom:.85rem}
}
/* 목록 위 검색: 기간·대상 고르기는 검색어 칸을 누를 때(또는 값을 골라 둔 동안)만 보인다 */
html .mail .find:not(:focus-within)>select:not(:has(option:not(:first-child):checked)){display:none}
/* 툴바: 메일을 고르기 전에는 쓸 수 없는 버튼을 감춘다 */
html .mail .bar>.btn:disabled,html .mail .bar>select:disabled{display:none}
html .mail .bar:has(>.btn.danger:disabled)>select[aria-label="이동할 편지함"]{display:none}
/* 줄 빠른 동작 */
.wm-rq{flex:none;width:22px;height:22px;padding:0;border:0;border-radius:4px;background:none;color:var(--muted-2);cursor:pointer;display:inline-grid;place-items:center;opacity:0}
.wm-rq svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
tr:hover .wm-rq,.wm-rq:focus-visible{opacity:1}
.wm-rq:hover{color:var(--accent);background:var(--accent-soft)}
.wm-rq[data-wm-rq=del]:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 14%,transparent)}
@media (max-width:992px){.wm-rq{display:none}}
/* 사이드바: 도움말 접기, 아래 사용량 */
.sidebar-nav-group[data-wm-fold]>.group-title{cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.sidebar-nav-group[data-wm-fold]>.group-title::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-right:6px;opacity:.7}
.sidebar-nav-group[data-wm-fold=closed]>.group-title::after{transform:rotate(-45deg)}
.sidebar-nav-group[data-wm-fold=closed]>:not(.group-title){display:none}
html.wm-quota.wm-hdr .sidebar-footer .user-profile{display:none}
#wm-quota{padding:8px 10px;font-size:12px;color:var(--sidebar-color-muted)}
#wm-quota>div:first-child{display:flex;justify-content:space-between;margin-bottom:6px}
#wm-quota b{font-weight:600;color:var(--sidebar-color)}
#wm-quota .wm-bar{height:6px;border-radius:99px;background:color-mix(in srgb,var(--sidebar-color) 14%,transparent);overflow:hidden}
#wm-quota .wm-bar i{display:block;height:100%;border-radius:99px;background:var(--accent)}
#wm-quota .wm-bar[data-full] i{background:var(--danger)}
.collapsed #wm-quota{display:none}
@media (max-width:992px){html.wm-quota.wm-hdr .sidebar-footer .user-profile{display:flex}#wm-quota{display:none}}
/* 단축키 도움말 */
#wm-help{position:fixed;inset:0;z-index:2000;background:rgba(20,22,31,.45);display:grid;place-items:center;padding:16px}
#wm-help .wm-help-box{position:relative;width:min(420px,100%);max-height:90vh;overflow:auto;background:var(--surface);color:var(--text);border-radius:14px;box-shadow:var(--shadow-lg);padding:20px 22px}
#wm-help h3{margin:0 0 12px;font-size:16px}
#wm-help .wm-help-x{position:absolute;right:12px;top:12px;width:30px;height:30px;border:1px solid var(--border);border-radius:8px;background:none;color:var(--muted);cursor:pointer}
#wm-help .wm-ksh{margin:14px 0 8px;font-size:12px;font-weight:700;color:var(--muted)}
#wm-help dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:13px;margin:0}
#wm-help dt{white-space:nowrap}
#wm-help dd{margin:0;color:var(--muted);align-self:center}
#wm-help kbd{font:600 12px/1 ui-monospace,monospace;border:1px solid var(--border);border-radius:5px;padding:3px 7px;background:var(--surface-2)}

/* ── 캘린더(새 모양): 새 화면 캘린더와 같은 구성. classic-design.js 의 '캘린더' 블록이 왼쪽 사이드바를 채운다. ── */
html.wm-cal .side-btns,html.wm-cal .quick,html.wm-cal .sidebar-nav{display:none}
html.wm-cal.wm-hdr .content{padding:0}
html.wm-cal .collapsed #wm-calside{display:none}
#wm-calside{flex:1;min-height:0;overflow:auto;padding:14px 14px 10px;display:flex;flex-direction:column;gap:12px}
#wm-calside .wm-cs-add{width:100%;justify-content:center;height:38px}
#wm-calside .wm-mini header{display:flex;align-items:center;margin-bottom:6px}
#wm-calside .wm-mini header .wm-mt{flex:1;text-align:left;border:0;background:none;color:var(--sidebar-color);font:inherit;font-size:13px;font-weight:600;padding:2px 0;cursor:pointer}
#wm-calside .wm-mini header button:not(.wm-mt){width:24px;height:24px;border:0;border-radius:6px;background:none;color:var(--sidebar-color-muted);font-size:17px;line-height:1;cursor:pointer}
#wm-calside .wm-mini header button:not(.wm-mt):hover{background:rgba(255,255,255,.55);color:var(--sidebar-color)}
#wm-calside .wm-mini>div{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:2px 0}
#wm-calside .wm-mh{font-size:11px;font-weight:600;color:var(--sidebar-color-muted);padding:3px 0}
#wm-calside .wm-mh.sun,#wm-calside .wm-md.sun{color:#ef7d57}
#wm-calside .wm-md{border:0;background:none;border-radius:6px;padding:5px 0;font:inherit;font-size:11.5px;color:var(--sidebar-color);cursor:pointer}
#wm-calside .wm-md.o{opacity:.4}
#wm-calside .wm-md:hover{background:rgba(255,255,255,.6)}
#wm-calside .wm-md.t{background:var(--accent-soft);color:var(--accent);font-weight:700;opacity:1}
#wm-calside .wm-md.s:not(.t){box-shadow:inset 0 0 0 1.5px var(--accent)}
#wm-calside .wm-all{display:flex;align-items:center;gap:8px;border:0;border-radius:8px;background:none;color:var(--sidebar-color);font:inherit;font-size:13px;padding:8px 10px;text-align:left;cursor:pointer}
#wm-calside .wm-all.on{background:var(--sidebar-active-bg);color:var(--sidebar-active-color);font-weight:700}
#wm-calside svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
#wm-calside .wm-gh{display:flex;align-items:center;gap:8px;padding:2px 10px 6px;font-size:12px;color:var(--sidebar-color)}
#wm-calside .wm-gh b{flex:1;font-weight:600}
#wm-calside .wm-gh button{width:22px;height:22px;border:0;border-radius:6px;background:none;color:var(--sidebar-color-muted);font-size:15px;cursor:pointer}
#wm-calside .wm-gh button:hover{background:rgba(255,255,255,.55)}
#wm-calside .wm-grp label{display:flex;align-items:center;gap:10px;padding:5px 10px 5px 14px;font-size:12px;color:var(--sidebar-color);cursor:pointer}
#wm-calside .wm-grp input{width:16px;height:16px;margin:0;flex:none}
/* 본문 */
html.wm-cal .page.cal{padding:0;max-width:none;width:100%;gap:0}
html.wm-cal .page.cal>.page-head{display:none}
html.wm-cal .page.cal>.kinds{display:none}
html.wm-cal .page.cal>.bar{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;margin:0;padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--border)}
html.wm-cal .page.cal>.bar>.btn.primary{font-size:0;width:34px;height:34px;padding:0;border:0;border-radius:0;background:none;color:var(--muted);box-shadow:none;margin-right:6px;padding-right:12px;width:auto;border-right:1px solid var(--border)}
html.wm-cal .page.cal>.bar>.btn.primary svg{width:18px;height:18px}
html.wm-cal .page.cal>.bar>.btn.primary:hover{color:var(--accent)}
html.wm-cal .page.cal>.bar>.btn.sm{border:0;background:none;color:var(--accent);font-weight:700;box-shadow:none}
html.wm-cal .page.cal>.bar>.btn.sm:hover{background:var(--accent-soft)}
html.wm-cal .page.cal>.bar .icon-btn{color:var(--muted)}
html.wm-cal .page.cal>.bar .jump{display:none}
html.wm-cal .page.cal>.bar .ttl{font-size:1rem;margin:0 8px}
html.wm-cal .page.cal>.bar .vseg{margin-left:auto;border-radius:8px}
html.wm-cal .page.cal .seg button.on{background:var(--accent);color:#fff}
html.wm-cal .page.cal>.card.grid{border:0;border-radius:0;box-shadow:none;background:var(--surface)}
html.wm-cal .page.cal .dow{background:var(--surface);color:var(--muted);font-weight:400;font-size:.78rem;padding:9px 0}
html.wm-cal .page.cal .dow.sun{color:#ef7d57}
html.wm-cal .page.cal .dow.sat{color:var(--muted)}
html.wm-cal .page.cal .cell{min-height:112px;padding:6px 8px}
html.wm-cal .page.cal .cell .day b{order:0;min-width:0;height:auto;padding:2px 5px;border-radius:5px;font-weight:400;font-size:.78rem;color:var(--text)}
html.wm-cal .page.cal .cell .day .lunar,html.wm-cal .page.cal .cell .day .hol{order:1}
html.wm-cal .page.cal .cell .day .spacer{order:2;flex:1}
html.wm-cal .page.cal .cell .day .addday{order:3}
html.wm-cal .page.cal .cell.sun .day b{color:#ef7d57}
html.wm-cal .page.cal .cell.sat .day b{color:var(--text)}
html.wm-cal .page.cal .cell.today .day b{background:var(--accent-soft);color:var(--accent);font-weight:700}
html.wm-cal .page.cal .cell.sel{box-shadow:none}
html.wm-cal .page.cal .cell.sel:not(.today) .day b{box-shadow:inset 0 0 0 1.5px var(--accent)}
html.wm-cal .page.cal .cell.out{background:var(--surface-2)}
html.wm-cal .page.cal .ev,html.wm-cal .page.cal .tev{border:0;border-radius:3px;background:#5b6cf0;color:#fff;font-size:.72rem;padding:0 6px}
html.wm-cal .page.cal .ev .t,html.wm-cal .page.cal .tev .t{color:rgba(255,255,255,.85)}
html.wm-cal .page.cal .ev.k1,html.wm-cal .page.cal .tev.k1{background:#2f9e63}
html.wm-cal .page.cal .ev.k2,html.wm-cal .page.cal .tev.k2{background:#c9457a}
html.wm-cal .page.cal .ev.k3,html.wm-cal .page.cal .tev.k3{background:#d9663f}
html.wm-cal .page.cal .ev.k4,html.wm-cal .page.cal .tev.k4{background:#a35fd0}
html.wm-cal .page.cal .ev.k5,html.wm-cal .page.cal .tev.k5{background:#6b7280}
html.wm-cal .page.cal .dot.d0,html.wm-cal .page.cal .kb0{background-color:#5b6cf0;border-left-color:#5b6cf0}
html.wm-cal .page.cal .dot.d1,html.wm-cal .page.cal .kb1{background-color:#2f9e63;border-left-color:#2f9e63}
html.wm-cal .page.cal .dot.d2,html.wm-cal .page.cal .kb2{background-color:#c9457a;border-left-color:#c9457a}
html.wm-cal .page.cal .dot.d3,html.wm-cal .page.cal .kb3{background-color:#d9663f;border-left-color:#d9663f}
html.wm-cal .page.cal .dot.d4,html.wm-cal .page.cal .kb4{background-color:#a35fd0;border-left-color:#a35fd0}
html.wm-cal .page.cal .dot.d5,html.wm-cal .page.cal .kb5{background-color:#6b7280;border-left-color:#6b7280}
html.wm-cal .page.cal .agenda{margin:0;border-radius:0;border-width:1px 0 0;box-shadow:none}
/* 분류 체크를 끈 일정은 화면에서 숨긴다 */
html.wm-k0off .page.cal .ev.k0,html.wm-k0off .page.cal .tev.k0,html.wm-k0off .page.cal .dot.d0,html.wm-k0off .page.cal .alist .kb0,
html.wm-k1off .page.cal .ev.k1,html.wm-k1off .page.cal .tev.k1,html.wm-k1off .page.cal .dot.d1,
html.wm-k2off .page.cal .ev.k2,html.wm-k2off .page.cal .tev.k2,html.wm-k2off .page.cal .dot.d2,
html.wm-k3off .page.cal .ev.k3,html.wm-k3off .page.cal .tev.k3,html.wm-k3off .page.cal .dot.d3,
html.wm-k4off .page.cal .ev.k4,html.wm-k4off .page.cal .tev.k4,html.wm-k4off .page.cal .dot.d4,
html.wm-k5off .page.cal .ev.k5,html.wm-k5off .page.cal .tev.k5,html.wm-k5off .page.cal .dot.d5{display:none}

/* ── 드라이브(끼워 넣기): 구 화면에는 드라이브가 없어, 왼쪽 메뉴 띠 오른쪽 전체에 신 화면 드라이브를 보여 준다. classic-design.js 가 만든다. ── */
#wm-embed{position:fixed;left:60px;top:0;right:0;bottom:0;z-index:4;background:var(--bg)}
#wm-embed iframe{display:block;width:100%;height:100%;border:0}
@media (max-width:992px){#wm-embed{left:0;bottom:calc(56px + env(safe-area-inset-bottom))}}

/* ── 주소록(새 모양): 새 화면 주소록과 같은 구성. classic-design.js 의 '주소록' 블록이 왼쪽 사이드바를 채운다. ── */
html.wm-ct .side-btns,html.wm-ct .quick,html.wm-ct .sidebar-nav{display:none}
html.wm-ct.wm-hdr .content{padding:0}
html.wm-ct .collapsed #wm-ctside{display:none}
#wm-ctside{flex:1;min-height:0;overflow:auto;padding:14px 0 10px;display:flex;flex-direction:column;gap:10px}
#wm-ctside .wm-ct-btns{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 14px}
#wm-ctside .wm-ct-btns .btn{height:34px;justify-content:center;border-radius:0}
#wm-ctside .wm-ct-btns .btn:first-child{border-radius:8px 0 0 8px}
#wm-ctside .wm-ct-btns .btn:last-child{border-radius:0 8px 8px 0;border-left:1px solid rgba(255,255,255,.2)}
#wm-ctside .wm-ct-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--sidebar-border);border-bottom:1px solid var(--sidebar-border);margin:4px 14px 0}
#wm-ctside .wm-ct-tabs button{border:0;background:none;padding:10px 0;font:inherit;font-size:12px;color:var(--sidebar-color-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
#wm-ctside .wm-ct-tabs button[aria-selected=true]{color:var(--sidebar-color);font-weight:700;background:rgba(255,255,255,.5);border-bottom-color:var(--accent)}
#wm-ctside .wm-ct-n{display:flex;align-items:center;gap:8px;border:0;border-radius:8px;background:none;color:var(--sidebar-color);font:inherit;font-size:13px;padding:8px 10px;margin:0 10px;text-align:left;cursor:pointer}
#wm-ctside .wm-ct-n:hover{background:rgba(255,255,255,.55)}
#wm-ctside .wm-ct-n.on{background:var(--sidebar-active-bg);color:var(--sidebar-active-color);font-weight:700}
#wm-ctside .wm-ct-g{padding-left:30px;font-size:12.5px}
#wm-ctside svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
#wm-ctside .wm-ct-gh{display:flex;align-items:center;padding:6px 20px 0 20px;font-size:11px;color:var(--sidebar-color-muted)}
#wm-ctside .wm-ct-gh b{flex:1;font-weight:600}
#wm-ctside .wm-ct-gh button{width:22px;height:22px;border:0;border-radius:6px;background:none;color:var(--sidebar-color-muted);font-size:15px;cursor:pointer}
#wm-ctside .wm-ct-gh button:hover{background:rgba(255,255,255,.55)}
#wm-ctside .wm-ct-none{margin:2px 20px;font-size:11.5px;color:var(--sidebar-color-muted)}
/* 본문 */
html.wm-ct .book{display:block}
html.wm-ct .book>aside.tree{display:none}
html.wm-ct .book>.main{position:relative;display:flex;flex-direction:column;min-width:0;width:100%;height:100%;box-sizing:border-box}
html.wm-ct .book>.main>.bar>.btn.primary{display:none}
html.wm-ct .book>.main>.initials button{border:0;background:none;box-shadow:none;border-radius:5px;padding:3px 8px;font-size:.72rem;color:var(--muted)}
html.wm-ct .book>.main>.initials button:hover{background:var(--accent-soft)}
html.wm-ct .book>.main>.initials button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
html.wm-ct .book>.main .tbl thead{display:none}
html.wm-ct .book>.main .tbl td{padding:9px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
html.wm-ct .book>.main .tbl td:nth-child(3),html.wm-ct .book>.main .tbl td:nth-child(4){color:var(--muted);font-size:.8rem}
html.wm-ct .book>.main .tbl tbody tr:hover td{background:var(--surface-2)}
html.wm-ct .book>.main .tbl td strong[data-i]{display:inline-flex;align-items:center;gap:10px;font-weight:700}
html.wm-ct .book>.main .tbl td strong[data-i]::before{content:attr(data-i);display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:hsl(var(--h,150) 50% 52%);color:#fff;font-size:11px;font-weight:700;flex:none}
html.wm-ct .book>.main .tbl td a{color:var(--muted)}
/* 도구 묶음: 알림 지우기·언어 */
#wm-tcl .wm-nt{display:grid;gap:2px;white-space:normal;max-width:220px}#wm-tcl .wm-nt small{color:var(--muted);font-size:11.5px}
#wm-tcl .wm-nx{margin-left:auto;border:0;background:none;color:var(--muted);cursor:pointer;padding:2px 6px;border-radius:6px}#wm-tcl .wm-nx:hover{background:var(--surface-2);color:var(--text)}
/* 도메인 관리 메뉴(새 모양): 소제목 아래 짧은 이름으로 묶는다. 순서·소제목은 classic-design.js 가 data-wm-o / data-wm-g 로 달아 준다 */
html.wm-dsb .sidebar-nav-group{display:flex;flex-direction:column}
html.wm-ssb .sidebar-nav-group{display:flex;flex-direction:column}
html.wm-dsb .sidebar-nav-group .group-title{display:none}
html.wm-ssb .sidebar-nav-group .group-title{display:none}
html.wm-dsb .sidebar-nav-group a.nav-link{order:99;position:relative}
html.wm-ssb .sidebar-nav-group a.nav-link{order:99;position:relative}
html.wm-dsb .sidebar-nav-group a.nav-link[data-wm-o="10"]{order:10}html.wm-dsb .sidebar-nav-group a.nav-link[data-wm-o="11"]{order:11}html.wm-dsb .sidebar-nav-group a.nav-link[data-wm-o="12"]{order:12}html.wm-dsb .sidebar-nav-group a.nav-link[data-wm-o="13"]{order:13}html.wm-dsb .sidebar-nav-group a.nav-link[data-wm-o="14"]{order:14}
html.wm-dsb .sidebar-nav-group a.nav-link[data-wm-o="15"]{order:15}html.wm-dsb .sidebar-nav-group a.nav-link[data-wm-o="16"]{order:16}html.wm-dsb .sidebar-nav-group a.nav-link[data-wm-o="17"]{order:17}html.wm-dsb .sidebar-nav-group a.nav-link[data-wm-o="18"]{order:18}html.wm-dsb .sidebar-nav-group a.nav-link[data-wm-o="19"]{order:19}
html.wm-dsb .sidebar-nav-group a.nav-link[data-wm-o="20"]{order:20}html.wm-dsb .sidebar-nav-group a.nav-link[data-wm-o="30"]{order:30}html.wm-dsb .sidebar-nav-group a.nav-link[data-wm-o="31"]{order:31}html.wm-dsb .sidebar-nav-group a.nav-link[data-wm-o="40"]{order:40}
html.wm-dsb .sidebar-nav-group a.nav-link[data-wm-o="50"]{order:50}html.wm-dsb .sidebar-nav-group a.nav-link[data-wm-o="51"]{order:51}
html.wm-dsb .sidebar-nav-group a.nav-link[data-wm-g]{margin-top:28px;overflow:visible}
html.wm-ssb .sidebar-nav-group a.nav-link[data-wm-g]{margin-top:28px;overflow:visible}
html.wm-dsb .sidebar-nav-group a.nav-link[data-wm-g]::before{content:attr(data-wm-g);position:absolute;left:12px;top:-22px;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
html.wm-ssb .sidebar-nav-group a.nav-link[data-wm-g]::before{content:attr(data-wm-g);position:absolute;left:12px;top:-22px;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
html.wm-dsb .sidebar-nav-group a.nav-link[data-wm-o="10"]{margin-top:24px}
html.wm-ssb .sidebar-nav-group a.nav-link[data-wm-o="10"]{margin-top:24px}
html.wm-dsb .sidebar-nav-group a.nav-link{font-size:14px}
html.wm-ssb .sidebar-nav-group a.nav-link{font-size:14px}
/* 사이드바 아래 '단축키 보기' 버튼(사용량 아래) */
#wm-khelp{display:block;width:100%;margin-top:10px;padding:6px 0;border:1px dashed color-mix(in srgb,var(--sidebar-color) 28%,transparent);border-radius:6px;background:none;font:inherit;font-size:12px;color:var(--sidebar-color-muted);cursor:pointer}
#wm-khelp:hover{color:var(--accent);border-color:var(--accent)}
/* 왼쪽 메뉴의 '관리'(도메인 관리·메일서버관리) 묶음은 숨긴다: 왼쪽 레일의 방패·서버 아이콘으로 들어간다 */
.sidebar-nav-group[aria-label="관리"]{display:none}
/* 왼쪽 메뉴: 버튼 줄(편지쓰기·빠른 보기)과 메뉴 항목·사용량·단축키 버튼의 좌우 끝을 맞춘다 */
#wm-quota{padding-left:0;padding-right:0}
.sidebar-nav .nav-row{margin-left:10px!important;margin-right:10px!important}

/* 주소록 본문: 편지함 본문처럼 위에 제목 줄(위치·제목·검색), 그 아래 하나로 이어진 흰 카드(도구줄·초성·목록) */
html.wm-ct .book{padding:17.5px 21px;margin:0;gap:0;max-width:none;box-sizing:border-box;height:100%}
html.wm-ct .book>.main>.page-head{order:0;position:static;display:flex;align-items:center;height:auto;margin:0 0 14px;padding:0}
html.wm-ct .book>.main>.bar{order:1;margin:0;padding:8px 16px;min-height:54px;box-sizing:border-box;background:var(--surface);gap:8px;border:1px solid var(--border);border-bottom:1px solid var(--border);border-radius:12px 12px 0 0;box-shadow:0 1px 3px rgba(60,70,140,.08)}
html.wm-ct .book>.main>.bar>.btn.primary{display:none}
html.wm-ct .book>.main>.initials{order:2;display:flex;flex-wrap:wrap;gap:2px;margin:0;padding:8px 16px;background:var(--surface);border:1px solid var(--border);border-top:0;border-bottom:1px solid var(--border)}
html.wm-ct .book>.main>.initials button{border:0;background:none;box-shadow:none;border-radius:5px;padding:3px 8px;font-size:.72rem;color:var(--muted)}
html.wm-ct .book>.main>.initials button:hover{background:var(--accent-soft)}
html.wm-ct .book>.main>.initials button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
html.wm-ct .book>.main>.table-wrap,html.wm-ct .book>.main>.empty{order:3;flex:1 1 auto;margin:0;background:var(--surface);border:1px solid var(--border);border-top:0;border-radius:0 0 12px 12px;box-shadow:0 1px 3px rgba(60,70,140,.08);overflow:auto}
html.wm-ct .book>.main>.empty{padding:48px 16px;text-align:center;color:var(--muted)}
/* 캘린더 본문: 편지함 본문처럼 위에 제목 줄(위치·제목), 그 아래 도구줄·달력·일정 목록이 하나로 이어진 흰 카드 */
html.wm-cal .page.cal{padding:17.5px 21px;box-sizing:border-box}
html.wm-cal .page.cal>.page-head{display:flex;align-items:center;margin:0 0 14px;padding:0}
html.wm-cal .page.cal>.page-head>*:not(:first-child){display:none}
html.wm-cal .page.cal>.bar{border:1px solid var(--border);border-radius:12px 12px 0 0;box-shadow:0 1px 3px rgba(60,70,140,.08)}
html.wm-cal .page.cal>.card.grid{border:1px solid var(--border);border-top:0;border-radius:0}
html.wm-cal .page.cal>.card.agenda{border:1px solid var(--border);border-top:1px solid var(--border);border-radius:0 0 12px 12px;box-shadow:0 1px 3px rgba(60,70,140,.08)}
/* 도메인 관리 현황(새 모양): 원래 숫자 카드는 숨기고 새 현황을 그린다 */
html.wm-ovp .page>.stat-grid{display:none}
#wm-ov{display:block}
#wm-ov .wm-ovg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
#wm-ov .wm-ovt{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);text-align:left;cursor:pointer;font:inherit;color:var(--text);box-shadow:0 1px 3px rgba(60,70,140,.06)}
#wm-ov .wm-ovt:hover{border-color:var(--accent)}
#wm-ov .wm-ovt span{font-size:12.5px;color:var(--muted)}#wm-ov .wm-ovt b{font-size:26px;line-height:1.25;font-weight:700}#wm-ov .wm-ovt small{font-size:12px;color:var(--muted)}
#wm-ov .wm-ovt.warn{border-color:#e0a100}#wm-ov .wm-ovt.warn b{color:#c98a00}#wm-ov .wm-ovt.bad{border-color:var(--danger)}#wm-ov .wm-ovt.bad b{color:var(--danger)}#wm-ov .wm-ovt.ok b{color:#1f9d63}
#wm-ov .wm-ov2{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:16px;margin-bottom:16px;align-items:stretch}
#wm-ov .wm-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;box-shadow:0 1px 3px rgba(60,70,140,.06)}
#wm-ov .wm-card h3{font-size:16px;margin:0 0 4px}#wm-ov .wm-card h3 a{float:right;font-size:12.5px;font-weight:400;color:var(--accent);text-decoration:none}
#wm-ov .wm-card>p{color:var(--muted);font-size:13px;margin:0 0 12px}
#wm-ov .wm-al{display:flex;align-items:center;gap:8px;width:100%;padding:10px 6px;border:0;border-top:1px solid var(--border);background:none;text-align:left;font:inherit;font-size:13.5px;color:var(--text);cursor:pointer}
#wm-ov .wm-al:hover{background:var(--surface-2)}#wm-ov .wm-al small{margin-left:auto;color:var(--accent);white-space:nowrap}#wm-ov .wm-al.ok{cursor:default;color:var(--muted)}#wm-ov .wm-al.ok:hover{background:none}
#wm-ov .wm-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none;background:var(--border)}#wm-ov .wm-dot.ok{background:#2f9e63}#wm-ov .wm-dot.warn{background:#e0a100}#wm-ov .wm-dot.bad{background:var(--danger)}
#wm-ov .wm-qa{display:flex;gap:8px;flex-wrap:wrap}
#wm-ov .wm-qb{padding:7px 14px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font:inherit;font-size:13px;color:var(--text);cursor:pointer}
#wm-ov .wm-qb:hover{border-color:var(--accent);color:var(--accent)}#wm-ov .wm-qb.p{background:var(--accent);border-color:var(--accent);color:#fff}
#wm-ov .wm-tb{width:100%;border-collapse:collapse;font-size:13px}#wm-ov .wm-tb th,#wm-ov .wm-tb td{text-align:left;padding:10px 6px;border-bottom:1px solid var(--border)}#wm-ov .wm-tb th{color:var(--muted);font-weight:500}
#wm-ov .wm-pill{font-size:12px;padding:2px 10px;border-radius:99px;font-weight:600}#wm-ov .wm-pill.on{background:#dff5e6;color:#1f7a45}#wm-ov .wm-pill.off{background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}
#wm-ov .wm-li{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--border);font-size:13px}#wm-ov .wm-li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#wm-ov .wm-li small{margin-left:auto;color:var(--muted);white-space:nowrap}
#wm-ov .wm-hint{color:var(--muted);font-size:13px}
@media (max-width:1000px){#wm-ov .wm-ovg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){#wm-ov .wm-ovg{grid-template-columns:minmax(0,1fr)}}
html.wm-ovp .page>.links,html.wm-ovp .page>.stat-grid~.card{display:none}
/* 도움말 팝오버(새 화면 도움말 창과 같은 모양) */
#wm-tcl #wm-p-chat{width:340px;max-height:72vh;overflow:auto;padding:0}
#wm-tcl .wm-hh{padding:16px 18px 12px;background:linear-gradient(135deg,var(--accent-soft),transparent);border-radius:12px 12px 0 0}#wm-tcl .wm-hh b{display:block;font-size:16px}#wm-tcl .wm-hh span{font-size:12.5px;color:var(--muted)}
#wm-tcl .wm-hq{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px 6px}
#wm-tcl .wm-hq button{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);font:inherit;font-size:13px;color:var(--text);text-align:left;position:relative;cursor:pointer}
#wm-tcl .wm-hq button:hover{border-color:var(--accent);background:var(--accent-soft)}
#wm-tcl .wm-hq svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#wm-tcl .wm-hq kbd{position:absolute;right:10px;top:10px;padding:1px 6px;border:1px solid var(--border);border-radius:5px;background:var(--surface-2);font:10.5px ui-monospace,monospace;color:var(--muted)}
#wm-tcl .wm-hs{padding:12px 18px 6px;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
#wm-tcl .wm-hg{margin:0 14px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
#wm-tcl .wm-hg>*+*{border-top:1px solid var(--border)}
#wm-tcl .wm-faq summary{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:13px;cursor:pointer;list-style:none;border-radius:0}#wm-tcl .wm-faq summary::-webkit-details-marker{display:none}#wm-tcl .wm-faq summary::before{content:none}
#wm-tcl .wm-faq summary:hover{background:var(--surface-2)}
#wm-tcl .wm-fchev{width:16px;height:16px;margin-left:auto;flex:none;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}#wm-tcl .wm-faq[open] .wm-fchev{transform:rotate(180deg)}
#wm-tcl .wm-faq[open] summary{color:var(--accent);font-weight:600}
#wm-tcl .wm-faq p{margin:0;padding:0 12px 12px;color:var(--muted);font-size:12.5px;line-height:1.55}
#wm-tcl .wm-hrow{display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:13px;color:var(--text);text-decoration:none}#wm-tcl .wm-hrow:hover{background:var(--surface-2)}
#wm-tcl .wm-hrow svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}#wm-tcl .wm-hrow .wm-ar{margin-left:auto;width:14px;height:14px}
#wm-tcl .wm-hf{margin:12px 14px 14px;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:12px;color:var(--muted);line-height:1.5}#wm-tcl .wm-hf small{display:block;margin-top:2px;font-size:11.5px}
/* 구 → 새 디자인 전환 버튼 */
#wm-tcl #wm-sw .wm-new{background:#7a5af0}
/* 왼쪽 메뉴의 '도움말' 묶음은 숨긴다: 상단 도움말 버튼(?)에 같은 안내 링크가 있다 */
.sidebar-nav-group[aria-label="도움말"]{display:none}
/* 홈 위젯(새 모양): 원래 홈 본문은 숨기고 위젯 화면을 그린다 */
html.wm-hm .content>.page>.main{display:none}
html.wm-hm .content>.page>.page-head{display:none}
#wm-home{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));align-content:start}
#wm-home .wm-hc{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;min-width:0;box-shadow:0 1px 3px rgba(60,70,140,.06)}
#wm-home .wm-hc h3{font-size:15.5px;margin:0 0 10px;display:flex;align-items:center;gap:8px}
#wm-home .wm-hc h3 a{margin-left:auto;font-size:12px;font-weight:400;color:var(--accent);text-decoration:none}
#wm-home .wm-hc h3 small{font-weight:400;color:var(--muted);font-size:12px}
#wm-home .wm-hi{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px;position:relative;background:linear-gradient(135deg,var(--accent-soft),var(--surface))}
#wm-home .wm-hi .g{display:block;font-size:18px}#wm-home .wm-hi small{color:var(--muted);font-size:12.5px}
#wm-home .wm-hi>div:first-child{margin-right:auto}
#wm-home .wm-hq{display:flex;gap:8px}#wm-home .wm-hq a{display:flex;flex-direction:column;padding:6px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface);text-decoration:none;font-size:12px;color:var(--muted)}#wm-home .wm-hq a b{font-size:20px;color:var(--accent)}#wm-home .wm-hq a.z b{color:var(--muted)}
#wm-home .wm-hact{display:flex;gap:8px;flex-wrap:wrap;width:100%;order:3;padding-right:84px}
#wm-home .wm-hact a{padding:7px 14px;border:1px solid var(--border);border-radius:99px;background:var(--surface);font-size:13px;color:var(--text);text-decoration:none}#wm-home .wm-hact a:hover{border-color:var(--accent);color:var(--accent)}
#wm-home .wm-wset{position:absolute;right:14px;bottom:10px;padding:4px 10px;border:1px solid var(--border);border-radius:8px;font:inherit;font-size:12px;color:var(--muted);background:var(--surface);cursor:pointer}#wm-home .wm-wset:hover{color:var(--accent);border-color:var(--accent)}
#wm-home .wm-mr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:6px 0;border-top:1px solid var(--border);text-decoration:none;color:inherit}
#wm-home .wm-mr:hover .s,#wm-home .wm-mr:hover .w{color:var(--accent)}
#wm-home .wm-mr .w{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#wm-home .wm-mr .t{font-size:12px;color:var(--muted)}#wm-home .wm-mr .s{grid-column:1/-1;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#wm-home .wm-mr.u .w,#wm-home .wm-mr.u .s{font-weight:700;color:var(--text)}
#wm-home .wm-li{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--border);font-size:13px}#wm-home .wm-li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#wm-home .wm-li small{margin-left:auto;color:var(--muted);white-space:nowrap}
#wm-home .wm-hint{color:var(--muted);font-size:13px;margin:0}
#wm-home .wm-mt{margin-bottom:12px}#wm-home .wm-mt .l{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px}
#wm-home .wm-bar{height:8px;border-radius:99px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden}#wm-home .wm-bar i{display:block;height:100%;background:var(--accent)}
#wm-home .wm-cnts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}#wm-home .wm-cnts a{border:1px solid var(--border);border-radius:12px;padding:8px 2px;text-align:center;text-decoration:none;font-size:12px;color:var(--muted);background:var(--surface)}#wm-home .wm-cnts a b{display:block;font-size:17px;color:var(--text)}
#wm-home .wm-cn{margin-left:auto;display:flex;gap:4px}#wm-home .wm-cn button{border:1px solid var(--border);border-radius:6px;background:var(--surface);padding:2px 8px;font:inherit;font-size:12px;color:var(--muted);cursor:pointer}
#wm-home .wm-cg{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
#wm-home .wm-cg .h{font-size:12px;color:var(--muted);padding:4px 0}#wm-home .wm-cg .su{color:#ef5a5a}#wm-home .wm-cg .sa{color:#4a7be8}
#wm-home .wm-cg .d{position:relative;border:0;background:none;border-radius:8px;padding:7px 0;font:inherit;font-size:13px;color:var(--text);cursor:pointer}
#wm-home .wm-cg .d.su{color:#ef5a5a}#wm-home .wm-cg .d.sa{color:#4a7be8}#wm-home .wm-cg .d:hover{background:var(--surface-2)}
#wm-home .wm-cg .d.today{background:var(--accent);color:#fff;font-weight:700}
#wm-home .wm-cg .d i{position:absolute;left:50%;bottom:2px;width:5px;height:5px;margin-left:-2px;border-radius:50%}
@media (min-width:1300px){#wm-home{grid-template-columns:repeat(3,minmax(0,1fr))}#wm-home .wm-hc.w2{grid-column:span 2}}
#wm-wdlg{position:fixed;inset:0;z-index:80;background:rgba(20,24,40,.4);display:grid;place-items:center}
#wm-wdlg .wm-wbox{width:min(420px,calc(100vw - 24px));max-height:90vh;overflow:auto;background:var(--surface);border-radius:14px;padding:20px;box-shadow:var(--shadow)}
#wm-wdlg h3{margin:0 0 6px}#wm-wdlg p{margin:0 0 10px;color:var(--muted);font-size:12.5px}
#wm-wdlg .wm-wq{display:flex;gap:8px;align-items:center;margin-bottom:10px;font-size:13px}
#wm-wdlg .wm-wrow{display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:6px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
#wm-wdlg .wm-wrow label{flex:1;display:flex;gap:8px;align-items:center;font-size:13.5px}#wm-wdlg .wm-wrow button{width:28px;height:28px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--muted);cursor:pointer}
#wm-wdlg .wm-wa{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}#wm-wdlg .wm-wa button{padding:7px 16px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font:inherit;font-size:13px;cursor:pointer}#wm-wdlg .wm-wa .p{background:var(--accent);border-color:var(--accent);color:#fff}

/* 언어 팝오버(새 화면 언어 창과 같은 모양) */
#wm-tcl #wm-p-lang{padding:0;width:236px;min-width:0}
#wm-tcl .wm-lg2{display:grid;gap:6px;padding:4px 10px 6px}
#wm-tcl .wm-lgb{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:12px;background:var(--surface);font:inherit;text-align:left;color:var(--text);cursor:pointer}
#wm-tcl .wm-lgb:hover{border-color:var(--accent);background:var(--surface-2)}
#wm-tcl .wm-lgb[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}
#wm-tcl .wm-lgi{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font:700 11px system-ui,sans-serif;font-style:normal;letter-spacing:.03em;color:#fff;background:linear-gradient(135deg,#5b8def,#8fb4f7);flex:none}
#wm-tcl .wm-lgi-en{background:linear-gradient(135deg,#7a5af0,#a58cf5)}
#wm-tcl .wm-lgn{display:grid;line-height:1.25}#wm-tcl .wm-lgn b{font-size:13.5px}#wm-tcl .wm-lgn em{font-style:normal;font-size:11.5px;color:var(--muted)}
#wm-tcl .wm-lgb small{margin-left:auto;font-size:11px;font-weight:700;color:var(--accent);white-space:nowrap}
#wm-tcl .wm-lgh{margin:0;padding:2px 14px 12px;font-size:11.5px;color:var(--muted);line-height:1.5}
/* 왼쪽 메뉴(sidebar) 다듬기: 편지쓰기 버튼, 빠른 보기 칩, 소제목, 메뉴 줄, 사용량 카드 */
.sidebar .side-btns{padding:10px 12px 8px;gap:8px}
.sidebar .side-btns .btn{height:36px;border-radius:10px;font-weight:600;transition:transform .12s,box-shadow .12s,background .12s}
.sidebar .side-btns .btn.primary{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#fff));border:0;color:#fff;box-shadow:0 4px 10px color-mix(in srgb,var(--accent) 38%,transparent)}
.sidebar .side-btns .btn.primary:hover{transform:translateY(-1px);box-shadow:0 6px 14px color-mix(in srgb,var(--accent) 45%,transparent)}
.sidebar .side-btns .btn:not(.primary){background:#fff;border:1px solid var(--sidebar-border,var(--border))}
.sidebar .side-btns .btn:not(.primary):hover{border-color:var(--accent);color:var(--accent)}
.sidebar .quick{gap:6px;padding:0 12px 10px}
.sidebar .quick a{height:30px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid transparent;box-shadow:0 1px 2px rgba(60,70,140,.08);transition:border-color .12s,color .12s,background .12s}
.sidebar .quick a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.sidebar .group-title{display:flex;align-items:center;gap:8px;padding:12px 18px 6px;font-size:10.5px;font-weight:700;letter-spacing:.06em}
.sidebar .group-title::after{content:'';flex:1;height:1px;background:var(--sidebar-border,var(--border));opacity:.7}
.sidebar .nav-link{border-radius:10px;margin-top:1px;transition:background .12s,color .12s}
.sidebar .nav-link:not(.active):hover{background:rgba(255,255,255,.62)}
.sidebar .nav-link.active{box-shadow:0 2px 8px rgba(60,70,140,.12)}
.sidebar .nav-link.active .ic svg{color:var(--accent)}
.sidebar-footer{padding:10px 12px 12px}
.sidebar-footer #wm-quota{background:rgba(255,255,255,.58);border:1px solid var(--sidebar-border,var(--border));border-radius:12px;padding:10px 12px;box-shadow:0 1px 3px rgba(60,70,140,.06)}
.sidebar-footer #wm-quota .wm-bar{height:7px}
.sidebar-footer #wm-khelp{margin-top:10px;border-radius:8px;background:rgba(255,255,255,.4)}
.sidebar-nav{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--sidebar-color,#333) 22%,transparent) transparent}
#wm-tcl .wm-ap-track{--ca:#f09a45;--cb:#f6c087}

/* 디자인 테마 팝오버: 밝기 미리보기 카드, 줄 간격 미리보기 */
#wm-tcl #wm-p-pal{padding:0;width:264px}
#wm-tcl #wm-p-pal .wm-hs{padding:10px 16px 6px}
#wm-tcl .wm-mcg{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px}
#wm-tcl .wm-mc{position:relative;display:grid;gap:8px;padding:8px;border:1px solid var(--border);border-radius:12px;background:var(--surface);font:inherit;font-size:12.5px;color:var(--text);cursor:pointer;text-align:center}
#wm-tcl .wm-mc:hover{border-color:var(--accent)}
#wm-tcl .wm-mc[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
#wm-tcl .wm-mc em{position:absolute;right:8px;top:8px;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-style:normal;display:grid;place-items:center}
#wm-tcl .wm-mp{display:grid;gap:4px;padding:8px;height:46px;border-radius:8px;background:#eef1fb;align-content:center}
#wm-tcl .wm-mp b{display:block;height:6px;border-radius:3px;background:#c9d0ea}#wm-tcl .wm-mp b:first-child{width:60%;background:#8a99e6}
#wm-tcl .wm-mc-dark .wm-mp{background:#1f2335}#wm-tcl .wm-mc-dark .wm-mp b{background:#3a4160}#wm-tcl .wm-mc-dark .wm-mp b:first-child{background:#6f7fe0}
#wm-tcl .wm-dcg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 14px 8px}
#wm-tcl .wm-dc{display:grid;gap:6px;justify-items:center;padding:8px 4px;border:1px solid var(--border);border-radius:12px;background:var(--surface);font:inherit;font-size:12px;color:var(--text);cursor:pointer}
#wm-tcl .wm-dc:hover{border-color:var(--accent)}
#wm-tcl .wm-dc[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:700}
#wm-tcl .wm-db{display:flex;flex-direction:column;width:34px}
#wm-tcl .wm-db b{display:block;height:4px;border-radius:2px;background:currentColor;opacity:.45}
#wm-tcl .wm-db-comfortable{gap:7px}#wm-tcl .wm-db-normal{gap:4px}#wm-tcl .wm-db-compact{gap:2px}
#wm-tcl .wm-plink{margin:2px 8px 8px;border-top:1px solid var(--border);border-radius:0 0 10px 10px;padding-top:12px}
/* 관리 작업 기록(/admin/audit-trail) 표: 짧은 칸은 줄바꿈 없이 한 줄, 내용 칸이 남는 폭을 쓴다 */
html.wm-at .tbl th,html.wm-at .tbl td{white-space:nowrap;padding:9px 14px;vertical-align:middle}
html.wm-at .tbl td:nth-child(2) *,html.wm-at .tbl td:nth-child(3),html.wm-at .tbl td:nth-child(4),html.wm-at .tbl td:nth-child(5){white-space:nowrap;word-break:keep-all}
html.wm-at .tbl td:nth-child(6){white-space:normal;word-break:break-word;width:100%}
html.wm-at .tbl th:nth-child(6){width:100%}
html.wm-at .tbl td:nth-child(7){text-align:right}html.wm-at .tbl th:nth-child(7){text-align:right}