/* ============================================================================ SK하이닉스 미디어 (hotclipfolio) · design-system.css 기획서 §06 디자인 시스템 규격 완전 구현 · v3 ---------------------------------------------------------------------------- 규칙 요약(가드레일): - 이모지 0 · 색 띠(accent top border) 금지(단, 존 대표 카드 box-header 밴드는 존당 1색 허용) - 한국어 body: word-break:keep-all; overflow-wrap:break-word ( :lang(ko) 스코프) - 등락색: 상승 빨강 #d23f3f · 하락/링크/데이터 파랑 #1f6feb 만 (초록 금지) + 부호(+/−) 병기(색맹 접근성) - 폰트 크기 8스텝 모듈러 스케일(비율 1.25) 외 신규 크기 금지 - Pretendard(로컬 열람이므로 CDN 링크는 HTML 에서 허용) ★★★ 타이포 단일 소스(SINGLE SOURCE OF TRUTH) — 하드코딩 px 전면 금지 ★★★ ---------------------------------------------------------------------------- 모든 페이지는 아래 8스텝 스케일만 사용한다. 위→아래 크기 위계는 어느 페이지에서든 동일하다. 개별 페이지·컴포넌트에서 font-size 를 px 로 직접 적는 것은 금지한다. 허용:

또는 font-size: var(--fs-h1); 금지:

· .foo { font-size: 28px; } 위계 순서(절대 역전 금지): 페이지타이틀 H1(.t-display/.t-h1) > 섹션 H2(.t-h2) > 카드헤더 H3(.t-h3) > 본문 Body 18/1.8(.t-body) > 부연 Small(.t-small) > 라벨(.t-label) > 캡션/출처(.t-caption) 같은 역할에는 항상 같은 클래스를 쓴다(제목엔 항상 .t-h*, 출처엔 항상 .t-caption). 한 섹션 안에서 크기가 역전되지 않게 한다(큰 개념→작은 근거). 유일한 px 예외: 이 :root 블록의 --fs-* 정의부(스케일의 원천)와, 크기가 아닌 속성(border 1px, padding 등). 그 외 어디에도 font-size:px 를 두지 않는다. ========================================================================= */ /* --------------------------------------------------------------------------- [01] :root 토큰 — 색 · 폰트 · 타이포 · 간격 · 반경 · 그림자 ------------------------------------------------------------------------ */ :root { /* --- 색: 텍스트 위계 --- */ --text-strong: #1b2433; /* 제목 강조 · 잉크 네이비(순검정 지양) · 대비 14.4:1 */ --text-body: #38414f; /* 본문 · 잉크 슬레이트(색감+부드러움) · 대비 9.4:1 */ --text-medium: #5a6473; /* 부연 · 슬레이트 · 대비 5.9:1 (AA 통과) */ --text-muted: #737d8c; /* 캡션 · 출처 · 갱신시각 · 슬레이트 · 대비 4.6:1 (AA 통과) */ /* ※ 순검정(#16171c/#303038) → 잉크 네이비/슬레이트로 톤 부여, 가독성·색감 개선 */ /* --- 색: 등락 · 링크 · 데이터 (초록 금지) --- */ --up: #d23f3f; /* 상승 · 빨강 · 대비 4.6:1 */ --down: #1f6feb; /* 하락 · 파랑 · 대비 4.6:1 */ --link: #1f6feb; /* 링크 · 데이터 (하락과 동일 토큰) */ --focus: #1f6feb; /* 포커스 링 색(링크색과 통일) */ /* --- 색: 면 · 경계 --- */ --border: #e6e9f1; /* border 1px 단일 (약간 톤업) */ --quiet-bg: #e9eef8; /* card-quiet 배경 · quiet zone (바탕과 구분되게 톤업) */ --page-bg: #ffffff; /* 카드·헤더 표면 — 흰색 유지(바탕 위에서 떠 보이게) */ --page-ground: #f2f5fb; /* body 바탕 — 쿨 톤(순백 지양·색감·깊이, 카드가 떠 보임) */ /* --- box-header 색밴드 7종 (존 대표 카드에만 · 존당 1색) --- */ --band-1: #1f6feb; /* 데이터 · 오늘 해석 */ --band-2: #d23f3f; /* 상승 · 경쟁 */ --band-3: #6b46e5; /* HBM · 기술 */ --band-4: #0f9d8c; /* 회사 · 사업구조 */ --band-5: #c2751a; /* 역사 · 서사 */ --band-6: #3a4a63; /* 글로벌 · 중립 */ --band-7: #6f6f78; /* 기타 · 부속 (muted와 통일·대비 확보) */ /* --- 폰트 --- */ --font-sans: 'Pretendard Variable', Pretendard, system-ui, 'Segoe UI', 'Noto Sans KR', sans-serif; /* ======================================================================== 타이포 8스텝 스케일 — 비율 1.25 모듈러 · 이 밖 크기 신규 금지 아래 순서 = 시각 위계 순서(위=큼 → 아래=작음). 절대 재배치·역전 금지. 각 스텝은 반드시 대응 유틸 .t-* / 변수 var(--fs-*) 로만 소비한다. ------------------------------------------------------------------------ STEP 변수 역할 기본 크기 1 --fs-display 데스크톱 히어로 타이틀 44px 2 --fs-h1 페이지 타이틀 28→33px (clamp) 3 --fs-h2 섹션 제목 22→26px (clamp) 4 --fs-h3 카드 헤더 19→21px (clamp) 5 --fs-body 본문 (18/1.8 고정 하한) 18px 6 --fs-small 부연 14→15px (clamp) 7 --fs-label 라벨 · 칩 · 밴드 14px 8 --fs-caption 캡션 · 출처 · 갱신시각 13px ======================================================================== */ --fs-display: 44px; --fs-h1: clamp(28px, 5vw, 33px); --fs-h2: clamp(22px, 3vw, 26px); --fs-h3: clamp(19px, 2vw, 21px); --fs-body: clamp(18px, 2vw, 19px); /* 본문 하한 18px 고정(가독성 최우선 지시) */ --fs-small: clamp(14px, 1.5vw, 15px); --fs-label: 14px; --fs-caption: 13px; /* 부속(스케일 외 특수 목적) — 위계 스텝 아님. 지표 강조 전용. --fs-metric 은 h2~h3 사이 크기이나 '위계'가 아니라 '숫자 강조'용도이므로 8스텝과 분리해 별도 표기한다. 신규 목적 확장 금지. */ --fs-metric: 24px; /* 큰 지표 전용(.num-metric) */ /* --- 라인하이트 토큰(리듬 통일) --- */ --lh-body: 1.8; /* 본문(롱폼 가독성) */ --lh-tight: 1.28; /* 대제목 */ --lh-heading: 1.4; /* 소제목 · 라벨 */ /* --- 간격 3단 (flat gap 폐기 · zone 그룹핑) --- */ --gap-zone: 40px; /* 존(zone) 사이 (32→40, 숨쉬기) */ --gap-card: 18px; /* 같은 존 내 카드 사이 (14→18) */ --gap-inner: 12px; /* 카드 내부 블록 사이 (10→12) */ --space-section: 64px; /* H2 섹션 단위 큰 여백 (48→64, 섹션 간 확실히 분리) */ /* --- 반경 3단만 --- */ --radius-card: 16px; --radius-chip: 999px; --radius-mini: 10px; /* --- 그림자 1종 --- */ --shadow: 0 1px 3px rgba(22, 23, 28, 0.06), 0 8px 24px rgba(22, 23, 28, 0.06); /* --- 페이지 골격 폭 4종 --- */ --w-hub: 1060px; /* A 홈 허브 · C 데이터 위젯 · D 리스트 */ --w-longform: 720px; /* B 롱폼 기사 · 측정폭(약 66자) */ } /* --------------------------------------------------------------------------- [02] 베이스 — 리셋 보강 · body · 한국어 keep-all · 링크 (파일은 발행 시 최소 CSS 리셋 위에 얹힌다는 전제) ------------------------------------------------------------------------ */ html { -webkit-text-size-adjust: 100%; } /* 상단 불필요 여백 제거 — 첫 요소가 곧바로 붙게(모바일 우선) */ body { margin: 0; } .site-header + * { margin-top: 0; } /* 헤더 바로 다음 블록 위 여백 0 */ body { font-family: var(--font-sans); font-size: var(--fs-body); /* 본문 기본 18px */ line-height: var(--lh-body); /* 1.8 */ color: var(--text-body); background: var(--page-ground); /* 바탕은 미세 쿨 톤 · 카드는 흰색으로 대비 */ font-variant-numeric: tabular-nums; /* 전역 숫자 정렬 통일 */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* 한국어 어절 쪼개짐 방지 — :lang(ko) 스코프(영어판 제외) */ :lang(ko) { word-break: keep-all; overflow-wrap: break-word; } a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; } a:hover { text-decoration-thickness: 2px; } /* 접근성 — 키보드 포커스 가시화(전역). 마우스 클릭엔 링 미표시. */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; } /* 포커스 링이 밴드/카드 라운드를 넘지 않게 개별 보정 */ .chip:focus-visible, .list-more > summary:focus-visible { outline-offset: 3px; } /* 스크린리더 전용(시각 숨김) — 접근성 라벨 */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------------- [02b] 공용 헤더 · 사이트 nav — ★ 모바일 햄버거(가로스크롤 완전 금지) ★ ---------------------------------------------------------------------------- 지난 실패 1) 모바일 nav 가로스크롤 → 이번엔: ≤768px : 햄버거 버튼(터치 44px+) 탭 → 세로 접힘 드롭다운(순수 CSS checkbox 해킹, JS 없이 동작). 링크는 세로 스택(가로 스크롤 0). ≥769px : 가로 배치. 햄버거 버튼·체크박스 숨김. 접근성: 버튼에 aria-expanded 를 JS로 토글(선택). CSS만으로도 열림/닫힘 동작하며, 체크박스는 sr-only + focus-visible 로 키보드 접근 보장. 상단 불필요 여백 제거: 헤더는 상단 첫 요소이므로 위 여백 0. ------------------------------------------------------------------------ */ .site-header { border-bottom: 1px solid var(--border); background: var(--page-bg); position: sticky; top: 0; z-index: 50; } .site-header__inner { max-width: var(--w-hub); margin-inline: auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; /* 상단 여백은 min-height로만(불필요 margin 0) */ } /* 브랜드 로고(텍스트) — 역할=라벨보다 강한 워드마크 */ .site-brand { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.02em; color: var(--text-strong); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; /* 터치 타깃 */ } .site-brand:hover { text-decoration: none; } /* nav 토글 체크박스(시각 숨김·키보드 접근 유지) */ .nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; } /* 햄버거 버튼(라벨) — 터치 44px+ */ .nav-burger { display: inline-flex; /* 모바일 기본 노출 */ align-items: center; justify-content: center; gap: 8px; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--radius-mini); background: var(--page-bg); color: var(--text-strong); cursor: pointer; flex: 0 0 auto; } /* 3선 아이콘 — 순수 CSS(이모지 금지) */ .nav-burger__bars, .nav-burger__bars::before, .nav-burger__bars::after { content: ""; display: block; width: 20px; height: 2px; background: var(--text-strong); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } .nav-burger__bars { position: relative; } .nav-burger__bars::before { position: absolute; top: -6px; } .nav-burger__bars::after { position: absolute; top: 6px; } /* 열림 상태: 3선 → X */ .nav-toggle:checked ~ .site-header__inner .nav-burger__bars { background: transparent; } .nav-toggle:checked ~ .site-header__inner .nav-burger__bars::before { top: 0; transform: rotate(45deg); } .nav-toggle:checked ~ .site-header__inner .nav-burger__bars::after { top: 0; transform: rotate(-45deg); } /* 키보드 포커스 링을 버튼에 표시(체크박스는 숨김이므로) */ .nav-toggle:focus-visible ~ .site-header__inner .nav-burger { outline: 3px solid var(--focus); outline-offset: 2px; } /* nav 링크 목록 */ .site-nav { display: flex; align-items: center; gap: 4px; } .site-nav a { display: inline-flex; align-items: center; min-height: 44px; /* 터치 타깃 */ padding: 0 12px; border-radius: var(--radius-mini); font-size: var(--fs-label); font-weight: 600; color: var(--text-body); text-decoration: none; white-space: nowrap; } .site-nav a:hover { background: var(--quiet-bg); text-decoration: none; } .site-nav a[aria-current="page"] { color: var(--link); } /* --- 모바일(≤768px): 햄버거 + 세로 드롭다운(가로 스크롤 0) --- */ @media (max-width: 768px) { .site-header__inner { padding: 0 16px; min-height: 52px; } .nav-burger { display: inline-flex; } .site-nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; /* 세로 스택 → 가로 스크롤 원천 차단 */ align-items: stretch; gap: 0; background: var(--page-bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); padding: 8px 16px 12px; /* 닫힘 상태: 접힘 */ display: none; } .site-nav a { width: 100%; min-height: 48px; /* 모바일 터치 여유 */ padding: 0 12px; border-radius: var(--radius-mini); } .site-nav a + a { border-top: 1px solid var(--border); border-radius: 0; } /* 체크박스 열림 → 드롭다운 표시 */ .nav-toggle:checked ~ .site-header__inner .site-nav { display: flex; } } /* --- 데스크톱(≥769px): 가로 배치 · 햄버거 숨김 --- */ @media (min-width: 769px) { .nav-burger { display: none; } .site-nav { position: static; display: flex; } } /* --------------------------------------------------------------------------- [03] 타이포 8스텝 유틸 클래스 — ★ 페이지가 크기를 소비하는 유일 경로 ★ 위계 순서대로 정의(display > h1 > h2 > h3 > body > small > label > caption). px 를 페이지에 직접 쓰지 말고 반드시 이 클래스(또는 var(--fs-*))를 쓴다. ------------------------------------------------------------------------ */ /* STEP 1 — 데스크톱 히어로 타이틀 */ .t-display { font-size: var(--fs-display); line-height: 1.14; font-weight: 800; letter-spacing: -0.025em; color: var(--text-strong); } /* STEP 2 — 페이지 타이틀(H1) */ .t-h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 800; letter-spacing: -0.02em; color: var(--text-strong); } /* STEP 3 — 섹션 제목(H2) */ .t-h2 { font-size: var(--fs-h2); line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; color: var(--text-strong); } /* STEP 4 — 카드 헤더(H3) */ .t-h3 { font-size: var(--fs-h3); line-height: 1.45; font-weight: 700; color: var(--text-strong); } /* STEP 5 — 본문(Body · 18/1.8) */ .t-body { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; color: var(--text-body); } /* STEP 6 — 부연(Small) */ .t-small { font-size: var(--fs-small); line-height: 1.65; font-weight: 400; color: var(--text-medium); } /* STEP 7 — 라벨(Label) */ .t-label { font-size: var(--fs-label); line-height: var(--lh-heading); font-weight: 600; letter-spacing: 0.01em; color: var(--text-medium); } /* STEP 8 — 캡션 · 출처(Caption) */ .t-caption { font-size: var(--fs-caption); line-height: 1.5; font-weight: 400; color: var(--text-muted); } /* 문단 리듬 유틸 — 본문 블록 간 수직 리듬 통일(px 금지, em 기반). .t-body 문단을 세로로 쌓을 때 문단 간격을 넉넉히. */ .prose > * + * { margin-top: 1.2em; } .prose p { margin: 0; } /* --------------------------------------------------------------------------- [04] 숫자 전용 — tabular-nums 강제 · 큰 지표 · min-width 시프트 방지 ------------------------------------------------------------------------ */ .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .num-metric { font-size: var(--fs-metric); line-height: 1.2; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; display: inline-block; min-width: 4ch; /* 자리수 변동 레이아웃 시프트 방지 */ } /* 등락 — 색 + 부호 병기 (초록 금지 · 접근성). 부호는 HTML에서 병기 */ .val-up { color: var(--up); } /* 상승 · 빨강 · 앞에 + */ .val-down { color: var(--down); } /* 하락 · 파랑 · 앞에 − */ .val-flat { color: var(--text-medium); } /* --------------------------------------------------------------------------- [05] 존(zone) · 간격 3단 — flat gap 폐기,
그룹핑 ------------------------------------------------------------------------ */ .zone { display: flex; flex-direction: column; gap: var(--gap-card); /* 같은 존 내 카드 사이 */ } .zone + .zone { margin-top: var(--gap-zone); /* 존 사이 */ } /* 존 내부 카드 블록 간격 유틸 */ .gap-zone { gap: var(--gap-zone); } .gap-card { gap: var(--gap-card); } .gap-inner { gap: var(--gap-inner); } /* 페이지 골격 폭 컨테이너 — 모바일 우선 상하 여백(작게 시작). 상단 여백은 헤더가 이미 경계를 주므로 과하지 않게 20px. */ .page-hub { max-width: var(--w-hub); margin-inline: auto; padding: 20px; /* 상하좌우 모바일 우선 */ } .page-longform { max-width: var(--w-longform); margin-inline: auto; padding: 20px; } /* H2 섹션 단위 큰 여백 */ .section { margin-top: var(--space-section); } .section:first-child { margin-top: 0; } /* --------------------------------------------------------------------------- [06] 카드 3무게 (동일무게 금지) .card-hero — 무테 · 그림자 강 · 헤더 없음 .card-standard — border 1px + shadow + 헤더밴드 .card-quiet — 무테 · 배경 #f6f7fb · 텍스트 제목만 반경 카드 16 · border 1px #e8eaf0 · shadow 1종 ------------------------------------------------------------------------ */ .card-hero { border: 0; border-radius: var(--radius-card); background: var(--page-bg); box-shadow: var(--shadow); padding: 28px; display: flex; flex-direction: column; gap: var(--gap-inner); } .card-standard { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--page-bg); box-shadow: var(--shadow); overflow: hidden; /* box-header 밴드 라운드 정합 */ display: flex; flex-direction: column; } .card-standard > .card-pad { padding: 20px; display: flex; flex-direction: column; gap: var(--gap-inner); } .card-quiet { border: 0; border-radius: var(--radius-card); background: var(--quiet-bg); box-shadow: none; padding: 18px 20px; display: flex; flex-direction: column; gap: var(--gap-inner); } /* 카드 조용한 제목 — 역할=라벨이므로 .t-label 과 동일 스텝(STEP 7) */ .card-quiet > .card-title { font-size: var(--fs-label); font-weight: 600; color: var(--text-medium); } /* box-header 밴드 — 존 대표 카드에만(존당 1색). 색 띠 금지 예외 지점. .card-standard 상단 헤더 영역. 좌측 3px 세로 악센트 아닌 헤더 배경 밴드. 역할=라벨(STEP 7). 배경이 채도색이므로 흰 글자로 대비 확보. */ .box-header { padding: 12px 20px; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.01em; color: #ffffff; display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* 7색 변형 — 존당 1색만 부여 */ .box-header.band-1 { background: var(--band-1); } .box-header.band-2 { background: var(--band-2); } .box-header.band-3 { background: var(--band-3); } .box-header.band-4 { background: var(--band-4); } .box-header.band-5 { background: var(--band-5); } .box-header.band-6 { background: var(--band-6); } .box-header.band-7 { background: var(--band-7); } /* 연속 standard 3개 초과 금지 — 시각 가드(4번째부터 경고 아웃라인, 개발 편의). 실사용 시 마크업으로 회피. */ .zone > .card-standard:nth-of-type(n + 4) { outline: 2px dashed var(--up); outline-offset: -2px; } /* --------------------------------------------------------------------------- [07] .article-body — 롱폼 읽기(B 유형 · 720px) 본문 18/1.8 · 측정폭 720 · 헤딩 상단 여백 넉넉히(리듬). 헤딩은 .t-h2 / .t-h3 와 동일 스텝을 재사용(위계 통일). ------------------------------------------------------------------------ */ .article-body { max-width: var(--w-longform); /* 약 66자 측정폭 */ margin-inline: auto; font-size: var(--fs-body); /* 18px */ line-height: var(--lh-body); /* 1.8 */ color: var(--text-body); } .article-body p { margin-bottom: 1.5em; } .article-body h2 { font-size: var(--fs-h2); /* STEP 3 재사용 */ line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; color: var(--text-strong); margin-top: 2.4em; margin-bottom: 0.8em; } .article-body h3 { font-size: var(--fs-h3); /* STEP 4 재사용 */ line-height: 1.45; font-weight: 700; color: var(--text-strong); margin-top: 1.6em; margin-bottom: 0.6em; } .article-body strong { font-weight: 700; } /* 색 강조 금지 */ .article-body a { color: var(--link); text-decoration: underline; } .article-body ul, .article-body ol { margin: 0 0 1.5em 1.2em; } .article-body li { margin-bottom: 0.5em; } /* --------------------------------------------------------------------------- [07b] .interp — 해석/설명 블렛 컴포넌트 ★ 문단 벽글 전면 대체 ★ ---------------------------------------------------------------------------- 지난 실패 2) 해석·설명 벽글 → 이번엔 모든 해석/설명을 반드시 이 구조로: [1줄 핵심 판정 .interp-verdict (볼드·H3급)] ← 결론 먼저(위→아래 하강) + [ul.interp-list > li 3~5개 스캔 블렛] (핵심 숫자 .strong-data 볼드) 긴 문단 금지. 큰 개념(판정)→근거(블렛) 순. 줄바꿈·여백 충분. ------------------------------------------------------------------------ */ .interp { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--page-bg); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; } .interp.is-quiet { /* 조용한 변형(배경만, 무테) */ border: 0; background: var(--quiet-bg); } /* [1줄 핵심 판정] — H3급 볼드. 결론을 맨 위에. */ .interp-verdict { font-size: var(--fs-h3); /* STEP 4 재사용(카드 헤더급) */ line-height: 1.55; /* 모바일 가독성 — 행간 여유 */ font-weight: 700; color: var(--text-strong); margin: 0; } /* 요약/변화 라벨 — 문장 위 독립 줄(모바일 가독성). 역할=라벨(STEP 7) */ .interp-tag { display: block; /* 인라인 아님 — 문장 앞에서 따로 위로 */ width: fit-content; font-size: var(--fs-label); font-weight: 700; color: var(--link); background: var(--brand-soft, #eef1fb); border-radius: 6px; padding: 2px 9px; margin-bottom: 8px; } /* [스캔 블렛 목록] — 3~5개. 커스텀 마커(이모지 금지). */ .interp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; /* 블렛 사이 넉넉한 여백 */ } .interp-list > li { position: relative; padding-left: 18px; font-size: var(--fs-body); /* 본문 18px */ line-height: 1.7; color: var(--text-body); } /* 마커 — 파란 사각 점(색 띠 아님, 인라인 마커). */ .interp-list > li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 2px; background: var(--link); } /* 블렛 안 핵심 숫자 강조 — 볼드 + 색 없음(등락 아닌 일반 수치). */ .strong-data { font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; } /* 등락 수치를 블렛에 쓸 땐 .strong-data 대신 .val-up/.val-down(부호 병기). */ /* --------------------------------------------------------------------------- [08] .tone-intro — 입문 변형(/company · 입문 spoke) 모노 스펙표 → 서술형 · 히어로 블랙밴드 생략 · H2 하단 여백 확대 · 숫자는 표 대신 인라인. 색 · 타이포 스케일 · 토큰 동일(밀도만 낮춤). ------------------------------------------------------------------------ */ .tone-intro .article-body h2 { margin-bottom: 2.0em; } .tone-intro .hero-band { display: none; } /* 실리콘 블랙밴드 생략 */ .tone-intro .card-standard { /* datasheet 강도 낮춤 */ border-color: var(--border); box-shadow: none; } .tone-intro .spec-inline { /* 표 대신 인라인 문장 */ display: block; font-size: var(--fs-body); color: var(--text-body); } .tone-intro .spec-inline .num-metric { font-size: var(--fs-body); /* 큰 지표 톤 다운(스텝 내) */ font-weight: 700; } /* --------------------------------------------------------------------------- [09] .chip — 칩/필터 pill (반경 999px) · 역할=라벨(STEP 7) ------------------------------------------------------------------------ */ .chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-chip); background: var(--page-bg); font-size: var(--fs-label); font-weight: 600; color: var(--text-medium); cursor: pointer; white-space: nowrap; } /* 활성은 색상만 변경 — padding/border/margin/transform 불변(카테고리 버튼 규칙) */ .chip.is-active { color: #ffffff; background: var(--link); border-color: var(--link); } /* --------------------------------------------------------------------------- [10] 광고 자리표시 — .ad-slot (점선 · 로컬 시연용, 실광고 대신 위치만) 존 경계에만 · 위아래 24px 여백 · 빈슬롯 collapse · 역할=캡션(STEP 8) ------------------------------------------------------------------------ */ .ad-slot { margin-block: 24px; /* 존 경계 위아래 여백 */ min-height: 90px; border: 1px dashed var(--text-muted); border-radius: var(--radius-mini); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: var(--fs-caption); letter-spacing: 0.04em; background: var(--quiet-bg); } .ad-slot::before { content: attr(data-label); } /* "AD-LEAD" 등 라벨 */ .ad-slot.is-empty { /* collapse: label·margin 접힘 */ display: none; margin-block: 0; } .ad-lead {} .ad-flow {} .ad-foot {} .ad-rail { display: none; } /* 모바일 none · 데스크톱 ≥1280 노출 */ /* --------------------------------------------------------------------------- [11] 리스트 더보기 — details/summary (D 유형: 상위 10 + 더보기) 역할=라벨(STEP 7) ------------------------------------------------------------------------ */ .list-more { border-top: 1px solid var(--border); margin-top: var(--gap-card); } .list-more > summary { list-style: none; cursor: pointer; padding: 12px 0; font-size: var(--fs-label); font-weight: 600; color: var(--link); text-align: center; } .list-more > summary::-webkit-details-marker { display: none; } .list-more > summary::after { content: " 더보기"; } .list-more[open] > summary::after { content: " 접기"; } /* --------------------------------------------------------------------------- [12] 반응형 — 모바일 카드 폭 · 타이포는 clamp가 처리 · 광고 레일 주의: 미디어쿼리 안에서도 새 px font-size 신규 금지. --fs-* 재정의만 허용 (스케일의 원천을 조정하는 것이므로 단일 소스 원칙 위배 아님). ------------------------------------------------------------------------ */ @media (max-width: 768px) { .card-hero { padding: 18px; } .card-standard > .card-pad { padding: 16px; } .card-quiet { padding: 14px 16px; } .box-header { padding: 10px 16px; } .page-hub, .page-longform { padding: 16px; } /* 모바일 상하좌우 축소 */ .interp { padding: 16px; } :root { --gap-zone: 30px; /* 모바일: 데스크톱보다 절제(24→30) */ --gap-card: 16px; --space-section: 46px; /* 모바일 섹션 여백(36→46, 과하지 않게) */ --fs-display: 34px; /* 모바일 디스플레이 축소(스케일 원천 조정) */ } } /* 데스크톱 사이드레일 광고(≥1280px) */ @media (min-width: 1280px) { .ad-rail { display: flex; } } /* 접근성 — 모션 최소화(재미 컴포넌트 정적 폴백은 각 페이지에서 처리) */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* 접근성 — 고대비 모드에서 경계·포커스 보존 */ @media (prefers-contrast: more) { :root { --border: #b9bcc7; --text-medium: #45454f; --text-muted: #55555f; } :focus-visible { outline-width: 4px; } } /* ============================================================================ END design-system.css ========================================================================= */