@charset "UTF-8";
/**
 * SOVAC Design System
 * Figma 시안(시안a_콘텐츠 수정)에서 추출한 디자인 토큰 및 컴포넌트 규격
 *
 * 기준 해상도: 1920px (콘텐츠 영역 1280px)
 * 폰트: Pretendard
 * 최종 업데이트: 2026-03-06
 */

/* ============================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ============================================================ */
:root {
    /* ── 색상: 브랜드 ── */
    --color-primary:          #460082;   /* 메인 브랜드 퍼플 */
    --color-primary-light:    #fbf6ff;   /* 태그/배지 배경, 카드 배경 */
    --color-primary-bg:       #faf4ff;   /* 섹션 배경 (연보라) */

    /* ── 색상: 텍스트 ── */
    --color-text-primary:     #1c1c1c;   /* 본문, 제목 */
    --color-text-secondary:   #494949;   /* 부제목, 설명문 */
    --color-text-tertiary:    #7b7b7b;   /* 보조 텍스트, 날짜 */
    --color-text-meta:        #585858;   /* 작성자 */
    --color-text-light:       #b9b9b9;   /* 조회수, 날짜(연한) */
    --color-text-placeholder: #cacaca;   /* 입력 placeholder */

    /* ── 색상: 배경 ── */
    --color-bg-primary:       #ffffff;
    --color-bg-secondary:     #fafafa;   /* 카드 배경, 푸터 배경 */
    --color-bg-dark:          #1c1c1c;   /* 다크 카드 (Salon) */
    --color-bg-cta:           #9effb8;   /* CTA 배너 (그린) */

    /* ── 색상: 상태/강조 ── */
    --color-danger:           #fb2f6c;   /* D-day 텍스트 */
    --color-danger-bg:        #ffdada;   /* D-day 배경 */

    /* ── 색상: 보더/구분선 ── */
    --color-border-default:   #d4d4d4;   /* 입력필드 보더 */
    --color-border-dark:      #1c1c1c;   /* 헤더 하단선 */
    --color-border-card:      #000000;   /* 커뮤니티 카드 보더 */
    --color-divider:          #e4e4e4;   /* 섹션 구분선, 비활성 닷 */

    /* ── 타이포그래피 ── */
    --font-family:            'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-family-accent:     'Borel', cursive;  /* Salon 로고 전용 */

    /* ── 폰트 사이즈 ── */
    --text-xs:    12px;   /* 태그, 메타 정보 */
    --text-sm:    14px;   /* 상태 텍스트, 작은 본문 */
    --text-base:  16px;   /* 본문, 네비게이션, 버튼 */
    --text-lg:    18px;   /* 카드 부제목, 설명문 */
    --text-xl:    20px;   /* 카드 제목, 섹션 날짜 */
    --text-2xl:   24px;   /* 중간 제목 */
    --text-3xl:   32px;   /* 섹션 제목, 구독 CTA 제목 */
    --text-4xl:   36px;   /* 악센트 폰트 (Salon) */

    /* ── 폰트 두께 ── */
    --font-regular:    400;
    --font-medium:     500;
    --font-semibold:   600;
    --font-bold:       700;
    --font-extrabold:  800;

    /* ── 줄높이 ── */
    --leading-tight:   1.2;     /* 제목 */
    --leading-normal:  1.44;    /* 본문 기본 */
    --leading-relaxed: 23px;    /* 태그, 설명문 고정 */
    --leading-body:    20px;    /* 본문 설명 */
    --leading-heading: 26px;    /* 커뮤니티 카드 제목 */
    --leading-cta:     41px;    /* 구독 CTA 제목 */

    /* ── 간격 (Spacing) ── */
    --space-1:    4px;
    --space-2:    8px;
    --space-3:    10px;
    --space-4:    12px;
    --space-5:    14px;
    --space-6:    16px;
    --space-7:    20px;
    --space-8:    24px;
    --space-9:    30px;
    --space-10:   32px;
    --space-11:   40px;
    --space-12:   80px;

    /* ── 레이아웃 ── */
    --layout-max-width:     1920px;  /* 전체 페이지 */
    --layout-content-width: 1280px;  /* 콘텐츠 영역 */
    --layout-sidebar-width: 320px;   /* 우측 사이드바 */
    --layout-main-gap:      32px;    /* 메인-사이드바 간격 */

    /* ── 섹션 간격 ── */
    --section-gap:          40px;    /* 섹션 간 간격 */
    --section-title-gap:    32px;    /* 섹션 제목-콘텐츠 간격 */
    --card-gap-lg:          24px;    /* 카드 간 간격 (대) */
    --card-gap-md:          20px;    /* 카드 간 간격 (중) */
    --card-gap-sm:          16px;    /* 카드 간 간격 (소) */

    /* ── 보더 반경 (Border Radius) ── */
    --radius-sm:    4px;    /* 태그 (filled) */
    --radius-md:    5px;    /* 버튼, 배지 (outlined) */
    --radius-lg:    6px;    /* 카드, 이미지 */
    --radius-xl:    12px;   /* 작은 썸네일 */
    --radius-full:  100px;  /* 환약(pill) 버튼, 페이지네이션 닷 */

    /* ── 그림자 ── */
    /* Figma 시안에서는 그림자 미사용 - 필요 시 추가 */

    /* ── 트랜지션 ── */
    --transition-default: 0.3s ease;
}


/* ============================================================
   2. TYPOGRAPHY SYSTEM
   ============================================================ */

/* 섹션 제목 */
.ds-heading-section {
    font-family: var(--font-family);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: #000000;
}

/* 카드 제목 (ExtraBold) */
.ds-heading-card {
    font-family: var(--font-family);
    font-size: var(--text-xl);
    font-weight: var(--font-extrabold);
    line-height: var(--leading-tight);
    color: #000000;
}

/* 카드 부제목 */
.ds-heading-card-sub {
    font-family: var(--font-family);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    line-height: normal;
    color: var(--color-text-primary);
}

/* 본문 */
.ds-body {
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

/* 설명문 (카드 내) */
.ds-description {
    font-family: var(--font-family);
    font-size: var(--text-lg);
    font-weight: var(--font-regular);
    line-height: var(--leading-relaxed);
    color: var(--color-text-tertiary);
}

/* 메타 정보 (날짜, 조회수) */
.ds-meta {
    font-family: var(--font-family);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: normal;
    color: var(--color-text-light);
}

/* 네비게이션 */
.ds-nav {
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: normal;
    color: var(--color-text-primary);
}

/* Impact Daily 날짜 */
.ds-accent-date {
    font-family: var(--font-family);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    line-height: normal;
    color: var(--color-primary);
    text-align: center;
}


/* ============================================================
   3. COMPONENT STYLES
   ============================================================ */

/* ── 3.1 버튼 ── */

/* Primary Button (채움) */
.ds-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-5);  /* 10px 14px */
    background-color: var(--color-primary);
    color: #ffffff;
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: normal;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: opacity var(--transition-default);
    text-decoration: none;
}
.ds-btn-primary:hover {
    opacity: 0.9;
}

/* Secondary Button (테두리 - 환약형) */
.ds-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: 2px var(--space-3);  /* 2px 10px */
    background-color: var(--color-bg-primary);
    color: var(--color-primary);
    font-family: var(--font-family);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    line-height: var(--leading-relaxed);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color var(--transition-default);
    text-decoration: none;
}
.ds-btn-secondary:hover {
    background-color: var(--color-primary-light);
}

/* Light Button (사이드바 입장하기) */
.ds-btn-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-5);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: var(--font-semibold);
    line-height: normal;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
}


/* ── 3.2 태그 / 배지 ── */

/* Filled Tag (기본) */
.ds-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px var(--space-3);
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    font-family: var(--font-family);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: var(--leading-relaxed);
    border-radius: var(--radius-sm);
    overflow: hidden;
    white-space: nowrap;
}

/* D-day Tag (위험/긴급) */
.ds-tag-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px var(--space-3);
    background-color: var(--color-danger-bg);
    color: var(--color-danger);
    font-family: var(--font-family);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: var(--leading-relaxed);
    border-radius: var(--radius-sm);
    overflow: hidden;
    white-space: nowrap;
}

/* Outlined Badge (파트너 기관명, 카테고리) */
.ds-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px var(--space-3);
    background-color: var(--color-bg-primary);
    color: var(--color-primary);
    font-family: var(--font-family);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: var(--leading-relaxed);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
    white-space: nowrap;
}

/* 상태 닷 (진행중) */
.ds-status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-primary);
    /* 옆에 텍스트: font-size 14px, SemiBold, color primary */
}


/* ── 3.3 카드 ── */

/* 기본 카드 (이미지 + 텍스트) */
.ds-card {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap-md);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* 카드 이미지 컨테이너 */
.ds-card-image {
    width: 100%;
    height: 240px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-bg-primary);
}
.ds-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 카드 본문 */
.ds-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* 배경 카드 (fafafa) - Impact Daily 아이템 */
.ds-card-bg {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--card-gap-md);
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
}

/* SOVAC Now 분할 카드 */
.ds-card-split {
    display: flex;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.ds-card-split-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-10);
    background-color: var(--color-primary-light);
}
.ds-card-split-right {
    flex: 1;
    overflow: hidden;
    background-color: var(--color-bg-primary);
}

/* 커뮤니티 카드 (보더 있는) */
.ds-card-bordered {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding: var(--space-8);
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-lg);
}

/* 사이드바 다크 카드 (Salon) */
.ds-card-dark {
    position: relative;
    width: 100%;
    height: 180px;
    padding: var(--space-8);
    background-color: var(--color-bg-dark);
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: #ffffff;
}

/* 사이드바 CTA 배너 카드 */
.ds-card-cta {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 114px;
    padding: var(--space-8);
    background-color: var(--color-bg-cta);
    border-radius: var(--radius-lg);
    overflow: hidden;
}


/* ── 3.4 리스트 아이템 ── */

/* 리스트 아이템 (텍스트 + 우측 썸네일) */
.ds-list-item {
    display: flex;
    gap: var(--card-gap-md);
    align-items: flex-start;
}
.ds-list-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.ds-list-item-thumb {
    width: 94px;
    height: 94px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    flex-shrink: 0;
    background-color: var(--color-bg-primary);
}
/* Original 섹션 - 큰 썸네일 */
.ds-list-item-thumb-lg {
    width: 160px;
    height: 160px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    flex-shrink: 0;
    background-color: var(--color-bg-primary);
}


/* ── 3.5 구분선 ── */
.ds-divider {
    width: 100%;
    height: 0;
    border: none;
    border-top: 1px solid var(--color-divider);
}
.ds-divider-dark {
    width: 100%;
    height: 0;
    border: none;
    border-top: 1px solid var(--color-border-card);
}


/* ── 3.6 페이지네이션 닷 ── */
.ds-pagination {
    display: flex;
    gap: var(--space-1);
    align-items: center;
}
.ds-pagination-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background-color: var(--color-divider);
}
.ds-pagination-dot.active {
    width: 16px;
    background-color: var(--color-primary);
}


/* ── 3.7 입력 필드 ── */
.ds-input {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px var(--space-6);
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
}
.ds-input::placeholder {
    color: var(--color-text-placeholder);
}
.ds-input-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px var(--space-6);
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
    cursor: pointer;
}


/* ── 3.8 네비게이션 ── */
.ds-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: var(--layout-content-width);
    margin: 0 auto;
    padding: 18px 0;
    border-bottom: 3px solid var(--color-border-dark);
}
.ds-nav-links {
    display: flex;
    align-items: center;
    gap: var(--card-gap-md);
}


/* ============================================================
   4. LAYOUT SYSTEM
   ============================================================ */

/* 페이지 래퍼 */
.ds-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--section-gap);
    width: 100%;
    background-color: var(--color-bg-primary);
}

/* 콘텐츠 영역 */
.ds-container {
    width: var(--layout-content-width);
    margin: 0 auto;
}

/* 2컬럼 레이아웃 (메인 + 사이드바) */
.ds-layout-2col {
    display: flex;
    gap: var(--layout-main-gap);
    width: var(--layout-content-width);
}
.ds-layout-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}
.ds-layout-sidebar {
    width: var(--layout-sidebar-width);
    display: flex;
    flex-direction: column;
    gap: var(--card-gap-md);
}

/* 섹션 */
.ds-section {
    display: flex;
    flex-direction: column;
    gap: var(--section-title-gap);
    width: 100%;
}

/* 섹션 헤더 (제목 + "전체보기" 링크) */
.ds-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.ds-section-header-link {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
    text-decoration: none;
}

/* 그리드 */
.ds-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--card-gap-sm);
}
.ds-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--card-gap-md);
}

/* 구독 CTA 섹션 */
.ds-subscribe-section {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: var(--layout-content-width);
    margin: 0 auto;
    padding: var(--section-gap) 0;
    border-top: 1px solid var(--color-border-card);
    border-bottom: 1px solid var(--color-border-card);
}
.ds-subscribe-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-end;
    width: 500px;
}


/* ============================================================
   5. SECTION PATTERNS (Figma 시안 기준)
   ============================================================ */

/* Impact Daily 섹션 */
/* - 날짜(20px Bold primary) | 세로선 | "IMPACT DAILY" (20px SemiBold)
   - 제목 (32px Bold)
   - 2분할: 좌=이미지(600x406, radius 6), 우=기사 리스트
   - 기사 아이템: bg #fafafa, padding 20px, radius 6px */

/* SOVAC Now 섹션 */
/* - 제목: "SOVAC Now" (32px Bold)
   - 분할 카드: 좌=bg primary-light, 우=이미지
   - 상태: 닷 + "진행중" (14px SemiBold primary) + 기간
   - CTA 버튼: primary filled */

/* SOVAC Insight 섹션 */
/* - 제목: "SOVAC Insight" (32px Bold)
   - 상단 2열 카드 (이미지 240px + 본문)
   - 하단 리스트 (텍스트 + 94px 썸네일)
   - 구분선 사이 */

/* SOVAC Together 섹션 */
/* - 제목: "SOVAC Together" (32px Bold)
   - 3열 카드: 이미지(240px) + 파트너 배지 + 제목 + 설명 */

/* SOVAC Community 섹션 */
/* - 헤더: 제목 + "전체보기" 링크
   - 좌측: 안내문 (24px Bold) + 페이지네이션 닷
   - 우측: 카로셀 카드 (border black, padding 24px)
   - 카드: 이미지 + 태그 + 제목 + 메타 */

/* SOVAC Original 섹션 */
/* - 헤더: 제목 + "전체보기" 링크
   - 리스트: 카테고리 태그 + 제목 + 설명 + 160px 썸네일
   - 구분선 사이 */

/* 구독 섹션 */
/* - 좌: 로고 + "SOVAC 구독을 통해..." (32px ExtraBold, line-height 41px)
   - 우: 이메일 입력 + 이름 입력 + 셀렉트 + 구독 버튼 */

/* 푸터 */
/* - 전체 너비 bg #fafafa
   - 높이 377px
   - 핵심 파트너 전광판 배너 영역 */