/* * DoguDogu (도구도구) 브랜드 공용 스타일시트 * - Pretendard 폰트를 self-host로 실제 로딩 (CDN 미사용, OFL 라이선스 — static/fonts/LICENSE.txt 참고) * - 도구도구 고유 색상 팔레트를 CSS 커스텀 프로퍼티(--dd-*)로 정의 * - 4개 이상의 템플릿(index/dutchpay/yearendtax/acquisitiontax + 신규 계산기)이 공통으로 import * * 사용법: 각 템플릿의 에 아래 한 줄을 추가하고, * * 로컬 :root 블록에서 기존 변수명(--primary 등)을 --dd-* 값으로 매핑해 재사용한다. */ /* ===== Pretendard (self-hosted, 필요 굵기만 선별: 400/500/700) ===== */ @font-face { font-family: 'Pretendard'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/Pretendard-Regular.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 500; font-style: normal; font-display: swap; src: url('/static/fonts/Pretendard-Medium.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 700; font-style: normal; font-display: swap; src: url('/static/fonts/Pretendard-Bold.woff2') format('woff2'); } /* ===== 도구도구 브랜드 색상 팔레트 ===== * 컨셉: "뚝딱 만든 실용 도구" — 툴박스의 따뜻한 오렌지(주황) + 신뢰감 있는 잉크 네이비. * 기존에 재사용되던 범용 파란색(#5B7CF6)과 완전히 구분되는 도구도구 고유 색. */ :root { /* Primary — 툴박스 오렌지 (CTA, 강조, 브랜드 포인트) */ --dd-primary: #FF6B35; --dd-primary-dark: #E5541F; --dd-primary-light: #FFE8DC; --dd-primary-soft: #FFF1E8; /* Secondary — 잉크 네이비 (헤더 텍스트, 신뢰감) */ --dd-ink: #22283B; --dd-ink-soft: #3A415A; /* Accent — 민트 틸 (보조 강조, 성공 계열과 별개 포인트) */ --dd-accent: #17A398; --dd-accent-light: #DFF6F3; /* 상태 색상 */ --dd-success: #1FAA59; --dd-success-light: #E1F7E9; --dd-danger: #E5484D; --dd-danger-light: #FDE7E7; /* 배경/표면 */ --dd-bg: #FFF9F3; --dd-card: #FFFFFF; --dd-text: #221F1C; --dd-muted: #7C7468; --dd-border: #EFE3D6; /* 형태 */ --dd-radius: 16px; --dd-radius-sm: 10px; --dd-shadow: 0 1px 4px rgba(34, 31, 28, 0.08); --dd-shadow-lg: 0 10px 30px rgba(34, 31, 28, 0.12); --dd-font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* 다크 배경(연말정산 페이지 등)에서 대비를 위한 밝은 변형 */ --dd-primary-bright: #FF8A5C; --dd-accent-bright: #2FD9C4; --dd-accent-bright-dark: #22BFAC; --dd-accent-bright-soft: #A8ECE3; --dd-success-bright: #34D399; --dd-danger-bright: #F87171; --dd-warn-bright: #FBBF24; /* 다크 테마 표면 (잉크 네이비 계열 — 범용 회색 다크테마와 구분되는 도구도구 톤) */ --dd-dark-bg: #16151F; --dd-dark-card: #1E1D2B; --dd-dark-card-alt: #262536; --dd-dark-border: #322F44; --dd-dark-text: #E7E4EE; --dd-dark-muted: #8B87A0; } /* ===== 사용법 안내 (details/summary, 접었다폈다) ===== * 8개 계산기 템플릿(라이트/다크 테마 공용)에서 동일하게 사용하는 "사용법 보기" 접기 컴포넌트. * 라이트/다크 어느 페이지에도 자연스럽게 어울리도록 텍스트 색은 명시하지 않고 상속(inherit)받는다 * (라이트 페이지는 어두운 본문색, 다크 페이지(연말정산)는 밝은 본문색을 그대로 물려받음). * 테두리·배경은 --dd-primary(#FF6B35)를 낮은 투명도로 사용해 브랜드 컬러를 유지한다. */ .dd-usage-guide { max-width: 620px; margin: 0 auto 14px; border: 1.5px solid rgba(255, 107, 53, 0.32); border-radius: var(--dd-radius); background: rgba(255, 107, 53, 0.05); font-family: var(--dd-font); } .dd-usage-guide summary { cursor: pointer; list-style: none; padding: 13px 16px; font-size: 13.5px; font-weight: 700; color: var(--dd-primary); display: flex; align-items: center; justify-content: space-between; gap: 8px; user-select: none; } .dd-usage-guide summary::-webkit-details-marker { display: none; } .dd-usage-guide summary::after { content: '▾'; display: inline-block; font-size: 12px; color: var(--dd-primary); transition: transform .2s ease; flex-shrink: 0; } .dd-usage-guide[open] summary::after { transform: rotate(180deg); } .dd-usage-guide ul { margin: 0 16px 14px; padding-left: 18px; font-size: 12.5px; line-height: 1.75; color: inherit; opacity: .82; } .dd-usage-guide li { margin-bottom: 6px; } .dd-usage-guide li:last-child { margin-bottom: 0; }