/* 조직도 — 이메일 찾기 전용 화면(?ga_mail=…) 배치 v2.1 · 2026-10-26
 * C안(사용자 선택 10-19) — 한 화면에 스크롤 없이.
 *   1줄: 왼쪽 찾는 방법 탭(부서/이름 · 필터) · 오른쪽 「조직도 보기」 — 큰 제목·설명 문장은 뺀다.
 *   2줄: 사용 방법 3단계 띠(한 카드 안 가로 3칸).
 *   3줄: 작업 카드 — 붙여넣기 | 결과 나란히(필터 탭은 고르기 | 목록). 결과가 길면 그 칸 안에서만 스크롤.
 *   예시는 작업 카드 안 — 붙여넣기 탭은 결과 칸이 비어 있을 때 결과 칸에(결과가 나오면 숨는다), 필터 탭은 고르기 칸 아래(orgmenu.js v1.3 이 옮긴다).
 * html.om-mailpage 일 때만 걸린다. orgmenu.js 가 넣는 규칙보다 구체적(body 한 겹)으로 덮는다.
 * 휴대폰 폭(820px 이하)은 위에서 아래로 — 탭 → 3단계 → 입력 → 결과.
 * v2.1(10-26): 상단 바 공통 규칙(전폭·도구 오른쪽 끝)을 이메일 찾기 화면(html.om-mailpage)으로만 한정 — 조직도 본 화면은 app.css 의 본문 폭을 따르고, 본문이 화면 전체 폭인 다이어그램·엑셀 유형만 전폭(현황판 ORG-70·76).
 * 되돌리기: index.html 의 orgmail.css ?v=8 · orgmenu.js ?v=3 으로 함께 되돌린다(v1.4 배치) */

/* 공통 — 상단 바 · 하단 푸터(다른 서비스와 같은 구성) */
html.om-mailpage body header .bar{max-width:none;padding-left:26px;padding-right:26px}
html.om-mailpage body header .bar .tools{margin-left:auto}
body[data-layout="diagram"] header .bar,body[data-layout="excel"] header .bar{max-width:none}
html.om-mailpage body footer{display:flex!important;position:fixed;left:0;right:0;bottom:0;z-index:901;padding:0 26px;height:36px;align-items:center;justify-content:center;box-sizing:border-box}
html.om-mailpage body footer #foot,html.om-mailpage body footer .who{display:none}
html.om-mailpage body #gaportal{display:flex!important;z-index:902}
html.om-mailpage body #gabar.dk{z-index:902}
html.om-mailpage body .mf-ov{bottom:36px}

/* 공통 — 왼쪽 위 이름을 「이메일 찾기」로(글자 노드는 그대로 두고 보이는 글자만 바꾼다 · 화면을 나가면 「조직도」) */
html.om-mailpage body header #markName{font-size:0!important;letter-spacing:0!important}
html.om-mailpage body header #markName::after{content:"이메일 찾기";font-size:17px;letter-spacing:-.51px;line-height:27px}

/* 공통 — 큰 제목·설명 문장 없음 · 3단계 띠 · 탭은 한 줄 알약 */
html.om-mailpage body .mf-ov .om-hero{display:contents}
html.om-mailpage body .mf-ov .om-top{display:flex;align-items:center;justify-content:flex-end;margin:0}
html.om-mailpage body .mf-ov .om-top>div{display:none}
html.om-mailpage body .mf-ov .om-grid{display:block;min-width:0}
html.om-mailpage body .mf-ov .om-grid>.om-ex{display:none}
html.om-mailpage body .mf-ov .om-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding:14px 20px;box-sizing:border-box;background:var(--sheet,#fff);border:1px solid var(--rule-2,#E5E9F0);border-radius:14px}
html.om-mailpage body .mf-ov .om-step{display:flex;gap:10px;align-items:flex-start;padding:0;border:0;border-radius:0;background:none;min-width:0}
html.om-mailpage body .mf-ov .om-step .om-sh{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.om-mailpage body .mf-ov .om-step p{margin:3px 0 0;font-size:12.5px;line-height:1.55}
html.om-mailpage body .mf-ov .mf-tabs{display:inline-flex;flex-direction:row;align-self:center;justify-self:start;width:auto;max-width:100%;margin:0;padding:3px;gap:2px;border:0;border-radius:999px;background:var(--sunk,#F7F9FD);box-shadow:inset 0 0 0 1px var(--rule-2,#E5E9F0)}
html.om-mailpage body .mf-ov .mf-tabs .mf-tab{flex:none;position:static;display:block;width:auto;margin:0;transform:none;padding:8px 18px;border:0;border-radius:999px;background:transparent;box-shadow:none;color:var(--ink-2,#5A6472);font-size:13.5px;font-weight:700;line-height:1.3;white-space:nowrap;text-align:center;overflow:visible;cursor:pointer}
html.om-mailpage body .mf-ov .mf-tabs .mf-tab::before,html.om-mailpage body .mf-ov .mf-tabs .mf-tab::after{content:none;display:none}
html.om-mailpage body .mf-ov .mf-tabs .mf-tab:hover{background:var(--rule,#EDF1F6);color:var(--ink,#1B2430)}
html.om-mailpage body .mf-ov .mf-tabs .mf-tab.on,html.om-mailpage body .mf-ov .mf-tabs .mf-tab.on:hover{background:var(--grad,linear-gradient(120deg,#006290,#007DB6));color:#fff}
html.om-mailpage body .mf-ov .mf-pane{margin:0;min-width:0;background:var(--sheet,#fff);border:1px solid var(--rule-2,#E5E9F0);border-radius:14px}
html.om-mailpage body .mf-ov .mf-pane .mf-hint{margin:0;font-size:12.5px;line-height:1.55}
html.om-mailpage body .mf-ov .mf-pane .mf-out:empty{display:none}
html.om-mailpage body .mf-ov .mf-pane .mf-out:not(:empty)~.om-exin{display:none}
html.om-mailpage body .mf-ov .mf-pane .om-exin{box-sizing:border-box;min-width:0}
html.om-mailpage body .mf-ov .mf-pane>.mx-ctl>.om-exin{margin-top:16px}

/* 데스크톱 — 3줄 격자 · 화면 높이에 맞춰 한 화면 */
@media (min-width:821px){
html.om-mailpage body .mf-ov{scrollbar-gutter:stable}
html.om-mailpage body .mf-ov .mx-pn{width:100%;max-width:1172px;margin-left:auto;margin-right:auto;box-sizing:border-box;height:100%;min-height:560px;padding:18px 26px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tabs top" "hero hero" "pane pane";grid-template-rows:auto auto minmax(0,1fr);gap:14px}
html.om-mailpage body .mf-ov .mf-tabs{grid-area:tabs}
html.om-mailpage body .mf-ov .om-top{grid-area:top}
html.om-mailpage body .mf-ov .om-grid{grid-area:hero}
html.om-mailpage body .mf-ov .mf-pane{grid-area:pane;min-height:0;height:auto;display:flex;flex-direction:column;overflow:hidden}
/* 붙여넣기 탭: 왼쪽 입력 | 오른쪽 결과(비어 있으면 예시) */
html.om-mailpage body .mf-ov .mf-pane>.mx-body:has(>.mf-ta){flex:1 1 auto;height:auto;min-height:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:minmax(0,1fr) auto;column-gap:22px;row-gap:10px;padding:18px 20px;overflow:hidden}
html.om-mailpage body .mf-ov .mf-pane>.mx-body>.mf-ta{grid-column:1;grid-row:1;width:100%;height:100%;min-height:0;box-sizing:border-box;resize:none}
html.om-mailpage body .mf-ov .mf-pane>.mx-body>.mf-hint{grid-column:1;grid-row:2}
html.om-mailpage body .mf-ov .mf-pane>.mx-body>.mf-out,html.om-mailpage body .mf-ov .mf-pane>.mx-body>.om-exin{grid-column:2;grid-row:1/3;min-height:0;overflow:auto;overscroll-behavior:contain;margin:0}
html.om-mailpage body .mf-ov .mf-pane>.mx-body>.om-exin{align-self:start;max-height:100%}
/* 필터 탭: 왼쪽 고르기 | 오른쪽 목록 */
html.om-mailpage body .mf-ov .mf-pane:has(>.mx-ctl){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
html.om-mailpage body .mf-ov .mf-pane>.mx-ctl{grid-column:1;grid-row:1;min-height:0;overflow:auto;scrollbar-gutter:stable;padding:18px 20px;border:0;border-right:1px solid var(--rule-2,#E5E9F0)}
html.om-mailpage body .mf-ov .mf-pane:has(>.mx-ctl)>.mx-body{grid-column:2;grid-row:1;height:auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:14px 20px}
}

/* 휴대폰 — 위에서 아래로 */
@media (max-width:820px){
html.om-mailpage body footer{display:none!important}
html.om-mailpage body .mf-ov{bottom:0}
html.om-mailpage body .mf-ov .mx-pn{display:flex;flex-direction:column;gap:10px;padding-bottom:84px}
html.om-mailpage body .mf-ov .mf-tabs{order:0;display:flex;width:100%}
html.om-mailpage body .mf-ov .mf-tabs .mf-tab{flex:1 1 0;min-width:0;padding:8px 6px;font-size:12.5px;overflow:hidden;text-overflow:ellipsis}
html.om-mailpage body .mf-ov .om-top{order:1;justify-content:flex-start}
html.om-mailpage body .mf-ov .om-grid{order:2}
html.om-mailpage body .mf-ov .om-steps{grid-template-columns:minmax(0,1fr);gap:12px;padding:12px 14px}
html.om-mailpage body .mf-ov .om-step .om-sh{white-space:normal}
html.om-mailpage body .mf-ov .mf-pane{order:3}
html.om-mailpage body .mf-ov .mf-pane>.mx-body>.om-exin{margin-top:12px}
html.om-mailpage body header .bar{flex-wrap:nowrap}
html.om-mailpage body header .bar .tools{flex:0 0 auto;width:auto;max-width:none;margin-left:auto}
}

/* 데스크톱 — 상단 로고·도구와 하단 두 버튼을 본문 폭(최대 1172px · 좌우 26px) 끝선에 맞춘다(v1.4) */
@media (min-width:821px){
html.om-mailpage body header .bar{max-width:1172px;margin-left:auto;margin-right:auto;box-sizing:border-box}
html.om-mailpage body #gaportal{left:max(14px,calc((100vw - 1172px)/2 + 26px))!important}
html.om-mailpage body #gabar.dk{left:auto!important;right:max(14px,calc((100vw - 1172px)/2 + 26px))!important}
}