/* ═══════════════════════════════════════════════════════════ 프론트 테마 토큰 — 업체별로 "이 파일만" 고친다. ─ 1. 브랜드 컬러 : --c-primary 한 줄을 바꾸면 버튼·활성 탭·활성 페이지·뱃지·체크가 모두 바뀜 ─ 2. 형태 버전 : (inc/theme.php 의 FE_UI_STYLE) → 라운드·테두리·탭/페이지네이션 활성 스타일이 한 번에 전환 ─ 3. 아이콘 : --ui-icon-stroke(두께) · --ui-icon-cap(끝 모양) → 모든 아이콘 동시 변경 ─ 4. 서체 : --ui-font-family ─ 5. 레이아웃 : --ui-inner (inner 폭 1400) Figma: DP-Solution_게시판 공통 컴포넌트 › Style › board_spec (D. 컬러 · C. 형태 · A-1. 폰트) ═══════════════════════════════════════════════════════════ */ :root{ /* ── 1. 브랜드 (Button/Primary) — 포인트 컬러 없이 블랙이 기본. 업체 컬러 입력 시 이 3줄 교체 ── */ --c-primary:#171719; /* Button/Primary/BG · 활성 탭 · 활성 페이지 · 공지 뱃지 */ --c-primary-hover:#46474c; /* Button/Primary/BG-Hover */ --c-primary-press:#5a5c63; /* Button/Primary/BG-Press */ --c-on-primary:#ffffff; /* Button/Primary/Text */ --c-accent:var(--c-primary); /* 링크·강조 글자 (브랜드 컬러를 글자에도 쓰려면 여기만) */ /* ── 1-1. 항목별 포인트 컬러 — 기본은 모두 --c-primary 를 따라 한 번에 바뀐다. 특정 항목만 다른 색이 필요하면 그 줄만 색상값으로 바꾼다. (Figma 코멘트: 포인트 컬러 일괄/개별 변경) ── */ --c-point-hover:#5a5c63; /* 구형 브라우저 대비값 */ --c-point-hover:color-mix(in srgb, var(--c-primary) 72%, #fff); /* 인풋·체크·라디오·탭·페이지네이션 호버 (포인트 컬러를 한 톤 밝게) */ --c-check:var(--c-primary); /* 체크박스·라디오 선택 */ --c-tab-active:var(--c-primary); /* 카테고리 탭 활성 */ --c-pg-active:var(--c-primary); /* 페이지네이션 현재 페이지 · 호버 글자 */ --c-badge:var(--c-primary); /* 공지 뱃지 */ --c-required:var(--c-primary); /* 폼 필수(*) 표시 */ --c-point-text:var(--c-primary); /* 분류명 · 댓글 수 등 강조 글자 */ --c-gallery-hover:var(--c-primary); /* 갤러리 박스형 카드 · 일반_카드형 카드 호버 테두리 · 하단 채움 배경 */ /* ── 2. 글자 (Label) ── */ --c-fg:#171719; /* Label/Normal — 제목·본문 기본 */ --c-fg-neutral:#2e2f33; /* Label/Neutral — 파일명·링크 주소 */ --c-fg-alt:#5a5c63; /* Label/Alternative — 설명·답변·본문 */ --c-fg-assist:#70737c; /* Label/Assistive — 날짜·메타·placeholder */ --c-fg-disable:#aeb0b6; /* Label/Disable — 비활성 */ --c-fg-deco:#c2c4c8; /* Label/Decorative — 장식 전용(NO IMAGE) */ /* ── 3. 선 · 배경 (Line · Background · Fill) ── */ --c-line:#e1e2e4; /* Line/Normal — 구분선·카드 테두리 */ --c-line-strong:#aeb0b6; /* Line/Strong — 보조 버튼 테두리·목록 상하단 라인 */ --c-bg:#ffffff; /* Background/Normal */ --c-bg-alt:#f7f7f8; /* Background/Normal/Alternative — 공지 행·표 머리·답변 박스 */ --c-fill:#f0f0f2; /* Fill/Normal — 호버 배경·플레이스홀더 */ --c-fill-alt:#f7f7f8; /* Fill/Alternative — 회색 인풋(ver05)·NO IMAGE 배경 */ --c-fill-strong:#dcdde0; /* Fill/Strong — 썸네일 호버 */ --c-scroll-track:#eaebec; /* 약관 팝업 스크롤바 트랙 (Figma scrollbar · Fill/Normal) */ --c-scroll-thumb:#aeb0b6; /* 약관 팝업 스크롤바 막대 (Figma thumb · Label/Disable) */ --c-input-border:#878a93; /* Input/Border */ --c-input-border-hover:var(--c-point-hover);/* 인풋 호버 */ --c-input-focus:var(--c-primary); /* Input/Border-Focus (라인 포인트 컬러) */ --c-negative:#e52828; /* Status/Negative — 에러 (유일한 유채색) */ --c-negative-soft:#fef6f6; /* 회원 탈퇴 경고 박스 배경 (Figma notice_box · Status/Negative 연한 배경) */ --c-positive:#00bf40; /* Status/Positive — 본인인증 완료·발송 안내 */ --c-my-active:#eaebec; /* 마이페이지 메뉴 선택 배경 */ --c-kakao:#fee500; --c-kakao-fg:#191919; /* 간편로그인 버튼 호버 브랜드 컬러 */ --c-naver:#03c75a; --c-naver-fg:#ffffff; --c-naver-logo:#03a94d; /* 네이버 N 로고 색 (Figma 네이버 BI) */ --c-google:#f2f2f2; /* 구글 버튼 호버 — 라인 · 배경 같은 색 */ --c-dim:rgba(23,23,25,.6); /* Material/Dimmer 60% */ --c-white:#ffffff; /* Neutral/100 — 딤 위 글자·닫기 */ /* ── 4. 서체 (Font 컬렉션) ── */ --ui-font-family:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif; --ui-font-family-2:"Outfit",var(--ui-font-family); /* 영문·숫자 보조 서체 */ --ui-fw-regular:400; --ui-fw-medium:500; --ui-fw-bold:700; /* ── 4-1. 글자 크기 · 행간 · 자간 (Figma 텍스트 스타일 이름 그대로) ── 같은 크기를 쓰는 요소는 모두 같은 변수를 보므로, 값 하나만 바꾸면 게시판·팝업·폼 전체가 함께 바뀐다. 모바일 크기는 아래 @media 블록에서 같은 변수를 다시 정의한다. */ --fs-display-md:2.8125rem; --lh-display-md:1.15; --ls-display-md:-.02em; /* 45 · 게시판 타이틀 */ --fs-title-auth:2.25rem; --lh-title-auth:1.22; /* 36 · 로그인 · 회원가입 · 찾기 제목 */ --fs-title-my:1.75rem; --lh-title-my:1.29; /* 28 · 마이페이지 사이드바 제목 */ --fs-headline-lg:2rem; --lh-headline-lg:1.25; --ls-headline-lg:-.015em; /* 32 · 상세 글 제목 */ --fs-headline-sm:1.5rem; --lh-headline-sm:1.33; --ls-headline-sm:-.01em; /* 24 · 갤러리 카드 제목 · 비밀번호 팝업 제목 */ --fs-body-lg:1.25rem; --lh-body-lg:1.45; --ls-body-lg:-.005em; /* 20 · 목록 제목 · FAQ 질문 · 댓글 N · 알럿/완료 제목 */ --fs-body-std:1.125rem; /* 18 · 상세 본문 · 댓글 · 빈 목록 안내 · 관리자 답변 제목 */ --fs-body-md:1rem; --lh-body-md:1.5; /* 16 · 기본 · 버튼 · 인풋 · 라벨 · 탭 · 페이지 번호 · 설명 */ --fs-body-sm:0.875rem; --lh-body-sm:1.43; /* 14 · 날짜 · 메타 · 분류 · 뱃지 · 도움말 · 에러 · 작은 버튼 */ --fs-caption:0.75rem; /* 12 · 모바일 뱃지 */ --lh-article:1.7; /* 상세 본문 행간 */ /* ── 5. 아이콘 — 스트로크 기반이라 두께·끝 모양만 바꾸면 전체 아이콘이 함께 바뀜 ── */ --ui-icon-stroke:1.5; /* light 1.25 · regular 1.5 · bold 2 */ --ui-icon-cap:round; /* round | square | butt */ --ui-icon-join:round; /* round | miter */ --ui-icon-size:1.25rem; /* 기본 20px */ /* ── 5-1. 컴포넌트별 라운드 — 기본은 형태 버전(data-ui)의 --ui-radius 를 따른다. 한 컴포넌트만 다르게 하려면 그 줄만 값으로 바꾼다 (예: --ui-radius-btn:999px → 버튼만 캡슐형). ── */ --ui-radius-btn:var(--ui-radius); /* 버튼 */ --ui-radius-input:var(--ui-radius); /* 인풋 · 셀렉트 · 검색 · 파일 선택 */ --ui-radius-tab:var(--ui-radius); /* 카테고리 탭 */ --ui-radius-pg:var(--ui-radius); /* 페이지네이션 */ --ui-radius-badge:var(--ui-radius); /* 공지 · 답변 상태 뱃지 */ /* ── 6. 레이아웃 ── */ --ui-inner:87.5rem; /* inner 폭 1400px */ --ui-gutter:1.5rem; /* 좌우 여백 24px */ --ui-form-w:47.5rem; /* 폼 폭 760px */ --ui-auth-w:25rem; /* 로그인 · 회원가입 · 찾기 폭 400 */ --ui-my-w:35rem; /* 마이페이지 본문 폭 560 */ --ui-my-side-w:18.75rem; /* 마이페이지 사이드바 폭 300 */ --ui-form-col-gap:1.5rem; /* 폼 한 줄 2개(반칸) 항목 사이 가로 간격 24px — 칸 지정은 inc/theme.php FE_FORM_HALF */ --ui-body-w:60rem; /* 본문 글 최대 폭 960px */ /* ── 6-1. 쌓임 순서 — 모든 팝업·모달은 채널톡(z-index 10000000) 같은 외부 상담 위젯보다 위에 뜬다 ── */ --ui-z-modal:2147483000; /* ── 7. 모션 — 호버·전환 속도를 여기서 한 번에 조절 ── */ --ui-ease-fn:cubic-bezier(.25,.46,.45,.94); /* 부드러운 감속 */ --ui-ease:.35s var(--ui-ease-fn); /* 색·배경·테두리·밑줄 호버 */ --ui-ease-zoom:.8s cubic-bezier(.22,.61,.36,1); /* 썸네일 확대 */ --ui-ease-open:.45s var(--ui-ease-fn); /* 아코디언 펼침 · 화살표 회전 */ --ui-ease-modal:.4s var(--ui-ease-fn); /* 모달·팝업 등장 */ --ui-ease-slide:.55s cubic-bezier(.22,.61,.36,1); /* 메인 팝업 슬라이드 이동 */ } /* 글자 크기 — 태블릿·모바일 (같은 변수를 다시 정의 → 해당 크기를 쓰는 요소 전체가 함께 작아짐) */ @media (max-width:1024px){ :root{ --fs-display-md:2.25rem; } } @media (max-width:768px){ :root{ --fs-display-md:1.75rem; /* 게시판 타이틀 */ --fs-title-auth:1.75rem; /* 로그인 · 회원가입 제목 */ --fs-title-my:1.25rem; /* 마이페이지 상단 제목 (모바일 앱바 20) */ --fs-headline-lg:1.5rem; /* 상세 글 제목 */ --fs-headline-sm:1.25rem; /* 팝업 제목 (갤러리 카드 제목은 front.css 에서 --fs-body-lg 사용) */ --fs-body-lg:1.0625rem; /* 목록 제목 · FAQ 질문 */ --fs-body-std:1rem; /* 상세 본문 · 댓글 */ } } /* ═══════════════════════════════════════════════════════════ 형태 버전 (Figma Type 섹션 ver01~05 · ButtonStyle 변수 모드) 기본 = ver01_square. 로 전환. ─ radius : 버튼·인풋·셀렉트·검색·탭·페이지네이션·뱃지 ─ radius-check : 체크박스 ─ radius-ta : 텍스트 영역 ─ radius-card : 갤러리 카드·썸네일 ─ radius-box : 파일 항목·셀렉트 메뉴·답변 박스 ─ radius-modal : 모달·팝업 ═══════════════════════════════════════════════════════════ */ :root, :root[data-ui="square"]{ --ui-radius:0; --ui-radius-check:0; --ui-radius-ta:0; --ui-radius-card:0; --ui-radius-box:0; --ui-radius-modal:0; /* 입력 필드 (Style=Box) */ --ui-field-bw:1px; --ui-field-bc:var(--c-input-border); --ui-field-bc-hover:var(--c-input-border-hover); --ui-field-bc-focus:var(--c-input-focus); --ui-field-bg:var(--c-bg); --ui-field-bg-hover:var(--c-bg); --ui-field-bg-focus:var(--c-bg); --ui-field-px:1.25rem; /* 카테고리 탭 */ --ui-tab-bw:1px; --ui-tab-bc:var(--c-line); --ui-tab-bg:var(--c-bg); --ui-tab-fg:var(--c-fg-alt); --ui-tab-active-bg:var(--c-tab-active); --ui-tab-active-fg:var(--c-on-primary); --ui-tab-active-bc:var(--c-tab-active); --ui-tab-active-fw:var(--ui-fw-medium); /* 페이지네이션 */ --ui-pg-active-bg:var(--c-pg-active); --ui-pg-active-fg:var(--c-on-primary); --ui-pg-active-fw:var(--ui-fw-medium); --ui-pg-active-line:transparent; /* 공지 뱃지 (Badge Notice) */ --ui-badge-bg:var(--c-badge); --ui-badge-fg:var(--c-on-primary); --ui-badge-bc:var(--c-badge); /* 답변 상태 뱃지 (Status-Wait / Status-Done) */ --ui-st-wait-bg:var(--c-bg-alt); --ui-st-wait-fg:var(--c-fg-alt); --ui-st-wait-bc:var(--c-bg-alt); --ui-st-done-bg:transparent; --ui-st-done-fg:var(--c-fg); --ui-st-done-bc:var(--c-fg); } :root[data-ui="round"]{ --ui-radius:.625rem; --ui-radius-check:.25rem; --ui-radius-ta:.625rem; --ui-radius-card:.75rem; --ui-radius-box:.625rem; --ui-radius-modal:.75rem; } :root[data-ui="pill"]{ --ui-radius:62.5rem; --ui-radius-check:.375rem; --ui-radius-ta:1.5rem; --ui-radius-card:1.5rem; --ui-radius-box:1.5rem; --ui-radius-modal:1.5rem; } :root[data-ui="line"]{ --ui-radius:0; --ui-radius-check:0; --ui-radius-ta:0; --ui-radius-card:0; --ui-radius-box:0; --ui-radius-modal:0; /* 테두리 대신 하단 1px 라인 (Style=Line) */ --ui-field-bw:0 0 1px 0; --ui-field-px:0; /* 탭·페이지네이션 활성 = Bold + 하단 1px 언더라인, 배경 없음 */ --ui-tab-bw:0 0 1px 0; --ui-tab-bc:transparent; --ui-tab-bg:transparent; --ui-tab-active-bg:transparent; --ui-tab-active-fg:var(--c-tab-active); --ui-tab-active-bc:var(--c-tab-active); --ui-tab-active-fw:var(--ui-fw-bold); --ui-pg-active-bg:transparent; --ui-pg-active-fg:var(--c-pg-active); --ui-pg-active-fw:var(--ui-fw-bold); --ui-pg-active-line:var(--c-pg-active); --ui-badge-bg:transparent; --ui-badge-fg:var(--c-badge); --ui-badge-bc:var(--c-badge); --ui-st-wait-bg:transparent; --ui-st-wait-fg:var(--c-fg-alt); --ui-st-wait-bc:var(--c-line-strong); } :root[data-ui="fill"]{ --ui-radius:.625rem; --ui-radius-check:.25rem; --ui-radius-ta:.625rem; --ui-radius-card:.75rem; --ui-radius-box:.625rem; --ui-radius-modal:.75rem; /* 회색 인풋 (Style=Fill): 기본 Fill/Alternative · 호버 Fill/Normal · 포커스 흰 배경 + Border-Focus 1px · 테두리 없음 */ --ui-field-bc:transparent; --ui-field-bc-hover:transparent; --ui-field-bg:var(--c-fill-alt); --ui-field-bg-hover:var(--c-fill); --ui-field-bg-focus:var(--c-bg); --ui-st-done-bg:var(--c-badge); --ui-st-done-fg:var(--c-on-primary); --ui-st-done-bc:var(--c-badge); }