/* 트렌드코어 라이트 테마 — 컨설팅 페이지에서 확정된 팔레트를 전 페이지에 입힌다 (2026-09-11)
*
* 쓰는 법: 페이지 의 자기 스타일 **뒤에** 이 파일을 링크한다.
*
*
* 라이트가 기본이고, 를 붙이면 옛 어두운 화면으로 돌아간다.
* (반대로 만들면 셸 JS 가 도는 순간까지 어두운 화면이 한 번 스친다)
*
* 페이지마다 변수 이름이 조금씩 다르다(--text-soft / --soft / --muted 등).
* 그래서 여기서는 **쓰이는 이름을 전부** 다시 정의한다. 없는 이름은 그냥 무시된다.
*/
@font-face { font-family:"A2Z"; src:url("/assets/fonts/A2Z-3Light.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"A2Z"; src:url("/assets/fonts/A2Z-4Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"A2Z"; src:url("/assets/fonts/A2Z-5Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"A2Z"; src:url("/assets/fonts/A2Z-7Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"A2Z"; src:url("/assets/fonts/A2Z-8ExtraBold.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:"A2Z"; src:url("/assets/fonts/A2Z-9Black.woff2") format("woff2"); font-weight:900; font-style:normal; font-display:swap; }
/* ─────────────────────────────────────────────────────────────────────
1. 색·서체 — 페이지가 쓰는 변수를 통째로 갈아끼운다
───────────────────────────────────────────────────────────────────── */
html:not(.tc-dark) {
/* 바탕 */
--bg: #FAFAF9;
--bg-deep: #FFFFFF;
--bg-elev: #FFFFFF;
--elev: #FFFFFF;
--panel: #FFFFFF;
--surface: #FFFFFF;
--bg-card: #FFFFFF;
--card: #FFFFFF;
/* 선 */
--border: #EBEBE8;
--border-bright: #D8D8D3;
--line: #EBEBE8;
/* 글자 */
--text: #111110;
--text-soft: #55554F;
--soft: #55554F;
--muted: #55554F;
--text-dim: #8A8A85;
--dim: #8A8A85;
/* 강조색 — 레퍼런스는 색을 쓰지 않는다. 전부 먹/회색 계열로 눌러 단색으로 간다.
상태 표시(성공·경고·오류)만 색을 남긴다 */
--violet: #111110;
--violet-dim: rgba(17, 17, 16, .18);
--purple: #111110;
--cyan: #111110;
--cyan-dim: rgba(17, 17, 16, .18);
--teal: #111110;
--teal-glow: rgba(17, 17, 16, .12);
--blue: #111110;
--pink: #111110;
--ax: #111110;
--accent: #111110;
/* 상태색만 남긴다 — 성공/경고/오류는 색이 정보다 */
--green: #047857;
--amber: #B45309;
--red: #DC2626;
--danger: #DC2626;
/* 서체 — 표시·본문·라벨 전부 A2Z 로 통일한다 */
--display: "A2Z","Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif;
--mono: "A2Z","Pretendard Variable",Pretendard,-apple-system,"Malgun Gothic",sans-serif;
color-scheme: light;
}
/* ─────────────────────────────────────────────────────────────────────
2. 색을 직접 박아둔 곳 — 변수로 안 따라오는 것들
───────────────────────────────────────────────────────────────────── */
html:not(.tc-dark) body {
background: var(--bg);
color: var(--text);
font-family: var(--display);
-webkit-font-smoothing: antialiased;
}
/* 어두운 배경을 직접 칠한 블록 */
html:not(.tc-dark) [style*="#05070D"],
html:not(.tc-dark) [style*="#0B0E17"] { background-color: var(--bg) !important; }
/* 흰색 반투명 테두리·바탕 → 밝은 회색 선으로 */
html:not(.tc-dark) .card,
html:not(.tc-dark) .panel,
html:not(.tc-dark) .box,
html:not(.tc-dark) .tile {
background: var(--bg-card);
border-color: var(--border);
}
/* 어두운 화면용 그림자는 밝은 바탕에서 얼룩이 된다 */
html:not(.tc-dark) * { text-shadow: none; }
/* 어두운 배경 위 밝은 글씨를 전제로 한 혼합 모드 해제 */
html:not(.tc-dark) [style*="mix-blend-mode: screen"],
html:not(.tc-dark) [style*="mix-blend-mode:screen"] { mix-blend-mode: normal !important; }
/* 별·격자 같은 어두운 배경 장식은 밝은 바탕에서 지저분하다 */
html:not(.tc-dark) canvas.stars,
html:not(.tc-dark) .stars,
html:not(.tc-dark) .starfield,
html:not(.tc-dark) .grid-bg,
html:not(.tc-dark) .noise { opacity: .10; }
/* ─────────────────────────────────────────────────────────────────────
3. 타이포 — 컨설팅 페이지 규칙
───────────────────────────────────────────────────────────────────── */
html:not(.tc-dark) h1,
html:not(.tc-dark) h2,
html:not(.tc-dark) h3,
html:not(.tc-dark) h4 {
font-family: var(--display);
letter-spacing: -.02em;
text-wrap: balance;
}
html:not(.tc-dark) h1 { font-weight: 900; }
html:not(.tc-dark) h2 { font-weight: 800; }
/* 영문 대문자 라벨 — 컨설팅의 .label 규격 */
html:not(.tc-dark) .label,
html:not(.tc-dark) .eyebrow,
html:not(.tc-dark) .section-label {
font-family: var(--display);
font-weight: 700;
letter-spacing: .18em;
color: var(--text-dim);
}
/* ─────────────────────────────────────────────────────────────────────
4. 버튼 — 검정 알약이 기본, 보조는 흰 알약에 테두리
───────────────────────────────────────────────────────────────────── */
html:not(.tc-dark) .btn-primary,
html:not(.tc-dark) .cta-primary,
html:not(.tc-dark) .btn.primary {
background: var(--text);
color: var(--bg);
border: 1px solid var(--text);
box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}
html:not(.tc-dark) .btn-primary:hover,
html:not(.tc-dark) .cta-primary:hover,
html:not(.tc-dark) .btn.primary:hover {
background: #000;
box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
}
html:not(.tc-dark) .btn-ghost,
html:not(.tc-dark) .cta-ghost,
html:not(.tc-dark) .btn.ghost,
html:not(.tc-dark) .btn-secondary {
background: #fff;
color: var(--text);
border: 1px solid var(--border-bright);
box-shadow: none;
}
html:not(.tc-dark) .btn-ghost:hover,
html:not(.tc-dark) .cta-ghost:hover,
html:not(.tc-dark) .btn.ghost:hover,
html:not(.tc-dark) .btn-secondary:hover { background: #F4F4F2; }
/* ─────────────────────────────────────────────────────────────────────
5. A/B 전환 버튼 — 임시 장치. 확정되면 이 블록과 .tc-dark 규칙을 걷어낸다
───────────────────────────────────────────────────────────────────── */
.tc-ab {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 99999;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 10px 18px;
border: 1px solid rgba(0, 0, 0, .14);
border-radius: 999px;
background: #111110;
color: #FAFAF9;
font: 700 13px/1 "A2Z", Pretendard, sans-serif;
letter-spacing: .02em;
cursor: pointer;
box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}
.tc-ab:hover { transform: translateY(-1px); }
html.tc-dark .tc-ab {
background: #FAFAF9;
color: #111110;
border-color: rgba(255, 255, 255, .2);
}
@media (max-width: 560px) { .tc-ab { right: 12px; bottom: 12px; padding: 9px 14px; font-size: 12px; } }
/* ─────────────────────────────────────────────────────────────────────
6. 어두운 화면 전제로 만든 장식들 — 밝은 바탕에서는 걷어내거나 눌러준다
───────────────────────────────────────────────────────────────────── */
/* 보라·시안 번짐 배경(mesh) — 밝은 바탕에서는 사탕색으로 뜬다 */
html:not(.tc-dark) .mesh-bg { display: none; }
/* 떠다니는 입자·별 — 흰 바탕에서는 먼지처럼 보인다 */
html:not(.tc-dark) #particles { opacity: .28; filter: invert(1) grayscale(1); }
/* 히어로 바탕은 컨설팅과 같은 연회색 */
html:not(.tc-dark) .hero { background: var(--bg); }
/* 무지개 그라디언트 글자 — 밝은 바탕에서 시안이 사라진다. 한 색으로 눌러준다 */
html:not(.tc-dark) .hero-title .line-2,
html:not(.tc-dark) .grad-text,
html:not(.tc-dark) .gradient-text {
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: currentColor !important;
color: var(--text) !important;
}
/* 어두운 카드로 칠해둔 패널 → 흰 카드 + 얇은 선 */
html:not(.tc-dark) [class*="card"],
html:not(.tc-dark) [class*="panel"],
html:not(.tc-dark) [class*="box"] {
background-image: none;
}
/* ─────────────────────────────────────────────────────────────────────
7. 전역 헤더 — 컨설팅 페이지의 밝은 헤더를 전 페이지에 그대로
───────────────────────────────────────────────────────────────────── */
html:not(.tc-dark) .tc-shell {
background: rgba(250, 250, 249, .82);
border-bottom: 1px solid var(--border);
}
html:not(.tc-dark) .tc-shell-logo,
html:not(.tc-dark) .tc-shell-menu > li > a,
html:not(.tc-dark) .tc-shell-menu > li > button { color: #111110; }
html:not(.tc-dark) .tc-shell-menu > li > a:hover { color: #000; }
html:not(.tc-dark) .tc-shell-toggle span { background: #111110; }
html:not(.tc-dark) .tc-shell-toggle { border-color: #B9B9B4; }
html:not(.tc-dark) .tc-shell-cta {
background: #111110;
color: #FAFAF9;
border-color: #111110;
min-height: 36px;
padding: 10px 22px;
border-radius: 999px;
font: 600 13px/1.15 var(--display);
letter-spacing: 0;
}
html:not(.tc-dark) .tc-shell-acct .tc-acct-btn { color: #111110; }
html:not(.tc-dark) .tc-bell-btn { color: #55554F; }
/* ─────────────────────────────────────────────────────────────────────
8. 본문 강조·섹션 라벨 — 컨설팅 규칙에 맞춘다
───────────────────────────────────────────────────────────────────── */
/* 본문 속 강조는 무지개 그라디언트다. 밝은 바탕에선 글자가 사라지므로 한 색으로.
단 헤더 로고의 D 그라디언트(.tc-shell-word b)는 건드리지 않는다 */
html:not(.tc-dark) main em,
html:not(.tc-dark) section em,
html:not(.tc-dark) h1 em,
html:not(.tc-dark) h2 em,
html:not(.tc-dark) h3 em,
html:not(.tc-dark) p em {
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: currentColor !important;
color: var(--text) !important;
font-style: normal;
}
/* 섹션 라벨 — 알약 테두리·배경을 걷고 컨설팅의 글자만 남는 라벨로 */
html:not(.tc-dark) .section-tag {
padding: 0;
border: 0;
background: none;
color: var(--text-dim);
font-family: var(--display);
font-size: 12px;
font-weight: 700;
letter-spacing: .18em;
}
/* 코드 주석처럼 생긴 곁라벨들도 같은 규격으로 */
html:not(.tc-dark) .about-side-tag,
html:not(.tc-dark) .value-card-code,
html:not(.tc-dark) .side-tag {
color: var(--text-dim);
font-family: var(--display);
font-weight: 700;
letter-spacing: .18em;
background: none;
border: 0;
padding: 0;
}
/* ─────────────────────────────────────────────────────────────────────
9. 푸터 — 어두운 색이 여러 곳에 직접 박혀 있어 통째로 다시 칠한다
───────────────────────────────────────────────────────────────────── */
html:not(.tc-dark) footer {
background: #F4F4F2 !important;
border-top: 1px solid var(--border);
color: var(--text-soft);
}
html:not(.tc-dark) footer * { color: inherit; }
html:not(.tc-dark) footer a { color: var(--text); text-decoration: none; }
html:not(.tc-dark) footer a:hover { color: #000; text-decoration: underline; }
html:not(.tc-dark) .footer-nav,
html:not(.tc-dark) .footer-details,
html:not(.tc-dark) .footer-biz,
html:not(.tc-dark) .footer-bottom,
html:not(.tc-dark) .footer-meta {
background: transparent !important;
border-color: var(--border) !important;
}
html:not(.tc-dark) .footer-nav { border-bottom: 1px solid var(--border); }
html:not(.tc-dark) .footer-biz-label,
html:not(.tc-dark) .footer-legal,
html:not(.tc-dark) .footer-tag { color: var(--text-dim); }
html:not(.tc-dark) .footer-brand { color: var(--text); }
/* 반투명 어두운 판을 쓰는 다른 구역들도 같이 정리한다 */
html:not(.tc-dark) [class*="footer"] { background-image: none; }
/* 푸터 로고 — 헤더와 같은 규칙(동그란 마크·.ai 없음, 가운데 D 그라디언트) */
html:not(.tc-dark) footer .logo-mark,
html:not(.tc-dark) footer .logo-tag { display: none; }
html:not(.tc-dark) footer .logo {
font: 900 20px/1 var(--display);
letter-spacing: .01em;
color: var(--text);
gap: 0;
}
/* ─────────────────────────────────────────────────────────────────────
10. 배경 효과·마우스 효과 — 레퍼런스에는 없다. 전부 걷어낸다
───────────────────────────────────────────────────────────────────── */
html:not(.tc-dark) #particles,
html:not(.tc-dark) .mesh-bg,
html:not(.tc-dark) .cursor-ring,
html:not(.tc-dark) .cta-glow-wrap::before,
html:not(.tc-dark) .glow,
html:not(.tc-dark) .halo,
html:not(.tc-dark) .orb { display: none !important; }
/* 커서 링을 숨겨도 기본 커서가 사라져 있으면 안 된다 */
html:not(.tc-dark) body { cursor: auto; }
/* 배경은 한 색으로 통일 — 구역마다 다른 반투명 판을 쓰지 않는다 */
html:not(.tc-dark) section,
html:not(.tc-dark) .section,
html:not(.tc-dark) .hero,
html:not(.tc-dark) main { background: var(--bg); }
/* 은은한 빛무리·후광류 그림자 제거 */
html:not(.tc-dark) [class*="glow"],
html:not(.tc-dark) [class*="shine"] { box-shadow: none !important; background-image: none !important; }
/* ─────────────────────────────────────────────────────────────────────
11. 연혁(타임라인) — 레퍼런스의 프로세스 구획 문법으로
"01 — DISCOVERY" 처럼 회색 대문자 라벨 + 얇은 가로선. 색점은 쓰지 않는다
───────────────────────────────────────────────────────────────────── */
html:not(.tc-dark) .timeline {
padding-left: 0;
border-left: 0;
gap: 0;
}
html:not(.tc-dark) .timeline-item {
padding: 26px 0;
border-top: 1px solid var(--border);
}
html:not(.tc-dark) .timeline-item:first-child { border-top: 0; padding-top: 0; }
html:not(.tc-dark) .timeline-item::before { display: none; }
html:not(.tc-dark) .timeline-year {
font-family: var(--display);
font-size: 12px;
font-weight: 700;
letter-spacing: .18em;
color: var(--text-dim);
margin-bottom: 10px;
}
html:not(.tc-dark) .timeline-title {
font-size: 22px;
font-weight: 800;
letter-spacing: -.02em;
color: var(--text);
margin-bottom: 8px;
}
html:not(.tc-dark) .timeline-desc {
font-size: 15.5px;
line-height: 1.75;
color: var(--text-soft);
}
/* 색을 직접 박아둔 잔재들 — 변수로 안 잡히는 rgba 값들 */
html:not(.tc-dark) .mobile-nav-list li a:hover,
html:not(.tc-dark) .mobile-nav-list li a[aria-current="page"] {
color: var(--text);
background: rgba(17, 17, 16, .05);
}
html:not(.tc-dark) .mobile-nav-list li a[aria-current="page"]::before { background: var(--text); }