/* ─────────────────────────────────────────────────────────────────────────────
   Paper 스킨

   choan-2b 시안에서 가져온 것은 "서체 파일"이 아니라 "글자를 다루는 규칙"이다.
   시안의 Newsreader·Archivo·IBM Plex Mono 는 셋 다 한글 글리프가 없어서,
   한글 화면에 걸면 브라우저 기본 서체(바탕체 등)로 떨어진다. 그래서 본문 서체는
   Noto Sans KR 을 그대로 두고, 인상을 만드는 쪽 — 자간·크기 대비·행간·종이색 —
   만 옮겨 왔다.

   ── 클래스가 두 단이다. 이 구분이 이 파일의 핵심이다 ──────────────────────

   body.paper         색만 바꾼다. 공개·업무 화면 전부에 붙는다.
                      글자 크기·행간·자간은 여기 절대 넣지 않는다.
   body.paper.public  글자 크기·행간·네비 크기까지 바꾼다. 손님용 화면에만 붙는다.
   body.paper.auth    로그인·가입 등 독립 인증 화면.

   왜 나눴나 — 파산 신청서의 인쇄 시트(.a4)는 자기 font-size 를 갖지 않고
   body 값을 물려받는다(실측: 14px / line-height 25.2px). 그래서 body 의 글자
   크기를 전역으로 건드리면 **법원에 내는 서류의 줄바꿈이 바뀐다.** 색은 인쇄
   시트가 #fff·#000 으로 못 박아 두어 아무리 바꿔도 새지 않는다.

   ── 인쇄 서식이 안전한 근거 ──────────────────────────────────────────────
   index.html·bankruptcy.html 의 .a4/.doc-paper 와 그 안의 표는 테두리까지
   전부 #000·#fff 하드코딩이라 팔레트 토큰을 단 한 곳도 쓰지 않는다.
   두 파일의 CSS 는 이번에 한 줄도 고치지 않았다.

   되돌리기: 각 화면의 <link> 한 줄과 body 의 클래스만 지우면 원래대로 돌아온다.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── 1. 타이포 스케일 (공개 화면 전용) ───────────────────────────────────────
   시안의 핵심은 큰 글자와 작은 글자의 격차(66px ↔ 11px, 여섯 배)다.
   기존 랜딩은 17px ↔ 12.5px 로 1.4배뿐이라 밋밋했다. 그 격차를 벌린다.

   .public / .auth 에만 건다 — 업무 화면에 글자 크기를 건드리면 빽빽한 표가
   밀리고, 무엇보다 인쇄 서식이 body 크기를 물려받아 서류가 바뀐다.          */
body.paper.public,
body.paper.auth {
  --t-hero:  clamp(30px, 4.6vw, 52px);   /* 한글은 라틴보다 속공간이 커서 66px 은 과하다 */
  --t-h2:    clamp(23px, 2.6vw, 33px);
  --t-h3:    17px;
  --t-lead:  16.5px;
  --t-body:  14.5px;
  --t-small: 13px;
  --t-label: 11.5px;

  /* 자간 — 한글은 좁히면 라틴보다 빨리 뭉친다. 큰 글자에만 -.03em 을 주고
     본문은 건드리지 않는다. 라벨은 반대로 벌려서 '작지만 또렷하게' 만든다. */
  --ls-tight: -.03em;
  --ls-label: .12em;

  --lh-body: 1.85;
  --lh-head: 1.28;

  font-size: var(--t-body);
  line-height: var(--lh-body);
}

/* ── 2. 팔레트 (2026-10-06 시안) ─────────────────────────────────────────────
   종이(크림) 톤에서 흰 바탕 + 네이비 + 에메랄드로 바꿨다. 랜딩과 업무 화면이
   같은 색을 쓰게 하려는 것 — 로그인 전후로 다른 서비스처럼 보이던 것을 맞춘다.

   ★ 여기서는 색만 바꾼다. 크기·행간은 절대 넣지 않는다(위 1절의 이유 — 인쇄
     시트가 body 값을 물려받는다). 색이 안전한 근거도 머리글에 적어 두었다:
     .a4/.doc-paper 와 그 안의 표는 #000·#fff 하드코딩이라 토큰을 쓰지 않는다.

   대비는 흰 바탕 기준으로 맞췄다 — 하루 종일 보는 화면이라 4.5:1 을 넘긴다.
   --em(#10b981)은 '면·선·아이콘' 용이다. 작은 글자에 쓰면 3.4:1 로 모자라므로
   글자에는 --em-ink(#047857, 4.8:1)를 쓸 것.                                  */
body.paper {
  --bg:         #f6f8fb;   /* 캔버스 */
  --paper:      #f1f5f9;   /* 면 */
  --raise:      #ffffff;   /* 떠 있는 면 — 카드·패널 */
  --ink:        #10223f;   /* 본문 — 랜딩 제목색과 같다 */
  --mute:       #475569;   /* 보조 본문   (7.5:1) */
  --faint:      #64748b;   /* 흐린 글자   (4.9:1) */
  --line:       #cbd5e1;
  --card-line:  #e2e8f0;
  --hd:         #10223f;   /* 브랜드 네이비. :root 보다 명시도가 높아 여기서 이긴다 */
  --accent:     #10223f;   /* 활성 면 배경 — 흰 글자를 얹으므로 네이비를 지킨다 */
  --accent-soft:#ecfdf5;   /* 옅은 강조면 — 에메랄드 */
  --em:         #10b981;   /* 강조: 면·선·아이콘 */
  --em-ink:     #047857;   /* 강조: 글자 (4.8:1) */
  --em-line:    #a7f3d0;
  /* 라벨색. 골드에서 에메랄드로 옮긴다 — 이름은 쓰던 자리가 많아 그대로 둔다 */
  --gold-ink:   #047857;
  --shadow-card:0 4px 20px rgba(16, 34, 63, .06);
  --shadow-lift:0 20px 50px -24px rgba(16, 34, 63, .28);

  /* 색만. 크기·행간은 여기 넣지 않는다(위 1절의 이유) */
  background: var(--bg);
  color: var(--ink);
}

/* ── 3. 제목 ─────────────────────────────────────────────────────────────────
   기존 -0.01em 에서 -.03em 으로. 고딕(Noto Sans KR)을 그대로 쓰면서
   자간과 크기만으로 인상을 바꾸는 것이 이번 방향이다.

   ★ 여기서 제목 '색'은 절대 지정하지 않는다. 두 번 데였다.
     ① 작성폼 머리띠 header{background:#22355a;color:#fff} 의 h1 은 제 색이
        없이 흰색을 물려받는다 → 색을 주면 상속을 이겨 글씨가 사라진다.
     ② 랜딩 마무리 CTA 의 .lp .cta h2{color:#fff} 는 명시도가 (0,2,1) 이라
        body.paper.public h2 (0,2,2) 에 진다 → 네이비 위 검정이 된다.
   색은 각 화면이 알아서 정한다(.lp h2, .gd h1, .card h1 …). 여기서는 줄바꿈에
   영향을 주는 자간·행간만 손대고, 그것도 공개 화면에만 건다.                 */
body.paper.public h1, body.paper.public h2, body.paper.public h3,
body.paper.auth h1,   body.paper.auth h2,   body.paper.auth h3 {
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-head);
  text-wrap: pretty;
}

/* ── 4. 라벨 ─────────────────────────────────────────────────────────────────
   시안은 IBM Plex Mono + letter-spacing .13em 으로 라벨을 만든다. 한글에는
   모노가 안 먹으므로, 같은 인상을 '작게 + 넓은 자간 + 흐린 색'으로 낸다.       */
body.paper .eyebrow,
body.paper .label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--ls-label);
  color: var(--gold-ink);
  line-height: 1;
}

/* ── 5. 공통 요소 ─────────────────────────────────────────────────────────── */
body.paper .panel {
  background: var(--raise);
  border-color: var(--card-line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}
/* 인증 화면(.auth)은 제외한다 — 거기 button 은 이미 네이비 단색이라 여기서 배경만
   바꾸면 흰 글자가 밝은 바탕에 얹혀 글씨가 사라진다. 인증 화면 몫은 6절에 있다. */
body.paper:not(.auth) button {
  background: var(--paper);
  border-color: var(--card-line);
  border-radius: 10px;
}
body.paper:not(.auth) button.primary { background: var(--hd); border-color: var(--hd); }
body.paper:not(.auth) input,
body.paper:not(.auth) select,
body.paper:not(.auth) textarea {
  background: var(--raise);
  border-color: var(--line);
  border-radius: 10px;
}

/* ── 상단 네비 ───────────────────────────────────────────────────────────────
   2026-10-06 시안: 네이비 바 → 흰 바. **공개·업무 화면 모두** 여기서 입힌다.

   네비 CSS 는 base.html·index.html·bankruptcy.html 세 곳에 복사돼 있지만,
   셋 다 body 에 paper 가 붙고 셋 다 `.topnav`(0,1,0) 로 쓴다. 여기 규칙은
   `body.paper .topnav`(0,2,1) 라 명시도로 이긴다 — 그래서 작성폼 두 파일은
   한 줄도 고치지 않아도 같이 바뀐다(인쇄 서식에 손대지 않으려는 것이 목적).  */
body.paper .topnav {
  background: #fff;
  color: var(--ink);
  border-bottom: 1px solid #eef2f7;
  box-shadow: none;
}
body.paper .topnav a { color: var(--mute); }
body.paper .topnav .brand {
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 800;
  display: flex; align-items: center; gap: 9px;
}
/* 로고 타일 — 시안의 초록 네모. 이미지 없이 글자 하나로 만든다 */
body.paper .topnav .brand::before {
  content: "ㅍ";
  width: 26px; height: 26px; flex: none;
  border-radius: 8px; background: var(--em); color: #fff;
  font-size: 13px; font-weight: 700;
  display: grid; place-items: center;
}
body.paper .menu > .mitem > a,
body.paper .menu > .mitem > span { color: var(--mute); font-weight: 600; }
body.paper .menu > .mitem > a:hover,
body.paper .menu > .mitem > span:hover { color: var(--em-ink); background: none; }
/* 활성 탭 — 네이비 바에서는 흰 밑줄이었다. 흰 바에서는 보이지 않으므로 초록으로 */
body.paper .menu > .mitem.active > a,
body.paper .menu > .mitem.active > span {
  color: var(--ink); border-bottom-color: var(--em); font-weight: 700;
}
body.paper .navcta .who { color: var(--faint); }
body.paper .navcta a { font-weight: 700; border-radius: 11px; }
body.paper .navcta a.ghost { color: var(--ink); border: 1px solid var(--card-line); }
body.paper .navcta a.ghost:hover { background: var(--paper); color: var(--ink); }
body.paper .navcta a.solid { background: var(--hd); color: #fff !important; }
body.paper .navcta a.solid:hover { background: #173759; filter: none; }

/* 글씨 키우기는 공개 화면만. 업무 화면 네비는 메뉴가 일곱 개라 키우면 넘치고,
   빽빽한 작업 화면에서 세로 공간을 10px 더 먹을 이유도 없다.                 */
body.paper.public .topnav { height: 72px; }   /* 시안 높이. base.html 보다 명시도가 높아 여기가 최종 */
body.paper.public .topnav .brand { font-size: 20px; margin-right: 30px; }
body.paper.public .topnav .brand .sub { font-size: 15px; }
body.paper.public .menu > .mitem > a,
body.paper.public .menu > .mitem > span { font-size: 16.5px; padding: 0 18px; }
body.paper.public .navcta a { font-size: 16px; padding: 9px 17px; border-radius: 99px; }
body.paper.public .navcta .who { font-size: 15px; }
/* 글씨를 키운 만큼 좁은 화면에서 브랜드 부제가 먼저 잘린다("…사무소 서⋯").
   말줄임으로 뭉개느니 그 폭에서는 부제를 통째로 감춘다 — 로고는 그대로 남는다 */
@media (max-width: 1100px) {
  body.paper.public .topnav .brand .sub { display: none; }
}

/* 업무 화면은 폭과 무관하게 부제를 감춘다.
   네비 내용이 --form-w(1280px)로 묶여 있어 창을 넓혀도 자리가 늘지 않는데,
   업무 메뉴 7개 + 계정 정보가 그 폭을 이미 다 쓴다. 실측 결과 1920px 에서도
   부제가 잘렸다 — 영원히 잘린 문구를 두느니 없애는 편이 낫고, 로그인한
   사람에게 서비스 소개 문구는 필요하지도 않다. */
body.paper:not(.public) .topnav .brand .sub { display: none; }

/* ── 6. 인증 화면 (login·signup·verify·reset·password) ────────────────────────
   이 다섯은 base.html 을 상속하지 않는 독립 문서지만 마크업이 서로 똑같다
   (.box > .brand + .card). 그래서 각 파일을 고치는 대신 여기서 한 번에 입힌다.
   body 에 paper 와 함께 auth 를 붙인 화면에만 걸린다.                          */
body.paper.auth {
  background: linear-gradient(180deg, #eef5ff 0%, var(--bg) 60%);
}
/* 워드마크는 네이비를 지킨다 — 브랜드색이라 종이 톤에 맞춘다고 바꿀 자리가 아니다 */
body.paper.auth .brand b { color: var(--hd); letter-spacing: var(--ls-tight); }
body.paper.auth .brand span { color: var(--faint); }
body.paper.auth .card {
  background: var(--raise);
  border: none;
  border-radius: 20px;
  box-shadow: var(--shadow-lift);
}
body.paper.auth .card h1 { color: var(--ink); letter-spacing: var(--ls-tight); }
body.paper.auth .card p,
body.paper.auth .card .sub,
body.paper.auth .card .lead { color: var(--mute); }
body.paper.auth label { color: var(--mute); }
body.paper.auth input {
  background: var(--raise);
  border-color: var(--line);
  border-radius: 10px;
}
body.paper.auth button { border-radius: 12px; }
body.paper.auth button.ghost { background: var(--raise); }
body.paper.auth .sub { color: var(--faint); }
body.paper.auth .sub a { color: var(--mute); }
body.paper.auth .back { color: var(--faint); }
body.paper.auth .hint,
body.paper.auth .note { color: var(--faint); }

/* ── 7. 약관·개인정보처리방침 (legal) ────────────────────────────────────────
   .public 으로 좁힌다. 업무 화면도 .panel 과 .panel h2 를 쓰기 때문에,
   여기에 .public 을 빼면 고객관리·문서변환 같은 화면의 글자색까지 끌려간다.  */
body.paper.public .wrap > h1 { color: var(--ink); }
body.paper.public .panel h2,
body.paper.public .panel h3 { color: var(--ink); }
body.paper.public .date { color: var(--faint); }
body.paper.public .panel p,
body.paper.public .panel li { color: var(--mute); }
/* .panel 안으로 좁힌다 — guide/links 의 .lead(금색 좌측선 인용 박스)는
   .gd/.lk 아래에 있어 여기 걸리면 안 된다 */
body.paper.public .panel .lead {
  background: var(--paper);
  border: none;
  border-radius: 12px;
  color: var(--mute);
}
body.paper.public .panel th { background: var(--paper); color: var(--hd); }
body.paper.public .panel td,
body.paper.public .panel th { border-color: var(--card-line); }

/* 시안의 등장 애니메이션. 움직임을 줄이도록 설정한 사용자에게는 걸지 않는다 */
@media (prefers-reduced-motion: no-preference) {
  body.paper .rise-in { animation: paperRise .8s cubic-bezier(.2, .8, .2, 1) both; }
  body.paper .rise-in.d1 { animation-delay: .06s; }
  body.paper .rise-in.d2 { animation-delay: .16s; }
  body.paper .rise-in.d3 { animation-delay: .24s; }
}
@keyframes paperRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* 아이디 옆 자동 로그아웃 남은 시간(templates/_nav.html).
   세 화면(base·작성폼 둘)이 저마다 네비 스타일을 갖고 있어서, 공통으로 읽는 이 파일에
   둔다. `.navcta` 안으로 한정하는 까닭: 작성폼의 카드 표에도 `.who` 가 쓰여 있다. */
.navcta .idle {
  font: inherit; font-size: 12.5px; color: var(--faint, rgba(255,255,255,.7));
  background: none; border: 1px solid transparent; border-radius: 8px;
  padding: 4px 8px; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.navcta .idle:hover { border-color: var(--card-line, rgba(255,255,255,.3)); }
.navcta .idle.soon { color: #b4530f; font-weight: 700; }   /* 5분 안쪽 */
.navcta .idle.out  { color: #b91c1c; font-weight: 700; }
/* 좁은 화면에서는 숫자만 남긴다 — 글씨까지 두면 네비가 눌린다 */
@media (max-width: 1100px) { .navcta .idle .lbl { display: none; } }
@media print { .navcta .idle { display: none !important; } }

/* 봇 걸름용 칸(templates/_trap.html) — 화면 밖으로 밀어 둔다.
   display:none 으로 숨기지 않는 까닭: 봇이 그것을 보고 건너뛴다.
   인쇄에도 나가지 않게 함께 막는다. */
.hp { position: absolute; left: -9999px; top: auto;
      width: 1px; height: 1px; overflow: hidden; }
@media print { .hp { display: none !important; } }