/* ============================================================================ * calcday-ui.css * calcday 디자인 시스템 — Sneat 어드민 스킨을 사용자 친화적 계산기 사이트로 재스킨 * * 근거 문서: .omc/plans/DESIGN.md * 로드 순서: common/design_resources.jsp 에서 Sneat core.css / theme-default.css / * demo.css 다음에 로드되어야 아래 규칙이 우선순위로 이긴다. * 원칙: vendor(Sneat) 파일은 절대 수정하지 않고, 이 파일에서 더 높은 특이도로만 오버라이드한다. * 모든 방향 속성은 논리 속성(margin-inline-*, padding-inline-*, inset-inline-*)을 사용해 * RTL(ar/he/fa) 전환 시 자동 대응되도록 한다. * 다크모드: 로 토큰 세트 전환(§8). 외부 @import / url(http...) 금지(로컬 전용). * * 목차 * 1. 디자인 토큰 (:root) * 2. 전역 베이스 (폰트/배경) * 3. Sneat 오버라이드 * 3-1. Bootstrap 변수 재매핑 * 3-2. 사이드바(app-brand, menu) * 3-3. 상단 네비바 * 3-4. 푸터 * 3-5. 카드 * 3-6. 버튼 * 3-7. 폼 컨트롤 * 3-8. list-group(구형 메인 목록 폴백) * 4. cd- 컴포넌트 * 4-1. cd-card (계산기 카드) * 4-2. cd-field (라벨 + 입력 + 단위) * 4-3. cd-btn / cd-actions (계산 버튼) * 4-4. cd-result (결과 패널) * 4-5. cd-guide / cd-steps (사용방법) * 4-6. cd-related (연관 계산기) * 4-7. cd-cat (메인 페이지 카테고리 카드) * 5. 반응형 (모바일 ~640 / 태블릿 641~1024 / PC 1025~) * 6. RTL 유틸리티 * 7. 접근성 (포커스, 모션 축소) * 8. 다크모드 ([data-theme="dark"] 토큰 재정의 + Sneat/Bootstrap 표면 오버라이드) * ==========================================================================*/ /* ---------------------------------------------------------------------------- * 1. 디자인 토큰 * --------------------------------------------------------------------------*/ :root { /* --- 색상: 브랜드(웜 테라코타 포인트 1색 — 탈-푸르딩딩) --- */ --cd-primary: #c2410c; /* 테라코타 오렌지. #fff 대비 5.18:1 (본문 AA) */ --cd-primary-hover: #9a3412; /* 7.31:1 */ --cd-primary-soft: #fff1e9; /* 연한 배경(강조 패널, active). primary 대비 4.69:1 */ --cd-accent: #047857; /* 에메랄드(보조 강조) 5.48:1 */ --cd-accent-soft: #ecfdf5; /* --- 색상: 상태 (유지 — 카테고리 색코딩용, 웜 팔레트와 조화) --- */ --cd-success: #15803d; --cd-success-soft: #f0fdf4; --cd-warning: #b45309; --cd-warning-soft: #fffbeb; --cd-danger: #dc2626; --cd-danger-soft: #fef2f2; --cd-info: #0369a1; --cd-info-soft: #f0f9ff; /* --- 색상: 중립(웜 스톤 — 저채도) --- */ --cd-text: #292524; /* 본문 (14.5:1) */ --cd-text-muted: #78716c; /* 보조 (bg 대비 4.59:1, AA 통과) */ --cd-border: #e7e5e4; --cd-surface: #ffffff; /* 카드 */ --cd-bg: #fafaf9; /* 페이지 배경 */ /* --- 타이포 스케일 (1.250 Major Third) --- */ --cd-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; /* 웹폰트 미사용(로컬 시스템) */ --cd-fs-xs: 0.75rem; /* 12px 힌트/캡션 */ --cd-fs-sm: 0.875rem; /* 14px 보조 */ --cd-fs-base: 1rem; /* 16px 본문/입력 (모바일 확대 방지 최소 16px) */ --cd-fs-lg: 1.125rem; /* 18px 라벨 */ --cd-fs-xl: 1.5rem; /* 24px 섹션 제목 */ --cd-fs-2xl: 2rem; /* 32px 결과 강조값 */ --cd-lh-tight: 1.25; --cd-lh-normal: 1.6; --cd-fw-normal: 400; --cd-fw-medium: 500; --cd-fw-semibold: 600; --cd-fw-bold: 700; /* --- 간격 스케일 (4px 기준) --- */ --cd-sp-1: 4px; --cd-sp-2: 8px; --cd-sp-3: 12px; --cd-sp-4: 16px; --cd-sp-5: 24px; --cd-sp-6: 32px; --cd-sp-8: 48px; /* --- 라운딩 --- */ --cd-radius-sm: 8px; --cd-radius: 12px; --cd-radius-lg: 16px; --cd-radius-pill: 999px; /* --- 그림자 (은은하게, admin 무거운 박스 탈피) --- */ --cd-shadow-sm: 0 1px 2px rgba(41, 37, 36, .06); --cd-shadow: 0 4px 12px rgba(41, 37, 36, .08); --cd-shadow-lg: 0 10px 24px rgba(41, 37, 36, .10); /* --- 터치/입력 --- */ --cd-touch: 44px; /* 최소 터치 영역 */ } /* ---------------------------------------------------------------------------- * 2. 전역 베이스 * --------------------------------------------------------------------------*/ html, body { background-color: var(--cd-bg); color: var(--cd-text); font-family: var(--cd-font-sans); font-size: var(--cd-fs-base); line-height: var(--cd-lh-normal); } .content-wrapper { background-color: var(--cd-bg); } h1, h2, h3, h4, h5, h6 { color: var(--cd-text); font-family: var(--cd-font-sans); font-weight: var(--cd-fw-semibold); } a { color: var(--cd-primary); } a:hover { color: var(--cd-primary-hover); } /* 페이지 breadcrumb 제목(h4.fw-bold.py-3) 위계 정리 */ .container-xxl > h4.fw-bold { font-size: var(--cd-fs-xl); font-weight: var(--cd-fw-semibold); margin-bottom: var(--cd-sp-5); } /* ---------------------------------------------------------------------------- * 3. Sneat 오버라이드 (vendor 파일 미수정, 특이도로만 재정의) * --------------------------------------------------------------------------*/ /* --- 3-1. Bootstrap 변수 재매핑: 버튼/링크/active 색을 일괄 교체 --- */ :root { --bs-primary: var(--cd-primary); --bs-primary-rgb: 194, 65, 12; --bs-link-color: var(--cd-primary); --bs-link-hover-color: var(--cd-primary-hover); --bs-body-font-family: var(--cd-font-sans); --bs-body-color: var(--cd-text); } /* --- 3-2. 사이드바 --- */ .layout-menu.menu-vertical.menu.bg-menu-theme { background-color: var(--cd-surface); border-inline-end: 1px solid var(--cd-border); box-shadow: none; } .app-brand-text.demo { color: var(--cd-primary); font-weight: var(--cd-fw-bold); } .menu-vertical .menu-header .menu-header-text { color: var(--cd-text-muted); font-size: var(--cd-fs-xs); font-weight: var(--cd-fw-semibold); letter-spacing: .04em; } .menu-vertical .menu-link { border-radius: var(--cd-radius-sm); color: var(--cd-text); font-weight: var(--cd-fw-medium); margin-inline: var(--cd-sp-2); min-height: var(--cd-touch); } .menu-vertical .menu-link:hover { background-color: var(--cd-primary-soft); color: var(--cd-primary); } .menu-vertical .menu-link .menu-icon { color: var(--cd-text-muted); } .menu-vertical .menu-link:hover .menu-icon { color: var(--cd-primary); } /* 활성 메뉴 = 라운드 pill 형태 강조 */ .menu-vertical .menu-item.active > .menu-link { background-color: var(--cd-primary-soft); border-radius: var(--cd-radius-pill); color: var(--cd-primary); font-weight: var(--cd-fw-semibold); } .menu-vertical .menu-item.active > .menu-link .menu-icon { color: var(--cd-primary); } .menu-vertical .menu-inner-shadow { background: linear-gradient(var(--cd-surface), rgba(255, 255, 255, 0)); } /* --- 3-3. 상단 네비바 --- */ .layout-navbar.navbar-detached.bg-navbar-theme { background-color: var(--cd-surface); border-bottom: 1px solid var(--cd-border); box-shadow: none; } .layout-navbar .nav-link { color: var(--cd-text); } .layout-navbar .form-select.color-dropdown { border-color: var(--cd-border); border-radius: var(--cd-radius-sm); font-size: var(--cd-fs-sm); min-height: var(--cd-touch); } .layout-navbar .form-select.color-dropdown:focus { border-color: var(--cd-primary); box-shadow: 0 0 0 2px var(--cd-primary-soft); } /* 다크모드 토글 버튼 (달/해) — 토큰 기반이라 라이트/다크 자동 대응 */ .cd-theme-toggle { align-items: center; background: transparent; border: 1px solid var(--cd-border); border-radius: var(--cd-radius-pill); color: var(--cd-text); cursor: pointer; display: inline-flex; font-size: 1.25rem; height: var(--cd-touch); justify-content: center; width: var(--cd-touch); } .cd-theme-toggle:hover { background: var(--cd-primary-soft); color: var(--cd-primary); } /* --- 3-4. 푸터 --- */ .content-footer.footer.bg-footer-theme { background-color: var(--cd-surface); border-top: 1px solid var(--cd-border); } .footer-link { color: var(--cd-text-muted); } .footer-link:hover { color: var(--cd-primary); } .buy-now .btn-buy-now.btn-danger { background-color: var(--cd-primary); border-color: var(--cd-primary); border-radius: var(--cd-radius-pill); min-height: var(--cd-touch); } .buy-now .btn-buy-now.btn-danger:hover { background-color: var(--cd-primary-hover); border-color: var(--cd-primary-hover); } /* --- 3-5. 카드 --- */ .card { background-color: var(--cd-surface); border: 1px solid var(--cd-border); border-radius: var(--cd-radius); box-shadow: var(--cd-shadow-sm); } .card-header { background-color: transparent; border-bottom: 1px solid var(--cd-border); font-size: var(--cd-fs-xl); font-weight: var(--cd-fw-semibold); padding: var(--cd-sp-4) var(--cd-sp-5); } .card-body { padding: var(--cd-sp-5); } /* --- 3-6. 버튼 --- */ .btn { border-radius: var(--cd-radius-sm); font-weight: var(--cd-fw-semibold); min-height: var(--cd-touch); } .btn-primary { background-color: var(--cd-primary); border-color: var(--cd-primary); } .btn-primary:hover, .btn-primary:focus { background-color: var(--cd-primary-hover); border-color: var(--cd-primary-hover); } .btn-outline-primary { border-color: var(--cd-primary); color: var(--cd-primary); } .btn-outline-primary:hover { background-color: var(--cd-primary); border-color: var(--cd-primary); } /* --- 3-7. 폼 컨트롤 --- */ .form-control, .form-select { border: 1px solid var(--cd-border); border-radius: var(--cd-radius-sm); font-size: var(--cd-fs-base); /* iOS 자동 확대 방지 최소 16px */ min-height: var(--cd-touch); } .form-control:focus, .form-select:focus { border-color: var(--cd-primary); box-shadow: 0 0 0 2px var(--cd-primary-soft); } .form-label { color: var(--cd-text); font-size: var(--cd-fs-lg); font-weight: var(--cd-fw-medium); } /* --- 3-8. list-group (index.jsp 등 구형 목록의 최소 가독성 폴백) --- */ .list-group-item.list-group-item-action { border-color: var(--cd-border); color: var(--cd-text); min-height: var(--cd-touch); } .list-group-item.list-group-item-action:hover { background-color: var(--cd-primary-soft); color: var(--cd-primary); } /* ---------------------------------------------------------------------------- * 4. cd- 컴포넌트 * --------------------------------------------------------------------------*/ /* --- 4-1. 계산기 카드 (섹션 컨테이너) --- */ .cd-card { background: var(--cd-surface); border: 1px solid var(--cd-border); border-radius: var(--cd-radius); box-shadow: var(--cd-shadow-sm); margin-bottom: var(--cd-sp-5); } .cd-card__head { border-bottom: 1px solid var(--cd-border); padding: var(--cd-sp-4) var(--cd-sp-5); } .cd-card__title { font-size: var(--cd-fs-xl); font-weight: var(--cd-fw-semibold); margin: 0; } .cd-card__body { padding: var(--cd-sp-5); } /* 입력(5) | 결과(7) 2단 그리드 — 모바일은 1열 세로 흐름 */ .cd-calc-grid { display: grid; gap: var(--cd-sp-4); grid-template-columns: 1fr; } /* --- 4-2. 입력 폼 (라벨 + 입력 + 단위) --- */ .cd-field { margin-bottom: var(--cd-sp-4); } .cd-label { align-items: center; color: var(--cd-text); display: flex; font-size: var(--cd-fs-lg); font-weight: var(--cd-fw-medium); gap: var(--cd-sp-2); margin-bottom: var(--cd-sp-2); } .cd-input { background-color: var(--cd-surface); border: 1px solid var(--cd-border); border-radius: var(--cd-radius-sm); color: var(--cd-text); font-size: var(--cd-fs-base); /* 모바일 확대 방지 최소 16px */ min-height: var(--cd-touch); padding: var(--cd-sp-3) var(--cd-sp-4); width: 100%; } .cd-input:focus { border-color: var(--cd-primary); outline: 2px solid var(--cd-primary); outline-offset: 1px; } .cd-input-group { display: flex; } .cd-input-group .cd-input { border-start-end-radius: 0; border-end-end-radius: 0; } .cd-input-suffix { align-items: center; background-color: var(--cd-bg); border: 1px solid var(--cd-border); border-inline-start: 0; border-start-end-radius: var(--cd-radius-sm); border-end-end-radius: var(--cd-radius-sm); color: var(--cd-text-muted); display: flex; font-size: var(--cd-fs-sm); padding-inline: var(--cd-sp-3); white-space: nowrap; } .cd-hint { color: var(--cd-text-muted); font-size: var(--cd-fs-xs); margin-top: var(--cd-sp-1); } /* 라벨 옆 쉬운 설명 툴팁 버튼 (§7 쉬운 용어 가이드) */ .cd-info { align-items: center; background-color: var(--cd-primary-soft); border: 0; border-radius: var(--cd-radius-pill); color: var(--cd-primary); cursor: help; display: inline-flex; flex: 0 0 auto; font-size: var(--cd-fs-xs); font-weight: var(--cd-fw-bold); height: 18px; justify-content: center; width: 18px; } .cd-info:hover, .cd-info:focus-visible { background-color: var(--cd-primary); color: #fff; } /* --- 4-3. 계산 버튼 (주/보조) --- */ .cd-actions { display: flex; gap: var(--cd-sp-3); justify-content: flex-end; } .cd-btn { border-radius: var(--cd-radius-sm); cursor: pointer; font-size: var(--cd-fs-base); font-weight: var(--cd-fw-semibold); min-height: var(--cd-touch); padding: 0 var(--cd-sp-5); } .cd-btn--primary { background: var(--cd-primary); border: 0; color: #fff; } .cd-btn--primary:hover { background: var(--cd-primary-hover); } .cd-btn--ghost { background: transparent; border: 1px solid var(--cd-border); color: var(--cd-text); } .cd-btn--ghost:hover { background: var(--cd-bg); border-color: var(--cd-text-muted); } /* --- 4-4. 결과 패널 (강조) --- */ .cd-result { background: var(--cd-primary-soft); border: 1px solid var(--cd-primary); border-radius: var(--cd-radius); padding: var(--cd-sp-5); } .cd-result__label { color: var(--cd-text-muted); font-size: var(--cd-fs-sm); font-weight: var(--cd-fw-medium); margin-bottom: var(--cd-sp-1); } .cd-result__value { color: var(--cd-primary); font-size: var(--cd-fs-2xl); font-weight: var(--cd-fw-bold); line-height: var(--cd-lh-tight); } .cd-result__unit { color: var(--cd-text-muted); font-size: var(--cd-fs-lg); font-weight: var(--cd-fw-medium); margin-inline-start: var(--cd-sp-1); } /* 다중 결과값 그리드 (모바일: 자동 1열) */ .cd-result-grid { display: grid; gap: var(--cd-sp-4); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } /* --- 4-5. 사용방법 / 예시 섹션 --- */ .cd-guide .cd-steps { color: var(--cd-text); line-height: var(--cd-lh-normal); margin: 0; padding-inline-start: var(--cd-sp-5); } .cd-guide .cd-steps li { margin-bottom: var(--cd-sp-2); } .cd-guide .cd-steps li:last-child { margin-bottom: 0; } /* --- 4-6. 연관 계산기 --- */ .cd-related { display: grid; gap: var(--cd-sp-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .cd-related__item { border: 1px solid var(--cd-border); border-radius: var(--cd-radius-sm); display: block; padding: var(--cd-sp-4); text-decoration: none; transition: box-shadow .2s, transform .2s; } .cd-related__item:hover { box-shadow: var(--cd-shadow); transform: translateY(-2px); } .cd-related__title { color: var(--cd-text); display: block; font-weight: var(--cd-fw-semibold); margin-bottom: var(--cd-sp-1); } .cd-related__desc { color: var(--cd-text-muted); display: block; font-size: var(--cd-fs-sm); } /* --- 4-7. 카테고리 카드 (메인 페이지) --- * 카테고리별 아이콘·색 매핑 (cd-cat__icon 인라인 style 또는 아래 유틸 클래스 사용): * finance(금융) -> 지갑 -> --cd-primary / --cd-primary-soft * health(건강) -> 하트 -> --cd-accent / --cd-accent-soft * date(날짜) -> 달력 -> --cd-info / --cd-info-soft * time(시간) -> 시계 -> --cd-info / --cd-info-soft * calculator(비즈니스) -> 계산기 -> --cd-primary / --cd-primary-soft * calc(생활) -> 영수증 -> --cd-accent / --cd-accent-soft * speed(속도) -> 속도계 -> --cd-warning / --cd-warning-soft * distance(거리) -> 지도핀 -> --cd-warning / --cd-warning-soft * computer(컴퓨터) -> 코드 -> --cd-text / --cd-bg * math(수학) -> 함수 -> --cd-text / --cd-bg * crypto(암호화폐) -> 코인 -> --cd-primary / --cd-primary-soft * education(교육) -> 학사모 -> --cd-info / --cd-info-soft * fun(재미) -> 주사위 -> --cd-danger / --cd-danger-soft * life(생활) -> 집 -> --cd-accent / --cd-accent-soft * pet(반려동물) -> 발바닥 -> --cd-accent / --cd-accent-soft * realestate(부동산) -> 건물 -> --cd-primary / --cd-primary-soft * unit(단위변환) -> 눈금자 -> --cd-success / --cd-success-soft */ .cd-cat { align-items: center; border-radius: var(--cd-radius-sm); color: var(--cd-text); display: flex; gap: var(--cd-sp-3); min-height: var(--cd-touch); padding: var(--cd-sp-4); text-decoration: none; } .cd-cat:hover { background: var(--cd-primary-soft); } .cd-cat__icon { align-items: center; border-radius: var(--cd-radius-sm); display: grid; flex: 0 0 auto; height: 40px; justify-content: center; width: 40px; } .cd-cat__body { display: flex; flex-direction: column; min-width: 0; } .cd-cat__title { color: var(--cd-text); font-weight: var(--cd-fw-semibold); } .cd-cat__desc { color: var(--cd-text-muted); font-size: var(--cd-fs-sm); } /* 카테고리 아이콘 색상 유틸 (표와 매칭) */ .cd-icon-primary { background: var(--cd-primary-soft); color: var(--cd-primary); } .cd-icon-accent { background: var(--cd-accent-soft); color: var(--cd-accent); } .cd-icon-success { background: var(--cd-success-soft); color: var(--cd-success); } .cd-icon-warning { background: var(--cd-warning-soft); color: var(--cd-warning); } .cd-icon-danger { background: var(--cd-danger-soft); color: var(--cd-danger); } .cd-icon-info { background: var(--cd-info-soft); color: var(--cd-info); } /* 메인 페이지 카테고리 카드 그리드 (컬럼 구조는 index.jsp의 col-* 유지, 내부만 사용) */ .cd-category-card { display: grid; gap: var(--cd-sp-3); grid-template-columns: 1fr; } /* ---------------------------------------------------------------------------- * 5. 반응형 * 모바일 ~640px / 태블릿 641~1024px / PC 1025px~ (min-width 상향식) * --------------------------------------------------------------------------*/ /* 컨테이너 좌우 패딩 최소 확보(가로 스크롤 금지, 표/차트만 자체 스크롤) */ .container-xxl { padding-inline: var(--cd-sp-4); } /* 모바일: 계산 버튼 순서 반전(주버튼을 아래=엄지 근처) */ @media (max-width: 640px) { .cd-actions { flex-direction: column-reverse; } .cd-actions .cd-btn { width: 100%; } .cd-result-grid { grid-template-columns: 1fr; } .cd-card__head, .cd-card__body { padding: var(--cd-sp-4); } } /* 태블릿: 입력 | 결과 2열 */ @media (min-width: 641px) and (max-width: 1024px) { .cd-calc-grid { grid-template-columns: 1fr 1fr; } .cd-category-card { grid-template-columns: repeat(2, 1fr); } } /* PC: 입력 5 / 결과 7 그리드 */ @media (min-width: 1025px) { .cd-calc-grid { grid-template-columns: 5fr 7fr; } .cd-category-card { grid-template-columns: repeat(3, 1fr); } } /* ---------------------------------------------------------------------------- * 6. RTL 유틸리티 * 신규 컴포넌트는 위에서 전부 논리 속성(margin-inline-*, padding-inline-*, * border-inline-*, inset-inline-*)을 사용해 dir 전환에 자동 대응한다. * 방향성 있는 아이콘(화살표/체브론/뒤로가기)에만 이 유틸을 적용한다. * 숫자/통화/차트 축/체크·정보 아이콘 등 방향성 없는 요소에는 사용 금지. * --------------------------------------------------------------------------*/ [dir="rtl"] .cd-flip-rtl { transform: scaleX(-1); } /* ---------------------------------------------------------------------------- * 7. 접근성 * --------------------------------------------------------------------------*/ .cd-card a:focus-visible, .cd-btn:focus-visible, .cd-input:focus-visible, .cd-cat:focus-visible, .cd-related__item:focus-visible, .cd-theme-toggle:focus-visible, .cd-info:focus-visible { outline: 2px solid var(--cd-primary); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .cd-related__item, .cd-cat { transition: none; } } /* ---------------------------------------------------------------------------- * 8. 다크모드 * 에 data-theme="dark" 부여 시 활성화(design_resources.jsp FOUC 스니펫 + * navbar.jsp 토글). Sneat는 .light-style '클래스'로만 색을 잡으므로 data-theme * 속성은 vendor와 충돌하지 않는다(관찰: core.css는 data-theme 셀렉터 미사용). * 원칙: :root 토큰만 재정의하면 var() 기반 cd-* 컴포넌트와 3장 오버라이드가 자동 전환. * Sneat/Bootstrap이 var()를 거치지 않고 하드코딩하는 표면(폼/표/유틸/버튼 텍스트)만 * 동일 특이도 이상으로 추가 오버라이드(vendor 파일 미수정). * 대비: 배경 #16181c / 카드 #1e2126, 텍스트·포인트 색 모두 WCAG AA 이상(실측). * 알려진 한계(기존 부채, 별도 태스크): Chart.js 렌더 색, 개별 페이지 inline