/*
* FOOREND Global Design System
* foodtrend.news — 라이트 테마 전용
*
* 사용 방법 (각 페이지 에 추가):
*
*
*
*
*
*/
/* ================================================================
1. DESIGN TOKENS (CSS Variables)
================================================================ */
:root {
/* ── 색상 팔레트 ─────────────────────────────────────────────── */
--bg: #FFFFFF;
--bg-soft: #FAFAF8;
--bg-card: #F5F4F0;
--ink: #141414;
--ink-soft: #3a3a3a;
--muted: #7a7a7a;
--border: #E5E3DD;
--border-strong:#1a1a1a;
/* ── 포인트 색상 ─────────────────────────────────────────────── */
--accent: #FF6B1A;
--accent-soft: #FFF4ED;
--accent-deep: #D94F00;
/* ── 카테고리 색상 (Short Report 리포트 뱃지) ────────────────── */
--cat-generation: #E8A87C;
--cat-menu: #C38D9E;
--cat-channel: #5bbf90;
--cat-business: #41B3A3;
--cat-global: #E27D60;
/* ── 폰트 패밀리 ─────────────────────────────────────────────── */
--font-display: 'Fraunces', 'Noto Serif KR', serif;
--font-body: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'IBM Plex Mono', 'Courier New', monospace;
/* ── 레이아웃 ────────────────────────────────────────────────── */
--container-max: 1320px;
--container-narrow: 860px;
--header-h: 64px;
--page-pad-x: 40px;
--page-pad-x-mob: 20px;
/* ── 타이포그래피 스케일 ──────────────────────────────────────── */
--text-xs: 10px;
--text-sm: 12px;
--text-base: 15px;
--text-md: 17px;
--text-lg: 20px;
--text-xl: 24px;
--text-2xl: 32px;
--text-3xl: clamp(32px, 4vw, 52px);
--text-4xl: clamp(40px, 5vw, 64px);
/* ── 반경·그림자 ─────────────────────────────────────────────── */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 100px;
--shadow-card: 0 6px 20px rgba(0, 0, 0, 0.06);
--shadow-accent: 0 10px 32px rgba(255, 107, 26, 0.09);
/* ── 전환 ────────────────────────────────────────────────────── */
--transition: 0.2s ease;
--transition-slow: 0.35s ease;
}
/* ================================================================
2. BASE RESET
================================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
scroll-padding-top: var(--header-h);
overflow-x: hidden;
}
body {
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
}
button {
font-family: inherit;
}
/* ================================================================
3. TYPOGRAPHY
================================================================ */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.03em;
color: var(--ink);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h1 em,
h2 em {
font-style: italic;
font-weight: 400;
color: var(--accent);
}
p {
color: var(--ink-soft);
line-height: 1.7;
}
small {
font-size: var(--text-sm);
color: var(--muted);
}
/* ================================================================
4. LAYOUT — 컨테이너 & 그리드
================================================================ */
/* ── 컨테이너 ─────────────────────────────────────────────────── */
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--page-pad-x);
}
.container-narrow {
max-width: var(--container-narrow);
margin: 0 auto;
padding: 0 var(--page-pad-x);
}
/* 헤더 아래 시작 공간 */
.page-body {
padding-top: var(--header-h);
}
/* ── 그리드 ───────────────────────────────────────────────────── */
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.grid-auto {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
/* ── 섹션 래퍼 ────────────────────────────────────────────────── */
.section {
padding: 64px 0;
}
.section + .section {
border-top: 1px solid var(--border);
}
/* ================================================================
5. COMMON COMPONENTS
================================================================ */
/* ── 섹션 레이블 (모노스페이스 점선 타이틀) ──────────────────── */
.section-label {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.section-label::after {
content: "";
flex: 1;
height: 1px;
background: var(--border);
}
/* ── 카테고리 뱃지 ────────────────────────────────────────────── */
.cat-badge {
display: inline-block;
padding: 3px 10px;
border-radius: var(--radius-pill);
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.5px;
color: #fff;
}
/* ── 타입 태그 (테두리형) ─────────────────────────────────────── */
.type-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--muted);
}
/* ── 카드 ─────────────────────────────────────────────────────── */
.card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 24px;
transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.card:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: var(--shadow-card);
}
.card-soft {
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 32px;
transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.card-soft:hover {
border-color: var(--accent);
background: var(--bg);
transform: translateY(-3px);
box-shadow: var(--shadow-accent);
}
/* ── 버튼 ─────────────────────────────────────────────────────── */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 13px 28px;
background: var(--accent);
color: #fff;
border: none;
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background var(--transition);
}
.btn-primary:hover {
background: var(--accent-deep);
}
.btn-primary:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
background: var(--bg);
color: var(--ink);
border: 1px solid var(--border);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.btn-secondary:hover {
border-color: var(--ink);
background: var(--ink);
color: var(--bg);
}
.btn-mono {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--accent);
text-decoration: none;
transition: gap var(--transition);
}
.btn-mono:hover {
gap: 9px;
}
/* ── 폼 공통 ──────────────────────────────────────────────────── */
.form-input,
.form-textarea,
.form-select {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: 14px;
color: var(--ink);
padding: 11px 13px;
width: 100%;
transition: border-color var(--transition);
}
.form-textarea {
resize: none;
min-height: 100px;
line-height: 1.6;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-label {
display: block;
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 6px;
}
.form-label span { color: var(--accent); margin-left: 3px; }
/* ── 구분선 ───────────────────────────────────────────────────── */
.divider {
border: none;
border-top: 1px solid var(--border);
margin: 0;
}
/* ── 유틸리티 ─────────────────────────────────────────────────── */
.hidden { display: none !important; }
.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;
}
.text-accent { color: var(--accent); }
.text-muted { color: var(--muted); }
.text-mono { font-family: var(--font-mono); }
.text-display{ font-family: var(--font-display); }
/* ================================================================
6. GLOBAL NAVIGATION (헤더)
================================================================ */
.global-nav {
background: var(--bg);
border-bottom: 1px solid var(--border);
height: var(--header-h);
padding: 0 var(--page-pad-x);
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 100;
}
/* 브랜드 로고 */
.brand {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-weight: 800;
font-size: 20px;
letter-spacing: -0.5px;
color: var(--ink);
text-decoration: none;
flex-shrink: 0;
}
.brand-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
}
/* 네비 메뉴 */
.nav-menu {
display: flex;
gap: 28px;
align-items: center;
font-size: 13px;
font-weight: 500;
}
.nav-link {
color: var(--ink-soft);
text-decoration: none;
padding-bottom: 3px;
border-bottom: 1.5px solid transparent;
transition: color var(--transition), border-color var(--transition);
white-space: nowrap;
}
.nav-link:hover {
color: var(--ink);
border-bottom-color: var(--ink);
}
.nav-link.active {
color: var(--ink);
border-bottom-color: var(--accent);
font-weight: 600;
}
/* Short Report 특별 강조 */
.nav-link.nav-highlight {
color: var(--accent);
font-weight: 600;
border-bottom-color: transparent;
}
.nav-link.nav-highlight:hover,
.nav-link.nav-highlight.active {
border-bottom-color: var(--accent);
}
/* 우측 영역 (언어 + 햄버거) */
.nav-right {
display: flex;
align-items: center;
gap: 16px;
flex-shrink: 0;
}
/* 언어 토글 */
.lang-toggle {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.lang-btn {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid var(--ink-soft);
background: transparent;
cursor: pointer;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
color: var(--ink);
letter-spacing: 0.3px;
padding: 0;
line-height: 1;
flex-shrink: 0;
transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.lang-btn:hover {
border-color: var(--ink);
background: var(--bg-soft);
}
.lang-btn.lang-active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
font-weight: 600;
}
.lang-sep { display: none; }
/* 햄버거 버튼 (모바일에서만 표시) */
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 6px 4px;
width: 32px;
height: 32px;
flex-shrink: 0;
}
.nav-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--ink);
border-radius: 1px;
transition: transform 0.25s ease, opacity 0.2s ease;
transform-origin: center;
}
/* 햄버거 → X 전환 */
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ================================================================
7. GLOBAL FOOTER
================================================================ */
.global-footer {
border-top: 1px solid var(--border);
padding: 40px var(--page-pad-x) 32px;
background: var(--bg);
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-bottom: 28px;
}
.footer-link {
display: inline-block;
padding: 6px 14px;
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: var(--radius-md);
font-size: 12px;
font-weight: 500;
color: var(--ink-soft);
text-decoration: none;
transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.footer-link:hover {
border-color: var(--ink);
color: var(--ink);
background: var(--bg);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--muted);
letter-spacing: 0.08em;
text-transform: uppercase;
border-top: 1px solid var(--border);
padding-top: 20px;
}
.footer-bottom a {
color: var(--muted);
text-decoration: none;
}
.footer-bottom a:hover {
color: var(--ink);
}
/* ================================================================
8. RESPONSIVE BREAKPOINTS
================================================================ */
/* ── 1080px: 3열 → 2열 ───────────────────────────────────────── */
@media (max-width: 1080px) {
.grid-3 {
grid-template-columns: repeat(2, 1fr);
}
}
/* ── 768px: 모바일 기준 ──────────────────────────────────────── */
@media (max-width: 768px) {
:root {
--page-pad-x: var(--page-pad-x-mob);
}
.global-nav {
padding: 0 var(--page-pad-x-mob);
height: 56px;
}
.nav-toggle {
display: flex;
}
.nav-menu {
display: none;
position: absolute;
top: 56px;
left: 0;
right: 0;
flex-direction: column;
align-items: flex-start;
gap: 0;
background: var(--bg);
border-bottom: 1px solid var(--border);
padding: 8px 0 16px;
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
z-index: 99;
}
.nav-menu.open {
display: flex;
}
.nav-link {
width: 100%;
padding: 12px var(--page-pad-x-mob);
border-bottom: none;
border-left: 2px solid transparent;
font-size: 14px;
}
.nav-link:hover,
.nav-link.active {
border-bottom: none;
border-left-color: var(--accent);
background: var(--bg-soft);
}
.lang-toggle {
gap: 5px;
}
.grid-2 {
grid-template-columns: 1fr;
}
.section {
padding: 48px 0;
}
.global-footer {
padding: 32px var(--page-pad-x-mob) 24px;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
}
/* ── 540px: 소형 모바일 ───────────────────────────────────────── */
@media (max-width: 540px) {
.grid-3,
.grid-2 {
grid-template-columns: 1fr;
}
h1 { font-size: clamp(26px, 8vw, 36px); }
h2 { font-size: clamp(22px, 6vw, 28px); }
}