@charset "UTF-8";
/* scope_pub_css.py 생성물. 직접 고치지 않는다.
   원본은 퍼블 전달본의 root.css 다. 그것을 고치고 스크립트를 다시 돌린다 */
/* ============================================================
   root.css — 시안D · 토큰(퍼플·시안 그라디언트) + 리셋
   ------------------------------------------------------------
   이 파일에 들어갈 것:
     · :root 변수 (색, 라인, 반경, 그림자, 모션, 컨테이너 폭)
     · 전역 리셋
     · 한글 word-break 등 문서 레벨 타이포 규칙
   이 파일에 넣지 말 것:
     · 실제 컴포넌트(.button, .card ...) → common.css
     · 헤더/히어로/푸터 등 페이지 요소 → layout/main.css
   ============================================================ */

.ext-body {
    /* Base */
    --bg: #ffffff;
    --bg-soft: #f8fafc;

    /* Lines */
    --line: #e5e7eb;
    --line-strong: #d1d5db;

    /* Ink (grayscale text · WCAG AA safe on #fff — 소문자 = 어두움) */
    --ink-900: #222222; /* on #fff = 16.1:1  AAA */
    --ink-700: #444444; /*         =  9.7:1  AAA */
    --ink-500: #666666; /*         =  5.7:1  AA (large: AAA) */
    --ink-400: #6b7280; /* prev #8B8BA8 (3.44:1 실패) → 4.83:1 AA 통과 */

    /* 태극기 (Korean flag) — Point palette · 시안A 정합 */
    --kor-red: #c90a0a;
    --kor-blue: #003478;
    --kor-black: #0b0b0b;

    /* Point spectrum — kor-red 계열 (기존 purple-* 값을 태극 빨강으로 재설정) */
    --purple-50: #fbe7e7;
    --purple-100: #f7cfcf;
    --purple-300: #e88585;
    --purple-500: #d63333;
    --purple-600: #c90a0a; /* = --kor-red */

    /* Secondary spectrum — kor-blue 계열 (기존 cyan-* 값 재설정) */
    --cyan-50: #e6ebf2;
    --cyan-300: #6688b0;
    --cyan-500: #003478; /* = --kor-blue */
    --cyan-600: #002a5f;

    /* Accents — 태극(kor-red/blue) 팔레트에 amber 하나만 accent로 사용 */
    --amber-700: #b45309; /* AA on white 5.65:1 · 창업/기회 카테고리 텍스트 */
    --amber-50: #fef3c7; /* amber-700 텍스트 대비용 배경 */
    --amber: #f59e0b; /* 하이라이트용 (텍스트로는 사용 금지: 4.2:1) */

    /* Gradients — 같은 계열 내 톤 그라데이션 (빨강+파랑 혼합 금지) */
    /* [main] kor-red 계열 — 밝은 빨강 → 진한 빨강 */
    --grad-main: linear-gradient(135deg, #e24a4a 0%, #c90a0a 55%, #8e0707 100%);
    --grad-soft: linear-gradient(135deg, rgba(201, 10, 10, 0.1), rgba(201, 10, 10, 0.02));
    --grad-text: linear-gradient(135deg, #c90a0a 0%, #8e0707 100%);
    /* [blue] kor-blue 계열 — 밝은 파랑 → 진한 파랑 (필요 시 액센트) */
    --grad-blue: linear-gradient(135deg, #2a5da0 0%, #003478 55%, #001f4a 100%);
    --grad-blue-text: linear-gradient(135deg, #003478 0%, #001f4a 100%);

    /* Typography — 세방고딕: 포인트/타이틀 전용 */
    --font-title: "SebangGothic", "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

    /* Layout */
    --container: 1440px;

    /* Radius */
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;

    /* Motion */
    --tr-fast: all 0.15s ease;
    --tr-base: all 0.25s ease;

    /* Shadow — kor-red / kor-blue 톤 */
    --shadow-card: 0 10px 30px -10px rgba(15, 23, 42, 0.1);
    --shadow-pop: 0 24px 48px -16px rgba(201, 10, 10, 0.28);
    --shadow-cyan: 0 24px 48px -16px rgba(0, 52, 120, 0.22);
    /* 카드 공통 그림자 (컨텐츠1 .role · 컨텐츠2 .tile 통일) */
    --shadow-card-rest: 0 16px 40px -18px rgba(15, 15, 38, 0.22);
    --shadow-card-hover: 0 24px 52px -18px rgba(15, 15, 38, 0.35);

    /* Header (플로팅 캡슐이므로 top offset 만 사용) */
    --floatnav-top: 18px;
    
    /* 산업 카테고리 색상 */
    --c-auto: #4887ED;
    --c-ict: #5FAFE3;
    --c-city: #A96BCB;
    --c-robot: #F47F8B;
    --c-material: #F5A875;
    --c-medical: #55B98A;
    --c-machine: #91CF68;
    --c-textile: #F2C84B;
    --c-energy: #7186D9;
    --c-water: #4FB5AE;
    --c-root: #CB70A4;
}

/* ---- Reset & Base ---- */
.ext-body, .ext-body *, .ext-body::before, .ext-body *::before, .ext-body::after, .ext-body *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.ext-body {
    scroll-behavior: smooth;
    width: 100%;
    max-width: 2560px;
    min-width: 340px;
    margin: 0 auto;
    overflow-x: hidden;
}
.ext-body {
    font-family:
        "Pretendard Variable",
        Pretendard,
        -apple-system,
        "Segoe UI",
        "Apple SD Gothic Neo",
        "Malgun Gothic",
        sans-serif;
    font-weight: 400;
    /* 접근성 기본 폰트 사이즈 (WCAG 권장 · 브라우저 확대에 반응하도록 절대치 명시) */
    font-size: 16px;
    color: var(--ink-900);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
.ext-body a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.ext-body a:hover, .ext-body a:focus, .ext-body a:active {
    text-decoration: none;
}
.ext-body ul, .ext-body ol {
    list-style: none;
}
.ext-body img {
    max-width: 100%;
    display: block;
}
.ext-body button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}
/* iOS Safari 자동 확대 방지 — 폼 요소 최소 16px */
.ext-body input, .ext-body select, .ext-body textarea {
    font-family: inherit;
    font-size: 16px;
}
.ext-body h1, .ext-body h2, .ext-body h3, .ext-body h4, .ext-body h5, .ext-body h6 {
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink-900);
}

/* 한글 어절 wrap */
.ext-body h1, .ext-body h2, .ext-body h3, .ext-body h4, .ext-body h5, .ext-body h6, .ext-body p, .ext-body .eyebrow, .ext-body .section-title, .ext-body .partners__head h2, .ext-body .link-card__title, .ext-body .link-card__desc, .ext-body .footer__addr, .ext-body .footer__col h4 {
    word-break: keep-all;
    overflow-wrap: break-word;
}


/* IE - input close button delete */
.ext-body input::-ms-clear {
    display: none;
}

.ext-body input:-webkit-autofill {
    -webkit-text-fill-color: #222;
}

.ext-body input:-webkit-autofill, .ext-body input:-webkit-autofill:hover, .ext-body input:-webkit-autofill:focus, .ext-body input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

.ext-body input::placeholder {
    color: #aaa;
}

.ext-body input:-ms-input-placeholder {
    color: #aaa;
}

.ext-body input::-moz-placeholder {
    color: #aaa;
}

.ext-body input::-webkit-input-placeholder {
    color: #aaa;
}

.ext-body textarea::placeholder {
    color: #aaa;
}

.ext-body textarea:-ms-input-placeholder {
    color: #aaa;
}

.ext-body textarea::-moz-placeholder {
    color: #aaa;
}

.ext-body textarea::-webkit-input-placeholder {
    color: #aaa;
}

.ext-body input {
    background: #fff;
    border: 1px solid #dbdfea;
    padding: 0 16px;
    height: 40px;
    border-radius: 4px;
    font-size: 16px;
}

.ext-body input[type="number"]::-webkit-outer-spin-button, .ext-body input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ext-body textarea {
    background: #fff;
    border: 1px solid #dbdfea;
    padding: 16px;
    min-height: 150px;
    border-radius: 4px;
    font-size: 16px;
    resize: none;
}

.ext-body select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 40px;
    padding: 0 40px 0 16px;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #dbdfea;
    font-size: 16px;
    background: transparent;
    position: relative;
    z-index: 3;
}
.ext-body select option {
    font-size: 16px;
    font-weight: 500;
}

.ext-body pre {
    color: #222;
    font-family: "pretendard", sans-serif;
    text-wrap: nowrap;
    margin: 0;
    white-space: pre-wrap;
}

.ext-body button, .ext-body input {
    -moz-appearance: none; /* Firefox */
    -webkit-appearance: none; /* Safari and Chrome */
    appearance: none;
}