@charset "utf-8";

/*───────────────────────────────────────────────────────────────
  ONWEB 리빌더 헤더 공용 엔진 · core.css
  v1.0.0 / 2026-09-05 / ONWEB

  · 이 파일은 "헤더 껍데기" 만 담당한다 — 헤더 본체·바 배치·로고·
    아이콘 버튼·오른쪽 유틸·반응형.
    대메뉴와 서브메뉴의 생김새는 각 헤더의 style.css 가 맡는다.

  ── 특이도 규칙 (이걸 어기면 스킨이 코어를 못 이긴다) ─────────
     core.css   .gthd .x           (0,2,0)
     style.css  .gthd.gthd_A1 .x   (0,3,0)  ← 항상 이긴다
     반응형에서 "반드시 이겨야 하는" 규칙만 #header 를 붙여
     (1,2,0) 으로 올린다. ID 는 클래스를 몇 개 붙여도 못 이긴다.
     (미디어쿼리는 특이도를 올려 주지 않는다 — 그래서 필요한 장치)

  · 단위는 px 로 쓴다. 테마마다 html font-size 가 다르다.
  · 수치는 core.php 가 인라인 변수로 내려보낸다. 여기 적힌 값은
    변수가 없을 때의 대비값이다.
  · 강조컬러는 인라인으로 받지 않는다. --rb-point(강조컬러 엔진이
    :root 에 심는다) → --point-color → 고정 대비값 순으로 CSS 가
    직접 찾아간다. 그래야 PHP 쪽이 전부 실패해도 화면이 산다.
  · 브레이크포인트는 768 이 아니라 1360px 이다.
    (테마 rb.css/mobile.css 가 1360 에서 PC/모바일을 가른다)
    501~1360 은 태블릿·작은 노트북이라 화면이 넉넉하다.
    높이·아이콘을 실제로 줄이는 구간은 500px 이하다.

  ── 차례 ─────────────────────────────────────────────────────
   1. 판번호 · 색 토큰
   2. 헤더 본체
   3. 바 배치 (center / left / right / row2)
   4. 로고 · 연도 배지
   5. 아이콘 버튼 공통
   6. 오른쪽 유틸
   7. 전체메뉴 셸 (full / drop)
   8. 화면 크기별
   9. 모션 최소화 존중
───────────────────────────────────────────────────────────────*/


/*───────────────────────────────────────────────────────────────
  1. 판번호 · 색 토큰 — 상태에 따라 이 다섯 개만 뒤집는다
───────────────────────────────────────────────────────────────*/
.gthd {
    /* core.css 가 실제로 올라와 있는지 script.php 가 확인하는 표식 */
    --gthd-core-ver: 2.4.0;

    --gthd-fg     : #25282b;
    --gthd-fg-dim : rgba(37, 40, 43, .62);
    --gthd-line   : rgba(0, 0, 0, .09);
    /* 얇은 구분선(--gthd-line)은 거의 안 보이는 값이다. 원형 버튼의
       테두리처럼 "여기가 버튼" 을 알려야 하는 자리에는 이쪽을 쓴다. */
    --gthd-line-on : rgba(37, 40, 43, .3);
    --gthd-bg     : var(--gthd-solid, #ffffff);
    --gthd-point  : var(--rb-point, var(--point-color, #25282b));
}

/* 스크롤해서 줄어든 상태 — 배경만 바뀐다 */
.gthd.scrolling {
    --gthd-bg : var(--gthd-solids, rgba(255, 255, 255, .95));
}

/* 투명(오버레이 최상단) 상태 — 글자가 사진 위로 올라간다 */
.gthd.gthd_over:not(.scrolling) {
    --gthd-fg      : #ffffff;
    --gthd-fg-dim  : rgba(255, 255, 255, .72);
    --gthd-line    : rgba(255, 255, 255, .16);
    --gthd-line-on : rgba(255, 255, 255, .55);
    --gthd-bg      : transparent;
}


/*───────────────────────────────────────────────────────────────
  2. 헤더 본체

  ★ 배경·테두리에는 !important 를 반드시 붙인다.

     리빌더는 <main class="co_XXXXXX co_headerN"> 에 붙은 클래스로
     헤더색을 정하는 파일 두 개를 tail.sub.php 에서 뒤늦게 싣는다.

       /rb/rb.css/set.header.css
         .co_header0 #header { background-color: rgba(255,255,255,.95) }   (1,1,0)
       /rb/rb.css/set.point.header.css
         :root:root [class*="co_header"]:not(.co_header0) #header { ... }  (1,4,0)

     앞엣것은 #header.gthd 와 특이도가 같은데(둘 다 1,1,0) 소스가
     뒤라서 이긴다. 뒤엣것은 특이도부터 더 높다.
     그래서 !important 없이는 설정한 배경색이 통째로 덮인다.
     증상이 고약하다 — 오버레이 로직은 멀쩡히 도는데 헤더만 반투명
     흰색으로 나와서 "겹치기가 안 되네" 로 읽힌다.

  transition 에 all 을 쓰지 않는다. 드롭다운 위치까지 함께 움직여서
  마우스를 올릴 때마다 옆에서 미끄러져 들어온다.
───────────────────────────────────────────────────────────────*/
#header.gthd {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9900;

    width: 100%;
    padding-top: 0;
    padding-bottom: 0;

    background-color: var(--gthd-bg) !important;
    border-bottom: 1px solid var(--gthd-line) !important;
    box-shadow: none;
    overflow: visible;

    transition: background-color .35s ease,
                border-color .35s ease,
                box-shadow .35s ease;
}

/* 배경이 실제로 깔리는 상태에서만 뒤를 흐린다.
   투명 상태에 backdrop-filter 를 걸면 #header 가 새 containing block 이
   되어, 안쪽 position:fixed 요소가 화면이 아니라 헤더 박스 기준으로
   잡힌다. (전체화면 메뉴를 헤더 바깥에 두는 이유다) */
#header.gthd:not(.gthd_over),
#header.gthd.scrolling {
    -webkit-backdrop-filter: blur(var(--gthd-blur, 0px));
    backdrop-filter: blur(var(--gthd-blur, 0px));
}

#header.gthd.scrolling {
    border-bottom-color: transparent !important;
    box-shadow: var(--gthd-shadow, 0 2px 24px rgba(0, 0, 0, .07));
}

/* 아래 실선을 끈 경우 */
#header.gthd.no_line:not(.gthd_over) { border-bottom-color: transparent !important; }
#header.gthd.gthd_over.no_line_over:not(.scrolling) { border-bottom-color: transparent !important; }

.gthd, .gthd * { box-sizing: border-box; }

.gthd a { text-decoration: none; color: inherit; }
.gthd ul, .gthd ol, .gthd li { margin: 0; padding: 0; list-style: none; }
.gthd button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }

/* 원형 버튼에 outline 을 주면 둘레에 네모난 선이 그려지는 브라우저가
   있다. box-shadow 로 바꾸되 없애지는 않는다 — 키보드로 조작하는
   사람에게는 지금 어디에 있는지 알려 주는 유일한 단서다. */
.gthd button:focus,
.gthd a:focus { outline: none; }
.gthd button:focus-visible,
.gthd a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--gthd-fg);
    border-radius: 6px;
}
.gthd button, .gthd a { -webkit-tap-highlight-color: transparent; }


/*───────────────────────────────────────────────────────────────
  3. 바 배치
───────────────────────────────────────────────────────────────*/
.gthd .gthd_bar {
    display: flex;
    align-items: center;
    gap: 16px;

    width: 100%;
    max-width: var(--gthd-inner, 1400px);
    margin: 0 auto;
    padding-left: var(--gthd-side, 40px);
    padding-right: var(--gthd-side, 40px);

    height: var(--gthd-h, 84px);
    transition: height .3s ease;
}

.gthd.scrolling .gthd_bar { height: var(--gthd-hs, 66px); }

.gthd .gthd_left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    min-width: 0;
}

/* 항목 사이 간격은 설정(snb_gap) 하나가 정한다.
   글자 링크에 좌우 padding 을 따로 주지 않는 이유 — 두 곳에서 간격을
   만들면 "값을 키웠는데 생각만큼 안 벌어진다" 가 된다. */
.gthd .gthd_snb {
    display: flex;
    align-items: center;
    gap: var(--gthd-snbgap, 12px);
    flex: 0 0 auto;
    margin-left: auto;
}

/* 대메뉴 자리. 실제 메뉴 모양은 각 헤더의 style.css 가 그린다.
   ★ nav 에 position 을 주지 않는다 — 주는 순간 메가패널·전체폭
     드롭다운의 absolute 기준이 nav 로 바뀌어, 패널이 화면 폭이
     아니라 "메뉴 글자 폭" 만큼만 열린다. 기준은 #header 여야 한다. */
.gthd .gthd_gnb {
    display: flex;
    align-items: center;
    align-self: stretch;
    min-width: 0;
}

/* center — 로고 왼쪽 · 대메뉴 가운데 · 유틸 오른쪽 */
.gthd.hd_center .gthd_gnb { margin-left: auto; margin-right: auto; }
.gthd.hd_center .gthd_snb { margin-left: 0; }

/* left — 대메뉴가 로고 바로 옆 */
.gthd.hd_left .gthd_gnb { margin-left: 20px; margin-right: auto; }

/* right — 대메뉴가 유틸 바로 왼쪽 */
.gthd.hd_right .gthd_gnb { margin-left: auto; margin-right: 20px; }
.gthd.hd_right .gthd_snb { margin-left: 0; }

/* row2 — 2행. 첫 줄에 로고와 유틸, 둘째 줄에 대메뉴가 폭 전체로.
   메뉴가 많거나 이름이 긴 사이트에서 한 줄이 터질 때 쓴다. */
.gthd.hd_row2 .gthd_bar {
    flex-wrap: wrap;
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
}
.gthd.hd_row2 .gthd_left,
.gthd.hd_row2 .gthd_snb { height: var(--gthd-h, 84px); transition: height .3s ease; }
.gthd.hd_row2.scrolling .gthd_left,
.gthd.hd_row2.scrolling .gthd_snb { height: var(--gthd-hs, 66px); }

.gthd.hd_row2 .gthd_gnb {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    height: var(--gthd-h2, 54px);
    margin: 0;
    border-top: 1px solid var(--gthd-line);
    transition: height .3s ease;
}
.gthd.hd_row2.scrolling .gthd_gnb { height: var(--gthd-h2s, 46px); }


/*───────────────────────────────────────────────────────────────
  3-b. 따라다니는 인디케이터 (설정 gnb_blob)

  마우스를 따라 덩어리 하나가 미끄러져 옮겨다닌다. 항목마다 각자
  나타났다 사라지는 것보다 시선이 덜 산만하다.

  ★ 기준은 UL 이다. UL 에 position:relative 를 준다.
    nav 에는 주지 않는다 — 주는 순간 전폭 띠·메가패널의 absolute
    기준이 nav 로 바뀌어 화면 폭을 못 채운다.
    드롭다운은 li 를 기준으로 잡으므로 UL 의 relative 와 무관하다.

  ★ ul 안에 <li> 가 하나 더 생기므로 :first-child 로 첫 대메뉴를
    잡으면 어긋난다. 각 메뉴 파일이 PHP 로 is_first·is_last 를 붙인다.
───────────────────────────────────────────────────────────────*/
.gthd .gthd_gnb_ul { position: relative; }

.gthd .gthd_gnb_ind {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 0;

    width: 0;
    height: var(--gthd-pillh, 40px);
    margin-top: calc(var(--gthd-pillh, 40px) / -2);

    background: var(--gthd-point);
    border-radius: var(--gthd-gnbrad, 20px);
    opacity: 0;
    pointer-events: none;

    transition: left .28s cubic-bezier(.4, 0, .2, 1),
                width .28s cubic-bezier(.4, 0, .2, 1),
                opacity .2s ease;
}

/* 글자가 알약 위로 올라와야 한다 */
.gthd .gthd_gnb_li { position: relative; z-index: 1; }

/*── gnb_style = 'pill' — 강조컬러로 채운 알약 ──
   ★ 글자색 규칙의 특이도를 (0,4,1) 로 올린다. 각 헤더 style.css 가
     자기 호버색을 (0,3,1) 로 잡고 있어서, 같은 값이면 소스 순서로
     스킨이 이겨 강조컬러 알약 위에 강조컬러 글씨가 된다. */
.gthd.gnb_pill .gthd_gnb_ul .gthd_gnb_li.is_on > a { color: #fff; }
.gthd.gnb_pill .gthd_gnb_ul:hover .gthd_gnb_li.is_on > a { color: var(--gthd-fg); }
.gthd.gnb_pill .gthd_gnb_ul .gthd_gnb_li:hover > a,
.gthd.gnb_pill .gthd_gnb_ul .gthd_gnb_li:focus-within > a { color: #fff; }

/* pill 에서는 밑줄·점 표시를 쓰지 않는다 — 알약과 겹쳐 지저분해진다 */
.gthd.gnb_pill .gthd_gnb_li > a span::after { content: none; }

/*── 인디케이터를 밑줄·점 모양으로도 쓸 수 있다 ──
   ★ 앞 블록이 잡아 둔 속성(top · height · margin-top · radius)을
     전부 되돌려 적는다. 한쪽만 고치면 밑줄이 칸 한가운데에
     알약 모양으로 뜬다. */
.gthd.gnb_underline .gthd_gnb_ind,
.gthd.gnb_dot .gthd_gnb_ind {
    top: auto;
    bottom: calc(50% - var(--gthd-gnb, 18px) / 2 - var(--gthd-markgap, 8px));
    height: var(--gthd-markh, 2px);
    margin-top: 0;
    border-radius: 0;
}
.gthd.gnb_dot .gthd_gnb_ind {
    height: calc(var(--gthd-markh, 2px) * 2.5);
    border-radius: 50%;
}

/*── gnb_blob 을 켜면 표시 모양과 상관없이 "강조컬러로 채운 알약" ──

   밑줄이나 점을 미끄러뜨리면 보기 좋지 않다. 폭은 대메뉴 칸 폭으로
   잡히는데 밑줄은 그 폭 그대로 길게, 점은 border-radius:50% 가 걸린
   납작한 타원으로 늘어난다. 게다가 항목마다 붙는 밑줄·점까지 같이
   보여서 표시가 두 개가 된다.

   그래서 물방울을 켜면 알약 하나로 통일한다. 항목별 표시는 끈다.

   ★ 위 밑줄·점 규칙과 특이도가 (0,3,0) 으로 같다. 반드시 뒤에 둔다 —
     앞에 두면 소스 순서에서 밀려 아무 일도 일어나지 않는다.
   ★ 앞 블록이 바꿔 놓은 top · bottom · margin-top 을 전부 되돌린다.
     하나만 빠뜨리면 알약이 칸 아래쪽에 걸쳐 뜬다. */
.gthd.gnb_blob .gthd_gnb_ind {
    top: 50%;
    bottom: auto;
    height: var(--gthd-pillh, 40px);
    margin-top: calc(var(--gthd-pillh, 40px) / -2);
    border-radius: var(--gthd-gnbrad, 20px);
}

/* 항목별 밑줄·점을 끈다 — 미끄러지는 알약과 겹쳐 지저분해진다.
   ★ (0,3,3) 이라 각 헤더 style.css 의 표시 규칙((0,3,1) 안팎)을
     이긴다. */
.gthd.gnb_blob .gthd_gnb_li > a span::after { content: none; }

/* 알약 위의 글자는 흰색. 다른 메뉴로 마우스가 옮겨가면 알약도 함께
   따라가므로, 그때 "지금 보고 있는 메뉴" 는 평소 글자색으로 돌아온다. */
.gthd.gnb_blob .gthd_gnb_ul .gthd_gnb_li.is_on > a { color: #fff; }
.gthd.gnb_blob .gthd_gnb_ul:hover .gthd_gnb_li.is_on > a { color: var(--gthd-fg); }
.gthd.gnb_blob .gthd_gnb_ul .gthd_gnb_li:hover > a,
.gthd.gnb_blob .gthd_gnb_ul .gthd_gnb_li:focus-within > a { color: #fff; }

/* 투명(사진 위) 상태 — 알약은 흰색, 글자는 강조컬러로 뒤집는다.
   배경 밝기를 계산할 방법이 CSS 에는 없어 "사진 위에서는 흰색" 이
   가장 안전하다. */
.gthd.gthd_over:not(.scrolling) .gthd_gnb_ind { background: #fff; }
.gthd.gthd_over:not(.scrolling).gnb_pill .gthd_gnb_ul .gthd_gnb_li:hover > a,
.gthd.gthd_over:not(.scrolling).gnb_pill .gthd_gnb_ul .gthd_gnb_li.is_on > a { color: var(--gthd-point); }
.gthd.gthd_over:not(.scrolling).gnb_blob .gthd_gnb_ul .gthd_gnb_li:hover > a,
.gthd.gthd_over:not(.scrolling).gnb_blob .gthd_gnb_ul .gthd_gnb_li.is_on > a { color: var(--gthd-point); }
.gthd.gthd_over:not(.scrolling).gnb_blob .gthd_gnb_ul:hover .gthd_gnb_li.is_on > a { color: #fff; }

/*───────────────────────────────────────────────────────────────
  3-c. 하위 메뉴의 따라다니는 물방울 (설정 sub_blob)

  강조컬러로 채운 덩어리 하나가 마우스를 따라 미끄러집니다.
  항목마다 배경이 각자 나타났다 사라지는 것보다 시선이 덜 산만합니다.

  ★ 기준은 항목 <ul> 이다. .gthd_sub_ul 에 position:relative 를 준다.
    <li> 에는 절대 주지 않는다 — 항목의 offsetLeft 기준이 UL 이 아니라
    그 <li> 가 되어 늘 0 이 되고, 물방울이 첫 항목에서 안 움직인다.
    글자를 물방울 위로 올리는 일은 <a> 자신이 맡는다(자기 position 은
    자기 offsetLeft 를 바꾸지 않는다).

  ★ 물방울은 position:absolute 라서 그리드 항목도 플렉스 항목도 아니다.
    여러 칸 그리드(A_1 · D_1)에서도 빈 칸이 생기지 않는다.

  ★ 둥글기는 각 헤더 style.css 의 --gthd-subblobr 이 정한다.
    항목 자신의 border-radius 와 같은 값을 적어야 테두리가 맞는다.
───────────────────────────────────────────────────────────────*/
.gthd .gthd_sub_ul { position: relative; }

.gthd .gthd_sub_ul > li > a {
    position: relative;   /* 글자를 물방울 위로 */
    z-index: 1;
}

.gthd .gthd_sub_ind {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;

    width: 0;
    height: 0;

    background: var(--gthd-point);
    border-radius: var(--gthd-subblobr, 8px);

    opacity: 0;
    pointer-events: none;

    /* 살짝 튕기는 곡선. 물방울이라는 이름값을 하는 부분이다.
       ★ transition 에 all 을 쓰지 않는다 — background 까지 따라
         움직여서 강조컬러가 바뀔 때 색이 번지듯 흐른다. */
    transition: left   .28s cubic-bezier(.34, 1.4, .64, 1),
                top    .28s cubic-bezier(.34, 1.4, .64, 1),
                width  .28s cubic-bezier(.34, 1.4, .64, 1),
                height .28s cubic-bezier(.34, 1.4, .64, 1),
                opacity .16s ease;
}

/* 마우스를 올린 항목 — 배경은 물방울이 맡으므로 항목 자신은
   글자색만 바꾼다. 둘 다 칠하면 배경이 두 겹으로 겹쳐 탁해진다.

   ★ #header 를 앞에 세워 (1,4,2) 로 만든다. 각 헤더 style.css 의
     호버 규칙이 (0,4,0) 안팎이라 클래스만으로는 못 이긴다. ID 는
     클래스를 몇 개 붙이든 이긴다. */
#header.gthd.sub_blob .gthd_sub_ul > li > a:hover,
#header.gthd.sub_blob .gthd_sub_ul > li > a:focus-visible {
    background-color: transparent;
    color: #fff;
}

/* 새글 아이콘도 물방울 위에서는 흰 바탕에 강조컬러로 뒤집는다.
   테마가 배경색을 !important 로 박아 두어 같은 !important 로 맞선다. */
#header.gthd.sub_blob .gthd_sub_ul > li > a:hover .gnb_new_ico {
    background-color: #fff !important;
    color: var(--gthd-point);
}

/* "지금 보고 있는 항목"(sub_pill)은 자기 배경을 그대로 둔다.
   물방울은 마우스가 빠지면 사라지므로, 현재 위치를 알려 주는
   표시까지 물방울에 맡기면 평소에 아무 표시도 남지 않는다. */

/* 투명(사진 위) 상태 — 물방울은 흰색, 글자는 강조컬러로 뒤집는다.
   배경 밝기를 계산할 방법이 CSS 에는 없어 "사진 위에서는 흰색" 이
   가장 안전하다. (하위 메뉴 카드는 보통 흰 판 위에 뜨므로 이 규칙이
   걸리는 헤더는 카드 없이 띠만 내려오는 B_1 정도다.) */
.gthd.gthd_over:not(.scrolling) .gthd_sub_ind { background: #fff; }
#header.gthd.gthd_over:not(.scrolling).sub_blob .gthd_sub_ul > li > a:hover {
    color: var(--gthd-point);
}

/* 모션을 줄여 달라고 설정한 사람에게는 미끄러지지 않게 한다.
   9절에도 같은 취지의 규칙이 있지만 여기 값은 이름을 하나하나
   적어야 해서 따로 둔다. */
@media (prefers-reduced-motion: reduce) {
    .gthd .gthd_sub_ind { transition: opacity .16s ease; }
}



/*───────────────────────────────────────────────────────────────
  4. 로고 · 연도 배지

  높이와 가로폭을 "최대값" 으로 함께 건다. 높이만 고정하고
  width:auto 로 두면 가로로 긴 로고가 폭을 무한정 차지해
  가운데 대메뉴를 밀어낸다.
───────────────────────────────────────────────────────────────*/
.gthd .gthd_logowrap { display: flex; align-items: center; gap: 8px; }

.gthd .gthd_logo {
    position: relative;
    display: block;
    line-height: 0;
}

.gthd .gthd_logo img {
    display: block;
    width: auto;
    height: auto;
    max-height: var(--gthd-logo, 42px);
    max-width: var(--gthd-logow, 240px);
    transition: max-height .3s ease;
}

.gthd.scrolling .gthd_logo img { max-height: var(--gthd-logos, 36px); }

/* 흰 로고를 같은 자리에 겹쳐 두고 투명도만 바꾼다.
   filter:invert() 를 쓰지 않는다 — 로고에 브랜드 색이 있으면
   반전에서 엉뚱한 색이 된다. */
.gthd .gthd_logo .lg_w {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.gthd.gthd_over:not(.scrolling) .gthd_logo .lg_c { opacity: 0; }
.gthd.gthd_over:not(.scrolling) .gthd_logo .lg_w { opacity: 1; }

.gthd .gthd_year {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--gthd-point);
    color: #fff;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .02em;
}


/*───────────────────────────────────────────────────────────────
  5. 아이콘 버튼 공통

  버튼 상자는 아이콘보다 항상 크다(core.php 가 계산). 아이콘만
  키우고 상자를 40px 로 고정해 두면 삐져나온다.
───────────────────────────────────────────────────────────────*/
.gthd .gthd_ico {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: var(--gthd-icobox, 40px);
    height: var(--gthd-icobox, 40px);
    border-radius: 50%;

    color: var(--gthd-fg);
    transition: color .2s ease, background-color .2s ease, opacity .2s ease;
}

.gthd .gthd_ico svg {
    width: var(--gthd-icosize, 26px);
    height: var(--gthd-icosize, 26px);
    display: block;
}

/*── 유틸 아이콘은 3줄 메뉴와 따로 크기를 잡는다 (설정 snb_ico_size)
     3줄은 크게, 돋보기·스크랩·쪽지·사람은 작게 두어야 줄이 정돈된다.
     ★ 선택자에 .gthd_snb 를 한 겹 더 얹어 위 규칙을 이긴다. ──*/
.gthd .gthd_snb .gthd_ico svg {
    width: var(--gthd-snbico, 20px);
    height: var(--gthd-snbico, 20px);
}
.gthd .gthd_snb .gthd_ico .gthd_mi { font-size: var(--gthd-snbicomi, 22px); }

/* 구판 gt_hd_A 세트는 아이콘마다 원본 크기가 달랐다 —
   스크랩·쪽지 18px, 검색 20px. 도형이 viewBox 를 꽉 채우는 그림이라
   셋을 같은 px 로 그리면 스크랩·쪽지만 커 보인다. 그 비율을 되살린다. */
.gthd .gthd_snb .gthd_ico svg.gthd_pv18 {
    width: calc(var(--gthd-snbico, 20px) * .9);
    height: calc(var(--gthd-snbico, 20px) * .9);
}

/* 3줄(전체메뉴) 버튼은 유틸 줄 안에 있어도 ico_size 를 따른다.
   ★ 위 유틸 규칙과 특이도가 같으므로 반드시 뒤에 있어야 한다. */
.gthd .gthd_snb .gthd_maptog svg {
    width: var(--gthd-icosize, 26px);
    height: var(--gthd-icosize, 26px);
}
.gthd .gthd_snb .gthd_maptog .gthd_mi { font-size: var(--gthd-icosize, 26px); }

/* 3줄 아이콘만 설정한 색을 쓴다(유틸 아이콘은 글자색을 따른다) */
.gthd .gthd_mtog.ico_point,
.gthd .gthd_maptog.ico_point { color: var(--gthd-point); }
.gthd .gthd_mtog.ico_fixed,
.gthd .gthd_maptog.ico_fixed { color: var(--gthd-ico, currentColor); }
.gthd .gthd_mtog.ico_auto,
.gthd .gthd_maptog.ico_auto { color: var(--gthd-fg); }

/* 사진 위에서 윤곽이 보이도록 */
.gthd .gthd_ico.has_shadow svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.gthd .gthd_ico.has_chip { background: rgba(127, 127, 127, .12); }

/* 투명 상태에서는 3줄 아이콘도 흰색으로 뒤집는다.
   짙은 강조컬러는 어두운 사진에 묻히는데, 배경 밝기를 계산할
   방법이 CSS 에는 없다. "사진 위에서는 무조건 흰색" 이 안전하다. */
.gthd.gthd_over:not(.scrolling) .gthd_mtog,
.gthd.gthd_over:not(.scrolling) .gthd_maptog { color: #fff; }

.gthd .gthd_ico:hover { color: var(--gthd-point); }
.gthd.gthd_over:not(.scrolling) .gthd_ico:hover { color: #fff; opacity: .72; }

/* 여닫이 아이콘 — 열림 상태에서 X 로 */
.gthd .gthd_ico .ic_close { display: none; }
.gthd .gthd_ico.is_on .ic_open { display: none; }
.gthd .gthd_ico.is_on .ic_close { display: block; }

/*── Material Icons (설정 ico_font) ─────────────────────────────
   ★ 폰트가 도착하기 전 한 순간 'search' · 'notes' 같은 글자가 그대로
     보인다. 헤더는 화면 맨 위·가장 먼저 보이는 자리라 그 깜빡임이
     가장 눈에 띈다. 준비될 때까지 감춰 두고, script.php 가 <html> 에
     gthd_mi_ready 를 붙이면 드러낸다.
     폰트를 아예 못 받아도 1.5초 뒤에는 드러낸다 — 영원히 안 보이는
     것보다는 글자라도 보이는 편이 낫다. */
.gthd .gthd_mi,
.gthd_map .gthd_mi { visibility: hidden; }
html.gthd_mi_ready .gthd .gthd_mi,
html.gthd_mi_ready .gthd_map .gthd_mi { visibility: visible; }

/* 크기는 SVG 판과 눈으로 맞춘 값이다. 글리프는 상자 안에서 여백이
   조금 더 있어 같은 숫자면 작아 보이므로 2px 씩 키운다. */
/* ★ display 를 여기서 정하지 않는다.
     이 규칙은 여닫이 토글(.ic_close{display:none})과 특이도가 같고
     소스가 뒤라서, display 를 적는 순간 그 토글을 이겨 X 아이콘이
     항상 보이게 된다. 크기만 정하고 display 는 토글에 맡긴다. */
.gthd .gthd_ico .gthd_mi {
    font-size: var(--gthd-icosize, 26px);
    line-height: 1;
}
.gthd .gthd_txtico .gthd_mi { font-size: 17px; }
.gthd .gthd_tel .gthd_mi { font-size: 18px; }
.gthd .gthd_mymenu a .gthd_mi { font-size: 18px; }

.gthd .gthd_ico .gt_flip { transform: scaleX(-1); }

/* PC 전용 · 모바일 전용 */
.gthd .gthd_tog { display: none; }


/*───────────────────────────────────────────────────────────────
  6. 오른쪽 유틸
───────────────────────────────────────────────────────────────*/

/*── 안 읽음 표시 ──*/
.gthd .gthd_badge {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #e5484d;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}
.gthd .gthd_dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e5484d;
    box-shadow: 0 0 0 2px var(--gthd-bg);
}

/*── 전화번호 ──
   글자 크기는 설정(tel_size)으로 뺀다 — 0 으로 두면 유틸 글자
   크기(snb_size)를 그대로 따른다. */
.gthd .gthd_tel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gthd-fg);
    font-size: var(--gthd-telsize, var(--gthd-snbsize, 14px));
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
}
/* 아이콘은 글자보다 살짝 크게 — 같은 px 로 두면 글자에 묻힌다 */
.gthd .gthd_tel svg {
    width: calc(var(--gthd-telsize, var(--gthd-snbsize, 14px)) + 3px);
    height: calc(var(--gthd-telsize, var(--gthd-snbsize, 14px)) + 3px);
}
.gthd .gthd_tel .gthd_mi { font-size: calc(var(--gthd-telsize, var(--gthd-snbsize, 14px)) + 4px); }
.gthd .gthd_tel svg,
.gthd .gthd_tel .gthd_mi { color: var(--gthd-point); }
.gthd.gthd_over:not(.scrolling) .gthd_tel svg,
.gthd.gthd_over:not(.scrolling) .gthd_tel .gthd_mi { color: #fff; }

/*── CTA 버튼 ──*/
.gthd .gthd_cta {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 18px;
    border-radius: 19px;
    background: var(--gthd-point);
    color: #fff;
    font-size: var(--gthd-snbsize, 14px);
    font-weight: 700;
    white-space: nowrap;
    transition: opacity .2s ease;
}
.gthd .gthd_cta:hover { opacity: .86; }

/*── 글자 링크 방식 ──*/
.gthd .gthd_txt {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding-left: 0;    /* 간격은 .gthd_snb 의 gap 이 만든다 */
    padding-right: 0;
    color: var(--gthd-fg);
    font-size: var(--gthd-snbsize, 13px);
    white-space: nowrap;
}
.gthd .gthd_txt:hover { color: var(--gthd-point); }
.gthd.gthd_over:not(.scrolling) .gthd_txt:hover { color: #fff; opacity: .72; }
.gthd .gthd_txtico { display: inline-flex; }
.gthd .gthd_txtico svg { width: 16px; height: 16px; display: block; }

/*── 닉네임 · 포인트 ──*/
.gthd .gthd_meta { display: flex; align-items: center; }
.gthd .gthd_nick,
.gthd .gthd_point {
    padding: 0 6px;
    font-size: var(--gthd-snbsize, 14px);
    white-space: nowrap;
}
.gthd .gthd_nick { font-weight: 700; color: var(--gthd-fg); }
.gthd .gthd_point { color: var(--gthd-point); font-weight: 700; }
/* 투명(사진 위) 상태에서는 흰색으로 뒤집는다 */
.gthd.gthd_over:not(.scrolling) .gthd_point { color: #fff; }

/*── 회원 버튼 ──*/
.gthd .gthd_my_wrap,
.gthd .gthd_search_wrap { position: relative; }

/*── 회원 영역 세 가지 (snb_style) ──
   icon  아이콘만. 배경도 테두리도 없다 — 마우스를 올렸을 때만
         옅은 원이 깔린다(그 원은 각 헤더의 style.css 가 그린다)
   btn   지름이 고정된 원형 버튼. 옅은 배경이 "항상" 깔려서 멀리서도
         버튼으로 읽힌다. snb_ring 이 켜져 있으면 배경 대신 테두리
   text  글자 링크 (위 .gthd_txt) — 아이콘 버튼 자체가 없다

   ★ 예전에는 이 셋 중 icon 과 btn 이 겉보기로 구분되지 않았다.
     snb_ring 을 켠 경우에만 달라졌기 때문이다. */
.gthd.snb_btn .gthd_mytog {
    /* 지름은 아이콘 상자보다 커야 한 눈에 갈린다.
       ★ 두 값이 같으면(기본 38 = 38) 'icon' 과 겉보기가 똑같아진다.
         설정 snb_btn 을 아이콘 크기보다 6px 이상 크게 둔다. */
    width: var(--gthd-snbbtn, 44px);
    height: var(--gthd-snbbtn, 44px);
    background-color: rgba(127, 127, 127, .12);
}
/* 테두리는 gt_hd_B 와 같은 2px #CCC.
   얇은 구분선 색(--gthd-line)은 흰 배경에서 거의 안 보인다. */
.gthd.snb_btn.snb_ring .gthd_mytog {
    background-color: transparent;
    border: 2px solid var(--gthd-ring, #cccccc);
}
.gthd.gthd_over:not(.scrolling).snb_btn.snb_ring .gthd_mytog {
    border-color: var(--gthd-line-on, rgba(255, 255, 255, .55));
}
.gthd.snb_btn .gthd_mytog:hover { background-color: rgba(127, 127, 127, .2); }
.gthd.snb_btn.snb_ring .gthd_mytog:hover {
    background-color: transparent;
    border-color: var(--gthd-point);
}
.gthd.gthd_over:not(.scrolling).snb_btn .gthd_mytog { background-color: rgba(255, 255, 255, .2); }
.gthd.gthd_over:not(.scrolling).snb_btn.snb_ring .gthd_mytog { background-color: transparent; }

.gthd .gthd_mytog svg { width: 22px; height: 22px; }

/* 원형 버튼 안의 사진 — 테두리 안쪽을 꽉 채운다(gt_hd_B 와 같게).
   들여 놓으면 테두리와 사진 사이에 흰 띠가 생겨 원이 두 겹으로 보인다. */
.gthd.snb_btn .gthd_mytog .gthd_avatar { width: 100%; height: 100%; }

/*── 프로필 사진이 없을 때: 안쪽을 강조컬러로 채운다 ──
   ★ 선 아이콘만 두면 옆의 검색·3줄 버튼과 생김새가 같아서 "누르면
     로그인" 이라는 게 눈에 안 들어온다. 채운 원 하나로 갈린다.
   ::after 를 쓰는 이유 — ::before 는 각 헤더의 유틸 스킨이
   호버 원을 그리는 데 이미 쓰고 있다. */
/* ★ 원은 CSS 배경이 아니라 글리프(account_circle) 자체다.
     gt_hd_B 가 그렇게 만들어져 있다 — 35px 버튼에 32px 글리프,
     배경은 투명, 테두리만 2px #CCC.
     CSS 로 원을 그리고 그 위에 사람을 얹으면 크기·여백이 안 맞는다.

   글리프가 버튼을 거의 채우므로(32/35 ≒ .91) 그 비율로 그린다.
   ★ 클래스를 다섯 개 겹쳐 (0,5,1) 로 만든다. 각 헤더 style.css 의
     `.gthd.gthd_XX .gthd_snb .gthd_ico svg`(0,4,1)보다 높아야
     소스 순서와 무관하게 이긴다. */
.gthd .gthd_snb .gthd_ico.gthd_mytog.has_fill svg {
    width: calc(var(--gthd-snbbtn, 35px) * .91);
    height: calc(var(--gthd-snbbtn, 35px) * .91);
}
.gthd .gthd_mytog.has_fill svg,
.gthd .gthd_mytog.has_fill .gthd_mi { color: var(--gthd-point); }
.gthd .gthd_mytog.has_fill:hover svg,
.gthd .gthd_mytog.has_fill:hover .gthd_mi { opacity: .85; }

.gthd .gthd_avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;   /* 빼먹으면 세로로 긴 사진이 찌그러진다 */
    display: block;
}

/*── 드롭다운(검색 · 회원) 공통 ──
   위치를 여러 규칙이 나눠 갖지 않도록 이동량을 변수 하나로 뺀다.
   정렬을 바꾸는 곳은 --pop-x 한 줄만 고친다. */
.gthd .gthd_pop {
    --pop-x: -50%;

    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: 20;

    padding: 8px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .14);

    opacity: 0;
    visibility: hidden;
    transform: translate(var(--pop-x), 8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.gthd .gthd_pop.is_on {
    opacity: 1;
    visibility: visible;
    transform: translate(var(--pop-x), 0);
}

/* 마우스를 올리면 열리는 방식(설정 snb_open = 'hover').
   ★ CSS 로 여는 이유 — 마우스가 버튼과 메뉴 사이를 오갈 때 JS 로
     열고 닫으면 깜빡입니다. :hover 는 자식까지 포함하므로 그 틈이
     없습니다. 클릭 토글은 JS 가 그대로 함께 붙어 있습니다(터치 기기).
   버튼과 메뉴 사이 10px 틈은 .gthd_pop::before 가 덮습니다. */
.gthd.snb_hover .gthd_my_wrap:hover .gthd_pop,
.gthd.snb_hover .gthd_my_wrap:focus-within .gthd_pop {
    opacity: 1;
    visibility: visible;
    transform: translate(var(--pop-x), 0);
}
.gthd.snb_hover .gthd_my_wrap .gthd_pop::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}

/* ★ 팝업은 언제나 "버튼 한가운데" 에서 열린다.
     예전에는 오른쪽 끝 두 버튼만 오른쪽 정렬(right:0)로 예외를 뒀는데,
     그러면 회원 메뉴가 아이콘 왼쪽으로 치우쳐 열려서 어느 버튼에서
     나온 메뉴인지 한눈에 안 들어왔다.
     화면 밖으로 나가는 것은 script.php 가 실제 좌표를 재서 밀어 넣는다
     (CSS 로는 화면 폭을 알 수 없으므로 예외 규칙으로는 못 푼다). */

.gthd .gthd_mymenu { min-width: 168px; }
.gthd .gthd_mymenu a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: 8px;
    color: #25282b;
    font-size: 14px;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.gthd .gthd_mymenu a svg { width: 17px; height: 17px; }
.gthd .gthd_mymenu a svg,
.gthd .gthd_mymenu a .gthd_mi { flex: 0 0 auto; opacity: .6; }
.gthd .gthd_mymenu a:hover { background: rgba(0, 0, 0, .05); color: var(--gthd-point); }
.gthd .gthd_mymenu a:hover svg,
.gthd .gthd_mymenu a:hover .gthd_mi { opacity: 1; }

/*── 검색창 ──
   ★ 여기서 검색창을 그리지 않는다.
     리빌더 테마가 #search_box_wrap 을 이미 전부 스타일링해 두었다.
         rb.css/style.css   74~87줄  (PC · 폭 400px · 절대배치)
         rb.css/mobile.css  40~44줄  (1360px 이하 · position:fixed)
     구판 gt_hd_A 와 똑같은 마크업을 내보내므로 그 CSS 가 그대로
     걸린다. 여기에 규칙을 더 얹으면 테마 판과 이중으로 싸운다.

   아래 두 줄만 손본다 — 테마 CSS 가 아이콘 색을 고정색으로 박아 둔
   자리를 헤더의 글자색(강조컬러)에 맞춰 돌려놓는 것. */

/* 테마 CSS 에는 z-index 가 없다. 서브메뉴 카드(z-index:30)와 겹치는
   자리에서 검색창이 그 아래로 깔리는 것만 막는다. */
.gthd #search_box_wrap { z-index: 40; }

/* 열리는 방향. 테마 CSS 는 left:0 · width:400px 로 못 박아 두었는데,
   그건 검색 단추가 왼쪽에 있던 시절의 값이다. 지금은 오른쪽 유틸 줄
   안에 있어서, 그대로 두면 400px 짜리 판이 화면 오른쪽 밖으로 나가
   절반이 잘려 보인다. #header 는 position:fixed 라 가로 스크롤도
   생기지 않는다 — 그냥 안 보인다.
   ★ .gthd #search_box_wrap 은 (1,1,0), 테마는 (1,0,0) 이라 이긴다.
   ★ left:auto 를 반드시 함께 되돌린다. left 와 right 가 동시에
     잡히면 상자가 그 사이로 늘어나 width 가 무시된다.
   ★ 1360px 이하는 건드리지 않는다 — 그 폭에서는 테마의 mobile.css 가
     position:fixed · width:100% 로 화면 전체에 깔아 두었다. 여기서
     max-width 를 걸면 그 판이 어중간하게 좁아진다. */
@media all and (min-width: 1361px) {
    .gthd #search_box_wrap {
        left: auto;
        right: 0;
        max-width: calc(100vw - 32px);
    }
}

/* 열린 상태의 돋보기.
   테마: #search_top_btn.ser_open svg path { fill:#AA20FF }  (1,1,2)
   → 강조컬러를 안 쓰는 사이트에서도 보라색이 박혀 나온다.
   .gthd 를 한 겹 얹어 (1,2,2) 로 이기고 currentColor 로 되돌린다. */
.gthd #search_top_btn.ser_open svg path { fill: currentColor; }
.gthd #search_top_btn.ser_open { color: var(--gthd-point); }

/* 검색창 안쪽 제출 버튼. 테마가 !important 로 검정을 박아 두어
   특이도만으로는 못 이긴다 — 같은 !important 로 맞선다. */
.gthd #search_box_wrap ul button svg path { fill: currentColor !important; }
.gthd #search_box_wrap .ser_inner_btn { color: var(--gthd-point); }

/* 글리프(ico_font)로 그릴 때의 크기. 테마 CSS 는 SVG 만 상정한다. */
.gthd #search_top_btn .gthd_mi { font-size: var(--gthd-snbicomi, 22px); }
.gthd #search_box_wrap .ser_inner_btn .gthd_mi { font-size: 22px; }


/* ── 항목 사이 세로 구분선 (util_skin = 'line') ────────
   ★ border-left 로 그리면 선이 항목 높이(아이콘 상자 40px 안팎)를
     그대로 채워 지나치게 길어 보인다. 가운데 정렬한 가상요소로
     그려서 높이를 설정(util_line_h)으로 뺀다. 기본은 절반. */
.gthd.util_line .gthd_snb > li + li {
    position: relative;
    padding-left: var(--gthd-snbgap, 12px);
}
.gthd.util_line .gthd_snb > li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: var(--gthd-lineh, 50%);
    transform: translateY(-50%);
    border-left: 1px solid var(--gthd-line);
}

/* ── SNS 줄 ───────────────────────────────────────────
   리빌더 "하단 회사정보" 에 적어둔 SNS 주소를 그대로 씁니다.
   적어둔 것이 하나도 없으면 이 슬롯은 아무것도 그리지 않습니다. */
.gthd .gthd_sns {
    display: inline-flex;
    align-items: center;
    gap: var(--gthd-snsgap, 8px);
}
.gthd .gthd_sns a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--gthd-sns, 22px);
    height: var(--gthd-sns, 22px);
    opacity: .85;
    transition: opacity .18s ease, transform .18s ease;
}
.gthd .gthd_sns a:hover { opacity: 1; transform: translateY(-1px); }
.gthd .gthd_sns img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* 사진 위에서는 컬러 로고가 묻힌다 — 흰 실루엣으로 눕힌다.
   brightness(0) 로 먼저 새까맣게 만든 뒤 invert 해야 원색과 무관하게
   같은 흰색이 나온다(invert 만 쓰면 색마다 결과가 제각각이다). */
.gthd.gthd_over:not(.scrolling) .gthd_sns img { filter: brightness(0) invert(1); }

/* ── 전체메뉴 버튼에 글자를 붙였을 때(map_btn_label) ──
   ★ .gthd .gthd_ico 의 고정 width 를 풀어야 한다 — 안 풀면 글자가
     동그란 버튼 밖으로 삐져나온다. 특이도 (0,3,0) 으로 이긴다. */
.gthd .gthd_maptog.has_label {
    width: auto;
    gap: 6px;
    padding: 0 12px 0 10px;
    border-radius: 999px;
}
.gthd .gthd_maptog_txt {
    font-size: var(--gthd-snbsize, 14px);
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
    line-height: 1;
}


/*───────────────────────────────────────────────────────────────
  7. 전체메뉴 셸

  안쪽 내용은 각 헤더의 sitemap 파일과 style.css 가 그린다.
  여기서는 "어디에 어떻게 나타나는지" 만 정한다.
───────────────────────────────────────────────────────────────*/

/* 헤더 아래로 미끄러져 내려오는 패널.
   #header 가 position:fixed 이므로 그 안의 absolute 는 헤더 바로
   아래에 정확히 붙는다. (#header 에 overflow:visible 이 필요하다) */
.gthd_map.is_drop,
.gthd_map.is_classic {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 15;

    width: 100%;
    background: var(--gthd-mapbg, rgba(255, 255, 255, .97));
    -webkit-backdrop-filter: blur(var(--gthd-mapblur, 6px));
    backdrop-filter: blur(var(--gthd-mapblur, 6px));
    box-shadow: 0 18px 40px rgba(0, 0, 0, .12);

    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height .38s ease, opacity .28s ease, visibility .38s;
}
.gthd_map.is_drop.is_on,
.gthd_map.is_classic.is_on {
    max-height: 80vh;
    overflow: auto;
    opacity: 1;
    visibility: visible;
}

/* 화면을 덮는 전체화면 메뉴.
   ★ </header> 바깥에 둔다. 배경이 깔린 헤더에는 backdrop-filter 가
     걸리는데, 그 순간 #header 가 새 containing block 이 되어 안쪽의
     position:fixed 가 화면이 아니라 헤더 박스 기준으로 잡힌다. */
.gthd_map.is_full {
    position: fixed;
    /* inset 을 못 읽는 브라우저 대비로 낱개 속성을 먼저 적는다 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9950;

    background: var(--gthd-mapbg, rgba(23, 24, 26, .97));
    -webkit-backdrop-filter: blur(var(--gthd-mapblur, 6px));
    backdrop-filter: blur(var(--gthd-mapblur, 6px));

    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
}
.gthd_map.is_full.is_on { opacity: 1; visibility: visible; }


/*───────────────────────────────────────────────────────────────
  8. 화면 크기별

  ★ 여기서 #header 를 붙여 특이도를 (1,2,0) 으로 올린다.
    미디어쿼리는 특이도를 올려 주지 않으므로, 스킨이 대메뉴에
    클래스를 더 붙여 (0,3,0) 으로 만들어 두면 이 숨김 규칙이 진다.
    ID 는 클래스를 몇 개 붙여도 못 이기므로 이 방법이 확실하다.
    (실제로 겪은 함정이다 — "특정 설정을 켰을 때만 모바일에서
     PC 메뉴가 안 숨는다")
───────────────────────────────────────────────────────────────*/

/* 1361px 안전장치 — 가로폭 설정을 1600 등으로 올렸을 때
   .inner 가 화면보다 넓어져 가로 스크롤이 생기는 것을 막는다.
   1400 이하 설정에서는 조건이 성립하지 않아 아무 변화가 없다. */
@media all and (min-width: 1361px) {
    .gthd .gthd_bar { max-width: min(var(--gthd-inner, 1400px), calc(100% - 40px)); }
}

@media all and (max-width: 1360px) {

    /* PC 대메뉴를 숨기고 3줄 버튼을 꺼낸다 */
    #header.gthd .gthd_gnb { display: none; }
    #header.gthd .gthd_tog { display: block; }

    /* 이 구간의 PC 전용 항목 */
    #header.gthd .gthd_snb > li.pc,
    #header.gthd .gthd_maptog_wrap { display: none; }
    #header.gthd .gthd_snb > li.keep_mo { display: block; }

    .gthd .gthd_bar {
        height: var(--gthd-hmo, 60px);
        padding-left: var(--gthd-sidemo, 16px);
        padding-right: var(--gthd-sidemo, 16px);
    }
    .gthd.scrolling .gthd_bar { height: var(--gthd-hmo, 60px); }

    .gthd .gthd_logo img,
    .gthd.scrolling .gthd_logo img {
        max-height: var(--gthd-logomo, 34px);
        max-width: var(--gthd-logowmo, 170px);
    }

    .gthd .gthd_ico {
        width: var(--gthd-icoboxmo, 40px);
        height: var(--gthd-icoboxmo, 40px);
    }
    .gthd .gthd_mtog svg { width: var(--gthd-icosizemo, 30px); height: var(--gthd-icosizemo, 30px); }

    /* 2행 배치는 이 구간에서 의미가 없다 — 대메뉴가 숨으므로 */
    .gthd.hd_row2 .gthd_bar { flex-wrap: nowrap; height: var(--gthd-hmo, 60px); }
    .gthd.hd_row2 .gthd_left,
    .gthd.hd_row2 .gthd_snb { height: auto; }
}

/* 1025~1360px 에서 모바일 메뉴를 닫을 수 있게 되살린다.

   테마 rb.css/mobile.css 가 이 구간에서 닫기 버튼을 숨기는데,
   메뉴가 열리면 header.moves 로 헤더 자체가 화면 밖으로 나가
   여는 버튼까지 사라진다. 그러면 빠져나갈 방법이 없다.
   (테마 파일은 건드리지 않고 여기서만 되살린다) */
@media all and (min-width: 1025px) and (max-width: 1360px) {
    #m_gnb_close_btn.active { display: block !important; }
}

/* 휴대폰 — 좌우 여백과 보조 항목만 줄인다.
   ★ 여기서 로고를 다시 줄이지 않는다. 위에서 로고를 키워도
     휴대폰에서 도로 작아지는 일이 생긴다. */
@media all and (max-width: 500px) {
    .gthd .gthd_bar { gap: 8px; }
    /* 설정값을 무시하지 않고 비율로 줄인다 — 간격을 넉넉히 준
       사이트가 휴대폰에서만 다닥다닥 붙는 일이 없게 */
    .gthd .gthd_snb { gap: calc(var(--gthd-snbgap, 12px) * .5); }
    .gthd .gthd_left { gap: 6px; }
    .gthd .gthd_year_li { display: none; }
    /* 검색창은 여기서 손대지 않는다 — 테마 mobile.css 가 1360px 이하에서
       #search_box_wrap 을 position:fixed · width:100% 로 이미 바꾼다. */
}


/*───────────────────────────────────────────────────────────────
  9. 모션 최소화 존중
───────────────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
    .gthd,
    .gthd *,
    .gthd_map,
    .gthd_map * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}


/*───────────────────────────────────────────────────────────────
  10. 전체메뉴 안쪽 (classic / drop / full)

  ★ 헤더마다 복제하지 않는다. 전체메뉴는 어느 헤더에서든 같은 것이라
    헤더 폴더에 두면 헤더 수만큼 같은 CSS 가 생기고 한쪽만 고쳐진
    상태가 된다. 마크업은 gt_hd_core/sitemap.php 가 그린다.

  헤더별로 색·여백을 바꾸고 싶으면 각 style.css 에서
  `.gthd_map` 아래 토큰(--gthd-sm-*)만 덮어쓴다.
───────────────────────────────────────────────────────────────*/
/*───────────────────────────────────────────────────────────────
  7. 전체메뉴

  구판의 float + "100 / 개수 %" 를 grid 로 바꿨다. 메뉴가 많거나
  이름이 길어도 무너지지 않고, 화면이 좁아지면 칸 수가 줄어든다.
───────────────────────────────────────────────────────────────*/
.gthd_map {
    --gthd-sm-fg   : #25282b;
    /* ★ .58 은 흰 패널에서 너무 흐렸다(대비 약 3.3:1 — WCAG AA 4.5:1
         미달). .78 로 올려 본문 글씨로 읽히게 한다. 굵기는 설정
         map_weight 가 따로 잡는다. */
    --gthd-sm-dim  : rgba(37, 40, 43, .78);
    --gthd-sm-line : rgba(0, 0, 0, .08);
    --gthd-sm-point: var(--rb-point, var(--point-color, #25282b));
}

/* 어두운 스킨 — 강조컬러 대비값만 밝은 쪽으로 바꾼다.
   강조컬러를 안 쓰는 사이트에서 어두운 바탕에 검은 글씨가 되는
   것을 막는 유일한 장치다. */
.gthd_map.is_dark {
    --gthd-sm-fg   : #ffffff;
    --gthd-sm-dim  : rgba(255, 255, 255, .66);
    --gthd-sm-line : rgba(255, 255, 255, .14);
    --gthd-sm-point: var(--rb-point, var(--point-color, #ffffff));
}

/* ★ map_mode 가 'full' 이면 이 요소가 #header 바깥에 놓인다.
     core.css 의 `.gthd, .gthd *` 박스사이징을 물려받지 못하므로
     여기서 따로 건다. (안 걸면 좌우 여백만큼 폭이 넘친다) */
.gthd_map, .gthd_map * { box-sizing: border-box; }
.gthd_map { color: var(--gthd-sm-fg); }
.gthd_map a { text-decoration: none; color: inherit; }
.gthd_map ul, .gthd_map li { margin: 0; padding: 0; list-style: none; }

.gthd_map:not(.is_classic) .gthd_sm_in {
    width: 100%;
    max-width: var(--gthd-inner, 1400px);
    margin: 0 auto;
    padding: 40px var(--gthd-side, 40px) 46px;
}
.gthd_map.is_full .gthd_sm_in { padding-top: 110px; padding-bottom: 80px; }

.gthd_map:not(.is_classic) .gthd_sm_head { margin-bottom: 28px; }
.gthd_map:not(.is_classic) .gthd_sm_lead {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--gthd-sm-point);
}
.gthd_map:not(.is_classic) .gthd_sm_lead2 { margin: 0; font-size: 15px; color: var(--gthd-sm-dim); }

.gthd_map:not(.is_classic) .gthd_sm_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 26px 20px;
}

.gthd_map:not(.is_classic) .gthd_sm_1st {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gthd-sm-line);
    font-size: var(--gthd-map1st, 18px);
    font-weight: 700;
    letter-spacing: -.02em;
}
.gthd_map:not(.is_classic) .gthd_sm_num {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--gthd-sm-point);
}
.gthd_map:not(.is_classic) .gthd_sm_col.is_on .gthd_sm_1st > a { color: var(--gthd-sm-point); }
.gthd_map:not(.is_classic) .gthd_sm_1st > a:hover { color: var(--gthd-sm-point); }

/* ★ 리스트 리셋(.gthd ul,li)이 (0,1,1) 이라, 여백을 주는 규칙은
     클래스를 두 개 이상 붙여 특이도를 올려 둔다. 안 그러면 값은
     분명히 넣었는데 화면이 다닥다닥 붙어 나온다. */
.gthd_map:not(.is_classic) .gthd_sm_list { margin: 0; padding: 0; list-style: none; }
.gthd_map:not(.is_classic) .gthd_sm_list > li { margin-bottom: 2px; }

.gthd_map:not(.is_classic) .gthd_sm_list a {
    position: relative;
    display: block;
    padding: 5px 0 5px 0;
    color: var(--gthd-sm-dim);
    font-size: var(--gthd-mapsize, 15px);
    font-weight: var(--gthd-mapw, 400);
    line-height: 1.5;
    transition: color .18s ease, padding-left .18s ease;
}

/* 밀려나기만으로는 어느 줄을 짚었는지 한눈에 안 들어온다.
   강조컬러 + 왼쪽 짧은 막대를 함께 준다. */
.gthd_map:not(.is_classic) .gthd_sm_list a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 2px;
    margin-top: -1px;
    background: var(--gthd-sm-point);
    transition: width .18s ease;
}
.gthd_map:not(.is_classic) .gthd_sm_list a:hover,
.gthd_map:not(.is_classic) .gthd_sm_list a:focus-visible,
.gthd_map:not(.is_classic) .gthd_sm_list a.is_on { color: var(--gthd-sm-point); }
.gthd_map:not(.is_classic) .gthd_sm_list a:hover::before,
.gthd_map:not(.is_classic) .gthd_sm_list a:focus-visible::before,
.gthd_map:not(.is_classic) .gthd_sm_list a.is_on::before { width: 10px; }
.gthd_map:not(.is_classic) .gthd_sm_list a:hover,
.gthd_map:not(.is_classic) .gthd_sm_list a:focus-visible,
.gthd_map:not(.is_classic) .gthd_sm_list a.is_on { padding-left: 16px; }

.gthd_map:not(.is_classic) .gthd_sm_list .gnb_new_ico {
    display: inline-block;
    margin-left: 4px;
    padding: 0 4px;
    border-radius: 3px;
    background-color: var(--gthd-sm-point) !important;
    color: #fff;
    font-size: 9px;
    line-height: 15px;
    vertical-align: middle;
}

/*── 하단 회사정보 ──*/
.gthd_map:not(.is_classic) .gthd_sm_info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;

    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--gthd-sm-line);
}

.gthd_map:not(.is_classic) .gthd_sm_biz {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--gthd-sm-dim);
}
.gthd_map:not(.is_classic) .gthd_sm_biz > li { display: inline-flex; align-items: center; }

/* 라벨 뒤 구분자. b 를 inline-block 으로 두면 가상요소 끝 공백이
   잘려 '상호 :값' 이 되므로, 공백을 줄바꿈 안 되는 공백으로 못박는다. */
.gthd_map:not(.is_classic) .gthd_sm_biz b { font-weight: 700; color: var(--gthd-sm-fg); }
.gthd_map:not(.is_classic) .gthd_sm_biz b::after { content: "\00a0:\00a0"; font-weight: 400; }

/* 구분선은 앞 항목의 ::after 로 그린다. li+li::before 절대배치로
   그리면 줄바꿈됐을 때 다음 줄이 막대로 시작한다. */
.gthd_map:not(.is_classic) .gthd_sm_biz > li:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    margin: 0 14px;
    vertical-align: -1px;
    background: currentColor;
    opacity: .3;
}

/*── SNS ──
   sns_g 의 g_* 파일은 이름과 달리 브랜드 컬러 원형 배지다.
   무채색 패널에 그냥 넣으면 그 부분만 튄다. */
.gthd_map:not(.is_classic) .gthd_sm_sns { display: flex; align-items: center; gap: 6px; }
.gthd_map:not(.is_classic) .gthd_sm_sns a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: transform .18s ease;
}
.gthd_map:not(.is_classic) .gthd_sm_sns img {
    width: 22px;
    height: 22px;
    filter: grayscale(1);
    opacity: .5;
    transition: filter .18s ease, opacity .18s ease;
}
.gthd_map.is_dark .gthd_sm_sns img { filter: grayscale(1) brightness(1.7); opacity: .6; }

/* ★ 변형 규칙(.is_dark)은 클래스가 하나 더 붙어 특이도가 자연히
     높아진다. 그래서 호버 규칙도 같은 만큼 올려 두 벌을 적는다.
     한 벌만 두면 한쪽 스킨에서만 오버가 조용히 죽는다. */
.gthd_map:not(.is_classic) .gthd_sm_sns a:hover img          { filter: none; opacity: 1; }
.gthd_map.is_dark .gthd_sm_sns a:hover img  { filter: none; opacity: 1; }
.gthd_map:not(.is_classic) .gthd_sm_sns a:hover              { transform: translateY(-2px); }

/* 초점 표시 — 원형 요소에 outline 을 주면 네모난 선이 그려진다 */
.gthd_map:not(.is_classic) .gthd_sm_sns a:focus { outline: none; }
.gthd_map:not(.is_classic) .gthd_sm_sns a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--gthd-sm-fg); }


/*───────────────────────────────────────────────────────────────
  7-b. 전체메뉴 — classic (map_mode = 'classic')

  구판 gt_hd_A 의 #gt_fullmenu 를 옮긴 판이다.
  위에 옅은 회색 로고 띠, 그 아래 대메뉴 칸을 같은 폭으로 나누고
  글자를 가운데 정렬한다.

  구판과 다른 점은 칸 나누기뿐이다 — float + "100 / 개수 %" 를 grid 로
  바꿨다. 메뉴가 많거나 이름이 길면 무너지던 것만 없앴고 보이는 모양은
  그대로다.
───────────────────────────────────────────────────────────────*/
/*── 전체메뉴 정렬 (설정 map_align) ──
   ★ 대메뉴와 하위를 반드시 같은 쪽으로 맞춘다. 한쪽만 가운데면
     칸이 통째로 어긋나 보인다.
     (drop · full 은 왼쪽 정렬이 설계라 이 설정을 따르지 않는다 —
      하위 항목의 왼쪽 강조막대가 가운데 정렬과 맞지 않는다) */
.gthd_map.is_classic.sm_center .gthd_sm_col { text-align: center; }
.gthd_map.is_classic.sm_center .gthd_sm_sub { align-items: center; }
.gthd_map.is_classic.sm_left   .gthd_sm_col { text-align: left; }
.gthd_map.is_classic.sm_left   .gthd_sm_sub { align-items: flex-start; }

/*── 화면을 덮는 방식의 닫기 버튼 ──
   이 패널은 z-index 가 헤더보다 높아 3줄 버튼을 덮는다. 눈에 보이는
   출구가 없으면 열고 나서 빠져나갈 방법이 없다. */
.gthd_map .gthd_sm_close {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;

    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--gthd-sm-fg);
    transition: background-color .18s ease, color .18s ease;
}
.gthd_map .gthd_sm_close svg { width: 24px; height: 24px; display: block; }
.gthd_map .gthd_sm_close:hover {
    background: rgba(127, 127, 127, .18);
    color: var(--gthd-sm-point);
}
.gthd_map .gthd_sm_close:focus { outline: none; }
.gthd_map .gthd_sm_close:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--gthd-sm-fg); }

@media all and (max-width: 500px) {
    .gthd_map .gthd_sm_close { top: 12px; right: 12px; width: 40px; height: 40px; }
}

.gthd_map.is_classic { background: #fff; }

.gthd_map.is_classic .gthd_sm_top {
    padding: 34px 20px;
    background: #f3f3f3;
    text-align: center;
    line-height: 0;
}
.gthd_map.is_classic .gthd_sm_top img {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 250px;
    max-height: 46px;
}

.gthd_map.is_classic .gthd_sm_cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 34px 10px;

    width: 100%;
    max-width: var(--gthd-inner, 1400px);
    margin: 0 auto;
    padding: 50px var(--gthd-side, 40px) 60px;
}

.gthd_map.is_classic .gthd_sm_col { text-align: center; min-width: 0; }

.gthd_map.is_classic .gthd_sm_1st {
    margin: 0 0 18px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.3;
}
.gthd_map.is_classic .gthd_sm_1st > a { color: var(--gthd-sm-fg); transition: color .18s ease; }

/* 칸 안 어디에 마우스를 올려도 그 칸의 대메뉴가 강조컬러가 된다.
   구판은 하위에 올릴 때 JS 로 .red 를 토글했는데, 칸 hover 로 하면
   같은 결과를 CSS 만으로 얻는다(대메뉴 자체에 올려도 켜진다). */
.gthd_map.is_classic .gthd_sm_col:hover .gthd_sm_1st > a,
.gthd_map.is_classic .gthd_sm_col.is_on .gthd_sm_1st > a { color: var(--gthd-sm-point); }

.gthd_map.is_classic .gthd_sm_sub {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* 하위 항목 — 마우스를 올리면 강조컬러 알약.
   ★ padding 을 hover 에서 처음 주면 글자가 옆으로 밀린다.
     처음부터 같은 좌우 여백을 두고 배경만 나타나게 한다.
     (구판은 hover 에서 padding:0 15px 을 처음 줘서 글자가 밀렸다) */
.gthd_map.is_classic .gthd_sm_sub > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    padding: 6px 15px;
    border-radius: 20px;

    color: var(--gthd-sm-dim);
    font-size: var(--gthd-mapsize, 15px);
    font-weight: var(--gthd-mapw, 400);
    line-height: 1.4;
    transition: color .18s ease, background-color .18s ease;
}
.gthd_map.is_classic .gthd_sm_sub > a:hover,
.gthd_map.is_classic .gthd_sm_sub > a:focus-visible,
.gthd_map.is_classic .gthd_sm_sub > a.is_on {
    background: var(--gthd-sm-point);
    color: #fff;
}

.gthd_map.is_classic .gthd_sm_sub .gnb_new_ico {
    display: inline-block;
    padding: 0 4px;
    border-radius: 3px;
    background-color: var(--gthd-sm-point) !important;
    color: #fff;
    font-size: 9px;
    line-height: 15px;
}
.gthd_map.is_classic .gthd_sm_sub > a:hover .gnb_new_ico,
.gthd_map.is_classic .gthd_sm_sub > a.is_on .gnb_new_ico {
    background-color: #fff !important;
    color: var(--gthd-sm-point);
}




/* 화면 크기별 — 전체메뉴 */
/* 1361px 안전장치 — 가로폭 설정을 1600 등으로 올렸을 때
   전체메뉴 안쪽이 화면보다 넓어지는 것을 막는다.
   1400 이하 설정에서는 조건이 성립하지 않아 아무 변화가 없다. */
@media all and (min-width: 1361px) {
    .gthd_map:not(.is_classic) .gthd_sm_in { max-width: min(var(--gthd-inner, 1400px), calc(100% - 40px)); }
}
    .gthd_map.is_full .gthd_sm_in { padding-top: 92px; }
    .gthd_map:not(.is_classic) .gthd_sm_in {
        padding-left: var(--gthd-sidemo, 16px);
        padding-right: var(--gthd-sidemo, 16px);
    }

@media all and (max-width: 500px) {
    .gthd_map.is_classic .gthd_sm_top { padding-top: 22px; padding-bottom: 22px; }
    .gthd_map.is_classic .gthd_sm_cols {
        grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
        gap: 24px 8px;
        padding-top: 30px;
        padding-bottom: 34px;
    }
    .gthd_map.is_classic .gthd_sm_1st { font-size: 17px; margin-bottom: 12px; }
    .gthd_map.is_classic .gthd_sm_sub > a { font-size: calc(var(--gthd-mapsize, 15px) * .9); }

    .gthd_map:not(.is_classic) .gthd_sm_in { padding-top: 26px; padding-bottom: 30px; }
    .gthd_map.is_full .gthd_sm_in { padding-top: 84px; }
    .gthd_map:not(.is_classic) .gthd_sm_grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 20px 14px; }
    .gthd_map:not(.is_classic) .gthd_sm_1st { font-size: calc(var(--gthd-map1st, 18px) * .85); }
    .gthd_map:not(.is_classic) .gthd_sm_list a { font-size: calc(var(--gthd-mapsize, 15px) * .85); }
    .gthd_map:not(.is_classic) .gthd_sm_info { justify-content: flex-start; }
}