/* ───────────────────────────────────────────────────────────────────────────── 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 는 이번에 한 줄도 고치지 않았다. 되돌리기: 각 화면의 한 줄과 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. 종이 팔레트 ────────────────────────────────────────────────────────── 시안의 따뜻한 종이색을 쓰되, 강조색은 폼하나 네이비(#1a2b47)와 골드를 지킨다. 네이비 + 크림은 원래 잘 맞는 짝이고, 브랜드를 통째로 바꿀 이유는 없다. 시안 원본의 흐린 글자색 #9b968d 는 대비 2.3:1 로 WCAG 미달이라 그대로 쓰지 않았다. 하루 종일 보는 화면이므로 4.5:1 을 넘기는 값으로 내렸다. */ body.paper { --bg: #ece9e3; /* 캔버스 */ --paper: #f4f1ec; /* 면 */ --raise: #fffdfa; /* 떠 있는 면 */ --ink: #1b1a18; /* 본문 */ --mute: #5f5c54; /* 보조 본문 (7.0:1) */ --faint: #7a766c; /* 흐린 글자 (4.6:1) */ --line: #d8d2c8; --card-line: #e2dcd2; /* 옅은 강조면. 원래는 #e7eeff(차가운 하늘색)라 종이 위에서 혼자 튀었다. 불투명 색 대신 네이비를 옅게 깔면 바탕 종이색이 비쳐 톤이 섞인다 — 시안이 oklch(... / .12) 로 강조면을 만드는 방식과 같다. */ --accent-soft:rgba(26, 43, 71, .085); /* 라벨용 골드. 브랜드 골드(#cba72f)는 밝은 종이 위에서 대비 2.3:1 이라 읽히지 않는다. 색상은 유지하고 명도만 낮춰 4.6:1 로 맞췄다. */ --gold-ink: #8f7418; --shadow-card:0 12px 32px -22px rgba(27, 26, 24, .5); --shadow-lift:0 24px 56px -34px rgba(27, 26, 24, .55); /* 색만. 크기·행간은 여기 넣지 않는다(위 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; } /* ── 상단 네비 ─────────────────────────────────────────────────────────────── 네이비 바는 종이 바탕과 맞닿는 선만 부드럽게 한다 (공개·업무 공통). */ body.paper .topnav { box-shadow: 0 1px 0 rgba(27, 26, 24, .06); } /* 글씨 키우기는 공개 화면만. 업무 화면 네비는 메뉴가 일곱 개라 키우면 넘치고, 빽빽한 작업 화면에서 세로 공간을 10px 더 먹을 이유도 없다. */ body.paper.public .topnav { height: 62px; } 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, #f4f1ec 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: 99px; } 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; } }