@charset "utf-8";

@font-face {
    font-family: 'Pretendard Variable';
    src: url('/fonts/PretendardVariable.woff2') format('woff2-variations');
    font-weight: 45 920;
    font-display: swap;
}

:root {
    /* ── 1. 팔레트 ───────────────────────────── */
    --color-bg: #fff;

    --color-static1: #167A78;
    --color-static2: #0F5F5D;
    --color-static3: #E7F4F2;
    --color-static4: #F5FBFA;

    --color-gray1: #FAFAFA;
    --color-gray2: #F5F5F5;
    --color-gray3: #E5E5E5; /* border */
    --color-gray4: #D4D4D4;
    --color-gray5: #A3A3A3;
    --color-gray6: #737373;
    --color-gray7: #525252;
    --color-gray8: #404040;
    --color-gray9: #262626;
    --color-gray10: #171717;
    --color-gray11: #0A0A0A;

    /* 상태 */
    --color-red: #D92D20;
    --color-lightred: #FEF3F2;
    --color-white: #FFFFFF;
    --color-black: #000000;

    /* 알파용 RGB 토큰 - 공백 구분(쉼표 X). rgb(var(--rgb-x) / 0.1) */
    --rgb-static1: 22 122 120;
    --rgb-white: 255 255 255;
    --rgb-black: 0 0 0;

    /* ── 2. 역할 별칭 ────────────────────────── */
    --color-primary: var(--color-static1);        /* 버튼·링크·활성 탭 */
    --color-primary-dark: var(--color-static2);   /* hover·active */
    --color-primary-light: var(--color-static3);  /* 뱃지·강조 배경 */
    --color-accent: var(--color-static2);         /* 별도 accent 색 없음 → static2에 연결 */
    --rgb-primary: var(--rgb-static1);

    --color-bg1: var(--color-bg);                 /* 기본 배경 */
    --color-bg2: var(--color-gray10);             /* 다크 섹션 */
    --color-bg3: var(--color-static4);            /* 브랜드 톤 섹션 */
    --color-bg4: var(--color-gray2);              /* 회색 박스 */

    --color-font1: var(--color-gray10);           /* 제목 */
    --color-font2: var(--color-gray8);            /* 본문 */
    --color-font3: var(--color-gray6);            /* 보조 - 흰 배경 전용, 아래 주의사항 참고 */
    --color-font4: var(--color-gray5);            /* 다크 배경 전용. 흰 배경 텍스트 금지(2.52) */
    --color-font5: var(--color-gray3);            /* 다크 배경 보조 */
    --color-font6: var(--color-white);            /* 컬러/다크 배경 위 글자 */

    --color-border1: var(--color-gray3);
    --color-border2: var(--color-gray4);
    --color-border3: var(--color-gray5);

    /* ── 3. 타이포 · 간격 · 기타 ──────────────── */

    /* 폰트 패밀리 - 자체 호스팅 + font-display: swap. 스택 끝에 시스템 한글 폰트 */
    --font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
                   system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

    /* 폰트 크기 - 값은 시안 실측 후 조정. 14·12는 더 줄면 가독성이 떨어져 고정 */
    --fs-60: clamp(2.25rem, 1.6rem + 2.2vw, 3.75rem);
    --fs-48: clamp(1.875rem, 1.4rem + 1.6vw, 3rem);
    --fs-36: clamp(1.5rem, 1.2rem + 1.1vw, 2.25rem);
    --fs-28: clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);
    --fs-24: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
    --fs-20: clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem);
    --fs-18: clamp(1rem, 0.94rem + 0.2vw, 1.125rem);
    --fs-16: clamp(0.9375rem, 0.9rem + 0.1vw, 1rem);
    --fs-14: 0.875rem;
    --fs-12: 0.75rem;

    /* 간격 - 전부 clamp() */
    --space-160: clamp(5rem, 3rem + 6vw, 10rem);
    --space-120: clamp(4rem, 2.5rem + 4.5vw, 7.5rem);
    --space-100: clamp(3.5rem, 2.2rem + 3.8vw, 6.25rem);
    --space-80: clamp(3rem, 2rem + 3vw, 5rem);
    --space-60: clamp(2.25rem, 1.6rem + 2vw, 3.75rem);
    --space-40: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
    --space-24: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);

    /* 기타 */
    --header-height: 80px;
    --box-shadow: 0 4px 20px rgb(var(--rgb-black) / 0.08);
    --radius: 8px;
}

/* 레이아웃 공통 래퍼 */
.container {max-width: 1920px; margin: 0 auto;}
.inner {max-width: 1280px; margin: 0 auto; padding: 0 20px;}

/* 타이포그래피 유틸리티 - 클래스로 크기를 지정한다. 개별 CSS에서 재선언 금지 */
.hero-tit {font-size: var(--fs-48); font-weight: 700; line-height: 1.2;}
.section-tit {font-size: var(--fs-28); font-weight: 600; line-height: 1.4;}
.card-tit {font-size: var(--fs-24); font-weight: 600; line-height: 1.5;}
.body-large {font-size: var(--fs-18); line-height: 1.5;}
.body-medium {font-size: var(--fs-16); line-height: 1.5;}
.body-small {font-size: var(--fs-14); line-height: 1.5;}
.label {font-size: var(--fs-14); font-weight: 500; line-height: 1.5;}


/* 섹션 여백 - 필요한 조합만 골라 쓴다 */
.sub-section {padding: var(--space-100) 0;}
.color-bg {background-color: var(--color-bg3);}
.color-bg2 {background-color: var(--color-bg2); color: var(--color-font6);}

/* 버튼 */
.square-btn {display: inline-flex; align-items: center; justify-content: center; padding: var(--fs-16) var(--fs-24); border-radius: var(--radius); font-size: var(--fs-16); font-weight: 500; transition: background-color 0.2s, color 0.2s, border-color 0.2s;}
.square-btn.small {padding: var(--fs-12) var(--fs-20);}

.square-btn:disabled,
.square-btn.disabled {background-color: var(--color-gray4); color: var(--color-gray1);}
.main-btn {}
.sub-btn {}
.line-btn {}


.btn-list {display: flex; gap: 12px; flex-wrap: wrap;}

/* 탭 - .tab-list .tab(active) ↔ .tab-content(active), js/common.js initTabs() 참고 */
.tab-list {display: flex; gap: 8px; border-bottom: 1px solid var(--color-border1);}
.tab-list .tab {padding: 14px 20px; font-size: var(--fs-16); color: var(--color-font3); border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s;}
.tab-list .tab.active {color: var(--color-primary); border-color: var(--color-primary); font-weight: 600;}
.tab-content {display: none;}
.tab-content.active {display: block;}

/* 뱃지·상태 */
.badge {display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-size: var(--fs-12); font-weight: 600;}
.badge.done {background-color: var(--color-primary-light); color: var(--color-primary);}
.badge.wait {background-color: var(--color-bg4); color: var(--color-font3);}
.badge.stop {background-color: var(--color-lightred); color: var(--color-red);}

/* 폼 - 최소 골격만. 프로젝트 시안에 맞춰 살을 붙인다 */
.input-item {margin-bottom: var(--space-24);}
.input-item-label {display: block; margin-bottom: 8px; font-size: var(--fs-14); font-weight: 600;}
.input-item-label .req {margin-left: 2px; color: var(--color-red);}
.custom-input, .custom-textarea, .custom-select {width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--color-border2); border-radius: var(--radius); background-color: var(--color-white);}
.custom-textarea {height: auto; min-height: 160px; padding: 16px; resize: vertical;}
.custom-input:focus, .custom-textarea:focus, .custom-select:focus {border-color: var(--color-primary);}
.custom-input::placeholder, .custom-textarea::placeholder {color: var(--color-font4);}
.custom-input:disabled, .custom-textarea:disabled {background-color: var(--color-bg4); color: var(--color-font3);}
.custom-input.error, .custom-textarea.error {border-color: var(--color-red);}
.error-msg {margin-top: 6px; font-size: var(--fs-14); color: var(--color-red);}
.check-item {display: inline-flex; align-items: center; gap: 8px; min-height: 44px;}

/* 리스트 */
.dot-ul li {position: relative; padding-left: 14px;}
.dot-ul li::before {content: ''; position: absolute; left: 0; top: 0.7em; width: 4px; height: 4px; border-radius: 50%; background-color: var(--color-font3);}
.dash-ul li {position: relative; padding-left: 14px; color: var(--color-font3);}
.dash-ul li::before {content: ''; position: absolute; left: 0; top: 0.75em; width: 6px; height: 1px; background-color: var(--color-font3);}

/* 표 - 데이터 표만 사용. 레이아웃용 table 금지. th scope·caption 필수 */
.basic-table caption {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
.basic-table th, .basic-table td {padding: 16px 12px; font-size: var(--fs-16); border-bottom: 1px solid var(--color-border1); text-align: left;}
.basic-table thead th {background-color: var(--color-bg4); font-weight: 600; border-top: 1px solid var(--color-border2);}
.basic-table td {color: var(--color-font2);}

/* 빵부스러기 - 화면 마크업 + JSON-LD BreadcrumbList를 같이 넣는다 */
.breadcrumb {display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-14); color: var(--color-font3);}
.breadcrumb li {display: flex; align-items: center; gap: 8px;}
.breadcrumb li + li::before {content: ''; width: 6px; height: 6px; border-top: 1px solid var(--color-border3); border-right: 1px solid var(--color-border3); transform: rotate(45deg);}
.breadcrumb [aria-current="page"] {color: var(--color-font1); font-weight: 600;}

/* 페이지네이션 */
.pagination {display: flex; justify-content: center; gap: 4px; margin-top: var(--space-40);}
.pagination a, .pagination strong {display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; border-radius: var(--radius); font-size: var(--fs-14);}
.pagination strong {background-color: var(--color-primary); color: var(--color-white);}
.pagination a:hover {background-color: var(--color-bg4);}

/* 빈 상태 · 에러 · 로딩 - 개발 이관 시 반드시 같이 넘긴다 */
.empty-box {padding: var(--space-60) 20px; text-align: center; color: var(--color-font3); background-color: var(--color-bg4); border-radius: var(--radius);}
.error-box {padding: var(--space-24); color: var(--color-red); background-color: var(--color-lightred); border: 1px solid var(--color-red); border-radius: var(--radius); font-weight: 600;}
.skeleton {background-color: var(--color-bg4); border-radius: var(--radius); animation: skeleton 1.2s ease-in-out infinite;}
@keyframes skeleton {0%, 100% {opacity: 1;} 50% {opacity: 0.5;}}

/* 모달 - js/common.js initModals() 참고. 열림 상태는 .active */
.modal {position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 20px; background-color: rgb(var(--rgb-black) / 0.5);}
.modal.active {display: flex;}
.modal-inner {position: relative; width: 100%; max-width: 480px; max-height: 84vh; overflow-y: auto; padding: var(--space-40); background-color: var(--color-white); border-radius: var(--radius);}
.modal-tit {margin-bottom: 12px; font-size: var(--fs-24); font-weight: 700;}
.modal .modal-close-btn {position: absolute; top: 8px; right: 8px; width: 44px; height: 44px;}
.modal .modal-close-btn::before, .modal .modal-close-btn::after {content: ''; position: absolute; top: 50%; left: 12px; right: 12px; height: 2px; background-color: var(--color-font1);}
.modal .modal-close-btn::before {transform: rotate(45deg);}
.modal .modal-close-btn::after {transform: rotate(-45deg);}