/* 남길말 — 화면 스타일.
   ============================================================
   (2026-08-06 전면 개편) 토스식으로 다시 짰다. 근거는 PLAN.md §15.

   가져온 것: 회색 배경 + 흰 카드 + 큰 라운드 + 굵은 제목 + 한 화면에 압도적인
   버튼 하나. 사람이 "다음에 뭘 하지"를 고민하지 않게 하는 구조다.

   안 가져온 것: 발랄함. 이 화면을 보는 사람 중 일부는 방금 누군가를 잃었다.
   이모지·느낌표·색색의 강조를 쓰지 않고, 강조색은 '다음 행동' 하나에만 쓴다.

   지켜야 하는 하한(PLAN.md §15 — 미국·글로벌 관점):
     · 본문 17px, 부가 텍스트 14px 미만으로 내리지 않는다(노년 사용자)
     · 누를 수 있는 것은 44px 이상(WCAG 2.5.5) — 삭제 버튼도 예외 아니다
     · 포커스 링을 지우지 않는다
     · JS 없이 전부 동작한다 */

/* ── 토큰 — 값은 전부 신독 본체의 단일 소스를 가리킨다 ─────────────
   (2026-08-06 · PLAN.md §23) 이름은 남길말 것을 그대로 두고 **값의 출처만**
   `static/colors.css` · `static/fonts.css` 로 옮겼다. 이건 이 저장소가 이미
   정한 규약이다 — colors.css 머리말: "변수 이름까지 통일하려면 그 이름을 쓰는
   규칙 수백 곳을 다시 훑어야 해서 위험이 크다. 값의 출처만 하나로 모으는 쪽이
   훨씬 안전하면서 목적(하나 바꾸면 전체 반영)을 달성한다."

   색을 여기서 바꾸지 않는다. 바꿀 일이 생기면 `static/colors.css` 를 고친다 —
   그러면 신독과 남길말이 **같이** 바뀐다. 그게 이 구조의 전부다.

   폴백값을 함께 적는 이유: 토큰 파일이 어떤 이유로든 안 실렸을 때 화면이
   무채색으로 무너지지 않게 한다. 값이 아니라 **안전망**이다. */
:root {
  --bg:          var(--c-bg, #f8fafc);
  --card:        var(--c-white, #ffffff);
  --fg:          var(--c-text-hi, #0f172a);
  --fg-sub:      var(--c-text-dark, #1e293b);
  --muted:       var(--c-slate, #64748b);
  --line:        var(--c-line, #e2e8f0);
  --fill:        var(--c-surface-tint-gray, #f1f5f9);
  /* 부행동 버튼 바닥. **--bg 와 확실히 달라야 한다** — 같으면 버튼이 배경에
     녹아 사라진다(2026-08-06 실측 · 가입 화면의 입력칸이 통째로 안 보였다).
     그래서 surface-tint-gray(#f1f5f9)가 아니라 한 단계 진한 line 을 쓴다. */
  --fill-strong: var(--c-line, #e2e8f0);

  --accent:      var(--c-navy-mid, #1d4ed8);    /* 신독의 액션 컬러 그대로 */
  --accent-ink:  var(--c-navy-deep, #0f172a);   /* 눌림·hover */
  --accent-soft: var(--c-surface-tint, #eff6ff);
  --on-accent:   var(--c-on-accent, #ffffff);

  --warn:        var(--c-warn, #d97706);
  --warn-soft:   var(--c-warn-soft, #fffbeb);
  --danger:      var(--c-danger, #dc2626);
  --danger-soft: var(--c-danger-soft, #fef2f2);

  --r-lg: var(--radius-lg, 18px);
  --r-md: var(--radius-md, 12px);
  --r-sm: var(--radius-sm, 6px);
  --shadow: var(--shadow-card, 0 2px 14px rgba(15,23,42,.06));

  /* 이것만 남길말 고유다 — 한 줄 길이는 이 제품의 판단이지 색 체계가 아니다.
     신독은 정보 밀도가 높은 매체라 넓고, 여기는 편지를 읽는 곳이라 좁다. */
  --maxw: 34rem;
}

/* 다크 모드는 **두지 않는다.** 신독의 공식 디자인이 라이트 전용이고
   (`static/tokens.css`: "home.html의 라이트 테마가 사이트 전체의 공식 디자인이다
   — 2026-07-07 확정"), 남길말만 다크를 갖고 있으면 그게 바로 디자인 체계가
   갈라지는 방식이다. 다크가 필요해지면 `static/colors.css` 에 넣는다 —
   그러면 두 화면이 같이 얻는다. */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  /* 서체도 신독과 같은 소스에서 온다(`static/fonts.css` — 그 파일은 생성물이고
     `scripts/build_fonts_css.py` 가 만든다). 뒤의 목록은 그 파일이 안 실렸을 때의
     안전망이다 — 서체가 없다고 글이 안 읽히면 안 된다. */
  font-family: var(--font-sans, -apple-system), BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Pretendard Variable", "Noto Sans KR", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: -0.01em;
  word-break: keep-all;      /* 한국어는 이게 없으면 단어 중간에서 갈라진다 */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }

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

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }

/* --- 머리 ------------------------------------------------- */
header.top {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
header.top .wrap { display: flex; align-items: center; gap: 0.75rem; min-height: 3.5rem; }
.brand {
  font-weight: 800; font-size: 1.1rem; letter-spacing: -0.04em; color: var(--fg);
  display: flex; align-items: baseline; gap: 0.4rem;
}
.brand:hover { text-decoration: none; }
.brand small { font-weight: 500; font-size: 0.75rem; color: var(--muted); letter-spacing: -0.01em; }
nav.top { margin-left: auto; display: flex; align-items: center; gap: 0.25rem; }
nav.top a, nav.top button.link {
  color: var(--fg-sub); font-size: 0.9rem; font-weight: 600;
  padding: 0.55rem 0.5rem; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; min-height: 44px;
}
nav.top a:hover, nav.top button.link:hover { background: var(--fill); text-decoration: none; }
nav.top form { display: inline; }
nav.top button.link { background: none; border: 0; font-family: inherit; cursor: pointer; }

/* 좁은 화면에서는 부가 메뉴를 감추고, 아래 푸터에서 전부 갈 수 있게 둔다.
   숨기는 게 아니라 자리를 옮기는 것이다 — 갈 곳이 없어지면 안 된다. */
@media (max-width: 30rem) {
  nav.top a.sub { display: none; }
}

main { padding: 1.5rem 0 2rem; }

/* --- 글 --------------------------------------------------- */
h1 {
  font-size: 1.65rem; line-height: 1.4; font-weight: 800;
  letter-spacing: -0.045em; margin: 0.25rem 0 0.75rem;
}
h2 {
  font-size: 1.15rem; font-weight: 700; letter-spacing: -0.035em;
  margin: 2.25rem 0 0.75rem;
}
h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 0.4rem; }
p { margin: 0 0 0.85rem; color: var(--fg-sub); }
h1 + p, .lede { color: var(--fg-sub); }
.lede { font-size: 1.05rem; margin-bottom: 1.5rem; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; line-height: 1.65; }   /* 14.9px — 하한 */
strong, b { font-weight: 700; color: var(--fg); }
ul, ol { color: var(--fg-sub); padding-left: 1.2rem; }
li { margin-bottom: 0.4rem; }

/* 섹션 이름 — 카드 위에 작게 앉는다 */
.sec { font-size: 0.875rem; font-weight: 700; color: var(--muted);
       letter-spacing: -0.02em; margin: 2rem 0 0.5rem; }
/* 링크로 바로 내려왔을 때 붙박이 머리에 가리지 않게 자리를 비워 둔다.
   (2026-08-06 실측) 이걸 안 두면 '받을 사람 추가'로 내려왔을 때 정작
   '받을 사람'이라는 제목이 머리 밑에 숨어서, 어디로 온 건지 알 수 없었다. */
[id] { scroll-margin-top: 4.75rem; }

/* --- 카드 ------------------------------------------------- */
.card {
  background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: 1.25rem; margin: 0 0 0.75rem;
}
.card > :last-child { margin-bottom: 0; }
.card p { font-size: 0.95rem; }

/* 위로 나가는 길. (2026-08-06 · PLAN.md §18) 하위 화면에서 일을 끝냈는데
   나가는 문이 맨 아래 설명 세 장 밑에만 있었다 — 모바일에서 그 아래는 없는 것과
   같다. 아래 버튼은 그대로 두고, 위에도 하나 둔다. */
.back {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.9rem; font-weight: 600; color: var(--muted);
  margin: 0 0 0.25rem; padding-right: 0.5rem;
}
.back:hover { color: var(--fg); text-decoration: none; }

/* 여기서 할 일이 끝났다는 표시 + 다음으로 가는 문. 같은 자리에 있어야 한다. */
.done {
  background: var(--accent-soft); border-radius: var(--r-lg);
  padding: 1.25rem; margin: 0 0 1rem;
}
.done .done-head {
  font-size: 1.05rem; font-weight: 700; color: var(--accent);
  letter-spacing: -0.03em; margin-bottom: 0.35rem;
}
.done p { font-size: 0.95rem; margin-bottom: 1rem; }
.done > :last-child { margin-bottom: 0; }

/* 다음에 할 일 — 화면에서 가장 강한 것 하나 */
.next {
  background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: 1.5rem 1.25rem 1.25rem; margin-bottom: 0.75rem;
  border: 2px solid var(--accent);
}
.next .step-of { font-size: 0.85rem; font-weight: 700; color: var(--accent); }
.next h2 { font-size: 1.35rem; margin: 0.25rem 0 0.4rem; letter-spacing: -0.04em; color: var(--fg); }
.next p { margin-bottom: 1rem; }
/* 막고 있는 것의 이름. 일반 설명보다 강하게 — 이게 답이다(PLAN.md §16). */
/* (2026-08-06 대비 실측) 글자색을 --warn 으로 두면 warn-soft 위에서 3.1:1 이라
   AA(본문 4.5:1)에 못 미친다. 경고는 **배경과 띠**가 말하게 하고 글자는 본문색으로
   둔다 — 17.2:1. 색으로만 뜻을 전하지 않는 편이 어차피 옳다. */
.next .blocker {
  background: var(--warn-soft); color: var(--fg); font-weight: 700;
  border-left: 4px solid var(--warn);
  border-radius: var(--r-md); padding: 0.8rem 1rem; font-size: 0.95rem;
}

/* --- 알림 ------------------------------------------------- */
.note {
  background: var(--accent-soft); border-radius: var(--r-md);
  padding: 1rem 1.1rem; margin: 1rem 0; font-size: 0.95rem; color: var(--fg-sub);
}
.note.warn { background: var(--warn-soft); }
.note.warn strong { color: var(--warn); }
/* 첫 굵은 글자만 제목처럼 한 줄을 갖는다. 예전에는 `.note strong` 전부에
   display:block 을 걸어서, 문장 한가운데의 강조가 통째로 줄바꿈되어 문장이
   두 동강 나 있었다(랜딩의 "재산을 어떻게 나눌지는 …"). */
.note > strong:first-child { display: block; margin-bottom: 0.3rem; }
.note strong { color: var(--fg); }
.note > :last-child { margin-bottom: 0; }

.error {
  background: var(--danger-soft); color: var(--danger); font-weight: 600;
  padding: 0.9rem 1.1rem; border-radius: var(--r-md); margin: 0 0 1rem; font-size: 0.95rem;
}

/* --- 지금 상태 한 문장 ------------------------------------ */
.now {
  background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: 1.25rem; margin-bottom: 0.75rem;
}
.now .tag {
  display: inline-block; font-size: 0.8rem; font-weight: 700; padding: 0.2rem 0.6rem;
  border-radius: 999px; background: var(--fill); color: var(--fg-sub); margin-bottom: 0.5rem;
}
.now .tag.armed { background: var(--accent-soft); color: var(--accent); }
.now .tag.dormant, .now .tag.grace { background: var(--warn-soft); color: var(--warn); }
.now .tag.released { background: var(--danger-soft); color: var(--danger); }
.now .say { font-size: 1.05rem; font-weight: 600; color: var(--fg); letter-spacing: -0.03em;
            margin: 0 0 0.35rem; line-height: 1.55; }
.now .why { font-size: 0.9rem; color: var(--muted); margin: 0; }

/* --- 단계 표시 -------------------------------------------- */
.steps { list-style: none; padding: 0; margin: 0; }
.steps li {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0;
  font-size: 0.95rem; color: var(--muted); margin: 0;
}
.steps li + li { border-top: 1px solid var(--line); }
.steps .mark {
  flex: 0 0 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--fill);
  color: var(--muted); font-size: 0.8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 0.1rem;
}
.steps li.done .mark { background: var(--accent); color: var(--on-accent); }
.steps li.done { color: var(--fg-sub); }
.steps li.here .mark { background: var(--accent-soft); color: var(--accent);
                       box-shadow: 0 0 0 2px var(--accent); }
.steps li.here { color: var(--fg); font-weight: 700; }
/* 줄 전체가 누를 자리다 — 글자 높이만큼만 눌리면 44px 을 못 채운다(WCAG 2.5.5). */
.steps li { padding: 0; }
.steps li > .mark { margin: 0; align-self: center; }
.steps li a { color: inherit; font-weight: inherit; flex: 1 1 auto;
              min-height: 48px; display: flex; align-items: center; }
.steps li > span:not(.mark):not(.ok) { display: flex; align-items: center; min-height: 48px; }
.steps .ok { flex: 0 0 auto; font-size: 0.8rem; font-weight: 700; color: var(--accent);
             display: flex; align-items: center; min-height: 48px; padding-right: 0.15rem; }

/* 목록 줄에서 "이게 막고 있다"를 바로 보이게 하는 표시 */
.rows .v.flag {
  color: var(--warn); background: var(--warn-soft); font-weight: 700;
  padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.8rem;
}

/* --- 목록(표를 대신한다) ---------------------------------- */
/* 모바일에서 <table> 은 가로로 넘친다. 한 줄에 하나씩 읽게 바꾼다. */
.rows { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow);
        overflow: hidden; margin: 0 0 0.75rem; }
.rows .row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.95rem 1.15rem; min-height: 56px;
}
.rows .row + .row { border-top: 1px solid var(--line); }
.rows a.row { color: inherit; font-weight: inherit; }
.rows a.row:hover { background: var(--fill); text-decoration: none; }
.rows .main { flex: 1 1 auto; min-width: 0; }
.rows .t { font-weight: 700; letter-spacing: -0.02em; display: block; }
.rows .s { font-size: 0.85rem; color: var(--muted); display: block; line-height: 1.5; }
.rows .v { flex: 0 0 auto; color: var(--fg-sub); font-weight: 600; font-size: 0.9rem;
           font-variant-numeric: tabular-nums; text-align: right; }
.rows .go { flex: 0 0 auto; color: var(--muted); font-size: 1.1rem; }
.rows .empty { padding: 1.5rem 1.15rem; color: var(--muted); font-size: 0.95rem; text-align: center; }

/* --- 숫자 요약 -------------------------------------------- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin: 0 0 0.75rem; }
.stat { background: var(--card); border-radius: var(--r-md); padding: 0.9rem 0.5rem; text-align: center; }
.stat b { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.04em;
          font-variant-numeric: tabular-nums; line-height: 1.3; }
.stat span { font-size: 0.8rem; color: var(--muted); }

/* --- 버튼 ------------------------------------------------- */
/* 위계는 셋뿐이다: 채운 것(주행동) · 회색(부행동) · 글자(그 외).
   넷을 넘기면 무엇이 다음인지 안 보인다. */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0.85rem 1.4rem;
  font: inherit; font-size: 1rem; font-weight: 700; letter-spacing: -0.02em;
  border: 0; border-radius: var(--r-md);
  background: var(--accent); color: var(--on-accent); cursor: pointer;
  width: 100%; margin: 0 0 0.5rem; text-align: center;
  transition: background 0.12s ease;
}
button:hover, .btn:hover { background: var(--accent-ink); text-decoration: none; }

/* 부행동은 `--fill` 이 아니라 한 단계 진한 회색이다 — `--fill` 은 페이지 바탕과
   같은 색이라 버튼이 배경에 녹아 사라진다(위 입력칸과 같은 실측). */
button.ghost, .btn.ghost, button.quiet, .btn.quiet {
  background: var(--fill-strong); color: var(--fg);
}
button.ghost:hover, .btn.ghost:hover, button.quiet:hover, .btn.quiet:hover {
  background: var(--line);
}
button.danger, .btn.danger { background: var(--danger-soft); color: var(--danger); }
button.danger:hover { background: var(--danger-soft); }

/* 글자 버튼 — 파괴적이거나 드문 행동. 작게 보이되 **누를 자리는 44px** 이다. */
button.text, .btn.text {
  background: none; color: var(--muted); font-size: 0.9rem; font-weight: 600;
  min-height: 44px; padding: 0.6rem 0.75rem; width: auto;
}
button.text:hover, .btn.text:hover { background: var(--fill); }
button.text.danger { color: var(--danger); background: none; }

/* 눌렀다는 것이 **분명히** 보여야 한다. (2026-08-06 · PLAN.md §19)
   회색 버튼의 글자만 바뀌면 작은 화면에서, 특히 시선이 입력칸에 있을 때 안 보인다.
   그래서 색을 강조색으로 바꾸고 도는 표식을 붙인다. 잠긴 버튼을 흐리게 만들지
   않는다 — 지금은 죽은 게 아니라 **일하는 중**이다. */
button.is-busy, .btn.is-busy {
  background: var(--accent); color: var(--on-accent); opacity: 1; cursor: progress;
}
button.is-busy::before {
  content: ""; width: 1em; height: 1em; margin-right: 0.55em; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: sd-spin 0.6s linear infinite; flex: 0 0 auto;
}
@keyframes sd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  button.is-busy::before { animation: none; border-top-color: currentColor; opacity: 0.5; }
}
button:disabled:not(.is-busy) { opacity: 0.5; cursor: default; }

/* 폼 전체가 처리 중임을 보인다 — 버튼 하나만 바뀌면 시선이 다른 데 있을 때 놓친다. */
form.form-busy input, form.form-busy select, form.form-busy textarea,
form.form-busy .check { opacity: 0.55; pointer-events: none; }
form.form-busy { cursor: progress; }

/* 줄 하나가 두 층이 되는 경우 — 사람 정보 위, 발송 상태 아래(PLAN.md §20). */
.rows .row.col { display: block; }
.rows .row.col .rowtop { display: flex; align-items: center; gap: 0.75rem; }
.mailrow {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 0.5rem;
  margin-top: 0.5rem; padding-top: 0.6rem; border-top: 1px dashed var(--line);
}
.mailrow .s { flex: 1 1 12rem; font-size: 0.85rem; color: var(--muted); line-height: 1.55; }
.mailrow form { flex: 0 0 auto; }
.pill {
  flex: 0 0 auto; font-size: 0.78rem; font-weight: 700; padding: 0.15rem 0.55rem;
  border-radius: 999px; background: var(--fill-strong); color: var(--fg-sub);
}
/* 알약은 0.78rem 이라 4.5:1 이 필요하다. 옅은 배경 위 색글자(4.4:1)로는 모자라서
   눈에 띄어야 하는 두 상태(반송·실패)는 **채운 형태**로 바꿨다 — 흰 글자 4.8:1.
   나머지는 옅은 배경 + 본문색으로 둔다. */
.pill.sent { background: var(--accent-soft); color: var(--accent); }
.pill.pending { background: var(--warn-soft); color: var(--fg); }
.pill.failed, .pill.bounced { background: var(--danger); color: var(--on-accent); }
button.tiny { min-height: 44px; padding: 0.5rem 0.9rem; font-size: 0.85rem; width: auto; }

/* 방금 추가된 줄. 목록이 길면 무엇이 늘었는지 안 보인다. */
.rows .row.fresh { background: var(--accent-soft); }
.rows .row.fresh .t::after {
  content: "방금 추가"; margin-left: 0.5rem; font-size: 0.75rem; font-weight: 700;
  color: var(--accent); vertical-align: 1px;
}

.btnrow { display: flex; gap: 0.5rem; }
.btnrow > * { flex: 1 1 0; margin-bottom: 0.5rem; }

/* 주행동 묶음 — 화면 끝에 온다.
   (2026-08-06 실측) 처음에는 토스처럼 `position: sticky; bottom: 0` 으로 화면에
   붙여 뒀다가 되돌렸다. 스크린샷을 찍어 보니 **버튼이 본문을 덮고 있었다** —
   가입 화면에서 "비밀번호가 곧 열쇠입니다" 경고의 뒷문장이 버튼에 가려졌다.
   토스의 고정 버튼은 화면 하나가 짧게 끝나는 앱이라 성립하는 것이고, 스크롤되는
   긴 문서 위에서는 읽어야 할 것을 가린다. 이 서비스에서 가려지면 안 되는 문장이
   하필 그 자리에 있으므로, 고정을 버리고 흐름의 마지막에 둔다. */
.cta { padding: 1.25rem 0 calc(0.5rem + env(safe-area-inset-bottom)); }
.cta > :last-child { margin-bottom: 0; }

/* --- 폼 --------------------------------------------------- */
form { margin: 0; }
.field { margin: 0 0 1rem; }
label { display: block; font-size: 0.9rem; font-weight: 700; color: var(--fg-sub);
        margin: 0 0 0.4rem; letter-spacing: -0.02em; }
label .opt { font-weight: 500; color: var(--muted); }
/* (2026-08-06 실측) 입력칸 바탕을 `--fill` 로 뒀더니 **가입 화면에서 칸이 통째로
   사라져 보였다.** `--fill` 과 페이지 바탕 `--bg` 가 같은 회색이라, 카드 안이
   아니라 페이지 위에 바로 놓인 폼에서는 경계가 하나도 안 남는다. 그래서 입력칸은
   카드색 + 테두리로 간다 — 회색 위에서도, 흰 카드 위에서도 칸이 보인다. */
input[type=text], input[type=email], input[type=password], input[type=number], textarea, select {
  width: 100%; padding: 0.9rem 1rem; min-height: 52px;
  font: inherit; font-size: 1rem; letter-spacing: -0.02em;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card); color: var(--fg);
  -webkit-appearance: none; appearance: none;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 2.5rem;
}
textarea { min-height: 14rem; line-height: 1.85; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, textarea:focus, select:focus {
  border-color: var(--accent); background: var(--card); outline: none;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 1px;
}
.help { font-size: 0.875rem; color: var(--muted); margin: 0.4rem 0 0; line-height: 1.6; }

.row2 { display: flex; gap: 0.5rem; }
.row2 > * { flex: 1 1 0; }

/* 체크는 줄 전체가 누를 자리다 — 네모 하나만 노리게 하지 않는다 */
.check {
  display: flex; align-items: flex-start; gap: 0.7rem; cursor: pointer;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 0.9rem 1rem;
  font-size: 0.925rem; color: var(--fg-sub); font-weight: 500; margin: 0 0 1rem;
  min-height: 52px; letter-spacing: -0.02em;
}
.check input { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; margin: 0.15rem 0 0; accent-color: var(--accent); }

/* --- 흐름 그림 -------------------------------------------- */
.flow { list-style: none; padding: 0; margin: 1rem 0; }
.flow li {
  position: relative; padding: 0 0 1.1rem 1.5rem; margin: 0;
  border-left: 2px solid var(--line); font-size: 0.95rem; color: var(--muted);
}
.flow li:last-child { border-left-color: transparent; padding-bottom: 0; }
.flow li::before {
  content: ""; position: absolute; left: -0.4rem; top: 0.45rem;
  width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--accent);
}
.flow b { display: block; color: var(--fg); font-weight: 700; letter-spacing: -0.025em;
          margin-bottom: 0.15rem; }

/* --- 표(정말 표여야 하는 곳만) ---------------------------- */
.tablewrap { overflow-x: auto; background: var(--card); border-radius: var(--r-lg); padding: 0.25rem 0; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line);
         vertical-align: top; color: var(--fg-sub); }
tr:last-child th, tr:last-child td { border-bottom: 0; }
th { color: var(--muted); font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--fg); font-weight: 600; }

/* --- 봉투 본문 -------------------------------------------- */
.letter {
  background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: 1.75rem 1.4rem;
  white-space: pre-wrap; line-height: 2; font-size: 1.05rem; color: var(--fg);
}

pre.mono {
  background: var(--fill); border-radius: var(--r-md); padding: 0.9rem 1rem;
  overflow-x: auto; font-size: 0.85rem; line-height: 1.7; white-space: pre-wrap;
  word-break: break-all; color: var(--fg-sub); margin: 0 0 0.75rem;
}

/* --- 발 --------------------------------------------------- */
footer.bot {
  margin-top: 2.5rem; padding: 1.75rem 0 3rem;
  border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--muted);
}
footer.bot p { color: var(--muted); font-size: 0.875rem; }
footer.bot a { color: var(--fg-sub); }
.footlinks { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0 0 1rem; }
.footlinks a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9rem; }