/* 메일: 메일함 | 목록 | 읽기 3단. 1100px 아래에서는 목록과 읽기를 번갈아 보여 주고, 760px 아래에서는 메일함이 위로 올라간다 */
.ml-body{margin-top:18px}
.ml-setup{max-width:720px}
.ml-setup .body-pad{padding:16px 18px 20px;display:grid;gap:14px}
.ml-wrap{display:grid;grid-template-columns:200px minmax(300px,380px) minmax(0,1fr);gap:12px;align-items:start;min-height:calc(100vh - 170px)}
.ml-folders{position:sticky;top:12px;display:flex;flex-direction:column;overflow:hidden}
.ml-fh{padding:12px}
.ml-fh .btn{width:100%;padding:10px}
.ml-fl{display:grid;gap:1px;padding:0 6px 8px}
.ml-f{display:flex;align-items:center;gap:8px;border:0;background:none;padding:7px 10px;border-radius:var(--r-sm);text-align:left;font-size:var(--fs-sm);min-width:0}
.ml-f:hover{background:var(--surface-2)}
.ml-f.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.ml-f .ic{width:18px;text-align:center;font-size:var(--fs-sm);flex:none}
.ml-f .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-f .cnt{font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--accent)}
.ml-f .cnt2{font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--muted)}
.ml-ff{display:grid;gap:2px;padding:8px 12px 12px;border-top:1px solid var(--line);justify-items:start}
.ml-ff .link{padding:3px 0;text-decoration:none}

.ml-list{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.ml-search{padding:10px 10px 6px}
.ml-tools{display:grid;gap:8px;padding:4px 10px 10px;border-bottom:1px solid var(--line)}
.ml-acts{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.ml-acts input[type=checkbox]{margin:0 4px 0 2px}
.sel.sm{padding:4px 6px;font-size:var(--fs-sm);border-radius:var(--r-sm)}
.ml-tools .chips .chip{padding:3px 10px;font-size:var(--fs-xs)}
.ml-rows{overflow:auto;max-height:calc(100vh - 330px);min-height:240px}
.ml-row{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:6px;align-items:start;padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.ml-row:hover{background:var(--surface-2)}
.ml-row.on{background:var(--accent-soft)}
.ml-row input[type=checkbox]{margin:3px 0 0}
.ml-row .star{border:0;background:none;color:var(--line);font-size:var(--fs-lg);line-height:1;padding:1px 2px}
.ml-row .star.on{color:var(--star)}
.ml-m{min-width:0;display:grid;gap:2px}
.ml-l1{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-sm)}
.ml-who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.ml-date{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.ml-l2{display:flex;align-items:center;gap:5px;min-width:0;font-size:var(--fs-sm)}
.ml-subj{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-row.unseen .ml-who{color:var(--fg);font-weight:700}
.ml-row.unseen .ml-subj{font-weight:700}
.ml-row.unseen{box-shadow:inset 3px 0 0 var(--accent)}
.ml-ans{color:var(--muted);font-size:var(--fs-xs)}
.ml-pager{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:8px 10px}
.ml-row.ob{grid-template-columns:minmax(0,1fr) auto;cursor:default}
.ob-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

.ml-read{min-width:0;min-height:420px}
.ml-rhead{padding:14px 18px 12px;border-bottom:1px solid var(--line);display:grid;gap:6px}
.ml-ract{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px}
.ml-ract a.btn{line-height:1.4}
.ml-back{display:none}
.ml-subject{font-size:var(--fs-xl);line-height:1.4;overflow-wrap:anywhere}
.ml-from{display:flex;gap:4px;align-items:baseline;flex-wrap:wrap;font-size:var(--fs-sm)}
.ml-when{margin-left:auto;font-size:var(--fs-xs);color:var(--muted)}
.ml-ppl{font-size:var(--fs-sm);color:var(--muted);overflow-wrap:anywhere}
.ml-ppl .k{font-weight:600;margin-right:6px}
.ml-imgbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 18px 0;padding:8px 12px;border-radius:var(--r-ctl);background:var(--warn-soft);color:var(--warn);font-size:var(--fs-sm)}
.ml-imgbar .btn{margin-left:auto}
.ml-atts{padding:12px 18px 0}
.ml-body-wrap{padding:12px 18px 18px}
.ml-frame{display:block;width:100%;height:240px;border:1px solid var(--line);border-radius:var(--r-ctl);background:#fff}

/* 쓰기 */
dialog .ml-compose .body{gap:10px}
.ad-row{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:8px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:8px}
.ad-row .k{font-size:var(--fs-sm);font-weight:600;color:var(--muted)}
.ad-row[hidden]{display:none!important}
.ad-box{position:relative;display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-height:34px;cursor:text}
.ad-q{flex:1 1 160px;min-width:120px;border:0;background:none;padding:6px 2px;outline:none}
.ad-subj{width:100%;border:0;background:none;padding:6px 2px;outline:none;font-weight:600;grid-column:2/4}
.ad-more{display:flex;gap:8px}
.pk-chip.bad{background:var(--danger-soft);color:var(--danger)}
.ad-box .pk-list{top:100%}
.ml-compose footer{align-items:center}
.ml-cl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ml-sched{display:inline-flex;gap:6px;align-items:center}
.ml-sched[hidden]{display:none!important}
.ml-undo{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;display:flex;gap:14px;align-items:center;background:var(--fg);color:var(--bg);padding:9px 10px 9px 16px;border-radius:var(--r-ctl);box-shadow:var(--shadow);font-size:var(--fs-sm)}
.ml-undo .btn{background:transparent;color:var(--bg);border-color:color-mix(in srgb,var(--bg) 40%,transparent)}
.ms-grid{display:grid;grid-template-columns:minmax(0,2fr) 90px minmax(0,1fr);gap:10px 12px}

@media (max-width:1100px){
  .ml-wrap{grid-template-columns:190px minmax(0,1fr)}
  .ml-wrap .ml-read{display:none}
  .ml-wrap.reading .ml-list{display:none}
  .ml-wrap.reading .ml-read{display:block}
  .ml-back{display:inline-block}
  .ml-rows{max-height:none}
}
@media (max-width:760px){
  .ml-wrap{grid-template-columns:1fr;min-height:0}
  .ml-folders{position:static}
  .ml-fl{display:flex;overflow-x:auto;padding:0 8px 8px}
  .ml-f{flex:none}
  .ml-ff{display:flex;flex-wrap:wrap;gap:4px 14px}
  .ad-row{grid-template-columns:1fr;gap:4px}
  .ad-subj{grid-column:auto}
  .ms-grid{grid-template-columns:1fr 1fr}
  .ml-rhead,.ml-body-wrap{padding-left:12px;padding-right:12px}
}