/* ============================================================
   보관함과 설정.
   둘 다 «한 줄에 한 항목» 이라 같은 모양을 쓴다.
   ============================================================ */

.archive-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--paper);
  text-align: left;
}

.archive-row + .archive-row { margin-top: var(--sp-2); }

.archive-row__title {
  display: block;
  flex-grow: 1;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.archive-row.is-dropped .archive-row__title { color: var(--muted); }

/* ---------- 설정 ---------- */

.setting-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 56px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--paper);
  text-align: left;
}

.setting-row + .setting-row { margin-top: var(--sp-2); }

.setting-row__body {
  flex-grow: 1;
  min-width: 0;
}

.setting-row__title {
  font-size: var(--fs-md);
  font-weight: 600;
}

.setting-row__desc {
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--sub);
}

.privacy-note {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--cream);
  font-size: var(--fs-xs);
  line-height: var(--lh-loose);
  color: var(--sub);
  white-space: pre-line;   /* 안내문 안의 빈 줄을 살린다 */
}

/* 누를 수 없는 설정 줄(알림 상태 안내). 버튼처럼 보이지 않게 커서만 바꾸고 아이콘에 색을 준다. */
.setting-row--static { cursor: default; }
.setting-row--static svg { color: var(--accent); flex-shrink: 0; }
/* 설명이 길어도 줄 끝 아이콘이 찌그러지지 않게 */
.setting-row > svg { flex-shrink: 0; }

/* ---------- 알림 시각표 (10-04) ---------- */

/* 줄 안에서 위아래로 쌓는다(설명 아래에 시각 칩들) */
.setting-row--stack { flex-direction: column; align-items: stretch; gap: var(--sp-2); }

.setting-time,
.setting-select {
  width: auto;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  flex-shrink: 0;
}
.setting-time { width: 10.5em; }   /* «오전 09:00» 과 시계 아이콘이 다 들어가는 폭(7.5em 이면 잘렸다) */
.setting-select { max-width: 11em; }

.time-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

.time-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding-right: var(--sp-1);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
}
.time-chip .setting-time { border: 0; background: transparent; }

.time-chip__x {
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--r-xs);
  font-size: var(--fs-lg);
  color: var(--sub);
}
.time-chip__x:hover { background: var(--cream); color: var(--ink); }

.time-add { min-height: var(--tap); }

/* 켜고 끄는 스위치. 체크 상자를 그대로 쓰고 모양만 바꾼다(키보드·화면 낭독기는 체크 상자로 읽는다) */
.setting-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--line);
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.setting-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(21, 24, 30, 0.25);
  transition: transform 0.2s var(--ease);
}
.setting-switch:checked { background: var(--accent); }
.setting-switch:checked::after { transform: translateX(20px); }
.setting-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }