/* 소개 페이지 헤더 = 메인 랜딩 헤더(components/FullpageHeader.js)의 정적 사본.
   버거·메뉴: src/css/common.css / 지도 서비스 버튼: src/css/fullpage.css + launcher.css / 점 내비: fullpage.css
   랜딩 헤더를 고치면 여기도 같이 고친다. 위치·크기도 랜딩과 같다(화면 폭별로 재서 대조함). */
@font-face { font-family: 'Paperlogy'; src: url('/fonts/Paperlogy/Paperlogy-3Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('/fonts/Paperlogy/Paperlogy-6SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }

.header_bg { position: fixed; left: 0; top: 0; z-index: 9; width: 100%; pointer-events: none; }
.header_bg .width_con { position: relative; width: 1440px; margin: 0 auto; }
.header_bg header { position: relative; display: flex; justify-content: center; align-items: center; max-width: 1440px; height: 90px; margin: 0 auto; padding-top: 37px; }
.header_bg header > * { pointer-events: auto; }

/* 로고: 소개 페이지 시안의 로고. 마무리 사진 위에서는 흰색 */
.header_bg h1 { margin: 0; }
.header_bg h1 a { display: block; width: 161px; }
.header_bg h1 img { display: block; width: 100%; height: auto; }
.header_bg .logo-white { display: none; }
.header_bg.white .logo-dark { display: none; }
.header_bg.white .logo-white { display: block; }

/* 버거 */
.burger-check { display: none; }
.burger-icon { cursor: pointer; display: inline-block; position: absolute; z-index: 2; left: 0; padding: 8px 0; margin: 0; width: auto; user-select: none; }
.burger-icon .burger-sticks { display: block; position: relative; width: 25px; height: 2px; transition: background 0.2s ease-out; }
.burger-icon .burger-sticks:before,
.burger-icon .burger-sticks:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; background: #000; transition: all 0.2s ease-out; }
.burger-icon .burger-sticks:before { top: 7px; }
.burger-icon .burger-sticks:after { top: -7px; }
.header_bg.white .burger-icon .burger-sticks:before,
.header_bg.white .burger-icon .burger-sticks:after { background: #fff; }
.burger-check:checked ~ .menu { max-width: 130px; }
.burger-check:checked ~ .burger-icon .burger-sticks { background: transparent; }
.burger-check:checked ~ .burger-icon .burger-sticks:before { transform: rotate(-45deg); }
.burger-check:checked ~ .burger-icon .burger-sticks:after { transform: rotate(45deg); }
.burger-check:checked ~ .burger-icon .burger-sticks:before,
.burger-check:checked ~ .burger-icon .burger-sticks:after { top: 0; }

/* 메뉴 */
.menu { position: absolute; left: 24px; top: 78px; z-index: 1; max-width: 0; overflow: hidden; transition: 0.5s ease; }
.menu .menu_contents { position: relative; max-width: 130px; margin: 0; padding: 20px 45px 20px 7px; list-style: none; background-color: rgba(255, 255, 255, 0.96); white-space: nowrap; } /* 랜딩은 0.8. 사진이 아니라 글자 위에 뜨니 비쳐 보이지 않게 올렸다 */
.menu .menu_contents::before,
.menu .menu_contents::after { content: ''; display: block; position: absolute; left: 0; width: 100%; height: 1px; background: linear-gradient(to right, rgba(216, 216, 216, 0.5), rgba(107, 107, 107, 0.5), rgba(216, 216, 216, 0.5)); }
.menu .menu_contents::before { top: 0; }
.menu .menu_contents::after { bottom: 0; }
.menu .menu_contents li { margin: 15px 0; }
.menu .menu_contents li:first-child { margin-top: 0; }
.menu .menu_contents li:last-child { margin-bottom: 0; }
.menu .menu_contents li a { color: #373737; font-weight: 300; font-size: 14px; font-family: 'Paperlogy'; transition: all 0.3s ease-in-out; }
.menu .menu_contents li.active a { font-weight: 600; }
.menu .menu_contents li.mypage { margin-top: 25px; }
.menu .menu_contents li.service > a { cursor: pointer; }
.menu .menu_contents li.service.open > a { font-weight: 600; }
.menu .menu_contents li.service .service_sub { display: none; padding-left: 6px; list-style: none; }
.menu .menu_contents li.service.open .service_sub { display: block; }
.menu .menu_contents li.service .service_sub li { margin: 10px 0 0; }
.menu .menu_contents li.service .service_sub a { font-size: 13px; }
.menu .menu_contents li.service .service_sub a.current { font-weight: 600; }
.menu .menu_contents li.lang { margin-top: 25px; }
.lang_toggle { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.lang_toggle .lang_item { display: inline-flex; align-items: center; gap: 4px; }
.lang_toggle .lang_btn { color: #373737; font-weight: 300; font-size: 14px; font-family: 'Paperlogy'; cursor: pointer; }
.lang_toggle .lang_btn.active { font-weight: 600; }
.lang_toggle .lang_divider { color: #9a9a9a; font-size: 12px; line-height: 1; }

/* 지도 서비스 버튼 */
.btns { cursor: pointer; }
.header_bg .btn_map { position: absolute; right: 0; bottom: 0; width: 40px; height: 40px; border-radius: 20px; background: transparent; text-align: center; } /* 흰 원 대신 시안의 핀 아이콘 */
.header_bg .btn_map > img.pin { display: inline-block; width: 24px; height: 29px; margin-top: 5.5px; }
.header_bg .btn_map > img.pin-white { display: none; }
.header_bg.white .btn_map:not(.open) > img.pin-white { display: inline-block; }
.header_bg.white .btn_map:not(.open) > img.pin-dark { display: none; }
.header_bg .hover_box { position: absolute; right: 0; top: 0; z-index: -1; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; padding: 12px 0; border-radius: inherit; background: transparent; color: transparent; font-family: 'Paperlogy', 'Noto Sans KR', sans-serif; font-size: 16px; font-weight: 700; white-space: nowrap; transition: all 250ms ease-out; }
.header_bg .btn_map.hover .hover_box,
.header_bg .btn_map:hover .hover_box { width: 160px; padding: 12px 25px 12px 0; color: #000; background: #fff; }
.header_bg.white .btn_map.hover .hover_box, .header_bg.white .btn_map:hover .hover_box { background: #eee; }

.header_bg .btn_map .launcher_panel { position: absolute; right: 0; top: 100%; z-index: 20; padding-top: 10px; width: min(320px, calc(100vw - 32px)); text-align: left; cursor: default; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 0s linear 180ms; }
.header_bg .btn_map:hover .launcher_panel,
.header_bg .btn_map:focus-within .launcher_panel,
.header_bg .btn_map.open .launcher_panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.launcher_list { list-style: none; margin: 0; padding: 6px; background: #fff; border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08); }
.launcher_item + .launcher_item { margin-top: 4px; }
.launcher_link { display: block; padding: 12px 14px; border-radius: 10px; color: #111; text-decoration: none; transition: background 150ms ease-out; font-family: 'Noto Sans KR', sans-serif; }
.launcher_link:hover,
.launcher_link:focus-visible { background: #f3f1ee; outline: none; }
.launcher_head { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: center; }
.launcher_title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.launcher_arrow { grid-row: span 2; font-size: 16px; color: #999; transition: transform 150ms ease-out, color 150ms ease-out; }
.launcher_link:hover .launcher_arrow { color: #111; transform: translateX(3px); }
.launcher_desc { grid-column: 1; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: #666; overflow-wrap: anywhere; }
.launcher_preview { display: grid; grid-template-rows: 0fr; margin-top: 0; transition: grid-template-rows 260ms ease-out, margin-top 260ms ease-out; }
.launcher_preview > span { overflow: hidden; min-height: 0; }
.launcher_link:hover .launcher_preview,
.launcher_link:focus-visible .launcher_preview { grid-template-rows: 1fr; margin-top: 10px; }
.launcher_preview img { display: block; width: 100%; height: auto; object-fit: cover; object-position: left top; border: 1px solid #e6e3df; border-radius: 8px; }

/* 왼쪽 점 내비: 랜딩처럼 첫 화면·마지막 화면에서는 숨긴다 */
.side_nav_con { position: fixed; top: 50%; left: 36px; z-index: 9; transform: translateY(-50%); transition: opacity 250ms ease-out; }
.side_nav_con.hide { opacity: 0; pointer-events: none; }
.side_nav_con .background { position: absolute; left: 0; top: 0; z-index: -1; }
.side_nav_con .cube { position: absolute; left: 0; top: 0; transform: translateY(-25%); transition: all 500ms ease-out; }
.side_nav_con .dot { position: relative; width: 20px; height: 14px; margin: 16px 0; cursor: pointer; }
.side_nav_con .dot:nth-child(1) { margin-top: 0; }

/* 랜딩 헤더와 같은 여백(2026-11-09 사이트 공통 헤더 규칙): 1561px 이하 좌우 100px, 768px 이하 좌우 20px */
@media (max-width: 1561px) {
  .header_bg .width_con { width: calc(100% - 200px); margin: 0 100px; }
}

/* 터치 기기: 올릴 마우스가 없으니 미리보기를 처음부터 작게 펼쳐 둔다 */
@media (hover: none) {
  .launcher_preview { grid-template-rows: 1fr; margin-top: 8px; }
  .launcher_preview img { aspect-ratio: 16 / 7; }
}

/* 좁은 화면: 위치는 랜딩 모바일 헤더와 같다. 내용이 그냥 스크롤되므로 흰 띠만 깐다(버튼이 띠 끝에 붙지 않게 8px 더) */
/* 1023px 이하는 내용이 그냥 스크롤되므로 흰 띠만 깐다. 버튼 자리는 랜딩과 같다(태블릿 = PC 헤더, 768px 이하 = 모바일 헤더) */
@media (max-width: 1023px) {
  .header_bg { height: 100px; background: repeating-linear-gradient(to right, rgba(26, 25, 83, 0.05) 0 1px, transparent 1px calc((100% - 1px) / 8)) 40px 0 / calc(100% - 79px) 100% no-repeat, #fff; pointer-events: auto; } /* 아래 경계선(box-shadow)은 없앴다(2026-11-13 주인님) */ /* 흰 띠에도 본문 배경과 같은 세로선 */
  .menu .menu_contents { width: 130px; }
  .side_nav_con { display: none; }
  .launcher_panel { max-height: calc(100vh - 110px); overflow-y: auto; }
}
@media (max-width: 767px) {
  .header_bg { height: 68px; }
  .header_bg .width_con { width: calc(100% - 40px); margin: 0 20px; }
  .header_bg header { height: 60px; padding-top: 15px; }
  .burger-icon .burger-sticks { width: 20px; }
  .burger-icon .burger-sticks:after { top: -5px; }
  .menu { left: 0; top: 55px; }
  .launcher_panel { max-height: calc(100vh - 80px); }
}

/* ════════════════════════════════════════════════════════════════════════════
   아래는 src/css/site_header.css 사본(2026-11-09 마당_1029 시안: 헤더 아이콘 자리·메뉴 패널·지도 패널).
   React 헤더와 같은 값을 쓴다 — 그쪽을 고치면 여기도 같이 고칠 것. 위의 옛 메뉴·런처 규칙을 덮는다.
   ════════════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────────────────
   사이트 헤더 — 피그마 마당_1029(2026-11-09) "메뉴"(772:13729)·"지도_호버 반응"(772:13566)·각 화면의 메인헤더.
   랜딩(FullpageHeader)과 일반 페이지(Header) 공통. 소개 페이지(public/service)는 service-header.css 가 같은 값을 쓴다.
   가로 자리(1440 / 좌우 100px / 20px)는 common_respon.css "공통 헤더 = 랜딩 헤더 기준".
   ───────────────────────────────────────────────────────────────────────────── */

/* ── 헤더 아이콘 세로 자리(1920 시안): 햄버거 y76(27×18) · 로고 y70 · 핀 y70(오른쪽 끝 1680) ── */
@media (min-width: 768px) {
    .header_bg .burger-icon { top: 75px; }                 /* 막대 선이 상자 위 1px 에서 시작 → 선 y76 */
    .header_bg .burger-icon { margin-left: 2px; }
    .header_bg .burger-icon .burger-sticks { width: 20px; } /* 2026-11-13 시안: 20×16, x242 */
    .header_bg header > h1 { margin-top: 42px; } /* 로고 y72 */           /* 가운데 정렬이라 38 → 19px 내려감(로고 y51 → 70) */
    .header_bg header .btn_map { bottom: -13.5px; text-align: right; } /* 핀 y69 */ /* 핀 그림 y55.5 → 70, 오른쪽 끝에 붙임 */
}




/* ── 햄버거 메뉴 패널 ── */
.header_bg .menu {
    position: fixed; left: 0; top: 0; z-index: 1;
    width: 100%; max-width: none; height: 600px; overflow: hidden; /* 882:3359 는 550 — 2026-11-14 주인님: 답답해서 600 */
    background: #fff; border-bottom: 1px solid #403b39;
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity 250ms ease-out, transform 250ms ease-out, visibility 0s linear 250ms;
}
.header_bg .burger-check:checked ~ .menu { max-width: none; opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.header_bg .menu_dim {
    position: fixed; inset: 0; z-index: 0; display: block; cursor: default;
    background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); /* 2026-11-13 시안 메모 "배경에 FFFFFF 50% background blur 20%" */
    opacity: 0; visibility: hidden; transition: opacity 250ms ease-out, visibility 0s linear 250ms;
}
.header_bg .burger-check:checked ~ .menu_dim { opacity: 1; visibility: visible; transition-delay: 0s; }
/* 패널이 열리면 아이콘이 패널 위에 있어야 한다 */
.header_bg header > h1, .header_bg .burger-icon { z-index: 4; }
.header_bg .btn_map { z-index: 3; } /* 지도 패널은 이 안에 있어 로고·햄버거(4) 아래, 핀 그림 아래에 깔린다 */
.header_bg header > h1 { position: relative; }

.header_bg .menu_inner { position: relative; width: 1440px; height: 100%; margin: 0 auto; }
/* 패널 위 세로 격자선(시안: x236 부터 180px 간격, 9줄, rgba(26,25,83,.05)) */
.header_bg .menu_inner::before, .header_bg .map_inner::before {
    content: ''; position: absolute; left: -4px; top: 0; bottom: 0; width: 1441px; pointer-events: none;
    background: repeating-linear-gradient(to right, rgba(26, 25, 83, 0.05) 0 1px, transparent 1px 180px);
}
.header_bg .menu .menu_inner::before, .header_bg .btn_map .map_inner::before { display: none; } /* 메뉴·지도 패널을 펼치면 세로선을 그리지 않는다(주인님 2026-11-13). 닫힌 헤더 띠에는 있다 */
.header_bg .menu .menu_contents {
    position: absolute; left: 0; top: 144px; width: 359px; max-width: none; /* 882:3359: 글자 x240 */
    margin: 0; padding: 0; background: none; white-space: normal; list-style: none;
}
.header_bg .menu .menu_contents::before, .header_bg .menu .menu_contents::after { display: none; }
.header_bg .menu .menu_contents li {
    display: flex; align-items: center; margin: 0; padding: 12px 0; min-height: 44.5px; box-sizing: border-box; /* 882:3359: 한 줄 높이 44.5(밑줄 0.5 포함) */
    border-bottom: 0.5px solid #403b39;
}
.header_bg .menu .menu_contents li a {
    font-family: 'Geist', 'Noto Sans KR', sans-serif; font-size: 15px; font-weight: 300; line-height: 20px;
    color: #403b39; text-decoration: none;
}
.header_bg .menu .menu_contents li.lang { margin: 0; border-bottom: 0; }
.header_bg .menu .menu_contents li[hidden] { display: none; }
/* 마지막 줄: 언어 전환은 왼쪽 끝, 로그인·로그아웃은 오른쪽 끝 */
.header_bg .menu .menu_contents li.foot { justify-content: space-between; margin: 0; border-bottom: 0; }
.header_bg .menu .menu_contents li.foot .lang_toggle { font-family: 'Geist', sans-serif; font-size: 13px; }
/* Service: 누르면 아래에 소개 페이지 두 개가 펼쳐진다 */
.header_bg .menu .menu_contents li.service { flex-direction: column; align-items: flex-start; }
.header_bg .menu .menu_contents li.service > a { cursor: pointer; }

.header_bg .menu .menu_contents li.lang .lang_toggle { font-family: 'Geist', sans-serif; font-size: 13px; }
.header_bg .menu_tag {
    position: absolute; left: auto; right: 0; top: 144px; width: 539px; margin: 0;
    font-family: 'Geist', sans-serif; font-size: 41.34px; font-weight: 400; line-height: 39.5px; letter-spacing: -0.04em; color: #403b39; /* 882:3359: x1141·y144, 두 줄 높이 79 */
}
/* 메뉴가 열리면 사진 위(흰 아이콘) 화면에서도 아이콘을 어둡게 */
.header_bg:has(.burger-check:checked) .burger-icon .burger-sticks:before,
.header_bg:has(.burger-check:checked) .burger-icon .burger-sticks:after { background: #403b39; }
.header_bg:has(.burger-check:checked) header h1 .logo-white { display: none; }
.header_bg:has(.burger-check:checked) header h1 .logo-dark { display: block; }
.header_bg:has(.burger-check:checked) .btn_map > img.pin-white { display: none !important; }
.header_bg:has(.burger-check:checked) .btn_map > img.pin-dark { display: inline-block !important; }
/* 시안의 닫기(X): 20×20, 선 3px 둥근 끝 #403B39 — 기존 막대 회전을 그 크기에 맞춘다 */
.header_bg .burger-check:checked ~ .burger-icon .burger-sticks { width: 20px; }
.header_bg .burger-check:checked ~ .burger-icon .burger-sticks:before,
.header_bg .burger-check:checked ~ .burger-icon .burger-sticks:after { height: 2px; border-radius: 2px; background: #403b39; width: 28px; left: -4px; }

/* ── 지도 버튼(핀) 패널 ── */
.header_bg .btn_map .hover_box { display: none; }           /* 예전 "서비스 바로가기" 알약은 패널로 대신한다 */
.header_bg .btn_map .map_panel {
    position: fixed; left: 0; top: 0; z-index: -1;
    width: 100%; height: 600px; background: #fff; border-bottom: 1px solid #403b39; /* 메뉴 패널과 같은 높이(주인님 지시) — 600 */
    text-align: left; cursor: default;
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity 250ms ease-out, transform 250ms ease-out, visibility 0s linear 250ms;
}
.header_bg .btn_map .map_dim {
    position: fixed; left: 0; right: 0; top: 600px; bottom: 0; z-index: -2; pointer-events: none;
    background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); /* 메뉴와 같은 흐림(2026-11-13 주인님). 11-09 엔 선명하게였음 */
    opacity: 0; visibility: hidden; transition: opacity 250ms ease-out, visibility 0s linear 250ms;
}
/* 지도 패널은 핀을 눌러 연다(주인님 지시 2026-11-09: 마우스 올림 → 클릭). 바깥을 누르거나 다시 누르면 닫힌다 */
.header_bg .btn_map.open .map_panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.header_bg .btn_map.open .map_dim { opacity: 1; visibility: visible; transition-delay: 0s; }
/* 패널이 열리면 사진 위(흰 아이콘) 화면에서도 아이콘을 어둡게 */
.header_bg:has(.btn_map.open) .burger-icon .burger-sticks:before,
.header_bg:has(.btn_map.open) .burger-icon .burger-sticks:after { background: #000; }
.header_bg:has(.btn_map.open) header h1 .logo-white { display: none; }
.header_bg:has(.btn_map.open) header h1 .logo-dark { display: block; }

.header_bg .map_inner { position: relative; width: 1440px; height: 100%; margin: 0 auto; }
.header_bg .map_tag {
    position: absolute; left: -3px; top: 157px; width: 539px; margin: 0;
    font-family: 'Geist', sans-serif; font-size: 41.34px; font-weight: 400; line-height: 39.5px; letter-spacing: -0.04em; color: #403b39; /* 882:3359: x1141·y144, 두 줄 높이 79 */
}
.header_bg .map_links { position: absolute; left: 1076px; top: 157px; width: 359px; margin: 0; padding: 0; list-style: none; }
.header_bg .map_links li + li { margin-top: 80px; }          /* 시안: 두 번째 항목 y322 (첫 항목 157 + 85) */
.header_bg .map_links a { display: block; color: #403b39; text-decoration: none; opacity: 0.5; transition: opacity 200ms ease-out; }
.header_bg .map_links li.on a { opacity: 1; }
.header_bg .map_links strong { display: block; font-family: 'Geist', 'Noto Sans KR', sans-serif; font-size: 24px; font-weight: 400; line-height: 31px; text-shadow: 0 0 0.5px rgba(64, 59, 57, 0.25); }
.header_bg .map_links span { display: block; margin-top: 4px; font-family: 'Geist', 'Noto Sans KR', sans-serif; font-size: 14px; font-weight: 300; line-height: 18px; text-shadow: 0 0 0.5px rgba(64, 59, 57, 0.25); }
.header_bg .btn_map .map_links img { display: block; width: 359px; height: 22px; padding: 0; margin-top: 10px; opacity: 0; transition: opacity 200ms ease-out; }
.header_bg .btn_map .map_links li.on img { opacity: 1; }
.header_bg .btn_map .map_links li + li img { position: absolute; }    /* 아래 항목의 화살표는 자리를 차지하지 않는다(시안 간격 유지) */

/* ── 좁은 화면 ── */
@media (max-width: 1561px) {
    .header_bg .menu_inner, .header_bg .map_inner { width: calc(100% - 200px); }
    .header_bg .menu_inner::before, .header_bg .map_inner::before { width: calc(100% + 5px); background: repeating-linear-gradient(to right, rgba(26, 25, 83, 0.05) 0 1px, transparent 1px 12.5%); }
    .header_bg .menu_tag { left: auto; right: 0; }
    /* 2026-11-13: 창이 좁아지면 오른쪽 문구가 메뉴 목록(359px)·밑줄 화살표와 겹쳤다 → 목록 옆 남는 폭(40px 띄움) 안에서 글자를 줄인다 */
    .header_bg .menu_tag, .header_bg .map_tag { width: min(539px, calc(100% - 399px)); font-size: clamp(26px, 3.2vw, 41.34px); }
    .header_bg .map_links { left: auto; right: 0; }
}
@media (max-width: 1023px) {
    .header_bg .menu_tag, .header_bg .map_tag { display: none; }
    .header_bg .menu_inner::before, .header_bg .map_inner::before { display: none; }
}
@media (max-width: 767px) {
    .header_bg .menu_inner, .header_bg .map_inner { width: calc(100% - 40px); }
    .header_bg .menu, .header_bg .btn_map .map_panel { height: auto; padding-bottom: 32px; }
    .header_bg .btn_map .map_dim { top: 0; }
    .header_bg .menu .menu_contents { position: static; width: 100%; padding-top: 80px; }
    .header_bg .map_links { position: static; width: 100%; padding-top: 80px; }
    .header_bg .map_links li + li { margin-top: 32px; }
    .header_bg .btn_map .map_links img { width: 100%; height: auto; }
}

/* ── 메뉴 — 피그마 882:3359(2026-11-13): 마우스 올림 효과 없음. 하위 메뉴는 늘 펼침(13px Light #403b39, 4px 간격) ── */
.header_bg .menu .menu_contents > li.has_sub { flex-direction: column; align-items: flex-start; }
.header_bg .menu .menu_contents .about_sub,
.header_bg .menu .menu_contents li.service .service_sub { display: block; margin: 0; padding: 12px 0 0; list-style: none; }
.header_bg .menu .menu_contents li.service .service_sub { padding-top: 10px; } /* 시안: About 아래 12, Service 아래 10 */ /* 2026-11-13 주인님 지시: About·Service 하위 항목은 마우스를 올리지 않아도 늘 펼쳐 둔다 */
.header_bg .menu .menu_contents .about_sub li,
.header_bg .menu .menu_contents li.service .service_sub li { display: block; min-height: 0; margin: 0 0 4px; padding: 0; border: 0; }
.header_bg .menu .menu_contents .about_sub li:last-child,
.header_bg .menu .menu_contents li.service .service_sub li:last-child { margin-bottom: 0; }
.header_bg .menu .menu_contents .about_sub a,
.header_bg .menu .menu_contents li.service .service_sub a { font-size: 13px; font-weight: 300; line-height: 17px; }

/* 왼쪽 점 내비·정육면체는 쓰지 않는다(주인님 지시 2026-11-09) */
.side_nav_con { display: none !important; }

/* 메뉴 언어 토글: 항목·구분선 사이 4px → 14px (주인님 11-10) */
.header_bg .menu .menu_contents li.foot .lang_toggle, .header_bg .menu .menu_contents li.foot .lang_toggle .lang_item { gap: 12px; }
/* 882:3359: 언어·로그인 줄 = People 밑줄 +16(y478), 글자·구분선 모두 13px Light #403b39 */
.header_bg .menu .menu_contents li.foot { min-height: 0; padding: 16px 0 0; align-items: flex-start; }
.header_bg .menu .menu_contents li.foot a, .header_bg .menu .menu_contents li.foot .lang_btn, .header_bg .menu .menu_contents li.foot .lang_btn.active,
.header_bg .menu .menu_contents li.foot .lang_divider { font-family: 'Geist', 'Noto Sans KR', sans-serif; font-size: 13px; font-weight: 300; line-height: 17px; color: #403b39; }
/* 메뉴가 열렸을 때 아이콘(882:3359): 닫기 X 는 x238~258(가운데 248), 지도 핀은 x1653 */
@media (min-width: 768px) {
    .header_bg .burger-check:checked ~ .burger-icon .burger-sticks:before,
    .header_bg .burger-check:checked ~ .burger-icon .burger-sticks:after { left: -5px; } /* X 왼끝을 왼쪽 세로선(x240)에 붙인다(주인님 2026-11-13) */
}

/* ════════ 2026-11-13 태블릿·휴대폰 메뉴·지도 패널 (시안 iPad 7·9 834 / iPhone 19·20 393) ════════ */
@media (min-width: 768px) and (max-width: 1023px) {
    .header_bg .menu, .header_bg .btn_map .map_panel { height: 597px; }
    .header_bg .btn_map .map_dim { top: 597px; }
    .header_bg .menu_inner, .header_bg .map_inner { width: calc(100% - 80px); }
    .header_bg .menu .menu_contents { top: 97px; width: 360px; }
    .header_bg .menu .menu_contents > li.has_sub, .header_bg .menu .menu_contents > li.service { padding-bottom: 12px; }
    .header_bg .menu .menu_contents .about_sub { padding-top: 20px; }
    .header_bg .menu .menu_contents li.service .service_sub { padding-top: 19px; }
    .header_bg .menu .menu_contents .about_sub li, .header_bg .menu .menu_contents li.service .service_sub li { margin-bottom: 12px; }
    .header_bg .menu .menu_contents li.foot { padding-top: 20px; }
    .header_bg .menu .menu_contents li.foot .lang_toggle, .header_bg .menu .menu_contents li.foot .lang_toggle .lang_item { gap: 27px; }
    .header_bg .menu .menu_contents li.foot > a { font-size: 14px; }
    /* 오른쪽 위 문구(24px), 지도 패널은 문구 왼쪽 · 링크 오른쪽 */
    .header_bg .menu_tag, .header_bg .map_tag { display: block; top: 105px; width: auto; white-space: nowrap; font-size: 24px; line-height: 25px; }
    .header_bg .menu_tag { left: auto; right: 0; text-align: right; }
    .header_bg .map_tag { left: 0; top: 112px; }
    .header_bg .map_links { left: auto; right: -4px; top: 118px; width: 293px; }
    .header_bg .map_links li + li { margin-top: 98px; }
    .header_bg .map_links strong { font-size: 20px; line-height: 20px; }
    .header_bg .map_links span { margin-top: 9px; }
    .header_bg .btn_map .map_links img { width: 293px; }
}
@media (max-width: 767px) {
    .header_bg .menu, .header_bg .btn_map .map_panel { height: 650px; padding-bottom: 0; }
    .header_bg .btn_map .map_dim { top: 650px; }
    .header_bg .menu_tag, .header_bg .map_tag { display: block; top: 96px; width: auto; white-space: nowrap; font-size: 24px; line-height: 25px; }
    .header_bg .menu_tag { left: auto; right: 0; text-align: right; }
    .header_bg .map_tag { left: 0; }
    /* 메뉴: About y212, 하위 메뉴는 두 칸(184 | 나머지), 줄 간격 53 */
    .header_bg .menu .menu_contents { position: absolute; top: 200px; width: 100%; padding-top: 0; }
    .header_bg .menu .menu_contents li { min-height: 53px; }
    .header_bg .menu .menu_contents > li.has_sub, .header_bg .menu .menu_contents > li.service { padding-bottom: 21px; }
    .header_bg .menu .menu_contents .about_sub, .header_bg .menu .menu_contents li.service .service_sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; width: 100%; box-sizing: border-box; } /* 두 칸 같은 폭(주인님 지시 2026-11-13, 393 시안에서 184 ≈ 반) */
    .header_bg .menu .menu_contents .about_sub { padding-top: 20px; }
    .header_bg .menu .menu_contents li.service .service_sub { padding-top: 19px; }
    .header_bg .menu .menu_contents .about_sub li, .header_bg .menu .menu_contents li.service .service_sub li { margin: 0; }
    .header_bg .menu .menu_contents li.foot { min-height: 0; padding-top: 26px; }
    .header_bg .menu .menu_contents li.foot .lang_toggle, .header_bg .menu .menu_contents li.foot .lang_toggle .lang_item { gap: 27px; }
    .header_bg .menu .menu_contents li.foot > a { font-size: 14px; }
    /* 지도 패널: 링크는 오른쪽 아래(x134, 폭 243) */
    .header_bg .map_links { position: absolute; left: 114px; top: 366px; width: auto; right: -2px; padding-top: 0; }
    .header_bg .map_links li + li { margin-top: 78px; }
    .header_bg .map_links strong { font-size: 20px; line-height: 20px; }
    .header_bg .map_links span { margin-top: 9px; }
    .header_bg .btn_map .map_links img { width: 100%; height: auto; }
}

/* 태블릿(769~1023): 헤더 아이콘도 메뉴판과 같은 좌우 40px (2026-11-13) */
@media (min-width: 768px) and (max-width: 1023px) {
    .header_bg .width_con { width: calc(100% - 80px); margin: 0 40px; }
}

/* ════════ 2026-11-13 태블릿·휴대폰 헤더 아이콘 (시안 iPad 834 · iPhone 393) ════════
   태블릿: 로고 134×20(y26) · 햄버거 16×13(x40, y29.5) · 핀 20×24(y24, 오른쪽 끝)
   휴대폰: 로고 107×16(y20) · 햄버거 14×11(x21.5, y22.5) · 핀 18×22(y18) / 랜딩은 로고 121×18(y19)·햄버거 18×12·핀 24×29(y14)
   헤더 맨 위 기준 절대 위치로 놓아, 메뉴판 글자(태블릿 About y109)와 시안만큼 떨어지게 한다. */
@media (min-width: 768px) and (max-width: 1023px) {
    .header_bg header > h1 { position: absolute; left: 50%; top: 26px; margin: 0; transform: translateX(-50%); }
    .header_bg header > h1 a, #root .header_bg.notFullpage > header h1 a { width: 134px; }
    .header_bg .burger-icon { top: 27px; margin-left: 0; }
    .header_bg .burger-icon .burger-sticks { width: 16px; }
    .header_bg .burger-icon .burger-sticks:before { top: 5.5px; }
    .header_bg .burger-icon .burger-sticks:after { top: -5.5px; }
    .header_bg .burger-check:checked ~ .burger-icon .burger-sticks { width: 16px; }
    .header_bg .burger-check:checked ~ .burger-icon .burger-sticks:before,
    .header_bg .burger-check:checked ~ .burger-icon .burger-sticks:after { top: 0; width: 22px; left: -3px; height: 2.5px; }
    .header_bg header .btn_map { top: 24px; bottom: auto; right: 0; width: 20px; height: 24px; }
    .header_bg:has(.burger-check:checked) .btn_map { right: 0; }
    .header_bg .btn_map > img.pin { width: 20px; height: 24px; margin-top: 0; }
}
@media (max-width: 767px) {
    .header_bg header > h1 { position: absolute; left: 50%; top: 20px; margin: 0; transform: translateX(-50%); }
    .header_bg header > h1 a, #root .header_bg.notFullpage > header h1 a { width: 107px; }
    .header_bg .burger-icon { top: 18.5px; margin-left: 1.5px; }
    .header_bg .burger-icon .burger-sticks { width: 14px; }
    .header_bg .burger-icon .burger-sticks:before { top: 4.5px; }
    .header_bg .burger-icon .burger-sticks:after { top: -4.5px; }
    .header_bg .burger-check:checked ~ .burger-icon .burger-sticks { width: 14px; }
    .header_bg .burger-check:checked ~ .burger-icon .burger-sticks:before,
    .header_bg .burger-check:checked ~ .burger-icon .burger-sticks:after { top: 0; width: 20px; left: -3px; height: 2.5px; }
    .header_bg header .btn_map { top: 18px; bottom: auto; right: 0; width: 18px; height: 22px; }
    .header_bg:has(.burger-check:checked) .btn_map { right: 0; }
    .header_bg .btn_map > img.pin { width: 18px; height: 22px; margin-top: 0; }
}

/* 지도 패널(2026-11-13 주인님): 화살표 없애고(자리는 그대로) 두 항목 모두 진한 글자, 호버 변화 없음 */
.header_bg .btn_map .map_links img, .header_bg .btn_map .map_links li.on img { visibility: hidden; opacity: 0; }
.header_bg .map_links a, .header_bg .map_links li.on a, .header_bg .map_links a:hover { opacity: 1; transition: none; }
@media (max-width: 767px) {
  .header_bg { background-position: 20px 0; background-size: calc(100% - 39px) 100%; }
}

/* 2026-11-13 주인님: 메뉴 항목을 눌러도 굵어지거나 하위 목록 배치가 바뀌지 않게(서비스 소개 페이지는 스크립트가 .open 을 붙인다),
   지도 핀은 마우스를 올려도 아무 변화 없음, 터치할 때 회색 눌림 표시도 없앤다 */
.header_bg .menu .menu_contents li.service.open > a { font-weight: 300; }
.header_bg .menu .menu_contents li.service > a { cursor: default; }
.header_bg .menu a, .header_bg .burger-icon, .header_bg .btn_map { -webkit-tap-highlight-color: transparent; }
.header_bg .menu a:focus:not(:focus-visible), .header_bg .btn_map:focus:not(:focus-visible) { outline: none; }
.header_bg .btn_map .hover_box, .header_bg .btn_map:hover .hover_box, .header_bg .btn_map.hover .hover_box { display: none !important; }
@media (max-width: 767px) { .header_bg .menu .menu_contents li.service.open .service_sub { display: grid; } }
@media (min-width: 768px) { .header_bg .menu .menu_contents li.service.open .service_sub { display: block; } }

/* 좁은 화면 새 배치(2026-11-13 반응형 시안): 화면이 헤더 밑까지 꽉 차므로 흰 띠는 태블릿 72 · 휴대폰 56(1024~1279 는 PC 크기 헤더라 100).
   사진 위(.white — service.js)에서는 띠 없이 흰 아이콘만. 메뉴·지도 패널을 열면 다시 흰 바탕 */
@media (min-width: 768px) and (max-width: 1023px) { .header_bg { height: 72px; } }
@media (max-width: 767px) { .header_bg { height: 56px; } }
@media (max-width: 1023px) {
  .header_bg.white:not(:has(.burger-check:checked)):not(:has(.btn_map.open)) { background: transparent; box-shadow: none; }
}

/* 2026-11-13 주인님: 헤더·본문 모두 다른 페이지(소개·뉴스 등)와 똑같은 경계 —
   1562 이상 1440 가운데 · 1024~1561 좌우 100px(PC 배치) · 768~1023 태블릿 40px · 767 이하 휴대폰 20px.
   1024 이상에서는 본문(시안 x240~1680 = 1440 폭)이 헤더와 같은 폭·같은 자리에 오도록 service.js 가 줄여 맞춘다 */

/* 2026-11-13 주인님: 메뉴의 큰 항목(About·Service·News·People·My Page)과 지도 패널의 제목(Propmate map·Madang)은 굵기 600. 하위 항목·언어·로그인은 그대로 */
.header_bg .menu .menu_contents > li:not(.foot):not(.lang) > a,
.header_bg .menu .menu_contents > li.service.open > a { font-weight: 600; }
.header_bg .map_links strong { font-weight: 600; }

/* 2026-11-13 주인님: PC 에서 닫힌 햄버거(=) 두 줄은 굵기 3px. 열린 X 는 2px 그대로, 태블릿·휴대폰도 그대로 */
@media (min-width: 1024px) {
    .header_bg .burger-check:not(:checked) ~ .burger-icon .burger-sticks { height: 3px; }
}

/* 2026-11-13 주인님: PC 에서 열린 X 도 3px, 닫힌 = 두 줄은 끝을 둥글게(뭉툭하게) */
@media (min-width: 1024px) {
    .header_bg .burger-icon .burger-sticks:before, .header_bg .burger-icon .burger-sticks:after { border-radius: 2px; }
    .header_bg .burger-check:checked ~ .burger-icon .burger-sticks:before, .header_bg .burger-check:checked ~ .burger-icon .burger-sticks:after { height: 3px; }
}

/* 2026-11-13 주인님: About 은 링크(a)가 아닌 글자(span.menu_label) — 이동은 하위 항목(CEO Message 등)으로만. 모양은 다른 큰 항목과 같다 */
.header_bg .menu .menu_contents > li > span.menu_label {
    font-family: 'Geist', 'Noto Sans KR', sans-serif; font-size: 15px; font-weight: 600; line-height: 20px;
    color: #403b39; letter-spacing: inherit; cursor: default;
}

/* 2026-11-13 밤 주인님: 지도 패널 호버 다시 넣음 — 평소엔 두 제목 모두 얇게(300), 마우스를 올린 항목만 제목이 굵어지고(600)
   아래 화살표 선이 왼쪽에서 오른쪽으로 그려진다(끝의 꺾임까지). 키보드로 옮겨 가도 같다. 위의 '화살표 숨김·굵기 600' 규칙을 덮는다 */
.header_bg .map_links a, .header_bg .map_links li.on a, .header_bg .map_links a:hover { opacity: 1; transition: none; }
.header_bg .map_links strong { font-weight: 300; }
.header_bg .map_links li:hover strong, .header_bg .map_links li:focus-within strong { font-weight: 600; }
.header_bg .btn_map .map_links li img { height: auto !important; visibility: visible !important; opacity: 1 !important; clip-path: inset(0 100% 0 0); transition: clip-path 450ms cubic-bezier(.4, 0, .2, 1); }
.header_bg .btn_map .map_links li:hover img, .header_bg .btn_map .map_links li:focus-within img { clip-path: inset(0 0 0 0); }

/* 헤더 자동 숨김(2026-11-14 주인님): 아래로 스크롤하면 위로 숨고 위로 스크롤하면 내려온다(service.js autoHide).
   넓은 화면은 일반 스크롤로 화면 중간에 멈출 수 있어, 사진 위가 아니면 헤더 뒤에 흰 띠(.band, 본문과 같은 자리의 세로선) */
.header_bg { transition: transform 350ms ease; }
.header_bg.hdr_hide { transform: translateY(-160px); }
@media (min-width: 1024px) {
  .header_bg.band::before { content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: -1; height: 110px; pointer-events: none;
    background: repeating-linear-gradient(to right, rgba(26, 25, 83, 0.05) 0 1px, transparent 1px calc((100% - 1px) / 8)) calc(50% + 0.5px) 0 / 1441px 100% no-repeat, #fff; }
}
@media (min-width: 1024px) and (max-width: 1561px) {
  .header_bg.band::before { background-position: 100px 0; background-size: calc(100% - 199px) 100%; }
}

/* 2026-11-14 주인님: 헤더 배경은 투명(넓은 화면 흰 띠·좁은 화면 흰 바탕 모두 없앰) */
.header_bg, .header_bg.band { background: transparent !important; }
.header_bg.band::before { content: none !important; display: none !important; }