/* ==========================================================================
   회사소개 페이지 전용 (공통 요소는 common.css)
   ========================================================================== */

/* ---------- 회사개요 ---------- */

.company-overview-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.85fr;
    align-items: center;
    gap: 40px;
}

.company-copy h2 {
    margin-bottom: 16px;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--navy);
}

.company-copy p {
    color: var(--sub);
    line-height: 1.85;
}

.keyword-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.keyword-list li {
    padding: 8px 14px;
    border: 1px solid rgba(0, 184, 160, 0.3);
    border-radius: 999px;
    background: var(--light);
    color: var(--teal-d);
    font-size: 0.92rem;
    font-weight: 700;
}

/* ---------- 비전 ---------- */

.vision-card h2 {
    font-size: 1.35rem;
    font-weight: 800;
}

/* ---------- 연혁 타임라인 ---------- */

.timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

/* 세로 연결선 */
.timeline::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 67px;
    width: 2px;
    background: linear-gradient(180deg, var(--teal), var(--blue));
    opacity: 0.35;
}

.timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 136px 1fr;
    align-items: start;
    gap: 24px;
    padding-bottom: 22px;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-year {
    position: relative;
    z-index: 1;
    justify-self: center;
    margin-top: 18px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--grad);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* 연표 안에서 짚어둘 항목(역량진단 결과 등): 굵게만 */
.timeline-content .check-list li.is-key {
    color: var(--navy);
    font-weight: 700;
}

/* 회사의 두 이정표: 설립(2018)은 금, 법인 전환(2020)은 은.
   은은 사이트의 블루 톤에 맞춰 푸른빛을 띤다. */
.timeline-item.is-founding .timeline-year,
.timeline-item.is-incorporation .timeline-year {
    margin-top: 14px;
    padding: 9px 18px;
    font-size: 0.98rem;
}

.timeline-item.is-founding .timeline-year,
.timeline-item.is-incorporation .timeline-year {
    border: 1px solid rgba(255, 255, 255, 0.55);
}

/* 광택: 사선 반사광 + 윗면 유리 하이라이트 + 바탕색 순으로 겹친다 */
.timeline-item.is-founding .timeline-year {
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0.6) 40%, rgba(255, 255, 255, 0) 52%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.12) 48%, rgba(255, 255, 255, 0) 52%),
        linear-gradient(135deg, #ffc233, #f08c00);
    box-shadow:
        0 6px 18px rgba(240, 140, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -3px 6px rgba(150, 70, 0, 0.3);
    text-shadow: 0 1px 2px rgba(120, 55, 0, 0.45);
}

.timeline-item.is-incorporation .timeline-year {
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0.65) 40%, rgba(255, 255, 255, 0) 52%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.12) 48%, rgba(255, 255, 255, 0) 52%),
        linear-gradient(135deg, #c5d4e4 0%, #98afc9 50%, #6f8cad 100%);
    box-shadow:
        0 6px 18px rgba(80, 110, 150, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -3px 6px rgba(30, 55, 90, 0.28);
    text-shadow: 0 1px 2px rgba(20, 40, 70, 0.5);
}

.timeline-content {
    padding: 24px 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.timeline-content h3 {
    margin-bottom: 8px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--navy);
}

.timeline-content p {
    margin: 0;
    color: var(--sub);
    line-height: 1.8;
}

/* ---------- 조직도 ---------- */

.org-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.org-center {
    position: relative;
    min-width: 260px;
    padding: 18px 28px;
    border-radius: 14px;
    background: var(--grad);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.04em;
    box-shadow: 0 12px 28px rgba(0, 184, 160, 0.28);
}

/* 대표 박스에서 팀으로 내려가는 연결선 */
.org-center::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: 36px;
    background: rgba(0, 184, 160, 0.4);
}

.org-grid {
    width: 100%;
    margin-top: 36px;
}

@media (max-width: 900px) {
    .company-overview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .timeline::before {
        display: none;
    }

    .timeline-item {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .timeline-year,
    .timeline-item.is-founding .timeline-year,
    .timeline-item.is-incorporation .timeline-year {
        justify-self: start;
        margin-top: 0;
    }
}

/* ---------- 조직도 카드 삽화 ----------
   세 컷 모두 같은 일러스트 세트(unDraw)에서 골라 포인트 색만 브랜드 블루로
   맞췄다. 출처가 다른 소재를 섞으면 선 굵기·채색 방식이 제각각이라
   페이지가 산만해진다. 의미는 제목이 전달하므로 이미지는 장식으로만 둔다. */

.org-illust {
    display: block;
    width: 100%;
    max-width: 200px;
    height: 132px;
    margin: 0 auto 18px;
    object-fit: contain;
}

@media (max-width: 600px) {
    .org-illust {
        height: 110px;
    }
}

/* 조직도 카드 제목은 팀 이름이라 카드 가운데에서 크게 보이는 편이 낫다. */
.org-card h2 {
    font-size: 1.45rem;
    text-align: center;
}

/* 조직도: 대표이사 → 이사 2인 → 사업부 3 (회사소개서 기준) */
.org-exec {
    width: 100%;
    max-width: 720px;
    margin: 36px auto 0;
}

.org-exec-card {
    text-align: center;
}

.org-exec-card h2 {
    font-size: 1.15rem;
}

.org-exec-card p {
    margin: 0;
}

/* 이사 카드에서 사업부로 내려가는 연결선.
   .card-grid 가 그리드라 ::after 도 격자 칸에 들어간다 — 전체 폭을 차지하게 해야
   가운데로 온다. */
.org-exec::after {
    content: "";
    grid-column: 1 / -1;
    justify-self: center;
    width: 2px;
    height: 28px;
    background: rgba(0, 184, 160, 0.4);
}

/* 연혁: 숫자 카드는 값이 주인공이다. */
.history-stats h3 {
    margin-bottom: 6px;
    font-size: 1.5rem;
    color: var(--teal-d);
}

.history-stats p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
}

/* 회사 정보 표 — 항목/값 2열. 솔루션 비교표(solutions.css)는 이 페이지에서
   읽지 않으므로 필요한 만큼만 여기서 정의한다. */
.profile-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.profile-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.profile-table th,
.profile-table td {
    padding: 15px 18px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    line-height: 1.7;
}

.profile-table tbody th {
    width: 150px;
    background: var(--light);
    color: var(--teal-d);
    font-weight: 700;
    white-space: nowrap;
}

.profile-table tbody tr:last-child th,
.profile-table tbody tr:last-child td {
    border-bottom: 0;
}

@media (max-width: 600px) {
    .profile-table th,
    .profile-table td {
        padding: 12px 14px;
        font-size: 0.92rem;
    }

    .profile-table tbody th {
        width: 96px;
        white-space: normal;
    }
}

/* ---------- 오래 함께해 온 곳 (연혁) ----------
   로고는 각 사 공식 홈페이지에서 받은 것(바탕 여백은 잘라냄).
   로고 크기가 제각각이라 흰 칸 안에 맞춰 넣는다. */

.client-grid {
    margin-top: 8px;
}

.client-card {
    display: flex;
    flex-direction: column;
    padding: 22px 22px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.client-card:hover {
    border-color: var(--teal);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 184, 160, 0.12);
}

.client-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 84px;
    margin-bottom: 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

.client-logo img {
    max-width: 78%;
    max-height: 56px;
    object-fit: contain;
}

.client-logo.is-wide img {
    max-height: 34px;
}

/* 원형 인장형 로고는 여백이 커서 한 단계 크게 */
.client-logo.is-seal img {
    max-height: 72px;
}

/* 한 카드에 두 회사(정식품·광동제약): 로고 칸을 반씩, 가운데 구분선 */
.client-logo.is-pair {
    gap: 0;
    padding: 0 6px;
}

.client-logo.is-pair img {
    flex: 1 1 0;
    min-width: 0;
    max-width: 50%;
    max-height: 40px;
    padding: 0 8px;
}

.client-logo.is-pair img + img {
    border-left: 1px solid var(--line);
}

/* 회사명 옆에 거래 시작 연도 */
.client-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-bottom: 6px;
}

.client-since {
    flex: none;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--light);
    color: var(--teal-d);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.client-card h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--navy);
}

.client-card p {
    margin: 0;
    color: var(--sub);
    font-size: 0.92rem;
    line-height: 1.7;
}

/* 폰에서 1열이면 카드 8장이 너무 길어져 2열로 둔다 */
@media (max-width: 640px) {
    .card-grid.cols-4.client-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .client-card {
        padding: 14px 14px 16px;
    }

    .client-logo {
        height: 76px;
        margin-bottom: 12px;
    }

    .client-logo img {
        max-height: 40px;
    }

    .client-logo.is-wide img {
        max-height: 26px;
    }

    .client-logo.is-seal img {
        max-height: 56px;
    }

    /* 폰에서는 반 칸이 너무 좁아 두 로고를 위아래로 */
    .client-logo.is-pair {
        flex-direction: column;
        gap: 6px;
        padding: 8px 0;
    }

    .client-logo.is-pair img {
        flex: none;
        max-width: 80%;
        max-height: 27px;
        padding: 0;
    }

    .client-logo.is-pair img + img {
        border-left: 0;
    }

    .client-card p {
        font-size: 0.85rem;
    }

    /* 삼성아이앤비처럼 긴 이름도 연도와 한 줄에 */
    .client-title {
        gap: 4px 5px;
    }

    .client-card h3 {
        font-size: 0.92rem;
        letter-spacing: -0.02em;
    }

    .client-since {
        padding: 1px 6px;
        font-size: 0.7rem;
        letter-spacing: 0;
    }
}

/* ---------- 인증 및 보유 기술 ----------
   문서 이미지는 A4 비율 그대로 보여주고, 누르면 같은 페이지에서 크게 본다. */

.cert-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.cert-card {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.cert-thumb {
    display: block;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.cert-thumb:hover,
.cert-thumb:focus-visible {
    border-color: var(--teal);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 184, 160, 0.14);
}

.cert-thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 440 / 622;
    object-fit: cover;
}

.cert-card figcaption {
    padding: 14px 4px 0;
}

.cert-card h3 {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.45;
}

.cert-meta {
    margin: 0;
    color: var(--sub);
    font-size: 0.88rem;
    line-height: 1.6;
}

.cert-meta strong {
    color: var(--teal-d);
}

.cert-issuer {
    margin: 4px 0 0;
    color: var(--sub);
    font-size: 0.8rem;
    opacity: 0.85;
}

.cert-subhead {
    margin: 48px 0 18px;
    padding-left: 12px;
    border-left: 4px solid var(--teal);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--navy);
}

/* 참여확인서 '그 외 다수' 칸 */
.cert-more {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    padding: 26px 22px;
    border: 1.5px dashed rgba(0, 184, 160, 0.45);
    border-radius: 12px;
    background: var(--light);
    aspect-ratio: 440 / 622;
}

.cert-more p {
    margin: 0;
    color: var(--sub);
    font-size: 0.92rem;
    line-height: 1.7;
}

.cert-more .cert-more-title {
    color: var(--navy);
    font-size: 1.3rem;
    font-weight: 800;
}

/* 크게 보기 */
.cert-viewer {
    width: min(92vw, 760px);
    max-height: 94vh;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: #fff;
    overflow: auto;
}

.cert-viewer::backdrop {
    background: rgba(10, 22, 40, 0.72);
}

.cert-viewer img {
    display: block;
    width: 100%;
    height: auto;
}

.cert-viewer-caption {
    margin: 0;
    padding: 12px 18px 16px;
    color: var(--sub);
    font-size: 0.9rem;
}

.cert-viewer-close {
    position: sticky;
    top: 10px;
    float: right;
    z-index: 1;
    width: 40px;
    height: 40px;
    margin: 10px 10px -50px 0;
    border: 0;
    border-radius: 50%;
    background: rgba(13, 27, 46, 0.78);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

@media (max-width: 1024px) {
    .cert-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .cert-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .cert-more {
        aspect-ratio: auto;
        padding: 18px 16px;
    }

    .cert-card h3 {
        font-size: 0.92rem;
    }

    .cert-meta {
        font-size: 0.8rem;
    }
}

.profile-table a {
    color: var(--teal-d);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 역량진단 확인서: 문서 + 요약을 나란히 */
.cert-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    align-items: center;
    gap: 40px;
}

.cert-feature-body h3 {
    margin: 0 0 18px;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--navy);
}

.cert-facts {
    margin: 0;
    border-top: 1px solid var(--line);
}

.cert-facts > div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.cert-facts dt {
    color: var(--teal-d);
    font-weight: 700;
}

.cert-facts dd {
    margin: 0;
    color: var(--text);
}

.cert-facts strong {
    color: var(--navy);
}

.cert-feature-note {
    margin: 18px 0 0;
    color: var(--sub);
    font-size: 0.92rem;
    line-height: 1.7;
}

@media (max-width: 640px) {
    .cert-feature {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .cert-feature .cert-thumb {
        max-width: 220px;
    }

    .cert-facts > div {
        grid-template-columns: 84px 1fr;
        font-size: 0.9rem;
    }
}