/* mail.css — AETA 웹메일. a03 테마 실측값에 맞춤(2026-08-08)
   헤더 #222 / 강조 #2188d8 / hover #3a8afd / 보조 #576f8d / 경계 #e0e0e0 / Noto Sans KR */
:root{
  --hd:#222; --brand:#2188d8; --brand-2:#3170bf; --hover:#3a8afd; --muted:#576f8d;
  --line:#e0e0e0; --line-2:#f0f0f0; --bg:#f4f6f8; --card:#fff;
  --txt:#222; --txt-2:#666; --txt-3:#9aa3ad; --unread:#0b0b0b;
  --sidew:230px; --hdh:60px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Noto Sans KR','Malgun Gothic',dotum,sans-serif;
  color:var(--txt); background:var(--bg); font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ── 헤더 ─────────────────────────────────────── */
#m-header{
  position:fixed; top:0; left:0; right:0; height:var(--hdh); z-index:100;
  background:var(--hd); color:#fff; display:flex; align-items:center; gap:14px;
  padding:0 18px; box-shadow:0 1px 0 rgba(0,0,0,.25);
}
.m-menu-btn{display:none; color:#fff; font-size:20px; width:28px}
.m-logo a{display:flex; align-items:center; gap:9px; color:#fff}
.m-logo img{height:26px; vertical-align:middle}
.m-logo span{font-weight:400; font-size:15px; color:#cfd6de; letter-spacing:.04em; padding-left:9px; border-left:1px solid #444}
.m-account{margin-left:auto; display:flex; align-items:center; gap:14px; font-size:13px}
.m-addr{color:#e6ebf0}
.m-addr .fa{color:var(--hover); margin-right:5px}
.m-home{
  border:1px solid #4a4f56; padding:5px 12px; border-radius:3px; color:#dfe4e9; font-size:12px;
  display:inline-flex; align-items:center; gap:6px; transition:all .2s;
}
.m-home .fa{font-size:14px; color:#aeb6bf}
.m-home:hover{background:#fff; color:var(--hd); border-color:#fff}
.m-home:hover .fa{color:var(--hd)}
.m-logout{
  border:1px solid #4a4f56; padding:5px 12px; border-radius:3px; color:#dfe4e9; font-size:12px;
  transition:all .2s;
}
.m-logout:hover{background:#fff; color:var(--hd); border-color:#fff}

/* ── 셸(사이드바+본문) ─────────────────────────── */
.m-shell{display:flex; padding-top:var(--hdh); min-height:100dvh}
.m-side{
  width:var(--sidew); flex:0 0 var(--sidew); background:var(--card);
  border-right:1px solid var(--line); padding:18px 14px; position:sticky; top:var(--hdh);
  height:calc(100dvh - var(--hdh)); display:flex; flex-direction:column; gap:6px;
}
.m-compose{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--brand); color:#fff !important; font-weight:500; font-size:15px;
  padding:12px; border-radius:6px; margin-bottom:12px; box-shadow:0 2px 6px rgba(33,136,216,.28);
  transition:all .2s;
}
.m-compose:hover{background:var(--brand-2); transform:translateY(-1px); box-shadow:0 4px 12px rgba(33,136,216,.34)}
.m-compose:active{transform:translateY(0)}
.m-folders{display:flex; flex-direction:column; gap:1px}
.m-folders a{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:5px;
  color:#3a4149; font-size:14px; transition:background .15s, color .15s;
}
.m-folders a .fa{width:17px; text-align:center; color:var(--txt-3); font-size:15px}
.m-folders a:hover{background:var(--line-2)}
.m-folders a.on{background:#eaf4fd; color:var(--brand-2); font-weight:600}
.m-folders a.on .fa{color:var(--brand)}
.m-fname{flex:1}
.m-badge{background:var(--brand); color:#fff; font-size:11px; font-style:normal; padding:1px 7px; border-radius:9px; font-weight:600}
.m-count{color:var(--txt-3); font-size:12px; font-style:normal}
.m-settings{
  margin-top:6px; display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:5px;
  color:#3a4149; font-size:14px;
}
.m-settings .fa{width:17px; text-align:center; color:var(--txt-3)}
.m-settings:hover{background:var(--line-2)}
.m-storage{margin-top:auto; padding:12px 6px 4px; border-top:1px solid var(--line-2)}
.m-storage-bar{height:6px; background:var(--line); border-radius:4px; overflow:hidden}
.m-storage-bar span{display:block; height:100%; background:linear-gradient(90deg,var(--brand),var(--hover))}
.m-storage-txt{font-size:11px; color:var(--txt-3); margin-top:6px}

.m-main{flex:1; min-width:0; padding:22px 26px 40px}

/* ── 미리보기 안내 배너 ───────────────────────── */
.m-demo-note{
  background:#fff8e6; border:1px solid #f2dc9a; color:#6b5626; border-radius:7px;
  padding:11px 15px; font-size:13px; margin-bottom:18px; display:flex; gap:9px; align-items:baseline;
}
.m-demo-note .fa{color:#d9a441}
.m-demo-note span{color:#7a6a3e}

/* ── 목록 헤더(제목·검색·도구) ─────────────────── */
.m-listhead{display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap}
.m-listhead h2{margin:0; font-size:20px; font-weight:700; letter-spacing:-.01em}
.m-listhead .m-total{color:var(--txt-3); font-size:13px; font-weight:400}
.m-search{margin-left:auto; position:relative}
.m-search input{
  width:280px; max-width:52vw; padding:9px 14px 9px 36px; border:1px solid var(--line);
  border-radius:20px; font-size:13px; background:#fff; transition:border .2s, box-shadow .2s;
}
.m-search input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(33,136,216,.12)}
.m-search .fa{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--txt-3)}

/* ── 도구줄(전체선택·읽음·삭제) ───────────────── */
.m-toolbar{display:flex; align-items:center; gap:8px; padding:8px 4px; margin-bottom:4px}
.m-toolbar label{display:flex; align-items:center; gap:7px; color:var(--txt-2); font-size:13px; cursor:pointer}
.m-btn{
  background:#fff; border:1px solid var(--line); color:#455; padding:6px 12px; border-radius:5px;
  font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:all .15s;
  font-family:inherit;
}
.m-btn:hover{border-color:#c3ccd4; background:#fafbfc}
.m-btn .fa{color:var(--txt-3)}
.m-btn.m-btn-primary{background:var(--brand); border-color:var(--brand); color:#fff}
.m-btn.m-btn-primary:hover{background:var(--brand-2)}
.m-btn.m-btn-primary .fa{color:#fff}
.m-spacer{margin-left:auto}

/* ── 메일 목록 ─────────────────────────────────── */
.m-list{background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.m-row{
  display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line-2);
  transition:background .12s; position:relative;
}
.m-row:last-child{border-bottom:none}
.m-row:hover{background:#f7fafd}
.m-row.unread{background:#fff}
.m-row.unread .m-subj,.m-row.unread .m-sender{color:var(--unread); font-weight:700}
.m-row .m-chk{flex:0 0 auto}
.m-star{flex:0 0 auto; color:#d4d9de; font-size:16px; cursor:pointer; background:none; border:none; padding:2px}
.m-star.on{color:#f5b301}
.m-star:hover{color:#f5b301}
.m-sender{flex:0 0 160px; color:#333; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.m-rowmain{flex:1; min-width:0; overflow:hidden}
.m-rowmain a{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.m-subj{color:#2a2f35}
.m-prev{color:var(--txt-3); font-weight:400}
.m-meta{flex:0 0 auto; display:flex; align-items:center; gap:12px; color:var(--txt-3); font-size:12px}
.m-attach{color:#9aa3ad}
.m-when{min-width:60px; text-align:right}
.m-demo-tag{
  flex:0 0 auto; font-size:10px; color:#b08a2a; background:#fdf3d6; border:1px solid #f0e0ac;
  padding:1px 6px; border-radius:3px; font-weight:600;
}

/* ── 빈 상태 ───────────────────────────────────── */
.m-empty{text-align:center; padding:70px 20px; color:var(--txt-3)}
.m-empty .fa{font-size:46px; color:#d7dde3; margin-bottom:16px}
.m-empty h3{margin:0 0 8px; color:#5a636c; font-weight:600; font-size:17px}
.m-empty p{margin:0; font-size:14px}

/* ── 페이지네이션 ─────────────────────────────── */
.m-pager{display:flex; justify-content:center; gap:6px; margin-top:20px}
.m-pager a,.m-pager span{
  min-width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:5px; color:#556; font-size:13px; background:#fff;
}
.m-pager a:hover{border-color:var(--brand); color:var(--brand)}
.m-pager .on{background:var(--brand); border-color:var(--brand); color:#fff}

/* ── 메일 본문 보기 ───────────────────────────── */
.m-view{background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.m-view-top{padding:20px 26px; border-bottom:1px solid var(--line)}
.m-view-subj{font-size:21px; font-weight:700; margin:0 0 14px; letter-spacing:-.01em; display:flex; align-items:center; gap:10px}
.m-view-from{display:flex; align-items:center; gap:12px}
.m-view-avatar{
  width:42px; height:42px; border-radius:50%; background:var(--muted); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:600; flex:0 0 auto;
}
.m-view-fromtxt{flex:1; min-width:0}
.m-view-fromtxt b{font-size:14px}
.m-view-fromtxt .m-view-addr{color:var(--txt-3); font-size:12px}
.m-view-date{color:var(--txt-3); font-size:12px; white-space:nowrap}
.m-view-body{padding:26px; font-size:15px; line-height:1.8; color:#2b3138; min-height:180px; word-break:break-word}
.m-view-body p{margin:0 0 14px}
.m-attachbox{margin:0 26px 22px; padding:14px 16px; background:#f7fafd; border:1px solid var(--line); border-radius:7px}
.m-attachbox h4{margin:0 0 10px; font-size:12px; color:var(--txt-2); font-weight:600}
.m-attach-item{display:flex; align-items:center; gap:10px; font-size:13px; color:#455; padding:6px 0}
.m-attach-item .fa{color:var(--muted); font-size:18px}
.m-attach-item .m-fsize{color:var(--txt-3); font-size:12px}
.m-view-actions{padding:16px 26px; border-top:1px solid var(--line); display:flex; gap:10px; flex-wrap:wrap}
.m-back{margin-bottom:16px; display:inline-flex; align-items:center; gap:7px; color:var(--txt-2); font-size:13px}
.m-back:hover{color:var(--brand)}

/* ── 편지 쓰기 폼 ─────────────────────────────── */
/* ⚠️ 폭은 목록·메일보기(.m-list/.m-view)와 같이 본문 영역을 꽉 채운다 — max-width 를 두면 그 화면들보다 좁아 보인다(2026-08-08 사용자 지적) */
.m-compose-card{background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.m-compose-card h2{margin:0; padding:18px 24px; font-size:17px; border-bottom:1px solid var(--line); background:#fafbfc}
.m-field{display:flex; align-items:center; border-bottom:1px solid var(--line-2); padding:0 24px}
.m-field label{flex:0 0 76px; color:var(--txt-2); font-size:13px}
.m-field input{flex:1; border:none; padding:13px 0; font-size:14px; font-family:inherit; background:none}
.m-field input:focus{outline:none}
/* 받는사람 줄의 참조/숨은참조 토글 */
.m-hidden{display:none !important}
.m-ccbcc-toggle{flex:0 0 auto; display:flex; gap:10px; padding-left:12px}
.m-ccbcc-toggle a{color:#8a929b; font-size:12px}
.m-ccbcc-toggle a:hover{color:var(--brand)}
/* 첨부 영역 */
.m-attach-row{display:flex; align-items:center; gap:12px; padding:12px 24px; border-top:1px solid var(--line-2); flex-wrap:wrap}
.m-attach-btn{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:5px; padding:7px 13px; font-size:13px; color:#455; cursor:pointer; background:#fff; transition:all .15s}
.m-attach-btn:hover{border-color:var(--brand); color:var(--brand)}
.m-attach-btn .fa{color:var(--muted)}
.m-attach-list{display:flex; gap:8px; flex-wrap:wrap; flex:1; min-width:120px}
.m-chip{display:inline-flex; align-items:center; gap:8px; background:#f0f5fa; border:1px solid #d9e4ee; border-radius:16px; padding:5px 6px 5px 12px; font-size:12px; color:#3a4652; max-width:240px}
.m-chip .m-chip-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.m-chip .m-chip-size{color:#8a929b; flex:0 0 auto}
.m-chip .m-chip-x{flex:0 0 auto; width:18px; height:18px; border:none; background:#d9e4ee; color:#5a6b7a; border-radius:50%; cursor:pointer; font-size:12px; line-height:1; display:flex; align-items:center; justify-content:center; padding:0}
.m-chip .m-chip-x:hover{background:#cc3333; color:#fff}
.m-attach-hint{color:var(--txt-3); font-size:11px; margin-left:auto}

.m-compose-body{padding:16px 24px}
.m-compose-body textarea{
  width:100%; min-height:300px; border:none; resize:vertical; font-size:15px; line-height:1.8;
  font-family:inherit; color:#2b3138;
}
.m-compose-body textarea:focus{outline:none}
.m-compose-foot{padding:14px 24px; border-top:1px solid var(--line); display:flex; align-items:center; gap:12px; background:#fafbfc}
.m-sig-note{color:var(--txt-3); font-size:12px; margin-left:auto}
.m-flash{padding:12px 16px; border-radius:6px; margin-bottom:16px; font-size:14px}
.m-flash.ok{background:#e9f7ec; border:1px solid #bfe6c8; color:#276b38}
.m-flash.err{background:#fdecec; border:1px solid #f2c4c4; color:#a23}

/* ── 환경설정 ─────────────────────────────────── */
.m-settings-card{background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.m-settings-card h2{margin:0; padding:18px 24px; font-size:17px; border-bottom:1px solid var(--line); background:#fafbfc}
.m-set-row{padding:18px 24px; border-bottom:1px solid var(--line-2)}
.m-set-row:last-of-type{border-bottom:none}
.m-set-row label.m-set-label{display:block; font-weight:600; font-size:14px; margin-bottom:8px}
.m-set-row .m-hint{color:var(--txt-3); font-size:12px; margin-top:6px}
.m-set-row textarea,.m-set-row select,.m-set-row input[type=text]{
  width:100%; border:1px solid var(--line); border-radius:6px; padding:10px 12px; font-size:14px;
  font-family:inherit; color:#2b3138;
}
.m-set-row textarea{min-height:110px; resize:vertical}
.m-set-row select{width:auto; min-width:160px}
.m-set-foot{padding:16px 24px; background:#fafbfc; border-top:1px solid var(--line)}

/* ── 푸터 ─────────────────────────────────────── */
.m-footer{
  padding:16px 26px; color:var(--txt-3); font-size:12px; text-align:center;
  border-top:1px solid var(--line); background:var(--card);
}
.m-footer a:hover{color:var(--brand)}
.m-copy{color:#b3bac1}

/* ── 반응형 ───────────────────────────────────── */
@media (max-width:820px){
  .m-menu-btn{display:block}
  .m-logo span{display:none}
  .m-side{
    position:fixed; left:0; top:var(--hdh); z-index:90; transform:translateX(-100%);
    transition:transform .25s; box-shadow:4px 0 18px rgba(0,0,0,.12);
  }
  .m-side.open{transform:translateX(0)}
  .m-main{padding:16px 14px 32px}
  .m-sender{flex-basis:110px}
  .m-prev{display:none}
  .m-search input{width:150px}
  .m-view-body{padding:18px}
}
@media (max-width:520px){
  .m-account .m-addr{max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .m-home-txt{display:none}          /* 좁은 화면은 홈 아이콘만 */
  .m-home{padding:5px 9px}
  .m-sender{display:none}
  .m-when{min-width:44px}
}