/*
[POSH 공개 공통 레이아웃 스타일 전체 파일 구조]
public/common/css/public_common_layout.css        - 홈/헤더/푸터/전체 펼침 submenu 스타일
page/shared/layout/public_header.php   - 클래스 사용
page/site/home/home_view.php              - 클래스 사용

20260330t1308
- submenu 항목을 박스형 버튼 대신 아이콘 + 텍스트 리스트 방식으로 정리하고, 향후 메뉴 증가 시 컬럼/구획 분리가 가능하도록 레이아웃을 조정했습니다.
20260330t1322
- 메인메뉴 Depth1 hover 시 위치 이동 없이, 밑줄 + 약한 음영으로만 강조되도록 조정했습니다.
20260330t1419
- 통합 submenu(D2) 항목 hover 시 가로 이동(transform)을 제거하고, 위치 고정 상태에서 약한 음영 + 밑줄만 적용하도록 조정했습니다.
*/

:root {
    --posh-black: #101010;
    --posh-white: #ffffff;
    --posh-gray-50: #f5f5f5;
    --posh-gray-100: #ececec;
    --posh-gray-300: #d9d9d9;
    --posh-gray-500: #8c8c8c;
    --posh-blue: #1c3cff;
    --posh-accent: #d6921c;
    --posh-shell: 1180px;
    --posh-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: #1e1e1e;
    background: #f2f2f2;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.site-shell { width: min(calc(100% - 40px), var(--posh-shell)); margin: 0 auto; }
.section-block { padding: 26px 0 32px; }
.section-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-bottom: 22px;
}
.section-head--stacked { align-items: flex-end; }
.section-head h2 { margin: 0; font-size: 52px; line-height: 1.08; font-weight: 900; }
.section-head p { margin: 10px 0 0; font-size: 20px; line-height: 1.55; color: #444; }
.section-head__more {
    flex-shrink: 0; color: #3b87c9; font-size: 18px; font-weight: 700;
}

.site-header {
    position: sticky; top: 0; z-index: 100; background: var(--posh-white);
    box-shadow: 0 2px 18px rgba(0,0,0,0.06);
}
.site-header__top { background: var(--posh-white); }
.site-header__top-inner {
    min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.site-brand { display: inline-flex; align-items: flex-end; gap: 12px; }
.site-brand__symbol { width: 56px; height: 56px; object-fit: contain; }
/* 20260401t2232
- [상단 브랜드 워드마크 이미지 → 텍스트 전환] 수정 구간입니다.
- 수정 대상: .site-brand__text
- 연결 파일: page/shared/layout/public_header.php
- 1차 파일에서 <img class="site-brand__wordmark" ...> 를 <span class="site-brand__text">주식회사 퍼쉬</span> 로 변경한 것과 맞춰 주는 스타일입니다.
- 아래 정렬을 유지하면서, 이전 워드마크 이미지보다 조금 더 가볍고 자연스러운 텍스트 인상으로 보이도록 조정했습니다.
- 글자가 너무 크거나 작게 느껴지면 font-size만 먼저 조정하고, 세로 위치가 어색하면 transform: translateY(...) 값만 미세 조정하면 됩니다.

as-is 참고
.site-brand__wordmark { width: 176px; max-width: 36vw; object-fit: contain; margin-bottom: -2px; transform: translateY(4px); }
*/
.site-brand__text {
    display: inline-block;
    color: #111111;
    font-size: 27px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
    transform: translateY(-7px);
}
.site-utility { display: inline-flex; align-items: center; gap: 16px; }
.site-utility__item {
    display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; cursor: pointer; padding: 0; font-weight: 400;
}
.site-utility__item img { width: 20px; height: 20px; object-fit: contain; }
.site-utility__item span { font-size: 14px; font-weight: 400; line-height: 1; }
.site-utility__item:last-child::after { content: '로그인'; font-size: 14px; font-weight: 400; line-height: 1; }
.site-header__nav-wrap { background: var(--posh-black); color: var(--posh-white); }
.site-header__nav-inner { position: relative; }
.mobile-nav-toggle {
    display: none; align-items: center; justify-content: center; flex-direction: column; gap: 4px;
    width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer;
}
.mobile-nav-toggle span { display: block; width: 20px; height: 2px; background: var(--posh-white); }
.primary-nav { position: relative; }
.primary-nav__list {
    display: flex; align-items: stretch; gap: 0; list-style: none; padding: 0; margin: 0;
}
.primary-nav__item { position: static; }
/* 20260401t2204
- [상단 주메뉴 텍스트 조정] 수정 구간입니다.
- 수정 대상: .primary-nav__link, .primary-nav__button
- 이번 변경: 글자 크기 18px → 16px, 글자 굵기 700 → 600
- 되돌릴 때는 아래 두 값만 원래대로 바꾸면 됩니다.
  1) font-size: 16px → 18px
  2) font-weight: 600 → 700
*/
.primary-nav__link,
.primary-nav__button {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px;
    border: 0; background: transparent; color: var(--posh-white); font-size: 16px; font-weight: 500; cursor: pointer;
    transition: color 0.18s ease, background-color 0.18s ease;
}
.primary-nav__link::after,
.primary-nav__button::after {
    content: ''; position: absolute; left: 18px; right: 18px; bottom: 8px; height: 2px;
    background: rgba(255,255,255,0.92); opacity: 0; transition: opacity 0.18s ease;
}
.primary-nav__link.is-active,
.primary-nav__button:hover,
.primary-nav__button:focus-visible,
.primary-nav__item.is-open > .primary-nav__button {
    background: rgba(255,255,255,0.06);
}
.primary-nav__link.is-active::after,
.primary-nav__button:hover::after,
.primary-nav__button:focus-visible::after,
.primary-nav__item.is-open > .primary-nav__button::after {
    opacity: 1;
}
/* 20260401t2204
- [상단 주메뉴 아이콘 크기] 수정 구간입니다.
- 수정 대상: .primary-nav__icon-wrap, .primary-nav__icon-wrap img
- 현재는 아이콘을 글자보다 한 단계 크게 보이게 하려고 22px로 유지했습니다.
- 아이콘이 너무 크거나 작다고 느껴지면 width/height 값만 함께 조정하면 됩니다.
*/
.primary-nav__icon-wrap { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
.primary-nav__icon-wrap img { width: 28px; height: 28px; object-fit: contain; }
/* 20260330t1238
- Depth1별 개별 submenu 패널 대신, 전체 Depth2를 한 번에 보여주는 통합 submenu 패널 구조로 조정했습니다.
- as-is 참고: 기존 .primary-nav__item.is-open .submenu-panel 방식은 개별 패널 표시 방식이었습니다.
*/
.submenu-panel {
    position: absolute; left: 0; right: 0; top: 100%; display: none; background: var(--posh-white); color: #1e1e1e;
    border-top: 1px solid rgba(0,0,0,0.06); box-shadow: var(--posh-shadow);
}
.primary-nav.is-submenu-open .submenu-panel--global { display: block; }
/* 20260402t0041
- [통합 submenu 좌측 안내영역 제거 후 메뉴 전체 좌측 정렬] 수정 구간입니다.
- 연결 파일: page/shared/layout/public_header.php
- 1차 파일에서 .submenu-panel__title-wrap(전체 메뉴 제목/설명 블록)을 출력하지 않도록 처리했습니다.
- 이 2차 파일에서는 기존 2열 구조(좌측 280px 안내영역 + 우측 메뉴영역)를 1열 구조로 바꿔,
  회사소개/사업영역/투자정보 3개 그룹이 패널의 왼쪽부터 바로 시작되도록 조정했습니다.

as-is 참고
.submenu-panel__inner {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    padding: 26px 0 30px;
}
*/
.submenu-panel__inner {
    display: block;
    padding: 26px 0 30px;
}
.submenu-panel__title { display: block; font-size: 26px; font-weight: 900; }
.submenu-panel__desc { margin: 10px 0 0; color: #666; line-height: 1.6; }
/* 20260402t0148
- [통합 submenu 3분할 시작선 균형 + 좌우 바깥 여백] 수정 구간입니다.
- 수정 대상: .submenu-panel__groups, .submenu-group, .submenu-group + .submenu-group
- 사용자 요청:
  1) 정상 동작하던 기준파일은 유지
  2) 여백 관련 부분만 수정
  3) 3분할은 균등하게 유지
  4) 첫 번째 컬럼도 2/3열처럼 안쪽 시작 여백을 갖게 조정
  5) 패널의 좌우 바깥 여백도 조금 확보
- 이번 변경:
  1) .submenu-panel__groups 에 padding: 0 20px; 추가
  2) .submenu-group 전체에 padding-left: 20px; 적용
  3) .submenu-group + .submenu-group 에서는 border-left만 유지
- 따라서 1/2/3열 모두 같은 내부 시작선을 갖고, 패널의 좌우 끝도 너무 붙어 보이지 않게 정리했습니다.

as-is 참고
.submenu-panel__groups {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px;
}
.submenu-group {
    min-width: 0; padding: 0;
}
.submenu-group + .submenu-group {
    border-left: 1px solid rgba(0,0,0,0.08);
    padding-left: 34px;
}
*/
.submenu-panel__groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px;
    padding: 0 20px;
}
.submenu-group {
    min-width: 0;
    padding-left: 20px;
}
.submenu-group + .submenu-group {
    border-left: 1px solid rgba(0,0,0,0.08);
}
/* 20260402t0158
- [통합 submenu 제목/항목 굵기 완화] 수정 구간입니다.
- 사용자 요청: 회사소개/사업영역/투자정보 제목과 그 아래 항목들의 굵기만 한 단계 낮췄습니다.
- 이번 변경:
  1) .submenu-group__title font-weight: 900 -> 700
  2) .submenu-group__link, .submenu-group__link--button font-weight: 700 -> 600
- 다른 속성은 수정하지 않았습니다.
*/
.submenu-group__title {
    display: block; margin-bottom: 14px; font-size: 19px; font-weight: 700; color: var(--posh-black);
}
.submenu-group__list {
    list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 2px;
}
.submenu-group__item { min-height: 0; }
.submenu-group__link,
.submenu-group__link--button {
    display: inline-flex; width: 100%; min-height: 0; align-items: center; justify-content: flex-start; gap: 10px;
    padding: 10px 0; border: 0; background: transparent; border-radius: 0;
    font-size: 17px; font-weight: 600; color: #1f1f1f; text-align: left;
}
.submenu-group__icon {
    width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.submenu-group__icon img {
    width: 18px; height: 18px; object-fit: contain;
}
.submenu-group__label {
    display: inline-block; line-height: 1.5;
}
.submenu-group__link:hover,
.submenu-group__link:focus-visible {
    color: var(--posh-blue);
    background: rgba(0, 0, 0, 0.04);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.submenu-group__item.is-disabled .submenu-group__link--button {
    cursor: default; color: #9b9b9b;
}
.submenu-group__item.is-disabled .submenu-group__icon img {
    opacity: 0.45;
}


.site-footer {
    margin-top: 46px; background: #ebebeb; color: #303030;
}
.site-footer__top {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0 16px;
    border-bottom: 1px solid #b9b9b9;
}
.site-footer__links { display: flex; align-items: center; gap: 34px; font-size: 15px; }
.site-footer__mail { font-size: 14px; color: #567da0; }
.site-footer__bottom {
    display: flex; align-items: center; justify-content: space-between; padding: 16px 0 24px;
}
.site-footer__brand { display: flex; align-items: center; gap: 18px; font-size: 14px; }
.site-footer__brand img { width: 52px; }
.site-footer__credit {
    background: #2c2c2c; color: rgba(255,255,255,0.82); text-align: center; padding: 18px 20px; font-size: 13px;
}

.primary-nav__button.is-active,
.primary-nav__link.is-active {
    background: rgba(92, 140, 190, 0.78);
}
.submenu-group__link.is-active {
    color: var(--posh-blue);
    background: rgba(0, 0, 0, 0.04);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/*
20260514 T1258
- 공개 통합 submenu를 POSH 기업형 메가메뉴로 정리했습니다.
- 기존 메뉴 데이터와 링크는 유지하고, 표시 품질만 높이기 위해 낮은 유리막 배경, 카드형 패널, 그룹 설명, 우측 브랜드 카드를 추가했습니다.
- 기존 강한 세로선과 박스형 hover는 원복 대상이 아니라, 저가형 인상을 줄이기 위해 약한 라인/타이포그래피 중심으로 대체했습니다.
*/
.site-header__nav-wrap {
    position: relative;
    z-index: 120;
    background: linear-gradient(180deg, #111111 0%, #0a0a0a 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.primary-nav__link,
.primary-nav__button {
    min-height: 54px;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.primary-nav__link::after,
.primary-nav__button::after {
    left: 20px;
    right: 20px;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, #205bff 0%, #7aa2ff 100%);
    border-radius: 999px 999px 0 0;
}

.primary-nav__link.is-active,
.primary-nav__button.is-active,
.primary-nav__button:hover,
.primary-nav__button:focus-visible,
.primary-nav__item.is-open > .primary-nav__button {
    background: rgba(255, 255, 255, 0.08);
}

.submenu-panel {
    display: block;
    left: 0;
    right: 0;
    top: 100%;
    padding: 16px 0 20px;
    background: rgba(10, 16, 28, 0.16);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.primary-nav.is-submenu-open .submenu-panel--global {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.submenu-panel__inner {
    display: block;
    padding: 0;
}

.submenu-panel__menu-area {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 292px;
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(203, 213, 225, 0.82);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
}

.submenu-panel__groups {
    display: grid;
    grid-template-columns: 1.12fr 1.1fr 0.78fr;
    gap: 0;
    padding: 26px 30px 30px;
}

.submenu-group {
    min-width: 0;
    padding: 0 30px 0 0;
}

.submenu-group + .submenu-group {
    margin-left: 26px;
    padding-left: 28px;
    border-left: 1px solid rgba(15, 23, 42, 0.08);
}

.submenu-group__head {
    min-height: 92px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.submenu-group__eyebrow {
    display: block;
    margin-bottom: 9px;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #205bff;
}

.submenu-group__title {
    display: block;
    margin: 0;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 750;
    letter-spacing: -0.035em;
    color: #0f172a;
}

.submenu-group__desc {
    margin: 10px 0 0;
    max-width: 230px;
    font-size: 13px;
    line-height: 1.62;
    font-weight: 400;
    color: #64748b;
    word-break: keep-all;
}

.submenu-group__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    margin-top: 18px;
}

.submenu-group__link,
.submenu-group__link--button {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 4px 8px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #1f2937;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 500;
    letter-spacing: -0.03em;
    text-align: left;
    text-decoration: none;
    transition: color 0.16s ease, padding-left 0.16s ease;
}

.submenu-group__link::before,
.submenu-group__link--button::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 5px;
    width: 0;
    height: 1px;
    background: #205bff;
    transition: width 0.16s ease;
}

.submenu-group__link::after,
.submenu-group__link--button::after {
    content: '›';
    margin-left: auto;
    color: rgba(100, 116, 139, 0.62);
    font-size: 18px;
    line-height: 1;
    transform: translateX(-4px);
    opacity: 0;
    transition: opacity 0.16s ease, transform 0.16s ease, color 0.16s ease;
}

.submenu-group__icon {
    display: none;
}

.submenu-group__label {
    display: inline-block;
    line-height: 1.45;
}

.submenu-group__link:hover,
.submenu-group__link:focus-visible,
.submenu-group__link.is-active {
    color: #205bff;
    background: transparent;
    text-decoration: none;
    outline: none;
}

.submenu-group__link:hover::before,
.submenu-group__link:focus-visible::before,
.submenu-group__link.is-active::before {
    width: 28px;
}

.submenu-group__link:hover::after,
.submenu-group__link:focus-visible::after,
.submenu-group__link.is-active::after {
    opacity: 1;
    transform: translateX(0);
    color: #205bff;
}

.submenu-group__item.is-disabled .submenu-group__link--button {
    color: #94a3b8;
}

.submenu-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 310px;
    padding: 30px 28px;
    overflow: hidden;
    background:
        linear-gradient(160deg, rgba(16, 33, 61, 0.96) 0%, rgba(11, 18, 32, 0.98) 58%, rgba(15, 23, 42, 1) 100%);
    color: #ffffff;
}

.submenu-feature::before {
    content: '';
    position: absolute;
    inset: 18px 18px auto auto;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(32, 91, 255, 0.36) 0%, rgba(32, 91, 255, 0) 68%);
    pointer-events: none;
}

.submenu-feature::after {
    content: '';
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 88px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0.28), rgba(255,255,255,0.04));
}

.submenu-feature__eyebrow {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.13em;
    color: #91b2ff;
}

.submenu-feature__title {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 16px;
    font-size: 22px;
    line-height: 1.34;
    font-weight: 760;
    letter-spacing: -0.04em;
    color: #ffffff;
    word-break: keep-all;
}

.submenu-feature__desc {
    position: relative;
    z-index: 1;
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.72);
    word-break: keep-all;
}

.submenu-feature__facts {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    margin-top: auto;
    padding-top: 30px;
}

.submenu-feature__facts span {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    min-height: 30px;
    align-items: center;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
}

.submenu-feature__link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    color: #ffffff;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
}

.submenu-feature__link::after {
    content: '→';
    color: #8fb1ff;
    font-size: 16px;
    line-height: 1;
}

@media (max-width: 980px) {
    .submenu-panel__menu-area {
        grid-template-columns: 1fr;
    }

    .submenu-feature {
        display: none;
    }

    .submenu-panel__groups {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .submenu-group,
    .submenu-group + .submenu-group {
        margin-left: 0;
        padding: 0;
        border-left: 0;
    }

    .submenu-group__head {
        min-height: 0;
    }
}

/*
20260514 T1322
- as-is: T1258 패치는 영문 eyebrow, 설명문, 우측 브랜드 카드, 강한 카드형 패널이 포함되어 실제 POSH 메뉴가 과장되어 보였습니다.
- to-be: 사용자가 확정한 방향에 맞춰 상단 메뉴 아이콘을 숨기고, 설명/우측 카드를 제거한 3컬럼 슬림 메가메뉴로 정리합니다.
- hover는 사용자가 제시한 예시처럼 연한 배경 + 오른쪽 화살표 방식으로 처리합니다.

20260514 T1334
- as-is: T1322에서는 펼침 메뉴 내부 아이콘까지 숨겨져 메뉴가 다소 밋밋해 보였습니다.
- to-be: 기존 하위 메뉴 아이콘을 다시 표시하되, 굵게 보이지 않도록 크기/투명도/필터를 낮춰 텍스트 보조 요소로만 사용합니다.
- 상단 검은 메뉴바 Depth1 아이콘은 계속 숨겨 심플한 헤더 기준을 유지합니다.
*/
.primary-nav__icon-wrap {
    display: none;
}

.primary-nav__link,
.primary-nav__button {
    min-height: 52px;
    padding: 0 26px;
    gap: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.primary-nav__link::after,
.primary-nav__button::after {
    left: 26px;
    right: 26px;
    height: 2px;
    background: #205bff;
    border-radius: 0;
}

.primary-nav__link.is-active,
.primary-nav__button.is-active,
.primary-nav__button:hover,
.primary-nav__button:focus-visible,
.primary-nav__item.is-open > .primary-nav__button {
    background: transparent;
}

.submenu-panel {
    padding: 0;
    background: transparent;
    border-top: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.primary-nav.is-submenu-open .submenu-panel--global {
    transform: translateY(0);
}

.submenu-panel__inner {
    padding: 0;
}

.submenu-panel__menu-area {
    display: block;
    width: min(100%, 1040px);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0 0 4px 4px;
    background: rgba(255, 255, 255, 0.985);
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.12);
}

.submenu-panel__groups {
    display: grid;
    grid-template-columns: 1fr 1fr 0.82fr;
    gap: 0;
    padding: 34px 58px 36px;
}

.submenu-group {
    min-width: 0;
    padding: 0 54px 0 0;
}

.submenu-group + .submenu-group {
    margin-left: 0;
    padding-left: 54px;
    border-left: 1px solid rgba(15, 23, 42, 0.09);
}

.submenu-group__head {
    min-height: 0;
    padding: 0 0 20px;
    border-bottom: 0;
}

.submenu-group__eyebrow,
.submenu-group__desc,
.submenu-feature {
    display: none !important;
}

.submenu-group__title {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: -0.035em;
}

.submenu-group__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    margin-top: 0;
}

.submenu-group__link,
.submenu-group__link--button {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 36px;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 7px 12px 7px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #1f2937;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 430;
    letter-spacing: -0.03em;
    text-align: left;
    text-decoration: none;
    transition: color 0.16s ease, background-color 0.16s ease, padding-left 0.16s ease;
}

.submenu-group__link::before,
.submenu-group__link--button::before {
    display: none;
}

.submenu-group__link::after,
.submenu-group__link--button::after {
    content: '›';
    margin-left: auto;
    color: rgba(15, 23, 42, 0.46);
    font-size: 19px;
    line-height: 1;
    transform: translateX(-2px);
    opacity: 0.72;
    transition: opacity 0.16s ease, transform 0.16s ease, color 0.16s ease;
}

.submenu-group__icon {
    display: inline-flex;
    width: 17px;
    height: 17px;
    align-items: center;
    justify-content: center;
    flex: 0 0 17px;
    opacity: 0.62;
    transform: translateY(0.5px);
    transition: opacity 0.16s ease, filter 0.16s ease;
}

.submenu-group__icon img {
    width: 17px;
    height: 17px;
    object-fit: contain;
    filter: grayscale(1) brightness(0.28);
}

.submenu-group__label {
    line-height: 1.45;
    flex: 1 1 auto;
}

.submenu-group__link:hover,
.submenu-group__link:focus-visible,
.submenu-group__link.is-active {
    color: #0b4cff;
    background: linear-gradient(90deg, rgba(32, 91, 255, 0.085) 0%, rgba(32, 91, 255, 0.025) 100%);
    padding-left: 12px;
    text-decoration: none;
    outline: none;
}

.submenu-group__link:hover::after,
.submenu-group__link:focus-visible::after,
.submenu-group__link.is-active::after {
    opacity: 1;
    transform: translateX(0);
    color: #0b4cff;
}

.submenu-group__link:hover .submenu-group__icon,
.submenu-group__link:focus-visible .submenu-group__icon,
.submenu-group__link.is-active .submenu-group__icon {
    opacity: 0.82;
}

.submenu-group__link:hover .submenu-group__icon img,
.submenu-group__link:focus-visible .submenu-group__icon img,
.submenu-group__link.is-active .submenu-group__icon img {
    filter: grayscale(0) brightness(0) saturate(100%) invert(31%) sepia(100%) saturate(3653%) hue-rotate(224deg) brightness(101%) contrast(103%);
}

.submenu-group__item.is-disabled .submenu-group__link--button {
    color: #9aa5b5;
    background: transparent;
}

.submenu-group__item.is-disabled .submenu-group__link--button::after {
    color: rgba(148, 163, 184, 0.56);
}

.submenu-group__item.is-disabled .submenu-group__icon {
    opacity: 0.34;
}

@media (max-width: 980px) {
    .submenu-panel__menu-area {
        width: 100%;
        border-radius: 0;
    }

    .submenu-panel__groups {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px 22px 28px;
    }

    .submenu-group,
    .submenu-group + .submenu-group {
        padding: 0;
        border-left: 0;
    }
}


/*
20260514 T1348
- as-is: T1334에서 상단 Depth1 아이콘 숨김 의도와 실제 화면이 충돌해, 홈/회사소개/사업영역/투자정보 아이콘이 다시 노출되었습니다.
- to-be: 상단 검은 메뉴바의 Depth1 아이콘은 확실히 숨기고, 펼침 메뉴 내부의 하위 메뉴 아이콘만 얇은 보조 아이콘으로 유지합니다.
- 한국어/로그인은 삭제하지 않고 CSS에서만 숨겨 추후 다국어·로그인 기능 사용 시 이 블록만 제거해 복구할 수 있습니다.
- 현재 메뉴 표시선은 active/hover/open 상태에서만 동일한 굵기와 위치로 표시되도록 정리했습니다.
*/
.site-utility {
    display: none !important;
}

.primary-nav__icon-wrap,
.primary-nav__link > .primary-nav__icon-wrap,
.primary-nav__button > .primary-nav__icon-wrap {
    display: none !important;
}

.primary-nav__link,
.primary-nav__button {
    min-height: 52px;
    padding: 0 30px;
    gap: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.025em;
    /* 2026-05-15 T1417
    - 상단 Depth1 활성 표시선을 메뉴바 하단 경계에서 분리하기 위해
      직전의 translateY(-2px) 보정을 사용하지 않습니다.
    - 메뉴 텍스트는 기존 중앙 정렬을 유지하고, 선택바 위치는 아래 ::after에서 top 기준으로 고정합니다.
    */
    transform: none;
}

.primary-nav__link::after,
.primary-nav__button::after {
    left: 26px;
    right: 26px;
    /* 2026-05-15 T1429
    - 활성 선택바가 하단의 흰색 breadcrumb/콘텐츠 경계와 겹쳐 흐려 보이는 현상을 줄이기 위해
      선택바를 글자 아래쪽으로 더 올리고, 두께와 색상 강도를 높였습니다.
    - 메뉴 텍스트와 모바일 헤더 규칙은 유지합니다.
    */
    top: 34px;
    bottom: auto;
    height: 6px;
    z-index: 3;
    border-radius: 0;
    background: #0b4cff;
    box-shadow: 0 0 0 1px rgba(11, 76, 255, 0.28);
    opacity: 0;
}

.primary-nav__link.is-active::after,
.primary-nav__button.is-active::after,
.primary-nav__button:hover::after,
.primary-nav__button:focus-visible::after,
.primary-nav__item.is-open > .primary-nav__button::after {
    opacity: 1;
}

.primary-nav__link.is-active,
.primary-nav__button.is-active,
.primary-nav__button:hover,
.primary-nav__button:focus-visible,
.primary-nav__item.is-open > .primary-nav__button {
    background: transparent;
    color: #ffffff;
}

/*
20260514 T1512
- [POSH 모바일 공통 헤더/드로어 확정 기준]
- 확정 시안: 흰색 모바일 상단 헤더 + 파란 POSH 로고 + 검정 회사명 + 검정 햄버거 메뉴.
- 금지: 모바일 상단 검은 박스, 과한 아이콘, 장식형 메뉴, 데스크톱 검은 nav 줄을 모바일에 그대로 노출하는 방식.
- desktop 기존 메뉴는 유지하고, 767px 이하에서만 모바일 전용 규칙으로 덮어씁니다.
*/
.mobile-menu-drawer {
    display: none;
}

@media (max-width: 767px) {
    body.is-mobile-menu-open {
        overflow: hidden;
    }

    .site-header {
        background: #ffffff;
        box-shadow: 0 2px 16px rgba(15, 23, 42, 0.08);
    }

    .site-shell {
        width: min(calc(100% - 32px), var(--posh-shell));
    }

    .site-header__top {
        background: #ffffff;
    }

    .site-header__top-inner {
        min-height: 78px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .site-brand {
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .site-brand__symbol {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
    }

    .site-brand__text {
        color: #111111;
        font-size: 23px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.045em;
        transform: none;
    }

    .site-utility {
        display: none !important;
    }

    .mobile-nav-toggle {
        display: inline-flex;
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0;
        background: transparent;
        border: 0;
        cursor: pointer;
    }

    .mobile-nav-toggle span:not(.sr-only) {
        display: block;
        width: 25px;
        height: 2px;
        border-radius: 999px;
        background: #111111;
        transform-origin: center;
        transition: transform 0.18s ease, opacity 0.18s ease;
    }

    .mobile-nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(2) {
        opacity: 0;
    }

    .mobile-nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .site-header__nav-wrap {
        display: none;
    }

    .mobile-menu-drawer {
        position: fixed;
        z-index: 110;
        top: 78px;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
        overflow-y: auto;
        background: rgba(255, 255, 255, 0.98);
        border-top: 1px solid rgba(15, 23, 42, 0.08);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px);
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-menu-drawer.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .mobile-menu-drawer__inner {
        width: min(calc(100% - 40px), 520px);
        margin: 0 auto;
        padding: 22px 0 38px;
    }

    .mobile-menu-drawer__top-link,
    .mobile-menu-drawer__summary {
        display: flex;
        min-height: 58px;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 0;
        color: #111111;
        font-size: 22px;
        line-height: 1.2;
        font-weight: 650;
        letter-spacing: -0.04em;
        border-bottom: 1px solid rgba(15, 23, 42, 0.11);
        background: transparent;
    }

    .mobile-menu-drawer__top-link::after,
    .mobile-menu-drawer__child a::after {
        content: '›';
        color: rgba(15, 23, 42, 0.5);
        font-size: 28px;
        line-height: 1;
        font-weight: 300;
    }

    .mobile-menu-drawer__section {
        border-bottom: 0;
    }

    .mobile-menu-drawer__summary {
        cursor: pointer;
        list-style: none;
    }

    .mobile-menu-drawer__summary::-webkit-details-marker {
        display: none;
    }

    .mobile-menu-drawer__arrow::before {
        content: '⌄';
        display: block;
        color: rgba(15, 23, 42, 0.72);
        font-size: 25px;
        line-height: 1;
        transform: rotate(0deg);
        transition: transform 0.18s ease;
    }

    .mobile-menu-drawer__section[open] .mobile-menu-drawer__arrow::before {
        transform: rotate(180deg);
    }

    .mobile-menu-drawer__children {
        list-style: none;
        margin: 12px 0 18px;
        padding: 4px 0;
        border-radius: 0;
        background: transparent;
    }

    .mobile-menu-drawer__child a {
        display: flex;
        min-height: 48px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0 4px 0 22px;
        color: #202020;
        font-size: 18px;
        line-height: 1.25;
        font-weight: 430;
        letter-spacing: -0.035em;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }

    .mobile-menu-drawer__child.is-disabled a {
        color: #9ca3af;
        pointer-events: none;
    }
}

@media (max-width: 390px) {
    .site-brand__symbol {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .site-brand__text {
        font-size: 21px;
    }

    .mobile-menu-drawer__top-link,
    .mobile-menu-drawer__summary {
        font-size: 20px;
    }
}


/*
2026-05-14 T1620
- POSH 공개 공통 푸터를 단순 기업형 푸터로 확정합니다.
- 기존 stage1 skeleton 문구, 과한 링크, mail 중심 구조는 실제 출력에서 제거했습니다.
- 데스크톱은 3열 메뉴 + 회사 정보 + Copyright, 모바일은 회사 정보와 짧은 링크 중심으로 정리합니다.
- 현재 공개 메뉴에 없는 지속가능경영/인재경영/관련사이트/Supplier Portal은 추가하지 않습니다.
*/
.site-footer {
    margin-top: 64px;
    border-top: 1px solid #e1e5eb;
    background: #f5f6f8;
    color: #1f2937;
}

.site-footer__inner {
    padding: 46px 0 34px;
}

.site-footer__menus {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 42px;
    padding-bottom: 34px;
    border-bottom: 1px solid #d9dee7;
}

.site-footer__menu-group {
    min-width: 0;
}

.site-footer__menu-title {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #101010;
}

.site-footer__menu-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__menu-list a {
    display: inline-flex;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.site-footer__menu-list a:hover,
.site-footer__menu-list a:focus-visible {
    color: var(--posh-blue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    outline: none;
}

.site-footer__company {
    display: grid;
    grid-template-columns: minmax(220px, 0.28fr) minmax(0, 1fr);
    gap: 34px;
    align-items: start;
    padding: 28px 0 22px;
    border-bottom: 1px solid #d9dee7;
}

.site-footer__brand-block {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.site-footer__brand-block img {
    width: 46px;
    height: auto;
    flex: 0 0 auto;
}

.site-footer__brand-block strong {
    display: block;
    color: #101010;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.site-footer__company-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0;
    color: #4b5563;
}

.site-footer__company-list div {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.site-footer__company-list dt,
.site-footer__company-list dd {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    letter-spacing: -0.02em;
}

.site-footer__company-list dt {
    color: #6b7280;
    font-weight: 700;
    white-space: nowrap;
}

.site-footer__company-list dd {
    color: #374151;
    font-weight: 500;
}

.site-footer__legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 20px;
}

.site-footer__legal p {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 500;
}

.site-footer__legal-links {
    display: inline-flex;
    align-items: center;
    gap: 18px;
}

.site-footer__legal-links a {
    color: #374151;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
    text-decoration: none;
}

.site-footer__legal-links a:hover,
.site-footer__legal-links a:focus-visible {
    color: var(--posh-blue);
    text-decoration: underline;
    text-underline-offset: 4px;
    outline: none;
}

.site-footer__top,
.site-footer__bottom,
.site-footer__links,
.site-footer__mail,
.site-footer__brand,
.site-footer__credit {
    display: none;
}

@media (max-width: 860px) {
    .site-footer {
        margin-top: 48px;
    }

    .site-footer__inner {
        padding: 34px 0 28px;
    }

    .site-footer__menus {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
        padding-bottom: 26px;
    }

    .site-footer__menu-title {
        font-size: 14px;
    }

    .site-footer__menu-list {
        gap: 8px;
    }

    .site-footer__menu-list a {
        font-size: 13px;
    }

    .site-footer__company {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 24px 0 20px;
    }

    .site-footer__legal {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 640px) {
    .site-footer {
        margin-top: 42px;
        background: #f6f7f9;
    }

    .site-footer__inner {
        padding: 30px 0 26px;
    }

    .site-footer__menus {
        grid-template-columns: 1fr;
        gap: 18px;
        padding-bottom: 24px;
    }

    .site-footer__menu-group {
        padding-bottom: 16px;
        border-bottom: 1px solid #e1e5eb;
    }

    .site-footer__menu-group:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .site-footer__menu-title {
        margin-bottom: 10px;
        font-size: 14.5px;
    }

    .site-footer__menu-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 14px;
    }

    .site-footer__menu-list a {
        font-size: 13.5px;
    }

    .site-footer__brand-block img {
        width: 42px;
    }

    .site-footer__brand-block strong {
        font-size: 17px;
    }

    .site-footer__company-list {
        display: grid;
        gap: 7px;
    }

    .site-footer__company-list div {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 10px;
        align-items: start;
    }

    .site-footer__company-list dt,
    .site-footer__company-list dd {
        font-size: 13px;
        line-height: 1.55;
    }

    .site-footer__legal p,
    .site-footer__legal-links a {
        font-size: 12.5px;
    }
}

@media (max-width: 380px) {
    .site-footer__company-list div {
        grid-template-columns: 78px minmax(0, 1fr);
    }
}


/*
2026-05-15 T1503
- [상단 Depth1 선택바 최종 구조 보정]
- as-is: 선택바를 .primary-nav__link::after / .primary-nav__button::after 안에서 그려 메뉴 링크 내부에 갇히는 구조였습니다.
- to-be: public_header.php에서 이미 .primary-nav__item에 is-current 클래스가 출력되므로, 선택바를 li(.primary-nav__item) 기준의 독립 레이어로 분리합니다.
- 기존 링크 내부 ::after 선택바는 숨기고, 현재 메뉴/hover/open 상태에서는 li::after가 검은 메뉴바 내부에 선명하게 표시되도록 합니다.
- 모바일 헤더 규칙은 767px 이하에서 nav-wrap 자체를 숨기는 기존 기준을 유지합니다.
*/
@media (min-width: 768px) {
    .site-header__nav-wrap,
    .site-header__nav-inner,
    .primary-nav,
    .primary-nav__list {
        overflow: visible;
    }

    .primary-nav__item {
        position: relative;
    }

    .primary-nav__link::after,
    .primary-nav__button::after {
        display: none !important;
    }

    .primary-nav__item::after {
        content: '';
        position: absolute;
        left: 30px;
        right: 30px;
        /* 2026-05-15 T1518
        - 사용자 확인 결과 선택바를 현재 위치보다 더 아래로 내리고,
          두께는 직전 5px의 약 80% 수준인 4px로 낮췄습니다.
        - li 기준 독립 선택바 구조는 유지합니다.
        */
        top: 44px;
        height: 4px;
        z-index: 20;
        display: block;
        border-radius: 0;
        background: #0b4cff;
        box-shadow:
            0 0 0 1px rgba(11, 76, 255, 0.32),
            0 1px 4px rgba(11, 76, 255, 0.22);
        opacity: 0;
        pointer-events: none;
    }

    .primary-nav__item.is-current::after,
    .primary-nav__item.is-open::after,
    .primary-nav__item:hover::after,
    .primary-nav__item:focus-within::after {
        opacity: 1;
    }
}