/* 엔메일 공통 토큰·베이스 (모든 화면 공유) */
:root{--navy:#1f5fd6;--navy-d:#1746a0;--navy-l:#4b84ff;--navy-t:#1f5fd6;--on-navy:#fff;--ring:rgba(31,95,214,.12);--ink:#1a1f2b;--muted:#6b7280;--line:#e8ebf1;--bg:#f4f6fb;--hover:#f2f6ff;--sel:#e7f0ff;--red:#c0362f;--ph:#b3bac4;--navy-b:#9fbbf2;}
*{box-sizing:border-box} html,body{height:100%;margin:0}
::placeholder{color:var(--ph);opacity:1}
button,input,select,textarea{font-family:inherit}
body{font-family:'Pretendard Variable','Pretendard','Malgun Gothic','맑은 고딕',system-ui,sans-serif;color:var(--ink);background:var(--bg);font-size:14px}

/* 상단바 */
.top{height:56px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 18px}
.top h1{font-size:17px;margin:0;letter-spacing:-.3px}
.logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--navy),var(--navy-l));display:grid;place-items:center;color:var(--on-navy);font-weight:800}
.spacer{flex:1}
.who{color:var(--muted);font-size:13px}.who b{color:var(--ink)}
.lo{border:1px solid var(--line);background:#fff;border-radius:8px;height:34px;padding:0 12px;cursor:pointer;font-size:13px;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center}
.lo:hover{background:var(--hover)}

/* 좌측 사이드바(폴더) */
.side{background:#fbfcff;border-right:1px solid var(--line);padding:14px 10px;overflow:auto}
/* 메일쓰기 + 내게쓰기: 한 줄 (네이버 방식) */
.cmprow{display:flex;gap:6px;margin-bottom:14px}
.compose,.compose2{flex:1 1 0;min-width:0;height:44px;border-radius:10px;font-weight:700;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap}
.compose{border:1px solid var(--navy);background:var(--navy);color:var(--on-navy)}
.compose:hover{background:var(--navy-d);border-color:var(--navy-d)}
.compose2{border:1px solid var(--line);background:#fff;color:var(--navy-t)}
.compose2:hover{background:var(--hover)}
.fld{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;color:var(--ink);text-decoration:none;font-size:13.5px;margin-bottom:2px;cursor:pointer}
.fld:hover{background:var(--hover)}
.fld.on{background:var(--sel);color:var(--navy-t);font-weight:700}
.fld .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fld .cnt{color:#aab1bd;font-size:12px}
.badge{background:var(--navy);color:var(--on-navy);border-radius:10px;font-size:11px;padding:1px 7px;min-width:18px;text-align:center}
.fld{position:relative}
.fld .fctl{display:none;color:#9aa1ad;font-size:12px;padding:0 3px;cursor:pointer}
.fld .fctl:hover{color:var(--navy-t)} .fld .fctl.del:hover{color:var(--red)}
.fld:hover .fctl{display:inline}
.newfld{width:100%;height:34px;border:1px dashed #c3cde0;border-radius:9px;background:#fff;color:var(--muted);font-size:13px;cursor:pointer;margin-top:8px}
.newfld:hover{background:var(--hover);color:var(--navy-t)}
.quota{margin-top:14px;padding:0 4px}
.qbar{height:7px;background:#eef1f6;border-radius:6px;overflow:hidden}
.qbar .qfill{display:block;height:100%;background:linear-gradient(90deg,var(--navy),var(--navy-l));width:0}
.qtxt{font-size:11.5px;color:#9aa1ad;margin-top:5px}
/* 사이드바의 주소록 링크(폴더 목록 아래, 구분선) */
.fld.abook{margin-top:10px;border-top:1px solid var(--line);border-radius:0 0 9px 9px;padding-top:11px}

/* 브랜드 로고(컴포넌트) */
.blogo{height:30px;max-width:180px;object-fit:contain}
.blogo.lg{height:auto;max-height:40px;max-width:230px}
.logo.lg{width:34px;height:34px;font-size:18px;border-radius:9px}

/* 공통 카드 */
.card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 30px rgba(31,95,214,.06)}

/* 공통 버튼 */
.btn{height:42px;border:0;border-radius:9px;background:var(--navy);color:var(--on-navy);font-weight:700;padding:0 20px;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--navy-d)} .btn:disabled{opacity:.5}
.btn.ghost{background:#fff;color:var(--red);border:1px solid #f0c9c6}
.btn.ghost:hover{background:#fdf2f1}
.btn.sm{height:30px;padding:0 12px;font-size:12.5px;font-weight:600}

/* 공통 알림문구 */
.msg{font-size:13px}.msg.ok{color:#1a7f37}.msg.err{color:var(--red)}

/* 공통 유틸 */
.is-hidden{display:none}
.m0{margin:0}
.lo.accent{color:var(--navy-t);font-weight:700}

/* 좁은 화면(공통): 사이드바를 위쪽 가로 스크롤 칩 줄로 바꿔 폴더 이름·건수를 그대로 보여주고, 상단바는 로고·버튼만 남긴다.
   사이드바를 쓰는 모든 화면(받은편지함·메일쓰기)이 함께 적용받고, 화면 격자(세로 2줄)는 각 화면 CSS 의 .wrap 에서 정한다 */
@media(max-width:900px){
  .top h1,.who{display:none}
  .side{display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;padding:8px 10px;border-right:0;border-bottom:1px solid var(--line);scrollbar-width:none}
  .side::-webkit-scrollbar{display:none}
  .cmprow{flex:none;margin:0;gap:6px}
  .compose,.compose2{flex:none;height:34px;padding:0 14px;font-size:13px}
  .fld{flex:none;height:34px;margin:0;padding:0 12px;border:1px solid var(--line);border-radius:17px;background:#fff;white-space:nowrap}
  .fld.on{border-color:var(--navy-b)}
  .fld .nm{flex:none}
  .fld .fctl{display:none!important}
  .newfld{flex:none;width:auto;height:34px;margin:0;padding:0 12px;border-radius:17px}
  .quota{display:none}
  .fld.abook{margin-top:0;padding-top:0;border-radius:17px}
}