/* ==========================================================================
휴먼아크 페이지별 고유 스타일 (Pages)
--------------------------------------------------------------------------
특정 섹션·페이지에만 적용되는 스타일.
시안 B: Cream 베이스 + Navy 텍스트 + Gold 포인트 + 따뜻한 휴머니즘
========================================================================== */
/* ==========================================================================
[HOME] Hero 섹션 — 시안 B
--------------------------------------------------------------------------
- 배경: Cream + 큰 원형 색면 2개 (좌상 Cream-deep / 우하 올리브 그레이)
- 중앙: 가교 SVG (어두운 두 사람 → 빛 흐름 → 골드로 환해짐)
- 하단: 슬로건 + 부제 + CTA 2개
========================================================================== */
.hero {
position: relative;
min-height: calc(100vh - var(--header-height));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--color-cream);
color: var(--color-text);
overflow: hidden;
padding: var(--space-9) 0 var(--space-10);
}
@media (max-width: 768px) {
.hero {
min-height: auto;
padding: var(--space-8) 0 var(--space-9);
}
}
/* --------------------------------------------------------------------
배경 원형 색면 — 세 번째 캡쳐의 시그니처 요소
-------------------------------------------------------------------- */
.hero__decor {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 1;
}
.hero__decor-circle {
position: absolute;
border-radius: 50%;
display: block;
}
/* 좌상단: 옅은 크림 원 (부드러운 강조) */
.hero__decor-circle--top-left {
top: -180px;
left: -180px;
width: 480px;
height: 480px;
background-color: var(--color-cream-deep);
opacity: 0.7;
}
/* 우하단: 올리브 그레이 큰 원 (시각적 무게중심) */
.hero__decor-circle--bottom-right {
bottom: -260px;
right: -200px;
width: 620px;
height: 620px;
background-color: #A6A593;
opacity: 0.55;
}
@media (max-width: 768px) {
.hero__decor-circle--top-left {
width: 280px;
height: 280px;
top: -100px;
left: -100px;
}
.hero__decor-circle--bottom-right {
width: 380px;
height: 380px;
bottom: -180px;
right: -120px;
}
}
/* --------------------------------------------------------------------
가교 SVG (두 사람 + 곡선 + 빛 입자)
-------------------------------------------------------------------- */
.hero__bg {
position: relative;
z-index: 2;
width: 100%;
max-width: 720px;
margin: 0 auto var(--space-7);
display: flex;
align-items: center;
justify-content: center;
padding: 0 var(--space-5);
}
.hero__bg-arc {
width: 100%;
height: auto;
display: block;
}
@media (max-width: 768px) {
.hero__bg {
max-width: 480px;
margin-bottom: var(--space-5);
}
}
@media (max-width: 480px) {
.hero__bg {
max-width: 100%;
}
}
/* --------------------------------------------------------------------
Hero 콘텐츠 (텍스트 + CTA)
-------------------------------------------------------------------- */
.hero__inner {
position: relative;
z-index: 3;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
max-width: 720px;
}
/* --------------------------------------------------------------------
Hero 메인 슬로건
-------------------------------------------------------------------- */
.hero__title {
font-family: var(--font-serif);
font-size: var(--fs-3xl);
font-weight: var(--fw-medium);
line-height: 1.3;
color: var(--color-navy);
letter-spacing: -0.01em;
margin: 0;
animation: heroFadeUp 1s var(--ease-out) 0.4s both;
}
.hero__title-brand {
font-weight: var(--fw-semibold);
color: var(--color-navy);
position: relative;
display: inline-block;
}
/* '휴먼아크' 아래 골드 곡선 — Arc 모티프 미니어처 */
.hero__title-brand::after {
content: '';
position: absolute;
left: -4%;
right: -4%;
bottom: -0.18em;
height: 6px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
/* --------------------------------------------------------------------
Hero 부제 + 태그
-------------------------------------------------------------------- */
.hero__subtitle {
font-size: var(--fs-md);
font-weight: var(--fw-regular);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
max-width: 540px;
margin: var(--space-3) 0 0;
animation: heroFadeUp 1s var(--ease-out) 0.7s both;
}
.hero__tags {
font-size: var(--fs-sm);
font-weight: var(--fw-regular);
letter-spacing: 0.05em;
color: var(--color-text-mute);
margin: 0;
animation: heroFadeUp 1s var(--ease-out) 0.85s both;
}
/* --------------------------------------------------------------------
Hero CTA 버튼 그룹
-------------------------------------------------------------------- */
.hero__cta {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
justify-content: center;
margin-top: var(--space-4);
animation: heroFadeUp 1s var(--ease-out) 1s both;
}
@media (max-width: 480px) {
.hero__cta {
width: 100%;
flex-direction: column;
align-items: stretch;
}
.hero__cta .btn {
width: 100%;
}
}
/* --------------------------------------------------------------------
Hero 스크롤 유도 인디케이터
-------------------------------------------------------------------- */
.hero__scroll {
position: absolute;
bottom: var(--space-5);
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
text-transform: uppercase;
letter-spacing: var(--ls-wider);
color: var(--color-text-mute);
text-decoration: none;
transition: color var(--duration-normal) var(--ease-out);
animation: heroFadeUp 1s var(--ease-out) 1.4s both;
}
.hero__scroll:hover {
color: var(--color-gold-deep);
}
.hero__scroll-line {
display: block;
width: 1px;
height: 32px;
background: linear-gradient(
180deg,
rgba(201, 168, 76, 0.6) 0%,
transparent 100%
);
position: relative;
overflow: hidden;
}
.hero__scroll-line::after {
content: '';
position: absolute;
top: -100%;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 50%;
background-color: var(--color-gold);
animation: scrollLineFlow 2s ease-in-out infinite;
}
@keyframes scrollLineFlow {
0% { top: -100%; opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { top: 100%; opacity: 0; }
}
@media (max-width: 768px) {
.hero__scroll {
display: none;
}
}
/* --------------------------------------------------------------------
Hero 페이드업 애니메이션 (공통)
-------------------------------------------------------------------- */
@keyframes heroFadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ==========================================================================
[HOME] Why 섹션 — '우리는 왜 존재하는가'
--------------------------------------------------------------------------
Hero 다음의 호흡 전환 영역. 사명을 차분히 전달.
- 좌측 텍스트 + 우측 시각 모티프 2단 구성
- 모바일에서는 위아래로 쌓임
========================================================================== */
.why {
/* section--cream 클래스가 배경색 처리 */
position: relative;
overflow: hidden;
}
/* 상단에 옅은 골드 그라데이션 라인 — 섹션 구분 */
.why::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(60%, 400px);
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
var(--color-gold) 50%,
transparent 100%
);
opacity: 0.4;
}
.why__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 6vw, 5rem);
align-items: center;
}
@media (max-width: 960px) {
.why__inner {
grid-template-columns: 1fr;
gap: var(--space-7);
}
}
/* --------------------------------------------------------------------
Why — 좌측 텍스트 영역
-------------------------------------------------------------------- */
.why__content {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
/* eyebrow */
.why__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0;
}
.why__eyebrow-line {
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
/* 타이틀 */
.why__title {
font-family: var(--font-serif);
font-size: var(--fs-3xl);
font-weight: var(--fw-semibold);
line-height: var(--lh-tight);
color: var(--color-navy);
margin: 0;
}
.why__title-accent {
font-style: normal;
color: var(--color-gold-deep);
position: relative;
}
/* '잇는' 아래 미니 가교 곡선 — Hero와 일관성 */
.why__title-accent::after {
content: '';
position: absolute;
left: -4%;
right: -4%;
bottom: -0.12em;
height: 6px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
/* 본문 */
.why__body {
display: flex;
flex-direction: column;
gap: var(--space-4);
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
color: var(--color-text);
}
.why__body p {
margin: 0;
}
.why__body strong {
color: var(--color-navy);
font-weight: var(--fw-semibold);
}
/* 인용구 */
.why__quote {
position: relative;
font-family: var(--font-serif);
font-size: var(--fs-lg);
line-height: var(--lh-relaxed);
color: var(--color-navy);
font-style: italic;
font-weight: var(--fw-regular);
padding: var(--space-4) 0 var(--space-4) var(--space-5);
border-left: 3px solid var(--color-gold);
margin: var(--space-3) 0;
}
.why__quote strong {
font-weight: var(--fw-semibold);
color: var(--color-navy);
font-style: normal;
}
/* 더 보기 링크 */
.why__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
align-self: flex-start;
padding: var(--space-2) 0;
border-bottom: 1px solid transparent;
transition: all var(--duration-normal) var(--ease-out);
}
.why__link:hover {
color: var(--color-navy);
border-bottom-color: var(--color-gold);
}
.why__link span {
transition: transform var(--duration-normal) var(--ease-out);
}
.why__link:hover span {
transform: translateX(4px);
}
/* --------------------------------------------------------------------
Why — 우측 시각 모티프
-------------------------------------------------------------------- */
.why__visual {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.why__visual-img {
width: 100%;
max-width: 500px;
height: auto;
}
@media (max-width: 960px) {
.why__visual {
order: -1; /* 모바일에서 시각 모티프를 위로 */
}
.why__visual-img {
max-width: 360px;
}
}
/* ==========================================================================
[HOME] Works 섹션 — 4대 사업 카드
--------------------------------------------------------------------------
모듈형 카드 구조: works.json 기반으로 자동 생성.
2x2 그리드 (데스크탑) / 1열 (모바일).
========================================================================== */
.works {
position: relative;
background-color: #FFFFFF;
}
/* 섹션 상단 미세한 골드 그라데이션 (Why와의 구분) */
.works::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(201, 168, 76, 0.2) 50%,
transparent 100%
);
}
.works__inner {
position: relative;
}
/* --------------------------------------------------------------------
섹션 헤더 (eyebrow + 타이틀 + 부제)
-------------------------------------------------------------------- */
.works__header {
text-align: center;
margin-bottom: var(--space-9);
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.works__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.works__eyebrow::before,
.works__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.works__title {
font-family: var(--font-serif);
font-size: var(--fs-3xl);
font-weight: var(--fw-semibold);
line-height: var(--lh-tight);
color: var(--color-navy);
margin: 0 0 var(--space-4) 0;
letter-spacing: -0.01em;
}
.works__subtitle {
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
margin: 0;
}
/* --------------------------------------------------------------------
카드 그리드 (2x2)
-------------------------------------------------------------------- */
.works__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-5);
}
@media (max-width: 768px) {
.works__grid {
grid-template-columns: 1fr;
gap: var(--space-4);
}
}
/* --------------------------------------------------------------------
사업 카드 (work-card)
-------------------------------------------------------------------- */
.work-card {
position: relative;
display: flex;
flex-direction: column;
padding: var(--space-6);
background-color: var(--color-cream-soft);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
text-decoration: none;
color: inherit;
overflow: hidden;
transition: all var(--duration-normal) var(--ease-out);
/* 페이드인 초기 상태 */
opacity: 0;
transform: translateY(20px);
}
.work-card.is-visible {
opacity: 1;
transform: translateY(0);
}
/* 호버 효과 — 살짝 떠오르고 골드 외곽선 */
.work-card:hover {
transform: translateY(-4px);
border-color: var(--color-gold);
box-shadow: var(--shadow-lg);
background-color: #FFFFFF;
}
.work-card:hover .work-card__title {
color: var(--color-gold-deep);
}
/* featured 카드 (1순위 — 후원 매칭) */
.work-card--featured {
background: linear-gradient(
135deg,
var(--color-cream-soft) 0%,
#FFFFFF 50%,
var(--color-cream-soft) 100%
);
border-color: var(--color-gold-soft);
}
.work-card--featured::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(
90deg,
var(--color-gold) 0%,
var(--color-gold-soft) 50%,
var(--color-gold) 100%
);
}
/* --------------------------------------------------------------------
카드 상단: 번호 + 상태 뱃지
-------------------------------------------------------------------- */
.work-card__top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-5);
}
.work-card__number {
font-family: var(--font-display);
font-size: var(--fs-2xl);
font-weight: var(--fw-light);
font-style: italic;
color: var(--color-gold);
line-height: 1;
letter-spacing: -0.02em;
}
/* 상태 뱃지 */
.work-card__status {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 4px 12px;
font-size: 11px;
font-weight: var(--fw-medium);
font-family: var(--font-display);
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: var(--radius-full);
border: 1px solid;
white-space: nowrap;
}
.work-card__status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: currentColor;
}
/* 진행 중 — 골드 펄스 */
.work-card__status--progress {
background-color: var(--color-gold-mist);
color: var(--color-gold-deep);
border-color: var(--color-gold);
}
.work-card__status--progress .work-card__status-dot {
animation: workCardPulse 2s ease-in-out infinite;
}
/* 준비 중 — 점선 외곽선 */
.work-card__status--ready {
background-color: transparent;
color: var(--color-text-mute);
border-color: var(--color-text-mute);
border-style: dashed;
}
@keyframes workCardPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.8); }
}
/* --------------------------------------------------------------------
카드 본문: 아이콘 + 카테고리 + 제목 + 설명
-------------------------------------------------------------------- */
.work-card__body {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.work-card__icon {
width: 56px;
height: 56px;
color: var(--color-navy);
margin-bottom: var(--space-2);
transition: color var(--duration-normal) var(--ease-out);
}
.work-card:hover .work-card__icon {
color: var(--color-gold-deep);
}
.work-card__category {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
margin: 0;
}
.work-card__title {
font-family: var(--font-serif);
font-size: var(--fs-xl);
font-weight: var(--fw-semibold);
line-height: var(--lh-tight);
color: var(--color-navy);
margin: 0;
transition: color var(--duration-normal) var(--ease-out);
letter-spacing: -0.01em;
}
.work-card__summary {
font-size: var(--fs-base);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
margin: var(--space-2) 0 0 0;
}
/* --------------------------------------------------------------------
카드 하단: 링크 라벨 + 화살표
-------------------------------------------------------------------- */
.work-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--color-line);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-gold-deep);
transition: border-color var(--duration-normal) var(--ease-out);
}
.work-card:hover .work-card__footer {
border-color: var(--color-gold-soft);
}
.work-card__arrow {
display: inline-block;
font-size: var(--fs-md);
transition: transform var(--duration-normal) var(--ease-out);
}
.work-card:hover .work-card__arrow {
transform: translateX(4px);
}
/* ==========================================================================
[HOME] Ecosystem 섹션 — 휴먼아크 생태계 다이어그램
--------------------------------------------------------------------------
중앙 휴먼아크 허브 + 4방향 외곽 노드(다이아몬드 배치).
골드 가교 곡선이 4방향으로 뻗어나가며, 곡선을 따라 빛 입자가 양방향 흐름.
모바일에서는 다이아몬드 → 세로 1열로 자동 전환.
========================================================================== */
.ecosystem {
position: relative;
background-color: var(--color-cream);
overflow: hidden;
}
.ecosystem::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(60%, 400px);
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
var(--color-gold) 50%,
transparent 100%
);
opacity: 0.4;
}
.ecosystem__inner {
position: relative;
}
/* --------------------------------------------------------------------
섹션 헤더
-------------------------------------------------------------------- */
.ecosystem__header {
text-align: center;
margin-bottom: var(--space-9);
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.ecosystem__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.ecosystem__eyebrow::before,
.ecosystem__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.ecosystem__title {
font-family: var(--font-serif);
font-size: var(--fs-3xl);
font-weight: var(--fw-semibold);
line-height: var(--lh-tight);
color: var(--color-navy);
margin: 0 0 var(--space-4) 0;
letter-spacing: -0.01em;
}
.ecosystem__subtitle {
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
margin: 0;
}
/* --------------------------------------------------------------------
다이어그램 영역 (중앙 허브 + 4방향 노드)
-------------------------------------------------------------------- */
.ecosystem__diagram {
position: relative;
width: 100%;
max-width: 1100px;
margin: 0 auto;
aspect-ratio: 5 / 4;
/* 다이아몬드 배치를 위한 고정 비율 영역 */
}
@media (max-width: 768px) {
.ecosystem__diagram {
aspect-ratio: auto;
/* 모바일에서는 비율 해제 — 자연스럽게 늘어남 */
}
}
/* 배경 가교 곡선 SVG */
.ecosystem__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.ecosystem__bg-img,
.ecosystem__bg-svg {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
@media (max-width: 768px) {
.ecosystem__bg {
display: none;
/* 모바일에서는 배경 곡선 숨김 — 1열 레이아웃에서는 의미 없음 */
}
}
/* --------------------------------------------------------------------
중앙 허브 (휴먼아크)
-------------------------------------------------------------------- */
.ecosystem__hub {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
width: 220px;
height: 220px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-5);
background: var(--color-navy);
border: 2px solid var(--color-gold);
border-radius: 50%;
text-align: center;
box-shadow:
0 0 0 8px rgba(201, 168, 76, 0.15),
0 0 0 16px rgba(201, 168, 76, 0.08),
var(--shadow-xl);
/* 호흡하는 듯한 펄스 */
animation: hubPulse 4s ease-in-out infinite;
}
@keyframes hubPulse {
0%, 100% {
box-shadow:
0 0 0 8px rgba(201, 168, 76, 0.15),
0 0 0 16px rgba(201, 168, 76, 0.08),
var(--shadow-xl);
}
50% {
box-shadow:
0 0 0 12px rgba(201, 168, 76, 0.2),
0 0 0 24px rgba(201, 168, 76, 0.1),
var(--shadow-xl);
}
}
.ecosystem__hub-mark {
width: 56px;
height: 56px;
margin-bottom: var(--space-2);
}
.ecosystem__hub-name {
font-family: var(--font-serif);
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
color: var(--color-cream);
margin: 0;
letter-spacing: -0.01em;
}
.ecosystem__hub-name-en {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0;
}
.ecosystem__hub-tagline {
font-size: 11px;
color: rgba(248, 245, 238, 0.7);
margin: var(--space-1) 0 0 0;
font-style: italic;
}
@media (max-width: 768px) {
.ecosystem__hub {
position: relative;
top: auto;
left: auto;
transform: none;
margin: 0 auto var(--space-7);
width: 200px;
height: 200px;
}
}
/* --------------------------------------------------------------------
외곽 노드 컨테이너
-------------------------------------------------------------------- */
.ecosystem__nodes {
position: absolute;
inset: 0;
z-index: 2;
}
@media (max-width: 768px) {
.ecosystem__nodes {
position: relative;
inset: auto;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
}
/* --------------------------------------------------------------------
외곽 노드 카드
-------------------------------------------------------------------- */
.eco-node {
position: absolute;
width: 280px;
padding: var(--space-5);
background-color: #FFFFFF;
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
gap: var(--space-3);
box-shadow: var(--shadow-md);
transition: all var(--duration-normal) var(--ease-out);
opacity: 0;
transform: translateY(20px) scale(0.95);
}
.eco-node.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
}
.eco-node:hover {
transform: translateY(-6px) scale(1.02);
border-color: var(--color-gold);
box-shadow: var(--shadow-xl);
}
/* 4방향 위치 — 다이아몬드 배치 */
.eco-node--top-left {
top: 0;
left: 0;
}
.eco-node--top-right {
top: 0;
right: 0;
}
.eco-node--bottom-left {
bottom: 0;
left: 0;
}
.eco-node--bottom-right {
bottom: 0;
right: 0;
}
/* 모바일 — 1열 정렬 */
@media (max-width: 768px) {
.eco-node {
position: relative;
top: auto;
left: auto;
right: auto;
bottom: auto;
width: 100%;
max-width: 480px;
margin: 0 auto;
}
}
/* --------------------------------------------------------------------
노드 내부 요소
-------------------------------------------------------------------- */
.eco-node__icon-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: var(--radius-md);
background-color: var(--color-cream-soft);
transition: all var(--duration-normal) var(--ease-out);
}
.eco-node:hover .eco-node__icon-wrap {
background-color: var(--color-gold-mist);
}
.eco-node__icon {
width: 28px;
height: 28px;
color: var(--color-navy);
transition: color var(--duration-normal) var(--ease-out);
}
.eco-node:hover .eco-node__icon {
color: var(--color-gold-deep);
}
.eco-node__body {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.eco-node__category {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
margin: 0;
}
.eco-node__name {
font-family: var(--font-serif);
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0;
letter-spacing: -0.01em;
}
.eco-node__name-en {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-style: italic;
color: var(--color-text-mute);
margin: 0;
letter-spacing: 0.05em;
}
.eco-node__description {
font-size: var(--fs-sm);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
margin: var(--space-2) 0 0 0;
}
.eco-node__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid var(--color-line);
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
transition: border-color var(--duration-normal) var(--ease-out);
}
.eco-node:hover .eco-node__footer {
border-color: var(--color-gold-soft);
}
.eco-node__arrow {
display: inline-block;
font-size: var(--fs-md);
transition: transform var(--duration-normal) var(--ease-out);
}
.eco-node:hover .eco-node__arrow {
transform: translate(2px, -2px);
}
/* ==========================================================================
[HOME] Network 섹션 — 제휴 병의원 지도 미리보기
--------------------------------------------------------------------------
좌측 한국지도 미리보기 + 우측 카운터·클리닉 리스트.
진짜 인터랙티브 지도는 /network.html 서브 페이지에서.
========================================================================== */
.network {
position: relative;
background-color: #FFFFFF;
}
.network::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(201, 168, 76, 0.2) 50%,
transparent 100%
);
}
.network__inner {
position: relative;
}
/* --------------------------------------------------------------------
섹션 헤더 (좌측 정렬)
-------------------------------------------------------------------- */
.network__header {
text-align: center;
margin-bottom: var(--space-9);
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.network__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.network__eyebrow::before,
.network__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.network__title {
font-family: var(--font-serif);
font-size: var(--fs-3xl);
font-weight: var(--fw-semibold);
line-height: var(--lh-tight);
color: var(--color-navy);
margin: 0 0 var(--space-4) 0;
letter-spacing: -0.01em;
}
.network__subtitle {
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
margin: 0;
}
/* --------------------------------------------------------------------
본문 그리드 — 좌측 지도 + 우측 카운터
-------------------------------------------------------------------- */
.network__body {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
max-width: 1100px;
margin: 0 auto;
}
@media (max-width: 960px) {
.network__body {
grid-template-columns: 1fr;
gap: var(--space-7);
}
}
/* --------------------------------------------------------------------
좌측 — 한국지도 미리보기
-------------------------------------------------------------------- */
.network__map {
position: relative;
width: 100%;
max-width: 520px;
margin: 0 auto;
}
.network__map-svg {
width: 100%;
height: auto;
display: block;
}
/* 지도 위 점들 영역 */
.network__map-dots {
pointer-events: none;
}
/* 활성 점 (실제 제휴) — JS에서 그려짐 */
.map-dot--active {
cursor: pointer;
pointer-events: auto;
}
/* placeholder 점 — JS에서 그려짐 */
.map-dot--placeholder {
pointer-events: auto;
opacity: 0.7;
transition: opacity var(--duration-fast) var(--ease-out);
}
.map-dot--placeholder:hover {
opacity: 1;
}
/* 지도 하단 캡션 */
.network__map-caption {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
margin-top: var(--space-4);
font-family: var(--font-display);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-text-mute);
}
.network__map-legend {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.network__map-legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.network__map-legend-dot--active {
background-color: var(--color-gold);
box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.3);
}
.network__map-legend-dot--placeholder {
background-color: transparent;
border: 1px dashed rgba(11, 31, 58, 0.4);
}
/* --------------------------------------------------------------------
우측 — 카운터 + 클리닉 리스트 + CTA
-------------------------------------------------------------------- */
.network__sidebar {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
/* 카운터 박스 */
.network__counter {
background: linear-gradient(
135deg,
var(--color-cream-soft) 0%,
#FFFFFF 100%
);
border: 1px solid var(--color-gold-soft);
border-radius: var(--radius-lg);
padding: var(--space-6);
position: relative;
overflow: hidden;
}
/* 카운터 상단 골드 라인 */
.network__counter::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(
90deg,
var(--color-gold) 0%,
var(--color-gold-soft) 50%,
var(--color-gold) 100%
);
}
.network__counter-label {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
margin: 0 0 var(--space-3) 0;
}
.network__counter-numbers {
display: flex;
align-items: baseline;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.network__counter-current {
font-family: var(--font-display);
font-size: clamp(3rem, 6vw, 4.5rem);
font-style: italic;
font-weight: var(--fw-semibold);
color: var(--color-gold-deep);
line-height: 1;
letter-spacing: -0.02em;
}
.network__counter-divider {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: var(--fw-light);
color: var(--color-text-mute);
line-height: 1;
}
.network__counter-total {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: var(--fw-regular);
color: var(--color-text-soft);
line-height: 1;
}
.network__counter-meta {
font-size: var(--fs-sm);
color: var(--color-text-soft);
line-height: var(--lh-relaxed);
margin: 0;
}
.network__counter-meta strong {
color: var(--color-navy);
font-weight: var(--fw-semibold);
}
/* --------------------------------------------------------------------
클리닉 리스트
-------------------------------------------------------------------- */
.network__clinics {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.network__clinics-title {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
margin: 0;
}
.network__clinics-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.network-clinic {
display: flex;
align-items: flex-start;
gap: var(--space-4);
padding: var(--space-4);
background-color: var(--color-cream-soft);
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
transition: all var(--duration-normal) var(--ease-out);
}
.network-clinic:hover {
border-color: var(--color-gold-soft);
background-color: #FFFFFF;
}
.network-clinic__num {
font-family: var(--font-display);
font-size: var(--fs-lg);
font-style: italic;
font-weight: var(--fw-light);
color: var(--color-gold);
line-height: 1;
flex-shrink: 0;
letter-spacing: -0.02em;
}
.network-clinic__body {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.network-clinic__name {
font-family: var(--font-serif);
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0;
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.network-clinic__badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
font-family: var(--font-display);
font-size: 10px;
font-weight: var(--fw-medium);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-gold-deep);
background-color: var(--color-gold-mist);
border: 1px solid var(--color-gold);
border-radius: var(--radius-full);
}
.network-clinic__meta {
font-size: var(--fs-sm);
color: var(--color-text-soft);
margin: 0;
}
.network-clinics__empty {
padding: var(--space-5);
text-align: center;
font-style: italic;
color: var(--color-text-mute);
border: 1px dashed var(--color-line);
border-radius: var(--radius-md);
}
/* --------------------------------------------------------------------
CTA 영역
-------------------------------------------------------------------- */
.network__cta {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-top: var(--space-2);
}
.network__cta .btn {
width: 100%;
}
.network__cta-note {
font-size: var(--fs-xs);
color: var(--color-text-mute);
text-align: center;
margin: 0;
font-style: italic;
}
/* ==========================================================================
[HOME] News 섹션 — 최근 소식
--------------------------------------------------------------------------
좌측 큰 카드 (featured) + 우측 작은 카드 3개 그리드.
data/news.json 기반. 새 콘텐츠 추가 시 JSON만 수정.
========================================================================== */
.news {
position: relative;
background-color: var(--color-cream);
}
.news::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(60%, 400px);
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
var(--color-gold) 50%,
transparent 100%
);
opacity: 0.4;
}
.news__inner {
position: relative;
}
/* --------------------------------------------------------------------
섹션 헤더
-------------------------------------------------------------------- */
.news__header {
text-align: center;
margin-bottom: var(--space-9);
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.news__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.news__eyebrow::before,
.news__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.news__title {
font-family: var(--font-serif);
font-size: var(--fs-3xl);
font-weight: var(--fw-semibold);
line-height: var(--lh-tight);
color: var(--color-navy);
margin: 0 0 var(--space-4) 0;
letter-spacing: -0.01em;
}
.news__subtitle {
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
margin: 0;
}
/* --------------------------------------------------------------------
본문 그리드 — 좌측 큰 카드 + 우측 작은 카드 3개
-------------------------------------------------------------------- */
.news__body {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: var(--space-5);
align-items: stretch;
}
@media (max-width: 960px) {
.news__body {
grid-template-columns: 1fr;
gap: var(--space-5);
}
}
.news__featured {
display: flex;
}
.news__list {
display: grid;
grid-template-rows: repeat(3, 1fr);
gap: var(--space-4);
}
@media (max-width: 540px) {
.news__list {
grid-template-rows: auto;
gap: var(--space-3);
}
}
/* --------------------------------------------------------------------
카드 공통 베이스
-------------------------------------------------------------------- */
.news-card {
position: relative;
display: flex;
flex-direction: column;
background-color: #FFFFFF;
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
text-decoration: none;
color: inherit;
overflow: hidden;
transition: all var(--duration-normal) var(--ease-out);
opacity: 0;
transform: translateY(20px);
}
.news-card.is-visible {
opacity: 1;
transform: translateY(0);
}
.news-card:not(.news-card--ready):hover {
transform: translateY(-4px);
border-color: var(--color-gold);
box-shadow: var(--shadow-lg);
}
/* 준비 중 카드 — 비활성 느낌 */
.news-card--ready {
cursor: default;
opacity: 0.7;
background-color: var(--color-cream-soft);
}
.news-card--ready.is-visible {
opacity: 0.85;
}
/* --------------------------------------------------------------------
큰 카드 (Featured) — 좌측
-------------------------------------------------------------------- */
.news-card--featured {
flex: 1;
padding: var(--space-7);
background: linear-gradient(
135deg,
#FFFFFF 0%,
var(--color-cream-soft) 100%
);
border-color: var(--color-gold-soft);
min-height: 360px;
}
.news-card--featured::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(
180deg,
var(--color-gold) 0%,
var(--color-gold-soft) 50%,
var(--color-gold) 100%
);
}
.news-card--featured .news-card__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-5);
}
.news-card__category {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
}
.news-card--featured .news-card__body {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.news-card--featured .news-card__icon {
width: 56px;
height: 56px;
color: var(--color-navy);
margin-bottom: var(--space-3);
transition: color var(--duration-normal) var(--ease-out);
}
.news-card--featured:not(.news-card--ready):hover .news-card__icon {
color: var(--color-gold-deep);
}
.news-card--featured .news-card__title {
font-family: var(--font-serif);
font-size: var(--fs-2xl);
font-weight: var(--fw-semibold);
line-height: var(--lh-tight);
color: var(--color-navy);
margin: 0;
letter-spacing: -0.01em;
transition: color var(--duration-normal) var(--ease-out);
}
.news-card--featured:not(.news-card--ready):hover .news-card__title {
color: var(--color-gold-deep);
}
.news-card--featured .news-card__summary {
font-size: var(--fs-base);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
margin: 0;
}
.news-card--featured .news-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--color-line);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-gold-deep);
}
.news-card--featured .news-card__arrow {
display: inline-block;
font-size: var(--fs-md);
transition: transform var(--duration-normal) var(--ease-out);
}
.news-card--featured:not(.news-card--ready):hover .news-card__arrow {
transform: translate(2px, -2px);
}
/* --------------------------------------------------------------------
작은 카드 (Small) — 우측
-------------------------------------------------------------------- */
.news-card--small {
padding: var(--space-4) var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.news-card--small .news-card__header {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.news-card--small .news-card__type-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
background-color: var(--color-cream-soft);
color: var(--color-navy);
flex-shrink: 0;
transition: all var(--duration-normal) var(--ease-out);
}
.news-card--small:not(.news-card--ready):hover .news-card__type-icon {
background-color: var(--color-gold-mist);
color: var(--color-gold-deep);
}
.news-card--small .news-card__type-icon svg {
width: 18px;
height: 18px;
}
.news-card__type {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
flex: 1;
}
.news-card__title-small {
font-family: var(--font-serif);
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
line-height: var(--lh-tight);
color: var(--color-navy);
margin: var(--space-2) 0 0 0;
letter-spacing: -0.01em;
transition: color var(--duration-normal) var(--ease-out);
}
.news-card--small:not(.news-card--ready):hover .news-card__title-small {
color: var(--color-gold-deep);
}
.news-card__category-small {
font-size: var(--fs-sm);
color: var(--color-text-soft);
margin: 0;
}
.news-card__footer-small {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-top: auto;
padding-top: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-gold-deep);
}
.news-card--small:not(.news-card--ready):hover .news-card__arrow {
transform: translate(2px, -2px);
}
/* --------------------------------------------------------------------
상태 뱃지 (큰 카드 + 작은 카드 공통)
-------------------------------------------------------------------- */
.news-card__status {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 3px 10px;
font-size: 10px;
font-weight: var(--fw-medium);
font-family: var(--font-display);
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: var(--radius-full);
border: 1px solid;
white-space: nowrap;
}
.news-card__status-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background-color: currentColor;
}
.news-card__status--active {
background-color: var(--color-gold-mist);
color: var(--color-gold-deep);
border-color: var(--color-gold);
}
.news-card__status--active .news-card__status-dot {
animation: newsPulse 2s ease-in-out infinite;
}
.news-card__status--ready {
background-color: transparent;
color: var(--color-text-mute);
border-color: var(--color-text-mute);
border-style: dashed;
}
@keyframes newsPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.8); }
}
/* ==========================================================================
[HOME] CTA 섹션 — 후원·참여 안내 (메인 페이지 마지막)
--------------------------------------------------------------------------
Hero와 같은 Navy 배경으로 시작과 끝이 호응하는 시각적 마무리.
3가지 길 카드: 복지 현장 / 사회공헌 기업 / 한 사람의 마음
========================================================================== */
.cta {
position: relative;
background-color: var(--color-navy);
color: var(--color-text-on-navy);
overflow: hidden;
padding: clamp(5rem, 10vw, 8rem) 0;
}
/* Hero와 비슷한 미세한 그라데이션 — 호흡하는 깊이감 */
.cta::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(
ellipse at 50% 0%,
rgba(201, 168, 76, 0.1) 0%,
transparent 60%
),
radial-gradient(
ellipse at 50% 100%,
rgba(11, 31, 58, 0.6) 0%,
transparent 70%
);
pointer-events: none;
}
/* 상단에 옅은 골드 가교 라인 — 푸터로 이어지는 시각적 연결 */
.cta::after {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(60%, 500px);
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
var(--color-gold) 50%,
transparent 100%
);
opacity: 0.5;
}
.cta__inner {
position: relative;
z-index: 2;
}
/* --------------------------------------------------------------------
메시지 영역 (상단)
-------------------------------------------------------------------- */
.cta__message {
text-align: center;
max-width: 800px;
margin: 0 auto var(--space-9);
}
.cta__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.cta__eyebrow::before,
.cta__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.cta__title {
font-family: var(--font-serif);
font-size: clamp(2rem, 5vw, 3.25rem);
font-weight: var(--fw-medium);
line-height: var(--lh-tight);
color: var(--color-cream);
margin: 0 0 var(--space-5) 0;
letter-spacing: -0.01em;
}
.cta__title-accent {
font-style: normal;
color: var(--color-gold);
position: relative;
display: inline-block;
}
/* '함께해 주십시오' 아래 미니 가교 곡선 — 브랜드 일관성 */
.cta__title-accent::after {
content: '';
position: absolute;
left: -3%;
right: -3%;
bottom: -0.12em;
height: 8px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
.cta__subtitle {
font-family: var(--font-serif);
font-size: clamp(1rem, 2vw, 1.25rem);
font-style: italic;
line-height: var(--lh-relaxed);
color: rgba(248, 245, 238, 0.85);
margin: 0;
font-weight: var(--fw-regular);
}
/* --------------------------------------------------------------------
3가지 길 카드 그리드
-------------------------------------------------------------------- */
.cta__paths {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
max-width: 1100px;
margin: 0 auto;
}
@media (max-width: 960px) {
.cta__paths {
grid-template-columns: 1fr;
gap: var(--space-4);
}
}
/* --------------------------------------------------------------------
각 길 카드
-------------------------------------------------------------------- */
.cta-path {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-6);
background: rgba(248, 245, 238, 0.04);
border: 1px solid rgba(248, 245, 238, 0.12);
border-radius: var(--radius-lg);
text-decoration: none;
color: inherit;
overflow: hidden;
transition: all var(--duration-normal) var(--ease-out);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.cta-path:hover {
transform: translateY(-4px);
background: rgba(248, 245, 238, 0.08);
border-color: var(--color-gold);
box-shadow:
0 0 0 1px rgba(201, 168, 76, 0.3),
0 16px 40px rgba(0, 0, 0, 0.3);
}
/* 카드 상단 골드 라인 */
.cta-path::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: var(--color-gold);
transition: width var(--duration-normal) var(--ease-out);
}
.cta-path:hover::before {
width: 80%;
}
/* 아이콘 영역 */
.cta-path__icon-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: var(--radius-md);
background: rgba(201, 168, 76, 0.1);
margin-bottom: var(--space-3);
transition: all var(--duration-normal) var(--ease-out);
}
.cta-path:hover .cta-path__icon-wrap {
background: rgba(201, 168, 76, 0.2);
transform: scale(1.05);
}
.cta-path__icon {
width: 28px;
height: 28px;
color: var(--color-gold);
}
/* 텍스트 영역 */
.cta-path__category {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold);
margin: 0;
}
.cta-path__title {
font-family: var(--font-serif);
font-size: var(--fs-xl);
font-weight: var(--fw-semibold);
line-height: var(--lh-tight);
color: var(--color-cream);
margin: 0;
letter-spacing: -0.01em;
}
.cta-path__description {
font-size: var(--fs-base);
line-height: var(--lh-relaxed);
color: rgba(248, 245, 238, 0.7);
margin: 0;
flex: 1;
}
/* 푸터 영역 (행동 라벨 + 화살표) */
.cta-path__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-top: var(--space-3);
padding-top: var(--space-4);
border-top: 1px solid rgba(248, 245, 238, 0.1);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-gold);
transition: border-color var(--duration-normal) var(--ease-out);
}
.cta-path:hover .cta-path__footer {
border-color: rgba(201, 168, 76, 0.3);
}
.cta-path__arrow {
display: inline-block;
font-size: var(--fs-md);
transition: transform var(--duration-normal) var(--ease-out);
}
.cta-path:hover .cta-path__arrow {
transform: translateX(4px);
}
/* --------------------------------------------------------------------
하단 인용구 — 인사말 마지막 문장 메아리
-------------------------------------------------------------------- */
.cta__quote {
text-align: center;
margin-top: var(--space-9);
padding-top: var(--space-7);
position: relative;
}
/* 인용구 위 짧은 골드 라인 */
.cta__quote::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 1px;
background: var(--color-gold);
opacity: 0.5;
}
.cta__quote-text {
font-family: var(--font-serif);
font-size: clamp(1.125rem, 2vw, 1.375rem);
font-style: italic;
line-height: var(--lh-relaxed);
color: rgba(248, 245, 238, 0.85);
margin: 0 0 var(--space-3) 0;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.cta__quote-text strong {
font-style: normal;
font-weight: var(--fw-semibold);
color: var(--color-gold);
}
.cta__quote-author {
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
letter-spacing: var(--ls-wide);
color: rgba(248, 245, 238, 0.5);
margin: 0;
}
/* ==========================================================================
[ABOUT] 우리의 이야기 페이지
--------------------------------------------------------------------------
인사말 + 두 분 약력 + 회사 정보. 4개 섹션 구성.
========================================================================== */
/* --------------------------------------------------------------------
브레드크럼 (현재 위치 표시)
-------------------------------------------------------------------- */
.breadcrumb {
margin-bottom: var(--space-7);
}
.breadcrumb__list {
display: flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-text-mute);
list-style: none;
padding: 0;
margin: 0;
}
.breadcrumb__list li:not(:last-child)::after {
content: '/';
margin-left: var(--space-2);
color: var(--color-gold);
opacity: 0.5;
}
.breadcrumb__list a {
color: var(--color-text-soft);
transition: color var(--duration-fast) var(--ease-out);
}
.breadcrumb__list a:hover {
color: var(--color-gold-deep);
}
.breadcrumb__list li[aria-current="page"] {
color: var(--color-navy);
}
/* --------------------------------------------------------------------
About Hero — 페이지 첫 화면
-------------------------------------------------------------------- */
.about-hero {
position: relative;
background-color: var(--color-cream);
padding: var(--space-9) 0 var(--space-9);
text-align: center;
overflow: hidden;
}
/* 배경 미세한 그라데이션 */
.about-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(
ellipse at center top,
rgba(201, 168, 76, 0.08) 0%,
transparent 60%
);
pointer-events: none;
}
/* 하단 골드 가교 곡선 장식 */
.about-hero::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: min(60%, 500px);
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
var(--color-gold) 50%,
transparent 100%
);
opacity: 0.4;
}
.about-hero__inner {
position: relative;
z-index: 2;
}
.about-hero .breadcrumb {
display: flex;
justify-content: center;
}
.about-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.about-hero__eyebrow-line {
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.about-hero__title {
font-family: var(--font-serif);
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: var(--fw-medium);
line-height: var(--lh-tight);
color: var(--color-navy);
margin: 0 0 var(--space-3) 0;
letter-spacing: -0.02em;
}
.about-hero__title-accent {
font-style: normal;
color: var(--color-gold-deep);
position: relative;
display: inline-block;
}
/* '이웃사촌' 아래 가교 곡선 */
.about-hero__title-accent::after {
content: '';
position: absolute;
left: -3%;
right: -3%;
bottom: -0.12em;
height: 10px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
.about-hero__subtitle {
font-family: var(--font-display);
font-size: var(--fs-md);
font-style: italic;
color: var(--color-gold-deep);
margin: 0;
letter-spacing: 0.02em;
}
/* --------------------------------------------------------------------
인사말 본문 (Greeting)
-------------------------------------------------------------------- */
.greeting {
position: relative;
}
.greeting__inner {
max-width: 760px;
}
.greeting__body {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.greeting__paragraph {
font-family: var(--font-sans);
font-size: clamp(1rem, 1.6vw, 1.125rem);
line-height: 2;
color: var(--color-text);
letter-spacing: 0.005em;
margin: 0;
}
.greeting__paragraph--final {
margin-top: var(--space-4);
}
.greeting__highlight {
font-weight: var(--fw-semibold);
color: var(--color-navy);
background: linear-gradient(
180deg,
transparent 0%,
transparent 65%,
rgba(201, 168, 76, 0.18) 65%,
rgba(201, 168, 76, 0.18) 95%,
transparent 95%
);
padding: 0 2px;
}
/* 핵심 인용구 */
.greeting__quote {
position: relative;
padding: var(--space-6) var(--space-5);
margin: var(--space-5) 0;
text-align: center;
border-top: 1px solid var(--color-gold);
border-bottom: 1px solid var(--color-gold);
}
.greeting__quote::before,
.greeting__quote::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 8px;
background-color: var(--color-gold);
border-radius: 50%;
}
.greeting__quote::before { top: -4px; }
.greeting__quote::after { bottom: -4px; }
.greeting__quote p {
font-family: var(--font-serif);
font-size: clamp(1.25rem, 2.4vw, 1.625rem);
font-style: italic;
line-height: 1.7;
color: var(--color-navy);
margin: 0;
font-weight: var(--fw-regular);
}
/* 서명 영역 */
.greeting__signature {
margin-top: var(--space-9);
padding-top: var(--space-7);
text-align: right;
border-top: 1px solid var(--color-line);
}
.greeting__signature-message {
font-family: var(--font-serif);
font-size: clamp(1.125rem, 2vw, 1.375rem);
font-style: italic;
line-height: 1.7;
color: var(--color-navy);
margin: 0 0 var(--space-5) 0;
}
.greeting__signature-message strong {
font-style: normal;
font-weight: var(--fw-semibold);
color: var(--color-gold-deep);
}
.greeting__signature-title {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-style: italic;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-text-mute);
margin: 0 0 var(--space-2) 0;
}
.greeting__signature-name {
font-family: var(--font-serif);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: var(--fw-semibold);
color: var(--color-navy);
letter-spacing: 0.4em;
margin: 0;
display: inline-block;
padding-bottom: var(--space-2);
border-bottom: 2px solid var(--color-gold);
}
@media (max-width: 640px) {
.greeting__signature {
text-align: center;
}
}
/* --------------------------------------------------------------------
두 분 약력 카드 (Founders)
-------------------------------------------------------------------- */
.founders {
position: relative;
}
.founders__inner {
position: relative;
}
.founders__header {
text-align: center;
margin-bottom: var(--space-9);
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.founders__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.founders__eyebrow::before,
.founders__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.founders__title {
font-family: var(--font-serif);
font-size: var(--fs-3xl);
font-weight: var(--fw-semibold);
line-height: var(--lh-tight);
color: var(--color-navy);
margin: 0 0 var(--space-4) 0;
letter-spacing: -0.01em;
}
.founders__subtitle {
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
margin: 0;
}
.founders__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
max-width: 1100px;
margin: 0 auto;
}
@media (max-width: 900px) {
.founders__grid {
grid-template-columns: 1fr;
gap: var(--space-5);
}
}
/* 약력 카드 */
.founder-card {
display: flex;
flex-direction: column;
background-color: #FFFFFF;
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
padding: var(--space-6);
transition: all var(--duration-normal) var(--ease-out);
position: relative;
overflow: hidden;
}
.founder-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--color-gold-soft);
}
/* 대표 카드 — 약간 강조 */
.founder-card--main {
background: linear-gradient(
135deg,
#FFFFFF 0%,
var(--color-cream-soft) 100%
);
border-color: var(--color-gold-soft);
}
.founder-card--main::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(
90deg,
var(--color-gold) 0%,
var(--color-gold-soft) 50%,
var(--color-gold) 100%
);
}
/* 일러스트 사진 영역 — 세로 타원형 마스크 */
.founder-card__portrait {
width: 180px;
height: 220px; /* 세로로 살짝 더 길게 → 타원 형태 */
margin: 0 auto var(--space-5);
border-radius: 50% / 60%; /* 세로로 긴 타원 */
overflow: hidden;
background-color: var(--color-cream-soft);
border: 1.5px solid var(--color-gold);
box-shadow: 0 4px 16px rgba(11, 31, 58, 0.08);
position: relative;
}
.founder-card__portrait-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* 두 분 얼굴 크기·위치 균등화
- 두 일러스트 규격이 다름 (이홍락 894x1115 / 신형주 581x770)
- 신형주 원장 일러스트는 얼굴이 사진 위쪽 35% 지점에 위치하고
가운까지 보여 잘린 영역이 더 넓음 → 얼굴이 위쪽에 오도록 보정
- 두 분 얼굴이 타원 가운데 살짝 위쪽에 같은 크기로 오도록 조정 */
.founder-card__portrait-img--leehl {
object-position: center 42%;
transform: scale(1.0);
}
.founder-card__portrait-img--shinhj {
object-position: center 25%;
transform: scale(1.05);
}
/* 옛 SVG 모노그램 잔존 스타일 (호환성 유지) */
.founder-card__portrait svg {
width: 100%;
height: 100%;
}
@media (max-width: 480px) {
.founder-card__portrait {
width: 140px;
height: 172px;
}
}
/* 본문 */
.founder-card__body {
text-align: center;
display: flex;
flex-direction: column;
gap: var(--space-3);
flex: 1;
}
.founder-card__role {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
margin: 0;
}
.founder-card__name {
font-family: var(--font-serif);
font-size: var(--fs-2xl);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0;
letter-spacing: 0.05em;
display: flex;
flex-direction: column;
gap: 2px;
}
.founder-card__name-en {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-style: italic;
font-weight: var(--fw-regular);
color: var(--color-text-mute);
letter-spacing: var(--ls-wide);
text-transform: none;
}
/* 약력 리스트 */
.founder-card__careers {
list-style: none;
padding: var(--space-4) 0;
margin: var(--space-3) 0;
border-top: 1px solid var(--color-line);
border-bottom: 1px solid var(--color-line);
display: flex;
flex-direction: column;
gap: var(--space-3);
text-align: left;
}
.founder-card__careers li {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: var(--fs-sm);
line-height: 1.6;
color: var(--color-text);
}
.founder-card__career-tag {
flex-shrink: 0;
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
font-style: italic;
color: var(--color-gold-deep);
padding-top: 2px;
letter-spacing: 0.02em;
}
.founder-card__career-note {
display: block;
font-size: var(--fs-xs);
font-style: italic;
color: var(--color-text-mute);
margin-top: 2px;
}
.founder-card__ext-link {
display: inline-flex;
align-items: center;
margin-left: 4px;
color: var(--color-gold-deep);
font-size: 0.85em;
transition: all var(--duration-fast) var(--ease-out);
vertical-align: super;
}
.founder-card__ext-link:hover {
color: var(--color-navy);
transform: translate(2px, -2px);
}
/* 인용구 */
.founder-card__quote {
font-family: var(--font-serif);
font-size: var(--fs-sm);
font-style: italic;
line-height: 1.7;
color: var(--color-text-soft);
margin: 0;
text-align: left;
padding: var(--space-3) 0;
}
/* --------------------------------------------------------------------
회사 기본 정보 (Company)
-------------------------------------------------------------------- */
.company {
position: relative;
}
.company__inner {
text-align: center;
}
.company__header {
margin-bottom: var(--space-7);
}
.company__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-3) 0;
}
.company__eyebrow::before,
.company__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.company__title {
font-family: var(--font-serif);
font-size: var(--fs-2xl);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0;
letter-spacing: -0.01em;
}
.company__info {
display: grid;
grid-template-columns: 1fr;
gap: 0;
max-width: 600px;
margin: 0 auto var(--space-7);
text-align: left;
}
.company__info-row {
display: grid;
grid-template-columns: 140px 1fr;
gap: var(--space-4);
padding: var(--space-4) var(--space-3);
border-bottom: 1px solid var(--color-line);
align-items: baseline;
}
.company__info-row:first-child {
border-top: 1px solid var(--color-line);
}
.company__info-row dt {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
}
.company__info-row dd {
font-size: var(--fs-base);
color: var(--color-text);
margin: 0;
}
.company__info-row dd a {
color: var(--color-text);
border-bottom: 1px solid transparent;
transition: all var(--duration-fast) var(--ease-out);
}
.company__info-row dd a:hover {
color: var(--color-gold-deep);
border-bottom-color: var(--color-gold);
}
@media (max-width: 540px) {
.company__info-row {
grid-template-columns: 1fr;
gap: var(--space-1);
}
}
.company__cta {
display: flex;
gap: var(--space-4);
justify-content: center;
flex-wrap: wrap;
margin-top: var(--space-6);
}
@media (max-width: 480px) {
.company__cta {
flex-direction: column;
align-items: stretch;
}
}
/* ==========================================================================
[CONTACT] 문의·참여 페이지
--------------------------------------------------------------------------
3가지 분기 탭 + 분기별 폼 + 직접 연락처 카드
========================================================================== */
/* --------------------------------------------------------------------
Contact Hero
-------------------------------------------------------------------- */
.contact-hero {
position: relative;
background-color: var(--color-cream);
padding: var(--space-9) 0 var(--space-9);
text-align: center;
overflow: hidden;
}
.contact-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(
ellipse at center top,
rgba(201, 168, 76, 0.08) 0%,
transparent 60%
);
pointer-events: none;
}
.contact-hero::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: min(60%, 500px);
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
var(--color-gold) 50%,
transparent 100%
);
opacity: 0.4;
}
.contact-hero__inner {
position: relative;
z-index: 2;
}
.contact-hero .breadcrumb {
display: flex;
justify-content: center;
}
.contact-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.contact-hero__eyebrow-line {
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.contact-hero__title {
font-family: var(--font-serif);
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: var(--fw-medium);
line-height: var(--lh-tight);
color: var(--color-navy);
margin: 0 0 var(--space-3) 0;
letter-spacing: -0.02em;
}
.contact-hero__title-accent {
font-style: normal;
color: var(--color-gold-deep);
position: relative;
display: inline-block;
}
.contact-hero__title-accent::after {
content: '';
position: absolute;
left: -3%;
right: -3%;
bottom: -0.12em;
height: 10px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
.contact-hero__subtitle {
font-family: var(--font-serif);
font-size: clamp(1rem, 2vw, 1.25rem);
font-style: italic;
color: var(--color-text-soft);
margin: 0;
}
/* --------------------------------------------------------------------
3가지 분기 탭 섹션
-------------------------------------------------------------------- */
.contact-tabs {
position: relative;
}
.contact-tabs__inner {
position: relative;
}
.contact-tabs__lead {
text-align: center;
font-family: var(--font-serif);
font-size: clamp(1.125rem, 2vw, 1.375rem);
font-style: italic;
color: var(--color-navy);
margin: 0 0 var(--space-7) 0;
font-weight: var(--fw-regular);
}
.contact-tabs__buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
max-width: 900px;
margin: 0 auto;
}
@media (max-width: 720px) {
.contact-tabs__buttons {
grid-template-columns: 1fr;
gap: var(--space-3);
}
}
/* 탭 버튼 */
.contact-tab {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
padding: var(--space-6) var(--space-5);
background-color: var(--color-cream-soft);
border: 1.5px solid var(--color-line);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all var(--duration-normal) var(--ease-out);
font-family: inherit;
text-align: center;
position: relative;
overflow: hidden;
}
.contact-tab:hover {
border-color: var(--color-gold-soft);
background-color: #FFFFFF;
transform: translateY(-2px);
}
.contact-tab.is-active {
background-color: var(--color-navy);
border-color: var(--color-gold);
color: var(--color-cream);
box-shadow:
0 0 0 1px var(--color-gold),
0 8px 24px rgba(11, 31, 58, 0.16);
}
.contact-tab.is-active::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(
90deg,
var(--color-gold) 0%,
var(--color-gold-soft) 50%,
var(--color-gold) 100%
);
}
/* 탭 아이콘 */
.contact-tab__icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: var(--space-2);
color: var(--color-navy);
transition: color var(--duration-normal) var(--ease-out);
}
.contact-tab__icon svg {
width: 36px;
height: 36px;
}
.contact-tab.is-active .contact-tab__icon {
color: var(--color-gold);
}
/* 탭 라벨 */
.contact-tab__label {
font-family: var(--font-serif);
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
color: var(--color-navy);
letter-spacing: -0.01em;
transition: color var(--duration-normal) var(--ease-out);
}
.contact-tab.is-active .contact-tab__label {
color: var(--color-cream);
}
/* 탭 영문 보조 라벨 */
.contact-tab__sub {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-style: italic;
font-weight: var(--fw-regular);
color: var(--color-text-mute);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
transition: color var(--duration-normal) var(--ease-out);
}
.contact-tab.is-active .contact-tab__sub {
color: var(--color-gold);
}
/* --------------------------------------------------------------------
분기별 폼 패널
-------------------------------------------------------------------- */
.contact-form {
position: relative;
}
.contact-form__inner {
position: relative;
}
.contact-panel {
animation: panelFadeIn 0.4s var(--ease-out);
}
@keyframes panelFadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.contact-panel__intro {
text-align: center;
margin-bottom: var(--space-7);
padding-bottom: var(--space-5);
border-bottom: 1px solid var(--color-line);
}
.contact-panel__category {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
margin: 0 0 var(--space-3) 0;
}
.contact-panel__title {
font-family: var(--font-serif);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0 0 var(--space-3) 0;
letter-spacing: -0.01em;
}
.contact-panel__description {
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
max-width: 600px;
margin: 0 auto;
}
/* --------------------------------------------------------------------
폼 요소 스타일
-------------------------------------------------------------------- */
.contact-form__form {
display: flex;
flex-direction: column;
gap: var(--space-5);
max-width: 720px;
margin: 0 auto;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
@media (max-width: 540px) {
.form-row {
grid-template-columns: 1fr;
}
}
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.form-label {
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--color-navy);
letter-spacing: 0.005em;
}
.form-required {
color: var(--color-gold-deep);
margin-left: 2px;
}
.form-input,
.form-select,
.form-textarea {
font-family: var(--font-sans);
font-size: var(--fs-base);
color: var(--color-text);
background-color: #FFFFFF;
border: 1.5px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
transition: all var(--duration-fast) var(--ease-out);
width: 100%;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--color-gold);
box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
}
.form-input::placeholder,
.form-textarea::placeholder {
color: var(--color-text-mute);
font-style: italic;
}
.form-textarea {
resize: vertical;
min-height: 120px;
line-height: var(--lh-relaxed);
}
.form-select {
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right var(--space-4) center;
background-size: 18px;
padding-right: var(--space-7);
}
/* --------------------------------------------------------------------
체크박스 (개인정보 동의)
-------------------------------------------------------------------- */
.form-consent {
margin-top: var(--space-2);
padding: var(--space-4);
background-color: var(--color-cream-soft);
border-radius: var(--radius-md);
}
.form-checkbox-label {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: var(--fs-sm);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
cursor: pointer;
}
.form-checkbox-label input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.form-checkbox-mark {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background-color: #FFFFFF;
border: 1.5px solid var(--color-line);
border-radius: 4px;
transition: all var(--duration-fast) var(--ease-out);
margin-top: 2px;
}
.form-checkbox-label input[type="checkbox"]:checked + .form-checkbox-mark {
background-color: var(--color-gold);
border-color: var(--color-gold);
}
.form-checkbox-label input[type="checkbox"]:checked + .form-checkbox-mark::after {
content: '';
display: block;
width: 10px;
height: 6px;
border-left: 2px solid #FFFFFF;
border-bottom: 2px solid #FFFFFF;
transform: rotate(-45deg) translateY(-2px);
}
.form-checkbox-label input[type="checkbox"]:focus + .form-checkbox-mark {
box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.2);
}
/* --------------------------------------------------------------------
폼 안내 메시지
-------------------------------------------------------------------- */
.contact-form__note {
display: flex;
align-items: flex-start;
gap: var(--space-2);
margin-top: var(--space-7);
padding: var(--space-4) var(--space-5);
background-color: rgba(201, 168, 76, 0.08);
border-left: 3px solid var(--color-gold);
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
line-height: var(--lh-relaxed);
color: var(--color-text);
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.contact-form__note-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--color-gold);
color: #FFFFFF;
font-size: 12px;
font-weight: var(--fw-bold);
flex-shrink: 0;
margin-top: 2px;
}
.contact-form__note a {
color: var(--color-gold-deep);
font-weight: var(--fw-medium);
border-bottom: 1px solid var(--color-gold-soft);
transition: all var(--duration-fast) var(--ease-out);
}
.contact-form__note a:hover {
color: var(--color-navy);
border-bottom-color: var(--color-gold);
}
/* --------------------------------------------------------------------
직접 연락처 섹션
-------------------------------------------------------------------- */
.contact-info {
position: relative;
}
.contact-info__inner {
position: relative;
}
.contact-info__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.contact-info__eyebrow::before,
.contact-info__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.contact-info__title {
font-family: var(--font-serif);
font-size: var(--fs-3xl);
font-weight: var(--fw-semibold);
line-height: var(--lh-tight);
color: var(--color-navy);
margin: 0 0 var(--space-4) 0;
letter-spacing: -0.01em;
}
.contact-info__subtitle {
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
margin: 0 0 var(--space-9) 0;
}
.contact-info__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
max-width: 1000px;
margin: 0 auto var(--space-9);
}
@media (max-width: 800px) {
.contact-info__grid {
grid-template-columns: 1fr;
gap: var(--space-4);
}
}
/* 직접 연락처 카드 */
.contact-info-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-2);
padding: var(--space-6);
background: linear-gradient(
135deg,
#FFFFFF 0%,
var(--color-cream-soft) 100%
);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
text-decoration: none;
color: inherit;
transition: all var(--duration-normal) var(--ease-out);
position: relative;
overflow: hidden;
}
.contact-info-card:not(.contact-info-card--static):hover {
transform: translateY(-4px);
border-color: var(--color-gold);
box-shadow: var(--shadow-lg);
}
.contact-info-card:not(.contact-info-card--static):hover::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(
90deg,
var(--color-gold) 0%,
var(--color-gold-soft) 50%,
var(--color-gold) 100%
);
}
.contact-info-card--static {
cursor: default;
}
.contact-info-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background-color: var(--color-gold-mist);
color: var(--color-gold-deep);
margin-bottom: var(--space-3);
transition: all var(--duration-normal) var(--ease-out);
}
.contact-info-card__icon svg {
width: 32px;
height: 32px;
}
.contact-info-card:not(.contact-info-card--static):hover .contact-info-card__icon {
background-color: var(--color-gold);
color: var(--color-cream);
}
.contact-info-card__label {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
margin: 0;
}
.contact-info-card__value {
font-family: var(--font-serif);
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0;
letter-spacing: -0.01em;
line-height: var(--lh-tight);
}
.contact-info-card__note {
font-size: var(--fs-sm);
font-style: italic;
color: var(--color-text-mute);
margin: 0;
}
/* 정성 안내 메시지 */
.contact-info__promise {
text-align: center;
max-width: 600px;
margin: 0 auto;
padding: var(--space-7);
background: linear-gradient(
135deg,
var(--color-cream-soft) 0%,
#FFFFFF 100%
);
border-radius: var(--radius-lg);
border: 1px solid var(--color-gold-soft);
position: relative;
}
.contact-info__promise::before {
content: '';
position: absolute;
top: var(--space-3);
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 1px;
background-color: var(--color-gold);
opacity: 0.5;
}
.contact-info__promise-text {
font-family: var(--font-serif);
font-size: clamp(1.125rem, 2vw, 1.375rem);
line-height: 1.7;
color: var(--color-navy);
margin: 0 0 var(--space-3) 0;
}
.contact-info__promise-text em {
font-style: italic;
color: var(--color-text-soft);
font-weight: var(--fw-regular);
}
.contact-info__promise-text strong {
font-style: normal;
font-weight: var(--fw-semibold);
color: var(--color-gold-deep);
}
.contact-info__promise-author {
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
letter-spacing: var(--ls-wide);
color: var(--color-text-mute);
margin: 0;
}
/* 공통: 섹션 헤더 (가운데 정렬) */
.section-header--center {
text-align: center;
margin-bottom: var(--space-7);
}
/* ==========================================================================
[NETWORK] 제휴 병의원 페이지 (인터랙티브 한국지도)
--------------------------------------------------------------------------
가장 복잡한 페이지. 진행률 카운터 + 큰 지도 + 사이드 패널 + 카드 리스트
========================================================================== */
/* --------------------------------------------------------------------
Network Hero
-------------------------------------------------------------------- */
.network-hero {
position: relative;
background-color: var(--color-cream);
padding: var(--space-9) 0;
text-align: center;
overflow: hidden;
}
.network-hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center top, rgba(201, 168, 76, 0.08) 0%, transparent 60%);
pointer-events: none;
}
.network-hero::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: min(60%, 500px);
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--color-gold) 50%, transparent 100%);
opacity: 0.4;
}
.network-hero__inner {
position: relative;
z-index: 2;
}
.network-hero .breadcrumb {
display: flex;
justify-content: center;
}
.network-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.network-hero__eyebrow-line {
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.network-hero__title {
font-family: var(--font-serif);
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: var(--fw-medium);
line-height: var(--lh-tight);
color: var(--color-navy);
margin: 0 0 var(--space-3) 0;
letter-spacing: -0.02em;
}
.network-hero__title-accent {
font-style: normal;
color: var(--color-gold-deep);
position: relative;
display: inline-block;
}
.network-hero__title-accent::after {
content: '';
position: absolute;
left: -3%;
right: -3%;
bottom: -0.12em;
height: 10px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
.network-hero__subtitle {
font-family: var(--font-serif);
font-size: clamp(1rem, 2vw, 1.25rem);
font-style: italic;
line-height: 1.7;
color: var(--color-text-soft);
margin: 0;
}
/* --------------------------------------------------------------------
진행률 카운터 섹션
-------------------------------------------------------------------- */
.np-progress {
position: relative;
}
.np-progress__inner {
position: relative;
}
.np-progress__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.np-progress__eyebrow::before,
.np-progress__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.np-progress__title {
font-family: var(--font-serif);
font-size: var(--fs-3xl);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0 0 var(--space-7) 0;
letter-spacing: -0.01em;
text-align: center;
}
/* 큰 카운터 */
.np-progress__counter {
text-align: center;
margin-bottom: var(--space-7);
}
.np-progress__counter-numbers {
display: flex;
align-items: baseline;
justify-content: center;
gap: var(--space-4);
margin-bottom: var(--space-3);
font-family: var(--font-display);
}
.np-progress__counter-current {
font-size: clamp(4rem, 10vw, 7rem);
font-style: italic;
font-weight: var(--fw-semibold);
color: var(--color-gold-deep);
line-height: 1;
letter-spacing: -0.02em;
}
.np-progress__counter-divider {
font-size: clamp(1.5rem, 3vw, 2rem);
font-style: italic;
font-weight: var(--fw-light);
color: var(--color-text-mute);
line-height: 1;
text-transform: lowercase;
}
.np-progress__counter-total {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: var(--fw-regular);
color: var(--color-text-soft);
line-height: 1;
}
.np-progress__counter-label {
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-text-mute);
margin: 0;
}
/* 진행률 바 */
.np-progress__bar-wrap {
max-width: 600px;
margin: 0 auto var(--space-9);
}
.np-progress__bar {
position: relative;
width: 100%;
height: 12px;
background-color: var(--color-cream-soft);
border: 1px solid var(--color-line);
border-radius: var(--radius-full);
overflow: visible;
}
.np-progress__bar-fill {
position: relative;
height: 100%;
background: linear-gradient(90deg, var(--color-gold-deep) 0%, var(--color-gold) 100%);
border-radius: var(--radius-full);
transition: width 1s var(--ease-out);
min-width: 12px;
}
.np-progress__bar-marker {
position: absolute;
right: -6px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-color: var(--color-gold);
border: 2px solid #FFFFFF;
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.3);
}
.np-progress__bar-labels {
display: flex;
justify-content: space-between;
margin-top: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-xs);
font-style: italic;
letter-spacing: var(--ls-wide);
color: var(--color-text-mute);
}
/* 통계 카드 3개 */
.np-progress__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
max-width: 720px;
margin: 0 auto;
}
@media (max-width: 600px) {
.np-progress__stats {
grid-template-columns: 1fr;
gap: var(--space-3);
}
}
.np-progress__stat {
text-align: center;
padding: var(--space-5);
background-color: var(--color-cream-soft);
border-radius: var(--radius-lg);
border: 1px solid var(--color-line);
}
.np-progress__stat-num {
font-family: var(--font-display);
font-size: var(--fs-3xl);
font-style: italic;
font-weight: var(--fw-semibold);
color: var(--color-gold-deep);
margin: 0 0 var(--space-2) 0;
line-height: 1;
letter-spacing: -0.02em;
}
.np-progress__stat-unit {
font-size: 0.6em;
font-weight: var(--fw-regular);
color: var(--color-text-soft);
margin-left: 4px;
}
.np-progress__stat-label {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-style: italic;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-text-mute);
margin: 0;
}
/* --------------------------------------------------------------------
메인 인터랙티브 지도 섹션
-------------------------------------------------------------------- */
.np-map {
position: relative;
}
.np-map__inner {
position: relative;
}
.np-map__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.np-map__eyebrow::before,
.np-map__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.np-map__title {
font-family: var(--font-serif);
font-size: var(--fs-3xl);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0 0 var(--space-3) 0;
letter-spacing: -0.01em;
text-align: center;
}
.np-map__subtitle {
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
margin: 0 0 var(--space-9) 0;
text-align: center;
}
/* 지도 + 패널 컨테이너 */
.np-map__container {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: var(--space-6);
max-width: 1200px;
margin: 0 auto;
align-items: stretch;
}
@media (max-width: 960px) {
.np-map__container {
grid-template-columns: 1fr;
gap: var(--space-5);
}
}
/* 지도 SVG 영역 */
.np-map__map-wrap {
position: relative;
background: linear-gradient(135deg, #FFFFFF 0%, var(--color-cream-soft) 100%);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
padding: var(--space-5);
display: flex;
flex-direction: column;
}
.np-map__svg {
width: 100%;
height: auto;
max-height: 700px;
display: block;
flex: 1;
}
/* 시·도 영역 */
.km-region {
fill: rgba(11, 31, 58, 0.03);
stroke: rgba(11, 31, 58, 0.25);
stroke-width: 1.2;
stroke-linejoin: round;
cursor: pointer;
transition: all 0.25s var(--ease-out);
outline: none;
}
.km-region:hover {
fill: rgba(201, 168, 76, 0.15);
stroke: var(--color-gold);
stroke-width: 1.8;
}
.km-region:focus-visible {
fill: rgba(201, 168, 76, 0.2);
stroke: var(--color-gold);
stroke-width: 2;
}
.km-region.is-active {
fill: rgba(201, 168, 76, 0.25);
stroke: var(--color-gold-deep);
stroke-width: 2;
}
.km-region--featured {
fill: rgba(201, 168, 76, 0.1);
}
/* 지도 점 */
.km-dot {
cursor: pointer;
transition: opacity 0.2s var(--ease-out);
}
.km-dot--placeholder:hover {
opacity: 0.6;
}
/* 지도 범례 */
.np-map__legend {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-5);
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--color-line);
}
.np-map__legend-item {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-display);
font-size: var(--fs-xs);
font-style: italic;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-text-mute);
}
.np-map__legend-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.np-map__legend-dot--active {
background-color: var(--color-gold);
box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.3);
}
.np-map__legend-dot--placeholder {
background-color: transparent;
border: 1.5px dashed rgba(11, 31, 58, 0.4);
}
/* --------------------------------------------------------------------
우측 패널 — 시·도 정보 표시
-------------------------------------------------------------------- */
.np-map__panel {
background-color: #FFFFFF;
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
padding: var(--space-6);
min-height: 500px;
display: flex;
flex-direction: column;
}
.np-map__panel-content {
flex: 1;
display: flex;
flex-direction: column;
}
/* 초기 상태 (안내) */
.np-map__panel-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
flex: 1;
gap: var(--space-3);
padding: var(--space-5);
}
.np-map__panel-empty-icon {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--color-cream-soft);
color: var(--color-gold-deep);
margin-bottom: var(--space-2);
}
.np-map__panel-empty-icon svg {
width: 40px;
height: 40px;
}
.np-map__panel-empty-title {
font-family: var(--font-serif);
font-size: var(--fs-xl);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0;
letter-spacing: -0.01em;
}
.np-map__panel-empty-text {
font-size: var(--fs-base);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
margin: 0;
}
.np-map__panel-hint {
margin-top: var(--space-4);
padding: var(--space-3) var(--space-4);
background-color: var(--color-gold-mist);
border-radius: var(--radius-full);
font-family: var(--font-display);
font-size: var(--fs-xs);
font-style: italic;
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.np-map__panel-hint-arrow {
display: inline-block;
animation: hintArrow 1.5s ease-in-out infinite;
}
@keyframes hintArrow {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-4px); }
}
/* 활성 상태 (제휴 기관 있음) */
.np-panel__active,
.np-panel__waiting {
animation: panelFadeIn 0.4s var(--ease-out);
}
.np-panel__header {
text-align: center;
padding-bottom: var(--space-4);
margin-bottom: var(--space-5);
border-bottom: 1px solid var(--color-line);
}
.np-panel__category {
display: inline-block;
padding: 4px 12px;
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
background-color: var(--color-gold-mist);
border: 1px solid var(--color-gold);
border-radius: var(--radius-full);
margin: 0 0 var(--space-3) 0;
}
.np-panel__category--waiting {
color: var(--color-text-mute);
background-color: transparent;
border-color: var(--color-text-mute);
border-style: dashed;
}
.np-panel__region-name {
font-family: var(--font-serif);
font-size: var(--fs-2xl);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0;
letter-spacing: -0.01em;
}
.np-panel__count {
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
color: var(--color-text-soft);
margin: var(--space-2) 0 0 0;
}
.np-panel__count strong {
font-style: normal;
font-weight: var(--fw-semibold);
color: var(--color-gold-deep);
font-size: 1.2em;
}
/* 제휴 기관 카드 */
.np-panel__clinics {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.np-panel__clinic {
padding: var(--space-5);
background-color: var(--color-cream-soft);
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--ease-out);
}
.np-panel__clinic:hover {
border-color: var(--color-gold-soft);
background-color: #FFFFFF;
}
.np-panel__clinic-header {
margin-bottom: var(--space-3);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-line);
}
.np-panel__clinic-name {
font-family: var(--font-serif);
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0 0 var(--space-1) 0;
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
letter-spacing: -0.01em;
}
.np-panel__clinic-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
font-family: var(--font-display);
font-size: 10px;
font-weight: var(--fw-medium);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-gold-deep);
background-color: var(--color-gold-mist);
border: 1px solid var(--color-gold);
border-radius: var(--radius-full);
}
.np-panel__clinic-specialty {
font-size: var(--fs-sm);
color: var(--color-text-soft);
margin: 0;
font-style: italic;
}
.np-panel__clinic-info {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin: 0 0 var(--space-3) 0;
}
.np-panel__clinic-info > div {
display: grid;
grid-template-columns: 60px 1fr;
gap: var(--space-3);
align-items: baseline;
}
.np-panel__clinic-info dt {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
}
.np-panel__clinic-info dd {
font-size: var(--fs-sm);
color: var(--color-text);
margin: 0;
line-height: 1.5;
}
.np-panel__clinic-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-gold-deep);
padding: var(--space-2) 0;
border-bottom: 1px solid var(--color-gold-soft);
transition: all var(--duration-fast) var(--ease-out);
}
.np-panel__clinic-link:hover {
color: var(--color-navy);
border-bottom-color: var(--color-gold);
}
/* 대기 상태 (제휴 기관 없음) */
.np-panel__waiting-content {
text-align: center;
padding: var(--space-5) 0;
}
.np-panel__waiting-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
margin: 0 auto var(--space-4);
color: var(--color-text-mute);
}
.np-panel__waiting-icon svg {
width: 60px;
height: 60px;
}
.np-panel__waiting-message {
font-family: var(--font-serif);
font-size: var(--fs-md);
font-style: italic;
line-height: 1.7;
color: var(--color-text);
margin: 0 0 var(--space-5) 0;
}
.np-panel__waiting-message strong {
font-style: normal;
font-weight: var(--fw-semibold);
color: var(--color-navy);
}
.np-panel__waiting-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
}
.np-panel__waiting-actions .btn {
width: 100%;
max-width: 240px;
}
.np-panel__waiting-note {
font-size: var(--fs-xs);
font-style: italic;
color: var(--color-text-mute);
line-height: 1.6;
margin: 0;
}
/* --------------------------------------------------------------------
전체 제휴 기관 리스트
-------------------------------------------------------------------- */
.np-list {
position: relative;
}
.np-list__inner {
position: relative;
}
.np-list__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.np-list__eyebrow::before,
.np-list__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.np-list__title {
font-family: var(--font-serif);
font-size: var(--fs-3xl);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0 0 var(--space-3) 0;
letter-spacing: -0.01em;
text-align: center;
}
.np-list__subtitle {
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
margin: 0 0 var(--space-9) 0;
text-align: center;
}
.np-list__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--space-5);
max-width: 1200px;
margin: 0 auto;
}
/* 제휴 기관 카드 */
.np-list__card {
display: flex;
align-items: stretch;
gap: var(--space-4);
padding: var(--space-5);
background: linear-gradient(135deg, #FFFFFF 0%, var(--color-cream-soft) 100%);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
transition: all var(--duration-normal) var(--ease-out);
position: relative;
overflow: hidden;
}
.np-list__card:hover:not(.np-list__card--placeholder) {
transform: translateY(-4px);
border-color: var(--color-gold);
box-shadow: var(--shadow-lg);
}
.np-list__card:not(.np-list__card--placeholder)::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--color-gold) 0%, var(--color-gold-soft) 100%);
}
.np-list__card-num {
flex-shrink: 0;
font-family: var(--font-display);
font-size: var(--fs-2xl);
font-style: italic;
font-weight: var(--fw-light);
color: var(--color-gold);
line-height: 1;
letter-spacing: -0.02em;
}
.np-list__card-body {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.np-list__card-header {
margin-bottom: var(--space-2);
}
.np-list__card-name {
font-family: var(--font-serif);
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0 0 var(--space-1) 0;
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
letter-spacing: -0.01em;
}
.np-list__card-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
font-family: var(--font-display);
font-size: 10px;
font-weight: var(--fw-medium);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-gold-deep);
background-color: var(--color-gold-mist);
border: 1px solid var(--color-gold);
border-radius: var(--radius-full);
}
.np-list__card-specialty {
font-size: var(--fs-sm);
color: var(--color-text-soft);
margin: 0;
font-style: italic;
}
.np-list__card-info {
display: flex;
flex-direction: column;
gap: var(--space-2);
font-size: var(--fs-sm);
color: var(--color-text);
line-height: 1.5;
flex: 1;
}
.np-list__card-info p {
margin: 0;
display: grid;
grid-template-columns: 50px 1fr;
gap: var(--space-2);
}
.np-list__card-info-label {
font-family: var(--font-display);
font-size: 11px;
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
}
.np-list__card-info-address {
align-items: flex-start;
}
.np-list__card-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--color-line);
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-gold-deep);
transition: all var(--duration-fast) var(--ease-out);
}
.np-list__card-link:hover {
color: var(--color-navy);
}
/* placeholder 카드 */
.np-list__card--placeholder {
background: var(--color-cream-soft);
border: 1.5px dashed rgba(11, 31, 58, 0.2);
align-items: center;
justify-content: center;
}
.np-list__card--placeholder .np-list__card-num {
color: rgba(201, 168, 76, 0.4);
}
.np-list__card-empty-text {
font-family: var(--font-serif);
font-size: var(--fs-sm);
font-style: italic;
color: var(--color-text-mute);
text-align: center;
margin: 0;
line-height: 1.6;
}
/* --------------------------------------------------------------------
제휴 안내 + CTA 섹션
-------------------------------------------------------------------- */
.np-cta {
position: relative;
background-color: var(--color-navy);
color: var(--color-text-on-navy);
padding: clamp(4rem, 8vw, 6rem) 0;
overflow: hidden;
}
.np-cta::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 50% 0%, rgba(201, 168, 76, 0.1) 0%, transparent 60%);
pointer-events: none;
}
.np-cta::after {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(60%, 500px);
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--color-gold) 50%, transparent 100%);
opacity: 0.5;
}
.np-cta__inner {
position: relative;
z-index: 2;
}
.np-cta__content {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.np-cta__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.np-cta__eyebrow-line {
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.np-cta__title {
font-family: var(--font-serif);
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: var(--fw-medium);
line-height: var(--lh-tight);
color: var(--color-cream);
margin: 0 0 var(--space-5) 0;
letter-spacing: -0.01em;
}
.np-cta__title-accent {
font-style: normal;
color: var(--color-gold);
}
.np-cta__description {
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
color: rgba(248, 245, 238, 0.85);
margin: 0 0 var(--space-7) 0;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.np-cta__description strong {
color: var(--color-gold);
font-weight: var(--fw-semibold);
}
/* 3가지 협력 방식 */
.np-cta__paths {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
margin: 0 0 var(--space-9) 0;
text-align: left;
}
@media (max-width: 800px) {
.np-cta__paths {
grid-template-columns: 1fr;
gap: var(--space-3);
}
}
.np-cta__path {
padding: var(--space-5);
background: rgba(248, 245, 238, 0.04);
border: 1px solid rgba(248, 245, 238, 0.1);
border-radius: var(--radius-md);
position: relative;
}
.np-cta__path-num {
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold);
letter-spacing: var(--ls-wider);
margin-bottom: var(--space-2);
display: block;
}
.np-cta__path-title {
font-family: var(--font-serif);
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--color-cream);
margin: 0 0 var(--space-2) 0;
letter-spacing: -0.01em;
}
.np-cta__path-desc {
font-size: var(--fs-sm);
line-height: var(--lh-relaxed);
color: rgba(248, 245, 238, 0.7);
margin: 0;
}
.np-cta__actions {
display: flex;
gap: var(--space-4);
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 480px) {
.np-cta__actions {
flex-direction: column;
align-items: stretch;
}
}
/* ==========================================================================
[WORK] 우리가 하는 일 페이지 (4대 사업 허브)
--------------------------------------------------------------------------
Page Hero + 우선순위 시각화 + 4대 사업 상세 카드 + 로드맵 + CTA
========================================================================== */
/* --------------------------------------------------------------------
Work Hero
-------------------------------------------------------------------- */
.work-hero {
position: relative;
background-color: var(--color-cream);
padding: var(--space-9) 0;
text-align: center;
overflow: hidden;
}
.work-hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center top, rgba(201, 168, 76, 0.08) 0%, transparent 60%);
pointer-events: none;
}
.work-hero::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: min(60%, 500px);
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--color-gold) 50%, transparent 100%);
opacity: 0.4;
}
.work-hero__inner {
position: relative;
z-index: 2;
}
.work-hero .breadcrumb {
display: flex;
justify-content: center;
}
.work-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.work-hero__eyebrow-line {
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.work-hero__title {
font-family: var(--font-serif);
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: var(--fw-medium);
line-height: var(--lh-tight);
color: var(--color-navy);
margin: 0 0 var(--space-3) 0;
letter-spacing: -0.02em;
}
.work-hero__title-accent {
font-style: normal;
color: var(--color-gold-deep);
position: relative;
display: inline-block;
}
.work-hero__title-accent::after {
content: '';
position: absolute;
left: -3%;
right: -3%;
bottom: -0.12em;
height: 10px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
.work-hero__subtitle {
font-family: var(--font-serif);
font-size: clamp(1rem, 2vw, 1.25rem);
font-style: italic;
line-height: 1.7;
color: var(--color-text-soft);
margin: 0;
}
/* --------------------------------------------------------------------
사업 우선순위 시각화 (4단 도식)
-------------------------------------------------------------------- */
.work-priority {
position: relative;
}
.work-priority__inner {
position: relative;
}
.work-priority__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.work-priority__eyebrow::before,
.work-priority__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.work-priority__title {
font-family: var(--font-serif);
font-size: var(--fs-3xl);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0 0 var(--space-3) 0;
letter-spacing: -0.01em;
text-align: center;
}
.work-priority__subtitle {
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
margin: 0 0 var(--space-9) 0;
text-align: center;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.work-priority__list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
counter-reset: priority;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 900px) {
.work-priority__list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 540px) {
.work-priority__list {
grid-template-columns: 1fr;
}
}
.work-priority__item {
position: relative;
padding: var(--space-5);
background: linear-gradient(135deg, var(--color-cream-soft) 0%, #FFFFFF 100%);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
text-align: center;
transition: all var(--duration-normal) var(--ease-out);
}
.work-priority__item:hover {
transform: translateY(-4px);
border-color: var(--color-gold-soft);
box-shadow: var(--shadow-md);
}
.work-priority__item::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: var(--color-gold);
transition: width var(--duration-normal) var(--ease-out);
}
.work-priority__item:hover::before {
width: 60%;
}
.work-priority__rank {
display: inline-block;
padding: 4px 12px;
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
background-color: var(--color-gold-mist);
border: 1px solid var(--color-gold);
border-radius: var(--radius-full);
margin-bottom: var(--space-3);
}
.work-priority__name {
font-family: var(--font-serif);
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0 0 var(--space-2) 0;
letter-spacing: -0.01em;
}
.work-priority__desc {
font-size: var(--fs-sm);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
margin: 0;
}
/* --------------------------------------------------------------------
4대 사업 상세 카드 (Detail)
-------------------------------------------------------------------- */
.work-detail {
position: relative;
}
.work-detail__inner {
position: relative;
}
.work-detail__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.work-detail__eyebrow::before,
.work-detail__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.work-detail__title {
font-family: var(--font-serif);
font-size: var(--fs-3xl);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0 0 var(--space-3) 0;
letter-spacing: -0.01em;
text-align: center;
}
.work-detail__subtitle {
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
margin: 0 0 var(--space-9) 0;
text-align: center;
}
.work-detail__cards {
display: flex;
flex-direction: column;
gap: var(--space-6);
max-width: 1100px;
margin: 0 auto;
}
/* 상세 카드 */
.wd-card {
background-color: #FFFFFF;
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
padding: var(--space-7);
transition: all var(--duration-normal) var(--ease-out);
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(20px);
}
.wd-card.is-visible {
opacity: 1;
transform: translateY(0);
}
.wd-card:hover {
border-color: var(--color-gold-soft);
box-shadow: var(--shadow-md);
}
.wd-card--featured {
background: linear-gradient(135deg, #FFFFFF 0%, var(--color-cream-soft) 100%);
border-color: var(--color-gold-soft);
}
.wd-card--featured::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-gold-soft) 50%, var(--color-gold) 100%);
}
/* 카드 헤더 */
.wd-card__header {
margin-bottom: var(--space-5);
padding-bottom: var(--space-5);
border-bottom: 1px solid var(--color-line);
}
.wd-card__header-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-4);
}
.wd-card__number {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3rem);
font-style: italic;
font-weight: var(--fw-light);
color: var(--color-gold);
line-height: 1;
letter-spacing: -0.02em;
}
.wd-card__status {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 4px 12px;
font-size: 11px;
font-weight: var(--fw-medium);
font-family: var(--font-display);
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: var(--radius-full);
border: 1px solid;
white-space: nowrap;
}
.wd-card__status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: currentColor;
}
.wd-card__status--progress {
background-color: var(--color-gold-mist);
color: var(--color-gold-deep);
border-color: var(--color-gold);
}
.wd-card__status--progress .wd-card__status-dot {
animation: workCardPulse 2s ease-in-out infinite;
}
.wd-card__status--ready {
background-color: transparent;
color: var(--color-text-mute);
border-color: var(--color-text-mute);
border-style: dashed;
}
.wd-card__category {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
margin: 0 0 var(--space-2) 0;
}
.wd-card__title {
font-family: var(--font-serif);
font-size: clamp(1.5rem, 3.5vw, 2rem);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0 0 var(--space-3) 0;
letter-spacing: -0.01em;
line-height: var(--lh-tight);
}
.wd-card__subtitle {
font-family: var(--font-serif);
font-size: var(--fs-md);
font-style: italic;
color: var(--color-text-soft);
margin: 0;
line-height: 1.6;
}
/* 카드 본문 */
.wd-card__body {
margin-bottom: var(--space-5);
}
.wd-card__description {
font-size: var(--fs-md);
line-height: 1.9;
color: var(--color-text);
margin: 0 0 var(--space-5) 0;
}
.wd-card__features {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
@media (max-width: 720px) {
.wd-card__features {
grid-template-columns: 1fr;
gap: var(--space-3);
}
}
.wd-card__feature {
padding: var(--space-4);
background-color: var(--color-cream-soft);
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
}
.wd-card__feature-title {
font-family: var(--font-serif);
font-size: var(--fs-base);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0 0 var(--space-2) 0;
letter-spacing: -0.01em;
position: relative;
padding-left: var(--space-3);
}
.wd-card__feature-title::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--color-gold);
}
.wd-card__feature-desc {
font-size: var(--fs-sm);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
margin: 0;
}
/* 카드 푸터 */
.wd-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding-top: var(--space-4);
border-top: 1px solid var(--color-line);
flex-wrap: wrap;
}
.wd-card__phase {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-style: italic;
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
margin: 0;
}
.wd-card__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-gold-deep);
padding: var(--space-2) 0;
border-bottom: 1px solid var(--color-gold-soft);
transition: all var(--duration-fast) var(--ease-out);
}
.wd-card__link:hover {
color: var(--color-navy);
border-bottom-color: var(--color-gold);
}
.wd-card__link--disabled {
color: var(--color-text-mute);
border-bottom-color: var(--color-line);
cursor: default;
}
.wd-card__arrow {
display: inline-block;
font-size: var(--fs-md);
transition: transform var(--duration-fast) var(--ease-out);
}
.wd-card__link:not(.wd-card__link--disabled):hover .wd-card__arrow {
transform: translateX(4px);
}
/* --------------------------------------------------------------------
단계별 로드맵
-------------------------------------------------------------------- */
.work-roadmap {
position: relative;
}
.work-roadmap__inner {
position: relative;
}
.work-roadmap__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.work-roadmap__eyebrow::before,
.work-roadmap__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.work-roadmap__title {
font-family: var(--font-serif);
font-size: var(--fs-3xl);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0 0 var(--space-3) 0;
letter-spacing: -0.01em;
text-align: center;
}
.work-roadmap__subtitle {
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
margin: 0 0 var(--space-9) 0;
text-align: center;
}
.work-roadmap__phases {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: 0;
max-width: 800px;
margin: 0 auto;
position: relative;
}
/* 세로 연결선 */
.work-roadmap__phases::before {
content: '';
position: absolute;
left: 24px;
top: 24px;
bottom: 24px;
width: 2px;
background: linear-gradient(180deg, var(--color-gold) 0%, var(--color-gold-soft) 50%, var(--color-line) 100%);
}
.work-roadmap__phase {
display: grid;
grid-template-columns: 48px 1fr;
gap: var(--space-5);
padding: var(--space-5) 0;
position: relative;
}
.work-roadmap__phase-marker {
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: var(--space-1);
}
.work-roadmap__phase-dot {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #FFFFFF;
border: 3px solid var(--color-line);
position: relative;
z-index: 2;
transition: all var(--duration-normal) var(--ease-out);
}
.work-roadmap__phase--active .work-roadmap__phase-dot {
border-color: var(--color-gold);
background-color: var(--color-gold);
box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.2);
}
.work-roadmap__phase-body {
padding: var(--space-5);
background-color: var(--color-cream-soft);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
transition: all var(--duration-normal) var(--ease-out);
}
.work-roadmap__phase--active .work-roadmap__phase-body {
background: linear-gradient(135deg, #FFFFFF 0%, var(--color-cream-soft) 100%);
border-color: var(--color-gold-soft);
box-shadow: var(--shadow-sm);
}
.work-roadmap__phase-num {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-style: italic;
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
margin: 0 0 4px 0;
}
.work-roadmap__phase-period {
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
color: var(--color-text-soft);
margin: 0 0 var(--space-2) 0;
}
.work-roadmap__phase-title {
font-family: var(--font-serif);
font-size: var(--fs-xl);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0 0 var(--space-3) 0;
letter-spacing: -0.01em;
}
.work-roadmap__phase-items {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.work-roadmap__phase-items li {
font-size: var(--fs-sm);
line-height: var(--lh-relaxed);
color: var(--color-text);
padding-left: var(--space-4);
position: relative;
}
.work-roadmap__phase-items li::before {
content: '';
position: absolute;
left: 0;
top: 0.7em;
width: 8px;
height: 1px;
background-color: var(--color-gold);
}
/* --------------------------------------------------------------------
Work CTA
-------------------------------------------------------------------- */
.work-cta {
position: relative;
background-color: var(--color-navy);
color: var(--color-text-on-navy);
padding: clamp(4rem, 8vw, 6rem) 0;
overflow: hidden;
text-align: center;
}
.work-cta::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 0%, rgba(201, 168, 76, 0.1) 0%, transparent 60%);
pointer-events: none;
}
.work-cta::after {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(60%, 500px);
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--color-gold) 50%, transparent 100%);
opacity: 0.5;
}
.work-cta__inner {
position: relative;
z-index: 2;
}
.work-cta__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.work-cta__eyebrow-line {
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.work-cta__title {
font-family: var(--font-serif);
font-size: clamp(2rem, 5vw, 3rem);
font-weight: var(--fw-medium);
line-height: var(--lh-tight);
color: var(--color-cream);
margin: 0 0 var(--space-5) 0;
letter-spacing: -0.01em;
}
.work-cta__title-accent {
font-style: normal;
color: var(--color-gold);
position: relative;
display: inline-block;
}
.work-cta__title-accent::after {
content: '';
position: absolute;
left: -3%;
right: -3%;
bottom: -0.12em;
height: 8px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
.work-cta__description {
font-family: var(--font-serif);
font-size: clamp(1rem, 2vw, 1.25rem);
font-style: italic;
line-height: 1.8;
color: rgba(248, 245, 238, 0.85);
margin: 0 0 var(--space-7) 0;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.work-cta__actions {
display: flex;
gap: var(--space-4);
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 480px) {
.work-cta__actions {
flex-direction: column;
align-items: stretch;
}
}
/* ==========================================================================
[WORK DETAIL] 4대 사업 개별 상세 페이지 (공통 스타일)
--------------------------------------------------------------------------
/work/matching.html, /work/mso.html, /work/policy.html, /work/digitalhealth.html
에서 공통으로 사용하는 스타일.
========================================================================== */
/* --------------------------------------------------------------------
상세 페이지 Hero
-------------------------------------------------------------------- */
.wd-page-hero {
position: relative;
background-color: var(--color-cream);
padding: var(--space-9) 0 var(--space-9);
overflow: hidden;
}
.wd-page-hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center top, rgba(201, 168, 76, 0.08) 0%, transparent 60%);
pointer-events: none;
}
.wd-page-hero::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: min(60%, 500px);
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--color-gold) 50%, transparent 100%);
opacity: 0.4;
}
.wd-page-hero__inner {
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
}
.wd-page-hero__priority {
display: inline-block;
padding: 4px 12px;
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
background-color: var(--color-gold-mist);
border: 1px solid var(--color-gold);
border-radius: var(--radius-full);
margin: var(--space-3) 0 var(--space-4) 0;
}
.wd-page-hero__category {
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
color: var(--color-gold-deep);
letter-spacing: var(--ls-wide);
margin: 0 0 var(--space-4) 0;
}
.wd-page-hero__title {
font-family: var(--font-serif);
font-size: clamp(2.25rem, 5vw, 3.5rem);
font-weight: var(--fw-medium);
line-height: var(--lh-tight);
color: var(--color-navy);
margin: 0 0 var(--space-4) 0;
letter-spacing: -0.02em;
}
.wd-page-hero__title-accent {
font-style: normal;
color: var(--color-gold-deep);
position: relative;
display: inline-block;
}
.wd-page-hero__title-accent::after {
content: '';
position: absolute;
left: -3%;
right: -3%;
bottom: -0.12em;
height: 10px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
.wd-page-hero__subtitle {
font-family: var(--font-serif);
font-size: clamp(1rem, 2vw, 1.25rem);
font-style: italic;
line-height: 1.7;
color: var(--color-text-soft);
margin: 0 0 var(--space-5) 0;
}
.wd-page-hero__status {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 6px 14px;
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
border-radius: var(--radius-full);
border: 1px solid;
}
.wd-page-hero__status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: currentColor;
}
.wd-page-hero__status--progress {
background-color: var(--color-gold-mist);
color: var(--color-gold-deep);
border-color: var(--color-gold);
}
.wd-page-hero__status--progress .wd-page-hero__status-dot {
animation: workCardPulse 2s ease-in-out infinite;
}
.wd-page-hero__status--ready {
background-color: transparent;
color: var(--color-text-mute);
border-color: var(--color-text-mute);
border-style: dashed;
}
/* --------------------------------------------------------------------
본문 콘텐츠 영역
-------------------------------------------------------------------- */
.wd-page-content {
position: relative;
}
.wd-page-article {
max-width: 760px;
margin: 0 auto;
}
.wd-page-article__h2 {
font-family: var(--font-serif);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: var(--space-9) 0 var(--space-5) 0;
letter-spacing: -0.01em;
position: relative;
padding-left: var(--space-4);
}
.wd-page-article__h2:first-child {
margin-top: 0;
}
.wd-page-article__h2::before {
content: '';
position: absolute;
left: 0;
top: 0.3em;
bottom: 0.3em;
width: 3px;
background: linear-gradient(180deg, var(--color-gold) 0%, var(--color-gold-soft) 100%);
}
.wd-page-article__p {
font-size: var(--fs-md);
line-height: 2;
color: var(--color-text);
margin: 0 0 var(--space-4) 0;
}
.wd-page-article__p strong {
font-weight: var(--fw-semibold);
color: var(--color-navy);
background: linear-gradient(180deg, transparent 0%, transparent 65%, rgba(201, 168, 76, 0.18) 65%, rgba(201, 168, 76, 0.18) 95%, transparent 95%);
padding: 0 2px;
}
/* 3가지 핵심 그리드 */
.wd-page-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
margin: var(--space-7) 0;
}
@media (max-width: 720px) {
.wd-page-features {
grid-template-columns: 1fr;
}
}
.wd-page-feature {
padding: var(--space-5);
background: linear-gradient(135deg, var(--color-cream-soft) 0%, #FFFFFF 100%);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
transition: all var(--duration-normal) var(--ease-out);
}
.wd-page-feature:hover {
border-color: var(--color-gold-soft);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.wd-page-feature h3 {
font-family: var(--font-serif);
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0 0 var(--space-2) 0;
letter-spacing: -0.01em;
position: relative;
padding-left: var(--space-3);
}
.wd-page-feature h3::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--color-gold);
}
.wd-page-feature p {
font-size: var(--fs-sm);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
margin: 0;
}
/* 진행 단계 (세로 타임라인) */
.wd-page-steps {
list-style: none;
padding: 0;
margin: var(--space-7) 0;
position: relative;
}
.wd-page-steps::before {
content: '';
position: absolute;
left: 12px;
top: 12px;
bottom: 12px;
width: 2px;
background: linear-gradient(180deg, var(--color-gold) 0%, var(--color-gold-soft) 50%, var(--color-line) 100%);
}
.wd-page-steps__item {
position: relative;
padding: var(--space-4) 0 var(--space-4) var(--space-7);
margin-bottom: var(--space-3);
}
.wd-page-steps__item::before {
content: '';
position: absolute;
left: 6px;
top: var(--space-5);
width: 14px;
height: 14px;
border-radius: 50%;
background: #FFFFFF;
border: 3px solid var(--color-line);
z-index: 2;
transition: all var(--duration-normal) var(--ease-out);
}
.wd-page-steps__item--current::before {
border-color: var(--color-gold);
background: var(--color-gold);
box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.2);
}
.wd-page-steps__num {
display: inline-block;
font-family: var(--font-display);
font-size: var(--fs-xs);
font-style: italic;
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
margin-bottom: var(--space-1);
}
.wd-page-steps__period {
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
color: var(--color-text-soft);
margin: 0 0 var(--space-2) 0;
}
.wd-page-steps__title {
font-family: var(--font-serif);
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0 0 var(--space-2) 0;
letter-spacing: -0.01em;
}
.wd-page-steps__desc {
font-size: var(--fs-sm);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
margin: 0;
}
/* CTA 박스 */
.wd-page-cta-box {
margin: var(--space-9) 0;
padding: var(--space-7);
background: linear-gradient(135deg, var(--color-cream-soft) 0%, #FFFFFF 100%);
border: 1px solid var(--color-gold-soft);
border-radius: var(--radius-lg);
text-align: center;
position: relative;
overflow: hidden;
}
.wd-page-cta-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-gold-soft) 50%, var(--color-gold) 100%);
}
.wd-page-cta-box h3 {
font-family: var(--font-serif);
font-size: var(--fs-xl);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0 0 var(--space-3) 0;
letter-spacing: -0.01em;
}
.wd-page-cta-box p {
font-size: var(--fs-base);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
margin: 0 0 var(--space-5) 0;
}
.wd-page-cta-box__actions {
display: flex;
gap: var(--space-3);
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 480px) {
.wd-page-cta-box__actions {
flex-direction: column;
align-items: stretch;
}
}
/* 하단 페이지 내비게이션 (이전/허브/다음) */
.wd-page-nav {
margin-top: var(--space-9);
padding-top: var(--space-7);
border-top: 1px solid var(--color-line);
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--space-3);
align-items: stretch;
}
@media (max-width: 720px) {
.wd-page-nav {
grid-template-columns: 1fr;
gap: var(--space-3);
}
}
.wd-page-nav__prev,
.wd-page-nav__next,
.wd-page-nav__hub {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4);
background-color: var(--color-cream-soft);
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
text-decoration: none;
color: inherit;
transition: all var(--duration-fast) var(--ease-out);
}
.wd-page-nav__prev:hover,
.wd-page-nav__next:hover,
.wd-page-nav__hub:hover {
border-color: var(--color-gold);
background-color: #FFFFFF;
transform: translateY(-2px);
}
.wd-page-nav__hub {
text-align: center;
justify-content: center;
}
.wd-page-nav__next {
flex-direction: row-reverse;
text-align: right;
}
.wd-page-nav__arrow {
font-size: var(--fs-xl);
color: var(--color-gold-deep);
transition: transform var(--duration-fast) var(--ease-out);
flex-shrink: 0;
}
.wd-page-nav__prev:hover .wd-page-nav__arrow {
transform: translateX(-4px);
}
.wd-page-nav__next:hover .wd-page-nav__arrow {
transform: translateX(4px);
}
.wd-page-nav__label {
display: block;
font-family: var(--font-display);
font-size: var(--fs-xs);
font-style: italic;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-text-mute);
margin-bottom: 2px;
}
.wd-page-nav__name {
display: block;
font-family: var(--font-serif);
font-size: var(--fs-base);
font-weight: var(--fw-semibold);
color: var(--color-navy);
letter-spacing: -0.01em;
}
/* ==========================================================================
[ECOSYSTEM] 연결된 기관 페이지
--------------------------------------------------------------------------
큰 다이어그램 + 4개 연계 기관 상세 카드 + 협력 관계 매트릭스
========================================================================== */
/* --------------------------------------------------------------------
Ecosystem Hero
-------------------------------------------------------------------- */
.eco-hero {
position: relative;
background-color: var(--color-cream);
padding: var(--space-9) 0;
text-align: center;
overflow: hidden;
}
.eco-hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center top, rgba(201, 168, 76, 0.08) 0%, transparent 60%);
pointer-events: none;
}
.eco-hero::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: min(60%, 500px);
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--color-gold) 50%, transparent 100%);
opacity: 0.4;
}
.eco-hero__inner {
position: relative;
z-index: 2;
}
.eco-hero .breadcrumb {
display: flex;
justify-content: center;
}
.eco-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.eco-hero__eyebrow-line {
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.eco-hero__title {
font-family: var(--font-serif);
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: var(--fw-medium);
line-height: var(--lh-tight);
color: var(--color-navy);
margin: 0 0 var(--space-3) 0;
letter-spacing: -0.02em;
}
.eco-hero__title-accent {
font-style: normal;
color: var(--color-gold-deep);
position: relative;
display: inline-block;
}
.eco-hero__title-accent::after {
content: '';
position: absolute;
left: -3%;
right: -3%;
bottom: -0.12em;
height: 10px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
.eco-hero__subtitle {
font-family: var(--font-serif);
font-size: clamp(1rem, 2vw, 1.25rem);
font-style: italic;
line-height: 1.7;
color: var(--color-text-soft);
margin: 0;
}
/* --------------------------------------------------------------------
큰 생태계 다이어그램
-------------------------------------------------------------------- */
.eco-diagram {
position: relative;
}
.eco-diagram__inner {
position: relative;
}
.eco-diagram__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.eco-diagram__eyebrow::before,
.eco-diagram__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.eco-diagram__title {
font-family: var(--font-serif);
font-size: var(--fs-3xl);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0 0 var(--space-3) 0;
letter-spacing: -0.01em;
text-align: center;
}
.eco-diagram__subtitle {
font-family: var(--font-serif);
font-size: var(--fs-md);
font-style: italic;
line-height: 1.7;
color: var(--color-text-soft);
margin: 0 0 var(--space-9) 0;
text-align: center;
}
.eco-diagram__canvas-wrap {
max-width: 1000px;
margin: 0 auto;
position: relative;
}
.eco-diagram__canvas {
width: 100%;
height: auto;
display: block;
}
.eco-diagram__hint {
text-align: center;
margin-top: var(--space-5);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
letter-spacing: var(--ls-wide);
color: var(--color-gold-deep);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
}
.eco-diagram__hint span {
display: inline-block;
animation: ecoHintBounce 1.6s ease-in-out infinite;
font-size: var(--fs-md);
}
@keyframes ecoHintBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(4px); }
}
/* --------------------------------------------------------------------
4개 연계 기관 상세 카드
-------------------------------------------------------------------- */
.eco-detail {
position: relative;
}
.eco-detail__inner {
position: relative;
}
.eco-detail__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.eco-detail__eyebrow::before,
.eco-detail__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.eco-detail__title {
font-family: var(--font-serif);
font-size: var(--fs-3xl);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0 0 var(--space-3) 0;
letter-spacing: -0.01em;
text-align: center;
}
.eco-detail__subtitle {
font-family: var(--font-serif);
font-size: var(--fs-md);
font-style: italic;
line-height: 1.7;
color: var(--color-text-soft);
margin: 0 0 var(--space-9) 0;
text-align: center;
}
.eco-detail__cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-5);
max-width: 1100px;
margin: 0 auto;
}
@media (max-width: 800px) {
.eco-detail__cards {
grid-template-columns: 1fr;
gap: var(--space-4);
}
}
/* 상세 카드 */
.eco-card {
background: linear-gradient(135deg, #FFFFFF 0%, var(--color-cream-soft) 100%);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
padding: var(--space-6);
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.eco-card.is-visible {
opacity: 1;
transform: translateY(0);
}
.eco-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-gold-soft) 50%, var(--color-gold) 100%);
}
.eco-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--color-gold-soft);
}
/* 카드 헤더 */
.eco-card__header {
margin-bottom: var(--space-5);
padding-bottom: var(--space-5);
border-bottom: 1px solid var(--color-line);
}
.eco-card__icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--color-gold-mist);
color: var(--color-gold-deep);
margin-bottom: var(--space-4);
transition: all var(--duration-normal) var(--ease-out);
}
.eco-card__icon svg {
width: 32px;
height: 32px;
}
.eco-card:hover .eco-card__icon {
background-color: var(--color-gold);
color: var(--color-cream);
transform: scale(1.05);
}
.eco-card__category {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
margin: 0 0 var(--space-2) 0;
}
.eco-card__name {
font-family: var(--font-serif);
font-size: var(--fs-2xl);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0 0 var(--space-2) 0;
letter-spacing: -0.01em;
display: flex;
flex-direction: column;
gap: 2px;
}
.eco-card__name-en {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-style: italic;
font-weight: var(--fw-regular);
color: var(--color-text-mute);
letter-spacing: var(--ls-wide);
text-transform: none;
}
.eco-card__subtitle {
font-family: var(--font-serif);
font-size: var(--fs-sm);
font-style: italic;
color: var(--color-text-soft);
margin: var(--space-2) 0 0 0;
line-height: 1.6;
}
/* 카드 본문 */
.eco-card__body {
display: flex;
flex-direction: column;
gap: var(--space-5);
margin-bottom: var(--space-5);
}
.eco-card__description {
font-size: var(--fs-base);
line-height: var(--lh-relaxed);
color: var(--color-text);
margin: 0;
}
/* 역할 박스 */
.eco-card__role {
padding: var(--space-3) var(--space-4);
background-color: var(--color-gold-mist);
border-left: 3px solid var(--color-gold);
border-radius: var(--radius-sm);
}
.eco-card__role-label {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
margin: 0 0 4px 0;
}
.eco-card__role-text {
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--color-navy);
margin: 0;
line-height: 1.5;
}
/* Factoid (label/value 쌍) */
.eco-card__factoids {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
padding: var(--space-4);
background-color: var(--color-cream-soft);
border-radius: var(--radius-md);
margin: 0;
}
@media (max-width: 540px) {
.eco-card__factoids {
grid-template-columns: 1fr;
}
}
.eco-card__factoid dt {
font-family: var(--font-display);
font-size: 11px;
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
margin-bottom: 4px;
}
.eco-card__factoid dd {
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--color-navy);
margin: 0;
letter-spacing: -0.01em;
line-height: 1.4;
}
/* 연결된 사업 태그 */
.eco-card__linked {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.eco-card__linked-label {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-text-mute);
margin: 0;
}
.eco-card__tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.eco-card__tag {
display: inline-block;
padding: 4px 12px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: var(--fw-medium);
color: var(--color-navy);
background-color: #FFFFFF;
border: 1px solid var(--color-line);
border-radius: var(--radius-full);
transition: all var(--duration-fast) var(--ease-out);
}
.eco-card:hover .eco-card__tag {
border-color: var(--color-gold-soft);
}
/* 카드 푸터 */
.eco-card__footer {
padding-top: var(--space-4);
border-top: 1px solid var(--color-line);
}
.eco-card__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-gold-deep);
padding: var(--space-2) 0;
border-bottom: 1px solid var(--color-gold-soft);
transition: all var(--duration-fast) var(--ease-out);
}
.eco-card__link:hover {
color: var(--color-navy);
border-bottom-color: var(--color-gold);
}
.eco-card__arrow {
display: inline-block;
font-size: var(--fs-md);
transition: transform var(--duration-fast) var(--ease-out);
}
.eco-card__link:hover .eco-card__arrow {
transform: translate(2px, -2px);
}
/* --------------------------------------------------------------------
협력 관계 매트릭스
-------------------------------------------------------------------- */
.eco-relations {
position: relative;
}
.eco-relations__inner {
position: relative;
}
.eco-relations__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.eco-relations__eyebrow::before,
.eco-relations__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.eco-relations__title {
font-family: var(--font-serif);
font-size: var(--fs-3xl);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0 0 var(--space-7) 0;
letter-spacing: -0.01em;
text-align: center;
}
.eco-relations__paragraph {
font-size: var(--fs-md);
line-height: 2;
color: var(--color-text);
margin: 0 0 var(--space-5) 0;
}
.eco-relations__paragraph strong {
font-weight: var(--fw-semibold);
color: var(--color-navy);
background: linear-gradient(180deg, transparent 0%, transparent 65%, rgba(201, 168, 76, 0.18) 65%, rgba(201, 168, 76, 0.18) 95%, transparent 95%);
padding: 0 2px;
}
/* 시너지 매트릭스 */
.eco-relations__matrix {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin-top: var(--space-7);
}
.eco-matrix-item {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--space-4);
align-items: center;
padding: var(--space-5);
background: linear-gradient(135deg, var(--color-cream-soft) 0%, #FFFFFF 100%);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
transition: all var(--duration-normal) var(--ease-out);
}
.eco-matrix-item:hover {
border-color: var(--color-gold-soft);
transform: translateX(4px);
box-shadow: var(--shadow-sm);
}
@media (max-width: 720px) {
.eco-matrix-item {
grid-template-columns: 1fr;
gap: var(--space-3);
text-align: center;
}
}
/* 좌측: 공식 */
.eco-matrix-item__formula {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-serif);
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0;
flex-wrap: wrap;
letter-spacing: -0.01em;
}
.eco-matrix-item__a,
.eco-matrix-item__b {
display: inline-block;
padding: 4px 10px;
background-color: var(--color-gold-mist);
border: 1px solid var(--color-gold-soft);
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
white-space: nowrap;
}
.eco-matrix-item__plus {
font-family: var(--font-display);
font-size: var(--fs-xl);
font-weight: var(--fw-light);
color: var(--color-gold);
font-style: italic;
}
/* 중앙: 등호 */
.eco-matrix-item__equals {
font-family: var(--font-display);
font-size: var(--fs-2xl);
font-weight: var(--fw-light);
color: var(--color-gold);
font-style: italic;
margin: 0;
text-align: center;
}
/* 우측: 결과 + 설명 */
.eco-matrix-item__result {
font-family: var(--font-serif);
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
color: var(--color-gold-deep);
margin: 0 0 4px 0;
letter-spacing: -0.01em;
}
.eco-matrix-item__desc {
font-size: var(--fs-sm);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
margin: 0;
font-style: italic;
}
/* --------------------------------------------------------------------
Ecosystem CTA
-------------------------------------------------------------------- */
.eco-cta {
position: relative;
background-color: var(--color-navy);
color: var(--color-text-on-navy);
padding: clamp(4rem, 8vw, 6rem) 0;
overflow: hidden;
text-align: center;
}
.eco-cta::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 0%, rgba(201, 168, 76, 0.1) 0%, transparent 60%);
pointer-events: none;
}
.eco-cta::after {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(60%, 500px);
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--color-gold) 50%, transparent 100%);
opacity: 0.5;
}
.eco-cta__inner {
position: relative;
z-index: 2;
}
.eco-cta__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.eco-cta__eyebrow-line {
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.eco-cta__title {
font-family: var(--font-serif);
font-size: clamp(2rem, 5vw, 3rem);
font-weight: var(--fw-medium);
line-height: var(--lh-tight);
color: var(--color-cream);
margin: 0 0 var(--space-5) 0;
letter-spacing: -0.01em;
}
.eco-cta__title-accent {
font-style: normal;
color: var(--color-gold);
position: relative;
display: inline-block;
}
.eco-cta__title-accent::after {
content: '';
position: absolute;
left: -3%;
right: -3%;
bottom: -0.12em;
height: 8px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
.eco-cta__description {
font-family: var(--font-serif);
font-size: clamp(1rem, 2vw, 1.25rem);
font-style: italic;
line-height: 1.8;
color: rgba(248, 245, 238, 0.85);
margin: 0 0 var(--space-7) 0;
}
.eco-cta__actions {
display: flex;
gap: var(--space-4);
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 480px) {
.eco-cta__actions {
flex-direction: column;
align-items: stretch;
}
}
/* ==========================================================================
[NEWS] 소식 페이지
--------------------------------------------------------------------------
채널 통계 + 필터 + 카드 그리드 + 유튜브 안내
========================================================================== */
/* --------------------------------------------------------------------
News Page Hero
-------------------------------------------------------------------- */
.news-page-hero {
position: relative;
background-color: var(--color-cream);
padding: var(--space-9) 0;
text-align: center;
overflow: hidden;
}
.news-page-hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center top, rgba(201, 168, 76, 0.08) 0%, transparent 60%);
pointer-events: none;
}
.news-page-hero::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: min(60%, 500px);
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--color-gold) 50%, transparent 100%);
opacity: 0.4;
}
.news-page-hero__inner {
position: relative;
z-index: 2;
}
.news-page-hero .breadcrumb {
display: flex;
justify-content: center;
}
.news-page-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.news-page-hero__eyebrow-line {
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.news-page-hero__title {
font-family: var(--font-serif);
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: var(--fw-medium);
line-height: var(--lh-tight);
color: var(--color-navy);
margin: 0 0 var(--space-3) 0;
letter-spacing: -0.02em;
}
.news-page-hero__title-accent {
font-style: normal;
color: var(--color-gold-deep);
position: relative;
display: inline-block;
}
.news-page-hero__title-accent::after {
content: '';
position: absolute;
left: -3%;
right: -3%;
bottom: -0.12em;
height: 10px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
.news-page-hero__subtitle {
font-family: var(--font-serif);
font-size: clamp(1rem, 2vw, 1.25rem);
font-style: italic;
line-height: 1.7;
color: var(--color-text-soft);
margin: 0;
}
/* --------------------------------------------------------------------
콘텐츠 채널 통계 (4개 카드)
-------------------------------------------------------------------- */
.news-channels {
position: relative;
}
.news-channels__inner {
position: relative;
}
.news-channels__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.news-channels__eyebrow::before,
.news-channels__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.news-channels__title {
font-family: var(--font-serif);
font-size: var(--fs-3xl);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0 0 var(--space-3) 0;
letter-spacing: -0.01em;
text-align: center;
}
.news-channels__subtitle {
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
margin: 0 0 var(--space-9) 0;
text-align: center;
}
.news-channels__stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
max-width: 1100px;
margin: 0 auto;
}
@media (max-width: 800px) {
.news-channels__stats {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.news-channels__stats {
grid-template-columns: 1fr;
}
}
.news-channel-stat {
text-align: center;
padding: var(--space-5);
background: linear-gradient(135deg, var(--color-cream-soft) 0%, #FFFFFF 100%);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
transition: all var(--duration-normal) var(--ease-out);
}
.news-channel-stat:hover {
border-color: var(--color-gold-soft);
transform: translateY(-4px);
box-shadow: var(--shadow-sm);
}
.news-channel-stat__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background-color: var(--color-gold-mist);
color: var(--color-gold-deep);
margin-bottom: var(--space-3);
transition: all var(--duration-normal) var(--ease-out);
}
.news-channel-stat__icon svg {
width: 32px;
height: 32px;
}
.news-channel-stat__icon--ready {
background-color: transparent;
border: 1.5px dashed var(--color-text-mute);
color: var(--color-text-mute);
}
.news-channel-stat:hover .news-channel-stat__icon:not(.news-channel-stat__icon--ready) {
background-color: var(--color-gold);
color: var(--color-cream);
}
.news-channel-stat__num {
font-family: var(--font-display);
font-size: var(--fs-3xl);
font-style: italic;
font-weight: var(--fw-semibold);
color: var(--color-gold-deep);
margin: 0 0 var(--space-1) 0;
line-height: 1;
letter-spacing: -0.02em;
}
.news-channel-stat__label {
font-family: var(--font-serif);
font-size: var(--fs-base);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0 0 var(--space-1) 0;
letter-spacing: -0.01em;
}
.news-channel-stat__note {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-style: italic;
color: var(--color-text-mute);
margin: 0;
letter-spacing: 0.02em;
}
/* --------------------------------------------------------------------
소식 피드 (필터 + 그리드)
-------------------------------------------------------------------- */
.news-feed {
position: relative;
}
.news-feed__inner {
position: relative;
}
.news-feed__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.news-feed__eyebrow::before,
.news-feed__eyebrow::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.news-feed__title {
font-family: var(--font-serif);
font-size: var(--fs-3xl);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0 0 var(--space-3) 0;
letter-spacing: -0.01em;
text-align: center;
}
.news-feed__subtitle {
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
margin: 0 0 var(--space-7) 0;
text-align: center;
}
/* 필터 버튼 그룹 */
.news-feed__filters {
display: flex;
gap: var(--space-2);
justify-content: center;
flex-wrap: wrap;
margin-bottom: var(--space-7);
}
.news-filter {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background-color: #FFFFFF;
border: 1.5px solid var(--color-line);
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-out);
font-family: inherit;
}
.news-filter:hover {
border-color: var(--color-gold-soft);
transform: translateY(-1px);
}
.news-filter.is-active {
background-color: var(--color-navy);
border-color: var(--color-gold);
box-shadow: 0 0 0 1px var(--color-gold);
}
.news-filter__label {
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--color-navy);
letter-spacing: -0.005em;
transition: color var(--duration-fast) var(--ease-out);
}
.news-filter.is-active .news-filter__label {
color: var(--color-cream);
}
.news-filter__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
background-color: var(--color-gold-mist);
color: var(--color-gold-deep);
border-radius: var(--radius-full);
font-family: var(--font-display);
font-size: 11px;
font-weight: var(--fw-medium);
font-style: italic;
}
.news-filter.is-active .news-filter__count {
background-color: var(--color-gold);
color: var(--color-navy);
}
/* 카드 그리드 */
.news-feed__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--space-5);
max-width: 1200px;
margin: 0 auto;
}
.news-feed__empty {
text-align: center;
padding: var(--space-9) var(--space-5);
color: var(--color-text-mute);
font-style: italic;
font-size: var(--fs-md);
}
/* News 페이지 카드 */
.news-feed-card {
display: flex;
flex-direction: column;
background: linear-gradient(135deg, #FFFFFF 0%, var(--color-cream-soft) 100%);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
padding: var(--space-6);
text-decoration: none;
color: inherit;
transition: all var(--duration-normal) var(--ease-out);
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(20px);
}
.news-feed-card.is-visible {
opacity: 1;
transform: translateY(0);
}
.news-feed-card:not(.news-feed-card--ready):hover {
transform: translateY(-4px);
border-color: var(--color-gold);
box-shadow: var(--shadow-lg);
}
.news-feed-card--featured {
border-color: var(--color-gold-soft);
}
.news-feed-card--featured::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-gold-soft) 50%, var(--color-gold) 100%);
}
.news-feed-card--ready {
cursor: default;
opacity: 0.85;
}
.news-feed-card--ready.is-visible {
opacity: 0.85;
}
/* 헤더 */
.news-feed-card__header {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--color-line);
}
.news-feed-card__icon {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--color-gold-mist);
color: var(--color-gold-deep);
transition: all var(--duration-fast) var(--ease-out);
}
.news-feed-card__icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.news-feed-card:not(.news-feed-card--ready):hover .news-feed-card__icon {
background-color: var(--color-gold);
color: var(--color-cream);
}
.news-feed-card__header-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.news-feed-card__type {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
margin: 0;
}
.news-feed-card__status {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-display);
font-size: 10px;
font-weight: var(--fw-medium);
font-style: italic;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.news-feed-card__status-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background-color: currentColor;
}
.news-feed-card__status--active {
color: var(--color-gold-deep);
}
.news-feed-card__status--active .news-feed-card__status-dot {
animation: workCardPulse 2s ease-in-out infinite;
}
.news-feed-card__status--ready {
color: var(--color-text-mute);
}
/* 본문 */
.news-feed-card__body {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.news-feed-card__category {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-style: italic;
letter-spacing: var(--ls-wide);
color: var(--color-gold-deep);
margin: 0;
}
.news-feed-card__title {
font-family: var(--font-serif);
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0;
letter-spacing: -0.01em;
line-height: var(--lh-tight);
}
.news-feed-card__description {
font-size: var(--fs-sm);
line-height: var(--lh-relaxed);
color: var(--color-text-soft);
margin: 0;
flex: 1;
}
/* 메타 정보 */
.news-feed-card__meta {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin: var(--space-2) 0 0 0;
padding: var(--space-3);
background-color: rgba(248, 245, 238, 0.6);
border-radius: var(--radius-md);
}
.news-feed-card__meta-item {
display: grid;
grid-template-columns: 60px 1fr;
gap: var(--space-3);
align-items: baseline;
margin: 0;
}
.news-feed-card__meta-item dt {
font-family: var(--font-display);
font-size: 11px;
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-gold-deep);
}
.news-feed-card__meta-item dd {
font-size: 12px;
color: var(--color-text);
margin: 0;
line-height: 1.4;
}
/* 푸터 */
.news-feed-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--color-line);
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-gold-deep);
}
.news-feed-card--ready .news-feed-card__footer {
color: var(--color-text-mute);
}
.news-feed-card__arrow {
font-size: var(--fs-md);
transition: transform var(--duration-fast) var(--ease-out);
}
.news-feed-card:not(.news-feed-card--ready):hover .news-feed-card__arrow {
transform: translate(2px, -2px);
}
/* --------------------------------------------------------------------
유튜브 안내 섹션
-------------------------------------------------------------------- */
.news-youtube {
position: relative;
}
.news-youtube__inner {
position: relative;
}
.news-youtube__content {
text-align: center;
padding: var(--space-9) var(--space-7);
background: linear-gradient(135deg, var(--color-cream-soft) 0%, #FFFFFF 100%);
border: 1px solid var(--color-gold-soft);
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
}
.news-youtube__content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-gold-soft) 50%, var(--color-gold) 100%);
}
.news-youtube__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: var(--color-gold-mist);
color: var(--color-gold-deep);
margin-bottom: var(--space-5);
}
.news-youtube__icon svg {
width: 56px;
height: 56px;
}
.news-youtube__eyebrow {
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold-deep);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-3) 0;
}
.news-youtube__title {
font-family: var(--font-serif);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: var(--fw-semibold);
color: var(--color-navy);
margin: 0 0 var(--space-3) 0;
letter-spacing: -0.01em;
}
.news-youtube__description {
font-family: var(--font-serif);
font-size: var(--fs-md);
font-style: italic;
line-height: 1.7;
color: var(--color-text-soft);
margin: 0 0 var(--space-7) 0;
}
/* 첫 영상 티저 */
.news-youtube__teaser {
max-width: 400px;
margin: 0 auto var(--space-7);
padding: var(--space-5);
background-color: var(--color-navy);
border-radius: var(--radius-md);
position: relative;
}
.news-youtube__teaser-label {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-2) 0;
}
.news-youtube__teaser-text {
font-family: var(--font-serif);
font-size: var(--fs-md);
line-height: 1.6;
color: var(--color-cream);
margin: 0;
}
.news-youtube__teaser-text em {
font-style: italic;
color: var(--color-gold);
font-weight: var(--fw-medium);
}
.news-youtube__actions {
display: flex;
justify-content: center;
}
/* --------------------------------------------------------------------
News CTA
-------------------------------------------------------------------- */
.news-cta {
position: relative;
background-color: var(--color-navy);
color: var(--color-text-on-navy);
padding: clamp(4rem, 8vw, 6rem) 0;
overflow: hidden;
text-align: center;
}
.news-cta::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 0%, rgba(201, 168, 76, 0.1) 0%, transparent 60%);
pointer-events: none;
}
.news-cta::after {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(60%, 500px);
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--color-gold) 50%, transparent 100%);
opacity: 0.5;
}
.news-cta__inner {
position: relative;
z-index: 2;
}
.news-cta__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--color-gold);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin: 0 0 var(--space-4) 0;
}
.news-cta__eyebrow-line {
display: inline-block;
width: 32px;
height: 1px;
background-color: var(--color-gold);
}
.news-cta__title {
font-family: var(--font-serif);
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: var(--fw-medium);
line-height: var(--lh-tight);
color: var(--color-cream);
margin: 0 0 var(--space-5) 0;
letter-spacing: -0.01em;
}
.news-cta__title-accent {
font-style: normal;
color: var(--color-gold);
position: relative;
display: inline-block;
}
.news-cta__title-accent::after {
content: '';
position: absolute;
left: -3%;
right: -3%;
bottom: -0.12em;
height: 8px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
.news-cta__description {
font-family: var(--font-serif);
font-size: clamp(1rem, 2vw, 1.125rem);
font-style: italic;
line-height: 1.8;
color: rgba(248, 245, 238, 0.85);
margin: 0 0 var(--space-7) 0;
}
.news-cta__actions {
display: flex;
gap: var(--space-4);
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 480px) {
.news-cta__actions {
flex-direction: column;
align-items: stretch;
}
}