/* 공용 부품 — '책을 짜듯이' 시안(2026-09-24)의 F 항목.
 *
 * 같은 역할은 같은 모양으로. 화면마다 제목 크기가 다르고, 빈 화면이 저마다
 * 다르게 생겼고, 알림이 어떤 곳은 위 어떤 곳은 아래에 뜨던 것을 한 벌로 모은다.
 *
 * 부트스트랩 클래스 위에 덧씌우지 않는다. 덧씌우면 부트스트랩을 올릴 때마다
 * 무엇이 우리 것인지 가려내야 한다. 여기서 새 이름으로 정의하고, 값은 모두 토큰이다.
 */

/* ── 화면 제목 ─────────────────────────────────────────────────────────── */
.page-title {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0 0 var(--space-5);
    font-family: var(--font-ui);
}

.page-title-path {
    font-size: var(--text-small);
    color: var(--ink-muted);
}

.page-title h1,
.page-title .page-title-name {
    margin: 0;
    font-size: var(--text-title);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.page-title-note {
    font-size: var(--text-ui);
    color: var(--ink-muted);
}

/* ── 카드 ──────────────────────────────────────────────────────────────── */
.surface-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--rule);
    border-radius: var(--radius-surface);
    background: var(--paper-raised);
    color: var(--ink);
}

/* 머리에 색띠를 두지 않는다. 띠를 두면 테마마다 그 띠의 글자색을 다시 맞춰야 한다. */
.surface-card-head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    font-family: var(--font-ui);
    font-size: var(--text-small);
    color: var(--ink-muted);
}

.surface-card-body { font-size: var(--text-ui); line-height: 1.6; }

/* ── 목록 ──────────────────────────────────────────────────────────────── */
.list { display: flex; flex-direction: column; }

.list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 60px;          /* 줄 전체가 누르는 곳이다 */
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--text-ui);
    text-decoration: none;
}

.list-item:last-child { border-bottom: 0; }

.list-item:hover,
.list-item:focus-visible { color: var(--ink); opacity: 0.75; }

.list-item-aside { color: var(--ink-muted); font-size: var(--text-small); }

/* ── 비어 있을 때 ───────────────────────────────────────────────────────
   아이콘 · 무엇이 비었는지 · 어떻게 채우는지 · 다음 동작 하나. */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-7) var(--space-4);
    text-align: center;
    font-family: var(--font-ui);
    color: var(--ink-muted);
}

.empty-state-icon { font-size: 32px; color: var(--ink-muted); opacity: 0.7; }
.empty-state-title { font-size: var(--text-ui); font-weight: 700; color: var(--ink); }
.empty-state-note { font-size: var(--text-small); max-width: 32em; }

/* ── 알림 ───────────────────────────────────────────────────────────────
   본문 맨 위에 끼워 넣던 알림 대신 화면 아래 한 자리.
   성공은 스스로 사라지고, 실패는 닫을 때까지 남는다. */
.toast-spot {
    position: fixed;
    /* 읽기 화면의 도구 줄은 `main.container`(자기 쌓임 맥락) 안에서 고정돼 있고,
       이 알림은 그 바깥 `body` 에 붙는다. 그래도 아래 줄에 가리지 않도록
       `--tools-height` 만큼 띄우고 층도 넉넉히 올린다. */
    /* 넓은 화면에서 화면 끝까지 늘어나면 한 줄짜리 알림이 1,300px 짜리 띠가
       된다. 아래 도구 줄과 같은 폭(본문 폭) 안에 세운다. */
    left: 50%;
    transform: translateX(-50%);
    width: min(100% - var(--space-4) * 2, var(--reading-content-width, 1000px));
    bottom: calc(var(--tools-height, 24px) + var(--space-3));
    z-index: 1080;
    display: flex;
    flex-direction: column;
    /* 알림은 **글만큼만** 차지한다. 세로로 쌓는 묶음은 자식을 폭에 맞춰
       늘이는 것이 기본이라, '지정한 위치로 이동했습니다' 한 줄이 본문 폭
       1,000px 짜리 띠가 되었다 (2026-09-29 제보). 가운데로 모은다. */
    align-items: center;
    gap: var(--space-2);
    pointer-events: none;
}

/* 이름을 `.toast` 로 두면 **부트스트랩의 `.toast` 와 겹친다.** 그쪽은
   `.show` 가 없는 토스트를 감추므로, 우리 알림이 높이 0 으로 접혀 보이지 않았다. */
.flash-toast {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch-min);
    /* 길면 줄을 넘기되 상자를 벗어나지 않는다 */
    max-width: 100%;
    padding: 0 var(--space-3);
    border-radius: var(--radius-control);
    /* 검정 판은 어느 테마에도 속하지 않는다. 강조색의 **옅은 면**에 본문 글자색을
       얹고 테두리로 세운다 — 밝은 테마에서는 파스텔로, 어두운 테마에서는
       한 단 밝은 면으로 나온다. 값은 테마마다 이미 정해 둔 것을 쓴다. */
    background: var(--accent-soft-bg);
    color: var(--ink);
    border: 1px solid var(--accent-solid);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
    font-family: var(--font-ui);
    font-size: var(--text-ui);
    font-weight: 600;
    pointer-events: auto;
    transition: opacity var(--dur-fast) linear;
}

.flash-toast.is-gone { opacity: 0; }

/* 잘못된 것은 색만으로 알리지 않는다 — 테두리와 글자색이 함께 바뀐다 */
.flash-toast.is-bad {
    background: var(--state-danger-bg);
    border-color: var(--danger-solid);
    color: var(--state-danger-text);
}

.flash-toast-action {
    /* 글만큼만 넓어진 상자라 밀어낼 자리가 없다 — 글 바로 뒤에 붙는다 */
    flex: none;
    border: 0;
    background: transparent;
    color: var(--accent-solid);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* ── 확인 ──────────────────────────────────────────────────────────────
   안전한 쪽이 왼쪽이고 처음 포커스를 받는다. 단추 이름은 '확인' 이 아니라 동작이다. */
.confirm-dialog {
    width: min(26rem, calc(100vw - var(--space-5)));
    padding: var(--space-4);
    border: 1px solid var(--rule);
    border-radius: var(--radius-surface);
    background: var(--paper-raised);
    color: var(--ink);
    font-family: var(--font-ui);
}

.confirm-dialog::backdrop { background: rgb(0 0 0 / 0.45); }
.confirm-dialog h2 { margin: 0 0 var(--space-2); font-size: var(--text-ui); font-weight: 700; }
.confirm-dialog p { margin: 0 0 var(--space-4); font-size: var(--text-small); color: var(--ink-muted); }
.confirm-dialog-row { display: flex; gap: var(--space-2); justify-content: flex-end; }

/* ── 입력 ───────────────────────────────────────────────────────────────
   입력 글자는 17px 아래로 내리지 않는다 — 사파리가 16px 미만 입력칸에서
   화면을 확대해 버려, 글을 쓰기 시작하면 판이 커지고 자리가 흔들린다. */
.field { display: flex; flex-direction: column; gap: var(--space-1); font-family: var(--font-ui); }

.field-label { font-size: var(--text-small); font-weight: 600; color: var(--ink); }

.field-input {
    /* 너비를 안 주면 `textarea` 는 `cols` 기본값(약 20자)에 머문다. 넓은 화면에서
       글상자만 가운데 조그맣게 떠 있던 까닭이다. */
    width: 100%;
    box-sizing: border-box;
    min-height: var(--touch-min);
    padding: 0 var(--space-3);
    border: 1px solid var(--rule);
    border-radius: var(--radius-control);
    background: var(--paper-raised);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--text-ui);
}

textarea.field-input { padding: var(--space-2) var(--space-3); line-height: 1.6; resize: vertical; }

.field-input:focus-visible {
    outline: 2px solid var(--accent-solid);
    outline-offset: 1px;
    border-color: var(--accent-solid);
}

/* 색만으로 알리지 않는다 — 아이콘과 글을 함께 둔다 */
.field-error {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-small);
    color: var(--danger-solid);
}

.field.is-bad .field-input { border-color: var(--danger-solid); }

/* ── 쪽 넘기기 ─────────────────────────────────────────────────────────
   좁은 화면에서 번호를 줄줄이 세우지 않는다. 이전·다음과 지금 자리만. */
.pagination-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-family: var(--font-ui);
    font-size: var(--text-ui);
    color: var(--ink-muted);
}

/* ── 칩과 뱃지 ─────────────────────────────────────────────────────────
   칩은 누를 수 있는 것(상태·거르기), 뱃지는 셈(누를 수 없음). */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 34px;
    padding: 0 var(--space-2);
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--text-small);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.chip.is-on { border-color: var(--accent-solid); color: var(--accent-solid); }

.badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--surface-strong);
    color: var(--ink-muted);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
}

/* 채운 강조색 뱃지는 **읽지 않은 개수**에만 쓴다 */
.badge-count.is-unread { background: var(--accent-solid); color: var(--on-accent); }

/* ── 단추 네 단계 ──────────────────────────────────────────────────────
   주 동작(채움) · 보조(테두리) · 조용한(글자만) · 위험(테두리와 글자).
   위험은 채우지 않는다. 채운 빨강은 확인 대화상자의 마지막 단추에만 쓴다. */
.act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: var(--touch-min);
    padding: 0 var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--text-ui);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: opacity var(--dur-fast) linear;
}

.act:hover, .act:focus-visible { opacity: 0.8; }
.act:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 1px; }

.act-primary { background: var(--accent-solid); color: var(--on-accent); }
.act-second { border-color: var(--rule); color: var(--ink); }
.act-quiet { color: var(--ink-muted); font-weight: 500; }
.act-danger { border-color: var(--danger-solid); color: var(--danger-solid); }
.act-danger-fill { background: var(--danger-solid); color: var(--on-accent); }

@media (prefers-reduced-motion: reduce) {
    .act, .flash-toast { transition: none; }
}

/* ── 숫자를 보여 주는 세 가지 ──────────────────────────────────────────
   E 항목. 색으로 말하지 않고 크기와 자리로 말한다. */
.stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    border: 1px solid var(--rule);
    border-radius: var(--radius-surface);
    background: var(--paper-raised);
    color: var(--ink);
    font-family: var(--font-ui);
}

.stat-value {
    font-size: var(--text-title);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.stat-unit { font-size: var(--text-ui); font-weight: 500; color: var(--ink); }
.stat-note { font-size: var(--text-small); color: var(--ink-muted); }

/* 숫자 넷이 한 줄로 설 때 — 시안 P 의 자리.
 *
 * `.stat` 은 혼자 설 때를 위해 테두리와 면을 가지고 있다. 줄로 설 때는 그
 * 상자를 벗기고 세로선으로만 가른다. 값도 한 단 낮춘다 — 28px 넷이 위아래
 * 여백까지 두르면 화면 위쪽 150px 을 먹고, 정작 보러 온 목록은 그 아래에서
 * 시작한다. 관리자 화면과 읽기 기록이 같은 규칙을 쓴다. */
.stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: var(--space-2) 0;
    border: 1px solid var(--rule);
    border-radius: var(--radius-surface);
    background: var(--paper-raised);
}

.stat-row .stat {
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border: 0;
    background: none;
    border-radius: 0;
    text-align: center;
}

.stat-row .stat + .stat { border-left: 1px solid var(--rule); }
.stat-row .stat-value { font-size: 22px; }
.stat-row .stat-unit { font-size: var(--text-small); }

/* 폰에서는 한 칸이 90px 남짓이다 — 값과 이름을 한 단 더 줄인다 */
@media (max-width: 767px) {
    .stat-row .stat { padding: var(--space-1) 2px; }
    .stat-row .stat-value { font-size: 19px; }
    .stat-row .stat-note { font-size: 13px; }
}

/* 막대는 읽기 화면의 '읽는 자리' 막대와 같은 부품이다 */
.meter {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: var(--rule);
    overflow: visible;
}

.meter-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    border-radius: 4px;
    background: var(--accent-solid);
}

.meter-tick {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 14px;
    background: var(--ink);
}

/* 표 — 숫자는 오른쪽, 자릿수를 맞춘다. 세로선과 줄무늬는 두지 않는다. */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-ui);
    font-size: var(--text-ui);
    color: var(--ink);
}

.data-table th,
.data-table td {
    height: 48px;
    padding: 0 var(--space-2);
    border-bottom: 1px solid var(--rule);
    text-align: left;
}

.data-table th { font-size: var(--text-small); font-weight: 600; color: var(--ink-muted); }

.data-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── 좁은 화면의 메뉴 ──────────────────────────────────────────────────────
   시안 H. 예전 메뉴에서 나온 말: 이름 없는 아이콘, 13개가 구분 없이 한 줄,
   화면 절반을 덮은 채 본문과 겹침, 층이 두 겹, 지금 있는 화면을 알 수 없음.
   묶고, 이름을 붙이고, 면은 하나로 둔다. */

/* 상단 막대는 좁은 화면에서만 바탕색으로 둔다. 넓은 화면은 막대 안에 링크가
   모두 들어 있어 색을 바꾸면 그 글자색까지 다시 잡아야 한다. */
@media (max-width: 991.98px) {
    .navbar.bg-primary {
        background: var(--paper, #fff) !important;
        border-bottom: 1px solid var(--rule, #dee2e6);
    }

    .navbar.bg-primary .navbar-brand,
    .navbar.bg-primary .navbar-brand:hover { color: var(--ink, #212529); }
}

.nav-handles {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: auto;
}

.nav-handle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--text-ui);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.nav-handle i { font-size: 18px; }
.nav-handle:hover, .nav-handle:focus-visible { background: var(--surface-strong); color: var(--ink); }

.nav-handle .badge-count {
    position: absolute;
    top: 4px;
    right: 2px;
}

/* ── 시트 ──────────────────────────────────────────────────────────────── */
.nav-sheet.offcanvas {
    /* 상단 막대가 `z-index: 1050` 이라 부트스트랩 기본값(1045)으로는 시트의
       머리와 닫기 단추가 막대 뒤로 들어간다. 시트와 그 뒤 덮개를 막대 위로 올린다. */
    z-index: 1060;
    /* 88vw 는 화면을 거의 다 덮었다. 뒤 본문이 한 뼘이라도 보여야 '덮개' 로
       읽히고, 바깥을 눌러 닫을 자리도 남는다. */
    width: min(78vw, 320px);
    background: var(--paper-raised, #fff);
    color: var(--ink, #212529);
    border-left: 1px solid var(--rule, #dee2e6);
}

.nav-sheet-head {
    align-items: center;
    padding: var(--space-3) var(--space-4) var(--space-2);
    border-bottom: 1px solid var(--rule);
}

.nav-sheet-title {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--text-ui);
    font-weight: 700;
    color: var(--ink-muted);
}

.nav-sheet-close {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    margin-left: auto;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--ink);
    font-size: 20px;
    cursor: pointer;
}

.nav-sheet-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3) var(--space-4);
    overscroll-behavior: contain;   /* 시트 끝에서 뒤 본문이 따라 밀리지 않게 */
    font-family: var(--font-ui);
}

/* 안쪽에 상자를 또 두지 않는다 — 면은 시트 하나다 */
.nav-sheet-me {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    color: var(--ink);
    text-decoration: none;
    font-size: var(--text-ui);
    font-weight: 700;
}

.nav-sheet-me-go {
    margin-left: auto;
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--ink-muted);
}

.nav-sheet-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--rule);
    border-radius: var(--radius-control);
    color: var(--ink-muted);
}

.nav-sheet-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: var(--text-ui);   /* 16px 아래로 내리면 사파리가 화면을 확대한다 */
}

.nav-sheet-search input:focus { outline: none; }

.nav-sheet-resume {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px var(--space-2);
    min-height: 56px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-surface);
    background: var(--accent-solid);
    color: var(--on-accent);
    text-decoration: none;
}

/* 진도 막대가 들어오면 세 줄이 된다 — 화살표는 그 세 줄을 모두 지난다 */
.nav-sheet-resume i { grid-row: 1 / -1; grid-column: 2; }
.nav-sheet-resume-label { font-size: var(--text-ui); font-weight: 700; }
.nav-sheet-resume-note { font-size: var(--text-small); opacity: 0.85; }

/* 어디까지 읽었는지는 숫자와 막대 둘로 말한다. 강조색 면 위에 얹히므로
   제 색을 쓰지 않고 글자색을 흐려 쓴다 — 테마마다 다시 맞출 값이 없다. */
.nav-sheet-resume-bar {
    grid-column: 1;
    height: 3px;
    margin-top: 2px;
    border-radius: 2px;
    background: rgb(255 255 255 / 0.28);
    overflow: hidden;
}

.nav-sheet-resume-fill { display: block; height: 100%; background: currentColor; }

.nav-sheet-group { display: flex; flex-direction: column; }

.nav-sheet-group-title {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: var(--space-1) 0 0;
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--ink-muted);
}

.nav-sheet-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    /* 44px — 손가락이 닿는 하한. 48px 열두 줄이면 화면 하나를 넘겼다. */
    min-height: 44px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-control);
    color: var(--ink);
    font-size: var(--text-ui);
    text-decoration: none;
}

.nav-sheet-item i { width: 20px; text-align: center; color: var(--ink-muted); }

/* 줄 오른쪽의 셈. 누를 수 없는 것이므로 칩이 아니라 뱃지 모양이다. */
.nav-sheet-tally {
    margin-left: auto;
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
    color: var(--ink-muted);
}

/* 넓은 화면의 '더보기' 안에서도 같은 셈을 같은 모양으로 보여 준다 */
.dropdown-tally {
    margin-left: auto;
    padding-left: var(--space-3);
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
    color: var(--ink-muted);
}

.dropdown-menu .dropdown-item { display: flex; align-items: center; }
.dropdown-tally.is-new { color: var(--accent-solid); font-weight: 700; }

/* 새로 온 것만 색을 입는다 — 모든 셈이 색을 가지면 어느 것도 눈에 띄지 않는다 */
.nav-sheet-tally.is-new {
    padding: 2px var(--space-2);
    border-radius: 999px;
    background: var(--accent-soft-bg);
    color: var(--accent-soft-text);
    font-weight: 700;
}

.nav-sheet-item:hover,
.nav-sheet-item:focus-visible { background: var(--surface-strong); color: var(--ink); }

/* 지금 있는 화면 — 색과 면 둘 다로 알린다 */
.nav-sheet-item.is-here {
    background: var(--accent-soft-bg);
    color: var(--accent-solid);
    font-weight: 700;
}

.nav-sheet-item.is-here i { color: var(--accent-solid); }

/* 지금 테마 이름은 '테마' 옆에 붙인다 — 제 줄을 차지할 만한 말이 아니다 */
.nav-sheet-theme-now { font-weight: 500; color: var(--ink); }

.nav-sheet-theme-picks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2) var(--space-1);
}

/* 테마를 제 색으로 보여 주는 단추. 글자 칩 셋이 한 줄을 통째로 먹던 자리에
   열한 개가 두 줄로 들어간다 — 이름보다 색이 먼저 읽히는 고르기이기도 하다. */
.theme-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--swatch-bg);
    border: 1px solid var(--rule);
    border-radius: 50%;
    cursor: pointer;
    transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}

/* 안쪽 점은 그 테마의 강조색 — 바탕만으로는 밝은 테마 넷이 다 희게 보인다 */
.theme-dot-ink {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--swatch-accent);
}

.theme-dot:hover { transform: scale(1.08); }
.theme-dot:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 2px; }

/* 고른 것은 테두리 고리로 알린다. 색만으로 알리면 비슷한 두 테마를 가릴 수 없다. */
.theme-dot.is-on {
    border-color: var(--ink);
    box-shadow: 0 0 0 2px var(--paper-raised), 0 0 0 4px var(--ink);
}

@media (prefers-reduced-motion: reduce) {
    .theme-dot { transition: none; }
    .theme-dot:hover { transform: none; }
}

/* 관리자 항목은 일반 항목과 섞지 않는다 — 집중 모드의 '관리' 칩과 같은 규칙 */
.nav-sheet-admin {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
    min-height: 40px;
    padding: 0 var(--space-3);
    border: 1.5px dashed var(--ink-muted);
    border-radius: 999px;
    color: var(--ink-muted);
    font-size: var(--text-small);
    font-weight: 600;
    text-decoration: none;
}

.nav-sheet-out { margin-top: var(--space-2); color: var(--ink-muted); }

/* 판 번호 — 서랍 맨 아래 한 줄. 눈에 먼저 들어오면 안 되지만, 물으면 답할 수
   있어야 한다. 관리자에게는 판 기록으로 가는 길이기도 하다. */
.nav-sheet-version {
    margin: var(--space-4) 0 0;
    padding: var(--space-2) var(--space-3);
    color: var(--ink-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    text-decoration: none;
    display: block;
}

a.nav-sheet-version:hover { color: var(--ink); }

/* 덮개도 테마를 따른다. 부트스트랩 기본은 **순검정**이라, 좁은 화면에서
   본문 위로 덮일 때 노치 언저리까지 까맣게 눌렀다. 테마마다 제 덮개색이 있다
   (`--overlay-backdrop`) — 한지는 따뜻한 갈색 쪽이다. */
.offcanvas-backdrop {
    z-index: 1055;
    background-color: var(--overlay-backdrop);
}

/* 부트스트랩은 `.show` 에서 `opacity: .5` 로 흐리게 만든다. 우리 덮개색은
   이미 알파를 품고 있으므로 두 번 흐려지지 않게 한다. */
.offcanvas-backdrop.show { opacity: 1; }

/* ── 설정 갈래 (시안 D) ────────────────────────────────────────────────────
   읽기 모양 · 테마 · 읽기 시간 · 정보를 한 화면에 세로로 이어 붙였더니
   2,000px 을 넘겼다. 한 번에 한 갈래만 보인다. */
.set-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--rule);
    overflow-x: auto;
}

.set-tab {
    flex: 1;
    min-width: max-content;
    min-height: var(--touch-min);
    padding: 0 var(--space-3);
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--ink-muted);
    font-family: var(--font-ui);
    font-size: var(--text-ui);
    font-weight: 500;
    cursor: pointer;
}

.set-tab.is-on {
    border-bottom-color: var(--ink);
    color: var(--ink);
    font-weight: 700;
}

.set-pane[hidden] { display: none; }

/* ── 테마 타일 (시안 D) ────────────────────────────────────────────────────
   아이콘과 이름만 적힌 줄로는 고를 수 없다. **타일 자체를 그 테마로 그린다** —
   바탕·글자·강조색 셋이 보이면 눈으로 고르는 편이 이름을 읽는 것보다 빠르다. */
.settings-page .theme-tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    border: 1px solid var(--rule);
    border-radius: var(--radius-surface);
    background: var(--swatch-bg);
    color: var(--swatch-ink);
    cursor: pointer;
}

.settings-page .theme-tile .theme-name { color: var(--swatch-ink); font-weight: 700; }
.settings-page .theme-tile .theme-description { color: var(--swatch-ink); opacity: 0.7; }

.theme-tile-bar {
    width: 32px;
    height: 4px;
    border-radius: 2px;
    background: var(--swatch-accent, var(--accent-solid));
}

/* 고른 것은 테두리로 알린다 — 타일 안쪽 색은 테마의 것이라 건드리지 않는다 */
.settings-page .theme-tile.selected {
    box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent-solid);
    border-color: transparent;
}

/* 11개가 한 화면 반 안에 들어오도록 두 줄로 세운다 */
.settings-page .set-pane[data-pane="theme"] .theme-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

@media (max-width: 359.98px) {
    .settings-page .set-pane[data-pane="theme"] .theme-tiles { grid-template-columns: 1fr; }
}

/* ── 시트 (겹친 면) ────────────────────────────────────────────────────────
   시안: "겹친 면은 시트·대화상자만. 그림자 하나, 모서리 16."
   그리고 "드롭다운 대신 아래 시트 — 본문을 덮지 않고, 엄지가 닿는 곳에."

   읽기 화면에는 이런 것이 넷 있었고(북마크 목록·북마크 쓰기·메모·메시지 이동)
   저마다 다른 모양이었다. 머리는 고정 파랑(`bg-primary`)이라 테마를 따르지
   않았고, `display: block` 으로 여닫아 초점이 뒤 화면에 남았다.

   하나로 모은다. `<dialog>` 라 초점 가둠과 Esc 는 브라우저가 맡는다. */
.sheet {
    /* `100vw` 는 세로 스크롤바 폭까지 센다 — 폰에서 시트가 화면 오른쪽으로
       넘쳐 이름표 칸이 잘려 나갔다. `100%` 는 `<dialog>` 가 띄워진 칸(화면)의
       실제 폭이라 넘치지 않는다. */
    width: min(34rem, 100%);
    max-height: 86vh;
    margin: auto auto 0;          /* 좁은 화면에서는 아래에 붙는다 */
    padding: 0;
    background: var(--paper-raised);
    color: var(--ink);
    border: 0;
    border-radius: var(--radius-surface) var(--radius-surface) 0 0;
    box-shadow: var(--shadow-strong);
    overflow: hidden;
}

/* **열렸을 때에만** 칸을 나눈다.
 *
 * `.sheet { display: flex }` 로 두었더니 닫힌 `<dialog>` 의 `display: none`
 * (브라우저 기본값)을 덮어써서, 시트 넷이 모두 본문 위에 깔렸다. 화면이
 * 통째로 겹쳐 보였다.
 *
 * 칸을 나누는 까닭은 따로 있다 — 나누지 않으면 본문이 제 높이대로 자라고
 * 시트가 86vh 에서 잘라 버려서, 목록이 길 때 아래쪽에 닿을 길이 없다. */
.sheet[open] {
    display: flex;
    flex-direction: column;
}

.sheet::backdrop { background: rgb(0 0 0 / 0.45); }

/* 넓은 화면에서는 가운데 뜬다 — 엄지가 아니라 마우스가 닿는 자리다 */
@media (min-width: 768px) {
    .sheet {
        margin: auto;
        border-radius: var(--radius-surface);
    }
    .sheet[open] .sheet-grip { display: none; }
}

/* 아래에서 올라온 것임을 알리는 손잡이 */
.sheet-grip {
    width: 40px;
    height: 5px;
    margin: var(--space-2) auto 0;
    border-radius: 3px;
    background: var(--border-strong);
}

.sheet-grip { flex: none; }

.sheet-head {
    display: flex;
    flex: none;                   /* 머리는 줄지 않는다 */
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--rule);
}

/* 머리에 색을 칠하지 않는다. 칠하면 테마마다 그 위 글자색을 다시 맞춰야 한다. */
.sheet-title {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--text-ui);
    font-weight: 700;
    color: var(--ink);
}

.sheet-note { font-size: var(--text-small); color: var(--ink-muted); }

.sheet-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    margin-left: auto;
    background: none;
    border: 0;
    border-radius: var(--radius-control);
    color: var(--ink-muted);
    font-size: 20px;
    cursor: pointer;
}

.sheet-close:hover { background: var(--surface-strong); color: var(--ink); }
/* 시트를 열면 닫기 단추가 먼저 잡힌다. 브라우저 기본 테두리는 파란색이라
   어느 테마에서도 겉돈다 — 강조색으로 바꾼다. */
.sheet-close:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: -2px; }

.sheet-body {
    /* 남는 높이를 다 갖되 **줄어들 수도 있어야** 스크롤이 켜진다.
       `min-height: 0` 이 없으면 flex 항목은 제 내용보다 작아지지 않는다. */
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--space-3) var(--space-4);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;   /* 시트 끝에서 뒤 본문이 따라 밀리지 않게 */
    font-family: var(--font-ui);
    font-size: var(--text-ui);
    line-height: 1.7;
}

.sheet-foot {
    display: flex;
    flex: none;                   /* 발도 줄지 않는다 — 단추가 잘리면 안 된다 */
    gap: var(--space-2);
    justify-content: flex-end;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--rule);
}

/* 안전한 쪽이 왼쪽이다 (시안). 위험한 것은 오른쪽 끝에 둔다. */
.sheet-foot .act-quiet { margin-right: auto; }

/* 시트 안의 목록 — 북마크·메시지처럼 고르는 것이 늘어설 때 */
.sheet-list { display: flex; flex-direction: column; margin: calc(var(--space-3) * -1) calc(var(--space-4) * -1); }

.sheet-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--touch-min);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    background: none;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    color: var(--ink);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.sheet-item:last-child { border-bottom: 0; }
.sheet-item:hover { background: var(--surface-alt); color: var(--ink); }
.sheet-item.is-here { background: var(--accent-soft-bg); color: var(--accent-soft-text); font-weight: 700; }
.sheet-item-name { flex: 1; min-width: 0; }
.sheet-item-aside { flex: none; font-size: var(--text-small); color: var(--ink-muted); }

/* ── 메시지 이동 — 시안 M ──────────────────────────────────────────────────
   앞서는 'M3' 과 제목이 붙어 있고 모든 줄이 굵어 번호와 제목이 구분되지 않았다.
   120개를 스크롤로만 찾아야 했고, 어디까지 읽었는지도 보이지 않았다. */
.msg-sheet { width: min(560px, 100%); }
.msg-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* 찾기 — 숫자를 치면 번호로, 글자를 치면 제목으로 거른다 */
/* 위아래 여백을 같게 둔다. 위를 0 으로 두었더니 머리 밑줄에 바로 붙었다. */
.msg-find { flex: none; padding: var(--space-2) var(--space-4); }

.msg-find-box {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 48px;
    padding: 0 var(--space-2) 0 var(--space-3);
    border: 1px solid var(--rule);
    border-radius: var(--radius-control);
    background: var(--paper);
    color: var(--ink-muted);
}

.msg-find-box input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--text-ui);
}

.msg-body { padding: 0; border-top: 1px solid var(--rule); }
.msg-list { display: flex; flex-direction: column; }

/* 번호 칸을 떼어 둔다. 붙여 두면 어디까지가 번호인지 읽히지 않는다. */
.msg-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    min-height: 52px;
    padding: 0 var(--space-4) 0 var(--space-3);
    background: none;
    border: 0;
    color: var(--ink);
    font-family: var(--font-ui);
    text-align: left;
    cursor: pointer;
}

.msg-row:hover { background: var(--surface-alt); }
.msg-row:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: -2px; }

.msg-row-n {
    padding-right: var(--space-2);
    font-size: var(--text-small);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink-muted);
    text-align: right;
}

/* 구분선은 제목 시작점부터. 줄마다 상자를 두르면 목록이 무겁다. */
.msg-row-t {
    /* 밑줄을 **제목 칸**이 그린다. 이름표 칸에도 같은 줄을 그려야 한쪽만
       짧게 끊기지 않는다 — 아래 `.msg-row-tag` 가 같은 값을 쓴다. */
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--rule);
    font-size: var(--text-ui);
    font-weight: 400;
    line-height: 1.4;
    word-break: keep-all;
}

.msg-row-tag {
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
    padding-left: var(--space-3);
    border-bottom: 1px solid var(--rule);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--ink-muted);
    white-space: nowrap;
}

/* 지금 읽는 메시지만 강조색 — 굵기와 바탕 둘로 알린다 */
.msg-row.is-here { background: var(--accent-soft-bg); }
.msg-row.is-here .msg-row-n,
.msg-row.is-here .msg-row-tag { color: var(--accent-soft-text); }
.msg-row.is-here .msg-row-t { color: var(--accent-soft-text); font-weight: 700; }

.msg-row[hidden] { display: none; }
.msg-row:last-child .msg-row-t,
.msg-row:last-child .msg-row-tag { border-bottom: 0; }
.msg-none { padding: var(--space-5) var(--space-4); text-align: center; color: var(--ink-muted); }

/* 앞뒤 이동 — 제목까지 함께 둔다.
 *
 * `1fr` 은 **내용보다 작아지지 않는다**(최소가 `auto` 다). 제목이 길면 칸이
 * 그만큼 넓어져 둘이 상자를 넘고, 넘친 만큼 왼쪽 단추가 밖으로 밀려 잘렸다
 * (2026-09-29 제보). `minmax(0, 1fr)` 로 바닥을 열어 준다. */
.msg-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2);
}

.msg-step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-height: 56px;
    /* 칸이 줄어들 때 글이 잘리도록 — 이것이 없으면 단추가 칸을 밀어낸다 */
    min-width: 0;
    padding: 0 var(--space-3);
    background: none;
    border: 1px solid var(--rule);
    border-radius: var(--radius-control);
    color: var(--ink);
    font-family: var(--font-ui);
    text-align: left;
    cursor: pointer;
}

.msg-step:hover { border-color: var(--border-strong); }
.msg-step-name {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
    font-size: var(--text-small);
    font-weight: 600;
    white-space: nowrap;
}

.msg-step-title {
    font-size: var(--text-small);
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 하나뿐이면 (첫 메시지·끝 메시지) 그 칸을 다 쓴다 */
.msg-steps .msg-step:only-child { grid-column: 1 / -1; }

@media (max-width: 575.98px) {
    .msg-find { padding-left: var(--space-3); padding-right: var(--space-3); }
    .msg-sheet .sheet-head { padding-bottom: var(--space-2); }
    .msg-row { padding-right: var(--space-3); }

    /* 좁으면 제목은 접고 번호만 — 시안 M-2 는 'M 2' 하나를 가운데 둔다 */
    .msg-step-title { display: none; }
    .msg-step { align-items: center; }
    .msg-step-name .msg-step-word { display: none; }
}

/* ── 하이라이트 목록 시트 ───────────────────────────────────────────────
   본문 아래 붙어 있던 '하이라이트 된 구절' 상자를 걷어내고, 북마크·메모와
   같은 시트에 담았다. 칠한 것을 잠시 끄는 스위치는 머리에 둔다. */
.mark-switch { min-height: 0; border: 0; margin-right: var(--space-2); }

/* 모두 지우기 — 머리에 조용히 선다. 되돌릴 수 없는 일이므로 눈에 먼저 띄어서는
   안 되고(칠하러 온 사람이 더 많다), 찾을 때는 바로 보여야 한다. */
.mark-wipe {
    margin-left: auto;          /* 제목과 떨어져 오른쪽 무리에 붙는다 */
    padding: var(--space-1) var(--space-2);
    border: 0;
    border-radius: var(--radius-control);
    background: none;
    color: var(--ink-muted);
    font-family: var(--font-ui);
    font-size: var(--text-small);
    white-space: nowrap;
    cursor: pointer;
}

.mark-wipe:hover { background: var(--surface-strong); color: var(--danger-solid); }
.mark-wipe:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 2px; }
.mark-wipe[hidden] { display: none; }

.mark-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    border-bottom: 1px solid var(--rule);
}

.mark-row:last-child { border-bottom: 0; }

.mark-go {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    min-height: 52px;
    padding: var(--space-2) 0;
    border: 0;
    background: none;
    color: var(--ink);
    font-family: var(--font-ui);
    text-align: left;
    cursor: pointer;
}

.mark-go:hover { background: var(--surface-alt); }
.mark-go:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: -2px; }

.mark-dot { flex: none; width: 14px; height: 14px; margin-top: 4px; border-radius: 4px; }
.mark-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* 칠한 글은 본문 글꼴로 — 목록에서도 읽던 모습 그대로다 */
.mark-text {
    font-family: var(--font-reading, serif);
    font-size: var(--text-ui);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mark-note { font-size: var(--text-small); color: var(--ink-muted); }

.mark-drop {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--radius-control);
    background: none;
    color: var(--ink-muted);
    cursor: pointer;
}

.mark-drop:hover { background: var(--surface-strong); color: var(--danger-solid); }

/* 새 판 알림 — 켜 둔 창에 새 파일이 닿았을 때 한 줄.
 *
 * 폰은 탭을 닫지 않는다. 몇 시간 전에 연 화면이 옛 JS 를 쥔 채로 남아, 고친
 * 것이 반영되지 않는다. 스스로 새로고침하지는 않는다 — 읽던 자리를 잃을 수
 * 있으므로 묻고 나서 한다. */
.fresh-bar {
    position: fixed;
    /* 폰에서는 **아래 띠**로 편다.
     *
     * 가운데 알약으로 두었더니 글이 세 줄로 접히고 단추의 글자가 세로로
     * 쪼개졌다('새 로 고 침'). 글 한 줄과 단추 둘이 들어갈 자리가 없었다
     * (2026-09-28 제보). */
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(var(--tools-height, 0px) + var(--space-3));
    z-index: 1100;                     /* 하이라이트 도구(1080) 위 */
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
    border: 1px solid var(--rule);
    border-radius: var(--radius-surface, 14px);
    /* **테마를 따른다.** 검은 판에 흰 글씨로 못 박아 두었더니 한지·세피아처럼
       종이 느낌을 가진 테마에서 이 줄만 혼자 튀었다. 떠 있는 다른 것들
       (시트·도구 막대·말풍선)과 같은 토큰을 쓴다. */
    background: var(--paper-raised, var(--paper));
    color: var(--ink);
    font-size: var(--text-small);
    line-height: 1.4;
    box-shadow: var(--shadow-strong, 0 8px 20px rgb(0 0 0 / 0.15));
}

/* 이미 얹은 것을 알리기만 하는 줄 — 누를 것이 없다. 스스로 사라진다. */
.fresh-bar.is-quiet {
    justify-content: center;
    padding: var(--space-2) var(--space-3);
}

/* 글은 줄어들고, 단추는 줄어들지 않는다 */
.fresh-bar > span {
    flex: 1;
    min-width: 0;
    word-break: keep-all;
}

.fresh-bar-go {
    flex: none;
    white-space: nowrap;
    min-height: 34px;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: 999px;
    background: var(--accent-solid);
    color: var(--on-accent, #fff);
    font-family: var(--font-ui);
    font-size: var(--text-small);
    font-weight: 600;
    cursor: pointer;
}

.fresh-bar-stop {
    flex: none;
    white-space: nowrap;
    min-height: 34px;
    padding: 0 var(--space-2);
    border: 0;
    background: transparent;
    /* `--ink-muted` 로 두었더니 세피아에서 바탕에 묻혀 안 보였다. 글씨는
       본문 색으로 두고 세기만 낮춘다. */
    color: var(--ink);
    opacity: 0.6;
    font-family: var(--font-ui);
    font-size: var(--text-small);
    cursor: pointer;
}

@media (min-width: 560px) {
    /* 넓은 화면에서는 가운데 알약으로 — 띠로 펴면 한 문장에 화면이 넓다 */
    .fresh-bar {
        left: 50%;
        right: auto;
        width: max-content;
        max-width: calc(100vw - 32px);
        transform: translateX(-50%);
        border-radius: 999px;
    }
}

@media (min-width: 560px) {
    /* 넓은 화면에서는 가운데 알약으로 — 띠로 펴면 한 문장에 화면이 넓다 */
    .fresh-bar {
        left: 50%;
        right: auto;
        width: max-content;
        max-width: calc(100vw - 32px);
        transform: translateX(-50%);
        border-radius: 999px;
    }
}

.fresh-bar-stop {
    min-height: 34px;
    padding: 0 var(--space-2);
    border: 0;
    background: transparent;
    color: var(--paper);
    font-family: var(--font-ui);
    font-size: var(--text-small);
    opacity: 0.7;
    cursor: pointer;
}

/* ── 종 팝업 (시안 AF) ─────────────────────────────────────────────────
 *
 * 알림 하나가 150px 넘게 차지해 팝업에 두 개 반만 보였다. 아이콘이 한 줄을
 * 따로 쓰고, 본문의 '유형: … 시간: …' 을 그대로 적어 절대 시각과 '12분 전'
 * 이 겹쳤다. 왼쪽 굵은 회색 띠와 '일반' 배지가 모든 알림에 똑같이 붙어
 * 구분이 되지 않았다.
 *
 * 한 알림은 두 줄이다 — 제목 한 줄과 흐린 한 줄. 360폭, 여섯 줄 높이.
 */
/* ── 쪽 아래 ───────────────────────────────────────────────────────────── */
/* 부트스트랩의 `bg-light`·`text-muted` 는 색을 박아 두어 테마를 따르지
   않았다. 바탕은 한 단 가라앉은 면, 글자는 흐린 먹빛이다. */
.site-foot {
    padding: var(--space-3) 0 calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--rule);
    background: var(--surface-sunken);
    color: var(--ink-muted);
    font-family: var(--font-ui);
    font-size: var(--text-small);
    text-align: center;
}

.site-foot p { margin: 0; }

/* 판본. 저작권 줄보다 한 단 더 물러나되 **읽을 수는 있어야** 한다 —
   제보를 받을 때 사람이 불러 줘야 하는 글자다. */
.site-foot-ver {
    margin-left: var(--space-2);
    opacity: .75;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bell { position: relative; display: flex; align-items: center; }

.bell-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--radius-control);
    background: none;
    /* 머리 막대의 다른 글자와 같은 색이다.
     *
     * `inherit` 로 두었더니 **검은색**이 되었다 — 종은 단추(`<button>`)이고,
     * 그 위의 `li.nav-item` 에는 색이 걸려 있지 않아 본문 글자색까지 올라가
     * 버린다. 막대의 링크 색(`.navbar-dark .nav-link`)은 클래스에 걸려 있어
     * 단추에는 닿지 않는다.
     *
     * 값은 `--navbar-ink` 하나를 본다. 여기에 숫자를 적어 두었더니 테마
     * 단추가 같은 병에 걸렸을 때 고칠 자리가 둘이 되었다 (`nav-head.css`). */
    color: var(--navbar-ink);
    cursor: pointer;
}

.bell-btn:hover,
.bell-btn:focus-visible { background: rgb(255 255 255 / 0.12); color: var(--navbar-ink-strong); }

.bell-count {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger-solid, #b3261e);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.bell-count.is-none { display: none; }

.bell-box {
    position: absolute;
    top: calc(100% + var(--space-1));
    right: 0;
    z-index: 1200;
    width: min(360px, calc(100vw - 24px));
    border: 1px solid var(--rule);
    border-radius: var(--radius-surface, 12px);
    background: var(--paper-raised, var(--paper));
    box-shadow: 0 18px 44px -20px rgb(0 0 0 / 0.45);
    overflow: hidden;
}

.bell-box[hidden] { display: none; }

.bell-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border-bottom: 1px solid var(--rule);
}

.bell-title {
    font-family: var(--font-ui);
    font-size: var(--text-small);
    font-weight: 700;
    color: var(--ink);
}

.bell-title b { margin-left: var(--space-1); color: var(--ink-muted); font-weight: 400; }

.bell-all-form { margin: 0 0 0 auto; }

.bell-all {
    border: 0;
    background: none;
    color: var(--accent-solid);
    font-family: var(--font-ui);
    font-size: var(--text-small);
    cursor: pointer;
}

.bell-all:disabled { color: var(--ink-muted); opacity: 0.5; cursor: default; }

/* 여섯 줄까지 보이고 그 아래는 밀어 본다 — 팝업이 화면을 덮으면 안 된다 */
.bell-list { max-height: 21rem; overflow-y: auto; }

.bell-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 10px;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    text-decoration: none;
}

.bell-row:last-child { border-bottom: 0; }
.bell-row:hover { background: var(--surface-alt); color: var(--ink); }

.bell-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-alt);
    color: var(--ink-muted);
    font-size: 13px;
}

.bell-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.bell-row-title {
    font-family: var(--font-ui);
    font-size: var(--text-small);
    line-height: 1.4;
    /* 두 줄까지만 — 긴 알림이 팝업을 늘리면 여섯 개가 서지 못한다 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bell-row.is-unread .bell-row-title { font-weight: 700; }

/* 색이 붙는 것은 경고와 오류뿐이다 */
.bell-loud { font-weight: 700; }
.bell-loud.is-warning { color: var(--warn-solid, #b8860b); }
.bell-loud.is-error { color: var(--danger-solid, #b3261e); }

.bell-ago {
    color: var(--ink-muted);
    font-family: var(--font-ui);
    font-size: var(--text-small);
}

.bell-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--danger-solid, #b3261e);
}

.bell-more {
    display: block;
    padding: var(--space-3);
    border-top: 1px solid var(--rule);
    color: var(--accent-solid);
    font-family: var(--font-ui);
    font-size: var(--text-small);
    text-align: center;
    text-decoration: none;
}

.bell-more:hover { background: var(--surface-alt); color: var(--accent-solid); }
.bell-more i { font-size: 10px; }

.bell-wait {
    margin: 0;
    padding: var(--space-4) var(--space-3);
    color: var(--ink-muted);
    font-family: var(--font-ui);
    font-size: var(--text-small);
    text-align: center;
}