/* =================================================================
   introduce.css — 회사 소개 페이지(introduce.php) 전용
   - 불러오는 곳: introduce.php ($page_styles)
   - 1) 상단 배너: 검은 막 2장이 좌우로 걷히고, 가운데 문구가 펼쳐지는 효과
        (막이 다 걷히면 assets/js/pages/introduce.js가 막 요소를 지움)
   - 2) 회사 소개 본문 글
   - 주의: 같은 배너 규칙이 style.css "6. 서브 페이지 상단 배너"에도 있음.
     다른 서브 페이지(contact/email/history/map)의 배너는 style.css 쪽 규칙을 쓰므로
     배너 모양을 바꾸려면 두 곳을 함께 고쳐야 함
   ================================================================= */

/* ── 상단 배너: 틀 · 배경 이미지 ── */
.introduce-wrap {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    margin: 0;
}

.introduce-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: cover;
}

/* ── 상단 배너: 좌우로 걷히는 검은 막 (introduce-open 애니메이션) ── */
.introduce-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background: #111;
    z-index: 1;
    animation: introduce-open 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.introduce-panel--left {
    left: 0;
    transform-origin: left center;
}

.introduce-panel--right {
    right: 0;
    transform-origin: right center;
}

@keyframes introduce-open {
    0% { transform: scaleX(1); }
    100% { transform: scaleX(0); }
}

/* ── 상단 배너: 이미지 위 가운데 문구 (가운데부터 양옆으로 펼쳐짐) ── */
.introduce-copy {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    clip-path: inset(0 50% 0 50%);
    animation: introduce-copy-open 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes introduce-copy-open {
    0% { clip-path: inset(0 50% 0 50%); }
    100% { clip-path: inset(0 0% 0 0%); }
}

.introduce-copy p {
    margin: 0;
    color: #fff;
    font-size: clamp(1.2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

/* ── 회사 소개 본문 (큰 첫 문장 · 인용 · 본문) ── */
.introduce-desc-section {
    padding: 80px 20px 80px;
    text-align: left;
    background: #fff;
}

.introduce-desc-inner {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.introduce-desc-lead,
.introduce-desc-quote,
.introduce-desc-body {
    margin: 0 0 40px;
    line-height: 1.9;
    font-size: 1.35rem;
    color: #222;
    word-break: keep-all;
}

.introduce-desc-lead {
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 50px 0;
}

.introduce-desc-body {
    font-size: 1.1rem;
    text-align: right;
    margin-right: 30px;
    margin-top: 100px;
}

/* ── 반응형 (모바일 600px 이하) ── */
@media (max-width: 600px) {
    .introduce-copy p {
        white-space: normal;
        padding: 0 16px;
    }

    .introduce-desc-lead {
        font-size: 1.5rem;
        margin: 30px 0;
    }

    .introduce-desc-quote {
        font-size: 1.1rem;
    }
}

/* ── 예전 인라인 style="" 속성을 옮긴 규칙 (배너 아래 여백) ── */
.introduce-spacer {
    margin-bottom: 50px;
}

/* 모바일(768px 이하): 배너 → 본문 사이 빈 공간 줄임 (배너 아래 여백 약 56px로 통일) */
@media (max-width: 768px) {
    .introduce-spacer {
        margin-bottom: 0;
    }

    .introduce-desc-section {
        padding-top: 48px;
    }
}

/* 모바일 배너 문구가 줄바꿈될 때 한글 단어 중간에서 끊기지 않게 */
@media (max-width: 600px) {
    .introduce-copy p {
        word-break: keep-all;
    }
}