/* CI CSS */
:root {
    --primary-blue: #003592;
    --primary-orange: #EE7826;
    --gray-900: #000000;
    --gray-700: #1B1B1B;
    --gray-600: #363636;
    --gray-500: #4E4E4E;
    --gray-400: #7A7A7A;
    --gray-300: #A7A7A7;
    --gray-200: #D3D3D3;
    --gray-100: #E9E9E9;
    --gray-01: #F8F9FB;
    --white: #FFFFFF;
}

body {
    margin: 0;
    font-family: 'Pretendard', sans-serif;
    background: var(--white);
    overflow-x: hidden;
}


@media (max-width: 767px) {
    
}



.page-header .page-label {
    font-weight: 500;
    font-size: 20px;
    line-height: 160%;
    color: var(--gray-600);
    margin: 0;
}



/* Main Content Container */
.ci-content {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bi-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--section-padding-y) var(--section-padding-x);
    gap: clamp(60px, 5.21vw, 100px);
    width: 100%;
    box-sizing: border-box;
}

.bi-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: clamp(60px, 6.25vw, 120px);
    width: 100%;
    max-width: 1680px;
    box-sizing: border-box;
}

.bi-item {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.bi-item h2,
.colors-header h2 {
    font-weight: 700;
    font-size: clamp(30px, 2.61vw, 50px);
    line-height: 140%;
    color: var(--gray-900);
    margin: 0;
    height: auto;
    min-height: clamp(42px, 3.65vw, 70px);
    display: flex;
    align-items: center;
}

.bi-item h3 {
    font-weight: 700;
    font-size: clamp(24px, 1.57vw, 30px);
    line-height: 140%;
    color: var(--gray-500);
    margin: 0;
    height: auto;
    min-height: clamp(34px, 2.19vw, 42px);
    display: flex;
    align-items: center;
}

/* 검수(0720): 시그니처 '가로형 국문/영문' 라벨 — PC 26px */
.sig-box h3 {
    font-size: 26px;
}

/* 검수(0723): 'CI 색상활용' 라벨 — PC 26px (태블릿 clamp / 모바일 18px는 아래 미디어쿼리) */
.mono-logo h3 {
    font-size: 26px;
}

/* Symbol Mark */
.symbol-mark {
    gap: clamp(16px, 1.25vw, 24px);
}

.symbol-mark .img-container {
    width: 100%;
    height: clamp(174px, 28.65vw, 550px);
    background: var(--gray-01);
    border-radius: clamp(16px, 1.57vw, 30px);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.symbol-mark img {
    width: clamp(118px, 18.91vw, 363px);
    height: auto;
}

.signature-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

/* Signature */
.signature {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.sig-txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 40px;
    width: 100%;
    max-width: 1680px;
    min-height: 180px;
    height: auto;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.sig-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 10px;
    width: 100%;
    max-width: 1680px;
    min-height: 70px;
    height: auto;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.signature h2 {
    width: auto;
    min-width: 173px;
    min-height: 70px;
    height: auto;
    font-family: 'Pretendard', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: clamp(30px, 2.6vw, 50px);
    line-height: 140%;
    display: flex;
    align-items: center;
    color: #000000;
    margin: 0;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.sig-desc-wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 20px;
    width: 100%;
    max-width: 1680px;
    min-height: 70px;
    height: auto;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.sig-intro {
    max-width: 1140px;
    min-height: 70px;
    font-family: 'Pretendard', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(16px, 1.15vw, 22px);
    line-height: 160%;
    display: block;
    color: #4E4E4E;
    margin: 0;
    flex: 1;
    min-width: 0;
}

.btn-ci-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 0.42vw, 8px);
    padding: clamp(8px, 0.63vw, 12px) clamp(16px, 1.25vw, 24px) clamp(8px, 0.63vw, 12px) clamp(20px, 1.57vw, 30px);
    background: #F27100;
    border-radius: 100px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-ci-download:hover {
    opacity: 0.85;
}

.btn-ci-download span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(14px, 0.94vw, 18px);
    line-height: 1.6;
    color: #FFFFFF;
}

.btn-ci-download .ic-download {
    width: clamp(12px, 0.78vw, 15px);
    height: clamp(13px, 0.84vw, 16px);
    max-width: 15px;
    max-height: 16px;
    flex-shrink: 0;
    object-fit: contain;
}


.signature-images {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.sig-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 1.25vw, 24px);
    width: 100%;
}

.sig-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sig-img-box {
    width: 100%;
    height: clamp(174px, 20.32vw, 390px);
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: clamp(16px, 1.57vw, 30px);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.sig-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mono Logo / Color Usage */
.mono-logo {
    gap: 16px;
}

.mono-grid {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 1.25vw, 24px);
    width: 100%;
}

.mono-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 1.25vw, 24px);
    width: 100%;
}

.mono-box {
    height: clamp(174px, 14.59vw, 280px);
    border-radius: clamp(16px, 1.57vw, 30px);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid transparent;
}

.mono-box.bg-white {
    background: var(--white);
    border-color: #E9E9E9;
}

.mono-box.bg-black {
    background: var(--gray-900);
}

@media (max-width: 767px) {
    .mono-box.bg-black {
        background: var(--gray-700);
    }
}

.mono-box.bg-blue {
    background: var(--primary-blue);
}

.mono-box.bg-orange {
    background: var(--primary-orange);
    grid-column: span 2;
}

.mono-box img {
    height: clamp(19.6px, 2.56vw, 49px);
    width: auto;
}

/* Corporate Colors */
.corporate-colors {
    gap: 20px;
}

.colors-header {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 2.08vw, 40px);
}

.colors-header {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 2.08vw, 40px);
}

.colors-intro {
    font-weight: 400;
    font-size: clamp(16px, 1.15vw, 22px);
    line-height: 160%;
    color: var(--gray-500);
    width: 100%;
    height: 70px;
    display: block;
}

.colors-flex {
    display: flex;
    gap: 260px;
    width: 100%;
    padding: 45px 0;
    justify-content: flex-start;
}

.color-info-card {
    display: flex;
    align-items: center;
    gap: clamp(24px, 2.08vw, 40px);
    width: 28.125vw;
    /* 540px / 1920px */
}

.color-circle {
    width: clamp(100px, 11.98vw, 230px);
    height: clamp(100px, 11.98vw, 230px);
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.color-circle::after {
    content: '';
    width: clamp(33px, 3.96vw, 76px);
    height: clamp(33px, 3.96vw, 76px);
    background: var(--white);
    border-radius: 50%;
}

.color-circle.blue {
    background: var(--primary-blue);
    box-shadow: 0 10px 30px rgba(0, 53, 146, 0.15);
}

.color-circle.orange {
    background: var(--primary-orange);
    box-shadow: 0 10px 30px rgba(238, 120, 38, 0.15);
}

.color-details {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.04vw, 20px);
}

.color-name {
    font-weight: 700;
    font-size: clamp(20px, 1.36vw, 26px);
    line-height: 150%;
    color: var(--gray-900);
}

.color-codes {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.color-codes span {
    font-weight: 500;
    font-size: clamp(14px, 0.94vw, 18px);
    line-height: 29px;
    color: var(--gray-300);
}


/* ── 태블릿: 전용색상 간격/크기 ── */
@media (min-width: 768px) and (max-width: 1439px) {
    /* 검수 0809: 태블릿 가로형 국문/영문 라벨 텍스트 18(px). (base 26 → 태블릿 18) */
    .sig-box h3 {
        font-size: 18px;
    }

    .colors-flex {
        gap: clamp(60px, 10vw, 160px);
        justify-content: flex-start;
    }

    .color-info-card {
        width: auto;
    }

    .sig-txt {
        gap: clamp(20px, 2.6vw, 40px);
        min-height: auto;
    }

    .signature h2 {
        min-height: auto;
        height: auto;
    }

    .sig-title {
        min-height: auto;
        height: auto;
    }

    .sig-desc-wrap {
        flex-wrap: wrap;
        gap: 20px;
    }

    /* 검수(0723): 'CI 색상활용' 라벨 — 태블릿 18~26 사이 clamp */
    .mono-logo h3 {
        font-size: clamp(18px, 1.81vw, 26px);
    }
}

/* Responsive (Mobile 360px) */
@media (max-width: 767px) {


    .page-header .page-label {
        font-size: 14px;
    }



    .bi-section {
        padding: 0;
        gap: 0;
    }

    .bi-inner {
        align-items: center;
        gap: 0;
    }

    .bi-item {
        padding: clamp(30px, 11.1vw, 40px) 16px;
        gap: clamp(16px, 5.5vw, 20px);
        width: 100%;
        box-sizing: border-box;
    }

    .bi-item h2 {
        font-size: 24px; /* 검수 0729: 모바일 섹션 타이틀(심볼마크·시그니처·전용색상) 30→24 (Figma 초록 딱지) */
    }

    .bi-item h3 {
        font-size: clamp(20px, 6.66vw, 24px);
    }

    /* 검수(0720): 시그니처 라벨 — 모바일 18px */
    .sig-box h3 {
        font-size: 18px;
    }

    /* 검수(0723): 'CI 색상활용' 라벨 — 모바일 18px */
    .mono-logo h3 {
        font-size: 18px;
    }

    .colors-intro {
        width: 100%;
        text-align: center;
    }

    .symbol-mark .img-container {
        height: 174px;
        border-radius: 16px;
    }

    .symbol-mark img {
        max-width: 118px;
    }

    .signature-container {
        gap: 0;
    }

    .bi-item.signature-images {
        padding-top: 0;
        padding-bottom: 0;
    }

    .sig-txt {
        gap: 20px;
        min-height: auto;
        width: 100%;
    }

    .sig-title {
        gap: 0;
        min-height: auto;
        width: 100%;
    }

    .sig-title h2 {
        min-height: auto;
        height: auto;
    }

    .sig-desc-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        min-height: auto;
        width: 100%;
    }

    .btn-ci-download {
        align-self: flex-start;
        padding: 10px 20px;
        gap: 8px;
    }

    .btn-ci-download span {
        font-size: 16px;
    }

    .btn-ci-download .ic-download {
        width: 15px;
        height: 15px;
        max-width: 15px;
        max-height: 15px;
    }

    .sig-intro {
        max-width: 100%;
        min-height: auto;
        height: auto;
    }

    .sig-grid {
        display: flex;
        flex-direction: column;
        gap: 30px;
        width: 100%;
    }


    .sig-img-box {
        height: 174px;
        border-radius: 16px;
    }

    .mono-logo {
        gap: 16px;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .bi-item.corporate-colors {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .mono-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
    }

    .mono-box {
        height: 174px;
        border-radius: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }



    .mono-box img {
        height: 19.6px;
    }

    .colors-intro {
        font-size: 16px;
        line-height: 160%;
        height: 130px;
        text-align: left;
        max-width: 100%;
    }

    .colors-intro br.mo-br {
        display: none;
    }

    @media (max-width: 767px) {
        .colors-intro br.mo-br {
            display: block;
        }
    }

    .colors-flex {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        max-width: 100%;
        padding: 0;
    }

    @media (max-width: 767px) {
        .colors-flex {
            grid-template-columns: 1fr;
            gap: 24px;
        }
    }

    .color-info-card {
        gap: 30px;
        align-items: center;
        width: auto;
    }



    .color-circle {
        width: 100px;
        height: 100px;
        flex-shrink: 0;
    }

    .color-circle::after {
        width: 32px;
        height: 32px;
    }

    .color-name {
        font-size: 18px;
    }

    .color-codes {
        gap: 4px;
    }

    .color-codes span {
        font-size: 16px;
        line-height: 162.5%;
    }
}

@media (min-width: 1920px) {
    .sig-img-box.en-text-box {
        width: 828px;
        height: 390px;
    }
}