@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');

:root {
  /*
   * 스크롤 막대·기본 입력칸 같은 «브라우저가 그리는 것» 의 밝기.
   *
   * 이 값을 정해 두지 않으면 브라우저가 운영체제 설정을 따른다. 윈도우가
   * 다크 모드인 상태에서 웹메일만 밝게 켜면 **스크롤 막대만 까맣게 남는다**
   * (2026-08-05). 테마를 바꾸는 주체가 우리이므로 여기서 함께 정한다.
   */
  color-scheme: light;

  --bg: #f4f6f3;
  --surface: #ffffff;
  --surface-2: #fafbf9;
  --ink: #191d21;
  --ink-2: #525a63;
  --ink-3: #838d97;
  --line: #dee2dc;
  --line-soft: #ecefea;
  --accent: #1E6FBF;
  --accent-hover: #185a9c;
  --accent-soft: #e6f1fc;
  --on-accent: #ffffff;
  /* 안 읽음 기둥과 숫자에 쓴다. 흰 배경 위의 4px 짜리 굵은 선이라
     너무 진하면 목록 전체가 시끄러워진다. 조금 눅였다. */
  --signal: #c26a2c;
  --signal-soft: #fbeee6;
  --danger: #a32f22;
  --shadow: 0 1px 2px rgba(20, 30, 25, 0.06), 0 8px 24px rgba(20, 30, 25, 0.07);
  --radius: 10px;

  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
    'Segoe UI', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}

html[data-theme='dark'] {
  --bg: #121517;
  --surface: #1a1e21;
  --surface-2: #21262a;
  --ink: #e9ece9;
  --ink-2: #a2abb2;
  --ink-3: #79838b;
  color-scheme: dark;

  --line: #2b3237;
  --line-soft: #232a2e;
  --accent: #5FB0F0;
  --accent-hover: #7cc0f5;
  --accent-soft: #152b3d;
  --on-accent: #0b1620;
  --signal: #e08a45;
  --signal-soft: #33261b;
  --danger: #e0705f;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

/*
 * 스크롤 막대를 감춘다.
 *
 * 목록·사이드바·설정 등 스크롤이 걸리는 자리가 여럿인데, 막대가 저마다
 * 나타나 화면이 시끄러웠다. 스크롤 자체는 그대로 되고 막대만 보이지 않는다.
 *
 * 주의: 본문 iframe 은 다른 문서라 여기 영향을 받지 않는다(그쪽은 그대로
 * 막대가 나온다). 그리고 «더 있다» 는 신호가 사라지므로, 목록을 자르는
 * 화면을 새로 만들 때는 다른 방법으로 알려야 한다.
 */
* { scrollbar-width: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.hidden { display: none !important; }

/* ---------------- 로그인 ---------------- */

#login {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 40px 34px;
  box-shadow: var(--shadow);
}

.login-logo {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  margin-bottom: 18px;
}

.login-links {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-2);
}

.login-links a {
  color: var(--ink-2);
  text-decoration: none;
}

.login-links a:hover { color: var(--accent); text-decoration: underline; }
.login-links .sep { margin: 0 10px; color: var(--line); }
.login-links.signup { margin-top: 12px; }
.login-links.signup a { color: var(--accent); }

.login-note {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
  color: var(--ink-3);
}

.login-card h1 {
  margin: 0 0 4px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.login-card p.sub {
  margin: 0 0 28px;
  color: var(--ink-3);
  font-size: 14px;
}

.field { margin-bottom: 16px; }

.field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  padding: 13px 14px;
  font-size: 17px;
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
}

.field .hint {
  margin: 6px 2px 0;
  font-size: 12.5px;
  color: var(--ink-3);
}

.field input:focus {
  border-color: var(--accent);
  outline: none;
  background: var(--surface);
}

.pw-wrap { position: relative; }

.pw-wrap input { padding-right: 62px; }

#pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  padding: 7px 11px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-3);
  background: none;
  border: none;
  border-radius: 6px;
}

#pw-toggle:hover { color: var(--accent); background: var(--accent-soft); }
#pw-toggle[aria-pressed="true"] { color: var(--accent); }

.btn-primary {
  width: 100%;
  padding: 14px;
  margin-top: 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}

.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: default; }

.error-note {
  margin-top: 16px;
  padding: 11px 14px;
  font-size: 14.5px;
  color: var(--danger);
  background: var(--signal-soft);
  border-radius: 8px;
}

/* ---------------- 레이아웃 ---------------- */

#app {
  display: grid;
  grid-template-columns: 244px var(--list-w, 388px) 5px 1fr;
  height: 100vh;
  overflow: hidden;
}

/* 목록과 본문 사이 구분선. 끌어서 너비를 바꾼다. */
#splitter {
  position: relative;
  background: transparent;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
}

/* 실제 폭보다 넓게 잡아야 마우스로 집기 편하다 */
#splitter::after {
  content: '';
  position: absolute;
  inset: 0 -4px;
}

#splitter:hover, #splitter.dragging { background: var(--accent); }

/* ── 넓게 보기 ─────────────────────────────────────────────
   목록이 화면 전체 폭을 쓰고, 메일을 누르면 본문이 화면을 덮는다.
   제목이 긴 공문·공지가 많을 때 한 줄에 다 들어와서 훑기 좋다. */

#app[data-view="wide"] { grid-template-columns: 244px 1fr; }
#app[data-view="wide"] #splitter { display: none; }
#app[data-view="wide"] #list-pane { border-right: none; }

/* 목록과 본문이 같은 칸을 나눠 쓴다. 화면을 덮지 않으므로 사이드바가 남는다. */
#app[data-view="wide"] #list-pane,
#app[data-view="wide"] #reader {
  position: static;
  grid-column: 2;
  grid-row: 1;
}
#app[data-view="wide"] #reader.idle { display: none; }
#app[data-view="wide"].reading #list-pane { display: none; }
#app[data-view="wide"] .back-btn { display: inline-block !important; }

/* 열 제목 */
.col-head { display: none; }

#app[data-view="wide"] .col-head {
  display: flex;
  padding-top: 9px;
  padding-bottom: 9px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  cursor: default;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-3);
}
#app[data-view="wide"] .col-head:hover { background: var(--surface-2); }

.col-head .sortable { cursor: pointer; }
.col-head .sortable:hover { color: var(--accent) !important; }
.col-head .sortable::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  vertical-align: 1px;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
}
.col-head .sortable.desc::after { border-top: 4px solid currentColor; }
.col-head .sortable.asc::after { border-bottom: 4px solid currentColor; }
.col-head .sortable.on { color: var(--accent) !important; }
/* 열 머리의 전체 선택은 실제로 누를 수 있다(자리표시가 아니다).
   열 머리는 「미리보기」·「목록만」 양쪽에서 나오므로, 넓은 화면에서는
   도구막대 쪽을 감춘다. 좁은 화면에서는 열 머리가 통째로 숨으니
   도구막대 것이 유일한 전체 선택이다 — 이 조건을 빼면 휴대폰에서 사라진다. */
@media (min-width: 721px) {
  .list-tools > #check-all { display: none; }
}
.col-head #check-all-col { cursor: pointer; }
#app[data-view="wide"] .col-head .row-from,
#app[data-view="wide"] .col-head .row-addr,
#app[data-view="wide"] .col-head .row-subject,
#app[data-view="wide"] .col-head .row-date {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-3);
}

/* 두 줄이던 행을 한 줄로 편다. display:contents 로 중간 상자를 없앤다. */
#app[data-view="wide"] .row { align-items: center; gap: 14px; }
#app[data-view="wide"] .row-body,
#app[data-view="wide"] .row-top { display: contents; }
#app[data-view="wide"] .row-check { margin-top: 0; }

#app[data-view="wide"] .row-from {
  order: 1;
  flex: 0 0 140px;
  width: 140px;
}
#app[data-view="wide"] .row-addr {
  order: 2;
  flex: 0 0 200px;
  width: 200px;
}
#app[data-view="wide"] .row-subject {
  order: 3;
  flex: 1;
  min-width: 0;
  margin: 0;
}
/* 날짜도 다른 칸처럼 «왼쪽에서 시작하는 한 칸» 으로 둔다.
   폭을 고정하지 않으면 칸마다 글자 길이가 달라 머리글과 어긋난다.
   «25.09.09 02:38» 이 가장 긴 형태라 그것에 맞춘다. */
#app[data-view="wide"] .row-date {
  order: 4;
  flex: 0 0 112px;
  width: 112px;
  margin-left: auto;
  text-align: left;
}

@media (max-width: 1240px) {
  #app[data-view="wide"] .row-addr { display: none; }
}
@media (max-width: 900px) {
  #app[data-view="wide"] .row-from { flex-basis: 110px; width: 110px; }
}

/* --- 사이드바 --- */

#sidebar {
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  overflow: hidden;
}

.brand {
  padding: 18px 18px 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.brand-icon { border-radius: 9px; flex: 0 0 auto; }

.brand-text { min-width: 0; }

.brand strong {
  display: block;
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.brand-text span {
  display: block;
  font-size: 11.5px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* 시그니처: 연결이 열려 있다는 사실 자체를 보여준다 */
.link-state {
  margin: 0 16px 16px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--accent-soft);
  border-radius: 8px;
}

.link-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
  animation: breathe 2.6s ease-in-out infinite;
}

.link-state.down { background: var(--signal-soft); }
.link-state.down .link-dot { background: var(--signal); animation: none; }

.link-ms {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.28; }
}

@media (prefers-reduced-motion: reduce) {
  .link-dot { animation: none; }
}

.compose-actions {
  display: flex;
  gap: 8px;
  margin: 0 16px 18px;
}

.compose-btn {
  flex: 1;
  /* 13px 은 사이드바에서 너무 큰 덩어리가 된다. 아래 편지함 목록과
     균형이 맞을 만큼만 줄인다. */
  padding: 10px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}

.compose-btn:hover { background: var(--accent-hover); }

.compose-btn.ghost {
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.compose-btn.ghost:hover { color: var(--accent); border-color: var(--accent); background: var(--surface); }

#folders {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 10px 12px;
}

.folder {
  position: relative;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* 하위 편지함은 들여쓴다. --depth 는 app.js 가 경로 깊이로 채운다.
     관리 화면(.box-row)과 같은 규칙이라 두 화면의 모양이 어긋나지 않는다. */
  padding: 11px 12px;
  padding-left: calc(12px + var(--depth, 0) * 16px);
  margin-bottom: 2px;
  text-align: left;
  font-size: 15.5px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--ink-2);
}

.folder:hover { background: var(--line-soft); }

.folder.active {
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 700;
}

.folder.active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.folder .fname {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder .fcount {
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--signal);
}

/* 스팸 편지함 숫자. «읽어야 할 메일» 이 아니라 «한번 확인해 보라» 는 뜻이라
   받은 편지함과 같은 세기로 보이면 안 된다. */
.folder .fcount.quiet {
  font-weight: 600;
  color: var(--ink-3);
}

.sidebar-foot {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-3);
}

.sidebar-foot .who {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foot-actions { display: flex; gap: 6px; align-items: center; }

/* 로그아웃은 내용만큼만 차지한다.
   바탕을 채우면 「메일쓰기」와 섞여 눌러야 할 것처럼 보인다. 나가는 단추라
   눈에는 띄되 손이 먼저 가면 안 되므로, 테두리와 글자에만 색을 준다. */
.foot-actions .logout {
  flex: 1;
  padding: 6px 14px;
  font-weight: 700;
  color: var(--accent);
  border-color: var(--accent);
}
.foot-actions .logout:hover { color: var(--on-accent); background: var(--accent); }

/* 로그아웃과 아이콘 사이도 아이콘끼리와 같은 간격으로 둔다.
   margin-left:auto 로 밀어붙이면 그 사이만 유난히 벌어진다. */

.icon-btn {
  padding: 6px 9px;
  font-size: 13px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink-2);
}

.icon-btn:hover { background: var(--line-soft); }

/* --- 목록 --- */

#list-pane {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow: hidden;
}

.list-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 8px;
  align-items: center;
}

#search-field {
  flex: none;
  padding: 9px 10px;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
#search-field:focus { outline: none; border-color: var(--accent); }

#search {
  max-width: 400px;
  flex: 1;
  padding: 9px 12px;
  font-size: 15px;
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  border-radius: 8px;
}

#search:focus { border-color: var(--accent); outline: none; }



.range-custom { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); }
.range-custom input { width: 132px; }


#messages { flex: 1; overflow-y: auto; }

/* --- 페이지네이션 (포털과 동일한 형태) --- */

.pager {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.pager button.nav {
  min-width: 30px;
  padding: 6px 7px;
  border-color: transparent;
  color: var(--ink-3);
}
.pager button.nav:hover:not(:disabled) { border-color: var(--accent); }

.pager button {
  min-width: 32px;
  padding: 6px 9px;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.pager button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }

.pager button.current {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}

.pager button:disabled { opacity: 0.4; cursor: default; }
.pager .gap { padding: 0 2px; color: var(--ink-3); }

.pager-info {
  position: absolute;
  right: 16px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

@media (max-width: 900px) {
  .pager-info { display: none; }
}

.row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 14px 16px 14px 22px;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  user-select: none;   /* Shift+클릭이 텍스트를 끌어 선택하지 않도록 */
}

.row-body { flex: 1; min-width: 0; }

/* 체크박스는 평소엔 옅게, 마우스를 올리거나 선택되면 또렷하게 */
.row-check {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  border: 2px solid var(--ink-3);
  border-radius: 4px;
  opacity: 0.55;
  transition: opacity .12s, border-color .12s, background .12s;
}

.row:hover .row-check { opacity: 1; }

.row-check.on {
  opacity: 1;
  background: var(--accent);
  border-color: var(--accent);
  position: relative;
}

.row-check.on::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid var(--on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.row.checked { background: var(--accent-soft); }

.list-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  flex-wrap: wrap;
}

.list-tools > .row-check { opacity: 1; cursor: pointer; }

/* 「N개 선택 ✕」 — 선택 모드에서 빠져나가는 문.
   고른 것이 있을 때만 누를 수 있는 모양이 된다. */
.filter-count.clearable {
  padding: 3px 9px;
  color: var(--accent);
  font-weight: 700;
  background: var(--signal-soft, var(--surface));
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
}
.filter-count.clearable:hover { color: var(--on-accent); background: var(--accent); }

.list-tools button {
  padding: 6px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.list-tools button:hover:not(:disabled) { background: var(--line-soft); }
.list-tools button.danger:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }
.list-tools button:disabled { opacity: 0.35; cursor: default; }

.tool-sep {
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: var(--line);
}

.list-tools select,
.list-tools input[type="date"] {
  padding: 6px 9px;
  font-size: 13.5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.list-tools 
/* 일부만 선택된 상태는 가로줄로 표시한다 */
.row-check.some {
  opacity: 1;
  background: var(--accent);
  border-color: var(--accent);
  position: relative;
}
.row-check.some::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 6px;
  width: 9px;
  height: 2px;
  background: var(--on-accent);
}

.row:hover { background: var(--surface-2); }

/* 지금 열어둔 메일은 왼쪽 굵은 선으로, 선택한 메일은 배경으로 구분한다 */
.row.selected { box-shadow: inset 3px 0 0 var(--accent); }

/* 시그니처: 안 읽은 메일은 점이 아니라 왼쪽 기둥으로 표시 */
.row.unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--signal);
}

.row-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 3px;
}

.row-from {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 15px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row.unread .row-from { color: var(--ink); font-weight: 700; }

.row-addr {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-date {
  margin-left: auto;
  padding-left: 8px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  flex: 0 0 auto;
}

.row-subject {
  font-size: 16px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row.unread .row-subject { color: var(--ink); font-weight: 600; }

.row-tags {
  display: inline-flex;
  gap: 6px;
  margin-left: 6px;
  font-size: 12px;
  color: var(--ink-3);
}

.load-more {
  width: 100%;
  padding: 15px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  border-top: 1px solid var(--line-soft);
}

.load-more:hover { background: var(--surface-2); }

.empty {
  padding: 56px 28px;
  text-align: center;
  color: var(--ink-3);
  font-size: 15px;
}

/* --- 읽기 --- */

#reader {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  overflow: hidden;
}

.reader-bar {
  display: flex;
  gap: 7px;
  padding: 12px max(20px, calc((100% - 980px) / 2));
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.act {
  padding: 8px 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.act:hover { background: var(--line-soft); color: var(--ink); }
.act.danger:hover { color: var(--danger); border-color: var(--danger); }

#reader-body {
  flex: 1;
  overflow-y: auto;
  /* 넓은 화면에서 한 줄이 너무 길어지면 읽기 힘들다.
     980px 를 넘는 폭은 좌우 여백으로 돌려 글을 가운데에 모은다. */
  padding: 30px max(30px, calc((100% - 980px) / 2)) 80px;
}

.msg-subject {
  margin: 0 0 14px;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.msg-meta {
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--ink-2);
}

.msg-meta .line { margin-bottom: 3px; }
.msg-meta .who { font-weight: 700; color: var(--ink); }

.blocked-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  margin-bottom: 20px;
  font-size: 14.5px;
  background: var(--signal-soft);
  border-radius: 8px;
}

@media (max-width: 720px) {
  /* 문구가 길어 단추가 밀린다. 스팸 편지함 안내는 특히 길다. */
  .blocked-bar { flex-wrap: wrap; }
  .blocked-bar button { width: 100%; margin-left: 0; padding: 9px 12px; }
}

.blocked-bar button {
  margin-left: auto;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--accent);
  border: none;
  border-radius: 7px;
}

.attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 22px;
}

.attachments a {
  padding: 9px 14px;
  font-size: 14.5px;
  color: var(--ink);
  text-decoration: none;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.attachments a:hover { border-color: var(--accent); }

/* HTML 메일 본문. 흰 종이 위에 놓인 것처럼 보이게 한다. */
.act.more-act {
  padding: 7px 10px;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
}

/* 본문 끝의 앞뒤 메일 이동 */
.msg-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.nav-item {
  display: block;
  padding: 13px 15px;
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  min-width: 0;
}

.nav-item:not(.empty):hover { border-color: var(--accent); background: var(--surface); }
.nav-item.empty { opacity: 0.45; }

.nav-label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
}

.nav-subject {
  display: block;
  font-size: 14.5px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-from {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .msg-nav { grid-template-columns: 1fr; }
}

.msg-frame {
  display: block;
  width: 100%;
  min-height: 120px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.msg-html {
  font-size: 16.5px;
  line-height: 1.72;
  max-width: 74ch;
  overflow-wrap: anywhere;
}

.msg-html img { max-width: 100%; height: auto; }
.msg-html a { color: var(--accent); }
.msg-html table { max-width: 100%; }
.msg-html blockquote {
  margin: 12px 0;
  padding-left: 16px;
  border-left: 3px solid var(--line);
  color: var(--ink-2);
}
.msg-html .plain { white-space: normal; }

.placeholder {
  display: grid;
  place-content: center;
  height: 100%;
  color: var(--ink-3);
  font-size: 16px;
  text-align: center;
  padding: 30px;
}

/* --- 작성 --- */

/* 설정 — 작성 화면과 같은 자리를 쓴다 */
#prefs {
  grid-column: 2 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  overflow: hidden;
  min-width: 0;
}

#app.in-prefs #list-pane,
#app.in-prefs #splitter,
#app.in-prefs #reader,
#app.in-prefs #compose { display: none; }

.pref-block { margin: 22px 0; max-width: 560px; }

.pref-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.pref-block input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.pref-block input[type="text"]:focus { outline: none; border-color: var(--accent); }

.pref-row { display: flex; gap: 14px; max-width: 560px; }
.pref-row .pref-block { flex: 1; margin: 22px 0; }
.pref-row .pref-block.narrow { flex: 0 0 90px; }

.pref-sub { font-weight: 400; font-size: 12.5px; color: var(--ink-3); }

/* 서명 미리보기 — 실제 메일처럼 흰 바탕에 보여준다 */
.sig-preview {
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow-x: auto;
}
.sig-preview:empty::after {
  content: '항목을 채우면 여기에 보입니다.';
  font-size: 13px;
  color: #999;
}

.pref-hint {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}

.pref-radios { display: flex; flex-direction: column; gap: 8px; }
.pref-radios label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.pref-radios input { accent-color: var(--accent); }

/* 라디오와 같은 모양이되, 홀로 서는 항목이라 글자를 조금 더 세운다. */
.pref-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.pref-check input { accent-color: var(--accent); }

/* 편지함 머리. 두 그룹이 완전히 같은 모양이 되도록 글자는 .nav-title 이 맡는다. */
.nav-group {
  display: flex;
  align-items: center;
  min-height: 26px;
  margin: 4px 0 6px;
  padding: 0 12px;
}

.nav-title {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

/* 위쪽 구분선은 바깥 여백으로만 띄운다. 글자 위치는 '편지함' 과 같다. */
.nav-group.with-line {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.nav-add {
  margin-left: auto;
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--ink-3);
  background: none;
  border: none;
  border-radius: 6px;
}
.nav-add:hover { color: var(--accent); background: var(--line-soft); }

/* 주소록·설정 — 편지함과 같은 모양의 메뉴 */
.nav-links {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.quota {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--ink-3);
}
.quota .bar {
  display: block;
  height: 4px;
  margin-top: 5px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.quota .bar i {
  display: block;
  height: 100%;
  background: var(--accent);
}
.quota.warn .bar i { background: var(--danger); }
.nav-add:hover { color: var(--accent); }

/* 사이드바 계정 표시 — 이름이 있으면 두 줄로 */
.who-name { display: block; font-weight: 700; color: var(--ink); }
.who-addr { display: block; font-size: 12.5px; color: var(--ink-3); }

/* 주소록 — 설정·작성과 같은 자리를 쓴다 */
#book {
  grid-column: 2 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  overflow: hidden;
  min-width: 0;
}

#app.in-book #list-pane,
#app.in-book #splitter,
#app.in-book #reader,
#app.in-book #compose,
#app.in-book #prefs { display: none; }

/* 검색·제외어는 목록과 함께 흘러가면 안 된다. 머리말로 고정한다. */
.book-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 12px;
}

.book-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0 10px;
}

#book-search {
  flex: 1;
  max-width: 360px;
  padding: 9px 12px;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
#book-search:focus { outline: none; border-color: var(--accent); }

.book-count { font-size: 13px; color: var(--ink-3); }

.book-exclude {
  display: flex;
  margin-top: 0;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}
.book-exclude label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.book-exclude input {
  flex: 1;
  min-width: 220px;
  padding: 8px 10px;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
}
.book-exclude input:focus { outline: none; border-color: var(--accent); }
.book-exclude button {
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
}
.book-exclude button:hover { color: var(--accent); border-color: var(--accent); }

.book-list { padding-bottom: 40px; }

.book-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}

.book-row input {
  padding: 8px 10px;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 7px;
}
.book-row input:focus { outline: none; border-color: var(--accent); }

.book-row .b-name { flex: 0 0 180px; }
.book-row .b-addr { flex: 1; min-width: 0; }
.book-row .b-note { flex: 0 0 180px; }

.book-row .b-del {
  flex: none;
  padding: 6px 9px;
  font-size: 13px;
  color: var(--ink-3);
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
}
.book-row .b-del:hover { color: var(--danger); border-color: var(--danger); }

.book-empty { padding: 40px 0; text-align: center; color: var(--ink-3); }

@media (max-width: 900px) {
  .book-row { flex-wrap: wrap; }
  .book-row .b-name, .book-row .b-note { flex: 1 1 40%; }
  .book-row .b-addr { flex: 1 1 100%; }
}

/* 받는사람 자동완성 */
.ac-box {
  position: absolute;
  z-index: 60;
  max-height: 260px;
  overflow-y: auto;
  min-width: 280px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.ac-item {
  display: block;
  width: 100%;
  padding: 9px 13px;
  text-align: left;
  background: none;
  border: none;
  font-size: 14.5px;
  color: var(--ink);
}
.ac-item:hover, .ac-item.on { background: var(--accent-soft); }
.ac-item .ac-addr { display: block; font-size: 12.5px; color: var(--ink-3); }

/* 작성 — 사이드바를 뺀 본문 영역 전체를 쓴다. 목록과 읽기 화면은 물러난다. */
#compose {
  grid-column: 2 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  overflow: hidden;
  min-width: 0;
}

#app.composing #list-pane,
#app.composing #splitter,
#app.composing #reader { display: none; }

.compose-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  overflow: hidden;
}


.compose-head {
  padding: 14px max(20px, calc((100% - 980px) / 2));
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
}

.compose-head { gap: 8px; }

.compose-head .send {
  padding: 9px 22px;
  font-size: 15px;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--accent);
  border: none;
  border-radius: 8px;
}
.compose-head .send:hover { background: var(--accent-hover); }
.compose-head .send:disabled { opacity: 0.5; }

.head-btn {
  padding: 9px 14px;
  font-size: 14.5px;
  color: var(--ink-2);
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
}
.head-btn:hover { color: var(--accent); border-color: var(--line); }

.head-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
}
.head-check input { accent-color: var(--accent); }

.compose-mode {
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-3);
}

.compose-body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 6px max(20px, calc((100% - 980px) / 2)) 16px;
}

.crow {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.crow label {
  width: 62px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-3);
  flex: 0 0 auto;
}

.crow input {
  flex: 1;
  padding: 13px 0;
  font-size: 16px;
  background: none;
  border: none;
}

.crow input:focus { outline: none; }

#compose-text {
  width: 100%;
  flex: 1;
  min-height: 240px;
  margin-top: 16px;
  padding: 4px 0;
  font-size: 16.5px;
  line-height: 1.7;
  background: none;
  border: none;
  resize: none;
}

#compose-text:focus { outline: none; }




.crow-btn {
  flex: none;
  padding: 5px 10px;
  font-size: 12.5px;
  color: var(--ink-3);
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.crow-btn:hover { color: var(--accent); border-color: var(--accent); }

.file-list { display: flex; gap: 6px; flex-wrap: wrap; }

.attach-size {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.attach-size.over { color: var(--danger); font-weight: 700; }

/* 파일을 끌어왔을 때 나타나는 안내 */
.attach-row { border-bottom: none; }

.drop-zone {
  margin: 4px 0 8px;
  padding: 18px;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  transition: border-color .12s, background .12s;
}

.drop-zone.over {
  border-color: var(--accent);
  border-style: dashed;
  background: var(--accent-soft);
}

.drop-msg { font-size: 14px; color: var(--ink-3); }
.drop-zone.has-files .drop-msg { display: none; }
.file-list { justify-content: center; }

.file-chip {
  font-size: 13.5px;
  color: var(--ink-2);
  padding: 5px 6px 5px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.file-chip button {
  margin-left: 4px;
  padding: 0 4px;
  font-size: 15px;
  line-height: 1;
  color: var(--ink-3);
  background: none;
  border: none;
}
.file-chip button:hover { color: var(--danger); }

/* --- 알림 --- */

#toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 999px;
  box-shadow: var(--shadow);
  z-index: 100;
}

#toast.err { background: var(--danger); color: #fff; }

/* --- 반응형 --- */

@media (max-width: 1080px) {
  #app, #app[data-view="wide"] { grid-template-columns: 210px 1fr; }
  #splitter { display: none; }
  #reader { position: fixed; inset: 0; z-index: 20; }
  #reader.idle { display: none; }
  .back-btn { display: inline-block !important; }
}

@media (max-width: 720px) {
  #app, #app[data-view="wide"] { grid-template-columns: 1fr; }
  #app[data-view="wide"] #list-pane,
  #app[data-view="wide"] #reader { grid-column: 1; }
  #compose, #prefs, #book { grid-column: 1 / -1; }
  #sidebar { position: fixed; inset: 0 auto 0 0; width: 244px; z-index: 30; transform: translateX(-100%); transition: transform 0.2s; }
  #sidebar.open { transform: none; }

  /* 서랍이 열리면 나머지 화면을 덮는다. 여기를 누르면 닫힌다.
     사이드바의 자식이라 별도 요소나 z-index 조정이 필요 없다. */
  #sidebar.open::after {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 244px;
    background: rgba(0, 0, 0, 0.45);
  }
  .menu-btn { display: inline-block !important; }

  /* ---- 목록: 모바일 전용 배치 ----------------------------------
     한 줄에 이름·시각, 아랫줄에 제목. 주소는 접는다.
     왼쪽 자리에는 아바타를 두고, 그 자리를 누르면 체크로 바뀐다.
     체크박스는 아바타 위에 투명하게 겹쳐 두어 터치를 받는다. */
  #messages .row {
    padding: 12px 14px 12px 62px;
    min-height: 68px;
  }

  .row-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 14px;
    top: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: hsl(var(--av-h) 62% 34%);
    background: hsl(var(--av-h) 62% 88%);
    z-index: 1;
    transition: opacity .12s;
  }

  #messages .row-check {
    position: absolute;
    left: 14px;
    top: 14px;
    width: 38px;
    height: 38px;
    margin: 0;
    border-radius: 50%;
    border-color: transparent;
    opacity: 0;
    z-index: 2;
  }
  #messages .row:hover .row-check { opacity: 0; }

  /* 선택 모드이거나 이미 고른 행에서는 체크가 드러나고 아바타가 물러난다 */
  #messages.sel .row-avatar,
  #messages .row.checked .row-avatar { opacity: 0; }

  #messages.sel .row-check,
  #messages .row.checked .row-check {
    opacity: 1;
    border-color: var(--line);
  }

  #messages .row-check.on { border-color: var(--accent); }
  #messages .row-check.on::after { left: 15px; top: 11px; width: 6px; height: 13px; }

  /* ---- 머리막대 ----------------------------------------------
     평소:  ≡  로고 편지함이름 3      🔍  ⋯
     검색중: ≡  [대상▾] [검색어………]  ✕  ⋯   */
  .list-head { gap: 6px; padding: 8px 10px; flex-wrap: nowrap; align-items: center; }
  #view-btn, #export-btn { display: none; }
  .more-btn { display: inline-block !important; flex: 0 0 auto; }

  .head-title {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .head-logo { flex: 0 0 auto; border-radius: 5px; }
  .head-title b {
    font-size: 16px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .head-count {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--signal);
  }

  #search-open { display: inline-block; flex: 0 0 auto; }
  #search-close, .list-head #search-field, .list-head #search { display: none; }

  .list-head.searching .head-title,
  .list-head.searching #search-open { display: none; }
  .list-head.searching #search-field {
    display: inline-block;
    flex: 0 0 auto;
    max-width: 82px;
    font-size: 13px;
    padding: 6px 4px;
  }
  .list-head.searching #search { display: block; flex: 1 1 auto; min-width: 0; }
  .list-head.searching #search-close { display: inline-block; flex: 0 0 auto; }

  /* 열 제목줄은 데스크톱용이다. 여기 체크박스는 장식이라 눌러도 안 먹는다. */
  #app[data-view="wide"] .col-head, .col-head { display: none; }

  /*
   * 「목록만」 보기의 표 형태(보낸사람·주소·제목·날짜를 칸으로 나눈 배치)는
   * 넓은 화면 전용이다. 좁은 화면에서는 칸을 나눌 폭이 없어 제목이 한 글자씩
   * 세로로 쌓인다.
   *
   * 예전에는 보기 방식이 기기별(localStorage)이라 휴대폰이 이 상태가 될 일이
   * 없었다. 2026-08-05 에 계정 저장으로 옮기면서 데스크톱에서 고른 「목록만」이
   * 휴대폰까지 따라와 목록이 깨졌다. 좁은 화면에서는 보기 방식과 상관없이
   * 두 줄 카드로 되돌린다.
   */
  #app[data-view="wide"] .row { align-items: flex-start; gap: 11px; }
  #app[data-view="wide"] .row-body { display: block; flex: 1; min-width: 0; }
  #app[data-view="wide"] .row-top { display: flex; }
  #app[data-view="wide"] .row-from {
    order: 0;
    flex: 0 1 auto;
    width: auto;
  }
  #app[data-view="wide"] .row-addr { display: none; }
  #app[data-view="wide"] .row-subject {
    order: 0;
    flex: 0 1 auto;
    min-width: 0;
  }
  #app[data-view="wide"] .row-date {
    order: 0;
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
    text-align: right;
  }

  /* ---- 도구막대: 평소엔 기간과 통수만, 고르면 동작 단추가 나온다 ---- */
  .list-tools { padding: 8px 10px; gap: 6px; }
  .list-tools #check-all,
  .list-tools [data-sel],
  .list-tools #move-to,
  .list-tools .tool-sep { display: none; }

  /* 좌우로 밀어야 할 만큼 늘어놓지 않는다.
     자주 쓰는 삭제·이동만 두고 나머지는 ⋯ 안으로 넣는다. */
  .list-tools.sel { flex-wrap: nowrap; }
  .list-tools.sel #check-all { display: inline-block; flex: 0 0 auto; }
  .list-tools.sel #delete-btn:not(.hidden),
  .list-tools.sel #restore-btn:not(.hidden),
  .list-tools.sel #move-to,
  .list-tools.sel .sel-more { display: inline-block; flex: 0 0 auto; }
  .list-tools.sel #move-to { max-width: 96px; }
  .list-tools.sel #range-preset,
  .list-tools.sel #range-custom { display: none; }
  .list-tools.sel .filter-count {
    order: -1;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 2px 0 0;
    font-weight: 700;
    white-space: nowrap;
  }

  /* 선택 모드의 빈 동그라미. 테두리만으로는 어두운 배경에서 묻힌다.
     배경을 채워 아바타가 있던 자리라는 게 보이게 한다. */
  #messages.sel .row-check,
  #messages .row.checked .row-check {
    border-width: 2px;
    border-color: var(--ink-2);
    background: var(--surface-2);
    opacity: 1;
  }


  /* ---- 작성 화면 --------------------------------------------
     닫기 ← 제목 ……… ⋯ 보내기  한 줄로 정리한다.
     임시저장·미리보기·한명씩 발송은 ⋯ 안으로 넣는다. */
  .compose-head {
    padding: 8px 10px;
    gap: 6px;
    flex-wrap: nowrap;
  }
  #compose-close, #book-close, #prefs-close { order: -2; flex: 0 0 auto; }
  .compose-mode { order: -1; flex: 1 1 auto; min-width: 0; font-size: 15px;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .compose-head .send { order: 3; flex: 0 0 auto; padding: 8px 16px; font-size: 14.5px; }
  .c-more { display: inline-block !important; order: 2; flex: 0 0 auto; }
  /* 머리막대에 남길 것은 닫기·제목·⋯·저장뿐이다.
     나머지 단추는 ⋯ 안으로 들어간다. 주소록의 «추가»,
     «메일에서 가져오기», «제목에서 이름 가져오기» 도 여기에 해당한다. */
  .compose-head .head-btn, .head-check { display: none; }

  /* ---- 주소록 ---- */
  .book-bar { flex-wrap: wrap; gap: 8px; padding: 12px 0 10px; }
  #book-search { flex: 1 1 100%; max-width: none; }
  .book-count { flex: 0 0 auto; }
  #book-ex-toggle { display: none; }     /* ⋯ 안에 있다 */

  .book-exclude { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; }
  .book-exclude input { min-width: 0; }

  .book-row { flex-wrap: wrap; gap: 6px; }
  .book-row .b-name, .book-row .b-addr { flex: 1 1 100%; }

  .compose-body, #book .compose-body, #prefs .compose-body { padding: 0 12px 14px; }

  /* 한 줄에 라벨과 입력칸을 우겨넣지 않는다 */
  .crow { flex-wrap: wrap; gap: 2px 10px; padding: 6px 0; }
  .crow label { width: auto; min-width: 58px; font-size: 13px; }
  .crow input { flex: 1 1 100%; padding: 8px 0; font-size: 16px; }
  .crow .crow-btn { flex: 0 0 auto; }
  .attach-row { gap: 8px; }
  .attach-row label { min-width: 0; }

  /* 끌어놓기는 휴대폰에 없다. 안내문을 지우고 높이를 줄인다. */
  .drop-zone { min-height: 0; padding: 8px 0; margin: 2px 0 6px; border: none; }
  .drop-msg { display: none; }

  #compose-text { min-height: 200px; margin-top: 10px; font-size: 16px; }

  /* ---- 떠 있는 쓰기 단추 ---- */
  .fab {
    display: flex !important;
    position: fixed;
    right: 16px;
    bottom: 20px;
    z-index: 25;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    color: var(--on-accent);
    background: var(--accent);
    border: none;
    border-radius: 50%;
    box-shadow: var(--shadow);
  }
  #app.composing .fab,
  #app.in-prefs .fab,
  #app.in-book .fab { display: none !important; }

  .row-addr { display: none; }
  .row-top { gap: 8px; margin-bottom: 4px; }
  .row-from { font-size: 15.5px; }
  .row-date { font-size: 12px; }
  .row-subject { font-size: 15px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  /* ---- 선택 표시 -------------------------------------------------
     고른 줄은 배경으로, 고른 동그라미는 강조색으로 채워서
     한눈에 갈리게 한다. 이 블록이 맨 뒤에 와야 앞의 규칙을 덮는다. */
  #messages .row.checked { background: var(--accent-soft); }
  #messages .row.checked .row-check,
  #messages .row-check.on {
    background: var(--accent);
    border-color: var(--accent);
    opacity: 1;
  }
  #messages .row-check.on::after { border-color: var(--on-accent); }
}

/* 좁은 화면 전용 요소들. 넓은 화면에서만 감춘다.
   미디어쿼리 없이 뒤쪽에 두면 규칙 순서에 따라 승부가 갈려서
   좁은 화면에서도 사라지는 사고가 났다(2026-08-04). */
@media (min-width: 721px) {
  .row-avatar, .more-btn, .sel-more, .head-title, .search-btn,
  .fab, .c-more { display: none; }
}

.back-btn, .menu-btn { display: none; }


/* --- 우클릭 팝업 메뉴 ------------------------------------------------
   목록에서 이름·주소·제목을 우클릭하면 뜬다. body 에 직접 붙이므로
   목록의 overflow 에 잘리지 않는다. */
.popmenu {
  position: fixed;
  z-index: 90;
  min-width: 190px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.popmenu button {
  display: block;
  width: 100%;
  padding: 8px 11px;
  text-align: left;
  font-size: 14px;
  color: var(--ink);
  background: none;
  border: none;
  border-radius: 7px;
  white-space: nowrap;
}
.popmenu button:hover { background: var(--accent-soft); }

.popmenu hr {
  margin: 4px 8px;
  border: none;
  border-top: 1px solid var(--line-soft);
}

/* 그 자리에서 이름을 받는 작은 입력창 */
.popform { min-width: 260px; padding: 12px; }
.popform .pop-title { font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }
.popform input {
  width: 100%;
  padding: 8px 10px;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 7px;
}
.popform input:focus { outline: none; border-color: var(--accent); }
.popform .pop-hint {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-3);
  word-break: break-all;
}
.popform .pop-actions { display: flex; gap: 6px; margin-top: 10px; }
.popform .pop-actions button { width: auto; flex: 1; text-align: center; }
.popform .pop-ok { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.popform .pop-ok:hover { background: var(--accent-hover); }
.popform .pop-cancel { background: var(--surface-2); }


/* 선택 막대의 더보기 단추 — 모바일에서만 나타난다 */
.sel-more {
  padding: 6px 10px;
  font-size: 15px;
  line-height: 1;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}


/* --- 빠른 거르기 (목록 도구막대) -------------------------------------
   사이드바 맨 위에 있던 것을 목록 쪽으로 내렸다. 편지함 목록보다
   위에 놓여 있으면 계정 전체를 뜻하는 것처럼 읽히기 때문이다.
   실제로는 지금 열어둔 편지함 안에서만 걸린다. */
.quick-filters {
  display: inline-flex;
  gap: 4px;
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.qf {
  flex: 0 0 auto;
  padding: 5px 11px;
  font-size: 13px;
  color: var(--ink-2);
  background: none;
  border: 1px solid transparent;
  border-radius: 7px;
  white-space: nowrap;
}
.qf:hover { border-color: var(--accent); }
.qf.on {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}
.qf span { font-variant-numeric: tabular-nums; }

/*
 * 「전체 / 안읽음 / 중요」 는 도구막대 안에 있어서 `.list-tools button:hover`
 * 의 어두운 바탕을 함께 물려받는다. 그 규칙이 선택자 우선순위에서 이겨,
 * **골라 놓은 단추에 마우스를 올리면 파란 바탕이 어둡게 덮였다**(2026-08-05).
 * 골라 놓은 것은 마우스가 올라가도 그대로 밝게 둔다.
 */
.list-tools .qf:hover { background: none; }
.list-tools .qf.on,
.list-tools .qf.on:hover {
  color: var(--on-accent);
  background: var(--accent);
}


/* --- 메일 분류 규칙 --------------------------------------------------- */
.rules-block { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 6px; }

.rule-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }

.rule-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}
.rule-row .r-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rule-row .r-text b { color: var(--ink); }
.rule-row .r-del {
  flex: none;
  padding: 4px 9px;
  font-size: 12.5px;
  color: var(--ink-3);
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.rule-row .r-del:hover { color: var(--danger); border-color: var(--danger); }

.rule-empty { font-size: 13.5px; color: var(--ink-3); padding: 6px 0; }

.rule-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rule-add select, .rule-add input {
  padding: 9px 10px;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.rule-add input { flex: 1 1 200px; min-width: 0; }
.rule-add input:focus, .rule-add select:focus { outline: none; border-color: var(--accent); }
.rule-add button {
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--accent);
  border: none;
  border-radius: 8px;
}
.rule-add button:disabled { opacity: 0.5; }

@media (max-width: 720px) {
  .rule-add select, .rule-add input, .rule-add button { flex: 1 1 100%; }
}


/* --- 중요 표시 (\Flagged) -------------------------------------------
   아웃룩의 «플래그 지정» 과 같은 표시다. 한쪽에서 달면 다른 쪽에도 보인다. */
.row-star {
  flex: 0 0 auto;
  align-self: center;
  width: 30px;
  height: 30px;
  margin: -4px -6px -4px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  color: var(--ink-3);
  opacity: 0.45;
  border-radius: 8px;
  cursor: pointer;
}
.row:hover .row-star { opacity: 0.8; }
.row-star:hover { background: var(--line-soft); opacity: 1; }
.row-star.on { color: #E8A317; opacity: 1; }

#app[data-view="wide"] .row-star { order: 5; margin-left: 4px; }

/* 머리줄의 빈 별표 칸. 자리만 차지하고 보이지 않는다.
   이 칸이 없으면 «받은 날짜» 만 별표 폭만큼 오른쪽으로 밀린다. */
.row-star.ghost { visibility: hidden; pointer-events: none; }

/* 좁은 화면에서는 손가락 목표를 넉넉히 준다 */
@media (max-width: 720px) {
  .row-star { width: 36px; height: 36px; font-size: 19px; opacity: 0.6; }
}

/* 읽기 화면 머리막대의 별표 */
.reader-bar .star-act {
  font-size: 16px;
  line-height: 1;
  padding: 7px 10px;
  color: var(--ink-3);
}
.reader-bar .star-act.on { color: #E8A317; border-color: #E8A317; }


/* --- 빈 목록 안내 ----------------------------------------------------
   어느 편지함을 말하는 것인지 적어야 계정 전체로 오해하지 않는다. */
.empty-sub {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--ink-3);
}

.goto-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 12px;
}

.goto-chip {
  padding: 6px 12px;
  font-size: 13.5px;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.goto-chip:hover { border-color: var(--accent); color: var(--accent); }
.goto-chip b { margin-left: 4px; color: var(--accent); font-variant-numeric: tabular-nums; }


/* --- 설정 탭 ---------------------------------------------------------
   서명은 «저장» 을 눌러야 반영되고, 분류 규칙은 즉시 서버에 저장된다.
   저장 방식이 다른 둘을 한 화면에 세로로 이어 붙이면
   «저장» 이 어디까지를 저장하는지 알 수 없다. */
/* 탭이 넷이 되면서 좁은 화면에서는 한 줄에 다 들어가지 않는다.
   줄을 바꾸면 아래쪽 밑줄이 끊겨 보이므로 옆으로 밀어 본다. */
.pref-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.pref-tabs::-webkit-scrollbar { display: none; }

.pref-tab {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 11px 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.pref-tab:hover { color: var(--ink-2); }
.pref-tab.on { color: var(--accent); border-bottom-color: var(--accent); }

.pref-lead {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* 탭으로 나눴으므로 규칙 블록 위의 구분선은 필요 없다.
   다만 위 여백까지 지우면 이 탭만 본문이 위로 붙어, 탭을 옮길 때마다
   글이 한 줄씩 뛴다. 다른 탭의 첫 .pref-block 과 같은 여백을 남긴다. */
.rules-block { border-top: none; padding-top: 0; margin-top: 22px; }


/* --- 규칙 불러오기 실패 ----------------------------------------------
   규칙 저장은 받은 목록으로 스크립트를 통째로 다시 만든다.
   불러오지 못한 채로 저장하면 서버의 기존 규칙이 사라지므로 잠근다. */
.rule-error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  margin-bottom: 12px;
  font-size: 13.5px;
  color: var(--danger);
  background: var(--surface-2);
  border: 1px solid var(--danger);
  border-radius: 8px;
}
.rule-error span { flex: 1; min-width: 0; }
.rule-error button {
  flex: none;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--accent);
  border: none;
  border-radius: 7px;
  cursor: pointer;
}

.rule-list.locked { opacity: 0.45; pointer-events: none; }
.rule-add select:disabled, .rule-add input:disabled { opacity: 0.45; }


/* 좁은 화면 — 메일을 고른 동안에는 동작 단추에 자리를 내준다 */
@media (max-width: 720px) {
  .list-tools.sel .quick-filters { display: none; }
  .quick-filters { flex: 0 0 auto; }
  .qf { padding: 6px 10px; font-size: 12.5px; }
}


/* --- 전체 메일함 -----------------------------------------------------
   편지함을 가로지르는 보기. 편지함 목록보다 위에 두어
   «이것은 개별 편지함이 아니다» 를 자리로 알린다. */
.all-folder {
  margin: 2px 0 10px;
  font-weight: 600;
}
.all-folder .fname { font-weight: 600; }

/* 전체 보기에서 각 메일이 어느 편지함에 있는지 알려주는 이름표.
   UID 는 편지함마다 따로 매겨지므로, 이 표시는 장식이 아니라
   «지금 무엇을 지우려는지» 를 알려주는 정보다. */
.row-box {
  display: inline-block;
  margin-right: 7px;
  padding: 1px 7px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
  vertical-align: 1px;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.row.unread .row-box { color: var(--accent); border-color: var(--accent); }


/* --- 설정 저장 막대 --------------------------------------------------
   저장은 «프로필 · 서명» 탭에만 해당한다. 탭 위 머리막대에 두면
   «메일 분류» 탭에서도 저장할 것이 있는 것처럼 보인다.
   내용이 길어 스크롤되므로 아래에 붙여 둔다. */
/* 저장 줄.
   예전에는 sticky 로 화면 아래에 띄워 두었는데, 본문 위에 겹쳐 보여
   «어디에 속한 단추인지» 가 흐렸다. 미리보기 바로 아래 제자리에 둔다. */
.pref-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 8px;
  padding-top: 18px;
  max-width: 560px;
  border-top: 1px solid var(--line);
}

/* .send 서식은 .compose-head 안으로 한정돼 있어 여기까지 오지 않았다.
   그래서 이 단추만 브라우저 기본 회색으로 보였다. */
.pref-foot .send {
  padding: 9px 22px;
  font-size: 15px;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.pref-foot .send:hover:not(:disabled) { background: var(--accent-hover); }

/* 고친 것이 없으면 누를 것도 없다. 눌리는 것처럼 보이면 안 된다. */
.pref-foot .send:disabled {
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  cursor: default;
}

.pref-foot-note { font-size: 13px; color: var(--ink-3); }

@media (max-width: 720px) {
  .pref-foot .send { flex: 1; }
  .pref-foot-note { display: none; }

  /*
   * 설정 탭 — 좁은 화면에서는 옆으로 밀지 말고 줄을 바꾼다.
   *
   * 탭이 다섯이 되면서 한 줄에 들어가지 않는다. 가로 스크롤은 «더 있다» 는
   * 사실을 알려주지 못한다. 실제로 「IMAP 설정」이 화면 밖에 숨어 있었다.
   * 두 줄로 나누면 다섯 개가 모두 한눈에 보인다.
   */
  .pref-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 0 2px;
    padding: 0 8px;
  }
  .pref-tab {
    flex: 1 1 auto;
    padding: 10px 6px;
    font-size: 13.5px;
    text-align: center;
  }
}


/* --- 편지함 관리 ------------------------------------------------------ */

.boxes-block { max-width: 640px; }

.box-list { margin-bottom: 18px; }

.box-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  padding-left: calc(12px + var(--depth, 0) * 18px);
  border-bottom: 1px solid var(--line-soft, var(--line));
}
.box-row:last-child { border-bottom: none; }

.box-name { flex: 1; font-size: 14.5px; color: var(--ink); }

.box-count {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-3);
  white-space: nowrap;
}

.box-row button {
  flex: 0 0 auto;
  padding: 5px 11px;
  font-size: 13px;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.box-row button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
/* 비어 있지 않으면 지울 수 없다. 눌리는 것처럼 보이면 안 된다. */
.box-row button:disabled { opacity: 0.35; cursor: default; }

@media (max-width: 720px) {
  /* 손가락 목표를 키운다. 13px 글자에 5px 여백이면 26px 남짓이라
     옆 단추를 잘못 누른다. 이름과 통수는 위아래로 눕힌다. */
  .box-row { flex-wrap: wrap; row-gap: 8px; }
  .box-name { flex: 1 1 100%; }
  .box-count { flex: 1 1 auto; }
  .box-row button { padding: 9px 16px; font-size: 14px; }
}

.box-add { display: flex; gap: 8px; }
.box-add input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.box-add input:focus { outline: none; border-color: var(--accent); }
.box-add select {
  flex: 0 0 auto;
  padding: 9px 10px;
  font-size: 14px;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.box-add button {
  flex: 0 0 auto;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.box-add button:hover { background: var(--accent-hover); }

@media (max-width: 720px) {
  .box-add { flex-wrap: wrap; }
  .box-add input { flex: 1 1 100%; }
  .box-add select { flex: 1; }
}

/* --- 메일 프로그램 연결 안내 ------------------------------------------
   아웃룩·휴대폰에 넣을 값. 눈으로 읽고 그대로 옮겨 적는 화면이라
   글자 크기를 넉넉히 두고, 값은 등폭으로 보여 오타를 줄인다. */
.link-grid {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.link-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.link-row:last-child { border-bottom: none; }

.link-label {
  flex: 0 0 190px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-3);
}

.link-value {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  color: var(--ink);
  word-break: break-all;
  font-variant-numeric: tabular-nums;
}

.link-copy {
  flex: none;
  padding: 5px 11px;
  font-size: 12.5px;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
}
.link-copy:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 720px) {
  .link-row { flex-wrap: wrap; gap: 6px 10px; }
  .link-label { flex: 1 0 100%; }
  .link-value { flex: 1 1 auto; }
}

/* 2순위 설정값. 첫 줄이 권장값이라는 게 눈에 들어와야 한다. */
.link-alt {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--ink-3);
}

/* --- 휴지통·스팸 편지함 안내줄 ----------------------------------------
   두 곳은 아무도 치우지 않으면 영원히 쌓인다. 목록 바로 위에 두어
   «여기 몇 통 있다» 를 보게 하고, 비울 수단을 같은 줄에 붙인다. */
.box-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

.box-notice button {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 7px 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
}
/* 되돌릴 수 없는 조작이라 평소에는 눈에 띄지 않게 두고,
   누르려는 순간에만 위험한 색을 보여준다. */
.box-notice button:hover:not(:disabled) {
  color: var(--on-accent);
  background: var(--danger);
  border-color: var(--danger);
}
.box-notice button:disabled { opacity: 0.35; cursor: default; }

@media (max-width: 720px) {
  .box-notice { flex-wrap: wrap; row-gap: 8px; padding: 10px; }
  .box-notice button { width: 100%; margin-left: 0; padding: 10px 14px; }
}