/* ===================================================================
   정음 웹사이트 디자인 시스템
   통합된 컬러, 타이포그래피, 스페이싱, 컴포넌트 스타일
   =================================================================== */


/* ===================================================================
   CSS 변수 정의
   =================================================================== */

:root {
    /* -----------------------------------------------------------------
       컬러 시스템
       ----------------------------------------------------------------- */
    
    /* 기본 컬러 */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-transparent: #ffffff00;
    
    /* 정음 브랜드 컬러 */
    --color-jungeum-orange: #FF624C;
    --color-jungeum-yellow: #F2A32A;
    --color-jungeum-blue: #272A6D;
    --color-jungeum-brick: #742D29;
    --color-jungeum-warm-white: #F7F5F0;
    
    /* 웜 그레이 컬러 */
    --color-warm-grey-10: #F7F3F2;
    --color-warm-grey-20: #E5E0DF;
    --color-warm-grey-30: #CAC5C4;
    --color-warm-grey-40: #ADA8A8;
    --color-warm-grey-60: #726E6E;
    --color-warm-grey-70: #565151;
    --color-warm-grey-100: #171414;
    
    /* 텍스트 컬러 */
    --text-primary: var(--color-warm-grey-100);
    --text-secondary: var(--color-warm-grey-70);
    --text-tertiary: var(--color-warm-grey-60);
    --text-inverse: var(--color-white);
    
    /* 배경 컬러 */
    --bg-primary: var(--color-jungeum-warm-white);
    --bg-secondary: var(--color-white);
    --bg-dark: var(--color-warm-grey-100);
    
    /* 액센트 컬러 */
    --accent-primary: var(--color-jungeum-orange);
    --accent-secondary: var(--color-jungeum-yellow);
    --accent-tertiary: var(--color-jungeum-blue);
    
    /* 보더 컬러 */
    --border-light: var(--color-warm-grey-20);
    --border-medium: var(--color-warm-grey-40);
    --border-dark: var(--color-warm-grey-60);
    --border-very-dark: var(--color-warm-grey-100);
    
    /* 상태 컬러 */
    --color-success: #10B981;
    --color-success-light: #D1FAE5;
    --color-success-dark: #065F46;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-error-light: #FEE2E2;
    --color-error-dark: #991B1B;
    --color-info: #3B82F6;
    
    /* -----------------------------------------------------------------
       타이포그래피
       ----------------------------------------------------------------- */
    
    /* Font Family */
    --font-family-regular: "JASOSansRegular", "Pretendard Variable", -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-bold: "JASOSansBold", "Pretendard Variable", -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    
    /* Font Size */
    --font-size-9xl: 8rem;        /* 128px - display-2 */
    --font-size-8xl: 6.25rem;     /* 100px - display-1 */
    --font-size-7xl: 5rem;        /* 80px  - h1 */
    --font-size-6xl: 4rem;        /* 64px  - h2 */
    --font-size-5xl: 3rem;        /* 48px  - h3 */
    --font-size-4xl: 2rem;        /* 32px  - h4 */
    --font-size-3xl: 1.75rem;     /* 28px  - h5 */
    --font-size-2xl: 1.5rem;      /* 24px  - h6 */
    --font-size-xl: 1.25rem;      /* 20px  - body xlg */
    --font-size-lg: 1.125rem;     /* 18px  - body lg */
    --font-size-base: 1rem;       /* 16px  - body md */
    --font-size-sm: 0.875rem;     /* 14px  - body sm */
    
    /* Letter Spacing */
    --letter-spacing-tighter: -0.05em;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0em;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;
    --letter-spacing-display: -0.02em;
    --letter-spacing-heading: -0.01em;
    
    /* Font Weight */
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    
    /* Line Height */
    --line-height-none: 1;
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-snug: 1.4;
    --line-height-loose: 1.6;
    --line-height-relaxed: 1.8;
        
    /* -----------------------------------------------------------------
       간격 시스템
       ----------------------------------------------------------------- */
    
    /* 정규 스케일 */
    --spacing-0: 0;
    --spacing-1: 0.25rem;         /* 4px */
    --spacing-2: 0.5rem;          /* 8px */
    --spacing-2-5: 0.625rem;      /* 10px - 모바일 전역 패딩 */
    --spacing-3: 0.75rem;         /* 12px */
    --spacing-4: 1rem;            /* 16px */
    --spacing-5: 1.25rem;         /* 20px */
    --spacing-6: 1.5rem;          /* 24px */
    --spacing-8: 2rem;            /* 32px */
    --spacing-10: 2.5rem;         /* 40px */
    --spacing-12: 3rem;           /* 48px */
    --spacing-15: 3.75rem;        /* 60px */
    --spacing-16: 4rem;           /* 64px */
    --spacing-20: 5rem;           /* 80px */
    --spacing-24: 6rem;           /* 96px */
    --spacing-28: 7.25rem;        /* 116px - 푸터 전용 패딩 */
    --spacing-30: 7.5rem;         /* 120px - 2열 레이아웃 간격 */
    --spacing-32: 8rem;           /* 128px - 대형 섹션 간격 */
    --spacing-33: 8.25rem;        /* 132px - 스토리 히어로 헤드라인 간격 */
    --spacing-40: 10rem;          /* 160px - 스토리 페이지 섹션 간격 */
    
    /* Legacy Spacing (하위 호환 - 현재 사용 중) */
    --spacing-xs: var(--spacing-1);      /* 4px */
    --spacing-sm: var(--spacing-2);      /* 8px */
    --spacing-md: var(--spacing-4);      /* 16px */
    --spacing-lg: var(--spacing-6);      /* 24px */
    --spacing-xl: var(--spacing-8);      /* 32px */
    --spacing-xxl: var(--spacing-10);    /* 40px */
    --spacing-2xl: var(--spacing-12);    /* 48px */
    --spacing-3xl: var(--spacing-16);    /* 64px */
    --spacing-4xl: var(--spacing-24);    /* 96px */
    --spacing-5xl: var(--spacing-32);    /* 128px */
    
    /* -----------------------------------------------------------------
       버튼 시스템
       ----------------------------------------------------------------- */
    
    --btn-height-large: 4rem;         /* 64px */
    --btn-height-medium: 3.25rem;     /* 52px */
    --btn-height-small: 2.5rem;       /* 40px */
    --btn-padding-medium: 2rem;       /* 32px */
    --btn-padding-small: 1rem;        /* 16px */
    --btn-gap-small: 0.375rem;        /* 6px */

    /* -----------------------------------------------------------------
       브레이크포인트
       ----------------------------------------------------------------- */
    
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1200px;
    --bp-xl: 1440px;
}


/* ===================================================================
   타이포그래피 클래스
   =================================================================== */

/* Headings */
.heading-h1 {
    /* 모바일 48px → 데스크탑 80px (360px ~ 1440px 기준 선형 보간) */
    /* 태블릿 구간에서 크기 제한: 769px ~ 1199px 구간에서 최대 64px */
    font-size: clamp(3rem, calc(3rem + 32 * (100vw - 22.5rem) / 67.5), 5rem); /* 48px → 80px */
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-heading);
}

/* 태블릿 구간: heading-h1 크기 제한 */
@media (min-width: 769px) and (max-width: 1199px) {
    .heading-h1 {
        /* 태블릿 구간에서 최대 64px로 제한 (모바일 48px → 태블릿 64px → 데스크탑 80px) */
        font-size: clamp(3rem, calc(3rem + 16 * (100vw - 48rem) / 42), 4rem); /* 48px → 64px (769px ~ 1199px) */
    }
}

.heading-h2 {
    /* 모바일 32px → 데스크탑 64px (360px ~ 1440px 기준 선형 보간) */
    /* 태블릿 구간에서 크기 제한: 769px ~ 1199px 구간에서 최대 48px */
    font-size: clamp(2rem, calc(2rem + 32 * (100vw - 22.5rem) / 67.5), 4rem); /* 32px → 64px */
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-heading);
}

/* 태블릿 구간: heading-h2 크기 제한 */
@media (min-width: 769px) and (max-width: 1199px) {
    .heading-h2 {
        /* 태블릿 구간에서 최대 48px로 제한 (모바일 32px → 태블릿 48px → 데스크탑 64px) */
        font-size: clamp(2rem, calc(2rem + 16 * (100vw - 48rem) / 42), 3rem); /* 32px → 48px (769px ~ 1199px) */
    }
}

.heading-h3 {
    /* 모바일 32px → 데스크탑 48px (360px ~ 1440px 기준 선형 보간) */
    /* 태블릿 구간에서 크기 제한: 769px ~ 1199px 구간에서 최대 40px */
    font-size: clamp(2rem, calc(2rem + 16 * (100vw - 22.5rem) / 67.5), 3rem); /* 32px → 48px */
    line-height: var(--line-height-snug); /* 1.4로 변경 (기존 1.2에서 조정) */
    letter-spacing: var(--letter-spacing-heading);
}

/* 태블릿 구간: heading-h3 크기 제한 */
@media (min-width: 769px) and (max-width: 1199px) {
    .heading-h3 {
        /* 태블릿 구간에서 최대 40px로 제한 (모바일 32px → 태블릿 40px → 데스크탑 48px) */
        font-size: clamp(2rem, calc(2rem + 8 * (100vw - 48rem) / 42), 2.5rem); /* 32px → 40px (769px ~ 1199px) */
    }
}

.heading-h4 {
    /* 고정값 (의도적으로 반응형 없음) */
    font-size: var(--font-size-4xl); /* 32px - 고정 */
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-heading);
}

.heading-h5 {
    /* 모바일 22px → 데스크탑 28px (360px ~ 1440px 기준 선형 보간) */
    font-size: clamp(1.375rem, calc(1.375rem + 6 * (100vw - 22.5rem) / 67.5), 1.75rem); /* 22px → 28px */
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-heading);
}

.heading-h6 {
    /* 모바일 20px → 데스크탑 24px (360px ~ 1440px 기준 선형 보간) */
    font-size: clamp(1.25rem, calc(1.25rem + 4 * (100vw - 22.5rem) / 67.5), 1.5rem); /* 20px → 24px */
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-heading);
}

/* Headings Emphasized */
.heading-h1-emphasized {
    /* 모바일 48px → 데스크탑 80px (360px ~ 1440px 기준 선형 보간) */
    font-size: clamp(3rem, calc(3rem + 32 * (100vw - 22.5rem) / 67.5), 5rem); /* 48px → 80px */
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-heading);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-bold);
}

/* 태블릿 구간: heading-h1-emphasized 크기 제한 */
@media (min-width: 769px) and (max-width: 1199px) {
    .heading-h1-emphasized {
        /* 태블릿 구간에서 최대 64px로 제한 (모바일 48px → 태블릿 64px → 데스크탑 80px) */
        font-size: clamp(3rem, calc(3rem + 16 * (100vw - 48rem) / 42), 4rem); /* 48px → 64px (769px ~ 1199px) */
    }
}

.heading-h2-emphasized {
    /* 모바일 32px → 데스크탑 64px (360px ~ 1440px 기준 선형 보간) */
    /* 태블릿 구간에서 크기 제한: 769px ~ 1199px 구간에서 최대 48px */
    font-size: clamp(2rem, calc(2rem + 32 * (100vw - 22.5rem) / 67.5), 4rem); /* 32px → 64px */
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-heading);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-bold);
}

/* 태블릿 구간: heading-h2-emphasized 크기 제한 */
@media (min-width: 769px) and (max-width: 1199px) {
    .heading-h2-emphasized {
        /* 태블릿 구간에서 최대 48px로 제한 (모바일 32px → 태블릿 48px → 데스크탑 64px) */
        font-size: clamp(2rem, calc(2rem + 16 * (100vw - 48rem) / 42), 3rem); /* 32px → 48px (769px ~ 1199px) */
    }
}

.heading-h3-emphasized {
    /* 모바일 32px → 데스크탑 48px (360px ~ 1440px 기준 선형 보간) */
    /* 태블릿 구간에서 크기 제한: 769px ~ 1199px 구간에서 최대 40px */
    font-size: clamp(2rem, calc(2rem + 16 * (100vw - 22.5rem) / 67.5), 3rem); /* 32px → 48px */
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-heading);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-bold);
}

/* 태블릿 구간: heading-h3-emphasized 크기 제한 */
@media (min-width: 769px) and (max-width: 1199px) {
    .heading-h3-emphasized {
        /* 태블릿 구간에서 최대 40px로 제한 (모바일 32px → 태블릿 40px → 데스크탑 48px) */
        font-size: clamp(2rem, calc(2rem + 8 * (100vw - 48rem) / 42), 2.5rem); /* 32px → 40px (769px ~ 1199px) */
    }
}

.heading-h4-emphasized {
    /* 고정값 (의도적으로 반응형 없음) */
    font-size: var(--font-size-4xl); /* 32px - 고정 */
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-heading);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-bold);
}

.heading-h5-emphasized {
    /* 모바일 22px → 데스크탑 28px (360px ~ 1440px 기준 선형 보간) */
    font-size: clamp(1.375rem, calc(1.375rem + 6 * (100vw - 22.5rem) / 67.5), 1.75rem); /* 22px → 28px */
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-heading);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-bold);
}

.heading-h6-emphasized {
    /* 모바일 20px → 데스크탑 24px (360px ~ 1440px 기준 선형 보간) */
    font-size: clamp(1.25rem, calc(1.25rem + 4 * (100vw - 22.5rem) / 67.5), 1.5rem); /* 20px → 24px */
    line-height: var(--line-height-snug); /* 1.4로 변경 (기존 1.8에서 조정) */
    letter-spacing: var(--letter-spacing-heading);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-bold);
}

/* Display */
.display-1 {
    /* 모바일 64px → 데스크탑 100px (360px ~ 1440px 기준 선형 보간) */
    /* 태블릿 구간에서 크기 제한: 769px ~ 1199px 구간에서 최대 80px */
    font-size: clamp(4rem, calc(4rem + 36 * (100vw - 22.5rem) / 67.5), 6.25rem); /* 64px → 100px */
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-display);
}

/* 태블릿 구간: display-1 크기 제한 */
@media (min-width: 769px) and (max-width: 1199px) {
    .display-1 {
        /* 태블릿 구간에서 최대 80px로 제한 (모바일 64px → 태블릿 80px → 데스크탑 100px) */
        font-size: clamp(4rem, calc(4rem + 16 * (100vw - 48rem) / 42), 5rem); /* 64px → 80px (769px ~ 1199px) */
    }
}

.display-2 {
    /* 모바일 80px → 데스크탑 128px (360px ~ 1440px 기준 선형 보간) */
    /* 태블릿 구간에서 크기 제한: 769px ~ 1199px 구간에서 최대 100px */
    font-size: clamp(5rem, calc(5rem + 48 * (100vw - 22.5rem) / 67.5), 8rem); /* 80px → 128px */
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-display);
}

/* 태블릿 구간: display-2 크기 제한 */
@media (min-width: 769px) and (max-width: 1199px) {
    .display-2 {
        /* 태블릿 구간에서 최대 100px로 제한 (모바일 80px → 태블릿 100px → 데스크탑 128px) */
        font-size: clamp(5rem, calc(5rem + 20 * (100vw - 48rem) / 42), 6.25rem); /* 80px → 100px (769px ~ 1199px) */
    }
}

/* Body */
.body-xl {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-loose);
}

.body-lg {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-loose);
}

.body-md {
    font-size: var(--font-size-base);
    line-height: var(--line-height-loose);
}

.body-md-article {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
}

.body-sm {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-loose);
}

/* Body Emphasized */
.body-xl-emphasized {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-loose);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-bold);
}

.body-lg-emphasized {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-loose);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-bold);
}

.body-md-emphasized {
    font-size: var(--font-size-base);
    line-height: var(--line-height-loose);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-bold);
}

.body-md-article-emphasized {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-bold);
}

.body-sm-emphasized {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-loose);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-bold);
}

/* Label */
.label-lb1 {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-tight);
}

/* Font Weight Utilities */
.font-weight-bold {
    font-weight: var(--font-weight-bold);
}

.font-weight-normal {
    font-weight: var(--font-weight-normal);
}


/* ===================================================================
   Legal 페이지 공통 레이아웃
   이용약관(terms.php) 및 개인정보처리방침(privacy.php) 페이지 전용 스타일
   =================================================================== */

.legal-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

.legal-section h2 {
    margin: 0;
}

.legal-section p {
    margin: 0;
}

/* legal-article-title: 약관 조항 헤드라인 전용 훅 (필요 시 스타일 추가) */
/* legal-section .legal-lead: 필요 시 별도 스타일 훅 (필요 시 스타일 추가) */

.legal-list,
.legal-section > ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    padding-left: 1em;
    margin: 0 0 var(--spacing-5) 0;
}

.legal-sublist,
.legal-section ul ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding-left: 0.75em;
    margin: 0 0 var(--spacing-2) 0;
}

.legal-list--decimal {
    gap: var(--spacing-2);
}

.legal-sublist > li > .legal-sublist {
    margin-top: var(--spacing-2);
}

.legal-sublist .legal-sublist {
    gap: var(--spacing-2);
}

.legal-list,
.legal-list > li,
.legal-sublist,
.legal-sublist > li {
    font-size: inherit;
    line-height: inherit;
}

.legal-section p,
.legal-section li {
    line-height: var(--line-height-normal); /* 1.5 */
}

.legal-list--decimal > li > .legal-sublist {
    margin-top: var(--spacing-2);
}

.page-header--legal {
    margin-bottom: var(--spacing-10);
}

/* 번호 체계: 1), 2) ... */
.legal-list--decimal {
    counter-reset: legal-counter;
    padding-left: 0;
}

.legal-list.legal-list--decimal {
    padding-left: 0;
}

.legal-list--decimal > li {
    list-style: none;
    position: static;
    padding-left: 0;
}

.legal-list--decimal > li::before {
    counter-increment: legal-counter;
    content: counter(legal-counter) ".";
    position: static;
    display: inline-block;
    margin-right: 0.5em;
    color: var(--text-primary);
    font-size: inherit;
    line-height: inherit;
}

/* 서브목록: • 불릿 */
.legal-sublist--dot {
    padding-left: 0;
}

.legal-sublist--dot > li {
    list-style: none;
    position: static;
    padding-left: 0;
}

.legal-sublist--dot > li::before {
    content: "•";
    position: static;
    display: inline-block;
    margin-right: 0.5em;
    color: var(--text-primary);
}