:root{--ink:#17212b;--muted:#667481;--line:#e3e8ec;--paper:#fff;--wash:#f4f7f8;--brand:#116b5a;--brand2:#0b4d42;--accent:#e1f3ee;--danger:#b42318;--shadow:0 18px 55px rgba(23,33,43,.12)}*{box-sizing:border-box}html,body,#app{min-height:100%;margin:0}body{font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;background:var(--wash);color:var(--ink)}button,input,textarea{font:inherit}button{cursor:pointer}.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 18% 15%,#d7f0e9 0,transparent 32%),linear-gradient(145deg,#f8faf9,#edf3f2)}.login-card{width:min(430px,100%);background:#fff;border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow);border-radius:28px;padding:38px}.mark{display:flex;align-items:center;gap:12px;color:var(--brand2);font-weight:800;font-size:22px;letter-spacing:-.03em}.mark-dot{width:37px;height:37px;border-radius:12px;background:linear-gradient(135deg,#1e8f78,var(--brand2));display:grid;place-items:center;color:white}.login h1{font-size:27px;margin:34px 0 8px}.login p{color:var(--muted);line-height:1.7;margin:0 0 25px}.field{display:grid;gap:7px;margin:15px 0}.field label{font-weight:700;font-size:13px}.field input,.field textarea{width:100%;border:1px solid #cfd8dd;border-radius:12px;padding:13px 14px;outline:none;background:#fff}.field input:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(17,107,90,.12)}.primary{border:0;border-radius:12px;background:var(--brand);color:#fff;font-weight:800;padding:13px 18px}.primary:hover{background:var(--brand2)}.full{width:100%;margin-top:10px}.error{color:var(--danger);font-size:13px;min-height:20px}.shell{height:100vh;display:grid;grid-template-columns:250px minmax(330px,420px) 1fr;background:#fff}.sidebar{background:#102d2a;color:#d7e9e5;padding:20px 14px;display:flex;flex-direction:column;min-height:0;overflow-y:auto}.sidebar .mark{color:#fff;padding:5px 10px 25px}.compose{border:0;border-radius:14px;background:#e8f6f2;color:#103e36;padding:14px;font-weight:800;margin:0 6px 22px}.folders{display:grid;gap:4px}.folder{display:flex;align-items:center;justify-content:space-between;border:0;background:transparent;color:inherit;text-align:left;padding:11px 13px;border-radius:10px}.folder:hover,.folder.active{background:rgba(255,255,255,.11);color:#fff}.badge{font-size:11px;background:#e6fff8;color:#11493f;border-radius:12px;padding:2px 7px;font-weight:800}.account{margin-top:auto;padding:15px 10px 4px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;word-break:break-all}.link-btn{background:none;border:0;color:#b9d8d1;padding:8px 0}.list-pane{border-right:1px solid var(--line);background:#fbfcfc;min-width:0;min-height:0;display:flex;flex-direction:column}.topbar{height:74px;padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}.search{border:1px solid var(--line);border-radius:12px;background:#f2f5f6;padding:11px 13px;width:100%;outline:none}.messages{flex:1;min-height:0;overflow:auto}.message-row{width:100%;border:0;border-bottom:1px solid var(--line);background:#fff;text-align:left;padding:16px 18px;display:grid;gap:7px}.message-row:hover{background:#f3f8f6}.message-row.unread{border-left:4px solid var(--brand);font-weight:800}.row-line{display:flex;justify-content:space-between;gap:10px}.sender,.subject{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.date{color:var(--muted);font-size:11px;font-weight:500}.subject{font-size:13px;color:#48545e}.empty{padding:70px 25px;text-align:center;color:var(--muted)}.reader{min-width:0;min-height:0;display:flex;flex-direction:column;background:#fff}.reader-head{padding:25px 30px;border-bottom:1px solid var(--line)}.reader-head h2{font-size:21px;margin:0 0 15px}.meta{font-size:13px;color:var(--muted);line-height:1.7}.reader-actions{display:flex;gap:8px;margin-top:16px}.ghost{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 12px}.reader-body{padding:28px 32px;overflow:auto;line-height:1.75;white-space:pre-wrap}.html-mail{white-space:normal}.attachments{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.attachment{display:inline-flex;padding:8px 11px;border:1px solid var(--line);border-radius:9px;color:var(--brand);text-decoration:none;font-size:12px}.placeholder{margin:auto;text-align:center;color:var(--muted)}.compose-modal{position:fixed;inset:0;background:rgba(11,24,22,.42);display:grid;place-items:center;padding:18px;z-index:9}.composer{background:white;border-radius:20px;box-shadow:var(--shadow);width:min(680px,100%);max-height:92vh;overflow:auto;padding:24px}.composer-head{display:flex;justify-content:space-between;align-items:center}.composer h2{margin:0}.close{border:0;background:none;font-size:25px}.composer textarea{min-height:230px;resize:vertical}.composer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:14px}.notice{position:fixed;right:20px;bottom:20px;background:#153b35;color:#fff;border-radius:12px;padding:13px 17px;box-shadow:var(--shadow);z-index:20}.mobile-menu{display:none}@media(max-width:900px){.shell{grid-template-columns:220px 340px 1fr}}@media(max-width:720px){.shell{display:block;height:auto;min-height:100vh}.sidebar{position:fixed;z-index:8;inset:0 auto 0 0;width:260px;transform:translateX(-105%);transition:.2s}.sidebar.open{transform:none}.mobile-menu{display:block;border:0;background:transparent;font-size:22px}.list-pane{min-height:100vh}.reader{position:fixed;inset:0;z-index:6;transform:translateX(105%);transition:.2s}.reader.open{transform:none}.reader-head{padding:18px}.reader-body{padding:20px}.back{display:inline-block}.login-card{padding:28px 22px;border-radius:20px}}@media(min-width:721px){.back{display:none}}

/* 添付ファイル：ドラッグ＆ドロップ */
.dropzone { border: 2px dashed #cfd8d4; border-radius: 10px; padding: 14px; background: #fafbfa; transition: border-color .15s, background .15s; }
.dropzone.over { border-color: #0f5f4d; background: #eef7f4; }
.dropzone input[type="file"] { display: block; width: 100%; }
.dropzone-hint { margin: 8px 0 0; font-size: 12px; color: #6b7b76; }
.dropzone-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.attach-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #dfe6e3; border-radius: 999px; padding: 4px 6px 4px 10px; font-size: 12px; }
.attach-chip small { color: #8a9a95; }
.attach-chip button { border: none; background: #eef2f0; color: #45564f; border-radius: 50%; width: 18px; height: 18px; line-height: 1; cursor: pointer; }
.attach-chip button:hover { background: #e0342c; color: #fff; }