/* 서브 상단 D형(subtopD) · 2026-11-08 (최부장님 지시)
   11/8 개편: 대분류 사진 한 장을 화면 폭 전체에 깔고 높이를 줄였다(PC 560 · 짧은 판 400). 글자는 사진 위 왼쪽 흰 글자.
   모든 스타일은 .subtop.std 아래로만 쓴다(A·B·C형과 충돌하지 않게). 페이지 전체에 걸리는 규칙은 아래 하나뿐이고,
   이 블럭(.stair-top)이 있을 때만 걸린다. */

/* 서브의 본문 시작 여백(네비 4형 90px 등)을 걷는다 — 이 블럭이 바 밑에서부터 칠한다(PC 만) */
@media (min-width: 1024px) {
    body #wrap.wrap_bg:has(.stair-top) { padding-top: 0; }
}
.subtop.std {
    --std-bar: 90px;                               /* 네비 띠 높이 — 글자는 이 아래에서 시작한다 */
    --std-pad: 80px;                               /* 글자 들여쓰기 = 네비 로고 들여쓰기 */
    --std-h: 560px;                                /* 섹션 높이(네비 띠 포함) */
    --std-step: 102px;                             /* 사진 아래 끝 계단 높이 = 예전 판 단차(18.2%) */
    position: relative;
    background: #fff;
}

.subtop.std .std-hero {
    position: relative;
    z-index: 0;
    height: var(--std-h);
    background: #11163c;
    color: #fff;
    overflow: hidden;
    /* 아래 끝 계단 — 왼쪽 절반이 더 위에서 끝나고 그 아래는 흰 면(.subtop.std 바탕), 오른쪽 절반은 끝까지(11/8 최부장님 지시) */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 50% calc(100% - var(--std-step)), 0 calc(100% - var(--std-step)));
    /* 글꼴은 사이트 본문 글꼴을 그대로 쓴다 — Pretendard 는 내용페이지에만 실려 있어 게시판에서는 다른 글꼴로 바뀐다(11/8 실측) */
    -webkit-font-smoothing: antialiased;
}
.subtop.std .std-hero.std-short { --std-h: 400px; --std-step: 70px; }
/* 옅은 세로 격자선 — 이 섹션 안에만 (PC 7칸 · 메인 히어로와 같다) */
.subtop.std .std-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 7 - 1px), rgba(255, 255, 255, .1) calc(100% / 7 - 1px), rgba(255, 255, 255, .1) calc(100% / 7));
}

/* ── 사진 — 한 장을 섹션 전체에. 위(네비 글자)·왼쪽 아래(제목)를 어둡게 ── */
.subtop.std .std-bg { position: absolute; inset: 0; z-index: 0; }
.subtop.std .std-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: std-zoom 1.6s cubic-bezier(.22, .61, .36, 1) both;
}
.subtop.std .std-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .12) 55%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, .1) 60%, rgba(0, 0, 0, .45) 100%);
}

/* ── 글자 ── */
.subtop.std .std-in {
    position: relative;
    z-index: 3;                                    /* 격자선 위 — 드롭다운 목록이 사진 위로 펼쳐진다 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: calc(var(--std-bar) + 36px) var(--std-pad) calc(var(--std-step) + 36px);   /* 아래는 왼쪽 사진이 끝나는 자리 위로 */
}
.subtop.std .std-short .std-in { justify-content: flex-end; padding-bottom: calc(var(--std-step) + 32px); }

.subtop.std .std-cap { max-width: 900px; animation: std-rise .9s cubic-bezier(.22, .61, .36, 1) backwards; transition: opacity .2s ease; }
/* 현재 위치 목록이 펼쳐진 동안은 글자를 감춘다 — 계단만큼 글자가 올라가 목록과 겹친다(목록 바탕이 50% 라 글자가 비친다) */
.subtop.std .std-in:has(a.select.open) .std-cap { opacity: 0; }
.subtop.std .std-eyebrow {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1.4;
    color: rgba(255, 255, 255, .8);
}
.subtop.std .std-title {
    margin: 0;
    font-size: clamp(34px, 3.25vw, 52px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: #fff;
    word-break: keep-all;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .18);
}
.subtop.std .std-short .std-title { font-size: clamp(30px, 2.6vw, 42px); }
.subtop.std .std-lead {
    margin: 20px 0 0;
    max-width: 40em;
    font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.7;
    color: rgba(255, 255, 255, .86);
    word-break: keep-all;
}

/* ── 현재 위치 — 부품은 builder_subtop_lnb() 그대로, 모양만 사진 위 흰 글자로 다시 칠한다.
   🔴 web.css 가 .sub_lnb_list 에 color:#333, 목록에 !important 세 군데를 걸어 둔다 — C형과 같은 이유로 맞불을 놓는다.
   클래스명은 common.js:164 가 클릭 핸들러를 거는 이름이라 바꾸지 마라. ── */
.subtop.std #sub-lnb-wrapper.sub_lnb_list {
    position: relative;
    z-index: 5;
    margin: 0;
    background: none;
    border: 0;
    height: auto;
    min-height: 0;
    overflow: visible;
    color: inherit;
}
.subtop.std #sub-lnb-wrapper.sub_lnb_list > .inner {
    display: flex;
    align-items: center;
    gap: 26px;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    height: auto;
    border: 0;
}
.subtop.std #sub-lnb-wrapper .sub_home { display: flex; align-items: center; padding: 0; border: 0; width: auto; height: auto; }
.subtop.std #sub-lnb-wrapper .sub_home a { display: flex; align-items: center; padding: 0; border: 0; color: inherit; font-size: 15px; line-height: 1; }
.subtop.std #sub-lnb-wrapper .sub_home i { color: inherit; font-size: 16px; line-height: 1; }
.subtop.std #sub-lnb-wrapper .sub_lnb_dropdown { position: relative; padding: 0; border: 0; width: auto; min-width: 0; height: auto; line-height: 1.4; }
.subtop.std #sub-lnb-wrapper .sub_lnb_dropdown > a.select {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0 22px 0 0;
    height: auto;
    line-height: 1.4;
    font-size: 14px;
    font-weight: 500;
    color: inherit;
    background: none;
    border: 0;
    text-decoration: none;
}
.subtop.std #sub-lnb-wrapper .sub_lnb_dropdown > a.select::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    color: inherit;                                /* web.css 가 이 의사요소에 color:#000 을 준다 */
    transition: transform .2s ease;
}
.subtop.std #sub-lnb-wrapper .sub_lnb_dropdown > a.select.open::after { transform: translateY(-50%) rotate(180deg); }
.subtop.std #sub-lnb-wrapper .sub_lnb_dropdown ul.sub_menu_list {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 60;
    width: auto;
    min-width: 160px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: rgba(255, 255, 255, .5);           /* 사진이 비치게 흰 바탕 50%(11/8 최부장님 지시) */
    border: 0;
    border-radius: 0;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .12);
}
.subtop.std #sub-lnb-wrapper .sub_lnb_dropdown ul.sub_menu_list li { margin: 0; padding: 0; border: 0; height: auto !important; line-height: 1.4 !important; text-indent: 0; }
.subtop.std #sub-lnb-wrapper .sub_lnb_dropdown ul.sub_menu_list li a {
    display: block;
    padding: 10px 15px;
    height: auto;
    line-height: 1.4;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #1b1c21 !important;
    white-space: nowrap;
    text-decoration: none;
}
.subtop.std #sub-lnb-wrapper .sub_lnb_dropdown ul.sub_menu_list li a:hover { background: rgba(255, 255, 255, .5); }   /* 50% 위에 한 겹 더 — 고른 줄이 드러나게 */
.subtop.std #sub-lnb-wrapper .sub_lnb_dropdown ul.sub_menu_list li.curr { background: none; }
.subtop.std #sub-lnb-wrapper .sub_lnb_dropdown ul.sub_menu_list li.curr a { background: var(--c-primary, #253D67); color: #fff !important; }

/* ── 본문과의 간격 — A·B형과 같은 값(PC 56 · 1023 이하 38). 게시판·내용페이지 공통(11/8 최부장님 지시) ── */
.subtop.std #content_div.std-gap { padding-top: 56px; background: #fff; }

@keyframes std-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes std-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }

/* 1023px 이하 — 모바일 네비(바 60px)가 본문 위에 따로 서므로 띠 자리를 비우지 않는다 */
@media (max-width: 1023px) {
    .subtop.std { --std-pad: 22px; --std-bar: 0px; --std-step: 56px; }
    .subtop.std .std-hero { height: auto; min-height: 320px; display: flex; }
    .subtop.std .std-hero.std-short { min-height: 220px; --std-step: 40px; }
    .subtop.std .std-hero::after { background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 5 - 1px), rgba(255, 255, 255, .1) calc(100% / 5 - 1px), rgba(255, 255, 255, .1) calc(100% / 5)); }
    .subtop.std .std-in { flex: 1; height: auto; gap: 40px; padding: 26px 22px calc(var(--std-step) + 30px); }
    .subtop.std .std-short .std-in { padding-bottom: calc(var(--std-step) + 26px); }
    .subtop.std .std-eyebrow { margin-bottom: 10px; font-size: 13px; }
    .subtop.std #content_div.std-gap { padding-top: 38px; }
    .subtop.std .std-title,
    .subtop.std .std-short .std-title { font-size: clamp(28px, 7.6vw, 40px); }
    .subtop.std .std-lead { margin-top: 14px; font-size: 14px; }
    .subtop.std #sub-lnb-wrapper.sub_lnb_list > .inner { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .subtop.std .std-cap,
    .subtop.std .std-bg img { animation: none; }
}