/* 메일 화면 Outlook(Fluent 2) 스타일
 *
 * 값은 마이크로소프트가 배포하는 `@fluentui/tokens` 패키지의 webLightTheme·webDarkTheme
 * 에서 그대로 가져왔다(브랜드 #0f6cbd, 중립 #242424/#616161/#d1d1d1, 모서리 4px,
 * 12/14/16/20px 글자 램프). 눈대중으로 비슷하게 만든 값이 아니다.
 *
 * 메일 화면(받은편지함·보낸편지함·메일 쓰기·발송 추적·라벨·서명)에만 입힌다.
 * 포털의 나머지 화면은 기존 디자인을 그대로 둔다 — body[data-mailui="1"] 로 가둔다.
 */

body[data-mailui="1"] {
  /* 브랜드 램프 (brandWeb 40~160) */
  --ol-brand: #0f6cbd;          /* 80 */
  --ol-brand-hover: #115ea3;    /* 70 */
  --ol-brand-pressed: #0f548c;  /* 60 */
  --ol-brand-fg: #115ea3;
  --ol-tint: #ebf3fc;           /* 160 — 선택된 줄 배경 */
  --ol-tint-hover: #cfe4fa;     /* 150 */

  /* 중립 */
  --ol-bg1: #ffffff;
  --ol-bg2: #fafafa;
  --ol-bg3: #f5f5f5;
  --ol-hover: #f5f5f5;
  --ol-fg1: #242424;
  --ol-fg2: #424242;
  --ol-fg3: #616161;
  --ol-fg4: #707070;
  --ol-stroke1: #d1d1d1;
  --ol-stroke2: #e0e0e0;
  --ol-stroke3: #f0f0f0;
  --ol-danger: #bc2f32;

  --ol-r: 4px;
  --ol-r-lg: 6px;
  --ol-shadow2: 0 0 2px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.14);
  --ol-shadow8: 0 0 2px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.14);
  --ol-shadow16: 0 0 2px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.14);

  /* Segoe UI 에는 한글이 없다 — 한글은 맑은 고딕·Apple SD Gothic 으로 이어 받는다 */
  --ol-font: 'Segoe UI', 'Malgun Gothic', 'Apple SD Gothic Neo', Pretendard,
             -apple-system, BlinkMacSystemFont, sans-serif;
}

@media (prefers-color-scheme: dark) {
  body[data-mailui="1"] {
    --ol-brand: #115ea3; --ol-brand-hover: #0f6cbd; --ol-brand-fg: #479ef5;
    --ol-tint: #0c3b5e; --ol-tint-hover: #0e4775;
    --ol-bg1: #292929; --ol-bg2: #1f1f1f; --ol-bg3: #141414;
    --ol-hover: #3d3d3d;
    --ol-fg1: #ffffff; --ol-fg2: #d6d6d6; --ol-fg3: #adadad; --ol-fg4: #999;
    --ol-stroke1: #666666; --ol-stroke2: #525252; --ol-stroke3: #3d3d3d;
  }
}

body[data-mailui="1"] #view,
body[data-mailui="1"] .viewer { font-family: var(--ol-font); }

/* ── 카드: Outlook 은 그림자 없는 평평한 판이다 ── */
body[data-mailui="1"] #view .card {
  border-radius: var(--ol-r-lg);
  border: 1px solid var(--ol-stroke3);
  box-shadow: none;
  padding: 0;
  background: var(--ol-bg1);
  overflow: hidden;
}

/* ── 명령 모음 ── */
body[data-mailui="1"] .ol-bar {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 6px 8px; border-bottom: 1px solid var(--ol-stroke3);
  background: var(--ol-bg1);
}
body[data-mailui="1"] .ol-cmd {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: transparent; color: var(--ol-fg2);
  font: 400 14px/20px var(--ol-font); cursor: pointer;
  padding: 6px 10px; border-radius: var(--ol-r);
}
body[data-mailui="1"] .ol-cmd:hover { background: var(--ol-hover); color: var(--ol-fg1); }
body[data-mailui="1"] .ol-cmd:active { background: var(--ol-stroke3); }
body[data-mailui="1"] .ol-cmd.primary {
  background: var(--ol-brand); color: #fff; font-weight: 600; padding: 6px 14px;
}
body[data-mailui="1"] .ol-cmd.primary:hover { background: var(--ol-brand-hover); color: #fff; }
body[data-mailui="1"] .ol-sep {
  width: 1px; height: 20px; background: var(--ol-stroke2); margin: 0 6px;
}
body[data-mailui="1"] .ol-spacer { flex: 1 1 auto; }

/* ── 검색 ── */
/* 기사 편집기: 본문 폭은 화면의 남은 공간으로 정하고 AI 창만 별도로 연다. */
body[data-wide="write"] #view #wr-toolbar { top: var(--wr-head,64px) !important; }
body[data-wide="write"] #wr-body { min-width: 0; max-width: 100%; overflow-x: auto; overflow-wrap: anywhere; }
body[data-wide="write"] #wr-toolbar > * { flex: 0 0 auto; }
body[data-wide="write"] #wr-grid label:has(> [data-ai]) { display: flex !important; align-items: center; flex-wrap: wrap; gap: 6px; }
body[data-wide="write"] #wr-grid [data-ai] { float: none !important; margin-left: auto; flex: none; }
body[data-wide="write"] #wr-titles button { max-width: 100%; height: auto; min-height: 32px; text-align: left; white-space: normal; overflow-wrap: anywhere; }
body[data-write-assist="docked"] .appmain { padding-right: 432px; }
body[data-write-assist="docked"] #view #wr-grid { grid-template-columns: minmax(0,1fr); }
body.wr-assist-modal { overflow: hidden; }
#wr-as-backdrop { position: fixed; inset: 0; z-index: 89; background: rgba(16,24,40,.34); }
#wr-as-backdrop[hidden] { display: none; }
#wr-as {
  position: fixed; z-index: 90; width: min(460px,100vw); height: 100vh; height: 100dvh;
  max-width: 100vw; display: flex; flex-direction: column; min-height: 0;
  background: var(--surface,#fff); color: var(--text,#111); font-size: 13.5px;
  border-left: 1px solid var(--border,#ddd); box-shadow: -8px 0 30px rgba(0,0,0,.12);
  overflow: hidden; overscroll-behavior: contain;
}
#wr-as .wr-as-header { display: flex; align-items: center; flex: none; gap: 8px; padding: max(10px,env(safe-area-inset-top)) 12px 10px; border-bottom: 1px solid var(--border,#ddd); }
#wr-as .wr-as-header b { color: var(--ol-brand-fg); white-space: nowrap; flex: none; }
#wr-as .wr-as-header .vmeta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#wr-as .wr-as-header button, #wr-as-footer button { flex: none; min-height: 36px; }
#wr-as-msgs { flex: 1 1 0; min-height: 0; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow-wrap: anywhere; }
#wr-as-msgs > * { flex-shrink: 0; min-width: 0; max-width: 100%; }
#wr-as-msgs img { max-width: 100%; }
#wr-as #wr-as-quick { flex: none; max-height: 90px; overflow: auto; }
#wr-as-footer { flex: none; min-width: 0; padding: 10px 12px max(12px,env(safe-area-inset-bottom)); border-top: 1px solid var(--border,#ddd); margin-top: 8px; }
#wr-as #wr-as-in { display: block; width: 100%; font-size: 16px !important; max-height: 20vh; max-height: 20dvh; resize: none !important; }
#wr-as-atts { max-height: 72px; overflow: auto; }
#wr-as-st { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 11px; }
@media (max-height: 600px) { #wr-as #wr-as-quick { max-height: 32px; } #wr-as-footer { padding-top: 6px; margin-top: 4px; } }
@media (max-width: 820px) {
  body[data-wide="write"] #view #wr-head { position: sticky; top: 52px; padding: 6px !important; }
  body[data-wide="write"] #wr-head > div:first-child { gap: 4px !important; }
  body[data-wide="write"] #wr-head > div:first-child > b,
  body[data-wide="write"] #wr-head > div:first-child > .badge,
  body[data-wide="write"] #wr-head > div:first-child > .vmeta { display: none; }
  body[data-wide="write"] #wr-head .ubtn { min-height: 32px; padding-left: 7px; padding-right: 7px; }
  body[data-wide="write"] #view #wr-toolbar { flex-wrap: nowrap !important; overflow-x: auto; padding: 6px !important; }
  body[data-wide="write"] #wr-toolbar .wr-tb { min-width: 36px; min-height: 36px; }
  body[data-wide="write"] #wr-body { padding: 14px 12px !important; }
  #wr-as .wr-as-header .vmeta { display: none; }
  #wr-as .wr-as-header b { flex: 1; }
}

body[data-mailui="1"] #q,
body[data-mailui="1"] .ol-search {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--ol-stroke1); border-radius: var(--ol-r);
  background: var(--ol-bg1); color: var(--ol-fg1);
  font: 400 14px/20px var(--ol-font); padding: 7px 11px; margin: 8px;
  width: calc(100% - 16px);
}
body[data-mailui="1"] #q:focus,
body[data-mailui="1"] .ol-search:focus {
  outline: none; border-color: var(--ol-brand);
  box-shadow: 0 1px 0 0 var(--ol-brand);
}

/* ── 메일함 칩 ── */
body[data-mailui="1"] #mbchips { padding: 8px 8px 0; margin: 0 !important; }
body[data-mailui="1"] .mbchip {
  border-radius: 999px; font: 400 13px/18px var(--ol-font); padding: 4px 12px;
  border-width: 1px;
}

/* ── 메일 목록 줄 ──
   Outlook 3줄 구성: 보낸사람+시각 / 제목 / 미리보기.
   안 읽은 줄은 왼쪽에 파란 막대가 서고 글자가 굵어진다. */
body[data-mailui="1"] #lst { margin: 0 !important; }
body[data-mailui="1"] .mrow {
  position: relative;
  display: flex; gap: 12px; align-items: flex-start;
  padding: 8px 12px 8px 16px;
  border-bottom: 1px solid var(--ol-stroke3);
  background: var(--ol-bg1);
  cursor: pointer;
}
body[data-mailui="1"] .mrow:hover { background: var(--ol-hover); }
body[data-mailui="1"] .mrow.sel { background: var(--ol-tint); }
body[data-mailui="1"] .mrow.sel:hover { background: var(--ol-tint-hover); }

/* 안 읽음 표시 — 점이 아니라 세로 막대(새 Outlook) */
body[data-mailui="1"] .udot {
  position: absolute; left: 5px; top: 12px; bottom: 12px;
  width: 3px; height: auto; border-radius: 2px; background: transparent;
}
body[data-mailui="1"] .mrow.unread .udot { background: var(--ol-brand); }

body[data-mailui="1"] .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  font: 600 13px/32px var(--ol-font); letter-spacing: 0;
}
body[data-mailui="1"] .mtop { gap: 6px; margin-bottom: 0; align-items: baseline; }
body[data-mailui="1"] .mfrom {
  font: 400 14px/20px var(--ol-font); color: var(--ol-fg2);
}
body[data-mailui="1"] .mrow.unread .mfrom { font-weight: 600; color: var(--ol-fg1); }
body[data-mailui="1"] .mtime {
  font: 400 12px/16px var(--ol-font); color: var(--ol-fg3); white-space: nowrap;
}
body[data-mailui="1"] .mrow.unread .mtime { color: var(--ol-brand-fg); font-weight: 600; }
body[data-mailui="1"] .msub {
  font: 400 14px/20px var(--ol-font); color: var(--ol-fg2);
  margin: 1px 0 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body[data-mailui="1"] .mrow.unread .msub { font-weight: 600; color: var(--ol-fg1); }
body[data-mailui="1"] .msnip {
  font: 400 12px/16px var(--ol-font); color: var(--ol-fg3);
}

/* 표시들 — Outlook 은 작고 조용하다 */
body[data-mailui="1"] .clip,
body[data-mailui="1"] .clabel,
body[data-mailui="1"] .dupbadge,
body[data-mailui="1"] .mbtag,
body[data-mailui="1"] .lblchip {
  font-size: 11px; line-height: 16px; border-radius: var(--ol-r);
}
body[data-mailui="1"] .phigh { color: var(--ol-danger); font-weight: 600; font-size: 11px; }

/* 줄 위에 올렸을 때 나오는 빠른 동작 — Outlook 과 같은 자리(오른쪽) */
body[data-mailui="1"] .ol-quick {
  position: absolute; right: 10px; top: 8px;
  display: none; gap: 2px; background: inherit; padding-left: 8px;
}
body[data-mailui="1"] .mrow:hover .ol-quick,
body[data-mailui="1"] .mrow:focus-within .ol-quick { display: flex; }
body[data-mailui="1"] .ol-quick button {
  border: none; background: var(--ol-bg1); color: var(--ol-fg3);
  width: 28px; height: 28px; border-radius: var(--ol-r);
  cursor: pointer; font-size: 14px; line-height: 1; display: grid; place-items: center;
  box-shadow: var(--ol-shadow2);
}
body[data-mailui="1"] .ol-quick button:hover { background: var(--ol-hover); color: var(--ol-fg1); }
body[data-mailui="1"] .ol-quick button.del:hover { color: var(--ol-danger); }

/* ── 읽기 창 ── */
body[data-mailui="1"] .viewer .vcard,
body[data-mailui="1"] #viewer .vcard {
  border-radius: var(--ol-r-lg); box-shadow: var(--ol-shadow16);
  border: 1px solid var(--ol-stroke3); background: var(--ol-bg1);
}
body[data-mailui="1"] .vsub {
  font: 600 20px/28px var(--ol-font); color: var(--ol-fg1); margin: 0 0 12px;
}
body[data-mailui="1"] .vmeta {
  font: 400 12px/18px var(--ol-font); color: var(--ol-fg3);
}
body[data-mailui="1"] .vacts { gap: 4px; margin: 12px 0; }
body[data-mailui="1"] .vbtn {
  border: 1px solid var(--ol-stroke1); background: var(--ol-bg1);
  color: var(--ol-fg2); border-radius: var(--ol-r);
  font: 600 14px/20px var(--ol-font); padding: 5px 12px;
}
body[data-mailui="1"] .vbtn:hover { background: var(--ol-hover); color: var(--ol-fg1); }
body[data-mailui="1"] .vbtn.pri {
  background: var(--ol-brand); border-color: var(--ol-brand); color: #fff;
}
body[data-mailui="1"] .vbtn.pri:hover { background: var(--ol-brand-hover); }
body[data-mailui="1"] .vbtn.del:hover { color: var(--ol-danger); border-color: var(--ol-danger); }
body[data-mailui="1"] .vbody {
  border-top: 1px solid var(--ol-stroke3); padding-top: 16px;
  font: 400 14px/22px var(--ol-font); color: var(--ol-fg1);
}
body[data-mailui="1"] .vatts { gap: 8px; margin: 12px 0; }

/* ── 메일 쓰기 — Outlook 은 칸에 테두리를 두르지 않고 밑줄만 긋는다 ── */
body[data-mailui="1"] .crow {
  border-bottom: 1px solid var(--ol-stroke3); padding: 2px 0;
}
body[data-mailui="1"] .clab {
  color: var(--ol-fg3); font: 400 14px/20px var(--ol-font);
}
body[data-mailui="1"] .crow input {
  border: none !important; background: transparent; box-shadow: none !important;
  font: 400 14px/20px var(--ol-font); color: var(--ol-fg1); padding: 8px 4px;
}
body[data-mailui="1"] .crow input:focus { outline: none; }
body[data-mailui="1"] .editor {
  border: none; padding: 14px 4px; min-height: 260px;
  font: 400 14px/22px var(--ol-font); color: var(--ol-fg1);
}
body[data-mailui="1"] .cbar {
  border-top: 1px solid var(--ol-stroke3); padding-top: 10px; gap: 6px;
}
body[data-mailui="1"] #c-send {
  background: var(--ol-brand); border-color: var(--ol-brand); color: #fff;
  border-radius: var(--ol-r); font: 600 14px/20px var(--ol-font); padding: 6px 20px;
}
body[data-mailui="1"] #c-send:hover { background: var(--ol-brand-hover); }
body[data-mailui="1"] .ubtn {
  border: 1px solid var(--ol-stroke1); background: var(--ol-bg1); color: var(--ol-fg2);
  border-radius: var(--ol-r); font: 400 14px/20px var(--ol-font); padding: 5px 12px;
}
body[data-mailui="1"] .ubtn:hover { background: var(--ol-hover); color: var(--ol-fg1); }

/* 첨부 조각 */
body[data-mailui="1"] .attchip {
  border: 1px solid var(--ol-stroke2); border-radius: var(--ol-r);
  background: var(--ol-bg2); font: 400 13px/18px var(--ol-font); color: var(--ol-fg2);
}

/* ── 좁은 화면 — Outlook 모바일은 아바타를 빼고 두 줄로 줄인다 ── */
@media (max-width: 820px) {
  body[data-mailui="1"] .mrow { padding: 8px 10px 8px 14px; gap: 10px; }
  body[data-mailui="1"] .avatar { width: 28px; height: 28px; line-height: 28px; font-size: 12px; }
  body[data-mailui="1"] .msnip { display: none; }
  body[data-mailui="1"] .ol-quick { display: none !important; }
  body[data-mailui="1"] .ol-bar { padding: 6px; }
  body[data-mailui="1"] .ol-cmd { padding: 6px 8px; font-size: 13px; }
}

/* ── 읽기 창 머리 (Outlook: 아바타 + 보낸사람 + 시각) ── */
body[data-mailui="1"] .ol-head {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 0 0 12px; border-bottom: 1px solid var(--ol-stroke3); margin-bottom: 4px;
}
body[data-mailui="1"] .ol-av { flex: none; width: 36px; height: 36px; line-height: 36px; font-size: 14px; }
body[data-mailui="1"] .ol-who { flex: 1 1 auto; min-width: 0; }
body[data-mailui="1"] .ol-name {
  font: 600 14px/20px var(--ol-font); color: var(--ol-fg1);
  overflow: hidden; text-overflow: ellipsis;
}
body[data-mailui="1"] .ol-addr { font-weight: 400; color: var(--ol-fg3); }
body[data-mailui="1"] .ol-to {
  font: 400 12px/18px var(--ol-font); color: var(--ol-fg3); word-break: break-all;
}
body[data-mailui="1"] .ol-more {
  border: none; background: transparent; color: var(--ol-brand-fg);
  font: 400 12px/18px var(--ol-font); cursor: pointer; padding: 0 2px; text-decoration: underline;
}
body[data-mailui="1"] .ol-when {
  font: 400 12px/18px var(--ol-font); color: var(--ol-fg3); white-space: nowrap; flex: none;
}

/* ── 메일함 칩: 기본으로 접어 둔다(28개가 넉 줄을 먹었다) ── */
body[data-mailui="1"] .ol-chips { display: none !important; padding: 8px 8px 0; }
body[data-mailui="1"] .ol-chips.open { display: flex !important; }

/* ══ Outlook 3분할 ══════════════════════════════════════════════
   왼쪽 업무 내비 · 가운데 목록 · 오른쪽 읽기 창.
   화면이 좁으면(1100px 미만) 읽기 창을 접고 예전처럼 겹쳐 띄운다. */
/* ══ Outlook 앱 껍데기 ══════════════════════════════════════════
   페이지 전체가 구르는 대신 **칸마다 따로 구른다**(왼쪽 메뉴·본문·읽기 창).
   전에는 왼쪽 메뉴가 1542px 인데 창은 900px 이라 페이지를 굴려야 아랫부분이 보였다.
   그런데 메일을 겹쳐 띄우면 페이지 스크롤이 잠겨 메뉴 아래쪽에 아예 닿을 수 없었다. */
@media (min-width: 821px) {
  body[data-mailui="1"] .appmain {
    height: calc(100vh - 52px); min-height: 0; overflow: hidden;
  }
  body[data-mailui="1"] .side {
    height: 100%; overflow-y: auto; overscroll-behavior: contain;
  }
  body[data-mailui="1"] .content {
    height: 100%; overflow-y: auto; overscroll-behavior: contain;
  }
  body[data-pane="3"] .content { overflow: hidden; }
}
/* 겹쳐 띄운 창에서 굴리다 끝에 닿아도 뒤 화면으로 넘어가지 않는다 */
body[data-mailui="1"] .viewer { overscroll-behavior: contain; }
/* 넓은 화면에서는 왼쪽 메뉴를 덮지 않는다 — 메일을 열어 둔 채로도 메뉴를 쓸 수 있어야 한다 */
@media (min-width: 821px) { body[data-mailui="1"] .viewer { left: 232px; } }

body[data-pane="3"] .content {
  max-width: none; padding: 0; margin: 0;
}
/* 격자 칸은 내용만큼 늘어나려 한다 — 줄 높이를 못 박아야 칸마다 따로 구른다.
   (이걸 안 하면 목록 칸이 8054px 로 늘어나 페이지 전체가 구르려 든다) */
body[data-pane="3"] .ol3 { grid-template-rows: 100%; }
body[data-pane="3"] .ol3-list,
body[data-pane="3"] .ol3-read { min-height: 0; height: 100%; }
body[data-pane="3"] .ol3-list .card {
  min-height: 0; height: 100%; display: flex; flex-direction: column;
}
body[data-mailui="1"] .ol3 {
  display: grid; grid-template-columns: minmax(320px, 400px) 1fr;
  height: 100%; background: var(--ol-bg1);
}
body[data-mailui="1"] .ol3-list {
  display: flex; flex-direction: column; min-width: 0;
  border-right: 1px solid var(--ol-stroke2); background: var(--ol-bg1);
}
body[data-mailui="1"] .ol3-list #lst,
body[data-mailui="1"] .ol3-list .ol-scroll { flex: 1 1 auto; overflow-y: auto; }
body[data-mailui="1"] .ol3-list #lst .mail-pagination {
  display: grid; justify-items: center; gap: 10px; padding: 18px 12px 24px;
  border-top: 1px solid var(--ol-stroke2); overflow-anchor: none;
}
body[data-mailui="1"] .ol3-list #lst .mail-page-status {
  color: var(--ol-fg3); font-size: 12px; text-align: center; overflow-wrap: anywhere;
}
body[data-mailui="1"] .ol3-list #lst .mail-more { min-width: 120px; min-height: 40px; }
body[data-mailui="1"] .ol3-list #lst .mail-more[hidden] { display: none; }
body[data-mailui="1"] .ol3-list #lst .mail-more:disabled { opacity: .65; cursor: wait; }
body[data-mailui="1"] .ol3-list .ob-scope { color: var(--ol-fg3); font-size: 12px; }
body[data-mailui="1"] .ol3-read {
  overflow-y: auto; min-width: 0; background: var(--ol-bg1);
  padding: 20px 28px 60px;
}
body[data-mailui="1"] .ol3-read .vsub { margin-top: 0; }
body[data-mailui="1"] .ol-empty {
  height: 100%; display: grid; place-content: center; text-align: center;
  color: var(--ol-fg3); font: 400 14px/22px var(--ol-font); gap: 6px;
}
body[data-mailui="1"] .ol-empty b { font: 600 16px/24px var(--ol-font); color: var(--ol-fg2); }

/* 3분할일 때 목록 카드는 테두리를 걷어낸다(판이 곧 칸이다) */
body[data-mailui="1"] .ol3 .card { border: none; border-radius: 0; height: 100%; }

@media (max-width: 1100px) {
  body[data-mailui="1"] .ol3 { grid-template-columns: 1fr; }
  body[data-mailui="1"] .ol3-read { display: none; }
}

/* 메일 쓰기: '링크로 보내기' 가 체크상자와 글자로 갈라져 두 줄이 되던 것 */
body[data-mailui="1"] #c-forcelink-w {
  display: inline-flex !important; align-items: center; gap: 6px;
  white-space: nowrap; cursor: pointer;
}
body[data-mailui="1"] #c-forcelink { margin: 0; }

/* ── 표시 밀도(Outlook: 여유·보통·좁게) ── */
body[data-density="cozy"][data-mailui="1"] .mrow { padding-top: 6px; padding-bottom: 6px; }
body[data-density="compact"][data-mailui="1"] .mrow { padding-top: 3px; padding-bottom: 3px; gap: 8px; }
body[data-density="compact"][data-mailui="1"] .msnip { display: none; }
body[data-density="compact"][data-mailui="1"] .avatar { width: 24px; height: 24px; line-height: 24px; font-size: 11px; }

/* ── 설정 대화상자(Outlook 설정: 왼쪽 갈래 · 오른쪽 내용) ── */
.olset-back {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 80;
  display: grid; place-items: center; padding: 20px;
}
.olset {
  width: min(880px, 100%); height: min(560px, 90vh); display: grid;
  grid-template-columns: 200px 1fr; background: #fff; color: #242424;
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 0 2px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.14);
  font: 400 14px/20px 'Segoe UI','Malgun Gothic','Apple SD Gothic Neo',Pretendard,sans-serif;
}
.olset-side { background: #fafafa; border-right: 1px solid #f0f0f0; padding: 12px 8px; overflow-y: auto; }
.olset-side h3 { margin: 0 0 8px; padding: 0 10px; font: 600 16px/24px inherit; }
.olset-side button {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  color: #424242; font: 400 14px/20px inherit; padding: 8px 10px; border-radius: 4px; cursor: pointer;
}
.olset-side button:hover { background: #f5f5f5; }
.olset-side button.on { background: #ebf3fc; color: #115ea3; font-weight: 600; }
.olset-body { padding: 18px 22px; overflow-y: auto; }
.olset-body h4 { margin: 0 0 4px; font: 600 16px/24px inherit; }
.olset-body .hint { color: #616161; font-size: 12px; margin-bottom: 16px; }
.olset-group { margin-bottom: 22px; }
.olset-group > label { display: block; font-weight: 600; margin-bottom: 6px; }
.olset-opt { display: flex; gap: 8px; flex-wrap: wrap; }
.olset-opt button {
  border: 1px solid #d1d1d1; background: #fff; color: #424242; border-radius: 4px;
  padding: 6px 14px; font: 400 14px/20px inherit; cursor: pointer;
}
.olset-opt button.on { border-color: #0f6cbd; color: #0f6cbd; background: #ebf3fc; font-weight: 600; }
.olset-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid #f0f0f0; border-radius: 4px; padding: 10px 12px; margin-bottom: 8px;
  cursor: pointer; background: #fff;
}
.olset-link:hover { background: #f5f5f5; }
.olset-link small { color: #616161; display: block; font-size: 12px; }
.olset-x {
  position: absolute; right: 0; top: 0; border: none; background: transparent;
  font-size: 18px; cursor: pointer; color: #616161; padding: 8px 12px;
}
.olset-body { position: relative; }
@media (prefers-color-scheme: dark) {
  .olset { background: #292929; color: #fff; }
  .olset-side { background: #1f1f1f; border-color: #3d3d3d; }
  .olset-side button { color: #d6d6d6; }
  .olset-side button:hover { background: #3d3d3d; }
  .olset-side button.on { background: #0c3b5e; color: #479ef5; }
  .olset-opt button, .olset-link { background: #292929; color: #d6d6d6; border-color: #525252; }
  .olset-opt button.on { background: #0c3b5e; border-color: #479ef5; color: #479ef5; }
  .olset-link:hover { background: #3d3d3d; }
}
@media (max-width: 820px) {
  .olset { grid-template-columns: 1fr; height: 92vh; }
  .olset-side { display: flex; gap: 4px; overflow-x: auto; border-right: none; border-bottom: 1px solid #f0f0f0; padding: 8px; }
  .olset-side h3 { display: none; }
  .olset-side button { width: auto; white-space: nowrap; }
}

/* 표시 줄 — 이름·시각을 밀어내지 않도록 맨 아래 한 줄에 모으고 넘치면 자른다 */
body[data-mailui="1"] .mtop { flex-wrap: nowrap; }
body[data-mailui="1"] .mfrom { flex: 1 1 auto; min-width: 0; }
body[data-mailui="1"] .mtop .clip,
body[data-mailui="1"] .mtop .mtime { flex: none; }
body[data-mailui="1"] .mbadges {
  display: flex; gap: 4px; align-items: center; margin-top: 3px;
  overflow: hidden; white-space: nowrap;
}
body[data-mailui="1"] .mbadges > * { flex: none; }
body[data-density="compact"][data-mailui="1"] .mbadges { display: none; }

/* 목록 칸에서는 미리보기를 한 줄로 자른다 */
body[data-mailui="1"] .ol3-list .msnip {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 목록 안의 보조 단추(보관함 등)는 명령 모음처럼 보이게 */
body[data-mailui="1"] .ol3-list .card > .btn,
body[data-mailui="1"] .ol3-list .card > button:not(.ol-cmd) {
  margin: 0 8px 8px; font-size: 13px;
}

/* 첨부 칩 안의 용량 표시가 세로로 쪼개지던 것 — 줄이지 말고 통째로 둔다 */
body[data-mailui="1"] .vbtn > span { flex: none; white-space: nowrap; }
body[data-mailui="1"] .vatts .vbtn { align-items: flex-start; }
@media (max-width: 820px) {
  body[data-mailui="1"] .vatts { flex-direction: column; align-items: stretch; }
  body[data-mailui="1"] .vatt { flex-direction: column; align-items: stretch; }
}

/* ══ 포털 전체 통일 ══════════════════════════════════════════════
   메일뿐 아니라 모든 화면에 같은 눈금(색·간격·글자·모서리)을 쓴다.
   브랜드 색만 수원일보 정체성을 위해 로고에 남기고, 조작 색은 Outlook 파랑으로 맞춘다. */

/* 겹쳐 띄운 동안 뒤 화면이 같이 굴러 왼쪽 메뉴가 밀려 올라가던 것 */
body.modal-open { overflow: hidden; }
/* 겹쳐 띄운 창은 상단 막대 아래에서 시작한다 — 로고·계정·설정이 늘 보여야 한다 */
body[data-mailui="1"] .viewer { top: 52px; z-index: 25; overflow-y: auto; -webkit-overflow-scrolling: touch; }
body.modal-open { overflow: hidden; height: 100vh; }
body[data-mailui="1"] .vcard {
  position: relative; inset: auto; margin: 24px auto; height: auto; max-height: none;
  max-width: 900px; border-radius: var(--ol-r-lg); padding: 24px 28px 48px;
  box-shadow: var(--ol-shadow16);
}
@media (max-width: 820px) {
  body[data-mailui="1"] .viewer { top: 0; }
  /* 전체 화면 메일의 닫기가 상단 메뉴(z-index:30) 뒤에 가려지지 않게 한다. */
  body[data-mailui="1"].modal-open #viewer { z-index: 60; }
  body[data-mailui="1"] .vcard { margin: 0; border-radius: 0; min-height: 100%; padding: 16px 14px 40px; }
}

/* 왼쪽 업무 내비 */
body[data-mailui="1"] .side {
  background: var(--ol-bg2); border-right: 1px solid var(--ol-stroke2);
  font-family: var(--ol-font);
}
body[data-mailui="1"] .side a,
body[data-mailui="1"] .side button,
body[data-mailui="1"] .side .navitem {
  border-radius: var(--ol-r); font: 400 14px/20px var(--ol-font); color: var(--ol-fg2);
}
body[data-mailui="1"] .side .on,
body[data-mailui="1"] .side .active { background: var(--ol-tint); color: var(--ol-brand-fg); font-weight: 600; }

/* 모든 화면의 판·글자·버튼·입력칸 */
body[data-mailui="1"] { font-family: var(--ol-font); }
body[data-mailui="1"] .content .card {
  border-radius: var(--ol-r-lg); border: 1px solid var(--ol-stroke3);
  box-shadow: none; background: var(--ol-bg1);
}
body[data-mailui="1"] .btn {
  background: var(--ol-brand); border: 1px solid var(--ol-brand); color: #fff;
  border-radius: var(--ol-r); font: 600 14px/20px var(--ol-font); padding: 6px 14px;
}
body[data-mailui="1"] .btn:hover { background: var(--ol-brand-hover); border-color: var(--ol-brand-hover); }
body[data-mailui="1"] .btn.small { font-size: 13px; padding: 4px 10px; }
body[data-mailui="1"] input:not([type=checkbox]):not([type=radio]),
body[data-mailui="1"] select,
body[data-mailui="1"] textarea {
  border: 1px solid var(--ol-stroke1); border-radius: var(--ol-r);
  font: 400 14px/20px var(--ol-font); color: var(--ol-fg1); background: var(--ol-bg1);
}
body[data-mailui="1"] input:focus, body[data-mailui="1"] select:focus, body[data-mailui="1"] textarea:focus {
  outline: none; border-color: var(--ol-brand); box-shadow: 0 1px 0 0 var(--ol-brand);
}
body[data-mailui="1"] table { font: 400 13px/20px var(--ol-font); }
body[data-mailui="1"] th { color: var(--ol-fg3); font-weight: 600; }
body[data-mailui="1"] td, body[data-mailui="1"] th { border-color: var(--ol-stroke3); }
body[data-mailui="1"] .empty, body[data-mailui="1"] .loading, body[data-mailui="1"] .dhint {
  color: var(--ol-fg3); font: 400 13px/20px var(--ol-font);
}
body[data-mailui="1"] a { color: var(--ol-brand-fg); }

/* ══ 체크상자·라디오 ═══════════════════════════════════════════
   포털의 오래된 전역 규칙 `input,select,textarea{width:100%}` 이 체크상자까지 늘려
   155px 짜리 상자가 되고, 글자가 아랫줄로 밀려 라벨이 두세 줄로 쪼개져 있었다.
   (기사 작성의 '댓글 허용'·'내 원고만' 이 대표적) */
body[data-mailui="1"] input[type=checkbox],
body[data-mailui="1"] input[type=radio] {
  width: auto !important; min-width: 0; flex: none;
  margin: 0 6px 0 0; padding: 0; vertical-align: -2px;
  accent-color: var(--ol-brand);
}
/* 작은 "체크상자 + 글자" 라벨만 한 줄로 눕힌다.
   그림이나 표를 품은 큰 카드 라벨까지 잡으면 내용이 옆으로 늘어서서 화면 밖으로 나간다. */
body[data-mailui="1"] label:has(> input[type=checkbox]):not(:has(img, svg, video, table, iframe)),
body[data-mailui="1"] label:has(> input[type=radio]):not(:has(img, svg, video, table, iframe)) {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; font-weight: 400; white-space: nowrap;
}

/* ══ 기사 작성 ═══════════════════════════════════════════════ */
body[data-mailui="1"] #view .card[style*="sticky"] {
  border-radius: 0; border-left: none; border-right: none; border-top: none;
  background: var(--ol-bg1);
}
/* 인라인 style 로 박아 둔 색을 눌러 하나의 체계로 맞춘다 */
body[data-mailui="1"] #wr-publish,
body[data-mailui="1"] #wr-request,
body[data-mailui="1"] #wr-new {
  background: var(--ol-brand) !important; color: #fff !important;
  border-color: var(--ol-brand) !important; font-weight: 600;
}
body[data-mailui="1"] #wr-publish:hover,
body[data-mailui="1"] #wr-request:hover,
body[data-mailui="1"] #wr-new:hover {
  background: var(--ol-brand-hover) !important; border-color: var(--ol-brand-hover) !important;
}
body[data-mailui="1"] #wr-assist {
  border-color: var(--ol-stroke1) !important; color: var(--ol-brand-fg) !important; font-weight: 600;
}
body[data-mailui="1"] #view .ubtn.on {
  background: var(--ol-tint) !important; color: var(--ol-brand-fg) !important;
  border-color: var(--ol-brand) !important; font-weight: 600; border-radius: 999px;
}
body[data-mailui="1"] #view .card b { font: 600 15px/22px var(--ol-font); color: var(--ol-fg1); }

body[data-mailui="1"] .wr-tb {
  background: var(--ol-bg2); border-bottom: 1px solid var(--ol-stroke3); padding: 6px 8px;
}
body[data-mailui="1"] .wr-tb button,
body[data-mailui="1"] .wr-tb select {
  border-radius: var(--ol-r); font: 400 13px/18px var(--ol-font);
}
body[data-mailui="1"] .wr-sep { background: var(--ol-stroke2); }
body[data-mailui="1"] #wr-body {
  min-height: 420px; padding: 18px 20px;
  font: 400 15px/1.85 var(--ol-font); color: var(--ol-fg1);
}
body[data-mailui="1"] .wr-kwtag {
  border: 1px solid var(--ol-stroke2); background: var(--ol-bg2);
  border-radius: var(--ol-r); font-size: 12.5px; color: var(--ol-fg2);
}

/* 붙박이(sticky) 기준점 보정 — 이제 페이지가 아니라 본문 칸(.content)이 구른다.
   예전에는 상단 막대(52px)를 피하려고 top:64px 을 박아 뒀는데, 기준이 바뀌면서
   붙박이 막대가 본문 첫 줄을 덮고 그 위에 빈 자리가 생겼다. */
@media (min-width: 821px) {
  /* 위쪽 동작 막대(목록·발행)가 맨 위, 본문 서식 막대는 그 아래에 층으로 붙는다.
     둘 다 top:0 이면 서식 막대가 동작 막대 뒤로 숨어 버린다. */
  body[data-mailui="1"] #view > .card[style*="sticky"] { top: 0 !important; z-index: 6; }
  body[data-mailui="1"] #view .card [style*="position:sticky"] { top: 100px !important; }
}

/* ── 아직 옛 색이 인라인으로 남은 단추를 위한 안전망 ──────────────────
   원본은 모두 색 토큰으로 고쳤다. 이 규칙은 앞으로 새로 들어올 인라인 먹색을
   막는 그물이지 본 처방이 아니다. 본문으로 보여 주는 곳은 건드리지 않는다. */
body[data-mailui="1"] #view button[style*="background:#111"],
body[data-mailui="1"] #view button[style*="background:var(--ink,#111)"],
body[data-mailui="1"] #view button[style*="background:#3b5bdb"] {
  background: var(--ol-brand) !important;
  border-color: var(--ol-brand) !important;
  color: #fff !important;
}
body[data-mailui="1"] #view button[disabled][style*="background:#111"] {
  background: var(--ol-bg3) !important;
  border-color: var(--ol-stroke1) !important;
  color: var(--ol-fg3) !important;
}

/* 통계 — 유입 주소가 96px 칸에 잘려 있었다 */
/* 작은 화면의 24시간 격자는 숫자의 최소 폭 때문에 페이지를 밀지 않게 한다. */
@media (max-width: 820px) {
  body[data-mailui="1"] #st-body .st-heat { grid-template-columns: 24px repeat(24,minmax(0,1fr)); }
  body[data-mailui="1"] #st-body .st-heat > * { min-width: 0; }
  /* 전송 대장 검색 줄도 카드 폭 안에서 다음 줄로 접힐 수 있어야 한다. */
  body[data-mailui="1"] #view .nv .nv-head > .nv-tools { min-width: 0; max-width: 100%; }
}
body[data-mailui="1"] .st-bd li { grid-template-columns: minmax(96px, 132px) minmax(0, 1fr) 52px; }
body[data-mailui="1"] .st-bd li > :first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

/* 좁은 화면 — 단추 줄은 접히게 두고, 링크 보내기 라벨은 한 줄로 */
@media (max-width: 820px) {
  body[data-mailui="1"] #view .row,
  body[data-mailui="1"] #view [style*="display:flex"] { flex-wrap: wrap; }
  body[data-mailui="1"] #c-forcelink-w { white-space: nowrap; font-size: 11.5px; padding: 5px 8px; }
}

/* 넓은 표는 화면을 밀지 않고 제 안에서 옆으로 움직인다 */
body[data-mailui="1"] .tblwrap { overflow-x: auto; overscroll-behavior-x: contain; }

/* 한 줄에 선 입력칸과 단추의 키를 맞춘다. 8px 어긋나면 줄이 흐트러져 보인다.
   .row 안에 있든 아니든 같은 키여야 하므로 요소 자체에 건다. */
body[data-mailui="1"] #view .ubtn,
body[data-mailui="1"] #view .f,
body[data-mailui="1"] #view select,
body[data-mailui="1"] #view input[type=text],
body[data-mailui="1"] #view input[type=search],
body[data-mailui="1"] #view input[type=number],
body[data-mailui="1"] #view input[type=date],
body[data-mailui="1"] #view input[type=time] {
  min-height: 32px;
  box-sizing: border-box;
}

/* 한 줄짜리 입력칸은 단추와 같은 32px 로 — 40px 이면 옆의 단추와 8px 어긋난다 */
body[data-mailui="1"] #view input[type=text],
body[data-mailui="1"] #view input[type=search],
body[data-mailui="1"] #view input[type=number],
body[data-mailui="1"] #view input[type=date],
body[data-mailui="1"] #view input[type=time],
body[data-mailui="1"] #view input:not([type]),
body[data-mailui="1"] #view select {
  height: 32px; padding-top: 0; padding-bottom: 0; line-height: 30px;
}

/* 그림글자가 든 단추는 줄상자가 커져 옆 단추보다 키가 커진다.
   줄높이를 못 박아 한 줄에 선 단추들이 같은 키를 갖게 한다. */
body[data-mailui="1"] #view button,
body[data-mailui="1"] #view a.ubtn,
body[data-mailui="1"] #view a.btn {
  line-height: 1.25;
  vertical-align: middle;
}

/* ── 가로 줄에 놓인 고르개·검색칸이 한 줄씩 차지하던 문제 ────────────────
   포털 첫 style 블록의 `input,select,textarea{width:100%}` 가 flex 자식에게도
   걸려서, 줄로 세워 둔 고르개가 저마다 한 줄을 먹고 아래로 흘러내렸다.
   고르개는 제 내용만큼, 검색칸은 남는 만큼 차지하게 되돌린다. */
body[data-mailui="1"] #view select { width: auto; max-width: 100%; min-width: 0; }

body[data-mailui="1"] #view .bulkbar > select,
body[data-mailui="1"] #view .cbar > select,
body[data-mailui="1"] #view .ctr-bar > select,
body[data-mailui="1"] #view .dtoolbar > select,
body[data-mailui="1"] #view .edbar > select,
body[data-mailui="1"] #view .evbar > select,
body[data-mailui="1"] #view .nas-bar > select,
body[data-mailui="1"] #view .ni-bar > select,
body[data-mailui="1"] #view .ph-bar > select,
body[data-mailui="1"] #view .psubbar > select,
body[data-mailui="1"] #view .qa-bar > select,
body[data-mailui="1"] #view .st-bar > select,
body[data-mailui="1"] #view .row > select { flex: 0 0 auto; }

body[data-mailui="1"] #view .bulkbar > input[type=text],
body[data-mailui="1"] #view .cbar > input[type=text],
body[data-mailui="1"] #view .ctr-bar > input[type=text],
body[data-mailui="1"] #view .dtoolbar > input[type=text],
body[data-mailui="1"] #view .edbar > input[type=text],
body[data-mailui="1"] #view .evbar > input[type=text],
body[data-mailui="1"] #view .nas-bar > input[type=text],
body[data-mailui="1"] #view .ni-bar > input[type=text],
body[data-mailui="1"] #view .ph-bar > input[type=text],
body[data-mailui="1"] #view .psubbar > input[type=text],
body[data-mailui="1"] #view .qa-bar > input[type=text],
body[data-mailui="1"] #view .st-bar > input[type=text],
body[data-mailui="1"] #view .row > input[type=text] { width: auto; flex: 1 1 200px; min-width: 160px; }

/* 조직도의 작은 단추 — 20px 은 누르기에 너무 얇다 */
body[data-mailui="1"] #view .oubtn { min-height: 24px; padding: 2px 9px; }

/* 보내는 사람 고르개가 좁은 화면에서 줄 밖으로 나가던 문제.
   flex 자식의 자동 최소 너비 때문에 줄어들지 못했다. */
@media (max-width: 520px) {
  body[data-mailui="1"] #view .crow { flex-wrap: wrap; }
  body[data-mailui="1"] #view .crow > select,
  body[data-mailui="1"] #view .crow > input { flex: 1 1 auto; min-width: 0; max-width: 100%; }
}

/* ── 켜진 상태를 한 색으로 ────────────────────────────────────────────
   화면마다 켜짐 색이 여덟 가지였다(빨강 #e11900·#c8102e·#c8143a, 먹색 #0d1117·#111,
   남보라 #4f46e5, 주황, 회색). 같은 뜻이면 같은 색이어야 읽힌다. */
body[data-mailui="1"] #view .ubtn.on,
body[data-mailui="1"] #view .st-chip.on,
body[data-mailui="1"] #view .mai-btn.on,
body[data-mailui="1"] #view .lk-tab.on,
body[data-mailui="1"] #view .bf-tab.on,
body[data-mailui="1"] #view .bf-sec.on,
body[data-mailui="1"] #view .qa-nav button.on,
body[data-mailui="1"] #view .qa-mini button.cur,
body[data-mailui="1"] #view .datechip.on,
body[data-mailui="1"] #view .psubbar button.on,
body[data-mailui="1"] #view .ni-bar button.on,
body[data-mailui="1"] #view .ctr-bar button.on,
body[data-mailui="1"] #view .sig-tabs button.on,
body[data-mailui="1"] #view .nasv-tabs button.on,
body[data-mailui="1"] #view .np-tabs button.on,
body[data-mailui="1"] #view .cz-tab.on {
  background: var(--ol-brand);
  border-color: var(--ol-brand);
  color: #fff;
}
/* 밑줄로 켜짐을 나타내는 탭은 채우지 않고 밑줄만 브랜드색으로 */
body[data-mailui="1"] #view .cz-tab.on { background: transparent; color: var(--ol-brand-fg); border-color: transparent; border-bottom-color: var(--ol-brand); }
body[data-mailui="1"] #view .np-drop.on {
  border-color: var(--ol-brand) !important; color: var(--ol-brand-fg) !important;
}
body[data-mailui="1"] #view .qa-mini button.cur { outline-color: var(--ol-brand) !important; }
/* 왼쪽 차림표의 켜짐 표시 막대 */
body[data-mailui="1"] .side button.on::before { background: var(--ol-brand); }
body[data-mailui="1"] .side button.on { color: var(--ol-brand-fg); }
body[data-mailui="1"] #view .ubtn.on:hover,
body[data-mailui="1"] #view .st-chip.on:hover,
body[data-mailui="1"] #view .datechip.on:hover {
  background: var(--ol-brand-hover);
  border-color: var(--ol-brand-hover);
  color: #fff;
}
/* 골라 둔 카드는 채우지 않고 테두리와 옅은 바탕으로 표시한다 */
body[data-mailui="1"] #view .ni-card.on,
body[data-mailui="1"] #view .nas-drop.on,
body[data-mailui="1"] #view .aw-box.on {
  border-color: var(--ol-brand) !important;
  background: var(--ol-tint) !important;
  color: var(--ol-fg1) !important;
}

/* ── 줄 안의 단추가 입력칸처럼 늘어나던 문제 ──────────────────────────
   앞서 입력칸만 늘어나게 했더니 단추는 남는 자리를 채워 입력칸과 구별이 안 됐다
   (조직도의 '조직 추가'·'경력증명서 출력'). 단추는 제 글자만큼만 차지한다. */
body[data-mailui="1"] #view .row > button,
body[data-mailui="1"] #view .row > .btn,
body[data-mailui="1"] #view .row > .ubtn,
body[data-mailui="1"] #view .ni-bar > button,
body[data-mailui="1"] #view .nas-bar > button,
body[data-mailui="1"] #view .ph-bar > button,
body[data-mailui="1"] #view .ctr-bar > button,
body[data-mailui="1"] #view .st-bar > button,
body[data-mailui="1"] #view .cbar > button,
body[data-mailui="1"] #view .qa-bar > button { flex: 0 0 auto; width: auto; }

/* ── 목록 행: 정보는 왼쪽, 동작은 오른쪽 한 자리 ────────────────────────
   계정 34개에 단추 68개가 이름 아래로 깔려 목록이 단추밭이었다.
   행을 가로로 눕히면 높이가 절반이 되고 어디가 정보이고 어디가 동작인지 갈린다. */
body[data-mailui="1"] #view .urow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
/* 펼쳐 보는 상세는 줄 아래로 온전히 내려온다 */
body[data-mailui="1"] #view .urow > .pdetail { flex: 1 0 100%; }
body[data-mailui="1"] #view .urow > .pdetail:empty { display: none; }
/* flex-basis 를 auto 로 두면 긴 제목이 줄을 다 차지해 단추가 아래로 밀린다.
   0 으로 두면 남는 자리를 나눠 갖고, 제목은 두 줄까지만 보이고 접힌다. */
body[data-mailui="1"] #view .urow .umain { flex: 1 1 0; min-width: 0; }
/* 배지(첨부·중복·상태)는 제목 옆에 남아야 한다. 제목만 줄어들게 한다. */
body[data-mailui="1"] #view .urow .uh {
  min-width: 0; flex-wrap: nowrap; align-items: flex-start;
}
body[data-mailui="1"] #view .urow .uh > :not(.uname) { flex: none; align-self: center; }
body[data-mailui="1"] #view .urow .uname {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-width: 0; flex: 0 1 auto;
}
body[data-mailui="1"] #view .urow .uemail {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body[data-mailui="1"] #view .uacts {
  flex: none; display: flex; gap: 6px; align-items: center;
}
/* 자주 쓰지 않는 동작이라 평소엔 물러나 있다가 줄에 손이 닿으면 또렷해진다 */
body[data-mailui="1"] #view .uacts .ubtn {
  font-size: 11.5px; padding: 4px 9px; min-height: 26px;
  color: var(--ol-fg3); border-color: var(--ol-stroke1);
}
body[data-mailui="1"] #view .urow:hover .uacts .ubtn,
body[data-mailui="1"] #view .uacts .ubtn:focus-visible {
  color: var(--ol-fg1); border-color: var(--ol-fg3);
}

/* 제보 본문은 세 줄까지만 보이고, 잘린 자리는 흐려서 더 있다는 것이 보이게 한다.
   전에는 5.2em 에서 뚝 잘려 문장 한가운데가 카드 경계에 걸려 있었다. */
body[data-mailui="1"] #view .tip-preview {
  position: relative;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
body[data-mailui="1"] #view .tip-preview::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5em;
  background: linear-gradient(to bottom, transparent, var(--ol-bg1));
  pointer-events: none;
}

/* 짧은 값을 받는 칸이 850px 전폭이면 눈이 화면 끝까지 따라가야 한다.
   비밀번호·날짜·시각처럼 길이가 정해진 값은 제 크기만큼만 차지한다. */
body[data-mailui="1"] #view input[type=password] { max-width: 320px; }
/* 날짜 칸은 줄 안에 섞여 있을 때만 제 크기로 둔다.
   2열 폼 안에서까지 줄이면 한쪽 칸만 짧아져 격자가 어긋난다. */
body[data-mailui="1"] #view .row > input[type=date],
body[data-mailui="1"] #view .row > input[type=time],
body[data-mailui="1"] #view .ni-bar > input[type=date],
body[data-mailui="1"] #view .st-bar > input[type=date] { max-width: 200px; }

/* ── 보낸편지함 = 보낸 메일 + 발송 추적 ────────────────────────────────
   두 메뉴가 같은 메일을 다르게 보여 주고 있어 한 화면으로 합쳤다.
   목록에는 배달·열람·답장이 배지로, 메일을 열면 상세가 본문 아래에 붙는다. */
body[data-mailui="1"] #view .ob-filters {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  margin: 8px 0 6px;
}
body[data-mailui="1"] #view .ob-filters .ubtn {
  font-size: 11.5px; padding: 3px 9px; min-height: 26px; border-radius: 999px;
}
body[data-mailui="1"] #view .ob-sum {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 12px; color: var(--ol-fg2); margin: 0 0 8px;
}
body[data-mailui="1"] #view .ob-sum .ob-s { white-space: nowrap; font-variant-numeric: tabular-nums; }
body[data-mailui="1"] #view .ob-sum .ob-s i { font-style: normal; color: var(--ol-fg3); }

/* 목록 줄의 상태 배지는 라벨 칩보다 조용해야 한다 — 줄의 주인공은 제목이다 */
body[data-mailui="1"] #view .mbadges .sentb { display: inline-flex; flex-wrap: wrap; gap: 3px; }
body[data-mailui="1"] #view .mbadges .sentb .st-b { font-size: 10px; }

body[data-mailui="1"] #view .v-senth {
  margin: 22px 0 8px; padding-top: 14px; font-size: 13px;
  border-top: 1px solid var(--ol-stroke2);
  color: var(--ol-fg2);
}

/* ── 상단 띠의 새 메일 ─────────────────────────────────────────────── */
body[data-mailui="1"] .top .lo.compose {
  background: var(--ol-brand); border-color: var(--ol-brand); color: #fff; font-weight: 600;
}
body[data-mailui="1"] .top .lo.compose:hover {
  background: var(--ol-brand-hover); border-color: var(--ol-brand-hover);
}
@media (max-width: 820px) { body[data-mailui="1"] .top .lo.compose { font-size: 0; padding: 6px 10px; } 
  body[data-mailui="1"] .top .lo.compose::before { content: "✉"; font-size: 13px; } }

/* ── 메일 목록: 날짜로 묶는다 ────────────────────────────────────────
   받은 편지는 시간 순으로 쌓인다. 사람은 "아까 온 그 보도자료" 라고 떠올리지
   "세 번째 줄" 이라고 떠올리지 않는다. 날짜가 목록의 뼈대여야 한다. */
body[data-mailui="1"] #view .mday {
  position: sticky; top: 0; z-index: 2;
  padding: 7px 12px 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--ol-fg3);
  background: var(--ol-bg1);
  border-bottom: 1px solid var(--ol-stroke3);
}
body[data-mailui="1"] #view .mday:first-child { border-top: none; }

/* ── 메일 줄: 알아보는 것 하나, 판단하는 것 하나 ──────────────────────
   전에는 한 줄이 보낸사람·시각·제목·미리보기·메일함·분류·중요·중복·라벨을
   동시에 말해 무엇을 먼저 읽어야 할지 알 수 없었다. 층을 나눈다.
     1줄  누가 (어느 메일함으로)          … 언제
     2줄  제목 (급한 것·첨부는 여기 붙는다)
     3줄  미리보기
     4줄  손으로 붙인 라벨·발송 상태 — 있을 때만 */
body[data-mailui="1"] #view .mrow { padding-left: 9px; }
body[data-mailui="1"] #view .mrow::after {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 2px 2px 0; background: transparent;
}
/* 이 편집국 메일은 열에 아홉이 보도자료다. 다수에 색을 칠하면 색이 아무 말도
   못 한다. 다수는 조용히 두고, 눈에 띄어야 할 소수만 표시한다. */
body[data-mailui="1"] #view .mrow.cat-l-work::after   { background: #3b82f6; }
body[data-mailui="1"] #view .mrow.cat-l-promo::after  { background: #c4ccd6; }

/* 어느 메일함으로 왔는지는 '누구'의 일부다. 보낸사람보다 세면 안 된다. */
body[data-mailui="1"] #view .mrow .mtop .mbtag {
  background: transparent !important;
  border: none; padding: 0 0 0 11px; position: relative;
  color: var(--ol-fg3) !important; font-weight: 500; font-size: 10.5px;
}
body[data-mailui="1"] #view .mrow .mtop .mbtag::before {
  content: ""; position: absolute; left: 2px; top: 50%; margin-top: -2.5px;
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
}

body[data-mailui="1"] #view .mrow .mtop { display: flex; align-items: baseline; gap: 6px; }
body[data-mailui="1"] #view .mrow .mfrom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-mailui="1"] #view .mrow .mtop .mbtag { flex: none; margin: 0; }
body[data-mailui="1"] #view .mrow .mtime { margin-left: auto; flex: none; }

/* 제목이 줄의 주인공이다 */
/* 제목은 줄의 주인공이다. 한 줄로 잘라 버리면 무슨 메일인지 알 수 없다.
   보도자료 제목은 길다 — 두 줄까지 준다. 대신 미리보기가 제목을 되풀이하면 그 줄은 없앤다. */
body[data-mailui="1"] #view .mrow .msub {
  font-size: 13.5px; line-height: 1.4; margin: 1px 0 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;      /* 앞 규칙의 nowrap 을 풀어야 두 줄이 된다 */
  overflow-wrap: anywhere;
}
body[data-mailui="1"] #view .mrow .msnip {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body[data-mailui="1"] #view .mrow.unread .msub { font-weight: 600; }
body[data-mailui="1"] #view .mrow .msub .clip,
body[data-mailui="1"] #view .mrow .msub .phigh,
body[data-mailui="1"] #view .mrow .msub .dupbadge { margin-right: 5px; font-weight: 400; }
body[data-mailui="1"] #view .mrow .msub .clip { margin: 0 0 0 5px; }

/* 메일 제목과 닫기는 별도 칸을 쓴다. 긴 제목이 버튼을 밀어내지 않게 한다. */
body[data-mailui="1"] #vc > .mail-titlebar,
body[data-mailui="1"] #olread > .mail-titlebar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: start; gap: 12px; min-width: 0; margin-bottom: 12px;
}
body[data-mailui="1"] #vc > .mail-titlebar > .vsub,
body[data-mailui="1"] #olread > .mail-titlebar > .vsub {
  min-width: 0; margin: 0; white-space: normal;
  overflow-wrap: anywhere; word-break: normal;
}
body[data-mailui="1"] #vc > .mail-titlebar > .mail-close,
body[data-mailui="1"] #olread > .mail-titlebar > .mail-close {
  justify-self: end; white-space: nowrap;
}

/* 원문 표·HTML의 고정 너비는 본문 안에서만 스크롤한다. 원문 스타일은 보존한다. */
body[data-mailui="1"] #vc > .vbody,
body[data-mailui="1"] #olread > .vbody {
  min-width: 0; max-width: 100%; overflow-x: auto;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}

/* 목록 밖의 본문이나 다른 관리 화면에 있는 같은 이름의 클래스를 바꾸지 않는다. */
body[data-mailui="1"] #view .ol3-list .mrow > .mmain > .mtop > .mbtag {
  min-width: 0; max-width: 40%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 820px) {
  body[data-mailui="1"] #view .ol3-list .mrow > .mmain > .msub {
    display: block; -webkit-line-clamp: unset; -webkit-box-orient: initial;
    overflow: visible; white-space: normal; overflow-wrap: anywhere;
  }
  body[data-mailui="1"] #view .ol3-list .mrow > .mmain > .mtop {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline; column-gap: 6px; row-gap: 0;
  }
  body[data-mailui="1"] #view .ol3-list .mrow > .mmain > .mtop > .mfrom {
    grid-column: 1; grid-row: 1;
  }
  body[data-mailui="1"] #view .ol3-list .mrow > .mmain > .mtop > .mtime {
    grid-column: 2; grid-row: 1;
  }
  body[data-mailui="1"] #view .ol3-list .mrow > .mmain > .mtop > .mbtag {
    grid-column: 1 / -1; grid-row: 2; max-width: 100%;
  }
  body[data-mailui="1"] #vc > .ol-head,
  body[data-mailui="1"] #olread > .ol-head {
    display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px;
  }
  body[data-mailui="1"] #vc > .ol-head > .ol-av,
  body[data-mailui="1"] #olread > .ol-head > .ol-av {
    grid-column: 1; grid-row: 1 / span 2;
  }
  body[data-mailui="1"] #vc > .ol-head > .ol-who,
  body[data-mailui="1"] #olread > .ol-head > .ol-who {
    grid-column: 2; min-width: 0;
  }
  body[data-mailui="1"] #vc > .ol-head .ol-name,
  body[data-mailui="1"] #olread > .ol-head .ol-name {
    overflow-wrap: anywhere; word-break: normal;
  }
  body[data-mailui="1"] #vc > .ol-head > .ol-when,
  body[data-mailui="1"] #olread > .ol-head > .ol-when {
    grid-column: 2; white-space: normal; overflow-wrap: anywhere;
  }
}