/* =======================================================================
   base.css
======================================================================= */

/* ============================================================
   1. CSS 변수 정의 (Design Token)
============================================================ */
:root {
    /* --------------------------------------------------
       1-1. Primary 컬러 스케일
    -------------------------------------------------- */
    --color-primary-0   : #FFFFFF;
    --color-primary-5   : #EBF3FF;
    --color-primary-10  : #C7DEFF;
    --color-primary-20  : #8EC3FF;
    --color-primary-30  : #8FA0F5;
    --color-primary-40  : #4680E0;
    --color-primary-50  : #064ACB;
    --color-primary-60  : #0438A3;
    --color-primary-70  : #03297A;
    --color-primary-80  : #021D57;
    --color-primary-90  : #011235;
    --color-primary-100 : #000918;
    --color-primary       : var(--color-primary-50);
    --color-primary-hover : var(--color-primary-60);
    --color-primary-light : var(--color-primary-5);

    /* --------------------------------------------------
       1-2. Grayscale
    -------------------------------------------------- */
    --color-gray-0   : #FFFFFF;
    --color-gray-5   : #F8FAFC;
    --color-gray-10  : #F3F5F9;
    --color-gray-20  : #E2E8F0;
    --color-gray-30  : #CBD5E1;
    --color-gray-40  : #94A3B8;
    --color-gray-50  : #64748B;
    --color-gray-60  : #475569;
    --color-gray-70  : #334155;
    --color-gray-80  : #1E293B;
    --color-gray-90  : #0F172A;
    --color-gray-100 : #020617;

    /* --------------------------------------------------
       1-4. Alpha (흰 배경 On white 기준)
    -------------------------------------------------- */
    --color-alpha-10  : #E5E5E5;
    --color-alpha-25  : #BFBFBF;
    --color-alpha-50  : #808080;
    --color-alpha-75  : #404040;
    --color-alpha-100 : #000000;

    /* --------------------------------------------------
       1-5. 시맨틱 컬러 단축 변수
    -------------------------------------------------- */
    --color-text-primary   : #18243A;
    --color-text-body      : var(--color-gray-60);
    --color-text-secondary : var(--color-gray-50);
    --color-text-disabled  : var(--color-gray-50);
    --color-text-title-on-tint : #1A2E52;
    --color-text-white     : #FFFFFF;
    --color-bg-white  : #FFFFFF;
    --color-bg-gray   : var(--color-gray-5);
    --background-service-hero: linear-gradient(180deg, #FAFDFF 0%, #EEF8FF 58%, #E4F2FF 100%);
    --color-bg-service-process-light: #DBEFFD;
    --color-bg-dark   : var(--color-gray-80);
    --color-bg-footer : var(--color-gray-80);
    --color-border       : var(--color-gray-40);
    --color-border-light : var(--color-gray-30);

    /* --------------------------------------------------
       1-6. 상태 컬러 (State)
    -------------------------------------------------- */
    --color-success  : #10B981;
    --color-warning  : #F59E0B;
    --color-error    : #EF4444;
    --color-info     : var(--color-primary);

    /* --------------------------------------------------
       1-6-1. 아이콘 컬러 (역할별)
    -------------------------------------------------- */
    --color-icon-blue    : #064ACB;
    --color-icon-amber   : #F59E0B;
    --color-icon-emerald : #10B981;
    --color-icon-teal    : #0E7490;
    --color-icon-violet  : #7C3AED;
    --color-icon-red     : #EF4444;
    --color-icon-gray    : #64748B;
    --color-icon-pink    : #D41367;
    /* 회사소개 결제서비스 아이콘 컬러 C안 비교용 — 최종 미채택 */
    --color-icon-slate-blue : #334E75;

    /* --------------------------------------------------
       1-6-2. 아이콘 배경 컬러 (역할별)
    -------------------------------------------------- */
    --color-icon-bg-blue    : #EBF3FF;
    --color-icon-bg-amber   : #FFF8E6;
    --color-icon-bg-emerald : #E6FAF3;
    --color-icon-bg-teal    : #F0FDFA;
    --color-icon-bg-violet  : #F5F3FF;
    --color-icon-bg-red     : #FEF2F2;
    --color-icon-bg-gray    : #F3F5F9;
    --color-icon-bg-pink    : #FDF2F8;

    --color-service-blue: var(--color-icon-blue);
    --color-service-bg-blue: var(--color-icon-bg-blue);

    --color-service-amber: var(--color-icon-amber);
    --color-service-bg-amber: var(--color-icon-bg-amber);

    --color-service-mint: var(--color-icon-emerald);
    --color-service-bg-mint: var(--color-icon-bg-emerald);

    --color-service-pink: var(--color-icon-pink);
    --color-service-bg-pink: var(--color-icon-bg-pink);

    --color-service-violet: var(--color-icon-violet);
    --color-service-bg-violet: var(--color-icon-bg-violet);

    /* --------------------------------------------------
       1-7. 타이포그래피
    -------------------------------------------------- */
    --font-family       : 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-h1      : 3.5rem;
    --font-size-h2      : 2.75rem;
    --font-size-h2-tablet : 2.375rem;
    --font-size-h3      : 2rem;
    --font-size-h4      : 1.5rem;
    --font-size-h5      : 1.25rem;
    --font-size-h6      : 1.125rem;
    --font-size-service-hero-title: 3rem;
    --font-size-service-hero-title-mobile: 2rem;
    --font-size-service-section-title-mobile: 1.75rem;
    --font-size-service-process-title-mobile: 2rem;
    --font-size-service-hero-title-small: 1.875rem;
    --font-size-ui      : 1rem;
    --font-size-body-lg : 1.125rem;
    --font-size-body    : 1.125rem;
    --font-size-body-sm : 0.875rem;
    --font-size-caption : 0.75rem;
    --font-size-body-xs : 0.6875rem;
    --font-weight-bold      : 700;
    --font-weight-semibold  : 600;
    --font-weight-medium    : 500;
    --font-weight-regular   : 400;
    --line-height-tight     : 1.35;
    --line-height-base      : 1.6;
    --line-height-loose     : 1.8;
    --letter-spacing-tight  : -0.03em;
    --letter-spacing-base   : -0.01em;

    /* --------------------------------------------------
       1-8. 레이아웃 / 그리드
    -------------------------------------------------- */
    --container-max-width        : 1200px;
    --container-padding-x        : 24px;
    --container-padding-x-tablet : 24px;
    --container-padding-x-mobile : 20px;
    --section-padding-y          : 130px;
    --section-padding-y-lg       : 130px;
    --section-padding-y-tablet   : 96px;
    --section-padding-y-mobile   : 76px;

    /* --------------------------------------------------
       1-9. 스페이싱 (4px 단위 기반)
    -------------------------------------------------- */
    --spacing-4   : 4px;
    --spacing-8   : 8px;
    --spacing-12  : 12px;
    --spacing-16  : 16px;
    --spacing-20  : 20px;
    --spacing-24  : 24px;
    --spacing-32  : 32px;
    --spacing-40  : 40px;
    --spacing-48  : 48px;
    --spacing-64  : 64px;
    --spacing-80  : 80px;
    --spacing-100 : 100px;

    /* --------------------------------------------------
       1-10. 아이콘 크기
    -------------------------------------------------- */
    --icon-size-xs : 16px;
    --icon-size-sm : 20px;
    --icon-size-md : 24px;
    --icon-size-lg : 32px;
    --icon-size-xl : 48px;

    /* --------------------------------------------------
       1-11. radius 반경
    -------------------------------------------------- */
    --radius-sm   : 4px;
    --radius-md   : 8px;
    --radius-lg   : 12px;
    --radius-xl   : 16px;
    --radius-2xl  : 24px;
    --radius-full : 9999px;

    /* --------------------------------------------------
       1-12. 그림자
    -------------------------------------------------- */
    --shadow-sm : 0 1px 4px rgba(0, 0, 0, 0.06);
    --shadow-md : 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg : 0 8px 32px rgba(0, 0, 0, 0.10);
    --shadow-xl : 0 16px 48px rgba(0, 0, 0, 0.12);

    /* --------------------------------------------------
       1-13. transition (애니메이션 속도)
    -------------------------------------------------- */
    --transition-fast : 0.15s ease;
    --transition-base : 0.25s ease;
    --transition-slow : 0.4s ease;

    /* --------------------------------------------------
       1-14. 헤더 높이
    -------------------------------------------------- */
    --header-height-pc     : 73px;
    --header-height-mobile : 60px;

    /* --------------------------------------------------
       1-15. 폼 컨트롤 / 버튼 높이
    -------------------------------------------------- */
    --form-control-height    : 48px;
    --form-control-height-sm : 44px;
    --button-height          : 52px;
    --paytest-action-min-height       : 50px;

    --touch-target-min  : 44px;
    --form-action-width : 180px;

    /* --------------------------------------------------
       1-16. z-index 레이어 관리
    -------------------------------------------------- */
    --z-header   : 1000;
    --z-dropdown : 1001;
    --z-modal    : 1100;
    --z-toast    : 1200;
    --z-tooltip  : 1050;
    --z-skip-nav : 9999;
}

/* ============================================================
   1-17. 다크모드 토큰
============================================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --color-dark-page           : #060912;
        --color-dark-surface        : #1A2235;
        --color-dark-border         : #252F42;
        --color-dark-disabled       : #374151;
        --color-dark-sub            : #6B7280;
        --color-dark-body           : #9CA3AF;
        --color-dark-title          : #D1D5DB;
        --color-dark-white          : #F9FAFB;
        --color-dark-primary-border : #1A3B7A;
        --color-dark-primary-button : #2E6AE0;
        --color-dark-primary-hover  : #5B8FE8;
        --color-dark-primary-link   : #8CB4F5;
        --color-dark-primary-tint   : #C7DEFF;
        --color-dark-success        : #34D399;
        --color-dark-warning        : #FBB840;
        --color-dark-error          : #F87171;
        --color-dark-info           : #8CB4F5;
    }
}

/* ============================================================
   2. 공통 초기화
============================================================ */

:root {scroll-behavior: auto;}
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
html.service-scroll-auto {scroll-behavior: auto;}

body {
    font-family      : var(--font-family);
    font-size        : var(--font-size-body);
    font-weight      : var(--font-weight-regular);
    line-height      : var(--line-height-base);
    letter-spacing   : var(--letter-spacing-base);
    color            : var(--color-text-body);
    background-color : var(--color-bg-white);
    word-break       : keep-all;
    word-wrap        : break-word;
}

a {
    color : inherit;
    text-decoration : none;
    transition : color var(--transition-base);
}
/* ※ 필요한 요소에만 .list-reset 클래스 적용(ul, ol 초기화 안함 = 약관, 공지, 콘텐츠 일부 적용을 위해) */
.list-reset {
    list-style: none;
    margin: 0;
    padding: 0;
}
button {
    cursor : pointer;
    border : none;
    background : none;
    padding : 0;
    font-family : var(--font-family);
}
img {
    max-width : 100%;
    height : auto;
    display : block;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: var(--font-family);
}

p {margin: 0;}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin         : 0;
    font-weight    : var(--font-weight-bold);
    line-height    : var(--line-height-tight);
    letter-spacing : var(--letter-spacing-tight);
    color          : var(--color-text-primary);
}
h1 {font-size: var(--font-size-h1);}
h2 {font-size: var(--font-size-h2);}
h3 {font-size: var(--font-size-h3);}
h4 {font-size: var(--font-size-h4);}
h5 {font-size: var(--font-size-h5);}
h6 {font-size: var(--font-size-h6);}

/* ============================================================
   3. 공통 레이아웃 유틸리티
============================================================ */

.container {
    max-width: var(--container-max-width);
    margin: 0 auto; /* 가운데 정렬 명시 — 누락 시 일부 브라우저에서 좌측 정렬 발생 */
    padding: 0 var(--container-padding-x);
}

.wrap {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding-x);
}

.skip-nav {
    position: absolute;
    top: -100%;
    left: 0;
    padding: var(--spacing-12) var(--spacing-24);
    background-color: var(--color-primary);
    color: var(--color-text-white);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-semibold);
    z-index: var(--z-skip-nav);
    transition: top var(--transition-fast);
}
.skip-nav:focus {top: 0;}

.section {padding: var(--section-padding-y) 0;}
.section-lg {padding: var(--section-padding-y-lg) 0;}
.section-gray {background-color: var(--color-bg-gray);}
.section-dark {background-color: var(--color-bg-dark); color: var(--color-text-white);}

/* ============================================================
   4. Typography 유틸리티
============================================================ */

.text-lg {font-size: var(--font-size-body-lg);}
.text-ui {font-size: var(--font-size-ui);}
.text-body-size {font-size: var(--font-size-body);}
.text-sm {font-size: var(--font-size-body-sm);}
.text-caption {font-size: var(--font-size-caption);}

.text-bold {font-weight: var(--font-weight-bold);}
.text-semibold {font-weight: var(--font-weight-semibold);}
.text-medium {font-weight: var(--font-weight-medium);}
.text-regular {font-weight: var(--font-weight-regular);}

.text-primary {color: var(--color-text-primary);}
.text-body-color {color: var(--color-text-body);}
.text-secondary {color: var(--color-text-secondary);}
.text-disabled {color: var(--color-text-disabled);}
.text-white {color: var(--color-text-white);}
.text-brand {color: var(--color-primary);}

.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}

.lh-tight {line-height: var(--line-height-tight);}
.lh-base {line-height: var(--line-height-base);}
.lh-loose {line-height: var(--line-height-loose);}

/* ============================================================
   5. 애니메이션 유틸리티
============================================================ */
.fade-in-up {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-up.is-visible {opacity: 1; transform: translateY(0);}

.main-page .fade-in-up {opacity: 1; transform: none;}
.main-page .fade-in-up.is-ready:not(.is-visible) {
    opacity: 0;
    transform: translateY(32px);
    transition: none;
}
.fade-in-up.delay-1 {transition-delay: 0.1s;}
.fade-in-up.delay-2 {transition-delay: 0.2s;}
.fade-in-up.delay-3 {transition-delay: 0.3s;}
.fade-in-up.delay-4 {transition-delay: 0.4s;}

@media (prefers-reduced-motion: reduce) {
    .fade-in-up,
    .main-page .fade-in-up.is-ready:not(.is-visible) {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .main-process .section-header-title::after {transform: scaleX(1); transition: none;}
}

/* ============================================================
   6. 반응형 유틸리티
============================================================ */
.desktop-break {display: inline;}

@media (max-width: 768px) {
    .desktop-break {display: none;}
}

.tablet-break {display: none;}

@media (max-width: 768px) {
    .tablet-break {display: inline;}
}

.mobile-break {display: none;}

@media (max-width: 480px) {
    :root {--font-size-body: var(--font-size-ui);}

    .mobile-break {display: inline;}
}

.break-except-tablet {display: inline;}

@media (max-width: 768px) {
    .break-except-tablet {display: none;}
}

@media (max-width: 480px) {
    .break-except-tablet {display: inline;}
}