/* STYLE-LIBRARY:BEGIN — tools/pick-style.js 가 쓴 블록. 손으로 고치지 말고 다시 실행 */ :root{--bg:#f4f0ed;--paper:#ffffff;--ink:#1c1c22;--muted:#585866;--accent:#2b66d9;--accent-ink:#ffffff;--line:#e8e3df;--font-display:"Plus Jakarta Sans", Pretendard, "Noto Sans KR", sans-serif;--font-body:Pretendard, "Noto Sans KR", system-ui, sans-serif;--radius:24px;--shadow:0 20px 40px rgba(40, 40, 60, .10);--border:1px solid rgba(255, 255, 255, .8);--card-pad:20px;--dur:500ms;--ease:cubic-bezier(0.4, 0, 0.2, 1);--enter:rise-blur;--stagger:80ms;--layout:bento;--x-holo:linear-gradient(135deg, #9fd8f5 0%, #b9a7f2 50%, #f3b8d8 100%)} /* STYLE-LIBRARY:END */ /* 현금영수증 자진발급분 등록·발급 확인 안내(/cash-receipt-self-issued/). 사이트 공통 styles.css 다음에 읽는다. * Design read: 현금으로 내고 영수증을 못 받았거나 010-000-1234 영수증을 손에 든 일반인(폰·카톡 인앱)을 위한 calm·trust 안내. 다이얼 VARIANCE 3 · MOTION 2 · DENSITY 5. * 색·모서리·그림자·움직임 길이는 위 STYLE-LIBRARY 블록(스타일 창고 vision-glass, tools/pick-style.js 가 씀)의 토큰만 쓴다. 바깥 글꼴은 불러오지 않는다(글꼴은 사이트 --font). * 짜임(참고 화면 owner-14871/mobbin-2): 큰 모서리의 옅은 면(.cr-panel) 위에 흰 질문 카드(.cr-ask) → 그 아래 할 일 카드 격자(bento 타일). * 넓은 화면(1280px 이상)은 질문 | 카드 두 칸, 좁은 화면(1279px 까지 = 폰·폴드 펼침 1100)은 위아래 한 줄. * 상태는 선·색·배경으로: 고른 선택지 = 파랑 테두리·옅은 파랑 바탕, 기한 타일 = 주황 바탕, 단서 문장 = 주황 왼쪽 선. 카드 번호(data-n)는 할 일 순서. * 광고: 사이트 공통 자동광고·본문 광고를 그대로 받는다. 광고를 숨기거나 덮는 규칙·고정(sticky·fixed) 요소를 두지 않는다. * 「광고」 라벨 글자색만 /etf-guide/ 와 같은 덮어쓰기로 바탕 대비 4.5 이상(밝음 4.97 · 다크 7.31). 광고 칸·위치·크기는 그대로(맨 아래 한 줄). */ :root { --cr-panel: #ebe5e0; /* 옅은 면: --bg 보다 한 단계 진함 */ --cr-tile: #faf8f6; /* 카드 안 타일 */ --cr-accent-soft: #e8effc; /* 고른 선택지·개수 줄 바탕 */ --cr-accent-text: #1f4fae; /* 옅은 파랑 위 글자: 대비 6.9 */ --cr-on-accent: #ffffff; /* --accent(#2b66d9) 위 글자: 대비 5.2 */ --cr-mark: #fff3df; /* 기한 타일 */ --cr-mark-line: #e9b765; --cr-mark-ink: #7a4300; /* 대비 7.4 */ --cr-ring: #b9b1aa; /* 고르기 전 동그라미 테두리: 흰 바탕 대비 3.1 */ } @media screen and (prefers-color-scheme: dark) { /* 창고 묶음은 밝은 색만 있다 → 같은 이름을 사이트 다크 토큰 값으로 되돌리고 이 쪽 토큰도 어둡게 */ :root { --bg: #0e1117; --paper: #171c25; --ink: #edf1f7; --muted: #b4bdca; --line: #2a3140; --accent: #79a8ff; --accent-ink: #ffffff; --shadow: none; --border: 1px solid #2a3140; --cr-panel: #12161e; --cr-tile: #1c222c; --cr-accent-soft: #1b2740; --cr-accent-text: #c7dbff; --cr-on-accent: #0b1220; --cr-mark: #2e2616; --cr-mark-line: #6b5429; --cr-mark-ink: #ffd48a; --cr-ring: #6c7686; } } /* 문서의 스크롤 고정(scroll anchoring)은 끄지 않는다: 위쪽 광고 칸이 늦게 차거나 접혀도 읽던 글이 밀리지 않게(시험 5-4, 끈 판은 360px 등록 카드 제목 360→652). 고르기 때 누른 칸이 끌려가지 않는 것은 라디오를 자기 선택지 칸 안에 둔 것(.cr-o)으로 충분하다: 스크롤 고정을 켠 채 누른 칸을 화면 위·가운데·아래에 두고 360·412·1100·1440 에서 잰 scrollY 변화 0(시험 5-2·5-6) */ html { scroll-padding-top: 16px; } .cr-hero, .cr-finder, .cr-next, #basis { word-break: keep-all; overflow-wrap: anywhere; } /* 첫 화면: 제목 · 한 줄 설명 · 이 쪽이 답하는 질문 두 갈래(A·B → 상황 고르기) */ .site-header.cr-hero { padding: var(--s6) 0 var(--s5); } .cr-hero h1 { margin-bottom: var(--s2); } .cr-hero .lede { max-width: 40rem; margin-bottom: 0; color: var(--ink); } .cr-qs { display: grid; gap: var(--s2); max-width: 44rem; margin-top: var(--s4); } .cr-qs a { display: flex; align-items: center; gap: var(--s3); min-height: 52px; padding: 6px var(--s4) 6px 6px; border: var(--border); border-radius: 999px; background: var(--paper); box-shadow: var(--shadow); color: var(--ink); font-weight: 700; line-height: 1.35; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform calc(var(--dur) * .4) var(--ease); } .cr-qs a:hover { transform: translateY(-1px); } .cr-qs-k { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--cr-on-accent); font-weight: 800; } /* 처음 그리기(바름 r1-6): 화면 JS(defer)가 돌기 전에는 카드 6장·업종 질문·개수 줄을 미리 숨기고 빈 안내를 보인다 = 준비 뒤 첫 상태와 같은 그림이라 보였다가 사라지는 깜빡임·아래 구획 밀림이 없다. 자바스크립트가 켜진 경우에만(scripting: enabled) 걸리므로 꺼진 경우는 카드·질문이 전부 보인다. 이 기능을 모르는 옛 브라우저는 규칙을 건너뛰어 예전처럼 그린다. 엔진이나 app.js 요청이 실패하면