/* ========================================================================== Teenstock Design Tokens (Figma file: peN1wtXPS0ABYFWnQXKUeW) 35 프레임 정밀 분석 결과 기반 디자인 토큰 ========================================================================== */ :root { /* ---------------------------------------------------------------------- Brand colors ---------------------------------------------------------------------- */ --color-primary: #F89728; /* 브랜드 주황 — CTA, 학급코드, 강조 */ --color-primary-600: #E58415; /* hover/active 가정 */ --color-primary-100: #FFE7C7; /* 연한 배경(추정) */ --color-lime: #C8D92A; /* "1분기" 라벨, 공유 배너, 뉴스팝업 헤더 */ --color-lime-600: #B4C421; /* ---------------------------------------------------------------------- Semantic (상승/하락, 구매/판매) ---------------------------------------------------------------------- */ --color-up: #F04452; /* 상승 ▲, 구매 버튼, 수업 종료 */ --color-down: #4477FE; /* 하락 ▼, 판매 버튼, 금액 값, 내 리포트 */ --color-up-soft: #FDE9EB; /* 리포트 "최고의 선택" 카드 배경 */ --color-down-soft: #D6EAF8; /* 리포트 "아쉬운 선택" 카드 배경 */ /* ---------------------------------------------------------------------- Text (Figma 반환 실측) ---------------------------------------------------------------------- */ --color-text-hero: #414042; /* H1 / 페이지 타이틀 */ --color-text-title: #231F20; /* 입력 값, 본문 강조 near-black */ --color-text-value: #4477FE; --color-text-body: #706F6F; /* 본문, 라벨, 푸터 */ --color-text-black: #000000; --color-text-sub: #626262; /* 부가 본문 15px */ --color-text-muted: #787878; /* 플레이스홀더, 테이블 데이터 */ --color-text-section: #606060; /* 섹션 소제목 */ --color-text-on-primary: #FFFFFF; /* ---------------------------------------------------------------------- Backgrounds & dividers ---------------------------------------------------------------------- */ --color-bg: #FFFFFF; --color-bg-soft: #EFEFEF; /* 분기별 투자 페이지 배경 */ --color-bg-page-outside: #FFFFFF; /* 640px 초과 바깥 여백 */ --color-bg-table-head: #F5F5F5; /* 투자현황 테이블 헤더 */ --color-bg-popup: #FFF9C4; /* 뉴스 팝업 노란 배경 */ --color-bg-popup-header: #C8D92A; /* 뉴스 팝업 상단 라임 배너 */ --color-bg-placeholder: #F3F3F3; /* 수업코드 placeholder 박스 */ --color-bg-company: #F6F6F6; /* 종목정보 리스트 */ --color-border: #D9D9D9; /* 입력 박스, 테이블 외곽 */ --color-border-light: #F6F6F6; /* 버튼 외곽 */ --color-border-soft: #E5E5E5; /* 행 구분선 */ --color-border-hair: #EDEDED; /* 드로어 구분선 */ /* ---------------------------------------------------------------------- Podium (5.결과발표 시상대) & Share (6.강사페이지) ---------------------------------------------------------------------- */ --color-podium-1: #F8CCC0; /* 1등 중앙 연핑크 */ --color-podium-2: #F9E79F; /* 2등 좌측 파스텔 옐로우 */ --color-podium-3: #D4DE59; /* 3등 우측 라임 옐로우그린 */ --color-share-copy: #F89728; /* 복사 — 주황 */ --color-share-kakao: #FFE814; /* 카카오 — 옐로우 */ --color-share-sms: #2ECC71; /* 문자 — 그린 */ /* ---------------------------------------------------------------------- Typography (Figma: Pretendard Variable / Inter + Noto Sans KR) ---------------------------------------------------------------------- */ --font-family-base: "Pretendard Variable", "Pretendard", "Inter", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif; --font-family-num: "Inter", "Pretendard Variable", "Noto Sans KR", -apple-system, sans-serif; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-xbold: 800; /* Font sizes (px, 실측) */ --fs-hero: 28px; /* H1 / 페이지 타이틀 */ --fs-title: 24px; /* 학급코드, 페이지 서브 타이틀 */ --fs-xl: 21px; /* 종목 수량 숫자, 구매/판매 버튼 */ --fs-lg: 20px; /* 섹션 소제목, 버튼, 입력값, 날짜 */ --fs-md: 18px; /* 재무 테이블 라벨·값, 드로어 헤더, 카드 종목명 */ --fs-rank: 17px; /* 뉴스 팝업 헤드라인, 시상 순위 */ --fs-base: 16px; /* 본문, 시장지표 라벨, 메뉴 */ --fs-sm: 15px; /* 해시태그, 부가 본문 */ --fs-caption: 14.69px;/* 리포트 부라벨, 차트 축 */ --fs-xs: 13px; /* 긴 종목명 축약, 테이블 데이터 */ --fs-share: 11.72px;/* 공유 버튼 라벨 */ --fs-footer: 19px; /* 푸터 기관명 */ --lh-tight: 1.2; --lh-base: 1.6; --lh-loose: 1.75; /* ---------------------------------------------------------------------- Spacing (실측 기반) ---------------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; /* 기본 좌우 패딩 (안내 페이지 32px) */ --space-9: 44px; /* 버튼/입력 간 세로 간격 */ --page-pad-x: 32px; /* 페이지 공통 좌우 여백 */ --page-pad-x-login: 33px; /* 로그인 폼 좌우 여백 */ --card-pad-x: 32px; /* 카드 섹션 좌우 여백 */ --article-pad-x: 10px; /* ---------------------------------------------------------------------- Sizing ---------------------------------------------------------------------- */ --viewport-base: 393px; /* Figma base */ --viewport-min: 320px; /* 미만 시 가로 스크롤 */ --viewport-max: 640px; /* 초과 시 고정 렌더링 */ --header-h: 96px; /* 상단 헤더 영역 (이모지는 margin으로 돌출) */ --btn-h: 44px; /* 일반 pill 버튼 높이 */ --btn-h-lg: 55px; /* 큰 CTA 버튼 (종목 이동) */ --btn-h-action: 57px; /* 구매/판매 */ --input-h: 44px; /* 입력 필드 높이 */ /* ---------------------------------------------------------------------- Radius & Shadow ---------------------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 8px; /* 입력 박스, 테이블 */ --radius-lg: 5px; /* 카드, 시장지표 */ --radius-xl: 16px; /* 큰 카드 */ --radius-pill: 999px; /* pill 버튼 */ --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.06); --shadow-card-lg:0 4px 12px rgba(0, 0, 0, 0.08); --shadow-hero: 0 6px 18px rgba(248, 151, 40, 0.18); /* ---------------------------------------------------------------------- z-index ---------------------------------------------------------------------- */ --z-header: 10; --z-drawer: 100; --z-modal: 1000; --z-toast: 2000; /* ---------------------------------------------------------------------- Transitions ---------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-base: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 150ms; --dur-base: 240ms; --dur-slow: 360ms; } /* -------------------------------------------------------------------------- 그룹 테마 스위치 — body.cg-a / body.cg-b -------------------------------------------------------------------------- */ body.cg-a { --color-theme: var(--color-primary); /* 그룹A: 주황 */ --color-theme-soft: var(--color-primary-100); } body.cg-b { --color-theme: var(--color-lime); /* 그룹B: 라임 */ --color-theme-soft: #F5F8D6; } /* 기본값은 그룹A */ body { --color-theme: var(--color-primary); --color-theme-soft: var(--color-primary-100); } body.p-su21, body.p-ex10 { background-color: var(--color-bg-company); }