/* ============================================================
   theme.css
   - 브랜드 색상 변수 (기존에 red/orangered/dodgerblue/#007bff가 난립하던 것을 한곳으로)
   - 히어로 슬라이더 (기존 라디오 버튼 3개는 아무 동작도 하지 않았음)
   - 본문 배경 개선 (전체가 흰색이라 단조로웠던 부분)
   - 사업분야 3카드 섹션
   가장 마지막에 로드되므로 site.css / nav.css 의 동일 우선순위 규칙을 덮어쓴다.
   ============================================================ */

:root {
    /* 브랜드 */
    --cse-primary: #1b3a5c; /* 딥 네이비 - 히어로/푸터 톤과 맞춤 */
    --cse-primary-dark: #0d1b2a;
    --cse-accent: #ff4500; /* orangered - 기존 강조색 유지 */
    --cse-accent-soft: rgba(255, 69, 0, 0.08);
    --cse-info: #1e90ff; /* dodgerblue - 기존 설명 텍스트 색 유지 */
    /* 배경 계층 (흰색 단조로움 해결) */
    --surface: #f5f7fa; /* 페이지 기본 배경 - 아주 옅은 회청색 */
    --surface-alt: #eef2f7; /* 한 단계 진한 밴드 */
    --surface-card: #ffffff; /* 카드/콘텐츠 블록 */
    /* 텍스트 */
    --text-strong: #16202b;
    --text-body: #4a5765;
    --text-muted: #7b8794;
    /* 선/그림자 */
    --line: rgba(22, 32, 43, 0.08);
    --shadow-sm: 0 2px 8px rgba(22, 32, 43, 0.06);
    --shadow-md: 0 8px 24px rgba(22, 32, 43, 0.08);
    --shadow-lg: 0 16px 48px rgba(22, 32, 43, 0.12);
}

/* ------------------------------------------------------------
   1. 페이지 배경 - 순백색 대신 옅은 계층을 준다
   ------------------------------------------------------------ */
body {
    background-color: var(--surface);
    color: var(--text-body);
}

/* 히어로 바로 아래를 배경색으로 부드럽게 이어준다.
   기존에는 사진이 끝나는 지점에서 흰색으로 딱 잘려 어색했다. */
/* [수정] 기존 22% 높이 + 중간 0.65 반투명 단계 때문에 사진의 어두운 부분이 덜 덮여
   탁한 띠로 보였다. 8%로 얇게 줄이고 중간 단계를 없애 불투명하게 마감한다. */
#header-background::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8%;
    background: linear-gradient(to bottom, rgba(245, 247, 250, 0) 0%, var(--surface) 92%, var(--surface) 100%);
    pointer-events: none;
    z-index: 3; /* 슬라이드(1)/스크림(2) 위, 텍스트(5) 아래 */
}

/* 본문 영역에 은은한 광원을 깔아 평평한 느낌을 줄인다 */
.main-content {
    position: relative;
    background:
        radial-gradient(1100px 520px at 12% 0%, rgba(30, 144, 255, 0.06), transparent 60%),
        radial-gradient(900px 480px at 88% 22%, rgba(255, 69, 0, 0.05), transparent 60%);
}

/* ------------------------------------------------------------
   2. 섹션 공통 - 밴드 교차로 리듬을 만든다
   ------------------------------------------------------------ */
.section {
    position: relative;
    padding: 80px 0;
}

/* 본문은 container-fluid(좌우 15px 패딩) 안에 있어서 밴드 배경이 화면 끝까지 닿지 않는다.
   음수 마진으로 패딩을 상쇄해 전체 폭 밴드로 만든다. */
#render-body-section > .section {
    margin-left: -15px;
    margin-right: -15px;
}

.section--tint {
    background-color: var(--surface-alt);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.section--card {
    background-color: var(--surface-card);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.section-head {
    text-align: center;
    margin-bottom: 48px;
}

.section-head .eyebrow {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cse-accent);
    margin-bottom: 12px;
}

.section-head h2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-strong);
    margin: 0 0 12px;
}

.section-head p {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin: 0;
}

/* ------------------------------------------------------------
   3. 히어로 슬라이더
      기존 문제: #header-background 에 배경 이미지가 하나 고정되어 있고,
                하단 점 3개(#bg1~3)에 대응하는 CSS/JS가 전혀 없어 클릭해도 아무 일도 없었다.
   ------------------------------------------------------------ */
/* 모바일 브라우저의 100vh는 주소창 높이를 포함해서 실제보다 커진다.
   스크롤 시 히어로 하단이 잘리거나 덜컹거리는 원인이라 svh를 우선 적용한다. */
#header-background {
    height: 100svh;
}

.hero-slides {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    /* 아주 느린 확대로 정지 사진에 생기를 준다 */
    transform: scale(1.06);
    transition: opacity 1.2s ease-in-out, transform 7s linear;
    will-change: opacity, transform;
    /* 원본이 옅은 블루 듀오톤이라 그대로 두면 밋밋하다. 살짝만 또렷하게. */
    filter: saturate(1.18) contrast(1.07);
}

    .hero-slide.active {
        opacity: 1;
        transform: scale(1);
    }

/* 사진 위 텍스트 가독성 확보용 스크림.
   [수정] 기존에는 화면 전체를 흰색 두 겹으로 덮어 사진이 통째로 뿌옇게 바랬다.
          텍스트가 실제로 놓이는 좌측 하단에만 밝기를 주고, 사진의 위/중앙은 건드리지 않는다. */
.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        /* 하단 텍스트 영역만 밝게 (44% 위로는 완전 투명) */
        linear-gradient(to top, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.32) 20%, rgba(255, 255, 255, 0) 44%),
        /* 좌측 하단에 집중 */
        radial-gradient(130% 92% at 0% 100%, rgba(255, 255, 255, 0.52), transparent 62%);
}

/* 히어로 텍스트/버튼/점을 스크림 위로 */
#header-background .text-header-content {
    z-index: 5;
}

#header-background .radio-container {
    z-index: 5;
}

/* 히어로 문구 - 흰 사진 위 검정 텍스트로 대비 확보 */
.text-header-content h1 {
    color: var(--text-strong);
    text-shadow: 0 1px 18px rgba(255, 255, 255, 0.85);
}

/* 히어로 해시태그 버튼 - 기존엔 흰 글씨/검정 테두리라 밝은 사진에서 안 보였다 */
.button-container a {
    color: var(--text-strong) !important;
    border-color: rgba(22, 32, 43, 0.35) !important;
    background-color: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

    .button-container a:hover {
        background-color: var(--cse-accent) !important;
        border-color: var(--cse-accent) !important;
        color: #fff !important;
        transform: translateY(-2px) scale(1.04);
    }

/* 슬라이더 점 - 원형 유지, 활성만 강조색으로 채워 구분한다 */
.radio-container input[type="radio"] {
    cursor: pointer;
    border: 2px solid rgba(22, 32, 43, 0.45) !important;
    background-color: rgba(255, 255, 255, 0.55);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

    .radio-container input[type="radio"]:checked {
        background-color: var(--cse-accent);
        border-color: var(--cse-accent) !important;
    }

        .radio-container input[type="radio"]:checked::before {
            background-color: #fff; /* 채워진 점 안쪽에 흰 심 */
        }

/* ------------------------------------------------------------
   4. 사업분야 3카드
   ------------------------------------------------------------ */
.biz-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.biz-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 36px 30px 30px;
    text-decoration: none;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

    /* 상단 강조 바 - 호버 시 채워진다 */
    .biz-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 4px;
        background: linear-gradient(to right, var(--cse-accent), #ff8c42);
        transition: width 0.4s ease;
    }

    .biz-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-lg);
        border-color: rgba(255, 69, 0, 0.25);
        text-decoration: none;
    }

        .biz-card:hover::before {
            width: 100%;
        }

.biz-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 14px;
    background-color: var(--cse-accent-soft);
    color: var(--cse-accent);
    font-size: 1.6rem;
    margin-bottom: 22px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.biz-card:hover .biz-card__icon {
    background-color: var(--cse-accent);
    color: #fff;
}

.biz-card__title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-strong);
    margin: 0 0 6px;
}

.biz-card__en {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.biz-card__desc {
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--text-body);
    margin: 0 0 22px;
    flex-grow: 1;
}

.biz-card__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--cse-accent);
}

    .biz-card__more i {
        transition: transform 0.3s ease;
    }

.biz-card:hover .biz-card__more i {
    transform: translateX(5px);
}

/* ============================================================
   공용 : 페이지 타이틀 + 좌측 도킹 내비 레이아웃
   연혁 / 인증·특허 / 오시는 길 세 페이지가 같은 구조를 쓴다.
   페이지마다 제각각이던 사이드바(margin-left:10rem, top:20rem 등)를 하나로 통일.
   ============================================================ */
.page-hero {
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 24px 36px;
}

.page-hero__eyebrow {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cse-accent);
    margin-bottom: 10px;
}

.page-hero__title {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--text-strong);
    margin: 0 0 10px;
}

.page-hero__lead {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin: 0;
}

.docked-layout {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 48px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px 96px;
    align-items: start;
}

.docked-nav {
    position: sticky;
    top: 96px; /* 고정 네비바 바로 아래 */
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

.docked-nav__label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin: 0 0 12px 14px;
}

.docked-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 2px solid var(--line);
}

.docked-nav li {
    position: relative;
    margin: 0;
}

    .docked-nav li::before {
        content: '';
        position: absolute;
        left: -2px;
        top: 6px;
        bottom: 6px;
        width: 2px;
        background-color: var(--cse-accent);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .docked-nav li.active::before {
        opacity: 1;
    }

.docked-nav a,
.docked-nav button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 14px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-muted);
    text-decoration: none;
    background: none;
    border: none;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    transition: color 0.25s ease, background-color 0.25s ease;
}

    .docked-nav a:hover,
    .docked-nav button:hover {
        color: var(--text-strong);
        background-color: rgba(22, 32, 43, 0.04);
        text-decoration: none;
    }

.docked-nav li.active a,
.docked-nav li.active button {
    color: var(--cse-accent);
    background-color: var(--cse-accent-soft);
}

/* 좁은 화면에서는 좌측 도킹이 본문 폭을 잡아먹으므로 상단 가로 칩으로 전환 */
@media (max-width: 991.98px) {
    .page-hero {
        padding: 4px 18px 22px;
    }

    .page-hero__title {
        font-size: 1.8rem;
    }

    .page-hero__lead {
        font-size: 0.95rem;
    }

    .docked-layout {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 0 18px 56px;
    }

    .docked-nav {
        top: 62px;
        z-index: 5;
        max-height: none;
        overflow: visible;
        background-color: var(--surface);
        padding: 8px 0;
        margin: 0 -18px;
        border-bottom: 1px solid var(--line);
    }

    .docked-nav__label {
        display: none;
    }

    .docked-nav ul {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        border-left: none;
        padding: 0 18px 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

        .docked-nav ul::-webkit-scrollbar {
            display: none;
        }

    .docked-nav li {
        flex: 0 0 auto;
    }

        .docked-nav li::before {
            display: none;
        }

    .docked-nav a,
    .docked-nav button {
        width: auto;
        padding: 8px 14px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background-color: #fff;
        font-size: 0.88rem;
        white-space: nowrap;
        min-height: 38px; /* 터치 타겟 */
        display: flex;
        align-items: center;
    }

    .docked-nav li.active a,
    .docked-nav li.active button {
        background-color: var(--cse-accent);
        border-color: var(--cse-accent);
        color: #fff;
    }
}

/* 화면에서는 숨기고 스크린리더/검색엔진에는 남기는 텍스트.
   이미지에 글자가 박혀 있어 화면상 중복되는 경우에 사용한다. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------
   5. 스크롤 진입 애니메이션
   ------------------------------------------------------------ */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

    .reveal.is-visible {
        opacity: 1;
        transform: none;
    }

/* ------------------------------------------------------------
   6. 반응형
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .section {
        padding: 56px 0;
    }

    .section-head {
        margin-bottom: 32px;
    }

        .section-head h2 {
            font-size: 1.6rem;
        }

        .section-head p {
            font-size: 0.95rem;
        }

    .biz-cards {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 0 18px;
    }

    .biz-card {
        padding: 28px 22px 24px;
    }

    /* 모바일도 하단만 밝게. 사진 전체를 덮지 않는다. */
    .hero-scrim {
        background: linear-gradient(to top, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.40) 26%, rgba(255, 255, 255, 0) 52%);
    }
}

/* 움직임 최소화 설정을 존중 */
@media (prefers-reduced-motion: reduce) {
    .hero-slide,
    .reveal {
        transition: none !important;
        transform: none !important;
    }
}

/* ============================================================
   7. 제품 캐러셀
      데스크톱 : 원형 링 (기존 형태를 다듬음)
      모바일   : 링을 버리고 "가로 칩 + 큰 이미지"로 전환 (.mode-stack)
                6개 이미지를 300px 원에 올리면 56px 밖에 안 되어
                무엇인지 알아볼 수 없기 때문이다.
   ============================================================ */

/* ---- 공통 : 이미지 썸네일 ---- */
.circle-image {
    border: 4px solid #fff !important; /* 흰 테두리로 배경에서 떠 보이게 */
    box-shadow: 0 6px 18px rgba(22, 32, 43, 0.16);
    background-color: #fff;
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.circle-item.active .circle-image {
    border-color: var(--cse-accent) !important;
    box-shadow: 0 12px 34px rgba(255, 69, 0, 0.30);
}

.circle-item:not(.active):hover .circle-image {
    transform: scale(1.08);
    box-shadow: 0 10px 26px rgba(22, 32, 43, 0.24);
}

/* ---- 데스크톱 : 원형 링 ---- */
.circle-container {
    /* 링 중앙에 은은한 광원 */
    background: radial-gradient(closest-side, rgba(30, 144, 255, 0.07), transparent 70%);
}

.circle-svg circle {
    stroke: rgba(22, 32, 43, 0.16) !important;
    stroke-width: 1.5;
}

/* 중심 -> 활성 아이템 연결선. 원본 코드에도 의도가 있었지만 appendChild가 주석 처리돼 그려지지 않았다. */
.circle-svg .active-spoke {
    stroke: var(--cse-accent);
    stroke-width: 2;
    stroke-dasharray: 5 5;
    opacity: 0.55;
}

.center-content li {
    position: relative;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-muted);
    border-radius: 8px;
    padding: 6px 12px !important;
    transition: color 0.25s ease, background-color 0.25s ease;
}

    .center-content li:hover {
        background-color: var(--cse-accent-soft) !important;
        color: var(--text-strong);
    }

    .center-content li.active {
        color: var(--cse-accent) !important;
        font-weight: 800;
        background-color: transparent !important;
    }

        /* 활성 항목 앞에 강조 막대 */
        .center-content li.active::before {
            content: '';
            position: absolute;
            left: -10px;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 62%;
            border-radius: 2px;
            background-color: var(--cse-accent);
        }

/* ---- 모바일 : 가로 칩 + 큰 이미지 ---- */
.circle-container.mode-stack {
    width: 100%;
    height: auto;
    background: none;
    display: flex;
    flex-direction: column;
}

    .circle-container.mode-stack .circle-svg,
    .circle-container.mode-stack .center-point {
        display: none; /* 링은 모바일에서 쓰지 않는다 */
    }

    /* 라벨 목록 -> 가로 스크롤 칩 */
    .circle-container.mode-stack .center-content {
        position: static;
        transform: none;
        margin: 0 0 14px;
        z-index: auto;
    }

        .circle-container.mode-stack .center-content ul {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            scroll-snap-type: x proximity;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            padding: 2px 2px 8px;
            margin: 0;
        }

            .circle-container.mode-stack .center-content ul::-webkit-scrollbar {
                display: none;
            }

        .circle-container.mode-stack .center-content li {
            flex: 0 0 auto;
            scroll-snap-align: center;
            padding: 9px 16px !important;
            border: 1px solid var(--line);
            border-radius: 999px;
            background-color: #fff;
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--text-body);
            white-space: nowrap;
            min-height: 40px; /* 터치 타겟 확보 */
            display: flex;
            align-items: center;
        }

            .circle-container.mode-stack .center-content li.active {
                background-color: var(--cse-accent) !important;
                border-color: var(--cse-accent);
                color: #fff !important;
            }

                .circle-container.mode-stack .center-content li.active::before {
                    display: none; /* 칩에는 강조 막대가 불필요 */
                }

    /* 이미지 : 활성 1장만 크게 */
    .circle-container.mode-stack .circle-item {
        position: static;
        display: none;
        width: 100%;
        height: auto;
    }

        .circle-container.mode-stack .circle-item.active {
            display: block;
        }

    .circle-container.mode-stack .circle-image {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        border-radius: 18px;
        border: 1px solid var(--line) !important;
        box-shadow: var(--shadow-md);
        object-fit: cover;
    }

/* aspect-ratio 미지원 구형 브라우저 대비 */
@supports not (aspect-ratio: 4 / 3) {
    .circle-container.mode-stack .circle-image {
        height: 60vw;
        max-height: 320px;
    }
}