/* app/static/user.css — 사용자 화면 공통 스타일 · 소유자 lse (병렬작업 계약 §5)
   화면 셸(공통 nav)만 여기 둔다. 화면 하나짜리 스타일은 각 화면 파일에 인라인 <style> 로 둔다.
   색 토큰은 팀원 mockup(02_프로토타입_v7.2.html) 의 :root 값을 그대로 옮겼다 — 화면이 늘어도
   색이 갈리지 않게 하나로 묶는다. `.user-shell` 로 감싸 base.css 의 전역 토큰과 겹치지 않는다. */
.user-shell {
  --u-surface: #ffffff;
  --u-surface2: #f7f6f9;
  --u-ink: #1c1c1f;
  --u-clay: #86848c;
  --u-line: #e6e5e9;
  --u-signal: #E1306C;
  --u-signal-ink: #C2185B;
  --u-signal-soft: #FDEEF3;
  /* 🆕 상태색(통과·주의·위험) — 칩·배지·안내 상자가 같이 쓴다. 어두운 화면에서 연한 바탕이 튀지 않게 토큰으로 묶었다 */
  --u-ok-bg: #ecfdf5; --u-ok-ink: #065f46; --u-ok-line: #a7f3d0; --u-ok-dot: #15803d;
  --u-warn-bg: #fffbeb; --u-warn-ink: #92400e; --u-warn-line: #fde68a; --u-warn-dot: #b45309;
  --u-bad-bg: #fef2f2; --u-bad-ink: #991b1b; --u-bad-line: #fecaca; --u-bad-dot: #b91c1c;
  --u-hit: #fde68a;
}
@media (prefers-color-scheme: dark) {
  .user-shell {
    --u-surface: #201f22;
    --u-surface2: #29282c;
    --u-ink: #f1f0f2;
    --u-clay: #918f94;
    --u-line: #38373b;
    --u-signal: #FF6F9C;
    --u-signal-ink: #FFA3C0;
    --u-signal-soft: #3B1C2A;
    --u-ok-bg: #0f2a20; --u-ok-ink: #6ee7b7; --u-ok-line: #1f5b43; --u-ok-dot: #4ade80;
    --u-warn-bg: #2b2210; --u-warn-ink: #fcd34d; --u-warn-line: #6b4f14; --u-warn-dot: #fbbf24;
    --u-bad-bg: #2d1616; --u-bad-ink: #fca5a5; --u-bad-line: #6e2a2a; --u-bad-dot: #f87171;
    --u-hit: #5c4a12;
  }
}

/* 🔴 `base.css` 의 `body { max-width: 52rem }` 이 데스크톱에서도 사용자 화면을 휴대폰처럼
   좁게 만든다 — 프로토타입은 전폭이다. `base.css` 는 팀장 소유라 안 고치고(§5),
   `.user-shell` 이 있는 페이지에서만 여기서 되돌린다. 한 곳(user.css)에만 두고
   화면마다 반복하지 않는다 (2026-09-16 — ksr 화면 이식 중 발견). */
body:has(.user-shell) { max-width: none; padding: 1.5rem 2rem; }
@media (max-width: 44rem) { body:has(.user-shell) { padding: 1.5rem 1rem; } }

/* 상단 4-pill 메뉴 — copylane 소개 · 검수 및 카피생성 · AI 광고 생성 · 매칭 (구역 넷뿐이다) */
.user-topnav {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .75rem 1rem;
  margin: -1.5rem -2rem 0;
  background: var(--u-surface);
  border-bottom: 1px solid var(--u-line);
  color: var(--u-ink);
}
@media (max-width: 44rem) { .user-topnav { margin-left: -1rem; margin-right: -1rem; } }
.user-topnav-brand {
  font-weight: 700;
  margin-right: 1rem;
  color: var(--u-ink);
  text-decoration: none;
}
.user-topnav-pill {
  padding: .45rem .9rem;
  border-radius: .7rem;
  color: var(--u-clay);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
}
.user-topnav-pill:hover { background: var(--u-surface2); color: var(--u-ink); }
.user-topnav-pill-active { color: var(--u-signal-ink); background: var(--u-signal-soft); font-weight: 600; }
.user-topnav-spacer { flex: 1; }
.user-topnav-mypage {
  padding: .45rem .9rem;
  border-radius: .7rem;
  color: var(--u-ink);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 500;
}
.user-topnav-mypage:hover { background: var(--u-surface2); }

/* 🆕 2026-09-29 (ksr) — 상단바 오른쪽(프로토타입 v7.2). 값은 로그인한 사람의 실제 정보 */
/* 좁은 화면에서 메뉴 글자가 한 글자씩 세로로 쪼개졌다 — 글자는 안 쪼개고 줄 단위로 넘긴다.
   ⛔ 가로 스크롤(overflow)로 두면 알림 팝업이 잘린다 */
.user-topnav { flex-wrap: wrap; row-gap: .35rem; }
.user-topnav > * { flex-shrink: 0; }
.user-topnav-pill, .user-topnav-mypage, .user-topnav-brand { white-space: nowrap; }
.user-topnav-org {
  margin: 0 .75rem 0 -.5rem; padding: .2rem .6rem; border-radius: 999px;
  background: var(--u-surface2); border: 1px solid var(--u-line);
  font-size: .75rem; font-weight: 600; color: var(--u-ink); white-space: nowrap;
}
.user-topnav-form { display: inline; margin: 0; }
.user-topnav-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; margin: 0; padding: 0;
  border: 0; border-radius: .6rem; background: none; color: var(--u-clay); cursor: pointer;
}
.user-topnav-icon:hover { background: var(--u-surface2); color: var(--u-ink); }
.user-topnav-me {
  display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .6rem .3rem .35rem;
  border-radius: .7rem; color: var(--u-ink); text-decoration: none; font-size: .85rem; font-weight: 500;
}
.user-topnav-me:hover { background: var(--u-surface2); }
.user-topnav-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--u-signal), #ec4899); color: #fff;
  font-size: .68rem; font-weight: 700;
}
.user-topnav-join {
  padding: .4rem .85rem; border-radius: .7rem; background: var(--u-signal); color: #fff;
  text-decoration: none; font-size: .85rem; font-weight: 600;
}
.user-topnav-join:hover { background: var(--u-signal-ink); }

/* 🆕 2026-09-29 알림 벨 팝업 — `<details>` + 라디오 탭. 패널은 벨 바로 아래 오른쪽 정렬(벨을 덮지 않는다 — 다시 눌러 닫는다) */
.nt { position: relative; }
.nt > summary { list-style: none; position: relative; }
.nt > summary::-webkit-details-marker { display: none; }
/* 바깥을 누르면 닫힌다 — 열려 있는 동안 벨(summary)이 화면 전체를 덮는 투명 막을 가진다.
   막을 누르면 곧 벨을 누른 것이라 닫힌다. 패널은 막보다 위(z-index)라 안쪽 클릭은 그대로다. ⛔ 스크립트 없음(CSP) */
.nt[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 40; cursor: default; }
.nt-dot { position: absolute; top: .35rem; right: .4rem; width: .45rem; height: .45rem; border-radius: 999px;
          background: #dc2626; box-shadow: 0 0 0 2px var(--u-surface); }
.nt-panel { position: absolute; top: calc(100% + .5rem); right: -4rem; z-index: 50; width: min(26rem, calc(100vw - 2rem));
            max-height: 70vh; display: flex; flex-direction: column; background: var(--u-surface); color: var(--u-ink);
            border: 1px solid var(--u-line); border-radius: 1rem; box-shadow: 0 12px 32px rgba(0,0,0,.14); }
.nt-head { display: flex; justify-content: space-between; align-items: baseline; padding: .9rem 1.1rem .5rem; }
.nt-head b { font-size: 1rem; }
.nt-head span { font-size: .7rem; color: var(--u-clay); }
.nt-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nt-tabs { display: flex; gap: .35rem; padding: 0 1.1rem .7rem; border-bottom: 1px solid var(--u-line); }
.nt-tabs label { margin: 0; padding: .3rem .8rem; border: 1px solid var(--u-line); border-radius: 999px;
                 font-size: .78rem; font-weight: 500; cursor: pointer; color: var(--u-clay); }
#nt-all:checked ~ .nt-tabs label[for="nt-all"],
#nt-notice:checked ~ .nt-tabs label[for="nt-notice"],
#nt-alert:checked ~ .nt-tabs label[for="nt-alert"] { border-color: var(--u-signal); background: var(--u-signal-soft); color: var(--u-signal-ink); }
.nt-list { overflow-y: auto; flex: 1; min-height: 0; }
#nt-notice:checked ~ .nt-list .nt-alert, #nt-alert:checked ~ .nt-list .nt-notice { display: none; }
.nt-empty { margin: 0; padding: 2rem 1rem; text-align: center; font-size: .82rem; color: var(--u-clay); display: none; }
#nt-all:checked ~ .nt-list .nt-empty-all:not([hidden]),
#nt-notice:checked ~ .nt-list .nt-empty-notice:not([hidden]),
#nt-alert:checked ~ .nt-list .nt-empty-alert:not([hidden]) { display: block; }
.nt-item { display: flex; gap: .7rem; padding: .8rem 1.1rem; border-top: 1px solid var(--u-line);
           color: var(--u-ink); text-decoration: none; }
.nt-item:first-child { border-top: 0; }
a.nt-item:hover { background: var(--u-surface2); }
.nt-mark { width: .45rem; height: .45rem; border-radius: 999px; margin-top: .45rem; flex-shrink: 0; background: var(--u-line); }
.nt-unread .nt-mark { background: var(--u-signal); }
.nt-body { flex: 1; min-width: 0; display: block; }
.nt-top { display: flex; align-items: baseline; gap: .4rem; }
.nt-kind { font-family: ui-monospace, monospace; font-size: .64rem; color: var(--u-clay); flex-shrink: 0; }
.nt-notice .nt-kind { color: var(--u-signal-ink); }
.nt-title { flex: 1; min-width: 0; font-size: .85rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-unread .nt-title { font-weight: 700; }
.nt-when { font-family: ui-monospace, monospace; font-size: .68rem; color: var(--u-clay); flex-shrink: 0; }
.nt-text { display: block; font-size: .78rem; color: var(--u-clay); margin-top: .15rem; }
.nt-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0;
           padding: .7rem 1.1rem; border-top: 1px solid var(--u-line); font-size: .72rem; color: var(--u-clay); }
.nt-foot button { margin: 0; padding: .35rem .8rem; font-size: .78rem; border: 1px solid var(--u-line);
                  border-radius: .7rem; background: var(--u-surface); color: var(--u-ink); }
.nt-foot button[disabled] { color: var(--u-clay); cursor: default; }
.user-sidebar-dot { display: inline-block; width: .4rem; height: .4rem; border-radius: 999px; background: #dc2626;
                    vertical-align: middle; margin-left: .25rem; }

/* 🆕 테마 쿠키가 운영체제 설정보다 앞선다(`data-theme`). 속성 선택자가 붙어 미디어 쿼리 규칙보다 우선한다 */
.user-shell[data-theme="dark"] {
  --u-surface: #201f22;
  --u-surface2: #29282c;
  --u-ink: #f1f0f2;
  --u-clay: #918f94;
  --u-line: #38373b;
  --u-signal: #FF6F9C;
  --u-signal-ink: #FFA3C0;
  --u-signal-soft: #3B1C2A;
  --u-ok-bg: #0f2a20; --u-ok-ink: #6ee7b7; --u-ok-line: #1f5b43; --u-ok-dot: #4ade80;
  --u-warn-bg: #2b2210; --u-warn-ink: #fcd34d; --u-warn-line: #6b4f14; --u-warn-dot: #fbbf24;
  --u-bad-bg: #2d1616; --u-bad-ink: #fca5a5; --u-bad-line: #6e2a2a; --u-bad-dot: #f87171;
  --u-hit: #5c4a12;
}
.user-shell[data-theme="light"] {
  --u-surface: #ffffff;
  --u-surface2: #f7f6f9;
  --u-ink: #1c1c1f;
  --u-clay: #86848c;
  --u-line: #e6e5e9;
  --u-signal: #E1306C;
  --u-signal-ink: #C2185B;
  --u-signal-soft: #FDEEF3;
  /* 🆕 상태색(통과·주의·위험) — 칩·배지·안내 상자가 같이 쓴다. 어두운 화면에서 연한 바탕이 튀지 않게 토큰으로 묶었다 */
  --u-ok-bg: #ecfdf5; --u-ok-ink: #065f46; --u-ok-line: #a7f3d0; --u-ok-dot: #15803d;
  --u-warn-bg: #fffbeb; --u-warn-ink: #92400e; --u-warn-line: #fde68a; --u-warn-dot: #b45309;
  --u-bad-bg: #fef2f2; --u-bad-ink: #991b1b; --u-bad-line: #fecaca; --u-bad-dot: #b91c1c;
  --u-hit: #fde68a;
}
/* 🔴 `base.css`(팀장) 의 body 는 흰 바탕 · 검은 글자로 고정이다 — 고치지 않고 사용자 화면에서만 덮는다(위 `body:has` 와 같은 요령) */
body:has(.user-shell[data-theme="dark"]) { background: #1a191c; color: #f1f0f2; }
.user-shell[data-theme="dark"] { color: var(--u-ink); }
.user-shell[data-theme="dark"] textarea,
.user-shell[data-theme="dark"] input,
.user-shell[data-theme="dark"] select { background: var(--u-surface); color: var(--u-ink); border-color: var(--u-line); }
/* 🔴 2026-09-29 — 테마 쿠키 없이 **운영체제가 어두운 화면**일 때도 같다. 종전엔 쿠키 다크만 덮어서
   카드·칩은 어두워지는데 글자는 base.css 의 검정(#18181b)으로 남아 안 보였다. 라이트를 직접 고른 사람은 뺀다 */
@media (prefers-color-scheme: dark) {
  body:has(.user-shell:not([data-theme="light"])) { background: #1a191c; color: #f1f0f2; }
  .user-shell:not([data-theme="light"]) { color: var(--u-ink); }
  .user-shell:not([data-theme="light"]) textarea,
  .user-shell:not([data-theme="light"]) input,
  .user-shell:not([data-theme="light"]) select { background: var(--u-surface); color: var(--u-ink); border-color: var(--u-line); }
}

/* 구역 본문 — 왼쪽 사이드바(있으면) + 메인 */
.user-body { display: flex; margin: 0 -2rem; align-items: flex-start; }
@media (max-width: 44rem) { .user-body { margin: 0 -1rem; flex-direction: column; } }
.user-sidebar {
  width: 11rem;
  flex-shrink: 0;
  padding: 1.25rem .75rem;
  border-right: 1px solid var(--u-line);
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-height: calc(100vh - 7.5rem);
}
.user-sidebar-label { font-size: .72rem; color: var(--u-clay); margin: 0 .6rem .6rem; }
.user-sidebar-item {
  padding: .5rem .6rem;
  border-radius: .6rem;
  color: var(--u-ink);
  text-decoration: none;
  font-size: .88rem;
}
.user-sidebar-item:hover { background: var(--u-surface2); }
.user-sidebar-item-active { color: var(--u-signal-ink); background: var(--u-signal-soft); font-weight: 600; }
.user-sidebar-cs {
  margin-top: auto;
  padding: .55rem .7rem;
  border: 1px solid var(--u-line);
  border-radius: .6rem;
  color: var(--u-clay);
  text-decoration: none;
  font-size: .82rem;
  text-align: center;
}
.user-sidebar-cs:hover { border-color: var(--u-signal); color: var(--u-signal-ink); }
.user-main { flex: 1; min-width: 0; padding: 1.5rem 1.75rem; }

/* 목록 화면 공통 — 필터 칩·페이지네이션. history 가 먼저 쓰고, 다음 목록 화면이 이어 쓴다. */
.filter-chips {
  display: flex;
  gap: .4rem;
  margin-bottom: 1rem;
}
.filter-chips .filter-chip {
  padding: .3rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--u-line);
  color: var(--u-clay);
  text-decoration: none;
  font-size: .85rem;
}
.filter-chips .filter-chip:hover { background: var(--u-surface2); color: var(--u-ink); }
.filter-chips .filter-chip-active {
  color: var(--u-signal-ink);
  background: var(--u-signal-soft);
  border-color: var(--u-signal);
  font-weight: 600;
}

.pagination {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1rem;
  font-size: .85rem;
}
.pagination a { color: var(--u-signal-ink); text-decoration: none; }
.pagination a:hover { text-decoration: underline; }
.pagination-edge { color: var(--u-clay); }
.pagination-page { color: var(--u-clay); }

/* history — 클릭하면 옆에 상세가 펼쳐지는 목록 (서버 렌더 토글, JS 없음) */
.history-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}
.history-layout:has(.history-detail) { grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); }
.history-sub { color: var(--u-clay); font-size: .82rem; margin: -.5rem 0 1.25rem; }
/* 띠 — 반복 지적 패턴(주의) · 이력 보관 꺼짐(안내) */
.history-band {
  margin: 0 0 1.25rem;
  padding: .7rem 1rem;
  border: 1px solid var(--u-warn-line);
  border-radius: .9rem;
  background: var(--u-warn-bg);
  color: var(--u-warn-ink);
  font-size: .8rem;
  line-height: 1.6;
}
.history-band-off { border-color: var(--u-line); background: var(--u-surface2); color: var(--u-ink); }
/* 결과 배지 — 이력 목록 · 상세 · 홈의 「최근 검수 이력」이 같이 쓴다. 색은 검수 화면의 문장 카드와 같은 뜻이다 */
.hist-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex-shrink: 0;
  padding: .1rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--u-surface2);
  color: var(--u-clay);
}
.hist-badge i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.hist-ok { background: var(--u-ok-bg); color: var(--u-ok-ink); }
.hist-ok i { background: var(--u-ok-dot); }
.hist-warn { background: var(--u-warn-bg); color: var(--u-warn-ink); }
.hist-warn i { background: var(--u-warn-dot); }
.hist-bad { background: var(--u-bad-bg); color: var(--u-bad-ink); }
.hist-bad i { background: var(--u-bad-dot); }
.hist-risk {
  padding: .05rem .5rem;
  border: 1px solid var(--u-line);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--u-clay);
}
.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--u-line);
  border-radius: .75rem;
  overflow: hidden;
}
.history-list li + li { border-top: 1px solid var(--u-line); }
.history-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .65rem 1rem;
  color: var(--u-ink);
  text-decoration: none;
}
.history-row:hover { background: var(--u-surface2); }
.history-row-open { background: var(--u-signal-soft); }
.history-row-date { font-size: .75rem; color: var(--u-clay); width: 7.5rem; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.history-row-cat { font-size: .72rem; color: var(--u-clay); width: 4.5rem; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-row-text { flex: 1; min-width: 0; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-row-open .history-row-text { font-weight: 500; }
.history-row-chevron { color: var(--u-clay); width: 1rem; text-align: center; flex-shrink: 0; }

.history-detail {
  border: 1px solid var(--u-line);
  border-radius: .75rem;
  padding: 1rem;
  background: var(--u-surface2);
}
.history-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
  font-weight: 600;
}
.history-detail-head a { color: var(--u-clay); text-decoration: none; }
.history-detail-head p { margin: 0; }
.history-detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.history-detail-when { font-size: .72rem; color: var(--u-clay); }
.history-detail-text {
  font-size: .85rem;
  line-height: 1.6;
  margin: 0 0 .75rem;
  padding: .75rem .85rem;
  border: 1px solid var(--u-line);
  border-radius: .75rem;
  background: var(--u-surface);
}
.history-detail-label { font-size: .7rem; letter-spacing: .04em; color: var(--u-clay); margin: 1rem 0 .4rem; }
.history-detail-note { font-size: .78rem; line-height: 1.6; color: var(--u-clay); margin: .4rem 0 0; }
.history-ev { border: 1px solid var(--u-line); border-radius: .75rem; background: var(--u-surface); padding: .75rem .85rem; }
.history-ev > .history-detail-note { margin: 0; }
.history-ev details { margin-top: .6rem; font-size: .78rem; color: var(--u-clay); }
.history-ev summary { cursor: pointer; }
.history-law { font-size: .8rem; line-height: 1.6; }
.history-law + .history-law, .history-ev details .history-law { margin-top: .6rem; }
.history-law blockquote {
  margin: .3rem 0 0;
  padding-left: .7rem;
  border-left: 2px solid var(--u-line);
  color: var(--u-clay);
  font-size: .78rem;
}
.history-again {
  width: 100%;
  margin-top: 1rem;
  padding: .6rem;
  border: 0;
  border-radius: .75rem;
  background: var(--u-signal);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}
.history-again:hover { background: var(--u-signal-ink); }

/* home — 대시보드 */
.home-sub { color: var(--u-clay); margin-top: -.5rem; margin-bottom: 1.5rem; }
.home-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--u-line);
  border: 1px solid var(--u-line);
  border-radius: .75rem;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.home-stat { background: var(--u-surface); padding: 1rem; }
.home-stat-label { font-size: .75rem; color: var(--u-clay); margin: 0 0 .3rem; }
.home-stat-value { font-size: 1.4rem; margin: 0; }

.home-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-bottom: 1.75rem;
}
.home-shortcut {
  display: block;
  border: 1px solid var(--u-line);
  border-radius: .9rem;
  padding: 1.1rem;
  color: var(--u-ink);
  text-decoration: none;
}
.home-shortcut:hover { border-color: var(--u-signal); }
.home-shortcut-title { font-weight: 600; margin: 0 0 .3rem; }
.home-shortcut-desc { font-size: .8rem; color: var(--u-clay); margin: 0; }

.home-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
}
.home-recent-head p { font-size: .75rem; color: var(--u-clay); margin: 0; text-transform: uppercase; }
.home-recent-head a { font-size: .8rem; color: var(--u-signal-ink); text-decoration: none; }

/* login·signup·reset — 🔄 2026-09-29 폼 연결(아래 「계정 폼 연결」). reset 은 메일 발송이 없어 입력이 없다 */
.auth-card {
  max-width: 22rem;
  margin: 2.5rem auto;
  padding: 0 1rem;
}
.auth-card h1 { margin-bottom: .25rem; }
.auth-sub { color: var(--u-clay); margin-top: 0; margin-bottom: 1.5rem; }
.auth-card label { display: block; font-size: .82rem; font-weight: 600; margin: 1rem 0 .35rem; }
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"],
.auth-card input:not([type]) {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--u-line);
  border-radius: .6rem;
  background: var(--u-surface2);
  color: var(--u-clay);
  font: inherit;
}
.auth-consent {
  margin-top: 1.25rem;
  padding: .9rem 1rem;
  border: 1px solid var(--u-line);
  border-radius: .7rem;
  background: var(--u-surface2);
}
.auth-consent label {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  font-size: .78rem;
  font-weight: 400;
  color: var(--u-clay);
  margin: 0 0 .6rem;
}
.auth-consent label:last-child { margin-bottom: 0; }
.auth-note {
  font-size: .8rem;
  color: var(--u-clay);
  background: var(--u-signal-soft);
  border-radius: .6rem;
  padding: .7rem .9rem;
  margin-top: 1.25rem;
}
.auth-switch { text-align: center; font-size: .85rem; color: var(--u-clay); margin-top: 1.25rem; }
.auth-switch a { color: var(--u-signal-ink); }

/* 🆕 2026-09-29 (ksr) — 계정 폼 연결(D-260). 켜진 입력은 본문색, 꺼진 입력만 흐리게 */
.auth-card input:not([type="checkbox"]):not(:disabled) { color: var(--u-ink); background: var(--u-surface); }
.auth-card input:focus { outline: none; border-color: var(--u-signal); }
.auth-submit {
  display: block; width: 100%; margin-top: 1.25rem; padding: .7rem;
  border: 0; border-radius: .7rem; background: var(--u-signal); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer;
}
.auth-submit:hover { background: var(--u-signal-ink); }
.auth-err {
  font-size: .82rem; color: #991b1b; background: #fef2f2; border: 1px solid #fecaca;
  border-radius: .6rem; padding: .55rem .8rem; margin: 0 0 .5rem;
}

/* 🆕 10-14 좁은 화면(휴대폰) — 사이드바가 화면 한 판을 통째로 차지하고 본문이 그 아래로 밀리던 것을 고친다.
   사이드바는 본문 위 한 줄짜리 칩으로, 상단 메뉴는 「로고 · 로그인」 줄과 「구역 넷」 줄 두 줄로 나눈다. */
@media (max-width: 44rem) {
  .user-topnav { padding: .6rem .75rem; column-gap: .15rem; }
  .user-topnav::after { content: ""; order: 4; flex-basis: 100%; height: 0; }
  .user-topnav-pill { order: 5; padding: .4rem .5rem; font-size: .8rem; letter-spacing: -.01em; }
  .user-sidebar {
    width: auto;
    align-self: stretch;
    min-height: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    padding: .6rem 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--u-line);
  }
  .user-sidebar-label { display: none; }
  .user-sidebar-item { padding: .35rem .7rem; border: 1px solid var(--u-line); border-radius: 999px; font-size: .84rem; }
  .user-sidebar-item-active { border-color: transparent; }
  .user-sidebar-cs { margin: 0 0 0 auto; padding: .35rem .7rem; border-radius: 999px; font-size: .78rem; }
  .user-main { padding: 1.25rem 1rem; }
}

/* 🆕 2026-10-15 (ksr · 점검 01) — 테마 버튼 둘 중 지금 테마에 맞는 하나만 보인다. 속성이 없으면(쿠키 없음) 「어둡게」를 보인다 */
.user-shell:not([data-theme="dark"]) .tn-to-light,
.user-shell[data-theme="dark"] .tn-to-dark { display: none; }

/* 🆕 2026-10-15 (ksr · 점검 02) — 공유 레이아웃(`base.html` · 팀장 파일)의 개발용 머리줄(사용자 · 관리자 · API)과
   꼬리말(「골든 픽스처로 그린다」)을 사용자 화면에서는 숨기고, 화면 맨 아래 접힌 「개발자 정보」(`user/_base.html`)로 옮긴다.
   ⬜ 추후 삭제 — 배포 전에 접힌 블록째 지운다 */
body:has(> main .user-shell) > header,
body:has(> main .user-shell) > footer { display: none; }
.user-devbar { margin: 2.5rem 1.5rem 1.5rem; font-size: .78rem; color: var(--u-mute, #888); }
.user-devbar summary { cursor: pointer; }
.user-devbar nav { display: flex; gap: 1rem; margin: .5rem 0 .25rem; }
.user-devbar a { color: inherit; }
/* 🆕 2026-10-15 (ksr · 점검 09) — 화면 안의 접힌 개발자 메모. ⬜ 추후 삭제 */
.user-devnote { margin-top: 1.5rem; font-size: .8rem; color: var(--u-mute, #888); }
.user-devnote summary { cursor: pointer; }
/* 🆕 10-14 좁은 화면 — 검수 화면의 「✨ 이 문장 고쳐 쓰기」 버튼(`review.html` `.rv-fix-go` · lse)이 본문과 설명을 옆으로 붙여
   글자가 조각나던 것을 위아래로 쌓는다. 화면 파일의 인라인 스타일보다 늦게 와도 이기게 `form` 을 붙인다 */
@media (max-width: 44rem) {
  form .rv-fix-go { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; width: 100%; text-align: left; }
  form .rv-fix-go small { font-size: .74rem; }
}

/* 🆕 10-14 고쳐 쓴 문구 「복사」 버튼(`_review_rewrite.html` · `rewrite_copy.js` · lse) — 후보 상자 오른쪽 위
   🔄 10-15 (ksr 병합) — 이름을 `.rv-copy` → `.rv-cand-copy` 로. `.rv-copy` 는 검수 화면의 문구 입력 상자(`review.html`)라
   그 상자가 `position: absolute` 를 받아 화면 오른쪽 위로 떴다 */
.rv-fix .rv-cand { position: relative; padding-right: 6rem; min-height: 2.4rem; }
.rv-cand-copy {
  position: absolute; top: .45rem; right: .45rem; white-space: nowrap;
  padding: .2rem .55rem; border: 1px solid var(--u-line); border-radius: 999px;
  background: var(--u-surface); color: var(--u-clay); font: inherit; font-size: .72rem; font-weight: 500; cursor: pointer;
}
.rv-cand-copy:hover { border-color: var(--u-signal); color: var(--u-signal-ink); }
.rv-cand-copy.is-done { border-color: #15803d; color: #15803d; }