@charset "utf-8";
/************************************************************************
 * filename     : sub-common.css
 * description  : 명성인터내셔날 sub common style CSS
 * date         : 2025.10.20
************************************************************************/

/* =========== SUB: 공통 =========== */

/* GNB 현재 메뉴 강조(선택) */
.nav__menu>li>a.is-active {
    color: var(--primary);
    background: rgba(0, 71, 148, .08);
    border-radius: 10px;
}

/* =========== SUB: Hero =========== */
.sub-hero {
    position: relative;
    width: 100%;
    padding: clamp(28px, 8vw, 72px) 0;
    background: url('/skin_mw4/images/sub/sub-hero-company.jpg') center/cover no-repeat, linear-gradient(#000, #000);
}

.sub-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .55));
}

.sub-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 1.4rem;
    color: #ffffff;
    margin-bottom: 8px;
}

.breadcrumb a {
    color: #ffffff;
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--primary);
}

.breadcrumb .sep {
    opacity: .6;
}

.breadcrumb .current {
    color: #ffffff;
    font-weight: 600;
}

.sub-title {
    font-size: clamp(2.4rem, 3.5vw, 3.2rem);
    margin: 6px 0 6px;
    font-weight: 800;
    color: #ffffff;
}

.sub-lead {
    font-size: clamp(1.5rem, 2.1vw, 1.8rem);
    color: #ffffff;
}

/* =========== SUB: Layout =========== */
.sub {
    padding-block: clamp(20px, 4vw, 48px);
}

.sub-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: clamp(16px, 2.5vw, 45px);
}

@media (max-width: 992px) {
    .sub-layout {
        grid-template-columns: 1fr;
    }
}

/* =========== SUB: Sidenav =========== */
.sidenav {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    padding: 12px;
    box-shadow: var(--shadow);
    align-self: start;
    position: sticky;
    top: 20px;
    z-index: 2;
}

.sidenav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.sidenav a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: #111827;
    font-size: 1.4rem;
    font-weight: 600;
}

.sidenav a:hover {
    background: rgba(0, 71, 148, .06);
    color: var(--primary);
}

.sidenav a.is-active {
    color: var(--primary);
    background: rgba(0, 71, 148, .08);
}

.sidenav-cta {
    margin-top: 10px;
}

.btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(218, 47, 32, .15);
    color: var(--accent) !important;
    font-weight: 800;
    border-radius: 12px;
    padding: 12px 16px;
    text-decoration: none;
}

.btn-accent:focus,
.btn-accent:hover {
    background: rgba(218, 47, 32, .25) !important;
    color: var(--accent) !important;
}

/* 토글 버튼 (모바일에서만 보임) */
.sidenav__toggle {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    padding: 12px 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: var(--shadow);
}

.sidenav__toggle:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.sidenav__current {
    font-size: 1.5rem;
    color: #111827;
}

.sidenav__caret {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    background: currentColor;
    color: #111827;
    transition: transform .2s ease;
}

.sidenav.is-open .sidenav__caret {
    transform: rotate(180deg);
}

/* 패널 (전환 애니메이션) */
.sidenav__panel {
    transition: grid-template-rows .25s ease, opacity .2s ease;
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
}

.sidenav__panel.is-collapsed {
    grid-template-rows: 0fr;
    opacity: .0;
}

.sidenav__panel>* {
    min-height: 0;
    /* grid collapse를 위한 안전장치 */
}

/* 데스크탑 기본(변경 없음) */
@media (min-width: 992px) {
    .sidenav {
        position: sticky;
        top: 120px;
    }

    .sidenav__toggle {
        display: none;
    }

    .sidenav__panel {
        display: block;
        opacity: 1 !important;
    }
}

/* 모바일 전환 */
@media (max-width: 991px) {
    .sidenav {
        position: static;
        /* sticky 해제 */
        padding: 0;
        /* 카드 스타일 대신 버튼+패널 구조 */
        border: none;
        box-shadow: none;
        background: transparent;
    }

    .sidenav__toggle {
        display: inline-flex;
        margin-bottom: 10px;
    }

    .sidenav__panel {
        border: 1px solid var(--border);
        border-radius: 12px;
        background: #fff;
        box-shadow: var(--shadow);
        overflow: hidden;
        max-height: 800px;
        opacity: 1;
        transition: max-height .25s ease, opacity .2s ease, box-shadow .2s ease, border-color .2s ease;
    }

    .sidenav__panel.is-collapsed {
        max-height: 0;
        opacity: 0;
        border-color: transparent;
        box-shadow: none;
    }

    /* 패널 내부 여백 조정 */
    .sidenav__panel ul {
        padding: 10px;
        display: grid;
        gap: 6px;
    }

    .sidenav a {
        border-radius: 10px;
    }

    .sidenav-cta {
        padding: 10px;
        margin-top: 0;
    }
}

/* 모션 최소화 환경 배려 */
@media (prefers-reduced-motion: reduce) {
    .sidenav__panel {
        transition: none;
    }

    .sidenav__caret {
        transition: none;
    }
}

/* =========== SUB: Content =========== */
.sub-content {
    min-width: 0;
}

.sub-content h2 {
    font-size: 2.2rem;
    margin: 0 0 2rem;
}

.sub-content .lead {
    font-size: 1.8rem;
    color: #334155;
}

.sub-section {
    max-width: 960px;
    margin: 0 auto 5rem;
    padding: 0 24px;
}

.sub-section__title {
    margin: 0 0 24px 0;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    color: #222;
}

/* 공통 본문 래퍼(문단 간격/타이포 통일) */
.sub-section__body {
    background: #fff;
}

/* SUB: Content : CTA 패널 */
.cta-panel {
    margin: 24px 0 6px;
    padding: 18px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 12px;
    background: linear-gradient(180deg, var(--primary), #003a7a);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
}

.btn-primary:hover {
    filter: brightness(.95);
}

/* ========== 공통 유틸: 리빌 애니메이션 ========== */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: all .6s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ========== 회사소개(인사말) ========== */
.greeting__content {
    margin-top: 6px;
    font-size: 1.4rem;
    line-height: 1.9;
    word-break: keep-all;
    hanging-punctuation: first allow-end;
}

.greeting__content p {
    margin: 0 0 12px 0;
}

.greeting__content p+p {
    margin-top: 12px;
}

.greeting__intro {
    font-weight: 800;
    font-size: 1.4em;
    margin: 0 0 14px 0;
}

@media (min-width: 768px) {
    .greeting__content p {
        margin: 0 0 14px 0;
    }

    .greeting__content p+p {
        margin-top: 14px;
    }
}

/* 서명 영역 */
.greeting__footer {
    margin-top: 22px;
    display: grid;
    gap: 6px;
}

.greeting__thanks {
    margin: 0;
    font-weight: 700;
}

.greeting__sign {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 3rem 0 2rem;
    font-size: 1.8rem;
}

.greeting__company {
    font-weight: 700;
}

.greeting__role,
.greeting__suffix {
    color: #6b7280;
}

/* 통일된 약한 텍스트 컬러 */
.greeting__name {
    font-weight: 900;
    letter-spacing: .02em;
}



/* ========== Company: Overview (회사개요) ========== */
.overview {
  --brand: var(--brand, #00458E);
  --ink: #0f172a;
  --muted: #475569;
  --panel: #ffffff;
  --border: #e5e7eb;
  --bgsoft: rgba(96,125,139,0.08); /* 기존 페이지의 연한 청회색 톤 참조 */
  --shadow: 0 10px 20px rgba(0,0,0,.06);
}

.overview .sub-section__title{
  margin: 20px 0 14px;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 800;
  color: var(--ink);
}

.overview .sub-section__body{
  padding: 0; /* 패널에서 패딩 처리 */
}

/* 배경이 살짝 깔린 패널 (fusion 원본 톤 반영) */
.overview__panel{
  background: var(--bgsoft);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: clamp(14px, 3vw, 20px);
}

/* 2단 그리드 */
.overview__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 2vw, 16px);
}
@media (min-width: 992px){
  .overview__grid{
    grid-template-columns: 1fr 1fr;
  }
}

/* Key-Value 리스트 */
.kv{
  margin: 0;
}
.kv__row{
  display: grid;
  grid-template-columns: 130px 1fr;
  border-radius: 12px;
  align-items: start;
}
.kv__row + .kv__row{ margin-top: 10px; }

.kv__key{
  margin: 0;
  font-weight: 800;
  color: var(--ink);
  font-size: 1.4rem;
}
.kv__val{
  margin: 0;
  color: var(--muted);
  word-break: keep-all;
}

/* 모바일에서 한 줄 키 길면 줄바꿈 자연스럽게 */
@media (max-width: 480px){
  .kv__row{
    grid-template-columns: 120px 1fr;
  }
}

/* 첨부 버튼 */
.overview__actions{
  margin-top: clamp(12px, 2.5vw, 16px);
  display: flex;
  justify-content: center;
}

.btn-line{
  --btn-fg: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--btn-fg);
  color: var(--btn-fg);
  background: #fff;
  font-weight: 700;
  transition: filter .2s ease, transform .15s ease;
  text-decoration: none;
}
.btn-line:hover{ filter: brightness(1.03); transform: translateY(-1px); }

/* 아이콘(다운로드) – CSS로 간단 구현 */
.btn-doc__icon{
  width: 18px; height: 18px; position: relative; display:inline-block;
}
.btn-doc__icon::before,
.btn-doc__icon::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  background: currentColor;
}
.btn-doc__icon::before{ /* 화살표 막대 */
  width: 2px; height: 10px; top: 0;
}
.btn-doc__icon::after{ /* 아래 박스 */
  width: 14px; height: 6px; bottom: 0; border: 2px solid currentColor; background: transparent;
  border-top: none; border-radius: 0 0 3px 3px;
}

/* 접근성 텍스트 */
.btn-doc__text{ line-height: 1; }



/* ========== 연혁 ========== */
/* ================================================= */
/* CSS Custom Properties (변수)          */
/* ================================================= */
:root {
    --color-primary: #004794;
    /* 핵심 블루 */
    --color-primary-dark: #003366;
    /* 진한 블루 */
    --color-text: #343a40;
    /* 본문 텍스트 */
    --color-line: #dee2e6;
    /* 타임라인 라인 */
    --color-background: #f8f9fa;
    /* 배경색 */
    --shadow-subtle: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* Base Style */
.sub-content {
    background-color: #fff;
    /* 콘텐츠 영역 흰색 배경 */
}

.history__content {}

/* ================================================= */
/* Timeline Layout                    */
/* ================================================= */
.timeline {
    position: relative;
    max-width: 1000px;
    /* 최대 너비 확장 */
    margin: 0 auto;
    padding-left: 20px;
    /* 전체 타임라인 왼쪽 여백 */
}

/* Timeline Vertical Line */
.timeline__line {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
    /* 연도 블록과의 정렬 기준선 */
    width: 2px;
    background: var(--color-line);
}

/* Year Block */
.year-block {
    position: relative;
    padding-left: 30px;
    /* 연도 제목 공간 확보 */
    margin-bottom: 40px;
    /* 연도 간격 넓힘 */
}

/* Year Title - 절대 위치로 왼쪽에 고정 */
.year-block__year {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin: 0;
    line-height: 1.2;
}

/* Event List */
.year-block__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 15px;
    /* 카드 사이 간격 넓힘 */
}

/* Event Card - 부드럽고 전문적인 디자인 */
.history-card {
    background: #fff;
    border-radius: 10px;
    /* 부드러운 모서리 */
    box-shadow: var(--shadow-subtle);
    padding: 15px 20px;
    font-size: 1.5rem;
    color: var(--color-text);
    position: relative;
    line-height: 1.6;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Hover Effect */
.history-card:hover {
    transform: translateY(-3px);
    /* 약간의 상승 효과 */
    box-shadow: var(--shadow-hover);
}

/* Timeline Dot - 라인에 붙는 강조점 */
.history-card__dot {
    content: "";
    position: absolute;
    top: 50%;
    /* 수직 중앙 정렬 */
    left: -36px;
    /* 연도 제목 공간에 위치 */
    width: 14px;
    height: 14px;
    background: var(--color-primary);
    border: 3px solid #fff;
    /* 흰색 테두리로 강조 */
    border-radius: 50%;
    transform: translateY(-50%);
    z-index: 2;
    /* 라인 위에 올라오도록 z-index 설정 */
    box-shadow: 0 0 0 2px var(--color-primary);
    /* 도트 주변에 미세한 테두리 추가 */
}

/* Animation Styles (Reveal class) */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================= */
/* Mobile Responsive                  */
/* ================================================= */
@media (max-width: 768px) {

    /* 전체 콘텐츠 패딩 조정 */
    .sub-section {
        padding: 0 15px;
    }

    /* 타임라인 라인 왼쪽 위치 조정 */
    .timeline__line {
        left: 10px;
    }

    /* 연도 블록 왼쪽 패딩 줄임 */
    .year-block {
        padding-left: 15px;
        margin-bottom: 30px;
    }

    /* 모바일에서는 연도를 목록 위로 옮겨 순차적으로 표시 */
    .year-block__year {
        position: static;
        font-size: 2.0rem;
        margin-bottom: 5px;
    }

    /* 카드 텍스트 크기 조정 */
    .history-card {
        font-size: 1.4rem;
        padding: 12px 16px;
    }

    /* 도트 위치 조정 */
    .history-card__dot {
        left: -30px;
        /* 새로운 패딩에 맞게 조정 */
        width: 12px;
        height: 12px;
        border-width: 2px;
        box-shadow: 0 0 0 1px var(--color-primary);
    }
}



/* 조직도 */
.org__content {}

.org__content .org-box {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.org__content .zoombar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.org__content .zoompct {
    min-width: 64px;
    text-align: center;
    color: #344054;
    font-size: 13px;
}

.org__content .box-body {
    position: relative;
    flex: 1;
    overflow: auto;
    background: linear-gradient(180deg, #ffffff 0, #fbfdff 100%);
}

/* ========== [스테이지/콘텐츠] ========== */
.org__content .stage-wrap {
    position: relative;
    width: max-content;
    height: max-content;
    z-index: 1;
}

.org__content .org-content {
    position: relative;
    transform-origin: 0 0;
    /* 확대/축소 기준점 */
}

.org__content svg.org-links {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: block;
    z-index: 1;
}

.org__content .org-levels {
    display: flex;
    flex-direction: column;
    gap: 85px;
    padding: 40px;
    position: relative;
    z-index: 5;
    /* 선보다 위 */
}

.org__content .row {
    display: flex;
    align-items: flex-start;
    gap: 48px;
    justify-content: center;
}

/* ========== [노드 공통] ========== */
.org__content .node {
    width: 200px;
    min-height: 56px;
    position: relative;
    z-index: auto;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .08);
    display: flex;
    flex-direction: column;
    align-self: flex-start;
}

/* ─ 노드 헤더(직책/역할) */
.org__content .node-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-bottom: 1px solid #e5e7eb;
    background: #e5e7eb;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.org__content .node-title {
    font-size: 13px;
    font-weight: 600;
    color: #475467;
    text-align: center;
}

/* ========== [사람 리스트: 멀티 인원] ========== */
.org__content .person-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 12px;
}

.org__content .person-item {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    column-gap: 10px;
    min-height: 28px;
    position: relative;
}

.org__content .person-item .pname {
    font-size: 1.4rem;
    font-weight: 700;
    color: #101828;
}

/* ========== [아이콘/아바타] ========== */
.org__content .icon.person {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(0, 52, 119, .06);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    flex: 0 0 24px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23365CF5' viewBox='0 0 24 24'><path d='M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-4.42 0-8 2.01-8 4.5V21a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-2.5c0-2.49-3.58-4.5-8-4.5z'/></svg>");
}

/* ========== [레벨별 스타일] ========== */
/* 1레벨 - 대표이사 */
.org__content .row[data-level="1"] .node {
    background: #eaf1fb;
    border-color: #c3d4f5;
}

.org__content .row[data-level="1"] .node-header {
    background: #c3d4f5;
    border-color: #c3d4f5;
}

.org__content .row[data-level="1"] .icon.person {
    background-color: rgba(0, 52, 119, .1);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23365CF5' viewBox='0 0 24 24'><path d='M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-4.42 0-8 2.01-8 4.5V21a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-2.5c0-2.49-3.58-4.5-8-4.5z'/></svg>");
}

/* 2레벨 */
.org__content .row[data-level="2"] .node {
    background: #eaf1fb;
    border-color: #c3d4f5;
}

.org__content .row[data-level="2"] .node-header {
    background: #c3d4f5;
    border-color: #c3d4f5;
}

.org__content .row[data-level="2"] .icon.person {
    background-color: rgba(0, 52, 119, .1);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23365CF5' viewBox='0 0 24 24'><path d='M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-4.42 0-8 2.01-8 4.5V21a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-2.5c0-2.49-3.58-4.5-8-4.5z'/></svg>");
}

/* 3레벨 */
.org__content .row[data-level="3"] .node {
    background: #f6f8fb;
    border-color: #e5e7eb;
}

.org__content .row[data-level="3"] .node-header {
    background: #e5e7eb;
    border-color: #e5e7eb;
}

.org__content .row[data-level="3"] .icon.person {
    background-color: rgba(0, 52, 119, .05);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23365CF5' viewBox='0 0 24 24'><path d='M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-4.42 0-8 2.01-8 4.5V21a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-2.5c0-2.49-3.58-4.5-8-4.5z'/></svg>");
}



/* =========================================================
    Company: Ideology (경영이념)
   ========================================================= */
.ideology__pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.ideology-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 16px;
    box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease;
    text-align: center;
}

.ideology-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
}

.ideology-card__icon {
    width: 54px;
    height: 54px;
    border-radius: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    color: var(--primary);
    background: rgba(0, 71, 148, .06);
}

.ideology-card__title {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0 0 4px;
    color: #111827;
}

.ideology-card__subtitle {
    font-size: 1.4rem;
    font-weight: 700;
    color: #334155;
    margin: 0 0 8px;
}

.ideology-card__desc {
    color: #475569;
    word-break: keep-all;
}

/* 카드 하단 보더(세 카드 동일 컬러 유지) */
.ideology-card--innovation,
.ideology-card--people,
.ideology-card--society {
    border-bottom: 4px solid #004694;
}

/* 연결 라인 + 코어 */
.ideology__connect {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

.ideology__connector {
    width: 2px;
    height: 48px;
    background: #cbd5e1;
    opacity: .9;
    border-radius: 2px;
    position: relative;
}

.ideology__core {
    position: relative;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(10, 20, 50, .15), 0 0 0 10px rgba(255, 255, 255, .5);
    text-align: center;
    padding: 8px;
}

.ideology__core-name {
    font-size: 2rem;
    line-height: 1.15;
    font-weight: 800;
    display: block;
}

.ideology__core-caption {
    font-size: 1.2rem;
    opacity: .9;
    margin-top: 4px;
}

.ideology__core-glow {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0));
    animation: ideologyPulse 4s cubic-bezier(.4, 0, .6, 1) infinite;
}

@keyframes ideologyPulse {

    0%,
    100% {
        opacity: .3
    }

    50% {
        opacity: .7
    }
}

/* =========================================================
    Company: Credo (사훈) — 카드 3개
   ========================================================= */
.credo__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.credo-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow);
    padding: 24px 16px;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease;
}

.credo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
}

/* 모바일 기본: 작은 한자 크기 */
.credo-card__char {
    font-weight: 800;
    font-size: 2.6rem;
    line-height: 1;
    color: #004694;
    margin-bottom: 10px;
}

.credo-card__title {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 6px;
    color: #111827;
}

.credo-card__desc {
    color: #475569;
    font-size: 1.4rem;
}

/* 배경 텍스처(선택) */
.credo-card--righteous,
.credo-card--sincere,
.credo-card--creative {
    background-image:
        radial-gradient(1200px 1200px at 10% 0%, rgba(255, 255, 255, .24), transparent);
    background-size: cover;
}

/* 모바일 전용 라인브레이크 */
.credo .m-only {
    display: none;
}


/* =========================================================
    Breakpoints
   ========================================================= */

/* >= 576px */
@media (min-width: 576px) {

    /* 사훈 한자 크기 확장 */
    .credo-card__char {
        font-size: 3.2rem;
    }

    /* 모바일 전용 라인브레이크는 숨김 유지(기본값과 동일) */
    .credo .m-only {
        display: none;
    }
}

/* >= 768px */
@media (min-width: 768px) {

    /* 사훈 카드 3열 */
    .credo__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
}

/* <= 575px (필요한 항목만 별도 관리) */
@media (max-width: 575px) {
    .credo .m-only {
        display: block;
    }
}

/* ===== 데스크탑 ===== */
@media (min-width: 992px) {

    /* 선 색상 재사용 변수(원하면 바꿔도 됨) */
    .ideology {
        --connector: #cbd5e1;
    }

    /* 카드 하단에 수직선 내려오도록 */
    .ideology__pillars {
        position: relative;
        padding-bottom: 36px;
        /* 수직선 내려오는 공간 확보 */
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    .ideology-card {
        position: relative;
    }

    .ideology-card::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -40px;
        width: 2px;
        height: 35px;
        background: var(--connector);
        border-radius: 1px;
    }

    .ideology__pillars::after {
        content: "";
        position: absolute;
        left: 16%;
        /* 3열 카드의 중앙점: 1/6, 1/2, 5/6 */
        right: 16%;
        bottom: 0;
        /* padding-bottom 끝지점(=카드 아래 기준선) */
        height: 2px;
        background: var(--connector);
        border-radius: 1px;
    }

    /* 기존 코어 위의 수직선 색상/두께를 연결선과 맞춤 */
    .ideology__connector {
        width: 2px;
        height: 48px;
        background: var(--connector);
        opacity: 1;
    }
}

/* ========== Company: Meaning (명성 의미) ========== */
.meaning {
    padding: 40px 0;
}

/* 하나의 박스 안에서 좌우 분할 */
.meaning-card {
    display: flex;
    align-items: center;
    gap: 32px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 32px;
    flex-wrap: wrap;
}

/* 좌측 로고 */
.meaning-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 300px;
    max-width: 300px;
    text-align: center;
}

.meaning-card__logo img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* 우측 텍스트 */
.meaning-card__content {
    flex: 1 1 0%;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.meaning__block {
    background: #fafafa;
    border-radius: 12px;
    padding: 16px 18px;

}

.meaning__char {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--primary);
}

.meaning__pronounce {
    font-size: 1.4rem;
    color: #64748b;
    margin-left: 4px;
}

.meaning__list {
    color: #334155;
    font-size: 1.5rem;
    line-height: 1.6;
    margin-left: 2rem;
}

.meaning__list li {
    list-style: disc;
}

/* 색상 강조 */
.text-hot {
    color: #d32f2f;
    font-weight: 700;
}

.text-cold {
    color: #005bc1;
    font-weight: 700;
}

/* 반응형 */
@media (max-width: 991px) {
    .meaning-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .meaning-card__logo {
        max-width: 200px;
    }

    .meaning__list {
        text-align: left;
        list-style-position: inside;
    }
}

/* =========================================================
    Company: Business Areas (사업영역)
   ========================================================= */
.biz {
    padding-bottom: 16px;
}

/* 중앙 코어(브랜드 휠) */
.biz__wheel {
    display: flex;
    justify-content: center;
    margin: 10px 0 50px;
}

.biz-wheel {
    width: 210px;
    height: 210px;
    border-radius: 50%;
    /*background: linear-gradient(145deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .45));
    backdrop-filter: blur(12px);*/
    box-shadow: inset 0 0 30px rgba(255, 255, 255, .3), 0 8px 20px rgba(0, 0, 0, .15);
    background-color: #004694;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px;
}

.biz-wheel__brand {
    font-size: 2rem;
    font-weight: 800;
}

.biz-wheel__tag {
    font-size: .95rem;
    opacity: .85;
}

.biz-wheel__caption {
    font-size: .95rem;
    font-weight: 700;
}

/* 그리드 */
.biz__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .biz__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .biz__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 섹터 카드 */
.sector-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 18px 14px 14px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.sector-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .15);
}

.sector-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.sector-card__title {
    font-size: 1.6rem;
    line-height: 1.2;
    font-weight: 800;
    color: var(--primary);
    word-break: keep-all;
}

.sector-card .icon {
    font-family: "Material Icons";
    font-size: 22px;
    line-height: 1;
    color: #333;
    transition: transform .25s ease, color .25s ease;
}

.sector-card:hover .icon {
    color: var(--primary);
    transform: scale(1.15) rotate(4deg);
}

.sector-card__subtitle {
    font-size: 1.2rem;
    color: #334155;
    margin: 0 0 6px;
    font-weight: 700;
}

.sector-card__list {
    margin-left: 1.8rem;
    color: #333;
    font-size: 1.2rem;
    line-height: 1.5;
}

.sector-card__list li {
    list-style: disc;
}

.sector-card {
    border-bottom: 4px solid #004694;
}


@media (min-width: 992px) {
    .biz {
        --connector: #cbd5e1;
    }

    .biz__grid {
        position: relative;
        padding-bottom: 36px;
    }

    .sector-card {
        position: relative;
    }
}

/* =========================================================
    Company: Business Areas Table (사업영역)
   ========================================================= */
/* ===== panel-tech: 리스트 + 증빙 이미지 갤러리 ===== */
#panel-tech .table-wrap {
    display: grid;
    gap: 12px;
}

/* 서류 리스트 */
.doc-list {
    counter-reset: doc;
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.doc-list>li {
    position: relative;
    padding: 10px 12px 10px 44px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow);
    color: #111827;
    line-height: 1.45;
    word-break: keep-all;
}

.doc-list>li::before {
    counter-increment: doc;
    content: counter(doc);
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 71, 148, .10);
    /* var(--primary, #004694)의 투명 배경 */
    color: var(--primary, #004694);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
}

/* 이미지 : 증명서 */
.cert-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 20px;
}

.cert-gallery__item {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    aspect-ratio: auto;
    padding: 8px;
}

.cert-gallery__img {
    max-height: 100%;
    width: auto;
    /* 비율 유지 */
    display: block;
}

/* 태블릿 */
@media (min-width: 768px) {
    .cert-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

/* PC */
@media (min-width: 992px) {
    .cert-gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}


/* =========================================================
    Company: Business Areas Table (경영진 소개)
   ========================================================= */

/* --- Base Styles: CEO 프로필에서 사용한 스타일을 staff-member-profile에 재적용 --- */
.staff-member-profile {
}

/* 짝수 번째 또는 .alt-bg 클래스가 있는 프로필에 흰색 배경을 적용하여 시각적 구분 */
.staff-member-profile.alt-bg {
    background-color: #fff;
}

/* --- Profile Container --- */
.profile-container {
    margin: 0 auto;
    display: flex;
    gap: 40px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 18px 14px 14px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    padding: 30px;
    margin-bottom:1.5rem;
}

/* --- 1. Profile Sidebar (좌측) --- */
.profile-sidebar {
    width: 25%;
    flex-shrink: 0;
}

.profile-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.profile-text {
    text-align: center;
    padding: 15px 0 0 0; /* 이미지와의 간격 조정 */
}

.profile-text h2 {
    font-size: 1.6em; /* 다른 직원을 고려해 폰트 크기 약간 조정 */
    font-weight: bold;
    color: #333;
    margin: 0 0 5px 0;
}

.profile-text p {
    font-size: 1em; /* 폰트 크기 조정 */
    color: #555;
    margin: 0;
}

.profile-text p:first-of-type {
    color: #0265f9; /* 직급을 강조색으로 */
}

.profile-text .job-unit {
    font-size: 0.9em;
    color: #999;
    margin-top: 5px;
}


/* --- 2. Profile Details (우측) --- */
.profile-details {
    width: 75%;
    flex-grow: 1;
    padding: 0; /* 컨테이너에 패딩이 있으므로 0으로 설정 */
}

.detail-block {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.detail-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.detail-block h3 {
    font-size: 1.3em;
    color: #0265f9;
    border-left: 4px solid #0265f9;
    padding-left: 10px;
    margin-top: 0;
    margin-bottom: 15px;
}

/* --- List Styling (Timeline) --- */
.timeline-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.timeline-list li {
    padding: 5px 0;
    line-height: 1.6;
    color: #555;
    position: relative;
    padding-left: 15px;
}

.timeline-list li::before {
    content: "•";
    color: #999;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    position: absolute;
    left: 15px;
    top: 3px;
}

.timeline-list .year {
    font-weight: bold;
    color: #333;
    display: inline-block;
    min-width: 80px;
}

.sub-list {
    list-style: none;
    padding-left: 20px;
    margin: 5px 0 0 0;
    font-size: 0.95em; /* 서브 리스트 폰트 크기 조정 */
}
.sub-list li::before {
    content: "—";
    color: #bbb;
    left:0;
}

/* --- 📱 Media Query (반응형: 태블릿/모바일) --- */
@media (max-width: 768px) {
    
    .profile-container {
        flex-direction: column;
        gap: 20px;
        padding: 20px; /* 모바일 패딩 조정 */
        box-shadow: none; /* 모바일에서 박스 섀도우 제거 (옵션) */
        background-color: #fff; /* 모바일에서는 배경 통일 */
    }

    .profile-sidebar, 
    .profile-details {
        width: 100%;
        padding: 0;
    }
    
    .profile-sidebar {
        max-width: 250px; /* 모바일에서 사진 크기 제한 */
        margin: 0 auto;
        order: 1;
    }
    
    .profile-details {
        order: 2;
    }

    .detail-group {
        display: block; /* 그리드 대신 블록으로 변경 */
    }
    
    .timeline-list .year {
        display: block;
        margin-bottom: 3px;
    }
    
    .profile-text {
        padding-top: 5px;
    }
}


/* =========================================================
    Company: Licences
   ========================================================= */

.policy-header {
    text-align: center;
    margin-bottom: 40px;
}

.policy-header .sub-title {
    display: block;
    font-size: 14px;
    color: #004085;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.policy-header h2 {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    color: #111;
}

.policy-header .line {
    width: 60px;
    height: 3px;
    background: #004085;
    margin: 20px auto 0;
}

.policy-intro {
    text-align: center;
    margin-bottom: 50px;
    background: #f8f9fa;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.policy-intro p {
    font-size: 18px;
    color: #444;
    margin: 0;
    word-break: keep-all;
}

.policy-content {
    margin-bottom: 60px;
}

.policy-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.policy-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.policy-list li:last-child {
    border-bottom: none;
}

.policy-list .num {
    font-size: 24px;
    font-weight: 900;
    color: #004085;
    margin-right: 15px;
    line-height: 1.2;
    min-width: 40px;
}

.policy-list .text strong {
    display: block;
    font-size: 18px;
    color: #004085;
    margin-bottom: 5px;
}

.policy-list .text p {
    margin: 0;
    color: #555;
    font-size: 16px;
    word-break: keep-all;
}

/* 목표 영역 (박스형 디자인) */
.policy-goals {
    background-color: #f0f4f8;
    padding: 40px;
    border-radius: 12px;
    margin-bottom: 50px;
}

.policy-goals h2 {
    text-align: center;
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 30px;
    color: #111;
}

.goal-cards {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.goal-cards .card {
    flex: 1;
    min-width: 200px;
    background: #fff;
    padding: 25px 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}

.goal-cards .card:hover {
    transform: translateY(-5px);
}

.goal-cards .icon {
    display: inline-block;
    background: #004085;
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 15px;
}

.goal-cards p {
    margin: 0;
    font-size: 16px;
    color: #333;
    line-height: 1.5;
    word-break: keep-all;
}

.goal-cards p strong {
    color: #d63031;
    font-weight: 700;
}

/* 하단 서명 영역 */
.policy-footer {
    text-align: center;
    margin-top: 40px;
}

.policy-footer .pledge {
    font-size: 16px;
    color: #666;
    margin-bottom: 40px;
    font-style: italic;
}

.signature-area {
    text-align: center;
    margin-top: 40px;
}
.signature-area .date {
    font-size: 16px;
    color: #555;
    margin-bottom: 15px;
    display: block;
}

.signer-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.ceo-name {
    font-size: 22px;
    font-weight: 700;
    color: #000;
}

.signature-stamp-box {
    width: 80px;
    height: 50px;
    background-image: url('/skin_mw4/images/sub/img-ceo-signature.jpg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    font-weight: bold;
    font-size: 14px;
    
    /* 선택사항: 이미지가 너무 진하면 글자가 잘 안 보일 수 있으므로 배경을 살짝 투명하게 하거나 글자에 그림자를 줄 수 있습니다.
    opacity: 0.9; 
    text-shadow: 1px 1px 2px rgba(255,255,255,0.8); */
}

/* 반응형 모바일 대응 */
@media (max-width: 768px) {
    .ms-policy-container {
        padding: 40px 15px;
    }
    .policy-header h1 {
        font-size: 24px;
    }
    .pc-br {
        display: none;
    }
    .policy-intro p {
        font-size: 15px;
    }
    .goal-cards {
        flex-direction: column;
    }

    .policy-paper { padding: 30px 20px; }
    .signature-area { text-align: center; }
    .signer-wrapper { justify-content: center; }

}